/* ========================================
   GRAMEEN BANK CAREER PORTAL
   Shared Design System CSS
   Enterprise Grade — Solid & Professional
   ======================================== */

/* ========================================
   CSS VARIABLES
   ======================================== */
:root {
    /* Primary Colors - Grameen Bank Green */
    --gb-primary: #00703C;
    --gb-secondary: #00A651;
    --gb-accent: #005A30;
    --gb-light: #F0F8F4;
    --gb-dark: #005A30;
    /* Neutral Colors */
    --gb-white: #FFFFFF;
    --gb-text: #1A1A1A;
    --gb-text-secondary: #444444;
    --gb-text-light: #666666;
    --gb-border: #D4D4D4;
    --gb-background: #F5F5F5;
    --gb-muted-bg: #FAFAFA;
    /* Table Colors */
    --gb-table-header: #2C3E50;
    /* Status Colors */
    --gb-success: #00703C;
    --gb-warning: #D4A017;
    --gb-danger: #C0392B;
    --gb-info: #2C5282;
    /* Shadows - Minimal and subtle */
    --gb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
    --gb-shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08);
    --gb-shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Spacing */
    --gb-spacing-xs: 0.25rem;
    --gb-spacing-sm: 0.5rem;
    --gb-spacing-md: 1rem;
    --gb-spacing-lg: 1.5rem;
    --gb-spacing-xl: 2rem;
    --gb-spacing-2xl: 3rem;
    /* Border Radius - Subtle, corporate */
    --gb-radius-sm: 4px;
    --gb-radius-md: 4px;
    --gb-radius-lg: 4px;
    --gb-radius-full: 50%;
    --gb-radius-pill: 4px;
    /* Transitions - Subtle */
    --gb-transition-fast: 0.15s ease;
    --gb-transition-normal: 0.15s ease;
    --gb-transition-slow: 0.2s ease;
    /* Header */
    --gb-header-height: 65px;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

/* Text Colors */
.text-primary {
    color: var(--gb-primary) !important;
}

.text-secondary {
    color: var(--gb-secondary) !important;
}

.text-accent {
    color: var(--gb-accent) !important;
}

.text-dark {
    color: var(--gb-dark) !important;
}

.text-muted {
    color: var(--gb-text-light) !important;
}

.text-success {
    color: var(--gb-success) !important;
}

.text-warning {
    color: var(--gb-warning) !important;
}

.text-danger {
    color: var(--gb-danger) !important;
}

/* Background Colors */
.bg-primary {
    background-color: var(--gb-primary) !important;
}

.bg-secondary {
    background-color: var(--gb-secondary) !important;
}

.bg-light {
    background-color: var(--gb-light) !important;
}

.bg-white {
    background-color: var(--gb-white) !important;
}

/* Gradient Backgrounds - Now flat solid colors */
.bg-gradient-primary {
    background: var(--gb-primary) !important;
}

.bg-gradient-accent {
    background: var(--gb-accent) !important;
}

/* ========================================
   COMPONENT STYLES
   ======================================== */

