@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;9..144,700&display=swap');
/* Fraunces, for the headings below. Must stay at the top: an @import
   anywhere other than the start of a stylesheet is ignored silently -
   the file still parses, nothing errors, and the font simply never
   arrives. */

/* ============================================================
   admin_theme.css — support-console layout.

   WHAT CHANGED FROM THE PREVIOUS VERSION
   This replaces the navy-and-gold glassmorphism theme, it does not sit
   on top of it. Frosted panels and a heavy drop shadow look good on a
   screenshot and work against you on a tool somebody stares at all day:
   translucency reduces text contrast, and a shadow on every card makes
   a dense page feel noisy.

   The look here is the one in the reference — a narrow dark icon rail,
   a light nav column, a plain neutral canvas, and white cards separated
   by a single hairline rather than by shadow. Borders instead of
   shadows is the main move; it keeps a page with fifteen cards on it
   calm.

   NOTHING IN ANY PAGE'S MARKUP NEEDS TO CHANGE. The generic classes the
   thirteen admin pages already use — .qb-card, .qb-btn, .qb-table,
   .flash, .badge — are restyled here, same as before.

   LOAD ORDER: ../hotel/style.css, then admin.css, then this. Last on
   purpose, so plain selectors win without !important.
   ============================================================ */

:root {
    --ac-canvas:      #F5F6F7;   /* page background */
    --ac-surface:     #FFFFFF;   /* cards */
    --ac-rail:        #12344D;   /* narrow icon rail */
    --ac-rail-active: #1E4E6E;
    --ac-nav:         #FFFFFF;   /* wide nav column */
    --ac-line:        #E1E3E6;   /* the hairline that does all the work */
    --ac-line-soft:   #EDEEF0;
    --ac-ink:         #1B2733;
    --ac-ink-soft:    #62717F;
    --ac-accent:      #12344D;
    --ac-accent-soft: #EAF1F6;
    --ac-radius:      8px;
    --ac-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body, .admin-shell, .admin-main {
    font-family: var(--ac-font);
    color: var(--ac-ink);
    background: var(--ac-canvas);
}

/* ------------------------------------------------------------
   THE ICON RAIL
   New element, rendered by _shell_open.php. It exists so the things
   used twenty times a day — dashboard, inbox, hotels — are one click
   from anywhere without reading a word, which is the point of the
   reference layout.
   ------------------------------------------------------------ */
.ac-rail {
    width: 56px;
    flex-shrink: 0;
    background: var(--ac-rail);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 12px 0;
    gap: 4px;
}

.ac-rail-logo {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: #FFFFFF;
    color: var(--ac-rail);
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 15px;
    margin-bottom: 10px;
}

.ac-rail a {
    width: 40px; height: 40px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 17px;
    color: #C4D4E0;
    text-decoration: none;
    position: relative;
    transition: background 0.14s ease;
}
.ac-rail a:hover { background: rgba(255,255,255,0.10); }
.ac-rail a.active { background: var(--ac-rail-active); color: #FFFFFF; }

/* Unread count, small enough not to shout on every page load. */
.ac-rail .ac-dot {
    position: absolute; top: 5px; right: 5px;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 999px; background: #D93F3F; color: #fff;
    font-size: 10px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--ac-rail);
    box-sizing: content-box;
}

.ac-rail-spacer { flex: 1; }

/* ------------------------------------------------------------
   NAV COLUMN
   Light, not dark — the rail carries the dark weight now. Two dark
   columns side by side read as one wide slab and lose the hierarchy.
   ------------------------------------------------------------ */
.admin-sidebar {
    background: var(--ac-nav);
    border-right: 1px solid var(--ac-line);
    width: 208px;
    padding: 16px 12px;
}

.admin-brand {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ac-ink-soft);
    padding: 4px 10px 14px;
    border-bottom: 1px solid var(--ac-line-soft);
    margin-bottom: 10px;
}

.admin-nav { display: flex; flex-direction: column; gap: 1px; }

.admin-nav a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    border-left: none;
    color: var(--ac-ink);
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.12s ease;
}
.admin-nav a:hover { background: #F2F4F6; }
.admin-nav a.active { background: var(--ac-accent-soft); color: var(--ac-accent); font-weight: 700; }

.nav-badge {
    background: #D93F3F; color: #fff;
    font-size: 11px; font-weight: 800;
    border-radius: 999px; padding: 1px 7px;
    flex-shrink: 0;
}

.admin-sidebar-footer {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ac-line-soft);
    font-size: 12px;
    color: var(--ac-ink-soft);
}
.admin-sidebar-footer a { color: var(--ac-accent); }

/* ------------------------------------------------------------
   TOP BAR + CANVAS
   ------------------------------------------------------------ */
.admin-main {
    background: var(--ac-canvas);
    padding: 0;
    box-sizing: border-box;
    min-width: 0;   /* lets a wide table scroll instead of stretching the shell */
}

