/* ============================================
   KOI ADMIN PORTAL - ENTERPRISE PREMIUM THEME
   World-Class SaaS Dashboard | Glassmorphism | Micro-Interactions
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,300;1,400;1,500;1,600;1,700&display=swap');

:root {
    /* KOI Brand Palette — Burgundy & Gold (from KOI logo) */
    --v-primary: #5A2A2C;
    --v-primary-rgb: 90, 42, 44;
    --v-primary-dark: #3A1A1C;
    --v-primary-light: #7A3A3E;
    --v-primary-ultra-light: #A86468;

    --v-accent: #C0963B;
    --v-accent-rgb: 192, 150, 59;
    --v-accent-dark: #9C7A2E;
    --v-accent-light: #E6D3A8;

    --v-bg-body: #FBF7F1;
    --v-bg-card: #FFFFFF;
    --v-bg-premium: #FDFAF5;

    --v-text-main: #2A1A1B;
    --v-text-muted: #6B5456;
    --v-text-light: #9A8486;
    --v-border: #E0CFBD;
    --v-border-premium: #EDE2D5;

    /* PREMIUM Shadows with Depth & Layering */
    --v-shadow-xs: 0 2px 4px rgba(90, 42, 44, 0.04);
    --v-shadow-sm: 0 4px 16px rgba(90, 42, 44, 0.08), 0 1px 3px rgba(90, 42, 44, 0.04);
    --v-shadow-md: 0 12px 32px rgba(90, 42, 44, 0.12), 0 4px 8px rgba(90, 42, 44, 0.05);
    --v-shadow-lg: 0 24px 52px rgba(90, 42, 44, 0.16), 0 8px 16px rgba(90, 42, 44, 0.06);
    --v-shadow-xl: 0 32px 72px rgba(90, 42, 44, 0.2), 0 12px 24px rgba(90, 42, 44, 0.08);
    --v-shadow-glass: 0 8px 32px rgba(42, 26, 27, 0.15), inset 0 1px 0 rgba(255,255,255,0.6);
    --v-glow: 0 0 24px rgba(192, 150, 59, 0.15);
    --v-glow-accent: 0 0 32px rgba(192, 150, 59, 0.25);
    --v-transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
    --v-transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    --v-transition-slow: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-ui: 'Poppins', 'Outfit', system-ui, -apple-system, sans-serif;
}

