/* ── Inter font-face ──────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('/css/fonts/InterVariable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal oblique;
    font-display: block;
}

/* ── TSMonitor design tokens ─────────────────────────────────────────────── */
:root,
[data-bs-theme="dark"] {
    --tsm-bg:         rgb(8, 9, 13);
    --tsm-surface:    rgb(14, 15, 22);
    --tsm-surface2:   rgb(20, 21, 32);
    --tsm-border:     rgba(255,255,255,.07);
    --tsm-border2:    rgba(255,255,255,.12);
    --tsm-text:       #ffffff;
    --tsm-muted:      rgb(161, 161, 170);
    --tsm-muted2:     rgb(100, 100, 115);
    --tsm-primary:    #4493f8;
    --tsm-primary-fg: #ffffff;
    --tsm-green:      #22c55e;
    --tsm-red:        #ef4444;
    --tsm-yellow:     rgb(251, 191, 36);
    --tsm-sidebar-w:  260px;
    --tsm-radius:     10px;

    /* Tabler overrides */
    --tblr-body-bg:            var(--tsm-bg);
    --tblr-body-color:         var(--tsm-muted);
    --tblr-card-bg:            var(--tsm-surface);
    --tblr-card-border-color:  var(--tsm-border);
    --tblr-border-color:       var(--tsm-border);
    --tblr-secondary-bg:       var(--tsm-surface2);
    --tblr-font-sans-serif:    'Inter', ui-sans-serif, system-ui, sans-serif;
    --tblr-font-size-base:     0.9375rem;
    --tblr-line-height-base:   1.6;
    --tblr-primary:            var(--tsm-primary);
    --tblr-primary-rgb:        68, 147, 248;
    --tblr-primary-fg:         var(--tsm-primary-fg);
    --tblr-primary-subtle:     rgba(68, 147, 248, .12);
    --tblr-primary-emphasis:   rgba(68, 147, 248, .2);
    --tblr-link-color:         var(--tsm-primary);

    /* Tabler navbar-vertical tokens */
    --tblr-navbar-bg:                var(--tsm-surface);
    --tblr-navbar-border-color:      var(--tsm-border);
    --tblr-navbar-color:             var(--tsm-muted);
    --tblr-navbar-active-color:      var(--tsm-text);
    --tblr-navbar-hover-color:       var(--tsm-text);
    --tblr-navbar-hover-bg:          var(--tsm-surface2);
    --tblr-navbar-active-bg:         rgba(68,147,248,.1);
    --tblr-navbar-brand-color:       var(--tsm-text);
    --tblr-navbar-brand-hover-color: var(--tsm-text);
}

/* ── base ─────────────────────────────────────────────────────────────────── */
html, body { height: 100%; background: var(--tsm-bg); color: var(--tsm-muted); font-family: var(--tblr-font-sans-serif); }
h1,h2,h3,h4,h5,h6,.topbar-title,.stat-val,.tcard-name,.meta-item-val,.key-title { color: var(--tsm-text); }
a { color: inherit; text-decoration: none; }

/* ── key screen ───────────────────────────────────────────────────────────── */
.key-screen { display:flex; align-items:center; justify-content:center; height:100vh; flex-direction:column; gap:20px; background:var(--tsm-bg); }
.key-box { background:var(--tsm-surface); border:1px solid var(--tsm-border2); border-radius:16px; padding:36px 40px; display:flex; flex-direction:column; gap:16px; width:380px; max-width:calc(100vw - 32px); }
.key-title { font-size:20px; font-weight:700; letter-spacing:-.02em; display:flex; align-items:center; gap:10px; color:var(--tsm-text); }
.key-title svg { color:var(--tsm-primary); }
.key-sub { font-size:13px; color:var(--tsm-muted); }
.key-input { background:var(--tsm-surface2); border:1px solid var(--tsm-border2); border-radius:8px; padding:10px 14px; font-size:14px; color:var(--tsm-text); font-family:monospace; outline:none; width:100%; transition:border-color .15s; }
.key-input:focus { border-color:var(--tsm-primary); }
.key-btn { background:var(--tsm-primary); color:var(--tsm-primary-fg); border:none; border-radius:8px; padding:11px; font-size:14px; font-weight:700; cursor:pointer; transition:opacity .15s; }
.key-btn:hover { opacity:.88; }
.key-err { font-size:12px; color:var(--tsm-red); display:none; }

