/*
  ICC (Industrias Cosméticas Cuscatlán) brand theme layer.

  This is the single place to adjust the brand. It does two things:
    1. Declares the ICC design tokens as CSS custom properties (:root).
    2. Remaps the Bootstrap/Metronic theme variables to those tokens so the
       vendored Metronic bundle renders in the ICC identity instead of the
       stock demo palette.

  Loaded AFTER assets/css/style.bundle.css so these values win. Templates and
  fragments reference tokens / Metronic utility classes only — never hard-coded
  brand colors. To rebrand: change the values here and/or replace the logo and
  reference images under /images.
*/

:root {
    /* ---- ICC brand palette ---- */
    --color-primary: #ED8B00;          /* ICC orange */
    --color-primary-hover: #C9740A;    /* hover / active */
    --color-primary-contrast: #ffffff; /* text/icon on primary */
    --color-primary-subtle: #FDF0DC;   /* tint surface */
    --color-secondary: #6E6F72;        /* logo wordmark gray */

    /* ---- Neutrals & surfaces ---- */
    --color-bg: #f5f6f8;
    --color-surface: #ffffff;
    --color-text: #3A3A3C;
    --color-muted: #6b7280;
    --color-border: #e2e5ea;

    /* ---- Feedback ---- */
    --color-success: #2e7d32;
    --color-warning: #b8860b;
    --color-error: #c0392b;

    /* ---- Typography ---- */
    --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-size-sm: 0.85rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;

    /* ---- Spacing scale ---- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-8: 3rem;

    /* ---- Radius & shadow ---- */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
    --shadow-md: 0 6px 20px rgba(20, 24, 31, 0.10);

    /* ---- Remap Bootstrap/Metronic theme variables to the ICC tokens ---- */
    --bs-primary: var(--color-primary);
    --bs-primary-active: var(--color-primary-hover);
    --bs-primary-light: var(--color-primary-subtle);
    --bs-primary-inverse: var(--color-primary-contrast);
    --bs-primary-rgb: 237, 139, 0;
    --bs-primary-clarity: rgba(237, 139, 0, 0.2);
    --bs-primary-bg-subtle: #FBE6C6;
    --bs-primary-border-subtle: #F6C77E;
    --bs-primary-text-emphasis: #9A5A08;
    --bs-link-color: var(--color-primary-hover);
    --bs-link-color-rgb: 201, 116, 10;
    --bs-link-hover-color: var(--color-primary);
    --bs-font-sans-serif: var(--font-sans);
}

/* Keep the brand consistent if the light theme attribute is present. */
[data-bs-theme="light"] {
    --bs-primary: var(--color-primary);
    --bs-primary-active: var(--color-primary-hover);
    --bs-primary-light: var(--color-primary-subtle);
    --bs-primary-inverse: var(--color-primary-contrast);
    --bs-primary-rgb: 237, 139, 0;
    --bs-link-color: var(--color-primary-hover);
    --bs-link-hover-color: var(--color-primary);
}

body {
    font-family: var(--font-sans);
}

/* ---------- Brand logo ---------- */

.app-brand-logo {
    height: 34px;
    width: auto;
    display: block;
}

.app-brand-logo--sm {
    height: 28px;
}

/* ---------- Public (authentication) layout ---------- */

.app-auth-root {
    min-height: 100vh;
    background:
        radial-gradient(120% 120% at 100% 0%, rgba(237, 139, 0, 0.10) 0%, rgba(237, 139, 0, 0) 55%),
        var(--color-bg);
}

.app-auth-card {
    width: 100%;
    max-width: 420px;
}

/* Decorative diamond accent echoing the brand reference graphic. */
.app-auth-card .card {
    position: relative;
    overflow: hidden;
}

.app-auth-card .card::before {
    content: "";
    position: absolute;
    top: -42px;
    right: -42px;
    width: 110px;
    height: 110px;
    background: var(--color-primary);
    opacity: 0.12;
    transform: rotate(45deg);
    pointer-events: none;
}

.app-auth-logo {
    height: 48px;
    width: auto;
}

/* ---------- Page header ---------- */

.app-page-title {
    color: var(--color-secondary);
    letter-spacing: 0.02em;
}

/* ---------- Table empty state ---------- */

.app-empty-state {
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-muted);
}

.app-empty-state .ki-outline {
    color: var(--color-border);
}

/* ---------- Required field indicator ---------- */

.app-required::after {
    content: "*";
    color: var(--color-error);
    margin-inline-start: var(--space-1);
}