/* ===== GLOBAL STYLES ===== */
body {
    background: linear-gradient(135deg, var(--v-bg-body) 0%, #F6EEE3 50%, var(--v-bg-body) 100%) !important;
    font-family: var(--font-ui) !important;
    color: var(--v-text-main) !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    letter-spacing: 0.3px;
}

h1, h2, h3, h4, h5, h6, .card-title, .brand-title {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    color: var(--v-text-main) !important;
    letter-spacing: -0.02em !important;
}

/* ===== PREMIUM TOP BAR HEADER ===== */
.app-topbar, .header {
    background: linear-gradient(135deg, var(--v-primary) 0%, #5A2A2C 25%, var(--v-primary-light) 50%, #7A3A3E 100%) !important;
    border-bottom: 2px solid var(--v-accent) !important;
    box-shadow: var(--v-shadow-lg), inset 0 1px 0 rgba(255,255,255,0.15) !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    /* The base theme makes this sticky (position:sticky; top:0) so it stays put while the
       page scrolls. Keep that instead of falling back to static/relative, which would let
       the header scroll away with the content. */
    position: sticky !important;
    top: 0 !important;
    z-index: 1005;
    /* Must stay visible (not hidden) so topbar dropdowns (notifications, user menu)
       aren't clipped by this 80px-tall header — they render as DOM descendants of it. */
    overflow: visible;
}

/* The KOI logo now lives in the header's left corner (above the sidebar) instead of the
   sidebar, so drop the base theme's sidebar-width left padding on the header. */
.app-topbar {
    padding-left: 0 !important;
}

.app-topbar > .container-fluid {
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-logo {
    /* Light ivory so the KOI logo (gold wordmark + burgundy tagline, transparent PNG) stays legible */
    flex: 0 0 auto;
    width: var(--minimia-sidebar-width);
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 20px;
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F1 100%);
    border-right: 2px solid var(--v-border-premium);
    position: relative;
    z-index: 2;
}

.topbar-logo img {
    height: 64px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
}

/* Minimia hides the sidebar at <=1140px and opens it via .button-toggle-menu */
.app-topbar .topbar-menu-toggle {
    display: none !important;
    line-height: 1;
}

@media (max-width: 1140px) {
    .topbar-logo {
        width: auto;
        padding: 8px 12px;
    }

    .topbar-logo img {
        height: 52px;
    }

    .app-topbar .topbar-menu-toggle {
        display: inline-flex !important;
        align-items: center;
    }
}

.app-topbar::before, .header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100%;
    background: radial-gradient(ellipse at top right, rgba(192, 150, 59, 0.12), transparent 40%);
    pointer-events: none;
}

.header-content {
    background: transparent !important;
    padding-left: 30px !important;
    padding-right: 30px !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    position: relative;
    z-index: 2;
}

.nav-control {
    background: transparent !important;
    float: left !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding-left: 20px !important;
}

.hamburger, .button-toggle-menu {
    cursor: pointer !important;
    padding: 12px 14px !important;
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 12px !important;
    display: inline-block !important;
    transition: var(--v-transition) !important;
    backdrop-filter: blur(8px);
}

.hamburger:hover, .button-toggle-menu:hover {
    background: rgba(255,255,255,0.24) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}

.hamburger span, .button-toggle-menu span {
    background-color: #FFFFFF !important;
    height: 2.5px !important;
    border-radius: 3px !important;
}

.topbar-button {
    border: 1px solid rgba(255,255,255,0.22) !important;
    background: rgba(255,255,255,0.14) !important;
    border-radius: 14px !important;
    padding: 8px 11px !important;
    transition: var(--v-transition) !important;
    backdrop-filter: blur(8px) !important;
}

.topbar-button:hover {
    background: rgba(255,255,255,0.25) !important;
    transform: translateY(-2px);
}

.topbar-button, .topbar-button * {
    color: #FFFFFF !important;
}

/* ===== PREMIUM SIDEBAR LOGO ===== */
.app-sidebar, .nk-sidebar {
    background: linear-gradient(180deg, #FDFAF5 0%, #F8F2EA 100%) !important;
    border-right: 2px solid var(--v-border-premium) !important;
    box-shadow: 6px 0 28px rgba(90, 42, 44, 0.08) !important;
    top: 80px !important;
    padding-top: 20px !important;
}

.logo-box, .nav-header {
    /* Light ivory so the KOI logo (gold wordmark + burgundy tagline, transparent PNG) stays legible */
    background: linear-gradient(180deg, #FFFFFF 0%, #FBF7F1 100%) !important;
    border-bottom: 2px solid var(--v-accent) !important;
    border-right: 2px solid var(--v-border-premium) !important;
    height: 80px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 8px 0 32px rgba(90, 42, 44, 0.08) !important;
    padding: 8px 20px !important;
}

.logo-box img {
    max-height: 64px !important;
    height: 64px !important;
    width: auto !important;
}

.logo-dark, .logo-light, .logo-sm, .brand-logo, .brand-title {
    font-family: var(--font-heading) !important;
    font-weight: 900 !important;
    letter-spacing: 0.03em !important;
}

.logo-dark::after, .logo-light::after, .logo-sm::after {
    display: inline-block !important;
    background: linear-gradient(135deg, var(--v-accent) 0%, #E6D3A8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 32px !important;
    filter: drop-shadow(0 2px 4px rgba(192, 150, 59, 0.3));
}

.brand-title::after {
    content: 'KOI' !important;
    display: inline-block !important;
    background: linear-gradient(135deg, var(--v-accent) 0%, #E6D3A8 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    font-size: 22px !important;
    letter-spacing: 3px !important;
    filter: drop-shadow(0 2px 4px rgba(192, 150, 59, 0.2));
}

/* ===== PREMIUM SIDEBAR MENU =====
   Real markup (Areas/Admin/Shared/_Layout.cshtml) uses .app-sidebar > .navbar-nav >
   .nav-item > .nav-link > .nav-icon/.nav-text, plus .menu-title for section labels —
   NOT the .nk-sidebar/.metismenu/.nav-label classes this section used to target. */
.app-sidebar .navbar-nav {
    background: transparent !important;
    padding: 12px 16px !important;
}

.app-sidebar .nav-item {
    margin-bottom: 6px !important;
}

.app-sidebar .nav-link {
    color: var(--v-text-muted) !important;
    font-family: var(--font-ui) !important;
    font-weight: 600 !important;
    font-size: 14.5px !important;
    padding: 13px 18px !important;
    border-left: none !important;
    display: flex !important;
    align-items: center !important;
    transition: var(--v-transition) !important;
    position: relative;
    border-radius: 12px !important;
}

.app-sidebar .nav-icon {
    color: var(--v-text-light) !important;
    margin-right: 12px !important;
    font-size: 19px !important;
    opacity: 0.75;
    transition: var(--v-transition) !important;
    width: 22px;
    text-align: center;
}

.app-sidebar .nav-item:hover > .nav-link {
    background: linear-gradient(90deg, rgba(192, 150, 59, 0.1), rgba(90, 42, 44, 0.06)) !important;
    color: var(--v-primary) !important;
    text-decoration: none !important;
    transform: translateX(3px);
}

.app-sidebar .nav-item:hover > .nav-link .nav-icon {
    color: var(--v-accent) !important;
    opacity: 1 !important;
}

.app-sidebar .nav-item.active > .nav-link,
.app-sidebar .nav-link.active {
    background: linear-gradient(90deg, rgba(192, 150, 59, 0.18), rgba(90, 42, 44, 0.12)) !important;
    color: var(--v-primary-dark) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
    border-radius: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(192, 150, 59, 0.15) !important;
}

.app-sidebar .nav-item.active > .nav-link::before,
.app-sidebar .nav-link.active::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 20% !important;
    height: 60% !important;
    width: 5px !important;
    background: linear-gradient(180deg, var(--v-accent) 0%, var(--v-accent-dark) 100%) !important;
    border-radius: 0 3px 3px 0 !important;
    box-shadow: 2px 2px 8px rgba(192, 150, 59, 0.3) !important;
}

.app-sidebar .menu-title {
    color: var(--v-accent) !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    padding: 20px 18px 10px !important;
    font-weight: 900 !important;
    opacity: 0.85;
    text-shadow: 0 1px 2px rgba(192, 150, 59, 0.1);
    display: block;
}

/* ===== PREMIUM CARDS - GLASSMORPHISM & 3D DEPTH ===== */
.card {
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.75) 100%) !important;
    backdrop-filter: blur(20px) !important;
    border: 1.5px solid rgba(255,255,255,0.8) !important;
    border-radius: 20px !important;
    box-shadow: 
        var(--v-shadow-lg),
        inset 0 1px 0 rgba(255,255,255,0.8) !important;
    margin-bottom: 28px !important;
    overflow: hidden !important;
    transition: var(--v-transition) !important;
    position: relative;
}

.card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 150, 59, 0.5), transparent);
}

