/* ============================================================================
   custom.css — "Clean Light SaaS" design layer
   Loaded AFTER style.css (Bootstrap 5.1.3) to override its look without
   touching the broken SCSS pipeline. Restyles via :root tokens + targeted
   selectors. All Bootstrap classes / HTMX hooks in the templates are kept;
   this file only changes appearance.
   ========================================================================= */

/* ----- Type: distinctive but clean (display + UI sans), self-hosted via Google fonts) ----- */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700&family=Plus+Jakarta+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
    /* Surfaces */
    --app-bg: #F7F8FA;
    --app-bg-tint: #EEF1F6;
    --surface: #FFFFFF;
    --surface-2: #FBFCFE;

    /* Brand / accent */
    --accent: #6366F1;          /* indigo */
    --accent-strong: #4F46E5;
    --accent-soft: #EEF0FE;
    --accent-ring: rgba(99, 102, 241, 0.32);

    /* Text */
    --ink: #1E293B;             /* slate-800 */
    --ink-soft: #475569;        /* slate-600 */
    --ink-faint: #94A3B8;       /* slate-400 */

    /* Status */
    --ok: #16A34A;   --ok-soft: #E7F6EC;
    --warn: #D97706; --warn-soft: #FBF1E3;
    --err: #DC2626;  --err-soft: #FCEAEA;

    /* Lines & shadows */
    --line: #E7EAF0;
    --line-strong: #D9DEE8;
    --radius: 16px;
    --radius-sm: 11px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.04), 0 1px 3px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 4px 12px rgba(16, 24, 40, 0.06), 0 2px 6px rgba(16, 24, 40, 0.04);
    --shadow-lg: 0 18px 40px -12px rgba(30, 41, 59, 0.18), 0 8px 20px -10px rgba(30, 41, 59, 0.12);

    --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
    --font-ui: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --font-mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
}

/* ----- Base / atmosphere ----- */
body,
body.bg-light {
    font-family: var(--font-ui);
    color: var(--ink);
    background-color: var(--app-bg) !important;
    /* soft layered depth instead of a flat fill */
    background-image:
        radial-gradient(1100px 520px at 88% -8%, rgba(99, 102, 241, 0.07), transparent 60%),
        radial-gradient(900px 480px at -6% 4%, rgba(56, 189, 248, 0.06), transparent 55%);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    letter-spacing: -0.01em;
    min-height: 100vh;
}

main.app-main {
    /* room so the (now non-fixed) footer never overlaps content */
    padding-bottom: 3.5rem;
}

h1, h2, h3, h4, h5, h6,
.navbar-brand {
    font-family: var(--font-display);
    letter-spacing: -0.02em;
    color: var(--ink);
}

/* monospace for AWS resource identifiers */
.res-id {
    font-family: var(--font-mono);
    font-size: 0.92rem;
    letter-spacing: -0.02em;
    word-break: break-all;
    color: var(--ink);
}

/* ============================ NAVBAR ============================ */
.navbar.bg-primary {
    background: rgba(255, 255, 255, 0.82) !important;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm) !important;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

.navbar.navbar-dark .navbar-brand {
    color: var(--ink) !important;
    font-weight: 700;
    font-size: 1.18rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

/* little indigo brand glyph before the title */
.navbar .navbar-brand::before {
    content: "";
    width: 26px;
    height: 26px;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--accent), #38BDF8);
    box-shadow: 0 4px 10px -2px var(--accent-ring);
    flex: 0 0 auto;
}

.navbar.navbar-dark .nav-link {
    color: var(--ink-soft) !important;
    font-weight: 600;
    font-size: 0.96rem;
    border-radius: var(--radius-pill);
    padding: 0.4rem 1rem !important;
    margin-left: 0.25rem;
    transition: background-color .18s ease, color .18s ease;
}

.navbar.navbar-dark .nav-link:hover {
    color: var(--accent-strong) !important;
    background: var(--accent-soft);
}

.navbar.navbar-dark .nav-link.active {
    color: var(--accent-strong) !important;
    background: var(--accent-soft);
}

