:root {
    --flip7-teal: #2BA8A2;
    --flip7-teal-light: #3CC4BD;
    --flip7-teal-dark: #1E8C86;
    --flip7-teal-bg: #E8F6F5;
    --flip7-gold: #FFD23F;
    --flip7-gold-dark: #E6B800;
    --flip7-coral: #EF6C4A;
    --flip7-cream: #FFF8E7;
    --flip7-sky: #5DADE2;
    --flip7-surface: #EFF8F7;
    --flip7-card: #FFFFFF;
    --flip7-success: #27AE60;
    --flip7-error: #E74C3C;
    --primary: #2BA8A2;
    --primary-dark: #1E8C86;
    --primary-soft: #E8F6F5;
    --accent: #FFD23F;
    --ink: #173B46;
    --text: #173B46;
    --muted: #66838A;
    --surface: #FFFFFF;
    --surface-soft: #EFF8F7;
    --border: #D7ECE9;
    --ring: rgba(43, 168, 162, .16);
    --danger: #EF6C4A;
    --success: #27AE60;
    --warning: #FFD23F;
    --shadow-soft: 0 18px 42px rgba(21, 87, 89, .08);
    --shadow-card: 0 12px 28px rgba(21, 87, 89, .07);
}

html,
body {
    background: var(--flip7-surface);
    color: var(--ink);
}

body.menu-open {
    overflow: hidden;
}

.themekit-wrapper,
.dashboard-shell {
    background:
        radial-gradient(circle at 12% 0%, rgba(43, 168, 162, .10), transparent 28rem),
        radial-gradient(circle at 100% 12%, rgba(255, 210, 63, .10), transparent 26rem),
        linear-gradient(180deg, #F6FCFB 0%, var(--flip7-surface) 100%);
    grid-template-columns: 274px minmax(0, 1fr) !important;
}

.sidebar.app-sidebar,
.sidebar {
    background: linear-gradient(180deg, #FFFFFF 0%, #F3FBFA 100%) !important;
    color: var(--ink) !important;
    border-right: 1px solid var(--border);
    box-shadow: 16px 0 42px rgba(25, 98, 101, .06);
}

.sidebar-head {
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(215, 236, 233, .78);
}

.sidebar .brand,
.sidebar-brand,
.sidebar .brand span,
.sidebar-brand span {
    color: var(--ink) !important;
}

.brand-mark,
.sidebar .brand-mark,
.mobile-brand .brand-mark,
.profile-avatar {
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--flip7-teal), var(--flip7-sky)) !important;
    box-shadow: 0 12px 24px rgba(43, 168, 162, .22) !important;
}

.sidebar .brand small,
.sidebar-brand small,
.mobile-brand small {
    color: var(--muted) !important;
}