.card::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse at top right, rgba(192, 150, 59, 0.08), transparent 60%);
    pointer-events: none;
    border-radius: 20px;
}

.card:hover {
    transform: translateY(-12px);
    box-shadow: 
        var(--v-shadow-xl),
        inset 0 1px 0 rgba(255,255,255,0.9),
        0 0 32px rgba(192, 150, 59, 0.15) !important;
    border-color: rgba(192, 150, 59, 0.3) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(255,255,255,0.85) 100%) !important;
}

.card span i {
    transition: var(--v-transition) !important;
}

.card:hover span i {
    transform: scale(1.15) rotate(6deg) !important;
    opacity: 0.5 !important;
    filter: drop-shadow(0 4px 12px rgba(192, 150, 59, 0.3));
}

.card-body {
    padding: 2.2rem !important;
    position: relative;
    z-index: 1;
}

.card-header {
    background: linear-gradient(90deg, rgba(90, 42, 44, 0.04), rgba(192, 150, 59, 0.06)) !important;
    border-bottom: 1.5px solid rgba(192, 150, 59, 0.15) !important;
    padding: 1.8rem 2.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    position: relative;
    z-index: 1;
}

.card-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(192, 150, 59, 0.4), transparent);
}

.card-header h4, .card-header h5 {
    margin: 0 !important;
    font-size: 20px !important;
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    color: var(--v-primary-dark) !important;
    letter-spacing: 0.4px;
}

/* ===== PREMIUM BUTTONS - GRADIENT BORDERS & RIPPLES ===== */
.btn {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    border-radius: 12px !important;
    padding: 0.75rem 1.8rem !important;
    transition: var(--v-transition-fast) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08) !important;
    letter-spacing: 0.4px !important;
    position: relative;
    overflow: hidden;
    border: 0 !important;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255,255,255,0.3);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 0;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn span, .btn i {
    position: relative;
    z-index: 1;
}

.btn:hover {
    transform: translateY(-3px);
}

/* Primary Button */
.btn-primary {
    background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-primary-light) 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(90, 42, 44, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, var(--v-primary-dark) 0%, var(--v-primary) 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.4) !important;
    color: #ffffff !important;
    box-shadow: 
        0 12px 28px rgba(90, 42, 44, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-4px);
}

