@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --bg-base:       #F5F6FA;
  --bg-card:       #ffffff;
  --bg-hover:      #f9fafc;
  --bg-input:      #f4f5fa;
  --border:        #eef0f6;
  --border-focus:  #877FC1;

  --text-primary:   #121316;
  --text-secondary: #565d6d;
  --text-muted:     #8f96a3;

  --accent:        #877FC1;
  --accent-light:  #DBD3F5;
  --accent-bg:     #f2effc;
  --accent-glow:   rgba(135,127,193,.12);

  --green:         #10b981;
  --green-bg:      #e6fdf4;
  --green-border:  #a7f3d0;
  --red:           #f43f5e;
  --red-bg:        #fff1f2;
  --red-border:    #fecdd3;
  --yellow:        #f59e0b;
  --yellow-bg:     #fef3c7;
  --yellow-border: #fde68a;
  --blue:          #3b82f6;
  --blue-bg:       #eff6ff;
  --blue-border:   #bfdbfe;
  --purple:        #8b5cf6;
  --purple-bg:     #f5f3ff;

  --radius-sm: 12px;
  --radius:    18px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --shadow-sm:   0 2px 8px rgba(0,0,0,.02);
  --shadow-card: 0 8px 30px -10px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,0.015);
  --shadow-hover:0 20px 40px -15px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,0.02);
  --shadow-modal:0 30px 70px rgba(0,0,0,.15);

  --transition: .3s cubic-bezier(.4,0,.2,1);
  --sidebar-w: 88px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Plus Jakarta Sans',system-ui,sans-serif;
  font-size:14px;
  line-height:1.6;
  background:var(--bg-base);
  color:var(--text-primary);
  min-height:100vh;
  -webkit-font-smoothing: antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;border-radius:10px}
button{cursor:pointer;font-family:inherit}
input,select,textarea{font-family:inherit}

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

