/* ===== PT. Ume Persada Indonesia — Leave Management ===== */
:root{
  --red:#E1251B; --red-dark:#B81910; --red-tint:#FDECEA;
  --gold:#F4B400; --gold-dark:#C9920A; --gold-tint:#FEF6E0;
  --ink:#1b1b20; --ink-2:#3f3f47; --muted:#74747e;
  --line:#e7e7ea; --line-2:#f0f0f2;
  --bg:#f4f4f6; --surface:#ffffff; --surface-2:#fafafb;
  --blue:#2563EB; --violet:#7C3AED; --teal:#0D9488; --amber:#D97706; --green:#16A34A;
  --shadow-sm:0 1px 2px rgba(20,20,30,.06), 0 1px 3px rgba(20,20,30,.05);
  --shadow:0 2px 6px rgba(20,20,30,.06), 0 8px 24px rgba(20,20,30,.06);
  --shadow-lg:0 12px 40px rgba(20,20,30,.16);
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --sans:'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
#root{min-height:100vh}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit;font-size:14px;color:var(--ink)}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:#d5d5da;border-radius:20px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#bfbfc6}

/* ---- generic ---- */
.btn{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:14px;
  padding:10px 16px;border-radius:var(--r-sm);transition:.15s;white-space:nowrap;line-height:1}
.btn svg{width:17px;height:17px}
.btn-primary{background:var(--red);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn-ghost:hover{background:var(--surface-2);border-color:#d8d8dd}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-sm{padding:7px 12px;font-size:13px}
.btn-lg{padding:13px 22px;font-size:15px}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-block{width:100%;justify-content:center}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-sm)}
.card-pad{padding:22px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
  padding:4px 10px;border-radius:999px;line-height:1.4}

.badge{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
  padding:5px 11px;border-radius:999px;line-height:1.2}
.badge .dot{width:7px;height:7px;border-radius:50%}
.badge-pending{background:var(--gold-tint);color:var(--gold-dark)}
.badge-pending .dot{background:var(--gold)}
.badge-approved{background:#E7F6EC;color:#15803D}
.badge-approved .dot{background:var(--green)}
.badge-rejected{background:var(--red-tint);color:var(--red-dark)}
.badge-rejected .dot{background:var(--red)}
.badge-cancelled{background:#f0f0f2;color:var(--muted)}
.badge-cancelled .dot{background:var(--muted)}

.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:linear-gradient(135deg,#2a2a32,#45454f);color:#fff;font-weight:700;flex:none;
  letter-spacing:.3px}

.eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.muted{color:var(--muted)}
.mono{font-family:var(--mono)}

label.field{display:block;margin-bottom:16px}
label.field > span{display:block;font-size:13px;font-weight:600;margin-bottom:7px;color:var(--ink-2)}
.input,select.input,textarea.input{width:100%;padding:11px 13px;border:1px solid var(--line);
  border-radius:var(--r-sm);background:#fff;font-size:14px;transition:.15s;outline:none}
.input:focus,select.input:focus,textarea.input:focus{border-color:var(--red);box-shadow:0 0 0 3px var(--red-tint)}
textarea.input{resize:vertical;min-height:84px}

table.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
table.tbl th{text-align:left;font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
table.tbl td{padding:13px 14px;border-bottom:1px solid var(--line-2);vertical-align:middle}
table.tbl tr:last-child td{border-bottom:none}
table.tbl tbody tr:hover{background:var(--surface-2)}

/* ---- modal ---- */
.modal-overlay{position:fixed;inset:0;background:rgba(18,18,24,.5);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:40px 18px;z-index:200;overflow-y:auto;
  animation:fade .18s ease}
.modal{background:#fff;border-radius:var(--r-xl);box-shadow:var(--shadow-lg);width:100%;max-width:560px;
  animation:pop .2s cubic-bezier(.2,.9,.3,1.2);margin:auto 0}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.fade-in{animation:fade .25s ease}

/* ---- layout shell ---- */
.shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
.sidebar{background:#fff;border-right:1px solid var(--line);display:flex;flex-direction:column;
  position:sticky;top:0;height:100vh}
.side-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px}
.side-brand img{width:38px;height:38px;object-fit:contain}
.side-brand .nm{font-weight:800;font-size:13px;line-height:1.25;letter-spacing:-.01em}
.side-brand .sub{font-size:10px;color:var(--muted);font-weight:600;letter-spacing:.04em;margin-top:2px}
.nav{flex:1;overflow-y:auto;padding:8px 12px}
.nav-sec{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#a6a6ad;
  padding:14px 12px 6px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;
  font-size:14px;font-weight:600;color:var(--ink-2);transition:.13s;width:100%;text-align:left;margin-bottom:2px}
.nav-item svg{width:19px;height:19px;flex:none;opacity:.8}
.nav-item:hover{background:var(--surface-2);color:var(--ink)}
.nav-item.active{background:var(--red-tint);color:var(--red-dark)}
.nav-item.active svg{opacity:1}
.nav-item .count{margin-left:auto;background:var(--red);color:#fff;font-size:11px;font-weight:700;
  min-width:20px;height:20px;border-radius:999px;display:flex;align-items:center;justify-content:center;padding:0 6px}

.main{display:flex;flex-direction:column;min-width:0}
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:12px 26px}
.topbar h1{font-size:18px;font-weight:800;margin:0;letter-spacing:-.02em}
.topbar .sp{flex:1}
.icon-btn{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:.13s;position:relative;border:1px solid transparent}
.icon-btn:hover{background:var(--surface-2);border-color:var(--line)}
.icon-btn svg{width:20px;height:20px}
.icon-btn .ping{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red);border:2px solid #fff}
.content{padding:26px;max-width:1180px;width:100%;margin:0 auto}

.hamburger{display:none}
.menu-pop{position:absolute;top:52px;right:0;background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow-lg);min-width:230px;overflow:hidden;z-index:120;animation:pop .15s ease}
.menu-pop .mp-head{padding:14px 16px;border-bottom:1px solid var(--line-2)}
.menu-pop button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 16px;font-size:14px;font-weight:600;color:var(--ink-2)}
.menu-pop button:hover{background:var(--surface-2)}
.menu-pop button svg{width:17px;height:17px;opacity:.7}

.notif-pop{position:absolute;top:52px;right:0;width:340px;max-height:440px;overflow-y:auto;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow-lg);z-index:120;animation:pop .15s ease}
.notif-item{display:flex;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-2)}
.notif-item:hover{background:var(--surface-2)}
.notif-dotwrap{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:none}
.notif-dotwrap svg{width:17px;height:17px}

