/* ===== NautiLoc — Design Premium ===== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
    --navy:      #1B2A4A;
    --navy-dark: #0f1c33;
    --blue:      #2E86AB;
    --blue-light:#3aa0c8;
    --cyan:      #17C3B2;
    --bg:        #F0F4F8;
    --surface:   #FFFFFF;
    --border:    #E2E8F0;
    --text:      #1E293B;
    --muted:     #64748B;
    --success:   #10B981;
    --warning:   #F59E0B;
    --danger:    #EF4444;
    --sidebar-w: 240px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; }

/* ── Sidebar ── */
.sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--navy-dark) 0%, var(--navy) 100%);
    border-right: 1px solid rgba(255,255,255,0.06);
    box-shadow: 4px 0 24px rgba(0,0,0,0.25);
}
.sidebar-logo { padding: 20px 20px 16px; border-bottom: 1px solid rgba(255,255,255,0.08); }
.sidebar-logo .logo-icon { width:36px; height:36px; background:linear-gradient(135deg,var(--blue),var(--cyan)); border-radius:10px; display:flex;align-items:center;justify-content:center; }
.sidebar-logo .brand { font-size:1.1rem; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.sidebar-logo .sub   { font-size:0.68rem; color:rgba(255,255,255,0.4); margin-top:1px; }

.nav-item { display:flex; align-items:center; gap:10px; padding:9px 16px; margin:2px 8px; border-radius:10px; font-size:0.82rem; font-weight:500; color:rgba(255,255,255,0.55); text-decoration:none; transition:all 0.18s; border:1px solid transparent; }
.nav-item:hover  { background:rgba(255,255,255,0.07); color:#fff; }
.nav-item.active { background:linear-gradient(135deg,rgba(46,134,171,0.35),rgba(23,195,178,0.2)); color:#fff; border-color:rgba(46,134,171,0.4); }
.nav-icon { width:32px; height:32px; display:flex;align-items:center;justify-content:center; border-radius:8px; flex-shrink:0; }
.nav-item.active .nav-icon { background:linear-gradient(135deg,var(--blue),var(--cyan)); }
.nav-badge { margin-left:auto; background:var(--danger); color:#fff; font-size:0.65rem; font-weight:700; padding:1px 6px; border-radius:99px; }
.nav-section { font-size:0.63rem; font-weight:700; text-transform:uppercase; letter-spacing:0.1em; color:rgba(255,255,255,0.25); padding:16px 24px 6px; }
.sidebar-footer { padding:14px 16px; border-top:1px solid rgba(255,255,255,0.08); }
.logout-btn { display:flex;align-items:center;gap:8px; padding:8px 12px; border-radius:8px; font-size:0.78rem; color:rgba(255,255,255,0.45); text-decoration:none; transition:all 0.18s; width:100%; }
.logout-btn:hover { background:rgba(239,68,68,0.15); color:#fca5a5; }

/* ── Topbar ── */
.topbar { background:var(--surface); border-bottom:1px solid var(--border); padding:0 28px; height:56px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:30; }
.topbar-title { font-size:1rem; font-weight:700; color:var(--navy); }
.topbar-sub   { font-size:0.75rem; color:var(--muted); margin-top:1px; }
.topbar-user  { display:flex;align-items:center;gap:10px; }
.avatar { width:34px;height:34px;background:linear-gradient(135deg,var(--blue),var(--cyan));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:0.8rem;font-weight:700;color:#fff; }

/* ── Layout ── */
.admin-layout { display:flex; min-height:100vh; }
.admin-content { flex:1; min-width:0; }
.page-body { padding:24px 28px; }

/* ── KPI Cards ── */
.kpi-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:16px; margin-bottom:24px; }
.kpi-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; position:relative; overflow:hidden; transition:box-shadow 0.2s,transform 0.2s; }
.kpi-card:hover { box-shadow:0 8px 24px rgba(0,0,0,0.08); transform:translateY(-2px); }
.kpi-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:14px 14px 0 0; }
.kpi-label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; color:var(--muted); margin-bottom:8px; }
.kpi-value { font-size:1.8rem; font-weight:800; color:var(--navy); line-height:1; }
.kpi-sub   { font-size:0.72rem; color:var(--muted); margin-top:6px; }
.kpi-icon  { position:absolute; right:16px; top:16px; width:36px;height:36px;background:var(--bg);border-radius:10px;display:flex;align-items:center;justify-content:center; }

/* ── Tables ── */
.table-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.table-header { padding:16px 20px; border-bottom:1px solid var(--border); display:flex;align-items:center;justify-content:space-between; }
.table-header h2 { font-size:0.9rem; font-weight:700; color:var(--navy); }
.table-wrap { overflow-x:auto; }
table.data-table { width:100%; border-collapse:collapse; font-size:0.82rem; }
table.data-table thead tr { background:linear-gradient(135deg,var(--navy),#263d6e); }
table.data-table thead th { padding:11px 16px; text-align:left; font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:rgba(255,255,255,0.8); white-space:nowrap; }
table.data-table thead th a { color:rgba(255,255,255,0.8); text-decoration:none; display:inline-flex;align-items:center;gap:4px; }
table.data-table thead th a:hover { color:#fff; }
table.data-table thead th.sorted-asc  a::after { content:'▲'; font-size:0.6em; color:var(--cyan); }
table.data-table thead th.sorted-desc a::after { content:'▼'; font-size:0.6em; color:var(--cyan); }
table.data-table thead th:not(.sorted-asc):not(.sorted-desc) a::after { content:'⇅'; font-size:0.6em; color:rgba(255,255,255,0.3); }
table.data-table tbody tr { border-bottom:1px solid var(--border); transition:background 0.12s; }
table.data-table tbody tr:last-child { border-bottom:none; }
table.data-table tbody tr:hover { background:#f8fafc; }
table.data-table tbody td { padding:12px 16px; color:var(--text); vertical-align:middle; }
.td-muted { color:var(--muted) !important; font-size:0.78rem; }
.td-mono  { font-family:monospace; font-size:0.78rem; color:var(--muted); }

/* ── Badges ── */
.badge { display:inline-flex;align-items:center; padding:3px 10px; border-radius:99px; font-size:0.7rem; font-weight:600; }
.badge-green  { background:#d1fae5; color:#065f46; }
.badge-yellow { background:#fef3c7; color:#92400e; }
.badge-red    { background:#fee2e2; color:#991b1b; }
.badge-gray   { background:#f1f5f9; color:#475569; }
.badge-blue   { background:#dbeafe; color:#1e40af; }
.badge-orange { background:#ffedd5; color:#9a3412; }

/* ── Filtres ── */
.filter-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 20px; margin-bottom:20px; }
.filter-grid { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
.filter-group { display:flex;flex-direction:column;gap:4px; }
.filter-group label { font-size:0.68rem; font-weight:700; text-transform:uppercase; letter-spacing:0.07em; color:var(--muted); }
.filter-group input,
.filter-group select { padding:8px 12px; border:1px solid var(--border); border-radius:8px; font-size:0.82rem; background:var(--bg); color:var(--text); font-family:inherit; transition:border-color 0.15s,box-shadow 0.15s; }
.filter-group input:focus,
.filter-group select:focus { outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(46,134,171,0.12); }

/* ── Boutons ── */
.btn { display:inline-flex;align-items:center;gap:6px; padding:8px 16px; border-radius:8px; font-size:0.8rem; font-weight:600; text-decoration:none; border:none; cursor:pointer; transition:all 0.15s; font-family:inherit; }
.btn-primary   { background:linear-gradient(135deg,var(--blue),var(--blue-light)); color:#fff; box-shadow:0 2px 8px rgba(46,134,171,0.3); }
.btn-primary:hover { box-shadow:0 4px 16px rgba(46,134,171,0.4); transform:translateY(-1px); }
.btn-navy      { background:var(--navy); color:#fff; }
.btn-navy:hover{ background:var(--navy-dark); }
.btn-ghost     { background:var(--bg); color:var(--navy); border:1px solid var(--border); }
.btn-ghost:hover { background:var(--border); }
.btn-danger    { background:#fee2e2; color:var(--danger); }
.btn-danger:hover { background:var(--danger); color:#fff; }
.btn-sm { padding:5px 10px; font-size:0.75rem; }
.btn-xs { padding:3px 8px; font-size:0.7rem; }

/* ── Pagination ── */
.pagination { display:flex;align-items:center;justify-content:space-between;margin-top:20px; }
.pag-info { font-size:0.78rem; color:var(--muted); }
.pag-links { display:flex;gap:4px; }
.pag-link { display:inline-flex;align-items:center;justify-content:center; width:32px;height:32px; border-radius:8px; font-size:0.8rem; text-decoration:none; border:1px solid var(--border); color:var(--text); transition:all 0.12s; }
.pag-link:hover  { background:var(--navy); color:#fff; border-color:var(--navy); }
.pag-link.active { background:var(--navy); color:#fff; border-color:var(--navy); font-weight:700; }
.pag-link.dots   { border:none; cursor:default; color:var(--muted); }

/* ── Page header ── */
.page-heading { display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;flex-wrap:wrap;gap:12px; }
.page-heading h1 { font-size:1.4rem; font-weight:800; color:var(--navy); }
.page-heading p  { font-size:0.8rem; color:var(--muted); margin-top:2px; }

/* ── Flash messages ── */
.flash { padding:12px 16px; border-radius:10px; margin-bottom:20px; display:flex;align-items:center;gap:10px; font-size:0.82rem; font-weight:500; }
.flash-success { background:#d1fae5; color:#065f46; border:1px solid #6ee7b7; }
.flash-error   { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }
.flash-warning { background:#fef3c7; color:#92400e; border:1px solid #fcd34d; }

/* ── Forms ── */
.form-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:24px; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; }
.form-group { display:flex;flex-direction:column;gap:6px; }
.form-group label { font-size:0.75rem; font-weight:600; color:var(--navy); }
.form-group input,
.form-group select,
.form-group textarea { padding:10px 14px; border:1px solid var(--border); border-radius:8px; font-size:0.85rem; background:var(--bg); color:var(--text); font-family:inherit; transition:border-color 0.15s,box-shadow 0.15s; }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus { outline:none; border-color:var(--blue); background:#fff; box-shadow:0 0 0 3px rgba(46,134,171,0.12); }
.form-group textarea { resize:vertical; min-height:80px; }
.form-hint { font-size:0.72rem; color:var(--muted); }
.form-actions { display:flex;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid var(--border); }

/* ── Empty state ── */
.empty-state { padding:60px 20px; text-align:center; }
.empty-state svg { color:var(--border); margin-bottom:12px; }
.empty-state p { color:var(--muted); font-size:0.85rem; }

/* ── Responsive ── */
@media (max-width:1023px) {
    .sidebar { position:fixed; top:0; left:0; height:100vh; z-index:50; transform:translateX(-100%); transition:transform 0.3s; }
    .sidebar.open { transform:translateX(0); }
    .admin-content { margin-left:0 !important; }
    .page-body { padding:16px; }
    .mobile-header { display:flex !important; }
}
.mobile-header { display:none; position:sticky;top:0;z-index:40; background:var(--surface); border-bottom:1px solid var(--border); padding:12px 16px; align-items:center; gap:12px; }
.overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);z-index:45;display:none; }
.overlay.show { display:block; }

/* ── Animations ── */
@keyframes fadeInUp { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }
.kpi-card { animation:fadeInUp 0.35s ease both; }
.kpi-card:nth-child(1){animation-delay:.05s} .kpi-card:nth-child(2){animation-delay:.1s}
.kpi-card:nth-child(3){animation-delay:.15s} .kpi-card:nth-child(4){animation-delay:.2s}
.kpi-card:nth-child(5){animation-delay:.25s} .kpi-card:nth-child(6){animation-delay:.3s}

/* ── Progress bar ── */
.progress-bar { height:6px; background:var(--border); border-radius:99px; overflow:hidden; margin-top:8px; }
.progress-fill { height:100%; background:linear-gradient(90deg,var(--blue),var(--cyan)); border-radius:99px; transition:width 0.6s ease; }