/* =========================================================
   File: assets/css/theme-core.css
   Purpose: Enterprise Admin Theme Core Variables + Base UI
   Stack: AdminLTE + Bootstrap 5
   ========================================================= */

:root {
    /* =========================
       COLOR SYSTEM
       ========================= */
    --theme-primary: #0d6efd;
    --theme-primary-rgb: 13, 110, 253;

    --theme-secondary: #6c757d;
    --theme-secondary-rgb: 108, 117, 125;

    --theme-success: #198754;
    --theme-success-rgb: 25, 135, 84;

    --theme-danger: #dc3545;
    --theme-danger-rgb: 220, 53, 69;

    --theme-warning: #ffc107;
    --theme-warning-rgb: 255, 193, 7;

    --theme-info: #0dcaf0;
    --theme-info-rgb: 13, 202, 240;

    --theme-dark: #212529;
    --theme-dark-rgb: 33, 37, 41;

    --theme-light: #f8f9fa;
    --theme-light-rgb: 248, 249, 250;

    /* =========================
       LAYOUT / BODY COLORS
       ========================= */
    --body-bg: #f4f6f9;
    --body-color: #212529;

    --content-bg: #ffffff;
    --content-color: #212529;

    --sidebar-bg: #111827;
    --sidebar-color: #cfd4dc;
    --sidebar-hover-bg: rgba(255, 255, 255, 0.08);
    --sidebar-hover-color: #ffffff;
    --sidebar-active-bg: var(--theme-primary);
    --sidebar-active-color: #ffffff;

    --topbar-bg: #ffffff;
    --topbar-color: #212529;

    --card-bg: #ffffff;
    --card-color: #212529;
    --card-border: #dfe3e8;

    --table-bg: #ffffff;
    --table-color: #212529;
    --table-border: #dee2e6;
    --table-head-bg: #eef2f6;
    --table-head-color: #1f2937;
    --table-row-hover: #f8fafc;

    /* =========================
       INPUT COLORS
       ========================= */
    --input-bg: #ffffff;
    --input-color: #212529;
    --input-border: #cfd4dc;
    --input-placeholder: #6c757d;

    --input-focus-bg: rgba(var(--theme-primary-rgb), 0.10);
    --input-focus-color: #0f172a;
    --input-focus-border: var(--theme-primary);

    --input-disabled-bg: #f1f3f5;
    --input-disabled-color: #6c757d;
    --input-disabled-border: #d6d8db;

    --theme-select-arrow-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23111827' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    --theme-select-arrow-focus-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
    --theme-select-arrow-size: 16px 16px;
    --theme-select-arrow-position: right 0.75rem center;
    --theme-select-arrow-padding-end: 2.25rem;

    /* =========================
       DYNAMIC ACTIVE FIELD COLORS
       DEFAULT = BLACK / WHITE
       FUTURE USER SETTINGS READY
       ========================= */
    --theme-input-focus-bg: #000000;
    --theme-input-focus-text: #ffffff;
    --theme-input-focus-border: #000000;
    --theme-input-focus-placeholder: rgba(255, 255, 255, 0.60);

    /* =========================
       BUTTON COLORS
       ========================= */
    --btn-primary-bg: var(--theme-primary);
    --btn-primary-color: #ffffff;
    --btn-primary-border: var(--theme-primary);

    --btn-secondary-bg: var(--theme-secondary);
    --btn-secondary-color: #ffffff;
    --btn-secondary-border: var(--theme-secondary);

    --btn-success-bg: var(--theme-success);
    --btn-success-color: #ffffff;
    --btn-success-border: var(--theme-success);

    --btn-danger-bg: var(--theme-danger);
    --btn-danger-color: #ffffff;
    --btn-danger-border: var(--theme-danger);

    --btn-warning-bg: var(--theme-warning);
    --btn-warning-color: #212529;
    --btn-warning-border: var(--theme-warning);

    --btn-info-bg: var(--theme-info);
    --btn-info-color: #212529;
    --btn-info-border: var(--theme-info);

    /* =========================
       BADGE / STATUS
       ========================= */
    --badge-radius: 4px;

    /* =========================
       TYPOGRAPHY
       ========================= */
    --font-family-base: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 0.875rem;
    --font-size-sm: 0.75rem;
    --font-size-xs: 0.6875rem;
    --line-height-base: 1.35;

    /* =========================
       BORDERS / RADIUS / SHADOW
       ========================= */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;

    --border-color: #dfe3e8;
    --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow-md: 0 2px 8px rgba(15, 23, 42, 0.06);

    /* =========================
       COMPACT SPACING SYSTEM
       ========================= */
    --space-0: 0;
    --space-1: 0.125rem;
    --space-2: 0.25rem;
    --space-3: 0.375rem;
    --space-4: 0.5rem;
    --space-5: 0.625rem;
    --space-6: 0.75rem;
    --space-7: 0.875rem;
    --space-8: 1rem;

    /* =========================
       SIZING
       ========================= */
    --topbar-height: 48px;
    --sidebar-width: 240px;
    --control-height: 32px;
    --control-height-sm: 28px;
    --control-height-lg: 36px;

    /* =========================
       Z-INDEX
       ========================= */
    --z-dropdown: 1050;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1055;
    --z-toast: 1080;
}

