/* ============================================================
   Budget Module — Button & Grid Styles
   Loaded via index.html
   ============================================================ */

/* ════════════════════════════════════════════════════════════
   GRID — applied via cls: 'budget-grid' on each gridpanel
   ════════════════════════════════════════════════════════════ */

/* ── Column Headers ── */
.budget-grid .x-column-header-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    letter-spacing: 0.2px !important;
}

.budget-grid .x-column-header {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

/* ── Grid Cell text ── */
.budget-grid .x-grid-cell-inner {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
}

/* ── Row height & alternating rows ── */
.budget-grid .x-grid-row .x-grid-cell {
    border-bottom: 1px solid #e2e8f0 !important;
}

.budget-grid .x-grid-row-alt .x-grid-cell {
    background-color: #f8fafc !important;
}

.budget-grid .x-grid-row:hover .x-grid-cell {
    background-color: #eff6ff !important;
}

/* ── Row numbers ── */
.budget-grid .x-grid-cell-row-numberer .x-grid-cell-inner {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #94a3b8 !important;
    background-color: #f8fafc !important;
}

/* ── Selected row ── */
.budget-grid .x-grid-row-selected .x-grid-cell {
    background-color: #dbeafe !important;
}

.budget-grid .x-grid-row-selected .x-grid-cell-inner {
    color: #1e40af !important;
}

/* ── Period Manager grid ── */
.budget-period-grid .x-column-header-text {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
}

.budget-period-grid .x-column-header {
    background-color: #f1f5f9 !important;
    border-bottom: 2px solid #cbd5e1 !important;
}

.budget-period-grid .x-grid-cell-inner {
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    padding: 8px 10px !important;
    line-height: 1.5 !important;
}

.budget-period-grid .x-grid-row-alt .x-grid-cell {
    background-color: #f8fafc !important;
}

.budget-period-grid .x-grid-row:hover .x-grid-cell {
    background-color: #eff6ff !important;
}

/* ── Base override: remove ExtJS theme gradient on budget btns ── */
.bd-btn-blue.x-btn,
.bd-btn-amber.x-btn,
.bd-btn-green.x-btn,
.bd-btn-red.x-btn,
.bd-btn-purple.x-btn,
.bd-btn-darkred.x-btn,
.bd-btn-gray.x-btn {
    border-radius: 5px !important;
    border-width: 1px !important;
    background-image: none !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.18) !important;
    transition: background-color 0.15s, opacity 0.15s !important;
    padding: 0 10px !important;
}

/* ── Text & icon colour (white on all coloured buttons) ── */
.bd-btn-blue   .x-btn-inner,
.bd-btn-amber  .x-btn-inner,
.bd-btn-green  .x-btn-inner,
.bd-btn-red    .x-btn-inner,
.bd-btn-purple .x-btn-inner,
.bd-btn-darkred .x-btn-inner,
.bd-btn-gray   .x-btn-inner {
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12px !important;
}

.bd-btn-blue   .x-btn-icon-el,
.bd-btn-amber  .x-btn-icon-el,
.bd-btn-green  .x-btn-icon-el,
.bd-btn-red    .x-btn-icon-el,
.bd-btn-purple .x-btn-icon-el,
.bd-btn-darkred .x-btn-icon-el,
.bd-btn-gray   .x-btn-icon-el {
    color: #ffffff !important;
}

/* ── Blue — Add Line / New Period / Load Report ── */
.bd-btn-blue.x-btn              { background-color: #2563eb !important; border-color: #1d4ed8 !important; }
.bd-btn-blue.x-btn-over,
.bd-btn-blue.x-btn:hover        { background-color: #1d4ed8 !important; }
.bd-btn-blue.x-btn-pressed,
.bd-btn-blue.x-btn:active       { background-color: #1e40af !important; }

/* ── Amber — Edit / Refresh Actuals ── */
.bd-btn-amber.x-btn             { background-color: #d97706 !important; border-color: #b45309 !important; }
.bd-btn-amber.x-btn-over,
.bd-btn-amber.x-btn:hover       { background-color: #b45309 !important; }
.bd-btn-amber.x-btn-pressed,
.bd-btn-amber.x-btn:active      { background-color: #92400e !important; }

/* ── Green — Approve / Activate / Export ── */
.bd-btn-green.x-btn             { background-color: #16a34a !important; border-color: #15803d !important; }
.bd-btn-green.x-btn-over,
.bd-btn-green.x-btn:hover       { background-color: #15803d !important; }
.bd-btn-green.x-btn-pressed,
.bd-btn-green.x-btn:active      { background-color: #166534 !important; }

/* ── Red — Delete ── */
.bd-btn-red.x-btn               { background-color: #dc2626 !important; border-color: #b91c1c !important; }
.bd-btn-red.x-btn-over,
.bd-btn-red.x-btn:hover         { background-color: #b91c1c !important; }
.bd-btn-red.x-btn-pressed,
.bd-btn-red.x-btn:active        { background-color: #991b1b !important; }

/* ── Purple — Submit for Approval ── */
.bd-btn-purple.x-btn            { background-color: #7c3aed !important; border-color: #6d28d9 !important; }
.bd-btn-purple.x-btn-over,
.bd-btn-purple.x-btn:hover      { background-color: #6d28d9 !important; }
.bd-btn-purple.x-btn-pressed,
.bd-btn-purple.x-btn:active     { background-color: #5b21b6 !important; }

/* ── Dark Red — Reject ── */
.bd-btn-darkred.x-btn           { background-color: #9f1239 !important; border-color: #881337 !important; }
.bd-btn-darkred.x-btn-over,
.bd-btn-darkred.x-btn:hover     { background-color: #881337 !important; }
.bd-btn-darkred.x-btn-pressed,
.bd-btn-darkred.x-btn:active    { background-color: #6f0f2e !important; }

/* ── Gray — Close Period / neutral actions ── */
.bd-btn-gray.x-btn              { background-color: #4b5563 !important; border-color: #374151 !important; }
.bd-btn-gray.x-btn-over,
.bd-btn-gray.x-btn:hover        { background-color: #374151 !important; }

/* ── Disabled state: all colours fade ── */
.bd-btn-blue.x-btn.x-item-disabled,
.bd-btn-amber.x-btn.x-item-disabled,
.bd-btn-green.x-btn.x-item-disabled,
.bd-btn-red.x-btn.x-item-disabled,
.bd-btn-purple.x-btn.x-item-disabled,
.bd-btn-darkred.x-btn.x-item-disabled,
.bd-btn-gray.x-btn.x-item-disabled {
    opacity: 0.38 !important;
    cursor: not-allowed !important;
}