/* HiTaxi dashboard chrome — yellow/black brand, Cairo font, RTL (drawer on the right) */

/* ---------- App bar ---------- */
.hitaxi-appbar {
    background-color: #111111 !important;
    color: #FFD600 !important;
}

.hitaxi-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-inline-start: 8px;
}

.hitaxi-brand .brand-mark {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: #FFD600;
    color: #111111;
    display: grid;
    place-items: center;
    font-family: "Cairo", sans-serif;
    font-weight: 900;
    font-size: 18px;
    line-height: 1;
}

.hitaxi-brand .brand-text {
    font-family: "Cairo", sans-serif;
    font-size: 21px;
    font-weight: 900;
    color: #FFD600;
}

.appbar-user {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #ffffff;
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    font-size: 14px;
}

.appbar-user .mud-icon-root {
    color: #FFD600;
}

.appbar-user-meta {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.appbar-user-name {
    font-weight: 800;
    font-size: 14px;
}

.appbar-user-role {
    font-weight: 600;
    font-size: 11px;
    color: #FFD600;
}

/* ---------- Drawer / main ---------- */
.hitaxi-drawer {
    border-inline-start: 1px solid #ededed;
}

.hitaxi-main {
    min-height: 100vh;
    /* Same backdrop as the login page: yellow radial glow over a soft white→grey gradient */
    background:
        radial-gradient(circle at 88% 12%, rgba(255, 214, 0, 0.34), transparent 28%),
        linear-gradient(135deg, #ffffff 0%, #f7f7f7 100%);
    background-attachment: fixed;
}

/* ---------- Nav menu ---------- */
.hitaxi-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-family: "Cairo", sans-serif;
}

.nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 22px 18px 12px;
}

.nav-brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #111111;
    color: #FFD600;
    display: grid;
    place-items: center;
    font-weight: 900;
    font-size: 22px;
    line-height: 1;
}

.nav-brand-text {
    font-size: 24px;
    font-weight: 900;
    letter-spacing: -0.5px;
    color: #111111;
}

.hitaxi-navmenu {
    flex: 1 1 auto;
    padding: 8px;
    overflow-y: auto;
}

.hitaxi-navmenu .mud-nav-link {
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    font-size: 14.5px;
    color: #4a4a4a;
    border-radius: 14px;
    margin: 4px 8px;
    min-height: 46px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.hitaxi-navmenu .mud-nav-link:hover {
    background: rgba(255, 214, 0, 0.18);
    color: #111111;
}

.hitaxi-navmenu .mud-nav-link.active,
.hitaxi-navmenu a.mud-nav-link.active:not(.mud-nav-link-disabled) {
    background: #FFD600;
    font-weight: 800;
    box-shadow: 0 8px 18px rgba(255, 214, 0, 0.45);
}

/* Active item: force black text + icon (MudBlazor otherwise tints them with the yellow primary) */
.hitaxi-navmenu .mud-nav-link.active,
.hitaxi-navmenu .mud-nav-link.active .mud-nav-link-text,
.hitaxi-navmenu .mud-nav-link.active .mud-nav-link-icon,
.hitaxi-navmenu .mud-nav-link.active .mud-icon-root {
    color: #111111 !important;
}

/* Idle item: dark-grey text, muted icon */
.hitaxi-navmenu .mud-nav-link .mud-nav-link-text {
    color: #4a4a4a;
}

.hitaxi-navmenu .mud-nav-link .mud-nav-link-icon,
.hitaxi-navmenu .mud-nav-link .mud-icon-root {
    color: #8a8a8a;
}

.hitaxi-navmenu .mud-nav-link:hover .mud-nav-link-text,
.hitaxi-navmenu .mud-nav-link:hover .mud-nav-link-icon,
.hitaxi-navmenu .mud-nav-link:hover .mud-icon-root {
    color: #111111;
}

/* ---------- Logout ---------- */
.nav-logout {
    padding: 14px 16px 20px;
    border-top: 1px solid #ededed;
}

.nav-logout .logout-btn {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    font-size: 14px;
    background: #111111;
    color: #ffffff;
    border-radius: 14px;
    height: 46px;
}

.nav-logout .logout-btn:hover {
    background: #000000;
}

.nav-logout .logout-btn .mud-icon-root {
    color: #FFD600;
}

/* ============================================================
   Manage Cities page (and shared management page styling)
   ============================================================ */
.cities-page {
    font-family: "Cairo", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- Header card ---- */
.cities-page .page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px;
    border-radius: 22px;
    background: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
    color: #ffffff;
    flex-wrap: wrap;
}

.cities-page .page-header-text {
    display: flex;
    align-items: center;
    gap: 14px;
}

.cities-page .page-header-icon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: #FFD600;
    color: #111111;
    display: grid;
    place-items: center;
}