/* diagnostic note in the brand reads as a subtle pill */
.diag-badge {
    font-family: var(--font-ui);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--warn);
    background: var(--warn-soft);
    border-radius: var(--radius-pill);
    padding: 0.15rem 0.6rem;
}

/* ============================ SECTION HEADERS ============================ */
/* the old <h4> in a .bg-light box → clean eyebrow + heading */
.section-head {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 2.2rem 0 1.1rem;
}
.section-head .dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 0 4px var(--accent-soft);
}
.section-head h4 {
    margin: 0;
    font-size: 1.18rem;
    font-weight: 700;
}
.section-head .count {
    margin-left: auto;
    font-family: var(--font-ui);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ink-soft);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 0.18rem 0.7rem;
}
/* keep legacy bg-light header boxes from looking like grey slabs */
.bg-light {
    background: transparent !important;
}

/* ============================ CARDS ============================ */
.card {
    border-radius: var(--radius) !important;
    border: 1px solid var(--line) !important;
    background: var(--surface) !important;
    box-shadow: var(--shadow-sm) !important;
    transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s ease, border-color .22s ease;
}
.card.shadow,
.card.shadow-sm {
    box-shadow: var(--shadow-sm) !important;
}
/* hover-raise for the resource/job cards (those given h-100) */
.card.h-100:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--line-strong) !important;
}
/* the "this is the instance serving you" highlight */
.card.border-primary {
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-md) !important;
}
.card.border-primary::after {
    content: "Serving you";
    position: absolute;
    top: 0.85rem; right: 0.85rem;
    font-size: 0.66rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-strong);
    background: var(--accent-soft);
    padding: 0.16rem 0.55rem;
    border-radius: var(--radius-pill);
}
.card-body { position: relative; }
.card-title { font-weight: 700; color: var(--ink); }

/* ---- top stat cards on the dashboard ---- */
.stat-card .card-body { padding: 1.35rem 1.25rem; }
.stat-card .card-title {
    font-family: var(--font-ui);
    font-size: 0.72rem !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-faint);
    margin-bottom: 0.4rem;
}
.stat-card .stat-value,
.stat-card .stat-value p {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--ink);
    margin: 0;
    word-break: break-all;
}

/* ============================ FEATURE ICON BADGE ============================ */
/* replaces the broken <i class="bi bi-collection"> wrapper around AWS PNGs */
.feature {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 56px !important;
    width: 56px !important;
    border-radius: 14px;
    background: linear-gradient(160deg, #FFFFFF, var(--accent-soft)) !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    margin-bottom: 1rem !important;
    overflow: hidden;
}
.feature img { width: 32px; height: 32px; display: block; }
.feature i { display: contents; } /* neutralise leftover empty <i> wrappers */

/* ============================ STATUS PILLS ============================ */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.34rem 0.7rem;
    border-radius: var(--radius-pill);
    border: 1px solid transparent;
}
.pill::before {
    content: "";
    width: 7px; height: 7px; border-radius: 50%;
    background: currentColor;
}
.pill-ok   { color: var(--ok);   background: var(--ok-soft);   border-color: rgba(22,163,74,.18); }
.pill-warn { color: var(--warn); background: var(--warn-soft); border-color: rgba(217,119,6,.18); }
.pill-err  { color: var(--err);  background: var(--err-soft);  border-color: rgba(220,38,38,.18); }
.pill-muted{ color: var(--ink-soft); background: var(--app-bg-tint); border-color: var(--line); }

/* meta rows inside resource/job cards */
.meta-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.9rem;
    padding: 0.3rem 0;
    border-top: 1px solid var(--line);
}
.meta-row:first-of-type { border-top: 0; }
.meta-row .k { color: var(--ink-faint); font-weight: 600; }
.meta-row .v { color: var(--ink); font-weight: 600; text-align: right; word-break: break-word; }

