/* =============================================================================
   ordrMi Admin — design tokens mirror the WebPortal (cream / forest / gold)
   Existing pages keep using --primary-bg / --surface-bg / --accent-color etc.
   Those tokens are now repointed to the ordrMi palette.
   ============================================================================= */

:root {
    /* ordrMi palette */
    --om-cream: #F7F4EE;
    --om-cream-2: #F1ECE0;
    --om-paper: #FFFFFF;
    --om-forest: #173A2B;
    --om-forest-soft: #284E3D;
    --om-gold: #D6A15B;
    --om-gold-deep: #B8884A;
    --om-ink: #1B2C24;
    --om-ink-soft: #5C6D63;
    --om-line: rgba(23, 58, 43, 0.10);
    --om-line-strong: rgba(23, 58, 43, 0.22);

    /* Legacy tokens — repointed so existing page CSS stays consistent */
    --primary-bg: var(--om-cream);          /* page background */
    --surface-bg: var(--om-paper);          /* card surface */
    --accent-color: var(--om-gold-deep);    /* primary accent */
    --accent-hover: var(--om-gold);
    --glass-bg: rgba(23, 58, 43, 0.05);
    --text-main: var(--om-ink);
    --text-muted: var(--om-ink-soft);
    --border-color: var(--om-line);

    /* Sidebar uses a forest panel for contrast */
    --sidebar-bg: var(--om-forest);
    --sidebar-text: rgba(247, 244, 238, 0.85);
    --sidebar-text-muted: rgba(247, 244, 238, 0.5);
    --sidebar-active: var(--om-gold);
    --sidebar-border: rgba(247, 244, 238, 0.08);

    --sidebar-width: 260px;
    --topbar-height: 72px;
    --transition-speed: 0.2s;
    --border-radius-lg: 16px;
    --border-radius-md: 10px;
    --border-radius-sm: 8px;
}

html, body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: var(--primary-bg) !important;
    color: var(--text-main);
    margin: 0;
    padding: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--om-ink);
    font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.page {
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: var(--primary-bg);
}

a, .btn-link {
    color: var(--accent-color);
    text-decoration: none;
}
a:hover { color: var(--om-gold); }

/* Accent helpers used across pages */
.text-accent { color: var(--accent-color) !important; }
.bg-accent  { background-color: var(--accent-color) !important; }
.border-accent { border-color: var(--accent-color) !important; }

/* Buttons */
.btn-primary, .btn-accent {
    background-color: var(--om-forest);
    border: none;
    color: var(--om-cream);
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    border-radius: var(--border-radius-sm);
}
.btn-primary:hover, .btn-accent:hover {
    background-color: var(--om-forest-soft);
    color: var(--om-cream);
}

.btn-outline-light {
    border: 1px solid var(--om-line-strong);
    color: var(--om-ink);
    background: transparent;
}
.btn-outline-light:hover {
    background: var(--om-cream-2);
    color: var(--om-ink);
}

.btn-glass {
    background: var(--om-cream-2);
    border: 1px solid var(--om-line);
    color: var(--om-ink);
    font-weight: 700;
}
.btn-glass:hover { background: var(--om-paper); color: var(--om-ink); }
.btn-glass.active { background: var(--om-forest); color: var(--om-cream); border-color: var(--om-forest); }

.btn-icon {
    background: var(--om-cream-2);
    border: 1px solid var(--om-line);
    color: var(--om-ink-soft);
    width: 36px; height: 36px;
    border-radius: var(--border-radius-sm);
    display: inline-flex; align-items: center; justify-content: center;
}
.btn-icon:hover { color: var(--om-forest); border-color: var(--om-line-strong); }

/* Cards */
.card {
    background-color: var(--surface-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    color: var(--text-main);
    box-shadow: 0 1px 2px rgba(23, 58, 43, 0.04);
}
.card-header { background: transparent !important; border-color: var(--border-color) !important; }

/* Form controls — neutralise old "dark" bootstrap classes that pages used */
.form-control, .form-select, .glass-input,
.form-control.bg-dark, .form-control.glass-input {
    background-color: var(--om-cream-2) !important;
    color: var(--om-ink) !important;
    border: 1px solid var(--om-line) !important;
    border-radius: var(--border-radius-sm);
}
.form-control:focus, .form-select:focus {
    border-color: var(--om-gold-deep) !important;
    box-shadow: 0 0 0 3px rgba(214, 161, 91, 0.15) !important;
    background-color: var(--om-paper) !important;
}
.form-label { color: var(--om-ink) !important; font-weight: 700; }
.input-group-text {
    background: var(--om-cream-2) !important;
    color: var(--om-ink-soft) !important;
    border-color: var(--om-line) !important;
}

/* Tables — neutralise old table-dark */
.table-dark, .table.custom-premium-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--om-ink);
    --bs-table-border-color: var(--om-line);
    color: var(--om-ink);
    background: transparent;
}
.custom-premium-table thead th {
    background: var(--om-cream-2) !important;
    color: var(--om-ink-soft) !important;
    border-bottom: 1px solid var(--om-line) !important;
}
.custom-premium-table tbody td {
    color: var(--om-ink) !important;
    border-color: var(--om-line) !important;
}
.text-white-50, .text-muted {
    color: var(--om-ink-soft) !important;
}
.text-white { color: var(--om-ink) !important; }

/* Pills / chips */
.glass-pill {
    background: var(--om-cream-2);
    border: 1px solid var(--om-line);
    color: var(--om-ink-soft);
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Content area */
.content {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
}

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--om-cream); }
::-webkit-scrollbar-thumb { background: var(--om-line-strong); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--om-ink-soft); }

/* Login layout backdrop (LoginLayout uses bootstrap container) */
body.login-layout, .login-bg {
    background:
        radial-gradient(800px 400px at 20% 0%, rgba(214, 161, 91, 0.18), transparent 60%),
        radial-gradient(800px 400px at 100% 100%, rgba(23, 58, 43, 0.12), transparent 60%),
        var(--om-cream) !important;
}