/*
 * Teratai Admin — design system.
 * Loaded after style.bundle.css so these rules can safely override it.
 * The Metronic bundle is compiled-only (no SCSS source in this repo), so
 * component colors are baked in as literal hex, not CSS variables — that's
 * why most overrides below repeat Metronic's own selectors with !important
 * rather than just redefining a handful of variables.
 *
 * Palette: warm terracotta primary + sage/teal accents, replacing Metronic's
 * default blue. Keep additive here — never edit the compiled bundle itself.
 */

:root {
    --brand-primary: #C26D4D;
    --brand-primary-rgb: 194, 109, 77;
    --brand-primary-dark: #A85A3D;
    --brand-primary-light: #F5E6DE;
    --brand-secondary: #6B8E7B;
    --brand-secondary-light: #E7EEE9;
    --brand-tertiary: #189389;
    --brand-tertiary-light: #DFF1EF;
    --brand-neutral: #1A1A1B;
    --brand-bg: #F7F2EC;
    --brand-card: #FFFFFF;
    --brand-border: #EAE1D6;
    --brand-muted: #8A7F73;

    --bs-primary-rgb: var(--brand-primary-rgb);

    --radius-card: 16px;
    --radius-btn: 10px;
    --radius-input: 10px;
    --radius-pill: 999px;
}

/* ==================== Typography ==================== */
:root,
body,
.aside,
.header,
.card,
.form-control,
.btn,
.table {
    font-family: 'Inter', Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.card-title,
.page-title,
.db-page-title {
    font-family: 'Hanken Grotesk', 'Inter', Helvetica, Arial, sans-serif;
}

.table td,
.table th {
    font-variant-numeric: tabular-nums;
}

/* ==================== Surface ==================== */
body#kt_body {
    background-color: var(--brand-bg);
}

.card {
    border-radius: var(--radius-card) !important;
    border-color: var(--brand-border) !important;
}

.card-header {
    border-bottom-color: var(--brand-border) !important;
}

/* ==================== Buttons ==================== */
.btn {
    border-radius: var(--radius-btn) !important;
}

.btn.btn-primary,
.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary.show,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:focus:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active),
.show > .btn.btn-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-check:active + .btn.btn-primary,
.btn-check:checked + .btn.btn-primary,
.btn.btn-primary.active,
.btn.btn-primary:active:not(.btn-active),
.btn.btn-primary:hover:not(.btn-active) {
    background-color: var(--brand-primary-dark) !important;
    border-color: var(--brand-primary-dark) !important;
}
.btn-primary i,
.btn-primary .svg-icon svg [fill]:not(.permanent):not(g) {
    color: #fff;
    fill: #fff;
}

.btn.btn-light-primary,
.btn.btn-active-light-primary {
    background-color: var(--brand-primary-light) !important;
    border-color: var(--brand-primary-light) !important;
    color: var(--brand-primary-dark) !important;
}
.btn.btn-light-primary i,
.btn.btn-active-light-primary i {
    color: var(--brand-primary-dark);
}
.btn-check:active + .btn.btn-light-primary,
.btn-check:checked + .btn.btn-light-primary,
.btn.btn-light-primary.active,
.btn.btn-light-primary.show,
.btn.btn-light-primary:active:not(.btn-active),
.btn.btn-light-primary:focus:not(.btn-active),
.btn.btn-light-primary:hover:not(.btn-active),
.show > .btn.btn-light-primary {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
    color: #fff !important;
}
.btn-check:active + .btn.btn-light-primary i,
.btn-check:checked + .btn.btn-light-primary i,
.btn.btn-light-primary.active i,
.btn.btn-light-primary:hover:not(.btn-active) i {
    color: #fff;
}

/* ==================== Text / background / border utilities ==================== */
.text-primary {
    color: var(--brand-primary) !important;
}
.text-hover-primary:hover {
    color: var(--brand-primary) !important;
}
.bg-primary {
    background-color: var(--brand-primary) !important;
}
.bg-light-primary {
    background-color: var(--brand-primary-light) !important;
}
.border-primary {
    border-color: var(--brand-primary) !important;
}
.badge-light-primary {
    color: var(--brand-primary-dark) !important;
    background-color: var(--brand-primary-light) !important;
}
.badge-light-info {
    color: var(--brand-tertiary) !important;
    background-color: var(--brand-tertiary-light) !important;
}

.badge {
    border-radius: var(--radius-pill) !important;
}

/* ==================== Forms ==================== */
.form-control,
.form-select {
    border-radius: var(--radius-input) !important;
}
.form-control:focus,
.form-select:focus {
    border-color: var(--brand-primary) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 0 .25rem rgba(var(--brand-primary-rgb), .2) !important;
}
.form-check-input:checked {
    background-color: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

/* Keyboard focus visibility, tuned to the new brand color. */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}

/* ==================== Sidebar (light theme) ==================== */
.aside {
    background-color: var(--brand-card);
    box-shadow: 0 0 0 1px var(--brand-border);
}
.aside .aside-logo {
    background-color: var(--brand-card);
    border-bottom: 1px solid var(--brand-border);
}
.aside .menu .menu-item .menu-link .menu-title {
    color: #5b5348;
    font-weight: 500;
}
.aside .menu .menu-item .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: #a89c8c;
}
.aside .menu .menu-item.hover:not(.here) > .menu-link:not(.disabled):not(.active):not(.here),
.aside .menu .menu-item:not(.here) .menu-link:hover:not(.disabled):not(.active):not(.here) {
    background-color: var(--brand-bg) !important;
    border-radius: 10px;
}
.aside .menu .menu-item.here > .menu-link,
.aside .menu .menu-item.show > .menu-link {
    background-color: var(--brand-primary-light) !important;
    border-radius: 10px;
    position: relative;
}
.aside .menu .menu-item.here > .menu-link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--brand-primary);
}
.aside .menu .menu-item.here > .menu-link .menu-title {
    color: var(--brand-primary-dark);
    font-weight: 700;
}
.aside .menu .menu-item.here > .menu-link .menu-icon .svg-icon svg [fill]:not(.permanent):not(g) {
    fill: var(--brand-primary);
}
.aside .menu .menu-section {
    color: var(--brand-muted) !important;
}

/* ==================== Header ==================== */
.header {
    background-color: var(--brand-card);
    border-bottom: 1px solid var(--brand-border);
}

/* Empty-state / helper text inside tables and cards. */
.table .text-muted a {
    text-decoration: underline;
}

/* Reusable entity avatar (colored initial circle — vendor, customer, reseller, etc.) */
.entity-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.8rem;
    color: #fff;
    flex-shrink: 0;
}
.entity-avatar.av-1 { background-color: var(--brand-primary); }
.entity-avatar.av-2 { background-color: var(--brand-secondary); }
.entity-avatar.av-3 { background-color: var(--brand-tertiary); }
.entity-avatar.av-4 { background-color: #A85A3D; }
.entity-avatar.av-5 { background-color: #4C6E5D; }