/* Shared premium mobile web-app theme */
:root,
html[data-theme="signature"] {
    --primary: #113f4a;
    --primary-light: #1c8a8f;
    --primary-dark: #081f26;
    --secondary: #f1c98f;
    --accent: #dd9f54;
    --background: #f3eee6;
    --surface: rgba(255, 250, 242, 0.94);
    --surface-strong: #fffaf2;
    --surface-soft: rgba(246, 235, 219, 0.76);
    --text-primary: #211b17;
    --text-secondary: #75685c;
    --text-light: #a39383;
    --border: rgba(75, 56, 38, 0.12);
    --success: #198a5a;
    --warning: #b87a24;
    --error: #c84e54;
    --premium-glow: rgba(28, 138, 143, 0.22);
    --gold-glow: rgba(241, 201, 143, 0.38);
    --action-gradient: linear-gradient(135deg, #173d41, #1c8a8f);
    --nav-active-gradient: linear-gradient(135deg, #f6d2a4, #dd9f54);
    --shadow-sm: 0 10px 28px rgba(43, 30, 18, 0.09);
    --shadow-md: 0 18px 46px rgba(43, 30, 18, 0.14);
    --shadow-lg: 0 28px 74px rgba(43, 30, 18, 0.22);
}

html[data-theme="dark"] {
    --primary: #ffd0a0;
    --primary-light: #ffe2bf;
    --primary-dark: #9e6b3d;
    --secondary: #f6c28a;
    --accent: #d89154;
    --background: #171312;
    --surface: rgba(37, 36, 34, 0.94);
    --surface-strong: #2d2c2a;
    --surface-soft: rgba(49, 48, 45, 0.82);
    --text-primary: #fff8ef;
    --text-secondary: #c6b8a8;
    --text-light: #8e8175;
    --border: rgba(255, 238, 219, 0.12);
    --success: #89d8aa;
    --warning: #ffd18d;
    --error: #ff8f97;
    --premium-glow: rgba(255, 208, 160, 0.2);
    --gold-glow: rgba(255, 192, 128, 0.18);
    --action-gradient: linear-gradient(135deg, #ffd0a0, #f2b575);
    --nav-active-gradient: linear-gradient(135deg, #ffd0a0, #f0b06e);
    --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 18px 54px rgba(0, 0, 0, 0.42);
    --shadow-lg: 0 30px 84px rgba(0, 0, 0, 0.56);
}

html[data-theme="light"] {
    --primary: #08777b;
    --primary-light: #13b8ad;
    --primary-dark: #044a55;
    --secondary: #ffb33f;
    --accent: #0fb5a9;
    --background: #f7fbfc;
    --surface: rgba(255, 255, 255, 0.96);
    --surface-strong: #ffffff;
    --surface-soft: rgba(246, 250, 251, 0.92);
    --text-primary: #17243a;
    --text-secondary: #627085;
    --text-light: #99a5b5;
    --border: rgba(22, 39, 58, 0.1);
    --premium-glow: rgba(13, 150, 150, 0.18);
    --gold-glow: rgba(255, 179, 63, 0.24);
    --action-gradient: linear-gradient(135deg, #08777b, #13b8ad);
    --nav-active-gradient: linear-gradient(135deg, #ffbe55, #ff9f24);
    --shadow-sm: 0 10px 28px rgba(18, 39, 58, 0.07);
    --shadow-md: 0 18px 46px rgba(18, 39, 58, 0.11);
    --shadow-lg: 0 30px 76px rgba(18, 39, 58, 0.16);
}

html {
    background: var(--background);
    color-scheme: light;
}

html[data-theme="dark"] {
    color-scheme: dark;
}

body {
    background:
        radial-gradient(circle at 8% -8%, var(--gold-glow), transparent 28rem),
        radial-gradient(circle at 96% 8%, var(--premium-glow), transparent 24rem),
        linear-gradient(180deg, color-mix(in srgb, var(--background) 94%, #ffffff 6%), var(--background)) !important;
    color: var(--text-primary);
}

html[data-theme="dark"] body {
    background:
        radial-gradient(circle at 10% -10%, rgba(255, 208, 160, 0.13), transparent 28rem),
        radial-gradient(circle at 100% 4%, rgba(123, 76, 41, 0.28), transparent 26rem),
        linear-gradient(180deg, #1b1715 0%, #151211 52%, #1f1916 100%) !important;
}

html[data-theme="light"] body {
    background:
        radial-gradient(circle at 0% 0%, rgba(255, 179, 63, 0.16), transparent 24rem),
        radial-gradient(circle at 100% 12%, rgba(19, 184, 173, 0.14), transparent 28rem),
        linear-gradient(180deg, #ffffff 0%, #f7fbfc 42%, #eef7f8 100%) !important;
}

* {
    box-sizing: border-box;
}

.app-container,
.container,
.main-content {
    width: min(100%, 1180px);
    margin-inline: auto;
}

.mobile-header,
.header,
.top-header {
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: var(--shadow-sm) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

html[data-theme="light"] .mobile-header,
html[data-theme="light"] .header,
html[data-theme="light"] .top-header {
    background: rgba(255, 255, 255, 0.92) !important;
}

.theme-switcher {
    display: grid;
    grid-template-columns: repeat(3, 34px);
    align-items: center;
    gap: 4px;
    padding: 4px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.theme-choice,
.icon-btn {
    border: 1px solid var(--border) !important;
    background: var(--surface-strong) !important;
    color: var(--text-secondary) !important;
    box-shadow: 0 8px 20px rgba(43, 30, 18, 0.08);
}

.theme-choice {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 0.82rem;
    cursor: pointer;
}

.theme-choice.active,
.icon-btn:hover,
.icon-btn:active {
    background: var(--nav-active-gradient) !important;
    color: color-mix(in srgb, var(--text-primary) 86%, #000 14%) !important;
    border-color: transparent !important;
    box-shadow: 0 12px 30px var(--premium-glow);
}

html[data-theme="signature"] .theme-choice.active,
html[data-theme="light"] .theme-choice.active,
html[data-theme="signature"] .icon-btn:hover,
html[data-theme="light"] .icon-btn:hover,
html[data-theme="signature"] .icon-btn:active,
html[data-theme="light"] .icon-btn:active {
    color: #ffffff !important;
}

.dashboard-section,
.section,
.card,
.stat-card,
.apartment-card,
.reservation-card,
.transaction-card,
.notification-card,
.verification-card,
.room-card,
.review-card,
.deal-card,
.form-container,
.form-section,
.modal-content,
.table-container,
.profile-info,
.empty-state,
.payment-container,
.payment-card {
    background: var(--surface) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="dark"] .dashboard-section,
html[data-theme="dark"] .section,
html[data-theme="dark"] .card,
html[data-theme="dark"] .stat-card,
html[data-theme="dark"] .apartment-card,
html[data-theme="dark"] .reservation-card,
html[data-theme="dark"] .transaction-card,
html[data-theme="dark"] .notification-card,
html[data-theme="dark"] .verification-card,
html[data-theme="dark"] .room-card,
html[data-theme="dark"] .review-card,
html[data-theme="dark"] .deal-card,
html[data-theme="dark"] .form-container,
html[data-theme="dark"] .form-section,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .table-container,
html[data-theme="dark"] .profile-info,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .payment-container,
html[data-theme="dark"] .payment-card {
    background: linear-gradient(180deg, rgba(48, 47, 44, 0.96), rgba(34, 33, 31, 0.96)) !important;
}

.dashboard-header,
.hero-section,
.page-header {
    color: #ffffff !important;
    background:
        linear-gradient(135deg, rgba(0, 0, 0, 0.25), transparent 45%),
        linear-gradient(135deg, var(--primary-dark), var(--primary), var(--accent)) !important;
    border-radius: 26px !important;
    box-shadow: var(--shadow-md) !important;
}

html[data-theme="light"] .dashboard-header,
html[data-theme="light"] .hero-section,
html[data-theme="light"] .page-header {
    color: var(--text-primary) !important;
    background: linear-gradient(135deg, #ffffff, #dff7f5) !important;
    border: 1px solid var(--border);
}

.btn,
button,
.action-btn,
.book-btn,
.select-room-btn {
    border-radius: 14px;
}

.btn-primary,
.btn-success,
.action-btn.btn-primary,
.book-btn,
.select-room-btn,
button[type="submit"] {
    background: var(--action-gradient) !important;
    border-color: transparent !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px var(--premium-glow);
}

html[data-theme="dark"] .btn-primary,
html[data-theme="dark"] .btn-success,
html[data-theme="dark"] .action-btn.btn-primary,
html[data-theme="dark"] .book-btn,
html[data-theme="dark"] .select-room-btn,
html[data-theme="dark"] button[type="submit"] {
    color: #21160f !important;
}

.btn-outline,
.btn-secondary,
.action-btn.btn-outline {
    background: var(--surface-strong) !important;
    border: 1px solid var(--border) !important;
    color: var(--text-primary) !important;
}

input,
select,
textarea,
.form-control,
.form-input,
.verification-input,
.filter-select {
    width: 100%;
    max-width: 100%;
    background: var(--surface-strong) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border) !important;
    border-radius: 14px !important;
}

table {
    width: 100%;
    color: var(--text-primary);
}

.sidebar {
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow-md) !important;
}

.sidebar a,
.nav-item {
    color: var(--text-secondary) !important;
}

.sidebar a.active,
.sidebar a:hover,
.nav-item.active {
    background: var(--nav-active-gradient) !important;
    color: color-mix(in srgb, var(--text-primary) 86%, #000 14%) !important;
}

html[data-theme="signature"] .sidebar a.active,
html[data-theme="light"] .sidebar a.active,
html[data-theme="signature"] .sidebar a:hover,
html[data-theme="light"] .sidebar a:hover,
html[data-theme="signature"] .nav-item.active,
html[data-theme="light"] .nav-item.active {
    color: #ffffff !important;
}

.bottom-nav {
    left: 50% !important;
    right: auto !important;
    bottom: 14px !important;
    width: min(calc(100% - 24px), 720px) !important;
    transform: translateX(-50%);
    padding: 8px !important;
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    background: color-mix(in srgb, var(--surface) 92%, transparent) !important;
    box-shadow: 0 18px 52px rgba(43, 30, 18, 0.18) !important;
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.bottom-nav .nav-item {
    max-width: none !important;
    min-height: 56px;
    border-radius: 18px;
}

img,
video,
canvas,
iframe {
    max-width: 100%;
}

.table-wrapper,
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
    .dashboard-container {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 12px !important;
    }

    .sidebar {
        position: static !important;
        width: 100% !important;
        display: block !important;
        overflow-x: auto;
        white-space: nowrap;
        border-radius: 22px !important;
    }

    .sidebar ul {
        display: flex !important;
        gap: 8px;
        padding: 8px;
    }

    .sidebar li {
        flex: 0 0 auto;
        margin: 0 !important;
    }

    .sidebar a {
        border-radius: 16px !important;
    }

    .stats-grid,
    .dashboard-grid,
    .analytics-grid,
    .apartments-grid,
    .transactions-grid,
    .verification-grid,
    .features-grid,
    .room-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
    }

    .dashboard-section,
    .section,
    .form-container {
        padding: 14px !important;
        margin: 12px !important;
    }
}

@media (max-width: 480px) {
    .mobile-header,
    .header,
    .top-header {
        min-height: 70px;
        padding-inline: 10px !important;
    }

    .theme-switcher {
        grid-template-columns: repeat(3, 30px);
    }

    .theme-choice {
        width: 30px;
        height: 30px;
    }

    .icon-btn {
        width: 38px !important;
        height: 38px !important;
    }

    .stats-grid,
    .dashboard-grid,
    .analytics-grid,
    .apartments-grid,
    .transactions-grid,
    .verification-grid,
    .features-grid,
    .room-cards,
    .form-row,
    .date-range-container,
    .booking-options,
    .price-section {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
    }

    .dashboard-header,
    .hero-section,
    .page-header {
        padding: 18px !important;
        border-radius: 22px !important;
    }

    .dashboard-header h1,
    .page-header h1 {
        font-size: 1.45rem !important;
        line-height: 1.1;
    }

    .card,
    .stat-card,
    .apartment-card,
    .reservation-card,
    .transaction-card,
    .notification-card,
    .verification-card,
    .room-card,
    .review-card,
    .deal-card,
    .form-container,
    .form-section,
    .modal-content,
    .table-container,
    .payment-container,
    .payment-card {
        border-radius: 20px !important;
    }

    .bottom-nav {
        width: calc(100% - 16px) !important;
        bottom: 8px !important;
    }

    .bottom-nav .nav-item {
        min-height: 54px;
        font-size: 0.68rem !important;
        padding-inline: 4px !important;
    }
}