/*
  public/assets/css/app.css
  Premium dashboard stylesheet — tokens, sidebar, topbar, cards, KPI widgets, grids, charts, dark mode
*/

:root{
  --bg-0: #f6f9fb;      /* page background */
  --bg-1: #ffffff;      /* card / surface */
  --muted: #6b7a86;     /* muted text */
  --ink: #0b1b2b;       /* main text */
  --line: rgba(11,27,43,0.06);
  --brand-a: #4d7cff;   /* primary gradient start */
  --brand-b: #2aa59b;   /* primary gradient end */
  --accent: #ff7aa2;
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-1: 0 6px 18px rgba(15,30,50,0.06);
  --shadow-2: 0 10px 30px rgba(15,30,50,0.08);
  --max-width: 1200px;
}

/* Base layout */
html,body{height:100%;}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: linear-gradient(180deg, var(--bg-0), #eef6fa 60%);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* Make common content elements resilient on small screens */
img{max-width:100%;height:auto}
pre{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}

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

/* Sidebar */
.sidebar{
  width:260px;
  background: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,255,255,0.85));
  border-right:1px solid var(--line);
  padding:18px 12px;
  box-shadow: var(--shadow-1);
  position:sticky;top:0;height:100vh;align-self:flex-start;
  transition:width .22s ease, transform .22s ease;
  z-index:20;
}
.sidebar .brand{display:flex;align-items:center;gap:12px;padding:8px 6px}
.sidebar .logo{height:36px}
.sidebar .collapse-btn{margin-left:auto;background:transparent;border:0;color:var(--muted);cursor:pointer;font-size:14px}