/* ── layout shell ─────────────────────────────────────────────────────────── */
.shell { display:flex; height:100vh; overflow:hidden; }

/* ── Sidebar ──────────────────────────────────────────────────────────────── */
.tsm-sidebar {
    width: var(--tsm-sidebar-w);
    flex-shrink: 0;
    height: 100vh;
    background: var(--tsm-surface);
    border-right: 1px solid var(--tsm-border);
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 100;
    transition: transform .25s ease;
    overflow: hidden;
}

/* Brand */
.tsm-sidebar-brand {
    padding: 20px 16px 16px;
    border-bottom: 1px solid var(--tsm-border);
    flex-shrink: 0;
}
.tsm-sidebar-brand-link {
    display: flex;
    align-items: center;
    gap: 9px;
    color: var(--tsm-text) !important;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -.02em;
    text-decoration: none !important;
    transition: opacity .15s;
}
.tsm-sidebar-brand-link:hover { opacity: .85; text-decoration: none !important; }
.tsm-brand-icon { color: var(--tsm-primary); width: 20px; height: 20px; flex-shrink: 0; }

/* Nav scroll area */
.tsm-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 8px;
}
.tsm-sidebar-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Nav items */
.tsm-sidebar .nav-link {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--tsm-radius);
    color: var(--tsm-muted);
    font-size: 14px;
    font-weight: 500;
    transition: background .14s, color .14s;
    cursor: pointer;
    text-decoration: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}
.tsm-sidebar .nav-link:hover  { background: var(--tsm-surface2); color: var(--tsm-text); }
.tsm-sidebar .nav-link.active { background: rgba(68,147,248,.1); color: var(--tsm-primary); }
.tsm-sidebar .nav-link:focus,
.tsm-sidebar .nav-link:focus-visible { outline: none !important; box-shadow: none !important; }
.tsm-sidebar .nav-item::after,
.tsm-sidebar .nav-item::before,
.tsm-sidebar .nav-link::after,
.tsm-sidebar .nav-link::before { display: none !important; }

/* Project links white + bolder */
.tsm-proj-link { font-weight: 700 !important; color: var(--tsm-text) !important; }
.tsm-proj-link:hover { color: var(--tsm-text) !important; }
.tsm-proj-link.active { color: var(--tsm-primary) !important; }

/* Nav separator */
.tsm-sidebar .nav-sep {
    border: none;
    border-top: 1px solid var(--tsm-border);
    margin: 6px 10px;
}

/* % badge */
.nav-link-pct {
    font-size: 11px;
    font-weight: 600;
    color: var(--tsm-muted2);
    margin-left: auto;
    flex-shrink: 0;
}
.tsm-sidebar .nav-link.active .nav-link-pct { color: var(--tsm-primary); }

/* ── Sidebar footer (logout) ─────────────────────────────────────────────── */
.tsm-sidebar-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--tsm-border);
    padding: 12px 8px;
}
.tsm-sidebar-footer-inner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: var(--tsm-radius);
    font-size: 13px;
    color: var(--tsm-muted2);
    cursor: pointer;
    transition: background .14s, color .14s;
}
.tsm-sidebar-footer-inner:hover { background: var(--tsm-surface2); color: var(--tsm-text); }
.tsm-sidebar-footer-inner svg { flex-shrink: 0; opacity: .7; }

/* ── Mobile overlay ──────────────────────────────────────────────────────── */
.navbar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 99;
    backdrop-filter: blur(2px);
}
.navbar-overlay.active { display: block; }

/* ── main area ────────────────────────────────────────────────────────────── */
.main { flex:1; overflow-y:auto; display:flex; flex-direction:column; min-width:0; }

/* ── topbar ───────────────────────────────────────────────────────────────── */
.topbar { padding:26px 28px 0; }
.topbar-crumb { font-size:11px; text-transform:uppercase; letter-spacing:.08em; color:var(--tsm-muted2); display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.topbar-crumb .crumb-link { color:var(--tsm-muted2); cursor:pointer; }
.topbar-crumb .crumb-link:hover { color:var(--tsm-text); }
.topbar-crumb .sep { opacity:.4; }
.topbar-title { font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--tsm-text); }
.topbar-meta { font-size:13px; color:var(--tsm-muted2); margin-top:3px; }
.body { padding:20px 28px 48px; flex:1; }

