/* =============================================================================
   AFS Theme — shared design tokens + reusable components
   -----------------------------------------------------------------------------
   Goal: restyle once, reuse everywhere. Pages use the .afs-* component classes
   and the CSS custom properties below instead of per-page glassmorphism hacks.

   ROLLOUT (v2 — full redesign): this file is now linked globally in base.html so
   the shared tokens + .afs-* components apply app-wide. Migrated pages also link it
   per-page (harmless duplicate). The design language is the new lighter look
   (near-white background, white soft-shadow cards, Inter, clean blue accent).

   The .afs-* classes intentionally avoid the names (.card, .glass-card, .bg-white,
   .dashboard-card) that style.css force-recolors with `!important`, so component
   text colors are controlled here rather than fought page-by-page.
   ============================================================================= */

/* =============================================================================
   RESPONSIVE BREAKPOINTS — shared convention (mobile + tablet pass, 2026-06-15)
   -----------------------------------------------------------------------------
   CSS can't read custom properties inside `@media`, so these are the canonical
   NUMBERS to reuse verbatim on every page (the dashboard is the reference impl;
   see static/css/business_health.css). Use the SAME edges so pages stay aligned.

     • Phone      ≤ 575.98px   1-up layouts. The app shell (style.css) turns the
                               sidebar into an off-canvas drawer at ≤768px; here
                               the content is full-width.
     • Tablet /   576–1199.98  2-up layouts. CRITICAL: at ≥768px the shell keeps
       small-desktop           a 300px FIXED sidebar, so the content column is
                               ~300px NARROWER than the viewport. A 4-up grid
                               therefore overflows well before the viewport looks
                               "small" (the dashboard KPI row ran off-screen at
                               ~820px). Collapse 4-up → 2-up across this whole band
                               — do NOT wait for a phone-width query.
     • Desktop    ≥ 1200px     Full multi-column layout (e.g. 4-up KPI cards,
                               side-by-side feature cards). Verified unchanged at
                               1366 / 1440 / 1536.

   Rule of thumb: pick collapse points by the CONTENT width (viewport − 300px
   sidebar at ≥768px), not the raw viewport. Four-item grids divide evenly at
   4 → 2 → 1, so no orphan tiles. Use `…-0.02px` upper edges (1199.98 / 575.98)
   to avoid overlap with the next `min-width` query.
   ============================================================================= */

:root {
    /* ---- Font (modern SaaS sans-serif; Inter loaded in base.html) ---- */
    --afs-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
                Helvetica, Arial, sans-serif;

    /* ---- Blue brand ramp (clean, light-background accent) ---- */
    --afs-blue-50:  #eff6ff;
    --afs-blue-100: #dbeafe;
    --afs-blue-200: #bfdbfe;
    --afs-blue-300: #93c5fd;
    --afs-blue-400: #60a5fa;
    --afs-blue-500: #3b82f6;   /* primary */
    --afs-blue-600: #2563eb;
    --afs-blue-700: #1d4ed8;
    --afs-blue-800: #1e40af;
    --afs-blue-900: #1e3a8a;

    /* ---- Purple ramp (My Pension theme) ---- */
    --afs-purple-50:  #f6f2fe;
    --afs-purple-100: #ece2fd;
    --afs-purple-200: #d6c4fb;
    --afs-purple-300: #b794f6;
    --afs-purple-400: #9a6df0;
    --afs-purple-500: #7c3aed;  /* pension primary */
    --afs-purple-600: #6b27d6;
    --afs-purple-700: #571eb0;
    --afs-purple-800: #471a8c;
    --afs-purple-900: #34146a;

    /* ---- Semantic colors (tuned for a light background + soft tints) ---- */
    --afs-success:     #16a34a;
    --afs-success-bg:  #dcfce7;
    --afs-warning:     #d97706;
    --afs-warning-bg:  #fef3c7;
    --afs-danger:      #dc2626;
    --afs-danger-bg:   #fee2e2;
    --afs-info:        #2563eb;
    --afs-info-bg:     #dbeafe;
    --afs-neutral:     #64748b;
    --afs-neutral-bg:  #f1f5f9;

    /* ---- Brand aliases (override per-theme; components reference these) ---- */
    --afs-brand:          var(--afs-blue-500);
    --afs-brand-strong:   var(--afs-blue-700);
    --afs-brand-soft:     var(--afs-blue-50);
    --afs-brand-contrast: #ffffff;

    /* ---- Surfaces & text (light theme) ---- */
    --afs-bg:            #f4f6fb;   /* near-white app background */
    --afs-surface:       #ffffff;
    --afs-surface-muted: #f6f8fc;
    --afs-text:          #1f2937;   /* slate-800 */
    --afs-text-muted:    #64748b;   /* slate-500 */
    --afs-border:        #e6eaf0;
    --afs-border-strong: #d4dbe6;

    /* ---- App background (light; subtle cool gradient, no more azure) ---- */
    --afs-bg-gradient: linear-gradient(180deg, #f7f9fc 0%, #eef2f8 100%);

    /* ---- Radius scale (airier, slightly larger cards) ---- */
    --afs-radius-sm: 8px;
    --afs-radius-md: 12px;
    --afs-radius-lg: 16px;
    --afs-radius-xl: 20px;
    --afs-radius-pill: 999px;

    /* ---- Shadow scale (soft, low-opacity for the light look) ---- */
    --afs-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --afs-shadow-md: 0 2px 8px rgba(16, 24, 40, 0.04), 0 10px 24px rgba(16, 24, 40, 0.06);
    --afs-shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.10);

    /* ---- Spacing scale ---- */
    --afs-space-1: 0.25rem;
    --afs-space-2: 0.5rem;
    --afs-space-3: 0.75rem;
    --afs-space-4: 1rem;
    --afs-space-5: 1.5rem;
    --afs-space-6: 2rem;
    --afs-space-7: 2.5rem;
    --afs-space-8: 3rem;
}

