:root {
    --primary: #1565C0;
    --primary-dark: #0D47A1;
    --navy: #1A237E;
    --primary-light: #42A5F5;
    --primary-bg: #E3F2FD;
    --body-bg: #F0F4F8;
    --card-bg: #FFFFFF;
    --text-dark: #263238;
    --text-muted: #78909C;
    --text-light: #B0BEC5;
    --border: #E0E6ED;
    --danger: #E53935;
    --success: #43A047;
    --warning: #FB8C00;
    --sidebar-width: 260px;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 16px;
    --shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --shadow-md: 0 4px 12px rgba(0,0,0,.1);
    --shadow-lg: 0 8px 30px rgba(0,0,0,.12);
}

* { box-sizing: border-box; }
body {
    margin: 0;
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    background: var(--body-bg);
    color: var(--text-dark);
    -webkit-font-smoothing: antialiased;
}

/* Sidebar */
.sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100vh;
    background: linear-gradient(180deg, var(--navy) 0%, var(--primary-dark) 100%);
    color: #fff; z-index: 1040; display: flex; flex-direction: column;
    box-shadow: 4px 0 24px rgba(26,35,126,.15);
}
.sidebar-header { padding: 1.25rem 1rem; font-weight: 700; display: flex; gap: .65rem; align-items: center; border-bottom: 1px solid rgba(255,255,255,.08); }
.sidebar-header .fa-cubes { font-size: 1.5rem; color: var(--primary-light); }
.brand-text {
    font-size: 1.05rem;
    background: linear-gradient(90deg, #fff, var(--primary-light));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sidebar-user {
    margin: 1rem; padding: .85rem; border-radius: var(--radius-md);
    background: rgba(255,255,255,.08); display: flex; gap: .75rem; align-items: center;
}
.sidebar-user .avatar {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary-light), var(--primary));
    font-weight: 700; font-size: 1rem;
}
.user-name { font-weight: 600; font-size: .9rem; }
.user-role { color: rgba(255,255,255,.55); font-size: 12px; }
.sidebar-nav { flex: 1; overflow-y: auto; padding: .5rem .65rem 1rem; scrollbar-width: thin; }
.sidebar-nav::-webkit-scrollbar { width: 4px; }
.sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 10px; }
.nav-section-title {
    font-size: 10px; text-transform: uppercase; letter-spacing: .08em;
    color: rgba(255,255,255,.35); padding: .75rem .75rem .35rem; font-weight: 700;
}
.sidebar-nav .nav-link {
    color: rgba(255,255,255,.82); text-decoration: none; display: flex; gap: .65rem; align-items: center;
    padding: .6rem .85rem; border-radius: var(--radius-sm); margin-bottom: 2px; font-size: .88rem; font-weight: 500;
    border-left: 3px solid transparent; transition: all .2s ease;
}
.sidebar-nav .nav-link i { width: 18px; text-align: center; opacity: .9; }
.sidebar-nav .nav-link:hover { background: rgba(255,255,255,.1); color: #fff; }
.sidebar-nav .nav-link.active {
    border-left-color: var(--primary-light);
    background: rgba(66,165,245,.22); color: #fff; font-weight: 600;
}
.nav-group .nav-link .arrow { margin-left: auto; font-size: 10px; transition: transform .25s; }
.nav-group .nav-link[aria-expanded="true"] .arrow { transform: rotate(90deg); }
.nav-sublink {
    display: block; padding: .4rem .85rem .4rem 2.75rem;
    color: rgba(255,255,255,.52); font-size: 13px; text-decoration: none; border-radius: var(--radius-sm);
}
.nav-sublink:hover, .nav-sublink.active { color: #fff; background: rgba(255,255,255,.06); }
.sidebar-footer { text-align: center; font-size: 11px; color: rgba(255,255,255,.25); padding: 1rem; }

.main-wrapper { margin-left: var(--sidebar-width); min-height: 100vh; display: flex; flex-direction: column; }
.top-navbar {
    position: sticky; top: 0; z-index: 1030; background: #fff; min-height: 64px;
    padding: .5rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: var(--shadow-sm);
}
.search-pill {
    background: var(--body-bg); border-radius: 50px; padding: .4rem 1rem;
    display: flex; align-items: center; gap: .5rem; min-width: 260px; border: 1px solid transparent;
}
.search-pill:focus-within { border-color: var(--primary-light); background: #fff; box-shadow: 0 0 0 3px rgba(21,101,192,.12); }
.search-pill input { background: transparent; outline: none; width: 100%; font-size: .9rem; }
.btn-icon { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); }
.avatar-sm {
    width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)); color: #fff; font-weight: 700; font-size: .85rem;
}
.notification-dropdown { width: 360px; max-width: 95vw; }