/* ── card ─────────────────────────────────────────────────────────────────── */
.card { background:var(--tsm-surface); border:1px solid var(--tsm-border); border-radius:12px; padding:20px; }
.card + .card { margin-top:0; }
.card-label { font-size:12px; text-transform:uppercase; letter-spacing:.07em; color:var(--tsm-text); font-weight:700; margin-bottom:14px; }
.card-label strong { color:var(--tsm-muted); font-weight:600; }

/* ── tags ─────────────────────────────────────────────────────────────────── */
.tag { font-size:11px; padding:2px 9px; border-radius:99px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; flex-shrink:0; display:inline-block; }
.tag-on      { background:rgba(34,197,94,.15);   color:var(--tsm-green);  border:1px solid rgba(34,197,94,.25); }
.tag-off     { background:rgba(239,68,68,.12);   color:var(--tsm-red);    border:1px solid rgba(239,68,68,.2); }
.tag-partial { background:rgba(251,191,36,.12);  color:var(--tsm-yellow); border:1px solid rgba(251,191,36,.25); }
.tag-empty   { background:rgba(100,100,115,.12); color:var(--tsm-muted2); border:1px solid var(--tsm-border); }

/* ── project summary stats ────────────────────────────────────────────────── */
.summary-row { display:flex; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:22px; }
.stat { display:flex; flex-direction:column; gap:2px; }
.stat-val { font-size:22px; font-weight:700; letter-spacing:-.03em; color:var(--tsm-text); }
.stat-lbl { font-size:12px; color:var(--tsm-muted2); }
.stat-sep { width:1px; height:30px; background:var(--tsm-border2); }

/* ── targets grid ─────────────────────────────────────────────────────────── */
.targets-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:10px; }
.tcard { background:var(--tsm-surface2); border:1px solid var(--tsm-border); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; cursor:pointer; transition:border-color .15s; }
.tcard:hover { border-color:rgba(68,147,248,.45); }
.tcard-header { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.tcard-name { font-size:14px; font-weight:600; color:var(--tsm-text); }
.tcard-coords { font-size:12px; color:var(--tsm-muted2); display:flex; gap:10px; }
.tcard-coords span { display:flex; gap:3px; align-items:center; }
.tcard-bottom { display:flex; align-items:center; justify-content:space-between; font-size:12px; color:var(--tsm-muted2); }
.tcard-pct { font-weight:700; font-size:14px; color:var(--tsm-text); }

/* ── progress bars ────────────────────────────────────────────────────────── */
.mini-bar { height:3px; border-radius:99px; background:var(--tsm-border); overflow:hidden; }
.mini-bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--tsm-primary),rgba(68,147,248,.5)); }
.mini-bar-fill.done { background:var(--tsm-green); }
.bar { height:5px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; min-width:80px; }
.bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--tsm-primary),rgba(68,147,248,.5)); }
.bar-fill.done { background:var(--tsm-green); }
.global-bar-wrap { margin-top:8px; }
.global-bar { height:6px; border-radius:99px; background:rgba(255,255,255,.06); overflow:hidden; }
.global-bar-fill { height:100%; border-radius:99px; background:linear-gradient(90deg,var(--tsm-primary),rgba(68,147,248,.5)); }
.global-bar-fill.done { background:var(--tsm-green); }

/* ── target detail meta ───────────────────────────────────────────────────── */
.meta-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin-bottom:18px; }
.meta-item-lbl { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--tsm-muted2); font-weight:600; margin-bottom:4px; }
.meta-item-val { font-size:14px; font-weight:600; color:var(--tsm-text); }

/* ── filters table ────────────────────────────────────────────────────────── */
.filter-table { width:100%; border-collapse:collapse; }
.filter-table th { font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--tsm-muted2); font-weight:600; padding:0 0 10px; text-align:left; border-bottom:1px solid var(--tsm-border); }
.filter-table th.right { text-align:right; }
.filter-table td { padding:11px 0; border-bottom:1px solid var(--tsm-border); vertical-align:middle; }
.filter-table tr:last-child td { border-bottom:none; }
.filter-table td.right { text-align:right; }
.filter-name-cell { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; color:var(--tsm-text); }
.exposure-badge { font-size:11px; font-weight:500; color:var(--tsm-muted2); background:var(--tsm-surface2); border:1px solid var(--tsm-border); padding:1px 7px; border-radius:99px; }
.pct-cell { font-size:13px; font-weight:700; white-space:nowrap; padding-left:12px !important; color:var(--tsm-text); }
.count-cell { font-size:12px; color:var(--tsm-muted2); white-space:nowrap; padding-right:12px !important; }
.count-cell strong { color:var(--tsm-text); }

