/*
  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{
  /*
   * The core variables now defer to the values defined in global.css so
   * that all components share the same palette.  Individual pages may
   * override these values if required, but keeping them in sync here
   * ensures a cohesive look across the application.  The accent is
   * derived from the primary rgb triple defined in global.css.
   */
  --bg: var(--bg-base);
  --card: var(--surface);
  --text: var(--text);
  --muted: var(--muted);
  --border: var(--border);
  --primary: var(--primary-1);
  --primary-2: var(--primary-2);
  --accent: rgba(var(--primary-rgb), 0.15);
}
*{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;
  }
}

/*
 * Tablet‑specific adjustments (between small mobile and full desktop widths)
 *
 * On tablet screens (portrait or landscape orientation) we slightly increase the
 * table cell padding and font size compared to the mobile breakpoints.  This
 * makes rows easier to tap and read on intermediate screen sizes without
 * overflowing the layout.  We use a media query that spans typical tablet
 * widths (640px to 1024px) and target responsive tables only.
 */
@media (min-width: 640px) and (max-width: 1024px){
  table.responsive td, table.responsive th{
    font-size:14px;
    padding:14px;
  }
}

/*
 * Attachment link styling
 *
 * In reports and entries tables the Lampiran (attachment) column may contain
 * anchor links with class `att-link` to open a list of attachments.  We
 * style these links to stand out as interactive elements: using the primary
 * colour for emphasis and an underline on hover.  This improves
 * discoverability, especially on mobile where table headers are hidden and
 * cells show labels via ::before.  The colour is derived from the primary
 * palette to keep a consistent look.
 */
table.responsive td a.att-link{
  color: var(--primary);
  text-decoration: underline;
  font-weight: 600;
}
table.responsive td a.att-link:hover{
  text-decoration: none;
}
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;}

/* -------------------------------------------
 * Module Switcher
 *
 * Style the module switcher select box in the header.  The
 * background is transparent to blend with the header bar.  Remove
 * default borders and outlines, adjust padding and height to align
 * with icon buttons.  A pointer cursor is used to indicate it is
 * interactive.
 */
.module-switcher select {
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
  padding: 0 0.5rem;
  height: 32px;
  margin-right: 0.5rem;
  cursor: pointer;
}
.module-switcher select:focus {
  outline: none;
}

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

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