/* TAMASYA v122 UI simplification layer. Presentation-only; business routes remain unchanged. */
.ui-v122-group-member { display:none !important; }
.ui-v122-system-operation { opacity:.72; border-style:dashed !important; }
.ui-v122-system-operation:hover,.ui-v122-system-operation[data-active="true"] { opacity:1; }

.ui-v122-group-button {
  color:#94a3b8;
  border:1px solid transparent;
  background:transparent;
  transition:background-color .14s,border-color .14s,color .14s !important;
}
.ui-v122-group-button:hover { color:#e2e8f0; background:rgba(255,255,255,.045); }
.ui-v122-group-button[data-active="true"] {
  color:#a7f3d0 !important;
  background:rgba(16,185,129,.09) !important;
  border-color:rgba(52,211,153,.22) !important;
  box-shadow:none !important;
}
.ui-v122-group-icon { font-size:13px; line-height:1; filter:saturate(.8); }
.ui-v122-chevron { margin-left:2px; color:#64748b; font-size:11px; }

.ui-v122-dropdown {
  position:fixed;
  z-index:120;
  padding:7px;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.22);
  background:#0f172a;
  box-shadow:0 18px 44px rgba(2,6,23,.52);
}
.ui-v122-dropdown-item {
  display:block;
  width:100%;
  border:0;
  border-radius:9px;
  padding:9px 10px;
  background:transparent;
  color:#cbd5e1;
  font-size:12px;
  font-weight:650;
  text-align:left;
  cursor:pointer;
}
.ui-v122-dropdown-item:hover { background:rgba(255,255,255,.055); color:#f8fafc; }
.ui-v122-dropdown-item[data-active="true"] { background:rgba(16,185,129,.11); color:#a7f3d0; }
.ui-v122-dropdown-divider {
  margin:7px 5px 3px;
  padding-top:7px;
  border-top:1px solid rgba(148,163,184,.14);
  color:#64748b;
  font-size:9px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

/* One clear active-state treatment instead of gradient + shadow + underline + border at once. */
.nav-tab:before { display:none !important; }
.nav-tab:after {
  inset:auto 16px 1px !important;
  height:2px !important;
  background:#34d399 !important;
}
.nav-tab:hover:after { transform:scaleX(0) !important; }
.nav-tab[data-active="true"]:after { transform:scaleX(1) !important; }
.nav-tab[data-active="true"] {
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:none !important;
}
.nav-scroll {
  background:#0b1220 !important;
  box-shadow:inset 0 1px rgba(255,255,255,.035) !important;
}

/* Reduce decorative motion; retain feedback without moving layout. */
.glass-card-hover,.interactive-card { transition:background-color .14s,border-color .14s,box-shadow .14s !important; }
.glass-card-hover:hover,.interactive-card:hover { transform:none !important; box-shadow:0 12px 30px rgba(2,6,23,.28) !important; }
button:not(:disabled):active { transform:scale(.99) !important; }
.page-enter,.animate-fade-in { animation-duration:.11s !important; }

.ui-v122-operations-note {
  margin:12px 0 0;
  padding:8px 11px;
  border:1px solid rgba(56,189,248,.14);
  border-radius:10px;
  background:rgba(14,165,233,.055);
  color:#94a3b8;
  font-size:11px;
  line-height:1.45;
}
.ui-v122-operations-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
@media(min-width:640px){.ui-v122-operations-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media(min-width:1024px){.ui-v122-operations-grid{grid-template-columns:repeat(5,minmax(0,1fr)) !important}}

/* Website: Media Library is the primary path; raw URLs stay available as Advanced. */
.ui-v122-advanced-toggle {
  margin:0 0 12px;
  border:1px solid rgba(148,163,184,.18);
  border-radius:9px;
  background:rgba(255,255,255,.035);
  color:#94a3b8;
  padding:7px 10px;
  font-size:11px;
  font-weight:700;
  cursor:pointer;
}
.ui-v122-advanced-toggle:hover { color:#e2e8f0; border-color:rgba(148,163,184,.3); }
.ui-v122-advanced-field { display:none !important; }
.ui-v122-advanced-open .ui-v122-advanced-field { display:block !important; }

/* Notification bell stability: one animation system only.
   The React panel already uses Framer Motion. Disabling .page-enter here prevents
   competing opacity/transform animations and avoids GPU/backdrop flicker on close. */
#btn-notif-bell {
  isolation:isolate;
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:background-color .14s,border-color .14s,color .14s,box-shadow .14s !important;
}
#btn-notif-bell:hover { border-color:rgba(148,163,184,.22) !important; }
#btn-notif-bell:focus-visible {
  outline:2px solid rgba(52,211,153,.68);
  outline-offset:2px;
}
#btn-notif-bell .animate-pulse {
  animation:none !important;
  box-shadow:0 0 0 2px #0b1220,0 2px 8px rgba(244,63,94,.24);
}
#btn-notif-bell + .page-enter,
#btn-notif-bell + div.page-enter {
  animation:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  background:rgba(12,19,33,.985) !important;
  border-color:rgba(148,163,184,.20) !important;
  box-shadow:0 22px 55px rgba(2,6,23,.52),0 1px 0 rgba(255,255,255,.04) inset !important;
  transform-origin:top right;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  will-change:opacity,transform;
  contain:paint;
}
#btn-notif-bell + .page-enter .custom-scrollbar,
#btn-notif-bell + div.page-enter .custom-scrollbar { overscroll-behavior:contain; }
#btn-notif-bell + .page-enter .bg-emerald-500\/10,
#btn-notif-bell + div.page-enter .bg-emerald-500\/10 {
  background:rgba(16,185,129,.10) !important;
  border-color:rgba(52,211,153,.17) !important;
}

/* Attendance visual harmonization only — superseded by the scoped comfort theme below; kept as release-audit marker. Historical route selector: body[data-tamasya-route="attendance"]. */
/* Attendance comfort theme.
   Presentation-only: selectors are scoped to #attendance-panel so attendance
   API, state, event handlers, biometric flows, GPS flows, and data remain untouched. */
#attendance-panel {
  color-scheme:dark;
  background:#0c1424 !important;
  border-color:rgba(148,163,184,.16) !important;
  box-shadow:0 20px 54px rgba(2,6,23,.28),inset 0 1px rgba(255,255,255,.025) !important;
}
#attendance-panel > div:first-child {
  background:linear-gradient(180deg,rgba(30,41,59,.58),rgba(15,23,42,.40)) !important;
  border-color:rgba(148,163,184,.13) !important;
}
#attendance-panel > .p-6 { background:#0c1424; }

