/* Medway Cars — Admin panel styles
   Brand colours sampled directly from the supplied logo. */

:root {
    --navy: #011E3F;
    --navy-light: #0A3260;
    --gold: #C2941C;
    --gold-light: #D9AE3F;
    --white: #FFFFFF;
    --off-white: #F6F7F9;
    --slate: #5A6473;
    --charcoal: #1A1D21;
    --border: #E8EAEE;
    --success: #1E7A46;
    --success-bg: #E7F4EC;
    --danger: #B23B3B;
    --danger-bg: #FBEAEA;
    --warning-bg: #FBF3E3;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(1, 30, 63, 0.08);
    --shadow-hover: 0 4px 16px rgba(1, 30, 63, 0.12);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
    background: var(--off-white);
    color: var(--charcoal);
    font-size: 15px;
    line-height: 1.6;
}

a { color: inherit; text-decoration: none; }

/* ---------- Auth pages (login, 2FA) ---------- */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--navy);
    background-image: linear-gradient(160deg, var(--navy) 0%, #010E1F 100%);
    padding: 24px;
}

.auth-card {
    background: var(--white);
    border-radius: var(--radius);
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.auth-logo {
    display: block;
    max-width: 180px;
    margin: 0 auto 28px;
}

.auth-card h1 {
    font-size: 19px;
    text-align: center;
    margin: 0 0 24px;
    color: var(--navy);
}

/* ---------- Forms ---------- */

.field { margin-bottom: 18px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--slate);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="number"],
.field select,
.field textarea {
    width: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border);
    border-radius: 8px;
    font-size: 15px;
    background: var(--white);
    color: var(--charcoal);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: 0 0 0 3px rgba(194, 148, 28, 0.18);
}

.field-hint { font-size: 12.5px; color: var(--slate); margin-top: 5px; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 8px;
    border: none;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.btn-primary { background: var(--gold); color: var(--navy); width: 100%; }
.btn-primary:hover { background: var(--gold-light); }

.btn-secondary { background: var(--white); color: var(--navy); border: 1px solid var(--border); }
.btn-secondary:hover { border-color: var(--navy); }

.btn-danger { background: var(--danger-bg); color: var(--danger); border: 1px solid transparent; }
.btn-danger:hover { border-color: var(--danger); }

.btn-sm { padding: 7px 12px; font-size: 13px; }

/* ---------- Alerts ---------- */

.alert {
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 18px;
}

.alert-error { background: var(--danger-bg); color: var(--danger); }
.alert-success { background: var(--success-bg); color: var(--success); }
.alert ul { margin: 0; padding-left: 18px; }

/* ---------- App shell ---------- */

.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 240px;
    flex-shrink: 0;
    background: var(--navy);
    color: var(--white);
    padding: 24px 0;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 20px 24px;
    margin-bottom: 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo img { max-width: 130px; }

.nav-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    padding: 16px 20px 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 20px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 14.5px;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.nav-link:hover { background: rgba(255, 255, 255, 0.06); color: var(--white); }

.nav-link.active {
    background: rgba(194, 148, 28, 0.15);
    border-left-color: var(--gold);
    color: var(--gold-light);
}

.main-column { flex: 1; min-width: 0; }

.topbar {
    background: var(--white);
    border-bottom: 1px solid var(--border);
    padding: 14px 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
}

.topbar-title { font-size: 18px; font-weight: 700; color: var(--navy); }

.user-menu { display: flex; align-items: center; gap: 14px; font-size: 14px; }

.user-badge {
    background: var(--off-white);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--navy);
    text-transform: capitalize;
}

.page-content { padding: 28px; }

/* ---------- Dashboard cards ---------- */

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin-bottom: 28px;
}

.stat-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.stat-card .value { font-size: 30px; font-weight: 800; color: var(--navy); }
.stat-card .label { font-size: 13px; color: var(--slate); margin-top: 4px; }