/* Floating Sidebar (Desktop) */
.sidebar{
  width:var(--sidebar-w);
  background:#222026;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:space-between;
  position:fixed;
  top:20px;
  left:20px;
  bottom:20px;
  height:calc(100vh - 40px);
  z-index:100;
  transition:transform var(--transition), width var(--transition);
  border-radius:24px;
  border:none;
  padding:24px 0;
  box-shadow:0 12px 40px rgba(0,0,0,0.18);
}
.sidebar-logo{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  padding-bottom:12px;
}
.logo-icon{
  width:48px;
  height:48px;
  background:#ffffff;
  color:#222026;
  border-radius:15px;
  display:grid;
  place-items:center;
  transition:transform var(--transition);
}
.logo-icon svg{width:22px;height:22px;stroke:#222026;fill:none}
.logo-info{display:none} /* Hidden on desktop compact sidebar */

.sidebar-nav{
  padding:0;
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  flex:1;
  margin-top:20px;
}
.nav-section{display:none} /* Hidden on desktop compact sidebar */
.nav-item{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:15px;
  color:#8a92a6;
  font-weight:600;
  transition:all var(--transition);
  position:relative;
}
.nav-item svg{width:20px;height:20px;flex-shrink:0}
.nav-item .nav-text{display:none} /* Hidden on desktop compact sidebar */
.nav-item:hover{background:rgba(255,255,255,0.06);color:#ffffff}
.nav-item.active{
  background:#ffffff;
  color:#222026;
  box-shadow:0 8px 24px rgba(255,255,255,0.12);
}
.nav-item.active svg{stroke:#222026}
.nav-badge{
  position:absolute;
  top:5px;
  right:5px;
  background:var(--red);
  color:#fff;
  font-size:9px;
  font-weight:800;
  width:16px;
  height:16px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid #222026;
}

.sidebar-footer{
  width:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}
.sidebar-footer-utils{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  width:100%;
}
.nav-item-util{
  width:44px;
  height:44px;
  border-radius:12px;
  color:#8a92a6;
  display:grid;
  place-items:center;
  transition:var(--transition);
}
.nav-item-util:hover{
  background:rgba(255,255,255,0.06);
  color:#ffffff;
}
.nav-item-util.active{
  background:var(--accent);
  color:#ffffff;
}
.nav-item-util svg{width:18px;height:18px}
.nav-item-logout{
  width:50px;
  height:50px;
  border-radius:15px;
  background:rgba(255, 255, 255, 0.04);
  color:#f43f5e;
  display:grid;
  place-items:center;
  transition:all var(--transition);
}
.nav-item-logout:hover{
  background:#f43f5e;
  color:#ffffff;
  box-shadow:0 8px 20px rgba(244, 63, 94, 0.2);
}
.nav-item-logout svg{width:20px;height:20px}

/* Main Content Area */
.main-content{
  margin-left: calc(var(--sidebar-w) + 40px);
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  padding:40px 40px 40px 0;
  overflow-x:hidden;
}

/* Topbar */
.topbar{
  background:transparent;
  backdrop-filter:none;
  border-bottom:none;
  padding:0;
  height:auto;
  margin-bottom:32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.topbar-left{display:flex;align-items:center;gap:12px}
.topbar-title{
  font-size:30px;
  font-weight:800;
  color:var(--text-primary);
  letter-spacing:-0.8px;
}
.topbar-subtitle{
  font-size:13px;
  color:var(--text-muted);
  margin-top:2px;
}
.topbar-right{display:flex;align-items:center;gap:12px}
.topbar-btn {
  background:#ffffff;
  border:1px solid rgba(0,0,0,0.03);
  box-shadow:var(--shadow-sm);
  width:42px;
  height:42px;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--text-secondary);
  transition:all var(--transition);
  position:relative;
  outline:none;
}
.topbar-btn:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
  transform:translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}
.topbar-btn svg{width:18px;height:18px}
.notification-btn .notification-badge{
  position:absolute;
  top:-2px;
  right:-2px;
  background:#22c55e;
  color:#fff;
  font-size:9px;
  font-weight:700;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  border:2px solid #ffffff;
}
.topbar-avatar {
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg, var(--accent) 0%, #DBD3F5 100%);
  color:#ffffff;
  display:grid;
  place-items:center;
  font-weight:700;
  font-size:14px;
  border:2px solid #ffffff;
  box-shadow:0 4px 12px rgba(0,0,0,0.06);
}
.hamburger{display:none;background:none;border:none;color:var(--text-secondary);padding:4px}
.hamburger svg{width:22px;height:22px}

.page-body{padding:0;flex:1}

/* Layout Grid Structures */
.dashboard-layout {
  display:grid;
  grid-template-columns:1fr 320px;
  gap:24px;
  align-items:start;
}
.dashboard-main-col {
  display:flex;
  flex-direction:column;
  gap:24px;
}
.dashboard-side-col {
  display:flex;
  flex-direction:column;
  gap:24px;
}

/* Bento Cards */
.bento-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}
.bento-grid-3{grid-template-columns:repeat(3,1fr)}
.bento-grid-2{grid-template-columns:repeat(2,1fr)}

.bento-card{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,0.02);
  border-radius:var(--radius-lg);
  padding:24px;
  box-shadow:var(--shadow-card);
  transition:all var(--transition);
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.bento-card:hover{box-shadow:var(--shadow-hover);transform:translateY(-3px)}

.card-icon{
  width:40px;
  height:40px;
  border-radius:12px;
  display:grid;
  place-items:center;
  margin-bottom:14px;
}
.card-icon svg{width:20px;height:20px}
.card-icon.indigo{background:var(--accent-bg);color:var(--accent)}
.card-icon.indigo svg{stroke:var(--accent)}
.card-icon.green{background:var(--green-bg);color:var(--green)}
.card-icon.green svg{stroke:var(--green)}
.card-icon.red{background:var(--red-bg);color:var(--red)}
.card-icon.red svg{stroke:var(--red)}
.card-icon.yellow{background:var(--yellow-bg);color:var(--yellow)}
.card-icon.yellow svg{stroke:var(--yellow)}
.card-icon.blue{background:var(--blue-bg);color:var(--blue)}
.card-icon.blue svg{stroke:var(--blue)}
.card-icon.purple{background:var(--purple-bg);color:var(--purple)}
.card-icon.purple svg{stroke:var(--purple)}

.card-label{font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.card-value{font-size:24px;font-weight:800;letter-spacing:-0.5px;color:var(--text-primary);line-height:1.2}
.card-sub{font-size:12px;color:var(--text-muted);margin-top:6px;display:flex;align-items:center;gap:4px}
.card-trend{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;padding:3px 8px;border-radius:20px;margin-top:10px;width:fit-content}
.trend-up{background:var(--green-bg);color:var(--green)}
.trend-down{background:var(--red-bg);color:var(--red)}
.trend-up svg,.trend-down svg{width:12px;height:12px}

/* Bento KPI Custom Premium Themes */
.bento-card.dark-theme {
  background:#18181b;
  color:#ffffff;
  border:none;
  box-shadow:0 10px 30px -10px rgba(0,0,0,0.18);
}
.bento-card.dark-theme .card-label {
  color:rgba(255,255,255,0.4);
}
.bento-card.dark-theme .card-value {
  color:#ffffff;
}
.bento-card.dark-theme .card-sub {
  color:rgba(255,255,255,0.4);
}

.bento-card.gradient-theme {
  background:linear-gradient(135deg, #222026 0%, #877FC1 50%, #DBD3F5 100%);
  color:#ffffff;
  border:none;
  box-shadow:0 10px 30px -10px rgba(135, 127, 193, 0.3);
}
.bento-card.gradient-theme .card-label {
  color:rgba(255,255,255,0.5);
}
.bento-card.gradient-theme .card-value {
  color:#ffffff;
}
.bento-card.gradient-theme .card-sub {
  color:rgba(255,255,255,0.5);
}

.bento-card.pastel-theme {
  background:linear-gradient(135deg, #faf2eb 0%, #f7e6d7 100%);
  color:#2f2115;
  border:none;
}
.bento-card.pastel-theme .card-label {
  color:#827063;
}
.bento-card.pastel-theme .card-value {
  color:#2f2115;
}
.bento-card.pastel-theme .card-sub {
  color:#8e7d71;
}

/* Custom visual ratio bar inside dark KPI card */
.kpi-ratio-bar-wrap {
  margin-top:16px;
}
.kpi-ratio-bar {
  height:12px;
  border-radius:99px;
  display:flex;
  overflow:hidden;
  background:rgba(255,255,255,0.1);
  margin-bottom:8px;
}
.kpi-ratio-fill-left {
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.2),
    rgba(255,255,255,0.2) 6px,
    rgba(255,255,255,0.3) 6px,
    rgba(255,255,255,0.3) 12px
  );
  height: 100%;
}
.kpi-ratio-fill-right {
  background:#ffffff;
  height:100%;
}
.kpi-ratio-labels {
  display:flex;
  justify-content:space-between;
  font-size:11px;
}
.kpi-ratio-label-item {
  display:flex;
  align-items:center;
  gap:5px;
  color:rgba(255,255,255,0.7);
}
.kpi-ratio-label-item.white-dot::before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(255,255,255,0.4);
}
.kpi-ratio-label-item.solid-dot::before {
  content:'';
  width:6px;
  height:6px;
  border-radius:50%;
  background:#ffffff;
}

/* Alert Box */
.alert-box{
  background:var(--bg-card);
  border:1px solid var(--border);
  border-left:4px solid var(--red);
  border-radius:var(--radius-lg);
  padding:20px 24px;
  margin-bottom:24px;
  box-shadow:var(--shadow-card);
}
.alert-box-header{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.alert-icon{width:32px;height:32px;background:var(--red-bg);border-radius:8px;display:grid;place-items:center}
.alert-icon svg{width:16px;height:16px;stroke:var(--red)}
.alert-title{font-size:14px;font-weight:800;color:var(--text-primary)}
.low-stock-item-card:hover{
  border-color:var(--red-border) !important;
  background:#fff8f8 !important;
  transform:translateY(-1.5px);
  box-shadow:0 6px 14px rgba(244,63,94,0.05);
}

/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700}
.badge svg{width:11px;height:11px}
.badge-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.badge-green{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow);border:1px solid var(--yellow-border)}
.badge-blue{background:var(--blue-bg);color:var(--blue);border:1px solid var(--blue-border)}
.badge-purple{background:var(--purple-bg);color:var(--purple);border:1px solid #ddd6fe}
.badge-gray{background:var(--bg-input);color:var(--text-secondary);border:1px solid var(--border)}

/* Section Header */
.section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.section-title{font-size:16px;font-weight:800;color:var(--text-primary);letter-spacing:-0.3px}
.section-sub{font-size:12px;color:var(--text-muted);margin-top:2px}

/* Modern Tables */
.table-wrap{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,0.02);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.data-table{width:100%;border-collapse:collapse}
.data-table thead{background:transparent}
.data-table th{
  text-align:left;
  padding:16px 20px;
  font-size:11px;
  font-weight:700;
  color:var(--text-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.data-table td{
  padding:16px 20px;
  font-size:13px;
  border-bottom:1px solid rgba(0,0,0,0.015);
  vertical-align:middle;
  color:var(--text-secondary);
}
.data-table tbody tr:last-child td{border-bottom:none}
.data-table tbody tr{transition:background var(--transition)}
.data-table tbody tr:hover{background:var(--bg-hover)}

.sku-text{
  font-family:inherit;
  font-size:11px;
  color:var(--text-muted);
  font-weight:500;
}
.product-name{font-weight:700;color:var(--text-primary)}
.qty-cell{font-weight:700;font-variant-numeric:tabular-nums}
.qty-cell.low{color:var(--red)}
.qty-cell.ok{color:var(--green)}
.price-cell{font-variant-numeric:tabular-nums;font-weight:600;color:var(--text-primary)}

/* Product avatar placeholder style */
.product-avatar-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--bg-input);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all var(--transition);
}
.data-table tbody tr:hover .product-avatar-placeholder {
  background: var(--accent-bg);
  color: var(--accent);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:10px 18px;
  border-radius:var(--radius-sm);
  font-size:13px;
  font-weight:700;
  border:none;
  transition:all var(--transition);
  cursor:pointer;
  white-space:nowrap;
}
.btn svg{width:15px;height:15px}
.btn-primary{
  background:linear-gradient(135deg,var(--accent) 0%,#a49dda 100%);
  color:#fff;
  box-shadow:0 4px 14px rgba(135, 127, 193, 0.2);
}
.btn-primary:hover{
  filter:brightness(1.05);
  transform:translateY(-1px);
  box-shadow:0 6px 20px rgba(135, 127, 193, 0.3);
}
.btn-secondary{
  background:#ffffff;
  color:var(--text-secondary);
  border:1px solid rgba(0,0,0,0.03);
  box-shadow:var(--shadow-sm);
}
.btn-secondary:hover{
  background:var(--bg-hover);
  color:var(--text-primary);
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}
.btn-success{background:var(--green-bg);color:var(--green);border:1px solid var(--green-border)}
.btn-success:hover{background:#d1fae5}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid var(--red-border)}
.btn-danger:hover{background:#fee2e2}
.btn-sm{padding:6px 12px;font-size:12px;border-radius:10px}
.btn-sm svg{width:14px;height:14px}
.btn-icon{padding:7px;border-radius:8px}

.btn-black-theme {
  background: #18181b;
  color: #ffffff;
  border: none;
  box-shadow: var(--shadow-sm);
  font-weight: 700;
}
.btn-black-theme:hover {
  background: #27272a;
  transform: translateY(-1px);
}

/* Forms */
.form-group{margin-bottom:16px}
.form-label{display:block;margin-bottom:6px;font-size:12px;font-weight:700;color:var(--text-secondary)}
.form-input,.form-select,.form-textarea{
  width:100%;
  padding:11px 14px;
  background:#ffffff;
  border:1.5px solid #e2e8f0;
  border-radius:var(--radius-sm);
  color:var(--text-primary);
  font-size:13px;
  font-weight:500;
  transition:all var(--transition);
  outline:none;
}
.form-input:focus,.form-select:focus,.form-textarea:focus{
  border-color:var(--accent);
  background:#fff;
  box-shadow:0 0 0 4px var(--accent-glow);
}
.form-input::placeholder{color:var(--text-muted)}
.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%238f96a3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:15px;padding-right:36px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}

/* Modal */
.modal-overlay{display:none;position:fixed;inset:0;z-index:500;background:rgba(18,18,20,0.4);backdrop-filter:blur(8px);align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,0.02);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-modal);
  width:90%;
  max-width:560px;
  max-height:90vh;
  overflow-y:auto;
  animation:modalIn .3s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.94) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--border)}
