/* RepoteqErp — compact ERP shell (dense layout, minimal motion) */
:root {
    --app-font-size: 13px;
    --brand-green: #00a85a;
    --brand-teal: #004f4c;
    --brand-green-soft: #eef7f2;
    --brand-teal-soft: #e8efee;
    --brand-green-hover: #009952;
    --ink: #1a1f2e;
    --muted: #5c6678;
    --page: #eef1f5;
    --line: #d4dae3;
    --panel: #fff;
    --sidebar-width: 228px;
    --sidebar-collapsed-width: 4rem;
    --topbar-height: 44px;
    --radius-sm: .2rem;
    --radius-md: .25rem;
    --table-head: #e9edf2;
    --surface-muted: #eef1f5;
    --surface-subtle: #f6f8fa;
    --surface-alt: #fafbfc;
    --text-subtle: #7a8494;
    --nav-link: #3d4654;
    --nav-hover: #f0f3f7;
    --border-strong: #b8c0cc;
    --border-hover: #98a2b3;
    --table-text: #4a5568;
    --table-stripe: #fafbfc;
    --table-hover: #eef3f8;
    --focus-ring: rgba(0, 168, 90, .12);
    --on-brand: #fff;
    --gradient-panel-start: #f8fafc;
    --gradient-panel-end: #fff;
    --auth-card-shadow: rgba(0, 0, 0, .08);
}

[data-theme="dark"] {
    color-scheme: dark;
    --brand-green: #22c55e;
    --brand-teal: #5eead4;
    --brand-green-soft: #14532d;
    --brand-teal-soft: #134e4a;
    --brand-green-hover: #16a34a;
    --ink: #e2e8f0;
    --muted: #94a3b8;
    --page: #0f172a;
    --line: #334155;
    --panel: #1e293b;
    --table-head: #273449;
    --surface-muted: #334155;
    --surface-subtle: #273449;
    --surface-alt: #1e293b;
    --text-subtle: #94a3b8;
    --nav-link: #cbd5e1;
    --nav-hover: #334155;
    --border-strong: #475569;
    --border-hover: #64748b;
    --table-text: #94a3b8;
    --table-stripe: #1e293b;
    --table-hover: #273449;
    --focus-ring: rgba(34, 197, 94, .2);
    --on-brand: #fff;
    --gradient-panel-start: #1e293b;
    --gradient-panel-end: #273449;
    --auth-card-shadow: rgba(0, 0, 0, .35);
}

[data-theme="ocean"] {
    color-scheme: light;
    --brand-green: #0ea5e9;
    --brand-teal: #0369a1;
    --brand-green-soft: #e0f2fe;
    --brand-teal-soft: #dbeafe;
    --brand-green-hover: #0284c7;
    --ink: #0f172a;
    --muted: #475569;
    --page: #eff6ff;
    --line: #bfdbfe;
    --panel: #fff;
    --table-head: #dbeafe;
    --surface-muted: #e0f2fe;
    --surface-subtle: #f0f9ff;
    --surface-alt: #f8fafc;
    --text-subtle: #64748b;
    --nav-link: #334155;
    --nav-hover: #e0f2fe;
    --border-strong: #93c5fd;
    --border-hover: #60a5fa;
    --table-text: #475569;
    --table-stripe: #f0f9ff;
    --table-hover: #e0f2fe;
    --focus-ring: rgba(14, 165, 233, .15);
    --on-brand: #fff;
    --gradient-panel-start: #f0f9ff;
    --gradient-panel-end: #fff;
    --auth-card-shadow: rgba(3, 105, 161, .12);
}

[data-theme="warm"] {
    color-scheme: light;
    --brand-green: #d97706;
    --brand-teal: #92400e;
    --brand-green-soft: #fef3c7;
    --brand-teal-soft: #fde68a;
    --brand-green-hover: #b45309;
    --ink: #292524;
    --muted: #57534e;
    --page: #fafaf9;
    --line: #e7e5e4;
    --panel: #fff;
    --table-head: #f5f5f4;
    --surface-muted: #f5f5f4;
    --surface-subtle: #fafaf9;
    --surface-alt: #fafaf9;
    --text-subtle: #78716c;
    --nav-link: #44403c;
    --nav-hover: #f5f5f4;
    --border-strong: #d6d3d1;
    --border-hover: #a8a29e;
    --table-text: #57534e;
    --table-stripe: #fafaf9;
    --table-hover: #f5f5f4;
    --focus-ring: rgba(217, 119, 6, .15);
    --on-brand: #fff;
    --gradient-panel-start: #fffbeb;
    --gradient-panel-end: #fff;
    --auth-card-shadow: rgba(146, 64, 14, .1);
}

