/* Shared by ParkingAI and MarineAI; tokens.css owns all visual values. */
body[data-app] {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  --blue: var(--accent);
  --primary: var(--accent);
}
body[data-app] *, body[data-app] *::before, body[data-app] *::after { box-sizing: border-box; }
:where(body[data-app]) a { color: var(--accent-strong); }
:where(body[data-app]) a:hover { color: var(--accent); }
body[data-app] a, body[data-app] button, body[data-app] input, body[data-app] select, body[data-app] textarea {
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
body[data-app] a:focus-visible, body[data-app] button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; box-shadow: 0 0 0 4px var(--accent-soft); }
body[data-app] .text-muted { color: var(--text-muted) !important; }
body[data-app] .text-primary, body[data-app] .text-primary-all *, body[data-app] .text-primary-all *::before,
body[data-app] .text-primary-all *::after { color: var(--accent-strong) !important; }
body[data-app] .text-success, body[data-app] .text-green { color: var(--success) !important; }
body[data-app] .text-danger, body[data-app] .text-red { color: var(--danger) !important; }
body[data-app] .text-warning, body[data-app] .text-yellow { color: var(--warning) !important; }
body[data-app] .text-info, body[data-app] .text-aqua, body[data-app] .text-light-blue { color: var(--info) !important; }
body[data-app] .wrapper, body[data-app] .main-wrapper, body[data-app] .section-body { min-width: 0; }
body[data-app] .content-wrapper, body[data-app] .main-content { background: var(--bg); min-width: 0; }
body[data-app] .main-content { padding: 96px 24px 24px 284px; transition: padding var(--dur) var(--ease); }
body[data-app] .content-header, body[data-app] .section .section-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  margin-bottom: 24px;
  padding: 24px;
}
body[data-app] .content-header > h1, body[data-app] .section .section-header h1 {
  color: var(--text); font-size: 26px; font-weight: 600; letter-spacing: -.6px; line-height: 1.35; margin: 0;
}
body[data-app] .section-header h1 { display: flex; flex: 1; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
body[data-app] .section-header h1 > .btn:first-of-type { margin-left: auto; }
body[data-app] .section-header h1 > i { color: var(--accent); font-size: 20px; }
body[data-app] .section-header h1 small { color: var(--text-muted); font-size: 14px; font-weight: 400; }
body[data-app] .breadcrumb, body[data-app] .breadcrumb a { background: none; color: var(--text-muted); font-size: 12px; }
body[data-app] .section-title { color: var(--text); font-weight: 600; }
body[data-app] .section .section-title::before { background: var(--accent) !important; }

/* Stisla layout in the supplied views, plus AdminLTE component compatibility. */
body[data-app] .navbar-bg, body[data-app] .main-navbar, body[data-app] .main-header .navbar,
body[data-app] .navbar.active {
  background: var(--surface) !important; border-bottom: 1px solid var(--border); box-shadow: none;
}
body[data-app] .navbar-bg { height: 72px; }
body[data-app] .main-navbar { top: 0; left: 260px; right: 0; height: 72px; padding: 0 24px; gap: 12px; transition: left var(--dur) var(--ease); }
body[data-app] .main-navbar .form-inline { min-width: 0; flex: 1; }
body[data-app] .main-navbar .form-inline > ul { align-items: center; min-width: 0; margin: 0 !important; }
body[data-app] .main-navbar .form-inline li:last-child { min-width: 0; }
body[data-app] .main-navbar .nav-link, body[data-app] .main-header .navbar .nav > li > a { color: var(--text-2); }
body[data-app] .main-navbar .nav-link:hover, body[data-app] .main-header .navbar .nav > li > a:hover { background: var(--surface-2); color: var(--accent-strong); }
body[data-app] .main-navbar .nav-link-lg { padding: 8px 12px !important; border-radius: var(--radius-sm); }
body[data-app] .main-navbar .navbar-right { flex-shrink: 0; margin: 0; }
body[data-app] .nav-link-user { display: flex; align-items: center; gap: 8px; max-width: 220px; white-space: nowrap; }
body[data-app] .nav-link-user > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
body[data-app] .nav-link-user > i { flex-shrink: 0; }
body[data-app] .pui-org { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; color: var(--text-muted); font-size: 12px; }
body[data-app] .pui-org b { color: var(--text-2); font-weight: 600; }
body[data-app] .pui-org i { margin-right: 8px; color: var(--accent); }
body[data-app] .pui-guide-btn { flex-shrink: 0; padding: 8px 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); border-radius: var(--radius-sm); font: inherit; cursor: pointer; }
body[data-app] .pui-guide-btn:hover { background: var(--accent-soft); color: var(--accent-strong); border-color: var(--accent); }
body[data-app] .pui-guide-count { background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-pill); }
body[data-app] .main-header .logo { background: var(--sidebar-bg) !important; color: var(--sidebar-active) !important; font-family: var(--font-sans); font-weight: 600; }
body[data-app] .main-sidebar { width: 260px; background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-bg-2); box-shadow: none; transition: width var(--dur) var(--ease), left var(--dur) var(--ease), transform var(--dur) var(--ease); }
body[data-app] .main-sidebar #sidebar-wrapper { display: flex; flex-direction: column; min-height: 100%; }
body[data-app] .main-sidebar .sidebar-brand { min-height: 72px; height: auto; line-height: 1.4; padding: 24px 16px; text-align: left; border-bottom: 1px solid var(--sidebar-bg-2); }
body[data-app] .main-sidebar .sidebar-brand a { display: block; color: var(--sidebar-active); font-size: 18px; font-weight: 600; letter-spacing: -.4px; text-transform: none; overflow-wrap: anywhere; }
body[data-app] .main-sidebar .sidebar-menu { padding: 16px 12px; margin: 0; }
body[data-app] .main-sidebar .sidebar-menu .menu-header, body[data-app] .sidebar-menu > li.header { color: var(--sidebar-text-muted); font-size: 10px; font-weight: 600; letter-spacing: 1.4px; padding: 16px 12px 8px; }
body[data-app] .main-sidebar .sidebar-menu li { position: relative; }
body[data-app] .main-sidebar .sidebar-menu li > a { min-height: 44px; height: auto; display: flex; align-items: center; gap: 12px; padding: 12px; margin: 2px 0; color: var(--sidebar-text) !important; border: 0; border-radius: var(--radius-sm); line-height: 1.4; }
body[data-app] .main-sidebar .sidebar-menu li > a > span { min-width: 0; overflow-wrap: anywhere; }
body[data-app] .main-sidebar .sidebar-menu li > a > i { flex: 0 0 20px; width: 20px; margin: 0; font-size: 15px; text-align: center; color: inherit !important; }
body[data-app] .main-sidebar .sidebar-menu li > a:hover { background: var(--sidebar-bg-2); color: var(--sidebar-active) !important; }
body[data-app] .main-sidebar .sidebar-menu li.active > a, body[data-app] .main-sidebar .sidebar-menu li > a.active,
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-sidebar .sidebar-menu > li ul.dropdown-menu li.active > a:hover { background: var(--accent-bright) !important; color: var(--brand-navy) !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-bright) 24%, transparent); }
body[data-app] .main-sidebar .sidebar-menu li ul.dropdown-menu, body[data-app] .main-sidebar .treeview-menu { background: var(--sidebar-bg-2); border: 0; border-radius: var(--radius-sm); box-shadow: none; padding: 4px 0 4px 12px; margin: 4px 0; }
body[data-app] .main-sidebar .sidebar-menu li ul.dropdown-menu li > a { padding: 10px 12px; font-size: 13px; color: var(--sidebar-text) !important; }
body[data-app] .main-sidebar .sidebar-menu li ul.dropdown-menu li > a:hover { background: var(--sidebar-bg); color: var(--sidebar-active) !important; }
body[data-app] .main-sidebar .sidebar-menu li ul.dropdown-menu li.active > a { background: var(--accent-bright) !important; color: var(--brand-navy) !important; box-shadow: 0 4px 20px color-mix(in srgb, var(--accent-bright) 24%, transparent); }
body[data-app] .sidebar-footer { margin-top: auto; padding: 12px; border-top: 1px solid var(--sidebar-bg-2); }
body[data-app] .sidebar-footer > div { padding: 4px 0 !important; }
body[data-app] .sidebar-footer .btn { background: var(--sidebar-bg-2) !important; border-color: var(--sidebar-bg-2) !important; color: var(--sidebar-text) !important; box-shadow: none; white-space: normal; text-align: left; font-size: 12px; }
body[data-app] .sidebar-footer .btn:hover { color: var(--sidebar-active) !important; border-color: var(--accent) !important; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-sidebar { width: 72px; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-content { padding-left: 96px; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-navbar { left: 72px; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-sidebar .sidebar-brand-sm { padding: 24px 8px; text-align: center; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-sidebar .sidebar-menu { padding: 12px 8px; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-sidebar .sidebar-menu > li > a { justify-content: center; padding: 12px; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-sidebar .sidebar-menu > li > .dropdown-menu { left: 64px; width: 240px; padding: 8px; box-shadow: var(--shadow-lg); }
body[data-app].sidebar-gone .main-sidebar { left: -260px; }
body[data-app].sidebar-gone .main-content { padding-left: 24px; }
body[data-app].sidebar-gone .main-navbar { left: 0; }
body[data-app] .content-wrapper, body[data-app] .main-footer { transition: margin-left var(--dur) var(--ease); }
body[data-app] .main-footer { border-top: 1px solid var(--border); background: var(--bg); color: var(--text-muted); font-size: 12px; padding: 20px 24px 20px 284px; }
body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-footer { padding-left: 96px; }
body[data-app].sidebar-gone .main-footer { padding-left: 24px; }
body[data-app] .main-footer .footer-left { color: var(--text-muted); }
body[data-app] .main-footer .footer-right { color: var(--text-faint); }

body[data-app] .box, body[data-app] .panel, body[data-app] .card, body[data-app] .small-box, body[data-app] .info-box {
  background: var(--surface); border: 1px solid var(--border) !important; border-radius: var(--radius); box-shadow: var(--shadow-sm); margin-bottom: 24px;
  transition: box-shadow var(--dur) var(--ease);
}
body[data-app] .box:hover, body[data-app] .panel:hover, body[data-app] .card:hover, body[data-app] .small-box:hover, body[data-app] .info-box:hover { box-shadow: var(--shadow); }
body[data-app] .box-header, body[data-app] .panel-heading, body[data-app] .card .card-header { background: var(--surface); border-bottom: 1px solid var(--border); border-radius: var(--radius) var(--radius) 0 0; padding: 16px 24px; }
body[data-app] .box-title, body[data-app] .panel-title, body[data-app] .card .card-header h4 { color: var(--text); font-size: 16px; font-weight: 600; }
body[data-app] .box-body, body[data-app] .panel-body, body[data-app] .card .card-body { padding: 24px; min-width: 0; }
body[data-app] .box-footer, body[data-app] .panel-footer, body[data-app] .card-footer { background: var(--surface-2); border-top: 1px solid var(--border); padding: 16px 24px; border-radius: 0 0 var(--radius) var(--radius); }
body[data-app] .small-box, body[data-app] .info-box { background: var(--surface) !important; color: var(--text) !important; }
body[data-app] .small-box, body[data-app] .info-box { transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
body[data-app] .small-box:hover, body[data-app] .info-box:hover { transform: translateY(-1px); }
body[data-app] .small-box .inner { padding: 24px; }
body[data-app] .small-box h3, body[data-app] .info-box-number { font-size: 28px; font-weight: 600; letter-spacing: -.7px; }
body[data-app] .small-box p, body[data-app] .info-box-text { color: var(--text-muted); font-size: 12px; }
body[data-app] .small-box > .small-box-footer { background: var(--surface-2); color: var(--accent-strong); border-radius: 0 0 var(--radius) var(--radius); padding: 8px; }
body[data-app] .info-box-icon { background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-sm); }
body[data-app] .small-box .icon { color: var(--accent-soft); }
body[data-app] .btn { font-family: var(--font-sans); font-weight: 500; border-radius: var(--radius-sm); padding: 9px 16px; box-shadow: none; line-height: 1.4; letter-spacing: 0; }
body[data-app] .btn-sm, body[data-app] .btn-xs { padding: 6px 10px; font-size: 12px; }
body[data-app] .btn-lg { padding: 12px 20px; }
body[data-app] .btn-primary, body[data-app] .btn-primary.disabled, body[data-app] .btn-primary::before, body[data-app] .btn-primary::after {
  background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important;
}
body[data-app] .btn-primary:hover, body[data-app] .btn-primary:focus, body[data-app] .btn-primary:active, body[data-app] .btn-primary.active,
body[data-app] .open > .dropdown-toggle.btn-primary { background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; }
body[data-app] .btn-success { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important; box-shadow: none; }
body[data-app] .btn-success:hover, body[data-app] .btn-success:focus, body[data-app] .btn-success:active { background: var(--accent-strong) !important; border-color: var(--accent-strong) !important; box-shadow: var(--shadow); }
body[data-app] .btn-danger { background: var(--danger) !important; border-color: var(--danger) !important; color: var(--accent-contrast) !important; }
body[data-app] .btn-warning { background: var(--warning) !important; border-color: var(--warning) !important; color: var(--accent-contrast) !important; }
body[data-app] .btn-info { background: var(--info) !important; border-color: var(--info) !important; color: var(--accent-contrast) !important; }
body[data-app] .btn-default, body[data-app] .btn-secondary { background: var(--surface) !important; border-color: var(--border) !important; color: var(--text-2) !important; }
body[data-app] .btn-default:hover, body[data-app] .btn-secondary:hover { background: var(--surface-2) !important; border-color: var(--border-strong) !important; }
body[data-app] .btn-outline-primary { background: var(--surface) !important; border-color: var(--accent) !important; color: var(--accent-strong) !important; }
body[data-app] .btn-outline-primary:hover, body[data-app] .btn-outline-primary:focus, body[data-app] .btn-outline-primary:active { background: var(--accent-soft) !important; color: var(--accent-strong) !important; }
body[data-app] .btn:focus, body[data-app] .login-btn:focus, body[data-app] .submit-btn:focus { box-shadow: 0 0 0 3px var(--accent-soft); }
body[data-app] .btn.is-pressed, body[data-app] .login-btn.is-pressed, body[data-app] .submit-btn.is-pressed, body[data-app] .pui-guide-btn.is-pressed { transform: translateY(1px); }
body[data-app] .btn.disabled, body[data-app] button:disabled { opacity: .6; cursor: not-allowed; }
body[data-app] .btn-group > .btn { border-radius: 0; }
body[data-app] .btn-group > .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
body[data-app] .btn-group > .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
body[data-app] .btn-group > .btn:only-child { border-radius: var(--radius-sm); }
body[data-app] .btn-group .btn.active { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important; }
body[data-app] label { color: var(--text-2); font-weight: 500; }
body[data-app] .form-control, body[data-app] .custom-select, body[data-app] .select2-container--default .select2-selection--single,
body[data-app] .select2-container--default .select2-selection--multiple, body[data-app] .selectric {
  min-height: 40px; height: 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); box-shadow: none; font: inherit;
}
body[data-app] .form-control { padding: 8px 12px; }
body[data-app] textarea.form-control, body[data-app] select[multiple].form-control { height: auto; min-height: 100px; }
body[data-app] input[type=file].form-control { height: auto; }
body[data-app] .form-control::placeholder { color: var(--text-faint); }
body[data-app] .form-control:focus, body[data-app] .custom-select:focus,
body[data-app] .select2-container--focus .select2-selection, body[data-app] .select2-container--open .select2-selection { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
body[data-app] .form-control[disabled], body[data-app] .form-control[readonly] { background: var(--surface-sunken); color: var(--text-muted); }
body[data-app] .help-block, body[data-app] .form-text { color: var(--text-muted); font-size: 12px; }
body[data-app] .has-error .form-control, body[data-app] .form-control.is-invalid { border-color: var(--danger); }
body[data-app] .has-error .help-block { color: var(--danger); }
body[data-app] .input-group-addon, body[data-app] .input-group-text { background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border); border-radius: var(--radius-sm); }
body[data-app] input[type=checkbox], body[data-app] input[type=radio] { accent-color: var(--accent); }
body[data-app] .select2-container { max-width: 100%; }
body[data-app] .select2-container--default .select2-selection--single .select2-selection__rendered { line-height: 38px; padding-left: 12px; color: var(--text); }
body[data-app] .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px; }
body[data-app] .select2-container--default .select2-selection--multiple { height: auto; }
body[data-app] .select2-selection__choice { background: var(--accent-soft) !important; border-color: var(--accent-soft) !important; color: var(--accent-strong) !important; border-radius: var(--radius-sm); }
body[data-app] .select2-selection__choice__remove { color: var(--accent-strong) !important; }
body[data-app] .select2-dropdown, body[data-app] .datepicker, body[data-app] .daterangepicker,
body[data-app] .gj-picker, body[data-app] .selectric-items { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
body[data-app] .select2-search__field { color: var(--text); background: var(--surface); border-color: var(--border) !important; border-radius: var(--radius-sm); }
body[data-app] .select2-container--default .select2-results__option--highlighted[aria-selected], body[data-app] .datepicker table tr td.active,
body[data-app] .daterangepicker td.active, body[data-app] .gj-picker td.selected div { background: var(--accent); color: var(--accent-contrast); }
body[data-app] .datepicker table tr td.day:hover, body[data-app] .daterangepicker td.available:hover { background: var(--accent-soft); color: var(--accent-strong); }
body[data-app] .custom-control-input:checked ~ .custom-control-label::before, body[data-app] .custom-switch-input:checked ~ .custom-switch-indicator,
body[data-app] .selectgroup-input:checked + .selectgroup-button, body[data-app] .selectgroup-input:focus + .selectgroup-button { background: var(--accent) !important; border-color: var(--accent); color: var(--accent-contrast); }
body[data-app] .custom-file-input:focus + .custom-file-label, body[data-app] .custom-switch-input:focus ~ .custom-switch-indicator,
body[data-app] .imagecheck-input:focus ~ .imagecheck-figure { border-color: var(--accent) !important; }

body[data-app] .table-responsive { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
body[data-app] .table { width: 100%; color: var(--text-2); border-color: var(--border); background: var(--surface); }
body[data-app] .table > thead > tr > th, body[data-app] .table thead th { background: var(--surface-2); color: var(--text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; border-bottom: 1px solid var(--border); padding: 14px 16px; vertical-align: middle; }
body[data-app] .table > tbody > tr > td, body[data-app] .table > tbody > tr > th { padding: 14px 16px; border-color: var(--border); vertical-align: middle; }
body[data-app] .table-bordered, body[data-app] .table-bordered td, body[data-app] .table-bordered th { border-color: var(--border); }
body[data-app] .table-striped > tbody > tr:nth-of-type(odd) { background: var(--surface-2); }
body[data-app] .table tbody tr:hover { background: var(--surface-2); }
body[data-app] .table .btn { white-space: nowrap; }
body[data-app] .table > a { color: var(--accent-strong) !important; }
body[data-app] .dataTables_wrapper { min-width: 0; }
body[data-app] .dataTables_wrapper .row { align-items: center; row-gap: 12px; }
body[data-app] .dataTables_wrapper label, body[data-app] .dataTables_info { color: var(--text-muted); font-size: 12px; font-weight: 400; }
body[data-app] .dataTables_wrapper .dataTables_filter input { width: 200px; max-width: 100%; margin-left: 8px; }
body[data-app] .dataTables_wrapper .dataTables_length select { width: auto; min-width: 64px; margin: 0 8px; }
body[data-app] .label, body[data-app] .badge { display: inline-block; background: var(--surface-sunken); color: var(--text-2); border-radius: var(--radius-pill); font-size: 11px; font-weight: 500; padding: 5px 9px; line-height: 1.25; }
body[data-app] .label-primary, body[data-app] .badge.badge-primary { background: var(--accent-soft) !important; color: var(--accent-strong); }
body[data-app] .label-success, body[data-app] .badge-success { background: var(--success-soft) !important; color: var(--success); }
body[data-app] .label-warning, body[data-app] .badge-warning { background: var(--warning-soft) !important; color: var(--warning); }
body[data-app] .label-danger, body[data-app] .badge-danger { background: var(--danger-soft) !important; color: var(--danger); }
body[data-app] .label-info, body[data-app] .badge-info { background: var(--info-soft) !important; color: var(--info); }
body[data-app] .alert { background: var(--info-soft); color: var(--info); border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: var(--radius-sm); padding: 16px; box-shadow: none; }
body[data-app] .alert.alert-primary { background: var(--accent-soft) !important; color: var(--accent-strong); border-left-color: var(--accent); }
body[data-app] .alert-success { background: var(--success-soft); color: var(--success); border-left-color: var(--success); }
body[data-app] .alert-warning { background: var(--warning-soft); color: var(--warning); border-left-color: var(--warning); }
body[data-app] .alert-danger, body[data-app] .alert-error { background: var(--danger-soft); color: var(--danger); border-left-color: var(--danger); }
body[data-app] .alert a { color: inherit; text-decoration: underline; }
body[data-app] .alert .close { color: inherit; }
body[data-app] .modal-content, body[data-app] .sweet-alert { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }
body[data-app] .modal-header, body[data-app] .modal-footer { border-color: var(--border); padding: 16px 24px; }
body[data-app] .modal-body { padding: 24px; overflow-wrap: anywhere; }
body[data-app] .modal-title { font-size: 18px; font-weight: 600; }
body[data-app] .modal-backdrop { display: block; background: var(--sidebar-bg); backdrop-filter: blur(4px); }
body[data-app] .dropdown-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 8px; max-width: calc(100vw - 24px); }
body[data-app] .dropdown-menu > li > a, body[data-app] .dropdown-item { color: var(--text-2); border-radius: var(--radius-sm); padding: 9px 12px; overflow-wrap: anywhere; }
body[data-app] .dropdown-menu > li > a:hover, body[data-app] .dropdown-item:hover { background: var(--surface-2); color: var(--accent-strong); }
body[data-app] a.dropdown-item:focus, body[data-app] a.dropdown-item:active, body[data-app] a.dropdown-item.active { background: var(--accent-soft) !important; color: var(--accent-strong); }
body[data-app] .dropdown-title { color: var(--text-muted); font-size: 10px; letter-spacing: 1px; }
body[data-app] .dropdown-divider, body[data-app] .dropdown-menu .divider { border-color: var(--border); background: var(--border); }
body[data-app] .tooltip-inner { background: var(--sidebar-bg); color: var(--sidebar-active); border-radius: var(--radius-sm); box-shadow: var(--shadow); font-family: var(--font-sans); padding: 8px 12px; }
body[data-app] .tooltip.top .tooltip-arrow, body[data-app] .bs-tooltip-top .arrow::before { border-top-color: var(--sidebar-bg); }
body[data-app] .tooltip.bottom .tooltip-arrow, body[data-app] .bs-tooltip-bottom .arrow::before { border-bottom-color: var(--sidebar-bg); }
body[data-app] .tooltip.left .tooltip-arrow, body[data-app] .bs-tooltip-left .arrow::before { border-left-color: var(--sidebar-bg); }
body[data-app] .tooltip.right .tooltip-arrow, body[data-app] .bs-tooltip-right .arrow::before { border-right-color: var(--sidebar-bg); }
body[data-app] .pagination { display: flex; flex-wrap: wrap; gap: 4px; }
body[data-app] .pagination > li > a, body[data-app] .pagination > li > span, body[data-app] .page-item .page-link { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2) !important; padding: 8px 12px; box-shadow: none; }
body[data-app] .pagination > li > a:hover, body[data-app] .page-link:hover { background: var(--accent-soft) !important; border-color: var(--accent); color: var(--accent-strong) !important; }
body[data-app] .pagination > .active > a, body[data-app] .pagination > .active > span, body[data-app] .page-item.active .page-link { background: var(--accent) !important; border-color: var(--accent) !important; color: var(--accent-contrast) !important; }
body[data-app] .pagination > .disabled > span, body[data-app] .pagination > .disabled > a, body[data-app] .page-item.disabled .page-link { background: var(--surface-2); color: var(--text-faint) !important; }
body[data-app] .nav-tabs { border-bottom: 1px solid var(--border); gap: 4px; flex-wrap: wrap; }
body[data-app] .nav-tabs > li > a, body[data-app] .nav-tabs .nav-item .nav-link { color: var(--text-muted) !important; border: 0; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; padding: 12px 16px; }
body[data-app] .nav-tabs > li.active > a, body[data-app] .nav-tabs .nav-item .nav-link.active, body[data-app] .nav-tabs > li > a:hover { background: var(--accent-soft); color: var(--accent-strong) !important; border-bottom-color: var(--accent); }
body[data-app] .nav-pills .nav-item .nav-link { color: var(--text-2) !important; border-radius: var(--radius-sm); }
body[data-app] .nav-pills .nav-link.active, body[data-app] .nav-pills .show > .nav-link, body[data-app] .nav-pills .nav-item .nav-link.active { background: var(--accent) !important; color: var(--accent-contrast) !important; }
body[data-app] .list-group-item.active { background: var(--accent) !important; border-color: var(--accent); color: var(--accent-contrast); }
body[data-app] .list-group-item-primary { background: var(--accent-soft) !important; color: var(--accent-strong); }
body[data-app] .progress { background: var(--surface-sunken); border-radius: var(--radius-pill); }
body[data-app] .progress-bar { background: var(--accent) !important; }
body[data-app] * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
body[data-app] ::-webkit-scrollbar { width: 6px; height: 6px; }
body[data-app] ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); }
body[data-app] .demo-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 11000; background: var(--accent); transform: scaleX(1); transform-origin: left; opacity: 0; pointer-events: none; transition: transform var(--dur-slow) var(--ease), opacity var(--dur) var(--ease); }
body[data-app] .demo-progress.is-active { transform: scaleX(.82); opacity: 1; }

/* Standalone auth pages retain their original forms and scripts. */
body[data-app].demo-auth {
  margin: 0; min-height: 100vh; padding: 40px 24px; display: grid; place-items: center; isolation: isolate;
  background: radial-gradient(ellipse at 15% 80%, color-mix(in srgb, var(--accent-bright) 10%, transparent), transparent 55%), linear-gradient(135deg, var(--brand-navy), var(--brand-navy-2));
}
body[data-app="parking"].demo-auth {
  --surface: var(--brand-navy-2); --surface-2: var(--brand-navy); --text: var(--sidebar-active); --text-2: var(--sidebar-text);
  --text-muted: var(--sidebar-text); --border: color-mix(in srgb, var(--sidebar-text) 22%, transparent); --border-strong: var(--brand-slate-2);
}
body[data-app="marine"].demo-auth {
  background: linear-gradient(120deg, color-mix(in srgb, var(--brand-navy) 82%, transparent), color-mix(in srgb, var(--accent-bright) 20%, transparent)), url('https://marine-management.ai-things.ltd/uploads/2023-05/e4d28113658e8e20675aee6c8905427a.webp') center / cover, var(--brand-navy);
}
body[data-app].demo-auth::before, body[data-app].demo-auth::after {
  content: ''; position: fixed; width: min(56vw, 680px); aspect-ratio: 1; border-radius: var(--radius-pill); z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-bright) 17%, transparent), transparent 66%);
  top: -24%; left: -10%; animation: demoAtmosphere 22s ease-in-out infinite alternate;
}
body[data-app].demo-auth::after {
  top: auto; left: auto; right: -12%; bottom: -26%; animation-delay: -11s;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent-2) 15%, transparent), transparent 66%);
}
body[data-app] .demo-auth-layout { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1120px; min-height: 680px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), 0 0 70px color-mix(in srgb, var(--accent-bright) 7%, transparent); backdrop-filter: blur(24px); overflow: hidden; }
body[data-app] .demo-auth-brand { position: relative; display: flex; flex-direction: column; justify-content: center; padding: 48px; color: var(--sidebar-active); background: radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--accent-bright) 18%, transparent), transparent 65%), linear-gradient(145deg, var(--brand-navy-2), var(--brand-navy)); }
body[data-app] .demo-auth-brand .logo-container { align-self: flex-start; background: color-mix(in srgb, var(--brand-slate) 32%, transparent); border: 1px solid color-mix(in srgb, var(--accent-bright) 20%, transparent); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg), inset 0 1px color-mix(in srgb, var(--sidebar-active) 10%, transparent); padding: 20px 24px; margin-bottom: 48px; }
body[data-app] .demo-auth-brand .logo { display: block; width: 132px; max-width: 100%; height: auto; }
body[data-app] .demo-auth-eyebrow { color: var(--accent-bright); font-size: 11px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; margin: 0 0 12px; }
body[data-app] .demo-auth-brand h2 { color: var(--sidebar-active); font-size: 40px; font-weight: 600; line-height: 1.2; letter-spacing: -1px; margin: 0 0 16px; overflow-wrap: anywhere; }
body[data-app] .demo-auth-intro { color: var(--sidebar-text); margin: 0 0 32px; max-width: 340px; }
body[data-app] .demo-auth-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
body[data-app] .demo-auth-features li { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--sidebar-active); }
body[data-app] .demo-auth-features svg { flex: 0 0 32px; width: 32px; height: 32px; padding: 7px; color: var(--accent-bright); background: color-mix(in srgb, var(--accent-bright) 10%, transparent); border-radius: var(--radius-sm); }
body[data-app] .demo-auth-form { min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; padding: 48px; background: linear-gradient(160deg, color-mix(in srgb, var(--surface) 60%, transparent), color-mix(in srgb, var(--surface) 92%, transparent)); border-left: 1px solid var(--border); }
body[data-app] .login-header, body[data-app] .forgot-header { margin-bottom: 32px; }
body[data-app] .login-title, body[data-app] .forgot-title { color: var(--text); font-size: 28px; font-weight: 600; line-height: 1.25; letter-spacing: -.7px; margin: 0 0 12px; }
body[data-app] .login-subtitle, body[data-app] .forgot-subtitle, body[data-app] .forgot-description { color: var(--text-muted); font-size: 14px; margin: 0; }
body[data-app] .forgot-description { margin-top: 16px; padding: 12px 16px; background: var(--surface-2); border-left: 3px solid var(--accent); border-radius: var(--radius-sm); }
body[data-app].demo-auth .form-group { margin-bottom: 20px; }
body[data-app].demo-auth .form-label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 500; }
body[data-app].demo-auth input.form-control { display: block; width: 100%; max-width: none; height: 48px; padding-left: 44px; font-size: 16px; background: color-mix(in srgb, var(--surface-2) 75%, transparent); }
body[data-app] .password-container, body[data-app] .demo-input { position: relative; width: 100%; }
body[data-app] .demo-input-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-faint); pointer-events: none; z-index: 2; }
body[data-app] :is(.demo-input, .password-container):focus-within > .demo-input-icon { color: var(--accent); }
body[data-app] .password-container .form-control { padding-right: 48px; }
body[data-app] .password-toggle-btn { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; padding: 4px; background: none; border: 0; border-radius: var(--radius-sm); color: var(--text-muted); cursor: pointer; }
body[data-app] .password-toggle-btn:hover { color: var(--accent-strong); background: var(--accent-soft); }
body[data-app] .forgot-password { text-align: right; margin: -4px 0 24px; font-size: 12px; }
body[data-app] .login-btn, body[data-app] .submit-btn { display: block; width: 100%; min-height: 48px; padding: 12px 16px; background: var(--accent); color: var(--accent-contrast); border: 1px solid var(--accent); border-radius: var(--radius-sm); font: 500 14px var(--font-sans); cursor: pointer; }
body[data-app] .login-btn:hover, body[data-app] .submit-btn:hover { background: var(--accent-strong); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent-bright) 24%, transparent); transform: translateY(-1px); }
body[data-app] .social-login { margin-top: 24px; }
body[data-app] .social-divider { color: var(--text-muted); font-size: 12px; display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
body[data-app] .social-divider::before, body[data-app] .social-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
body[data-app] .google-btn { display: flex; justify-content: center; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text-2); font-weight: 500; text-decoration: none; }
body[data-app] .google-btn:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); text-decoration: none; }
body[data-app].demo-auth .alert { margin-top: 20px; font-size: 13px; }
body[data-app].demo-auth .footer { color: var(--text-muted); font-size: 11px; margin-top: 32px; text-align: center; line-height: 1.7; }
body[data-app] .back-to-login { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 32px; color: var(--text-muted); font-size: 12px; text-decoration: none; }
body[data-app] .login-link { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); text-align: center; color: var(--text-muted); font-size: 12px; }
body[data-app] .form-control.valid { border-color: var(--success); }
body[data-app] .form-control.invalid { border-color: var(--danger); }
body[data-app] .validation-message { min-height: 0; margin-top: 4px; font-size: 12px; }
body[data-app] .validation-message.success { color: var(--success); }
body[data-app] .validation-message.error { color: var(--danger); }
body[data-app] .success-message { text-align: center; padding: 24px 0; }
body[data-app] .success-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 24px; border-radius: var(--radius-pill); background: var(--success-soft); color: var(--success); }
body[data-app] .success-title { color: var(--text); font-size: 24px; font-weight: 600; }
body[data-app] .success-text { color: var(--text-muted); overflow-wrap: anywhere; }
body[data-app] .submit-btn.loading::after { content: ''; display: inline-block; width: 14px; height: 14px; vertical-align: middle; margin-left: 12px; border: 2px solid var(--accent-contrast); border-right-color: transparent; border-radius: var(--radius-pill); animation: demoSpin var(--dur-slow) linear infinite; }
body[data-app].demo-auth .demo-auth-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; color: var(--text-muted); font-size: 10px; margin: 28px 0 0; letter-spacing: .1px; }
body[data-app].demo-auth .demo-auth-trust span { color: var(--accent-2); }
body[data-app="parking"].demo-auth :is(.forgot-password a, .login-link a, .back-to-login) { color: var(--accent-bright); }
body[data-app].demo-auth .alert { color: var(--text); background: var(--accent-2-soft); border-left-color: var(--accent-2); }
@keyframes demoAtmosphere { to { transform: translate(8%, 12%) scale(1.12); } }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes demoSpin { to { transform: rotate(360deg); } }
@media (max-width: 1024px) {
  body[data-app] .main-sidebar { left: -260px; }
  body[data-app].sidebar-show .main-sidebar, body[data-app].sidebar-open .main-sidebar { left: 0; }
  body[data-app] .main-navbar, body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-navbar { left: 0; padding: 0 16px; }
  body[data-app] .main-content, body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-content { padding: 96px 16px 24px; }
  body[data-app] .main-footer, body[data-app]:is(.sidebar-mini, .sidebar-collapse) .main-footer { padding: 20px 16px; }
}
@media (max-width: 767px) {
  body[data-app] .content-header, body[data-app] .section .section-header { padding: 16px; }
  body[data-app] .section .section-header h1, body[data-app] .content-header > h1 { font-size: 22px; }
  body[data-app] .box-body, body[data-app] .panel-body, body[data-app] .card .card-body { padding: 16px; }
  body[data-app] .box-header, body[data-app] .panel-heading, body[data-app] .card .card-header { padding: 16px; }
  body[data-app] .main-navbar { gap: 4px; }
  body[data-app] .main-navbar .form-inline { margin: 0; }
  body[data-app] .main-navbar .form-inline li:has(> [data-toggle=search]) { display: none; }
  body[data-app] .pui-org { max-width: 112px; font-size: 11px; }
  body[data-app] .pui-org i, body[data-app] .pui-guide-label { display: none; }
  body[data-app] .pui-guide-btn { padding: 8px; }
  body[data-app] .nav-link-user { max-width: 108px; font-size: 12px; }
  body[data-app] .main-navbar .nav-link-lg { padding: 8px !important; }
  body[data-app] .main-navbar .navbar-right .dropdown-menu { position: absolute; right: 0; left: auto; }
  body[data-app] .dataTables_wrapper .dataTables_filter input { width: 160px; }
  body[data-app] .dataTables_wrapper .dataTables_filter, body[data-app] .dataTables_wrapper .dataTables_length { text-align: left; }
  body[data-app] .demo-auth-layout { grid-template-columns: 1fr; min-height: 0; }
  body[data-app].demo-auth { padding: 16px; }
  body[data-app] .demo-auth-brand { padding: 24px; }
  body[data-app] .demo-auth-brand .logo-container { margin-bottom: 24px; padding: 8px 12px; }
  body[data-app] .demo-auth-brand .logo { width: 100px; }
  body[data-app] .demo-auth-brand h2 { font-size: 28px; }
  body[data-app] .demo-auth-intro { margin-bottom: 24px; }
  body[data-app] .demo-auth-features { gap: 12px; }
  body[data-app] .demo-auth-form { padding: 32px 24px; border-left: 0; border-top: 1px solid var(--border); }
  body[data-app] .login-title, body[data-app] .forgot-title { font-size: 24px; }
  body[data-app] .modal-dialog { margin: 12px; max-width: calc(100% - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-app]::before, body[data-app]::after, body[data-app] *, body[data-app] *::before, body[data-app] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  body[data-app] .btn.is-pressed, body[data-app] .login-btn:hover, body[data-app] .submit-btn:hover { transform: none; }
}