/*
 * Flexiqueue brand layer for the dashboard.
 * Leap-based look (Inter UI font, Leap spacing and radius) in a muted teal palette, on top of SB Admin 2.
 * Load after sb-admin-2.min.css.
 */

/* ---------- Font: Inter UI (from Leap) ---------- */
@font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 400; font-display: swap;
    src: url('../fonts/Inter-UI-Regular.woff2') format('woff2'), url('../fonts/Inter-UI-Regular.woff') format('woff'); }
@font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 500; font-display: swap;
    src: url('../fonts/Inter-UI-Medium.woff2') format('woff2'), url('../fonts/Inter-UI-Medium.woff') format('woff'); }
@font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('../fonts/Inter-UI-SemiBold.woff2') format('woff2'), url('../fonts/Inter-UI-SemiBold.woff') format('woff'); }
@font-face { font-family: 'Inter UI'; font-style: normal; font-weight: 700; font-display: swap;
    src: url('../fonts/Inter-UI-Bold.woff2') format('woff2'), url('../fonts/Inter-UI-Bold.woff') format('woff'); }

:root {
    --fq-primary: #22847a;
    --fq-primary-hover: #1b6e65;
    --fq-primary-soft: #e3f3f0;
    --fq-sidebar: #2f3a4a;
    --fq-heading: #2f3a4a;
    --fq-body: #4f5b63;
    --fq-line: #e3e7ea;
    --fq-page: #f5f7f8;
    --fq-radius: .3125rem;
    --fq-radius-lg: .625rem;
    --fq-shadow: 0 .625rem 1.5rem rgba(0, 0, 0, .08);
    --fq-shadow-sm: 0 1px 3px rgba(47, 58, 74, .06);
}