.modal-title{font-size:16px;font-weight:800;display:flex;align-items:center;gap:8px}
.modal-title svg{width:18px;height:18px;stroke:var(--accent)}
.modal-close{background:var(--bg-input);border:1px solid var(--border);color:var(--text-muted);border-radius:8px;width:30px;height:30px;display:grid;place-items:center;transition:all var(--transition)}
.modal-close svg{width:15px;height:15px}
.modal-close:hover{background:var(--red-bg);color:var(--red);border-color:var(--red-border)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px}

/* Toast */
.toast-container{position:fixed;bottom:24px;right:24px;z-index:999;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:12px 16px;display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-modal);min-width:260px;max-width:380px;animation:toastIn .3s ease;font-size:13px;font-weight:600}
@keyframes toastIn{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:translateX(0)}}
.toast svg{width:18px;height:18px;flex-shrink:0}
.toast.success{border-color:var(--green-border)}
.toast.success svg{stroke:var(--green)}
.toast.error{border-color:var(--red-border)}
.toast.error svg{stroke:var(--red)}

/* Stock controls */
.stock-controls{display:flex;align-items:center;gap:5px}
.stock-btn{width:28px;height:28px;border-radius:7px;border:1.5px solid var(--border);background:var(--bg-input);color:var(--text-primary);font-size:16px;display:grid;place-items:center;transition:all var(--transition);font-weight:700}
.stock-btn:hover{background:var(--accent-bg);border-color:var(--accent);color:var(--accent)}

