/* Undanganku Mazer Theme v2.5.0
   Visual adaptation based on the user-provided Mazer 1.0.0 theme (MIT).
   Keeps application behavior intact while aligning sidebar, header, icons and auth. */

:root {
  --mazer-primary: var(--app-accent, #435ebe);
  --mazer-primary-rgb: var(--app-accent-rgb, 67, 94, 190);
  --mazer-heading: #25396f;
  --mazer-muted: #7c8db5;
  --mazer-page: #f2f7ff;
  --mazer-soft: #f0f1f5;
  --mazer-border: #e9ecef;
  --mazer-panel: #ffffff;
}

html,
body,
button,
input,
select,
textarea {
  font-family: "Nunito", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body { background: var(--mazer-page); }

/* ---------- Sidebar: Mazer vertical menu ---------- */
#desktop-sidebar {
  width: 300px !important;
  background: var(--app-sidebar, #fff) !important;
  color: var(--mazer-heading) !important;
  border-right: 1px solid rgba(124, 141, 181, .08);
  box-shadow: 0 0 28px rgba(80, 102, 144, .045) !important;
}

#sidebar-brand-row {
  height: 88px !important;
  min-height: 88px !important;
  padding: 24px 28px 16px !important;
  border-bottom: 0 !important;
}

#sidebar-brand-row .app-brand-logo-wrap {
  width: 43px !important;
  height: 43px !important;
  border-radius: 11px !important;
  border: 0;
  box-shadow: 0 5px 16px rgba(67,94,190,.14);
}

.sidebar-brand-text h1 {
  color: var(--mazer-heading) !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  letter-spacing: -.02em;
}

.sidebar-brand-text p { color: var(--mazer-muted) !important; font-weight: 600; }

#desktop-sidebar nav {
  padding: 10px 28px 24px !important;
  scrollbar-width: thin;
  scrollbar-color: #d7deee transparent;
}

.mazer-sidebar-title {
  margin: 18px 0 12px;
  padding: 0 16px;
  color: var(--mazer-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

#desktop-sidebar .nav-desktop {
  min-height: 46px;
  margin: 7px 0;
  padding: 11px 16px !important;
  gap: 14px !important;
  border: 0;
  border-radius: 8px !important;
  background: transparent;
  color: var(--mazer-heading) !important;
  font-size: 14px !important;
  font-weight: 700;
  line-height: 1.25;
  box-shadow: none !important;
}

#desktop-sidebar .nav-desktop > i {
  width: 20px !important;
  color: var(--mazer-muted) !important;
  font-size: 17px;
  line-height: 1;
  transition: color .18s ease, transform .18s ease;
}

#desktop-sidebar .nav-desktop:hover {
  background: var(--mazer-soft) !important;
  color: var(--mazer-heading) !important;
  transform: none;
}

#desktop-sidebar .nav-desktop:hover > i { color: var(--mazer-primary) !important; }

#desktop-sidebar .nav-desktop.active {
  background: var(--mazer-primary) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px rgba(var(--mazer-primary-rgb), .22) !important;
}

#desktop-sidebar .nav-desktop.active > i { color: #fff !important; }

.mazer-sidebar-footer {
  padding: 8px 28px 24px !important;
  border-top: 0 !important;
}

.mazer-sidebar-title-footer { margin-top: 0; }

#open-app-theme-button-desktop,
#reset-button-desktop,
#sidebar-toggle-button {
  min-height: 42px;
  justify-content: flex-start !important;
  padding: 9px 16px !important;
  border: 0 !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: var(--mazer-heading) !important;
  font-size: 13px !important;
  font-weight: 700;
}

#open-app-theme-button-desktop:hover,
#sidebar-toggle-button:hover { background: var(--mazer-soft) !important; color: var(--mazer-primary) !important; }
#reset-button-desktop { color: #dc3545 !important; }
#reset-button-desktop:hover { background: #fff0f0 !important; color: #bb2d3b !important; }
#open-app-theme-button-desktop > i,
#reset-button-desktop > i,
#sidebar-toggle-button > i { width: 20px; color: var(--mazer-muted); font-size: 16px; }
#reset-button-desktop > i { color:#dc3545; }

