/* =========================================================
   Tema Profesional Absensi Digital - ditambahkan tanpa mengubah logika aplikasi
   ========================================================= */
:root{
  --primary:#0f766e;
  --primary-dark:#0b4f48;
  --accent:#22c55e;
  --accent-2:#38bdf8;
  --warning:#f59e0b;
  --danger:#ef4444;
  --ink:#0f172a;
  --muted:#64748b;
  --soft:#f8fafc;
  --line:#e2e8f0;
  --glass:rgba(255,255,255,.86);
  --shadow:0 18px 45px rgba(15,23,42,.10);
  --radius:22px;
}
html,body{min-height:100%;}
body.hold-transition:not(.login-page){
  background:
    radial-gradient(circle at top left, rgba(34,197,94,.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(56,189,248,.18), transparent 32%),
    linear-gradient(135deg,#eefcf8 0%,#f7fbff 48%,#eef6ff 100%) !important;
  color:var(--ink);
  font-family:"Inter","Segoe UI",Arial,sans-serif;
}
.content-wrapper{background:transparent!important; padding-bottom:28px;}
.content-header{padding:24px 26px 8px!important;}
.content-header h1{font-weight:800; letter-spacing:-.4px; color:var(--ink);}
.content-header h1 small{color:var(--muted); font-weight:600;}
.breadcrumb{background:rgba(255,255,255,.62)!important; border:1px solid rgba(226,232,240,.9); border-radius:999px; padding:8px 14px!important; box-shadow:0 8px 26px rgba(15,23,42,.06);}
.main-header .navbar,.main-header .logo{
  background:linear-gradient(135deg,var(--primary-dark),var(--primary))!important;
  border:0!important;
}
.main-header .logo{font-weight:800; letter-spacing:.2px;}
.main-header .logo .logo-lg{font-size:17px;}
.main-header .logo img{background:#fff; padding:2px; border-radius:12px; box-shadow:0 8px 20px rgba(0,0,0,.18);}
.main-header .navbar .sidebar-toggle:hover{background:rgba(255,255,255,.12)!important;}
.modern-clock{color:#fff; padding:15px 14px; font-weight:700; opacity:.98;}
.modern-clock i{margin-right:6px;}
.main-sidebar{background:linear-gradient(180deg,#082f2a 0%,#0f172a 100%)!important; box-shadow:12px 0 35px rgba(15,23,42,.12);}
.sidebar-menu>li.header{color:#99f6e4!important; background:transparent!important; letter-spacing:.12em; font-size:11px; font-weight:800; padding-top:18px;}
.sidebar-menu>li>a,.treeview-menu>li>a{border-left:0!important; color:#dbeafe!important; border-radius:14px; margin:4px 10px; transition:.22s ease;}
.sidebar-menu>li>a i,.treeview-menu>li>a i{width:22px; text-align:center;}
.sidebar-menu>li:hover>a,.sidebar-menu>li.active>a,.treeview-menu>li>a:hover{background:rgba(255,255,255,.13)!important; color:#fff!important; transform:translateX(3px);}
.treeview-menu{background:rgba(0,0,0,.16)!important; margin:0 10px 8px; border-radius:18px; padding:6px 0!important;}
.sidebar-menu button,.sidebar-menu .btn-danger{border:0; border-radius:14px; margin:10px; padding:11px 14px; color:#fff; background:linear-gradient(135deg,#ef4444,#be123c); font-weight:800; box-shadow:0 10px 24px rgba(239,68,68,.22);}
.user-panel{margin:12px 10px 8px; padding:14px 10px!important; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.12); border-radius:20px;}
.user-panel>.image>img{border:3px solid rgba(255,255,255,.75); box-shadow:0 12px 26px rgba(0,0,0,.25);}
.user-panel>.info>p{font-weight:800; color:#fff!important;}
.user-panel>.info>a{color:#bbf7d0!important;}
.box,.nav-tabs-custom,.login-box-body,.modal-content{
  border:1px solid rgba(226,232,240,.85)!important;
  border-radius:var(--radius)!important;
  background:var(--glass)!important;
  box-shadow:var(--shadow)!important;
  overflow:hidden;
  backdrop-filter:blur(12px);
}
.box{border-top:0!important;}
.box-header{padding:18px 20px!important; border-bottom:1px solid rgba(226,232,240,.85)!important; background:linear-gradient(135deg,rgba(15,118,110,.08),rgba(56,189,248,.10));}
.box-title{font-weight:800!important; color:var(--ink);}
.box-body{padding:20px!important;}
.small-box{border-radius:22px!important; overflow:hidden; box-shadow:0 18px 38px rgba(15,23,42,.12)!important; transition:.25s ease; border:1px solid rgba(255,255,255,.45);}
.small-box:hover{transform:translateY(-4px); box-shadow:0 24px 50px rgba(15,23,42,.16)!important;}
.small-box .inner h3{font-weight:900; letter-spacing:-.5px;}
.small-box .icon{opacity:.24; top:8px!important;}
.small-box-footer{background:rgba(255,255,255,.18)!important; font-weight:800;}
.bg-green,.callout-success{background:linear-gradient(135deg,#16a34a,#059669)!important;}
.bg-yellow,.callout-warning{background:linear-gradient(135deg,#f59e0b,#f97316)!important; color:#fff!important;}
.bg-aqua,.callout-info{background:linear-gradient(135deg,#06b6d4,#2563eb)!important;}
.bg-fuchsia{background:linear-gradient(135deg,#d946ef,#7c3aed)!important;}
.bg-red,.callout-danger{background:linear-gradient(135deg,#ef4444,#be123c)!important;}
.bg-maroon{background:linear-gradient(135deg,#9f1239,#7f1d1d)!important;}
.callout{border:0!important; border-radius:20px!important; box-shadow:var(--shadow);}
.table{background:#fff; border-radius:18px; overflow:hidden;}
.table>thead>tr>th,.table>tbody>tr>th,.table>tbody>tr>td,.table>tfoot>tr>td{vertical-align:middle!important; border-color:#e5e7eb!important;}
.table-bordered{border:1px solid #e5e7eb!important;}
.table tr[style*="background:#11e8d2"],.table tr[style*="background: #11e8d2"]{background:linear-gradient(135deg,var(--primary),#14b8a6)!important; color:#fff;}
.table th,.table strong{font-weight:800;}
.form-control,.input,select,textarea,input[type="text"],input[type="number"],input[type="date"],input[type="password"]{
  border-radius:14px!important; border:1px solid #cbd5e1!important; min-height:42px; box-shadow:none!important; transition:.2s ease;
}
.form-control:focus,.input:focus,select:focus,textarea:focus,input:focus{border-color:var(--primary)!important; box-shadow:0 0 0 4px rgba(20,184,166,.16)!important;}
.btn,.btn-flat,input[type="submit"],input[type="button"],button{border-radius:14px!important; border:0!important; font-weight:800; letter-spacing:.1px; transition:.22s ease;}
.btn:hover,input[type="submit"]:hover,input[type="button"]:hover,button:hover{transform:translateY(-1px);}
.btn-success{background:linear-gradient(135deg,#16a34a,#059669)!important;}
.btn-primary{background:linear-gradient(135deg,#0ea5e9,#2563eb)!important;}
.btn-danger{background:linear-gradient(135deg,#ef4444,#be123c)!important;}
.btn-warning{background:linear-gradient(135deg,#f59e0b,#f97316)!important; color:#fff!important;}
.btn-default{background:#f8fafc!important; border:1px solid #cbd5e1!important; color:#0f172a!important;}
.main-footer{border:0!important; margin-top:0; background:rgba(255,255,255,.82)!important; color:#475569; box-shadow:0 -12px 32px rgba(15,23,42,.06);}
.label,.badge{border-radius:999px; padding:.45em .7em;}
.content .row{animation:fadeUp .35s ease both;}
@keyframes fadeUp{from{opacity:0; transform:translateY(12px)}to{opacity:1; transform:translateY(0)}}
.modern-hero{position:relative; border-radius:30px; padding:32px; overflow:hidden; color:#fff; background:linear-gradient(135deg,#064e3b,#0f766e 48%,#0ea5e9); box-shadow:0 24px 70px rgba(15,118,110,.28); margin-bottom:24px;}
.modern-hero:before{content:""; position:absolute; width:320px; height:320px; right:-80px; top:-90px; border-radius:50%; background:rgba(255,255,255,.16);}
.modern-hero:after{content:""; position:absolute; width:190px; height:190px; right:170px; bottom:-80px; border-radius:50%; background:rgba(255,255,255,.10);}
.modern-hero>*{position:relative; z-index:1;}
.modern-hero h2{font-weight:900; font-size:32px; margin:0 0 8px; letter-spacing:-.8px;}
.modern-hero p{font-size:16px; opacity:.94; max-width:760px;}
.modern-chip{display:inline-flex; align-items:center; gap:8px; padding:9px 13px; background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.24); border-radius:999px; margin-bottom:14px; font-weight:800;}
.report-toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:14px 0 18px;}
.report-preview{background:#fff; color:#111827; padding:24px; border:1px solid #e5e7eb; border-radius:18px; box-shadow:0 8px 26px rgba(15,23,42,.08);}
.report-preview h2,.report-preview h3{margin-top:0; font-weight:900;}
.report-meta{display:grid; grid-template-columns:180px 1fr; gap:4px 12px; margin:12px 0 18px;}
.status-pill{display:inline-block; padding:5px 10px; border-radius:999px; font-weight:800; font-size:12px; background:#ecfdf5; color:#047857;}
.status-pill.warn{background:#fff7ed; color:#c2410c;}.status-pill.danger{background:#fef2f2; color:#b91c1c;}.status-pill.info{background:#eff6ff; color:#1d4ed8;}
/* Landing/login */
.modern-login-page{min-height:100vh; background:radial-gradient(circle at 10% 10%,rgba(34,197,94,.25),transparent 30%),radial-gradient(circle at 90% 20%,rgba(56,189,248,.25),transparent 34%),linear-gradient(135deg,#022c22,#0f766e 48%,#082f49)!important; color:#fff;}
.landing-wrap{min-height:100vh; display:flex; align-items:center; padding:34px 18px;}
.landing-card{width:100%; max-width:1140px; margin:auto; display:grid; grid-template-columns:1.2fr .8fr; gap:28px; align-items:center;}
.landing-panel{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.2); border-radius:34px; padding:34px; box-shadow:0 30px 90px rgba(0,0,0,.25); backdrop-filter:blur(18px);}
.landing-brand{display:flex; align-items:center; gap:16px; margin-bottom:26px;}
.landing-brand img{width:74px; height:74px; object-fit:contain; background:#fff; border-radius:22px; padding:8px; box-shadow:0 18px 35px rgba(0,0,0,.22);}
.landing-title{font-size:42px; line-height:1.05; font-weight:900; letter-spacing:-1.2px; margin:0 0 14px;}
.landing-subtitle{font-size:17px; opacity:.92; max-width:680px;}
.landing-features{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:28px;}
.landing-feature{background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.18); border-radius:20px; padding:16px;}
.landing-feature i{font-size:25px; margin-bottom:10px;}.landing-feature b{display:block; font-size:14px;}.landing-feature span{font-size:12px; opacity:.86;}
.login-card-modern{background:rgba(255,255,255,.94)!important; color:#0f172a; border-radius:30px!important; padding:28px!important; box-shadow:0 26px 70px rgba(2,44,34,.28)!important;}
.login-card-modern .login-logo{margin:0 0 12px; font-weight:900; color:#0f172a;}.login-card-modern .login-box-msg{color:#64748b; font-weight:700;}
.login-card-modern .form-control{height:48px;}
.login-footer-modern{margin-top:18px; color:rgba(255,255,255,.82); text-align:center; font-weight:700;}
@media(max-width:991px){.landing-card{grid-template-columns:1fr}.landing-title{font-size:34px}.landing-features{grid-template-columns:1fr}.content-header{padding:18px 16px 6px!important}.box-body{padding:16px!important}.report-meta{grid-template-columns:1fr}.table-responsive-force{overflow-x:auto}.main-header .logo img{max-width:34px}.main-header .logo .logo-lg{font-size:14px}.modern-hero{padding:24px}.modern-hero h2{font-size:25px}}
@media print{
  body{background:#fff!important;}
  .no-print,.main-header,.main-sidebar,.main-footer,.control-sidebar,.control-sidebar-bg,.content-header,.breadcrumb{display:none!important;}
  .content-wrapper{margin-left:0!important; padding:0!important; background:#fff!important;}
  .content{padding:0!important; margin:0!important;}
  .box,.report-preview{box-shadow:none!important; border:0!important; border-radius:0!important; padding:0!important;}
  .box-header{display:none!important;}
  .box-body{padding:0!important;}
  .table{font-size:11px; border-radius:0;}
  @page{size:A4 landscape; margin:12mm;}
}

/* =========================================================
   Revisi 2026: Admin lebih cerah, hidup, dan responsif HP
   ========================================================= */
:root{
  --primary:#2563eb;
  --primary-dark:#1d4ed8;
  --accent:#22c55e;
  --accent-2:#06b6d4;
  --accent-3:#a855f7;
  --glass:rgba(255,255,255,.92);
  --shadow:0 20px 55px rgba(37,99,235,.12);
}
body.hold-transition:not(.login-page){
  background:
    radial-gradient(circle at 8% 5%, rgba(34,197,94,.23), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(168,85,247,.18), transparent 30%),
    radial-gradient(circle at 78% 86%, rgba(6,182,212,.22), transparent 30%),
    linear-gradient(135deg,#f0f9ff 0%,#f8fafc 42%,#f0fdf4 100%) !important;
}
.content-wrapper:before,
.content-wrapper:after{
  content:"";
  position:fixed;
  z-index:-1;
  border-radius:999px;
  filter:blur(2px);
  opacity:.65;
  pointer-events:none;
}
.content-wrapper:before{width:220px;height:220px;right:4%;top:115px;background:rgba(59,130,246,.12);animation:floatGlow 9s ease-in-out infinite;}
.content-wrapper:after{width:170px;height:170px;left:265px;bottom:45px;background:rgba(34,197,94,.13);animation:floatGlow 11s ease-in-out infinite reverse;}
@keyframes floatGlow{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-18px) scale(1.04)}}
.main-header .navbar,.main-header .logo{
  background:linear-gradient(135deg,#1d4ed8 0%,#06b6d4 48%,#22c55e 100%)!important;
  box-shadow:0 12px 32px rgba(37,99,235,.18)!important;
}
.main-header .logo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.main-sidebar{
  background:linear-gradient(180deg,#ffffff 0%,#eff6ff 58%,#ecfeff 100%)!important;
  border-right:1px solid rgba(191,219,254,.75)!important;
  box-shadow:14px 0 35px rgba(37,99,235,.10)!important;
}
.sidebar-menu>li.header{color:#2563eb!important;background:linear-gradient(90deg,rgba(37,99,235,.08),transparent)!important;border-radius:12px;margin:8px 10px 4px;padding:10px 12px!important;}
.sidebar-menu>li>a,.treeview-menu>li>a{color:#0f172a!important;background:rgba(255,255,255,.74)!important;border:1px solid rgba(219,234,254,.85)!important;box-shadow:0 8px 20px rgba(37,99,235,.06);}
.sidebar-menu>li>a i,.treeview-menu>li>a i{color:#2563eb!important;}
.sidebar-menu>li:hover>a,.sidebar-menu>li.active>a,.treeview-menu>li>a:hover{background:linear-gradient(135deg,#2563eb,#06b6d4)!important;color:#fff!important;box-shadow:0 14px 30px rgba(37,99,235,.22);}
.sidebar-menu>li:hover>a i,.sidebar-menu>li.active>a i,.treeview-menu>li>a:hover i{color:#fff!important;}
.treeview-menu{background:rgba(255,255,255,.55)!important;border:1px solid rgba(219,234,254,.9);}
.user-panel{background:linear-gradient(135deg,#2563eb,#06b6d4)!important;border:0!important;box-shadow:0 16px 35px rgba(37,99,235,.22)!important;}
.user-panel>.info>p,.user-panel>.info>a{color:#fff!important;}
.box,.nav-tabs-custom,.modal-content{background:rgba(255,255,255,.94)!important;border:1px solid rgba(191,219,254,.9)!important;box-shadow:0 22px 55px rgba(37,99,235,.10)!important;}
.box-header{background:linear-gradient(135deg,rgba(37,99,235,.09),rgba(34,197,94,.10))!important;}
.content-header h1{color:#0f172a;text-shadow:0 1px 0 rgba(255,255,255,.85);}
.breadcrumb{background:rgba(255,255,255,.88)!important;border-color:rgba(191,219,254,.9)!important;}
.modern-hero{background:linear-gradient(135deg,#2563eb 0%,#06b6d4 50%,#22c55e 100%)!important;box-shadow:0 26px 70px rgba(37,99,235,.25)!important;}
.modern-hero:before{background:rgba(255,255,255,.20)!important;}
.modern-hero:after{background:rgba(255,255,255,.14)!important;}
.small-box{min-height:128px;border:0!important;box-shadow:0 22px 50px rgba(15,23,42,.13)!important;}
.small-box .inner{position:relative;z-index:2;}
.small-box .inner h3{font-size:29px!important;line-height:1.15;}
.small-box .inner p{font-weight:800;font-size:15px;letter-spacing:.2px;}
.small-box .icon{opacity:.30!important;right:14px!important;top:12px!important;}
.small-box .icon i{font-size:78px!important;}
.bg-green{background:linear-gradient(135deg,#16a34a,#22c55e)!important;}
.bg-yellow{background:linear-gradient(135deg,#f59e0b,#f97316,#fb7185)!important;}
.bg-aqua{background:linear-gradient(135deg,#0284c7,#06b6d4,#22d3ee)!important;}
.bg-fuchsia{background:linear-gradient(135deg,#9333ea,#d946ef,#f472b6)!important;}
.bg-red{background:linear-gradient(135deg,#dc2626,#ef4444,#fb7185)!important;}
.bg-maroon{background:linear-gradient(135deg,#be123c,#e11d48,#f97316)!important;}
.table-responsive-force{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.table-responsive-force .table{min-width:760px;}

/* Format laporan PDF: nama kiri, bulan/tanggal di atas */
.report-box-modern .box-body{background:linear-gradient(180deg,#ffffff,#f8fbff)!important;}
.report-head-modern{display:flex;align-items:center;justify-content:flex-start;gap:18px;text-align:left;border-bottom:3px solid #1d4ed8;padding-bottom:14px;margin-bottom:16px;padding-left:8px;}
.report-head-modern h2{font-size:23px;letter-spacing:.8px;margin:0 0 4px!important;}
.report-head-modern h3{font-size:18px;margin:0 0 2px!important;}
.report-logo-wrap{width:70px;height:70px;border-radius:18px;background:#fff;border:1px solid #dbeafe;display:flex;align-items:center;justify-content:center;box-shadow:0 12px 24px rgba(37,99,235,.12);}
.report-logo-wrap img{max-width:58px;max-height:58px;object-fit:contain;}
.report-kop-text{text-align:left;flex:0 1 auto;}
.report-meta-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;padding:14px;}
.report-summary-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:12px 0 14px;}
.report-summary-grid div{background:linear-gradient(135deg,#eff6ff,#f0fdf4);border:1px solid #dbeafe;border-radius:16px;padding:10px;text-align:center;}
.report-summary-grid b{display:block;font-size:22px;color:#1d4ed8;line-height:1;}
.report-summary-grid span{display:block;font-size:12px;font-weight:800;color:#475569;margin-top:4px;}
.report-note-print{background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;color:#9a3412;font-weight:700;padding:10px 12px;margin:10px 0 14px;}
.report-matrix-wrap{border:1px solid #cbd5e1;border-radius:14px;background:#fff;}
.report-matrix-table{margin:0!important;border-radius:0!important;font-size:11px;min-width:980px!important;}
.report-matrix-table th,.report-matrix-table td{border:1px solid #cbd5e1!important;padding:5px!important;vertical-align:middle!important;}
.report-month-row th{background:linear-gradient(135deg,#1d4ed8,#06b6d4)!important;color:#fff!important;text-align:center;font-weight:900;}
.report-date-row th{background:#e0f2fe!important;color:#075985!important;text-align:center;font-weight:900;min-width:64px;}
.matrix-no{width:38px!important;text-align:center;}
.matrix-name{width:180px!important;min-width:180px!important;text-align:left!important;position:sticky;left:0;z-index:2;background:#fff!important;color:#0f172a!important;box-shadow:4px 0 10px rgba(15,23,42,.05);}
thead .matrix-name{z-index:4;background:linear-gradient(135deg,#1d4ed8,#06b6d4)!important;color:#fff!important;text-align:center!important;}
.matrix-name strong{display:block;font-size:12px;line-height:1.15;color:inherit;}
.matrix-name small{display:block;font-size:10px;color:#64748b;margin-top:2px;}
thead .matrix-name small{color:#fff;}
.matrix-day{text-align:center;min-width:64px;max-width:74px;}
.report-day-cell{display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.05;}
.status-pill.compact{font-size:10px;padding:3px 7px;min-width:24px;text-align:center;}
.cell-time{font-size:9px;color:#0f172a;font-weight:700;white-space:nowrap;}
.cell-note{font-size:8px;color:#64748b;font-weight:700;max-width:68px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cell-empty{color:#cbd5e1;font-weight:900;}
.matrix-total{width:34px!important;text-align:center!important;background:#f8fafc!important;font-weight:900;color:#0f172a;}
.report-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;font-size:11px;}
.report-legend span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:999px;padding:5px 9px;}
.report-legend b{color:#1d4ed8;}
.report-signature{width:260px;float:right;text-align:center;margin-top:8px;font-size:12px;}

@media(max-width:991px){
  .main-header .logo .logo-lg{font-size:13px!important;}
  .content-wrapper:after{left:15px;}
  .modern-clock{display:none!important;}
  .content-header{padding:16px 14px 6px!important;}
  .content-header h1{font-size:22px!important;}
  .modern-hero{border-radius:22px;padding:22px!important;margin-bottom:16px;}
  .modern-hero h2{font-size:24px!important;}
  .modern-hero p{font-size:14px!important;}
  .box-header{padding:14px 16px!important;}
  .box-body{padding:14px!important;}
  .report-toolbar{float:none!important;width:100%;margin-top:10px;}
  .report-toolbar .btn{width:100%;margin-bottom:8px;}
}
@media(max-width:767px){
  .content .row>[class*="col-xs-6"]{width:100%!important;}
  .small-box{min-height:116px;margin-bottom:14px;}
  .small-box .inner h3{font-size:24px!important;}
  .small-box .icon i{font-size:64px!important;}
  .breadcrumb{display:none;}
  .report-preview{padding:14px!important;border-radius:14px;}
  .report-head-modern{align-items:flex-start;justify-content:flex-start;text-align:left;gap:10px;}
  .report-logo-wrap{width:54px;height:54px;border-radius:14px;}
  .report-logo-wrap img{max-width:44px;max-height:44px;}
  .report-head-modern h2{font-size:17px;}
  .report-head-modern h3{font-size:14px;}
  .report-summary-grid{grid-template-columns:repeat(2,1fr);}
  .report-meta{grid-template-columns:1fr!important;}
  .report-note-print{font-size:12px;}
  .report-signature{float:none;width:100%;}
}

@media print{
  body{background:#fff!important;color:#111827!important;}
  .no-print,.main-header,.main-sidebar,.main-footer,.control-sidebar,.control-sidebar-bg,.content-header,.breadcrumb,.modern-hero{display:none!important;}
  .content-wrapper{margin-left:0!important;padding:0!important;background:#fff!important;}
  .content{padding:0!important;margin:0!important;}
  .box,.box-body,.report-preview{box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;background:#fff!important;}
  .report-head-modern{border-bottom:2px solid #111827!important;margin-bottom:8px;padding-bottom:8px;}
  .report-logo-wrap{box-shadow:none!important;width:54px;height:54px;}
  .report-head-modern h2{font-size:16px!important;}
  .report-head-modern h3{font-size:13px!important;}
  .report-meta-card{font-size:10px;padding:6px!important;margin-bottom:6px!important;border-radius:0!important;grid-template-columns:95px 1fr 95px 1fr!important;}
  .report-summary-grid{grid-template-columns:repeat(6,1fr)!important;gap:4px!important;margin:5px 0!important;}
  .report-summary-grid div{padding:4px!important;border-radius:0!important;}
  .report-summary-grid b{font-size:13px!important;}
  .report-summary-grid span{font-size:8px!important;}
  .report-note-print{display:none!important;}
  .table-responsive-force{overflow:visible!important;border:0!important;}
  .report-matrix-table{font-size:7.2px!important;min-width:0!important;width:100%!important;table-layout:fixed!important;}
  .report-matrix-table th,.report-matrix-table td{padding:2px!important;border:1px solid #555!important;}
  .matrix-no{width:18px!important;}
  .matrix-name{position:static!important;width:105px!important;min-width:105px!important;box-shadow:none!important;background:#fff!important;color:#111827!important;}
  thead .matrix-name{background:#dbeafe!important;color:#111827!important;}
  .matrix-name strong{font-size:7.8px!important;}
  .matrix-name small{font-size:6.5px!important;color:#374151!important;}
  .report-date-row th{min-width:0!important;background:#e5e7eb!important;color:#111827!important;}
  .matrix-day{min-width:0!important;max-width:none!important;}
  .status-pill.compact{font-size:6px!important;padding:1px 3px!important;min-width:12px!important;}
  .cell-time{font-size:5.6px!important;}
  .cell-note{font-size:5.2px!important;max-width:28px!important;}
  .matrix-total{width:18px!important;}
  .report-legend{font-size:7px!important;gap:3px!important;margin-top:5px!important;}
  .report-legend span{padding:2px 4px!important;border-radius:0!important;}
  .report-signature{font-size:9px!important;margin-top:4px!important;width:180px!important;}
  @page{size:A4 landscape;margin:7mm;}
}


/* ===== 2026 refresh: full color animated background ===== */
@keyframes gradientWave{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
@keyframes floatBlobA{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18px,-16px,0) scale(1.08)}}
@keyframes floatBlobB{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-18px,20px,0) scale(1.06)}}
body.hold-transition:not(.login-page){
  background:linear-gradient(-45deg,#081f44,#0b3d91,#0ea5e9,#16c79a,#7c3aed,#ec4899)!important;
  background-size:400% 400%!important;
  animation:gradientWave 18s ease infinite;
  position:relative;
  overflow-x:hidden;
}
body.hold-transition:not(.login-page)::before,
body.hold-transition:not(.login-page)::after{
  content:""; position:fixed; inset:auto; z-index:0; pointer-events:none; filter:blur(8px);
}
body.hold-transition:not(.login-page)::before{
  width:360px; height:360px; left:-90px; top:90px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.24), rgba(255,255,255,0) 68%);
  animation:floatBlobA 12s ease-in-out infinite;
}
body.hold-transition:not(.login-page)::after{
  width:420px; height:420px; right:-120px; bottom:40px; border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.20), rgba(255,255,255,0) 68%);
  animation:floatBlobB 14s ease-in-out infinite;
}
.wrapper,.main-header,.main-sidebar,.content-wrapper,.main-footer{position:relative; z-index:1;}
.content-wrapper{background:rgba(8,15,35,.34)!important; backdrop-filter:blur(7px); border-left:1px solid rgba(255,255,255,.08);}
.main-sidebar{background:linear-gradient(180deg,rgba(255,255,255,.90) 0%, rgba(241,249,255,.82) 100%)!important; border-right:1px solid rgba(255,255,255,.5);}
.sidebar-menu>li.header{color:#2563eb!important;}
.sidebar-menu>li>a,.treeview-menu>li>a{color:#334155!important; background:rgba(255,255,255,.62)!important; border:1px solid rgba(148,163,184,.18);}
.sidebar-menu>li:hover>a,.sidebar-menu>li.active>a,.treeview-menu>li>a:hover{background:linear-gradient(135deg,rgba(59,130,246,.16),rgba(20,184,166,.18))!important; color:#0f172a!important;}
.treeview-menu{background:rgba(255,255,255,.38)!important;}
.user-panel{background:linear-gradient(135deg,rgba(37,99,235,.92),rgba(6,182,212,.88))!important; border:1px solid rgba(255,255,255,.22);}
.modern-soft-card{background:rgba(255,255,255,.9); border:1px solid rgba(255,255,255,.45); border-radius:26px; box-shadow:0 25px 60px rgba(15,23,42,.18); backdrop-filter:blur(14px);}
.scan-content{background:transparent!important; border-top:0!important; min-height:100vh!important; padding:24px 18px 42px!important;}
.scan-headline{font-weight:900; letter-spacing:-.5px; text-shadow:0 8px 18px rgba(0,0,0,.35); color:#fff;}
.scan-subline{color:rgba(255,255,255,.9);}
.scan-shell{background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); border-radius:32px; box-shadow:0 30px 80px rgba(2,6,23,.30); backdrop-filter:blur(18px); padding:18px;}
.scan-table-card{background:rgba(255,255,255,.95); border-radius:24px; padding:16px; box-shadow:0 12px 30px rgba(15,23,42,.18);}
.scan-side-card{background:rgba(255,255,255,.95); border-radius:28px; padding:18px; box-shadow:0 15px 36px rgba(15,23,42,.18);}
.scan-topbar{background:linear-gradient(135deg,rgba(37,99,235,.96),rgba(16,185,129,.92))!important; border-radius:0 0 22px 22px; box-shadow:0 16px 34px rgba(15,23,42,.18);}
.scan-logo{max-height:54px; max-width:82%; object-fit:contain;}
.identity-logo-card{display:flex; align-items:center; justify-content:center; min-height:220px; background:linear-gradient(135deg,#f8fbff,#eef7ff); border:1px dashed #93c5fd; border-radius:28px; padding:18px;}
.identity-logo-card img{max-width:100%; max-height:180px; object-fit:contain; filter:drop-shadow(0 12px 20px rgba(15,23,42,.16));}
.identity-meta td{padding:10px 12px!important;}
.report-day-cell .late-note{font-size:10px; font-weight:800; color:#dc2626; line-height:1;}
.report-summary-grid{grid-template-columns:repeat(7,1fr)!important;}
.report-logo-wrap{width:94px;height:94px;border-radius:22px;}
.report-logo-wrap img{max-width:80px;max-height:80px;}
.report-kop-text h3{font-size:20px; margin:0 0 4px; font-weight:900;}
.report-kop-text .school-sub{font-size:12px; color:#334155;}
.report-matrix-table .matrix-total.late-mins,
.report-matrix-table th.late-mins{background:#fff7ed!important; color:#c2410c; font-weight:900;}
@media (max-width: 767px){
  .scan-shell{padding:12px; border-radius:22px;}
  .scan-table-card,.scan-side-card{padding:12px; border-radius:18px;}
  .landing-card{grid-template-columns:1fr!important;}
  .report-summary-grid{grid-template-columns:repeat(2,1fr)!important;}
  .identity-logo-card{min-height:160px;}
}
@media print{
  body.hold-transition:not(.login-page){background:#fff!important; animation:none!important;}
  body.hold-transition:not(.login-page)::before, body.hold-transition:not(.login-page)::after{display:none!important;}
  .report-logo-wrap{width:68px;height:68px;}
  .report-logo-wrap img{max-width:60px;max-height:60px;}
}


/* Flash popup + logo precision */
.identity-logo-card{
  overflow:hidden;
  min-height:280px!important;
  background:
    linear-gradient(135deg,#f8fbff,#eef7ff),
    repeating-linear-gradient(45deg, rgba(37,99,235,.04) 0, rgba(37,99,235,.04) 12px, rgba(16,185,129,.04) 12px, rgba(16,185,129,.04) 24px)!important;
}
.identity-logo-card img{
  width:auto!important;
  height:auto!important;
  max-width:88%!important;
  max-height:220px!important;
  object-fit:contain!important;
  object-position:center center!important;
  display:block!important;
  margin:0 auto!important;
  filter:drop-shadow(0 12px 20px rgba(15,23,42,.12));
}
.identity-logo-hint{margin-top:12px; color:#64748b; font-size:13px; text-align:center; font-weight:700;}
.flash-popup-overlay{position:fixed; inset:0; background:rgba(15,23,42,.42); display:flex; align-items:center; justify-content:center; z-index:999999; padding:18px;}
.flash-popup-card{width:min(440px, 94vw); background:#fff; border-radius:28px; padding:26px 24px; box-shadow:0 35px 90px rgba(15,23,42,.30); text-align:center; border:1px solid rgba(226,232,240,.9);}
.flash-popup-icon{width:92px; height:92px; border-radius:50%; margin:0 auto 14px; display:flex; align-items:center; justify-content:center; font-size:42px; color:#fff;}
.flash-popup-card.success .flash-popup-icon{background:linear-gradient(135deg,#22c55e,#10b981); box-shadow:0 16px 35px rgba(34,197,94,.3);} 
.flash-popup-card.info .flash-popup-icon{background:linear-gradient(135deg,#3b82f6,#06b6d4); box-shadow:0 16px 35px rgba(59,130,246,.3);} 
.flash-popup-card.error .flash-popup-icon{background:linear-gradient(135deg,#ef4444,#f97316); box-shadow:0 16px 35px rgba(239,68,68,.28);} 
.flash-popup-card h3{margin:0 0 8px; font-size:27px; color:#0f172a; font-weight:900;}
.flash-popup-card p{margin:0 0 16px; color:#475569; line-height:1.65; font-weight:700;}
.flash-popup-card .btn{border-radius:14px; font-weight:800; padding:10px 18px;}
@media(max-width:767px){
  .identity-logo-card{min-height:220px!important;}
  .identity-logo-card img{max-height:170px!important;}
}


/* REV15: admin panel lebih elegan, hidup, dan topbar sticky */
body.hold-transition:not(.login-page):not(.scan-body){
  background:
    radial-gradient(circle at 0% 0%, rgba(34,197,94,.16), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(56,189,248,.18), transparent 26%),
    linear-gradient(135deg,#eefbf8 0%, #f6fbff 52%, #ecf7ff 100%) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .wrapper{min-height:100vh; overflow:visible;}
body.hold-transition:not(.login-page):not(.scan-body) .main-header{
  position:fixed; top:0; left:0; right:0; z-index:1050;
  box-shadow:0 18px 40px rgba(15,23,42,.16);
}
body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo,
body.hold-transition:not(.login-page):not(.scan-body) .main-header .navbar{
  background:linear-gradient(90deg,#2563eb 0%,#06b6d4 48%,#22c55e 100%) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo{
  width:230px; height:58px; line-height:58px; box-shadow:inset -1px 0 0 rgba(255,255,255,.15);
}
body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo .logo-lg{display:flex; align-items:center; justify-content:center; gap:8px; font-size:18px;}
body.hold-transition:not(.login-page):not(.scan-body) .main-header .navbar{margin-left:230px; min-height:58px;}
body.hold-transition:not(.login-page):not(.scan-body) .main-sidebar{
  position:fixed; top:58px; bottom:0; left:0; width:230px; overflow-y:auto; overflow-x:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.96) 0%,rgba(239,249,255,.92) 100%) !important;
  box-shadow:16px 0 40px rgba(15,23,42,.10); border-right:1px solid rgba(255,255,255,.55);
}
body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper,
body.hold-transition:not(.login-page):not(.scan-body) .main-footer{
  margin-left:230px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{
  min-height:calc(100vh - 58px) !important;
  margin-top:58px !important;
  padding-bottom:30px; background:transparent !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content{padding:0 18px 18px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .main-footer{
  background:rgba(255,255,255,.9) !important; backdrop-filter:blur(12px); border-top:1px solid rgba(226,232,240,.8) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-header{padding:18px 20px 10px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .content-header h1{font-size:32px;}
body.hold-transition:not(.login-page):not(.scan-body) .content-header small{font-size:14px;}
body.hold-transition:not(.login-page):not(.scan-body) .modern-hero{
  border-radius:34px; padding:34px; background:linear-gradient(135deg,#0f4cc9 0%,#06b6d4 48%,#22c55e 100%);
  box-shadow:0 25px 60px rgba(14,116,144,.22);
}
body.hold-transition:not(.login-page):not(.scan-body) .modern-hero h2{font-size:40px;}
body.hold-transition:not(.login-page):not(.scan-body) .modern-hero p{font-size:16px; max-width:820px;}
body.hold-transition:not(.login-page):not(.scan-body) .small-box{border-radius:24px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner{padding:18px 18px 12px;}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner h3{font-size:36px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner p{font-size:16px; font-weight:700;}
body.hold-transition:not(.login-page):not(.scan-body) .box{border-radius:26px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .box-header{padding:18px 22px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .box-title{font-size:20px;}
body.hold-transition:not(.login-page):not(.scan-body) .box-body{padding:22px !important;}
body.hold-transition:not(.login-page):not(.scan-body) .table{border-radius:18px; overflow:hidden;}
body.hold-transition:not(.login-page):not(.scan-body) .table thead tr th{background:linear-gradient(135deg,#eff6ff,#f8fafc); color:#0f172a;}
body.hold-transition:not(.login-page):not(.scan-body) .user-panel{
  border-radius:22px; padding:16px 12px !important; background:linear-gradient(135deg,#2563eb,#06b6d4) !important;
  box-shadow:0 18px 35px rgba(37,99,235,.18);
}
body.hold-transition:not(.login-page):not(.scan-body) .sidebar-menu>li>a,
body.hold-transition:not(.login-page):not(.scan-body) .treeview-menu>li>a{margin:5px 12px; border-radius:16px; padding-top:13px; padding-bottom:13px; font-weight:700;}
body.hold-transition:not(.login-page):not(.scan-body) .sidebar-menu>li.header{padding-left:14px;}
body.hold-transition:not(.login-page):not(.scan-body) .sidebar-menu .btn-danger{margin:12px; border-radius:16px;}
body.hold-transition:not(.login-page):not(.scan-body) .modern-clock{font-size:14px; padding-top:18px;}
body.hold-transition:not(.login-page):not(.scan-body) .navbar-nav>.user-menu>.dropdown-toggle{padding-top:9px; padding-bottom:9px;}
body.hold-transition:not(.login-page):not(.scan-body) .navbar-nav>.user-menu>.dropdown-toggle img{border:2px solid rgba(255,255,255,.65);}
@media (min-width:768px){
  body.hold-transition.sidebar-mini.sidebar-collapse:not(.login-page):not(.scan-body) .main-header .logo{width:50px;}
  body.hold-transition.sidebar-mini.sidebar-collapse:not(.login-page):not(.scan-body) .main-header .navbar{margin-left:50px;}
  body.hold-transition.sidebar-mini.sidebar-collapse:not(.login-page):not(.scan-body) .main-sidebar{width:50px;}
  body.hold-transition.sidebar-mini.sidebar-collapse:not(.login-page):not(.scan-body) .content-wrapper,
  body.hold-transition.sidebar-mini.sidebar-collapse:not(.login-page):not(.scan-body) .main-footer{margin-left:50px !important;}
}
@media (max-width:991px){
  body.hold-transition:not(.login-page):not(.scan-body) .main-header{position:fixed;}
  body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo{width:100%;}
  body.hold-transition:not(.login-page):not(.scan-body) .main-header .navbar{margin-left:0;}
  body.hold-transition:not(.login-page):not(.scan-body) .main-sidebar{top:58px; padding-top:0; transform:translateX(-230px);}
  body.hold-transition:not(.login-page):not(.scan-body) .sidebar-open .main-sidebar{transform:translateX(0);}
  body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper,
  body.hold-transition:not(.login-page):not(.scan-body) .main-footer{margin-left:0 !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{margin-top:108px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .content{padding:0 12px 14px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .content-header h1{font-size:26px;}
  body.hold-transition:not(.login-page):not(.scan-body) .modern-hero{padding:24px; border-radius:26px;}
  body.hold-transition:not(.login-page):not(.scan-body) .modern-hero h2{font-size:30px;}
}


/* REV18 PWA + Responsive Global: HP, tablet, laptop, PC */
.pwa-install-btn{
  position:fixed; right:18px; bottom:18px; z-index:999999;
  display:inline-flex; align-items:center; gap:8px;
  padding:12px 18px; border-radius:999px!important;
  background:linear-gradient(135deg,#0ea5e9,#22c55e)!important;
  color:#fff!important; border:0!important; font-weight:900!important;
  box-shadow:0 18px 45px rgba(15,23,42,.24)!important;
}
.pwa-install-btn i{font-size:18px;}
html{scroll-behavior:smooth;}
img{max-width:100%; height:auto;}
.table-responsive-force,
.box-body,
.nav-tabs-custom,
.content{
  max-width:100%;
}
.box-body table,
.table{
  width:100%!important;
}
@media (max-width:1199px){
  body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{
    padding-left:0!important;
  }
  .modern-hero{padding:26px!important;}
  .modern-hero h2{font-size:30px!important;}
  .small-box .inner h3{font-size:27px!important;}
  .box-body{overflow-x:auto;}
  .table{min-width:720px;}
  .table.no-min-width,.identity-meta,.report-summary-grid table{min-width:0!important;}
}
@media (max-width:991px){
  body.hold-transition:not(.login-page):not(.scan-body) .main-header{
    position:fixed!important; top:0!important; left:0!important; right:0!important; z-index:1050!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo{
    width:100%!important;
    float:none!important;
    height:56px!important;
    line-height:56px!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-header .navbar{
    margin-left:0!important;
    min-height:52px!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{
    margin-left:0!important;
    margin-top:108px!important;
    padding-top:0!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-sidebar{
    position:fixed!important;
    top:108px!important;
    left:0!important;
    bottom:0!important;
    width:260px!important;
    transform:translateX(-270px);
    transition:.25s ease;
    z-index:1040!important;
  }
  body.sidebar-open.hold-transition:not(.login-page):not(.scan-body) .main-sidebar{
    transform:translateX(0)!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-footer{
    margin-left:0!important;
  }
  .content-header{
    padding:16px 14px 8px!important;
  }
  .content-header h1{
    font-size:24px!important;
    line-height:1.25;
  }
  .breadcrumb{
    float:none!important;
    position:relative!important;
    top:auto!important;
    right:auto!important;
    margin-top:10px!important;
    display:flex!important;
    flex-wrap:wrap;
    gap:4px;
    border-radius:18px!important;
  }
  .content{
    padding:0 12px 16px!important;
  }
  .modern-hero{
    border-radius:24px!important;
    padding:22px!important;
  }
  .modern-hero h2{font-size:26px!important;}
  .modern-hero p{font-size:14px!important;}
  .small-box{
    min-height:116px!important;
    margin-bottom:14px!important;
  }
  .small-box .inner h3{font-size:25px!important;}
  .small-box .inner p{font-size:14px!important;}
  .box,.nav-tabs-custom,.modal-content{
    border-radius:22px!important;
  }
  .box-header{padding:14px 16px!important;}
  .box-body{padding:14px!important;}
  .form-control,.input,select,textarea,input[type="text"],input[type="number"],input[type="date"],input[type="password"],input[type="time"]{
    min-height:44px!important;
    font-size:15px!important;
  }
  .btn,.btn-flat,input[type="submit"],input[type="button"],button{
    min-height:42px;
    white-space:normal;
  }
}
@media (max-width:767px){
  body.hold-transition:not(.login-page):not(.scan-body){
    overflow-x:hidden!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo .logo-lg{
    font-size:15px!important;
    justify-content:flex-start!important;
    padding-left:10px;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo img{
    max-width:36px!important;
    max-height:36px!important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .navbar-custom-menu{
    font-size:12px;
  }
  .modern-clock{
    display:none!important;
  }
  .content-header h1{
    font-size:22px!important;
  }
  .modern-hero{
    padding:18px!important;
    margin-bottom:16px!important;
  }
  .modern-chip{
    font-size:12px!important;
    padding:7px 10px!important;
  }
  .modern-hero h2{font-size:23px!important;}
  .row{
    margin-left:-8px!important;
    margin-right:-8px!important;
  }
  [class*="col-"]{
    padding-left:8px!important;
    padding-right:8px!important;
  }
  .col-xs-6{
    width:100%!important;
  }
  .small-box .inner h3{font-size:24px!important;}
  .small-box .icon i{font-size:58px!important;}
  .table{
    min-width:640px;
    font-size:12px;
  }
  .table>thead>tr>th,.table>tbody>tr>td{
    padding:9px 8px!important;
  }
  .report-toolbar{
    flex-direction:column;
  }
  .report-toolbar .btn{
    width:100%;
  }
  .identity-logo-card{
    min-height:190px!important;
  }
  .identity-logo-card img{
    max-height:150px!important;
  }
  .pwa-install-btn{
    right:12px; bottom:12px; padding:10px 14px; font-size:13px;
  }
}
@media (max-width:480px){
  .content{padding:0 10px 14px!important;}
  .modern-hero h2{font-size:21px!important;}
  .modern-hero p{font-size:13px!important;}
  .box-title{font-size:16px!important;}
  .table{min-width:590px;}
}


/* REV19: admin refined */
body.hold-transition:not(.login-page):not(.scan-body) .main-header{z-index:9999!important;}
body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{margin-top:58px!important;min-height:calc(100vh - 58px)!important;padding-top:0!important;}
body.hold-transition:not(.login-page):not(.scan-body) .content-header{margin-top:0!important;padding-top:18px!important;}
body.hold-transition:not(.login-page):not(.scan-body) .content{padding-top:0!important;}
body.hold-transition:not(.login-page):not(.scan-body) .box,
body.hold-transition:not(.login-page):not(.scan-body) .small-box,
body.hold-transition:not(.login-page):not(.scan-body) .modern-hero{position:relative;z-index:1;}
body.hold-transition:not(.login-page):not(.scan-body) .user-panel .image img{width:54px;height:54px;object-fit:cover;border:3px solid rgba(255,255,255,.75);}
body.hold-transition:not(.login-page):not(.scan-body) .user-panel .info{left:70px!important;padding-top:6px!important;}
body.hold-transition:not(.login-page):not(.scan-body) .sidebar-menu>li>a{display:flex;align-items:center;gap:10px;}
body.hold-transition:not(.login-page):not(.scan-body) .sidebar-menu>li>a>i{width:18px;text-align:center;}
body.hold-transition:not(.login-page):not(.scan-body) .treeview-menu>li>a{padding-left:18px!important;}
@media (max-width:991px){body.hold-transition:not(.login-page):not(.scan-body) .main-header{z-index:9999!important;}body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{margin-top:108px!important;}}


/* REV20: perbaikan final topbar sticky dan jarak konten admin */
body.hold-transition:not(.login-page):not(.scan-body){
  padding-top:58px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .main-header{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:10050 !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper,
body.hold-transition:not(.login-page):not(.scan-body) .main-footer{
  margin-top:0 !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{
  padding-top:10px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-header{
  padding:12px 18px 10px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-header h1{
  margin:0 !important;
  line-height:1.25 !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content{
  padding:0 18px 18px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .main-sidebar{
  top:58px !important;
}
@media (max-width:991px){
  body.hold-transition:not(.login-page):not(.scan-body){
    padding-top:108px !important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper,
  body.hold-transition:not(.login-page):not(.scan-body) .main-footer{
    margin-top:0 !important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper{
    padding-top:8px !important;
  }
  body.hold-transition:not(.login-page):not(.scan-body) .main-sidebar{
    top:108px !important;
  }
}

/* REV22: gradasi dasar biru-oranye + laporan harian PDF */
body.hold-transition:not(.login-page):not(.scan-body){
  background:
    radial-gradient(circle at 8% 12%, rgba(249,115,22,.24), transparent 32%),
    radial-gradient(circle at 92% 5%, rgba(59,130,246,.28), transparent 34%),
    linear-gradient(135deg,#0f172a 0%,#123c8c 38%,#1e40af 58%,#f97316 100%) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .content-wrapper,
body.hold-transition.sidebar-mini:not(.login-page):not(.scan-body) .content-wrapper,
body.hold-transition.sidebar-mini:not(.login-page):not(.scan-body) .right-side{
  background:
    radial-gradient(circle at 12% 14%, rgba(249,115,22,.18), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(96,165,250,.20), transparent 32%),
    linear-gradient(135deg,rgba(15,23,42,.88) 0%,rgba(30,64,175,.62) 55%,rgba(249,115,22,.36) 100%) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .main-header .logo,
body.hold-transition:not(.login-page):not(.scan-body) .main-header .navbar,
.main-header .navbar,.main-header .logo{
  background:linear-gradient(90deg,#1d4ed8 0%,#0284c7 42%,#f97316 100%) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .modern-hero,
.modern-hero{
  background:linear-gradient(135deg,#1d4ed8 0%,#0284c7 48%,#f97316 100%) !important;
  box-shadow:0 26px 70px rgba(249,115,22,.22) !important;
}
body.hold-transition:not(.login-page):not(.scan-body)::before{
  background:radial-gradient(circle, rgba(249,115,22,.22), rgba(249,115,22,0) 68%) !important;
}
body.hold-transition:not(.login-page):not(.scan-body)::after{
  background:radial-gradient(circle, rgba(59,130,246,.24), rgba(59,130,246,0) 68%) !important;
}
.report-harian-table{
  width:100% !important;
  border-collapse:collapse !important;
  font-size:11px;
}
.report-harian-table th{
  background:#e5e7eb !important;
  color:#111827 !important;
  border:1px solid #000 !important;
  text-align:center !important;
  font-weight:900 !important;
  padding:6px 5px !important;
}
.report-harian-table td{
  border:1px solid #000 !important;
  padding:5px 5px !important;
  color:#111827 !important;
}
.report-signature-kamad{
  float:right !important;
  width:250px !important;
  text-align:center !important;
  margin-top:22px !important;
}
@media print{
  .report-harian-table{font-size:9.5px !important; table-layout:auto !important;}
  .report-harian-table th,.report-harian-table td{border:1px solid #000 !important; padding:3px 4px !important;}
  .report-signature-kamad{
    position:fixed !important;
    right:12mm !important;
    bottom:10mm !important;
    width:240px !important;
    font-size:11px !important;
    background:#fff !important;
  }
  @page{size:F4 landscape;margin:10mm;}
}


/* REV28: perbaikan layout cetak laporan agar tanda tangan tidak menimpa data */
.report-preview{
  overflow:visible !important;
}
.report-harian-wrap,
.report-semester-summary-wrap,
.report-matrix-wrap{
  margin-bottom:14px !important;
}
.report-footer-area{
  width:100%;
  display:flex;
  justify-content:flex-end;
  align-items:flex-start;
  clear:both;
  margin-top:18px;
}
.report-signature,
.report-signature-kamad{
  float:none !important;
  position:static !important;
  width:260px !important;
  max-width:100%;
  text-align:center !important;
  margin:0 !important;
  background:#fff;
  page-break-inside:avoid;
  break-inside:avoid;
}
.report-sign-space{
  height:72px;
}
.report-semester-summary-table th,
.report-semester-summary-table td,
.report-harian-table th,
.report-harian-table td{
  vertical-align:middle !important;
}
@media (max-width:767px){
  .report-footer-area{justify-content:center;}
  .report-signature,.report-signature-kamad{width:100% !important;}
}
@media print{
  .report-preview{
    overflow:visible !important;
    padding-bottom:0 !important;
  }
  .report-harian-wrap,
  .report-semester-summary-wrap,
  .report-matrix-wrap{
    margin-bottom:10px !important;
  }
  .report-footer-area{
    display:flex !important;
    justify-content:flex-end !important;
    width:100% !important;
    margin-top:10px !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
  }
  .report-signature,
  .report-signature-kamad{
    position:static !important;
    right:auto !important;
    bottom:auto !important;
    float:none !important;
    width:215px !important;
    font-size:10px !important;
    margin:0 !important;
    background:#fff !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
  }
  .report-sign-space{height:58px !important;}
  .report-harian-table{table-layout:fixed !important;}
  .report-harian-table th:nth-child(1), .report-harian-table td:nth-child(1){width:28px !important;}
  .report-harian-table th:nth-child(2), .report-harian-table td:nth-child(2){width:72px !important;}
  .report-harian-table th:nth-child(3), .report-harian-table td:nth-child(3){width:150px !important;}
  .report-harian-table th:nth-child(4), .report-harian-table td:nth-child(4){width:70px !important;}
  .report-harian-table th:nth-child(5), .report-harian-table td:nth-child(5),
  .report-harian-table th:nth-child(6), .report-harian-table td:nth-child(6),
  .report-harian-table th:nth-child(7), .report-harian-table td:nth-child(7),
  .report-harian-table th:nth-child(8), .report-harian-table td:nth-child(8),
  .report-harian-table th:nth-child(9), .report-harian-table td:nth-child(9){width:72px !important;}
  .report-harian-table th:nth-child(10), .report-harian-table td:nth-child(10){width:110px !important;}
  .report-semester-summary-table{table-layout:fixed !important;}
}


/* REV30: tombol absen dan credit halaman login */
.landing-absen-btn{
  height:48px!important;
  line-height:34px!important;
  margin-top:12px!important;
  border-radius:14px!important;
  font-weight:900!important;
  background:linear-gradient(135deg,#16a34a,#22c55e)!important;
  border:0!important;
  box-shadow:0 14px 30px rgba(34,197,94,.28)!important;
}
.landing-absen-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 36px rgba(34,197,94,.35)!important;
}
.landing-designer{
  margin-top:12px;
  text-align:center;
  color:#475569;
  font-weight:800;
  letter-spacing:.2px;
}
.landing-designer em{
  font-style:italic;
  background:linear-gradient(135deg,#0ea5e9,#22c55e);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}


/* REV31: Login lebih hidup, elegan, profesional */
.modern-login-page{
  background:
    radial-gradient(circle at 14% 16%, rgba(34,197,94,.28), transparent 26%),
    radial-gradient(circle at 84% 22%, rgba(14,165,233,.30), transparent 28%),
    radial-gradient(circle at 62% 88%, rgba(37,99,235,.22), transparent 30%),
    linear-gradient(135deg,#042f2e 0%,#0f766e 45%,#0f3f5f 100%)!important;
  overflow-x:hidden;
}
.modern-login-page:before,
.modern-login-page:after{
  content:""; position:fixed; border-radius:999px; pointer-events:none; z-index:0;
  background:rgba(255,255,255,.08); filter:blur(1px);
}
.modern-login-page:before{width:340px;height:340px;left:-120px;top:-90px;animation:loginFloatA 10s ease-in-out infinite;}
.modern-login-page:after{width:420px;height:420px;right:-160px;bottom:-130px;animation:loginFloatB 13s ease-in-out infinite;}
@keyframes loginFloatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(28px,22px) scale(1.08)}}
@keyframes loginFloatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-24px,-18px) scale(1.06)}}
.modern-login-page .landing-wrap{position:relative;z-index:1;}
.modern-login-page .landing-card{max-width:1180px;gap:32px;}
.modern-login-page .landing-panel{
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.08));
  border:1px solid rgba(255,255,255,.26);
  box-shadow:0 36px 100px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.22);
}
.modern-login-page .login-card-modern{
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(246,250,255,.94))!important;
  border:1px solid rgba(255,255,255,.72)!important;
  box-shadow:0 36px 95px rgba(2,44,34,.33), 0 0 0 1px rgba(255,255,255,.25) inset!important;
  padding:34px!important;
  transform:translateY(0);
  transition:.25s ease;
}
.modern-login-page .login-card-modern:hover{transform:translateY(-3px);box-shadow:0 42px 110px rgba(2,44,34,.38)!important;}
.modern-login-page .login-logo img{width:96px!important;filter:drop-shadow(0 12px 18px rgba(15,23,42,.16));}
.modern-login-page .login-logo span{display:block;font-size:36px;font-weight:900;letter-spacing:-.7px;margin-top:4px;}
.modern-login-page .login-box-msg{font-size:15px;line-height:1.55;margin-bottom:20px;}
.modern-login-page .login-card-modern .form-control{
  height:52px!important;border-radius:18px!important;background:#eef5ff!important;border:1px solid #cbdaf2!important;
  font-size:15px;padding-left:16px;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)!important;
}
.modern-login-page .login-card-modern .form-control-feedback{height:52px;line-height:52px;color:#64748b;}
.modern-login-page .login-card-modern .btn{
  height:52px!important;border-radius:18px!important;font-size:16px;box-shadow:0 14px 28px rgba(37,99,235,.22);
}
.modern-login-page .login-card-modern form .btn-primary{margin-top:8px;}
.modern-login-page .landing-absen-btn{
  margin-top:12px!important;background:linear-gradient(135deg,#22c55e,#059669)!important;
  box-shadow:0 14px 28px rgba(5,150,105,.24)!important;
}
.modern-login-page .landing-designer{
  margin-top:14px;text-align:center!important;font-style:normal!important;font-weight:800;color:#0f766e;
  background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.13);border-radius:999px;padding:9px 14px;
}
.modern-login-page .landing-designer em{font-style:normal!important;}
@media(max-width:991px){
  .modern-login-page .landing-wrap{padding:24px 12px;}
  .modern-login-page .login-card-modern{padding:26px!important;}
  .modern-login-page .login-logo span{font-size:30px;}
}


/* REV33: popup login salah dan perbaikan area anggota/siswa */
.login-popup-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:999999;display:flex;align-items:center;justify-content:center;padding:18px;backdrop-filter:blur(6px);}
.login-popup-card{width:min(430px,94vw);background:#fff;border-radius:28px;padding:28px 24px;text-align:center;box-shadow:0 35px 90px rgba(15,23,42,.32);border:1px solid rgba(226,232,240,.9);}
.login-popup-icon{width:92px;height:92px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;font-size:42px;color:#fff;background:linear-gradient(135deg,#f97316,#ef4444);box-shadow:0 18px 35px rgba(239,68,68,.28);}
.login-popup-card h3{margin:0 0 8px;color:#0f172a;font-weight:900;font-size:26px;}
.login-popup-card p{margin:0 0 18px;color:#475569;font-weight:700;line-height:1.6;}
.login-popup-card .btn{border-radius:14px;font-weight:800;padding:10px 24px;}
body.hold-transition:not(.login-page):not(.scan-body) .callout{border-radius:18px!important;box-shadow:0 16px 34px rgba(15,23,42,.08);}
body.hold-transition:not(.login-page):not(.scan-body) .table-responsive,body.hold-transition:not(.login-page):not(.scan-body) .box-body{overflow-x:auto;}


/* REV34: judul dashboard dibuat lebih jelas, elegan, dan hidup */
.dashboard-section-title{
  display:flex !important;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin:0 !important;
  padding:12px 18px !important;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(15,23,42,.92), rgba(30,41,59,.76));
  border:1px solid rgba(96,165,250,.24);
  box-shadow:0 14px 35px rgba(2,6,23,.22), inset 0 1px 0 rgba(255,255,255,.08);
  position:relative;
  overflow:hidden;
}
.dashboard-section-title::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, rgba(59,130,246,.16), rgba(34,211,238,.10), rgba(251,146,60,.12));
  opacity:.95;
  pointer-events:none;
}
.dashboard-section-title::after{
  content:"";
  position:absolute;
  width:120px;
  height:120px;
  right:-26px;
  top:-36px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.18), rgba(255,255,255,0));
  animation:dashboardGlowFloat 5s ease-in-out infinite;
}
.dashboard-section-title .title-badge,
.dashboard-section-title .title-main,
.dashboard-section-title .title-sub{position:relative; z-index:1;}
.dashboard-section-title .title-badge{
  width:44px;
  height:44px;
  border-radius:14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,#2563eb,#22c55e);
  color:#fff;
  box-shadow:0 10px 25px rgba(37,99,235,.35);
  animation:dashboardBadgePulse 2.6s ease-in-out infinite;
}
.dashboard-section-title .title-badge i{font-size:20px;}
.dashboard-section-title .title-main{
  font-size:30px !important;
  font-weight:900 !important;
  letter-spacing:-.6px;
  color:#ffffff !important;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
  line-height:1.1;
}
.dashboard-section-title .title-sub{
  font-size:15px !important;
  font-weight:700 !important;
  color:#dbeafe !important;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.dashboard-section-title-student .title-badge{background:linear-gradient(135deg,#2563eb,#06b6d4);}
.dashboard-section-title-teacher .title-badge{background:linear-gradient(135deg,#f97316,#ec4899);}
@keyframes dashboardGlowFloat{
  0%,100%{transform:translateY(0) scale(1); opacity:.85;}
  50%{transform:translateY(10px) scale(1.08); opacity:1;}
}
@keyframes dashboardBadgePulse{
  0%,100%{transform:translateY(0) scale(1);}
  50%{transform:translateY(-2px) scale(1.05);}
}
@media (max-width:991px){
  .dashboard-section-title{padding:10px 14px !important; gap:10px;}
  .dashboard-section-title .title-badge{width:38px;height:38px;border-radius:12px;}
  .dashboard-section-title .title-main{font-size:24px !important;}
  .dashboard-section-title .title-sub{font-size:13px !important; padding:6px 10px;}
}
@media (max-width:575px){
  .dashboard-section-title{align-items:flex-start;}
  .dashboard-section-title .title-main{width:100%; font-size:22px !important;}
  .dashboard-section-title .title-sub{width:100%; text-align:left;}
}


/* REV37: kartu ringkasan dibuat center dengan ikon animasi */
body.hold-transition:not(.login-page):not(.scan-body) .small-box{
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  position:relative !important;
  overflow:hidden !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner{
  padding:20px 20px 14px !important;
  text-align:center !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  min-height:108px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner h3{
  width:100% !important;
  text-align:center !important;
  font-size:42px !important;
  line-height:1.05 !important;
  margin:6px 0 8px !important;
  color:#0f172a !important;
  text-shadow:0 1px 0 rgba(255,255,255,.4) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner p{
  width:100% !important;
  text-align:center !important;
  font-size:17px !important;
  font-weight:900 !important;
  margin:0 !important;
  letter-spacing:.2px !important;
  color:rgba(15,23,42,.82) !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .icon{
  left:50% !important;
  right:auto !important;
  top:16px !important;
  transform:translateX(-50%) !important;
  opacity:.13 !important;
  z-index:1 !important;
  pointer-events:none !important;
  animation:rev37CardIconFloat 3.8s ease-in-out infinite !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .icon i{
  font-size:84px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner,
body.hold-transition:not(.login-page):not(.scan-body) .small-box .small-box-footer{
  position:relative !important;
  z-index:2 !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box .small-box-footer{
  text-align:center !important;
  font-size:15px !important;
  font-weight:900 !important;
  letter-spacing:.15px !important;
  padding:10px 12px !important;
}
body.hold-transition:not(.login-page):not(.scan-body) .small-box::after{
  content:'';
  position:absolute;
  width:140px;
  height:140px;
  border-radius:50%;
  right:-36px;
  bottom:-52px;
  background:radial-gradient(circle, rgba(255,255,255,.16), rgba(255,255,255,0));
  animation:rev37CardBlob 5.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes rev37CardIconFloat{
  0%,100%{transform:translateX(-50%) translateY(0) scale(1);}
  50%{transform:translateX(-50%) translateY(6px) scale(1.06);}
}
@keyframes rev37CardBlob{
  0%,100%{transform:scale(1) translateY(0); opacity:.8;}
  50%{transform:scale(1.08) translateY(-8px); opacity:1;}
}
@media (max-width:991px){
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner{min-height:96px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner h3{font-size:34px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner p{font-size:15px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .icon i{font-size:70px !important;}
}
@media (max-width:575px){
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner h3{font-size:28px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .inner p{font-size:14px !important;}
  body.hold-transition:not(.login-page):not(.scan-body) .small-box .small-box-footer{font-size:13px !important;}
}


/* REV41: Optimasi halaman menu Admin agar ringan dan cepat */
.admin-fast-page .admin-fast-content{padding-top:0!important;}
.admin-fast-page .admin-fast-hero{margin-bottom:16px!important; padding:26px!important;}
.admin-fast-page .admin-fast-hero h2{font-size:34px!important;}
.admin-fast-box{overflow:hidden!important;}
.admin-fast-toolbar{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;flex-wrap:wrap!important;}
.admin-fast-toolbar .box-title{font-size:22px!important;font-weight:900!important;color:#0f172a!important;}
.admin-fast-muted{margin:6px 0 0;color:#64748b;font-weight:700;}
.admin-fast-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.admin-fast-search{display:flex;align-items:center;gap:8px;min-width:min(420px,100%);}
.admin-fast-search .form-control{border-radius:14px!important;height:40px!important;}
.admin-fast-table{margin-bottom:0!important;}
.admin-fast-table thead th{text-align:center!important;background:linear-gradient(135deg,#2563eb,#0ea5e9)!important;color:#fff!important;border-color:rgba(255,255,255,.2)!important;padding:13px 10px!important;}
.admin-fast-table tbody td{vertical-align:middle!important;padding:12px 10px!important;}
.admin-fast-table tbody tr:hover td{background:#eff6ff!important;}
.admin-level-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:900;font-size:12px;}
.admin-fast-empty{padding:28px!important;color:#64748b;font-weight:800;background:#f8fafc!important;}
@media(max-width:767px){.admin-fast-toolbar{align-items:flex-start!important}.admin-fast-actions,.admin-fast-search{width:100%}.admin-fast-search .form-control{width:100%!important}.admin-fast-page .admin-fast-hero h2{font-size:28px!important}}


/* REV42: perbaikan final format cetak laporan + ttd kamad tidak menindih data */
.report-harian-wrap,
.report-bulanan-wrap,
.report-semester-summary-wrap,
.report-matrix-wrap{
  position:relative !important;
  z-index:1 !important;
  margin-bottom:16px !important;
}
.report-footer-area{
  display:block !important;
  width:100% !important;
  clear:both !important;
  margin-top:18px !important;
  padding-top:12px !important;
  border-top:1px solid #dbe3ef !important;
  position:relative !important;
}
.report-signature,
.report-signature-kamad{
  display:block !important;
  float:none !important;
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  margin-left:auto !important;
  margin-right:0 !important;
  width:240px !important;
  max-width:100% !important;
  text-align:center !important;
  background:#fff !important;
  z-index:2 !important;
}
.report-sign-space{height:74px !important;}
.report-preview table{margin-bottom:0 !important;}
@media print{
  .report-preview{
    padding:0 !important;
    overflow:visible !important;
  }
  .report-meta-card{margin-bottom:8px !important;}
  .report-summary-grid{margin-bottom:8px !important;}
  .report-harian-wrap,
  .report-bulanan-wrap,
  .report-semester-summary-wrap,
  .report-matrix-wrap{
    margin-bottom:8px !important;
    padding-bottom:0 !important;
  }
  .report-footer-area{
    display:block !important;
    clear:both !important;
    width:100% !important;
    margin-top:12px !important;
    padding-top:8px !important;
    border-top:0 !important;
    page-break-before:auto !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
    position:relative !important;
  }
  .report-signature,
  .report-signature-kamad{
    display:block !important;
    float:none !important;
    position:relative !important;
    right:auto !important;
    bottom:auto !important;
    margin-left:auto !important;
    margin-right:0 !important;
    width:190px !important;
    text-align:center !important;
    font-size:9px !important;
    background:#fff !important;
    page-break-inside:avoid !important;
    break-inside:avoid !important;
  }
  .report-sign-space{height:50px !important;}
}

/* REV61: Menu Pindah Kelas */
.pindah-kelas-card{border-radius:24px!important;overflow:hidden;box-shadow:0 18px 45px rgba(15,23,42,.12)!important;border:1px solid rgba(219,234,254,.9)!important;}
.pindah-kelas-card .box-header{background:linear-gradient(135deg,#eff6ff,#ecfdf5)!important;padding:18px 20px!important;}
.pindah-kelas-card .box-title{font-weight:900!important;color:#0f172a!important;}
.pindah-kelas-info{margin-top:14px;padding:12px 14px;border-radius:18px;background:linear-gradient(135deg,#fff7ed,#eff6ff);border:1px solid #fed7aa;display:flex;gap:10px;color:#334155;font-weight:700;line-height:1.5;}
.pindah-kelas-info i{font-size:20px;color:#2563eb;margin-top:2px;}
.pindah-kelas-top{margin-bottom:18px;display:flex;align-items:end;flex-wrap:wrap;}
.pk-stat-card{border-radius:20px;padding:16px 18px;background:linear-gradient(135deg,#2563eb,#06b6d4,#10b981);color:#fff;box-shadow:0 16px 35px rgba(37,99,235,.24);position:relative;overflow:hidden;margin-bottom:10px;}
.pk-stat-card:after{content:"";position:absolute;right:-28px;top:-35px;width:115px;height:115px;border-radius:50%;background:rgba(255,255,255,.16);animation:pkFloat 4s ease-in-out infinite;}
.pk-stat-card span,.pk-stat-card strong,.pk-stat-card small{position:relative;z-index:1;display:block;}
.pk-stat-card span{font-size:12px;text-transform:uppercase;letter-spacing:.7px;font-weight:800;color:rgba(255,255,255,.88);}
.pk-stat-card strong{font-size:25px;line-height:1.15;margin-top:5px;font-weight:900;}
.pk-stat-card small{margin-top:4px;color:rgba(255,255,255,.88);font-weight:700;}
@keyframes pkFloat{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(10px) scale(1.06)}}
.pindah-kelas-table-wrap{border-radius:20px;border:1px solid #dbeafe;overflow:auto;}
.pindah-kelas-table{margin-bottom:0!important;min-width:760px;}
.pindah-kelas-table thead th{background:linear-gradient(135deg,#2563eb,#14b8a6)!important;color:#fff!important;text-align:center!important;vertical-align:middle!important;font-weight:900!important;}
.pindah-kelas-table tbody td{vertical-align:middle!important;}
.pk-badge{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border-radius:999px;background:#eff6ff;color:#1d4ed8;font-weight:900;border:1px solid #dbeafe;}
.pk-empty{padding:30px 15px;color:#64748b;font-weight:800;}
.pk-empty i{font-size:34px;color:#94a3b8;margin-bottom:8px;}
.pindah-kelas-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:18px;}
.pindah-kelas-actions .btn{border-radius:16px!important;font-weight:900!important;box-shadow:0 12px 25px rgba(15,23,42,.09);}
@media(max-width:767px){.pindah-kelas-top{display:block}.pindah-kelas-actions{justify-content:stretch}.pindah-kelas-actions .btn{width:100%;}.pindah-kelas-card .box-body{padding:14px!important;}}


/* REV62: perbaikan fitur Pindah Kelas agar checkbox mudah dipakai dan proses lebih jelas */
.pk-check-master,
.pk-check-row{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0;
  cursor:pointer;
}
.pk-check-master input,
.pk-check-row input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.pk-check-master span,
.pk-check-row span{
  width:28px;
  height:28px;
  border-radius:10px;
  border:2px solid #93c5fd;
  background:linear-gradient(135deg,#fff,#eff6ff);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 18px rgba(37,99,235,.12);
  transition:.2s ease;
}
.pk-check-master span:before,
.pk-check-row span:before{
  content:'00c';
  font-family:FontAwesome;
  font-size:14px;
  color:#fff;
  transform:scale(0);
  transition:.2s ease;
}
.pk-check-master input:checked + span,
.pk-check-row input:checked + span{
  background:linear-gradient(135deg,#2563eb,#10b981);
  border-color:#10b981;
  transform:translateY(-1px);
}
.pk-check-master input:checked + span:before,
.pk-check-row input:checked + span:before{
  transform:scale(1);
}
.pk-selected-info{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  background:linear-gradient(135deg,#eff6ff,#dcfce7);
  color:#0f172a;
  font-weight:900;
  border:1px solid #bfdbfe;
  box-shadow:0 10px 24px rgba(15,23,42,.08);
  margin-right:8px;
}
.pindah-kelas-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
@media(max-width:767px){
  .pindah-kelas-actions .btn,
  .pindah-kelas-actions .pk-selected-info{width:100%; justify-content:center; margin-right:0;}
}

/* REV64 speed optimization */
.fast-popup{animation-duration:.35s!important;}
.scan-popup-student-icon{transition:none!important;}

/* REV107: halaman awal dibuat lebih terang, bersih, dan nyaman dilihat */
.modern-login-page{
  background:
    radial-gradient(circle at 12% 16%, rgba(34,197,94,.18), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(59,130,246,.18), transparent 30%),
    radial-gradient(circle at 72% 88%, rgba(251,191,36,.16), transparent 26%),
    linear-gradient(135deg,#f3fbff 0%,#eef7ff 40%,#f8fcff 100%) !important;
  color:#0f172a !important;
}
.modern-login-page:before,
.modern-login-page:after{
  background:rgba(59,130,246,.08) !important;
  animation:none !important;
}
.modern-login-page .landing-panel{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(247,250,255,.92)) !important;
  color:#0f172a !important;
  border:1px solid rgba(191,219,254,.9) !important;
  box-shadow:0 28px 70px rgba(37,99,235,.12), inset 0 1px 0 rgba(255,255,255,.82) !important;
  backdrop-filter:blur(14px);
}
.modern-login-page .landing-brand,
.modern-login-page .landing-brand div,
.modern-login-page .landing-title,
.modern-login-page .landing-subtitle,
.modern-login-page .landing-feature,
.modern-login-page .landing-feature b,
.modern-login-page .landing-feature span,
.modern-login-page #modernClock{
  color:#0f172a !important;
}
.modern-login-page .landing-title{
  font-size:44px;
  letter-spacing:-1.3px;
  text-shadow:none !important;
}
.modern-login-page .landing-subtitle{
  color:#334155 !important;
  opacity:1 !important;
}
.modern-login-page .landing-brand img{
  background:#ffffff !important;
  box-shadow:0 16px 30px rgba(37,99,235,.14) !important;
}
.modern-login-page .landing-features{
  gap:14px;
}
.modern-login-page .landing-feature{
  background:rgba(255,255,255,.88) !important;
  border:1px solid rgba(191,219,254,.88) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06);
}
.modern-login-page .landing-feature i{
  color:#2563eb !important;
}
.modern-login-page .login-card-modern{
  background:linear-gradient(180deg,#ffffff,#f8fbff) !important;
  border:1px solid rgba(191,219,254,.95) !important;
  box-shadow:0 28px 72px rgba(15,23,42,.10) !important;
}
.modern-login-page .login-card-modern:hover{
  transform:none !important;
  box-shadow:0 28px 72px rgba(15,23,42,.10) !important;
}
.modern-login-page .login-logo span{
  color:#0f172a !important;
}
.modern-login-page .login-box-msg{
  color:#64748b !important;
}
.modern-login-page .login-card-modern .form-control{
  background:#f8fbff !important;
  border:1px solid #cbd5e1 !important;
}
.modern-login-page .landing-designer{
  color:#0f766e !important;
  background:rgba(15,118,110,.08) !important;
}
.login-footer-modern{
  color:#334155 !important;
  text-shadow:none !important;
}
@media (max-width: 991px){
  .modern-login-page .landing-title{font-size:34px !important;}
  .modern-login-page .landing-panel,
  .modern-login-page .login-card-modern{border-radius:26px !important;}
}

/* REV109: efek liquid glass untuk halaman login */
.modern-login-page{
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.55), transparent 20%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.28), transparent 22%),
    radial-gradient(circle at 70% 82%, rgba(255,255,255,.24), transparent 24%),
    linear-gradient(135deg,#eaf7f0 0%,#dff3e7 35%,#edf9f2 100%) !important;
}
.modern-login-page .landing-panel,
.modern-login-page .login-card-modern,
.modern-login-page .landing-feature,
.modern-login-page .landing-designer{
  position:relative;
  overflow:hidden;
}
.modern-login-page .landing-panel,
.modern-login-page .login-card-modern{
  background:linear-gradient(180deg, rgba(255,255,255,.48), rgba(255,255,255,.28)) !important;
  border:1px solid rgba(255,255,255,.58) !important;
  box-shadow:
    0 22px 55px rgba(15,23,42,.10),
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(255,255,255,.26) !important;
  backdrop-filter: blur(18px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(165%) !important;
}
.modern-login-page .landing-panel:before,
.modern-login-page .login-card-modern:before,
.modern-login-page .landing-feature:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.55) 0%, rgba(255,255,255,.18) 20%, rgba(255,255,255,0) 46%),
    radial-gradient(circle at 14% 10%, rgba(255,255,255,.46), transparent 26%),
    radial-gradient(circle at 88% 92%, rgba(255,255,255,.22), transparent 28%);
}
.modern-login-page .landing-panel:after,
.modern-login-page .login-card-modern:after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:10px;
  height:34px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,0));
  pointer-events:none;
  opacity:.72;
}
.modern-login-page .landing-feature{
  background:linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22)) !important;
  border:1px solid rgba(255,255,255,.52) !important;
  box-shadow:
    0 12px 26px rgba(15,23,42,.06),
    inset 0 1px 0 rgba(255,255,255,.84) !important;
  backdrop-filter: blur(14px) saturate(145%);
  -webkit-backdrop-filter: blur(14px) saturate(145%);
}
.modern-login-page .landing-brand img{
  border:1px solid rgba(255,255,255,.72) !important;
  background:linear-gradient(180deg, rgba(255,255,255,.88), rgba(255,255,255,.58)) !important;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}
.modern-login-page .login-card-modern .form-control{
  background:rgba(255,255,255,.36) !important;
  border:1px solid rgba(148,163,184,.34) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75), 0 4px 14px rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px) saturate(135%);
  -webkit-backdrop-filter: blur(10px) saturate(135%);
}
.modern-login-page .landing-designer{
  background:linear-gradient(180deg, rgba(255,255,255,.40), rgba(255,255,255,.22)) !important;
  border:1px solid rgba(255,255,255,.56) !important;
  box-shadow:0 10px 22px rgba(15,23,42,.05), inset 0 1px 0 rgba(255,255,255,.86) !important;
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
}
@media (max-width: 767px){
  .modern-login-page .landing-panel{display:none !important;}
  .modern-login-page .landing-card{grid-template-columns:1fr !important;max-width:520px !important;}
  .modern-login-page .login-card-modern{width:100% !important;}
}


/* REV110: background halaman login diganti warna telur asin */
.modern-login-page{
  background:
    radial-gradient(circle at 12% 14%, rgba(255,255,255,.52), transparent 20%),
    radial-gradient(circle at 86% 18%, rgba(236,248,241,.58), transparent 24%),
    radial-gradient(circle at 78% 82%, rgba(206,231,216,.44), transparent 26%),
    radial-gradient(circle at 18% 78%, rgba(222,242,231,.42), transparent 24%),
    linear-gradient(135deg,#e7f3ec 0%, #d9ece1 32%, #cfe5d8 68%, #eaf6ef 100%) !important;
}
.modern-login-page:before,
.modern-login-page:after{
  background:rgba(214,235,223,.42) !important;
}

/* REV111: background teknologi interaktif mengikuti kursor */
.modern-login-page{
  background:
    radial-gradient(circle at 15% 18%, rgba(56,189,248,.18), transparent 20%),
    radial-gradient(circle at 82% 22%, rgba(45,212,191,.16), transparent 22%),
    radial-gradient(circle at 70% 84%, rgba(59,130,246,.18), transparent 24%),
    linear-gradient(135deg, #06131f 0%, #0a2033 34%, #0e2d44 68%, #091824 100%) !important;
  overflow:hidden;
}
.modern-login-page:before,
.modern-login-page:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}
.modern-login-page:before{
  background:
    linear-gradient(rgba(96,165,250,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(45,212,191,.08) 1px, transparent 1px);
  background-size: 42px 42px, 42px 42px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.95), rgba(0,0,0,.45));
  animation: techGridShift 16s linear infinite;
  opacity:.52;
}
.modern-login-page:after{
  background:
    radial-gradient(circle at 20% 20%, rgba(34,211,238,.12), transparent 18%),
    radial-gradient(circle at 80% 30%, rgba(45,212,191,.12), transparent 18%),
    radial-gradient(circle at 65% 75%, rgba(59,130,246,.10), transparent 16%);
  filter: blur(12px);
  animation: techGlowFloat 11s ease-in-out infinite;
  opacity:.9;
}
@keyframes techGridShift{
  0%{transform:translate3d(0,0,0)}
  50%{transform:translate3d(-14px, -10px, 0)}
  100%{transform:translate3d(-28px, -20px, 0)}
}
@keyframes techGlowFloat{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(12px,-8px,0) scale(1.03)}
}
.modern-login-page .landing-wrap,
.modern-login-page .login-footer-modern{position:relative;z-index:2;}
.modern-login-page .landing-panel,
.modern-login-page .login-card-modern{
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.18)) !important;
  border:1px solid rgba(255,255,255,.30) !important;
  box-shadow:
    0 24px 60px rgba(2,12,27,.38),
    inset 0 1px 0 rgba(255,255,255,.60),
    0 0 0 1px rgba(255,255,255,.06) !important;
  backdrop-filter: blur(20px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(150%) !important;
}
.modern-login-page .landing-feature,
.modern-login-page .landing-designer{
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.14)) !important;
  border:1px solid rgba(255,255,255,.25) !important;
  box-shadow:0 14px 28px rgba(2,12,27,.20), inset 0 1px 0 rgba(255,255,255,.45) !important;
  backdrop-filter: blur(16px) saturate(145%);
  -webkit-backdrop-filter: blur(16px) saturate(145%);
}
.modern-login-page .landing-brand,
.modern-login-page .landing-brand div,
.modern-login-page .landing-title,
.modern-login-page .landing-subtitle,
.modern-login-page .landing-feature,
.modern-login-page .landing-feature b,
.modern-login-page .landing-feature span,
.modern-login-page .login-logo span,
.modern-login-page .login-box-msg,
.modern-login-page #modernClock,
.modern-login-page .landing-designer,
.login-footer-modern{
  color:#e8f3ff !important;
}
.modern-login-page .landing-title{color:#f8fdff !important; text-shadow:0 8px 24px rgba(3,7,18,.25);}
.modern-login-page .landing-subtitle,
.modern-login-page .login-box-msg,
.modern-login-page .landing-feature span,
.login-footer-modern{color:rgba(232,243,255,.84) !important;}
.modern-login-page .landing-feature i{color:#67e8f9 !important;}
.modern-login-page .landing-brand img,
.modern-login-page .login-logo img{
  background:linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.28)) !important;
  border:1px solid rgba(255,255,255,.34) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.28) !important;
}
.modern-login-page .login-card-modern .form-control{
  background:rgba(231,242,255,.14) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 10px 24px rgba(5,15,28,.12) !important;
}
.modern-login-page .login-card-modern .form-control::placeholder{color:rgba(232,243,255,.62) !important;}
.modern-login-page .login-card-modern .form-control-feedback{color:rgba(232,243,255,.80) !important;}
.modern-login-page .login-card-modern .btn-primary{
  background:linear-gradient(135deg,#0ea5e9,#2563eb) !important;
  box-shadow:0 14px 32px rgba(37,99,235,.30) !important;
}
.modern-login-page .landing-absen-btn{
  background:linear-gradient(135deg,#14b8a6,#059669) !important;
  box-shadow:0 14px 32px rgba(5,150,105,.26) !important;
}
.tech-bg-canvas{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
  opacity:.92;
}
@media (max-width: 767px){
  .modern-login-page .landing-panel{display:none !important;}
  .modern-login-page .landing-card{grid-template-columns:1fr !important;max-width:520px !important;}
  .modern-login-page:before{background-size: 28px 28px, 28px 28px; opacity:.34;}
  .tech-bg-canvas{opacity:.55;}
}


/* REV112: upgrade ke tema premium neon biru-ungu AI/cyber */
.modern-login-page{
  background:
    radial-gradient(circle at 14% 16%, rgba(99,102,241,.22), transparent 20%),
    radial-gradient(circle at 84% 18%, rgba(168,85,247,.18), transparent 24%),
    radial-gradient(circle at 72% 78%, rgba(34,211,238,.14), transparent 20%),
    linear-gradient(135deg,#050816 0%, #0b1230 24%, #111c4f 52%, #1c1650 76%, #070b1c 100%) !important;
}
.modern-login-page:before{
  background:
    linear-gradient(rgba(129,140,248,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px) !important;
  background-size:44px 44px,44px 44px !important;
  opacity:.62 !important;
}
.modern-login-page:after{
  background:
    radial-gradient(circle at 18% 24%, rgba(129,140,248,.18), transparent 18%),
    radial-gradient(circle at 80% 28%, rgba(168,85,247,.16), transparent 20%),
    radial-gradient(circle at 68% 78%, rgba(34,211,238,.10), transparent 18%) !important;
  opacity:1 !important;
  filter:blur(18px) !important;
}
.modern-login-page .landing-panel,
.modern-login-page .login-card-modern{
  background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    0 26px 75px rgba(4,8,24,.56),
    0 0 0 1px rgba(129,140,248,.10),
    inset 0 1px 0 rgba(255,255,255,.24),
    inset 0 -1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
}
.modern-login-page .landing-panel:before,
.modern-login-page .login-card-modern:before,
.modern-login-page .landing-feature:before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 22%, rgba(255,255,255,0) 52%),
    radial-gradient(circle at 12% 10%, rgba(255,255,255,.22), transparent 24%),
    radial-gradient(circle at 90% 88%, rgba(129,140,248,.14), transparent 22%) !important;
}
.modern-login-page .landing-panel:after,
.modern-login-page .login-card-modern:after{
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,0)) !important;
  opacity:.76 !important;
}
.modern-login-page .landing-feature,
.modern-login-page .landing-designer{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    0 14px 28px rgba(4,8,24,.34),
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 24px rgba(99,102,241,.08) !important;
}
.modern-login-page .landing-title{
  color:#f8fbff !important;
  text-shadow:0 0 18px rgba(129,140,248,.18), 0 10px 30px rgba(0,0,0,.35) !important;
}
.modern-login-page .landing-brand,
.modern-login-page .landing-brand div,
.modern-login-page .login-logo span,
.modern-login-page #modernClock{
  color:#eef2ff !important;
}
.modern-login-page .landing-subtitle,
.modern-login-page .login-box-msg,
.modern-login-page .landing-feature span,
.login-footer-modern{
  color:rgba(226,232,255,.82) !important;
}
.modern-login-page .landing-feature i{
  color:#67e8f9 !important;
  text-shadow:0 0 14px rgba(34,211,238,.35);
}
.modern-login-page .landing-brand img,
.modern-login-page .login-logo img{
  background:linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.10)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:0 18px 42px rgba(0,0,0,.32), 0 0 24px rgba(129,140,248,.14) !important;
}
.modern-login-page .login-card-modern .form-control{
  background:linear-gradient(180deg, rgba(238,242,255,.12), rgba(199,210,254,.06)) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 8px 20px rgba(0,0,0,.16), 0 0 14px rgba(99,102,241,.06) !important;
}
.modern-login-page .login-card-modern .btn-primary{
  background:linear-gradient(135deg,#3b82f6 0%, #4f46e5 52%, #7c3aed 100%) !important;
  box-shadow:0 16px 34px rgba(79,70,229,.34), 0 0 22px rgba(99,102,241,.18) !important;
}
.modern-login-page .landing-absen-btn{
  background:linear-gradient(135deg,#06b6d4 0%, #2563eb 45%, #7c3aed 100%) !important;
  box-shadow:0 16px 34px rgba(37,99,235,.30), 0 0 22px rgba(34,211,238,.14) !important;
}
.modern-login-page .landing-designer{
  color:#e0e7ff !important;
}
.login-footer-modern{
  text-shadow:0 0 10px rgba(99,102,241,.10);
}


/* REV113: AI cyber luxury + neon ungu kuat + Apple glass premium + dark luxury technology */
.modern-login-page{
  background:
    radial-gradient(circle at 14% 14%, rgba(139,92,246,.24), transparent 18%),
    radial-gradient(circle at 84% 18%, rgba(168,85,247,.22), transparent 22%),
    radial-gradient(circle at 74% 82%, rgba(34,211,238,.14), transparent 18%),
    radial-gradient(circle at 18% 78%, rgba(59,130,246,.12), transparent 20%),
    linear-gradient(135deg,#02030a 0%, #070b18 16%, #0a1230 36%, #160b2d 62%, #090610 82%, #020307 100%) !important;
}
.modern-login-page:before{
  background:
    linear-gradient(rgba(167,139,250,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.08) 1px, transparent 1px) !important;
  background-size: 38px 38px, 38px 38px !important;
  opacity:.72 !important;
  animation: techGridShift 14s linear infinite !important;
}
.modern-login-page:after{
  background:
    radial-gradient(circle at 18% 22%, rgba(167,139,250,.20), transparent 16%),
    radial-gradient(circle at 80% 30%, rgba(192,132,252,.18), transparent 18%),
    radial-gradient(circle at 70% 78%, rgba(34,211,238,.10), transparent 16%),
    radial-gradient(circle at 32% 64%, rgba(59,130,246,.12), transparent 18%) !important;
  filter: blur(24px) saturate(155%) !important;
}
.modern-login-page .landing-panel,
.modern-login-page .login-card-modern{
  background:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,.07)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.58),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 44px rgba(124,58,237,.14),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(26px) saturate(175%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(175%) !important;
}
.modern-login-page .landing-panel:before,
.modern-login-page .login-card-modern:before,
.modern-login-page .landing-feature:before,
.modern-login-page .landing-designer:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, rgba(255,255,255,.24) 0%, rgba(255,255,255,.10) 20%, rgba(255,255,255,0) 50%),
    radial-gradient(circle at 14% 9%, rgba(255,255,255,.22), transparent 22%),
    radial-gradient(circle at 88% 92%, rgba(167,139,250,.12), transparent 20%);
}
.modern-login-page .landing-panel:after,
.modern-login-page .login-card-modern:after{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:10px;
  height:40px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,0));
  opacity:.78;
  pointer-events:none;
}
.modern-login-page .landing-feature,
.modern-login-page .landing-designer{
  background:linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 28px rgba(124,58,237,.10),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
  backdrop-filter: blur(18px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(160%) !important;
}
.modern-login-page .landing-title{
  color:#fbfbff !important;
  text-shadow:
    0 0 18px rgba(167,139,250,.18),
    0 0 34px rgba(124,58,237,.16),
    0 12px 34px rgba(0,0,0,.42) !important;
}
.modern-login-page .landing-brand,
.modern-login-page .landing-brand div,
.modern-login-page .login-logo span,
.modern-login-page #modernClock,
.modern-login-page .landing-feature b,
.modern-login-page .landing-designer{
  color:#f5f3ff !important;
}
.modern-login-page .landing-subtitle,
.modern-login-page .login-box-msg,
.modern-login-page .landing-feature span,
.login-footer-modern{
  color:rgba(226,232,255,.80) !important;
}
.modern-login-page .landing-feature i{
  color:#8b5cf6 !important;
  text-shadow:0 0 16px rgba(168,85,247,.46), 0 0 26px rgba(34,211,238,.12);
}
.modern-login-page .landing-brand img,
.modern-login-page .login-logo img{
  background:linear-gradient(180deg, rgba(255,255,255,.28), rgba(255,255,255,.12)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.34),
    0 0 30px rgba(139,92,246,.16),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
}
.modern-login-page .login-card-modern .form-control{
  background:linear-gradient(180deg, rgba(245,243,255,.10), rgba(199,210,254,.05)) !important;
  color:#ffffff !important;
  border:1px solid rgba(255,255,255,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 10px 24px rgba(0,0,0,.16),
    0 0 18px rgba(124,58,237,.06) !important;
  backdrop-filter: blur(12px) saturate(145%);
  -webkit-backdrop-filter: blur(12px) saturate(145%);
}
.modern-login-page .login-card-modern .form-control:focus{
  border-color:rgba(167,139,250,.50) !important;
  box-shadow:
    0 0 0 4px rgba(124,58,237,.12),
    0 0 26px rgba(124,58,237,.12),
    inset 0 1px 0 rgba(255,255,255,.10) !important;
}
.modern-login-page .login-card-modern .form-control::placeholder{color:rgba(226,232,255,.58) !important;}
.modern-login-page .login-card-modern .form-control-feedback{color:rgba(226,232,255,.76) !important;}
.modern-login-page .login-card-modern .btn-primary{
  background:linear-gradient(135deg,#3b82f6 0%, #5b4df3 38%, #8b5cf6 70%, #c084fc 100%) !important;
  box-shadow:
    0 18px 38px rgba(91,77,243,.36),
    0 0 28px rgba(139,92,246,.22),
    inset 0 1px 0 rgba(255,255,255,.18) !important;
}
.modern-login-page .landing-absen-btn{
  background:linear-gradient(135deg,#22d3ee 0%, #2563eb 36%, #7c3aed 100%) !important;
  box-shadow:
    0 18px 38px rgba(37,99,235,.28),
    0 0 28px rgba(34,211,238,.18),
    inset 0 1px 0 rgba(255,255,255,.16) !important;
}
.modern-login-page .landing-designer{
  color:#eef2ff !important;
}
.login-footer-modern{
  text-shadow:0 0 10px rgba(139,92,246,.10);
}


/* REV114: perbaikan posisi login agar selalu presisi di tengah + Apple original premium */
html, body{height:100%;}
body.modern-login-page{
  min-height:100dvh !important;
  height:100dvh !important;
  display:flex;
  flex-direction:column;
  overflow:hidden !important;
}
body.modern-login-page .landing-wrap{
  flex:1 1 auto;
  min-height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px 18px 78px !important;
  box-sizing:border-box;
}
body.modern-login-page .landing-card{
  width:min(1180px, 100%);
  margin:auto !important;
  align-items:center !important;
}
body.modern-login-page .landing-panel,
body.modern-login-page .login-card-modern{
  border-radius:34px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.20) !important;
  box-shadow:
    0 28px 80px rgba(0,0,0,.52),
    0 0 0 1px rgba(255,255,255,.04),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter: blur(28px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(165%) !important;
}
body.modern-login-page .landing-panel:after,
body.modern-login-page .login-card-modern:after{
  top:10px !important;
  left:22px !important;
  right:22px !important;
  height:42px !important;
  opacity:.86 !important;
  background:linear-gradient(180deg, rgba(255,255,255,.36), rgba(255,255,255,0)) !important;
}
body.modern-login-page .landing-feature,
body.modern-login-page .landing-designer{
  border-radius:22px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.05)) !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:0 16px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.18) !important;
}
body.modern-login-page .login-logo span{
  font-size:34px !important;
  letter-spacing:-.9px;
}
body.modern-login-page .login-card-modern .form-control{
  min-height:54px !important;
  border-radius:18px !important;
  padding-left:18px !important;
}
body.modern-login-page .login-card-modern .btn,
body.modern-login-page .landing-absen-btn,
body.modern-login-page .landing-designer{
  border-radius:18px !important;
}
body.modern-login-page .login-card-modern .btn-primary{
  background:linear-gradient(135deg,#1677ff 0%, #4f46e5 52%, #7c3aed 100%) !important;
}
body.modern-login-page .landing-absen-btn{
  background:linear-gradient(135deg,#22d3ee 0%, #2f6df6 50%, #7c3aed 100%) !important;
}
body.modern-login-page .landing-title{font-size:42px !important;}
body.modern-login-page .landing-subtitle{max-width:760px;}
body.modern-login-page .login-footer-modern{
  position:fixed;
  left:0;
  right:0;
  bottom:12px;
  z-index:4;
  margin:0 !important;
  text-align:center;
  pointer-events:none;
}
@media (max-width: 991px){
  body.modern-login-page .landing-wrap{padding:20px 12px 74px !important;}
  body.modern-login-page .landing-card{grid-template-columns:1fr !important;max-width:860px !important;}
  body.modern-login-page .landing-title{font-size:34px !important;}
}
@media (max-width: 767px){
  body.modern-login-page .landing-wrap{padding:16px 12px 70px !important;}
  body.modern-login-page .landing-card{max-width:520px !important;}
  body.modern-login-page .login-card-modern{width:100% !important; padding:24px !important;}
  body.modern-login-page .login-logo span{font-size:30px !important;}
  body.modern-login-page .login-footer-modern{bottom:10px; font-size:12px; padding:0 12px;}
}

/* REV117: perjelas tampilan login agar lebih terbaca */
body.modern-login-page .landing-panel,
body.modern-login-page .login-card-modern{
  background:linear-gradient(180deg, rgba(255,255,255,.84), rgba(255,255,255,.74)) !important;
  border:1px solid rgba(255,255,255,.88) !important;
  box-shadow:
    0 24px 58px rgba(15,23,42,.18),
    0 0 0 1px rgba(255,255,255,.55),
    inset 0 1px 0 rgba(255,255,255,.92) !important;
  backdrop-filter: blur(22px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(145%) !important;
}
body.modern-login-page .landing-panel:before,
body.modern-login-page .login-card-modern:before,
body.modern-login-page .landing-feature:before,
body.modern-login-page .landing-designer:before{
  background:
    linear-gradient(135deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.18) 22%, rgba(255,255,255,0) 50%),
    radial-gradient(circle at 14% 9%, rgba(255,255,255,.40), transparent 24%),
    radial-gradient(circle at 88% 92%, rgba(59,130,246,.08), transparent 20%) !important;
}
body.modern-login-page .landing-panel:after,
body.modern-login-page .login-card-modern:after{
  background:linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,0)) !important;
}
body.modern-login-page .landing-brand,
body.modern-login-page .landing-brand div,
body.modern-login-page #modernClock,
body.modern-login-page .login-logo span,
body.modern-login-page .landing-feature b,
body.modern-login-page .landing-designer{
  color:#0f172a !important;
}
body.modern-login-page .landing-title{
  color:#111827 !important;
  text-shadow:0 12px 26px rgba(255,255,255,.28) !important;
}
body.modern-login-page .landing-subtitle,
body.modern-login-page .login-box-msg,
body.modern-login-page .landing-feature span,
body.modern-login-page .login-footer-modern{
  color:#475569 !important;
}
body.modern-login-page .landing-feature,
body.modern-login-page .landing-designer{
  background:linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.60)) !important;
  border:1px solid rgba(203,213,225,.80) !important;
  box-shadow:0 12px 28px rgba(15,23,42,.10), inset 0 1px 0 rgba(255,255,255,.88) !important;
}
body.modern-login-page .landing-feature i{
  color:#0f766e !important;
  text-shadow:none !important;
}
body.modern-login-page .landing-brand img,
body.modern-login-page .login-logo img{
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.82)) !important;
  border:1px solid rgba(226,232,240,.92) !important;
  box-shadow:0 14px 30px rgba(15,23,42,.12) !important;
}
body.modern-login-page .login-logo span{
  font-size:36px !important;
  font-weight:900 !important;
}
body.modern-login-page .login-card-modern .form-control{
  background:rgba(255,255,255,.90) !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,.42) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92), 0 8px 18px rgba(15,23,42,.06) !important;
}
body.modern-login-page .login-card-modern .form-control::placeholder{color:#94a3b8 !important;}
body.modern-login-page .login-card-modern .form-control-feedback{color:#64748b !important;}
body.modern-login-page .login-box-msg{
  font-weight:700 !important;
}
body.modern-login-page .login-card-modern .btn-primary,
body.modern-login-page .landing-absen-btn{
  color:#ffffff !important;
}
body.modern-login-page .login-footer-modern{
  text-shadow:none !important;
  font-weight:700 !important;
}
@media (max-width: 767px){
  body.modern-login-page .landing-title{font-size:30px !important;}
  body.modern-login-page .landing-subtitle{font-size:14px !important;}
  body.modern-login-page .landing-feature b{font-size:14px !important;}
  body.modern-login-page .landing-feature span{font-size:12px !important;}
}

/* REV118: logo login tanpa tepi kotak, mengikuti bentuk logo */
body.modern-login-page .landing-brand img,
body.modern-login-page .login-logo img{
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 10px 18px rgba(15,23,42,.18)) !important;
}
body.modern-login-page .landing-brand .img,
body.modern-login-page .login-logo .img{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.modern-login-page .landing-brand{
  gap: 14px !important;
}
body.modern-login-page .landing-brand img{
  width: 74px !important;
  height: 74px !important;
  object-fit: contain !important;
}
body.modern-login-page .login-logo img{
  width: 96px !important;
  margin-bottom: 12px !important;
  object-fit: contain !important;
}

/* REV120: crop logo lebih presisi, proporsional, seragam kiri-kanan, dan login lebih clean premium */
body.modern-login-page{
  background:
    radial-gradient(circle at 14% 18%, rgba(59,130,246,.08), transparent 18%),
    radial-gradient(circle at 86% 18%, rgba(16,185,129,.08), transparent 20%),
    linear-gradient(135deg,#eef6ff 0%, #f7fbff 48%, #eef9f4 100%) !important;
}
body.modern-login-page:before{
  background:
    linear-gradient(rgba(148,163,184,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,163,184,.08) 1px, transparent 1px) !important;
  background-size:42px 42px,42px 42px !important;
  opacity:.42 !important;
}
body.modern-login-page:after{
  background:
    radial-gradient(circle at 18% 22%, rgba(255,255,255,.46), transparent 20%),
    radial-gradient(circle at 82% 30%, rgba(16,185,129,.08), transparent 18%),
    radial-gradient(circle at 72% 78%, rgba(59,130,246,.08), transparent 18%) !important;
  filter:blur(16px) !important;
}
body.modern-login-page .landing-panel,
body.modern-login-page .login-card-modern{
  background:linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.82)) !important;
  border:1px solid rgba(255,255,255,.95) !important;
  box-shadow:
    0 24px 56px rgba(15,23,42,.10),
    0 0 0 1px rgba(255,255,255,.65),
    inset 0 1px 0 rgba(255,255,255,.95) !important;
  backdrop-filter: blur(18px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(135%) !important;
}
body.modern-login-page .landing-panel:before,
body.modern-login-page .login-card-modern:before,
body.modern-login-page .landing-feature:before,
body.modern-login-page .landing-designer:before{display:none !important;}
body.modern-login-page .landing-panel:after,
body.modern-login-page .login-card-modern:after{
  background:linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,0)) !important;
}
body.modern-login-page .landing-brand{display:flex !important; align-items:center !important; gap:16px !important; margin-bottom:24px !important;}
body.modern-login-page .brand-mark-login{
  display:block !important;
  object-fit:contain !important;
  object-position:center center !important;
  background:none !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 10px 18px rgba(15,23,42,.16)) !important;
  image-rendering:auto !important;
}
body.modern-login-page .brand-mark-left{
  width:68px !important;
  height:68px !important;
  flex:0 0 68px !important;
}
body.modern-login-page .login-logo-mark-wrap{
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  margin-bottom:10px !important;
}
body.modern-login-page .brand-mark-right{
  width:88px !important;
  height:88px !important;
}
body.modern-login-page .landing-brand > div{display:flex !important; flex-direction:column !important; gap:2px !important;}
body.modern-login-page .landing-brand,
body.modern-login-page .landing-brand div,
body.modern-login-page #modernClock,
body.modern-login-page .login-logo span,
body.modern-login-page .landing-feature b,
body.modern-login-page .landing-designer{color:#334155 !important;}
body.modern-login-page .landing-title{color:#0f172a !important; font-size:44px !important; letter-spacing:-.05em !important;}
body.modern-login-page .landing-subtitle,
body.modern-login-page .login-box-msg,
body.modern-login-page .landing-feature span,
body.modern-login-page .login-footer-modern{color:#64748b !important;}
body.modern-login-page .login-logo span{font-size:38px !important; font-weight:900 !important; color:#1e293b !important; letter-spacing:-.04em;}
body.modern-login-page .login-box-msg{font-weight:700 !important; line-height:1.55 !important;}
body.modern-login-page .landing-feature,
body.modern-login-page .landing-designer{
  background:linear-gradient(180deg, rgba(255,255,255,.94), rgba(248,250,252,.88)) !important;
  border:1px solid rgba(226,232,240,.92) !important;
  box-shadow:0 12px 24px rgba(15,23,42,.06) !important;
}
body.modern-login-page .landing-feature i{color:#2563eb !important;}
body.modern-login-page .login-card-modern .form-control{
  background:#ffffff !important;
  color:#0f172a !important;
  border:1px solid rgba(148,163,184,.35) !important;
  box-shadow:0 6px 14px rgba(15,23,42,.04) !important;
}
body.modern-login-page .login-card-modern .form-control:focus{
  border-color:rgba(59,130,246,.55) !important;
  box-shadow:0 0 0 4px rgba(59,130,246,.10), 0 10px 18px rgba(15,23,42,.05) !important;
}
body.modern-login-page .login-card-modern .btn-primary{
  background:linear-gradient(135deg,#2563eb 0%, #3b82f6 48%, #6366f1 100%) !important;
  box-shadow:0 16px 30px rgba(37,99,235,.22) !important;
}
body.modern-login-page .landing-absen-btn{
  background:linear-gradient(135deg,#06b6d4 0%, #2563eb 52%, #4f46e5 100%) !important;
  box-shadow:0 16px 30px rgba(37,99,235,.18) !important;
}
@media (max-width: 767px){
  body.modern-login-page .brand-mark-left{width:58px !important; height:58px !important; flex-basis:58px !important;}
  body.modern-login-page .brand-mark-right{width:76px !important; height:76px !important;}
  body.modern-login-page .landing-title{font-size:32px !important;}
  body.modern-login-page .login-logo span{font-size:32px !important;}
}