/* Success Button */
.btn-success {
    background: linear-gradient(135deg, #5E7D4A 0%, #7A9A62 100%) !important;
    border: 1px solid rgba(94, 125, 74, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(94, 125, 74, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.btn-success:hover, .btn-success:focus {
    background: linear-gradient(135deg, #4F6A3E 0%, #5E7D4A 100%) !important;
    border: 1px solid rgba(94, 125, 74, 0.4) !important;
    box-shadow: 
        0 12px 28px rgba(94, 125, 74, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-4px);
}

/* Danger Button */
.btn-danger {
    background: linear-gradient(135deg, #B23A3A 0%, #C85454 100%) !important;
    border: 1px solid rgba(178, 58, 58, 0.2) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 12px rgba(178, 58, 58, 0.12),
        inset 0 1px 0 rgba(255,255,255,0.15) !important;
}

.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(135deg, #992F2F 0%, #B23A3A 100%) !important;
    border: 1px solid rgba(178, 58, 58, 0.4) !important;
    box-shadow: 
        0 12px 28px rgba(178, 58, 58, 0.3),
        inset 0 1px 0 rgba(255,255,255,0.2) !important;
    transform: translateY(-4px);
}

/* Info Button */
.btn-info {
    background: linear-gradient(135deg, var(--v-accent) 0%, #E6D3A8 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.25) !important;
    color: #5A2A2C !important;
    font-weight: 800 !important;
    box-shadow: 
        0 4px 12px rgba(192, 150, 59, 0.15),
        inset 0 1px 0 rgba(255,255,255,0.4) !important;
}

.btn-info:hover, .btn-info:focus {
    background: linear-gradient(135deg, var(--v-accent-dark) 0%, var(--v-accent) 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.45) !important;
    color: #5A2A2C !important;
    box-shadow: 
        0 12px 28px rgba(192, 150, 59, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.5) !important;
    transform: translateY(-4px);
}

/* Small Button */
.btn-sm {
    padding: 0.45rem 1rem !important;
    font-size: 0.8rem !important;
    border-radius: 8px !important;
}

/* Disabled State */
.btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ===== PREMIUM FORM CONTROLS - GLASSMORPHISM ===== */
.form-control, select, textarea {
    font-family: var(--font-ui) !important;
    border: 1.5px solid var(--v-border) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.7) 0%, rgba(255,255,255,0.85) 100%) !important;
    backdrop-filter: blur(12px) !important;
    border-radius: 14px !important;
    padding: 0.85rem 1.3rem !important;
    transition: var(--v-transition-fast) !important;
    color: var(--v-text-main) !important;
    font-size: 14.5px !important;
    line-height: 1.6;
    position: relative;
}

.form-control::placeholder, select::placeholder, textarea::placeholder {
    color: rgba(90, 42, 44, 0.35) !important;
}

.form-control:hover, select:hover, textarea:hover {
    border-color: rgba(192, 150, 59, 0.45) !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.95) 100%) !important;
    box-shadow: inset 0 1px 2px rgba(192, 150, 59, 0.1) !important;
}

.form-control:focus, select:focus, textarea:focus {
    border: 1.5px solid var(--v-accent) !important;
    box-shadow: 
        0 0 0 5px rgba(192, 150, 59, 0.15),
        inset 0 1px 3px rgba(192, 150, 59, 0.1),
        var(--v-shadow-sm) !important;
    outline: none !important;
    background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, #FFFFFF 100%) !important;
}

/* Label styling */
label {
    font-family: var(--font-ui) !important;
    font-weight: 700 !important;
    color: var(--v-primary-dark) !important;
    font-size: 13.5px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.6px !important;
    margin-bottom: 8px !important;
    display: block !important;
    transition: var(--v-transition-fast) !important;
}

label .required, label .asteriskField {
    color: #B23A3A !important;
    margin-left: 3px;
}

/* Form groups */
.form-group {
    margin-bottom: 1.4rem !important;
    animation: fadeInUp 0.5s ease-out;
}

/* ===== PREMIUM TABLES ===== */
table.table {
    border-collapse: separate !important;
    border-spacing: 0 !important;
    width: 100% !important;
    margin-top: 15px !important;
    border: 1.5px solid var(--v-border) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(90, 42, 44, 0.08) !important;
}

table.table thead th {
    background: linear-gradient(90deg, var(--v-primary) 0%, var(--v-primary-light) 100%) !important;
    color: #FFFFFF !important;
    font-family: var(--font-ui) !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    font-size: 12px !important;
    letter-spacing: 1.2px !important;
    border-bottom: 2px solid rgba(192, 150, 59, 0.2) !important;
    padding: 18px 22px !important;
}

table.table tbody td {
    padding: 16px 22px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(90, 42, 44, 0.05) !important;
    color: var(--v-text-main) !important;
    font-size: 14.5px !important;
    font-weight: 500;
}

table.table tbody tr:last-child td {
    border-bottom: none !important;
}

table.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(192, 150, 59, 0.025) !important;
}

table.table tbody tr:hover {
    background-color: rgba(192, 150, 59, 0.05) !important;
}

/* ===== PREMIUM GRADIENTS - DASHBOARD CARDS ===== */
.gradient-1 {
    background: linear-gradient(135deg, var(--v-primary) 0%, var(--v-primary-light) 50%, #7A3A3E 100%) !important;
    border: none !important;
    box-shadow: 0 12px 32px rgba(90, 42, 44, 0.25) !important;
}

.gradient-2 {
    background: linear-gradient(135deg, var(--v-accent) 0%, #E6D3A8 50%, #C0963B 100%) !important;
    border: none !important;
    box-shadow: 0 12px 32px rgba(192, 150, 59, 0.25) !important;
}

.gradient-3 {
    background: linear-gradient(135deg, #3A1A1C 0%, #7A3A3E 50%, var(--v-primary-light) 100%) !important;
    border: none !important;
    box-shadow: 0 12px 32px rgba(90, 42, 44, 0.25) !important;
}

.gradient-1 h3, .gradient-1 h2, .gradient-1 span,
.gradient-3 h3, .gradient-3 h2, .gradient-3 span {
    color: #ffffff !important;
}

.gradient-2 h3, .gradient-2 h2, .gradient-2 span {
    color: #5A2A2C !important;
}

.gradient-1 .card-title, .gradient-2 .card-title, .gradient-3 .card-title {
    font-family: var(--font-heading) !important;
    font-weight: 800 !important;
    font-size: 22px !important;
    opacity: 0.98 !important;
}

.gradient-1 h2, .gradient-2 h2, .gradient-3 h2 {
    font-family: var(--font-ui) !important;
    font-weight: 800 !important;
    font-size: 36px !important;
    letter-spacing: -0.5px;
}

/* ===== PREMIUM SCROLLBARS ===== */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--v-accent) 0%, var(--v-primary) 100%) !important;
    border-radius: 999px;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--v-accent-dark) 0%, var(--v-primary-light) 100%) !important;
}

/* ===== MISC PREMIUM STYLES ===== */
.badge {
    padding: 6px 12px !important;
    font-weight: 700 !important;
    border-radius: 8px !important;
    font-family: var(--font-ui) !important;
    font-size: 12px !important;
    letter-spacing: 0.3px !important;
    display: inline-flex !important;
    align-items: center !important;
}

.page-content {
    padding: 28px !important;
}

#main-wrapper {
    background-color: transparent !important;
}

/* Preloader */
#preloader {
    background: var(--v-bg-body) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.5s ease;
}

.loader {
    position: relative;
    width: 60px;
    height: 60px;
}

