:root {
    --border: #e9e9e9;
    --muted: #6b7280;
    --bg: #fafafa;
    --chip: #f2f2f2;
    /* Tenant branding can override these at runtime via app.js applyBranding(). */
    --brand-primary: #111827;
    --brand-secondary: #374151;
}

body {
    font-family: system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    margin: 0;
    background: var(--bg);
}

/* The app header carries tenant branding -- background paints the brand
   primary colour and text/buttons sit on it with high contrast. Consolidated
   into one rule so there's no white-on-white collision from a later
   `background: #fff` override. */
header {
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
    background: var(--brand-primary);
    color: #fff;
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
}

    header strong {
        color: #fff;
        font-size: 16px;
        font-weight: 600;
        letter-spacing: .2px;
    }

    header .muted { color: #d1d5db; }
    header input[type="search"], header input[type="text"] { background: #fff; color: #111; }
    header button { background: var(--brand-secondary); color: #fff; border: 1px solid var(--brand-secondary); }
    header button:hover { background: var(--brand-primary); border-color: var(--brand-primary); }
    /* Pills inside the dark header need dark text -- without this they
       inherit the header's #fff and disappear on the light-grey chip bg. */
    header .pill { color: #111; }

input, textarea {
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    min-width: 220px;
}

/* Checkboxes and radios are not text inputs -- the rules above are meant
   for <input type=text|password|number|...> only. Reset them so a
   <input type=checkbox> doesn't render as a 220px wide rounded box. */
input[type="checkbox"], input[type="radio"] {
    min-width: 0;
    width: auto;
    padding: 0;
    border: none;
    border-radius: 0;
    background: transparent;
}

/* Match the rounded look of <input>/<textarea>, drop the platform chrome,
   and paint our own chevron. The chevron is a 12x12 SVG inlined so we don't
   add an HTTP request just for a triangle. */
select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #fff;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
    font: inherit;
    line-height: 1.2;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4 L6 8 L10 4' stroke='%23555' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
    transition: border-color .12s, box-shadow .12s;
}

    select:hover {
        border-color: #b7b7b7;
    }

    select:focus {
        outline: none;
        border-color: #6b7280;
        box-shadow: 0 0 0 3px rgba(107, 114, 128, .15);
    }

    select:disabled {
        background-color: #f6f6f6;
        color: #888;
        cursor: not-allowed;
    }

input:focus, textarea:focus {
    outline: none;
    border-color: #6b7280;
    box-shadow: 0 0 0 3px rgba(107, 114, 128, .15);
}

button {
    padding: 8px 12px;
    border: 1px solid #d7d7d7;
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
}

    button:hover {
        background: #f7f7f7;
    }

.btn-sm {
    padding: 6px 10px;
    font-size: 12px;
    border-radius: 10px;
}

.row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.spacer {
    flex: 1;
}

.muted {
    color: var(--muted);
    font-size: 12px;
}

.pill {
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--chip);
    font-size: 12px;
    border: 1px solid var(--border);
    white-space: nowrap;
}

/* Dropdown menu */
.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none !important;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    z-index: 100;
    min-width: 180px;
    overflow: hidden;
}

.dropdown-menu.open {
    display: block !important;
}

/* Left-anchored variant (burger lives on the left of the header) */
.dropdown-menu-left {
    right: auto;
    left: 0;
}

.dropdown-menu a {
    display: block;
    padding: 10px 14px;
    font-size: 13px;
    color: #111827;
    cursor: pointer;
    text-decoration: none;
}

.dropdown-menu a:hover {
    background: #f3f4f6;
}

/* Burger button in the header */
.burger-btn {
    font-size: 18px;
    line-height: 1;
    padding: 6px 10px;
    min-width: 36px;
}

/* Section title inside the burger menu (non-clickable) */
.menu-section-title {
    padding: 8px 14px 4px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .6px;
    text-transform: uppercase;
    color: var(--muted);
    background: #fafafa;
}

/* Indented admin sub-items */
.dropdown-menu a.menu-sub {
    padding-left: 26px;
}

/* Visual separator between the admin section and the always-visible items */
.menu-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 0;
}

