/* ==========================================================
   MARZIN - GLOBAL UI THEME FOUNDATION
   Version: 1.0.0
   هدف: یکپارچه‌سازی صفحات عمومی، مدیریتی، فرم‌ها و جدول‌ها
   بدون دست‌کاری منطق هر صفحه.
========================================================== */

/* ----------------------------------------------------------
   Theme tokens - پایه Theme Selector آینده
---------------------------------------------------------- */
:root {
    --mz-navy-950: #041522;
    --mz-navy-900: #071c2e;
    --mz-navy-850: #0a2238;
    --mz-navy-800: #0b2741;
    --mz-navy-700: #103b58;
    --mz-teal-700: #075f6f;
    --mz-teal-600: #08788b;
    --mz-teal-500: #0f97a4;
    --mz-gold-500: #d9b757;
    --mz-gold-400: #f2d27a;
    --mz-surface: rgba(239, 247, 250, .96);
    --mz-surface-strong: rgba(248, 252, 253, .985);
    --mz-surface-soft: rgba(225, 239, 244, .92);
    --mz-text: #102f43;
    --mz-text-muted: #536e7d;
    --mz-border: rgba(118, 157, 174, .42);
    --mz-border-strong: rgba(77, 127, 148, .52);
    --mz-page-shadow: 0 18px 46px rgba(2, 18, 31, .24);
    --mz-control-shadow: 0 0 0 3px rgba(15, 151, 164, .14);

    /* نگاشت کامپوننت‌های قدیمی به هویت جدید */
    --primary: var(--mz-teal-600);
    --primary-hover: var(--mz-teal-700);
    --secondary: #607b8a;
    --text: var(--mz-text);
    --text-light: var(--mz-text-muted);
    --black: var(--mz-navy-950);
    --border: #bfd2d9;
    --background: #e7f1f4;
    --shadow: var(--mz-page-shadow);
}

::selection {
    background: var(--mz-teal-600);
    color: #ffffff;
}

:focus-visible {
    outline-color: rgba(15, 151, 164, .42);
}

/* ----------------------------------------------------------
   Page background
   خانه و Auth ظاهر اختصاصی خودشان را نگه می‌دارند.
---------------------------------------------------------- */
body:not(.public-auth-page):not([data-view-name="accounts:home"]) {
    min-height: 100vh;
    color: var(--mz-text);
    background-color: var(--mz-navy-900);
    background-image:
        linear-gradient(135deg, rgba(4, 21, 34, .91), rgba(7, 39, 62, .86)),
        url("../images/home/marzyar-border-background.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content {
    position: relative;
    isolation: isolate;
    min-height: calc(100vh - 132px);
    padding-block: 1.35rem 1.75rem;
}

body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle at 12% 12%, rgba(15, 151, 164, .13), transparent 31%),
        radial-gradient(circle at 88% 20%, rgba(217, 183, 87, .08), transparent 28%);
}

