/* ===== MENATABRAND ERP — Custom Styles ===== */
/* Matches main website typography & color palette */

/* --- Font Faces --- */
@font-face {
    font-family: 'Anthropic Sans';
    src: url('fonts/AnthropicSans-Roman.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Anthropic Sans';
    src: url('fonts/AnthropicSans-Italic.woff2') format('woff2');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Anthropic Serif';
    src: url('fonts/AnthropicSerif-Roman.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* --- Base Overrides --- */
body,
.font-sans {
    font-family: 'Anthropic Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Sidebar logo */
.sidebar-logo {
    height: 22px;
    width: auto;
}

/* Warm color overrides for light mode */
.bg-gray-50 {
    background-color: #FAF9F5 !important;
}

/* Cards — warm border */
.rounded-xl.border {
    border-color: #E8E7E3 !important;
}

/* Subtle shadow */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(20, 20, 19, 0.04) !important;
}

/* Active nav — warm black */
.bg-gray-900 {
    background-color: #141413 !important;
}

/* Button */
.bg-black {
    background-color: #141413 !important;
}

/* Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #FAF9F5;
}

::-webkit-scrollbar-thumb {
    background: #C8C7C3;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #A0A09C;
}

/* ===== DARK MODE ===== */
html.dark {
    color-scheme: dark;
}

html.dark body,
html.dark #app-root,
html.dark main,
html.dark #page-content {
    background-color: #0f0f0f !important;
    color: #e5e5e5 !important;
}

/* Cards / panels */
html.dark .bg-white {
    background-color: #1a1a1a !important;
    color: #e5e5e5 !important;
}
html.dark .bg-gray-50 {
    background-color: #141414 !important;
}
html.dark .bg-gray-100 {
    background-color: #242424 !important;
}
html.dark .bg-gray-200 {
    background-color: #2e2e2e !important;
}

/* Borders */
html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .rounded-xl.border {
    border-color: #2e2e2e !important;
}
html.dark .divide-gray-100 > * {
    border-color: #2e2e2e !important;
}

/* Text */
html.dark .text-gray-900  { color: #f0f0f0 !important; }
html.dark .text-gray-800  { color: #e0e0e0 !important; }
html.dark .text-gray-700  { color: #d0d0d0 !important; }
html.dark .text-gray-600  { color: #b0b0b0 !important; }
html.dark .text-gray-500  { color: #909090 !important; }
html.dark .text-gray-400  { color: #707070 !important; }

/* Inputs & selects */
html.dark input,
html.dark select,
html.dark textarea {
    background-color: #242424 !important;
    border-color: #383838 !important;
    color: #e5e5e5 !important;
}
html.dark input::placeholder { color: #666 !important; }

/* Table rows */
html.dark tbody tr:hover {
    background-color: #222 !important;
}
html.dark tr.border-b {
    border-color: #2e2e2e !important;
}

/* Sidebar */
html.dark aside,
html.dark #app-sidebar {
    background-color: #141414 !important;
    border-color: #2e2e2e !important;
}
html.dark #app-sidebar a:hover {
    background-color: #242424 !important;
}
html.dark #app-sidebar .border-t {
    border-color: #2e2e2e !important;
}

/* Header */
html.dark header {
    background-color: rgba(20,20,20,0.85) !important;
    border-color: #2e2e2e !important;
}

/* Modals / panels */
html.dark .fixed.bg-white,
html.dark #create-panel,
html.dark #view-modal .bg-white,
html.dark #dp-modal .bg-white {
    background-color: #1a1a1a !important;
    color: #e5e5e5 !important;
}

/* Badge colors stay */
html.dark .bg-green-50  { background-color: #052e16 !important; }
html.dark .bg-green-100 { background-color: #14532d !important; }
html.dark .bg-blue-50   { background-color: #082f49 !important; }
html.dark .bg-blue-100  { background-color: #0c4a6e !important; }
html.dark .bg-red-50    { background-color: #450a0a !important; }
html.dark .bg-red-100   { background-color: #7f1d1d !important; }
html.dark .bg-yellow-50 { background-color: #422006 !important; }

/* nav active */
html.dark .bg-gray-900.text-white {
    background-color: #e5e5e5 !important;
    color: #141413 !important;
}

/* Search trigger */
html.dark .search-trigger {
    background-color: #242424 !important;
    border-color: #383838 !important;
    color: #909090 !important;
}