html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

input::placeholder, textarea::placeholder,
.form-control::placeholder, .form-control-plaintext::placeholder,
.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: #94a3b8;
  font-style: italic;
  opacity: 1;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}
:root { --app-header-height: 72px; --page-toolbar-height: 0px; }
body { margin-bottom: 0; min-height: 100vh; }
.app-header { position: sticky; top: 0; z-index: 1050; background: white; border-top: 5px solid var(--company-color); }
.app-header .navbar { margin-bottom: 0 !important; padding-block: 0; min-height: 60px; }
.app-header .container, body > .container { width: 100%; padding-inline: clamp(12px, 2vw, 32px); }
.app-header .container { max-width: none; }
body > .container { max-width: 1800px; }
.company-brand { display: flex; gap: 12px; align-items: center; max-width: 70%; text-align: left !important; word-break: normal !important; }
.company-brand span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.company-brand.has-company-logo { height: 60px; padding-block: 0; }
.company-logo { width: auto; height: 100%; max-width: 100%; min-width: 0; object-fit: contain; flex: 0 1 auto; }
.app-header .navbar > .container { flex-wrap: nowrap; gap: 10px; min-height: 60px; }
.app-menu-toggle { flex: 0 0 44px; width: 44px; height: 44px; padding: 8px; color: #334155; }
.app-menu-toggle:hover { background: #eef2f6; }
.app-header .company-brand { margin-right: auto; min-width: 0; }
.nav-icon { flex-shrink: 0; vertical-align: middle; }
.app-side-menu .nav-icon, .app-side-menu .submenu-chevron { color: var(--company-color); }
.page-icon-heading { display: inline-flex; align-items: center; justify-content: flex-start; flex: 0 0 auto; width: 44px; height: 44px; margin: 0; margin-inline-end: 12px; color: var(--company-color); line-height: 1; }
.page-icon-heading .nav-icon { width: 43.2px; height: 43.2px; }
.page-title-row .page-icon-heading { flex: 0 0 auto; margin-inline-end: 12px !important; }
.app-side-menu { --bs-offcanvas-width: min(310px, 88vw); --bs-offcanvas-zindex: 1060; z-index: 1060; border-right: 2px solid var(--company-color); }
.offcanvas-backdrop { z-index: 1055; }
.app-side-menu .offcanvas-header { border-bottom: 1px solid #e2e8f0; min-height: 64px; }
.app-side-menu .offcanvas-body { display: flex; flex-direction: column; padding: 12px; }
.side-menu-admin { margin-top: auto; padding-top: 12px; flex-shrink: 0; }
.side-menu-admin hr { margin: 0 0 12px; border-color: #94a3b8; }
.admin-submenu summary, .settings-submenu summary { cursor: pointer; list-style: none; }
.admin-submenu summary::-webkit-details-marker, .settings-submenu summary::-webkit-details-marker { display: none; }
.submenu-chevron { margin-left: auto; flex-shrink: 0; }
.admin-submenu[open] .submenu-chevron, .settings-submenu[open] .submenu-chevron { transform: rotate(180deg); }
.admin-submenu-links, .settings-submenu-links { padding-left: 14px; }
.side-menu-settings { padding-top: 12px; flex-shrink: 0; }
.side-menu-settings hr { margin: 0 0 12px; border-color: #94a3b8; }
.side-menu-module { flex-shrink: 0; }
.side-menu-module-title { font-size: .8rem; font-weight: 700; color: #64748b; padding: 12px 12px 4px; margin: 0; }
.side-menu-link { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 10px 12px; margin-bottom: 4px; border-radius: 6px; color: #334155; text-decoration: none; }
.side-menu-link:hover { background: #f1f5f9; color: #0f172a; }
.side-menu-link.active { background: #eaf1fb; color: #174ea6; font-weight: 600; box-shadow: inset 3px 0 var(--company-color); }
.side-menu-link:focus-visible { outline: 2px solid #258cfb; outline-offset: -2px; }
.company-logo-preview { max-width: 240px; max-height: 120px; object-fit: contain; align-self: start; }
.page-toolbar { position: sticky; top: var(--app-header-height); z-index: 1020; background: #fff; padding: 12px 0 1px; border-bottom: 2px solid var(--company-color); margin-bottom: 12px; }
.page-toolbar h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.page-filters { max-height: 36dvh; overflow-y: auto; overscroll-behavior: contain; }
.page-filters[hidden] { display: none !important; }
.filter-toggle { min-height: 40px; min-width: 44px; }
.page-title-block { display: block !important; }
.page-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.page-title-row h1 { margin: 0 !important; flex: 1 1 auto; }
.table-controls { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-left: auto; }
.quick-search { display: flex; align-items: stretch; width: clamp(220px, 30vw, 440px); border: 1px solid #adb5bd; border-radius: 6px; background: white; }
.quick-search:focus-within { border-color: #86b7fe; box-shadow: 0 0 0 .2rem rgba(13, 110, 253, .18); }
.quick-search input { min-width: 0; border: 0; border-radius: 6px 0 0 6px; background: transparent; }
.quick-search input:focus { box-shadow: none; }
.quick-search button { flex-shrink: 0; border: 0; border-radius: 0; min-width: 44px; }
.quick-search button:last-child { border-radius: 0 5px 5px 0; }
.quick-search .filter-toggle { border-left: 1px solid #dee2e6; }
.column-sort { border: 0; background: transparent; color: inherit; font: inherit; font-weight: inherit; padding: 4px 0; text-align: inherit; }
.column-sort::after { content: ' ↕'; color: #64748b; }
th[aria-sort="ascending"] .column-sort::after { content: ' ↑'; color: #174ea6; }
th[aria-sort="descending"] .column-sort::after { content: ' ↓'; color: #174ea6; }
.column-sort:focus-visible { outline: 2px solid #258cfb; outline-offset: 2px; }
.mobile-table-sort { display: none; }
.responsive-records tr[hidden] { display: none !important; }
html, .table-responsive, .page-filters { scrollbar-width: thin; scrollbar-color: transparent transparent; }
html:hover, html:focus-within, .table-responsive:hover, .table-responsive:focus-within, .page-filters:hover, .page-filters:focus-within { scrollbar-color: #8794a5 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; }
:hover::-webkit-scrollbar-thumb, :focus-within::-webkit-scrollbar-thumb { background: #8794a5; }
.table-responsive { max-height: max(220px, calc(100dvh - var(--app-header-height) - var(--page-toolbar-height) - 100px)); overflow: auto; scrollbar-gutter: stable; }
.table thead th { position: sticky; top: 0; z-index: 2; background: #eef2f6; box-shadow: 0 1px #cdd5df; white-space: nowrap; }
.table td { vertical-align: middle; overflow-wrap: anywhere; }
.table td .btn, .table td button { min-height: 40px; }
.list-pager { display: flex; gap: 12px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px 0 20px; }
.list-pager .btn { min-height: 44px; }
@media (max-width: 767px) {
    .page-title-row { flex-wrap: wrap; }
    .table-controls { width: 100%; }
    .quick-search { width: auto; flex: 1; }
    .mobile-table-sort { display: block; margin-bottom: 12px; }
    .page-toolbar > div { flex-wrap: wrap; gap: 8px; }
    .page-toolbar h1 { font-size: 1.2rem; margin-bottom: 4px; }
    .page-toolbar p { font-size: .85rem; }
    .page-filters { max-height: 40dvh; }
    .form-control, .form-select { font-size: 16px; min-height: 44px; }
    .table-responsive { max-height: none; overflow: visible; }
    .responsive-records thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .responsive-records, .responsive-records tbody { display: block; width: 100%; }
    .responsive-records tr { display: block; padding: 10px; margin-bottom: 12px; border: 1px solid #dce2e8; border-left: 4px solid var(--company-color); border-radius: 8px; background: white; }
    .responsive-records td { display: grid; grid-template-columns: minmax(90px, 32%) minmax(0, 1fr); gap: 10px; padding: 8px 4px; border: 0; box-shadow: none !important; background: transparent !important; white-space: normal !important; }
    .responsive-records td::before { content: attr(data-label); font-weight: 600; color: #516173; }
    .cell-value { min-width: 0; }
    .list-pager { position: sticky; bottom: 0; z-index: 1010; background: white; border-top: 1px solid #dce2e8; padding: 10px 0; }
}
.search-input-wrap{display:block;position:relative;flex:1 1 auto;min-width:0;width:100%}.has-search-clear{position:relative}.has-search-clear>input.search-clearable,.calendar-picker.has-search-clear>input.search-clearable{padding-right:2.2rem}.has-search-clear>.search-clear{position:absolute;right:3px;top:0;bottom:0;margin:auto;height:32px;width:32px;min-width:32px;padding:0;border:0;border-radius:4px;background:transparent;color:#64748b;display:flex;align-items:center;justify-content:center;z-index:2}.has-search-clear>.search-clear[hidden]{display:none}.search-clear:hover{color:#1e293b;background:#e2e8f0}.search-clear:focus-visible{outline:2px solid #3074bc;outline-offset:-2px}.search-clearable::-webkit-search-cancel-button{-webkit-appearance:none}.input-group>.search-input-wrap{flex:1 1 0;width:1%}.quick-search>.search-input-wrap{flex:1;min-width:0}.quick-search .search-clear{min-width:32px}.input-group>.search-input-wrap:not(:last-child)>input{border-top-right-radius:0;border-bottom-right-radius:0}