/* ============================================================================
   FLMZ BRAND SYSTEM - Legacy 360 v2
   Family Legacy Missions International (Zambia)

   Design Vision: "Humanitarian Confidence"
   Bold, purpose-driven aesthetic reflecting FLMZ's mission impact.
   Organic warmth + professional precision.
   ============================================================================ */

/* ============================================================================
   1. TYPOGRAPHY
   ============================================================================ */

/* Import Poppins (headings) and Open Sans (body) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

/* ============================================================================
   2. COLOR SYSTEM - FLMZ 2025 Impact Report Palette
   ============================================================================ */

:root {
    /* Primary Brand Colors */
    --flmz-green: #0F994C;           /* Legacy Green - primary actions */
    --flmz-green-dark: #0A7038;      /* Darker green for hover states */
    --flmz-green-light: #12B85C;     /* Lighter green for accents */

    --flmz-teal: #0C3853;            /* Deep Teal - supporting elements */
    --flmz-teal-dark: #082533;       /* Darker teal */
    --flmz-teal-light: #0F4A6A;      /* Lighter teal */

    --flmz-mint: #74F5B9;            /* Mint - accents and highlights */
    --flmz-mint-dark: #5FE3A5;       /* Darker mint */
    --flmz-mint-light: #8FF7C6;      /* Lighter mint */

    /* Gradients - Updated for better text readability */
    --flmz-gradient-hero: linear-gradient(135deg, #0F994C 0%, #0A7038 35%, #0C3853 100%);
    --flmz-gradient-card: linear-gradient(135deg, #0F994C 0%, #0A7038 100%);
    --flmz-gradient-mint: linear-gradient(135deg, #5FE3A5 0%, #0F994C 100%);
    --flmz-gradient-teal: linear-gradient(135deg, #0F4A6A 0%, #0C3853 100%);

    /* Semantic Colors */
    --flmz-success: #0F994C;
    --flmz-warning: #F5A623;
    --flmz-danger: #E74C3C;
    --flmz-info: #74F5B9;

    /* Neutrals */
    --flmz-white: #FFFFFF;
    --flmz-gray-50: #F9FAFB;
    --flmz-gray-100: #F3F4F6;
    --flmz-gray-200: #E5E7EB;
    --flmz-gray-300: #D1D5DB;
    --flmz-gray-400: #9CA3AF;
    --flmz-gray-500: #6B7280;
    --flmz-gray-600: #4B5563;
    --flmz-gray-700: #374151;
    --flmz-gray-800: #1F2937;
    --flmz-gray-900: #111827;

    /* Legacy Compatibility (for existing code) */
    --flmi-primary: var(--flmz-green);
    --flmi-primary-dark: var(--flmz-green-dark);
    --flmi-primary-light: var(--flmz-mint);
    --flmi-secondary: var(--flmz-white);
    --flmi-accent: var(--flmz-mint);
    --flmi-success: var(--flmz-green);
    --flmi-warning: var(--flmz-warning);
    --flmi-danger: var(--flmz-danger);
    --flmi-gray-light: var(--flmz-gray-100);
    --flmi-gray: var(--flmz-gray-500);
    --flmi-dark: var(--flmz-gray-800);

    /* Shadows */
    --flmz-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --flmz-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --flmz-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --flmz-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    --flmz-shadow-xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    --flmz-shadow-mint: 0 4px 14px 0 rgba(116, 245, 185, 0.39);
    --flmz-shadow-green: 0 4px 14px 0 rgba(15, 153, 76, 0.39);

    /* Border Radius */
    --flmz-radius-sm: 8px;
    --flmz-radius: 12px;
    --flmz-radius-lg: 24px;
    --flmz-radius-full: 9999px;

    /* Transitions */
    --flmz-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --flmz-transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ============================================================================
   3. BASE TYPOGRAPHY STYLES
   ============================================================================ */

body {
    font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: var(--flmz-gray-800);
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-weight: 700;
    line-height: 1.2;
    color: var(--flmz-teal);
}

h1, .h1 { font-size: 2.5rem; font-weight: 800; }
h2, .h2 { font-size: 2rem; font-weight: 700; }
h3, .h3 { font-size: 1.75rem; font-weight: 700; }
h4, .h4 { font-size: 1.5rem; font-weight: 600; }
h5, .h5 { font-size: 1.25rem; font-weight: 600; }
h6, .h6 { font-size: 1rem; font-weight: 600; }

/* Typography Utilities */
.flmz-text-display {
    font-family: 'Poppins', sans-serif;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.flmz-text-heading {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
}

.flmz-text-body {
    font-family: 'Open Sans', sans-serif;
    font-weight: 400;
}

.flmz-text-semibold {
    font-weight: 600;
}

/* ============================================================================
   4. BUTTONS - FLMZ Brand Style
   ============================================================================ */

.btn {
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    letter-spacing: 0.3px;
    border-radius: var(--flmz-radius);
    transition: var(--flmz-transition);
    border: none;
}

/* Primary Button - Legacy Green */
.btn-primary,
.flmz-btn-primary {
    background: var(--flmz-green);
    color: var(--flmz-white);
    box-shadow: var(--flmz-shadow-sm);
}

.btn-primary:hover,
.flmz-btn-primary:hover {
    background: var(--flmz-green-dark);
    color: var(--flmz-white);
    transform: translateY(-1px);
    box-shadow: var(--flmz-shadow-green);
}

.btn-primary:active,
.flmz-btn-primary:active {
    transform: translateY(0);
}

/* Secondary Button - Mint Outline */
.btn-outline-primary,
.flmz-btn-outline {
    color: var(--flmz-green);
    border: 2px solid var(--flmz-green);
    background: transparent;
}

.btn-outline-primary:hover,
.flmz-btn-outline:hover {
    background: var(--flmz-green);
    color: var(--flmz-white);
    border-color: var(--flmz-green);
    transform: translateY(-1px);
    box-shadow: var(--flmz-shadow-green);
}

/* Mint Accent Button */
.flmz-btn-mint {
    background: var(--flmz-mint);
    color: var(--flmz-teal);
    font-weight: 700;
}

.flmz-btn-mint:hover {
    background: var(--flmz-mint-dark);
    color: var(--flmz-teal);
    transform: translateY(-1px);
    box-shadow: var(--flmz-shadow-mint);
}

/* Teal Button */
.flmz-btn-teal {
    background: var(--flmz-teal);
    color: var(--flmz-white);
}

.flmz-btn-teal:hover {
    background: var(--flmz-teal-dark);
    color: var(--flmz-white);
    transform: translateY(-1px);
    box-shadow: var(--flmz-shadow);
}

/* ============================================================================
   5. CARDS - Rounded & Modern
   ============================================================================ */

.card {
    border-radius: var(--flmz-radius-lg);
    border: none;
    box-shadow: var(--flmz-shadow);
    overflow: hidden;
    transition: var(--flmz-transition);
}

.card:hover {
    box-shadow: var(--flmz-shadow-md);
}

/* Opt-out for cards that HOST a dropdown.
   `.card { overflow: hidden }` above is what rounds the corners over headers
   and images, so it stays — but it also clips any menu that opens past the
   card's edge. Popper still positions the menu and `aria-expanded` still flips
   to true; zero pixels are painted, so the user reports "the dropdown is
   hidden" (clinic feedback item 9, and the same class of bug already fixed for
   the module top bars in PR #367 / #368).

   Add `card-has-dropdown` to the specific card, never globally. `!important`
   because the per-module theme sheets (childdata-theme.css, …) load AFTER this
   file and re-declare `.<wrapper> .card { overflow: hidden }` at equal
   specificity. */
.card.card-has-dropdown {
    overflow: visible !important;
    /* Sit above the content the menu will overlay (tab strips, tables). */
    position: relative;
    z-index: 20;
}

.card.card-has-dropdown .dropdown-menu {
    z-index: 1055;
    /* A long menu on a phone must scroll inside itself rather than run off
       the bottom of the viewport. */
    max-height: min(74vh, 640px);
    overflow-y: auto;
}

.card-header {
    background: var(--flmz-teal);
    color: var(--flmz-white);
    border-bottom: none;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    padding: 1.25rem 1.5rem;
}

.card-body {
    padding: 1.5rem;
}

.card-footer {
    background: var(--flmz-gray-50);
    border-top: 1px solid var(--flmz-gray-200);
    padding: 1rem 1.5rem;
}

/* FLMZ Custom Cards */
.flmz-card {
    border-radius: var(--flmz-radius-lg);
    background: var(--flmz-white);
    box-shadow: var(--flmz-shadow);
    overflow: hidden;
}

.flmz-card-gradient {
    background: var(--flmz-gradient-hero);
    color: var(--flmz-white);
}

.flmz-card-hover {
    transition: var(--flmz-transition);
}

.flmz-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--flmz-shadow-lg);
}

/* ============================================================================
   6. FORMS - Mint Focus States
   ============================================================================ */

.form-control,
.form-select {
    border-radius: var(--flmz-radius-sm);
    border: 1px solid var(--flmz-gray-300);
    padding: 0.625rem 1rem;
    font-family: 'Open Sans', sans-serif;
    transition: var(--flmz-transition-fast);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--flmz-mint);
    box-shadow: 0 0 0 3px rgba(116, 245, 185, 0.15);
    outline: none;
}

.form-label {
    font-weight: 600;
    color: var(--flmz-gray-700);
    margin-bottom: 0.5rem;
}

.form-floating > label {
    color: var(--flmz-gray-500);
}

.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
    color: var(--flmz-green);
}

/* ============================================================================
   7. NAVIGATION - White with Green Accent
   ============================================================================ */

.navbar {
    background-color: var(--flmz-white);
    border-bottom: 3px solid var(--flmz-green);
    box-shadow: var(--flmz-shadow-sm);
}

.navbar-brand {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    color: var(--flmz-teal);
}

.navbar-brand:hover {
    color: var(--flmz-green);
}

.navbar-nav .nav-link {
    color: var(--flmz-gray-700);
    font-weight: 600;
    border-radius: var(--flmz-radius);
    transition: var(--flmz-transition-fast);
}

.navbar-nav .nav-link:hover {
    background-color: rgba(116, 245, 185, 0.1);
    color: var(--flmz-green);
}

.navbar-nav .nav-link.active {
    background-color: var(--flmz-green);
    color: var(--flmz-white);
}

/* ============================================================================
   8. TABLES - Deep Teal Headers
   ============================================================================ */

.table {
    border-radius: var(--flmz-radius);
    overflow: hidden;
}

.table thead th {
    background-color: var(--flmz-teal);
    color: var(--flmz-white);
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    border: none;
    padding: 1rem;
}

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

.table tbody tr:hover {
    background-color: rgba(116, 245, 185, 0.05);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--flmz-gray-50);
}

/* ============================================================================
   9. BADGES - Rounded Pills with Gradients
   ============================================================================ */

.badge {
    border-radius: var(--flmz-radius-full);
    padding: 0.375rem 0.875rem;
    font-weight: 600;
    font-size: 0.8125rem;
}

.badge-success,
.flmz-badge-success {
    background: var(--flmz-gradient-card);
    color: var(--flmz-white);
}

.badge-pending,
.flmz-badge-pending {
    background: var(--flmz-warning);
    color: var(--flmz-white);
}

.badge-approved,
.flmz-badge-approved {
    background: var(--flmz-green);
    color: var(--flmz-white);
}

.badge-rejected,
.flmz-badge-rejected {
    background: var(--flmz-danger);
    color: var(--flmz-white);
}

.flmz-badge-mint {
    background: var(--flmz-mint);
    color: var(--flmz-teal);
    font-weight: 700;
}

/* ============================================================================
   10. STAT CARDS - Dashboard KPIs
   ============================================================================ */

.stat-card {
    border-left: 4px solid var(--flmz-green);
    border-radius: var(--flmz-radius-lg);
    transition: var(--flmz-transition);
}

.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--flmz-shadow-md);
}

