@import url('./fonts/montserrat.css');

:root,
html[data-bs-theme='light'] {
  color-scheme: light;
  --zf-bg: #ffffff;
  --zf-surface: #ffffff;
  --zf-surface-2: #f8f8f7;
  --zf-line: #e8e7e5;
  --zf-line-strong: #c9c5bf;
  --zf-ink: #252525;
  --zf-ink-2: #62605d;
  --zf-muted: #74716c;
  --zf-accent: #925723;
  --zf-accent-rgb: 146, 87, 35;
  --zf-accent-soft: #fbf3eb;
  --zf-accent-border: #e7c8aa;
  --zf-button: #dca167;
  --zf-button-hover: #d09964;
  --zf-button-ink: #25211d;
  --bs-body-bg: var(--zf-bg);
  --bs-body-bg-rgb: 255, 255, 255;
  --bs-body-color: var(--zf-ink);
  --bs-body-color-rgb: 37, 37, 37;
  --bs-heading-color: var(--zf-ink);
  --bs-emphasis-color: var(--zf-ink);
  --bs-secondary-bg: var(--zf-surface-2);
  --bs-tertiary-bg: var(--zf-surface-2);
  --bs-secondary-color: var(--zf-ink-2);
  --bs-tertiary-color: var(--zf-muted);
  --bs-gray-100: var(--zf-surface-2);
  --bs-gray-200: var(--zf-line);
  --bs-gray-300: var(--zf-line-strong);
  --bs-gray-400: #a6a19a;
  --bs-gray-500: var(--zf-muted);
  --bs-gray-600: var(--zf-ink-2);
  --bs-gray-700: var(--zf-ink-2);
  --bs-gray-800: var(--zf-ink);
  --bs-gray-900: var(--zf-ink);
  --bs-text-gray-100: var(--zf-surface-2);
  --bs-text-gray-200: var(--zf-line);
  --bs-text-gray-300: var(--zf-line-strong);
  --bs-text-gray-400: #a6a19a;
  --bs-text-gray-500: var(--zf-muted);
  --bs-text-gray-600: var(--zf-ink-2);
  --bs-text-gray-700: var(--zf-ink-2);
  --bs-text-gray-800: var(--zf-ink);
  --bs-text-gray-900: var(--zf-ink);
  --bs-text-muted: var(--zf-muted);
  --bs-primary: var(--zf-accent);
  --bs-primary-rgb: var(--zf-accent-rgb);
  --bs-primary-active: var(--zf-accent);
  --bs-primary-light: var(--zf-accent-soft);
  --bs-primary-inverse: var(--zf-button-ink);
  --bs-primary-clarity: rgba(var(--zf-accent-rgb), .15);
  --bs-text-primary: var(--zf-accent);
  --bs-primary-text-emphasis: var(--zf-accent);
  --bs-primary-bg-subtle: var(--zf-accent-soft);
  --bs-primary-border-subtle: var(--zf-accent-border);
  --bs-link-color: var(--zf-accent);
  --bs-link-color-rgb: var(--zf-accent-rgb);
  --bs-link-hover-color: var(--zf-ink);
  --bs-link-hover-color-rgb: 37, 37, 37;
  --bs-border-color: var(--zf-line);
  --bs-border-color-translucent: var(--zf-line);
  --bs-border-radius: 4px;
  --bs-border-radius-sm: 3px;
  --bs-border-radius-lg: 6px;
  --bs-border-radius-xl: 8px;
  --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --bs-body-font-family: var(--bs-font-sans-serif);
  --bs-body-line-height: 1.6;
  --bs-component-active-color: var(--zf-button-ink);
  --bs-component-active-bg: var(--zf-button);
  --bs-component-hover-color: var(--zf-accent);
  --bs-component-hover-bg: var(--zf-accent-soft);
  --bs-component-checked-color: var(--zf-button-ink);
  --bs-component-checked-bg: var(--zf-button);
  --bs-root-card-border-color: var(--zf-line);
  --bs-root-card-box-shadow: none;
  --bs-menu-dropdown-bg-color: var(--zf-surface);
  --bs-menu-dropdown-box-shadow: 0 8px 24px rgb(37 37 37 / .08);
  --bs-menu-link-color-hover: var(--zf-accent);
  --bs-menu-link-color-active: var(--zf-accent);
  --bs-menu-link-bg-color-hover: var(--zf-accent-soft);
  --bs-menu-link-bg-color-active: var(--zf-accent-soft);
  --bs-app-bg-color: var(--zf-surface-2);
  --bs-app-blank-bg-color: var(--zf-surface-2);
  --bs-app-header-base-bg-color: var(--zf-surface);
  --bs-app-header-minimize-bg-color: var(--zf-surface);
  --bs-app-sidebar-base-bg-color: var(--zf-surface);
  --bs-app-sidebar-base-box-shadow: none;
  --bs-app-sidebar-base-border-end: 1px solid var(--zf-line);
}

