/* ================================================================
   FourFoxes Design System — theme.css
   Amber & Deep Navy Palette  |  v2.0  |  2026-04-03
   ================================================================ */

/* ── DESIGN TOKENS ──────────────────────────────────────────────── */

:root {
    /* Primary (Amber) */
    --ff-primary:          #E89F2B;
    --ff-primary-hover:    #CC8A1E;
    --ff-primary-light:    #F8D48A;
    --ff-primary-subtle:   #FFFAED;

    /* Secondary (Deep Navy) */
    --ff-secondary:        #1E3A5F;
    --ff-secondary-light:  #3A6090;
    --ff-secondary-subtle: #E8EFF6;

    /* Dark Backgrounds (navy-tinted) */
    --ff-dark:             #0F1820;
    --ff-dark-muted:       #1A2633;

    /* Neutrals (cool undertone) */
    --ff-neutral-900:      #1A2530;
    --ff-neutral-700:      #3D4A56;
    --ff-neutral-500:      #6B7785;
    --ff-neutral-300:      #CDD4D8;
    --ff-neutral-100:      #F2F5F7;
    --ff-white:            #FFFFFF;

    /* Semantic */
    --ff-success:          #2D9D5B;
    --ff-success-light:    #E6F4EC;
    --ff-warning:          #E89F2B;
    --ff-warning-light:    #FFFAED;
    --ff-danger:           #D94444;
    --ff-danger-light:     #FCEBEB;
    --ff-info:             #3A6090;
    --ff-info-light:       #E8EFF6;

    /* Typography */
    --ff-font-display:     'Funnel Display', sans-serif;
    --ff-font-body:        'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ── TOKEN ALIASES (home.html short names) ─────────────────────── */

:root {
    --ff:           'Funnel Display', sans-serif;
    --body:         'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --black:        var(--ff-dark);
    --white:        var(--ff-white);
    --amber:        var(--ff-primary);
    --amber-hover:  var(--ff-primary-hover);
    --amber-light:  var(--ff-primary-light);
    --amber-subtle: var(--ff-primary-subtle);
    --secondary:    var(--ff-secondary);
    --muted:        var(--ff-neutral-500);
    --neutral-900:  var(--ff-neutral-900);
    --border:       var(--ff-neutral-300);
    --bg-subtle:    var(--ff-neutral-100);
    --success:      var(--ff-success);
    --danger:       var(--ff-danger);
    --px:           clamp(20px, 5vw, 80px);
}

/* ── CSS RESET ──────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

/* ── GLOBAL BASE ────────────────────────────────────────────────── */

body {
    font-family: var(--ff-font-body);
    color: var(--ff-neutral-700);
    background: var(--ff-white);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ff-font-display);
    color: var(--ff-neutral-900);
}

/* ── LAYOUT ─────────────────────────────────────────────────────── */

.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: var(--px);
    padding-right: var(--px);
}

/* ── NAVBAR ─────────────────────────────────────────────────────── */

.navbar {
    --bs-navbar-brand-font-size: 0.9rem;
    --bs-navbar-color:           var(--ff-neutral-700);
    --bs-navbar-hover-color:     var(--ff-primary);
    --bs-navbar-active-color:    var(--ff-primary);
    font-family: var(--ff-font-body);
    background-color: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ff-neutral-300);
}

.navbar-brand {
    font-family: var(--ff-font-body) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    color: black !important;
    letter-spacing: -0.01em;
}

.navbar-brand img {
    border-radius: 6px;
}

.nav-link {
    font-family: var(--ff-font-body);
    font-weight: 500;
    font-size: 0.85rem;
    color: var(--ff-neutral-700) !important;
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    transition: color 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
    color: var(--ff-primary) !important;
}

.navbar-toggler {
    border: 1.5px solid var(--ff-neutral-300);
    padding: 6px 10px;
    border-radius: 6px;
    background: var(--ff-neutral-100);
}

.navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23E89F2B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px var(--ff-primary-subtle);
}