/* Login Screen */
.login-page{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(ellipse at 30% 40%,rgba(135,127,193,.06) 0%,transparent 60%),radial-gradient(ellipse at 80% 70%,rgba(219,211,245,.04) 0%,transparent 60%),var(--bg-base);
}
.login-card{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,0.02);
  border-radius:var(--radius-xl);
  padding:40px;
  width:100%;
  max-width:420px;
  box-shadow:var(--shadow-modal);
}
.login-logo{text-align:center;margin-bottom:32px}
.login-logo .icon{
  width:60px;
  height:60px;
  background:linear-gradient(135deg,var(--accent) 0%,#DBD3F5 100%);
  border-radius:18px;
  display:grid;
  place-items:center;
  margin:0 auto 14px;
}
.login-logo .icon svg{width:30px;height:30px;stroke:#fff}
.login-logo h1{font-size:24px;font-weight:800;color:var(--text-primary);letter-spacing:-0.5px}
.login-logo p{font-size:13px;color:var(--text-muted);margin-top:4px}
.form-error{background:var(--red-bg);border:1px solid var(--red-border);color:var(--red);border-radius:var(--radius-sm);padding:10px 14px;font-size:13px;margin-bottom:16px;display:flex;align-items:center;gap:8px}
.form-error svg{width:16px;height:16px;stroke:var(--red);flex-shrink:0}

/* Scrollbar */
::-webkit-scrollbar{width:6px;height:6px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--accent-light);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--accent)}

