/* Indra Manel brand theme — dark palette matching main site night/dark sections */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    /* Core palette from main site */
    --im-black: #000000;
    --im-dark: #1a1a1a;
    --im-darker: #141414;
    --im-gold: #d4af37;
    --im-gold-light: #e8cc6a;
    --im-gold-dark: #b8922a;
    --im-gold-muted: #c5a059;
    --im-heading: #f5f0ef;
    --im-text: #a89a96;
    --im-line: #2a2424;
    --im-white: #ffffff;

    /* Zenith / shadcn semantic tokens — dark mode */
    --background: #141414;
    --foreground: #f5f0ef;
    --card: #1a1a1a;
    --card-foreground: #f5f0ef;
    --popover: #1a1a1a;
    --popover-foreground: #f5f0ef;
    --primary: #d4af37;
    --primary-foreground: #000000;
    --secondary: #1a1a1a;
    --secondary-foreground: #f5f0ef;
    --muted: #1a1a1a;
    --muted-foreground: #a89a96;
    --accent: rgba(212, 175, 55, 0.12);
    --accent-foreground: #f5f0ef;
    --destructive: #c44a4a;
    --destructive-foreground: #ffffff;
    --border: #2a2424;
    --input: #2a2424;
    --ring: #d4af37;
    --success: #d4af37;
    --success-foreground: #000000;

    /* Sidebar */
    --sidebar: #141414;
    --sidebar-foreground: #f5f0ef;
    --sidebar-primary: #d4af37;
    --sidebar-primary-foreground: #000000;
    --sidebar-accent: rgba(212, 175, 55, 0.1);
    --sidebar-accent-foreground: #d4af37;
    --sidebar-border: #2a2424;
    --sidebar-ring: #d4af37;

    /* Charts — gold family (visible on dark bg) */
    --chart-1: #d4af37;
    --chart-2: #c5a059;
    --chart-3: #b8922a;
    --chart-4: #e8cc6a;
    --chart-5: #9a7b48;

    /* Shared header row height (sidebar brand + topbar) */
    --app-header-height: 4rem;
    --sidebar-width: 260px;
    --sidebar-width-collapsed: 4.5rem;
}

html,
body.app-body {
    margin: 0;
    padding: 0;
}

html {
    color-scheme: dark;
}

html,
body.app-body {
    font-family: 'Roboto', 'Segoe UI', sans-serif;
}

body.app-body {
    background: var(--background);
    color: var(--im-text);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--foreground);
}

::selection {
    background: var(--im-gold);
    color: var(--im-black);
}

/* Form controls on dark surfaces */
.form-input,
.topbar-search__input,
.page-toolbar__input,
.page-toolbar__select,
textarea.form-input,
select.form-input {
    box-sizing: border-box;
    min-height: 2.75rem;
    padding: 0.625rem 0.875rem;
    line-height: 1.5;
    font-size: 0.875rem;
    background: var(--im-darker);
    border-color: var(--border);
    color: var(--foreground);
}

textarea.form-input {
    min-height: 5.5rem;
    padding: 0.75rem 0.875rem;
    resize: vertical;
}

select.form-input {
    padding-right: 2rem;
}

.form-input::placeholder {
    color: color-mix(in oklab, var(--muted-foreground) 70%, transparent);
}

.form-input:hover,
.topbar-search__input:hover,
.page-toolbar__input:hover,
.page-toolbar__select:hover {
    background: color-mix(in oklab, var(--im-darker) 85%, var(--im-gold) 15%);
    border-color: color-mix(in oklab, var(--border) 70%, var(--im-gold) 30%);
}

.form-input:focus,
.topbar-search__input:focus,
.page-toolbar__input:focus,
.page-toolbar__select:focus {
    border-color: var(--im-gold);
    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}

.form-label {
    color: var(--foreground);
}

.dashboard-shell {
    background: var(--background);
}