.status-pill {
    min-width: 100px;
    text-align: center;
}

code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 8px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

#wrap {
    display: flex;
    height: calc(100vh - 58px);
}

#left {
    border-right: 1px solid var(--border);
    /* Column-flex so the toolbar + age-filter bar stay pinned at the top
       and only #leftScroll (the device list) scrolls. */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: 50%;
    padding: 0px 1px;
    background: #fff;
}

#leftScroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
}

#map {
    width: 50%;
    float: left;
    height: 100%;
    position: relative;
}

/* Floating legend in the bottom-right of the map -- explains marker colours. */
#mapLegend {
    position: absolute;
    bottom: 10px;
    right: 10px;
    z-index: 500;
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: #111;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
    display: flex;
    gap: 10px;
    align-items: center;
}

    #mapLegend .legend-dot {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        margin-right: 3px;
        vertical-align: middle;
        border: 1px solid #1f2937;
    }

/* Strip Leaflet's default background/border on our div icon so just our SVG shows. */
.leaflet-div-icon.tp-marker,
.tp-marker {
    background: transparent;
    border: none;
}

.toolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin: 4px 0 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

thead th {
    text-align: left;
    font-size: 12px;
    color: #111827;
    border-bottom: 1px solid var(--border);
    padding: 10px 8px;
    background: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
}

tbody td {
    border-bottom: 1px solid var(--border);
    padding: 10px 8px;
    vertical-align: middle;
}

tbody tr:hover {
    background: #fafafa;
}

/* Column sizing */
th.col-imei, td.col-imei {
    width: 170px;
}

th.col-lat, td.col-lat {
    width: 90px;
}

th.col-lon, td.col-lon {
    width: 90px;
}

th.col-bat, td.col-bat {
    width: 70px;
}

th.col-gps, td.col-gps {
    width: 150px;
}

.imei-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* IMEI text + copy button on the same line; nowrap so the button never
   slips beneath the code element when the column is tight. */
