/* ============================================================================
   Heatmon portal — shared stylesheet
   Lifted verbatim out of base.html (Phase 1). Every selector below was
   already in use by the 42 templates that extend base.html; nothing was
   renamed or removed. New rules are confined to the NAV DROPDOWNS section
   at the bottom.
   Bump the ?v= query in base.html when editing this file.
   ============================================================================ */

* { margin:0;padding:0;box-sizing:border-box; }

:root {
    --primary:#f97316;
    --primary-dark:#ea580c;
    --success:#10b981;
    --danger:#ef4444;
    --warning:#f59e0b;
    --bg:#f1f5f9;
    --panel:#ffffff;
    --border:#e5e7eb;
    --text:#111827;
    --text-muted:#6b7280;
}

body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.6;
}

/* ── Header ─────────────────────────────────────────────── */
.header {
    background:#0f172a;
    border-bottom:2px solid var(--primary);
    position:sticky;top:0;z-index:200;
    box-shadow:0 2px 8px rgba(0,0,0,0.3);
}
.header-content {
    max-width:1400px;margin:0 auto;
    display:flex;align-items:center;
    justify-content:space-between;
    padding:0 16px;height:56px;
}
.logo {
    display:flex;align-items:center;gap:10px;
    text-decoration:none;flex-shrink:0;
}
.logo img { height:32px;width:auto; }
.logo-text { height:18px;width:auto; }

/* Nav label */
.nav-label { display:flex;align-items:center; }

/* Desktop nav */
.nav {
    display:flex;gap:2px;align-items:center;
    flex:1;justify-content:center;
}
.nav a {
    padding:8px 12px;text-decoration:none;
    color:#94a3b8;font-size:13px;font-weight:500;
    border-radius:6px;transition:all 0.15s;white-space:nowrap;
}
.nav a:hover { color:white;background:rgba(255,255,255,0.08); }
.nav a.active { color:var(--primary);background:rgba(249,115,22,0.1); }