/* =========================================================
   GLOBAL RESET / BODY
   ========================================================= */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: var(--font-family-base);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    background-color: var(--body-bg);
    color: var(--body-color);
}

body {
    overflow-x: hidden;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

a {
    color: var(--theme-primary);
    text-decoration: none;
}

a:hover {
    color: var(--theme-primary);
    text-decoration: none;
}

img {
    max-width: 100%;
    height: auto;
}

/* =========================================================
   TYPOGRAPHY
   ========================================================= */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--space-4);
    font-weight: 600;
    line-height: 1.2;
    color: inherit;
}

h1 { font-size: 1.5rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.15rem; }
h4 { font-size: 1rem; }
h5 { font-size: 0.925rem; }
h6 { font-size: 0.825rem; }

p {
    margin-top: 0;
    margin-bottom: var(--space-4);
}

small,
.small {
    font-size: var(--font-size-sm);
}

/* =========================================================
   SCROLLBAR
   ========================================================= */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #b8c2cc;
    border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
    background: #98a6b5;
}

/* =========================================================
   LAYOUT HELPERS
   ========================================================= */
.page-wrapper,
.content-wrapper {
    background: var(--body-bg);
    color: var(--body-color);
}

.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

.content-header {
    padding: var(--space-4) var(--space-4);
}

.content {
    padding: 0 var(--space-4) var(--space-4) var(--space-4);
}

/* =========================================================
   CARD SYSTEM
   ========================================================= */
.card {
    background: var(--card-bg);
    color: var(--card-color);
    border: 1px solid var(--card-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-4);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--card-border);
    padding: var(--space-4) var(--space-5);
    min-height: auto;
}

.card-title {
    font-size: 0.9375rem;
    font-weight: 600;
    margin: 0;
}

.card-body {
    padding: var(--space-5);
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--card-border);
    padding: var(--space-4) var(--space-5);
}

/* =========================================================
   FORM LABELS
   ========================================================= */
label,
.form-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--space-2);
    color: #344054;
}
/* =========================================================
   INPUTS / SELECTS / TEXTAREA
   RULE: no top/bottom padding
   ========================================================= */