html {
    font-size: var(--app-font-size);
}

*, *::before, *::after {
    scroll-behavior: auto !important;
}

body {
    min-height: 100vh;
    color: var(--ink);
    font-family: "Segoe UI", Inter, "Noto Sans Arabic", ui-sans-serif, system-ui, sans-serif;
    line-height: 1.35;
}

.app-shell {
    background: var(--page);
}

/* ── Brand ── */
.brand {
    align-items: center;
    color: var(--brand-teal);
    display: inline-flex;
    gap: .5rem;
    text-decoration: none;
}

.brand:hover { color: var(--brand-teal); opacity: .9; }

.brand-logo-mark {
    flex-shrink: 0;
    height: 1.85rem;
    width: 1.85rem;
}

.brand-name {
    font-size: .92rem;
    font-weight: 600;
    line-height: 1.2;
}

.brand-compact .brand-name { display: none; }

.brand-on-dark,
.brand-on-dark:hover { color: var(--on-brand); }

/* ── Sidebar ── */
.sidebar {
    background: var(--panel);
    border-inline-end: 1px solid var(--line);
    color: var(--brand-teal);
    inset-block: 0;
    inset-inline-start: 0;
    overflow: hidden;
    padding: 0;
    position: fixed;
    transition: width .2s ease;
    width: var(--sidebar-width);
    z-index: 1030;
}

.sidebar::before { display: none; }

.sidebar > * { position: relative; z-index: 1; }

.sidebar-brand {
    align-items: center;
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: .35rem;
    justify-content: space-between;
    padding: .55rem .75rem;
}

.sidebar-collapse-toggle {
    flex-shrink: 0;
    margin-inline-start: auto;
}

.sidebar-scroll {
    flex: 1 1 auto;
    overflow-x: hidden;
    overflow-y: auto;
    padding: .25rem .45rem .5rem;
    scrollbar-width: thin;
}

.sidebar-section {
    margin-bottom: .15rem;
}

.sidebar-section + .sidebar-section {
    border-top: 1px solid var(--line);
    margin-top: .35rem;
    padding-top: .2rem;
}

.sidebar-section-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text-subtle);
    cursor: pointer;
    display: flex;
    gap: .35rem;
    padding: .55rem .35rem .2rem;
    width: 100%;
}

.sidebar-section-toggle:hover {
    color: var(--brand-teal);
}

.sidebar-section-icon {
    align-items: center;
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    color: var(--brand-teal);
    display: inline-flex;
    flex-shrink: 0;
    font-size: .72rem;
    height: 1.35rem;
    justify-content: center;
    width: 1.35rem;
}

.sidebar-section-toggle:hover .sidebar-section-icon {
    background: var(--brand-teal-soft);
}

.sidebar-label {
    color: inherit;
    flex: 1 1 auto;
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0;
    text-align: start;
    text-transform: uppercase;
}

.sidebar-label::after { display: none; }

.sidebar-section-chevron {
    flex-shrink: 0;
    font-size: .65rem;
    transition: transform .2s ease;
}

.sidebar-section.is-collapsed .sidebar-section-chevron {
    transform: rotate(-90deg);
}

.rtl-layout .sidebar-section.is-collapsed .sidebar-section-chevron {
    transform: rotate(90deg);
}

.sidebar-section.is-collapsed .sidebar-section-body {
    display: none;
}

.mobile-nav-section {
    margin-bottom: .35rem;
}

.mobile-nav-section + .mobile-nav-section {
    border-top: 1px solid var(--line);
    margin-top: .35rem;
    padding-top: .2rem;
}

