:root {
    --admin-bg: #f4f6fb;
    --admin-surface: #ffffff;
    --admin-panel: #f8fafc;
    --admin-text: #172033;
    --admin-muted: #64748b;
    --admin-line: #dbe3ef;
    --admin-primary: #0f766e;
    --admin-primary-dark: #0f4f4a;
    --admin-accent: #b7791f;
    --admin-info: #2563eb;
    --admin-danger: #dc2626;
    --admin-success: #16a34a;
    --admin-shadow: 0 16px 45px rgba(15, 23, 42, 0.08);

    --admin-space-1: 4px;
    --admin-space-2: 8px;
    --admin-space-3: 12px;
    --admin-space-4: 16px;
    --admin-space-5: 24px;
    --admin-space-6: 32px;

    --admin-radius: 8px;

    --admin-font-h1: 28px;
    --admin-font-h4: 16px;
    --admin-font-body: 14px;
    --admin-font-small: 13px;
}

body {
    background: var(--admin-bg);
    color: var(--admin-text);
    font-family: "Cairo", "Inter", "Segoe UI", Arial, sans-serif;
    letter-spacing: 0;
}

a,
a:hover {
    text-decoration: none;
}

#layout-wrapper {
    background: var(--admin-bg);
}

#page-topbar {
    background: rgba(255, 255, 255, 0.96);
    border-bottom: 1px solid var(--admin-line);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    backdrop-filter: blur(10px);
}

.navbar-header {
    min-height: 72px;
}

.navbar-brand-box {
    background: #111827;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
}

.vertical-menu {
    background: #111827;
    border-inline-end: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 12px 0 36px rgba(15, 23, 42, 0.12);
}

#sidebar-menu ul li a {
    color: #cbd5e1;
    border-radius: 8px;
    margin: 3px 12px;
    min-height: 42px;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

#sidebar-menu ul li a i {
    color: #94a3b8;
    min-width: 18px;
}

#sidebar-menu ul li a:hover,
#sidebar-menu ul li a.active,
#sidebar-menu ul li.mm-active > a {
    background: #1f2937;
    color: #ffffff;
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a.active i,
#sidebar-menu ul li.mm-active > a i {
    color: #f6c76f;
}

.main-content .page-content {
    padding-top: 104px;
}

.container-fluid {
    max-width: 1500px;
}

.page-title-box {
    margin-bottom: 20px;
}

.card {
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    overflow: hidden;
}

.card-header {
    background: var(--admin-surface);
    border-bottom: 1px solid var(--admin-line);
}

.card-title {
    color: var(--admin-text);
    font-weight: 800;
}

.btn {
    border-radius: 8px;
    font-weight: 700;
    letter-spacing: 0;
}

.btn-primary {
    background: var(--admin-primary);
    border-color: var(--admin-primary);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--admin-primary-dark);
    border-color: var(--admin-primary-dark);
}

.btn-secondary {
    background: #334155;
    border-color: #334155;
}

.btn-success {
    background: var(--admin-success);
    border-color: var(--admin-success);
}

.form-control,
.form-select,
.choices__inner {
    border-radius: 8px;
    border-color: var(--admin-line);
    min-height: 42px;
}

.form-control:focus,
.form-select:focus,
.choices__inner:focus {
    border-color: var(--admin-primary);
    box-shadow: 0 0 0 3px rgba(15, 118, 110, 0.12);
}

.table {
    color: var(--admin-text);
}

.table thead th,
.table thead td {
    color: var(--admin-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border-bottom-color: var(--admin-line);
}

.table tbody tr {
    transition: background-color 0.2s ease;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.alert {
    border-radius: 8px;
    border: 1px solid transparent;
}

.modern-dashboard {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.modern-hero {
    background: #111827;
    color: #ffffff;
    border-radius: 8px;
    padding: 26px;
    box-shadow: var(--admin-shadow);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 20px;
    align-items: center;
}

.modern-hero h1 {
    color: #ffffff;
    font-size: 28px;
    font-weight: 900;
    margin: 0 0 8px;
}

.modern-hero p {
    color: #cbd5e1;
    margin: 0;
    max-width: 760px;
}

.modern-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
}

.modern-hero .btn {
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    background: rgba(255, 255, 255, 0.1);
}

.modern-hero .btn:hover {
    background: rgba(255, 255, 255, 0.18);
}

.metric-card {
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
    padding: 20px;
    min-height: 132px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    color: var(--admin-text);
}

.metric-card:hover {
    color: var(--admin-text);
    transform: translateY(-2px);
    transition: transform 0.2s ease;
}

.metric-label {
    display: block;
    color: var(--admin-muted);
    font-size: 13px;
    font-weight: 800;
    margin-bottom: 10px;
}

.metric-value {
    font-size: 34px;
    font-weight: 900;
    line-height: 1;
}

.metric-note {
    display: block;
    color: var(--admin-muted);
    font-size: 12px;
    margin-top: 10px;
}

.metric-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--admin-primary);
    flex: 0 0 auto;
}