/* Dropdown menus */
.dropdown-menu {
    --bs-dropdown-border-color:        var(--ff-neutral-300);
    --bs-dropdown-border-radius:       8px;
    --bs-dropdown-link-color:          var(--ff-neutral-700);
    --bs-dropdown-link-hover-bg:       var(--ff-primary-subtle);
    --bs-dropdown-link-hover-color:    var(--ff-primary-hover);
    --bs-dropdown-link-active-bg:      var(--ff-primary);
    --bs-dropdown-link-active-color:   var(--ff-white);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    font-family: var(--ff-font-body);
    font-size: 0.85rem;
    border-width: 1px;
    z-index: 1050;
}

.dropdown-item {
    font-size: 0.85rem;
    font-weight: 400;
    padding: 0.45rem 1rem;
    transition: background 0.15s ease, color 0.15s ease;
}

.dropdown-divider {
    border-color: var(--ff-neutral-300);
    opacity: 1;
}

/* ── BUTTONS (shared) ───────────────────────────────────────────── */

.btn-dark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 13px 26px;
    background: var(--black);
    color: var(--white);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, gap 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.12);
}
.btn-dark svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
.btn-dark:hover { background: var(--amber); color: var(--white); gap: 12px; }
.btn-dark:hover svg { transform: translateX(2px); }

.btn-amber {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--body);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 13px 26px;
    background: var(--amber);
    color: var(--white);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.2s ease, gap 0.2s ease;
    box-shadow: 0 2px 8px rgba(240,168,46,0.3);
}
.btn-amber svg { width: 14px; height: 14px; flex-shrink: 0; transition: transform 0.2s ease; }
.btn-amber:hover { background: var(--amber-hover); color: var(--white); gap: 12px; }
.btn-amber:hover svg { transform: translateX(2px); }

/* ── BUTTONS ────────────────────────────────────────────────────── */

