/**
 * MARA - Monin AR Accelerator
 * Custom Monin Brand Theme
 *
 * Color Palette (from Erica's design review, Apr 2026):
 *   Nav Bar BG:       #FFFFFF (light) / #1E1916 (dark)
 *   Content BG:       #FAF8F7 (light) / #1A1614 (dark)
 *   Brand Brown:      #392000 (primary)
 *   Lines/Borders:    #DCCEBD
 *   Highlight:        #DCCEBD at 25%
 *   Gold Accent:      #C1A66B (btn-gold)
 *   Green:            #004940
 *
 * Typography:
 *   Sans:  Figtree (Bunny Fonts CDN)
 *   Mono:  Courier New (bank terminal data)
 *
 * Layout: Horizontal top-nav (single bar)
 */

@charset "UTF-8";
@import url("https://fonts.bunny.net/css?family=figtree:400,500,600");

/* ============================================
   TYPOGRAPHY - Figtree Override
   ============================================ */
:root {
    --tblr-font-sans-serif: 'Figtree', sans-serif;
    --tblr-body-font-family: var(--tblr-font-sans-serif);
}

body {
    font-family: var(--tblr-font-sans-serif);
    font-weight: 400;
    font-size: 14px;
}

h1, .h1 {
    font-weight: 600;
    font-size: 30px;
}

h5, .h5, .card-title {
    font-weight: 600;
    font-size: 16px;
}

.btn {
    font-weight: 500;
    font-size: 14px;
}

/* Bank terminal monospace for financial/ID data */
.font-terminal,
code,
pre,
.document-no-input {
    font-family: 'Courier New', Courier, monospace;
    color: #2E2721;
}

/* ============================================
   LIGHT MODE - Monin Brown Primary
   ============================================ */
:root, [data-bs-theme=light], [data-menu-theme=light] {
    --tblr-primary: #392000;
    --tblr-primary-rgb: 57, 32, 0;

    --tblr-primary-text-emphasis: #2B1800;
    --tblr-primary-bg-subtle: #F5EDE5;
    --tblr-primary-border-subtle: #DCCEBD;

    --tblr-link-color: #392000;
    --tblr-link-color-rgb: 57, 32, 0;
    --tblr-link-hover-color: #5C3D1A;
    --tblr-link-hover-color-rgb: 92, 61, 26;

    --tblr-focus-ring-color: rgba(57, 32, 0, 0.25);

    --tblr-tabler: #392000;
    --tblr-tabler-rgb: 57, 32, 0;

    /* Gray scale - warm tinted */
    --tblr-gray: #5C5249;
    --tblr-gray-dark: #3D352E;
    --tblr-gray-100: #FAF8F7;
    --tblr-gray-200: #F0EDEB;
    --tblr-gray-300: #DDD8D4;
    --tblr-gray-400: #B8AFA8;
    --tblr-gray-500: #8C8178;
    --tblr-gray-600: #5C5249;
    --tblr-gray-700: #4A4239;
    --tblr-gray-800: #3D352E;
    --tblr-gray-900: #2E2721;

    /* Body bg matches nav bar for Safari tab blending */
    --tblr-body-color: #2E2721;
    --tblr-body-color-rgb: 46, 39, 33;
    --tblr-body-bg: #F5F0ED;
    --tblr-body-bg-rgb: 245, 240, 237;

    /* Secondary */
    --tblr-secondary: #6B5D54;
    --tblr-secondary-rgb: 107, 93, 84;
    --tblr-secondary-color: rgba(46, 39, 33, 0.75);
    --tblr-secondary-color-rgb: 46, 39, 33;
    --tblr-secondary-bg: #F0EDEB;
    --tblr-secondary-bg-rgb: 240, 237, 235;

    /* Tertiary */
    --tblr-tertiary-color: rgba(46, 39, 33, 0.5);
    --tblr-tertiary-color-rgb: 46, 39, 33;
    --tblr-tertiary-bg: #FAF8F7;
    --tblr-tertiary-bg-rgb: 250, 248, 247;

    /* Muted */
    --tblr-muted: #8C8178;
    --tblr-muted-rgb: 140, 129, 120;

    /* Light/Dark */
    --tblr-light: #FAF8F7;
    --tblr-light-rgb: 250, 248, 247;
    --tblr-dark: #2E2721;
    --tblr-dark-rgb: 46, 39, 33;

    /* Semantic colors */
    --tblr-success: #004940;
    --tblr-success-rgb: 0, 73, 64;
    --tblr-info: #4A7BAF;
    --tblr-info-rgb: 74, 123, 175;
    --tblr-warning: #C1A66B;
    --tblr-warning-rgb: 193, 166, 107;
    --tblr-danger: #C44D4D;
    --tblr-danger-rgb: 196, 77, 77;

    /* Border colors */
    --tblr-border-color: #DCCEBD;
    --tblr-border-color-translucent: rgba(57, 32, 0, 0.12);

    /* Form states */
    --tblr-form-valid-color: #004940;
    --tblr-form-valid-border-color: #004940;
    --tblr-form-invalid-color: #C44D4D;
    --tblr-form-invalid-border-color: #C44D4D;

    /* Misc */
    --tblr-danger-text: var(--tblr-danger);
    --tblr-navbar-border-color: transparent;
    --bg-switch-checked-color: var(--tblr-primary);
}