/* ============================ BUTTONS ============================ */
.btn {
    font-family: var(--font-ui);
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
    letter-spacing: -0.01em;
    transition: transform .15s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:active { transform: translateY(1px); }

/* primary action buttons (jobs page used btn-dark) → indigo */
.btn-dark,
.btn-primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #fff !important;
    box-shadow: 0 6px 16px -6px var(--accent-ring) !important;
}
.btn-dark:hover,
.btn-primary:hover {
    background: var(--accent-strong) !important;
    border-color: var(--accent-strong) !important;
    box-shadow: 0 10px 22px -8px var(--accent-ring) !important;
    transform: translateY(-2px);
}

.btn-success {
    background: var(--ok) !important;
    border-color: var(--ok) !important;
    color: #fff !important;
}
.btn-success:hover { filter: brightness(0.95); transform: translateY(-2px); }

.btn-danger {
    background: var(--err) !important;
    border-color: var(--err) !important;
    color: #fff !important;
}
.btn-danger:hover { filter: brightness(0.95); transform: translateY(-2px); }

/* outline/ghost variants */
.btn-outline-dark {
    color: var(--ink-soft) !important;
    border-color: var(--line-strong) !important;
    background: var(--surface) !important;
    box-shadow: none !important;
}
.btn-outline-dark:hover {
    color: var(--err) !important;
    border-color: var(--err) !important;
    background: var(--err-soft) !important;
    transform: translateY(-2px);
}
.btn-outline-success {
    color: var(--ok) !important;
    border-color: rgba(22,163,74,.3) !important;
    background: var(--ok-soft) !important;
}
.btn-outline-warning {
    color: var(--warn) !important;
    border-color: rgba(217,119,6,.3) !important;
    background: var(--warn-soft) !important;
}

/* the big jobs action buttons */
.action-btn {
    padding: 1.05rem 1rem !important;
    font-size: 1.02rem !important;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
}

/* ============================ FORMS ============================ */
/* the add-job form sat in a .bg-dark slab → make it a clean white panel */
.bg-dark {
    background: var(--surface) !important;
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius) !important;
}
.form-control {
    border-radius: var(--radius-sm) !important;
    border: 1px solid var(--line-strong) !important;
    background: var(--surface-2) !important;
    color: var(--ink) !important;
    padding: 0.7rem 0.9rem !important;
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.form-control::placeholder { color: var(--ink-faint); }
.form-control:focus {
    border-color: var(--accent) !important;
    background: var(--surface) !important;
    box-shadow: 0 0 0 4px var(--accent-ring) !important;
}

/* ============================ FOOTER (fix overlap) ============================ */
/* base.html no longer uses fixed-bottom; this is a normal-flow footer */
footer.bg-primary {
    background: transparent !important;
    border-top: 1px solid var(--line);
    margin-top: 2.5rem;
    padding: 1.4rem 0 !important;
    position: static !important;
}
footer.bg-primary p,
footer .text-white {
    color: var(--ink-faint) !important;
    font-size: 0.84rem;
    margin: 0;
}

/* ============================ LOADING / HTMX ============================ */
/* a refined CSS spinner; the templates keep the .htmx-indicator class but we
   hide the old bars.svg and draw our own ring (works for <img> indicators) */
img.htmx-indicator { display: none !important; }
.htmx-indicator-wrap {
    display: flex; align-items: center; justify-content: center;
    gap: 0.7rem; color: var(--ink-faint);
    padding: 3rem 0; font-weight: 600; font-size: 0.92rem;
}
.spinner-ring {
    width: 26px; height: 26px;
    border-radius: 50%;
    border: 3px solid var(--accent-soft);
    border-top-color: var(--accent);
    animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* keep existing fade-me-* animations (defined in style.css) working;
   add a gentle entrance lift for swapped-in card sections */
.fade-me-in { animation: rise .35s ease-out both; }
@keyframes rise {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* spinner fallback for Font Awesome spinners used in stat cards */
.fa-spinner { color: var(--accent); }

/* ============================ RESPONSIVE ============================ */
@media (max-width: 575.98px) {
    .navbar.navbar-dark .navbar-brand { font-size: 1rem; }
    .stat-card .stat-value, .stat-card .stat-value p { font-size: 1.4rem; }
    .section-head { margin-top: 1.6rem; }
}