/* =========================================================
   RIGHT SIDEBAR — SKIN ONLY (NO PAGE LAYOUT RULES)
   Layout is owned by rk-layout.css
   ========================================================= */

/* =========================================================
   TOOLBAR - SKIN ONLY
   ========================================================= */
.rk-rs-toolbar {
  margin: 12px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--rk-soft);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(2,6,23,.04);
  min-height: 44px !important;
  height: 44px !important;
  box-sizing: border-box !important;
}

#rkRightSidebar.rk-fixed .rk-rs-toolbar {
  margin-top: 12px !important;
}

/* Icon slots */
.rk-icon-slot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Icon visibility states */
#rkRightSidebar:not(.rk-auto-on) #rkIconLeft {
  visibility: hidden !important;
  opacity: 0 !important;
  width: 18px !important;
  height: 18px !important;
}
#rkRightSidebar.rk-auto-on #rkIconLeft {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Right slot button */
#rkIconBtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 0;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
}
#rkIconBtn:hover { background: transparent !important; }
#rkIconBtn:hover #rkRefreshIcon { color: #2563eb !important; }

/* Right slot visibility */
#rkRightSidebar.rk-auto-on #rkIconBtn {
  visibility: hidden !important;
  opacity: 0 !important;
  width: 20px !important;
  height: 20px !important;
  position: relative !important;
  display: inline-flex !important;
}
#rkRightSidebar:not(.rk-auto-on) #rkIconBtn {
  visibility: visible !important;
  opacity: 1 !important;
}

/* Auto label - FONTS PRESERVED */
#rkAutoLabel {
  white-space: nowrap;
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .11px;
  line-height: 1;
  color: var(--rk-muted);
  text-shadow: 0 0 0.5px rgba(255,255,255,0.8);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}
#rkRightSidebar.rk-auto-on #rkAutoLabel { color: var(--rk-text); }

/* Toolbar frame */
#rkRightSidebar.rk-auto-on .rk-rs-toolbar {
  border: 1px solid rgba(15,23,42,.08) !important;
  box-shadow: 0 1px 0 rgba(2,6,23,.04) !important;
}

