/*
  Global theme variables
  We switch the palette to a softer pastel blue theme. The background takes on a very
  light, airy blue and cards use a semi‑transparent white so that the blue
  background subtly shows through. Buttons and menu items derive their colours
  from the primary blue but use alpha transparency to produce a muted look on
  inactive states. The accent colour is defined as a transparent version of
  the primary blue to be reused for backgrounds of stats, nav items, etc.
*/
:root{
  /* overall page background: soft pastel blue */
  --bg:#6ba0e8;
  /* cards and header use a translucent white so the blue background softly
     appears underneath */
  --card:rgba(255, 255, 255,0.9);
  /* main text colour, slightly darker than before for better contrast */
  --text:#0a163a;
  /* muted text colour for secondary information */
  --muted:#5a6c84;
  /* border colour tuned to blend with the pastel background */
  --border:#c7daef;
  /* primary hues remain similar to the previous palette */
  --primary:#5b8bf7;
  --primary-2:#4c7ff2;
  /* transparent accent derived from the primary colour for backgrounds */
  --accent:rgba(0, 111, 255, 0.22);
}
*{box-sizing:border-box}
body{margin:0;font:14px/1.5 system-ui,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial;color:var(--text);background:var(--bg)}
.login{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:16px}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;max-width:460px;width:100%;box-shadow:0 15px 40px rgba(11,19,42,.05)}
.header{position:sticky;top:0;background:var(--card);display:flex;gap:12px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);z-index:10;min-height:64px}
.brand{display:flex;gap:10px;align-items:center;font-weight:700}
.brand img{height:40px;width:auto;border-radius:8px;background:#fff}
.brand .title{display:flex;flex-direction:column;line-height:1.1}
.brand .title small{font-weight:500;color:var(--muted)}
.nav{display:flex;gap:8px;margin-left:8px;flex-wrap:wrap}
.nav .btn{
  /* navigation buttons have a muted translucent blue background and soft border */
  background:rgba(91,139,247,0.12);
  border:1px solid rgba(91,139,247,0.3);
  color:var(--text);
}
.nav .btn.active{
  /* active navigation button uses a stronger tint and white text */
  background:rgba(91,139,247,0.5);
  color:#fff;
  border-color:rgba(91,139,247,0.6);
}

/* Hover state for navigation buttons: gently increase opacity */
.nav .btn:not(.active):hover {
  background:rgba(91,139,247,0.25);
  border-color:rgba(91,139,247,0.5);
  color:#fff;
}
.user{margin-left:auto;display:flex;align-items:center}
.container{max-width:1100px;margin:16px auto;padding:0 16px;display:grid;gap:16px}
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:16px;box-shadow:0 8px 30px rgba(11,19,42,.04)}
.grid{display:grid;gap:12px}
.grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
/* Four-column grid for dashboard summary cards */
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width: 900px){
  .grid.four{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 480px){
  .grid.four{grid-template-columns:1fr}
}
@media (max-width: 768px){ .grid.two,.grid.three{grid-template-columns:1fr}}
/* Mobile navigation as card menu. On small screens, display the nav items in a grid of two cards per row with ample padding
   and larger text to improve tap targets and readability. The active item remains highlighted. */
@media (max-width: 640px){
  .nav{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:8px;
    width:100%;
    margin-top:8px;
  }
  .nav .btn{
    /* mobile menu buttons: slightly stronger tint for better contrast on small screens */
    background:rgba(91,139,247,0.15);
    border:1px solid rgba(91,139,247,0.3);
    border-radius:12px;
    padding:14px 8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    font-size:14px;
    gap:4px;
    width:100%;
    color:var(--text);
  }
  .nav .btn.active{
    background:rgba(91,139,247,0.5);
    border-color:rgba(91,139,247,0.6);
    color:#fff;
  }
}

/* Increase font size for responsive tables on mobile for readability */
@media (max-width: 768px){
  table.responsive td, table.responsive th{
    font-size:13px;
    padding:12px;
  }
}
label{display:block;margin-bottom:4px;color:#374151}
input,select{width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:#fff}
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer}
.btn.primary{background:var(--primary);border-color:var(--primary);color:#fff}
/* Secondary buttons use a very light tint of the primary colour for subtle emphasis */
.btn.secondary{background:rgba(91,139,247,0.08)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.toolbar{display:flex;gap:8px;align-items:center}
.footer-actions{display:flex;gap:8px;justify-content:flex-end}
/* Tables adopt the same card background to create consistency across elements */
table{width:100%;border-collapse:collapse;background:var(--card)}
th,td{border:1px solid var(--border);padding:8px}
/* Table header background: use a subtle tint of the primary colour instead of plain blue */
th{
  background:rgba(91,139,247,0.08);
  text-align:left;
}
.right{text-align:right}
.muted{color:var(--muted)} .small{font-size:12px}
.stat{background:var(--accent);border:1px dashed var(--border);border-radius:12px;padding:12px}
.stat-h{color:#3711DF;font-size:16px}
.stat-v{font-weight:800;font-size:20px}

/* mobile-friendly tables */
@media (max-width: 768px){
  table.responsive{border:0}
  table.responsive thead{display:none}
  table.responsive tr{display:block;background:var(--card);margin:10px 0;border:1px solid var(--border);border-radius:14px;box-shadow:0 2px 8px rgba(10,20,40,.04)}
  table.responsive td, table.responsive th{display:flex;justify-content:space-between;gap:16px;border:0;border-bottom:1px dashed var(--border);padding:10px 12px}
  table.responsive td:last-child{border-bottom:0}
  table.responsive td::before{content:attr(data-label);font-weight:600;color:#334155}
  .table-actions{justify-content:flex-start}
  .toolbar{flex-wrap:wrap;gap:8px}
  .brand img{height:32px}
}
.file-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hide{display:none}
.toast{position:fixed;right:12px;bottom:12px;background:#111827;color:#fff;padding:10px 12px;border-radius:10px;opacity:.95;z-index:1000}
.spinner{position:fixed;inset:0;background:rgba(255,255,255,.6);display:none;place-items:center;z-index:999}
.spinner.show{display:grid}


/* === Customizations: Active nav button pressed look, no underline, bold === */
.nav .btn, a.btn { 
  text-decoration: none !important; 
  font-weight: 700; 
}
/* pressed/inset look when active */
.nav .btn.active, .nav .btn[aria-current="page"]{
  /* Why: create the "tombol terpencet masuk" effect for active menu */
  box-shadow: inset 0 3px 6px rgba(0,0,0,0.18), inset 0 -2px 0 rgba(255,255,255,0.35);
  transform: translateY(1px);
  border-color: rgba(91,139,247,0.7);
}
/* keep hover clean */
.nav .btn:hover { text-decoration: none; }
/* Adjust focus outline for accessibility without underline */
.nav .btn:focus-visible { outline: 2px solid rgba(91,139,247,0.6); outline-offset: 2px; }

/* === Employees table proportional columns === */
table#employeesTable { table-layout: fixed; width: 100%; }
table#employeesTable th, table#employeesTable td { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table#employeesTable col.id    { width: 6%; }
table#employeesTable col.nama  { width: 18%; }
table#employeesTable col.pos   { width: 12%; }
table#employeesTable col.gaji  { width: 12%; }
table#employeesTable col.tunj  { width: 12%; }
table#employeesTable col.rek   { width: 14%; }
table#employeesTable col.stat  { width: 9%; }
table#employeesTable col.aksi  { width: 14%; }


/* === OFFICE AESTHETIC DASHBOARD THEME === */
:root{
  --bg-gradient: linear-gradient(135deg,#6a5cff,#a855f7,#ec4899);
  --card-bg:#ffffff;
  --radius:14px;
  --shadow-soft:0 20px 40px rgba(0,0,0,.12);
  --shadow-hover:0 25px 55px rgba(0,0,0,.18);
}

/* Background */
body{
  background:var(--bg-gradient);
}

/* Card containers */
.container,.card,.panel,.content-wrapper{
  background:rgba(255,255,255,.60);
  border-radius:var(--radius);
  box-shadow:var(--shadow-soft);
  animation:fadeInUp .6s ease;
}

/* Tables */
table{
  border-radius:12px;
  overflow:hidden;
}
thead th{
  background:#2e2a46;
  color:#fff;
  font-weight:600;
}
tbody tr{
  transition:all .25s ease;
}
tbody tr:hover{
  background:#eef2ff;
  transform:translateY(-1px);
}

/* Status badges */
.badge{
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
}
.badge.paid{background:#e7f7ee;color:#0f766e;}
.badge.pending{background:#eef2ff;color:#4338ca;}
.badge.cancel{background:#fee2e2;color:#b91c1c;}

/* Buttons */
button,.btn{
  border-radius:10px;
  transition:.25s ease;
}
button:hover,.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 25px rgba(79,70,229,.35);
}

/* Animations */
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(12px)}
  to{opacity:1;transform:none}
}


/* ===== PDF / PRINT SYNC STYLE ===== */
@media print{
  body{
    background:#fff !important;
  }

  .container,.card,.panel,.content-wrapper{
    box-shadow:none !important;
    background:#fff !important;
    margin:0 !important;
    padding:12px !important;
    border-radius:0 !important;
  }

  table{
    width:100%;
    border-collapse:collapse !important;
    font-size:11px;
  }

  thead th{
    background:#f3f4f6 !important;
    color:#111 !important;
    border:1px solid #d1d5db !important;
    padding:8px;
  }

  td{
    border:1px solid #e5e7eb !important;
    padding:7px;
    color:#111;
  }

  tbody tr:nth-child(even){
    background:#fafafa !important;
  }

  .badge{
    border:1px solid #d1d5db9e;
    padding:4px 8px;
    font-size:10px;
  }

  .badge.paid{background:#e7f7ee !important;}
  .badge.pending{background:#eef2ff !important;}
  .badge.cancel{background:#fee2e2 !important;}

  button,.btn,.action-icon{
    display:none !important;
  }

  .page-break{
    page-break-after:always;
  }
}