.stat-card.success {
    border-left-color: var(--flmz-green);
    background: linear-gradient(135deg, rgba(116, 245, 185, 0.05) 0%, rgba(15, 153, 76, 0.05) 100%);
}

.stat-card.warning {
    border-left-color: var(--flmz-warning);
    background: linear-gradient(135deg, rgba(245, 166, 35, 0.05) 0%, rgba(245, 166, 35, 0.1) 100%);
}

.stat-card.danger {
    border-left-color: var(--flmz-danger);
}

.stat-card .stat-value {
    font-family: 'Poppins', sans-serif;
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--flmz-teal);
    line-height: 1;
}

.stat-card .stat-label {
    font-family: 'Open Sans', sans-serif;
    color: var(--flmz-gray-600);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ============================================================================
   11. HERO SECTIONS - Gradient Backgrounds
   ============================================================================ */

.flmz-hero {
    background: var(--flmz-gradient-hero);
    border-radius: var(--flmz-radius-lg);
    position: relative;
    overflow: hidden;
    padding: 3rem 2rem;
    color: var(--flmz-white);
}

.flmz-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0) 40%),
        radial-gradient(circle at 85% 70%, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 45%);
    pointer-events: none;
}

.flmz-hero > * {
    position: relative;
    z-index: 1;
}