.form-control,
.form-select,
textarea.form-control,
select.form-select {
    background-color: var(--input-bg);
    color: var(--input-color);
    border: 1px solid var(--input-border);
    border-radius: var(--radius-sm);
    box-shadow: none !important;
    font-size: var(--font-size-sm);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
    min-height: var(--control-height);
    height: var(--control-height);
    line-height: calc(var(--control-height) - 2px);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

textarea.form-control {
    min-height: 80px;
    height: auto;
    line-height: 1.35;
    padding-top: var(--space-3) !important;
    padding-bottom: var(--space-3) !important;
    resize: vertical;
}

.form-control::placeholder,
textarea.form-control::placeholder {
    color: var(--input-placeholder);
    opacity: 1;
}

.form-select {
    color: var(--input-color);
    background-color: var(--input-bg);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
textarea.form-control:disabled {
    background-color: var(--input-disabled-bg);
    color: var(--input-disabled-color);
    border-color: var(--input-disabled-border);
    cursor: not-allowed;
}

/* =========================================================
   GLOBAL ACTIVE / FOCUS FIELD SYSTEM
   DYNAMIC THEME-READY
   ========================================================= */
input:focus,
select:focus,
textarea:focus,
.form-control:focus,
.form-select:focus,
textarea.form-control:focus,
input:active,
select:active,
textarea:active,
.form-control:active,
.form-select:active,
textarea.form-control:active {
    outline: none !important;
    box-shadow: none !important;
    background-color: var(--theme-input-focus-bg) !important;
    color: var(--theme-input-focus-text) !important;
    border-color: var(--theme-input-focus-border) !important;
}

input:focus::placeholder,
textarea:focus::placeholder,
.form-control:focus::placeholder,
textarea.form-control:focus::placeholder {
    color: var(--theme-input-focus-placeholder) !important;
}

select:focus,
.form-select:focus {
    color: var(--theme-input-focus-text) !important;
}

/* Selected option text for some browsers */
.form-select:focus option,
select:focus option,
.form-select option,
select option {
    color: #212529 !important;
    background-color: #ffffff !important;
}

.form-select:focus option:checked,
select:focus option:checked,
.form-select option:checked,
select option:checked {
    color: var(--ts-select-dropdown-active-text, #ffffff) !important;
    background: var(--ts-select-dropdown-active-bg, var(--ts-modal-header-bg, var(--theme-primary, #0d6efd))) !important;
}

select:focus,
.form-select:focus {
    color-scheme: light;
}

/* Active field class for JS/manual use */
.field-active,
.form-control.field-active,
.form-select.field-active,
textarea.form-control.field-active {
    background-color: var(--theme-input-focus-bg) !important;
    color: var(--theme-input-focus-text) !important;
    border-color: var(--theme-input-focus-border) !important;
}

.field-active::placeholder,
.form-control.field-active::placeholder,
textarea.form-control.field-active::placeholder {
    color: var(--theme-input-focus-placeholder) !important;
}

/* Input group */
.input-group > .form-control,
.input-group > .form-select {
    position: relative;
    flex: 1 1 auto;
}

.input-group-text {
    min-height: var(--control-height);
    padding: 0 var(--space-4);
    font-size: var(--font-size-sm);
    border-radius: var(--radius-sm);
    background: #f8fafc;
    border: 1px solid var(--input-border);
    color: #495057;
}

/* =========================================================
   CHECKBOX / RADIO
   ========================================================= */
.form-check {
    min-height: auto;
    margin-bottom: var(--space-2);
}

.form-check-input {
    margin-top: 0.15rem;
    box-shadow: none !important;
}

.form-check-input:checked {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

.form-check-label {
    font-size: var(--font-size-sm);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0 var(--space-4);
    min-height: var(--control-height);
    height: var(--control-height);
    line-height: calc(var(--control-height) - 2px);
    box-shadow: none !important;
    transition: all 0.2s ease-in-out;
}

.btn-sm {
    min-height: var(--control-height-sm);
    height: var(--control-height-sm);
    line-height: calc(var(--control-height-sm) - 2px);
    font-size: var(--font-size-xs);
    padding: 0 var(--space-3);
}

.btn-lg {
    min-height: var(--control-height-lg);
    height: var(--control-height-lg);
    line-height: calc(var(--control-height-lg) - 2px);
    padding: 0 var(--space-5);
}

.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-border);
    color: var(--btn-primary-color);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-color);
}

.btn-success {
    background-color: var(--btn-success-bg);
    border-color: var(--btn-success-border);
    color: var(--btn-success-color);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-border);
    color: var(--btn-danger-color);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-border);
    color: var(--btn-warning-color);
}

.btn-info {
    background-color: var(--btn-info-bg);
    border-color: var(--btn-info-border);
    color: var(--btn-info-color);
}
/* =========================================================
   TABLE SYSTEM
   ========================================================= */
.table {
    --bs-table-bg: var(--table-bg);
    --bs-table-color: var(--table-color);
    margin-bottom: 0;
    vertical-align: middle;
}

.table > :not(caption) > * > * {
    padding: 0.45rem 0.55rem;
    border-bottom-color: var(--table-border);
}

.table thead th {
    background: var(--table-head-bg);
    color: var(--table-head-color);
    font-size: var(--font-size-sm);
    font-weight: 700;
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    font-size: var(--font-size-sm);
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: var(--table-row-hover);
}

.table-responsive {
    overflow-x: auto;
    overflow-y: hidden;
    border-radius: var(--radius-sm);
}

/* =========================================================
   BADGES
   ========================================================= */
.badge {
    border-radius: var(--badge-radius);
    font-size: var(--font-size-xs);
    font-weight: 600;
    padding: 0.35em 0.5em;
}

/* =========================================================
   DROPDOWNS
   ========================================================= */
.dropdown-menu {
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-color);
    box-shadow: var(--shadow-md);
    padding: var(--space-2);
    font-size: var(--font-size-sm);
}

.dropdown-item {
    border-radius: var(--radius-xs);
    padding: 0.4rem 0.55rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(var(--theme-primary-rgb), 0.08);
    color: var(--theme-primary);
}

/* =========================================================
   MODALS
   ========================================================= */
.modal-content {
    border-radius: var(--radius-md);
    border: 1px solid var(--border-color);
}

.modal-header,
.modal-footer {
    padding: var(--space-4) var(--space-5);
}

.modal-body {
    padding: var(--space-5);
}

/* =========================================================
   NAV TABS
   ========================================================= */
.nav-tabs {
    border-bottom: 1px solid var(--border-color);
}

.nav-tabs .nav-link {
    border: none;
    border-radius: 0;
    color: #495057;
    font-size: var(--font-size-sm);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
}

.nav-tabs .nav-link.active {
    color: var(--theme-primary);
    background-color: transparent;
    border-bottom: 2px solid var(--theme-primary);
}

/* =========================================================
   PAGINATION
   ========================================================= */
.pagination {
    margin-bottom: 0;
}

.page-link {
    color: var(--theme-primary);
    border-color: var(--border-color);
    padding: 0.3rem 0.6rem;
    font-size: var(--font-size-sm);
    box-shadow: none !important;
}

.page-item.active .page-link {
    background-color: var(--theme-primary);
    border-color: var(--theme-primary);
}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-xs { font-size: var(--font-size-xs) !important; }
.text-sm { font-size: var(--font-size-sm) !important; }

.radius-xs { border-radius: var(--radius-xs) !important; }
.radius-sm { border-radius: var(--radius-sm) !important; }
.radius-md { border-radius: var(--radius-md) !important; }
.radius-lg { border-radius: var(--radius-lg) !important; }

.shadow-sm-custom { box-shadow: var(--shadow-sm) !important; }
.shadow-md-custom { box-shadow: var(--shadow-md) !important; }

.compact-gap-1 { gap: var(--space-1) !important; }
.compact-gap-2 { gap: var(--space-2) !important; }
.compact-gap-3 { gap: var(--space-3) !important; }
.compact-gap-4 { gap: var(--space-4) !important; }

.compact-p-1 { padding: var(--space-1) !important; }
.compact-p-2 { padding: var(--space-2) !important; }
.compact-p-3 { padding: var(--space-3) !important; }
.compact-p-4 { padding: var(--space-4) !important; }

.compact-m-0 { margin: 0 !important; }
.compact-mb-1 { margin-bottom: var(--space-1) !important; }
.compact-mb-2 { margin-bottom: var(--space-2) !important; }
.compact-mb-3 { margin-bottom: var(--space-3) !important; }
.compact-mb-4 { margin-bottom: var(--space-4) !important; }

/* =========================================================
   FOCUS ACCESSIBILITY
   ========================================================= */
button:focus,
.btn:focus,
.form-control:focus,
.form-select:focus,
.page-link:focus {
    box-shadow: none !important;
}

/* =========================================================
   ADMINLTE SMALL FIXES
   ========================================================= */
.main-header {
    min-height: var(--topbar-height);
    background: var(--topbar-bg);
    color: var(--topbar-color);
    border-bottom: 1px solid var(--border-color);
}

.main-sidebar {
    background-color: var(--sidebar-bg);
    color: var(--sidebar-color);
}

.nav-sidebar .nav-link {
    border-radius: var(--radius-sm);
    margin: 2px 6px;
    padding: 0.45rem 0.65rem;
    font-size: var(--font-size-sm);
    color: var(--sidebar-color);
}

.nav-sidebar .nav-link:hover {
    background: var(--sidebar-hover-bg);
    color: var(--sidebar-hover-color);
}

.nav-sidebar .nav-link.active {
    background: var(--sidebar-active-bg);
    color: var(--sidebar-active-color);
}

.nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 1.75rem;
}

/* =========================================================
   END
   ========================================================= */