.metric-icon.is-accent {
    background: var(--admin-accent);
}

.metric-icon.is-info {
    background: var(--admin-info);
}

.metric-icon.is-success {
    background: var(--admin-success);
}

.setup-panel {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-radius: 8px;
    padding: 18px;
}

.setup-panel h5 {
    font-weight: 900;
    color: #9a3412;
}

.setup-list {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.setup-list a {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #7c2d12;
    font-weight: 700;
}

.setup-list a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #f97316;
    flex: 0 0 auto;
}

.content-panel {
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 8px;
    box-shadow: var(--admin-shadow);
}

.content-panel-header {
    padding: 18px 20px;
    border-bottom: 1px solid var(--admin-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.content-panel-header h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 900;
}

.modern-list {
    display: grid;
    gap: 0;
}

.modern-list-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: center;
    padding: 14px 20px;
    border-bottom: 1px solid var(--admin-line);
}

.modern-list-item:last-child {
    border-bottom: 0;
}

.modern-list-item img,
.modern-list-avatar {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    object-fit: cover;
}

.modern-list-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: var(--admin-primary);
    font-weight: 900;
}

.modern-list-title {
    font-weight: 900;
    color: var(--admin-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-list-subtitle {
    color: var(--admin-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.modern-empty {
    padding: 26px;
    color: var(--admin-muted);
    text-align: center;
}

.footer {
    background: transparent;
    color: var(--admin-muted);
}

@media (max-width: 991.98px) {
    .modern-hero {
        grid-template-columns: 1fr;
    }

    .modern-hero-actions {
        justify-content: flex-start;
    }

    .main-content .page-content {
        padding-top: 92px;
    }
}

@media (max-width: 575.98px) {
    .modern-hero {
        padding: 20px;
    }

    .modern-hero h1 {
        font-size: 22px;
    }

    .modern-list-item {
        grid-template-columns: 44px minmax(0, 1fr);
    }

    /* The trailing 3rd child (price/count/status badge, or a plain date) never fit a fixed
       "auto" column on a 2-column mobile grid - it was falling into an implicit column off
       the right edge instead of following the title/subtitle underneath it. */
    .modern-list-item > :nth-child(3) {
        grid-column: 2;
        justify-self: start;
        margin-top: 4px;
    }
}

/* Food add/edit form: the circular image preview next to the upload button was cropping non-
   square photos (object-fit defaults to fill/cover-like clipping at a fixed square size) so only
   part of the actual photo was visible. object-fit: contain keeps the whole photo visible inside
   the circle, letterboxed on a neutral background instead of clipped. */
.food-image-preview {
    background-color: var(--admin-panel);
    object-fit: contain;
}

/* ---------------------------------------------------------------------------
   Phase A foundation (design-system-first admin redesign): page-header,
   form-card, list/table, btn-icon and badge components. Additive only -
   every selector below either targets markup that already exists verbatim
   across the CRUD index/fields views (.card-header, .page-title-box,
   .breadcrumb, .add-new-btn-parent, #data-preview, .dataTables_*) or is a new
   opt-in class (.form-card, .btn-icon) that existing views can adopt
   gradually without any of this being required. Reuses the two breakpoints
   already established above (991.98px / 575.98px) - no new breakpoint.
   --------------------------------------------------------------------------- */

.card-header {
    padding: var(--admin-space-4) var(--admin-space-5);
}

/* .page-title-box only ever nests inside a .card-header alongside .card-title
   and .add-new-btn-parent on index pages (foods, restaurants, staff, ...) -
   scoping through that ancestor keeps this from touching any other page
   that merely has a stray .page-title-box outside this pattern. */
.card-header .page-title-box {
    margin-bottom: 0;
}

.card-header .card-title {
    margin-bottom: var(--admin-space-1);
    font-size: var(--admin-font-h4);
}

.card-header .breadcrumb {
    margin: 0;
    font-size: var(--admin-font-small);
    color: var(--admin-muted);
}

.card-header .breadcrumb-item.active {
    color: var(--admin-muted);
}

.card-header .breadcrumb-item + .breadcrumb-item::before {
    color: var(--admin-muted);
}

.add-new-btn-parent {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* Opt-in wrapper for fields.blade.php forms - tightens vertical rhythm
   between stacked .form-groups and standardizes label weight/color. Existing
   forms keep working untouched until a view adopts .form-card. */
.form-card .form-group,
.form-card .mb-3 {
    margin-bottom: var(--admin-space-4);
}

.form-card .form-label {
    font-weight: 700;
    color: var(--admin-text);
    margin-bottom: var(--admin-space-1);
    font-size: var(--admin-font-small);
}

.form-section-title {
    font-size: var(--admin-font-small);
    font-weight: 800;
    color: var(--admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--admin-space-5) 0 var(--admin-space-3);
    padding-bottom: var(--admin-space-2);
    border-bottom: 1px solid var(--admin-line);
}

/* List/table surfaces: #data-preview wrapper, the DataTables-styled markup
   (server-rendered, no JS plugin instance - see docs), pagination, and the
   card-grid list variant foods/table.blade.php already uses. */
#data-preview {
    padding-top: var(--admin-space-2);
}

.dataTables_filter,
.dataTables_length {
    margin-bottom: var(--admin-space-3);
}

.dataTables_paginate .paginate_button {
    border-radius: var(--admin-radius);
}

.table-responsive {
    border-radius: var(--admin-radius);
}

.tblLocations .card {
    border-radius: var(--admin-radius);
    box-shadow: var(--admin-shadow);
}

/* Card-grid list variant (foods/table.blade.php, food_categories/table.blade.php) - migrated
   out of each view's own inline <style> block per the redesign plan, since both pages shared
   the identical rule verbatim. */
body[data-layout-mode="dark"] #data-preview .card {
    background: #0000002e;
}

.tblLocations.food-grid .card {
    height: 220px;
}

.choices__list.choices__list--dropdown {
    z-index: 15;
}

.mr-10 {
    margin-right: 6px;
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border-radius: var(--admin-radius);
}

.badge {
    font-weight: 700;
    padding: var(--admin-space-1) var(--admin-space-2);
    border-radius: 6px;
}

/* Circular media-upload control (food_categories/fields.blade.php's image + icon uploads) -
   a single reusable "profile picture" style pattern: round preview, small edit button
   overlaid at the corner. The <input type="file"> stays hidden (existing .my-preview/
   data-preview JS wiring untouched) - only the surrounding markup/visuals are new. */
.category-media-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--admin-space-6);
    margin-bottom: var(--admin-space-5);
}

.category-media-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--admin-space-2);
}