.content-area { padding: 24px; flex: 1; }
@media (max-width: 575px) { .content-area { padding: 16px; } }

.page-header {
    display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between;
    gap: 1rem; margin-bottom: 1.5rem;
}
.page-header h1 { font-size: 1.5rem; font-weight: 700; margin: 0; color: var(--text-dark); }
.page-header .subtitle { color: var(--text-muted); font-size: .9rem; margin: .25rem 0 0; }
.breadcrumb-nav { font-size: 13px; margin-bottom: 1rem; }
.breadcrumb-nav a { color: var(--primary); text-decoration: none; }
.breadcrumb-nav a:hover { text-decoration: underline; }
.breadcrumb-nav .sep { color: var(--text-light); margin: 0 .35rem; }

.app-footer {
    background: #fff; border-top: 1px solid var(--border); padding: 14px 24px;
    display: flex; justify-content: space-between; font-size: 13px; color: var(--text-muted);
}

/* Cards */
.card {
    border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-sm);
    background: var(--card-bg); transition: box-shadow .25s ease, transform .25s ease;
}
.card:hover { box-shadow: var(--shadow-md); }
.card-header {
    background: #fff; border-bottom: 1px solid var(--border);
    padding: 16px 20px; font-weight: 700; font-size: 15px; border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
}
.card-body { padding: 20px; }
.filter-card { background: linear-gradient(180deg, #fff 0%, #FAFCFF 100%); }

/* Stat cards */
.stat-card {
    color: #fff; border-radius: var(--radius-md); padding: 1.25rem 1.35rem;
    position: relative; overflow: hidden; min-height: 110px;
    box-shadow: var(--shadow-sm); transition: transform .25s ease, box-shadow .25s ease;
}
.stat-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.stat-card::after {
    content: ''; position: absolute; right: -20px; top: -20px; width: 100px; height: 100px;
    border-radius: 50%; background: rgba(255,255,255,.12);
}
.stat-card .stat-icon {
    position: absolute; right: 1rem; top: 50%; transform: translateY(-50%);
    font-size: 2.5rem; opacity: .28;
}
.stat-card .label { font-size: 13px; opacity: .88; font-weight: 500; }
.stat-card .value { font-size: 1.65rem; font-weight: 800; line-height: 1.2; margin-top: .35rem; }
.stat-card.primary { background: linear-gradient(135deg, #1565C0, #0D47A1); }
.stat-card.success { background: linear-gradient(135deg, #43A047, #2E7D32); }
.stat-card.warning { background: linear-gradient(135deg, #FB8C00, #EF6C00); }
.stat-card.danger { background: linear-gradient(135deg, #E53935, #C62828); }
.stat-card.info { background: linear-gradient(135deg, #039BE5, #0277BD); }
.stat-card.purple { background: linear-gradient(135deg, #7B1FA2, #4A148C); }

/* Buttons */
.btn { font-weight: 600; border-radius: var(--radius-sm); padding: 8px 18px; transition: all .25s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: linear-gradient(135deg, #1565C0, #0D47A1); border: none; box-shadow: 0 4px 12px rgba(21,101,192,.3); }
.btn-success { background: linear-gradient(135deg, #43A047, #2E7D32); border: none; box-shadow: 0 4px 12px rgba(67,160,71,.3); }
.btn-danger { background: linear-gradient(135deg, #E53935, #C62828); border: none; }
.btn-warning { background: linear-gradient(135deg, #FB8C00, #EF6C00); border: none; color: #fff; }
.btn-outline-primary { border-width: 2px; }
.btn-outline-primary:hover { background: var(--primary); color: #fff; }

/* Forms */
.form-label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: .35rem; }
.form-control, .form-select {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 10px 14px; font-size: .95rem;
}
.form-control:focus, .form-select:focus {
    border-color: var(--primary-light);
    box-shadow: 0 0 0 3px rgba(21,101,192,.12);
}

/* Tables */
.table { vertical-align: middle; }
.table thead th {
    background: var(--primary-bg); color: var(--primary-dark);
    text-transform: uppercase; font-size: 12px; letter-spacing: .04em;
    border-bottom: 2px solid #BBDEFB; padding: 12px 16px; font-weight: 700;
}
.table-striped > tbody > tr:nth-of-type(odd) { background: #FAFCFF; }
.table tbody tr:hover { background: #F5F9FF !important; }
table.dataTable.table tbody tr:hover { background: #F5F9FF !important; }

/* Badges */
.badge-status {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border-radius: 50px; font-size: 11px; font-weight: 700;
}
.badge-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-soft-success { background: #E8F5E9; color: #2E7D32; }
.badge-soft-warning { background: #FFF3E0; color: #E65100; }
.badge-soft-danger { background: #FFEBEE; color: #C62828; }
.badge-soft-primary { background: #E3F2FD; color: #1565C0; }
.badge-soft-muted { background: #FAFAFA; color: #9E9E9E; }

/* Schedule grid */
.schedule-legend { display: flex; flex-wrap: wrap; gap: .5rem; }
.legend-pill {
    display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 600;
    padding: 4px 10px; border-radius: 50px; background: #fff; border: 1px solid var(--border);
}
.legend-dot { width: 10px; height: 10px; border-radius: 3px; }
.schedule-grid { overflow: auto; max-height: calc(100vh - 320px); border-radius: var(--radius-md); }
.schedule-grid table { font-size: 11px; margin: 0; border-collapse: separate; border-spacing: 0; }
.schedule-grid thead th {
    position: sticky; top: 0; z-index: 2; background: var(--primary-bg) !important;
    text-align: center; min-width: 64px; padding: 8px 4px;
}
.schedule-grid tbody th.unit-col {
    position: sticky; left: 0; z-index: 1; background: #fff; min-width: 100px;
    box-shadow: 2px 0 4px rgba(0,0,0,.04); font-size: 12px;
}
.slot-cell {
    min-width: 70px; height: 52px; text-align: center; vertical-align: middle;
    cursor: pointer; border: 1px solid var(--border); padding: 4px; line-height: 1.25;
    transition: transform .15s ease, box-shadow .15s ease;
}
.slot-cell:hover { transform: scale(1.02); box-shadow: inset 0 0 0 2px rgba(21,101,192,.25); z-index: 1; }
.slot-available { background: #E8F5E9; color: #2E7D32; }
.slot-booked { background: #E3F2FD; color: #1565C0; }
.slot-in_use { background: #FFF3E0; color: #E65100; }
.slot-maintenance { background: #ECEFF1; color: #78909C; cursor: not-allowed; }
.slot-late { background: #FFEBEE; color: #C62828; }
.slot-cell .slot-price { font-size: 10px; opacity: .85; font-weight: 700; }
.slot-continued { background: #d6eafd !important; padding: 2px; }
.slot-cont-mark { font-size: 14px; letter-spacing: 2px; color: #1565C0; opacity: .7; }
.slot-play-time { font-size: 10px; font-weight: 800; color: #0D47A1; display: block; }
.slot-guest-name { font-size: 10px; line-height: 1.15; }
.slot-hotel-name { font-size: 9px; color: #546e7a; }
.slot-dur { font-size: 9px; color: #37474f; }
.slot-time-head { font-size: 10px !important; white-space: nowrap; min-width: 76px !important; }
.slot-avail-row th { position: sticky; top: 36px; z-index: 2; font-size: 10px; padding: 4px 2px !important; vertical-align: middle; }
.slot-avail-cell.is-full { background: #ffcdd2 !important; color: #b71c1c; }
.slot-avail-cell.is-low { background: #fff9c4 !important; color: #f57f17; }
.slot-avail-cell.is-ok { background: #c8e6c9 !important; color: #1b5e20; }
.slot-free-count { display: block; font-size: 15px; font-weight: 800; line-height: 1.1; }
.slot-free-label { font-size: 9px; text-transform: uppercase; }
.slot-col-rev { display: block; font-size: 8px; font-weight: 600; margin-top: 2px; opacity: .85; }
.schedule-board-table .slot-cell { min-width: 78px; height: 58px; }

.schedule-detail-dialog { max-width: 440px; }
.schedule-detail-modal { border-radius: var(--radius-lg); overflow: hidden; }
.schedule-detail-header {
    background: linear-gradient(135deg, #e3f2fd 0%, #fff 55%);
    padding: 1.25rem 1.25rem .75rem;
}
.schedule-detail-meta { font-weight: 600; letter-spacing: .02em; }
.schedule-detail-hero {
    background: var(--body-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
}
.schedule-detail-time .time-range {
    display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    font-size: 1.35rem; font-weight: 800; color: var(--primary-dark); line-height: 1.2;
}
.schedule-detail-time .time-sep { color: var(--text-muted); font-size: 1rem; }
.schedule-duration-pill {
    display: inline-block; margin-top: .65rem; font-size: 12px; font-weight: 700;
    padding: 4px 12px; border-radius: 50px; background: #fff; border: 1px solid var(--border);
    color: #37474f;
}
.schedule-detail-slot-hint {
    margin-top: .85rem; padding-top: .85rem; border-top: 1px dashed var(--border);
    font-size: 12px; color: var(--text-muted);
}
.schedule-detail-tile {
    display: flex; flex-direction: column; gap: 2px; height: 100%;
    padding: 10px 12px; border-radius: var(--radius-md);
    background: #fff; border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.schedule-detail-tile .tile-icon {
    width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
    background: var(--primary-bg); color: var(--primary); font-size: 13px; margin-bottom: 4px;
}
.schedule-detail-tile .tile-label { font-size: 11px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.schedule-detail-tile .tile-value { font-size: 13px; font-weight: 700; color: #263238; line-height: 1.3; word-break: break-word; }
.schedule-detail-money {
    background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
}
.schedule-detail-money .money-row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 6px 0; border-bottom: 1px solid rgba(0,0,0,.06);
}
.schedule-detail-money .money-row:last-child { border-bottom: 0; }
.schedule-detail-money .money-row.muted .money-label,
.schedule-detail-money .money-row.muted .money-amount { color: var(--text-muted); font-size: 13px; }
.schedule-detail-money .money-label { font-size: 13px; font-weight: 600; color: var(--text-muted); }
.schedule-detail-money .money-amount { font-size: 1.05rem; font-weight: 800; color: var(--primary-dark); }
.schedule-detail-money .money-row:first-child .money-amount { font-size: 1.25rem; }
.schedule-detail-footer { padding: 0 1.25rem 1.25rem; }
.schedule-detail-footer .btn { font-weight: 600; }

/* POS */
.pos-layout { display: grid; grid-template-columns: 1fr 400px; gap: 20px; min-height: calc(100vh - 200px); }
@media (max-width: 991px) { .pos-layout { grid-template-columns: 1fr; } }
.pos-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.pos-product-card {
    background: #fff; border-radius: var(--radius-md); padding: 16px; text-align: center;
    border: 1px solid var(--border); cursor: pointer; transition: all .2s;
}
.pos-product-card:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pos-product-card:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.pos-product-cart-list { min-height: 48px; }
.pos-cart-line { background: #f8fafc; border-radius: 8px; padding: 8px 10px; border: 1px solid var(--border); }
.pos-cart { display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.pos-cart-header {
    background: linear-gradient(135deg, #1565C0, #0D47A1); color: #fff;
    padding: 1rem 1.25rem; font-weight: 700;
}
.pos-layout-v2 { grid-template-columns: 1fr minmax(340px, 420px); align-items: start; }
.pos-session-bar {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.pos-session-stat {
    background: #fff; border-radius: var(--radius-md); padding: 14px 16px;
    border: 1px solid var(--border); box-shadow: var(--shadow-sm);
}
.pos-session-stat.highlight { border-color: var(--primary-light); background: linear-gradient(180deg, #fff, #f5f9ff); }
.pos-session-stat .label { display: block; font-size: 12px; color: var(--text-muted); font-weight: 600; }
.pos-session-stat .value { font-size: 1.2rem; font-weight: 800; }

.pos-booking-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px;
}
.pos-booking-pick {
    text-align: left; border: 2px solid var(--border); border-radius: var(--radius-md);
    padding: 12px 14px; background: #fff; cursor: pointer; transition: all .2s;
}
.pos-booking-pick:hover { border-color: var(--primary-light); box-shadow: var(--shadow-sm); }
.pos-booking-pick.active {
    border-color: var(--primary); background: var(--primary-bg);
    box-shadow: 0 0 0 3px rgba(21,101,192,.15);
}
.pos-booking-pick .num { font-weight: 700; font-size: 13px; display: block; }
.pos-booking-pick .cust { font-size: 12px; color: var(--text-muted); display: block; }
.pos-booking-pick .amt { font-weight: 800; color: var(--primary-dark); font-size: 1rem; margin-top: 4px; display: block; }

.pos-checkout-panel { position: sticky; top: 88px; }
.pos-checkout-body { padding: 1.25rem; background: #fff; }
.pos-preview {
    background: var(--body-bg); border-radius: var(--radius-md); padding: 1rem;
    border: 1px solid var(--border);
}
.pos-pay-methods { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 1rem; }
.pos-pay-method {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; margin: 0;
    font-size: 13px; font-weight: 600;
}
.pos-pay-method:has(input:checked) { border-color: var(--primary); background: var(--primary-bg); }
.pos-pay-method input { accent-color: var(--primary); }
.pos-quick-amounts { display: flex; flex-wrap: wrap; gap: 6px; }
.pos-pay-btn { box-shadow: 0 6px 20px rgba(67,160,71,.35); }
.pos-open-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.accounting-subnav {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
    background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}
.accounting-subnav a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 50px; font-size: 13px; font-weight: 600;
    text-decoration: none; color: var(--text-muted); border: 1px solid transparent;
}
.accounting-subnav a:hover { color: var(--primary); background: var(--primary-bg); }
.accounting-subnav a.active {
    color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    box-shadow: 0 4px 12px rgba(21,101,192,.25);
}
.journal-lines-table input, .journal-lines-table select { font-size: 13px; }
.account-type-badge {
    font-size: 10px; text-transform: uppercase; letter-spacing: .04em;
    padding: 3px 8px; border-radius: 50px; font-weight: 700;
}
.account-type-asset { background: #E3F2FD; color: #1565C0; }
.account-type-liability { background: #FFF3E0; color: #E65100; }
.account-type-revenue { background: #E8F5E9; color: #2E7D32; }
.account-type-expense { background: #FFEBEE; color: #C62828; }

.pos-open-icon {
    width: 72px; height: 72px; margin: 0 auto; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.75rem; color: #fff;
    background: linear-gradient(135deg, var(--success), #2E7D32);
}

/* Modals */
.modal-content { border: none; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
.modal-header { padding: 18px 24px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 24px; }
.modal-footer { padding: 16px 24px; border-top: 1px solid var(--border); }

/* Alerts */
.alert { border: none; border-radius: var(--radius-sm); padding: 14px 20px; }
.alert-success { background: #E8F5E9; color: #2E7D32; }
.alert-danger { background: #FFEBEE; color: #C62828; }
.alert-info { background: #E3F2FD; color: #1565C0; }

/* Public site */
.public-nav {
    background: linear-gradient(90deg, var(--navy), var(--primary-dark));
    padding: 1rem 0; box-shadow: var(--shadow-md);
}
.public-hero {
    background: linear-gradient(135deg, var(--primary-bg) 0%, #fff 50%);
    padding: 4rem 0 3rem; border-bottom: 1px solid var(--border);
}
.fleet-card-public {
    border-radius: var(--radius-md); overflow: hidden; background: #fff;
    box-shadow: var(--shadow-sm); transition: all .25s;
}
.fleet-card-public:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.public-body { background: var(--body-bg); min-height: 100vh; }
.public-hero .hero-stat {
    background: #fff; border-radius: var(--radius-md); padding: 1rem 1.25rem;
    text-align: center; box-shadow: var(--shadow-sm); height: 100%;
}
.public-hero .hero-stat .num { font-size: 1.5rem; font-weight: 800; color: var(--primary); }

.auth-page {
    min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem;
    background: linear-gradient(135deg, var(--navy) 0%, var(--primary-dark) 55%, #0277BD 100%);
}
.auth-panel {
    width: 100%; max-width: 420px; background: #fff; border-radius: var(--radius-lg);
    padding: 2rem 1.75rem; box-shadow: var(--shadow-lg);
}
.auth-logo {
    width: 56px; height: 56px; margin: 0 auto .75rem; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.5rem;
    background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff;
}
.report-tile {
    border: 1px solid var(--border); border-radius: var(--radius-md); padding: 1rem 1.1rem;
    height: 100%; background: #fff; transition: all .2s; text-decoration: none; color: inherit;
    display: block;
}
.report-tile:hover {
    border-color: var(--primary-light); box-shadow: var(--shadow-md);
    transform: translateY(-2px); color: var(--primary-dark);
}
.report-tile code { color: var(--primary); font-weight: 700; }
.report-tile-title { display: block; font-size: 13px; font-weight: 600; color: var(--text-dark); margin-top: 6px; }
.report-tile-go { display: block; font-size: 11px; color: var(--text-muted); margin-top: 8px; }
.report-category-card .card-header { background: linear-gradient(180deg, #fff, #f8fbff); }
.report-meta-bar {
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--text-muted);
}
.report-table tfoot td { border-top: 2px solid var(--primary-light); }
@media print {
    .report-output { box-shadow: none !important; }
}

.quick-actions {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px;
}
.quick-action {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
    padding: 1rem .75rem; border-radius: var(--radius-md); background: #fff;
    border: 1px solid var(--border); text-decoration: none; color: var(--text-dark);
    font-size: .85rem; font-weight: 600; box-shadow: var(--shadow-sm); transition: all .2s;
}
.quick-action i { font-size: 1.35rem; color: var(--primary); }
.quick-action:hover { border-color: var(--primary-light); transform: translateY(-2px); box-shadow: var(--shadow-md); color: var(--primary-dark); }

.stat-value-sm { font-size: 1.05rem !important; }
.summary-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.summary-list li {
    display: flex; justify-content: space-between; align-items: center;
    padding: .65rem 0; border-bottom: 1px solid var(--border);
}
.summary-list li:last-child { border-bottom: none; }

.module-split { display: grid; grid-template-columns: 340px 1fr; gap: 1.25rem; }
@media (max-width: 991px) { .module-split { grid-template-columns: 1fr; } }
.empty-state { text-align: center; }

.nav-search-results {
    position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); margin-top: 6px; max-height: 280px; overflow-y: auto; z-index: 1050; display: none;
}
.nav-search-results.show { display: block; }
.nav-search-results a {
    display: block; padding: 10px 14px; text-decoration: none; color: var(--text-dark); font-size: .9rem;
    border-bottom: 1px solid var(--border);
}
.nav-search-results a:hover { background: var(--primary-bg); color: var(--primary); }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.45); backdrop-filter: blur(3px); z-index: 1035; }
.fade-in { animation: fadeIn .45s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 991px) {
    .sidebar { transform: translateX(-100%); transition: transform .3s ease; }
    .sidebar.open { transform: none; }
    .main-wrapper { margin-left: 0; }
    .sidebar-overlay.show { display: block; }
}
@media print {
    .sidebar, .top-navbar, .app-footer, .no-print { display: none !important; }
    .main-wrapper { margin-left: 0 !important; }
    .content-area { padding: 0 !important; }
}

/* Purchase Order composer & list */
.po-wizard-steps { gap: .5rem; }
.po-wizard-step {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border);
}
.po-wizard-step span {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: #e2e8f0; font-size: 11px;
}
.po-wizard-step.active { background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary-light); }
.po-wizard-step.active span { background: var(--primary); color: #fff; }
.po-section-card { border: 1px solid var(--border); overflow: hidden; }
.po-section-head {
    display: flex; align-items: center; gap: .75rem;
    background: linear-gradient(135deg, #f8fafc, #eef4fc);
    border-bottom: 1px solid var(--border);
}
.po-step-badge {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: 14px;
    background: var(--primary); color: #fff;
}
.po-lines-wrap { overflow-x: auto; }
.po-lines-table { width: 100%; min-width: 640px; margin: 0; }
.po-lines-table th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
    color: var(--text-muted); background: #fafbfc; padding: 10px 12px; white-space: nowrap;
}
.po-lines-table td { padding: 10px 12px; vertical-align: middle; border-top: 1px solid var(--border); }
.po-col-product { min-width: 220px; }
.po-sidebar-sticky { position: sticky; top: 88px; }
.po-summary-card .card-header { background: #f8fafc; }
.po-grand-box {
    padding: .85rem 1rem; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #f0f7ff, #fff); border: 1px solid var(--primary-light);
}
.po-grand { font-size: 1.45rem; font-weight: 800; color: var(--primary); line-height: 1.2; }
.po-quick-catalog { max-height: 340px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.po-quick-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; text-align: left; padding: .55rem .65rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: #fff; transition: all .15s;
}
.po-quick-item:hover { border-color: var(--primary-light); background: var(--primary-bg); }
.po-quick-sku { font-size: 10px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: .03em; }
.po-quick-name { font-size: 13px; font-weight: 600; color: var(--text-dark); line-height: 1.25; }
.po-quick-meta { font-size: 11px; color: var(--text-muted); }
.po-line-flash { animation: poLineFlash .6s ease; }
@keyframes poLineFlash { 0%, 100% { background: transparent; } 50% { background: rgba(67, 160, 71, .12); } }
.po-list-actions .btn { padding: .2rem .45rem; }
.po-progress { height: 6px; border-radius: 4px; background: #e9ecef; overflow: hidden; }
.po-progress-bar { height: 100%; background: linear-gradient(90deg, #43a047, #2e7d32); }
@media (max-width: 1199px) {
    .po-sidebar-sticky { position: static; }
}

/* Maintenance / Work Order */
.mo-wizard-steps { gap: .5rem; }
.mo-wizard-step {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .35rem .75rem; border-radius: 999px; font-size: 12px; font-weight: 600;
    background: #f1f5f9; color: var(--text-muted); border: 1px solid var(--border);
}
.mo-wizard-step span {
    width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
    background: #e2e8f0; font-size: 11px;
}
.mo-wizard-step.active { background: #fff8e1; color: #e65100; border-color: #ffcc80; }
.mo-wizard-step.active span { background: #FB8C00; color: #fff; }
.mo-section-card { border: 1px solid var(--border); overflow: hidden; }
.mo-section-head {
    display: flex; align-items: center; gap: .75rem;
    background: linear-gradient(135deg, #fffaf5, #fff3e0);
    border-bottom: 1px solid var(--border);
}
.mo-step-badge {
    width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: 13px;
    background: #FB8C00; color: #fff;
}
.mo-sidebar-sticky { position: sticky; top: 88px; }
.mo-summary-card .card-header { background: #fffaf5; }
.mo-grand-box {
    padding: .85rem 1rem; border-radius: var(--radius-md);
    background: linear-gradient(135deg, #fff8e1, #fff); border: 1px solid #ffcc80;
}
.mo-workflow-bar { height: 8px; border-radius: 4px; background: #e9ecef; overflow: hidden; }
.mo-workflow-fill { height: 100%; background: linear-gradient(90deg, #FB8C00, #43a047); transition: width .3s; }
.mo-quick-catalog { max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
.mo-quick-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
    width: 100%; text-align: left; padding: .55rem .65rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: #fff; transition: all .15s;
}
.mo-quick-item:hover { border-color: #ffcc80; background: #fffaf5; }
.mo-quick-sku { font-size: 10px; font-weight: 700; color: #e65100; text-transform: uppercase; }
.mo-quick-name { font-size: 13px; font-weight: 600; color: var(--text-dark); }
.mo-quick-meta { font-size: 11px; color: var(--text-muted); }
.mo-list-progress { height: 4px; border-radius: 2px; background: #e9ecef; overflow: hidden; }
.mo-list-progress-bar { height: 100%; background: #FB8C00; }
.mo-list-actions .btn { padding: .2rem .45rem; }
.mo-timeline li { padding: .25rem 0; }
@media (max-width: 1199px) {
    .mo-sidebar-sticky { position: static; }
}

/* Admin users & access */
.admin-subnav .nav-link {
    font-size: 13px; font-weight: 600; color: var(--text-muted);
    border: 1px solid var(--border); background: #fff;
}
.admin-subnav .nav-link.active {
    background: var(--primary-bg); color: var(--primary-dark); border-color: var(--primary-light);
}
.user-avatar {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    display: grid; place-items: center; font-weight: 800; font-size: 14px;
    background: linear-gradient(135deg, var(--primary-light), var(--primary)); color: #fff;
}
.user-avatar-lg { width: 72px; height: 72px; font-size: 22px; }
.admin-form-card { border: 1px solid var(--border); }
.admin-form-card .card-header { background: #f8fafc; }
.admin-profile-card { border: 1px solid var(--border); }
.admin-user-actions .btn { padding: .2rem .45rem; }
.admin-role-card { border: 1px solid var(--border); }
.admin-role-card .card-header { background: linear-gradient(135deg, #f8fafc, #eef4fc); }
.admin-perm-check {
    padding: .5rem .65rem; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: #fafbfc; height: 100%;
}
.admin-perm-check:has(input:checked) { border-color: var(--primary-light); background: var(--primary-bg); }

/* Hotel guest rental ops */
.hotel-queue-row:hover { background: #f0f7ff !important; }
.hotel-pill {
    display: inline-block; padding: .2rem .5rem; border-radius: 999px;
    background: #e8f4fd; color: #1565c0; font-size: 12px; font-weight: 600;
}
.hotel-queue-card .card-header { background: linear-gradient(135deg, #f8fbff, #e8f4fd); }