/* ============================================
   DARK MODE - Monin Elegant Dark
   ============================================ */
[data-bs-theme=dark], [data-menu-theme=dark] {
    --tblr-primary: #C4A484;
    --tblr-primary-rgb: 196, 164, 132;
    --tblr-tabler: #C4A484;
    --tblr-tabler-rgb: 196, 164, 132;

    /* Body bg matches nav bar for Safari tab blending */
    --tblr-body-color: #D4CCC6;
    --tblr-body-color-rgb: 212, 204, 198;
    --tblr-body-bg: #1E1916;
    --tblr-body-bg-rgb: 30, 25, 22;

    --tblr-emphasis-color: #FBF9F8;
    --tblr-emphasis-color-rgb: 251, 249, 248;

    --tblr-secondary-color: rgba(212, 204, 198, 0.75);
    --tblr-secondary-color-rgb: 212, 204, 198;
    --tblr-secondary-bg: #2E2621;
    --tblr-secondary-bg-rgb: 46, 38, 33;

    --tblr-tertiary-color: rgba(212, 204, 198, 0.5);
    --tblr-tertiary-color-rgb: 212, 204, 198;
    --tblr-tertiary-bg: #252019;
    --tblr-tertiary-bg-rgb: 37, 32, 25;

    --tblr-primary-text-emphasis: #D9C4AA;
    --tblr-secondary-text-emphasis: #D4CCC6;
    --tblr-success-text-emphasis: #66B3A6;
    --tblr-info-text-emphasis: #8BB8DB;
    --tblr-warning-text-emphasis: #DCCB9A;
    --tblr-danger-text-emphasis: #E09393;
    --tblr-light-text-emphasis: #FAF8F7;
    --tblr-dark-text-emphasis: #D4CCC6;

    --tblr-primary-bg-subtle: #2E261F;
    --tblr-secondary-bg-subtle: #252320;
    --tblr-success-bg-subtle: #0D2B24;
    --tblr-info-bg-subtle: #1A242E;
    --tblr-warning-bg-subtle: #2E2614;
    --tblr-danger-bg-subtle: #2E1A1A;
    --tblr-light-bg-subtle: #2E2621;
    --tblr-dark-bg-subtle: #141210;

    --tblr-primary-border-subtle: #5C4A3A;
    --tblr-secondary-border-subtle: #4A4540;
    --tblr-success-border-subtle: #1A4A3E;
    --tblr-info-border-subtle: #2E4A6B;
    --tblr-warning-border-subtle: #8B7F4A;
    --tblr-danger-border-subtle: #6B3333;
    --tblr-light-border-subtle: #3D352E;
    --tblr-dark-border-subtle: #2E2621;

    --tblr-link-color: #D9C4AA;
    --tblr-link-hover-color: #E8D9C4;
    --tblr-link-color-rgb: 217, 196, 170;
    --tblr-link-hover-color-rgb: 232, 217, 196;
    --tblr-code-color: #D9C4AA;

    --tblr-border-color: #3D352E;
    --tblr-border-color-translucent: var(--tblr-border-color);

    --tblr-form-valid-color: #66B3A6;
    --tblr-form-valid-border-color: #66B3A6;
    --tblr-form-invalid-color: #E09393;
    --tblr-form-invalid-border-color: #E09393;

    --tblr-bg-surface: #221E1A;
    --tblr-navbar-bg: var(--tblr-bg-surface);
    --tblr-dark-mode-border-color: #3D352E;
    --tblr-bg-main-color: #1A1614;
    --tblr-bg-forms: var(--tblr-dark-mode-border-color);

    --tblr-danger-text: var(--tblr-danger);
    --tblr-danger: #D66B6B;
    --tblr-danger-rgb: 214, 107, 107;
    --tblr-navbar-color: rgba(255, 255, 255, 0.8);
    --tblr-bg-surface-tertiary: #ffffff02;
    --tblr-navbar-border-color: transparent;
}

