/**
 * HOA Management System — Point of Sale Module Overlay
 *
 * Visual-only adaptation for App.renderPOS. Mirrors the design language
 * established by dashboard.css, payments.css, invoices.css.
 *
 * Strict rules:
 *   - Token-driven only.
 *   - Wrapper class .pos-shell is the ONLY new DOM hook required.
 *   - All existing IDs (#step1-card, #step1-header, #step1-body,
 *     #step1-summary, #step1-summary-text, #step1-change-btn,
 *     #step1-chevron, #property-search-input, #property_id_select,
 *     #transaction-selection, #pos-form, #cashier-info-panel,
 *     #pos-ai-panel) and event wiring preserved untouched.
 *   - Dark mode comes for free via [data-theme="dark"] semantic tokens.
 *
 * Loaded after style.css, shell.css, and module_guide.css.
 */

/* ═══════════════════════════════════════════════════════════════════════════
   LOCAL TOKENS
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell {
    --pos-radius-lg: 16px;
    --pos-radius-md: 12px;
    --pos-radius-sm: 10px;
    --pos-radius-pill: 999px;
    --pos-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --pos-transition: 0.2s var(--pos-ease);
    --pos-font: "Figtree", "Inter", -apple-system, BlinkMacSystemFont,
                "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    font-family: var(--pos-font);
    color: var(--text-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE HEADER
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell .pos-page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--pos-radius-lg);
    box-shadow: var(--shadow-xs);
    padding: 18px 22px;
    margin-bottom: 16px;
    transition: box-shadow var(--pos-transition);
}
.pos-shell .pos-page-header:hover { box-shadow: var(--shadow-sm); }

.pos-shell .pos-page-header h1 {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--text-primary);
    margin: 0;
}
.pos-shell .pos-page-header h1 i { color: var(--brand-primary); }
.pos-shell .pos-page-header small {
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP CARDS — Generic styling for the 3-step layout
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell #step1-card,
.pos-shell #transaction-selection > .card,
.pos-shell #pos-form .card,
.pos-shell #cashier-info-panel > .card,
.pos-shell #pos-ai-panel > .card {
    background: var(--bg-surface) !important;
    border: 1px solid var(--border-default) !important;
    border-radius: var(--pos-radius-md) !important;
    box-shadow: var(--shadow-xs) !important;
    overflow: hidden;
    transition: border-color var(--pos-transition),
                box-shadow var(--pos-transition);
}
.pos-shell #step1-card:hover,
.pos-shell #transaction-selection > .card:hover,
.pos-shell #cashier-info-panel > .card:hover {
    border-color: var(--brand-primary-border) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* Step 1 collapsible header */
.pos-shell #step1-header {
    background: var(--bg-sunken) !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 11px 14px !important;
    transition: background var(--pos-transition);
}
.pos-shell #step1-header:hover { background: var(--bg-hover) !important; }
.pos-shell #step1-header h6 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: -0.005em;
    margin: 0;
}
.pos-shell #step1-header h6 i { color: var(--brand-primary); }
.pos-shell #step1-chevron {
    color: var(--text-secondary);
    transition: transform var(--pos-transition);
}

/* Step 1 body */
.pos-shell #step1-body {
    padding: 12px !important;
}
.pos-shell #step1-body .form-control,
.pos-shell #step1-body .form-select {
    border-radius: var(--pos-radius-sm);
    border-color: var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color var(--pos-transition),
                box-shadow var(--pos-transition);
}
.pos-shell #step1-body .form-control:focus,
.pos-shell #step1-body .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* The native multi-select needs a friendlier shell */
.pos-shell #step1-body #property_id_select {
    font-size: 0.82rem !important;
    padding: 6px;
}
.pos-shell #step1-body #property_id_select option {
    padding: 5px 8px;
    border-radius: 4px;
}
.pos-shell #step1-body #property_id_select option:hover,
.pos-shell #step1-body #property_id_select option:checked {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
}

/* Step 1 collapsed summary */
.pos-shell #step1-summary {
    background: var(--brand-primary-subtle);
    border-top: 1px solid var(--brand-primary-border);
    padding: 10px 14px !important;
}
.pos-shell #step1-summary-text {
    color: var(--brand-primary);
    font-weight: 600;
}
.pos-shell #step1-change-btn {
    border-radius: var(--pos-radius-pill) !important;
    border-color: var(--brand-primary-border);
    color: var(--brand-primary);
    background: var(--bg-surface);
    transition: background var(--pos-transition),
                color var(--pos-transition),
                border-color var(--pos-transition);
}
.pos-shell #step1-change-btn:hover {
    background: var(--brand-primary);
    color: var(--brand-on-primary);
    border-color: var(--brand-primary);
}

