/* ================================
   THEME PALETTE & TOKENS
   ================================ */

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Shared blues (from the provided header image) */
:root {
    --hd-blue: #0056cc;
    --hd-blue-soft: #1f6feb;
    --hd-blue-soft2: #2f81f7;
    --hd-radius-sm: 0.375rem;
    --hd-radius-md: 0.75rem;
    --hd-radius-lg: 1.25rem;
    --hd-shadow-soft: 0 18px 40px rgba(15, 23, 42, 0.08);
}

    /* Light theme (default) */
    :root[data-theme='light'] {
        --hd-bg: #f3f4f6;
        --hd-bg-alt: #e5e7eb;
        --hd-surface: #ffffff;
        --hd-surface-alt: #f9fafb;
        --hd-border: #d1d5db;
        --hd-nav-bg: #ffffff;
        --hd-text: #111827;
        /* --hd-text-muted: #6b7280;*/
        --hd-text-muted: #2a2c30;
        --hd-input-bg: #ffffff;
        --hd-input-border: #cbd5e1;
    }

    /* Dark theme */
    :root[data-theme='dark'] {
        --hd-bg: #020617;
        --hd-bg-alt: #020617;
        --hd-surface: #020617;
        /*--hd-surface: #9ba1b9;*/
        /*  --hd-surface-alt: #020617;*/
        --hd-surface-alt: #f9fafb;
        --hd-border: #1e293b;
        --hd-nav-bg: #020617;
        /* --hd-text: #e5e7eb;*/
        --hd-text: #072b73;
        /*--hd-text-muted: #9ca3af;*/
        --hd-text-muted: #3b5788;
        /*--hd-input-bg: #020617;*/
        --hd-input-bg: #ffffff;
        --hd-input-border: #1e293b;
        --bs-secondary-color: #dadee5;
        --bs-heading-color: #dadee5;
        --bs-card-color: #4a566c;

    }

/* ================================
   APP SHELL
   ================================ */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background-color: var(--hd-bg);
    color: var(--hd-text);
}

.app-shell {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: radial-gradient(circle at top left, rgba(0, 86, 204, 0.06), transparent 55%), var(--hd-bg);
}

/* Header / main / footer */
.site-header {
    background-color: var(--hd-nav-bg);
    border-bottom: 1px solid var(--hd-border);
    position: sticky;
    top: 0;
    z-index: 20;
}

.app-main {
    flex: 1 1 auto;
    padding: 1.5rem 0 2.5rem;
}

.site-footer {
    flex: 0 0 auto;
    border-top: 1px solid var(--hd-border);
    background-color: var(--hd-surface-alt);
    color: var(--hd-text-muted);
}

/* ================================
   LAYOUT HELPERS
   ================================ */

.container {
    width: min(1200px, 100% - 2rem);
    margin-inline: auto;
}

/* Page content wrapper */
.page-container {
    margin-top: 1.5rem;
}

/* Simple flex row / columns (Bootstrap-ish) */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-inline: -0.5rem;
}

[class^="col-"],
[class*=" col-"] {
    padding-inline: 0.5rem;
    box-sizing: border-box;
}

/* Basic column widths */
.col-12 {
    flex: 0 0 100%;
    max-width: 100%;
}

.col-md-6,
.col-lg-6 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-lg-9 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-xl-8 {
    flex: 0 0 66.6667%;
    max-width: 66.6667%;
}

/* Alignment helpers */
.justify-content-center {
    justify-content: center;
}

.text-center {
    text-align: center;
}

/* Responsive: stack columns on small screens */
@media (max-width: 768px) {
    .col-md-6,
    .col-lg-6,
    .col-lg-9,
    .col-xl-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .page-container {
        margin-top: 1rem;
    }
}

/* ================================
   HEADER & NAV
   ================================ */

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    padding-block: 0.75rem;
}

.header-brand {
    display: flex;
    align-items: center;
}

.brand-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
}

.brand-logo {
    max-width: 180px;
    height: auto;
}

.brand-text {
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: 0.85rem;
    color: var(--hd-text-muted);
}

/* Nav */
.header-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
}

.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--hd-text);
    font-size: 0.9rem;
    font-weight: 500;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.08s ease;
}

    .nav-btn:hover,
    .nav-btn:focus-visible {
        background: linear-gradient(90deg, var(--hd-blue), var(--hd-blue-soft));
        border-color: transparent;
        color: #ffffff;
        transform: translateY(-1px);
    }