.sidebar-summary-card {
    border: 1px solid rgba(43, 168, 162, .18) !important;
    background: linear-gradient(135deg, #FFFFFF, var(--flip7-teal-bg)) !important;
    color: var(--ink) !important;
    box-shadow: 0 12px 26px rgba(43, 168, 162, .08) !important;
}

.sidebar-summary-card span,
.sidebar-summary-card em,
.sidebar-section-label {
    color: var(--muted) !important;
}

.sidebar-nav .nav-link,
.sidebar-nav a,
.sidebar-nav button {
    color: #365A62 !important;
    background: transparent !important;
    border: 1px solid transparent;
}

.sidebar-nav .nav-link:hover,
.sidebar-nav .nav-link.active,
.sidebar-nav a:hover,
.sidebar-nav a.active {
    color: var(--flip7-teal-dark) !important;
    background: #FFFFFF !important;
    border-color: rgba(43, 168, 162, .18) !important;
    box-shadow: 0 10px 24px rgba(43, 168, 162, .10) !important;
    transform: translateX(2px);
}

.nav-icon,
.sidebar-nav .nav-icon {
    background: var(--flip7-teal-bg) !important;
    color: var(--flip7-teal-dark) !important;
}

.sidebar-nav .nav-link.active .nav-icon,
.sidebar-nav a.active .nav-icon {
    background: linear-gradient(135deg, var(--flip7-teal), var(--flip7-teal-light)) !important;
    color: #FFFFFF !important;
}

.sidebar-close {
    background: #FFFFFF !important;
    color: var(--ink) !important;
    border-color: var(--border) !important;
}

.mobile-topbar,
.main-top,
.header-top.wave-header {
    background: rgba(255, 255, 255, .92) !important;
    border-bottom: 1px solid var(--border) !important;
    box-shadow: 0 12px 30px rgba(21, 87, 89, .06) !important;
    backdrop-filter: blur(18px);
}

.mobile-menu-btn,
.icon-button,
.profile-button,
.date-chip,
.locale-flag-trigger {
    border-color: var(--border) !important;
    background: #FFFFFF !important;
    color: var(--ink) !important;
    box-shadow: 0 8px 20px rgba(21, 87, 89, .06) !important;
}

.icon-button:hover,
.profile-button:hover,
.locale-flag-trigger:hover {
    border-color: rgba(43, 168, 162, .34) !important;
    box-shadow: 0 12px 28px rgba(43, 168, 162, .12) !important;
}

.main-top h1 {
    color: var(--ink) !important;
}

.main-top .meta,
.meta {
    color: var(--muted) !important;
}

.content {
    max-width: 100%;
}

.admin-hero,
.super-control-hero,
.control-hero,
.booking-hero-card {
    border: 1px solid rgba(43, 168, 162, .18) !important;
    background:
        linear-gradient(90deg, rgba(43, 168, 162, .95) 0 6px, transparent 6px),
        radial-gradient(circle at 94% 12%, rgba(255, 210, 63, .16), transparent 17rem),
        radial-gradient(circle at 12% 0%, rgba(43, 168, 162, .12), transparent 18rem),
        #FFFFFF !important;
    box-shadow: var(--shadow-soft) !important;
    border-radius: 26px !important;
    min-height: 0 !important;
}

.admin-hero:after,
.super-control-hero:after,
.control-hero:after {
    display: none !important;
}

.admin-hero h2,
.super-control-hero h2,
.control-hero h2 {
    color: var(--ink) !important;
    font-size: clamp(26px, 3.4vw, 42px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.045em !important;
}

.admin-hero p,
.super-control-hero p,
.control-hero p {
    color: var(--muted) !important;
    font-size: 15px !important;
    line-height: 1.7 !important;
}

.hero-chip,
.status-pill,
.dark-chip {
    background: var(--flip7-teal-bg) !important;
    color: var(--flip7-teal-dark) !important;
    border: 1px solid rgba(43, 168, 162, .18) !important;
}

.hero-side-panel,
.control-hero-panel {
    min-width: 0;
}

.hero-income-card,
.hero-note-card,
.control-hero-panel {
    background: linear-gradient(180deg, #FFFFFF, #FAFEFD) !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 26px rgba(21, 87, 89, .06) !important;
}

.hero-income-card strong,
.hero-note-card strong,
.control-hero-panel strong {
    color: var(--flip7-teal-dark) !important;
}

.metric-grid,
.stat-grid,
.compact-metric-grid,
.super-metric-grid {
    gap: 14px !important;
}

.metric-card,
.stat-card,
.stat-mini-card {
    border: 1px solid var(--border) !important;
    border-left: 5px solid var(--flip7-teal) !important;
    border-radius: 22px !important;
    background: var(--flip7-card) !important;
    box-shadow: var(--shadow-card) !important;
}

.metric-card:nth-child(2n),
.stat-card:nth-child(2n) {
    border-left-color: var(--flip7-gold) !important;
}

.metric-card:nth-child(3n),
.stat-card:nth-child(3n) {
    border-left-color: var(--flip7-coral) !important;
}

.metric-card:after,
.stat-card:after {
    background: rgba(43, 168, 162, .08) !important;
}

.metric-icon,
.icon-box {
    background: linear-gradient(135deg, var(--flip7-teal-bg), var(--flip7-cream)) !important;
    color: var(--flip7-teal-dark) !important;
}

.metric-card span,
.stat-card span,
.stat-mini-card span,
.metric-card small,
.stat-card small,
.stat-mini-card small {
    color: var(--muted) !important;
}

.metric-card strong,
.stat-card strong,
.stat-mini-card strong {
    color: var(--ink) !important;
}

.quick-link-card,
.overview-card,
.filter-card,
.list-card,
.form-shell-card,
.booking-action-card,
.card {
    border: 1px solid var(--border) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, .96) !important;
    box-shadow: var(--shadow-card) !important;
}

.quick-link-card {
    border-left: 5px solid var(--flip7-teal) !important;
}

.quick-link-card:hover {
    border-color: rgba(43, 168, 162, .28) !important;
    box-shadow: 0 18px 38px rgba(21, 87, 89, .10) !important;
}

.overview-card,
.filter-card,
.list-card,
.form-shell-card {
    border-top: 4px solid rgba(43, 168, 162, .85) !important;
}

.filter-head,
.list-head,
.form-shell-head,
.overview-card {
    background: linear-gradient(180deg, #FFFFFF 0%, #FBFEFE 100%);
}

.overview-card h3,
.filter-head h3,
.list-head h3,
.form-shell-head h3 {
    color: var(--ink) !important;
}

.overview-card p,
.filter-head p,
.list-head p,
.form-shell-head p,
.quick-link-card span:not(.icon-box) {
    color: var(--muted) !important;
}

.overview-inline-item,
.toggle-card,
.status-photo-panel,
.quick-status-box {
    background: linear-gradient(135deg, #FFFFFF, var(--flip7-teal-bg)) !important;
    border-color: var(--border) !important;
}

.input,
select,
textarea,
.toolbar-form input,
.filter-row input,
.filter-row select {
    background: var(--flip7-cream) !important;
    border: 1px solid #ECDDBB !important;
    color: var(--ink) !important;
    border-radius: 15px !important;
}

.input:focus,
select:focus,
textarea:focus,
.toolbar-form input:focus,
.filter-row input:focus,
.filter-row select:focus {
    border-color: var(--flip7-teal) !important;
    box-shadow: 0 0 0 5px var(--ring) !important;
    background: #FFFFFF !important;
}

.booking-panel .input,
.booking-panel select,
.booking-panel textarea {
    background: rgba(255, 248, 231, .10) !important;
    border-color: rgba(255, 255, 255, .18) !important;
    color: #FFFFFF !important;
}

.table-wrap,
.modern-table {
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

th {
    background: var(--flip7-teal-bg) !important;
    color: var(--flip7-teal-dark) !important;
}

td {
    color: #244C55 !important;
}

tr:hover td {
    background: #FAFEFD !important;
}

.cell-title small,
.help,
.error-text + small {
    color: var(--muted) !important;
}

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

.btn-primary {
    background: linear-gradient(135deg, var(--flip7-teal), var(--flip7-teal-dark)) !important;
    color: #FFFFFF !important;
    box-shadow: 0 12px 24px rgba(43, 168, 162, .22) !important;
}

.hero-action-row .btn-primary,
.form-card-actions .btn-primary,
.list-head .btn-primary,
.topbar-actions > .btn-primary,
a[href*="create"].btn-primary,
button.btn-primary[type="submit"] {
    background: linear-gradient(135deg, var(--flip7-gold), var(--flip7-gold-dark)) !important;
    color: #3F3300 !important;
    box-shadow: 0 12px 24px rgba(255, 210, 63, .22) !important;
}

.btn-soft {
    background: var(--flip7-teal-bg) !important;
    color: var(--flip7-teal-dark) !important;
    border: 1px solid rgba(43, 168, 162, .18) !important;
}

.btn-white {
    background: #FFFFFF !important;
    color: var(--ink) !important;
    border: 1px solid var(--border) !important;
}

.btn-success {
    background: rgba(39, 174, 96, .12) !important;
    color: #16824A !important;
    border: 1px solid rgba(39, 174, 96, .20) !important;
}

.btn-warning {
    background: rgba(255, 210, 63, .22) !important;
    color: #6B5600 !important;
    border: 1px solid rgba(255, 210, 63, .36) !important;
}

.btn-danger {
    background: rgba(239, 108, 74, .13) !important;
    color: #B94328 !important;
    border: 1px solid rgba(239, 108, 74, .22) !important;
}

.badge {
    min-height: 28px !important;
    padding: 6px 11px !important;
    border-radius: 999px !important;
    border: 1px solid transparent !important;
    font-weight: 950 !important;
}

.badge.success,
.badge.active {
    background: rgba(39, 174, 96, .13) !important;
    color: #16824A !important;
    border-color: rgba(39, 174, 96, .22) !important;
}

.badge.warning,
.badge.primary-badge {
    background: rgba(255, 210, 63, .28) !important;
    color: #755E00 !important;
    border-color: rgba(255, 210, 63, .42) !important;
}

.badge.danger,
.badge.error {
    background: rgba(239, 108, 74, .14) !important;
    color: #B94328 !important;
    border-color: rgba(239, 108, 74, .22) !important;
}

.badge.gray,
.badge.soft-slate {
    background: #EEF4F5 !important;
    color: #60767C !important;
    border-color: #DAE7E9 !important;
}

.dropdown-panel,
.locale-flag-panel {
    border: 1px solid var(--border) !important;
    background: rgba(255, 255, 255, .98) !important;
    box-shadow: 0 18px 48px rgba(21, 87, 89, .16) !important;
}

.dropdown-head,
.profile-panel-head {
    background: linear-gradient(180deg, #FFFFFF, var(--flip7-teal-bg)) !important;
    border-bottom: 1px solid var(--border) !important;
}

.dropdown-item.simple span,
.locale-flag-option.active,
.locale-flag-option:hover {
    background: var(--flip7-teal-bg) !important;
    color: var(--flip7-teal-dark) !important;
}

.profile-panel .dropdown-item.simple:nth-last-child(1) span {
    background: rgba(239, 108, 74, .13) !important;
    color: #B94328 !important;
}

.form-side-note {
    background: linear-gradient(135deg, var(--flip7-teal-bg), #FFFFFF) !important;
    border-color: rgba(43, 168, 162, .18) !important;
}

.empty-state-card {
    background: linear-gradient(135deg, #FFFFFF, var(--flip7-teal-bg)) !important;
    border-color: var(--border) !important;
}

.contact-list-card,
.contact-form-card,
.invoice-list-card,
.invoice-generate-card,
.user-role-hero,
.whatsapp-hero,
.invoice-hero {
    border-color: var(--border) !important;
}

.public-shell {
    background:
        radial-gradient(circle at top left, rgba(43, 168, 162, .12), transparent 32rem),
        radial-gradient(circle at top right, rgba(255, 210, 63, .10), transparent 26rem),
        linear-gradient(180deg, #F8FEFD 0%, #FFFFFF 42%, var(--flip7-surface) 100%) !important;
}

.public-topbar,
.topbar.public-topbar {
    border-bottom-color: var(--border) !important;
}

.public-nav-links .nav-link:hover,
.public-nav-links .nav-link.active,
.nav-link:hover,
.nav-link.active {
    background: var(--flip7-teal-bg) !important;
    color: var(--flip7-teal-dark) !important;
}

.landing-showcase-card,
.user-hero-visual,
.cta-card-lively {
    background:
        radial-gradient(circle at 78% 20%, rgba(255, 210, 63, .30), transparent 12rem),
        linear-gradient(145deg, var(--flip7-teal), var(--flip7-teal-dark) 58%, #173B46) !important;
}

@media (min-width: 1021px) {
    .dashboard-shell {
        grid-template-columns: 274px minmax(0, 1fr) !important;
    }
    .sidebar {
        padding: 20px !important;
    }
    .main-top {
        min-height: 76px;
    }
}

@media (max-width: 1180px) {
    .metric-grid,
    .stat-grid,
    .compact-metric-grid,
    .super-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 1020px) {
    .dashboard-shell {
        display: block !important;
        overflow-x: hidden !important;
    }
    .sidebar.app-sidebar,
    .sidebar {
        width: min(84vw, 324px) !important;
        background: #FFFFFF !important;
        box-shadow: 24px 0 52px rgba(21, 87, 89, .22) !important;
    }
    .sidebar-backdrop {
        background: rgba(23, 59, 70, .42) !important;
    }
    .mobile-topbar {
        min-height: 58px !important;
        padding: 8px 12px !important;
    }
    .main-top {
        border-radius: 0 0 18px 18px !important;
    }
    .admin-hero,
    .super-control-hero,
    .control-hero {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 720px) {
    .content {
        padding: 12px !important;
    }
    .main-top,
    .enhanced-topbar {
        padding: 10px 12px !important;
    }
    .main-top h1 {
        font-size: clamp(18px, 5.5vw, 23px) !important;
    }
    .admin-hero,
    .super-control-hero,
    .control-hero,
    .quick-link-card,
    .overview-card,
    .filter-card,
    .list-card,
    .form-shell-card,
    .metric-card,
    .stat-card {
        border-radius: 18px !important;
    }
    .admin-hero,
    .super-control-hero,
    .control-hero {
        padding: 14px !important;
    }
    .admin-hero h2,
    .super-control-hero h2,
    .control-hero h2 {
        font-size: clamp(20px, 6vw, 25px) !important;
    }
    .admin-hero p,
    .super-control-hero p,
    .control-hero p {
        font-size: 12.5px !important;
    }
    .metric-grid,
    .stat-grid,
    .compact-metric-grid,
    .super-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        margin: 12px 0 !important;
    }
    .metric-card,
    .stat-card {
        padding: 12px !important;
    }
    .metric-icon,
    .icon-box {
        width: 34px !important;
        height: 34px !important;
        border-radius: 12px !important;
        font-size: 17px !important;
    }
    .metric-card span,
    .stat-card span {
        margin-top: 8px !important;
        font-size: 11px !important;
    }
    .metric-card strong,
    .stat-card strong {
        font-size: 22px !important;
    }
    .metric-card small {
        display: none !important;
    }
    .quick-link-grid,
    .overview-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
    .filter-body,
    .list-body,
    .form-shell-body,
    .overview-card,
    .filter-head,
    .list-head,
    .form-shell-head {
        padding: 14px !important;
    }
    .filter-row,
    .filter-row[style],
    .toolbar-form,
    .search-form,
    .form-shell-grid,
    .form-grid {
        grid-template-columns: 1fr !important;
    }
    .topbar-actions .locale-flag-trigger,
    .icon-button,
    .profile-button,
    .date-chip {
        height: 32px !important;
        min-height: 32px !important;
        width: 32px !important;
        min-width: 32px !important;
        border-radius: 11px !important;
        padding: 0 !important;
        box-shadow: none !important;
    }
    .date-chip {
        width: auto !important;
        padding: 0 9px !important;
    }
    .table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    table {
        min-width: 720px !important;
    }
    .actions .btn,
    .actions form,
    .filter-row .btn,
    .form-card-actions .btn {
        width: 100%;
    }
}

@media (max-width: 420px) {
    .metric-grid,
    .stat-grid,
    .compact-metric-grid,
    .super-metric-grid {
        grid-template-columns: 1fr !important;
    }
    .sidebar.app-sidebar,
    .sidebar {
        width: min(90vw, 314px) !important;
    }
}