html[data-bs-theme='dark'] {
  color-scheme: dark;
  --zf-bg: #17191b;
  --zf-surface: #1d2023;
  --zf-surface-2: #25282c;
  --zf-line: #383b3f;
  --zf-line-strong: #585c61;
  --zf-ink: #f1f0ee;
  --zf-ink-2: #c4c1bd;
  --zf-muted: #a5a29d;
  --zf-accent: #e8b27d;
  --zf-accent-rgb: 232, 178, 125;
  --zf-accent-soft: #352b23;
  --zf-accent-border: #775637;
  --zf-button: #e8b27d;
  --zf-button-hover: #f0c091;
  --zf-button-ink: #241c15;
  --bs-body-bg-rgb: 23, 25, 27;
  --bs-body-color-rgb: 241, 240, 238;
  --bs-link-hover-color-rgb: 241, 240, 238;
  --bs-gray-400: #a5a29d;
  --bs-text-gray-400: #a5a29d;
  --bs-menu-dropdown-box-shadow: 0 8px 24px rgb(0 0 0 / .2);
}

html { scrollbar-color: var(--zf-line-strong) var(--zf-surface-2); }
body { font-family: var(--bs-font-sans-serif); color: var(--zf-ink); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: var(--bs-font-sans-serif); }
::selection { color: var(--zf-ink); background: var(--zf-accent-border); }
:focus-visible { outline: 2px solid var(--zf-accent); outline-offset: 3px; }
body.app-default { background: var(--zf-bg); }
#kt_app_header { border-bottom: 1px solid var(--zf-line); }
#kt_app_sidebar .text-sidebar { color: var(--zf-ink); letter-spacing: -.03em; }
#kt_app_sidebar_header { padding-top: 1.5rem !important; }
#kt_app_sidebar_header .mb-13 { margin-bottom: 2rem !important; }
#kt_app_sidebar .menu-link { border: 1px solid transparent; border-radius: 4px; color: var(--zf-ink-2); }
#kt_app_sidebar .menu-link .menu-title { color: inherit; font-size: .95rem; font-weight: 500; }
#kt_app_sidebar .menu-link .menu-icon i { color: var(--zf-muted) !important; }
#kt_app_sidebar .menu-link:hover, #kt_app_sidebar .menu-link.active { color: var(--zf-accent); background: var(--zf-accent-soft); }
#kt_app_sidebar .menu-link.active { border-color: var(--zf-accent-border); }
#kt_app_sidebar .menu-link.active .menu-title { font-weight: 600; }
#kt_app_sidebar .menu-link:hover .menu-icon i, #kt_app_sidebar .menu-link.active .menu-icon i { color: var(--zf-accent) !important; }
#kt_app_header_navbar .btn-icon { color: var(--zf-ink-2); border-radius: 4px; }
.app-sidebar-logo { display: flex; align-items: center; }
.app-sidebar-logo img { width: 36px; height: 36px !important; object-fit: contain; }
#kt_app_main, #kt_app_content, #kt_app_content_container { min-width: 0; }
#kt_app_footer { color: var(--zf-muted); border-top: 1px solid var(--zf-line); margin-top: 1.5rem; }
.card { --bs-card-bg: var(--zf-surface); --bs-card-border-color: var(--zf-line); border: 1px solid var(--zf-line); border-radius: 6px; }
.card.shadow-sm { box-shadow: none !important; }
.card.card-flush > .card-header { border-bottom: 1px solid var(--zf-line); }
.card > .card-header { padding: .85rem 1.5rem !important; min-height: 4.5rem; }
.card > .card-body { padding: 1.5rem; }
.card .card-title h1, .card .card-title h2, .card .card-title h3 { letter-spacing: -.025em; font-weight: 600 !important; }
.btn { border-radius: 4px; font-weight: 600; }
.btn.btn-primary { color: var(--zf-button-ink); border-color: var(--zf-button); background: var(--zf-button); }
.btn.btn-primary:not(:disabled):not(.disabled):hover, .btn.btn-primary:not(:disabled):not(.disabled):focus-visible,
.btn.btn-primary:not(:disabled):not(.disabled):active, .btn.btn-primary.active, .btn.btn-primary.show { color: var(--zf-button-ink) !important; border-color: var(--zf-button-hover) !important; background: var(--zf-button-hover) !important; }
.btn.btn-primary i, .btn.btn-primary .svg-icon { color: var(--zf-button-ink) !important; }
.btn.btn-light-primary, .btn.btn-secondary, .btn.btn-light { border-color: var(--zf-line); }
.btn.btn-light-primary { background: var(--zf-accent-soft); }
.btn.btn-secondary { color: var(--zf-ink); background: var(--zf-surface-2); }
.btn.btn-light { color: var(--zf-ink-2); background: var(--zf-surface-2); }
.btn.btn-light i, .btn.btn-light .svg-icon { color: var(--zf-ink-2); }
.btn.btn-light-primary:not(:disabled):hover, .btn.btn-secondary:not(:disabled):hover, .btn.btn-light:not(:disabled):hover { color: var(--zf-accent) !important; border-color: var(--zf-accent-border) !important; background: var(--zf-accent-soft) !important; }
.btn:disabled, .btn.disabled { opacity: .55; }
.form-control, .form-select, .select2-container--bootstrap5 .select2-selection { border-color: var(--zf-line-strong); border-radius: 4px; color: var(--zf-ink); background-color: var(--zf-surface); }
.form-control.form-control-solid, .form-select.form-select-solid { color: var(--zf-ink); border-color: var(--zf-line); background-color: var(--zf-surface-2); }
.form-control:focus, .form-control.form-control-solid:focus, .form-select:focus, .select2-container--focus .select2-selection { color: var(--zf-ink); border-color: var(--zf-accent); background-color: var(--zf-surface); box-shadow: 0 0 0 3px rgba(var(--zf-accent-rgb), .13); }
.form-control::placeholder { color: var(--zf-muted); opacity: 1; }
.form-control:disabled, .form-control[readonly], .form-select:disabled { color: var(--zf-muted); background-color: var(--zf-surface-2); }
.form-label, .form-check-label { color: var(--zf-ink-2); }
.form-check-input { border-color: var(--zf-line-strong); background-color: var(--zf-surface); }
.form-check-input:checked, .form-check-input:indeterminate { border-color: var(--zf-accent); background-color: var(--zf-accent); }
.form-check-input:focus { border-color: var(--zf-accent); box-shadow: 0 0 0 3px rgba(var(--zf-accent-rgb), .13); }
.select2-dropdown, .select2-selection__choice { border-color: var(--zf-line) !important; background-color: var(--zf-surface) !important; }
.select2-results__option--highlighted { color: var(--zf-accent) !important; background-color: var(--zf-accent-soft) !important; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--zf-ink-2); --bs-table-border-color: var(--zf-line); }
.table > thead > tr > th { color: var(--zf-muted); font-weight: 500 !important; font-size: .8rem !important; padding-bottom: 1rem; }
.table.table-row-dashed tr { border-bottom-style: solid; }
.table > tbody > tr > td { padding-top: .85rem; padding-bottom: .85rem; }
.table > tbody > tr:hover { --bs-table-bg: var(--zf-surface-2); }
.table .btn-icon { border-radius: 4px; }
.page-item.active .page-link { color: var(--zf-button-ink); background: var(--zf-button); }
.page-link:focus-visible { box-shadow: none; }
.badge-light-primary { border: 1px solid var(--zf-accent-border); }
[data-kt-filemanager-table-nav-bar='base'] { padding: .65rem .85rem; font-weight: 500; }
.dropzone { border: 1px dashed var(--zf-accent-border); border-radius: 6px; background: var(--zf-accent-soft); }
.progress { background: var(--zf-line); border-radius: 3px; }
.progress-bar { background-color: var(--zf-accent); }
.menu-sub-dropdown, .modal-content { border: 1px solid var(--zf-line); border-radius: 6px; background: var(--zf-surface); }
.modal-header, .modal-footer, .separator { border-color: var(--zf-line); }
.menu .menu-item .menu-link.active:not(.text-danger) { color: var(--zf-accent); background-color: var(--zf-accent-soft); }
.nav-line-tabs .nav-link.active, .nav-line-tabs .nav-link:hover { color: var(--zf-accent) !important; border-bottom-color: var(--zf-accent) !important; }
.app-blank { background-color: var(--zf-surface-2); }
.app-blank #app_root > div > div { padding: 2rem !important; }
.app-blank .bg-body { width: min(100%, 440px) !important; padding: 2.25rem !important; border: 1px solid var(--zf-line); border-top: 3px solid var(--zf-accent); border-radius: 6px !important; background: var(--zf-surface) !important; box-shadow: none !important; }
#sign_in_form > .container { padding: 0; margin-bottom: 1.8rem !important; }
#sign_in_form > .container .row { flex-wrap: nowrap; gap: 1rem; margin: 0; }
#sign_in_form > .container .col-5 { width: auto; padding: 0; }
#sign_in_form > .container .col-7 { flex: 1; width: auto; padding: 0; }
#sign_in_form > .container img { width: 58px; height: 58px !important; object-fit: contain; }
#sign_in_form h1 { font-size: 1.65rem; letter-spacing: -.04em; margin: 0 !important; }
#sign_in_form .fv-row { margin-bottom: 1.25rem !important; }
#sign_in_form .form-control { min-height: 3.25rem; font-size: 1rem; }
#sign_in_submit { min-height: 3.25rem; margin-top: .25rem; }
.app-blank hr { border-color: var(--zf-line); opacity: 1; }
.app-blank .btn[data-password-control='visibility'] { color: var(--zf-muted); }

@media (max-width: 575.98px) {
  .app-blank #app_root > div > div { padding: 1rem !important; }
  .app-blank .bg-body { padding: 1.5rem !important; }
  .card > .card-header { padding: 1rem !important; gap: .5rem; }
  .card > .card-body { padding: 1rem; }
  .card-title .w-250px { width: min(250px, 100%) !important; }
  .card .card-toolbar { max-width: 100%; flex-wrap: wrap; gap: .5rem; }
  .card .card-toolbar > div { flex-wrap: wrap; gap: .5rem; }
  .modal-dialog { margin: .75rem; }
}