/* Neutral surfaces */
#attendance-panel .bg-white { background-color:#111b2d !important; }
#attendance-panel .bg-slate-50,
#attendance-panel .bg-slate-50\/50,
#attendance-panel .bg-slate-50\/40 { background-color:rgba(15,23,42,.64) !important; }
#attendance-panel .bg-slate-100 { background-color:#172236 !important; }
#attendance-panel .bg-slate-200,
#attendance-panel .bg-slate-200\/60 { background-color:#1b2940 !important; }
#attendance-panel .bg-indigo-50\/50,
#attendance-panel .bg-indigo-50\/40 { background-color:rgba(99,102,241,.075) !important; }

/* Semantic surfaces: same meaning, dark-theme luminance. */
#attendance-panel .bg-emerald-50,
#attendance-panel .bg-emerald-100 { background-color:rgba(16,185,129,.13) !important; }
#attendance-panel .bg-amber-50,
#attendance-panel .bg-amber-100 { background-color:rgba(245,158,11,.13) !important; }
#attendance-panel .bg-rose-50,
#attendance-panel .bg-rose-100 { background-color:rgba(244,63,94,.12) !important; }
#attendance-panel .bg-sky-100 { background-color:rgba(14,165,233,.12) !important; }
#attendance-panel .bg-indigo-100 { background-color:rgba(99,102,241,.14) !important; }

/* Borders */
#attendance-panel .border-slate-50,
#attendance-panel .border-slate-100,
#attendance-panel .border-slate-200 { border-color:rgba(148,163,184,.14) !important; }
#attendance-panel .border-indigo-100,
#attendance-panel .border-indigo-100\/50 { border-color:rgba(129,140,248,.20) !important; }
#attendance-panel .border-emerald-100 { border-color:rgba(52,211,153,.20) !important; }
#attendance-panel .border-amber-200 { border-color:rgba(251,191,36,.24) !important; }

/* Typography hierarchy */
#attendance-panel .text-slate-900,
#attendance-panel .text-slate-800 { color:#e8eef7 !important; }
#attendance-panel .text-slate-700 { color:#d3deeb !important; }
#attendance-panel .text-slate-600 { color:#b8c5d5 !important; }
#attendance-panel .text-slate-500 { color:#94a3b8 !important; }
#attendance-panel .text-slate-400 { color:#8494a8 !important; }
#attendance-panel .text-slate-300 { color:#718096 !important; }
#attendance-panel .text-indigo-900 { color:#c7d2fe !important; }
#attendance-panel .text-indigo-800,
#attendance-panel .text-indigo-700 { color:#aebcff !important; }
#attendance-panel .text-indigo-600,
#attendance-panel .text-indigo-500 { color:#8ea1ff !important; }
#attendance-panel .text-emerald-800,
#attendance-panel .text-emerald-700 { color:#7ee8bd !important; }
#attendance-panel .text-amber-800 { color:#f6cf72 !important; }
#attendance-panel .text-sky-800 { color:#7dd3fc !important; }
#attendance-panel .text-rose-800,
#attendance-panel .text-rose-700,
#attendance-panel .text-rose-600 { color:#f99aab !important; }

