/* LASA System theme = portal design "A" (2026-10-26, Boss: step 2 — one look across Chat / Drive / Mail / System).
 * Loaded after app.min.css and lasa-portal-chrome.css on back-office pages only (layouts/head.blade.php).
 * Colours, font and corners copied from the portal's lasa.css tokens. Scoped to #layout-wrapper so the login page,
 * print views, PDFs and the customer shop are untouched. Rollback = remove the <link> line (or this file). */
@media screen {
:root {
  --lasa-t-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --lasa-t-canvas: #F6F5F2; --lasa-t-surface: #FFFFFF; --lasa-t-subtle: #EEEFEC; --lasa-t-subtle-hover: #E4E6E2;
  --lasa-t-text: #242A30; --lasa-t-muted: #61666C; --lasa-t-border: #DEDFDC; --lasa-t-input: #B9BDC0;
  --lasa-t-primary: #303C48; --lasa-t-primary-hover: #202C38; --lasa-t-link: #335B75; --lasa-t-accent: #D0202A;
  --lasa-t-success: #38634F; --lasa-t-success-bg: #EBF2ED; --lasa-t-warning: #795A28; --lasa-t-warning-bg: #F6F0E5;
  --lasa-t-danger: #B42332; --lasa-t-danger-bg: #FBECEF; --lasa-t-info: #3B5F86; --lasa-t-info-bg: #EDF2F8;
  --lasa-t-radius: 8px; --lasa-t-radius-lg: 12px;
}

/* font + text */
#layout-wrapper, #layout-wrapper .page-content, #layout-wrapper .vertical-menu, #layout-wrapper .dropdown-menu,
#layout-wrapper .modal, body:has(#layout-wrapper) .modal, body:has(#layout-wrapper) .swal2-popup { font-family: var(--lasa-t-font); }
#layout-wrapper .page-content { color: var(--lasa-t-text); }
#layout-wrapper .page-content a:not(.btn):not(.badge):not(.nav-link):not(.page-link):not(.dropdown-item) { color: var(--lasa-t-link); }
#layout-wrapper .page-title-box h4, #layout-wrapper .page-title-box .page-title { color: var(--lasa-t-text); font-weight: 650; letter-spacing: 0; text-transform: none; }
#layout-wrapper .breadcrumb-item, #layout-wrapper .breadcrumb-item a { color: var(--lasa-t-muted) !important; }
#layout-wrapper .text-muted { color: var(--lasa-t-muted) !important; }

/* cards */
#layout-wrapper .card { background: var(--lasa-t-surface); border: 1px solid var(--lasa-t-border); border-radius: var(--lasa-t-radius-lg); box-shadow: 0 1px 2px rgba(36, 42, 48, .05); }
#layout-wrapper .card-header { background: transparent; border-bottom: 1px solid var(--lasa-t-border); border-radius: var(--lasa-t-radius-lg) var(--lasa-t-radius-lg) 0 0; }
#layout-wrapper .card-title { color: var(--lasa-t-text); font-weight: 650; }

/* buttons: navy main action, red only as accent (like the portal) */
:where(#layout-wrapper) .btn { border-radius: var(--lasa-t-radius); font-weight: 600; }
#layout-wrapper .btn-primary { background-color: var(--lasa-t-primary); border-color: var(--lasa-t-primary); color: #fff; }
#layout-wrapper .btn-primary:hover, #layout-wrapper .btn-primary:focus, #layout-wrapper .btn-primary:active { background-color: var(--lasa-t-primary-hover) !important; border-color: var(--lasa-t-primary-hover) !important; color: #fff; }
#layout-wrapper .btn-success { background-color: var(--lasa-t-success); border-color: var(--lasa-t-success); color: #fff; }
#layout-wrapper .btn-success:hover, #layout-wrapper .btn-success:focus { background-color: #2C503F !important; border-color: #2C503F !important; }
#layout-wrapper .btn-danger { background-color: var(--lasa-t-danger); border-color: var(--lasa-t-danger); color: #fff; }
#layout-wrapper .btn-danger:hover, #layout-wrapper .btn-danger:focus { background-color: #951C29 !important; border-color: #951C29 !important; }
#layout-wrapper .btn-info { background-color: var(--lasa-t-info); border-color: var(--lasa-t-info); color: #fff; }
#layout-wrapper .btn-info:hover, #layout-wrapper .btn-info:focus { background-color: #2F4D6E !important; border-color: #2F4D6E !important; color: #fff; }
#layout-wrapper .btn-warning { background-color: var(--lasa-t-warning); border-color: var(--lasa-t-warning); color: #fff; }
#layout-wrapper .btn-warning:hover, #layout-wrapper .btn-warning:focus { background-color: #634A21 !important; border-color: #634A21 !important; color: #fff; }
#layout-wrapper .btn-secondary, #layout-wrapper .btn-light { background-color: var(--lasa-t-subtle); border-color: var(--lasa-t-border); color: var(--lasa-t-text); }
#layout-wrapper .btn-secondary:hover, #layout-wrapper .btn-light:hover { background-color: var(--lasa-t-subtle-hover); color: var(--lasa-t-text); }
#layout-wrapper .btn-link { color: var(--lasa-t-link); }
#layout-wrapper .btn-outline-primary { color: var(--lasa-t-primary); border-color: var(--lasa-t-primary); }
#layout-wrapper .btn-outline-primary:hover { background-color: var(--lasa-t-primary); color: #fff; }
#layout-wrapper .btn-outline-secondary { color: var(--lasa-t-text); border-color: var(--lasa-t-border); }
#layout-wrapper .btn:focus-visible { outline: 2px solid var(--lasa-t-link); outline-offset: 2px; box-shadow: none; }

/* soft status badges (portal style) */
#layout-wrapper .badge { border-radius: 999px; font-weight: 600; padding: .35em .7em; }
#layout-wrapper .badge.bg-success, #layout-wrapper .badge.badge-soft-success { background-color: var(--lasa-t-success-bg) !important; color: var(--lasa-t-success) !important; }
#layout-wrapper .badge.bg-warning, #layout-wrapper .badge.badge-soft-warning { background-color: var(--lasa-t-warning-bg) !important; color: var(--lasa-t-warning) !important; }
#layout-wrapper .badge.bg-danger, #layout-wrapper .badge.badge-soft-danger { background-color: var(--lasa-t-danger-bg) !important; color: var(--lasa-t-danger) !important; }
#layout-wrapper .badge.bg-info, #layout-wrapper .badge.badge-soft-info, #layout-wrapper .badge.bg-primary { background-color: var(--lasa-t-info-bg) !important; color: var(--lasa-t-info) !important; }
#layout-wrapper .badge.bg-secondary, #layout-wrapper .badge.bg-dark { background-color: var(--lasa-t-subtle) !important; color: var(--lasa-t-text) !important; }

/* tables */
#layout-wrapper .table { color: var(--lasa-t-text); border-color: var(--lasa-t-border); }
#layout-wrapper .table > thead > tr > th, #layout-wrapper .table thead th, #layout-wrapper .table .table-light th {
  background-color: var(--lasa-t-canvas); color: var(--lasa-t-muted); font-weight: 650; font-size: .8rem; border-bottom: 1px solid var(--lasa-t-border); }
#layout-wrapper .table > :not(caption) > * > * { border-bottom-color: var(--lasa-t-border); }
#layout-wrapper .table-hover > tbody > tr:hover > * { background-color: #FAFAF8; }
#layout-wrapper .page-item.active .page-link, #layout-wrapper .dataTables_paginate .paginate_button.current {
  background-color: var(--lasa-t-primary) !important; border-color: var(--lasa-t-primary) !important; color: #fff !important; }
#layout-wrapper .page-link { color: var(--lasa-t-link); border-color: var(--lasa-t-border); }

/* forms */
:where(#layout-wrapper) .form-control, :where(#layout-wrapper) .form-select { border-color: var(--lasa-t-input); border-radius: var(--lasa-t-radius); color: var(--lasa-t-text); }
:where(#layout-wrapper) .form-control:focus, :where(#layout-wrapper) .form-select:focus { border-color: var(--lasa-t-link); box-shadow: 0 0 0 3px rgba(51, 91, 117, .18); }
#layout-wrapper .form-label, #layout-wrapper label { color: var(--lasa-t-text); font-weight: 600; }
#layout-wrapper .form-check-input:checked { background-color: var(--lasa-t-primary); border-color: var(--lasa-t-primary); }
#layout-wrapper .select2-container--default .select2-selection--single, #layout-wrapper .select2-container--default .select2-selection--multiple { border-color: var(--lasa-t-input); border-radius: var(--lasa-t-radius); }

/* sidebar: slate icons, quiet active state with a small LASA-red marker (instead of all-red icons) */
#layout-wrapper .vertical-menu #sidebar-menu ul li a { color: var(--lasa-t-text); font-weight: 550; }
#layout-wrapper .vertical-menu #sidebar-menu ul li a i { color: var(--lasa-t-muted) !important; }
#layout-wrapper .vertical-menu #sidebar-menu ul li a:hover, #layout-wrapper .vertical-menu #sidebar-menu ul li a:hover i { color: var(--lasa-t-primary) !important; }
#layout-wrapper .vertical-menu #sidebar-menu ul li.mm-active > a, #layout-wrapper .vertical-menu #sidebar-menu ul li a.active {
  color: var(--lasa-t-primary) !important; background-color: var(--lasa-t-subtle); border-radius: var(--lasa-t-radius); box-shadow: inset 3px 0 0 var(--lasa-t-accent); }
#layout-wrapper .vertical-menu #sidebar-menu ul li.mm-active > a i, #layout-wrapper .vertical-menu #sidebar-menu ul li a.active i { color: var(--lasa-t-primary) !important; }
#layout-wrapper .vertical-menu #sidebar-menu .sub-menu li a { color: var(--lasa-t-muted); font-weight: 500; }
#layout-wrapper .vertical-menu #sidebar-menu .sub-menu li a:hover, #layout-wrapper .vertical-menu #sidebar-menu .sub-menu li.mm-active > a { color: var(--lasa-t-primary) !important; }
#layout-wrapper .vertical-menu #sidebar-menu .menu-title { color: var(--lasa-t-muted); letter-spacing: .04em; }

/* dropdowns, modals, alerts */
#layout-wrapper .dropdown-menu { border: 1px solid var(--lasa-t-border); border-radius: var(--lasa-t-radius-lg); box-shadow: 0 10px 30px rgba(36, 42, 48, .12); }
#layout-wrapper .dropdown-item:active { background-color: var(--lasa-t-primary); }
body:has(#layout-wrapper) .modal-content { border-radius: var(--lasa-t-radius-lg); border: 1px solid var(--lasa-t-border); }
#layout-wrapper .alert { border-radius: var(--lasa-t-radius); }
body:has(#layout-wrapper) .swal2-popup { border-radius: var(--lasa-t-radius-lg) !important; }
body:has(#layout-wrapper) .swal2-styled.swal2-confirm { background-color: var(--lasa-t-primary) !important; border-radius: var(--lasa-t-radius) !important; }
body:has(#layout-wrapper) .swal2-styled.swal2-cancel { border-radius: var(--lasa-t-radius) !important; }

/* Bootstrap 5.3 buttons read --bs-btn-* variables; set them too so no later rule repaints the old colours */
#layout-wrapper .btn-primary { --bs-btn-bg: #303C48; --bs-btn-border-color: #303C48; --bs-btn-hover-bg: #202C38; --bs-btn-hover-border-color: #202C38; --bs-btn-active-bg: #202C38; --bs-btn-active-border-color: #202C38; --bs-btn-disabled-bg: #303C48; --bs-btn-disabled-border-color: #303C48; }
#layout-wrapper .btn-success { --bs-btn-bg: #38634F; --bs-btn-border-color: #38634F; --bs-btn-hover-bg: #2C503F; --bs-btn-hover-border-color: #2C503F; --bs-btn-active-bg: #2C503F; }
#layout-wrapper .btn-danger { --bs-btn-bg: #B42332; --bs-btn-border-color: #B42332; --bs-btn-hover-bg: #951C29; --bs-btn-hover-border-color: #951C29; --bs-btn-active-bg: #951C29; background-color: #B42332 !important; border-color: #B42332 !important; }
#layout-wrapper .btn-danger:hover, #layout-wrapper .btn-danger:focus { background-color: #951C29 !important; border-color: #951C29 !important; }
#layout-wrapper .btn-info { --bs-btn-bg: #3B5F86; --bs-btn-border-color: #3B5F86; --bs-btn-hover-bg: #2F4D6E; --bs-btn-hover-border-color: #2F4D6E; }
#layout-wrapper .btn-warning { --bs-btn-bg: #795A28; --bs-btn-border-color: #795A28; --bs-btn-hover-bg: #634A21; --bs-btn-hover-border-color: #634A21; --bs-btn-color: #fff; --bs-btn-hover-color: #fff; }
/* sidebar arrows: slate, not red */
#layout-wrapper .vertical-menu #sidebar-menu .has-arrow::after, #layout-wrapper .vertical-menu #sidebar-menu .has-arrow:after { color: var(--lasa-t-muted) !important; border-color: var(--lasa-t-muted) !important; }
#layout-wrapper .vertical-menu #sidebar-menu ul li a .menu-arrow, #layout-wrapper .vertical-menu #sidebar-menu ul li a > .fa-chevron-down, #layout-wrapper .vertical-menu #sidebar-menu ul li a > .mdi-chevron-down { color: var(--lasa-t-muted) !important; }

/* phone: wide tables scroll sideways instead of squeezing columns (Codex review) */
@media (max-width: 575.98px) {
  #layout-wrapper .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #layout-wrapper .table-responsive > .table { min-width: 36rem; }
}
}