#app-shell.sidebar-collapsed #desktop-sidebar { width: 88px !important; }
#app-shell.sidebar-collapsed #sidebar-brand-row { height: 88px !important; min-height: 88px !important; padding: 20px !important; }
#app-shell.sidebar-collapsed #desktop-sidebar nav,
#app-shell.sidebar-collapsed .mazer-sidebar-footer { padding-left: 14px !important; padding-right: 14px !important; }
#app-shell.sidebar-collapsed .mazer-sidebar-title { display:none; }
#app-shell.sidebar-collapsed #desktop-sidebar .nav-desktop { justify-content:center; padding:12px !important; }
#app-shell.sidebar-collapsed #open-app-theme-button-desktop,
#app-shell.sidebar-collapsed #reset-button-desktop,
#app-shell.sidebar-collapsed #sidebar-toggle-button { justify-content:center !important; padding:11px !important; }

/* ---------- Header: clean Mazer navbar ---------- */
.app-top-header {
  height: 86px !important;
  min-height: 86px !important;
  padding: 16px 30px !important;
  border: 0 !important;
  background: var(--mazer-panel) !important;
  color: var(--mazer-heading) !important;
  box-shadow: 0 2px 12px rgba(80,102,144,.04) !important;
}

.app-header-page strong {
  color: var(--mazer-heading) !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  letter-spacing: -.01em;
}
.app-header-page small { margin-top: 3px !important; color: var(--mazer-muted) !important; font-size: 11px !important; font-weight: 600; }

