/* ===== Reset & Variables ===== */
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --primary:#2563eb;--primary-dark:#1d4ed8;--primary-light:#dbeafe;--primary-bg:#eff6ff;
  --success:#059669;--success-light:#dcfce7;--warning:#d97706;--warning-light:#fef3c7;
  --danger:#dc2626;--danger-light:#fee2e2;--purple:#7c3aed;--purple-light:#ede9fe;
  --sidebar:#0f172a;--sidebar-hover:#1e293b;--sidebar-active:#1e3a5f;
  --bg:#f1f5f9;--card:#fff;--border:#e2e8f0;--border-light:#f1f5f9;
  --text:#0f172a;--text-muted:#64748b;--text-light:#94a3b8;
  --shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.06);
  --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -2px rgba(0,0,0,0.1);
  --shadow-lg:0 10px 15px -3px rgba(0,0,0,0.1),0 4px 6px -4px rgba(0,0,0,0.1);
  --radius:12px;--radius-sm:8px;--radius-xs:6px;
  --sidebar-w:230px;
}
html,body{height:100%;font-family:-apple-system,'Noto Sans JP',BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;}

/* ===== Layout ===== */
body{display:flex;overflow:hidden;}
.sidebar{width:var(--sidebar-w);background:var(--sidebar);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;transition:transform 0.25s,width 0.22s ease;z-index:50;overflow-x:hidden;}
/* ===== Sidebar Collapse ===== */
.sidebar.collapsed{width:56px;}
.sidebar.collapsed .sidebar-header-info{display:none;}
.sidebar.collapsed .sidebar-collapse-wrap{justify-content:center;padding:6px 0;}
.sidebar.collapsed .nav-section-label{font-size:0;padding-top:4px;padding-bottom:4px;}
.sidebar.collapsed .nav-item>span:last-child{display:none;}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px 0;gap:0;}
.sidebar.collapsed .sidebar-user-info,.sidebar.collapsed .sidebar-user-gear{display:none;}
.sidebar.collapsed .sidebar-user-btn{justify-content:center;padding:10px 0;}
.sidebar-header-info{display:flex;flex-direction:column;gap:10px;}
.sidebar-collapse-wrap{display:flex;justify-content:flex-end;padding:8px 12px;border-top:1px solid rgba(255,255,255,0.07);}
.sidebar.collapsed .sidebar-collapse-wrap{justify-content:center;padding:8px 0;}
.sidebar-collapse-btn{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.13);color:rgba(255,255,255,0.5);width:30px;height:30px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background 0.18s,color 0.18s,border-color 0.18s;}
.sidebar-collapse-btn:hover{background:rgba(255,255,255,0.15);color:#fff;border-color:rgba(255,255,255,0.25);}
.sidebar-collapse-btn svg{transition:transform 0.22s ease;}
.sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);}
.main-wrap{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.content{flex:1;overflow-y:auto;padding:24px;}

/* ===== Sidebar ===== */
.sidebar-header{padding:16px 14px 14px;border-bottom:1px solid rgba(255,255,255,0.07);}
.brand-logo{background:#fff;border-radius:6px;padding:8px 10px 6px;}
.brand-name{color:#0d1a8c;font-size:20px;font-weight:900;letter-spacing:0.01em;line-height:1.1;font-family:'Hiragino Sans','Yu Gothic',sans-serif;}
.brand-bar{background:#0d1a8c;color:#fff;font-size:7px;font-weight:700;letter-spacing:0.18em;padding:3px 4px 2px;margin-top:3px;text-align:center;}
.brand-store{display:flex;align-items:baseline;gap:6px;}
.brand-store-name{color:#fff;font-size:15px;font-weight:800;letter-spacing:0.05em;}
.brand-store-sub{color:#94a3b8;font-size:10px;font-weight:500;}
.sidebar-nav{padding:12px 0;flex:1;}
.nav-section-label{padding:10px 16px 4px;color:#475569;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.1em;}
.nav-item{display:flex;align-items:center;gap:10px;padding:9px 16px;color:#94a3b8;cursor:pointer;transition:all 0.15s;font-size:13px;font-weight:500;border-left:3px solid transparent;text-decoration:none;user-select:none;}
.nav-item:hover{background:var(--sidebar-hover);color:#e2e8f0;}
.nav-item.active{background:var(--sidebar-active);color:#fff;border-left-color:var(--primary);}
.nav-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:0.75;}
.nav-icon svg{width:17px;height:17px;}
.nav-item:hover .nav-icon,.nav-item.active .nav-icon{opacity:1;}

/* ===== Sidebar Footer (User Info) ===== */
.sidebar-footer{border-top:1px solid rgba(255,255,255,0.08);padding:10px 10px;flex-shrink:0;}
.sidebar-user-btn{width:100%;display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:8px;background:none;border:none;cursor:pointer;color:#94a3b8;transition:all 0.15s;text-align:left;}
.sidebar-user-btn:hover{background:rgba(255,255,255,0.07);color:#e2e8f0;}
.sidebar-user-avatar{width:32px;height:32px;border-radius:50%;background:#1e3a5f;color:#93c5fd;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.12);}
.sidebar-user-info{flex:1;min-width:0;}
.sidebar-user-name{font-size:12px;font-weight:700;color:#e2e8f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sidebar-user-role{font-size:10px;color:#64748b;margin-top:1px;}
.sidebar-user-gear{opacity:0.45;flex-shrink:0;display:flex;align-items:center;}
.sidebar-user-btn:hover .sidebar-user-gear{opacity:0.8;}

/* ===== Topbar ===== */
.topbar{background:var(--card);border-bottom:1px solid var(--border);padding:0 24px;height:58px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;box-shadow:var(--shadow);}
.topbar-left{display:flex;align-items:center;gap:12px;}
.sidebar-toggle{background:none;border:none;cursor:pointer;color:var(--text-muted);padding:6px;border-radius:var(--radius-xs);display:flex;align-items:center;}
.sidebar-toggle:hover{background:var(--bg);color:var(--text);}
.page-title{font-size:18px;font-weight:800;color:var(--text);}
.topbar-right{display:flex;align-items:center;gap:12px;}
.today-badge{background:var(--primary-bg);color:var(--primary);padding:5px 12px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid var(--primary-light);}

/* ===== Cards ===== */
.card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border);}
.card+.card{margin-top:16px;}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;}
.card-title{font-size:15px;font-weight:700;}

/* ===== KPI Grid ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.kpi-card{background:var(--card);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);border:1px solid var(--border);position:relative;overflow:hidden;}
.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--radius) var(--radius) 0 0;}
.kpi-card.blue::before{background:var(--primary);}
.kpi-card.green::before{background:var(--success);}
.kpi-card.purple::before{background:var(--purple);}
.kpi-card.orange::before{background:var(--warning);}
.kpi-icon{margin-bottom:10px;display:flex;align-items:center;}
.kpi-label{font-size:12px;color:var(--text-muted);font-weight:600;margin-bottom:6px;}
.kpi-value{font-size:30px;font-weight:800;line-height:1;color:var(--text);}
.kpi-value small{font-size:15px;font-weight:500;color:var(--text-muted);}
.kpi-sub{font-size:11px;color:var(--text-muted);margin-top:8px;}
.kpi-diff{display:inline-flex;align-items:center;gap:2px;font-size:11px;font-weight:700;padding:2px 6px;border-radius:999px;margin-left:6px;}
.kpi-diff.up{background:var(--success-light);color:var(--success);}
.kpi-diff.down{background:var(--danger-light);color:var(--danger);}

/* ===== Charts Grid ===== */
.chart-grid{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px;}
.chart-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px;}
.chart-canvas-wrap{position:relative;height:220px;}

/* ===== Tables ===== */
.table-wrap{overflow-x:auto;margin:-4px;}
.table-compact th{padding:6px 7px;font-size:10px;}
.table-compact td{padding:6px 7px;font-size:12px;}
.table-compact td.nowrap,.table-compact th.nowrap{white-space:nowrap;}
.cust-paging{display:flex;align-items:center;justify-content:space-between;padding:10px 0;}
.cust-paging-info{font-size:13px;color:var(--text-muted);}
.cust-paging-controls{display:flex;align-items:center;gap:8px;}
.cust-page-size{padding:5px 8px;border:1px solid var(--border);border-radius:6px;font-size:13px;background:#fff;cursor:pointer;}
.cust-page-btn{padding:4px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;cursor:pointer;font-size:16px;color:var(--text-muted);}
.cust-page-btn:hover:not(:disabled){background:var(--primary);color:#fff;border-color:var(--primary);}
.cust-page-btn:disabled{opacity:0.3;cursor:not-allowed;}
.cust-page-num{font-size:13px;font-weight:600;color:var(--text);}
.table-inner{padding:4px;}
table{width:100%;border-collapse:collapse;min-width:400px;}
thead tr{border-bottom:2px solid var(--border);}
th{padding:10px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--text-muted);white-space:nowrap;background:#fafafa;text-transform:uppercase;letter-spacing:0.05em;}
th:first-child{border-radius:var(--radius-xs) 0 0 var(--radius-xs);}
th:last-child{border-radius:0 var(--radius-xs) var(--radius-xs) 0;}
td{padding:11px 12px;font-size:13px;border-bottom:1px solid var(--border-light);vertical-align:middle;}
tr:last-child td{border-bottom:none;}
tbody tr{transition:background 0.1s;}
tbody tr:nth-child(even) td{background:#f8fafc;}
tbody tr:hover td{background:#eef2f7;}
.td-actions{display:flex;gap:6px;justify-content:flex-end;}

/* ===== Badges/Tags ===== */
.tag{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap;}
.tag-blue{background:var(--primary-light);color:var(--primary);}
.tag-green{background:var(--success-light);color:var(--success);}
.tag-orange{background:var(--warning-light);color:var(--warning);}
.tag-red{background:var(--danger-light);color:var(--danger);}
.tag-purple{background:var(--purple-light);color:var(--purple);}
.tag-gray{background:#f1f5f9;color:#475569;}
.tag-pink{background:#fce7f3;color:#be185d;}

/* ===== Buttons ===== */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 18px;border:none;border-radius:var(--radius-sm);cursor:pointer;font-size:13px;font-weight:700;font-family:inherit;transition:all 0.15s;white-space:nowrap;}
.btn:active{transform:scale(0.98);}
.btn-primary{background:var(--primary);color:#fff;} .btn-primary:hover{background:var(--primary-dark);}
.btn-success{background:var(--success);color:#fff;}
.btn-danger{background:var(--danger);color:#fff;}
.btn-warning{background:var(--warning);color:#fff;}
.btn-outline{background:var(--card);color:var(--text);border:1.5px solid var(--border);} .btn-outline:hover{background:var(--bg);}
.btn-ghost{background:transparent;color:var(--text-muted);} .btn-ghost:hover{background:var(--bg);color:var(--text);}
.btn-sm{padding:5px 12px;font-size:12px;}
.btn-xs{padding:3px 8px;font-size:11px;border-radius:var(--radius-xs);}
.btn-icon{padding:7px;} .btn-icon.btn-sm{padding:5px;}

/* ===== Forms ===== */
.form-group{margin-bottom:14px;}
.form-group label{display:block;font-size:12px;font-weight:700;color:var(--text-muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:0.05em;}
.form-control{width:100%;padding:9px 12px;border:1.5px solid var(--border);border-radius:var(--radius-sm);font-size:14px;font-family:inherit;color:var(--text);background:var(--card);transition:border-color 0.15s,box-shadow 0.15s;}
.form-control:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,0.12);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
textarea.form-control{resize:vertical;}
.search-wrap{position:relative;margin-bottom:16px;}
.search-wrap input{padding-left:36px;}
.search-wrap::before{content:'🔍';position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:14px;pointer-events:none;}

/* ===== Modals ===== */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:90;backdrop-filter:blur(2px);}
.overlay.open{display:block;}
.modal{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-55%);background:var(--card);border-radius:16px;width:560px;max-width:95vw;max-height:90vh;overflow-y:auto;z-index:100;box-shadow:var(--shadow-lg),0 0 0 1px rgba(0,0,0,0.05);transition:transform 0.2s;}
.modal.modal-sm{width:420px;}
.modal.open{display:block;transform:translate(-50%,-50%);}
.modal-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px 0;}
.modal-header h2{font-size:17px;font-weight:800;}
.modal-header button{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-muted);padding:4px;border-radius:50%;transition:background 0.15s;width:28px;height:28px;display:flex;align-items:center;justify-content:center;}
.modal-header button:hover{background:var(--bg);}
.modal-body{padding:20px 24px;}
.modal-footer{padding:0 24px 20px;display:flex;gap:10px;justify-content:flex-end;}
.sales-calc-section{background:linear-gradient(135deg,rgba(37,99,235,0.06),rgba(124,58,237,0.06));border:1.5px solid rgba(37,99,235,0.18);border-radius:var(--radius);padding:14px 16px;margin-top:4px;}
.sales-calc-title{font-size:12px;font-weight:800;color:var(--primary);margin-bottom:12px;letter-spacing:0.05em;}
.input-prefix-wrap{position:relative;display:flex;align-items:center;}
.input-prefix{position:absolute;left:10px;font-size:13px;font-weight:700;color:var(--text-muted);pointer-events:none;z-index:1;}
.input-prefix-wrap .form-control{padding-left:22px;}
/* ===== Autocomplete ===== */
.autocomplete-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--card);border:1.5px solid var(--primary);border-radius:var(--radius-sm);box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:1000;max-height:280px;overflow-y:auto;}
.autocomplete-item{padding:10px 14px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border);transition:background 0.1s;}
.autocomplete-item:last-of-type{border-bottom:none;}
.autocomplete-item:hover{background:rgba(37,99,235,0.06);}
.autocomplete-name{font-size:14px;font-weight:600;color:var(--text);}
.autocomplete-meta{font-size:11px;color:var(--text-muted);text-align:right;}
.autocomplete-no-match{padding:12px 14px;color:var(--text-muted);font-size:13px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
.autocomplete-footer{padding:8px 14px;border-top:1px solid var(--border);background:var(--bg);}
.customer-linked{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--success);font-weight:600;margin-top:4px;}
/* ===== Visit Filters ===== */
.visit-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.filter-trigger-wrap{position:relative;}
.filter-trigger{display:flex;align-items:center;gap:5px;padding:7px 12px;border:1.5px solid var(--border);border-radius:20px;background:var(--card);font-size:13px;font-weight:600;cursor:pointer;color:var(--text);transition:all 0.15s;white-space:nowrap;}
.filter-trigger:hover{border-color:var(--primary);color:var(--primary);}
.filter-trigger.active,.filter-trigger.panel-open{border-color:var(--primary);background:rgba(37,99,235,0.08);color:var(--primary);}
.filter-trigger .badge{background:var(--primary);color:#fff;border-radius:10px;padding:0 6px;font-size:10px;font-weight:700;min-width:16px;text-align:center;}
.filter-panel{position:absolute;top:calc(100% + 6px);left:0;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 24px rgba(0,0,0,0.12);z-index:500;min-width:220px;padding:12px;}
.filter-panel.fp-right{left:auto;right:0;}
.fp-checks{display:flex;flex-direction:column;gap:6px;margin-top:8px;max-height:200px;overflow-y:auto;}
.fp-check{display:flex;align-items:center;gap:8px;padding:5px 8px;border-radius:6px;cursor:pointer;font-size:13px;user-select:none;transition:background 0.1s;}
.fp-check:hover{background:var(--bg);}
.fp-check input{accent-color:var(--primary);width:14px;height:14px;cursor:pointer;flex-shrink:0;}
.fp-divider{border:none;border-top:1px solid var(--border);margin:8px 0;}
.date-presets{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px;}
.date-preset-btn{padding:5px 12px;border:1.5px solid #e2e8f0;border-radius:20px;background:#fff;font-size:12px;font-weight:500;color:#374151;cursor:pointer;transition:all 0.15s;box-shadow:0 1px 3px rgba(0,0,0,0.07);}
.date-preset-btn:hover{border-color:var(--primary);background:#eff6ff;color:var(--primary);}
.date-preset-btn.on{border-color:var(--primary);background:var(--primary);color:#fff;font-weight:600;}
.date-range-pill{display:inline-flex;align-items:center;background:#fff;border:1.5px solid #e2e8f0;border-radius:10px;box-shadow:0 1px 3px rgba(0,0,0,0.07);}
.date-pill-input{border:none;outline:none;background:transparent;font-size:13px;color:#374151;padding:7px 10px;font-family:inherit;width:108px;cursor:pointer;caret-color:#2563eb;}
.date-pill-input:focus{color:#2563eb;cursor:text;}
.date-pill-input::placeholder{color:#94a3b8;}
.date-range-pill .sep{color:#94a3b8;font-size:12px;padding:0 2px;flex-shrink:0;user-select:none;}
/* Custom calendar panel */
.cal-day{display:flex;align-items:center;justify-content:center;height:34px;border-radius:8px;font-size:13px;color:#374151;cursor:pointer;transition:background 0.1s;}
.cal-day:not(.sel):not(.disabled):hover{background:#eff6ff;color:#2563eb;}
.cal-day.today{border:2px solid #2563eb;color:#2563eb;font-weight:700;}
.cal-day.today:not(.sel):hover{background:#eff6ff;}
.cal-day.sel{background:#2563eb;color:#fff;font-weight:600;}
.cal-day.sun:not(.sel){color:#dc2626;}
.cal-day.sat:not(.sel){color:#2563eb;}
.cal-day.other{color:#cbd5e1;}
.cal-day.disabled{color:#e2e8f0;cursor:default;}
.date-range-row{display:flex;align-items:center;gap:6px;margin-top:8px;}
.date-range-row input{flex:1;font-size:12px;padding:5px 8px;}

/* ===== Loading ===== */
.loading-wrap{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;color:var(--text-muted);}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 0.7s linear infinite;margin-bottom:12px;}
@keyframes spin{to{transform:rotate(360deg);}}

/* ===== Toast ===== */
.toast{position:fixed;bottom:28px;right:28px;background:#0f172a;color:#fff;padding:13px 20px;border-radius:12px;font-size:14px;font-weight:600;z-index:999;opacity:0;transform:translateY(10px);transition:all 0.3s;pointer-events:none;max-width:340px;box-shadow:var(--shadow-lg);}
.toast.show{opacity:1;transform:translateY(0);}

/* ===== Misc ===== */
.text-right{text-align:right;}
.text-center{text-align:center;}
.font-bold{font-weight:700;}
.text-muted{color:var(--text-muted);}
.text-money{color:var(--success);font-weight:700;}
.text-primary{color:var(--primary);font-weight:700;}
.text-danger{color:var(--danger);}
code.id{font-family:'SF Mono',monospace;font-size:11px;background:#f1f5f9;padding:2px 6px;border-radius:4px;color:#475569;}
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}
.empty-state .empty-icon{font-size:48px;margin-bottom:12px;}
.empty-state p{font-size:14px;}

/* ===== Route Bar ===== */
.route-list{display:flex;flex-direction:column;gap:8px;}
.route-row{display:flex;align-items:center;gap:10px;}
.route-name{width:130px;font-size:12px;color:var(--text-muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.route-bar-bg{flex:1;background:#f1f5f9;border-radius:999px;height:8px;overflow:hidden;}
.route-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),#60a5fa);border-radius:999px;transition:width 0.6s ease;}
.route-count{width:28px;font-size:12px;font-weight:700;text-align:right;color:var(--text);}

/* ===== Staff Table in Monthly ===== */
.monthly-header-row th{text-align:center;}
.stat-month-header{background:var(--primary-bg)!important;color:var(--primary)!important;}
.stat-prev-header{background:#f8fafc!important;color:var(--text-muted)!important;}
.total-row td{font-weight:800;background:#fafafa;}

/* ===== Sidebar Overlay ===== */
.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:49;}
.sidebar-overlay.show{display:block;}

/* ===== Responsive ===== */
@media(max-width:1280px){.kpi-grid{grid-template-columns:repeat(2,1fr);}.chart-grid{grid-template-columns:1fr;}.chart-grid-3{grid-template-columns:1fr 1fr;}}
@media(max-width:768px){
  .sidebar{position:fixed;top:0;left:0;bottom:0;height:100vh;transform:translateX(-100%);transition:transform 0.25s;z-index:50;}
  .sidebar.open{transform:translateX(0);}
  .kpi-grid,.chart-grid,.chart-grid-3{grid-template-columns:1fr;}
  .chart-grid-3{grid-template-columns:1fr 1fr;}
  .form-row{grid-template-columns:1fr;}
  .content{padding:14px;}
  .topbar{padding:0 12px;}
  .today-badge{display:none;}
  .table-wrap{overflow-x:auto;}
  table{min-width:500px;}
  .page-title{font-size:15px;}
  .topbar-right .btn{font-size:11px;padding:5px 8px;}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr;}
  .chart-grid-3{grid-template-columns:1fr;}
  .topbar-right{gap:6px;}
}

/* ===== Ranking filter dropdown ===== */
@keyframes dropSlideIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
.ranking-drop-anim{animation:dropSlideIn 0.15s ease;}
.ranking-drop-item:hover{background:#eff6ff!important;}
.ranking-drop-footer-btn:hover{background:#e2e8f0!important;}