.nav{margin-top:12px}
.nav-group{margin-bottom:10px;padding:6px 2px}
.nav-link{display:flex;align-items:center;gap:12px;padding:10px;border-radius:10px;color:var(--ink);text-decoration:none;font-weight:600;margin:6px 4px}
.nav-link i{width:20px;text-align:center;color:var(--brand-a)}
.nav-link:hover{background:rgba(77,124,255,0.06)}
.nav-link.active{background:linear-gradient(90deg, rgba(77,124,255,0.08), rgba(42,165,155,0.04));box-shadow:inset 0 1px 0 rgba(255,255,255,0.02)}
.nav .badge{margin-left:auto;background:linear-gradient(90deg,var(--accent),#ffd08a);color:#062028;padding:6px 8px;border-radius:999px;font-weight:700;font-size:0.78rem}

.sidebar-footer{position:absolute;bottom:18px;left:12px;right:12px}
.btn-ghost{background:transparent;border:1px solid var(--line);padding:8px 10px;border-radius:999px;cursor:pointer}

/* Main column */
.main{flex:1;display:flex;flex-direction:column;min-height:100vh}

/* Topbar */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:12px 20px;border-bottom:1px solid var(--line);background:transparent;position:sticky;top:0;z-index:10}
.topbar .left{display:flex;align-items:center;gap:12px}
.mobile-open{display:none;background:transparent;border:0;font-size:18px}
.breadcrumb{font-weight:700;color:var(--muted)}
.topbar .right{display:flex;align-items:center;gap:12px}
.search input{padding:8px 12px;border-radius:999px;border:1px solid var(--line);background:transparent}
.icon-btn{background:transparent;border:0;padding:8px;border-radius:10px;position:relative}
.notif-dot{position:absolute;right:6px;top:6px;width:8px;height:8px;border-radius:999px;background:#ff7aa2;box-shadow:0 6px 14px rgba(255,122,162,0.12)}
.user{padding:8px 12px;background:linear-gradient(90deg,#ffffff,#f7fbff);border-radius:999px;border:1px solid var(--line);font-weight:600}

/* Content area */
.content{padding:22px}
.container{max-width:var(--max-width);margin:0 auto;display:grid;grid-template-columns:1fr;gap:18px}

/* Responsive primitives (used across admin + public pages) */
.table-wrap{width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap > table{width:100%}
.table-wrap th{white-space:nowrap}

.form-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.card{background:var(--bg-1);border-radius:var(--radius-md);padding:18px;border:1px solid var(--line);box-shadow:var(--shadow-1)}
.hero{display:flex;justify-content:space-between;gap:18px;align-items:center}
.hero-left h1{margin:0;font-size:1.6rem}
.muted{color:var(--muted)}
.cta{display:inline-block;padding:10px 14px;background:linear-gradient(90deg,var(--brand-a),var(--brand-b));color:white;border-radius:999px;text-decoration:none;font-weight:700}
.cta i{margin-right:8px}

/* KPI row */
.kpi-row{display:flex;gap:12px;flex-wrap:wrap}
.kpi{flex:1;padding:14px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center}
.kpi .kpi-value{font-size:1.4rem;font-weight:800}
.kpi .kpi-label{font-size:0.86rem;color:var(--muted)}

/* Grid layouts */
.grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.charts{grid-template-columns:repeat(2,1fr)}
.chart-placeholder{height:160px;border-radius:10px;border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;color:var(--muted)}

/* Empty state */
.empty{display:flex;align-items:center;gap:12px;padding:18px;border-radius:10px;background:linear-gradient(180deg,rgba(250,250,255,0.6),rgba(245,247,250,0.6));border:1px solid var(--line)}
.empty-ill{font-size:36px}

/* Buttons */
.btn{padding:10px 12px;border-radius:8px;border:0;background:var(--brand-a);color:#fff;font-weight:700}
.btn-ghost{background:transparent;border:1px solid var(--line);padding:8px 12px;border-radius:8px}

/* Charts area */
.chart{padding:14px}
.chart-card .chart-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
/* Stabilize chart canvas sizing to prevent runaway heights */
.chart canvas{max-height:300px}

/* small screens */
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;transform:translateX(-110%);height:100vh;width:280px;box-shadow:var(--shadow-2)}
  .sidebar.open{transform:translateX(0)}
  .mobile-open{display:inline-block}
  .main{margin-left:0}
  .container{padding:8px}
  .grid, .cards-grid, .charts{grid-template-columns:1fr}
  .form-grid-2{grid-template-columns:1fr}
  .hero{flex-direction:column;align-items:flex-start}
}

@media (max-width:600px){
  .content{padding:14px}
  .topbar{flex-wrap:wrap;gap:8px;padding:10px 14px}
  .topbar .left{width:100%}
  .topbar .right{width:100%;flex-wrap:wrap;justify-content:flex-end}
  .search{flex:1;min-width:180px}
  .user{width:100%;display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
}

/* collapsed sidebar */
.sidebar.collapsed{width:72px}
.sidebar.collapsed .nav-link span{display:none}
.sidebar.collapsed .brand img{height:28px}

/* Dark mode */
body.dark{
  --bg-0:#041021;
  --bg-1:rgba(8,12,20,0.6);
  --muted:#9fb4c8;
  --ink:#e6f7ff;
  --line:rgba(255,255,255,0.04);
  background:linear-gradient(180deg,#031021,#061428 60%);
}
body.dark .sidebar{background:linear-gradient(180deg,rgba(7,10,16,0.9),rgba(10,14,20,0.9));border-right-color:rgba(255,255,255,0.02)}
body.dark .card{background:linear-gradient(180deg,rgba(6,10,16,0.6),rgba(4,8,14,0.6));border-color:rgba(255,255,255,0.03);box-shadow:none}
body.dark .cta{box-shadow:0 8px 20px rgba(77,124,255,0.08)}

/* small helpers */
.muted.small{font-size:0.9rem}
.badge{display:inline-block;padding:6px 8px;border-radius:999px;background:#eef6ff;color:var(--brand-a);font-weight:700}

/* Accessibility focus states */
a:focus,button:focus,input:focus{outline:3px solid rgba(77,124,255,0.12);outline-offset:2px}

/* print tweaks - keep timesheet printable */
@media print{
  .sidebar,.topbar{display:none}
  .content{padding:0}
  .card{box-shadow:none;border:1px solid #ddd}
}

/* end of app.css */

/* Toasts (stacked, top-right) */
#jbar-toasts .jbar-toast{pointer-events:auto;min-width:220px;max-width:380px;padding:10px 14px;border-radius:10px;color:#052022;background:#ffffff;border:1px solid rgba(11,27,43,0.06);box-shadow:0 10px 30px rgba(2,15,30,0.08);display:flex;gap:10px;align-items:center;transform:translateY(-6px);opacity:0;transition:transform .18s ease,opacity .18s ease}
#jbar-toasts .jbar-toast.show{transform:none;opacity:1}
#jbar-toasts .jbar-toast.success{background:linear-gradient(90deg,rgba(45,210,145,0.06),rgba(77,124,255,0.04));border-color:rgba(42,165,155,0.12);color:#042726}
#jbar-toasts .jbar-toast.error{background:linear-gradient(90deg,rgba(255,122,162,0.06),rgba(255,200,160,0.03));border-color:rgba(255,122,162,0.12);color:#2b0e12}
#jbar-toasts .jbar-toast .icon{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:8px;background:rgba(255,255,255,0.6);font-size:14px}
#jbar-toasts .jbar-toast .body{flex:1}
#jbar-toasts .jbar-toast .title{font-weight:700;font-size:0.95rem;margin-bottom:2px}
#jbar-toasts .jbar-toast .msg{font-size:0.9rem;color:var(--muted)}