/* ----------------------------------------------------------
   Header / navigation
---------------------------------------------------------- */
.mobile-nav-bar,
.site-header,
.main-nav {
    color: #edf7fa;
    background: rgba(7, 28, 46, .975) !important;
    border-color: rgba(255, 255, 255, .09) !important;
    box-shadow: 0 8px 24px rgba(1, 12, 22, .22) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.mobile-brand,
.main-nav a,
.main-nav > ul > li > a {
    color: #eaf4f7;
}

.mobile-brand-copy strong,
.nav-brand-copy strong {
    color: var(--mz-gold-400) !important;
}

.mobile-brand-copy small,
.nav-brand-copy small {
    color: #a9c3cf !important;
}

.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav > ul > li > a:hover,
.main-nav > ul > li > a:focus-visible {
    color: #ffffff;
    background: rgba(15, 151, 164, .17);
}

.main-nav > ul > li,
.desktop-brand-item {
    border-color: rgba(255, 255, 255, .09) !important;
}

.mobile-home-link,
.menu-toggle {
    color: #eaf7f8;
    background: rgba(15, 151, 164, .15);
    border-color: rgba(74, 194, 199, .28);
}

.menu-toggle:hover,
.mobile-home-link:hover {
    color: #ffffff;
    background: rgba(15, 151, 164, .27);
}

.menu-toggle span {
    background: #eff8fa;
}

.mobile-nav-header {
    color: #ffffff;
    background: linear-gradient(135deg, var(--mz-navy-800), var(--mz-teal-700)) !important;
    box-shadow: 0 8px 22px rgba(1, 13, 23, .24);
}

/* زیرمنو: کنتراست ثابت در دسکتاپ، تبلت و موبایل */
.main-nav .user-dropdown,
.main-nav .user-dropdown.show {
    color: #f4f8fb;
    background: var(--mz-navy-800) !important;
    border-color: rgba(217, 183, 87, .46) !important;
    box-shadow: 0 14px 34px rgba(2, 15, 28, .34) !important;
}

.main-nav .user-dropdown > li > a,
.main-nav .user-dropdown > li > span {
    color: #f4f8fb !important;
    background: transparent !important;
}

.main-nav .user-dropdown > li > a:hover,
.main-nav .user-dropdown > li > a:focus-visible {
    color: var(--mz-navy-800) !important;
    background: var(--mz-gold-400) !important;
}

.main-nav .user-dropdown > li + li,
.main-nav .user-dropdown li {
    border-color: rgba(255, 255, 255, .10) !important;
}

/* ----------------------------------------------------------
   Universal page action toolbar
---------------------------------------------------------- */
.global-page-toolbar {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin: 0 0 .75rem;
}

.global-page-toolbar.has-native-page-action,
body.public-auth-page .global-page-toolbar,
body[data-view-name="accounts:home"] .global-page-toolbar,
body[data-view-name="accounts:login"] .global-page-toolbar,
body[data-view-name="accounts:signup"] .global-page-toolbar {
    display: none;
}

.global-page-back {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .45rem .82rem;
    border: 1px solid rgba(242, 210, 122, .56);
    border-radius: 11px;
    color: #ffffff;
    background: rgba(7, 28, 46, .76);
    box-shadow: 0 8px 20px rgba(1, 12, 22, .14);
    font-size: .84rem;
    font-weight: 800;
    line-height: 1.2;
    transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.global-page-back:hover,
.global-page-back:focus-visible {
    transform: translateY(-1px);
    color: var(--mz-navy-800);
    border-color: var(--mz-gold-400);
    background: var(--mz-gold-400);
}

.global-page-back-icon {
    direction: ltr;
    font-size: 1.15rem;
    line-height: 1;
}

/* ----------------------------------------------------------
   Main surfaces / cards
---------------------------------------------------------- */
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .card,
.admin-page-shell,
.booking-admin-filters,
.report-filters,
.report-card,
.report-table-section,
.request-admin-filters,
.slot-list-filters,
.notification-card,
.connection-note,
.bale-connection-section,
.rubika-connection-section,
.security-note,
.connection-check-box,
.dashboard-group,
.operator-scan-panel,
.operator-loading,
.operator-result,
.operator-last-action,
.contact-section,
.ticket-summary-card,
.support-empty-state,
.support-upload-box,
.support-admin-filters,
.ticket-admin-update-form,
.backup-create-panel,
.backup-security-note,
.backup-summary-card,
.backup-tabs,
.backup-history-item,
.backup-error,
.backup-technical-details,
.backup-empty-state,
.backup-period-group,
.backup-cleanup-card,
.backup-retention-card,
.backup-cleanup-job,
.backup-confirm-card,
.settings-section,
.citizen-filters,
.floating-action-menu,
.faq-item,
.faq-empty,
.direct-result-dialog,
.request-confirm-box,
.fallback-option-card,
.permission-form-card,
.permission-filters,
.request-step-card,
.booking-summary,
.direct-selection-summary,
.support-form-guide,
.support-separate-card,
.contact-social-card,
.ticket-detail-summary,
.channel-option,
.profile-card,
.wallet-summary-card,
.wallet-section-card {
    color: var(--mz-text);
    background: var(--mz-surface) !important;
    border: 1px solid var(--mz-border) !important;
    box-shadow: var(--mz-page-shadow);
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
}

body:not(.public-auth-page):not([data-view-name="accounts:home"]) .card {
    border-radius: 18px;
}

.admin-page-shell {
    overflow: visible;
}

.admin-page-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid rgba(88, 132, 151, .24);
}

.admin-page-heading h1 {
    margin: 0;
    color: var(--mz-navy-800);
    font-size: clamp(1.35rem, 2.8vw, 2rem);
    line-height: 1.45;
}

/* صفحات تخصصی‌ای که wrapper مستقل دارند */
.support-page,
.support-admin,
.contact-page,
.notification-preferences-page,
.household-page,
.direct-booking-page,
.payment-result-page,
.ticket-detail-page,
.user-management,
.wallet-admin-page,
.identity-verify-wrapper,
.profile-wrapper,
.request-admin-page,
.allocation-page,
.booking-detail,
.appointment-request-page,
.booking-admin-page,
.operational-report,
.operator-console,
.settings-page,
.faq-page,
.system-backup-page,
.backup-confirm-page,
.initialize-page {
    min-width: 0;
}

/* ----------------------------------------------------------
   Typography inside standard pages
---------------------------------------------------------- */
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content h1,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content h2,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content h3,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content h4,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content h5,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content h6 {
    color: var(--mz-navy-800);
}

body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content p,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content small,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content .form-help {
    color: var(--mz-text-muted);
}

/* اگر متن مستقیماً روی پس‌زمینه صفحه باشد */
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content > .container > h1,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content > .container > h2,
body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content > .container > h3 {
    color: #f4f9fb;
    text-shadow: 0 2px 12px rgba(0, 0, 0, .22);
}

/* ----------------------------------------------------------
   Forms
---------------------------------------------------------- */
body:not(.public-auth-page) .main-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]),
body:not(.public-auth-page) .main-content select,
body:not(.public-auth-page) .main-content textarea,
body:not(.public-auth-page) .main-content .form-input,
.backup-cleanup-form input,
.backup-confirm-phrase input,
.faq-search input {
    color: var(--mz-text);
    background: var(--mz-surface-strong) !important;
    border-color: #abc5cf !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .78);
}