/* ---------- Base ---------- */
body, .tooltip, .popover, .btn, .form-control, .custom-select, .dropdown-menu, .modal {
    font-family: "Inter UI", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
body { color: var(--fq-body); -webkit-font-smoothing: antialiased; }
#content-wrapper, #content { background-color: var(--fq-page) !important; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--fq-heading); font-weight: 600; }
a { color: var(--fq-primary); }
a:hover { color: var(--fq-primary-hover); }

/* ---------- Colour utilities (SB Admin teal/indigo -> Leap blue) ---------- */
.text-primary, .text-info { color: var(--fq-primary) !important; }
.bg-primary, .bg-info { background-color: var(--fq-primary) !important; }
.border-primary, .border-info { border-color: var(--fq-primary) !important; }
.border-left-primary, .border-left-info { border-left-color: var(--fq-primary) !important; }
.bg-gradient-primary, .bg-gradient-info { background: var(--fq-primary) !important; }

/* ---------- Buttons ---------- */
.btn { font-weight: 600; border-radius: var(--fq-radius); }
.btn-sm { border-radius: var(--fq-radius); }
.btn.shadow-sm { box-shadow: none !important; }
.btn-primary, .btn-info {
    background-color: var(--fq-primary); border-color: var(--fq-primary); color: #fff;
}
.btn-primary:hover, .btn-info:hover, .btn-primary:focus, .btn-info:focus,
.btn-primary:not(:disabled):not(.disabled):active, .btn-info:not(:disabled):not(.disabled):active {
    background-color: var(--fq-primary-hover); border-color: var(--fq-primary-hover); color: #fff;
}
.btn-primary:focus, .btn-info:focus, .btn:focus { box-shadow: 0 0 0 .2rem rgba(34, 132, 122, .2) !important; }
.btn-outline-primary, .btn-outline-info { color: var(--fq-primary); border-color: var(--fq-primary); }
.btn-outline-primary:hover, .btn-outline-info:hover { background-color: var(--fq-primary); border-color: var(--fq-primary); color: #fff; }
.btn-warning { color: #fff; }

/* ---------- Cards ---------- */
.card { border: 1px solid var(--fq-line); border-radius: var(--fq-radius-lg); }
.card.shadow { box-shadow: var(--fq-shadow-sm) !important; }
.card-header {
    background-color: #fff; border-bottom: 1px solid var(--fq-line);
    border-radius: var(--fq-radius-lg) var(--fq-radius-lg) 0 0 !important;
}
.card-header h6, .card-header .h6 { font-size: 1rem; color: var(--fq-heading) !important; }

/* ---------- Forms ---------- */
.form-control, .custom-select { border-color: #dee2e6; border-radius: var(--fq-radius); color: var(--fq-body); }
.form-control:focus, .custom-select:focus {
    border-color: #8fd3ca; box-shadow: 0 0 0 .2rem rgba(34, 132, 122, .2);
}
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--fq-primary); border-color: var(--fq-primary);
}
.custom-control-input:focus ~ .custom-control-label::before { box-shadow: 0 0 0 .2rem rgba(34, 132, 122, .2); }
.progress-bar { background-color: var(--fq-primary); }
.spinner-border.text-info { color: var(--fq-primary) !important; }

/* ---------- Badges & alerts ---------- */
.badge { border-radius: var(--fq-radius); font-weight: 600; padding: .45em .6em; }
.badge-primary, .badge-info { background-color: var(--fq-primary); }
.alert { border-radius: var(--fq-radius-lg); border: 0; }
.alert-info { background-color: var(--fq-primary-soft); color: #22847a; }

/* ---------- Sidebar: Leap navy ---------- */
.sidebar.sidebar-dark, .sidebar.bg-gradient { background: var(--fq-sidebar) !important; }
.sidebar-dark .sidebar-brand { color: #fff; }
.sidebar .sidebar-brand-icon img { opacity: 1 !important; }
.sidebar-dark .sidebar-heading { color: rgba(255, 255, 255, .45); letter-spacing: .06em; }
.sidebar-dark hr.sidebar-divider { border-top-color: rgba(255, 255, 255, .08); }
.sidebar-dark .nav-item .nav-link { color: rgba(255, 255, 255, .72); font-weight: 500; }
.sidebar-dark .nav-item .nav-link i { color: rgba(255, 255, 255, .45); }
.sidebar-dark .nav-item .nav-link:hover,
.sidebar-dark .nav-item.active .nav-link { color: #fff; }
.sidebar-dark .nav-item .nav-link:hover i,
.sidebar-dark .nav-item.active .nav-link i { color: #8fd3ca; }
.sidebar-dark #sidebarToggle { background-color: rgba(255, 255, 255, .1); }
.sidebar-dark #sidebarToggle:hover { background-color: rgba(255, 255, 255, .2); }
.sidebar .sidebar-card { background-color: rgba(255, 255, 255, .06); border-radius: var(--fq-radius-lg); }

/* ---------- Top bar ---------- */
.topbar { box-shadow: none !important; border-bottom: 1px solid var(--fq-line); }
.topbar .dropdown-menu { border: 1px solid var(--fq-line); border-radius: var(--fq-radius-lg); box-shadow: var(--fq-shadow) !important; }
.dropdown-item:active { background-color: var(--fq-primary); }
.scroll-to-top { background: var(--fq-sidebar); border-radius: var(--fq-radius-lg) !important; }

/* ---------- Muted status colours ---------- */
.text-danger { color: #b54848 !important; }
.btn-danger { background-color: #b54848; border-color: #b54848; color: #fff; }
.btn-danger:hover, .btn-danger:focus { background-color: #963a3a; border-color: #963a3a; color: #fff; }
.btn-outline-danger { color: #b54848; border-color: #d9b3b3; }
.btn-outline-danger:hover { background-color: #b54848; border-color: #b54848; color: #fff; }
.text-success { color: #3f8f6b !important; }
.btn-success { background-color: #3f8f6b; border-color: #3f8f6b; color: #fff; }
.btn-success:hover, .btn-success:focus { background-color: #33765a; border-color: #33765a; color: #fff; }
.text-warning { color: #a16207 !important; }
.btn-warning { background-color: #a16207; border-color: #a16207; color: #fff; }
.btn-warning:hover { background-color: #854d0e; border-color: #854d0e; color: #fff; }
.alert-danger { background-color: #f8eeee; color: #7f2f2f; }
.alert-warning { background-color: #f8f4ea; color: #6b4a0a; }
.alert-success { background-color: #edf5f0; color: #2c5e47; }

/* ---------- Dual-tone icons (Phosphor) ---------- */
.ph-duotone { line-height: 1; vertical-align: -0.15em; font-size: 1.15em; }
.btn .ph-duotone { font-size: 1.2em; }
.fq-section-icon .ph-duotone, .fq-modal-icon .ph-duotone { font-size: 1.35rem; vertical-align: 0; }
.fq-hero-icon .ph-duotone { font-size: 1.9rem; vertical-align: 0; }
.fq-gate-icon .ph-duotone { font-size: 2rem; vertical-align: 0; }
.fq-empty-icon .ph-duotone { font-size: 2.75rem; }
.fq-notice > .ph-duotone { font-size: 1.5rem; vertical-align: 0; }
.sidebar .nav-item .nav-link .ph-duotone { font-size: 1.25rem; }
.sidebar.toggled .nav-item .nav-link .ph-duotone { font-size: 1.5rem; display: block; margin: 0 auto .25rem; }

/* ---------- Top bar controls ---------- */
#sidebarToggleTop, .topbar .nav-item .nav-link .fa-search, .topbar .nav-item .nav-link .ph-magnifying-glass { color: var(--fq-primary) !important; }