@layer components {
/* ============================================================================
 * Tabler migration compatibility
 *
 * Loaded AFTER core-layer.css and BEFORE style.css.
 * Jobs:
 *   1. Brand palette (luxe graphite)
 *   2. Touch-friendly sizing overrides
 *   3. Table row density
 *   4. Legacy utility class aliases (d-f → d-flex, etc.)
 *
 * Layer/window/modal protection + sizing/grid/position utilities are now
 * in core-layer.css (separate SCSS project).
 * ============================================================================ */


/* ============================================================================
 * 1. Brand palette — "Warm Graphite & Bronze"
 *
 * Designed to harmonize with the warm grey-brown header chrome
 * (#403F40 → #555758). All colors are muted, warm-toned, dark.
 *
 * Primary:   #5c4a33  (dark bronze)       — main actions, active states
 * Accent:    #b8860b  (antique gold)      — highlights, hover glow
 * Secondary: #555758  (warm graphite)     — secondary buttons, chrome
 * Success:   #2d6a4f  (forest green)      — published, confirmed
 * Warning:   #b45309  (dark amber)        — warnings, pending states
 * Danger:    #9f1239  (burgundy)          — delete, errors
 * Info:      #1e6091  (steel blue)        — info alerts, links
 * Links:     #475569  (warm slate)        — body text links
 * ============================================================================ */
:root {
    /* Primary — warm mahogany (richer, less yellow than bronze) */
    --tblr-primary: #6b3a2a;
    --tblr-primary-rgb: 107, 58, 42;
    --tblr-primary-fg: #ffffff;
    --tblr-primary-text-emphasis: #6b3a2a;
    --tblr-primary-bg-subtle: #f5eeea;
    --tblr-primary-border-subtle: #d4b8ad;

    /* Secondary — warm graphite */
    --tblr-secondary: #555758;
    --tblr-secondary-rgb: 85, 87, 88;

    /* Success — forest green */
    --tblr-success: #2d6a4f;
    --tblr-success-rgb: 45, 106, 79;

    /* Warning — dark amber */
    --tblr-warning: #b45309;
    --tblr-warning-rgb: 180, 83, 9;

    /* Danger — burgundy */
    --tblr-danger: #9f1239;
    --tblr-danger-rgb: 159, 18, 57;

    /* Info — steel blue */
    --tblr-info: #1e6091;
    --tblr-info-rgb: 30, 96, 145;

    /* Links */
    --tblr-link-color: #475569;
    --tblr-link-color-rgb: 71, 85, 105;
    --tblr-link-hover-color: #78654a;
    --tblr-link-hover-color-rgb: 120, 101, 74;
}

/* Button content alignment — Tabler uses display:inline-block which doesn't
 * support gap between icon + text. Override to inline-flex with gap so
 * <i class="icon"></i> Text has consistent spacing across all buttons. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
}

/* Primary button — warm mahogany */
.btn-primary {
    --tblr-btn-bg: #6b3a2a;
    --tblr-btn-border-color: #6b3a2a;
    --tblr-btn-hover-bg: #7d4a38;
    --tblr-btn-hover-border-color: #7d4a38;
    --tblr-btn-active-bg: #5a2f21;
    --tblr-btn-active-border-color: #5a2f21;
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-active-color: #ffffff;
}
.btn-outline-primary,
.btn-ghost-primary {
    --tblr-btn-color: #6b3a2a;
    --tblr-btn-border-color: #6b3a2a;
    --tblr-btn-hover-bg: #6b3a2a;
    --tblr-btn-hover-border-color: #6b3a2a;
    --tblr-btn-hover-color: #ffffff;
}

/* Success button — forest green */
.btn-success {
    --tblr-btn-bg: #2d6a4f;
    --tblr-btn-border-color: #2d6a4f;
    --tblr-btn-hover-bg: #236b4a;
    --tblr-btn-hover-border-color: #236b4a;
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-color: #ffffff;
}

/* Warning button — dark amber */
.btn-warning {
    --tblr-btn-bg: #b45309;
    --tblr-btn-border-color: #b45309;
    --tblr-btn-hover-bg: #92400e;
    --tblr-btn-hover-border-color: #92400e;
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-color: #ffffff;
}

/* Danger button — burgundy */
.btn-danger {
    --tblr-btn-bg: #9f1239;
    --tblr-btn-border-color: #9f1239;
    --tblr-btn-hover-bg: #881337;
    --tblr-btn-hover-border-color: #881337;
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-color: #ffffff;
}

/* Info button — steel blue */
.btn-info {
    --tblr-btn-bg: #1e6091;
    --tblr-btn-border-color: #1e6091;
    --tblr-btn-hover-bg: #1a5276;
    --tblr-btn-hover-border-color: #1a5276;
    --tblr-btn-color: #ffffff;
    --tblr-btn-hover-color: #ffffff;
}

/* Links — warm slate, hover to bronze */
a:not(.btn):not(.ajax-link):not(.ajax-button):not(.module-card):not(.drawer-card) { color: #475569; }
a:not(.btn):not(.ajax-link):not(.ajax-button):not(.module-card):not(.drawer-card):hover { color: #78654a; }

/* Utility helpers */
.bg-primary { background-color: #6b3a2a; }
.text-primary { color: #6b3a2a; }
.text-accent { color: #b8860b; }
.bg-accent { background-color: #b8860b; color: #ffffff; }
.border-accent { border-color: #b8860b; }

/* Dark button — lighter than chrome so it stands out on dark bars */
.btn-dark {
    --tblr-btn-bg: #6b6766;
    --tblr-btn-border-color: rgba(255,255,255,.1);
    --tblr-btn-hover-bg: #7d7877;
    --tblr-btn-hover-border-color: rgba(255,255,255,.2);
    --tblr-btn-active-bg: #5c5857;
    --tblr-btn-active-border-color: rgba(255,255,255,.08);
    --tblr-btn-color: #f5f0ea;
    --tblr-btn-hover-color: #ffffff;
    --tblr-btn-active-color: #f5f0ea;
}

/* Light button — visible on white background with warm tint */
.btn-light {
    --tblr-btn-bg: #f8f5f1;
    --tblr-btn-border-color: #d4ccc2;
    --tblr-btn-hover-bg: #efe9e1;
    --tblr-btn-hover-border-color: #b8a99a;
    --tblr-btn-color: #4a4848;
    --tblr-btn-hover-color: #3d3b3b;
}

/* btn-light + btn-danger combo (delete buttons in tables) —
   danger color takes priority over light background */
.btn-light.btn-danger {
    --tblr-btn-bg: #fff5f5;
    --tblr-btn-border-color: #e8b4b4;
    --tblr-btn-hover-bg: #9f1239;
    --tblr-btn-hover-border-color: #9f1239;
    --tblr-btn-color: #9f1239;
    --tblr-btn-hover-color: #ffffff;
}

/* btn-dark inside table rows — softer than in bars, so it doesn't
   overpower the light action buttons next to it */
.table .btn-dark,
.list-table .btn-dark {
    --tblr-btn-bg: #78706b;
    --tblr-btn-border-color: #78706b;
    --tblr-btn-hover-bg: #6b3a2a;
    --tblr-btn-hover-border-color: #6b3a2a;
}

/* Breadcrumb — warm neutral links, mahogany hover */
.breadcrumb-item a {
    color: #6b6766;
    text-decoration: none;
}
.breadcrumb-item a:hover {
    color: #6b3a2a;
}
.breadcrumb-item.active {
    color: #4a4848;
}
.breadcrumb-item + .breadcrumb-item::before {
    color: #b8a99a;
}

/* Form controls — bronze focus ring */
.form-check-input:checked {
    background-color: #6b3a2a;
    border-color: #6b3a2a;
}
.form-control:focus,
.form-select:focus {
    border-color: #7d4a38;
    box-shadow: 0 0 0 0.2rem rgba(107, 58, 42, 0.18);
}

/* Badge variants */
.bg-success { background-color: #2d6a4f; color: #fff; }
.bg-warning { background-color: #b45309; color: #fff; }
.bg-warning.text-dark { color: #fff; }

/* Card badge — subtle ID label on module/web cards */
.card-badge {
    background: rgba(107, 58, 42, 0.1);
    color: #6b3a2a;
    font-weight: 600;
    font-size: 0.7rem;
    border: 1px solid rgba(107, 58, 42, 0.12);
    border-radius: 6px;
    padding: 0.2em 0.5em;
    backdrop-filter: blur(4px);
}
.bg-danger  { background-color: #9f1239; color: #fff; }
.bg-info    { background-color: #1e6091; color: #fff; }

/* Alert variants */
.alert-success { --tblr-alert-bg: #ecfdf5; --tblr-alert-color: #2d6a4f; --tblr-alert-border-color: #a7f3d0; }
.alert-warning { --tblr-alert-bg: #fffbeb; --tblr-alert-color: #92400e; --tblr-alert-border-color: #fde68a; }
.alert-danger  { --tblr-alert-bg: #fff1f2; --tblr-alert-color: #9f1239; --tblr-alert-border-color: #fecdd3; }
.alert-info    { --tblr-alert-bg: #eff6ff; --tblr-alert-color: #1e6091; --tblr-alert-border-color: #bfdbfe; }


/* ============================================================================
 * 2. Touch-friendly sizing
 * ============================================================================ */
.btn {
    --tblr-btn-padding-y: 0.625rem;
    --tblr-btn-padding-x: 1rem;
    --tblr-btn-font-size: 0.9375rem;
    min-height: 2.5rem;
    line-height: 1.25rem;
}
.btn-sm {
    --tblr-btn-padding-y: 0.375rem;
    --tblr-btn-padding-x: 0.75rem;
    --tblr-btn-font-size: 0.8125rem;
    min-height: 2rem;
}
.btn-lg {
    --tblr-btn-padding-y: 0.875rem;
    --tblr-btn-padding-x: 1.5rem;
    --tblr-btn-font-size: 1.0625rem;
    min-height: 3rem;
}
.btn-icon {
    min-width: 2.5rem;
    min-height: 2.5rem;
    padding: 0;
}
.form-control, .form-select {
    min-height: 2.5rem;
}

/* ============================================================================
 * 3. Table row density
 * ============================================================================ */
.table > :not(caption) > * > * {
    --tblr-table-cell-padding-y: 0.375rem;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
.table.table-vcenter td,
.table.table-vcenter th {
    vertical-align: middle;
}


/* ============================================================================
 * 4. Legacy utility aliases
 *
 * Emersion templates use shortened names. Alias them to Bootstrap/Tabler
 * equivalents so ~3000 template occurrences don't need rewriting.
 * ============================================================================ */
.d-f  { display: flex; }
.d-if { display: inline-flex; }
.d-b  { display: block; }
.d-ib { display: inline-block; }
.d-n  { display: none; }
.d-g  { display: grid; }

.ai-c  { align-items: center; }
.ai-fs { align-items: flex-start; }
.ai-fe { align-items: flex-end; }
.ai-s  { align-items: stretch; }
.ai-b  { align-items: baseline; }

.jc-c  { justify-content: center; }
.jc-fs { justify-content: flex-start; }
.jc-fe { justify-content: flex-end; }
.jc-sb { justify-content: space-between; }
.jc-sa { justify-content: space-around; }

.fxw-w  { flex-wrap: wrap; }
.fxw-nw { flex-wrap: nowrap; }
.fxd-c  { flex-direction: column; }
.fxd-r  { flex-direction: row; }
.fx-auto { flex: 1 1 auto; min-width: 0; }

.fz-1 { font-size: 2rem; }
.fz-2 { font-size: 1.75rem; }
.fz-3 { font-size: 1.5rem; }
.fz-4 { font-size: 1.25rem; }
.fz-5 { font-size: 1rem; }
.fz-6 { font-size: .875rem; }
.fz-7 { font-size: .75rem; }

.ml-auto { margin-left: auto; }
.mr-auto { margin-right: auto; }

.b-a  { border: 1px solid var(--tblr-border-color, #dee2e6); }
.br-0 { border-radius: 0; }
.br-1 { border-radius: .125rem; }
.br-2 { border-radius: .25rem; }
.br-3 { border-radius: .5rem; }
.br-4 { border-radius: 1rem; }

.o-10 { opacity: 1; }
.o-5  { opacity: .5; }
.o-0  { opacity: 0; }

.tal-l { text-align: left; }
.tal-r { text-align: right; }
.tal-c { text-align: center; }

.ov-a { overflow: auto; }
.ov-h { overflow: hidden; }
.ov-v { overflow: visible; }

.tw-w { text-wrap: wrap; }
.whs-nw { white-space: nowrap; }
}