/* ═══════════════════════════════════════════════════════════════════════════
   STEP CONTAINERS (Step 2 transaction picker, Step 3 pos-form)
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell #transaction-selection .card-header,
.pos-shell #pos-form .card-header,
.pos-shell #cashier-info-panel .card-header {
    background: var(--bg-sunken) !important;
    border-bottom: 1px solid var(--border-default) !important;
    padding: 10px 14px !important;
}
.pos-shell #transaction-selection .card-header h6,
.pos-shell #pos-form .card-header h6,
.pos-shell #cashier-info-panel .card-header h6 {
    color: var(--text-primary);
    font-weight: 700;
    font-size: 0.88rem;
    margin: 0;
}
.pos-shell #transaction-selection .card-header h6 i,
.pos-shell #pos-form .card-header h6 i,
.pos-shell #cashier-info-panel .card-header h6 i { color: var(--brand-primary); }

/* List-group rows used inside Step 2 */
.pos-shell #transaction-selection .list-group-item,
.pos-shell #pos-form .list-group-item {
    border-color: var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: background var(--pos-transition),
                border-color var(--pos-transition);
}
.pos-shell #transaction-selection .list-group-item:hover,
.pos-shell #pos-form .list-group-item:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary-border);
}
.pos-shell #transaction-selection .list-group-item.active,
.pos-shell #pos-form .list-group-item.active {
    background: var(--brand-primary-subtle);
    color: var(--brand-primary);
    border-color: var(--brand-primary-border);
    font-weight: 600;
}

/* All form controls inside the POS forms */
.pos-shell #transaction-selection .form-control,
.pos-shell #transaction-selection .form-select,
.pos-shell #pos-form .form-control,
.pos-shell #pos-form .form-select {
    border-radius: var(--pos-radius-sm);
    border-color: var(--border-default);
    background: var(--bg-surface);
    color: var(--text-primary);
    transition: border-color var(--pos-transition),
                box-shadow var(--pos-transition);
}
.pos-shell #transaction-selection .form-control:focus,
.pos-shell #transaction-selection .form-select:focus,
.pos-shell #pos-form .form-control:focus,
.pos-shell #pos-form .form-select:focus {
    border-color: var(--brand-primary);
    box-shadow: var(--shadow-focus);
    outline: none;
}

/* Primary submit button inside POS form */
.pos-shell #pos-form .btn-primary,
.pos-shell #pos-form .btn-success {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--brand-on-primary);
    border-radius: var(--pos-radius-pill);
    font-weight: 600;
    padding: 8px 18px;
    transition: background var(--pos-transition),
                border-color var(--pos-transition),
                transform var(--pos-transition),
                box-shadow var(--pos-transition);
    box-shadow: var(--shadow-xs);
}
.pos-shell #pos-form .btn-primary:hover,
.pos-shell #pos-form .btn-success:hover {
    background: var(--brand-primary-hover);
    border-color: var(--brand-primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.pos-shell #pos-form .btn-secondary,
.pos-shell #pos-form .btn-outline-secondary {
    border-radius: var(--pos-radius-pill);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CASHIER INFO PANEL
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell #cashier-info-panel .card-body { padding: 14px; }
.pos-shell #cashier-info-panel .text-muted.small {
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--text-secondary) !important;
    font-size: 0.7rem !important;
}
.pos-shell #cashier-info-panel .fw-bold,
.pos-shell #cashier-info-panel .fw-semibold {
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AI ASSIST PANEL
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell #pos-ai-panel { margin-top: 12px; }
.pos-shell #pos-ai-panel:empty { display: none; }

/* ═══════════════════════════════════════════════════════════════════════════
   BADGES
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell .badge {
    border-radius: var(--pos-radius-pill);
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* ═══════════════════════════════════════════════════════════════════════════
   EMPTY / LOADING STATE
═══════════════════════════════════════════════════════════════════════════ */
.pos-shell .pos-state {
    display: block;
    text-align: center;
    padding: 28px 16px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
}
.pos-shell .pos-state .pos-state-hint {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 400;
}

/* ═══════════════════════════════════════════════════════════════════════════
   REDUCED MOTION + PRINT
═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .pos-shell .pos-page-header,
    .pos-shell #step1-card,
    .pos-shell #step1-header,
    .pos-shell #step1-chevron,
    .pos-shell #step1-change-btn,
    .pos-shell #transaction-selection > .card,
    .pos-shell #cashier-info-panel > .card,
    .pos-shell #transaction-selection .list-group-item,
    .pos-shell #pos-form .btn-primary,
    .pos-shell #pos-form .btn-success {
        transition: none !important;
        animation: none !important;
    }
}

@media print {
    .pos-shell .pos-page-header .btn,
    .pos-shell #step1-change-btn,
    .pos-shell #pos-form .btn { display: none !important; }
    .pos-shell #step1-card,
    .pos-shell #cashier-info-panel > .card,
    .pos-shell #transaction-selection > .card { box-shadow: none !important; border: 1px solid #ccc !important; }
}