/* page bits */
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.page-head h2{font-size:23px;font-weight:800;margin:4px 0 3px;letter-spacing:-.02em}
.page-head p{margin:0;color:var(--muted);font-size:14px}

.grid{display:grid;gap:16px;min-width:0}
/* let grid/flex children shrink below their content's intrinsic width so that
   inner scroll areas (wide tables) scroll internally instead of widening the page */
.grid>*{min-width:0}
.card{min-width:0}
.seg{display:inline-flex;background:#eeeef0;border-radius:10px;padding:3px;gap:2px}
.seg button{padding:7px 14px;border-radius:8px;font-size:13px;font-weight:600;color:var(--muted);transition:.13s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:var(--shadow-sm)}

.stat-card{padding:18px 20px;border-radius:var(--r-lg);position:relative;overflow:hidden}
.bal-ring{position:relative;width:74px;height:74px;flex:none}

.empty{text-align:center;padding:48px 20px;color:var(--muted)}
.empty svg{width:42px;height:42px;opacity:.4;margin-bottom:10px}

/* calendar */
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-dow{font-size:11px;font-weight:700;color:var(--muted);text-align:center;padding:4px 0;text-transform:uppercase;letter-spacing:.05em}
.cal-cell{aspect-ratio:1;border-radius:10px;border:1px solid var(--line-2);padding:6px;font-size:12.5px;
  display:flex;flex-direction:column;gap:3px;background:#fff;min-height:0;overflow:hidden}
.cal-cell.dim{background:var(--surface-2);color:#bcbcc2}
.cal-cell.today{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.cal-cell .dnum{font-weight:700;font-size:12px}
.cal-ev{font-size:10.5px;font-weight:600;padding:2px 5px;border-radius:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff}
.cal-weekend{background:#fbfbfc}

/* login */
.login-wrap{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.login-art{background:linear-gradient(155deg,#7c0f08,#E1251B 55%,#B81910);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:46px;color:#fff}
.login-form-side{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:#fff}
.login-card{width:100%;max-width:392px}
.demo-acct{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:11px 13px;border:1px solid var(--line);
  border-radius:12px;margin-bottom:9px;transition:.13s;background:#fff}
.demo-acct:hover{border-color:var(--red);background:var(--red-tint)}
.demo-acct .ra{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;background:#eeeef0;color:var(--ink-2);margin-left:auto;white-space:nowrap}

.tline{height:1px;background:var(--line);margin:18px 0}
.kv{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid var(--line-2);font-size:14px}
.kv:last-child{border-bottom:none}
.kv .k{color:var(--muted)}
.kv .v{font-weight:600;text-align:right}

.doc-prose h3{font-size:15px;font-weight:700;margin:20px 0 7px}
.doc-prose p{margin:0 0 4px;line-height:1.65;color:var(--ink-2);font-size:14.5px}

.progressbar{height:8px;border-radius:999px;background:#ededf0;overflow:hidden}
.progressbar > i{display:block;height:100%;border-radius:999px}

.toast-wrap{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:400;display:flex;flex-direction:column;gap:8px;align-items:center}
.toast{background:var(--ink);color:#fff;padding:12px 18px;border-radius:12px;font-size:14px;font-weight:600;
  box-shadow:var(--shadow-lg);display:flex;align-items:center;gap:10px;animation:pop .2s ease}
.toast svg{width:18px;height:18px}

/* ---- responsive ---- */
/* keep notification & user popovers inside the viewport on small screens */
.notif-pop,.menu-pop{max-width:calc(100vw - 24px)}

/* tablet: collapse the big two-column page splits (calendar+list, queue+side, etc.)
   these use INLINE grid-template-columns, so media queries must override with !important */
@media(max-width:900px){
  .grid[style*="1.7fr 1fr"],
  .grid[style*="1.5fr 1fr"],
  .grid[style*="1.4fr 1fr"],
  .grid[style*="1fr 1fr"]{grid-template-columns:1fr !important}
}

@media(max-width:880px){
  .shell{grid-template-columns:1fr}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:262px;z-index:160;transform:translateX(-100%);
    transition:transform .25s ease;box-shadow:var(--shadow-lg)}
  .sidebar.open{transform:none}
  .scrim{position:fixed;inset:0;background:rgba(18,18,24,.4);z-index:150;animation:fade .2s}
  .hamburger{display:flex}
  .content{padding:18px 16px}
  .topbar{padding:11px 16px}
  .login-wrap{grid-template-columns:1fr}
  .login-art{display:none}
  .login-form-side{padding:28px 18px;min-height:100vh}
}
@media(max-width:640px){
  /* phone: collapse modal/form two-up fields (dates, name/email, category/version) */
  [style*="grid-template-columns: 1fr 1fr"]{grid-template-columns:1fr !important}
  .page-head{align-items:stretch}
  .page-head h2{font-size:21px}
  /* let action button rows in page heads wrap & fill width nicely */
  .page-head > div:last-child{flex-wrap:wrap}
  .seg{flex-wrap:wrap}
}
@media(max-width:560px){
  .topbar h1{font-size:16px}
  .topbar{gap:8px}
  .modal-overlay{padding:16px 10px}
  .hide-sm{display:none !important}
  .card-pad{padding:18px}
  .content{padding:16px 13px}
  /* notification popover spans most of the screen, anchored under the bar */
  .notif-pop{width:min(340px,calc(100vw - 20px));position:fixed;top:60px;right:10px}
}
@media(max-width:380px){
  .btn{padding:10px 13px;font-size:13.5px}
  .cal-cell{padding:3px}
  .cal-cell .dnum{font-size:11px}
}