/* Month groups */
.month-group{margin-bottom:24px}
.month-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);padding:0 0 10px;display:flex;align-items:center;gap:8px}
.month-label::after{content:'';flex:1;height:1px;background:var(--border)}

/* Stat pill */
.stat-pill{display:inline-flex;align-items:center;gap:5px;background:var(--bg-input);border:1px solid var(--border);border-radius:20px;padding:4px 10px;font-size:12px;font-weight:600;color:var(--text-secondary)}
.stat-pill svg{width:13px;height:13px}

/* Progress bar */
.progress-bar{height:6px;background:var(--bg-input);border-radius:99px;overflow:hidden;margin-top:8px}
.progress-fill{height:100%;border-radius:99px;transition:width .5s ease}

/* Chart container */
.chart-wrap{
  background:var(--bg-card);
  border:1px solid rgba(0,0,0,0.02);
  border-radius:var(--radius-lg);
  padding:22px;
  box-shadow:var(--shadow-card);
}

/* Activity feed */
.activity-item{display:flex;align-items:flex-start;gap:12px;padding:14px 0;border-bottom:1px solid var(--border)}
.activity-item:last-child{border-bottom:none}
.activity-dot{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex-shrink:0}
.activity-dot svg{width:15px;height:15px}
.activity-text{font-size:13px;color:var(--text-secondary);line-height:1.5}
.activity-text strong{color:var(--text-primary);font-weight:700}
.activity-time{font-size:11px;color:var(--text-muted);margin-top:2px;display:flex;align-items:center;gap:3px}
.activity-time svg{width:11px;height:11px}