/* ============================================================================
   12. FOOTER - Deep Teal
   ============================================================================ */

.footer {
    background-color: var(--flmz-teal);
    color: rgba(255, 255, 255, 0.9);
    padding: 2rem 0;
    font-size: 0.9rem;
    margin-top: auto;
}

.footer a {
    color: var(--flmz-mint);
    text-decoration: none;
    transition: var(--flmz-transition-fast);
}

.footer a:hover {
    color: var(--flmz-mint-light);
    text-decoration: underline;
}

/* ============================================================================
   13. ANIMATIONS - Purposeful Motion
   ============================================================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mintGlow {
    0%, 100% {
        box-shadow: 0 0 10px rgba(116, 245, 185, 0.3);
    }
    50% {
        box-shadow: 0 0 20px rgba(116, 245, 185, 0.5);
    }
}

.flmz-fade-in {
    animation: fadeIn 0.5s ease-out;
}

.flmz-slide-up {
    animation: slideUp 0.6s ease-out;
}

.flmz-stagger-1 { animation-delay: 0.1s; }
.flmz-stagger-2 { animation-delay: 0.2s; }
.flmz-stagger-3 { animation-delay: 0.3s; }
.flmz-stagger-4 { animation-delay: 0.4s; }

/* ============================================================================
   14. UTILITY CLASSES
   ============================================================================ */

