:root {
    --app-bg: #f5f7f8;
    --app-surface: #fff;
    --app-ink: #243331;
    --app-muted: #677672;
    --app-line: #e1e7e5;
    --app-brand: #167864;
    --app-brand-hover: #10604f;
    --app-brand-soft: #eaf4ef;
    --app-red: #c44150;
    --bs-primary: #167864;
    --bs-primary-rgb: 22, 120, 100;
}
body.app-shell, body.app-auth { background: var(--app-bg); color: var(--app-ink); font-size: 14px; line-height: 1.6; letter-spacing: 0; }
html:has(.app-shell) { scroll-padding-top: 90px; scroll-padding-bottom: 100px; }
.app-shell *, .app-auth * { box-sizing: border-box; }
.app-shell [hidden], .app-auth [hidden] { display: none !important; }
.app-shell a, .app-auth a { color: var(--app-brand); }
.app-shell a:hover, .app-auth a:hover { color: var(--app-brand-hover); }
.app-shell :focus-visible, .app-auth :focus-visible { outline: 3px solid #479581; outline-offset: 3px; }
.app-shell .text-muted, .app-auth .text-muted { color: var(--app-muted) !important; }
.app-shell svg, .app-auth svg { width: 18px; height: 18px; flex-shrink: 0; }
.app-shell h1, .app-shell h2, .app-shell h3, .app-shell h4, .app-auth h1 { color: var(--app-ink); letter-spacing: 0; overflow-wrap: anywhere; }
.app-shell h1, .app-shell .page-content > h4 { font-size: 26px; font-weight: 700; line-height: 1.3; }
.app-shell h2 { font-size: 20px; font-weight: 600; }
.app-shell h3, .app-shell h5, .app-shell h6, .app-shell .card-title { font-size: 16px; font-weight: 600; text-transform: none; }
.app-shell .page-wrapper { background: var(--app-bg); min-width: 0; }
.app-shell .main-wrapper .page-wrapper .page-content { padding: 34px 36px 24px; max-width: 1580px; width: 100%; margin: 68px auto 0; min-width: 0; }
.app-shell .page-content > :last-child { margin-bottom: 0; }
.app-skip-link { position: fixed; left: 16px; top: -70px; padding: 10px 16px; background: white; z-index: 2000; }
.app-skip-link:focus { top: 12px; }
.app-shell .sidebar { width: 240px; background: #fff; border-right: 1px solid var(--app-line); box-shadow: none; z-index: 1040; }
.app-shell .sidebar .sidebar-header { width: 100%; height: 80px; padding: 20px; border: 0; background: white; }
.app-shell .app-brand { display: flex; align-items: center; gap: 12px; color: var(--app-ink); width: 100%; white-space: normal; font-size: 16px; }
.app-brand-symbol { display: grid; place-items: center; width: 38px; height: 42px; flex-shrink: 0; border-radius: 8px; color: var(--app-red); background: #fcf0f1; }
.app-brand-symbol svg { width: 23px; height: 23px; }
.app-brand-copy { display: grid; gap: 1px; min-width: 0; }
.app-brand-copy strong { font-size: 16px; font-weight: 700; }
.app-brand-copy small { font-size: 10px; color: var(--app-muted); font-weight: 500; }
.app-shell .sidebar .sidebar-header .sidebar-brand { color: var(--app-ink); }
.app-shell .sidebar .sidebar-header .sidebar-brand .app-brand-copy, .app-shell .sidebar .sidebar-header .sidebar-brand .app-brand-copy strong { color: var(--app-ink); }
.app-shell .sidebar .sidebar-header .sidebar-brand .app-brand-symbol { color: var(--app-red); }
.app-shell .sidebar .sidebar-body .nav .nav-item .nav-link { color: #52615b; }
.app-shell .sidebar .sidebar-body .nav .nav-item.active > .nav-link, .app-shell .sidebar .sidebar-body .nav .nav-item .nav-link[aria-current="page"] { color: var(--app-brand); }
.app-shell .sidebar .sidebar-body .nav .nav-item .nav-link .link-icon, .app-shell .sidebar .sidebar-body .nav .nav-item .nav-link .link-title { color: inherit; }
.app-shell .sidebar .sidebar-body { padding: 12px 14px 20px; height: calc(100% - 80px); overflow-y: auto; }
.app-shell .app-new-patrol { width: 100%; min-height: 44px; margin-bottom: 16px; font-size: 13px; }
.app-shell .sidebar .sidebar-body .nav { padding: 0; }
.app-shell .sidebar .sidebar-body .nav .nav-item { width: 100%; }
.app-shell .sidebar .sidebar-body .nav .nav-category { padding: 18px 12px 8px; margin: 0; height: auto; color: #85918c; font-size: 11px; font-weight: 500; }
.app-shell .sidebar .nav-link { padding: 11px 12px; min-height: 44px; height: auto; margin: 2px 0; border-radius: 6px; color: #52615b; display: flex; align-items: center; gap: 12px; }
.app-shell .sidebar .nav-link .link-icon { color: inherit; margin: 0; width: 18px; }
.app-shell .sidebar .nav-link .link-title { margin: 0; font-size: 13px; font-weight: 500; white-space: normal; line-height: 1.5; }
.app-shell .sidebar .nav-link:hover, .app-shell .app-master-nav summary:hover { background: #f5f7f6; }
.app-shell .sidebar .nav-item.active > .nav-link, .app-shell .sidebar .nav-link[aria-current="page"] { background: var(--app-brand-soft); color: var(--app-brand); }
.app-shell .sidebar .nav-item.active > .nav-link::before, .app-shell .sidebar .nav-item.active > .nav-link::after { display: none; }
.app-master-nav { margin-top: 2px; }
.app-master-nav summary { list-style: none; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; color: #52615b; }
.app-master-nav summary::-webkit-details-marker { display: none; }
.app-master-nav .app-chevron { margin-left: auto; width: 14px; transition: transform .15s ease; }
.app-master-nav[open] .app-chevron { transform: rotate(180deg); }
.app-shell .sidebar .app-master-nav .sub-menu { padding: 4px 0 6px 18px; margin: 0 0 0 20px; border-left: 1px solid var(--app-line); }
.app-shell .sidebar .app-master-nav .sub-menu .nav-link { padding: 8px 10px; min-height: 36px; font-size: 12px; white-space: normal; line-height: 1.5; }
.app-shell .sidebar .app-master-nav .sub-menu .nav-link::before { display: none; }
.app-sidebar-account { margin-top: 36px; padding-top: 16px; border-top: 1px solid var(--app-line); }
.app-account-link { display: flex; align-items: center; gap: 10px; padding: 8px; color: var(--app-ink) !important; }
.app-account-link > span:nth-child(2) { display: grid; min-width: 0; flex: 1; }
.app-account-link strong { font-size: 12px; overflow-wrap: anywhere; }
.app-account-link small { color: var(--app-muted); font-size: 11px; }
.app-avatar { display: inline-grid; place-items: center; width: 32px; height: 32px; flex-shrink: 0; border-radius: 50%; background: #eef0f5; color: #616782; font-size: 13px; font-weight: 600; }
.app-avatar-photo { display: block; object-fit: cover; }
.app-shell .app-topbar { background: rgba(255,255,255,.98); border-bottom: 1px solid var(--app-line); box-shadow: none; height: 68px; padding: 0 28px; flex-wrap: nowrap; }
.app-shell .app-topbar .sidebar-toggler { display: grid; position: static; margin: 0 16px 0 0; width: 40px; height: 40px; min-height: 40px; padding: 0; flex-shrink: 0; border: 0; }
.app-shell .app-topbar .navbar-content { display: flex; align-items: center; justify-content: space-between; flex: 1; width: auto; height: 100%; padding: 0; min-width: 0; }
.app-workspace-label { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--app-muted); }
.app-presence { width: 6px; height: 6px; background: #268c70; border-radius: 50%; }
.app-topbar-actions { display: flex; align-items: center; gap: 24px; min-width: 0; }
.app-today { color: var(--app-muted); font-size: 12px; white-space: nowrap; }
.app-profile-toggle { display: flex; align-items: center; gap: 9px; background: transparent; border: 0; padding: 5px; color: var(--app-ink); min-height: 44px; }
.app-profile-toggle > svg { width: 13px; }
.app-profile-name { font-size: 12px; max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-profile-menu { width: 270px; max-width: calc(100vw - 24px); border: 1px solid var(--app-line); border-radius: 8px; padding: 6px; box-shadow: 0 8px 28px #24333114; }
.app-profile-details { display: grid; gap: 3px; padding: 12px; border-bottom: 1px solid var(--app-line); margin-bottom: 4px; overflow-wrap: anywhere; }
.app-profile-details small { color: var(--app-muted); }
.app-profile-menu .dropdown-item { display: flex; align-items: center; gap: 10px; border-radius: 4px; padding: 10px 12px; color: var(--app-ink); }
.app-shell .app-footer { display: flex; justify-content: space-between; gap: 12px; padding: 18px 36px; border: 0; font-size: 11px; color: #85918c; background: transparent; }
.app-page-header, .app-page-actions { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.app-page-header { margin-bottom: 28px; }
.app-page-header > div { min-width: 0; max-width: 100%; }
.app-page-header h1 { margin: 0 0 6px; }
.app-page-header p { color: var(--app-muted); margin: 0; font-size: 13px; }
.app-page-actions { justify-content: flex-end; gap: 10px; }
.app-back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--app-muted) !important; font-size: 12px; margin-bottom: 12px; }
.app-shell .btn, .app-auth .btn { min-height: 42px; display: inline-flex; justify-content: center; align-items: center; gap: 8px; padding: 9px 16px; font-size: 13px; font-weight: 500; line-height: 1.5; white-space: normal; border-radius: 6px; transition: background .15s ease, border-color .15s ease; }
.app-shell .btn-primary, .app-auth .btn-primary, .app-shell .btn-primary:disabled { background: var(--app-brand); border-color: var(--app-brand); color: white; }
.app-shell .btn-primary:hover, .app-shell .btn-primary:focus, .app-auth .btn-primary:hover, .app-auth .btn-primary:focus { background: var(--app-brand-hover); border-color: var(--app-brand-hover); color: white; }
.app-shell .btn-primary:focus, .app-shell .btn-outline-primary:focus, .app-auth .btn-primary:focus { box-shadow: 0 0 0 3px #16786422; }
.app-shell .btn-outline-primary { border-color: #b6d5ca; color: var(--app-brand); background: #fff; }
.app-shell .btn-outline-primary:hover { background: var(--app-brand-soft); border-color: var(--app-brand); color: var(--app-brand); }
.app-shell .btn-outline-secondary { border-color: #d1dad6; color: #5b6862; background: #fff; }
.app-shell .btn-outline-secondary:hover { background: #edf1ef; color: var(--app-ink); }
.app-shell .btn-warning { background: #fff; border-color: var(--app-line); color: var(--app-ink); }
.app-shell .btn-warning:hover { background: #f1f4f2; }
.app-shell .btn-outline-danger { background: #fff; border-color: #efd1d5; color: #b33c4c; }
.app-shell .btn-outline-danger:hover { background: #fcf0f1; color: #9b2434; }
.app-shell .btn-sm { min-height: 36px; padding: 6px 10px; font-size: 12px; }
.app-icon-button, .app-shell .sp-icon-button { width: 40px; height: 40px; min-width: 40px; min-height: 40px; display: inline-grid; place-items: center; padding: 0; border: 1px solid var(--app-line); background: #fff; color: #677672; border-radius: 6px; }
.app-icon-button:hover { background: #f0f4f2; color: var(--app-brand); }
.app-shell .form-control, .app-shell .form-select, .app-auth .form-control { min-height: 44px; border: 1px solid #d8e1dc; border-radius: 6px; background-color: #fff; color: var(--app-ink); font-size: 14px; line-height: 1.5; padding: 10px 12px; min-width: 0; }
.app-shell .form-control:focus, .app-shell .form-select:focus, .app-auth .form-control:focus { border-color: #5ba992; box-shadow: 0 0 0 3px #16786413; }
.app-shell .form-control::placeholder, .app-auth .form-control::placeholder { color: #8a9690; }
.app-shell .form-label { font-size: 12px; font-weight: 500; margin-bottom: 7px; color: #53635a; }
.app-shell .form-control:disabled, .app-shell .form-control[readonly], .app-shell .form-select:disabled { background: #f3f6f4; color: #6c7a73; }
.app-shell .form-check-input { width: 18px; height: 18px; margin-top: 3px; cursor: pointer; border-color: #becdc4; }
.app-shell .form-check-input:checked { background-color: var(--app-brand); border-color: var(--app-brand); }
.app-shell .form-switch .form-check-input { width: 36px; }
.app-shell .form-switch .form-check-label { margin-left: 8px; }
.app-shell .form-check-label { cursor: pointer; font-size: 13px; }
.app-shell textarea.form-control { min-height: 120px; resize: vertical; }
.app-shell .app-card { background: transparent; border: 0; border-radius: 0; box-shadow: none; }
.app-shell .app-card > .card-body { padding: 0; }
.app-shell .table-responsive { border-block: 1px solid var(--app-line); background: white; margin-bottom: 20px; }
.app-shell .table { margin-bottom: 0; font-size: 13px; }
.app-shell .table th { padding: 14px 16px; background: #f9fbfa; color: #76837b; font-size: 11px; font-weight: 500; text-transform: none; white-space: nowrap; max-width: none; border-color: var(--app-line); }
.app-shell .table td { padding: 17px 16px; color: #47564e; white-space: normal; overflow-wrap: anywhere; max-width: none; border-color: #edf1ee; vertical-align: middle; }
.app-shell .table tbody tr:last-child td { border-bottom: 0; }
.app-shell .table tbody tr:hover { background: #fafcfb; }
.app-shell .table td.d-flex { display: table-cell !important; white-space: nowrap; }
.app-shell .table td.d-flex > * { display: inline-flex; vertical-align: middle; margin: 2px; }
.app-table-actions { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.app-cell-primary { display: block; font-weight: 500; color: var(--app-ink); margin-bottom: 3px; }
.app-cell-secondary { display: block; font-size: 11px; color: var(--app-muted); }
.app-count { display: inline-grid; place-items: center; min-width: 28px; height: 28px; background: #f0f3f7; color: #68748d; border-radius: 5px; font-size: 12px; }
.app-shell .badge, .app-shell .sp-status { font-size: 11px; font-weight: 500; padding: 5px 9px; border-radius: 5px; line-height: 1.5; }
.app-shell .badge.bg-success { background: #e9f4ed !important; color: #278257; }
.app-shell .badge.bg-secondary { background: #eef1ef !important; color: #77837c; }
.app-shell .badge.bg-warning { background: #fcf3df !important; color: #9a7222 !important; }
.app-shell .badge.bg-danger { background: #fbecee !important; color: #bc4a58; }
.app-shell .badge.bg-primary, .app-shell .badge-soft { background: #edf1fa !important; color: #6178a0; }
.app-shell .alert { border-radius: 6px; border: 1px solid var(--app-line); font-size: 13px; line-height: 1.6; }
.app-shell .alert-success { background: #eaf5ee; color: #286e4b; border-color: #cde6d6; }
.app-shell .alert-danger { background: #fdf0f1; color: #ab3d4a; border-color: #f0d2d7; }
.app-flash { display: flex; align-items: center; gap: 10px; }
.app-shell .alert ul { margin: 0; padding-left: 18px; }
.app-shell .pagination { display: flex; gap: 5px; flex-wrap: wrap; }
.app-shell .page-link { min-width: 36px; min-height: 36px; display: grid; place-items: center; border: 1px solid var(--app-line); border-radius: 5px !important; color: var(--app-muted); font-size: 12px; }
.app-shell .page-item.active .page-link { color: #fff; background: var(--app-brand); border-color: var(--app-brand); }
.app-empty { padding: 50px 20px; text-align: center; color: var(--app-muted); }
.app-empty > svg { width: 30px; height: 30px; color: #91a49a; margin-bottom: 14px; }
.app-empty h3 { margin-bottom: 14px; font-size: 15px; font-weight: 500; }
.app-toolbar { display: flex; align-items: end; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding-block: 16px 20px; border-top: 1px solid var(--app-line); }
.app-report-filters { padding: 24px 0; border-block: 1px solid var(--app-line); margin-bottom: 24px; }
.app-filter-fields { display: grid; grid-template-columns: 2fr repeat(3,minmax(0,1fr)); gap: 18px; }
.app-filter-fields > div { min-width: 0; }
.app-filter-fields .app-search { width: 100%; }
.app-filter-more { margin-block: 16px; }
.app-filter-more summary { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--app-muted); padding: 8px 0; cursor: pointer; list-style: none; width: fit-content; }
.app-filter-more summary::-webkit-details-marker { display: none; }
.app-filter-more > .app-filter-fields { margin-top: 14px; grid-template-columns: repeat(4,minmax(0,1fr)); }
.app-master-add .row { --bs-gutter-x: 20px; }
.app-shell .dataTables_wrapper .dataTables_length, .app-shell .dataTables_wrapper .dataTables_filter { margin-block: 16px; }
.app-search { display: flex; align-items: center; min-width: 0; width: 320px; max-width: 100%; position: relative; }
.app-search > svg { position: absolute; left: 13px; color: #90a095; pointer-events: none; }
.app-search .form-control { padding-left: 40px; }
.app-section { padding-block: 24px; border-top: 1px solid var(--app-line); }
.app-section-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.app-section-header h2 { margin: 0; font-size: 17px; }
.app-section-header p { font-size: 12px; color: var(--app-muted); margin: 4px 0 0; }
.app-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); padding: 24px 0; border-top: 1px solid var(--app-line); gap: 24px; }
.app-stat { min-width: 0; padding-left: 16px; border-left: 3px solid #87aaa0; }
.app-stat:nth-child(2) { border-color: #d68c92; }
.app-stat:nth-child(3) { border-color: #d4b97b; }
.app-stat:nth-child(4) { border-color: #899bc4; }
.app-stat span { font-size: 12px; color: var(--app-muted); }
.app-stat strong { display: block; font-size: 28px; line-height: 1.4; font-weight: 600; margin-top: 4px; }
.app-activity { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--app-line); color: var(--app-ink) !important; }
.app-activity:last-child { border-bottom: 0; }
.app-activity:hover { background: #eef3ef; }
.app-activity-thumb { width: 58px; height: 52px; flex-shrink: 0; border-radius: 6px; object-fit: cover; background: #eaf0ec; display: grid; place-items: center; color: #739583; }
.app-activity-copy { flex: 1; min-width: 0; }
.app-activity-copy strong { display: block; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.app-activity-copy small { display: block; margin-top: 4px; font-size: 12px; color: var(--app-muted); overflow-wrap: anywhere; }
.app-activity-meta { display: flex; align-items: center; gap: 18px; font-size: 12px; color: var(--app-muted); }
.app-form-page { max-width: 800px; width: 100%; }
.app-form-section { padding: 24px 0; border-top: 1px solid var(--app-line); }
.app-form-section h2 { margin-bottom: 22px; font-size: 16px; }
.app-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 22px; }
.app-form-grid > div { min-width: 0; }
.app-form-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 20px 0; border-top: 1px solid var(--app-line); margin-top: 14px; }
.app-detail-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 44px; }
.app-profile-block { padding-top: 24px; border-top: 1px solid var(--app-line); }
.app-profile-block > .app-avatar { width: 56px; height: 56px; font-size: 23px; margin-bottom: 16px; }
.app-profile-block h2 { margin-bottom: 20px; }
.app-info-list { display: grid; grid-template-columns: 110px minmax(0,1fr); gap: 14px 20px; font-size: 13px; }
.app-info-list dt { color: var(--app-muted); font-weight: 400; }
.app-info-list dd { margin: 0; overflow-wrap: anywhere; }
.app-master-tabs { display: flex; gap: 4px; flex-wrap: wrap; padding: 0 0 16px; border-bottom: 1px solid var(--app-line); margin-bottom: 24px; }
.app-master-tabs a { color: var(--app-muted); padding: 7px 12px; font-size: 12px; border-radius: 5px; }
.app-master-tabs a[aria-current="page"] { background: #e5f0e9; color: var(--app-brand); font-weight: 500; }
.app-master-add { margin-bottom: 24px; border-bottom: 1px solid var(--app-line); padding-bottom: 20px; }
.app-master-add > summary { display: flex; gap: 8px; align-items: center; cursor: pointer; color: var(--app-brand); font-size: 13px; padding: 8px 0; width: fit-content; list-style: none; }
.app-master-add > summary::-webkit-details-marker { display: none; }
.app-master-add form { padding-top: 18px; }
.app-master-row { display: grid; align-items: end; grid-template-columns: minmax(140px,1fr) minmax(150px,2fr) 110px 100px 40px; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--app-line); }
.app-master-row.app-master-simple { grid-template-columns: minmax(170px,2fr) 140px 110px 40px; }
.app-master-row:not(.has-value) { grid-template-columns: minmax(140px,1fr) minmax(150px,2fr) 140px 40px; }
.app-master-row.app-master-simple:not(.has-value) { grid-template-columns: minmax(170px,2fr) 140px 110px 40px; }
.app-master-row > div { min-width: 0; }
.app-master-row.app-master-no-status { grid-template-columns: minmax(180px,2fr) minmax(100px,1fr) 40px; }
.app-master-row .form-control:disabled { padding-left: 0; padding-right: 0; border-color: transparent; background: transparent; font-size: 12px; }
.app-master-parent { min-height: 44px; display: flex; align-items: center; font-size: 12px; line-height: 1.6; color: var(--app-muted); overflow-wrap: anywhere; }
.app-master-row .app-master-code { display: flex; align-items: center; min-height: 44px; }
.app-master-code code { color: #697e95; font-size: 12px; background: #edf1f7; padding: 3px 7px; border-radius: 4px; overflow-wrap: anywhere; }
.app-master-row .app-master-save { width: 40px; min-width: 40px; height: 44px; padding: 0; }
.app-shell .sp-page { --sp-blue: var(--app-brand); --sp-border: var(--app-line); --sp-muted: var(--app-muted); max-width: none; color: var(--app-ink); }
.app-shell .sp-page h1 { font-size: 26px; margin: 6px 0; }
.app-shell .sp-page h2 { font-size: 19px; }
.app-shell .sp-page-header { margin-bottom: 28px; }
.app-shell .sp-page .sp-main { background: transparent; border-top: 1px solid var(--app-line); padding: 26px 0; }
.app-shell .sp-workspace { gap: 36px; grid-template-columns: minmax(0,1fr) 250px; }
.app-shell .sp-context { top: 90px; padding-left: 24px; }
.app-shell .sp-stepper { gap: 6px; margin-bottom: 28px; border-bottom: 1px solid var(--app-line); }
.app-shell .sp-stepper button { gap: 8px; flex-wrap: nowrap; font-size: 12px; padding: 16px 5px; }
.app-shell .sp-stepper button[aria-current="step"] { color: var(--app-brand); border-color: var(--app-brand); }
.app-shell .sp-stepper button[aria-current="step"] > span:first-child { background: var(--app-brand); }
.app-shell .sp-stepper button > span:first-child { width: 25px; height: 25px; flex-shrink: 0; font-size: 11px; }
.app-shell .sp-field > label, .app-shell .sp-label, .app-shell .sp-field legend { font-size: 12px; font-weight: 500; color: #53635a; }
.app-shell .sp-page .form-control, .app-shell .sp-page .form-select { font-size: 14px; border-color: #d8e1dc; border-radius: 6px; }
.app-shell .sp-page .btn { border-radius: 6px; font-size: 13px; }
.app-shell .sp-page .btn-primary:hover:not(:disabled), .app-shell .sp-page .btn-primary:focus, .app-shell .sp-page .btn-primary:active { background: var(--app-brand-hover); border-color: var(--app-brand-hover); }
.app-shell .sp-page .btn-outline-primary:hover:not(:disabled), .app-shell .sp-page .btn-outline-primary:active { background: var(--app-brand-soft); color: var(--app-brand); border-color: var(--app-brand); }
.app-shell .sp-radio-option, .app-shell .sp-check-option { border-radius: 6px; font-size: 13px; }
.app-shell .sp-radio-option:has(input:checked), .app-shell .sp-check-option:has(input:checked) { background: var(--app-brand-soft); border-color: #75ad96; }
.app-shell .sp-accordion { border-color: var(--app-line); background: transparent; border-radius: 0; }
.app-shell .sp-accordion > summary { background: transparent; font-size: 14px; }
.app-shell .sp-photo-item { border-radius: 6px; border-color: var(--app-line); }
.app-shell .sp-risk-result, .app-shell .sp-stop6 { background: #eef4f0; border-color: var(--app-line); }
.app-shell .sp-finding-card { background: white; box-shadow: none; border-color: var(--app-line); border-radius: 6px; }
.app-shell .sp-desktop-list { border-block: 1px solid var(--app-line); background: white; overflow-x: auto; }
.app-shell .sp-page .sp-table { min-width: 880px; table-layout: auto; }
.app-shell .sp-page .sp-table th { padding: 13px 16px; font-size: 11px; }
.app-shell .sp-page .sp-table td { padding: 18px 16px; font-size: 13px; }
.app-shell .sp-filter-grid { gap: 16px; }
.app-shell .sp-filters { padding-top: 22px; margin-bottom: 24px; }
.app-shell .sp-filters .sp-tools { justify-content: flex-end; }
.app-shell .sp-actions { background: var(--app-bg); }
.app-shell .sp-page .select2-selection--single { border-radius: 6px; border-color: #d8e1dc; }
.app-shell .sheet-page-tools .btn, .app-shell .sheet-success-actions .btn { border-radius: 6px; }
.app-shell .report-sheet { box-shadow: none; }
.app-shell .sheet-location, .app-shell .sheet-actions { background: transparent; }
.app-shell .sheet-location h2, .app-shell .sheet-photo h2, .app-shell .sheet-worst h2 { font-size: 14px; }
.app-shell .report-card { border: 1px solid var(--app-line); border-radius: 6px; padding: 18px; background: white; }
.app-shell .photo-preview { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }
.app-shell .mobile-action-bar { position: sticky; bottom: 0; z-index: 8; background: white; border-top: 1px solid var(--app-line); padding: 12px; }
.app-shell .bottom-nav { display: none; }
.app-auth { min-height: 100dvh; display: flex; flex-direction: column; }
.app-auth-top { padding: 28px 40px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; color: var(--app-muted); }
.app-auth-top .app-brand { display: flex; align-items: center; gap: 12px; }
.app-login-main { width: 100%; flex: 1; display: grid; grid-template-columns: minmax(0,1fr); align-content: center; padding: 30px 24px 70px; }
.app-login-form { width: 380px; max-width: 100%; min-width: 0; margin: 0 auto; }
.app-login-form h1 { font-size: 28px; font-weight: 600; margin-bottom: 10px; }
.app-login-form > p { color: var(--app-muted); font-size: 14px; margin-bottom: 32px; }
.app-login-form .form-label { color: #53635a; font-size: 13px; margin-bottom: 8px; }
.app-login-form .btn-primary { width: 100%; min-height: 48px; margin-top: 10px; }
.app-password-wrap { position: relative; }
.app-password-wrap .form-control { padding-right: 48px; }
.app-password-wrap > button { position: absolute; right: 4px; top: 3px; height: 38px; width: 40px; background: transparent; border: 0; color: #7e8f84; display: grid; place-items: center; }
.app-auth .app-footer { display: flex; justify-content: center; gap: 14px; font-size: 11px; color: #85918b; padding: 18px 24px; }
@media (min-width: 992px) {
    .app-shell .page-wrapper { width: calc(100% - 240px); margin-left: 240px; }
    .app-shell .app-topbar { width: calc(100% - 240px); left: 240px; }
    .app-shell.sidebar-folded .sidebar { width: 72px; }
    .app-shell.sidebar-folded .page-wrapper { width: calc(100% - 72px); margin-left: 72px; }
    .app-shell.sidebar-folded .app-topbar { width: calc(100% - 72px); left: 72px; }
    .app-shell.sidebar-folded .sidebar .sidebar-header { padding: 20px 17px; }
    .app-shell.sidebar-folded .sidebar .sidebar-header .sidebar-brand { display: flex; width: 38px; visibility: visible; }
    .app-shell.sidebar-folded .sidebar .sidebar-body { padding-inline: 12px; }
    .app-shell.sidebar-folded .app-brand-copy, .app-shell.sidebar-folded .link-title, .app-shell.sidebar-folded .app-new-patrol span, .app-shell.sidebar-folded .nav-category, .app-shell.sidebar-folded .app-master-nav, .app-shell.sidebar-folded .app-sidebar-account { display: none; }
    .app-shell.sidebar-folded .sidebar .nav-link { justify-content: center; padding-inline: 0; }
    .app-shell.sidebar-folded .app-new-patrol { padding-inline: 0; }
}
@media (max-width: 1199.98px) {
    .app-shell .main-wrapper .page-wrapper .page-content { padding-inline: 24px; }
    .app-shell .sp-stepper button { flex-direction: column; }
    .app-shell .sp-workspace { gap: 24px; grid-template-columns: minmax(0,1fr) 210px; }
}
@media (max-width: 991.98px) {
    .app-shell .page-wrapper { width: 100%; margin-left: 0; }
    .app-shell .app-topbar { left: 0; width: 100%; }
    .app-shell .sidebar { width: 240px; margin-left: -240px; transform: none; }
    .app-shell.sidebar-open .sidebar { margin-left: 0; }
    .app-shell .sp-workspace { display: block; }
    .app-shell .sp-context { display: none; }
    .app-detail-grid { gap: 24px; }
    .app-master-row { gap: 10px; grid-template-columns: minmax(120px,1fr) minmax(140px,2fr) 100px 70px 40px; }
}
@media (max-width: 767.98px) {
    .app-shell .main-wrapper .page-wrapper .page-content { padding: 26px 18px 88px; margin-top: 62px; }
    .app-shell .app-topbar { padding-inline: 16px; height: 62px; }
    .app-shell .app-topbar .sidebar-toggler { margin-right: 12px; }
    .app-shell .app-topbar .navbar-content { height: 62px; }
    .app-today, .app-profile-name { display: none; }
    .app-topbar-actions { gap: 6px; }
    .app-shell h1, .app-shell .page-content > h4, .app-shell .sp-page h1 { font-size: 24px; }
    .app-page-header { gap: 18px; align-items: flex-start; }
    .app-page-actions { justify-content: flex-start; }
    .app-stats { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 22px; }
    .app-stat strong { font-size: 25px; }
    .app-activity { flex-wrap: wrap; gap: 12px; }
    .app-activity-meta { width: 100%; padding-left: 70px; gap: 12px; }
    .app-form-grid, .app-detail-grid { grid-template-columns: 1fr; }
    .app-filter-fields, .app-filter-more > .app-filter-fields { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; }
    .app-filter-fields > div:first-child { grid-column: 1/-1; }
    .app-master-row, .app-master-row:not(.has-value), .app-master-row.app-master-simple, .app-master-row.app-master-simple:not(.has-value) { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 20px 0; }
    .app-master-row > .app-master-name { grid-column: 1/-1; }
    .app-master-row > .app-master-save-wrap { justify-self: end; align-self: end; }
    .app-shell .table { min-width: 600px; }
    .app-shell .table td, .app-shell .table th { padding: 14px 12px; }
    .app-shell .app-footer { padding: 0 18px 86px; flex-wrap: wrap; font-size: 10px; }
    .app-shell .bottom-nav { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); position: fixed; bottom: 0; left: 0; right: 0; z-index: 1030; border-top: 1px solid var(--app-line); background: white; padding-bottom: env(safe-area-inset-bottom); }
    .app-shell .bottom-nav a { min-height: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; color: #85938a; font-size: 10px; }
    .app-shell .bottom-nav a.active { color: var(--app-brand); font-weight: 500; }
    .app-shell .desktop-table { display: none; }
    .app-shell .mobile-list { display: grid; }
    .app-shell .sp-page .sp-main { padding: 24px 0; }
    .app-shell .sp-actions { padding-bottom: max(12px,env(safe-area-inset-bottom)); background: white; }
    .app-shell .sp-stepper { display: none; }
    .app-shell .sp-page-header > .sp-tools { width: 100%; justify-content: flex-start; }
    .app-shell .sp-filters .sp-tools { justify-content: flex-start; }
    .app-shell .sp-readonly-section { padding-block: 24px; }
    .app-shell:has(#safety-patrol-wizard) .bottom-nav { display: none; }
    .app-shell:has(#reportForm) .bottom-nav { display: none; }
    .app-shell:has(#reportForm) .sheet-actions { bottom: 0; padding-bottom: max(12px,env(safe-area-inset-bottom)); border-color: var(--app-line); box-shadow: none; }
    .app-shell:has(#reportForm) .app-footer { padding-bottom: 100px; }
    .app-shell:has(#safety-patrol-wizard) .app-footer { padding-bottom: 100px; }
    .app-shell:has(#safety-patrol-wizard) .main-wrapper .page-wrapper .page-content { padding-bottom: 105px; }
    .app-auth-top { padding: 22px; }
    .app-auth-top > span { display: none; }
    .app-login-main { padding-bottom: 40px; }
    .app-auth .form-control, .app-shell .form-control, .app-shell .form-select, .app-shell .sp-page .form-control, .app-shell .sp-page .form-select { font-size: 16px; }
}
@media (min-width: 768px) { .app-shell .mobile-list { display: none !important; } }
@media (prefers-reduced-motion: reduce) { .app-shell *, .app-auth * { transition: none !important; animation: none !important; } }
@media print {
    .app-shell .sidebar, .app-shell .app-topbar, .app-shell .app-footer, .app-shell .bottom-nav, .app-page-actions { display: none !important; }
    .app-shell .page-wrapper { width: 100%; margin: 0; }
    .app-shell .main-wrapper .page-wrapper .page-content { padding: 0; margin: 0; }
    .app-shell { background: white; }
}