:root{
  --brand: #d97706;
  --brand-dark: #b45309;
  --brand-light: #fef3c7;
  --sidebar-bg: #1c1917;
  --sidebar-bg2: #292524;
  --sidebar-bg3: #37322c;
  --sidebar-text: #d6d3d1;
  --sidebar-text-dim: #a19a95;
  --bg: #f6f5f3;
  --card-bg: #ffffff;
  --border: #e7e5e4;
  --text: #1c1917;
  --muted: #78716c;
  --radius: 12px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(28,25,23,.05);
  --shadow-md: 0 8px 24px rgba(28,25,23,.08);
  --sidebar-w: 260px;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  margin:0;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;}
body.sidebar-open{overflow:hidden;}

/* ---------- Layout ---------- */
.app-wrapper{display:flex; min-height:100vh;}

.sidebar{
  width:var(--sidebar-w);
  background:var(--sidebar-bg);
  color:var(--sidebar-text);
  position:fixed;
  top:0; left:0; bottom:0;
  display:flex;
  flex-direction:column;
  z-index:1040;
  transition:transform .28s cubic-bezier(.4,0,.2,1);
  box-shadow:1px 0 0 rgba(255,255,255,.04) inset;
}

/* Brand */
.sidebar-brand{
  display:flex; align-items:center; gap:.7rem;
  padding:1.35rem 1.25rem 1.1rem;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.sidebar-brand-mark{
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(145deg, var(--brand), var(--brand-dark));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:1.15rem; flex-shrink:0;
  box-shadow:0 4px 10px rgba(217,119,6,.35);
}
.sidebar-brand-text{display:flex; flex-direction:column; line-height:1.15;}
.sidebar-brand-name{font-weight:700; font-size:1.05rem; color:#fff;}
.sidebar-brand-sub{font-size:.72rem; color:var(--sidebar-text-dim); letter-spacing:.02em;}
.sidebar-brand #sidebarClose{margin-left:auto;}

/* User chip */
.sidebar-user{
  display:flex; align-items:center; gap:.7rem;
  padding:.9rem 1.25rem;
  border-bottom:1px solid rgba(255,255,255,.06);
  color:#fff;
}
.sidebar-user-info{min-width:0;}
.sidebar-user-info .fw-semibold{
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.avatar{
  width:40px;height:40px;border-radius:50%;
  background:linear-gradient(145deg, var(--brand), var(--brand-dark));
  color:#fff; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  box-shadow:0 2px 6px rgba(217,119,6,.4);
}

/* Nav */
.sidebar-nav{
  padding:.5rem .75rem 1rem;
  overflow-y:auto;
  flex:1;
  scrollbar-width:thin;
  scrollbar-color:var(--sidebar-bg3) transparent;
}
.sidebar-nav::-webkit-scrollbar{width:6px;}
.sidebar-nav::-webkit-scrollbar-thumb{background:var(--sidebar-bg3); border-radius:10px;}

.nav-section{
  font-size:.68rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--sidebar-text-dim); font-weight:700;
  margin:1.1rem .6rem .4rem;
}
.nav-section:first-child{margin-top:.5rem;}

.sidebar-nav .nav-link{
  display:flex; align-items:center; gap:.75rem;
  color:var(--sidebar-text);
  padding:.55rem .75rem;
  border-radius:var(--radius-sm);
  font-size:.9rem; font-weight:500;
  margin-bottom:2px;
  position:relative;
  transition:background .15s ease, color .15s ease, padding-left .15s ease;
}
.nav-icon{
  width:26px; height:26px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border-radius:7px;
  font-size:.95rem;
  background:transparent;
  color:var(--sidebar-text-dim);
  transition:background .15s ease, color .15s ease;
}
.sidebar-nav .nav-link:hover{background:var(--sidebar-bg2); color:#fff;}
.sidebar-nav .nav-link:hover .nav-icon{color:#fff;}
.sidebar-nav .nav-link.active{background:var(--sidebar-bg2); color:#fff; font-weight:600;}
.sidebar-nav .nav-link.active .nav-icon{background:var(--brand); color:#fff;}
.sidebar-nav .nav-link.active::before{
  content:'';
  position:absolute; left:-.75rem; top:50%; transform:translateY(-50%);
  width:3px; height:60%;
  background:var(--brand);
  border-radius:0 4px 4px 0;
}

/* Sidebar footer / logout */
.sidebar-footer{
  padding:.75rem; border-top:1px solid rgba(255,255,255,.06);
}
.nav-link-danger{color:#fca5a5 !important;}
.nav-link-danger .nav-icon{color:#fca5a5 !important;}
.nav-link-danger:hover{background:rgba(225,29,72,.12) !important; color:#fecaca !important;}
.nav-link-danger:hover .nav-icon{color:#fecaca !important;}

.main-content{
  margin-left:var(--sidebar-w);
  width:100%;
  min-height:100vh;
}
.page-inner{padding:1.75rem; max-width:1400px;}

/* ---------- Topbar (mobile) ---------- */
.topbar{
  background:var(--sidebar-bg);
  color:#fff;
  padding:.65rem 1rem;
  position:sticky; top:0; z-index:1030;
  box-shadow:0 2px 8px rgba(0,0,0,.15);
}
.topbar-brand{font-weight:700; display:flex; align-items:center; gap:.4rem;}
.topbar-brand i{color:var(--brand);}
.btn-icon{background:none;border:none;color:#fff;font-size:1.3rem;padding:.35rem .55rem; border-radius:8px; transition:background .15s ease;}
.btn-icon:hover{background:rgba(255,255,255,.1);}
.sidebar-overlay{
  display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1035;
  backdrop-filter:blur(1px);
}

#sidebarClose{display:none;}

@media (max-width: 991.98px){
  .sidebar{transform:translateX(-100%); box-shadow:8px 0 24px rgba(0,0,0,.25);}
  .sidebar.show{transform:translateX(0);}
  .main-content{margin-left:0;}
  .sidebar-overlay.show{display:block;}
  .page-inner{padding:1.1rem;}
  #sidebarClose{display:inline-flex;}
}

/* ---------- Cards & widgets ---------- */
.card{
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--card-bg);
}
.stat-card{
  border-radius:var(--radius);
  padding:1.25rem;
  background:var(--card-bg);
  border:1px solid var(--border);
  height:100%;
  box-shadow:var(--shadow-sm);
  transition:box-shadow .2s ease, transform .2s ease;
}
.stat-card:hover{box-shadow:var(--shadow-md); transform:translateY(-1px);}
.stat-card .stat-icon{
  width:44px;height:44px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem; color:#fff;
  margin-bottom:.75rem;
}
.stat-card .stat-value{font-size:1.6rem; font-weight:700; line-height:1.2; letter-spacing:-.01em;}
.stat-card .stat-label{color:var(--muted); font-size:.85rem; margin-top:.15rem;}
.bg-amber{background:linear-gradient(145deg,#f59e0b,#d97706);}
.bg-teal{background:linear-gradient(145deg,#14b8a6,#0d9488);}
.bg-indigo{background:linear-gradient(145deg,#6366f1,#4f46e5);}
.bg-rose{background:linear-gradient(145deg,#f43f5e,#e11d48);}

.page-header{
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:1rem; margin-bottom:1.5rem;
}
.page-header h1{font-size:1.4rem; font-weight:700; margin:0; letter-spacing:-.01em;}
.page-header .text-muted{font-size:.9rem;}

.section-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:1.25rem;
  margin-bottom:1.5rem;
  box-shadow:var(--shadow-sm);
}
.section-card h5{font-weight:700; margin-bottom:1rem; font-size:.98rem; display:flex; align-items:center; gap:.5rem;}

.table thead th{
  font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--muted); border-bottom-width:1px; white-space:nowrap;
  font-weight:700;
}
.table td{vertical-align:middle;}
.table-hover tbody tr:hover{background:#fbf9f7;}
.table > :not(caption) > * > *{padding:.65rem .75rem;}

.badge-soft-success{background:#dcfce7; color:#166534;}
.badge-soft-warning{background:#fef3c7; color:#92400e;}
.badge-soft-danger{background:#fee2e2; color:#991b1b;}
.badge-soft-info{background:#e0f2fe; color:#0369a1;}
.badge-soft-secondary{background:#f1f5f9;color:#475569;}

.btn{border-radius:var(--radius-sm); font-weight:500;}
.btn-brand{background:var(--brand); border-color:var(--brand); color:#fff;}
.btn-brand:hover{background:var(--brand-dark); border-color:var(--brand-dark); color:#fff;}
.btn-brand:focus, .btn-brand:focus-visible{box-shadow:0 0 0 .2rem rgba(217,119,6,.25);}

/* Visible keyboard focus across the app */
a:focus-visible, button:focus-visible, .nav-link:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--brand);
  outline-offset:2px;
}

.login-page{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#1c1917,#44403c);
  padding:1rem;
}
.login-card{
  background:#fff; border-radius:16px; padding:2.25rem;
  width:100%; max-width:400px;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.login-brand{text-align:center; margin-bottom:1.5rem;}
.login-brand i{font-size:2.2rem; color:var(--brand);}
.login-brand h2{font-weight:700; margin:.5rem 0 0;}

.invoice-box{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:2rem;}
@media print{
  .sidebar,.topbar,.no-print{display:none !important;}
  .main-content{margin-left:0 !important;}
  body{background:#fff;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{transition-duration:.01ms !important; animation-duration:.01ms !important;}
}