.circular {
    animation: rotate 2s linear infinite;
    height: 100%;
    transform-origin: center center;
    width: 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

.circular .path {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
    animation: dash 1.5s ease-in-out infinite;
    stroke-linecap: round;
    stroke: var(--v-primary) !important;
    stroke-width: 4px !important;
}

@keyframes rotate {
    100% { transform: rotate(360deg); }
}

@keyframes dash {
    0% {
        stroke-dasharray: 1, 200;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -35px;
    }
    100% {
        stroke-dasharray: 89, 200;
        stroke-dashoffset: -124px;
    }
}

/* PREMIUM ANIMATIONS & ADVANCED VISUAL EFFECTS */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(24px) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    from { opacity: 0; transform: translateX(40px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    from { opacity: 0; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes glowPulse {
    0%, 100% { 
        box-shadow: 
            0 0 20px rgba(192, 150, 59, 0.4),
            0 0 40px rgba(192, 150, 59, 0.2);
    }
    50% { 
        box-shadow: 
            0 0 30px rgba(192, 150, 59, 0.6),
            0 0 60px rgba(192, 150, 59, 0.4),
            0 0 80px rgba(192, 150, 59, 0.2);
    }
}

@keyframes shine {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes rotateSlightly {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(192, 150, 59, 0.7); }
    50% { box-shadow: 0 0 0 12px rgba(192, 150, 59, 0); }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes subtleGlow {
    0%, 100% { 
        border-color: rgba(192, 150, 59, 0.2);
        box-shadow: 0 0 0 0 rgba(192, 150, 59, 0);
    }
    50% { 
        border-color: rgba(192, 150, 59, 0.4);
        box-shadow: 0 0 16px rgba(192, 150, 59, 0.2);
    }
}

/* Card animations */
.card { 
    animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.card:nth-child(2) { animation-delay: 0.12s; }
.card:nth-child(3) { animation-delay: 0.24s; }
.card:nth-child(4) { animation-delay: 0.36s; }

/* Button animations */
.btn {
    position: relative;
    overflow: hidden;
    animation: fadeInUp 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.btn-primary:hover, .btn-success:hover { 
    animation: glowPulse 0.6s ease-in-out;
}

/* Menu animations */
.app-sidebar .nav-link {
    animation: slideInLeft 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: relative;
}

.app-sidebar .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    width: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--v-accent), transparent);
    transition: width var(--v-transition-fast);
    border-radius: 2px;
}

.app-sidebar .nav-item:hover > .nav-link::after {
    width: calc(100% - 36px);
}

/* Badge animations */
.badge { 
    animation: scaleIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    transition: var(--v-transition-fast) !important;
}

.badge:hover {
    transform: scale(1.08);
}

/* Alert animations */
.alert {
    animation: slideInRight 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-icon, .card span i {
    animation: fadeIn 0.5s ease-out;
    transition: transform 0.3s ease;
}

.app-sidebar .nav-item:hover > .nav-link .nav-icon {
    animation: float 0.6s ease-in-out;
}

table.table tbody tr {
    animation: fadeIn 0.4s ease-out;
    transition: all 0.3s ease;
}

table.table tbody tr:hover {
    animation: none;
    transform: scale(1.01);
}

.badge { animation: scaleIn 0.4s ease-out; }
.form-control:focus, select:focus, textarea:focus { animation: scaleIn 0.3s ease-out; }
.dropdown-menu { animation: slideInRight 0.3s ease-out; }
.modal { animation: fadeIn 0.3s ease-out; }
.modal-content { animation: scaleIn 0.3s ease-out; }
.alert-success { animation: slideInRight 0.4s ease-out; }
.app-topbar { animation: slideInLeft 0.5s ease-out; }

.topbar-button {
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.topbar-button:hover { animation: bounce 0.6s ease-in-out; }

.logo-dark::after, .logo-light::after, .brand-title::after {
    animation: fadeIn 0.6s ease-out;
    transition: all 0.3s ease;
}

.logo-box:hover .logo-dark::after,
.logo-box:hover .logo-light::after,
.logo-box:hover .brand-title::after {
    filter: drop-shadow(0 4px 8px rgba(192, 150, 59, 0.5));
}

.gradient-1, .gradient-2, .gradient-3 {
    animation: fadeInUp 0.6s ease-out;
    position: relative;
    overflow: hidden;
}

.gradient-1::before, .gradient-2::before, .gradient-3::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);
    animation: rotateSlightly 20s linear infinite;
}

.page-content { animation: fadeInUp 0.6s ease-out; }
.card:hover, .btn:hover { filter: brightness(1.05); }

* { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }

.app-sidebar .nav-item.active, .app-sidebar .nav-link.active { animation: glowPulse 0.8s ease-in-out; }
.nav-icon, .card i { transition: all 0.3s ease; }
.btn span, .btn i { transition: all 0.3s ease; }
.btn:hover span, .btn:hover i { letter-spacing: 0.5px; }
.btn-primary, .btn-success, .btn-info, .btn-danger { transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); }
.form-control[type="search"] { transition: all 0.3s ease; }
.form-control[type="search"]:focus { animation: pulse 0.6s ease; }

a { transition: all 0.25s ease; }
a:hover { color: var(--v-accent) !important; }

.app-sidebar .nav-item:nth-child(1) .nav-link { animation-delay: 0s; }
.app-sidebar .nav-item:nth-child(2) .nav-link { animation-delay: 0.1s; }
.app-sidebar .nav-item:nth-child(3) .nav-link { animation-delay: 0.2s; }
.app-sidebar .nav-item:nth-child(4) .nav-link { animation-delay: 0.3s; }
.app-sidebar .nav-item:nth-child(5) .nav-link { animation-delay: 0.4s; }

html { scroll-behavior: smooth; }
.loading { animation: shimmer 2s infinite; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); background-size: 1000px 100%; }
.card:hover { backdrop-filter: blur(10px); }
.badge { transition: all 0.3s ease; }
.badge:hover { transform: scale(1.1); box-shadow: 0 4px 12px rgba(192, 150, 59, 0.3); }

/* ===== SUMMERNOTE POPOVER FIX =====
   Summernote 0.8 expects Bootstrap 3's .popover (display:none by default,
   position:absolute, shown via inline styles it sets itself). This theme's
   own .popover isn't defined with those defaults, so the link/image popovers
   render as plain, visible, in-flow blocks stacked at the bottom of <body>
   for every summernote field on the page. Restore the defaults Summernote
   relies on; it still toggles display/left/top inline when showing one. */
.note-popover.popover {
    display: none;
    position: absolute;
    z-index: 1060;
}

/* ===== INPUT GROUP BORDER MERGE (form-control + btn) =====
   The theme's own .input-group rules only flatten corners for
   .form-floating/.form-select children (e.g. select2-style pickers) — a plain
   .form-control next to a .btn, like a password show/hide toggle, keeps its
   own full border-radius on both sides, so it renders as two disconnected
   rounded boxes instead of one merged control. */
.input-group > .form-control:not(:last-child) {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.input-group > .btn:not(:first-child) {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    margin-left: -1px;
}
/* form-control:focus plays a scale(0.92 -> 1) grow-in animation; on a lone
   input that's fine, but a merged input-group control (e.g. the password
   toggle) visibly tears open from its addon button for the ~0.3s the input
   is scaled down and the button isn't. Keep the focus border/glow, drop the
   animation only inside input-groups. */
.input-group > .form-control:focus {
    animation: none !important;
    /* The default focus style also adds a 5px outward glow ring; on a lone
       input that reads as a halo, but here it spreads past the input's
       (now flattened) right edge into the gap before the addon button,
       whose transparent background lets it bleed through as a visible seam.
       Keep the border highlight and the inner/card shadows, drop the ring. */
    box-shadow:
        inset 0 1px 3px rgba(192, 150, 59, 0.1),
        var(--v-shadow-sm) !important;
}

/* ============================================================
   KOI BRAND - BASE TEMPLATE PALETTE OVERRIDE
   The Minimia base (style.min.css) ships a purple/orange/sky-blue
   palette via --minimia-* variables; every bg-*, text-*, badge,
   alert, link, focus ring, topbar and sidebar color on every page
   derives from these. Re-map them to the KOI logo palette
   (burgundy #5A2A2C + gold #C0963B on warm ivory) so all pages
   follow the brand. Status colors (success / warning / danger)
   keep their meaning but are toned to sit with the palette.
   --bs-* mirrors the same values for the public Bootstrap layout.
   ============================================================ */
:root, [data-bs-theme=light] {
    --minimia-primary: #5A2A2C;      --minimia-primary-rgb: 90, 42, 44;
    --minimia-secondary: #8C7A6B;    --minimia-secondary-rgb: 140, 122, 107;
    --minimia-success: #5E7D4A;      --minimia-success-rgb: 94, 125, 74;
    --minimia-info: #C0963B;         --minimia-info-rgb: 192, 150, 59;
    --minimia-warning: #D4A23A;      --minimia-warning-rgb: 212, 162, 58;
    --minimia-danger: #B23A3A;       --minimia-danger-rgb: 178, 58, 58;
    --minimia-light: #F6EFE6;        --minimia-light-rgb: 246, 239, 230;
    --minimia-dark: #2A1A1B;         --minimia-dark-rgb: 42, 26, 27;
    --minimia-red: #B23A3A;          --minimia-red-rgb: 178, 58, 58;
    --minimia-green: #5E7D4A;        --minimia-green-rgb: 94, 125, 74;
    --minimia-yellow: #D4A23A;       --minimia-yellow-rgb: 212, 162, 58;
    --minimia-cyan: #C0963B;         --minimia-cyan-rgb: 192, 150, 59;

    --minimia-primary-text-emphasis: #3A1A1C;
    --minimia-secondary-text-emphasis: #4A3F37;
    --minimia-success-text-emphasis: #33452A;
    --minimia-info-text-emphasis: #5E4718;
    --minimia-warning-text-emphasis: #6B4F14;
    --minimia-danger-text-emphasis: #5E1C1C;
    --minimia-light-text-emphasis: #5E4E4A;
    --minimia-dark-text-emphasis: #5E4E4A;

    --minimia-primary-bg-subtle: #F1E4E2;
    --minimia-secondary-bg-subtle: #F3EEE8;
    --minimia-success-bg-subtle: #E8EFE2;
    --minimia-info-bg-subtle: #F6EEDC;
    --minimia-warning-bg-subtle: #FBF1DC;
    --minimia-danger-bg-subtle: #F6E0DE;
    --minimia-light-bg-subtle: #FDFAF5;
    --minimia-dark-bg-subtle: #C9B9A8;

    --minimia-primary-border-subtle: #DCC2C0;
    --minimia-secondary-border-subtle: #E3D9CE;
    --minimia-success-border-subtle: #CBD9C0;
    --minimia-info-border-subtle: #E6D3A8;
    --minimia-warning-border-subtle: #F0D9A6;
    --minimia-danger-border-subtle: #E9B9B6;
    --minimia-light-border-subtle: #EDE2D5;
    --minimia-dark-border-subtle: #A8968A;

    --minimia-gray: #85726A;
    --minimia-gray-dark: #45373A;
    --minimia-gray-100: #FAF6F0;
    --minimia-gray-200: #F3ECE2;
    --minimia-gray-300: #E6DACB;
    --minimia-gray-400: #C9B9A8;
    --minimia-gray-500: #A8968A;
    --minimia-gray-600: #85726A;
    --minimia-gray-700: #5E4E4A;
    --minimia-gray-800: #45373A;
    --minimia-gray-900: #2A1A1B;

    --minimia-body-color: #4A3638;           --minimia-body-color-rgb: 74, 54, 56;
    --minimia-body-bg: #FBF7F1;              --minimia-body-bg-rgb: 251, 247, 241;
    --minimia-emphasis-color: rgba(74, 54, 56, 0.75);
    --minimia-emphasis-color-rgb: 74, 54, 56;
    --minimia-secondary-color: #7A6466;      --minimia-secondary-color-rgb: 122, 100, 102;
    --minimia-secondary-bg: #FFFFFF;
    --minimia-tertiary-color: #5E4E4A;       --minimia-tertiary-color-rgb: 94, 78, 74;
    --minimia-tertiary-bg: #F8F2EA;          --minimia-tertiary-bg-rgb: 248, 242, 234;
    --minimia-link-color: #5A2A2C;           --minimia-link-color-rgb: 90, 42, 44;
    --minimia-link-hover-color: #C0963B;     --minimia-link-hover-color-rgb: 192, 150, 59;
    --minimia-highlight-color: #4A3638;
    --minimia-highlight-bg: #FBF1DC;
    --minimia-border-color: #EDE2D5;
    --minimia-focus-ring-color: rgba(192, 150, 59, 0.25);
    --minimia-form-valid-color: #5E7D4A;
    --minimia-form-valid-border-color: #5E7D4A;
    --minimia-form-invalid-color: #B23A3A;
    --minimia-form-invalid-border-color: #B23A3A;

    /* Bootstrap (public layout: Pages/Shared/_Layout.cshtml) */
    --bs-primary: #5A2A2C;      --bs-primary-rgb: 90, 42, 44;
    --bs-secondary: #8C7A6B;    --bs-secondary-rgb: 140, 122, 107;
    --bs-success: #5E7D4A;      --bs-success-rgb: 94, 125, 74;
    --bs-info: #C0963B;         --bs-info-rgb: 192, 150, 59;
    --bs-warning: #D4A23A;      --bs-warning-rgb: 212, 162, 58;
    --bs-danger: #B23A3A;       --bs-danger-rgb: 178, 58, 58;
    --bs-light: #F6EFE6;        --bs-light-rgb: 246, 239, 230;
    --bs-dark: #2A1A1B;         --bs-dark-rgb: 42, 26, 27;
    --bs-body-color: #4A3638;   --bs-body-color-rgb: 74, 54, 56;
    --bs-body-bg: #FBF7F1;      --bs-body-bg-rgb: 251, 247, 241;
    --bs-secondary-color: rgba(74, 54, 56, 0.75);
    --bs-link-color: #5A2A2C;   --bs-link-color-rgb: 90, 42, 44;
    --bs-link-hover-color: #C0963B; --bs-link-hover-color-rgb: 192, 150, 59;
    --bs-border-color: #EDE2D5;
    --bs-focus-ring-color: rgba(192, 150, 59, 0.25);
}

[data-topbar-color=dark], [data-topbar-color=light] {
    --minimia-topbar-bg: #5A2A2C;
    --minimia-topbar-item-color: #F3E9D8;
    --minimia-topbar-search-bg: #4A2224;
}

[data-sidebar-color=light] {
    --minimia-sidebar-bg: #FDFAF5;
    --minimia-sidebar-item-color: #6B5456;
    --minimia-sidebar-item-hover-bg: #FFFFFF;
    --minimia-sidebar-item-hover-color: #5A2A2C;
    --minimia-sidebar-border-color: #EDE2D5;
}

::selection {
    background: rgba(192, 150, 59, 0.3);
    color: #2A1A1B;
}

/* ----- Buttons not covered by the gradient set above ----- */
.btn-secondary {
    background: linear-gradient(135deg, #F3E9D8 0%, #E6D3A8 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.35) !important;
    color: #5A2A2C !important;
    box-shadow: 0 4px 12px rgba(192, 150, 59, 0.12), inset 0 1px 0 rgba(255,255,255,0.5) !important;
}
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
    background: linear-gradient(135deg, #E6D3A8 0%, #C0963B 100%) !important;
    color: #3A1A1C !important;
    border-color: rgba(192, 150, 59, 0.55) !important;
}

.btn-warning {
    background: linear-gradient(135deg, #C0963B 0%, #D4A23A 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.3) !important;
    color: #2A1A1B !important;
}
.btn-warning:hover, .btn-warning:focus {
    background: linear-gradient(135deg, #9C7A2E 0%, #C0963B 100%) !important;
    color: #2A1A1B !important;
}

.btn-dark {
    background: linear-gradient(135deg, #2A1A1B 0%, #5A2A2C 100%) !important;
    border: 1px solid rgba(192, 150, 59, 0.25) !important;
    color: #FFFFFF !important;
}
.btn-dark:hover, .btn-dark:focus {
    background: linear-gradient(135deg, #1E1213 0%, #3A1A1C 100%) !important;
    color: #FFFFFF !important;
}

.btn-light {
    background: #F6EFE6 !important;
    border: 1px solid #EDE2D5 !important;
    color: #5A2A2C !important;
}

.btn-outline-primary {
    background: transparent !important;
    border: 1.5px solid #5A2A2C !important;
    color: #5A2A2C !important;
    box-shadow: none !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary.active {
    background: #5A2A2C !important;
    color: #FFFFFF !important;
}

.btn-outline-secondary {
    background: transparent !important;
    border: 1.5px solid #C9B9A8 !important;
    color: #6B5456 !important;
    box-shadow: none !important;
}
.btn-outline-secondary:hover, .btn-outline-secondary:focus {
    background: #F3ECE2 !important;
    color: #5A2A2C !important;
}

.btn-outline-danger {
    background: transparent !important;
    border: 1.5px solid #B23A3A !important;
    color: #B23A3A !important;
    box-shadow: none !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background: #B23A3A !important;
    color: #FFFFFF !important;
}

/* ----- Form bits ----- */
.form-check-input:checked {
    background-color: #5A2A2C !important;
    border-color: #5A2A2C !important;
}
.form-check-input:focus {
    border-color: #C0963B !important;
    box-shadow: 0 0 0 0.25rem rgba(192, 150, 59, 0.25) !important;
}
.input-group-text {
    background: #F6EFE6 !important;
    border: 1.5px solid var(--v-border) !important;
    color: #5A2A2C !important;
}
.form-text, .text-muted {
    color: #8C7A6B !important;
}

/* ----- Topbar avatar ----- */
.app-topbar .avatar-title {
    background: linear-gradient(135deg, #C0963B 0%, #E6D3A8 100%) !important;
    color: #3A1A1C !important;
}

/* ----- Dropdowns ----- */
.dropdown-menu {
    background: #FFFFFF !important;
    border: 1px solid #EDE2D5 !important;
    box-shadow: var(--v-shadow-md) !important;
}
.dropdown-header {
    color: #C0963B !important;
}
.dropdown-item {
    color: #4A3638 !important;
}
.dropdown-item:hover, .dropdown-item:focus {
    background: #F6EFE6 !important;
    color: #5A2A2C !important;
}
.dropdown-item.active, .dropdown-item:active {
    background: #5A2A2C !important;
    color: #FFFFFF !important;
}
.dropdown-item.text-danger {
    color: #B23A3A !important;
}

/* ----- Pagination (Bootstrap + DataTables) ----- */
.page-link {
    color: #5A2A2C !important;
    border-color: #EDE2D5 !important;
    background: #FFFFFF;
}
.page-link:hover {
    background: #F6EFE6 !important;
    color: #5A2A2C !important;
}
.page-item.active .page-link {
    background: #5A2A2C !important;
    border-color: #5A2A2C !important;
    color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
    color: #5A2A2C !important;
    border-radius: 8px !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #5A2A2C !important;
    border: 1px solid #5A2A2C !important;
    color: #FFFFFF !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):hover {
    background: #F6EFE6 !important;
    border: 1px solid #E6D3A8 !important;
    color: #5A2A2C !important;
}
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info {
    color: #6B5456 !important;
}

/* ----- Misc components ----- */
.progress {
    background-color: #F3ECE2 !important;
}
.modal-content {
    background: #FFFFFF !important;
    border: 1px solid #EDE2D5 !important;
}
.modal-header {
    background: linear-gradient(90deg, rgba(90, 42, 44, 0.04), rgba(192, 150, 59, 0.08)) !important;
    border-bottom: 1.5px solid rgba(192, 150, 59, 0.2) !important;
}
.modal-footer {
    border-top: 1px solid #EDE2D5 !important;
}
.breadcrumb-item a {
    color: #5A2A2C !important;
}
.breadcrumb-item.active {
    color: #8C7A6B !important;
}
.nav-tabs .nav-link.active {
    color: #5A2A2C !important;
    border-color: #C0963B !important;
}
.nav-pills .nav-link.active {
    background: #5A2A2C !important;
    color: #FFFFFF !important;
}
hr {
    border-color: #E6D3A8 !important;
    opacity: 0.6;
}

/* ----- Summernote editor ----- */
.note-editor.note-frame {
    border: 1.5px solid var(--v-border) !important;
    border-radius: 14px !important;
    overflow: hidden;
}
.note-editor .note-toolbar {
    background: #F8F2EA !important;
    border-bottom: 1px solid #EDE2D5 !important;
}
.note-editor .note-statusbar {
    background: #F8F2EA !important;
}
.note-btn {
    background: #FFFFFF !important;
    border-color: #EDE2D5 !important;
    color: #5A2A2C !important;
}

/* ----- Public layout (Bootstrap) footer ----- */
.footer {
    background: #FDFAF5;
    border-top: 2px solid #E6D3A8 !important;
    color: #8C7A6B !important;
}