/* Inputs and filters */
#attendance-panel input:not([type="checkbox"]):not([type="radio"]),
#attendance-panel select,
#attendance-panel textarea {
  background:#101a2c !important;
  color:#e5edf7 !important;
  border-color:rgba(148,163,184,.18) !important;
  box-shadow:inset 0 1px rgba(255,255,255,.018);
}
#attendance-panel input::placeholder,
#attendance-panel textarea::placeholder { color:#64748b !important; }
#attendance-panel input:focus,
#attendance-panel select:focus,
#attendance-panel textarea:focus {
  border-color:rgba(129,140,248,.55) !important;
  box-shadow:0 0 0 3px rgba(99,102,241,.12) !important;
  outline:none !important;
}
#attendance-panel option { background:#101827; color:#e5edf7; }

/* Segmented controls / attendance mode tabs */
#attendance-panel .bg-slate-200\/60.p-1,
#attendance-panel .bg-slate-100.p-1 {
  border:1px solid rgba(148,163,184,.11);
  box-shadow:inset 0 1px rgba(255,255,255,.025);
}
#attendance-panel button.bg-white.text-indigo-700 {
  background:rgba(99,102,241,.16) !important;
  color:#c7d2fe !important;
  box-shadow:0 1px 0 rgba(255,255,255,.04),0 5px 14px rgba(2,6,23,.16) !important;
}

/* Cards and key actions */
#attendance-panel .shadow-sm { box-shadow:0 8px 22px rgba(2,6,23,.14) !important; }
#attendance-panel button.bg-indigo-600 {
  background:#5967df !important;
  box-shadow:0 6px 18px rgba(79,70,229,.16);
}
#attendance-panel button.bg-indigo-600:hover { background:#6674e8 !important; }
#attendance-panel button.bg-rose-50 {
  background:rgba(244,63,94,.11) !important;
  color:#fda4af !important;
  border:1px solid rgba(251,113,133,.12);
}
#attendance-panel button.bg-rose-50:hover,
#attendance-panel button.hover\:bg-rose-100:hover { background:rgba(244,63,94,.18) !important; }
#attendance-panel button.bg-slate-200 {
  background:#263449 !important;
  color:#cbd5e1 !important;
}
#attendance-panel button.bg-slate-200:hover { background:#314056 !important; }

/* Table readability */
#attendance-panel table { background:#0e1728; }
#attendance-panel thead tr { background:#131e31 !important; }
#attendance-panel thead th {
  color:#91a0b4 !important;
  border-color:rgba(148,163,184,.12) !important;
  letter-spacing:.055em;
}
#attendance-panel tbody { color:#cbd5e1 !important; }
#attendance-panel tbody tr { border-color:rgba(148,163,184,.10) !important; }
#attendance-panel tbody tr:hover { background:rgba(51,65,85,.32) !important; }
#attendance-panel tbody button:hover { background:rgba(148,163,184,.10) !important; }

/* Status chips: calm, high-contrast, no decorative blinking. */
#attendance-panel tbody .animate-pulse,
#attendance-panel h3 .animate-pulse { animation:none !important; }
#attendance-panel tbody .bg-emerald-100 { color:#86efc3 !important; border:1px solid rgba(52,211,153,.16); }
#attendance-panel tbody .bg-amber-100 { color:#f7d27d !important; border:1px solid rgba(251,191,36,.16); }
#attendance-panel tbody .bg-sky-100 { color:#8bdcff !important; border:1px solid rgba(56,189,248,.14); }
#attendance-panel tbody .bg-rose-100 { color:#fca5b4 !important; border:1px solid rgba(251,113,133,.15); }
#attendance-panel tbody .bg-slate-100 { color:#cbd5e1 !important; border:1px solid rgba(148,163,184,.12); }

/* Keep functional scanning/loading animations, but reduce visual glare. */
#attendance-panel .animate-ping { animation-duration:1.35s; opacity:.75; }
#attendance-panel .animate-spin { animation-duration:1.15s; }
#attendance-panel .animate-bounce { animation-duration:1.35s; }

/* Mobile ergonomics */
@media(max-width:767px){
  #attendance-panel > div:first-child { padding:16px !important; }
  #attendance-panel > .p-6 { padding:16px !important; }
  #attendance-panel > div:first-child > .flex,
  #attendance-panel > div:first-child .bg-slate-200\/60 {
    width:100%;
  }
  #attendance-panel > div:first-child .bg-slate-200\/60 { overflow-x:auto; }
  #attendance-panel > div:first-child .bg-slate-200\/60 button {
    flex:1 0 auto;
    white-space:nowrap;
    min-height:40px;
  }
  #attendance-panel table { min-width:760px; }
}

@media(prefers-reduced-motion:reduce){
  #btn-notif-bell + .page-enter,
  #btn-notif-bell + div.page-enter { transition:none !important; }
  #attendance-panel .animate-ping,
  #attendance-panel .animate-spin,
  #attendance-panel .animate-bounce { animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

@media(max-width:639px){
  .ui-v122-dropdown{max-height:min(70vh,420px);overflow:auto}
  .ui-v122-operations-note{display:none}
}