/* VSL CI/CO Dashboard Redesign - mobile-first interactive cards */
.vsl-cico-wrap,
.vsl-cico-wrap * {
    box-sizing: border-box;
}

.vsl-cico-wrap {
    --ok: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;
    --info: #3b82f6;
    --vip: #8b5cf6;

    --bg: #f6f8fb;
    --surface: #ffffff;
    --surface-2: #f1f5f9;
    --text: #0f172a;
    --muted: #475569;
    --border: #dbe2ea;
    --shadow: 0 12px 24px rgba(15, 23, 42, 0.08);
    --radius: 16px;

    color: var(--text);
    background: radial-gradient(circle at top right, #dbeafe 0, transparent 32%),
                radial-gradient(circle at top left, #dcfce7 0, transparent 30%),
                var(--bg);
    padding-bottom: 48px;
    min-height: 100vh;
    font-family: "Segoe UI", Tahoma, sans-serif;
}

.vsl-cico-wrap.dark-mode {
    --bg: #0b1220;
    --surface: #111b2c;
    --surface-2: #19263a;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --border: #22354f;
    --shadow: 0 16px 32px rgba(2, 6, 23, 0.45);
    background: radial-gradient(circle at top right, rgba(37, 99, 235, 0.2) 0, transparent 34%),
                radial-gradient(circle at top left, rgba(34, 197, 94, 0.15) 0, transparent 30%),
                var(--bg);
}

.cico-dashboard {
    max-width: 1340px;
    margin: 0 auto;
    padding: 0 14px;
}

.cico-topbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--surface) 88%, transparent);
    backdrop-filter: blur(8px);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: 18px;
    margin: 12px 0;
    padding: 12px;
    display: grid;
    gap: 10px;
}

.cico-topbar__left,
.cico-topbar__center,
.cico-topbar__right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cico-topbar__title {
    margin: 0;
    font-size: 1.1rem;
    line-height: 1.2;
}

.cico-count-pill {
    padding: 6px 12px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.82rem;
}

