:root {
    --primary: #014A98;
    --primary-dark: #003875;
    --primary-soft: #e8f1fb;
    --white: #ffffff;
    --black: #111827;
    --gray-50: #f8fafc;
    --gray-100: #f1f5f9;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
    --gray-500: #6b7280;
    --gray-700: #374151;
    --success: #117a37;
    --warning: #b77905;
    --danger: #b42318;
    --info: #0369a1;
    --shadow: 0 18px 45px rgba(17, 24, 39, .10);
    --radius: 20px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    color: var(--black);
    background:
        radial-gradient(circle at top left, rgba(1, 74, 152, .10), transparent 34rem),
        linear-gradient(180deg, var(--gray-50), var(--white));
    min-height: 100vh;
}

a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 16px clamp(18px, 4vw, 52px);
    background: rgba(255, 255, 255, .92);
    border-bottom: 1px solid var(--gray-200);
    backdrop-filter: blur(14px);
}

.brand, .auth-brand, .track-brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: var(--primary);
    color: var(--white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    letter-spacing: -.03em;
    box-shadow: 0 12px 25px rgba(1, 74, 152, .24);
    flex: 0 0 auto;
}

.brand a.brand-mark { color: var(--white); text-decoration: none; }
.brand-title { font-weight: 850; font-size: 1.03rem; }
.brand-subtitle { color: var(--gray-500); font-size: .84rem; margin-top: 2px; }

.topnav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topnav a, .nav-user {
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--gray-700);
    font-weight: 700;
    font-size: .94rem;
}

.topnav a:hover { background: var(--primary-soft); color: var(--primary); text-decoration: none; }
.nav-user { background: var(--gray-100); color: var(--black); }
.nav-toggle { display: none; border: 0; background: var(--primary); color: var(--white); border-radius: 12px; width: 42px; height: 42px; font-size: 1.4rem; }

.page-shell {
    width: min(1240px, calc(100% - 36px));
    margin: 28px auto 48px;
}

.page-shell-plain { max-width: 860px; }

.card, .hero-card {
    background: rgba(255,255,255,.96);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.hero-card {
    display: grid;
    grid-template-columns: 1fr minmax(220px, 320px);
    align-items: center;
    gap: 24px;
    padding: clamp(24px, 4vw, 44px);
    margin-bottom: 24px;
    overflow: hidden;
    position: relative;
}

.hero-card::after {
    content: "";
    position: absolute;
    right: -80px;
    top: -100px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(1, 74, 152, .08);
}

.eyebrow {
    color: var(--primary);
    text-transform: uppercase;
    font-size: .78rem;
    font-weight: 900;
    letter-spacing: .12em;
}

h1, h2, h3 { margin: 0; line-height: 1.15; letter-spacing: -.03em; }
h1 { font-size: clamp(2rem, 4vw, 3.6rem); margin-top: 8px; }
h2 { font-size: clamp(1.35rem, 2vw, 1.85rem); }
h3 { font-size: 1.05rem; }
p { line-height: 1.7; color: var(--gray-700); }

.hero-panel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 22px;
    border-radius: 18px;
    background: var(--primary-soft);
    border: 1px solid rgba(1, 74, 152, .15);
}

.hero-number {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    font-size: 2rem;
    font-weight: 950;
    background: var(--primary);
    color: var(--white);
}

.hero-panel span { display: block; color: var(--gray-500); margin-top: 4px; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }

.card { padding: clamp(18px, 3vw, 28px); margin-bottom: 24px; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.section-heading p { margin: 8px 0 0; }

.smart-form, .filters-form, .action-form { display: grid; gap: 16px; }
.form-grid { display: grid; gap: 16px; }
.form-grid.two, .date-time-grid { grid-template-columns: 1fr 1fr; }

label {
    display: grid;
    gap: 7px;
    color: var(--black);
    font-weight: 800;
    font-size: .93rem;
}

input, select, textarea {
    width: 100%;
    border: 1px solid var(--gray-300);
    border-radius: 14px;
    padding: 13px 14px;
    font: inherit;
    color: var(--black);
    background: var(--white);
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

textarea { resize: vertical; min-height: 110px; }
input:focus, select:focus, textarea:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(1, 74, 152, .12);
}

input:invalid:not(:placeholder-shown), textarea:invalid:not(:placeholder-shown), select:invalid:not(:placeholder-shown) { border-color: var(--danger); }
.field-help { font-size: .82rem; color: var(--gray-500); font-weight: 650; }
.department-note.is-coming-soon {
    color: #7c5700;
    background: #fff8e6;
    border: 1px solid #ead9a7;
    border-radius: 8px;
    padding: 8px 10px;
}

button:disabled,
.btn:disabled {
    cursor: not-allowed;
    opacity: .58;
    transform: none;
    box-shadow: none;
}

.muted { color: var(--gray-500); font-size: .9rem; }
.center { text-align: center; }

.btn {
    border: 1px solid var(--primary);
    background: var(--primary);
    color: var(--white);
    border-radius: 14px;
    padding: 11px 16px;
    font-weight: 850;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 12px 22px rgba(1, 74, 152, .18);
    transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.btn:hover { transform: translateY(-1px); background: var(--primary-dark); text-decoration: none; }
.btn-outline { background: var(--white); color: var(--primary); box-shadow: none; }
.btn-outline:hover { color: var(--white); }
.btn-danger { background: var(--danger); border-color: var(--danger); }
.btn-danger:hover { background: #8d1c13; }
.btn-muted { background: var(--gray-700); border-color: var(--gray-700); }
.btn-small { padding: 8px 11px; border-radius: 11px; font-size: .86rem; }
.btn-lg { padding: 14px 20px; min-height: 50px; }
.full { width: 100%; }
.form-actions, .button-row, .copy-row, .filter-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.copy-row input { flex: 1 1 320px; }

.alert {
    border-radius: 16px;
    padding: 14px 16px;
    margin-bottom: 18px;
    border: 1px solid var(--gray-200);
    background: var(--gray-50);
    color: var(--gray-700);
}
.alert ul { margin: 8px 0 0; padding-left: 20px; }
.alert-success { background: #ecfdf3; color: #05603a; border-color: #abefc6; }
.alert-error { background: #fff1f1; color: #8d1c13; border-color: #ffc9c9; }

.success-card { display: flex; gap: 18px; align-items: flex-start; border-color: #abefc6; }
.success-icon { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: #ecfdf3; color: var(--success); font-size: 1.7rem; font-weight: 900; flex: 0 0 auto; }

.auth-page .page-shell { min-height: calc(100vh - 160px); display: grid; place-items: start center; }
.auth-card { width: min(100%, 480px); margin-top: 24px; }
.wide-auth { width: min(100%, 720px); }
.auth-brand { margin-bottom: 22px; }
.auth-brand h1 { font-size: 2rem; }

.dashboard-hero { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.stats-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 14px; margin-bottom: 24px; }
.stat-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: 18px; padding: 18px; box-shadow: 0 10px 25px rgba(17,24,39,.07); }
.stat-card span { display: block; color: var(--gray-500); font-weight: 800; font-size: .83rem; }
.stat-card strong { display: block; margin-top: 10px; font-size: 2rem; letter-spacing: -.05em; }
.status-border { border-left: 5px solid var(--primary); }

.responsive-table { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; }
th, td { text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--gray-200); vertical-align: top; }
th { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gray-500); background: var(--gray-50); }
td { font-size: .94rem; }
tr:hover td { background: #fbfdff; }
.mini-note { display: block; color: var(--gray-500); font-size: .78rem; margin-top: 3px; }

.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 6px 10px;
    font-size: .78rem;
    font-weight: 900;
    border: 1px solid transparent;
    white-space: nowrap;
}
.status-pill.big { font-size: .95rem; padding: 9px 14px; }
.status-pending { background: #fff7e6; color: #8a5a00; border-color: #f6d89b; }
.status-approved { background: #ecfdf3; color: #05603a; border-color: #abefc6; }
.status-rejected { background: #fff1f1; color: #8d1c13; border-color: #ffc9c9; }
.status-rescheduled { background: #eff6ff; color: #014A98; border-color: #bfdbfe; }
.status-cancelled { background: #f3f4f6; color: #374151; border-color: #d1d5db; }

.filters-form {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: end;
}
.filter-actions { align-self: end; }

.details-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.back-link { display: inline-block; margin-bottom: 12px; font-weight: 850; }
.status-box { text-align: right; display: grid; gap: 8px; justify-items: end; }
.details-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(360px, .8fr); gap: 24px; align-items: start; }
.lower-grid { grid-template-columns: 1fr 1fr; }
.detail-list { display: grid; grid-template-columns: 170px 1fr; gap: 12px 18px; margin: 0; }
.detail-list dt { color: var(--gray-500); font-weight: 850; }
.detail-list dd { margin: 0; font-weight: 700; }
.message-box { margin-top: 18px; padding: 16px; border: 1px solid var(--gray-200); background: var(--gray-50); border-radius: 16px; }
.message-box p { margin: 8px 0 0; }
.visitor-response { border-color: rgba(1, 74, 152, .20); background: var(--primary-soft); }
.action-form + .action-form { margin-top: 18px; }
.split-border { padding-top: 18px; border-top: 1px solid var(--gray-200); }

.note-list, .timeline { display: grid; gap: 14px; margin-top: 18px; }
.note-item, .timeline-item { border: 1px solid var(--gray-200); border-radius: 16px; padding: 14px; background: var(--gray-50); }
.note-item span, .timeline-item span { display: block; color: var(--gray-500); font-size: .84rem; margin-top: 3px; }
.note-item p, .timeline-item p { margin: 8px 0 0; }
.timeline-item { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 10px; }
.timeline-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--primary); margin-top: 5px; box-shadow: 0 0 0 5px rgba(1, 74, 152, .12); }
.empty-state { padding: 32px; text-align: center; background: var(--gray-50); border: 1px dashed var(--gray-300); border-radius: 18px; }
.empty-state.compact { padding: 18px; }
.empty-state h2, .empty-state h3 { margin-bottom: 8px; }

.tracking-shell { display: grid; place-items: start center; }
.tracking-card { width: min(100%, 760px); }
.track-brand { margin-bottom: 24px; }
.track-brand h1 { font-size: 2rem; }
.track-status { border-radius: 22px; padding: 28px; margin-bottom: 22px; display: grid; place-items: center; text-align: center; border: 1px solid var(--gray-200); }
.track-status span { font-size: clamp(2rem, 5vw, 3.2rem); font-weight: 950; letter-spacing: -.05em; }
.track-status small { margin-top: 6px; color: var(--gray-500); font-weight: 800; }
.track-list { margin-top: 12px; }
.public-response { margin-top: 24px; padding: 18px; border-radius: 18px; }
.expired-state { border-color: #ffc9c9; background: #fff8f8; }
.error-page { text-align: center; padding: 60px 24px; }

.footer {
    width: min(1240px, calc(100% - 36px));
    margin: 0 auto 24px;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: var(--gray-500);
    font-size: .85rem;
    padding-top: 8px;
}

.loading button[type="submit"] { opacity: .75; pointer-events: none; }

@media (max-width: 1080px) {
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .filters-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .details-grid, .lower-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .topbar { align-items: flex-start; }
    .brand-subtitle { display: none; }
    .nav-toggle { display: inline-grid; place-items: center; margin-left: auto; }
    .topnav {
        display: none;
        position: absolute;
        left: 18px;
        right: 18px;
        top: 76px;
        background: var(--white);
        border: 1px solid var(--gray-200);
        border-radius: 18px;
        box-shadow: var(--shadow);
        padding: 10px;
        flex-direction: column;
        align-items: stretch;
    }
    .topnav.is-open { display: flex; }
    .nav-user { text-align: center; }
    .page-shell { width: min(100% - 24px, 1240px); margin-top: 18px; }
    .hero-card { grid-template-columns: 1fr; }
    .dashboard-hero, .details-header, .section-heading { flex-direction: column; }
    .hero-actions, .status-box { align-items: stretch; justify-content: flex-start; text-align: left; justify-items: start; }
    .form-grid.two, .date-time-grid, .filters-form { grid-template-columns: 1fr; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
    .detail-list { grid-template-columns: 1fr; gap: 4px; }
    .detail-list dd { padding-bottom: 8px; border-bottom: 1px solid var(--gray-200); }
    table { min-width: 0; border: 0; }
    thead { display: none; }
    tr { display: block; margin-bottom: 14px; border: 1px solid var(--gray-200); border-radius: 18px; padding: 12px; background: var(--white); box-shadow: 0 10px 22px rgba(17,24,39,.06); }
    td { display: flex; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--gray-100); padding: 10px 4px; }
    td::before { content: attr(data-label); color: var(--gray-500); font-weight: 900; flex: 0 0 42%; }
    td:last-child { border-bottom: 0; }
    .responsive-table { overflow: visible; }
    .footer { flex-direction: column; width: min(100% - 24px, 1240px); }
}

@media (max-width: 480px) {
    .stats-grid { grid-template-columns: 1fr; }
    .brand-title { font-size: .95rem; }
    .brand-mark { width: 42px; height: 42px; border-radius: 14px; }
    .card, .hero-card { border-radius: 16px; padding: 18px; }
    h1 { font-size: 1.9rem; }
    .copy-row, .button-row, .form-actions { align-items: stretch; }
    .copy-row .btn, .button-row .btn, .form-actions .btn { width: 100%; }
}

/* Haif Company visual refresh */
body {
    background:
        linear-gradient(180deg, #f4f6f9 0%, #ffffff 52%),
        radial-gradient(circle at top right, rgba(1, 74, 152, .10), transparent 34rem);
}

.topbar {
    background: #014A98;
    color: #ffffff;
    border-bottom: 0;
    box-shadow: 0 10px 28px rgba(1, 74, 152, .22);
    backdrop-filter: none;
}

.brand-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent !important;
    border-radius: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    flex: 0 0 auto;
}

.brand-logo-link:hover { text-decoration: none; }

.brand-logo {
    display: block;
    width: 96px;
    max-width: 28vw;
    height: 42px;
    object-fit: contain;
}

.auth-logo {
    width: 118px;
    height: 54px;
    background: #ffffff;
    border: 1px solid var(--gray-200);
    border-radius: 16px;
    padding: 8px;
    box-shadow: 0 12px 24px rgba(17, 24, 39, .08);
}

.topbar .brand-title,
.topbar .brand-subtitle,
.topbar .topnav a,
.topbar .nav-user {
    color: #ffffff;
}

.topbar .brand-title { font-size: 1.08rem; letter-spacing: -.02em; }
.topbar .brand-subtitle { color: rgba(255, 255, 255, .78); }

.topbar .topnav a:hover {
    background: rgba(255, 255, 255, .13);
    color: #ffffff;
}

.topbar .nav-user {
    background: rgba(255, 255, 255, .14);
}

.topbar .btn-outline {
    background: #ffffff;
    color: #014A98;
    border-color: #ffffff;
}

.topbar .btn-outline:hover {
    background: #f1f5f9;
    color: #014A98;
}

.nav-toggle {
    background: #ffffff;
    color: #014A98;
}

.hero-card.hero-simple {
    grid-template-columns: 1fr auto;
    background:
        linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    border: 1px solid rgba(1, 74, 152, .10);
    box-shadow: 0 18px 50px rgba(17, 24, 39, .08);
}

.hero-card.hero-simple::after {
    background: linear-gradient(135deg, rgba(1, 74, 152, .12), rgba(1, 74, 152, .03));
}

.hero-simple h1 {
    font-size: clamp(2.2rem, 5vw, 4.2rem);
    color: #0f172a;
    margin-top: 10px;
}

.hero-panel {
    background: #014A98;
    color: #ffffff;
    border-color: #014A98;
    box-shadow: 0 16px 30px rgba(1, 74, 152, .24);
}

.hero-panel span { color: rgba(255, 255, 255, .82); }
.hero-number { background: #ffffff; color: #014A98; }

.form-card {
    border-top: 5px solid #014A98;
}

input, select, textarea {
    background: #ffffff;
    border-color: #cbd5e1;
}

input:hover, select:hover, textarea:hover {
    border-color: #94a3b8;
}

select option:disabled {
    color: #9ca3af;
    background: #f3f4f6;
}

.availability-note {
    display: block;
    color: #667085;
}

.field-warning {
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    padding: 3px 8px;
    border-radius: 999px;
    color: #92400e;
    background: #fffbeb;
    border: 1px solid #fde68a;
    font-weight: 800;
}

.field-warning[hidden] { display: none; }

.card, .hero-card {
    border-color: rgba(15, 23, 42, .08);
}

.footer {
    border-top: 1px solid var(--gray-200);
    padding-top: 16px;
}

@media (max-width: 760px) {
    .topnav {
        background: #014A98;
        border-color: rgba(255, 255, 255, .22);
    }

    .hero-card.hero-simple {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .brand-logo { width: 78px; height: 36px; }
    .brand-logo-link { padding: 7px 8px; border-radius: 12px; }
    .auth-logo { width: 104px; }
}

/* Requested public reservation refinements */
.topbar .brand-logo-link,
.brand-logo-link {
    background: transparent;
    box-shadow: none;
    padding: 0;
    border-radius: 0;
}

.topbar .brand-logo {
    width: 132px;
    height: auto;
    max-width: 34vw;
}

.hero-simple h1 {
    font-size: clamp(1.85rem, 4vw, 3.25rem);
    margin-top: 0;
}

.reservation-page .hero-card.hero-simple {
    padding: clamp(22px, 3.4vw, 36px);
}

/* Keep the employee/manager area hidden from public navigation. Direct URLs still work. */
.topbar:not(:has(.topnav)) {
    justify-content: flex-start;
}

/* New Haif footer */
.site-footer {
    background: linear-gradient(180deg, #014A98 0%, #003875 100%);
    color: #ffffff;
    padding: 36px 0 28px;
    width: 100%;
    margin-top: 48px;
    box-shadow: 0 -18px 45px rgba(1, 74, 152, .18);
}

.footer-logo-row {
    text-align: center;
    margin-bottom: 22px;
}

.footer-logo-row img {
    width: min(300px, 72vw);
    height: auto;
    display: inline-block;
}

.footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 22px;
}

.footer-tagline {
    text-align: center;
    padding-bottom: 24px;
    margin-bottom: 8px;
}

.footer-tagline h2 {
    color: #ffffff;
    font-weight: 750;
    font-size: clamp(1.25rem, 2.2vw, 1.95rem);
    letter-spacing: -.025em;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.35fr) repeat(3, minmax(160px, .75fr));
    gap: clamp(28px, 5vw, 72px);
    align-items: start;
}

.footer-col h3 {
    color: #ffffff;
    font-size: 1.05rem;
    margin-bottom: 8px;
}

.footer-line {
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 999px;
    background: #7db6f2;
    margin: 0 0 14px;
}

.footer-col p,
.footer-col li,
.footer-col a {
    color: rgba(255, 255, 255, .88);
    font-size: .92rem;
    line-height: 1.8;
}

.footer-col p { margin: 0; }

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col a:hover {
    color: #ffffff;
    text-decoration: underline;
}

.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.social-links a {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #ffffff;
    font-weight: 900;
    font-size: .82rem;
    text-decoration: none;
}

.social-links a:hover {
    background: rgba(255, 255, 255, .24);
    text-decoration: none;
}

.footer-bottom {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, .18);
    color: rgba(255, 255, 255, .82);
    font-size: .82rem;
    text-align: center;
}

@media (max-width: 900px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 620px) {
    .topbar .brand-logo { width: 112px; }
    .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .footer-col,
    .footer-about {
        text-align: left;
    }
    .site-footer {
        padding-top: 30px;
    }
}

/* Final Haif public header/footer fixes */
.topbar .brand-logo-link,
.brand-logo-link {
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.topbar .brand-logo,
.brand-logo {
    background: transparent !important;
    display: block;
}

.site-footer,
.site-footer * {
    box-sizing: border-box;
}

.site-footer {
    clear: both;
    display: block;
    width: 100%;
    margin: 56px 0 0;
    padding: 38px 0 28px;
    background: linear-gradient(180deg, #014A98 0%, #003875 100%) !important;
    color: #ffffff !important;
}

.site-footer a,
.site-footer p,
.site-footer li,
.site-footer h2,
.site-footer h3,
.site-footer .footer-bottom {
    color: #ffffff;
}

.site-footer a {
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

.footer-logo-row img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Final header layout: full-width blue bar, with logo/title aligned to the page content width */
.topbar {
    width: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
}

.topbar-inner {
    width: min(1240px, calc(100% - 36px));
    margin: 0 auto;
    min-height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 0;
    position: relative;
}

@media (max-width: 760px) {
    .topbar-inner {
        width: min(100% - 24px, 1240px);
        min-height: 68px;
        align-items: center;
    }

    .topnav {
        left: 0;
        right: 0;
        top: 76px;
    }
}

/* Corporate refinement pass - requested fixes */
:root {
    --shadow: 0 10px 24px rgba(17, 24, 39, .08);
    --radius: 14px;
}

body {
    background: #f5f7fa !important;
    color: #111827;
}

.page-shell {
    margin-top: 24px;
}

.topbar {
    background: #014A98 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .16) !important;
}

.topbar-inner {
    min-height: 66px;
    padding: 10px 0;
}

.brand {
    gap: 12px;
}

.topbar .brand-logo-link,
.topbar .brand-logo-link:link,
.topbar .brand-logo-link:visited,
.topbar .brand-logo-link:hover,
.topbar .brand-logo-link:active {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    outline-offset: 4px;
}

.topbar .brand-logo,
.brand-logo {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

.topbar .brand-title {
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: 0;
}

.topbar .brand-subtitle {
    font-size: .78rem;
    font-weight: 650;
}

/* Logout button visibility in all states */
.topbar .topnav a.btn-logout,
.topbar .topnav a.btn-logout:link,
.topbar .topnav a.btn-logout:visited {
    background: #ffffff !important;
    color: #014A98 !important;
    border: 1px solid #ffffff !important;
    box-shadow: none !important;
    padding: 8px 13px !important;
}

.topbar .topnav a.btn-logout:hover,
.topbar .topnav a.btn-logout:focus {
    background: #eef5ff !important;
    color: #003875 !important;
    border-color: #eef5ff !important;
    text-decoration: none !important;
    transform: none;
}

.topbar .topnav a.btn-logout:active {
    background: #dbeafe !important;
    color: #002f62 !important;
    transform: translateY(1px);
}

.card,
.hero-card {
    background: #ffffff !important;
    border: 1px solid #d9e2ec !important;
    border-radius: 14px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .07) !important;
}

.card {
    padding: clamp(18px, 2.4vw, 26px);
}

.hero-card.hero-simple {
    background: #ffffff !important;
    border-left: 4px solid #014A98 !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, .06) !important;
}

.hero-card.hero-simple::after {
    display: none;
}

.reservation-page .hero-card.hero-simple {
    padding: clamp(20px, 3vw, 30px);
}

.reservation-page .hero-simple h1 {
    font-size: clamp(1.75rem, 3vw, 2.45rem) !important;
    letter-spacing: -.02em;
}

.hero-panel {
    border-radius: 12px !important;
    box-shadow: none !important;
    padding: 16px 18px !important;
}

.hero-number {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    font-size: 1.55rem;
}

h1, h2, h3 {
    letter-spacing: -.015em;
}

h1 {
    font-size: clamp(1.85rem, 3vw, 2.8rem);
}

.section-heading {
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 14px;
    margin-bottom: 20px;
}

.form-card {
    border-top: 0 !important;
}

label {
    font-weight: 750;
    font-size: .9rem;
}

input,
select,
textarea {
    border-radius: 9px !important;
    border-color: #cbd5e1 !important;
    padding: 12px 13px !important;
    box-shadow: none !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #014A98 !important;
    box-shadow: 0 0 0 3px rgba(1, 74, 152, .12) !important;
}

.btn {
    border-radius: 9px !important;
    box-shadow: none !important;
    font-weight: 800;
}

.btn:hover {
    transform: none;
}

.btn:active {
    transform: translateY(1px);
}

.btn-outline {
    background: #ffffff;
    color: #014A98;
}

.btn-outline:hover {
    background: #014A98;
    color: #ffffff;
}

/* Login/register/tracking heading cleanup after removing empty logo boxes */
.auth-brand,
.track-brand {
    gap: 0;
    align-items: flex-start;
    margin-bottom: 20px;
}

.auth-brand h1,
.track-brand h1 {
    font-size: clamp(1.6rem, 3vw, 2.05rem);
}

.auth-brand p {
    margin: 8px 0 0;
}

.auth-logo {
    display: none !important;
}

.auth-card {
    margin-top: 18px;
}

.tracking-card {
    max-width: 760px;
}

.track-status {
    border-radius: 14px;
    padding: 22px;
}

/* Polished request submitted box */
.success-card-polished {
    align-items: center;
    gap: 18px;
    border-right: 6px solid #014A98 !important;
    border-left: 1px solid #d9e2ec !important;
    background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%) !important;
    padding: clamp(20px, 3vw, 30px) !important;
}

.success-card-polished .success-icon {
    width: 58px;
    height: 58px;
    border-radius: 12px;
    background: #e8f1fb;
    color: #014A98;
}

.success-content {
    flex: 1 1 auto;
    min-width: 0;
}

.success-content h2 {
    margin-bottom: 6px;
}

.success-content p {
    margin: 0 0 14px;
}

.tracking-copy-row {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) auto auto;
    gap: 10px;
    align-items: center;
}

.tracking-copy-row input {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
    background: #ffffff;
}

.tracking-copy-row .btn {
    white-space: nowrap;
    min-height: 44px;
}

/* More practical dashboard/table surfaces */
.dashboard-hero {
    border-left: 4px solid #014A98 !important;
}

.stat-card {
    border-radius: 12px;
    box-shadow: 0 5px 14px rgba(15, 23, 42, .06);
}

th {
    background: #eef2f7;
    color: #334155;
}

tr:hover td {
    background: #f8fafc;
}

.note-item,
.timeline-item,
.message-box,
.empty-state {
    border-radius: 12px;
}

/* Footer CSS reinforcement */
.site-footer {
    background: #014A98 !important;
    color: #ffffff !important;
    margin-top: 48px !important;
    padding: 34px 0 24px !important;
}

.footer-logo-row img {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.footer-inner {
    width: min(1200px, calc(100% - 40px));
    max-width: none;
}

.footer-tagline {
    border-bottom: 1px solid rgba(255, 255, 255, .16);
    margin-bottom: 24px;
}

.footer-grid {
    gap: clamp(24px, 4vw, 56px);
}

.footer-col h3 {
    font-size: 1rem;
}

.footer-line {
    background: #8ec5ff !important;
}

@media (prefers-color-scheme: dark) {
    .topbar .topnav a.btn-logout,
    .topbar .topnav a.btn-logout:link,
    .topbar .topnav a.btn-logout:visited {
        background: #ffffff !important;
        color: #014A98 !important;
        border-color: #ffffff !important;
    }
}

@media (max-width: 760px) {
    .topbar-inner {
        min-height: 62px;
    }

    .topnav {
        top: 70px;
    }

    .hero-panel {
        width: 100%;
    }

    .tracking-copy-row {
        grid-template-columns: 1fr;
    }

    .tracking-copy-row .btn {
        width: 100%;
    }

    .success-card-polished {
        align-items: flex-start;
        border-right-width: 4px !important;
    }

    .section-heading {
        align-items: flex-start;
    }
}

/* Dashboard quick filters and read-only reception schedule */
.quick-actions,
.quick-filter-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.quick-actions .btn,
.quick-filter-bar .btn {
    white-space: nowrap;
}

.reception-hero {
    margin-bottom: 20px;
}

.reception-lock {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    padding: 8px 14px;
    border: 1px solid #b8cbe2;
    border-radius: 8px;
    background: #eef5fc;
    color: #014A98;
    font-size: .86rem;
    font-weight: 800;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.reception-days-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    align-items: start;
}

.reception-day-card {
    padding: 0;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 7px 18px rgba(15, 23, 42, .07);
}

.reception-day-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 18px 20px;
    background: #f4f7fa;
    border-bottom: 1px solid #dce3ea;
}

.reception-day-header h2 {
    margin: 4px 0 0;
    font-size: 1rem;
    line-height: 1.35;
}

.meeting-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    border-radius: 8px;
    background: #014A98;
    color: #ffffff;
    font-size: .9rem;
    font-weight: 800;
}

.reception-meeting-list {
    display: grid;
}

.reception-meeting-row {
    display: grid;
    grid-template-columns: 86px minmax(0, 1fr);
    gap: 10px 14px;
    padding: 16px 20px;
    border-bottom: 1px solid #e4e9ef;
    background: #ffffff;
}

.reception-meeting-row:last-child {
    border-bottom: 0;
}

.reception-time {
    grid-row: span 2;
    align-self: center;
    color: #014A98;
    font-weight: 850;
    font-size: .96rem;
}

.reception-visitor,
.reception-person {
    min-width: 0;
}

.reception-visitor span,
.reception-person span {
    display: block;
    margin-bottom: 2px;
    color: #64748b;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.reception-visitor strong,
.reception-person strong {
    display: block;
    overflow-wrap: anywhere;
    color: #172033;
    font-size: .92rem;
    line-height: 1.35;
}

.reception-person {
    grid-column: 2;
}

.reception-empty {
    margin: 16px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (max-width: 1020px) {
    .reception-days-grid {
        grid-template-columns: 1fr;
    }

    .reception-meeting-row {
        grid-template-columns: 100px minmax(0, 1fr) minmax(0, 1fr);
        align-items: center;
    }

    .reception-time {
        grid-row: auto;
    }

    .reception-person {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .quick-actions,
    .quick-filter-bar {
        width: 100%;
        justify-content: stretch;
    }

    .quick-actions .btn,
    .quick-filter-bar .btn {
        flex: 1 1 150px;
        text-align: center;
    }

    .reception-meeting-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .reception-time,
    .reception-person {
        grid-column: 1;
    }

    .reception-time {
        padding-bottom: 8px;
        border-bottom: 1px solid #e4e9ef;
    }
}

/* Registration department filter */
[data-register-employee]:disabled {
    background: #f3f6f9;
    color: #64748b;
    cursor: not-allowed;
}

/* Dashboard recent meetings search and pagination */
.recent-meetings-card {
    overflow: visible;
}

.recent-meetings-heading {
    margin-bottom: 16px;
}

.recent-live-search {
    margin: 0 0 18px;
    padding: 15px 16px;
    border: 1px solid #d9e1e8;
    border-radius: 10px;
    background: #f7f9fb;
}

.recent-live-search > label {
    display: block;
    margin-bottom: 7px;
    color: #27364a;
    font-size: .82rem;
    font-weight: 750;
}

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

.recent-search-row input[type="search"] {
    min-width: 0;
    flex: 1 1 auto;
    min-height: 44px;
    background: #ffffff;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid #e1e6eb;
}

.pagination-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    height: 38px;
    padding: 0 11px;
    border: 1px solid #cfd8e2;
    border-radius: 7px;
    background: #ffffff;
    color: #014A98;
    font-size: .86rem;
    font-weight: 750;
    text-decoration: none;
}

.pagination-link:hover,
.pagination-link:focus-visible {
    border-color: #014A98;
    background: #eef5fc;
    color: #014A98;
}

.pagination-link.is-current {
    border-color: #014A98;
    background: #014A98;
    color: #ffffff;
}

.pagination-nav {
    min-width: auto;
    padding: 0 14px;
}

.pagination-gap {
    padding: 0 3px;
    color: #64748b;
    font-weight: 700;
}

/* Keep the company footer on the exact approved brand blue. */
.site-footer {
    background: #014A98 !important;
}

@media (max-width: 640px) {
    .recent-search-row {
        align-items: stretch;
        flex-direction: column;
    }

    .recent-search-row .btn {
        width: 100%;
    }

    .pagination {
        justify-content: flex-start;
    }
}

/* Reception bilingual interface: Arabic is the default reception experience. */
.reception-page-ar {
    font-family: Tahoma, "Segoe UI", Arial, sans-serif;
}

.reception-page-ar .brand,
.reception-page-ar .topnav,
.reception-page-ar .dashboard-hero,
.reception-page-ar .reception-day-header,
.reception-page-ar .reception-meeting-row,
.reception-page-ar .footer-inner,
.reception-page-ar .footer-grid {
    direction: rtl;
}

.reception-page-ar .brand > div,
.reception-page-ar .dashboard-hero > div,
.reception-page-ar .reception-day-card,
.reception-page-ar .reception-visitor,
.reception-page-ar .reception-person,
.reception-page-ar .footer-col,
.reception-page-ar .footer-tagline,
.reception-page-ar .footer-bottom {
    text-align: right;
}

.reception-page-ar .footer-line {
    margin-left: auto;
    margin-right: 0;
}

.reception-hero-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.reception-language-switch {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
}

.reception-language-switch a {
    min-width: 72px;
    padding: 7px 11px;
    border-radius: 6px;
    color: #334155;
    font-size: .83rem;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.reception-language-switch a:hover {
    background: #eef5fc;
    color: #014A98;
    text-decoration: none;
}

.reception-language-switch a.is-active {
    background: #014A98;
    color: #ffffff;
}

.reception-page-ar .reception-lock {
    letter-spacing: 0;
    text-transform: none;
}

.reception-page-ar .eyebrow,
.reception-page-ar .reception-visitor span,
.reception-page-ar .reception-person span {
    letter-spacing: 0;
    text-transform: none;
}

.reception-page-ar .reception-time {
    direction: rtl;
    text-align: right;
}

.reception-page-ar .reception-person {
    grid-column: 2;
}

@media (max-width: 1020px) {
    .reception-page-ar .reception-person {
        grid-column: auto;
    }
}

@media (max-width: 760px) {
    .reception-hero-actions {
        width: 100%;
        justify-content: flex-start;
    }

    .reception-page-ar .reception-hero-actions {
        justify-content: flex-start;
    }

    .reception-language-switch {
        width: 100%;
    }

    .reception-language-switch a {
        flex: 1 1 50%;
    }

    .reception-page-ar .reception-time,
    .reception-page-ar .reception-person {
        grid-column: 1;
    }
}

/* Reception: today's meetings table */
.reception-table-card {
    padding: 0;
    overflow: hidden;
}

.reception-table-heading {
    margin: 0;
    padding: 20px 22px;
    border-bottom: 1px solid #dce3ea;
    background: #f7f9fb;
}

.reception-table-heading h2 {
    margin-bottom: 5px;
    font-size: 1.08rem;
}

.reception-table-heading p {
    margin: 0;
    color: #64748b;
    font-size: .88rem;
}

.reception-table-wrap {
    width: 100%;
}

.reception-table {
    min-width: 1040px;
}

.reception-table th {
    padding: 13px 14px;
    background: #edf2f7;
    color: #334155;
    font-size: .75rem;
    letter-spacing: .03em;
    white-space: nowrap;
}

.reception-table td {
    padding: 15px 14px;
    color: #27364a;
    vertical-align: middle;
}

.reception-table tbody tr:nth-child(even) td {
    background: #fbfcfd;
}

.reception-table tbody tr:hover td {
    background: #f2f7fc;
}

.reception-table-time {
    color: #014A98 !important;
    font-weight: 800;
    white-space: nowrap;
}

.reception-empty-table {
    margin: 22px;
}

.reception-pagination {
    margin: 0;
    padding: 18px 22px 22px;
    border-top: 1px solid #dce3ea;
    background: #ffffff;
}

.reception-page-ar .reception-table-heading,
.reception-page-ar .reception-table th,
.reception-page-ar .reception-table td {
    text-align: right;
}

.reception-page-ar .reception-table th {
    letter-spacing: 0;
}

@media (max-width: 760px) {
    .reception-table-card {
        overflow: visible;
        background: transparent;
        border: 0;
        box-shadow: none;
    }

    .reception-table-heading {
        border: 1px solid #dce3ea;
        border-radius: 12px;
        margin-bottom: 14px;
        background: #ffffff;
    }

    .reception-table {
        min-width: 0;
    }

    .reception-table tbody tr {
        border-radius: 12px;
        box-shadow: 0 5px 14px rgba(15, 23, 42, .06);
    }

    .reception-table td {
        align-items: flex-start;
        text-align: left;
    }

    .reception-page-ar .reception-table td {
        flex-direction: row-reverse;
        text-align: right;
    }

    .reception-page-ar .reception-table td::before {
        text-align: right;
    }

    .reception-pagination {
        margin-top: 14px;
        padding: 16px;
        border: 1px solid #dce3ea;
        border-radius: 12px;
    }
}

/* Reception body: classic company layout. Header and footer are intentionally untouched. */
.reception-page .page-shell {
    margin-top: 26px;
    margin-bottom: 34px;
}

.reception-page .reception-hero {
    background: #ffffff;
    border: 1px solid #cfd8e3;
    border-left: 4px solid #014A98;
    border-radius: 5px;
    box-shadow: none;
    padding: 22px 24px;
    margin-bottom: 20px;
}

.reception-page-ar .reception-hero {
    border-left: 1px solid #cfd8e3;
    border-right: 4px solid #014A98;
}

.reception-page .reception-hero .eyebrow {
    color: #014A98;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .055em;
}

.reception-page .reception-hero h1 {
    margin: 7px 0 6px;
    font-size: clamp(1.65rem, 2.5vw, 2rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0;
}

.reception-page .reception-hero p {
    margin: 0;
    color: #475569;
    font-size: .9rem;
}

.reception-page .reception-hero-actions {
    gap: 8px;
}

.reception-page .reception-language-switch {
    border: 1px solid #b9c5d2;
    border-radius: 4px;
    padding: 2px;
    box-shadow: none;
}

.reception-page .reception-language-switch a {
    min-width: 68px;
    border-radius: 3px;
    padding: 7px 10px;
    font-size: .8rem;
    font-weight: 700;
}

.reception-page .reception-language-switch a:hover {
    background: #eef3f8;
}

.reception-page .reception-language-switch a.is-active {
    background: #014A98;
    color: #ffffff;
}

.reception-page .reception-lock {
    border: 1px solid #b8c9dc;
    border-radius: 4px;
    background: #edf4fb;
    color: #014A98;
    padding: 8px 12px;
    font-size: .76rem;
    font-weight: 700;
    box-shadow: none;
}

.reception-page .reception-table-card {
    background: #ffffff;
    border: 1px solid #cfd8e3;
    border-radius: 5px;
    box-shadow: none;
}

.reception-page .reception-table-heading {
    padding: 18px 20px;
    background: #f5f7f9;
    border-bottom: 1px solid #cfd8e3;
}

.reception-page .reception-table-heading h2 {
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: 0;
}

.reception-page .reception-table-heading p {
    color: #5f6b78;
    font-size: .84rem;
}

.reception-page .meeting-count {
    min-width: 34px;
    height: 30px;
    border: 1px solid #b9c5d2;
    border-radius: 3px;
    background: #ffffff;
    color: #014A98;
    font-weight: 700;
    box-shadow: none;
}

.reception-page .reception-table {
    border-collapse: collapse;
}

.reception-page .reception-table th {
    padding: 12px 13px;
    background: #eef1f4;
    color: #26384b;
    border-bottom: 1px solid #c8d1db;
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.reception-page .reception-table td {
    padding: 13px;
    color: #263442;
    border-bottom: 1px solid #e1e6eb;
    font-size: .9rem;
}

.reception-page .reception-table tbody tr:nth-child(even) td {
    background: #fafbfc;
}

.reception-page .reception-table tbody tr:hover td {
    background: #f3f7fb;
}

.reception-page .reception-table-time {
    color: #014A98 !important;
    font-weight: 700;
}

.reception-page .reception-pagination {
    padding: 15px 18px 18px;
    background: #f8f9fa;
    border-top: 1px solid #cfd8e3;
}

.reception-page .reception-pagination .pagination-link {
    min-width: 34px;
    height: 34px;
    border: 1px solid #c2ccd6;
    border-radius: 3px;
    background: #ffffff;
    box-shadow: none;
    font-weight: 700;
}

.reception-page .reception-pagination .pagination-link:hover {
    border-color: #014A98;
    background: #f2f6fa;
}

.reception-page .reception-pagination .pagination-link.is-current {
    border-color: #014A98;
    background: #014A98;
    color: #ffffff;
}

.reception-page .reception-empty-table {
    margin: 18px;
    border: 1px solid #d5dce4;
    border-radius: 4px;
    background: #fafbfc;
    box-shadow: none;
}

@media (max-width: 760px) {
    .reception-page .reception-hero {
        padding: 18px;
        border-radius: 4px;
    }

    .reception-page .reception-table-card {
        border: 0;
        background: transparent;
    }

    .reception-page .reception-table-heading {
        border-radius: 4px;
        border: 1px solid #cfd8e3;
        margin-bottom: 10px;
    }

    .reception-page .reception-table tbody tr {
        border: 1px solid #cfd8e3;
        border-radius: 4px;
        box-shadow: none;
        background: #ffffff;
    }

    .reception-page .reception-pagination {
        border-radius: 4px;
        background: #f8f9fa;
    }
}