.mobile-nav-section-toggle {
    align-items: center;
    background: transparent;
    border: 0;
    color: var(--text-subtle);
    cursor: pointer;
    display: flex;
    gap: .35rem;
    padding: .45rem .15rem .15rem;
    width: 100%;
}

.mobile-nav-section.is-collapsed .sidebar-section-chevron {
    transform: rotate(-90deg);
}

.rtl-layout .mobile-nav-section.is-collapsed .sidebar-section-chevron {
    transform: rotate(90deg);
}

.mobile-nav-section.is-collapsed .mobile-nav-section-body {
    display: none;
}

.sidebar .nav-link,
.mobile-nav .nav-link {
    align-items: center;
    border-radius: var(--radius-sm);
    color: var(--nav-link);
    display: flex;
    font-size: .8125rem;
    font-weight: 500;
    gap: .45rem;
    margin-bottom: 1px;
    padding: .35rem .45rem;
    text-decoration: none;
}

.sidebar .nav-link .nav-icon,
.mobile-nav .nav-link .nav-icon {
    align-items: center;
    background: var(--brand-teal-soft);
    border-radius: var(--radius-sm);
    color: var(--brand-teal);
    display: inline-flex;
    flex-shrink: 0;
    font-size: .85rem;
    height: 1.55rem;
    justify-content: center;
    width: 1.55rem;
}

.sidebar .nav-link:hover,
.mobile-nav .nav-link:hover {
    background: var(--nav-hover);
    color: var(--brand-teal);
}

.sidebar .nav-link.active,
.mobile-nav .nav-link.active {
    background: var(--brand-green-soft);
    box-shadow: inset 2px 0 0 var(--brand-green);
    color: var(--brand-teal);
    font-weight: 600;
}

.rtl-layout .sidebar .nav-link.active,
.rtl-layout .mobile-nav .nav-link.active {
    box-shadow: inset -2px 0 0 var(--brand-green);
}

.sidebar .nav-link.active .nav-icon,
.mobile-nav .nav-link.active .nav-icon {
    background: var(--brand-green);
    color: var(--on-brand);
}

.sidebar-footer {
    align-items: center;
    background: var(--surface-subtle);
    border-top: 1px solid var(--line);
    color: var(--text-subtle);
    display: flex;
    font-size: .7rem;
    margin-top: auto;
    padding: .45rem .75rem;
}

.status-dot {
    background: var(--brand-green);
    border-radius: 50%;
    display: inline-block;
    height: .45rem;
    margin-inline-end: .35rem;
    width: .45rem;
}

/* ── Shell layout ── */
.app-content {
    margin-inline-start: var(--sidebar-width);
    min-height: 100vh;
    transition: margin-inline-start .2s ease;
}

html.sidebar-collapsed {
    --sidebar-width: var(--sidebar-collapsed-width);
}

html.sidebar-collapsed .sidebar-brand .brand-name,
html.sidebar-collapsed .sidebar .nav-text,
html.sidebar-collapsed .sidebar .sidebar-section-toggle,
html.sidebar-collapsed .sidebar-footer .sidebar-footer-text {
    display: none;
}

html.sidebar-collapsed .sidebar-brand {
    flex-direction: column;
    gap: .25rem;
    justify-content: center;
    padding-inline: .35rem;
}

html.sidebar-collapsed .sidebar-collapse-toggle {
    height: 1.65rem;
    margin-inline-start: 0;
    width: 1.65rem;
}

html.sidebar-collapsed .sidebar .nav-link {
    justify-content: center;
    padding-inline: .35rem;
}

html.sidebar-collapsed .sidebar-section.is-collapsed .sidebar-section-body {
    display: block;
}

html.sidebar-collapsed .sidebar-footer {
    justify-content: center;
    text-align: center;
}

.topbar {
    align-items: center;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: flex;
    height: var(--topbar-height);
    padding: 0 .75rem;
    position: sticky;
    top: 0;
    z-index: 1020;
}

.content-area {
    margin: 0 auto;
    max-width: none;
    padding: .65rem .85rem 1rem;
}

.btn-icon {
    align-items: center;
    background: transparent;
    border: 0;
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: inline-flex;
    font-size: 1rem;
    height: 1.85rem;
    justify-content: center;
    width: 1.85rem;
}