.btn {
    font-family: var(--ff-font-body);
    font-weight: 600;
    font-size: 0.85rem;
    padding: 10px 22px;
    border-radius: 8px;
    transition: all 0.2s ease;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-primary {
    --bs-btn-bg:                 var(--ff-primary);
    --bs-btn-border-color:       var(--ff-primary);
    --bs-btn-hover-bg:           var(--ff-primary-hover);
    --bs-btn-hover-border-color: var(--ff-primary-hover);
    --bs-btn-active-bg:          var(--ff-primary-hover);
    --bs-btn-active-border-color:var(--ff-primary-hover);
    --bs-btn-disabled-bg:        var(--ff-neutral-300);
    --bs-btn-disabled-border-color: var(--ff-neutral-300);
    --bs-btn-color:              var(--ff-white);
    --bs-btn-hover-color:        var(--ff-white);
    --bs-btn-active-color:       var(--ff-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-secondary {
    --bs-btn-bg:                 var(--ff-secondary);
    --bs-btn-border-color:       var(--ff-secondary);
    --bs-btn-hover-bg:           var(--ff-secondary-light);
    --bs-btn-hover-border-color: var(--ff-secondary-light);
    --bs-btn-color:              var(--ff-white);
    --bs-btn-hover-color:        var(--ff-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-outline-primary {
    --bs-btn-color:              var(--ff-primary);
    --bs-btn-border-color:       var(--ff-primary);
    --bs-btn-hover-bg:           var(--ff-primary-subtle);
    --bs-btn-hover-color:        var(--ff-primary-hover);
    --bs-btn-hover-border-color: var(--ff-primary);
    --bs-btn-active-bg:          var(--ff-primary-subtle);
    --bs-btn-active-color:       var(--ff-primary-hover);
}

.btn-outline-secondary {
    --bs-btn-color:              var(--ff-secondary);
    --bs-btn-border-color:       var(--ff-secondary);
    --bs-btn-hover-bg:           var(--ff-secondary-subtle);
    --bs-btn-hover-color:        var(--ff-secondary);
    --bs-btn-hover-border-color: var(--ff-secondary);
}

.btn-danger {
    --bs-btn-bg:                 var(--ff-danger);
    --bs-btn-border-color:       var(--ff-danger);
    --bs-btn-hover-bg:           #b93636;
    --bs-btn-hover-border-color: #b93636;
    --bs-btn-color:              var(--ff-white);
    --bs-btn-hover-color:        var(--ff-white);
}

.btn-warning {
    --bs-btn-bg:                 var(--ff-primary);
    --bs-btn-border-color:       var(--ff-primary);
    --bs-btn-hover-bg:           var(--ff-primary-hover);
    --bs-btn-hover-border-color: var(--ff-primary-hover);
    --bs-btn-active-bg:          var(--ff-primary-hover);
    --bs-btn-active-border-color:var(--ff-primary-hover);
    --bs-btn-color:              var(--ff-white);
    --bs-btn-hover-color:        var(--ff-white);
    --bs-btn-active-color:       var(--ff-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-outline-warning {
    --bs-btn-color:              var(--ff-primary);
    --bs-btn-border-color:       var(--ff-primary);
    --bs-btn-hover-bg:           var(--ff-primary-subtle);
    --bs-btn-hover-color:        var(--ff-primary-hover);
    --bs-btn-hover-border-color: var(--ff-primary);
    --bs-btn-active-bg:          var(--ff-primary-subtle);
    --bs-btn-active-color:       var(--ff-primary-hover);
}

.btn-info {
    --bs-btn-bg:                 var(--ff-secondary);
    --bs-btn-border-color:       var(--ff-secondary);
    --bs-btn-hover-bg:           var(--ff-secondary-light);
    --bs-btn-hover-border-color: var(--ff-secondary-light);
    --bs-btn-active-bg:          var(--ff-secondary-light);
    --bs-btn-active-border-color:var(--ff-secondary-light);
    --bs-btn-color:              var(--ff-white);
    --bs-btn-hover-color:        var(--ff-white);
    --bs-btn-active-color:       var(--ff-white);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
}

.btn-outline-info {
    --bs-btn-color:              var(--ff-secondary);
    --bs-btn-border-color:       var(--ff-secondary);
    --bs-btn-hover-bg:           var(--ff-secondary-subtle);
    --bs-btn-hover-color:        var(--ff-secondary);
    --bs-btn-hover-border-color: var(--ff-secondary);
    --bs-btn-active-bg:          var(--ff-secondary-subtle);
    --bs-btn-active-color:       var(--ff-secondary);
}

.btn-success {
    --bs-btn-bg:                 var(--ff-success);
    --bs-btn-border-color:       var(--ff-success);
    --bs-btn-hover-bg:           #26895b;
    --bs-btn-hover-border-color: #26895b;
    --bs-btn-color:              var(--ff-white);
    --bs-btn-hover-color:        var(--ff-white);
}

/* ── FORMS ──────────────────────────────────────────────────────── */

.form-control,
.form-select {
    font-family: var(--ff-font-body);
    font-size: 0.9rem;
    border: 1.5px solid var(--ff-neutral-300);
    border-radius: 8px;
    color: var(--ff-neutral-900);
    background-color: var(--ff-white);
    min-height: 48px;
    padding: 10px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ff-primary);
    box-shadow: 0 0 0 3px var(--ff-primary-subtle);
    outline: none;
    color: var(--ff-neutral-900);
}

.form-control::placeholder {
    color: var(--ff-neutral-500);
}

.form-label {
    font-family: var(--ff-font-body);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ff-neutral-900);
    margin-bottom: 0.4rem;
}

.form-text {
    font-size: 0.78rem;
    color: var(--ff-neutral-500);
}

.form-check-input:checked {
    background-color: var(--ff-primary);
    border-color: var(--ff-primary);
}

.form-check-input:focus {
    border-color: var(--ff-primary);
    box-shadow: 0 0 0 3px var(--ff-primary-subtle);
}

/* ── CARDS ──────────────────────────────────────────────────────── */

.card {
    border: 1px solid var(--ff-neutral-300);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    background: var(--ff-white);
}

.card-header {
    background: var(--ff-neutral-100);
    border-bottom: 1px solid var(--ff-neutral-300);
    font-family: var(--ff-font-display);
    font-weight: 600;
    color: var(--ff-neutral-900);
    padding: 1rem 1.25rem;
    border-radius: 12px 12px 0 0 !important;
}

.card-title {
    font-family: var(--ff-font-display);
    color: var(--ff-neutral-900);
}

.card-body {
    padding: 1.25rem;
}

/* ── TABLES ─────────────────────────────────────────────────────── */

.table {
    font-family: var(--ff-font-body);
    font-size: 0.85rem;
    color: var(--ff-neutral-700);
}

.table thead th {
    background: var(--ff-neutral-100);
    font-family: var(--ff-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ff-neutral-500);
    border-bottom: 2px solid var(--ff-neutral-300);
    vertical-align: middle;
    padding: 0.75rem 1rem;
}

.table tbody td {
    padding: 0.75rem 1rem;
    vertical-align: middle;
    border-color: var(--ff-neutral-100);
}

.table-hover > tbody > tr:hover > * {
    background-color: var(--ff-primary-subtle);
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(242, 245, 247, 0.5);
}

/* DataTables overrides */
table.dataTable thead th {
    background: var(--ff-neutral-100);
    font-family: var(--ff-font-body);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ff-neutral-500);
}

table.dataTable.no-footer {
    border-bottom-color: var(--ff-neutral-300);
}

/* ── BADGES ─────────────────────────────────────────────────────── */

.badge {
    font-family: var(--ff-font-body);
    font-weight: 600;
    font-size: 0.72rem;
    border-radius: 999px;
    padding: 0.35em 0.75em;
    letter-spacing: 0.01em;
}

.bg-success { background-color: var(--ff-success) !important; }
.bg-danger  { background-color: var(--ff-danger) !important; }
.bg-warning { background-color: var(--ff-warning) !important; color: var(--ff-white) !important; }
.bg-info    { background-color: var(--ff-info) !important; }
.bg-primary { background-color: var(--ff-primary) !important; color: var(--ff-white) !important; }

.text-success { color: var(--ff-success) !important; }
.text-danger  { color: var(--ff-danger) !important; }
.text-warning { color: var(--ff-warning) !important; }
.text-info    { color: var(--ff-secondary) !important; }
.text-primary { color: var(--ff-primary) !important; }
.text-muted   { color: var(--ff-neutral-500) !important; }

/* ── PROGRESS BARS ──────────────────────────────────────────────── */

.progress {
    border-radius: 999px;
    background: var(--ff-neutral-100);
    height: 8px;
}

.progress-bar {
    background-color: var(--ff-primary) !important;
    border-radius: 999px;
}

/* ── LINKS ──────────────────────────────────────────────────────── */

a {
    color: var(--ff-secondary);
    transition: color 0.2s ease;
}

a:hover {
    color: var(--ff-primary-hover);
}

/* ── ALERTS ─────────────────────────────────────────────────────── */

.alert {
    border-radius: 8px;
    font-family: var(--ff-font-body);
    font-size: 0.88rem;
    border-width: 1px;
}

.alert-success {
    background: #e8f7ef;
    color: #1a6e3f;
    border-color: #b5dfc7;
}

.alert-danger {
    background: #fdeaea;
    color: #922222;
    border-color: #f5b8b8;
}

.alert-warning {
    background: var(--ff-primary-subtle);
    color: var(--ff-neutral-900);
    border-color: var(--ff-primary-light);
}

.alert-info {
    background: var(--ff-secondary-subtle);
    color: var(--ff-secondary);
    border-color: #b0c9dc;
}

/* ── PAGINATION ─────────────────────────────────────────────────── */

.pagination {
    font-family: var(--ff-font-body);
    font-size: 0.85rem;
    gap: 4px;
}

.page-link {
    color: var(--ff-neutral-700);
    border-color: var(--ff-neutral-300);
    border-radius: 6px !important;
    transition: all 0.15s ease;
}

.page-link:hover {
    background: var(--ff-primary-subtle);
    color: var(--ff-primary-hover);
    border-color: var(--ff-primary);
}

.page-item.active .page-link {
    background: var(--ff-primary);
    border-color: var(--ff-primary);
    color: var(--ff-white);
}

.page-item.disabled .page-link {
    color: var(--ff-neutral-300);
}

/* ── MODALS ─────────────────────────────────────────────────────── */

.modal-header {
    border-bottom-color: var(--ff-neutral-300);
    font-family: var(--ff-font-display);
}

.modal-title {
    font-family: var(--ff-font-display);
    color: var(--ff-neutral-900);
}

.modal-footer {
    border-top-color: var(--ff-neutral-300);
}

.modal-content {
    border-radius: 12px;
    border-color: var(--ff-neutral-300);
}

/* ── ONBOARDING ─────────────────────────────────────────────────── */

.onboarding-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ff-primary);
    margin-left: 5px;
    vertical-align: middle;
    animation: ff-pulse 1.5s ease-in-out infinite;
}

@keyframes ff-pulse {
    0%, 100% { transform: scale(1);   opacity: 1;   }
    50%       { transform: scale(1.4); opacity: 0.6; }
}

.dropdown-item.onboarding-highlight {
    background-color: var(--ff-primary-subtle);
    color: var(--ff-primary-hover);
    font-weight: 600;
    position: relative;
}

.dropdown-item.onboarding-highlight::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    background: var(--ff-primary);
    border-radius: 50%;
    margin-right: 7px;
    animation: ff-pulse 1.5s ease-in-out infinite;
}

/* Onboarding checklist */
.onboarding-step-active {
    background: var(--ff-primary-subtle) !important;
    border-left: 3px solid var(--ff-primary) !important;
}

.onboarding-step-active .form-check-label {
    font-weight: 600;
    color: var(--ff-neutral-900);
}

.onboarding-step-complete .form-check-input {
    background-color: var(--ff-success);
    border-color: var(--ff-success);
}

.onboarding-step-complete .form-check-label {
    text-decoration: line-through;
    color: var(--ff-neutral-500);
}

.onboarding-step-future .form-check-label {
    color: var(--ff-neutral-500);
}

/* ── FOCUS / ACCESSIBILITY ──────────────────────────────────────── */

:focus-visible {
    outline: 3px solid var(--ff-primary);
    outline-offset: 2px;
}

a:focus-visible,
button:focus-visible,
.btn:focus-visible {
    outline: 3px solid var(--ff-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ── LIST GROUPS ────────────────────────────────────────────────── */

.list-group-item {
    font-family: var(--ff-font-body);
    border-color: var(--ff-neutral-300);
    font-size: 0.88rem;
    padding: 0.75rem 1rem;
}

.list-group-item.active {
    background-color: var(--ff-primary);
    border-color: var(--ff-primary);
}

/* ── NAV TABS ───────────────────────────────────────────────────── */

.nav-tabs {
    border-bottom-color: var(--ff-neutral-300);
}

.nav-tabs .nav-link {
    color: var(--ff-neutral-500) !important;
    border: none;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    padding: 0.625rem 1rem;
    font-size: 0.85rem;
}

.nav-tabs .nav-link:hover {
    color: var(--ff-neutral-900) !important;
    border-bottom-color: var(--ff-neutral-300);
}

.nav-tabs .nav-link.active {
    color: var(--ff-primary-hover) !important;
    border-bottom: 2px solid var(--ff-primary);
    background: none;
}

/* ── MOBILE-FIRST ENHANCEMENTS ──────────────────────────────────── */

/* Ensure minimum tap target on mobile */
@media (max-width: 767px) {
    .btn {
        min-height: 48px;
        font-size: 0.9rem;
        padding: 12px 20px;
        width: 100%;
        justify-content: center;
    }

    /* Inline buttons (edit/delete) should not go full width */
    .btn-sm,
    td .btn,
    .btn-inline {
        width: auto;
        min-height: 40px;
        font-size: 0.8rem;
        padding: 8px 14px;
    }

    .form-control,
    .form-select {
        min-height: 48px;
        font-size: 16px; /* Prevents iOS zoom */
    }

    .card-header {
        font-size: 1rem;
        padding: 0.875rem 1rem;
    }

    .card-body {
        padding: 1rem;
    }
}

/* ── REDUCED MOTION ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}