/* assets/css/custom.css - GCIKA Banking System Professional UI Styling */
/* 100% Offline Native System Fonts */

:root {
    --navy-950: #060D1A;
    --navy-900: #0A192F;
    --navy-800: #102A4C;
    --navy-700: #1A365D;
    --amber-500: #F59E0B;
    --amber-600: #D97706;
    --amber-400: #FBBF24;
    --slate-50: #F8FAFC;
    --slate-100: #F1F5F9;
    --slate-200: #E2E8F0;
    --slate-700: #334155;
    --slate-900: #0F172A;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #F8FAFC;
    color: #1E293B;
}

.font-mono {
    font-family: 'JetBrains Mono', monospace;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0A192F;
}
::-webkit-scrollbar-thumb {
    background: #1E3A8A;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #F59E0B;
}

/* Sidebar Custom Styling */
.sidebar-nav-item {
    display: flex;
    align-items: center;
    padding: 0.65rem 0.85rem;
    color: #94A3B8;
    border-radius: 0.6rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.15s ease-in-out;
}
.sidebar-nav-item:hover {
    color: #FFFFFF;
    background-color: rgba(255, 255, 255, 0.08);
}
.sidebar-nav-item.active {
    color: #FFFFFF;
    background-color: #1E3A8A;
    border-left: 4px solid #F59E0B;
    box-shadow: 0 4px 12px rgba(10, 25, 47, 0.35);
}

/* Card & Surface elevation */
.card-glass {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 0.875rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.02);
}

.table-row-hover:hover {
    background-color: #F8FAFC;
}

/* Status Badges */
.badge-active {
    background-color: #DCFCE7;
    color: #15803D;
    border: 1px solid #BBF7D0;
}
.badge-pending {
    background-color: #FEF3C7;
    color: #B45309;
    border: 1px solid #FDE68A;
}
.badge-danger {
    background-color: #FEE2E2;
    color: #B91C1C;
    border: 1px solid #FECACA;
}
.badge-info {
    background-color: #E0F2FE;
    color: #0369A1;
    border: 1px solid #BAE6FD;
}

/* High Visibility Amount Input Group - 100% immune to symbol overlap */
.amount-input-group {
    display: flex;
    align-items: stretch;
    border-radius: 1rem;
    background: #ffffff;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.04);
    overflow: hidden;
    transition: all 0.15s ease-in-out;
}
.amount-prefix {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 900;
    font-size: 1.5rem;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-right-width: 2px;
    border-right-style: solid;
    user-select: none;
    flex-shrink: 0;
}
.amount-field {
    flex: 1 1 0%;
    min-width: 0;
    padding: 0.75rem 1rem;
    background: transparent;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 900;
    font-size: 1.75rem;
    color: #060D1A;
    border: none;
    outline: none;
}
.amount-field:focus {
    outline: none;
    box-shadow: none;
}

/* Printable Slip & Receipt Styling */
@media print {
    body * {
        visibility: hidden;
    }
    #printable-receipt, #printable-receipt * {
        visibility: visible;
    }
    #printable-receipt {
        position: absolute;
        left: 0;
        top: 0;
        width: 80mm;
        margin: 0;
        padding: 10px;
        background: #FFF;
        color: #000;
        font-family: 'JetBrains Mono', monospace;
        font-size: 11px;
    }
    .no-print {
        display: none !important;
    }
}

/* ==========================================================================
   HIGH-VISIBILITY ACTION BUTTONS (100% Guaranteed Contrast & Legibility)
   ========================================================================== */
.btn-teller-action {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 0.9rem 1.5rem !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1.3 !important;
    border-radius: 0.875rem !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, 0.08) !important;
    transition: all 0.15s ease-in-out !important;
    cursor: pointer !important;
    text-align: center !important;
    letter-spacing: 0.015em !important;
    text-decoration: none !important;
}

/* Deposit Button: Deep Emerald Green with Crisp White Text */
.btn-teller-deposit {
    background-color: #047857 !important;
    color: #FFFFFF !important;
}
.btn-teller-deposit:hover:not(:disabled) {
    background-color: #065F46 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(4, 120, 87, 0.4) !important;
}

/* Withdrawal Button: Deep Rich Crimson Rose with Crisp White Text (6.5:1 Contrast) */
.btn-teller-withdraw {
    background-color: #BE123C !important;
    color: #FFFFFF !important;
}
.btn-teller-withdraw:hover:not(:disabled) {
    background-color: #9F1239 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(190, 18, 60, 0.4) !important;
}

/* Fixed Deposit Button: Deep Royal Indigo with Crisp White Text (8.4:1 Contrast) */
.btn-teller-fd {
    background-color: #4338CA !important;
    color: #FFFFFF !important;
}
.btn-teller-fd:hover:not(:disabled) {
    background-color: #3730A3 !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(67, 56, 202, 0.4) !important;
}

/* Loan Repay Button: Vibrant Golden Amber with Rich Midnight Navy Text (9.8:1 Contrast) */
.btn-teller-loan {
    background-color: #F59E0B !important;
    color: #060D1A !important;
    font-weight: 900 !important;
}
.btn-teller-loan:hover:not(:disabled) {
    background-color: #D97706 !important;
    color: #000000 !important;
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4) !important;
}

/* Internal Transfer Button: Deep Authority Navy with Crisp White Text (14.2:1 Contrast) */
.btn-teller-transfer {
    background-color: #0A192F !important;
    color: #FFFFFF !important;
}
.btn-teller-transfer:hover:not(:disabled) {
    background-color: #102A4C !important;
    color: #FFFFFF !important;
    box-shadow: 0 6px 16px rgba(10, 25, 47, 0.4) !important;
}

/* =========================================================
   TOPBAR USER PROFILE & DIRECT SIGN OUT
   Simple, high-visibility, zero-glitch layout
   ========================================================= */
.topbar-user-badge {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.6rem !important;
    padding: 0.35rem 0.75rem !important;
    background-color: #F8FAFC !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 0.75rem !important;
    flex-shrink: 0 !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
    text-decoration: none !important;
    transition: all 0.15s ease-in-out !important;
}
.topbar-user-badge:hover {
    background-color: #F1F5F9 !important;
    border-color: #94A3B8 !important;
}
.topbar-user-icon {
    width: 2rem !important;
    height: 2rem !important;
    border-radius: 9999px !important;
    background-color: #0A192F !important;
    color: #F59E0B !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.8rem !important;
    flex-shrink: 0 !important;
}
.topbar-user-name {
    font-size: 0.875rem !important;
    font-weight: 800 !important;
    color: #0F172A !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
}
.topbar-user-role {
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    color: #B45309 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    line-height: 1 !important;
    margin-top: 1px !important;
}
.topbar-signout-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.4rem !important;
    padding: 0.45rem 0.8rem !important;
    background-color: #FFF1F2 !important;
    color: #BE123C !important;
    border: 1px solid #FECDD3 !important;
    border-radius: 0.75rem !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    flex-shrink: 0 !important;
    transition: all 0.15s ease-in-out !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
}
.topbar-signout-btn:hover {
    background-color: #FFE4E6 !important;
    color: #9F1239 !important;
    border-color: #FDA4AF !important;
    box-shadow: 0 2px 6px rgba(190, 18, 60, 0.15) !important;
}