.imei-row {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.imei-copy-btn {
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
    min-height: 0;
}

.meta-line {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.meta-chip {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    padding: 2px 8px;
    border: 1px solid var(--border);
    background: var(--chip);
    border-radius: 999px;
    font-size: 11px;
    color: #111827;
}

    .meta-chip span {
        color: var(--muted);
    }

.num {
    font-variant-numeric: tabular-nums;
}

.actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.right {
    text-align: right;
}

/* ===== Modal ===== */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    padding: 16px;
}

.modal {
    width: min(720px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 30px 90px rgba(0,0,0,.25);
    overflow: hidden;
}

    .modal header {
        position: unset;
        border-bottom: 1px solid var(--border);
        padding: 12px 14px;
        display: flex;
        gap: 10px;
        align-items: center;
        background: #fff;
    }

    .modal .content {
        padding: 14px;
        display: grid;
        gap: 10px;
    }

    .modal textarea {
        width: 100%;
        min-width: 0;
        min-height: 220px;
        resize: vertical;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
        font-size: 12px;
        line-height: 1.4;
    }

    .modal .hint {
        font-size: 12px;
        color: var(--muted);
    }

    .modal .footer {
        display: flex;
        gap: 10px;
        justify-content: flex-end;
        padding: 12px 14px;
        border-top: 1px solid var(--border);
        background: #fff;
    }

.danger {
    border-color: #f5b7b7;
    background: #fdecec;
    color: #b42318;
}

/* ===== Edit URLs Modal ===== */
.modal .grid-rows {
    display: grid;
    gap: 10px;
}

.edit-row {
    display: grid;
    grid-template-columns: 1fr auto; /* ✅ 1 dropdown + remove button */
    gap: 10px;
    align-items: center;
}

    .edit-row select {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        min-width: 0;
        width: 100%;
    }

    .edit-row .btn-sm {
        white-space: nowrap;
    }

.modal .subtoolbar {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 4px;
}

.modal .title-line {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
}


/* ===== DeviceKey preview (per-line hook dropdown) ===== */
.preview-box {
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fff;
    padding: 10px;
    display: grid;
    gap: 8px;
    max-height: 260px;
    overflow: auto;
}

.preview-row {
    display: grid;
    grid-template-columns: 1fr 2fr 180px;
    gap: 10px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafafa;
}

    .preview-row code {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    .preview-row select {
        padding: 8px 10px;
        border: 1px solid var(--border);
        border-radius: 10px;
        background: #fff;
        width: 100%;
        min-width: 0;
    }

.preview-head {
    display: grid;
    grid-template-columns: 1fr 2fr 180px;
    gap: 10px;
    font-size: 12px;
    color: var(--muted);
    padding: 0 2px 4px;
}


/* ===== Hook chips ===== */
.meta-line {
    display: flex;
    gap: 6px;
    flex-wrap: wrap; /* horizontal, wrap if needed */
    align-items: center;
}

/* base chip */
.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    border: 1px solid var(--border);
    background: var(--chip);
    color: #111827;
    white-space: nowrap;
}

    .meta-chip span {
        color: var(--muted);
    }

/* hook-specific colors */
.hook-chip {
    border-color: transparent;
    font-weight: 500;
}

/* individual hook colors */
.hook-chicane {
    background: #e0f2fe;
    color: #075985;
}

.hook-gpsbob {
    background: #06e9a5;
    color: #14532d;
}

.hook-fleetwf {
    background: #e0f2fe;
    color: #713f12;
}

.hook-cmstrack {
    background: #d7d7d7;
    color: #713f12;
}

.hook-trackserver {
    background: #c8d6e0;
    color: #1a2a36;
}

.hook-ti247 {
    background: #fecb5d;
    color: #881337;
}

.btn-danger {
    background: #d32f2f;
    color: white;
    border: none;
}

    .btn-danger:hover {
        background: #b71c1c;
    }

/* ===== Export Modal ===== */
.export-servers {
    display: grid;
    gap: 8px;
}

.export-server-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

    .export-server-row:hover {
        background: #f0f0f0;
    }

    .export-server-row input[type="checkbox"] {
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

    .export-server-row label {
        cursor: pointer;
        font-size: 13px;
        flex: 1;
    }

/* ===== User Management Modal ===== */
.user-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafafa;
}

    .user-row:hover {
        background: #f0f0f0;
    }

.user-form {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: #fafafa;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 4px;
    padding: 10px 8px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    border-top: 1px solid var(--border);
    position: sticky;
    bottom: 0;
    background: #fff;
}

.page-active {
    background: #111827 !important;
    color: #fff !important;
    border-color: #111827 !important;
}

.modal .content {
    max-height: 70vh;
    overflow-y: auto;
}

/* Hook checkbox grid */
.hook-check-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 6px;
}

.hook-check {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    width: 100%;
    box-sizing: border-box;
}

    .hook-check input[type="checkbox"] {
        width: 14px;
        height: 14px;
        cursor: pointer;
        accent-color: #111827;
    }


/* Group editor tab strip -- active tab visually attaches to the panel below it. */
.grp-tab-btn {
    background: #f0f1f3;
    border: 1px solid var(--border);
    color: #6b7280;
    padding: 6px 12px;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px 6px 0 0;
}

    .grp-tab-btn:hover {
        background: #e6e8ec;
        color: #111827;
    }

    .grp-tab-btn.active {
        background: #fff;
        color: #111827;
        font-weight: 600;
        border-bottom-color: #fff;
        margin-bottom: -1px;
    }