.category-media-preview {
    position: relative;
    width: 110px;
    height: 110px;
}

.category-media-preview img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid var(--admin-line);
    background: var(--admin-panel);
    display: block;
}

.category-media-edit-btn {
    position: absolute;
    bottom: 0;
    inset-inline-end: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--admin-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--admin-surface);
    box-shadow: var(--admin-shadow);
    margin: 0;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.category-media-edit-btn:hover {
    background: var(--admin-primary-dark);
}

/* Opens the image-position modal - sits at the opposite corner from
   .category-media-edit-btn (the upload button) so the two never overlap. */
.category-media-position-btn {
    position: absolute;
    bottom: 0;
    inset-inline-start: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #334155;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: 2px solid var(--admin-surface);
    box-shadow: var(--admin-shadow);
    margin: 0;
    padding: 0;
    font-size: 14px;
    transition: background-color 0.2s ease;
}

.category-media-position-btn:hover {
    background: #1f2937;
}

.category-media-label {
    font-size: var(--admin-font-small);
    font-weight: 700;
    color: var(--admin-muted);
}

/* Food form's own reuse of the same media-upload pattern: a colored letter-avatar fallback
   (no default image file exists for foods, unlike categories) sized to fill the same circle,
   and a plain label+switch item ("use default image") sitting alongside it without its own
   circular preview. */
.category-media-letter-avatar {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--admin-primary);
    color: #ffffff;
    font-weight: 900;
    font-size: 36px;
}

.category-media-item-toggle {
    justify-content: center;
}

/* Food/category image focal-point editor - a wide preview cropped the same way the public
   product-details hero (aspect-ratio 4/3, object-fit: cover) actually crops it, so dragging
   the photo here shows admins the same crop the visitor will see, not just a guess. Dragging
   is handled by initImagePositionDrag() in custom.js via Pointer Events (mouse + touch). */
.image-position-control {
    margin-top: var(--admin-space-4);
}

.image-position-preview-frame {
    position: relative;
    width: 100%;
    max-width: 360px;
    aspect-ratio: 4 / 3;
    border-radius: var(--admin-radius);
    overflow: hidden;
    background: var(--admin-panel);
    border: 1px solid var(--admin-line);
    cursor: grab;
}