.app-header-actions { gap: 10px !important; }
.app-header-icon-button {
  width: 42px !important;
  height: 42px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #6c757d !important;
  font-size: 17px;
}
.app-header-icon-button:hover { background: #e9ecef !important; color: var(--mazer-primary) !important; }
.app-header-logout { color:#dc3545 !important; }
.app-header-logout:hover { background:#fff0f0 !important; color:#bb2d3b !important; }

.app-header-user {
  min-height: 48px;
  padding: 4px 11px 4px 5px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.app-header-user:hover { background:#f5f6f8 !important; }
.app-header-avatar {
  width: 39px !important;
  height: 39px !important;
  background: linear-gradient(135deg, var(--mazer-primary), #6577cf) !important;
  font-size: 13px !important;
  box-shadow: 0 4px 12px rgba(var(--mazer-primary-rgb),.18);
}
.app-header-user-copy strong { color: var(--mazer-heading) !important; font-size: 12px !important; font-weight:800; }
.app-header-user-copy small { color: var(--mazer-muted) !important; font-size: 9px !important; font-weight:700; }

#app-shell main { background: var(--mazer-page) !important; }
.app-content-shell { padding: 28px 30px 34px !important; }

/* Make existing cards sit naturally in the Mazer palette without changing their markup. */
#app-shell article.bg-white,
#app-shell .rounded-2xl.bg-white,
#app-shell .rounded-xl.bg-white { border-color: rgba(124,141,181,.10) !important; }

/* ---------- Mobile nav ---------- */
.safe-bottom {
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  border-top: 0 !important;
  background: rgba(255,255,255,.98) !important;
  box-shadow: 0 -4px 20px rgba(80,102,144,.08) !important;
}
.nav-mobile { color: var(--mazer-muted) !important; border-radius: 8px !important; }
.nav-mobile > i { font-size: 17px !important; }
.nav-mobile.active {
  color: var(--mazer-primary) !important;
  background: rgba(var(--mazer-primary-rgb),.10) !important;
  border-color: transparent !important;
}
.nav-mobile.active::before { background: var(--mazer-primary) !important; }

/* ---------- Auth: Mazer layout + interactive robot ---------- */
.robot-login-screen { background:#fff !important; }
.login-full-shell {
  grid-template-columns: minmax(420px, 5fr) minmax(0, 7fr) !important;
  background:#fff;
}
.login-auth-panel {
  grid-column:1;
  grid-row:1;
  min-height:100vh;
  min-height:100dvh;
  background:#fff !important;
}
.login-visual-panel {
  grid-column:2;
  grid-row:1;
  min-height:100vh;
  min-height:100dvh;
  padding: 34px 42px 40px !important;
  background:
    linear-gradient(135deg, rgba(28,44,101,.84), rgba(67,94,190,.76)),
    url('../images/mazer/auth-bg.jpg') center/cover no-repeat !important;
  color:#fff !important;
}
.login-grid-glow { opacity:.10 !important; background-size:52px 52px !important; }
.login-ambient-one { background:#6577cf !important; opacity:.20 !important; }
.login-ambient-two { background:#57caeb !important; opacity:.16 !important; }
.login-visual-top .login-brand-mark { display:none !important; }
.login-security-badge {
  margin-left:auto;
  border-color:rgba(255,255,255,.18) !important;
  background:rgba(255,255,255,.10) !important;
  color:#fff !important;
}

.login-auth-inner {
  width:min(100%, 650px) !important;
  margin:auto !important;
  padding: clamp(44px, 7vh, 84px) clamp(40px, 7vw, 112px) !important;
}
.login-mobile-brand {
  display:flex !important;
  margin:0 0 clamp(44px,7vh,78px) !important;
  color:var(--mazer-heading) !important;
}
.login-mobile-logo {
  width:48px !important;
  height:48px !important;
  border-radius:10px !important;
  border:0 !important;
  box-shadow:0 5px 16px rgba(67,94,190,.13) !important;
}
.login-mobile-brand strong { font-size:16px !important; color:var(--mazer-heading) !important; }
.login-mobile-brand span { color:var(--mazer-muted) !important; font-size:11px !important; }

.login-auth-heading { margin-bottom:28px !important; }
.login-auth-eyebrow { color:var(--mazer-primary) !important; font-size:10px !important; letter-spacing:.18em !important; }
.login-auth-heading h2 {
  color:var(--mazer-heading) !important;
  font-size:clamp(38px,4vw,58px) !important;
  line-height:1.03 !important;
  letter-spacing:-.035em !important;
  font-weight:800 !important;
}
.login-auth-heading > p:last-child {
  max-width:540px;
  margin-top:13px !important;
  color:#a8aebb !important;
  font-size:15px !important;
  line-height:1.6 !important;
  font-weight:600;
}

.login-auth-switch {
  margin-bottom:26px !important;
  padding:5px !important;
  border:1px solid #e9ecef !important;
  border-radius:10px !important;
  background:#f2f4f7 !important;
}
.login-auth-switch .auth-mode-button {
  min-height:44px !important;
  border:0 !important;
  border-radius:7px !important;
  color:#7c8db5 !important;
  font-size:12px !important;
  font-weight:800 !important;
}
.login-auth-switch .auth-mode-button.active {
  background:#fff !important;
  color:var(--mazer-primary) !important;
  box-shadow:0 3px 10px rgba(80,102,144,.09) !important;
}
.login-auth-form.hidden,
.login-auth-form[hidden] { display:none !important; }
.login-auth-form { gap:18px !important; }
.login-register-form { gap:14px !important; }
.login-field-group label { color:#6c757d !important; font-size:12px !important; font-weight:700 !important; }
.login-field input {
  height:55px !important;
  border:1px solid #dce3ec !important;
  border-radius:8px !important;
  padding-left:48px !important;
  background:#fff !important;
  color:#25396f !important;
  font-size:14px !important;
  box-shadow:none !important;
}
.login-field input:focus {
  border-color:rgba(var(--mazer-primary-rgb),.68) !important;
  box-shadow:0 0 0 4px rgba(var(--mazer-primary-rgb),.10) !important;
}
.login-field-icon { left:17px !important; color:#7c8db5 !important; font-size:17px !important; }
.login-field:focus-within .login-field-icon { color:var(--mazer-primary) !important; }
.login-password-toggle { right:10px !important; color:#7c8db5 !important; }
.login-password-toggle:hover { background:#f0f1f5 !important; color:var(--mazer-primary) !important; }
.login-primary-button,
.login-register-button {
  min-height:54px !important;
  margin-top:5px;
  border-radius:8px !important;
  background:var(--mazer-primary) !important;
  box-shadow:0 8px 20px rgba(var(--mazer-primary-rgb),.25) !important;
  color:#fff !important;
  font-size:14px !important;
}
.login-primary-button:hover,
.login-register-button:hover { transform:translateY(-1px); filter:brightness(.98); box-shadow:0 10px 24px rgba(var(--mazer-primary-rgb),.30) !important; }
.login-tenant-note { color:#7c8db5 !important; }
.login-tenant-note i { color:var(--mazer-primary) !important; }
.login-auth-footer { color:#a8aebb !important; }
.login-auth-footer i { color:#7c8db5 !important; }

.login-visual-copy { position:relative; z-index:7; width:min(560px,78%) !important; padding-bottom:6px; }
.login-visual-eyebrow { color:#d8e0ff !important; }
.login-visual-copy h1 { max-width:520px !important; color:#fff !important; text-shadow:0 8px 24px rgba(17,29,70,.18); }
.login-visual-copy > p:not(.login-visual-eyebrow) { color:rgba(255,255,255,.76) !important; }
.login-feature-row span { border-color:rgba(255,255,255,.16) !important; background:rgba(255,255,255,.10) !important; color:#fff !important; }
.login-feature-row i { color:#dce4ff !important; }
.robot-message { border-color:rgba(255,255,255,.15) !important; background:rgba(37,57,115,.42) !important; backdrop-filter:blur(10px); }

/* Shift robot to the right-side Mazer hero and harmonize the glow. */
.robot-stage {
  width:min(480px,58%) !important;
  margin-top:auto !important;
  filter:drop-shadow(0 28px 34px rgba(20,31,74,.20));
}
.robot-halo { background:radial-gradient(circle,rgba(120,153,255,.32),rgba(67,94,190,.10) 46%,transparent 72%) !important; }
.robot-core,
.robot-antenna-light { box-shadow:0 0 18px rgba(87,202,235,.78) !important; }

/* ---------- Dark mode counterpart ---------- */
html[data-app-mode="dark"] {
  --mazer-heading:#e7e9f2;
  --mazer-muted:#a8b0cc;
  --mazer-page:#151521;
  --mazer-soft:#242536;
  --mazer-border:#303247;
  --mazer-panel:#1e1e2d;
}
html[data-app-mode="dark"] #desktop-sidebar { background:#1e1e2d !important; border-color:#2a2b3c; }
html[data-app-mode="dark"] #sidebar-brand-row .app-brand-logo-wrap { background:#fff; }
html[data-app-mode="dark"] #desktop-sidebar .nav-desktop:hover,
html[data-app-mode="dark"] #open-app-theme-button-desktop:hover,
html[data-app-mode="dark"] #sidebar-toggle-button:hover { background:#28293d !important; }
html[data-app-mode="dark"] #reset-button-desktop:hover { background:rgba(220,53,69,.10) !important; }
html[data-app-mode="dark"] .app-top-header { background:#1e1e2d !important; }
html[data-app-mode="dark"] .app-header-user:hover,
html[data-app-mode="dark"] .app-header-icon-button:hover { background:#28293d !important; }
html[data-app-mode="dark"] .safe-bottom { background:rgba(30,30,45,.98) !important; }
html[data-app-mode="dark"] .login-auth-panel { background:#1e1e2d !important; }
html[data-app-mode="dark"] .login-mobile-brand,
html[data-app-mode="dark"] .login-mobile-brand strong,
html[data-app-mode="dark"] .login-auth-heading h2 { color:#f3f4fb !important; }
html[data-app-mode="dark"] .login-auth-heading > p:last-child,
html[data-app-mode="dark"] .login-mobile-brand span { color:#a8b0cc !important; }
html[data-app-mode="dark"] .login-auth-switch { background:#252638 !important; border-color:#33354a !important; }
html[data-app-mode="dark"] .login-auth-switch .auth-mode-button.active { background:#303247 !important; }
html[data-app-mode="dark"] .login-field-group label { color:#c8cce0 !important; }
html[data-app-mode="dark"] .login-field input:not([type="color"]) { background:#242536 !important; border-color:#36384e !important; color:#f3f4fb !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  #desktop-sidebar { width:270px !important; }
  .login-full-shell { grid-template-columns:minmax(400px, .92fr) minmax(0, 1.08fr) !important; }
  .login-auth-inner { padding-left:54px !important; padding-right:54px !important; }
}

@media (max-width: 960px) {
  .login-auth-inner { padding-left:36px !important; padding-right:36px !important; }
  .login-visual-panel { padding:28px !important; }
  .login-visual-copy { width:64% !important; }
}

@media (max-width: 767px) {
  .app-top-header { height:68px !important; min-height:68px !important; padding:10px 13px !important; }
  .app-header-page strong { font-size:13px !important; }
  .app-header-page small { display:none !important; }
  .app-content-shell { padding:16px 12px 94px !important; }

  .login-full-shell {
    grid-template-columns:1fr !important;
    grid-template-rows:190px auto !important;
  }
  .login-visual-panel {
    grid-column:1;
    grid-row:1;
    min-height:190px !important;
    height:190px !important;
    padding:18px 20px !important;
  }
  .login-auth-panel {
    grid-column:1;
    grid-row:2;
    min-height:calc(100dvh - 190px) !important;
    border-radius:22px 22px 0 0 !important;
    margin-top:-14px !important;
    position:relative;
    z-index:12;
  }
  .login-auth-inner { max-width:560px !important; padding:30px 20px max(34px,env(safe-area-inset-bottom)) !important; }
  .login-mobile-brand { margin-bottom:24px !important; }
  .login-auth-heading h2 { font-size:32px !important; }
  .login-auth-heading > p:last-child { font-size:13px !important; }
  .login-visual-copy { left:20px !important; bottom:23px !important; width:52% !important; }
  .login-visual-copy h1 { font-size:21px !important; }
  .robot-stage { right:-20px !important; bottom:-128px !important; transform:scale(.66) !important; }
}

@media (max-width: 520px) {
  .login-register-password-grid { grid-template-columns:1fr !important; }
  .login-auth-inner { padding-left:17px !important; padding-right:17px !important; }
  .login-visual-copy h1 { font-size:19px !important; }
  .robot-stage { right:-38px !important; transform:scale(.61) !important; }
}

/* v2.5.1 - status sinkronisasi data ringan */
.app-data-sync-status{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid #e9ecef;border-radius:999px;background:#fff;color:#6c757d;font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap;transition:.2s ease}
.app-data-sync-dot{width:8px;height:8px;border-radius:50%;background:#57caeb;box-shadow:0 0 0 3px rgba(87,202,235,.14);transition:.2s ease}
.app-data-sync-status.is-syncing .app-data-sync-dot{background:#ffc107;box-shadow:0 0 0 3px rgba(255,193,7,.14);animation:mazerSyncPulse .9s ease-in-out infinite}
.app-data-sync-status.is-ready .app-data-sync-dot{background:#198754;box-shadow:0 0 0 3px rgba(25,135,84,.13)}
.app-data-sync-status.is-offline .app-data-sync-dot{background:#dc3545;box-shadow:0 0 0 3px rgba(220,53,69,.12)}
@keyframes mazerSyncPulse{50%{transform:scale(.72);opacity:.58}}
html[data-app-mode="dark"] .app-data-sync-status{background:#1f2130;border-color:#303246;color:#a8a9bb}
@media(max-width:640px){.app-data-sync-status{width:34px;min-width:34px;padding:0;justify-content:center}.app-data-sync-label{display:none}.app-header-actions{gap:7px!important}}
@media(prefers-reduced-motion:reduce){.app-data-sync-status.is-syncing .app-data-sync-dot{animation:none}}

/* ========================================================================== */
/* Dashboard attendance charts                                                */
/* ========================================================================== */
.attendance-charts-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 1.5rem;
}

.attendance-chart-card {
  min-width: 0;
  border: 1px solid rgba(226, 232, 240, .88);
  border-radius: 1rem;
  background: #fff;
  padding: 1.35rem;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .035);
}

.attendance-chart-heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}

.attendance-chart-heading h3 {
  margin: .15rem 0 0;
  color: #25396f;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.35;
}

.attendance-chart-heading p:not(.attendance-chart-eyebrow) {
  max-width: 40rem;
  margin: .35rem 0 0;
  color: #7c8db5;
  font-size: .78rem;
  line-height: 1.55;
}

.attendance-chart-eyebrow {
  margin: 0;
  color: var(--app-accent, #435ebe);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.attendance-chart-icon {
  display: grid;
  width: 2.8rem;
  height: 2.8rem;
  flex: 0 0 auto;
  place-items: center;
  border-radius: .9rem;
  font-size: 1.2rem;
}

.attendance-chart-icon-bar {
  background: rgba(67, 94, 190, .1);
  color: var(--app-accent, #435ebe);
}

.attendance-chart-icon-pie {
  background: rgba(16, 185, 129, .1);
  color: #10b981;
}

.attendance-chart-canvas {
  width: 100%;
  min-height: 300px;
}

.attendance-chart-canvas-pie {
  min-height: 285px;
}

.attendance-chart-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .65rem 1.25rem;
  padding-top: .1rem;
  color: #607080;
  font-size: .78rem;
}

.attendance-chart-summary span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
}

.attendance-chart-summary strong {
  color: #25396f;
  font-weight: 800;
}

.attendance-dot {
  width: .58rem;
  height: .58rem;
  border-radius: 999px;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, .12);
}

.attendance-dot.is-attended {
  background: #10b981;
}

.attendance-dot.is-pending {
  background: #f59e0b;
}

.attendance-chart-fallback {
  margin: 1rem 0 .25rem;
  border: 1px dashed #dfe3ea;
  border-radius: .85rem;
  padding: 1.2rem;
  color: #7c8db5;
  font-size: .8rem;
  text-align: center;
}

html[data-app-mode="dark"] .attendance-chart-card {
  border-color: rgba(148, 163, 184, .14);
  background: #1e293b;
  box-shadow: none;
}

html[data-app-mode="dark"] .attendance-chart-heading h3,
html[data-app-mode="dark"] .attendance-chart-summary strong {
  color: #eef2ff;
}

html[data-app-mode="dark"] .attendance-chart-heading p:not(.attendance-chart-eyebrow),
html[data-app-mode="dark"] .attendance-chart-summary,
html[data-app-mode="dark"] .attendance-chart-fallback {
  color: #94a3b8;
}

html[data-app-mode="dark"] .attendance-chart-fallback {
  border-color: rgba(148, 163, 184, .2);
}

@media (max-width: 1023px) {
  .attendance-charts-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .attendance-chart-card {
    padding: 1rem;
    border-radius: .9rem;
  }

  .attendance-chart-heading {
    gap: .7rem;
  }

  .attendance-chart-icon {
    width: 2.45rem;
    height: 2.45rem;
    border-radius: .75rem;
    font-size: 1rem;
  }

  .attendance-chart-canvas,
  .attendance-chart-canvas-pie {
    min-height: 250px;
  }
}