.btn-icon:hover {
    background: var(--surface-muted);
    color: var(--brand-teal);
}

.btn-icon:disabled {
    cursor: not-allowed;
    opacity: .45;
}

.btn-icon:disabled:hover {
    background: transparent;
    color: var(--muted);
}

.font-size-control {
    align-items: center;
    background: var(--surface-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    display: inline-flex;
    gap: 1px;
    padding: 1px;
}

.font-size-control .btn-icon {
    font-size: .85rem;
    height: 1.65rem;
    width: 1.65rem;
}

.font-size-control .font-size-reset {
    border-inline-end: 1px solid var(--line);
    border-inline-start: 1px solid var(--line);
    border-radius: 0;
    font-size: .68rem;
    font-weight: 600;
    width: 2.65rem;
}

.font-size-indicator {
    line-height: 1;
}

.user-menu {
    align-items: center;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: flex;
    font-size: .78rem;
    gap: .35rem;
    padding: .15rem .45rem .15rem .2rem;
}

.user-menu:hover {
    border-color: var(--border-strong);
    color: var(--ink);
}

.user-avatar {
    align-items: center;
    background: var(--brand-teal);
    border-radius: var(--radius-sm);
    color: var(--on-brand);
    display: inline-flex;
    font-size: .68rem;
    font-weight: 700;
    height: 1.45rem;
    justify-content: center;
    width: 1.45rem;
}

.mobile-nav {
    background: var(--panel);
    color: var(--brand-teal);
}

.mobile-nav .offcanvas-header {
    border-bottom: 1px solid var(--line);
    padding: .65rem .75rem;
}

.mobile-nav .offcanvas-body { padding: .5rem; }

/* ── Page chrome ── */
.content-area .breadcrumb {
    font-size: .72rem;
    margin-bottom: .35rem;
    padding: 0;
}

.content-area .erp-page-head {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: space-between;
    margin-bottom: .45rem;
}

.content-area .erp-page-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.25;
    margin: 0;
}

.content-area .erp-page-subtitle {
    color: var(--muted);
    font-size: .72rem;
    margin: 0;
}

/* ── Panels & forms ── */
.erp-panel,
.content-area .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: none;
}

.erp-panel .card-body,
.content-area .card .card-body {
    padding: .55rem .65rem;
}

.form-control,
.form-select {
    border-color: var(--line);
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    min-height: 1.85rem;
    padding: .25rem .45rem;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--brand-green);
    box-shadow: 0 0 0 .15rem var(--focus-ring);
}

.form-select:focus {
    position: relative;
    z-index: 5;
}

.erp-form-section {
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .75rem .85rem;
}

.erp-form-section-head {
    align-items: center;
    color: var(--brand-teal);
    display: flex;
    font-size: .78rem;
    font-weight: 700;
    gap: .35rem;
    letter-spacing: .02em;
    margin-bottom: .65rem;
    text-transform: uppercase;
}

.erp-form-section-head i {
    font-size: .9rem;
}

.erp-form-section-compact .form-label {
    font-size: .72rem;
    margin-bottom: .15rem;
}

.erp-billing-panel {
    background: linear-gradient(180deg, var(--gradient-panel-start) 0%, var(--gradient-panel-end) 100%);
}

.input-group-text {
    background: var(--surface-subtle);
    border-color: var(--line);
    font-size: .8125rem;
    padding: .25rem .45rem;
}

.btn {
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    font-weight: 500;
    padding: .25rem .55rem;
}

.btn-sm {
    font-size: .75rem;
    padding: .15rem .4rem;
}

.btn-primary {
    background: var(--brand-green);
    border-color: var(--brand-green);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--brand-green-hover);
    border-color: var(--brand-green-hover);
}

.btn-outline-secondary {
    border-color: var(--border-strong);
    color: var(--nav-link);
}

.btn-outline-secondary:hover {
    background: var(--nav-hover);
    border-color: var(--border-hover);
    color: var(--ink);
}

/* ── ERP data tables ── */
.table-responsive {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}

.table {
    --bs-table-bg: transparent;
    font-size: .8125rem;
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding: .3rem .45rem;
    vertical-align: middle;
}