/* ============================================
   HORIZONTAL NAV BAR
   ============================================ */

/* Override glass.css rounded corners and margins */
body[bp-layout=horizontal] .single-top-bar #navbar-menu .navbar,
body[bp-layout=horizontal] .single-top-bar .navbar {
    border-radius: 0 !important;
    margin-top: 0 !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}

.single-top-bar {
    border-radius: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Full-width navbar container with bottom border */
body[bp-layout=horizontal] .single-top-bar,
body[bp-layout=horizontal] header.top {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Navbar bottom border - 1px #DCCEBD per Erica's spec */
[data-bs-theme=light] body[bp-layout=horizontal] .navbar,
[data-bs-theme=light] header.top .navbar {
    border-bottom: 1px solid #DCCEBD !important;
}

[data-bs-theme=dark] body[bp-layout=horizontal] .navbar,
[data-bs-theme=dark] header.top .navbar {
    border-bottom: 1px solid #3D352E !important;
}

/* Logo should never show an active/highlight state */
.nav-brand .nav-link,
.nav-brand .nav-link.active,
.nav-brand .nav-link:hover {
    background-color: transparent !important;
}

/* Kill navbar box-shadow for seamless tab blending */
body[bp-layout=horizontal] .navbar {
    box-shadow: none !important;
}

/* Swap page-body margin-top to padding-top so body
   bg doesn't peek through as a visible gap */
body[bp-layout=horizontal] .page-body {
    margin-top: 0 !important;
    padding-top: 1rem;
    padding-bottom: 1.5rem;
}

[data-bs-theme=light] header.top .navbar,
[data-bs-theme=light] .single-top-bar .navbar {
    background-color: #FFFFFF !important;
}

[data-bs-theme=dark] header.top .navbar,
[data-bs-theme=dark] .single-top-bar .navbar {
    background-color: #1E1916 !important;
}

/* Nav link typography */
header.top .nav-link,
.single-top-bar .navbar-nav > .nav-item > .nav-link {
    font-weight: 500;
    font-size: 14px;
}

header.top .nav-link:hover,
.single-top-bar .navbar-nav > .nav-item > .nav-link:hover {
    background-color: rgba(57, 32, 0, 0.08);
    border-radius: 4px;
}

[data-bs-theme=dark] header.top .nav-link:hover,
[data-bs-theme=dark]
.single-top-bar .navbar-nav > .nav-item > .nav-link:hover {
    background-color: rgba(196, 164, 132, 0.1);
}

/* Active nav link */
.single-top-bar .navbar-nav > .nav-item > .nav-link.active,
header.top .nav-link.active {
    background-color: rgba(220, 206, 189, 0.25);
    border-radius: 4px;
    color: #392000;
}

[data-bs-theme=dark]
.single-top-bar .navbar-nav > .nav-item > .nav-link.active,
[data-bs-theme=dark] header.top .nav-link.active {
    background-color: rgba(196, 164, 132, 0.15);
    color: #C4A484;
}

/* Administration dropdown styling */
.navbar-nav .dropdown-menu {
    border-color: var(--tblr-border-color);
}

[data-bs-theme=light] .navbar-nav .dropdown-menu {
    background-color: #FFFFFF;
}

[data-bs-theme=dark] .navbar-nav .dropdown-menu {
    background-color: #221E1A;
}

.navbar-nav .dropdown-item:hover {
    background-color: rgba(57, 32, 0, 0.06);
}

[data-bs-theme=dark] .navbar-nav .dropdown-item:hover {
    background-color: rgba(196, 164, 132, 0.1);
}

/* ============================================
   CONTENT AREA BACKGROUND
   Body bg matches nav for Safari tab blending;
   content area gets the lighter tan.
   ============================================ */
[data-bs-theme=light] .page-body {
    background-color: #FAF8F7;
}

[data-bs-theme=dark] .page-body {
    background-color: #1A1614;
}

/* ============================================
   ICON-TO-TEXT SPACING
   8px in buttons, 4px in body copy
   ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.nav-link {
    display: flex;
    align-items: center;
    gap: 8px;
}

i + span,
i + small,
i + strong {
    margin-left: 4px;
}

.btn i + span,
.btn i + small,
.btn i + strong,
.nav-link i + span {
    margin-left: 0;
}

/* ============================================
   BUTTON ENHANCEMENTS
   ============================================ */
.btn-primary {
    background-color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

.btn-primary:hover {
    background-color: #2B1800;
    border-color: #2B1800;
}

[data-bs-theme=dark] .btn-primary:hover {
    background-color: #D4B494;
    border-color: #D4B494;
}

.btn-outline-primary {
    color: var(--tblr-primary);
    border-color: var(--tblr-primary);
}

.btn-outline-primary:hover {
    background-color: var(--tblr-primary);
    color: #fff;
}

/* Ghost buttons -- colored text, transparent fill,
   faint shadow to hint clickability */
.btn-ghost-primary {
    color: var(--tblr-primary);
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-ghost-primary:hover,
.btn-ghost-primary:focus {
    color: var(--tblr-primary);
    background-color: rgba(57, 32, 0, 0.06);
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

.btn-ghost-info {
    color: var(--tblr-info);
    background-color: transparent;
    border-color: transparent;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.btn-ghost-info:hover,
.btn-ghost-info:focus {
    color: var(--tblr-info);
    background-color: rgba(74, 123, 175, 0.06);
    border-color: transparent;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-bs-theme=dark] .btn-ghost-primary {
    color: var(--tblr-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .btn-ghost-primary:hover {
    background-color: rgba(196, 164, 132, 0.1);
}

[data-bs-theme=dark] .btn-ghost-info {
    color: var(--tblr-info);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-bs-theme=dark] .btn-ghost-info:hover {
    background-color: rgba(74, 123, 175, 0.1);
}

/* Gold accent buttons */
.btn-gold {
    background-color: #C1A66B;
    border-color: #C1A66B;
    color: #fff;
}

.btn-gold:hover,
.btn-gold:focus {
    background-color: #A8904F;
    border-color: #A8904F;
    color: #fff;
}

.btn-gold:active,
.btn-gold.active {
    background-color: #96803E;
    border-color: #96803E;
    color: #fff;
}

.btn-outline-gold {
    color: #C1A66B;
    border-color: #C1A66B;
    background-color: transparent;
}

.btn-outline-gold:hover,
.btn-outline-gold:focus {
    background-color: #C1A66B;
    border-color: #C1A66B;
    color: #fff;
}

/* ============================================
   CARD ENHANCEMENTS
   ============================================ */
[data-bs-theme=light] .card {
    background-color: #FFFFFF;
    border-color: var(--tblr-border-color);
}

[data-bs-theme=dark] .card {
    background-color: #221E1A;
    border-color: var(--tblr-border-color);
}

/* ============================================
   TABLE ALIGNMENT
   Middle-align by default; content stays centered
   when single-line, hangs naturally when multi-line.
   Tighten form inputs so they don't bloat row height.
   ============================================ */
.table td,
.table th {
    vertical-align: middle;
}

.table .form-control-sm {
    padding-top: 0.2rem;
    padding-bottom: 0.2rem;
}

/* Clickable table rows */
.clickable-row {
    cursor: pointer;
}

.clickable-row:hover td {
    background-color: rgba(57, 32, 0, 0.04);
}

/* ============================================
   BADGE CUSTOMIZATION
   ============================================ */
.badge.bg-primary {
    background-color: var(--tblr-primary) !important;
}

.badge.bg-success,
.badge.bg-info,
.badge.bg-danger,
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-dark {
    color: #fff !important;
}

.badge.bg-warning,
.badge.bg-white,
.badge.bg-light {
    color: inherit;
}

.badge.bg-warning {
    color: #2E2721 !important;
}

/* ============================================
   LOGIN PAGE BRANDING
   ============================================ */
.auth-logo {
    color: var(--tblr-primary);
}

.page-center .card .h2,
.page-center .card h2 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================
   LOGO - DARK MODE INVERSION
   ============================================ */
[data-bs-theme=dark] .navbar-brand img,
[data-bs-theme=dark] .nav-brand img,
[data-bs-theme=dark] .navbar-logo {
    filter: brightness(0) invert(1);
}

.navbar-brand img,
.nav-brand img,
.navbar-logo {
    transition: filter 0.2s ease;
}

/* ============================================
   MOBILE NAV (horizontal layout aside)
   ============================================ */
[data-bs-theme=light] [bp-layout=horizontal] aside.navbar {
    background-color: #FFFFFF !important;
}

[data-bs-theme=dark] [bp-layout=horizontal] aside.navbar {
    background-color: #1E1916 !important;
}