/* Purple theme scope — apply data-afs-theme="pension" on a wrapper to recolor
   every component (used when My Pension is migrated). */
[data-afs-theme="pension"] {
    --afs-brand:        var(--afs-purple-500);
    --afs-brand-strong: var(--afs-purple-700);
    --afs-brand-soft:   var(--afs-purple-50);
    --afs-bg-gradient:  linear-gradient(180deg, #faf8ff 0%, #f1ecfb 100%);
}

/* =============================== Global type =============================== */
/* Inter (var(--afs-font)) on BOTH body and headings, app-wide. Headings would
   otherwise inherit Bootstrap's system-font stack; pin them explicitly so the
   "Rendered Fonts" panel reports Inter for headings and body, Greek and Latin. */
body,
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.btn, .form-control, .form-select, .nav-link, .modal, .dropdown-menu {
    font-family: var(--afs-font);
}

/* =============================== Components ================================= */

/* ---- Card: solid white surface (no glass/blur) ---- */
.afs-card {
    background: var(--afs-surface);
    color: var(--afs-text);
    border: 1px solid var(--afs-border);
    border-radius: var(--afs-radius-lg);
    box-shadow: var(--afs-shadow-md);
    padding: var(--afs-space-6);
}
.afs-card--pad-sm { padding: var(--afs-space-5); }

/* Section title inside a card (icon heading + divider) */
.afs-card__title {
    color: var(--afs-brand-strong);
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0 0 var(--afs-space-5);
    padding-bottom: var(--afs-space-3);
    border-bottom: 2px solid var(--afs-brand-soft);
    display: flex;
    align-items: center;
    gap: var(--afs-space-2);
}

/* ---- Section: a standalone colored header band (bar) with cards below it.
   .afs-section is a transparent grouping wrapper; .afs-section__header is a
   self-contained, fully-rounded gradient bar. Use .afs-section--purple to recolor. */
.afs-section {
    margin-bottom: var(--afs-space-5);
}
.afs-section__header {
    background: linear-gradient(135deg, var(--afs-blue-500), var(--afs-blue-700));
    color: #fff;
    border-radius: var(--afs-radius-lg);
    box-shadow: var(--afs-shadow-md);
    padding: var(--afs-space-4) var(--afs-space-5);
    font-weight: 700;
}
.afs-section--purple .afs-section__header {
    background: linear-gradient(135deg, var(--afs-purple-500), var(--afs-purple-700));
}
.afs-section__body { padding-top: var(--afs-space-4); }

/* ---- Stat / KPI card ---- */
.afs-stat {
    background: var(--afs-surface);
    color: var(--afs-text);
    border: 1px solid var(--afs-border);
    border-radius: var(--afs-radius-lg);
    box-shadow: var(--afs-shadow-sm);
    padding: var(--afs-space-5);
    display: flex;
    align-items: center;
    gap: var(--afs-space-4);
}
/* Icon chip: soft tinted squircle (modern SaaS look — was a gradient-filled circle).
   Default = brand tint; semantic modifiers recolor the tint + glyph. The colored glyph
   sits on a low-opacity tint of the same hue with a subtle soft shadow. */
.afs-stat__icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    font-size: 1.2rem;
    line-height: 1;
    color: var(--afs-brand);
    background: var(--afs-brand-soft);
    box-shadow: var(--afs-shadow-sm);
}
.afs-stat__value { font-size: 1.9rem; font-weight: 700; line-height: 1.1; color: var(--afs-text); }
.afs-stat__label { font-size: 0.85rem; color: var(--afs-text-muted); }
/* Vertical variant: icon on top, centered (for stat-card grids) */
.afs-stat--v { flex-direction: column; align-items: center; text-align: center; gap: var(--afs-space-3); }
/* Semantic stat-icon colors (soft tint + matching glyph) */
.afs-stat__icon--success { color: var(--afs-success); background: var(--afs-success-bg); }
.afs-stat__icon--warning { color: var(--afs-warning); background: var(--afs-warning-bg); }
.afs-stat__icon--danger  { color: var(--afs-danger);  background: var(--afs-danger-bg); }
.afs-stat__icon--info    { color: var(--afs-info);    background: var(--afs-info-bg); }
.afs-stat__icon--neutral { color: var(--afs-neutral); background: var(--afs-neutral-bg); }