.cico-count-pill--green { background: color-mix(in srgb, var(--ok) 24%, transparent); color: var(--ok); }
.cico-count-pill--amber { background: color-mix(in srgb, var(--warn) 24%, transparent); color: var(--warn); }
.cico-count-pill--red { background: color-mix(in srgb, var(--danger) 24%, transparent); color: var(--danger); }
.cico-count-pill--grey { background: color-mix(in srgb, #64748b 20%, transparent); color: var(--muted); }

.cico-overdue-badge {
    color: var(--danger);
    font-weight: 700;
}

.cico-countdown {
    font-size: 0.82rem;
    color: var(--muted);
}

.cico-period-tabs {
    display: inline-flex;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px;
    background: var(--surface-2);
}

.cico-period-tab {
    border: 0;
    background: transparent;
    color: var(--muted);
    font-weight: 700;
    border-radius: 999px;
    padding: 8px 12px;
    cursor: pointer;
}

.cico-period-tab.active {
    background: var(--surface);
    color: var(--text);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.cico-search-wrap {
    flex: 1;
    min-width: 220px;
}

.cico-search-input,
.cico-input,
.cico-room-status-select,
.cico-method-row select,
.cico-method-row input,
.cico-form-row textarea,
.cico-form-row input,
#cico-deposit-modal-method,
#cico-deposit-modal-amount,
#cico-deposit-modal-ref,
#cico-deposit-modal-notes {
    width: 100%;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    border-radius: 12px;
    padding: 10px 12px;
    font: inherit;
}

.cico-search-input:focus,
.cico-input:focus,
.cico-room-status-select:focus {
    outline: 2px solid color-mix(in srgb, var(--info) 55%, transparent);
    outline-offset: 1px;
}

.cico-bulk-wa-btn,
.cico-dark-toggle,
.cico-btn,
.cico-action-btn,
.cico-mini-btn,
.cico-link-btn,
#cico-wa-send-custom,
#cico-bulk-wa-send,
#cico-bulk-wa-cancel,
#cico-deposit-modal-confirm,
#cico-deposit-modal-cancel,
.cico-wa-tpl-btn {
    border: 1px solid var(--border);
    border-radius: 12px;
    min-height: 44px;
    padding: 8px 12px;
    cursor: pointer;
    background: var(--surface);
    color: var(--text);
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.cico-bulk-wa-btn { background: #dcfce7; color: #166534; border-color: #bbf7d0; }
.cico-dark-toggle { width: 44px; padding: 0; }
.cico-btn--primary,
.cico-complete-checkin-btn,
.cico-complete-checkout-btn,
.cico-action-btn--manage { background: var(--info); color: #fff; border-color: transparent; }
.cico-complete-checkin-btn { background: var(--ok); }
.cico-complete-checkout-btn { background: #7c3aed; }
.cico-action-btn--call { background: #dbeafe; color: #1d4ed8; }
.cico-action-btn--wa { background: #dcfce7; color: #166534; }
.cico-action-btn--deposit,
.cico-partial-refund-btn { background: color-mix(in srgb, var(--warn) 20%, transparent); color: #92400e; }
.cico-full-refund-btn,
.cico-quick-refund-btn { background: color-mix(in srgb, var(--ok) 20%, transparent); color: #166534; }
.cico-retain-btn { background: color-mix(in srgb, var(--danger) 20%, transparent); color: #991b1b; }

.cico-dashboard__body {
    display: grid;
    gap: 14px;
}

.cico-cards-col,
.cico-sidebar,
.cico-wa-panel,
.cico-modal__box,
.cico-room-card,
.cico-empty-state,
.cico-card,
.cico-revenue-strip,
.cico-week-table {
    background: var(--surface);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
    border-radius: var(--radius);
}

.cico-cards-container {
    display: grid;
    gap: 12px;
}

.cico-card {
    overflow: hidden;
    border-left: 6px solid #94a3b8;
}

.cico-card--grey { border-left-color: #94a3b8; }
.cico-card--amber { border-left-color: var(--warn); }
.cico-card--green { border-left-color: var(--ok); }
.cico-card--red { border-left-color: var(--danger); }

.cico-card__main {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    padding: 14px;
    cursor: pointer;
}

.cico-card__avatar {
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--info) 30%, transparent);
    color: var(--info);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.cico-card__name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.cico-card__name {
    font-size: 1rem;
    font-weight: 800;
}

.cico-badge {
    border-radius: 999px;
    padding: 2px 9px;
    font-size: 0.72rem;
    font-weight: 800;
}

.cico-badge--green { background: color-mix(in srgb, var(--ok) 22%, transparent); color: var(--ok); }
.cico-badge--amber { background: color-mix(in srgb, var(--warn) 22%, transparent); color: #92400e; }
.cico-badge--red { background: color-mix(in srgb, var(--danger) 22%, transparent); color: var(--danger); }
.cico-badge--purple { background: color-mix(in srgb, var(--vip) 22%, transparent); color: #6d28d9; }

.cico-card__meta {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    color: var(--muted);
    font-size: 0.88rem;
    margin-top: 4px;
}

.cico-card__meta--small {
    font-size: 0.82rem;
}

.cico-card__chevron {
    color: var(--muted);
    align-self: center;
}

.cico-card.expanded .cico-card__chevron {
    transform: rotate(180deg);
}

.cico-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 12px;
}

.cico-card__expand {
    border-top: 1px solid var(--border);
    padding: 12px 14px 14px;
}

.cico-expand-section {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px;
    margin-bottom: 10px;
}

.cico-expand-section:last-child { margin-bottom: 0; }

.cico-expand-section__title {
    margin: 0 0 8px;
    font-size: 0.83rem;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--muted);
}

.cico-form-row {
    display: grid;
    gap: 8px;
    margin-bottom: 10px;
}

.cico-form-row:last-child {
    margin-bottom: 0;
}

.cico-form-row label {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 700;
}

.cico-method-row {
    display: grid;
    gap: 8px;
}

.cico-extra-guest-preview {
    font-size: 0.8rem;
    background: color-mix(in srgb, var(--warn) 20%, transparent);
    color: #92400e;
    border-radius: 10px;
    padding: 6px 8px;
}

.cico-success-note,
.cico-muted {
    color: var(--muted);
}

.cico-dl {
    margin: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px 12px;
}

.cico-dl dt {
    color: var(--muted);
    font-weight: 700;
}

.cico-dl dd {
    margin: 0;
    font-weight: 600;
}

.cico-sidebar {
    padding: 12px;
}

.cico-sidebar.is-collapsed .cico-sidebar__body {
    display: none;
}

.cico-sidebar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cico-sidebar-toggle {
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    background: var(--surface);
}

.cico-room-card {
    margin-bottom: 8px;
    padding: 10px;
}

.cico-room-card__name {
    font-weight: 700;
}

.cico-room-card__status {
    color: var(--muted);
    font-size: 0.82rem;
    margin: 2px 0 8px;
}

.cico-room--vacant { border-left: 4px solid #94a3b8; }
.cico-room--cleaning { border-left: 4px solid var(--warn); }
.cico-room--ready { border-left: 4px solid var(--ok); }
.cico-room--occupied { border-left: 4px solid var(--info); }

.cico-wa-panel {
    position: fixed;
    right: 16px;
    bottom: 16px;
    width: min(390px, calc(100vw - 32px));
    z-index: 100;
    padding: 12px;
}

.cico-wa-panel[hidden] { display: none !important; }

.cico-wa-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.cico-wa-panel__close {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    font-size: 1.3rem;
}

.cico-wa-templates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 8px;
}

.cico-wa-custom {
    display: grid;
    gap: 8px;
}

.cico-modal[hidden] { display: none !important; }

.cico-modal {
    position: fixed;
    inset: 0;
    z-index: 120;
    display: grid;
    place-items: center;
    padding: 16px;
}

.cico-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.5);
}

.cico-modal__box {
    position: relative;
    z-index: 1;
    width: min(580px, 100%);
    padding: 16px;
}

.cico-modal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 10px;
}

.cico-revenue-strip {
    margin-bottom: 12px;
    padding: 10px 12px;
    color: var(--muted);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cico-week-table {
    width: 100%;
    border-collapse: collapse;
    overflow: hidden;
    font-size: 0.86rem;
}

.cico-week-table th,
.cico-week-table td {
    border-bottom: 1px solid var(--border);
    text-align: left;
    padding: 10px;
    vertical-align: top;
}

.cico-week-table th {
    font-size: 0.76rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--muted);
    font-weight: 800;
}

.cico-week-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cico-financials {
    margin-top: 8px;
    display: grid;
    gap: 6px;
}

.cico-financial-item {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 6px 8px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.cico-fin-label {
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.cico-fin-value {
    font-weight: 800;
}

.cico-financial-item--warn {
    border-color: color-mix(in srgb, var(--warn) 35%, var(--border));
}

.cico-financial-item--charge {
    border-color: color-mix(in srgb, var(--danger) 35%, var(--border));
}

.cico-financial-item--total {
    border-color: color-mix(in srgb, var(--info) 35%, var(--border));
}

.cico-fin-total {
    color: var(--info);
}

.cico-live-timer {
    color: var(--danger);
    font-size: 0.78rem;
    font-weight: 700;
}

.cico-star-rating {
    display: flex;
    gap: 6px;
}

.cico-star {
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    background: var(--surface);
    font-size: 1.1rem;
}

.cico-empty-state {
    text-align: center;
    padding: 26px 14px;
    color: var(--muted);
}

.cico-empty-state h3 {
    margin: 8px 0 4px;
}

.cico-toast-container {
    position: fixed;
    right: 16px;
    top: 16px;
    z-index: 999;
    display: grid;
    gap: 8px;
}

.cico-toast {
    border-radius: 10px;
    padding: 10px 12px;
    color: #fff;
    box-shadow: var(--shadow);
    font-weight: 700;
    font-size: 0.82rem;
}

.cico-toast.success { background: #16a34a; }
.cico-toast.error { background: #dc2626; }
.cico-toast.warning { background: #d97706; }

/* Drawer from dashboard pages */
.cico-drawer {
    position: fixed;
    inset: 0;
    z-index: 140;
    pointer-events: none;
}

.cico-drawer.open {
    pointer-events: auto;
}

.cico-drawer__overlay {
    position: absolute;
    inset: 0;
    background: rgba(2, 6, 23, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease;
}

.cico-drawer__panel {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: min(680px, 100%);
    background: var(--surface);
    border-left: 1px solid var(--border);
    transform: translateX(100%);
    transition: transform .25s ease;
    display: flex;
    flex-direction: column;
}

.cico-drawer.open .cico-drawer__panel {
    transform: translateX(0);
}

.cico-drawer.open .cico-drawer__overlay {
    opacity: 1;
    visibility: visible;
}

.cico-drawer__header {
    border-bottom: 1px solid var(--border);
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.cico-drawer__close {
    border: 1px solid var(--border);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    background: var(--surface-2);
}

.cico-drawer__body {
    overflow: auto;
    padding: 12px;
}

@media (min-width: 900px) {
    .cico-topbar {
        grid-template-columns: 1fr auto auto;
        align-items: center;
    }

    .cico-dashboard__body {
        grid-template-columns: minmax(0, 1fr) 320px;
        align-items: start;
    }

    .cico-cards-col {
        min-width: 0;
    }
}

@media (max-width: 899px) {
    .cico-sidebar {
        order: -1;
    }

    .cico-week-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

@media (max-width: 560px) {
    .cico-dashboard {
        padding: 0 10px;
    }

    .cico-card__main {
        grid-template-columns: 40px 1fr auto;
        gap: 10px;
        padding: 12px;
    }

    .cico-card__avatar {
        width: 40px;
        height: 40px;
    }

    .cico-wa-templates {
        grid-template-columns: 1fr;
    }
}

@media print {
    .cico-topbar,
    .cico-card__actions,
    .cico-sidebar,
    .cico-wa-panel,
    .cico-modal,
    .cico-drawer {
        display: none !important;
    }

    .cico-card__expand {
        display: block !important;
    }
}