body:not(.public-auth-page) .main-content input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="file"]):not([type="submit"]):not([type="button"]):not([type="reset"]):focus,
body:not(.public-auth-page) .main-content select:focus,
body:not(.public-auth-page) .main-content textarea:focus,
body:not(.public-auth-page) .main-content .form-input:focus,
.backup-cleanup-form input:focus,
.backup-confirm-phrase input:focus,
.faq-search input:focus {
    outline: none;
    border-color: var(--mz-teal-500) !important;
    box-shadow: var(--mz-control-shadow) !important;
}

body:not(.public-auth-page) .main-content input::placeholder,
body:not(.public-auth-page) .main-content textarea::placeholder {
    color: #78909b;
    opacity: 1;
}

body:not(.public-auth-page) .main-content label,
body:not(.public-auth-page) .main-content .form-label {
    color: #173c50;
}

/* ----------------------------------------------------------
   Buttons
---------------------------------------------------------- */
.btn {
    border-radius: 11px;
    box-shadow: 0 7px 16px rgba(2, 22, 38, .10);
}

.btn-primary {
    color: #ffffff;
    background: linear-gradient(135deg, var(--mz-teal-600), #0a7186);
}

.btn-primary:hover,
.btn-primary:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, var(--mz-teal-700), #07576a);
}

.btn-secondary,
.admin-close-button,
.contact-close-button,
.support-back-link {
    color: var(--mz-navy-800) !important;
    background: #dce9ee !important;
    border: 1px solid #aec7d1 !important;
}

