/**
 * Cash Flow Module Styles v2 (Phase 6B)
 * Location: css/cash-flow.css
 * 
 * Phase 6B additions:
 * ✅ Range selection highlight
 * ✅ Copy flash animation
 * ✅ Context menu entrance animation
 * ✅ Grid wrapper focus outline
 */

/* ============================================================================
   GRID TABLE BASE
   ============================================================================ */

.cf-grid {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    font-size: 12px;
    border-collapse: separate;
    border-spacing: 0;
}

.cf-grid thead th {
    position: sticky;
    top: 0;
    z-index: 20;
    user-select: none;
}

/* Sticky first column */
.cf-cell-label {
    position: sticky;
    left: 0;
    z-index: 10;
    border-right: 2px solid #e5e7eb;
}

/* Ensure sticky header + first column overlap correctly */
.cf-grid thead th:first-child {
    position: sticky;
    left: 0;
    z-index: 30;
    border-right: 2px solid rgba(69, 133, 106, 0.3);
}

/* Grid wrapper focus (keyboard nav requires focus) */
#cf-grid-wrapper:focus {
    outline: none;
}

#cf-grid-wrapper:focus-within {
    box-shadow: 0 0 0 2px rgba(69, 133, 106, 0.15);
}

/* ============================================================================
   ROW TYPE STYLES
   ============================================================================ */

/* Protected system rows */
.cf-row-protected td {
    background-color: #f9fafb;
    font-style: italic;
    color: #6b7280;
}

.cf-row-protected .cf-cell-label {
    background-color: #f9fafb;
}

/* Overridable system rows */
.cf-row-overridable td {
    background-color: #fefce8;
}

.cf-row-overridable .cf-cell-label {
    background-color: #fefce8;
    font-style: italic;
    color: #6b7280;
}

/* Custom user rows */
.cf-row-custom td {
    background-color: #ffffff;
}

.cf-row-custom .cf-cell-label {
    background-color: #ffffff;
}

/* Calculated summary rows */
.cf-row-calculated td {
    background-color: #eff6ff;
    font-weight: 700;
    border-top: 1px solid #bfdbfe;
}

.cf-row-calculated .cf-cell-label {
    background-color: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
    font-style: normal;
}

/* ============================================================================
   SECTION HEADERS
   ============================================================================ */

.cf-section-header td {
    background-color: #f3f4f6;
    font-weight: 700;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6b7280;
    padding: 6px 12px;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
}

.cf-section-header {
    cursor: pointer;
}

.cf-section-header:hover td {
    background-color: #e5e7eb;
}

/* ============================================================================
   CELL STATES
   ============================================================================ */

/* Hover on editable cells */
td[data-editable="true"]:hover {
    background-color: rgba(69, 133, 106, 0.04) !important;
}

/* Selected cell (single) */
.cf-cell-selected {
    outline: 2px solid #45856A !important;
    outline-offset: -2px;
    background-color: rgba(69, 133, 106, 0.06) !important;
}

/* Range selection (Shift+click / Shift+Arrow) */
.cf-range-selected {
    background-color: rgba(69, 133, 106, 0.10) !important;
    outline: 1px solid rgba(69, 133, 106, 0.25);
    outline-offset: -1px;
}

/* Copy flash animation */
.cf-copy-flash {
    animation: cf-flash 0.3s ease-out;
}

@keyframes cf-flash {
    0%   { background-color: rgba(69, 133, 106, 0.25); }
    100% { background-color: transparent; }
}

/* Active editing */
.cf-edit-input {
    font-family: 'Inter', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: #111827;
    background-color: #fff;
    outline: 2px solid #45856A;
    outline-offset: -1px;
    box-shadow: 0 0 0 3px rgba(69, 133, 106, 0.15);
}

/* Negative value warning (closing balance < 0) */
.cf-cell-warning {
    background-color: #fef3c7 !important;
    border: 1px solid #f59e0b !important;
}

/* Override indicator dot */
.cf-cell-overridden::after {
    content: '●';
    position: absolute;
    top: 1px;
    right: 3px;
    font-size: 7px;
    color: #f59e0b;
}

/* ============================================================================
   ROW HOVER EFFECTS
   ============================================================================ */

.cf-row:hover td:not(.cf-cell-label) {
    background-color: rgba(69, 133, 106, 0.02);
}

.cf-row-custom:hover td:not(.cf-cell-label) {
    background-color: rgba(69, 133, 106, 0.04);
}

/* ============================================================================
   CONTEXT MENU (Phase 6B)
   ============================================================================ */

#cf-context-menu {
    animation: cf-menu-in 0.12s ease-out;
}

@keyframes cf-menu-in {
    0%   { opacity: 0; transform: scale(0.95) translateY(-4px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}

.cf-ctx-item:active {
    background-color: #f0fdf4;
}

/* ============================================================================
   SCROLLBAR STYLING
   ============================================================================ */

#cf-grid-scroll::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

#cf-grid-scroll::-webkit-scrollbar-track {
    background: #f3f4f6;
    border-radius: 4px;
}

#cf-grid-scroll::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 4px;
}

#cf-grid-scroll::-webkit-scrollbar-thumb:hover {
    background: #9ca3af;
}

/* ============================================================================
   SCENARIO PILLS
   ============================================================================ */

.cf-scenario-pill {
    transition: all 0.15s ease;
}

.cf-scenario-pill:hover {
    transform: translateY(-1px);
}

.cf-scenario-pill:active {
    transform: translateY(0);
}

/* ============================================================================
   SECTION TOGGLE
   ============================================================================ */

.cf-section-toggle svg {
    transition: transform 0.2s ease;
}

.cf-section-toggle.collapsed svg {
    transform: rotate(-90deg);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .cf-grid td,
    .cf-grid th {
        min-width: 85px;
        font-size: 11px;
    }
    
    .cf-cell-label {
        min-width: 150px !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .cf-grid td,
    .cf-grid th {
        min-width: 75px;
        font-size: 10px;
        padding: 4px 6px;
    }
    
    .cf-cell-label {
        min-width: 130px !important;
    }
}

/* ============================================================================
   TABULAR NUMBERS (monospace digits for alignment)
   ============================================================================ */

.tabular-nums {
    font-variant-numeric: tabular-nums;
}

/* ============================================================================
   PRINT STYLES
   ============================================================================ */

@media print {
    .cf-grid-scroll {
        overflow: visible !important;
        max-height: none !important;
    }
    
    .cf-cell-label {
        position: relative !important;
    }
    
    #cf-add-row-btn,
    #cf-export-btn,
    #cf-save-indicator,
    #cf-new-scenario-btn,
    #cf-undo-btn,
    #cf-redo-btn,
    .cf-delete-row-btn {
        display: none !important;
    }
    
    #cf-context-menu {
        display: none !important;
    }
}