/* Empty state */
.empty-state{text-align:center;padding:48px 24px;color:var(--text-muted)}
.empty-state svg{width:48px;height:48px;stroke:var(--border);margin:0 auto 12px}
.empty-state p{font-size:13px}

/* Divider */
.divider{height:1px;background:var(--border);margin:20px 0}

/* Sidebar overlay mobile */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:99;backdrop-filter:blur(4px)}
.sidebar-overlay.open{display:block}

/* Responsive */
@media(max-width:1100px){
  .dashboard-layout {grid-template-columns: 1fr;}
}
@media(max-width:900px){
  .bento-grid{grid-template-columns:repeat(2,1fr)}
  .form-row-3{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .sidebar{
    transform:translateX(-100%);
    width:var(--sidebar-w-open);
    left:0; top:0; bottom:0;
    height:100vh;
    border-radius:0;
    margin:0;
    align-items:flex-start;
    padding:20px;
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-logo{flex-direction:row; gap:12px; align-items:center; border-bottom:1px solid rgba(255,255,255,0.08); padding-bottom:18px;}
  .logo-info{display:block; text-align:left}
  .logo-text{font-size:16px; font-weight:800; color:#fff}
  .logo-tagline{font-size:10px; color:#8a92a6; margin-top:2px}
  .sidebar-nav{align-items:flex-start; margin-top:24px;}
  .sidebar-nav .nav-section{display:block; font-size:10px; font-weight:700; color:rgba(255,255,255,0.25); text-transform:uppercase; letter-spacing:1px; padding:10px 0 5px 12px;}
  .sidebar-nav .nav-item{
    width:100%;
    height:auto;
    padding:10px 14px;
    justify-content:flex-start;
    gap:12px;
  }
  .sidebar-nav .nav-item .nav-text{display:inline}
  .sidebar-nav .nav-item.active{
    background:rgba(255,255,255,0.1);
    color:#fff;
  }
  .sidebar-nav .nav-item.active svg{stroke:#fff}
  .sidebar-footer{flex-direction:row; justify-content:space-between; align-items:center; border-top:1px solid rgba(255,255,255,0.08); padding-top:16px;}
  .sidebar-footer-utils{flex-direction:row; gap:12px; width:auto}
  
  .main-content{margin-left:0; padding:20px;}
  .hamburger{display:block}
  .bento-grid{grid-template-columns:1fr}
  .form-row,.form-row-3{grid-template-columns:1fr}
  .topbar{padding:0}
}

/* Notification Dropdown */
.notification-dropdown {
  position: absolute;
  top: 55px;
  right: 50px;
  width: 320px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  display: none;
  flex-direction: column;
  z-index: 500;
  overflow: hidden;
  animation: dropdownIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes dropdownIn {
  from { opacity: 0; transform: translateY(10px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.notification-dropdown.open {
  display: flex;
}
.notification-dropdown .dropdown-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  font-size: 13px;
  background: var(--bg-hover);
}
.notification-dropdown .clear-notifications {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.notification-dropdown .clear-notifications:hover {
  text-decoration: underline;
}
.notification-dropdown .dropdown-body {
  max-height: 280px;
  overflow-y: auto;
}
.notification-dropdown .notification-item {
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 10px;
  font-size: 12px;
  cursor: pointer;
  transition: background var(--transition);
}
.notification-dropdown .notification-item:hover {
  background: var(--bg-hover);
}
.notification-dropdown .notification-item:last-child {
  border-bottom: none;
}
.notification-dropdown .notification-item.unread {
  background: var(--accent-bg);
}
.notification-dropdown .notification-item-icon {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.notification-dropdown .notification-item-icon.warning {
  background: var(--red-bg);
  color: var(--red);
}
.notification-dropdown .notification-item-icon.info {
  background: var(--accent-bg);
  color: var(--accent);
}
.notification-dropdown .notification-item-text {
  flex: 1;
  color: var(--text-primary);
  line-height: 1.4;
}
.notification-dropdown .notification-item-time {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 3px;
}

/* Spotlight Search Modal */
.search-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(17, 18, 20, 0.4);
  backdrop-filter: blur(4px);
  z-index: 1000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 80px;
}
.search-overlay.open {
  display: flex;
}
.search-modal {
  background: var(--bg-card);
  width: 100%;
  max-width: 580px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: searchIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes searchIn {
  from { opacity: 0; transform: scale(0.97) translateY(-10px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.search-modal-header {
  display: flex;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border);
  gap: 12px;
}
.search-modal-input {
  flex: 1;
  border: none;
  outline: none;
  background: none;
  font-size: 15px;
  color: var(--text-primary);
  font-family: inherit;
  font-weight: 500;
}
.search-modal-close {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 8px;
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  transition: all var(--transition);
  cursor: pointer;
}
.search-modal-close:hover {
  background: var(--red-bg);
  color: var(--red);
}
.search-modal-body {
  max-height: 320px;
  overflow-y: auto;
  padding: 12px;
}
.search-empty {
  padding: 30px;
  text-align: center;
  color: var(--text-muted);
  font-size: 13px;
}
.search-result-item {
  padding: 10px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: all var(--transition);
  margin-bottom: 4px;
}
.search-result-item:hover, .search-result-item.active {
  background: var(--accent-bg);
}
.search-result-item .item-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--text-primary);
}
.search-result-item:hover .item-title, .search-result-item.active .item-title {
  color: var(--accent);
}
.search-result-item .item-meta {
  font-size: 11px;
  color: var(--text-muted);
}
.search-modal-footer {
  padding: 10px 20px;
  background: var(--bg-hover);
  border-top: 1px solid var(--border);
  display: flex;
  gap: 16px;
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 600;
}
.search-modal-footer kbd {
  background: var(--bg-card);
  border: 1px solid var(--border);
  padding: 2px 5px;
  border-radius: 4px;
  margin-right: 2px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}