.btn-secondary:hover,
.admin-close-button:hover,
.contact-close-button:hover,
.support-back-link:hover {
    color: var(--mz-navy-800) !important;
    background: var(--mz-gold-400) !important;
    border-color: var(--mz-gold-500) !important;
}

/* ----------------------------------------------------------
   Tables
---------------------------------------------------------- */
.table-wrapper,
.table-responsive,
.permission-table-wrapper,
.report-table-wrapper {
    max-width: 100%;
    overflow-x: auto;
    border: 1px solid var(--mz-border);
    border-radius: 14px;
    background: rgba(246, 251, 252, .94);
    box-shadow: 0 10px 24px rgba(3, 28, 46, .09);
    -webkit-overflow-scrolling: touch;
}

body:not(.public-auth-page) .main-content table {
    color: var(--mz-text);
    background: rgba(248, 252, 253, .94);
}

body:not(.public-auth-page) .main-content table th,
body:not(.public-auth-page) .main-content .table th {
    color: #ffffff;
    background: var(--mz-navy-800) !important;
    border-color: rgba(255, 255, 255, .10) !important;
    white-space: nowrap;
}

body:not(.public-auth-page) .main-content table td,
body:not(.public-auth-page) .main-content .table td {
    border-color: #d6e4e9;
}

.striped-table tbody tr:nth-child(odd) {
    background: rgba(248, 252, 253, .95);
}

.striped-table tbody tr:nth-child(even) {
    background: rgba(232, 243, 246, .92);
}

.striped-table tbody tr:hover {
    background: rgba(205, 231, 236, .92);
}

/* ----------------------------------------------------------
   Modal / popup
---------------------------------------------------------- */
.modal-overlay {
    background: rgba(2, 14, 24, .68);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.modal-box {
    color: var(--mz-text);
    background: var(--mz-surface-strong);
    border: 1px solid var(--mz-border-strong);
    box-shadow: 0 26px 70px rgba(0, 0, 0, .32);
}

.modal-header,
.modal-actions {
    border-color: #d0e0e6;
}

.modal-close:hover {
    color: var(--mz-navy-800);
    background: var(--mz-gold-400);
}

/* ----------------------------------------------------------
   Messages / alerts
---------------------------------------------------------- */
.message {
    border: 1px solid rgba(255, 255, 255, .34);
    box-shadow: 0 9px 22px rgba(2, 18, 31, .12);
}

.message.info {
    color: #0a4358;
    background: #dceff3;
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 991px) {
    body:not(.public-auth-page):not([data-view-name="accounts:home"]) {
        background-attachment: scroll;
    }

    .main-nav {
        background: var(--mz-navy-900) !important;
    }

    .main-nav > ul > li {
        border-bottom-color: rgba(255, 255, 255, .08) !important;
    }

    .global-page-toolbar {
        margin-bottom: .6rem;
    }
}

@media (max-width: 767px) {
    body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content {
        padding-block: .85rem 1.2rem;
    }

    body:not(.public-auth-page):not([data-view-name="accounts:home"]) .card,
    .admin-page-shell {
        padding: 1rem;
        border-radius: 15px;
    }

    .admin-page-heading {
        margin-bottom: .9rem;
        padding-bottom: .7rem;
    }

    .global-page-back {
        min-height: 40px;
        padding: .42rem .72rem;
        font-size: .8rem;
    }

    .btn {
        min-height: 46px;
    }

    .table-wrapper,
    .table-responsive,
    .permission-table-wrapper,
    .report-table-wrapper {
        border-radius: 12px;
    }
}

@media (max-width: 430px) {
    body:not(.public-auth-page):not([data-view-name="accounts:home"]) .main-content > .container {
        padding-inline: .55rem;
    }

    body:not(.public-auth-page):not([data-view-name="accounts:home"]) .card,
    .admin-page-shell {
        padding: .82rem;
        border-radius: 13px;
    }

    .admin-page-heading h1 {
        font-size: 1.22rem;
    }

    .global-page-toolbar {
        margin-bottom: .5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .global-page-back,
    .btn {
        transition: none;
    }
}