/* Theme toggle */
.theme-toggle {
    border-radius: 999px;
    border: 1px solid var(--hd-border);
    background-color: var(--hd-surface-alt);
    color: var(--hd-text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.65rem;
    cursor: pointer;
    font-size: 0.95rem;
    gap: 0.25rem;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

    .theme-toggle:hover,
    .theme-toggle:focus-visible {
        border-color: var(--hd-blue-soft);
        background-color: rgba(0, 86, 204, 0.06);
        color: var(--hd-text);
    }

.theme-icon {
    opacity: 0.45;
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Light mode: sun bright, moon dim */
:root[data-theme='light'] .theme-icon-sun {
    opacity: 1;
    transform: translateY(-1px);
}

/* Dark mode: moon bright, sun dim */
:root[data-theme='dark'] .theme-icon-moon {
    opacity: 1;
    transform: translateY(-1px);
}

/* Footer */
.footer-inner {
    padding-block: 0.75rem;
    font-size: 0.85rem;
}

/* ================================
   TYPOGRAPHY & LINKS
   ================================ */

h1,
h2,
h3,
h4 {
    margin-top: 0;
    font-weight: 700;
    color: var(--hd-text);
}

a {
    color: var(--hd-blue-soft);
    text-decoration: none;
    transition: color 0.12s ease, text-decoration-color 0.12s ease;
}

    a:hover,
    a:focus-visible {
        text-decoration: underline;
    }

/* ================================
   CARDS / PANELS
   ================================ */

.card {
    background-color: var(--hd-surface);
    color: var(--hd-text);
    border: 1px solid var(--hd-border);
    border-radius: var(--hd-radius-lg);
    box-shadow: var(--hd-shadow-soft);
}

.card-header {
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid var(--hd-border);
    background: linear-gradient(90deg, rgba(0, 86, 204, 0.12), transparent);
}

.card-body {
    padding: 1.25rem 1.5rem;
}

.card-footer {
    padding: 0.85rem 1.25rem;
    border-top: 1px solid var(--hd-border);
}

/* ================================
   FORMS
   ================================ */

label {
    font-size: 0.9rem;
}

.form-row {
    margin-bottom: 0.75rem;
}

    .form-row label {
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
        color: var(--hd-text);
    }

input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 0.45rem 0.55rem;
    border-radius: var(--hd-radius-sm);
    border: 1px solid var(--hd-input-border);
    box-sizing: border-box;
    background-color: var(--hd-input-bg);
    color: var(--hd-text);
    font-size: 0.9rem;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

textarea {
    min-height: 120px;
    resize: vertical;
}

    input::placeholder,
    textarea::placeholder {
        color: var(--hd-text-muted);
    }

    input:focus,
    select:focus,
    textarea:focus {
        border-color: var(--hd-blue-soft2);
        box-shadow: 0 0 0 0.12rem rgba(31, 111, 235, 0.25);
    }

/* Simple spacing helpers often used in views */
.mb-3 {
    margin-bottom: 1rem;
}

/* ================================
   BUTTONS
   ================================ */

button,
.btn {
    border-radius: 999px;
    padding: 0.45rem 1.1rem;
    border: 1px solid var(--hd-blue-soft);
    background: linear-gradient(90deg, var(--hd-blue), var(--hd-blue-soft2));
    color: #ffffff;
    font-weight: 500;
    font-size: 0.9rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;
}

    button:hover,
    button:focus-visible,
    .btn:hover,
    .btn:focus-visible {
        border-color: var(--hd-blue-soft2);
        background: linear-gradient(90deg, var(--hd-blue-soft2), var(--hd-blue-soft));
        box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
        transform: translateY(-1px);
    }

/* Outline buttons */
.btn-outline-primary {
    background: transparent;
    color: var(--hd-blue-soft);
    border-color: var(--hd-blue-soft);
}

    .btn-outline-primary:hover,
    .btn-outline-primary:focus-visible {
        background: rgba(0, 86, 204, 0.08);
        color: var(--hd-blue-soft2);
    }

.btn-outline-secondary {
    background: transparent;
    color: var(--hd-text-muted);
    border-color: var(--hd-border);
}

    .btn-outline-secondary:hover,
    .btn-outline-secondary:focus-visible {
        background: rgba(148, 163, 184, 0.15);
        color: var(--hd-text);
    }

/* ================================
   TABLES
   ================================ */

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1rem;
    font-size: 0.9rem;
}

    .table th,
    .table td {
        padding: 0.5rem 0.6rem;
        border: 1px solid var(--hd-border);
        text-align: left;
    }

    .table thead {
        background: linear-gradient(90deg, rgba(0, 86, 204, 0.18), rgba(15, 23, 42, 0.08));
    }

/* ================================
   STATUS BADGES & ALERTS
   ================================ */

.hd-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.75rem;
    font-weight: 500;
}

.hd-badge-open {
    background-color: var(--hd-blue-soft);
    color: #f9fafb;
}

.hd-badge-closed {
    background-color: #4b5563;
    color: #f9fafb;
}

.hd-badge-neutral {
    background-color: #e5e7eb;
    color: #111827;
}

/* Validation & alerts */
.text-danger {
    color: #dc2626;
}

.validation-summary {
    margin-bottom: 0.75rem;
}

.alert-success {
    padding: 0.6rem 0.8rem;
    border-radius: var(--hd-radius-sm);
    border: 1px solid #16a34a;
    background-color: rgba(22, 163, 74, 0.08);
    color: #14532d;
    font-size: 0.9rem;
    margin-top: 0.75rem;
}
.site-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.site-logo {
    height: 56px;
    max-width: 100%;
}

.theme-toggle {
    padding-inline: 0.6rem;
    min-width: 2.5rem;
    justify-content: center;
}
.hd-tile-icon {
    /* Bigger + more visual weight */
    font-size: 2.8rem;
    width: 3.25rem;
    height: 3.25rem;
    /* Center the emoji/icon */
    display: flex;
    align-items: center;
    justify-content: center;
    /* Make it feel like a badge */
    border-radius: 1rem;
    background-color: var(--hd-primary);
    color: #ffffff;
    flex-shrink: 0;
}
.hd-tile {
    /* existing styles... */
    gap: 1rem; /* was 0.75rem */
}
.header-nav-layout {
    min-height: 3rem;
}

.header-nav-quick .nav-btn-quiet {
    padding-inline: 0.85rem;
    font-size: 0.85rem;
    opacity: 0.9;
}

    .header-nav-quick .nav-btn-quiet:hover,
    .header-nav-quick .nav-btn-quiet:focus-visible {
        opacity: 1;
    }

@media (max-width: 992px) {
    S
    .header-nav-layout {
        flex-direction: column;
        align-items: flex-end;
    }

    .header-nav-quick {
        order: 2;
        justify-content: flex-start !important;
    }

    .header-nav-main {
        order: 1;
    }
}