/* ---- Table ---- */
.afs-table-wrap {
    background: var(--afs-surface);
    border-radius: var(--afs-radius-lg);
    box-shadow: var(--afs-shadow-md);
    overflow: hidden;   /* clip rounded corners (vertical) */
    overflow-x: auto;   /* wide tables (e.g. the 7-col ΕΣΠΑ programmes list) scroll instead of being clipped in the 300px-sidebar squeeze band */
}
.afs-table { width: 100%; border-collapse: collapse; color: var(--afs-text); }
.afs-table thead th {
    background: linear-gradient(135deg, var(--afs-blue-700), var(--afs-blue-900));
    color: #fff;
    font-weight: 600;
    font-size: 0.85rem;
    text-align: left;
    padding: var(--afs-space-3) var(--afs-space-4);
}
.afs-table tbody td {
    padding: var(--afs-space-3) var(--afs-space-4);
    border-top: 1px solid var(--afs-border);
}
.afs-table tbody tr:nth-child(even) { background: var(--afs-surface-muted); }

/* ---- Badges ---- */
.afs-badge {
    display: inline-block;
    padding: 0.35rem 0.8rem;
    border-radius: var(--afs-radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
}
.afs-badge--success { background: var(--afs-success-bg); color: var(--afs-success); }
.afs-badge--warning { background: var(--afs-warning-bg); color: var(--afs-warning); }
.afs-badge--danger  { background: var(--afs-danger-bg);  color: var(--afs-danger); }
.afs-badge--info    { background: var(--afs-info-bg);    color: var(--afs-info); }
.afs-badge--neutral { background: var(--afs-neutral-bg); color: var(--afs-neutral); }
.afs-badge--brand   { background: linear-gradient(135deg, var(--afs-brand), var(--afs-brand-strong)); color: var(--afs-brand-contrast); }

/* ---- Buttons ---- */
.afs-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--afs-space-2);
    padding: 0.7rem 1.5rem;
    border-radius: var(--afs-radius-md);
    font-weight: 600;
    font-size: 0.95rem;
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.afs-btn--primary {
    background: linear-gradient(135deg, var(--afs-brand), var(--afs-brand-strong));
    color: var(--afs-brand-contrast);
    box-shadow: 0 4px 14px rgba(13, 42, 71, 0.18);
}
.afs-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(13, 42, 71, 0.24);
    color: var(--afs-brand-contrast);
}
.afs-btn--outline {
    background: transparent;
    color: var(--afs-text-muted);
    border-color: var(--afs-border-strong);
}
.afs-btn--outline:hover { background: var(--afs-surface-muted); color: var(--afs-text); }
/* Compact size (matches Bootstrap btn-sm scale) */
.afs-btn--sm { padding: 0.4rem 0.9rem; font-size: 0.85rem; border-width: 1px; }

