/* Dark Engineering Theme - Gold / Black / Charcoal */
:root{
  --bg-page: #0b0b0b; /* deep charcoal */
  --card-bg: #161616; /* slightly lighter for cards */
  --gold-1: #FFD66B;
  --gold-2: #D4AF37;
  --accent: linear-gradient(90deg, var(--gold-1), var(--gold-2));
  --glass: rgba(255,255,255,0.03);
  --muted-white: rgba(255,255,255,0.75);
  --soft-white: rgba(255,255,255,0.92);
  --present-green: #39ff14;
  --absent-red: #e06a6a;
}

*{ box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
body{ background: var(--bg-page); color:var(--soft-white); }

.app-shell{ display:flex; min-height:100vh; }

/* Mobile-first: Sidebar is off-canvas by default */
.sidebar{ width:78%; max-width:320px; background:linear-gradient(180deg, rgba(20,20,20,0.98), rgba(10,10,10,0.98)); color:var(--muted-white); display:flex; flex-direction:column; padding:1rem; gap:.5rem; position:fixed; left:0; top:0; bottom:0; transform: translateX(-100%); transition: transform .3s ease-in-out; z-index:9999; }
.sidebar.active{ transform: translateX(0); }
.sidebar .logo{ height:3rem; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; color:#111; padding:0 0.5rem; }
.sidebar .logo{ height:48px; border-radius:8px; background:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; color:#111; }
.sidebar .menu{ margin-top:8px; display:flex; flex-direction:column; gap:6px; }
.menu-item{ display:flex; gap:.75rem; align-items:center; padding:.6rem .75rem; border-radius:8px; color:var(--muted-white); text-decoration:none; position:relative; min-height:44px; }
.menu-item .icon{ width:28px; text-align:center; color:var(--muted-white); }
.menu-item .label{ white-space:nowrap; }
.menu-item:hover{ background: rgba(212,175,55,0.04); color:var(--gold-2); transform: translateX(6px); transition: all .18s ease; }
.menu-item.active{ background: rgba(212,175,55,0.06); color:var(--gold-2); box-shadow: 0 10px 30px rgba(212,175,55,0.06); }
.menu-item.active::before{ content:''; position:absolute; left:-6px; top:8px; bottom:8px; width:6px; background: var(--gold-2); border-radius:6px; box-shadow: 0 6px 18px rgba(212,175,55,0.08); }

/* Main content area */
.main-content{ margin-left:0; padding:1rem; min-height:100vh; transition: transform .28s ease; }
/* .container{ max-width:1180px; margin:0 auto; padding:0 0.5rem; } */
.container{ max-width:100%; margin:0 auto; padding:0 0.5rem; }

.header{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.header h1{ margin:0; font-size:1.35rem; font-weight:700; color:var(--soft-white); }
.muted{ color:rgba(255,255,255,0.5); }

/* Summary cards */
.summary-grid{ display:grid; gap:12px; margin-bottom:1.25rem; grid-template-columns: 1fr; }
.summary-card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:1.1rem; border-radius:12px; border:1px solid rgba(212,175,55,0.08); box-shadow: 0 8px 28px rgba(0,0,0,0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: box-shadow .18s ease, transform .12s ease; }
.summary-card:hover{ transform: translateY(-6px); box-shadow: 0 30px 70px rgba(212,175,55,0.08); }
.summary-card::before{ content:''; position:relative; display:block; height:6px; border-top-left-radius:8px; border-top-right-radius:8px; margin:-1.1rem -1.1rem .6rem -1.1rem; background:var(--accent); }
.summary-number{ font-size:2.1rem; font-weight:800; color:var(--soft-white); }
.summary-label{ color:rgba(255,255,255,0.65); margin-top:6px; }

/* Cards and lists */
.card{ background: var(--card-bg); padding:.9rem; border-radius:12px; border-left:4px solid rgba(255,255,255,0.02); border:1px solid rgba(255,255,255,0.03); box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
.card:hover{ box-shadow: 0 26px 60px rgba(212,175,55,0.06); }
.card:hover{ box-shadow: 0 24px 60px rgba(212,175,55,0.06); }

/* Attendance list view */
.attendance-controls{ display:flex; gap:12px; align-items:center; margin-bottom:12px; }
.search-input, .date-input{ background:transparent; border:1px solid rgba(255,255,255,0.04); padding:.6rem .75rem; border-radius:8px; color:var(--soft-white); width:100%; max-width:20rem; }
.search-input::placeholder{ color:rgba(255,255,255,0.45); }

.attendance-list{ display:grid; gap:12px; }
.employee-card{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.75rem; border-radius:10px; background: linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.005)); border:1px solid rgba(255,255,255,0.03); border-left:4px solid transparent; }
.employee-card.highlight-left{ border-left-color: var(--gold-2); }
.employee-meta{ display:flex; gap:12px; align-items:center; }
.avatar{ width:44px; height:44px; border-radius:8px; background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; color:var(--soft-white); font-weight:700; flex:0 0 44px; }
.employee-name{ font-weight:700; }
.employee-code{ color:rgba(255,255,255,0.6); font-size:0.9rem; }

.actions{ display:flex; gap:8px; align-items:center; }
.btn{ padding:.6rem .8rem; border-radius:8px; border:none; cursor:pointer; font-weight:700; min-width:44px; min-height:44px; }
.btn:focus{ outline:none; box-shadow: 0 6px 18px rgba(212,175,55,0.08); }
.btn-present{ background: linear-gradient(90deg,var(--gold-1),var(--gold-2)); color:#111; transition: box-shadow .12s ease, transform .12s ease; padding:.55rem 1rem; border-radius:999px; box-shadow: 0 6px 18px rgba(212,175,55,0.06); }
.btn-present:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(212,175,55,0.16); }
.btn-transfer{ background: linear-gradient(90deg,#FFD000,#FFA500); color:#111; transition: box-shadow .12s ease, transform .12s ease; padding:.55rem 1rem; border-radius:999px; box-shadow: 0 6px 18px rgba(255,208,0,0.06); }
.btn-transfer:hover{ transform: translateY(-3px); box-shadow: 0 16px 40px rgba(255,208,0,0.16); }
.btn-absent{ background: linear-gradient(180deg,#232323,#151515); color:var(--soft-white); border:1px solid rgba(255,255,255,0.04); padding:.55rem 1rem; border-radius:999px; }
.btn-absent:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,0.6); }

/* Toggle-like variants */
.btn-toggle{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border-radius:999px; font-weight:700; }
.btn-toggle input{ display:none; }
.btn-toggle .dot{ width:14px; height:14px; border-radius:999px; background:rgba(0,0,0,0.2); }

.badge{ padding:6px 10px; border-radius:999px; font-weight:700; font-size:0.85rem; display:inline-flex; align-items:center; gap:8px; }
.badge.present{ background: rgba(57,255,20,0.08); color:var(--present-green); box-shadow: 0 6px 18px rgba(57,255,20,0.04); }
.badge.absent{ background: rgba(224,106,106,0.06); color:var(--absent-red); }

/* Employees list and modal */
.top-actions{ display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.add-btn{ background:var(--accent); color:#111; padding:.6rem .85rem; border-radius:10px; font-weight:800; }

.employees-table{ width:100%; border-collapse:collapse; }
.employees-table th, .employees-table td{ text-align:left; padding:12px; border-bottom:1px solid rgba(255,255,255,0.03); }
.employees-table thead th{ color:rgba(255,255,255,0.8); font-size:0.95rem; }
.action-icon{ color:rgba(255,255,255,0.75); padding:8px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.action-icon:hover{ background: rgba(212,175,55,0.04); color:var(--gold-2); transform: translateY(-2px); }

/* Modal (Add / Edit) */
.modal-backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background: linear-gradient(0deg, rgba(0,0,0,0.6), rgba(0,0,0,0.6)); z-index:80; }
.modal-backdrop.show{ display:flex; }
.modal-panel{ background: var(--card-bg); width:520px; max-width:94%; padding:1.1rem; border-radius:12px; box-shadow: 0 30px 80px rgba(0,0,0,0.8); border:1px solid rgba(255,255,255,0.03); }
.form-row{ display:flex; gap:.5rem; margin-bottom:.6rem; flex-direction:column; }
.form-row input, .form-row select, .form-row textarea{ background:transparent; border:1px solid rgba(255,255,255,0.04); padding:.6rem .75rem; border-radius:8px; color:var(--soft-white); width:100%; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus{ border-color:var(--gold-2); box-shadow: 0 8px 30px rgba(212,175,55,0.06); outline:none; }

/* Small utilities */
.mt-6{ margin-top:1.5rem; }
.text-muted{ color:rgba(255,255,255,0.45); }

/* Tables: responsive wrapper */
.table-wrapper{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.employees-table{ min-width:640px; }

/* Mobile: convert rows to stacked cards */
.employees-table.responsive tbody tr{ display:block; border-radius:10px; margin-bottom:.75rem; background:var(--card-bg); border-left:4px solid var(--gold-2); box-shadow: 0 6px 18px rgba(0,0,0,0.6); padding:.6rem; }
.employees-table.responsive td{ display:flex; justify-content:space-between; padding:.45rem 0.6rem; border-bottom:none; }
.employees-table.responsive td::before{ content: attr(data-label) ": "; color:rgba(255,255,255,0.6); font-weight:600; margin-right:.4rem; }


/* Responsive tweaks */
/* Tablet and up */
@media (min-width: 600px){
  .summary-grid{ grid-template-columns: repeat(2, 1fr); }
  .form-row{ flex-direction:row; }
}

/* Desktop and up */
@media (min-width: 1024px){
  .summary-grid{ grid-template-columns: repeat(3, 1fr); }
  .sidebar{ transform:none; position:fixed; width:240px; max-width:none; }
  .sidebar.active{ transform:none; }
  .main-content{ margin-left:260px; padding:1.25rem 2rem; }
}

/* Small screens adjustments */
@media (max-width: 599px){
  .main-content{ margin-left:0; padding:.9rem; }
  .attendance-controls{ flex-direction:column; align-items:flex-start; }
  .employees-table.responsive td{ display:flex; flex-direction:row; justify-content:space-between; }
}

/* Sidebar visible on tablet/desktop */
@media (min-width: 768px){
  .sidebar{ transform:none; position:fixed; width:240px; max-width:none; }
  .sidebar.open{ transform:none; }
  .main-content{ margin-left:260px; padding:1.25rem 2rem; }
  .mobile-open-btn{ display:none; }
  .mobile-header{ display:none; }
}

@media (max-width: 767px){
  /* ensure sidebar hidden by default on small screens */
  .sidebar{ transform: translateX(-100%); }
  .main-content{ margin-left:0; }
  /* employees grid: single column stacked cards */
  .employees-grid{ grid-template-columns: 1fr; }
}

/* When sidebar is toggled, shift main-content on small screens */
@media (max-width: 767px){
  .main-content.shifted{ transform: translateX(78%); filter: brightness(0.95); }
}

/* On larger screens, ensure class doesn't break layout but can be used to explicitly set margin */
@media (min-width: 768px){
  .main-content.shifted{ margin-left:260px; }
}

/* Employees grid layout */
.employees-grid{ display:grid; gap:12px; grid-template-columns: repeat(3, 1fr); }
@media (min-width: 600px) and (max-width: 1023px){ .employees-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px){ .employees-grid{ grid-template-columns: 1fr; } }

/* Employee card styling for grid */
.employee-card{ background: var(--card-bg); padding:12px; border-radius:12px; border-left:4px solid transparent; box-shadow: 0 6px 18px rgba(0,0,0,0.6); display:flex; flex-direction:column; justify-content:space-between; transition: transform .16s ease, box-shadow .16s ease; }
.employee-card:hover{ transform: translateY(-6px); box-shadow: 0 26px 60px rgba(212,175,55,0.08); }
.employee-card .meta{ display:flex; gap:12px; align-items:center; }
.employee-card .meta .avatar{ width:56px; height:56px; flex:0 0 56px; font-size:1rem; }
.employee-card .info{ flex:1; }
.employee-card .info .name{ font-weight:800; font-size:1rem; }
.employee-card .info .sub{ color:rgba(255,255,255,0.65); font-size:.9rem; }
.employee-card .card-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
.employee-card .card-actions .action-icon{ padding:8px; }

/* Highlight left gold indicator for each record card */
.employee-card.record{ border-left-color: var(--gold-2); }

/* Floating Action Button (FAB) */
.fab{ position:fixed; right:18px; bottom:18px; width:56px; height:56px; border-radius:999px; background:var(--accent); color:#111; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 40px rgba(0,0,0,0.6); z-index:96; border:none; }
@media (min-width: 768px){ .fab{ display:none; } }


/* Mobile header bar */
.mobile-header{ display:flex; align-items:center; gap:.75rem; padding:.6rem .9rem; background: linear-gradient(90deg, rgba(20,20,20,0.9), rgba(10,10,10,0.9)); position:fixed; top:0; left:0; right:0; z-index:88; height:56px; }
.mobile-header .mobile-logo{ font-weight:800; color:var(--gold-1); }
.mobile-header .hamburger{ background:transparent; border:none; color:var(--soft-white); font-size:1.1rem; padding:.5rem; border-radius:8px; }
@media (min-width: 1024px){ .mobile-header{ display:none; } }

/* Backdrop styling for sidebar */
.sidebar-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,0.45); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); opacity:0; transition: opacity .22s ease; z-index:9998; pointer-events:none; }
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }

/* Mobile open button base style */
.mobile-open-btn{ display:none; position:fixed; left:12px; top:12px; z-index:10001; background:var(--accent); border-radius:8px; padding:.5rem; border:none; color:#111; }
@media (max-width: 1023px){ .mobile-open-btn{ display:block; } }

/* Fixed hamburger (top-left) for mobile */
.hamburger{ display:inline-flex; align-items:center; justify-content:center; background:transparent; border:none; color:var(--soft-white); position:fixed; left:12px; top:12px; z-index:10002; padding:.5rem; border-radius:8px; }
@media (min-width: 768px){ .hamburger{ display:none; } }

/* Ensure touch targets and spacing */
button, a[role="button"]{ touch-action:manipulation; }

/* Mobile open button visibility */
#mobileOpenBtn{ display:none; }

@media (max-width: 1023px){
  #mobileOpenBtn{ display:block; }
}

/* Attendance-specific styles */
.attendance-card{ padding:0; border-radius:12px; overflow:hidden; }
.attendance-table{ width:100%; border-collapse:collapse; min-width:720px; }
.attendance-table thead th{ text-align:left; padding:14px 18px; color:rgba(255,255,255,0.8); font-size:0.95rem; background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.00)); border-bottom:1px solid rgba(255,255,255,0.03); }
.attendance-table tbody tr{ border-bottom:1px solid rgba(255,255,255,0.03); }
.attendance-table tbody tr:last-child{ border-bottom:none; }
.attendance-table td{ padding:14px 18px; vertical-align:middle; }
.emp-col .emp-meta{ display:flex; gap:12px; align-items:center; }
.initials{ width:44px; height:44px; border-radius:999px; background:rgba(255,255,255,0.03); display:flex; align-items:center; justify-content:center; color:var(--soft-white); font-weight:800; flex:0 0 44px; }
.emp-name-block .employee-name{ font-weight:800; }
.emp-code{ color:rgba(255,255,255,0.6); }
.col-actions{ width:220px; text-align:right; }
.actions{ display:flex; gap:8px; justify-content:flex-end; align-items:center; }
.attendance-table .btn{ min-width:120px; }

/* Status badges with glow */
.badge.present{ background: rgba(57,255,20,0.08); color:var(--present-green); box-shadow: 0 10px 30px rgba(57,255,20,0.04); border:1px solid rgba(57,255,20,0.06); }
.badge.absent{ background: rgba(224,106,106,0.06); color:var(--absent-red); box-shadow: 0 8px 26px rgba(224,106,106,0.03); border:1px solid rgba(224,106,106,0.05); }
.badge.muted{ background: transparent; color:rgba(255,255,255,0.55); border:1px dashed rgba(255,255,255,0.03); }

/* Button styles (refined) */
.btn-present{ background: linear-gradient(90deg,var(--gold-1),var(--gold-2)); color:#111; padding:.5rem .9rem; border-radius:8px; border:none; font-weight:700; }
.btn-absent{ background:transparent; color:var(--soft-white); border:1px solid rgba(255,255,255,0.06); padding:.5rem .9rem; border-radius:8px; }

/* Mobile: convert table to stacked cards */
@media (max-width: 767px){
  .with-mobile-header{ padding-top:72px; }
  .attendance-table{ min-width:0; display:block; }
  .attendance-table thead{ display:none; }
  .attendance-table tbody{ display:block; }
  .attendance-table tbody tr{ display:block; background:var(--card-bg); margin-bottom:12px; border-radius:12px; padding:12px; box-shadow: 0 6px 18px rgba(0,0,0,0.6); }
  .attendance-table td{ display:block; padding:8px 0; }
  .emp-col .emp-meta{ align-items:center; }
  .col-actions{ text-align:left; width:100%; }
  .actions{ flex-direction:column; gap:8px; }
  .attendance-table .btn{ width:100%; min-width:0; }
}

/* Slight desktop tightening for better enterprise look */
@media (min-width: 900px){
  .attendance-card{ border-radius:14px; }
  .attendance-table td{ padding:16px 20px; }
}

/* Backdrop styling for sidebar */
.sidebar-backdrop{ position:fixed; inset:0; background: rgba(0,0,0,0.45); opacity:0; transition: opacity .22s ease; z-index:85; pointer-events:none; }
.sidebar-backdrop.show{ opacity:1; pointer-events:auto; }

/* Mobile open button base style */
.mobile-open-btn{ display:none; position:fixed; left:12px; top:12px; z-index:95; background:var(--accent); border-radius:8px; padding:.5rem; border:none; color:#111; }
@media (max-width: 1023px){ .mobile-open-btn{ display:block; } }


/* ===== Responsive Sidebar & Backdrop Overrides (Unified) ===== */
/* Mobile: off-canvas using left with active state */
@media (max-width: 767.98px){
  .sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    left: -280px; /* hidden */
    width: 280px;
    max-width: none;
    transform: none !important; /* override prior transform-based impl */
    transition: left 0.3s ease-in-out;
    z-index: 10000;
  }
  .sidebar.active{ left: 0; }

  /* Ensure content clears mobile header */
  .main-content{ padding-top: 56px; }
}

/* Backdrop: default hidden; show when sidebar is active */
.sidebar-backdrop{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  z-index: 9500;
}

.sidebar.active ~ .sidebar-backdrop{ display: block; }
/* If backdrop is nested inside the sidebar (current structure), also show it */
.sidebar.active .sidebar-backdrop{ display: block; }

@media (min-width: 768px){
  .sidebar-backdrop{ display: none !important; }
}

/* Mobile header on top of sidebar so buttons remain tappable */
.mobile-header{ z-index: 1100; }

/* Consistent gold color for hamburger/toggle */
#mobileOpenBtn,
#sidebarToggle{
  color: #d4af37;
  fill: #d4af37;
  background: transparent;
  border: none;
  cursor: pointer;
}
#mobileOpenBtn:hover,
#mobileOpenBtn:focus,
#sidebarToggle:hover,
#sidebarToggle:focus{
  color: #d4af37;
  fill: #d4af37;
  opacity: 0.9;
}

/* Responsive summary grid */
.summary-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}
@media (max-width: 575.98px){
  .summary-grid{ grid-template-columns: 1fr; }
}

/* Table wrapper responsiveness */
.table-wrapper{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.table-wrapper table{ width:100%; min-width:640px; border-collapse:collapse; }
@media (max-width: 575.98px){
  .table-wrapper table{ font-size:14px; }
  .table-wrapper table th,
  .table-wrapper table td{ padding:8px; }
}