/* assets/css/common.css — Phase 10 Design System tokens + base */
@import url("ui-sync.css?v=20260928j");

/* ------------------------------------------------------------------ */
/* Design Tokens — aligned to lichfl compact theme                     */
/* Header/nav continue to use --brand-navy / --secondary as before.    */
/* ------------------------------------------------------------------ */
:root {
    /* Brand */
    --primary:           #00529C;
    --primary-light:     #f0f7ff;
    --secondary:         #ffcc00;
    --secondary-dark:    #d4a800;
    --brand-navy:        #00529C;
    --brand-navy-dark:   #003d75;
    --brand-gold:        #f8991d;
    --brand-gold-muted:  rgba(248, 153, 29, 0.15);

    /* Text */
    --text-dark:         #0f172a;
    --text-muted:        #64748b;
    --text-light:        #94a3b8;
    --text-default:      #334155;

    /* Backgrounds */
    --bg-light:          #f8fafc;
    --bg-white:          #ffffff;

    /* Borders */
    --border-color:      #e2e8f0;
    --border-soft:       #e2e8f0;

    /* Semantic */
    --danger:            #dc2626;
    --danger-light:      #fef2f2;
    --success:           #16a34a;
    --success-light:     #f0fdf4;
    --warning:           #b45309;
    --warning-light:     #fef3c7;
    --info:              #2563eb;
    --info-light:        #eff6ff;
    --white:             #ffffff;

    /* Typography — match www.lichousing.com */
    --fontBook:          'ITC Franklin Gothic LT Book', sans-serif, Arial, Helvetica;
    --fontDemi:          'ITC Franklin Gothic LT Demi', sans-serif, Arial, Helvetica;
    --base-font-size:    1rem;
    --font-sm:           0.9375rem;
    --font-xs:           0.8125rem;
    --font-lg:           1.125rem;
    --font-xl:           1.25rem;

    /* Border Radius — compact */
    --radius-xs:         4px;
    --radius-sm:         6px;
    --radius-md:         8px;
    --radius-lg:         8px;
    --radius-xl:         24px;
    --radius-full:       9999px;

    --cardRadius:        8px;
    --inputRadius:       6px;
    --inputHeight:       40px;

    /* Shadows */
    --shadow-xs:  0 1px 2px 0 rgba(0,0,0,0.04);
    --shadow-sm:  0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg:  0 10px 15px -3px rgba(0,0,0,0.10), 0 4px 6px -4px rgba(0,0,0,0.05);
    --shadow-xl:  0 20px 25px -5px rgba(0,0,0,0.10), 0 8px 10px -6px rgba(0,0,0,0.04);

    /* Transitions */
    --transition-fast:   all 0.15s ease;
    --transition-base:   all 0.25s ease;
    --transition-slow:   all 0.35s ease;

    /* Spacing (optional helpers) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
}

/* ------------------------------------------------------------------ */
/* Box sizing reset                                                     */
/* ------------------------------------------------------------------ */
*, *::before, *::after {
    box-sizing: border-box;
}

/* ------------------------------------------------------------------ */
/* Base font                                                            */
/* ------------------------------------------------------------------ */
body, input, button, select, textarea {
    font-family: var(--fontBook);
}

body {
    background-color: var(--bg-light);
    color: var(--text-default, var(--text-dark));
    font-size: var(--base-font-size);
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------ */
/* Font Awesome override protection                                     */
/* ------------------------------------------------------------------ */
.fa, .fas, .far, .fab, .fal, .fad,
.fa-solid, .fa-regular, .fa-brands,
[class^="fa-"], [class*=" fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* ------------------------------------------------------------------ */
/* Layout                                                               */
/* ------------------------------------------------------------------ */
.dashboard-container {
    width: 100%;
    max-width: 1300px;
    margin: 1rem auto;
}

/* ------------------------------------------------------------------ */
/* Typography utilities                                                 */
/* ------------------------------------------------------------------ */
.section-title {
    font-family: var(--fontDemi);
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text-dark);
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    line-height: 1.35;
}

.section-title::after {
    content: '';
    flex: 1;
    height: 2px;
    background: var(--lhfYellow, #FECA0A);
    min-width: 24px;
}

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5 {
    font-family: var(--fontDemi);
    margin-bottom: 1.25rem;
    font-weight: 600;
    color: var(--text-dark);
}

/* ------------------------------------------------------------------ */
/* Brand color utilities                                                */
/* ------------------------------------------------------------------ */
.cp-text-navy  { color: var(--brand-navy) !important; }
.cp-text-gold  { color: var(--brand-gold) !important; }
.cp-text-muted { color: var(--text-muted) !important; }
.cp-bg-navy    { background-color: var(--brand-navy) !important; }
.cp-bg-light   { background-color: var(--bg-light) !important; }
.cp-bg-white   { background-color: var(--bg-white) !important; }

/* ------------------------------------------------------------------ */
/* Section divider                                                      */
/* ------------------------------------------------------------------ */
.cp-section-divider {
    border: none;
    height: 2px;
    background: var(--lhfYellow, #FECA0A);
    margin: 1.5rem 0;
    opacity: 1;
}

/* ------------------------------------------------------------------ */
/* Instruction Lists                                                    */
/* ------------------------------------------------------------------ */
.instruction-list {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
}

.instruction-list li {
    position: relative;
    padding-left: 22px;
    margin-bottom: 0.625rem;
    color: var(--text-muted);
    font-size: 0.925rem;
}

.instruction-list li::before {
    content: '\2022';
    position: absolute;
    left: 0;
    color: var(--secondary-dark);
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1;
}

/* ------------------------------------------------------------------ */
/* AJAX Loader Overlay                                                  */
/* ------------------------------------------------------------------ */
.lichfl-ajax-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 10000;
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* Ensure flex when jQuery .show() forces display:block */
.lichfl-ajax-overlay[style*="display: block"] {
    display: flex !important;
}

.lichfl-loader-container {
    background: var(--bg-white);
    padding: 2rem 2.5rem;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    min-width: 240px;
}

.lichfl-loader-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid #f1f5f9;
    border-top: 4px solid var(--primary);
    border-radius: 50%;
    animation: cp-spin 0.9s linear infinite;
}

@keyframes cp-spin {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.lichfl-loader-text {
    font-weight: 700;
    color: var(--primary);
    font-size: 0.9375rem;
    letter-spacing: 0.4px;
    text-align: center;
}