.cities-page .page-header-icon .mud-icon-root {
    font-size: 28px;
}

.cities-page .page-title {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    color: #ffffff;
}

.cities-page .page-subtitle {
    color: rgba(255, 255, 255, 0.7);
    font-family: "Cairo", sans-serif;
}

.cities-page .btn-add {
    background: #FFD600;
    color: #111111;
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    border-radius: 14px;
    padding: 8px 20px;
    height: 46px;
}

.cities-page .btn-add:hover {
    background: #ffdf33;
    box-shadow: 0 10px 22px rgba(255, 214, 0, 0.4);
}

/* ---- Table card ---- */
.cities-page .table-card {
    border-radius: 22px;
    padding: 18px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dcdcdc; /* thin border around search + table container */
}

.cities-page .table-toolbar {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.cities-page .search-field {
    flex: 1 1 260px;
}

/* Rounded outlined inputs everywhere on the page / dialogs */
.hitaxi-field .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: 14px;
}

.hitaxi-field .mud-input-outlined.mud-shrink .mud-input-outlined-border,
.hitaxi-field .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: #FFD600;
}

/* Custom field label (used instead of MudBlazor's floating label) */
.field-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-label {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    font-size: 13px;
    color: #2c2c2c;
}

/* Gradient (rounded) border for search + dialog entry fields */
.grad-input .mud-input.mud-input-outlined {
    border: 2px solid transparent;
    border-radius: 14px;
    background:
        linear-gradient(#ffffff, #ffffff) padding-box,
        linear-gradient(135deg, #FFD600 0%, #111111 100%) border-box;
}

.grad-input .mud-input.mud-input-outlined .mud-input-outlined-border {
    display: none !important;
}

/* Dropdown (MudSelect) selected item defaulted to the yellow primary color and was
   unreadable on white — force dark text on a soft highlight instead. */
.mud-list-item.mud-selected-item,
.mud-list-item.mud-selected-item .mud-list-item-text,
.mud-list-item.mud-selected-item .mud-typography {
    color: #111111 !important;
    background-color: rgba(255, 214, 0, 0.16);
}

/* ---- Table ---- */
.hitaxi-table .mud-table-root {
    font-family: "Cairo", sans-serif;
}

.hitaxi-table .mud-table-head th {
    background: #faf8ec;
    color: #6b6b6b;
    font-weight: 800;
    font-family: "Cairo", sans-serif;
    border: none;
}

.hitaxi-table .mud-table-head th:first-child {
    border-start-start-radius: 14px;
    border-end-start-radius: 14px;
}

.hitaxi-table .mud-table-head th:last-child {
    border-start-end-radius: 14px;
    border-end-end-radius: 14px;
}

.hitaxi-table .mud-table-row:hover {
    background: rgba(255, 214, 0, 0.08) !important;
}

.hitaxi-table .mud-table-cell {
    border-bottom: 1px solid #f2f2f2;
    font-family: "Cairo", sans-serif;
}

.hitaxi-table .row-index {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 9px;
    background: #f4f4f4;
    color: #555;
    font-weight: 700;
    font-size: 13px;
}

.hitaxi-table .city-name {
    font-weight: 700;
    color: #1d1d1d;
}

.hitaxi-table .price-value-cell {
    font-weight: 800;
    color: #111;
    font-size: 14.5px;
}

.hitaxi-table .price-value-cell .cur {
    font-size: 11.5px;
    color: #8a6d00;
    margin-inline-start: 3px;
}

.hitaxi-table .city-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: #f4f4f4;
    color: #444;
    font-weight: 700;
    font-size: 12.5px;
    font-family: "Cairo", sans-serif;
}

.hitaxi-table .muted-date {
    color: #111111;
    font-weight: 700;
    font-size: 13px;
}

/* Status chip */
.status-chip {
    display: inline-block;
    padding: 5px 14px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 800;
    font-family: "Cairo", sans-serif;
}

.status-chip.active {
    background: rgba(255, 214, 0, 0.22);
    color: #8a6d00;
}

.status-chip.inactive {
    background: #efefef;
    color: #999;
}

/* Row actions */
.row-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.row-actions .act {
    border-radius: 11px;
    width: 38px;
    height: 38px;
}

.row-actions .act-edit { color: #2563eb; }
.row-actions .act-edit:hover { background: rgba(37, 99, 235, 0.12); }
.row-actions .act-toggle { color: #8a6d00; }
.row-actions .act-toggle:hover { background: rgba(255, 214, 0, 0.18); }
.row-actions .act-delete { color: #dc2626; }
.row-actions .act-delete:hover { background: rgba(220, 38, 38, 0.1); }

.no-records {
    padding: 28px;
    text-align: center;
    color: #999;
    font-family: "Cairo", sans-serif;
    font-weight: 600;
}

/* ---- Footer / pagination ---- */
.cities-page .table-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.cities-page .footer-info {
    color: #888;
    font-family: "Cairo", sans-serif;
}

.hitaxi-pagination .mud-pagination-item .mud-button-root {
    border-radius: 12px;
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    color: #444;
}

.hitaxi-pagination .mud-pagination-item .mud-button-root.mud-button-filled-primary {
    background: #FFD600;
    color: #111111;
    box-shadow: 0 6px 14px rgba(255, 214, 0, 0.4);
}

/* ============================================================
   Booking form (Add booking)
   ============================================================ */
.booking-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    font-family: "Cairo", sans-serif;
}

.booking-form .form-section {
    border-radius: 22px;
    padding: 20px 22px;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid #dcdcdc;
}

.booking-form .section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    font-weight: 800;
    font-size: 15px;
    color: #111;
}

.booking-form .section-head .mud-icon-root {
    width: 34px;
    height: 34px;
    padding: 6px;
    border-radius: 11px;
    background: rgba(255, 214, 0, 0.22);
    color: #8a6d00;
}

.booking-form .price-preview {
    height: 100%;
    min-height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, #111111 0%, #2a2a2a 100%);
    color: #fff;
}

.booking-form .price-preview-label {
    font-weight: 700;
    color: rgba(255, 255, 255, 0.7);
}

.booking-form .price-preview-value {
    font-weight: 900;
    font-size: 22px;
    color: #FFD600;
}

.booking-form .price-preview-value .cur {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
    margin-inline-start: 4px;
}

.booking-form .price-preview.price-error {
    background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%);
}

.booking-form .price-preview.price-error .price-preview-value {
    color: #fff;
}

.booking-form .form-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 4px;
}