.card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

/* ---------- Tables ---------- */

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

th {
    text-align: left;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--slate);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
}

td {
    padding: 13px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 14.5px;
}

tr:last-child td { border-bottom: none; }

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.badge-active { background: var(--success-bg); color: var(--success); }
.badge-suspended { background: var(--danger-bg); color: var(--danger); }
.badge-role { background: var(--off-white); color: var(--navy); text-transform: capitalize; }

.empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--slate);
}

.page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.page-header h2 { margin: 0; font-size: 20px; color: var(--navy); }

.form-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    max-width: 520px;
    box-shadow: var(--shadow);
}

.actions-row { display: flex; gap: 10px; margin-top: 22px; }

/* Mobile menu toggle — hidden by default (desktop always shows the full
   sidebar); the media query below is what turns it on for small screens.
   Previously this was hidden with an inline style that no stylesheet rule
   could override, so it never appeared on mobile at all. */
.mobile-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--navy);
    padding: 4px 8px 4px 0;
}

.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(1, 30, 63, 0.5);
    z-index: 99;
}

.sidebar-backdrop.visible { display: block; }

@media (max-width: 768px) {
    .mobile-toggle { display: inline-flex; align-items: center; }
    .sidebar {
        position: fixed;
        left: -240px;
        top: 0;
        z-index: 100;
        transition: left 0.2s;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
    }
    .sidebar.open { left: 0; }
    .page-content { padding: 18px; }
}

/* ---------------------------------------------------------------------
   Photo manager (vehicle edit page)
   --------------------------------------------------------------------- */

.photo-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 4px;
    margin-bottom: 14px;
    min-height: 40px;
}

.photo-toolbar label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    color: var(--slate);
    cursor: pointer;
}

.photo-bulk-actions {
    display: none;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: var(--navy);
    font-weight: 600;
}
.photo-bulk-actions.visible { display: flex; }

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 14px;
}

.photo-card {
    position: relative;
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: var(--white);
    cursor: grab;
    transition: box-shadow 0.15s, opacity 0.15s;
}
.photo-card:active { cursor: grabbing; }
.photo-card.dragging { opacity: 0.4; }
.photo-card.drag-over { box-shadow: 0 0 0 3px var(--gold) inset; }

.photo-card img {
    width: 100%;
    height: 120px;
    object-fit: cover;
    display: block;
    pointer-events: none; /* clicks pass through to the card for drag; buttons sit above via z-index */
}

.photo-card-select {
    position: absolute;
    top: 8px;
    left: 8px;
    width: 20px;
    height: 20px;
    z-index: 3;
    cursor: pointer;
    accent-color: var(--gold);
}

.photo-star {
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 3;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--border);
    transition: color 0.15s, transform 0.15s;
}
.photo-star:hover { transform: scale(1.1); }
.photo-star.is-primary { color: var(--gold); }
.photo-star svg { width: 16px; height: 16px; }

.photo-primary-badge {
    position: absolute;
    top: 8px;
    left: 34px;
    z-index: 2;
    background: var(--gold);
    color: var(--navy);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

.photo-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    gap: 4px;
}

.photo-order-btns { display: flex; gap: 2px; }
.photo-order-btns button {
    width: 24px; height: 24px;
    border: 1px solid var(--border);
    background: var(--white);
    border-radius: 5px;
    cursor: pointer;
    font-size: 11px;
    color: var(--slate);
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-order-btns button:hover { border-color: var(--navy); color: var(--navy); }

.photo-delete-btn {
    width: 24px; height: 24px;
    border: 1px solid var(--danger-bg);
    background: var(--danger-bg);
    color: var(--danger);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.photo-delete-btn svg { width: 13px; height: 13px; }
.photo-delete-btn:hover { background: var(--danger); color: var(--white); }

.photo-drag-hint {
    font-size: 12px;
    color: var(--slate);
    margin: -6px 0 14px;
}