/* ── target 2-column layout ──────────────────────────────────────────────── */
.target-layout { display:flex; flex-direction:column; gap:12px; }
.target-layout--2col { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:start; }
.target-col-left, .target-col-right { display:flex; flex-direction:column; gap:12px; min-width:0; }

/* ── aladin ───────────────────────────────────────────────────────────────── */
.aladin-card { background:var(--tsm-surface); border:1px solid var(--tsm-border); border-radius:12px; padding:20px; display:flex; flex-direction:column; gap:10px; }
.aladin-card .card-label { margin-bottom:0; }
.aladin-wrap { border-radius:8px; overflow:hidden; position:relative; background:#000; aspect-ratio:1/1; }
.aladin-wrap .aladin-location { display:none !important; }
#aladin-lite-div { width:100% !important; height:100% !important; position:absolute; inset:0; }

/* ── misc ─────────────────────────────────────────────────────────────────── */
.empty { color:var(--tsm-muted2); font-size:14px; padding:24px 0; text-align:center; }
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-thumb { background:var(--tsm-border2); border-radius:99px; }
.view { animation:fadein .18s ease; }
@keyframes fadein { from{opacity:0} to{opacity:1} }
.card.meta-card { margin-bottom:0; }

/* ── Mobile (≤ 991px — Tabler lg breakpoint) ─────────────────────────────── */
@media (max-width: 991.98px) {
    /* Sidebar off-canvas drawer */
    .tsm-sidebar {
        position: fixed !important;
        top: 0; left: 0; bottom: 0;
        height: 100vh !important;
        width: var(--tsm-sidebar-w) !important;
        transform: translateX(-100%) !important;
        z-index: 200;
        box-shadow: 4px 0 24px rgba(0,0,0,.5);
    }
    .tsm-sidebar.tsm-sidebar-open {
        transform: translateX(0) !important;
    }

    /* Show burger button (hidden on desktop via d-lg-none equivalent) */
    .navbar-toggler { display: flex !important; }

    /* Main takes full width */
    .main { width: 100%; }

    /* Top bar with burger for mobile */
    .tsm-mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
        background: var(--tsm-surface);
        border-bottom: 1px solid var(--tsm-border);
        position: sticky;
        top: 0;
        z-index: 50;
    }
    .tsm-mobile-burger {
        background: none;
        border: none;
        color: var(--tsm-text);
        cursor: pointer;
        padding: 4px;
        display: flex;
        align-items: center;
        border-radius: 6px;
        transition: background .14s;
    }
    .tsm-mobile-burger:hover { background: var(--tsm-surface2); }
    .tsm-mobile-title {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 16px;
        font-weight: 900;
        color: var(--tsm-text) !important;
        text-decoration: none !important;
    }
    .tsm-mobile-title .tsm-brand-icon { width: 18px; height: 18px; }

    /* Layout adjustments */
    .body { padding:16px 16px 40px; }
    .topbar { padding:16px 16px 0; }
    .target-layout--2col { grid-template-columns:1fr; }
    .meta-grid { grid-template-columns:repeat(2,1fr); }
}

/* Always show the collapse content inside our custom sidebar drawer ────────── */
/* (Bootstrap hides .navbar-collapse on mobile — we override that) */
.tsm-sidebar .navbar-collapse {
    display: flex !important;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

/* Desktop: hide burger, sidebar always visible */
@media (min-width: 992px) {
    .navbar-toggler { display: none !important; }
    .tsm-mobile-header { display: none !important; }
    /* Override Tabler navbar-vertical qui force position:fixed */
    .tsm-sidebar {
        position: relative !important;
        transform: none !important;
        height: 100vh !important;
    }
    /* Le shell gère le flex layout, pas la sidebar */
    .shell { display: flex !important; }
}