.table thead th {
    background: var(--table-head);
    border-bottom: 1px solid var(--line);
    color: var(--table-text);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: uppercase;
    white-space: nowrap;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--table-stripe);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--table-hover);
}

.table-bordered > :not(caption) > * > * {
    border-color: var(--line);
}

.badge {
    font-size: .68rem;
    font-weight: 600;
    padding: .2em .45em;
}

/* DataTables integration */
div.dt-container {
    font-size: .8125rem;
}

div.dt-container .dt-search input,
div.dt-container .dt-length select {
    font-size: .8125rem;
    min-height: 1.75rem;
    padding: .15rem .35rem;
}

div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-search {
    margin-bottom: .35rem;
}

table.dataTable thead th {
    border-bottom: 1px solid var(--line) !important;
}

table.dataTable.table-bordered > :not(caption) > * > * {
    border-bottom-width: 1px;
}

/* ── Pagination ── */
.pagination {
    --bs-pagination-padding-y: .15rem;
    --bs-pagination-padding-x: .45rem;
    --bs-pagination-font-size: .75rem;
}

.pagination .page-link {
    border-radius: var(--radius-sm);
}

/* ── Modals & toasts (no fade motion) ── */
.modal.fade,
.modal.fade .modal-dialog,
.offcanvas,
.toast,
.btn,
.nav-link,
.card,
.master-data-card,
.dashboard-metric {
    transition: none !important;
    animation: none !important;
}

.modal-header,
.modal-body,
.modal-footer {
    padding: .55rem .75rem;
}

.modal-title {
    font-size: .95rem;
}

.modal-body .form-label {
    font-size: .75rem;
    margin-bottom: .15rem;
}

.toast-container { z-index: 1080; }

/* ── Auth ── */
.auth-shell { background: var(--page); }

.auth-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin: 0 auto;
    max-width: 1260px;
    padding: .75rem 1rem;
}

.auth-header-label { color: var(--muted); font-size: .78rem; }

.auth-content {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: calc(100vh - 56px);
    padding: 1rem;
}

.auth-content .card {
    box-shadow: 0 2px 8px var(--auth-card-shadow) !important;
}

.login-brand-panel {
    background: var(--brand-teal) !important;
}

.login-brand-panel .brand-name {
    color: var(--on-brand);
    font-size: 1rem;
}

.login-form-panel {
    max-width: 22rem;
}

/* ── Dashboard (compact) ── */
.dashboard-hero { margin-bottom: .55rem !important; padding-top: 0; }

.dashboard-hero .h3,
.dashboard-hero h1 {
    font-size: 1rem;
    margin-bottom: .15rem;
}

.dashboard-occupancy-card {
    background: var(--brand-green-soft);
    border: 1px solid #cce8d8;
    border-radius: var(--radius-md);
    padding: .55rem .65rem;
}

