/* Core design system utilities and components */
@import 'vars.css';

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:var(--bg);color:var(--text);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
img{max-width:100%;height:auto;display:block}

/* Container */
.container{width:100%;max-width:1200px;margin:0 auto;padding:0 var(--space-4)}

/* Grid */
.row{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--space-4)}
.col-12{grid-column: span 12}
.col-8{grid-column: span 8}
.col-6{grid-column: span 6}
.col-4{grid-column: span 4}
.col-3{grid-column: span 3}

@media (max-width: 768px){
  .row{grid-template-columns:repeat(6,1fr)}
  .col-8,.col-6,.col-4,.col-3{grid-column: span 6}
}

/* Cards */
.card{background:var(--card-bg);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);padding:var(--space-4);border:1px solid rgba(0,0,0,0.04);color:var(--text);transition:background .3s,border .3s}
.theme-dark .card{border:1px solid rgba(255,255,255,0.05)}
.card-ghost{background:transparent;border:1px solid rgba(0,0,0,0.04);transition:border .3s}
.theme-dark .card-ghost{border:1px solid rgba(255,255,255,0.05)}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-3)}
.card-title{font-weight:600;font-size:var(--type-md);color:var(--text)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:8px;border:0;background:var(--surface);color:var(--text);cursor:pointer;font-weight:600;transition:background .2s}
.btn:hover{opacity:0.9}
.btn:disabled{opacity:0.5;cursor:not-allowed}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-600)}
.btn-ghost{background:transparent;border:1px solid rgba(0,0,0,0.08);color:var(--text)}
.theme-dark .btn-ghost{border:1px solid rgba(255,255,255,0.08)}
.btn-ghost:hover{background:var(--surface)}

/* Topbar adjustments: theme-aware */
.topbar{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-3) var(--space-4);background:var(--card-bg);border-bottom:1px solid rgba(0,0,0,0.06);color:var(--text)}
.theme-dark .topbar{border-bottom:1px solid rgba(255,255,255,0.05)}
.topbar .topbar-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
.topbar .flag{width:36px;height:auto}

/* Sidebar */
.sidebar{width:260px;background:var(--card-bg);height:100vh;padding:var(--space-4);position:sticky;top:0;border-right:1px solid rgba(0,0,0,0.06);color:var(--text)}
.theme-dark .sidebar{border-right:1px solid rgba(255,255,255,0.05)}
.sidebar .nav-link{display:flex;align-items:center;gap:12px;padding:10px;border-radius:8px;color:var(--muted);text-decoration:none;transition:background .2s}
.sidebar .nav-link:hover{background:var(--surface)}
.sidebar .nav-link.active{background:linear-gradient(90deg,var(--primary-600),var(--primary));color:#fff}

/* Responsive drawer */
.drawer{position:fixed;left:0;top:0;bottom:0;width:320px;transform:translateX(-100%);transition:transform .28s cubic-bezier(.2,.9,.2,1);z-index:60;background:var(--card-bg);color:var(--text)}
.drawer.open{transform:translateX(0)}
.drawer-backdrop{position:fixed;inset:0;background:rgba(2,6,23,0.45);z-index:50;opacity:0;transition:opacity .2s;visibility:hidden}
.drawer-backdrop.visible{opacity:1;visibility:visible}

/* Table basics */
.table{width:100%;border-collapse:collapse;color:var(--text)}
.table th,.table td{padding:10px 12px;text-align:left;border-bottom:1px solid rgba(0,0,0,0.06)}
.theme-dark .table th,.theme-dark .table td{border-bottom:1px solid rgba(255,255,255,0.05)}
.table thead th{position:sticky;top:0;background:var(--card-bg);z-index:2;font-weight:600}
.table tbody tr:hover{background:var(--surface)}

/* Utilities */
.flex{display:flex}
.center{display:flex;align-items:center;justify-content:center}
.muted{color:var(--muted)}
.hidden{display:none}

/* Toast and alerts */
.toast{position:fixed;bottom:24px;right:24px;background:var(--primary);color:#fff;padding:12px 16px;border-radius:8px;box-shadow:var(--shadow-lg);z-index:100;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.visible{opacity:1;pointer-events:auto}
.theme-dark .toast{background:var(--primary)}

/* Small helpers */
.kpi{display:flex;flex-direction:column;gap:8px;padding:var(--space-4);border-radius:var(--radius-md);background:linear-gradient(180deg,rgba(255,255,255,0.6),transparent)}
.kpi .value{font-size:var(--type-2xl);font-weight:700;color:var(--text)}
.kpi .label{color:var(--muted);font-size:var(--type-sm)}
.theme-dark .kpi{background:linear-gradient(180deg,rgba(230,238,246,0.1),transparent)}