:root{--bg:#fff9fc;--bg2:#fff3f8;--panel:#fff;--panel-soft:#fff8fb;--pink:#d85b8c;--pink2:#f4a8c3;--pink3:#fde4ee;--rose:#9e3d63;--gold:#b58a36;--text:#382e33;--muted:#8a7580;--line:#f1dce5;--danger:#b84356;--danger-bg:#fff0f2;--ok:#3b8b67;--ok-bg:#effaf5;--shadow:0 18px 60px rgba(142,76,103,.12)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;color:var(--text);font:14px/1.55 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh;background:radial-gradient(circle at 100% 0,#ffeaf3 0,transparent 32%),linear-gradient(145deg,#fff,#fff7fb 52%,#fff3f8)}a{color:inherit}.app-shell{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;border-right:1px solid var(--line);background:rgba(255,255,255,.92);backdrop-filter:blur(16px);display:flex;flex-direction:column;z-index:20}.brand{display:flex;gap:11px;align-items:center;padding:8px;text-decoration:none}.brand img{width:52px;height:52px;object-fit:contain}.brand strong{display:block;font-family:Georgia,serif;color:var(--rose);font-size:18px}.brand small{color:var(--muted)}nav{display:grid;gap:7px;margin-top:24px}nav a{color:#705661;text-decoration:none;padding:11px 13px;border-radius:14px;border:1px solid transparent;font-weight:700}nav a:hover{background:var(--pink3);border-color:#f4ccdc;color:var(--rose)}.side-user{margin-top:auto;border-top:1px solid var(--line);padding:17px 9px;display:grid;gap:7px}.side-user a{color:var(--rose);font-weight:800}.role-pill,.badge{display:inline-flex;width:max-content;border:1px solid #efbfd1;background:#fff0f6;color:var(--rose);border-radius:999px;padding:4px 9px;font-size:11px;font-weight:900;letter-spacing:.04em}.main{min-width:0}.topbar{padding:21px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:rgba(255,255,255,.72);backdrop-filter:blur(14px);position:sticky;top:0;z-index:10}.topbar h1{margin:0;font:700 28px/1.2 Georgia,serif;color:#5b3d4a}.topbar p{margin:5px 0 0;color:var(--muted)}.topbar img{height:62px;max-width:175px;object-fit:contain}.content{padding:28px 32px}.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.card{grid-column:span 4;background:linear-gradient(160deg,#fff,#fffafd);border:1px solid var(--line);border-radius:22px;padding:21px;box-shadow:var(--shadow)}.card.wide{grid-column:span 8}.card.full{grid-column:1/-1}.card h2,.card h3{font-family:Georgia,serif;color:#684554;margin-top:0}.stat{font-size:30px;font-weight:900;color:var(--rose)}.muted{color:var(--muted)}.money{font-size:26px;font-weight:900;color:#8b5f12}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(135deg,#e778a2,#c74f7d);color:#fff!important;border:none;border-radius:13px;padding:11px 16px;font-weight:900;text-decoration:none;cursor:pointer;box-shadow:0 8px 22px rgba(199,79,125,.2)}.btn:hover{transform:translateY(-1px)}.btn.ghost{background:#fff;border:1px solid #edc5d4;color:var(--rose)!important;box-shadow:none}.btn.danger{background:linear-gradient(135deg,#d65a69,#ad394c)}.btn.success{background:linear-gradient(135deg,#55a77e,#377f60)}.toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:14px 0}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:16px;background:white}table{width:100%;border-collapse:collapse;min-width:700px}th,td{padding:11px 12px;border-bottom:1px solid #f3e5eb;text-align:left;white-space:nowrap}th{background:#fff3f8;color:#8b5068;font-size:12px;text-transform:uppercase;letter-spacing:.03em}tr:hover td{background:#fffafd}.notice,.warn,.error{padding:13px 15px;border-radius:14px;margin-bottom:16px;border:1px solid}.notice{background:var(--ok-bg);border-color:#cfe9dc;color:#306f55}.warn{background:#fff8e8;border-color:#edd7a0;color:#7b5b12}.error{background:var(--danger-bg);border-color:#f2c6cd;color:#9d3547}.form{display:grid;gap:13px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}label{display:grid;gap:6px;color:#6c5962;font-weight:800}input,select,textarea{width:100%;border:1px solid #eacfd9;border-radius:12px;background:#fff;color:var(--text);padding:11px 12px;outline:none}input:focus,select:focus,textarea:focus{border-color:#db82a4;box-shadow:0 0 0 3px rgba(219,130,164,.14)}footer{padding:24px 32px;color:#a38994;font-size:12px}.login-shell{min-height:100vh;display:grid;place-items:center;padding:22px}.login-card{width:min(470px,100%);background:rgba(255,255,255,.96);border:1px solid var(--line);border-radius:28px;padding:31px;box-shadow:0 28px 90px rgba(151,79,108,.18)}.login-logos{display:flex;justify-content:center;gap:18px;align-items:center;margin-bottom:18px}.login-logos img{max-height:96px;max-width:44%;object-fit:contain}.login-card h1{text-align:center;font-family:Georgia,serif;color:#6b4153}.login-card p{text-align:center;color:var(--muted)}.camera-box{position:relative;background:#201d1f;border-radius:20px;overflow:hidden;aspect-ratio:4/3;display:grid;place-items:center}.camera-box video,.camera-box img{width:100%;height:100%;object-fit:cover}.camera-hint{position:absolute;left:12px;right:12px;bottom:12px;background:#fffE;color:#73515f;border-radius:12px;padding:9px;text-align:center;font-weight:700}.camera-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}.salary-strip{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(135deg,#fff0f6,#fff9ec);border:1px solid #f0d6df;border-radius:16px}.status-dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;background:#aaa}.status-dot.good{background:#52a178}.status-dot.bad{background:#d15364}.proof{max-width:240px;max-height:240px;border-radius:16px;border:1px solid var(--line);object-fit:cover}.hero-employee{background:linear-gradient(135deg,#fff,#fff0f6 62%,#fff7e9);border:1px solid #f2dce4}.small{font-size:12px}.nowrap{white-space:nowrap}.mobile-only{display:none}@media(max-width:980px){.app-shell{grid-template-columns:78px minmax(0,1fr)}.sidebar{padding:15px 9px}.brand div,nav span,.side-user strong,.side-user .role-pill{display:none}.brand{justify-content:center}.brand img{width:46px}.card,.card.wide{grid-column:1/-1}.form-row{grid-template-columns:1fr}.topbar{padding:17px 20px}.content{padding:20px}}@media(max-width:620px){.app-shell{display:block}.sidebar{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;border-right:none;border-top:1px solid var(--line);padding:7px;background:#fff;z-index:50}.brand,.side-user{display:none}.sidebar nav{margin:0;display:flex;overflow-x:auto;gap:4px;justify-content:space-around}.sidebar nav a{min-width:58px;padding:9px 8px;text-align:center;font-size:18px}.sidebar nav a span{display:none}.main{padding-bottom:76px}.topbar{position:static;padding:14px 16px}.topbar h1{font-size:22px}.topbar p,.topbar img{display:none}.content{padding:14px}.grid{gap:13px}.card{padding:16px;border-radius:18px}.salary-strip{align-items:flex-start;flex-direction:column}.toolbar .btn,.camera-actions .btn{flex:1}.login-card{padding:23px}.mobile-only{display:block}table{min-width:620px}}
/* Premium light pink + white refresh */
:root{--bg:#fffafd;--bg2:#fff5fa;--panel:#ffffff;--panel-soft:#fffafd;--pink:#df7da4;--pink2:#f5bfd2;--pink3:#fff0f6;--rose:#9b4b6b;--gold:#bd9240;--text:#46363e;--muted:#917984;--line:#f3dfe8;--shadow:0 16px 45px rgba(185,108,139,.10)}
body{background:radial-gradient(circle at 15% 0,#fff1f7 0,transparent 28%),radial-gradient(circle at 100% 15%,#fff7fb 0,transparent 32%),linear-gradient(180deg,#fff,#fffafd 70%,#fff6fa)}
.sidebar,.topbar{background:rgba(255,255,255,.94)}
.card{background:linear-gradient(155deg,#fff 0%,#fff 72%,#fff8fb 100%);box-shadow:0 14px 40px rgba(181,111,139,.09)}
.hero-employee{background:linear-gradient(135deg,#fff 0%,#fff7fb 50%,#fff1f6 100%)}
.week-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}.day-card{padding:14px 10px;border:1px solid var(--line);border-radius:16px;background:#fffafd;display:grid;gap:5px;text-align:center}.day-card strong{color:var(--rose)}.day-card span{font-weight:800}.day-card small{color:var(--muted)}.day-card.today{background:linear-gradient(145deg,#fff,#ffeef5);border-color:#ebb7cc;box-shadow:0 10px 26px rgba(203,103,143,.12)}
@media(max-width:980px){.week-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}@media(max-width:620px){.week-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.day-card:last-child{grid-column:1/-1}}
/* Premium V4 — putih + pink keputihan */
:root{--bg:#fffdfd;--bg2:#fff7fa;--panel:#fff;--panel-soft:#fff9fb;--pink:#e487aa;--pink2:#f8c9d9;--pink3:#fff1f6;--rose:#9a4c6a;--text:#4a3a41;--muted:#927c86;--line:#f4e1e9;--shadow:0 14px 42px rgba(187,117,144,.09)}
body{background:radial-gradient(circle at 8% 0,#fff0f6 0,transparent 28%),radial-gradient(circle at 100% 18%,#fff8fb 0,transparent 34%),linear-gradient(180deg,#fff 0%,#fffdfd 45%,#fff7fa 100%)}
.soft-alert{padding:14px 16px;border:1px solid #efcedb;background:linear-gradient(135deg,#fff,#fff1f6);border-radius:16px;margin-bottom:16px;color:#7e4860}.salary-strip-v4{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));align-items:stretch}.salary-strip-v4>div{padding:4px 10px;border-right:1px solid #f0dfe6}.salary-strip-v4>div:last-child{border-right:0}.mini-ledger{display:grid;gap:8px;padding:12px;border-radius:14px;background:#fff7fa;border:1px solid var(--line)}.mini-ledger span{display:flex;justify-content:space-between;gap:12px}.inline-form{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.smallbtn{padding:7px 10px;border-radius:10px;font-size:12px}.danger-badge{color:#9d3547;background:#fff0f2;border-color:#f2c6cd}
@media(max-width:980px){.salary-strip-v4{grid-template-columns:repeat(2,minmax(0,1fr))}.salary-strip-v4>div{border-right:0;border-bottom:1px solid #f0dfe6}.salary-strip-v4>div:last-child{grid-column:1/-1;border-bottom:0}}
@media(max-width:620px){.salary-strip-v4{grid-template-columns:1fr}.salary-strip-v4>div:last-child{grid-column:auto}.inline-form .btn{flex:1}.soft-alert{font-size:13px}}


/* =========================================================
   KANORA GLOW — FINAL FORCE PINK/WHITE OVERRIDE
   Simpan blok ini PALING BAWAH file /assets/style.css
   ========================================================= */

/* Global page */
html,
body {
  background:
    radial-gradient(circle at 10% 0%, #ffeaf3 0%, transparent 34%),
    radial-gradient(circle at 100% 100%, #fff2f7 0%, transparent 38%),
    linear-gradient(145deg, #ffffff 0%, #fffafd 52%, #fff2f7 100%) !important;
  background-color: #fffafd !important;
  color: #473940 !important;
}

/* Login wrappers commonly used by the project */
body.login-page,
.login-page,
.login-shell,
.login-wrapper,
.auth-shell,
.auth-wrapper {
  background:
    radial-gradient(circle at 10% 0%, #ffeaf3 0%, transparent 34%),
    radial-gradient(circle at 100% 100%, #fff2f7 0%, transparent 38%),
    linear-gradient(145deg, #ffffff 0%, #fffafd 52%, #fff2f7 100%) !important;
  background-color: #fffafd !important;
  color: #473940 !important;
}

/* Login card variants */
.login-card,
.login-box,
.auth-card,
.auth-box {
  background: linear-gradient(145deg, #ffffff 0%, #fff8fb 100%) !important;
  background-color: #ffffff !important;
  border: 1px solid #efcddd !important;
  color: #473940 !important;
  box-shadow: 0 24px 70px rgba(190,105,140,.16) !important;
}

/* Login typography */
.login-card h1,
.login-card h2,
.login-box h1,
.login-box h2,
.auth-card h1,
.auth-card h2,
.auth-box h1,
.auth-box h2 {
  color: #9b4f6c !important;
}

.login-card p,
.login-card label,
.login-card strong,
.login-box p,
.login-box label,
.login-box strong,
.auth-card p,
.auth-card label,
.auth-card strong,
.auth-box p,
.auth-box label,
.auth-box strong {
  color: #6e5661 !important;
}

/* Form controls inside login */
.login-card input,
.login-card select,
.login-card textarea,
.login-box input,
.login-box select,
.login-box textarea,
.auth-card input,
.auth-card select,
.auth-card textarea,
.auth-box input,
.auth-box select,
.auth-box textarea {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: #473940 !important;
  border: 1px solid #e9c8d6 !important;
  box-shadow: none !important;
}

.login-card input:focus,
.login-card select:focus,
.login-card textarea:focus,
.login-box input:focus,
.login-box select:focus,
.login-box textarea:focus,
.auth-card input:focus,
.auth-card select:focus,
.auth-card textarea:focus,
.auth-box input:focus,
.auth-box select:focus,
.auth-box textarea:focus {
  border-color: #de84a7 !important;
  box-shadow: 0 0 0 4px rgba(222,132,167,.15) !important;
  outline: none !important;
}

/* Buttons */
.login-card button,
.login-card .btn,
.login-box button,
.login-box .btn,
.auth-card button,
.auth-card .btn,
.auth-box button,
.auth-box .btn {
  background: linear-gradient(135deg, #ec98b8, #cc5f8b) !important;
  background-color: #cc5f8b !important;
  color: #ffffff !important;
  border: 0 !important;
  box-shadow: 0 10px 24px rgba(204,95,139,.22) !important;
}

/* Errors/notices */
.login-card .error,
.login-box .error,
.auth-card .error,
.auth-box .error {
  background: #fff0f4 !important;
  color: #a33e59 !important;
  border: 1px solid #efc1ce !important;
}

.login-card .notice,
.login-box .notice,
.auth-card .notice,
.auth-box .notice {
  background: #eefaf4 !important;
  color: #347055 !important;
  border: 1px solid #cce8d9 !important;
}

/* Main app */
.sidebar,
.topbar {
  background: rgba(255,255,255,.96) !important;
  color: #473940 !important;
}

.card,
.table-wrap {
  background: #ffffff !important;
  color: #473940 !important;
  border-color: #f1d9e3 !important;
}

th {
  background: #fff4f8 !important;
  color: #8b556b !important;
}

td {
  background: #ffffff !important;
  color: #473940 !important;
}

/* Sidebar scroll on desktop */
.sidebar {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100dvh !important;
  scrollbar-width: thin;
  scrollbar-color: #e7b3c8 transparent;
}

.sidebar::-webkit-scrollbar { width: 6px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  background: #e7b3c8;
  border-radius: 999px;
}

/* Mobile bottom navigation */
@media (max-width:620px) {
  .sidebar {
    overflow-y: hidden !important;
    overflow-x: auto !important;
    max-height: none !important;
  }
}


/* =========================================================
   FINAL FIX — SIDEBAR & CONTENT SCROLL TERPISAH
   Desktop/Tablet:
   - sidebar tidak ikut scroll konten kanan
   - nav sidebar punya scroll sendiri
   - user/logout tetap di bawah
   - konten kanan punya scroll sendiri
   ========================================================= */

@media (min-width: 621px) {
  html,
  body {
    height: 100%;
    overflow: hidden !important;
  }

  .app-shell {
    display: grid !important;
    grid-template-columns: 252px minmax(0, 1fr) !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }

  .sidebar {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;

    width: auto !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-height: none !important;
    min-height: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    padding: 22px 16px !important;

    overflow: hidden !important;

    background: rgba(255,255,255,.97) !important;
    border-right: 1px solid #f4e2ea !important;
  }

  .sidebar .brand {
    flex: 0 0 auto !important;
  }

  /* HANYA BAGIAN MENU YANG SCROLL */
  .sidebar nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;

    display: grid !important;
    align-content: start !important;

    gap: 7px !important;
    margin-top: 24px !important;
    padding-right: 4px !important;
    padding-bottom: 28px !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;

    scrollbar-width: thin;
    scrollbar-color: #e7b3c8 transparent;
  }

  .sidebar nav::-webkit-scrollbar {
    width: 7px;
  }

  .sidebar nav::-webkit-scrollbar-track {
    background: transparent;
  }

  .sidebar nav::-webkit-scrollbar-thumb {
    background: #e7b3c8;
    border-radius: 999px;
  }

  .sidebar nav::-webkit-scrollbar-thumb:hover {
    background: #d88faa;
  }

  .side-user {
    flex: 0 0 auto !important;
    margin-top: 0 !important;
    padding: 14px 9px 6px !important;
    background: rgba(255,255,255,.98) !important;
    border-top: 1px solid #f4e2ea !important;
  }

  /* KANAN JUGA PUNYA SCROLL SENDIRI */
  .main {
    margin-left: 0 !important;
    width: auto !important;

    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;

    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 30 !important;
  }
}

/* Tablet tetap sidebar kecil, tapi mekanisme scroll sama */
@media (min-width: 621px) and (max-width: 980px) {
  .app-shell {
    grid-template-columns: 78px minmax(0, 1fr) !important;
  }

  .sidebar {
    padding: 15px 9px !important;
  }
}

/* Mobile tetap menu bawah */
@media (max-width: 620px) {
  html,
  body {
    height: auto !important;
    overflow: auto !important;
  }

  .app-shell {
    display: block !important;
    height: auto !important;
    overflow: visible !important;
  }

  .sidebar {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;

    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;

    display: block !important;

    overflow-x: auto !important;
    overflow-y: hidden !important;

    padding: 7px !important;
  }

  .sidebar nav {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  .main {
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 76px !important;
  }
}