/* Refresh icon */
#rkRefreshIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  line-height: 1;
  color: #3b82f6;
  transition: color 0.2s ease;
}
#rkRightSidebar.rk-auto-on #rkRefreshIcon {
  color: #10b981;
  animation: rk-spin 1s linear infinite;
}
@keyframes rk-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Switch toggle */
.rk-switch {
  margin-left: auto;
  position: relative;
  width: 44px;
  height: 22px;
}
.rk-switch input { display: none; }
.rk-slider {
  position: absolute;
  inset: 0;
  background: #e5e7eb;
  border-radius: 999px;
  transition: .2s;
}
.rk-slider:before {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  left: 2px;
  top: 2px;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transition: .2s;
}
.rk-switch input:checked + .rk-slider { background: #10b981; }
.rk-switch input:checked + .rk-slider:before { transform: translateX(22px); }

/* =========================================================
   SIDEBAR BODY AREA - SKIN ONLY
   ========================================================= */
.rk-rs-body {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 12px 12px 12px;
}

/* Hide floating bell */
.rk-right-fab { display: none !important; }

/* =========================================================
   GROUP CARDS - SKIN ONLY - COLORS/GRADIENTS PRESERVED
   ========================================================= */
.rk-groups {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 0;
}

.rk-group {
  background: #fff;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 16px;
  box-shadow: 0 10px 24px rgba(2,6,23,.06);
  overflow: hidden;
}

.rk-group-hd {
  padding: 14px 14px 10px 14px;
  font-size: 14.3px;
  font-weight: 600;
  letter-spacing: .165px;
  color: #0f172a;
  line-height: 1.25;
  text-shadow: 0 0 0.5px rgba(255,255,255,0.8);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: lining-nums;
}

.rk-group-bd {
  padding: 10px 12px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Group border color variants - KEPT ORIGINAL */
.rk-group--danger {
  border-color: rgba(239,68,68,.35);
  box-shadow: 0 10px 24px rgba(239,68,68,.10);
}
.rk-group--accent {
  border-color: rgba(59,130,246,.30);
  box-shadow: 0 10px 24px rgba(59,130,246,.10);
}
.rk-group--lead {
  border-color: rgba(16,185,129,.30);
  box-shadow: 0 10px 24px rgba(16,185,129,.10);
}
.rk-group--quick {
  border-color: rgba(245,158,11,.30);
  box-shadow: 0 10px 24px rgba(245,158,11,.10);
}
.rk-group--comm {
  border-color: rgba(168,85,247,.28);
  box-shadow: 0 10px 24px rgba(168,85,247,.10);
}

/* =========================================================
   CHIP BUTTONS - SKIN ONLY - COLORS/GRADIENTS PRESERVED
   ========================================================= */
.rk-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border-radius: 10px;
  border: 1px solid var(--rk-chip-border);
  cursor: pointer;
  text-align: left;
  transform: translateZ(0);
  backface-visibility: hidden;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease;
  background: #fff;
}

/* Chip color variants - KEPT ORIGINAL */
.rk-chip--red,
.rk-chip--amber,
.rk-chip--green,
.rk-chip--blue,
.rk-chip--purple,
.rk-chip--pink {
  background: #fff !important;
  border-color: rgba(15,23,42,.12) !important;
}

/* Critical actions - ORIGINAL COLORS PRESERVED */
.rk-group--danger .rk-chip--red {
  background: rgba(239,68,68,.07) !important;
  border-color: rgba(239,68,68,.22) !important;
}
.rk-group--danger .rk-chip-ico { display: inline-flex !important; }
.rk-group--danger .rk-chip { gap: 10px; }

/* Portal requests - ORIGINAL COLORS PRESERVED */
.rk-group--accent .rk-chip {
  background: rgba(59,130,246,.08) !important;
  border-color: rgba(59,130,246,.22) !important;
}

/* Hover effects - DEEPER COLORS */
.rk-chip:hover {
  transform: translate3d(0,-1px,0);
  box-shadow: var(--rk-chip-hover-shadow);
  background: #fbfdff;
}

/* Group-specific hovers - DEEPER COLORS */
.rk-group--danger .rk-chip--red:hover {
  background: rgba(239,68,68,.18) !important;
  border-color: rgba(239,68,68,.40) !important;
}
.rk-group--lead .rk-chip:hover {
  background: rgba(16,185,129,.20) !important;
  border-color: rgba(16,185,129,.40) !important;
}
.rk-group--quick .rk-chip:hover {
  background: rgba(245,158,11,.22) !important;
  border-color: rgba(245,158,11,.42) !important;
}
.rk-group--comm .rk-chip:hover {
  background: rgba(168,85,247,.22) !important;
  border-color: rgba(168,85,247,.42) !important;
}
.rk-group--accent .rk-chip:hover {
  background: rgba(59,130,246,.20) !important;
  border-color: rgba(59,130,246,.40) !important;
}

.rk-chip:active { transform: translate3d(0,0,0); }
.rk-chip:focus { outline: none; }
.rk-chip:focus-visible {
  box-shadow: 0 0 0 3px rgba(16,185,129,.18), var(--rk-chip-hover-shadow);
}

/* Chip icon */
.rk-chip-ico {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
}
.rk-chip-ico i {
  font-size: 18px;
  line-height: 1;
  display: inline-block;
  transform: translateZ(0);
}

/* =========================================================
   CLEAN ICON STYLING - BASED ON YOUR HTML STRUCTURE
   ========================================================= */

/* Critical Actions Group */
.rk-group--danger .rk-chip--red .rk-chip-ico i {
  font-family: 'lucide' !important;
}

/* Academic Alerts - First red chip */
.rk-group--danger .rk-chip--red:nth-child(1) .rk-chip-ico i::before {
  content: "\e205" !important; /* alert-triangle */
  color: #ea137b !important; /* bright red */
}

/* Suspicious Leave - Second red chip */
.rk-group--danger .rk-chip--red:nth-child(2) .rk-chip-ico i::before {
  content: "\e0e2" !important; /* alert-triangle */
  color: #cd3062 !important; /* dark yellow/brown */
}

/* Student Absence - Third red chip */
.rk-group--danger .rk-chip--red:nth-child(3) .rk-chip-ico i::before {
  content: "\e47a" !important; /* alert-triangle */
  color: #e9a64a !important; /* dark red */
}

/* Lead & Trial Management Group */
.rk-group--lead .rk-chip .rk-chip-ico i {
  font-family: 'lucide' !important;
}

/* Leads Management - First chip in lead group */
.rk-group--lead .rk-chip:nth-child(1) .rk-chip-ico i::before {
  content: "\e081" !important; /* users (contact sign) */
  color: #1ba24f !important; /* dark elegant blue */
}

/* Trial Management - Second chip in lead group */
.rk-group--lead .rk-chip:nth-child(2) .rk-chip-ico i::before {
  content: "\e074" !important; /* calendar */
  color: #22c55e !important; /* green */
}

/* Quick Actions Group */
.rk-group--quick .rk-chip .rk-chip-ico i {
  font-family: 'lucide' !important;
}

/* Unassigned - First chip in quick group */
.rk-group--quick .rk-chip:nth-child(1) .rk-chip-ico i::before {
  content: "\e461" !important; /* user */
  color: #3b82f6 !important; /* blue */
}

/* Late Alerts - Second chip in quick group */
.rk-group--quick .rk-chip:nth-child(2) .rk-chip-ico i::before {
  content: "\e08b" !important; /* alert-triangle */
  color: #854d0e !important; /* dark brown yellow */
}

/* Reminders - Third chip in quick group */
.rk-group--quick .rk-chip:nth-child(3) .rk-chip-ico i::before {
  content: "\e059" !important; /* bell */
  color: #cf1992 !important; /* elegant dark green */
}

/* Dues Alerts - Fourth chip in quick group */
.rk-group--quick .rk-chip:nth-child(4) .rk-chip-ico i::before {
  content: "\e0b1" !important; /* dollar-sign */
  color: #22c55e !important; /* green */
}

/* Feedback - Fifth chip in quick group */
.rk-group--quick .rk-chip:nth-child(5) .rk-chip-ico i::before {
  content: "\e116" !important; /* message-circle */
  color: #ec4899 !important; /* pink */
}

/* Communication Group */
.rk-group--comm .rk-chip .rk-chip-ico i {
  font-family: 'lucide' !important;
}

/* Team Chat - First chip in comm group */
.rk-group--comm .rk-chip:nth-child(1) .rk-chip-ico i::before {
  content: "\e117" !important; /* message-square */
  color: #9333ea !important; /* purple */
}

/* Teacher Change - If it exists in quick group */
.rk-group--quick .rk-chip:nth-child(6) .rk-chip-ico i::before {
  content: "\e47a" !important; /* user-plus */
  color: #c2410c !important; /* dark orange */
}

/* Time Change - If it exists in quick group */
.rk-group--quick .rk-chip:nth-child(7) .rk-chip-ico i::before {
  content: "\e087" !important; /* clock */
  color: #db2777 !important; /* pink */
}

/* Leave Request - If it exists in quick group */
.rk-group--quick .rk-chip:nth-child(8) .rk-chip-ico i::before {
  content: "\e0cc" !important; /* file-text */
  color: #84cc16 !important; /* light green */
}

/* Chip label - FONTS PRESERVED */
.rk-chip-label {
  flex: 1 1 auto;
  font-size: 13.2px;
  font-weight: 600;
  letter-spacing: .11px;
  color: #0f172a;
  line-height: 1.15;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0 0.5px rgba(255,255,255,0.8);
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-variant-numeric: lining-nums;
}

/* Badge/count - FONTS PRESERVED */
.rk-chip-badge {
  flex: 0 0 auto;
  padding: 0 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13.2px;
  font-weight: 700;
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums lining-nums;
  background: transparent !important;
  border-radius: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  -webkit-font-smoothing: subpixel-antialiased;
  -moz-osx-font-smoothing: auto;
  text-rendering: geometricPrecision;
  text-shadow: 0 0 0.5px rgba(255,255,255,0.8);
  transform: none !important;
  min-width: auto !important;
  height: auto !important;
}

/* Zero count styling */
.rk-chip-badge[data-count="0"],
.rk-chip-badge.is-zero {
  color: var(--rk-alarm) !important;
}

/* Count color variants - KEPT ORIGINAL */
.rk-badge-red:not([data-count="0"]):not(.is-zero) { color: #b91c1c !important; }
.rk-badge-amber:not([data-count="0"]):not(.is-zero) { color: #92400e !important; }
.rk-badge-blue:not([data-count="0"]):not(.is-zero) { color: #1d4ed8 !important; }
.rk-badge-green:not([data-count="0"]):not(.is-zero) { color: #065f46 !important; }
.rk-badge-purple:not([data-count="0"]):not(.is-zero) { color: #6d28d9 !important; }

/* =========================================================
   ICON COLOR FIXES - MINIMAL VERSION
   ========================================================= */
#rkRightSidebar [class^="icon-"]::before,
#rkRightSidebar [class*=" icon-"]::before,
#rkRightSidebar i[class^="icon-"],
#rkRightSidebar i[class*=" icon-"] {
  font-family: 'lucide' !important;
}

/* Remove all color overrides - let your specific icon colors work */

/* Disabled state */
.rk-chip.is-disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Text sharpness */
#rkRightSidebar,
#rkRightSidebar * {
  -webkit-font-smoothing: subpixel-antialiased !important;
  -moz-osx-font-smoothing: auto !important;
  text-rendering: geometricPrecision !important;
}

/* =========================================================
   NO LAYOUT CODE HERE - ALL LAYOUT IN RK-LAYOUT.CSS
   ========================================================= */
   /* =========================================================
   LOADING SPINNER FOR CHIPS (ADD THIS AT THE END)
   ========================================================= */
.rk-chip--loading {
  position: relative;
  pointer-events: none;
  opacity: 0.7;
}

.rk-chip--loading .rk-chip-label,
.rk-chip--loading .rk-chip-badge {
  opacity: 0.3;
}

.rk-chip--loading::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  border: 2px solid rgba(239, 68, 68, 0.2);
  border-top-color: #ef4444;
  border-radius: 50%;
  animation: chipSpin 0.6s linear infinite;
}

@keyframes chipSpin {
  to { transform: translateY(-50%) rotate(360deg); }
  /* =========================================================
   RK SIDEBAR SVG ICONS (Lucide-free)
   ========================================================= */

.rk-ico,
.rk-chip-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.rk-ico svg,
.rk-chip-ico svg {
  width: 18px;
  height: 18px;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.rk-chip-ico {
  flex: 0 0 auto;
}

/* if your current CSS already has these tone classes, keep them;
   if not, these are safe defaults */
.rs-danger { color: #dc2626; }
.rs-warn   { color: #d97706; }
.rs-ok     { color: #059669; }
.rs-muted  { color: #475569; }
}

/* Header Communication Icons / Pill Buttons */
.lms-hdr-comm-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 16px;
  background: #f1f5f9;
  color: #0f172a;
  font-size: 12px;
  font-weight: 700;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  margin-right: 8px;
  white-space: nowrap;
  transition: all 0.18s ease;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lms-hdr-comm-btn:hover {
  background: #008069;
  color: #ffffff;
  border-color: #006e5a;
  transform: translateY(-1px);
}

.lms-hdr-comm-btn:active {
  transform: scale(0.96);
}

.lms-hdr-comm-btn svg {
  flex-shrink: 0;
  stroke: currentColor;
}

.lms-hdr-badge {
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  background: #ef4444;
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border: 2px solid #ffffff;
}

.lms-hdr-badge.is-zero {
  display: none;
}

/* Native APEX / V0 user control — match Chat/Alerts pills */
.lms-hdr-user-btn,
.t-Button.lms-hdr-user-btn,
#apex_user.lms-hdr-user-btn,
#v0-user-profile.lms-hdr-user-btn {
  min-width: 0;
  max-width: 180px;
  height: 36px;
  padding: 0 12px;
  margin: 0;
  border-radius: 18px;
  border: 1px solid #d8dee9;
  background: #f8fafc;
  color: #0f172a;
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.lms-hdr-user-btn:hover,
#apex_user.lms-hdr-user-btn:hover,
#v0-user-profile.lms-hdr-user-btn:hover {
  background: #008069;
  border-color: #006e5a;
  color: #fff;
}

.lms-hdr-user-btn .lms-hdr-user-icon,
.lms-hdr-user-btn svg {
  flex-shrink: 0;
}

.lms-hdr-user-nav-item {
  display: inline-flex !important;
  align-items: center;
}

.lms-hdr-user-nav-item .a-Menu-statusCol,
.lms-hdr-user-btn .t-Icon,
.lms-hdr-user-btn .a-Icon {
  display: none !important;
}

.v0-user-actions #lmsHdrCommContainer {
  order: -1;
  margin-right: 8px;
  margin-left: 0;
}

.v0-user-actions #v0-notifications-btn,
.v0-user-actions #v0-settings-btn {
  display: none !important;
}

#v0-user-profile.lms-hdr-user-btn .v0-user-role {
  display: none;
}

#v0-user-profile.lms-hdr-user-btn .v0-user-name {
  font-size: 12px;
  font-weight: 700;
  color: inherit;
}