/* Colors */
.flmz-text-green { color: var(--flmz-green) !important; }
.flmz-text-teal { color: var(--flmz-teal) !important; }
.flmz-text-mint { color: var(--flmz-mint) !important; }

.flmz-bg-green { background-color: var(--flmz-green) !important; }
.flmz-bg-teal { background-color: var(--flmz-teal) !important; }
.flmz-bg-mint { background-color: var(--flmz-mint) !important; }

.flmz-bg-gradient-hero { background: var(--flmz-gradient-hero) !important; }
.flmz-bg-gradient-card { background: var(--flmz-gradient-card) !important; }

/* Borders */
.flmz-border-green { border-color: var(--flmz-green) !important; }
.flmz-border-mint { border-color: var(--flmz-mint) !important; }

/* Rounded Corners */
.flmz-rounded-sm { border-radius: var(--flmz-radius-sm) !important; }
.flmz-rounded { border-radius: var(--flmz-radius) !important; }
.flmz-rounded-lg { border-radius: var(--flmz-radius-lg) !important; }
.flmz-rounded-full { border-radius: var(--flmz-radius-full) !important; }

/* Shadows */
.flmz-shadow-sm { box-shadow: var(--flmz-shadow-sm) !important; }
.flmz-shadow { box-shadow: var(--flmz-shadow) !important; }
.flmz-shadow-md { box-shadow: var(--flmz-shadow-md) !important; }
.flmz-shadow-lg { box-shadow: var(--flmz-shadow-lg) !important; }

/* ============================================================================
   15. RESPONSIVE ADJUSTMENTS
   ============================================================================ */

@media (max-width: 768px) {
    h1, .h1 { font-size: 2rem; }
    h2, .h2 { font-size: 1.75rem; }
    h3, .h3 { font-size: 1.5rem; }

    .flmz-hero {
        padding: 2rem 1.5rem;
    }

    .stat-card .stat-value {
        font-size: 2rem;
    }
}

/* ============================================================================
   HR — contract countdown + gate IN/OUT activity timeline
   Shared by the HR employee detail page, the staff profile page, and the
   "Contracts expiring" dashboard so the components read identically.
   ============================================================================ */

.contract-countdown-num {
    font-family: 'Poppins', sans-serif;
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1;
}
.contract-countdown-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    font-weight: 600;
}

.gate-timeline { position: relative; }
.gate-timeline-item { position: relative; display: flex; gap: .75rem; padding-bottom: 1rem; }
.gate-timeline-item:not(:last-child)::before {
    content: '';
    position: absolute;
    left: 13px;
    top: 28px;
    bottom: 0;
    width: 2px;
    background: var(--flmz-gray-200, #e5e7eb);
}
.gate-timeline-icon {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: .85rem;
    z-index: 1;
}
.gate-timeline-item.gate-in .gate-timeline-icon { background: var(--flmz-green, #0F994C); }
.gate-timeline-item.gate-out .gate-timeline-icon { background: var(--flmz-gray-500, #6B7280); }
.gate-timeline-body { padding-top: 2px; }

/* ============================================================================
   END FLMZ BRAND SYSTEM
   ============================================================================ */