/* ---- Form fields (scoped to .afs-card / .afs-section so they don't leak) ---- */
.afs-card .form-label,
.afs-section .form-label {
    color: var(--afs-brand-strong);
    font-weight: 600;
    font-size: 0.9rem;
    margin-bottom: var(--afs-space-2);
}
.afs-card .form-control,
.afs-card .form-select,
.afs-section .form-control,
.afs-section .form-select {
    border: 2px solid var(--afs-border);
    border-radius: var(--afs-radius-md);
    padding: 0.7rem 1rem;
    font-size: 0.95rem;
    color: var(--afs-text);
    background: var(--afs-surface);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.afs-card .form-control:focus,
.afs-card .form-select:focus,
.afs-section .form-control:focus,
.afs-section .form-select:focus {
    border-color: var(--afs-brand);
    box-shadow: 0 0 0 3px var(--afs-brand-soft);
    background: #fff;
}
.afs-card .form-control:hover,
.afs-card .form-select:hover,
.afs-section .form-control:hover,
.afs-section .form-select:hover { border-color: var(--afs-border-strong); }
.afs-card .form-control::placeholder,
.afs-section .form-control::placeholder { color: #a7b0bd; }
.afs-card .form-control[readonly],
.afs-section .form-control[readonly] {
    background: var(--afs-surface-muted);
    border-color: var(--afs-border);
    color: var(--afs-text-muted);
    cursor: not-allowed;
}

/* =============================================================================
   Micro-interactions — subtle, GPU-friendly motion (transform / box-shadow /
   filter / opacity only; never layout properties). Applies to all .afs-*
   components on every page. Fully disabled under prefers-reduced-motion.

   NOTE: the My Invoices page animates card ENTRANCE via an IntersectionObserver
   (inline transform/transition on .invoice-stats-card). We do NOT add a competing
   entrance animation here — only hover/press/focus polish. The card/stat hover
   lift uses !important on transform so it still works over that inline transform.
   ============================================================================= */

/* Cards & stat cards: soft hover lift + slightly stronger shadow */
.afs-card,
.afs-stat {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.afs-card:hover,
.afs-stat:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--afs-shadow-lg);
}

/* Stat icon: gentle scale-up when its card is hovered */
.afs-stat__icon { transition: transform 0.2s ease; }
.afs-stat:hover .afs-stat__icon { transform: scale(1.08); }

/* Buttons: hover lift + subtle brightness, tactile :active press, a11y focus ring */
.afs-btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease,
                background 0.18s ease, color 0.18s ease;
}
.afs-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.afs-btn:active { transform: translateY(0) scale(0.98); filter: brightness(0.98); }
.afs-btn:focus-visible { outline: 2px solid var(--afs-brand); outline-offset: 2px; }

/* Bootstrap toggle buttons (e.g. the period-mode selector) — match the .afs-btn
   hover-lift / press feel without converting the functional radio markup. */
.btn-check + .btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease,
                background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn-check + .btn:hover { transform: translateY(-1px); }
.btn-check + .btn:active { transform: translateY(0) scale(0.98); }

/* Table rows: smooth background highlight on hover */
.afs-table tbody tr { transition: background-color 0.15s ease; }
.afs-table tbody tr:hover { background: var(--afs-brand-soft); }

/* Respect users who opt out of motion: kill transitions + movement, keep colors */
@media (prefers-reduced-motion: reduce) {
    .afs-card,
    .afs-stat,
    .afs-stat__icon,
    .afs-btn,
    .btn-check + .btn,
    .afs-table tbody tr,
    .afs-card .form-control,
    .afs-card .form-select,
    .afs-section .form-control,
    .afs-section .form-select {
        transition: none !important;
    }
    .afs-card:hover,
    .afs-stat:hover,
    .afs-stat:hover .afs-stat__icon,
    .afs-btn:hover,
    .afs-btn:active,
    .btn-check + .btn:hover,
    .btn-check + .btn:active {
        transform: none !important;
    }
}