.ac-topbar {
    background: var(--ac-surface);
    border-bottom: 1px solid var(--ac-line);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 20;
}

.ac-crumbs {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 700; color: var(--ac-ink);
    min-width: 0;
}
.ac-crumbs .sep { color: var(--ac-ink-soft); font-weight: 400; }
.ac-crumbs .muted { color: var(--ac-ink-soft); font-weight: 500; }

.ac-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.ac-user {
    display: flex; align-items: center; gap: 9px;
    padding-left: 12px; border-left: 1px solid var(--ac-line);
}
.ac-avatar {
    width: 30px; height: 30px; border-radius: 50%;
    background: var(--ac-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px; font-weight: 800; flex-shrink: 0;
}
.ac-user-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.ac-user-role { font-size: 11px; color: var(--ac-ink-soft); }

.ac-page { padding: 20px 22px 40px; }

/* Two-column working area: main content, plus a context column. */
.ac-columns { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
@media (max-width: 1180px) { .ac-columns { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   CARDS
   One hairline border, no shadow. This is the change that makes a
   dense page readable.
   ------------------------------------------------------------ */
.admin-main .qb-card,
.imf-card,
.ac-card {
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    box-shadow: none;
    backdrop-filter: none;
    padding: 18px 20px;
    margin-bottom: 16px;
    overflow-x: auto;
}

.admin-main h1 { font-size: 20px; font-weight: 800; color: var(--ac-ink); margin: 0 0 4px; letter-spacing: -0.01em; }
.admin-main h2 { font-size: 13px; font-weight: 800; color: var(--ac-ink); text-transform: uppercase; letter-spacing: 0.05em; }

.admin-main .qb-card > h2:first-child,
.imf-card h2,
.ac-card > h2:first-child {
    margin: 0 0 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ac-line-soft);
    color: var(--ac-ink-soft);
}

/* The old header block: flattened to match everything else. */
.imf-header {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 14px;
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    box-shadow: none; backdrop-filter: none;
    padding: 18px 20px;
}
.imf-header h1 { font-size: 20px; font-weight: 800; margin: 0 0 3px; color: var(--ac-ink); }
.imf-header p { font-size: 13px; color: var(--ac-ink-soft); margin: 0; font-weight: 500; }

.imf-profile-badge { display: flex; align-items: center; gap: 10px; }
.imf-profile-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--ac-accent); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 800; box-shadow: none; flex-shrink: 0;
}
.imf-profile-info { display: flex; flex-direction: column; }
.imf-profile-role { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ac-ink-soft); font-weight: 700; }
.imf-profile-name { font-size: 14px; font-weight: 800; color: var(--ac-ink); }

/* ------------------------------------------------------------
   STATS
   Smaller than before. On a console these are a glance, not a hero -
   giant numbers push the actual work below the fold.
   ------------------------------------------------------------ */
.imf-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }

.imf-stat-card {
    background: var(--ac-surface);
    border: 1px solid var(--ac-line);
    border-radius: var(--ac-radius);
    box-shadow: none; backdrop-filter: none;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    transition: border-color 0.15s ease;
}
.imf-stat-card:hover { border-color: #C7CDD3; transform: none; }

.imf-stat-icon {
    width: 36px; height: 36px; border-radius: 7px;
    background: var(--ac-accent-soft); color: var(--ac-accent);
    border: none;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.imf-stat-number { font-size: 21px; font-weight: 800; color: var(--ac-ink); line-height: 1.1; }
.imf-stat-label  { font-size: 12.5px; color: var(--ac-ink-soft); margin-top: 2px; font-weight: 600; }

.imf-two-col { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1024px) { .imf-two-col { grid-template-columns: minmax(0, 1fr); } }

/* ------------------------------------------------------------
   BUTTONS
   ../hotel/style.css paints every <button> the hotel app's green, which
   belongs to a different product. Restated here, smaller and flatter.
   ------------------------------------------------------------ */
.admin-main button,
.admin-main .qb-btn,
.ac-btn {
    background: var(--ac-accent);
    border: 1px solid var(--ac-accent);
    color: #FFFFFF;
    border-radius: 6px;
    font-family: var(--ac-font);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 14px;
    box-shadow: none;
    transition: background 0.12s ease;
}
.admin-main button:hover, .admin-main .qb-btn:hover, .ac-btn:hover {
    background: #0D2739; border-color: #0D2739; color: #fff; transform: none; box-shadow: none;
}
.admin-main button:disabled { background: #C9CFD5; border-color: #C9CFD5; color: #7A848D; }

/* Secondary — used by the top bar and any page marking a lighter action. */
.ac-btn-ghost, .admin-main .qb-btn.ghost {
    background: #FFFFFF; color: var(--ac-ink); border: 1px solid var(--ac-line);
}
.ac-btn-ghost:hover, .admin-main .qb-btn.ghost:hover { background: #F2F4F6; color: var(--ac-ink); border-color: #C7CDD3; }

.admin-main .danger, .admin-main button.danger {
    background: #FFFFFF; border: 1px solid var(--ac-line); color: #B3261E; box-shadow: none;
}
.admin-main .danger:hover, .admin-main button.danger:hover { background: #FDF2F2; border-color: #B3261E; color: #B3261E; }

.imf-quick-actions { display: flex; flex-direction: column; gap: 6px; }
.imf-quick-action-btn {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px;
    background: #FFFFFF;
    border: 1px solid var(--ac-line);
    border-radius: 6px;
    color: var(--ac-ink);
    text-decoration: none;
    font-weight: 600; font-size: 13px;
    transition: background 0.12s ease, border-color 0.12s ease;
}
.imf-quick-action-btn:hover { background: var(--ac-accent-soft); border-color: var(--ac-accent); color: var(--ac-accent); padding-left: 12px; }

/* ------------------------------------------------------------
   TABLES — dense, which is the point of a console.
   ------------------------------------------------------------ */
.admin-main .qb-table, .admin-main .admin-jobs-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.admin-main .qb-table th, .admin-main .admin-jobs-table th {
    text-align: left;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800;
    color: var(--ac-ink-soft);
    background: #FAFBFC;
    border-bottom: 1px solid var(--ac-line);
    padding: 9px 10px;
}
.admin-main .qb-table td, .admin-main .admin-jobs-table td {
    padding: 10px; border-bottom: 1px solid var(--ac-line-soft); vertical-align: top;
}
.admin-main .qb-table tbody tr:hover, .admin-main .admin-jobs-table tbody tr:hover { background: #FAFBFC; }

/* ------------------------------------------------------------
   FORMS
   ------------------------------------------------------------ */
.admin-main label {
    font-size: 11px; font-weight: 800; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--ac-ink-soft); margin-bottom: 5px;
}
.admin-main input:not([type="checkbox"]):not([type="radio"]),
.admin-main select,
.admin-main textarea {
    border: 1px solid #C9CFD5;
    border-radius: 6px;
    font-family: var(--ac-font);
    font-size: 13.5px;
    padding: 9px 11px;
    background: #FFFFFF;
}
.admin-main input:not([type="checkbox"]):not([type="radio"]):focus,
.admin-main select:focus, .admin-main textarea:focus {
    outline: none; border-color: var(--ac-accent); box-shadow: 0 0 0 3px rgba(18,52,77,0.10);
}
.admin-main input[type="checkbox"], .admin-main input[type="radio"] { accent-color: var(--ac-accent); }

/* ------------------------------------------------------------
   FLASHES + BADGES
   ------------------------------------------------------------ */
.admin-main .flash {
    border-radius: 6px; font-weight: 600; font-size: 13.5px;
    border: 1px solid transparent; box-shadow: none; padding: 11px 14px;
}
.admin-main .flash.success { background: #EDF7EE; border-color: #BFE0C3; color: #1E5B27; }
.admin-main .flash.error   { background: #FDF2F2; border-color: #F0C8C8; color: #97231D; }

.admin-main .badge {
    border-radius: 4px; font-size: 11px; font-weight: 800;
    letter-spacing: 0.02em; padding: 3px 7px; text-transform: uppercase;
}

/* ------------------------------------------------------------
   RESPONSIVE
   Below tablet the rail becomes a top strip and the nav collapses,
   because 56 + 208px of chrome on a phone leaves nothing for a table.
   ------------------------------------------------------------ */
@media (max-width: 900px) {
    .admin-shell { flex-direction: column; }
    .ac-rail { width: auto; flex-direction: row; padding: 8px 12px; gap: 6px; overflow-x: auto; }
    .ac-rail-logo { margin-bottom: 0; }
    .ac-rail-spacer { display: none; }
    .admin-sidebar { width: auto; border-right: none; border-bottom: 1px solid var(--ac-line); padding: 10px 12px; }
    .admin-nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
    .admin-nav a { padding: 7px 11px; font-size: 12.5px; }
    .admin-brand { display: none; }
    .ac-page { padding: 14px; }
    .ac-topbar { padding: 10px 14px; }
}

/* ============================================================
   HEADING TYPEFACE
   ------------------------------------------------------------
   Matches the guest-facing site. ../hotel/style.css is loaded
   before this file and already imports Fraunces, so there is no
   second font request - this only stops the rules below from
   overriding it with system sans.

   The @import is a safety net for any admin page that does not
   pull in style.css; a duplicate import of the same URL is one
   cached request, not two.
   ============================================================ */

h1, h3, .headline,
.admin-main h1,
.imf-header h1 {
    font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
    letter-spacing: -0.3px;
}

/* Deliberately excluded: .admin-main h2.
   It is 13px, uppercase and letter-spaced - a section label above a
   table rather than a heading. A display serif in caps at that size is
   harder to read than the sans it replaces, which is the opposite of
   what a type change is for. */