.occupancy-ring {
    --occupancy: 0;
    align-items: center;
    background: conic-gradient(var(--brand-green) calc(var(--occupancy) * 1%), #dce3ea 0);
    border-radius: 50%;
    display: flex;
    flex-shrink: 0;
    height: 3rem;
    justify-content: center;
    position: relative;
    width: 3rem;
}

.occupancy-ring::before {
    background: #fff;
    border-radius: 50%;
    content: "";
    height: 2.15rem;
    position: absolute;
    width: 2.15rem;
}

.occupancy-ring-value {
    color: var(--brand-teal);
    font-size: .72rem;
    font-weight: 700;
    position: relative;
    z-index: 1;
}

.dashboard-metric .card-body {
    padding: .45rem .55rem !important;
}

.dashboard-metric .h3,
.erp-metric-value {
    font-size: 1.05rem;
    font-weight: 600;
    margin-bottom: 0;
}

.content-area .h3,
.content-area .h4 {
    font-size: 1rem;
    font-weight: 600;
}

.metric-icon,
.metric-icon-sm {
    align-items: center;
    background: var(--brand-teal-soft);
    border-radius: var(--radius-sm);
    color: var(--brand-teal);
    display: inline-flex;
    font-size: .85rem;
    height: 1.65rem;
    justify-content: center;
    width: 1.65rem;
}

.chart-empty {
    align-items: center;
    background: var(--surface-alt);
    border: 1px dashed var(--line);
    border-radius: var(--radius-sm);
    color: var(--muted);
    display: flex;
    flex-direction: column;
    font-size: .78rem;
    gap: .35rem;
    justify-content: center;
    margin-top: .65rem;
    min-height: 140px;
}

.chart-empty i { color: var(--brand-green); font-size: 1.35rem; }

.nav-tabs-dashboard { border-bottom-color: var(--line); gap: 0; }

.nav-tabs-dashboard .nav-link {
    border-radius: var(--radius-sm) var(--radius-sm) 0 0;
    color: var(--muted);
    font-size: .78rem;
    padding: .3rem .55rem;
}

.nav-tabs-dashboard .nav-link.active {
    background: var(--panel);
    border-color: var(--line) var(--line) var(--panel);
    color: var(--brand-teal);
    font-weight: 600;
}

.dashboard-activity-list .list-group-item {
    font-size: .8125rem;
    padding: .35rem .5rem;
}

.activity-empty,
.empty-icon {
    border-radius: var(--radius-sm);
    font-size: .8125rem;
    padding: .45rem;
}

.empty-icon {
    height: 1.55rem;
    width: 1.55rem;
}

/* ── Master data hub cards ── */
.master-data-card {
    border: 1px solid var(--line) !important;
}

.master-data-card:hover {
    border-color: #98a2b3 !important;
    box-shadow: none !important;
}

.master-data-card .card-body {
    padding: .55rem .65rem !important;
}

.md-icon-0,
.md-icon-1,
.md-icon-2,
.md-icon-3,
.md-icon-4,
.md-icon-5 {
    border-radius: var(--radius-sm) !important;
    font-size: .9rem !important;
    height: 1.65rem !important;
    width: 1.65rem !important;
}

.culture-switcher,
.theme-switcher {
    background: var(--panel);
    border-color: var(--line);
    border-radius: var(--radius-sm);
    color: var(--ink);
    font-size: .75rem;
    max-width: 8.5rem;
    min-height: 1.75rem;
    min-width: 6.5rem;
    padding: .15rem 1.5rem .15rem .35rem;
}

.theme-control {
    gap: .25rem;
}

[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .input-group-text {
    background-color: var(--surface-subtle);
    color: var(--ink);
}

[data-theme="dark"] .breadcrumb-item.active,
[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before {
    color: var(--muted);
}

[data-theme="dark"] .btn-outline-secondary {
    color: var(--nav-link);
}

.theme-control-icon {
    font-size: .9rem;
}

.validation-summary-valid { display: none; }

/* Empty table states */
.table .erp-empty-cell {
    color: var(--muted);
    font-size: .8125rem;
    padding: 1rem !important;
}

.table .erp-empty-cell i {
    display: block;
    font-size: 1.25rem;
    margin-bottom: .25rem;
}

@media (max-width: 991.98px) {
    .app-content { margin-inline-start: 0; }
    .topbar { padding: 0 .5rem; }
    .content-area { padding: .5rem; }
}

@media (max-width: 575.98px) {
    .auth-header { padding: .65rem; }
    .auth-header-label { display: none; }
    .auth-content { align-items: flex-start; padding: .65rem; }
}

/* ── Room availability status page ── */
.room-status-legend .badge {
    font-size: .72rem;
    font-weight: 600;
    padding: .35rem .55rem;
}

.room-status-metric .card-body {
    padding: .55rem .65rem !important;
}

.room-status-metric-icon {
    align-items: center;
    border-radius: var(--radius-sm);
    display: inline-flex;
    font-size: .95rem;
    height: 2rem;
    justify-content: center;
    width: 2rem;
}

.room-status-metric-total .room-status-metric-icon { background: #e8f4f8; color: #0d6efd; }
.room-status-metric-available .room-status-metric-icon { background: #d1f2e1; color: #198754; }
.room-status-metric-reserved .room-status-metric-icon { background: #dbeafe; color: #2563eb; }
.room-status-metric-checked-in .room-status-metric-icon { background: #fff3cd; color: #d97706; }
.room-status-metric-out-of-order .room-status-metric-icon { background: #e9ecef; color: #6c757d; }
.room-status-metric-occupancy .room-status-metric-icon { background: #ede9fe; color: #7c3aed; }

.room-status-metric-total { border-top: 3px solid #0d6efd; }
.room-status-metric-available { border-top: 3px solid #198754; }
.room-status-metric-reserved { border-top: 3px solid #2563eb; }
.room-status-metric-checked-in { border-top: 3px solid #f59e0b; }
.room-status-metric-out-of-order { border-top: 3px solid #6c757d; }
.room-status-metric-occupancy { border-top: 3px solid #7c3aed; }

.room-status-floor-card .card-header {
    background: linear-gradient(90deg, #f8fafc 0%, #fff 100%);
}

.room-status-chip {
    font-size: .68rem;
    font-weight: 600;
    padding: .35rem .5rem;
}

.room-status-chip-toggle {
    border: 0;
    cursor: pointer;
    user-select: none;
}

.room-status-chip-toggle:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .85);
    outline-offset: 2px;
}

.room-status-chip-toggle.room-status-chip-inactive {
    opacity: .45;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .65);
}

.room-status-room-col.is-hidden-by-chip {
    display: none !important;
}

.room-status-chip-available { background: #198754; color: #fff; }
.room-status-chip-reserved { background: #2563eb; color: #fff; }
.room-status-chip-checked-in { background: #f59e0b; color: #fff; }
.room-status-chip-occupancy { background: #7c3aed; color: #fff; }

.room-status-tile {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    height: 100%;
    padding: .6rem .65rem;
    transition: transform .12s ease, box-shadow .12s ease;
}

.room-status-tile:hover {
    box-shadow: 0 .15rem .45rem rgba(15, 23, 42, .08);
    transform: translateY(-1px);
}

.room-status-number {
    font-size: .95rem;
    font-weight: 700;
}

.room-status-room-link {
    color: inherit;
}

.room-status-room-link:hover .room-status-number {
    text-decoration: underline;
}

.room-status-icon {
    align-items: center;
    border-radius: 50%;
    display: inline-flex;
    font-size: .72rem;
    height: 1.35rem;
    justify-content: center;
    width: 1.35rem;
}

.room-status-guest {
    color: #334155;
    font-weight: 500;
}

.room-status-stay-dates {
    color: #64748b;
    line-height: 1.35;
}

.room-status-available {
    background: linear-gradient(135deg, #f0fdf4 0%, #fff 100%);
    border-inline-start: 4px solid #198754;
}

.room-status-available .room-status-icon { background: #198754; color: #fff; }

.room-status-reserved {
    background: linear-gradient(135deg, #eff6ff 0%, #fff 100%);
    border-inline-start: 4px solid #2563eb;
}

.room-status-reserved .room-status-icon { background: #2563eb; color: #fff; }

.room-status-checked-in {
    background: linear-gradient(135deg, #fffbeb 0%, #fff 100%);
    border-inline-start: 4px solid #f59e0b;
}

.room-status-checked-in .room-status-icon { background: #f59e0b; color: #fff; }

.room-status-out-of-order {
    background: linear-gradient(135deg, #f8fafc 0%, #fff 100%);
    border-inline-start: 4px solid #6c757d;
    opacity: .92;
}

.room-status-out-of-order .room-status-icon { background: #6c757d; color: #fff; }

.room-status-badge-available,
.room-status-legend .room-status-badge-available { background: #198754; color: #fff; }
.room-status-badge-reserved,
.room-status-legend .room-status-badge-reserved { background: #2563eb; color: #fff; }
.room-status-badge-checked-in,
.room-status-legend .room-status-badge-checked-in { background: #f59e0b; color: #fff; }
.room-status-badge-out-of-order,
.room-status-legend .room-status-badge-out-of-order { background: #6c757d; color: #fff; }

.room-status-badge-dirty { background: #dc3545; color: #fff; }
.room-status-badge-cleaning { background: #fd7e14; color: #fff; }
.room-status-badge-inspected { background: #0dcaf0; color: #052c65; }
.room-status-badge-clean { background: #198754; color: #fff; }

.dashboard-progress {
    display: flex;
    height: .45rem;
}