/* Buttons */
.gb-btn {
    padding: 10px 24px;
    border-radius: var(--gb-radius-sm);
    border: none;
    cursor: pointer;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.3px;
    transition: background var(--gb-transition-normal), box-shadow var(--gb-transition-normal);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.gb-btn-primary {
    background: var(--gb-primary);
    color: var(--gb-white);
}

    .gb-btn-primary:hover {
        background: var(--gb-dark);
        box-shadow: 0 2px 8px rgba(0, 112, 60, 0.25);
        color: var(--gb-white);
        text-decoration: none;
    }

.gb-btn-accent {
    background: var(--gb-secondary);
    color: var(--gb-white);
}

    .gb-btn-accent:hover {
        background: var(--gb-primary);
        box-shadow: 0 2px 8px rgba(0, 112, 60, 0.25);
        color: var(--gb-white);
    }

.gb-btn-outline {
    background: transparent;
    border: 1.5px solid var(--gb-primary);
    color: var(--gb-primary);
}

    .gb-btn-outline:hover {
        background: var(--gb-light);
        color: var(--gb-primary);
    }

/* Cards */
.gb-card {
    background: var(--gb-white);
    border-radius: var(--gb-radius-lg);
    padding: var(--gb-spacing-xl);
    border: 1px solid var(--gb-border);
    box-shadow: var(--gb-shadow-sm);
}

.gb-card-bordered {
    border-top: 3px solid var(--gb-primary);
}

/* Form Controls */
.gb-form-control {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #CBCBCB;
    border-radius: var(--gb-radius-md);
    font-size: 15px;
    transition: border-color var(--gb-transition-normal), box-shadow var(--gb-transition-normal);
    background: var(--gb-muted-bg);
    color: var(--gb-text);
}

    .gb-form-control:focus {
        outline: none;
        border-color: var(--gb-primary);
        box-shadow: 0 0 0 3px rgba(0, 112, 60, 0.08);
        background: var(--gb-white);
    }

    .gb-form-control::placeholder {
        color: #AAA;
    }

    .gb-form-control:read-only {
        background: #F2F2F2;
        border-color: var(--gb-border);
        color: #555;
    }

/* Form Label */
.gb-form-label {
    display: block;
    margin-bottom: 6px;
    color: var(--gb-text-secondary);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.2px;
}

    .gb-form-label.required::after {
        content: ' *';
        color: var(--gb-danger);
    }

/* Alerts - Left border style */
.gb-alert {
    padding: 12px 16px;
    border-radius: var(--gb-radius-md);
    font-size: 14px;
    line-height: 1.5;
    border-left: 3px solid;
}

.gb-alert-success {
    background-color: #F0F8F4;
    border-left-color: var(--gb-primary);
    color: #1A5632;
}

.gb-alert-warning {
    background-color: #FFFBF0;
    border-left-color: var(--gb-warning);
    color: #7A5E00;
}

.gb-alert-danger {
    background-color: #FDF2F2;
    border-left-color: var(--gb-danger);
    color: #8B1A1A;
}

.gb-alert-info {
    background-color: #F0F4FA;
    border-left-color: var(--gb-info);
    color: #1A365D;
}

/* Banner - Flat solid */
.gb-banner {
    background: var(--gb-primary);
    padding: 18px 0;
    width: 100%;
}

.gb-banner-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gb-white);
    margin: 0;
    letter-spacing: 0.5px;
    text-align: center;
}

/* Info Box */
.gb-info-box {
    background: var(--gb-muted-bg);
    border-radius: var(--gb-radius-md);
    padding: 12px 16px;
    border-left: 3px solid var(--gb-primary);
    font-size: 14px;
    color: var(--gb-text-light);
}

    .gb-info-box strong {
        color: var(--gb-primary);
    }

/* Tables */
.gb-table {
    width: 100%;
    background: var(--gb-white);
    border-radius: var(--gb-radius-lg);
    overflow: hidden;
    border: 1px solid var(--gb-border);
    border-collapse: collapse;
}

    .gb-table thead {
        background: var(--gb-table-header);
    }

    .gb-table th {
        padding: 12px 16px;
        font-weight: 600;
        text-align: left;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 0.8px;
        color: var(--gb-white);
        border: none;
    }

    .gb-table td {
        padding: 12px 16px;
        border-bottom: 1px solid #E8E8E8;
        color: var(--gb-text-secondary);
        font-size: 14px;
        vertical-align: middle;
    }

    .gb-table tbody tr {
        transition: background var(--gb-transition-fast);
    }

        .gb-table tbody tr:hover {
            background-color: #F8FAF9;
        }

        .gb-table tbody tr:last-child td {
            border-bottom: none;
        }

/* ========================================
   SCROLLBAR STYLES
   ======================================== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #F1F1F1;
}

::-webkit-scrollbar-thumb {
    background: #C0C0C0;
    border-radius: 4px;
}

    ::-webkit-scrollbar-thumb:hover {
        background: #999;
    }

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #C0C0C0 #F1F1F1;
}

/* ========================================
   ANIMATIONS - Minimal, professional
   ======================================== */
@keyframes gb-spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes gb-fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.gb-animate-spin {
    animation: gb-spin 1s linear infinite;
}

.gb-animate-fadeIn {
    animation: gb-fadeIn 0.2s ease forwards;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
    :root {
        --gb-header-height: 60px;
    }

    .gb-banner {
        padding: 14px 0;
    }

    .gb-banner-title {
        font-size: 16px;
    }

    .gb-card {
        padding: var(--gb-spacing-lg);
    }
}

@media (max-width: 480px) {
    .gb-banner-title {
        font-size: 15px;
    }

    .gb-card {
        padding: var(--gb-spacing-md);
    }

    .gb-btn {
        padding: 9px 18px;
        font-size: 13px;
    }

    .gb-form-control {
        padding: 9px 10px;
        font-size: 14px;
    }
}