/* User menu */
.user-menu {
    display:flex;align-items:center;gap:10px;flex-shrink:0;
}
.user-name { font-size:13px;color:#94a3b8; }
.role-badge {
    font-size:10px;padding:3px 8px;border-radius:10px;
    font-weight:700;text-transform:uppercase;letter-spacing:0.3px;
}
.role-owner,.role-admin { background:#fef3c7;color:#92400e; }
.role-supervisor { background:#ede9fe;color:#5b21b6; }
.role-engineer { background:#d1fae5;color:#065f46; }
.role-customer { background:#e0e7ff;color:#3730a3; }

/* Hamburger */
.hamburger {
    display:none;flex-direction:column;justify-content:center;
    gap:5px;cursor:pointer;padding:8px;border:none;
    background:none;border-radius:6px;
}
.hamburger span {
    display:block;width:22px;height:2px;
    background:#94a3b8;border-radius:2px;transition:all 0.3s;
}
.hamburger.open span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.hamburger.open span:nth-child(2) { opacity:0; }
.hamburger.open span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

/* Mobile nav drawer */
.mobile-nav {
    display:none;background:#0f172a;
    border-top:1px solid rgba(255,255,255,0.08);
    padding:8px 0;
}
.mobile-nav a {
    display:block;padding:12px 20px;
    color:#94a3b8;text-decoration:none;font-size:14px;font-weight:500;
}
.mobile-nav a:hover { color:white;background:rgba(255,255,255,0.05); }
.mobile-nav a.active { color:var(--primary); }
.mobile-nav .divider { height:1px;background:rgba(255,255,255,0.08);margin:6px 0; }
.mobile-nav .logout-link { color:#ef4444 !important; }

/* ── Container ───────────────────────────────────────────── */
.container {
    max-width:1400px;margin:0 auto;
    padding:20px 16px;
}

/* ── Messages ────────────────────────────────────────────── */
.messages { margin-bottom:16px; }
.message {
    padding:12px 16px;border-radius:8px;
    margin-bottom:8px;border-left:4px solid;font-size:14px;
}
.message.success { background:#d1fae5;border-color:var(--success);color:#065f46; }
.message.error   { background:#fee2e2;border-color:var(--danger);color:#991b1b; }
.message.warning { background:#fef3c7;border-color:var(--warning);color:#92400e; }
.message.info    { background:#dbeafe;border-color:#3b82f6;color:#1e40af; }

/* ── Buttons ─────────────────────────────────────────────── */
.btn {
    display:inline-flex;align-items:center;justify-content:center;
    padding:9px 16px;border-radius:6px;text-decoration:none;
    font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;
    transition:all 0.15s;white-space:nowrap;gap:5px;
}
.btn-primary { background:var(--primary);color:white;border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-dark);border-color:var(--primary-dark); }
.btn-secondary { background:white;color:var(--text);border-color:var(--border); }
.btn-secondary:hover { background:var(--bg); }
.btn-success { background:var(--success);color:white;border-color:var(--success); }
.btn-danger  { background:var(--danger);color:white;border-color:var(--danger); }
.btn-warning { background:var(--warning);color:white;border-color:var(--warning); }
.btn-sm { padding:5px 10px;font-size:12px; }

/* ── Cards ───────────────────────────────────────────────── */
.card {
    background:var(--panel);border-radius:10px;
    border:1px solid var(--border);padding:20px;
    margin-bottom:20px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
}

/* ── Tables ──────────────────────────────────────────────── */
.table-responsive { overflow-x:auto;-webkit-overflow-scrolling:touch; }
table { width:100%;border-collapse:collapse;min-width:500px; }
thead th {
    padding:10px 12px;text-align:left;
    font-size:12px;font-weight:600;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.3px;
    border-bottom:2px solid var(--border);
    background:var(--bg);white-space:nowrap;
}
tbody td {
    padding:10px 12px;border-bottom:1px solid var(--border);
    font-size:13px;vertical-align:middle;
}
tbody tr:hover td { background:#fafafa; }
tbody tr:last-child td { border-bottom:none; }

/* ── Badges ──────────────────────────────────────────────── */
.badge {
    display:inline-block;padding:3px 9px;border-radius:10px;
    font-size:11px;font-weight:700;
}
.badge-success { background:#d1fae5;color:#065f46; }
.badge-danger  { background:#fee2e2;color:#991b1b; }
.badge-warning { background:#fef3c7;color:#92400e; }
.badge-info    { background:#dbeafe;color:#1e40af; }
.badge-muted   { background:#f3f4f6;color:#4b5563; }
.code {
    font-family:monospace;font-size:12px;
    background:#f3f4f6;padding:2px 7px;border-radius:4px;
}

/* ── Responsive breakpoints ──────────────────────────────── */
@media (max-width:1024px) {
    .nav { display:none; }
    .hamburger { display:flex; }
    .user-name { display:none; }
}

@media (max-width:640px) {
    .container { padding:12px; }
    .card { padding:14px;border-radius:8px; }
    .btn { padding:8px 12px;font-size:12px; }
    .btn-sm { padding:4px 8px;font-size:11px; }
    thead th { font-size:11px;padding:8px 8px; }
    tbody td { font-size:12px;padding:8px 8px; }
}

/* Mobile card-row alternative for very narrow screens */
@media (max-width:480px) {
    .hide-mobile { display:none !important; }
}

    

/* ── Nav dropdowns (new in Phase 1) ──────────────────────────── */
/* The admin nav outgrew a flat row once the six unlinked pages were
   added, so top level is now Dashboard / Fleet / People / Ops with
   the detail hanging off each. Below 1024px the hamburger drawer
   takes over and these never render. */
.nav-group { position:relative; }
.nav-group > button {
    padding:8px 12px;border:none;background:none;cursor:pointer;
    color:#94a3b8;font-size:13px;font-weight:500;font-family:inherit;
    border-radius:6px;transition:all 0.15s;white-space:nowrap;
    display:flex;align-items:center;gap:5px;
}
.nav-group > button:hover { color:white;background:rgba(255,255,255,0.08); }
.nav-group > button .caret {
    border:solid #64748b;border-width:0 1.5px 1.5px 0;
    padding:2px;transform:rotate(45deg);margin-top:-2px;
}
.nav-group.section-active > button { color:var(--primary);background:rgba(249,115,22,0.1); }
.nav-group.section-active > button .caret { border-color:var(--primary); }

.nav-dropdown {
    display:none;position:absolute;top:calc(100% + 6px);left:0;
    background:#0f172a;border:1px solid rgba(255,255,255,0.12);
    border-radius:8px;padding:6px;min-width:200px;
    box-shadow:0 8px 24px rgba(0,0,0,0.45);z-index:250;
}
.nav-group.open .nav-dropdown { display:block; }
.nav-dropdown a {
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:8px 10px;border-radius:5px;
    color:#cbd5e1;font-size:13px;font-weight:500;text-decoration:none;
    white-space:nowrap;
}
.nav-dropdown a:hover { color:white;background:rgba(255,255,255,0.08); }
.nav-dropdown a.active { color:var(--primary);background:rgba(249,115,22,0.12); }
.nav-dropdown .group-label {
    padding:6px 10px 4px;font-size:10px;font-weight:700;
    color:#475569;text-transform:uppercase;letter-spacing:0.5px;
}
.nav-dropdown .divider-h { height:1px;background:rgba(255,255,255,0.08);margin:5px 0; }

/* Count chip — e.g. pending registrations on Inbox, components in drift
   on Infrastructure. Renders only when the view supplies the number. */
.nav-count {
    background:var(--primary);color:#0f172a;
    font-size:10px;font-weight:800;line-height:1;
    padding:3px 6px;border-radius:9px;min-width:18px;text-align:center;
}
.nav-count.quiet { background:#334155;color:#94a3b8; }

/* Mobile drawer section headers */
.mobile-nav .group-label {
    display:block;padding:10px 20px 4px;font-size:10px;font-weight:700;
    color:#475569;text-transform:uppercase;letter-spacing:0.5px;
}
.mobile-nav a { display:flex;align-items:center;justify-content:space-between;gap:12px; }



/* ── Narrow container (Phase 2) ──────────────────────────────────────
   Customer-facing pages opt in via {% block container_class %}narrow{% endblock %}.
   A list of two or three site cards stretched across 1400px reads badly. */
.container.narrow { max-width: 880px; }

/* ── Detail-page primitives (Phase 2) ────────────────────────────────
   Shared by customer_device_detail and engineer_device_detail, which
   previously each carried their own near-identical copy. */
.info-grid {
    display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:14px;margin-top:16px;
}
.info-item {
    background:var(--bg);border:1px solid var(--border);
    border-radius:8px;padding:12px 14px;
}
.info-label {
    font-size:11px;font-weight:700;color:var(--text-muted);
    text-transform:uppercase;letter-spacing:0.3px;margin-bottom:4px;
}
.info-value { font-size:14px;font-weight:600;color:var(--text);word-break:break-word; }
.info-value.empty { color:var(--text-muted);font-weight:400;font-style:italic; }

.stat-card {
    background:var(--panel);border:1px solid var(--border);
    border-radius:10px;padding:18px;text-align:center;
}
.stat-value { font-size:30px;font-weight:800;color:var(--primary);line-height:1; }
.stat-label { font-size:12px;color:var(--text-muted);margin-top:6px; }

.empty-state { text-align:center;padding:48px 20px;color:var(--text-muted); }
.empty-state-icon { font-size:48px;opacity:0.35;margin-bottom:12px; }

/* Device status pill — mirrors the .badge palette so status colours are
   consistent whether a page uses a badge or a pill. */
.device-status {
    display:inline-block;padding:3px 10px;border-radius:10px;
    font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:0.3px;
}
.status-active   { background:#d1fae5;color:#065f46; }
.status-assigned,
.status-new      { background:#fef3c7;color:#92400e; }
.status-replaced { background:#fee2e2;color:#991b1b; }
.status-inactive { background:#f3f4f6;color:#4b5563; }

/* Callout notes */
.note {
    border-radius:8px;padding:12px 14px;font-size:13px;
    margin-top:14px;border-left:4px solid;
}
.note-info  { background:#dbeafe;border-color:#3b82f6;color:#1e40af; }
.note-warn  { background:#fef3c7;border-color:var(--warning);color:#92400e; }

/* Back link in a page header */
.back-link {
    color:var(--text-muted);text-decoration:none;font-size:13px;font-weight:500;
    display:inline-flex;align-items:center;gap:6px;
}
.back-link:hover { color:var(--primary); }