.booking-form .form-actions .btn-save,
.booking-form .form-actions .btn-cancel {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    border-radius: 14px;
    height: 48px;
    padding-inline: 26px;
}

.booking-form .form-actions .btn-save {
    background: #111111;
    color: #fff;
}
.booking-form .form-actions .btn-save:hover { background: #000; }

.booking-form .form-actions .btn-cancel {
    background: #f2f2f2;
    color: #555;
}
.booking-form .form-actions .btn-cancel:hover { background: #e7e7e7; }

/* ============================================================
   Finance page
   ============================================================ */
.wallet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-family: "Cairo", sans-serif;
}

.wallet-balance {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 22px;
    border-radius: 16px;
    background: linear-gradient(135deg, #111 0%, #2a2a2a 100%);
    color: #fff;
    min-width: 220px;
}

.wallet-balance.neg { background: linear-gradient(135deg, #7f1d1d 0%, #b91c1c 100%); }
.wallet-label { font-size: 13px; color: rgba(255,255,255,.7); }
.wallet-value { font-size: 26px; font-weight: 900; color: #FFD600; }
.wallet-value .cur { font-size: 13px; color: rgba(255,255,255,.7); margin-inline-start: 4px; }

.deposit-box { display: flex; align-items: flex-end; gap: 10px; }

.section-bar {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.section-title { font-family: "Cairo", sans-serif; font-weight: 800; }
.section-actions { display: flex; gap: 8px; }

.net { font-weight: 800; font-family: "Cairo", sans-serif; }
.net.pos { color: #15803d; }
.net.neg { color: #dc2626; }

.totals-bar {
    display: flex; gap: 22px; flex-wrap: wrap; justify-content: flex-end;
    padding: 14px 6px 4px; font-family: "Cairo", sans-serif; font-size: 14px;
}
.totals-bar .pos strong { color: #15803d; }
.totals-bar .neg strong { color: #dc2626; }

/* ============================================================
   Invoice (A4 printable)
   ============================================================ */
.print-root { background: #ededed; min-height: 100vh; padding: 20px; font-family: "Cairo", sans-serif; }

.invoice-toolbar {
    display: flex; gap: 10px; justify-content: center; margin-bottom: 16px;
}
.invoice-toolbar .btn-save, .invoice-toolbar .btn-cancel {
    font-family: "Cairo", sans-serif; font-weight: 800; border-radius: 13px; height: 44px; padding-inline: 22px;
}
.invoice-toolbar .btn-save { background: #111; color: #fff; }
.invoice-toolbar .btn-cancel { background: #fff; color: #555; }

.invoice-loading { text-align: center; padding: 60px; font-family: "Cairo", sans-serif; }

.invoice-sheet {
    width: 210mm; min-height: 297mm; margin: 0 auto; background: #fff; color: #111;
    padding: 18mm; box-shadow: 0 10px 40px rgba(0,0,0,.15); font-family: "Cairo", sans-serif;
}

.inv-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 3px solid #FFD600; padding-bottom: 16px; }
.inv-brand { display: flex; align-items: center; gap: 12px; }
.inv-brand-mark { width: 54px; height: 54px; border-radius: 14px; background: #111; color: #FFD600; display: grid; place-items: center; font-weight: 900; font-size: 28px; }
.inv-brand-text { font-size: 28px; font-weight: 900; }
.inv-brand-sub { font-size: 12px; color: #777; }
.inv-meta { text-align: left; font-size: 13px; }
.inv-meta .inv-title { font-size: 18px; font-weight: 900; margin-bottom: 6px; }
.inv-meta span { color: #777; }

.inv-party { display: flex; gap: 28px; flex-wrap: wrap; margin: 18px 0; padding: 12px 16px; background: #faf8ec; border-radius: 12px; font-size: 14px; }
.inv-party span { color: #777; }

.inv-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 13px; }
.inv-table th { background: #111; color: #fff; padding: 9px 8px; text-align: right; font-weight: 700; }
.inv-table th:first-child { border-start-start-radius: 8px; }
.inv-table th:last-child { border-start-end-radius: 8px; }
.inv-table td { padding: 8px; border-bottom: 1px solid #eee; }
.inv-table td.pos { color: #15803d; font-weight: 700; }
.inv-table td.neg { color: #dc2626; font-weight: 700; }

.inv-totals { margin: 20px 0 0auto; margin-inline-start: auto; max-width: 360px; }
.inv-totals-row { display: flex; justify-content: space-between; padding: 8px 4px; border-bottom: 1px dashed #ddd; font-size: 14px; }
.inv-totals-row.net { font-size: 16px; border: none; margin-top: 6px; padding: 12px; border-radius: 10px; background: #faf8ec; }
.inv-totals-row.net.pos strong { color: #15803d; }
.inv-totals-row.net.neg strong { color: #dc2626; }

.inv-foot { display: flex; justify-content: space-between; margin-top: 60px; }
.inv-sign { text-align: center; font-size: 13px; color: #555; }
.inv-sign .line { width: 160px; border-top: 1.5px solid #111; margin-bottom: 6px; }
.inv-note { text-align: center; margin-top: 30px; font-size: 11px; color: #999; }

@media print {
    .no-print { display: none !important; }
    .print-root { background: #fff; padding: 0; }
    .invoice-sheet { box-shadow: none; margin: 0; width: auto; min-height: auto; padding: 12mm; }
    @page { size: A4; margin: 0; }
}

/* ============================================================
   Shared dialog styling (rendered in a portal -> must be global)
   ============================================================ */
.hitaxi-dialog {
    border-radius: 22px !important;
    font-family: "Cairo", sans-serif;
    overflow: hidden;
}

.hitaxi-dialog .dialog-head {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hitaxi-dialog .dialog-head-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: rgba(255, 214, 0, 0.22);
    color: #8a6d00;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
}

.hitaxi-dialog .dialog-head-icon.danger {
    background: rgba(220, 38, 38, 0.12);
    color: #dc2626;
}

.hitaxi-dialog .dialog-title {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    color: #111;
}

.hitaxi-dialog .dialog-subtitle {
    color: #999;
    font-family: "Cairo", sans-serif;
}

.hitaxi-dialog .dialog-body {
    padding-top: 6px;
    min-width: 280px;
}

.hitaxi-dialog .dialog-actions {
    display: flex;
    flex-direction: row;
    justify-content: center; /* centered horizontally; primary sits first (right in RTL) */
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 4px;
}

.hitaxi-dialog .btn-save,
.hitaxi-dialog .btn-cancel,
.hitaxi-dialog .btn-danger {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    border-radius: 13px;
    height: 44px;
    padding-inline: 20px;
}

.hitaxi-dialog .btn-save {
    background: #111111;
    color: #fff;
}
.hitaxi-dialog .btn-save:hover { background: #000; }

.hitaxi-dialog .btn-danger {
    background: #dc2626;
    color: #fff;
}
.hitaxi-dialog .btn-danger:hover { background: #b91c1c; }

.hitaxi-dialog .btn-cancel {
    background: #f2f2f2;
    color: #555;
}
.hitaxi-dialog .btn-cancel:hover { background: #e7e7e7; }

/* ============================================================
   Booking requests (list + status)
   ============================================================ */
.hitaxi-table .trip-number {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    color: #8a6d00;
    letter-spacing: .3px;
}

.hitaxi-table .pax-cell {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}
.hitaxi-table .pax-phone {
    font-size: 12px;
    color: #999;
    font-weight: 600;
}
.hitaxi-table .muted-cell {
    color: #b0b0b0;
    font-weight: 600;
    font-size: 12.5px;
}

.row-actions .act-status { color: #8b5cf6; }
.row-actions .act-status:hover { background: rgba(139, 92, 246, 0.12); }

/* Status-change menu activator (MudMenu built-in icon button) */
.row-actions .status-menu .mud-icon-button {
    color: #8b5cf6;
    border-radius: 11px;
    width: 38px;
    height: 38px;
}
.row-actions .status-menu .mud-icon-button:hover { background: rgba(139, 92, 246, 0.12); }

/* Change-status dialog — direct-click choice buttons */
.status-choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.status-choice {
    font-family: "Cairo", sans-serif;
    font-weight: 800;
    font-size: 14px;
    text-align: center;
    padding: 13px 16px;
    border-radius: 14px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.status-choice:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(0.97);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.10);
}
.status-choice:disabled { opacity: .6; cursor: default; }
.status-choice.st-pending   { background: rgba(255, 214, 0, 0.22); color: #8a6d00; border-color: rgba(255, 214, 0, 0.5); }
.status-choice.st-confirmed { background: rgba(37, 99, 235, 0.12); color: #1e40af; border-color: rgba(37, 99, 235, 0.35); }
.status-choice.st-completed { background: rgba(16, 185, 129, 0.14); color: #047857; border-color: rgba(16, 185, 129, 0.35); }
.status-choice.st-cancelled { background: rgba(239, 68, 68, 0.12); color: #b91c1c; border-color: rgba(239, 68, 68, 0.35); }

/* Booking status chips */
.status-chip.st-pending   { background: rgba(255, 214, 0, 0.22); color: #8a6d00; }
.status-chip.st-confirmed { background: rgba(37, 99, 235, 0.14); color: #1e40af; }
.status-chip.st-completed { background: rgba(16, 185, 129, 0.16); color: #047857; }
.status-chip.st-cancelled { background: rgba(239, 68, 68, 0.14); color: #b91c1c; }

/* Booking details dialog */
.booking-details {
    font-family: "Cairo", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.booking-details .bd-status { text-align: center; }
.booking-details .bd-section {
    border: 1px solid #ededed;
    border-radius: 16px;
    padding: 14px 16px;
    background: #fafafa;
}
.booking-details .bd-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 800;
    font-size: 14px;
    color: #111;
    margin-bottom: 12px;
}
.booking-details .bd-section-title .mud-icon-root {
    width: 28px; height: 28px; padding: 5px;
    border-radius: 9px;
    background: rgba(255, 214, 0, 0.22);
    color: #8a6d00;
}
.booking-details .bd-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}
.booking-details .bd-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.booking-details .bd-item.bd-wide { grid-column: 1 / -1; }
.booking-details .bd-k { font-size: 12px; color: #999; font-weight: 600; }
.booking-details .bd-v { font-size: 14px; color: #1d1d1d; font-weight: 700; }
.booking-details .bd-price { color: #8a6d00; }
.booking-details .bd-price .cur { font-size: 11px; color: #b08900; margin-inline-start: 3px; }

/* ============================================================
   Home dashboard
   ============================================================ */
.dashboard {
    font-family: "Cairo", sans-serif;
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.dashboard .dash-head .dash-title { font-weight: 900; color: #111; }
.dashboard .dash-subtitle { color: #8a8a8a; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
}
@media (max-width: 960px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }

.stat-card {
    position: relative;
    border-radius: 20px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 16px;
    color: #fff;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(0, 0, 0, 0.10);
}
.stat-card .stat-icon {
    display: grid;
    place-items: center;
    width: 54px; height: 54px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
}
.stat-card .stat-icon .mud-icon-root { font-size: 28px; }
.stat-card .stat-body { display: flex; flex-direction: column; }
.stat-card .stat-value { font-size: 24px; font-weight: 900; line-height: 1.1; }
.stat-card .stat-label { font-size: 13px; font-weight: 600; opacity: .85; }
.stat-card .stat-trend {
    position: absolute;
    inset-block-start: 14px;
    inset-inline-end: 16px;
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 12px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.2);
}
.stat-card .stat-trend .mud-icon-root { font-size: 15px; }

.stat-card.accent-gold  { background: linear-gradient(135deg, #FFD600 0%, #FF9E00 100%); color: #3a2e00; }
.stat-card.accent-gold .stat-icon { background: rgba(0, 0, 0, 0.12); }
.stat-card.accent-gold .stat-trend { background: rgba(0, 0, 0, 0.14); }
.stat-card.accent-green { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
.stat-card.accent-blue  { background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); }
.stat-card.accent-dark  { background: linear-gradient(135deg, #2b2b2b 0%, #111111 100%); }
.stat-card.accent-dark .stat-value { color: #FFD600; }

.chart-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
}
@media (max-width: 960px) { .chart-grid { grid-template-columns: 1fr; } }

.chart-card {
    border-radius: 22px;
    padding: 20px 22px;
    background: #ffffff;
    border: 1px solid #ededed;
}
.chart-card .chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.chart-card .chart-title { font-weight: 800; font-size: 15px; color: #111; }
.chart-card .chart-badge {
    font-size: 12px;
    font-weight: 800;
    color: #8a6d00;
    background: rgba(255, 214, 0, 0.22);
    padding: 3px 12px;
    border-radius: 999px;
}