.image-position-preview-frame.is-dragging {
    cursor: grabbing;
}

.image-position-preview-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Prevent the browser's native drag-a-picture-out ghost image from competing with the
       custom pointer-based drag above, and stop the photo itself being text-selected. */
    -webkit-user-drag: none;
    user-select: none;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .add-new-btn-parent {
        justify-content: flex-start;
        margin-top: var(--admin-space-3);
    }
}

@media (max-width: 575.98px) {
    .card-header {
        padding: var(--admin-space-3) var(--admin-space-4);
    }
}

/* Restaurants index: "Temporarily Deleted Restaurants" panel (30-day soft-delete trash).
   Force-delete is never automatic - the countdown bar/badge is purely informational, and
   the "ready for permanent deletion" state (0 days left) still requires an explicit manual
   click on the danger button, same as any day before it. */
.trash-panel-header {
    padding-top: var(--admin-space-5);
    border-top: 1px solid var(--admin-line);
}

.trash-countdown-bar {
    width: 100%;
    min-width: 120px;
    height: 6px;
    border-radius: 999px;
    background: var(--admin-line);
    overflow: hidden;
}

.trash-countdown-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.2s ease;
}

/* ---------------------------------------------------------------------------
   Auth pages (login/register/forgot-password/reset-password) -
   resources/views/auth/layouts/app.blade.php and its 4 child views. The
   background (restaurant photo, or a gradient fallback) fills the entire
   viewport with a continuous subtle zoom, and the login card floats centered
   on top of it at every screen size - no separate split-screen panel. The
   .form-floating/pristine-validation markup and every input id/name each
   view's JS depends on is untouched.
   --------------------------------------------------------------------------- */

.auth-page {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
}

/* The actual background (restaurant photo, or the gradient fallback) lives on this
   layer instead of directly on .auth-page, so the continuous zoom animation can
   scale just the background - not the card floating on top of it. Oversized via a
   negative inset so the zoomed edges never reveal a gap. JS (login.blade.php) sets
   --auth-hero-bg-image; when unset it's the literal keyword "none", so only the
   gradient (the 2nd, always-present layer) shows. */
.auth-hero::after {
    content: "";
    position: absolute;
    inset: -6%;
    background-image: var(--auth-hero-bg-image, none), linear-gradient(135deg, var(--admin-primary-dark) 0%, var(--admin-primary) 100%);
    background-size: cover;
    background-position: center;
    animation: auth-hero-zoom 22s ease-in-out infinite;
    z-index: 0;
}

/* A dark overlay always sits between the background and the card, so the card
   (and the footer text below it) stay legible whether the background is the
   plain gradient or an arbitrary uploaded photo - stronger once a real photo
   is active (.has-restaurant-image, toggled by login.blade.php's email lookup). */
.auth-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgba(15, 23, 42, 0.35);
    z-index: 1;
    pointer-events: none;
}

.auth-hero.has-restaurant-image::before {
    background-color: rgba(15, 23, 42, 0.55);
}

@keyframes auth-hero-zoom {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.06); }
}

@media (prefers-reduced-motion: reduce) {
    .auth-hero::after {
        animation: none;
    }
}

.auth-form-side {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: var(--admin-space-6) var(--admin-space-4);
}

.auth-card {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    padding: var(--admin-space-6);
    background: var(--admin-surface);
    border: 1px solid var(--admin-line);
    border-radius: 16px;
    box-shadow: var(--admin-shadow);
}

.auth-card h5 {
    color: var(--admin-text);
    font-size: 22px;
    font-weight: 900;
}

.auth-footer-note {
    color: rgba(255, 255, 255, 0.8);
    font-size: var(--admin-font-small);
}

.auth-footer-note a {
    color: #ffffff;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .auth-form-side {
        padding: var(--admin-space-5) var(--admin-space-4);
    }
}

@media (max-width: 575.98px) {
    .auth-card {
        padding: var(--admin-space-5) var(--admin-space-4);
        border-radius: var(--admin-radius);
    }
}

/* /restaurants (Super-Admin) responsive pass: both the active-restaurants table and the
   "Temporarily Deleted Restaurants" table below it share this same row-actions pattern.
   Was a cramped fixed-width .btn-group that squeezed/overlapped its labels on narrow
   viewports - now a flex row that wraps to two lines instead of clipping. */
.restaurant-row-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--admin-space-2);
}

.restaurant-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .restaurant-row-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .restaurant-action-btn {
        justify-content: center;
    }
}