/*
  Suguardia Responsive + Theme Hardening
  Scope: global SaaS layout + operational modules.
  Goal: one intelligent behavior for light/dark, desktop/tablet/mobile.
*/

:root{
  --sg-radius-xl: 18px;
  --sg-radius-lg: 14px;
  --sg-radius-md: 10px;
  --sg-sidebar-w: 268px;
  --sg-topbar-h: 64px;
  --sg-safe-x: clamp(.75rem, 1.6vw, 1.25rem);
  --sg-safe-y: clamp(.65rem, 1.4vw, 1rem);
  --sg-focus: 0 0 0 .22rem rgba(var(--app-primary-rgb,79,140,255), .18);
}

html[data-bs-theme="light"]{
  --sg-bg: #f5f7fb;
  --sg-surface: #ffffff;
  --sg-surface-2: #f8fafc;
  --sg-surface-3: #eef2f7;
  --sg-text: #111827;
  --sg-muted: rgba(17,24,39,.66);
  --sg-muted-2: rgba(17,24,39,.52);
  --sg-border: rgba(15,23,42,.10);
  --sg-border-strong: rgba(15,23,42,.16);
  --sg-hover: rgba(15,23,42,.05);
  --sg-shadow: 0 16px 34px rgba(15,23,42,.08);
  --sg-shadow-soft: 0 8px 20px rgba(15,23,42,.055);
  --sg-input-bg: #ffffff;
  --sg-modal-bg: #ffffff;
  --sg-backdrop: rgba(15,23,42,.48);
}

html[data-bs-theme="dark"]{
  --sg-bg: #0b1118;
  --sg-surface: #111827;
  --sg-surface-2: #0f172a;
  --sg-surface-3: #1f2937;
  --sg-text: rgba(255,255,255,.92);
  --sg-muted: rgba(226,232,240,.70);
  --sg-muted-2: rgba(226,232,240,.56);
  --sg-border: rgba(148,163,184,.18);
  --sg-border-strong: rgba(148,163,184,.28);
  --sg-hover: rgba(255,255,255,.07);
  --sg-shadow: 0 18px 48px rgba(0,0,0,.52);
  --sg-shadow-soft: 0 10px 28px rgba(0,0,0,.34);
  --sg-input-bg: #0f172a;
  --sg-modal-bg: #111827;
  --sg-backdrop: rgba(0,0,0,.68);
}

html{
  min-height:100%;
  overflow-x:hidden;
  color-scheme: light dark;
}

body{
  min-height:100%;
  overflow-x:hidden;
  background:var(--sg-bg) !important;
  color:var(--sg-text) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body.modal-open{
  padding-right:0 !important;
}

/* ------------------------------
   General app layout hardening
------------------------------ */
.app-shell{
  min-height:100dvh !important;
  width:100% !important;
  background:var(--sg-bg) !important;
}

.app-sidebar,
.app-sidebar-inner,
.app-offcanvas,
.offcanvas{
  background:var(--sg-surface) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

.app-sidebar{
  width:var(--sg-sidebar-w) !important;
  flex:0 0 var(--sg-sidebar-w) !important;
}

.app-sidebar-inner{
  height:100dvh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-right:1px solid var(--sg-border);
}

.app-brand-wrap,
.app-sidebar-footer{
  flex:0 0 auto;
}

.app-nav{
  flex:1 1 auto;
  min-height:0;
  overflow:auto;
  padding-bottom:.75rem;
}

.app-main{
  min-width:0 !important;
  width:100% !important;
  background:var(--sg-bg) !important;
}

.app-topbar{
  min-height:var(--sg-topbar-h) !important;
  background:rgba(255,255,255,.72) !important;
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--sg-border) !important;
  color:var(--sg-text) !important;
  z-index:1020;
}

html[data-bs-theme="dark"] .app-topbar{
  background:rgba(15,23,42,.78) !important;
}

.app-content{
  padding:var(--sg-safe-y) var(--sg-safe-x) !important;
  background:var(--sg-bg) !important;
  min-width:0;
}

.app-page-title,
.app-brand-text .name,
.app-brand-text .sub,
.text-muted-2,
.text-muted,
.form-text,
.small.text-muted{
  color:inherit;
}

.text-muted,
.text-muted-2,
.form-text,
.small.text-muted,
.app-brand-text .sub{
  color:var(--sg-muted) !important;
}

.app-logo{
  background:rgba(var(--app-primary-rgb,79,140,255), .12) !important;
  border:1px solid rgba(var(--app-primary-rgb,79,140,255), .20) !important;
  color:var(--sg-text) !important;
}

.app-logo img,
.app-brand-link img{
  object-fit:contain !important;
  max-width:100%;
  max-height:100%;
}

.app-nav-section{
  color:var(--sg-muted-2) !important;
}

.app-nav-link{
  color:var(--sg-muted) !important;
  border:1px solid transparent !important;
  min-width:0;
}

.app-nav-link span:not(.ms-auto){
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.app-nav-link:hover,
.app-nav-link.active,
.app-nav-link[aria-expanded="true"]{
  background:rgba(var(--app-primary-rgb,79,140,255), .12) !important;
  color:var(--sg-text) !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .18) !important;
}

/* ------------------------------
   Bootstrap component contrast
------------------------------ */
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.accordion-item,
.offcanvas,
.toast{
  background:var(--sg-surface) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

.card-header,
.modal-header,
.modal-footer,
.accordion-button,
.dropdown-header{
  background:var(--sg-surface-2) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

.modal-backdrop.show{
  opacity:1 !important;
  background:var(--sg-backdrop) !important;
  backdrop-filter:blur(2px);
}

.btn-close{
  opacity:.75;
}
html[data-bs-theme="dark"] .btn-close{
  filter:invert(1) grayscale(100%);
}

.form-control,
.form-select,
.input-group-text{
  background:var(--sg-input-bg) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border-strong) !important;
}

.form-control::placeholder{
  color:var(--sg-muted-2) !important;
}

.form-control:focus,
.form-select:focus{
  border-color:rgba(var(--app-primary-rgb,79,140,255), .55) !important;
  box-shadow:var(--sg-focus) !important;
}

.dropdown-item{
  color:var(--sg-text) !important;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item.active{
  background:rgba(var(--app-primary-rgb,79,140,255), .12) !important;
  color:var(--sg-text) !important;
}
.dropdown-divider{ border-color:var(--sg-border) !important; }

.table{
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  --bs-table-bg:transparent !important;
  --bs-table-striped-bg:var(--sg-hover) !important;
  --bs-table-hover-bg:rgba(var(--app-primary-rgb,79,140,255), .10) !important;
}
.table thead th{
  background:var(--sg-surface-2) !important;
  color:var(--sg-muted) !important;
  border-color:var(--sg-border) !important;
  position:sticky;
  top:0;
  z-index:3;
}
.table td,
.table th{
  border-color:var(--sg-border) !important;
}
.table-responsive{
  border-radius:var(--sg-radius-lg);
  border:1px solid var(--sg-border);
  background:var(--sg-surface);
}

.pagination,
.opsx-pagination{
  flex-wrap:wrap;
  gap:.25rem;
}
.page-link{
  background:var(--sg-surface) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}
.page-item.active .page-link,
.page-link:hover{
  background:rgba(var(--app-primary-rgb,79,140,255), .16) !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .28) !important;
  color:var(--sg-text) !important;
}

/* ------------------------------
   Ops module: safe layout + theme
------------------------------ */
.opsx-page,
.opsx-standard-page,
.opsx-console{
  min-width:0 !important;
  color:var(--sg-text) !important;
}

.opsx-page *,
.opsx-console *{
  min-width:0;
}

.opsx-hero,
.ops-topbar{
  background:
    radial-gradient(circle at 88% 5%, rgba(var(--app-primary-rgb,79,140,255), .16), transparent 32%),
    linear-gradient(135deg, var(--sg-surface), var(--sg-surface-2)) !important;
  border-color:var(--sg-border) !important;
  color:var(--sg-text) !important;
  box-shadow:var(--sg-shadow-soft) !important;
}

html[data-bs-theme="dark"] .opsx-hero,
html[data-bs-theme="dark"] .ops-topbar{
  background:
    radial-gradient(circle at 88% 5%, rgba(var(--app-primary-rgb,79,140,255), .24), transparent 34%),
    linear-gradient(135deg, #111827, #0f172a) !important;
}

.opsx-card,
.ops-card,
.opsx-item,
.ops-mini-card,
.ops-timeline-content,
.opsx-priority-card,
.opsx-location-box,
.opsx-location-result,
.opsx-evidence-card,
.opsx-timeline-body,
.opsx-data-table tbody tr,
.opsx-radio-card span,
.opsx-file-zone{
  background:var(--sg-surface) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  box-shadow:none;
}

.opsx-card,
.ops-card{
  box-shadow:var(--sg-shadow-soft) !important;
}

.opsx-card-header,
.ops-card-header{
  background:var(--sg-surface-2) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

.opsx-card-sub,
.ops-card-sub,
.opsx-item-meta,
.opsx-item-desc,
.ops-mini-meta,
.opsx-radio-sub,
.opsx-modal-title-sub,
.opsx-evidence-meta,
.opsx-location-result-meta{
  color:var(--sg-muted) !important;
}

.opsx-pill,
.ops-chip,
.ops-filter-pill,
.ops-legend-pill,
.opsx-point-chip,
.opsx-segment,
.opsx-tabs{
  background:var(--sg-surface-2) !important;
  border-color:var(--sg-border) !important;
  color:var(--sg-text) !important;
}

.opsx-segment button,
.opsx-tabs .nav-link{
  color:var(--sg-muted) !important;
}
.opsx-segment button.active,
.opsx-tabs .nav-link.active{
  background:rgba(var(--app-primary-rgb,79,140,255), .16) !important;
  color:var(--sg-text) !important;
}

.opsx-kpi,
.ops-kpi{
  background:var(--sg-surface) !important;
  border-color:var(--sg-border) !important;
  color:var(--sg-text) !important;
  box-shadow:var(--sg-shadow-soft) !important;
}
.opsx-kpi-label,
.ops-kpi .label,
.opsx-kpi-hint{
  color:var(--sg-muted) !important;
}
.opsx-kpi-icon,
.ops-kpi .icon,
.opsx-icon-bubble,
.opsx-evidence-icon,
.ops-timeline-icon{
  background:rgba(var(--app-primary-rgb,79,140,255), .14) !important;
  color:var(--app-primary) !important;
}

.opsx-map,
.ops-map,
.opsx-map-canvas,
.opsx-location-preview,
.opsx-location-modal-map,
.opsx-location-empty,
.opsx-evidence-preview{
  background:var(--sg-surface-3) !important;
  border-color:var(--sg-border) !important;
}

.leaflet-container,
.opsx-map-canvas,
.opsx-location-preview,
.opsx-location-modal-map{
  color:#111827 !important;
}

/* Operation row/table stability */
.ops-route-table,
.opsx-route-table,
.opsx-table-like,
.routes-table-list{
  background:var(--sg-surface) !important;
  color:var(--sg-text) !important;
}

.ops-route-table-header,
.opsx-route-table-header,
.routes-table-header{
  background:var(--sg-surface-2) !important;
  color:var(--sg-muted) !important;
  border:1px solid var(--sg-border) !important;
  box-shadow:0 4px 12px rgba(0,0,0,.04);
  z-index:5;
}

.ops-route-row,
.opsx-route-row,
.routes-table-row{
  background:var(--sg-surface) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.opsx-actions-dot,
.ops-actions-dot,
button[data-route-actions],
button[data-ops-actions]{
  width:34px !important;
  height:34px !important;
  padding:0 !important;
  border-radius:999px !important;
  display:inline-grid !important;
  place-items:center !important;
  background:var(--sg-surface-2) !important;
  border:1px solid var(--sg-border) !important;
  color:var(--sg-text) !important;
}

/* ------------------------------
   Desktop behavior
------------------------------ */
@media (min-width: 1200px){
  .opsx-page.opsx-fit-screen,
  .opsx-standard-page{
    height:calc(100dvh - var(--sg-topbar-h) - (var(--sg-safe-y) * 2)) !important;
    min-height:620px !important;
    overflow:hidden !important;
  }

  .opsx-page.opsx-fit-screen > .opsx-card,
  .opsx-standard-page > .opsx-card,
  .opsx-page.opsx-fit-screen > .opsx-layout,
  .opsx-standard-page > .opsx-layout{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .opsx-crud-list,
  .opsx-grid-list,
  .ops-scroll,
  .opsx-scroll-panel{
    scrollbar-gutter:stable;
  }
}

/* ------------------------------
   Tablet behavior
------------------------------ */
@media (max-width: 1199.98px){
  .app-content{
    padding:clamp(.65rem,2vw,1rem) !important;
  }

  .opsx-page.opsx-fit-screen,
  .opsx-standard-page,
  .ops-console{
    height:auto !important;
    min-height:auto !important;
    overflow:visible !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
  }

  .opsx-page.opsx-fit-screen > *,
  .opsx-standard-page > *,
  .ops-console > *{
    grid-column:auto !important;
    grid-row:auto !important;
    height:auto !important;
    min-height:0 !important;
  }

  .opsx-kpis,
  .ops-kpi-row{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  .opsx-crud-list,
  .opsx-grid-list,
  .opsx-grid-list.opsx-grid-3,
  .ops-main,
  .opsx-layout,
  .opsx-panel-grid{
    grid-template-columns:1fr !important;
    max-height:none !important;
    overflow:visible !important;
  }

  .ops-side{
    grid-template-columns:1fr !important;
    grid-template-rows:auto !important;
  }

  .ops-map{
    height:56vh !important;
    min-height:360px !important;
  }
}

/* ------------------------------
   Mobile behavior
------------------------------ */
@media (max-width: 767.98px){
  :root{ --sg-topbar-h: 56px; }

  body{
    font-size:.94rem;
  }

  .app-topbar{
    min-height:56px !important;
    padding:.45rem .65rem !important;
  }

  .app-content{
    padding:.58rem !important;
  }

  .container,
  .container-fluid,
  main.container{
    max-width:100% !important;
    padding-left:.65rem !important;
    padding-right:.65rem !important;
  }

  .app-page-title{
    font-size:.92rem;
    max-width:48vw;
  }

  .dropdown-menu{
    max-width:calc(100vw - 1rem);
  }

  .modal-dialog{
    margin:.5rem !important;
  }

  .modal-content{
    border-radius:16px !important;
    max-height:calc(100dvh - 1rem);
  }

  .modal-header,
  .modal-footer{
    padding:.75rem !important;
  }

  .modal-body{
    padding:.75rem !important;
    overflow:auto;
  }

  .modal-footer{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.5rem !important;
  }

  .modal-footer .btn,
  .modal-footer form,
  .modal-footer form .btn{
    width:100% !important;
  }

  .opsx-hero,
  .ops-topbar{
    grid-template-columns:1fr !important;
    min-height:auto !important;
    max-height:none !important;
    padding:.72rem !important;
  }

  .opsx-title,
  .ops-title{
    font-size:1.05rem !important;
  }

  .opsx-subtitle,
  .ops-subtitle{
    white-space:normal !important;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    font-size:.78rem !important;
  }

  .opsx-hero-actions,
  .ops-command-strip{
    justify-content:flex-start !important;
    gap:.35rem !important;
  }

  .opsx-hero-actions .btn,
  .ops-command-strip .btn,
  .opsx-btn-main{
    width:auto;
    min-height:38px !important;
  }

  .opsx-kpis,
  .ops-kpi-row{
    grid-template-columns:1fr 1fr !important;
    gap:.45rem !important;
  }

  .opsx-kpi,
  .ops-kpi{
    min-height:58px !important;
    padding:.55rem !important;
    border-radius:.8rem !important;
  }

  .opsx-kpi-value,
  .ops-kpi .value{
    font-size:1.05rem !important;
  }

  .opsx-kpi-icon,
  .ops-kpi .icon{
    width:1.65rem !important;
    height:1.65rem !important;
    flex-basis:1.65rem !important;
  }

  .opsx-toolbar{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.5rem !important;
  }

  .opsx-search{
    min-width:0 !important;
    width:100% !important;
  }

  .opsx-segment,
  .opsx-tabs{
    width:100%;
    overflow-x:auto;
    justify-content:flex-start;
    scrollbar-width:none;
  }
  .opsx-segment::-webkit-scrollbar,
  .opsx-tabs::-webkit-scrollbar{ display:none; }

  .opsx-segment button,
  .opsx-tabs .nav-link{
    flex:0 0 auto;
  }

  .opsx-card-header,
  .ops-card-header{
    display:grid !important;
    grid-template-columns:1fr !important;
    align-items:start !important;
    gap:.5rem !important;
    padding:.68rem !important;
  }

  .opsx-card-body,
  .ops-card-body{
    padding:.65rem !important;
  }

  .opsx-crud-list,
  .opsx-grid-list,
  .opsx-grid-list.opsx-grid-3{
    grid-template-columns:1fr !important;
    gap:.5rem !important;
    overflow:visible !important;
    max-height:none !important;
  }

  .opsx-item,
  .opsx-route-row,
  .routes-table-row{
    border-radius:.85rem !important;
    padding:.65rem !important;
  }

  .opsx-item-top{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:.45rem !important;
  }

  .opsx-crud-actions{
    justify-content:flex-start !important;
  }

  .opsx-media-actions,
  .opsx-radio-cards,
  .opsx-compact-grid,
  .opsx-modal-form-grid,
  .opsx-location-modal-grid,
  .opsx-evidence-grid{
    grid-template-columns:1fr !important;
  }

  .opsx-location-modal-map,
  .opsx-map-canvas,
  .ops-map,
  .opsx-map{
    height:52dvh !important;
    min-height:300px !important;
  }

  .leaflet-control-container .leaflet-top,
  .leaflet-control-container .leaflet-bottom{
    z-index:500 !important;
  }

  .table-responsive{
    overflow-x:auto;
  }
}

@media (max-width: 420px){
  .opsx-kpis,
  .ops-kpi-row{
    grid-template-columns:1fr !important;
  }

  .btn,
  .opsx-pill,
  .ops-chip{
    font-size:.78rem;
  }

  .app-page-title{ max-width:42vw; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}

/* ======================================================================
   SUGUARDIA V20 - Light mode coherence hardening
   Scope: central login, tenant shell, cards, forms, tables, modals, menus.
   This file is loaded after central.css / tenant-ui.css / theme-contrast.css,
   so these overrides intentionally normalize the final visual layer.
====================================================================== */

html[data-bs-theme="light"]{
  color-scheme: light;
  --sg-bg:#f3f6fb;
  --sg-surface:#ffffff;
  --sg-surface-2:#f8fafc;
  --sg-surface-3:#eef3f9;
  --sg-text:#111827;
  --sg-heading:#0f172a;
  --sg-muted:rgba(15,23,42,.68);
  --sg-muted-2:rgba(15,23,42,.54);
  --sg-border:rgba(15,23,42,.105);
  --sg-border-strong:rgba(15,23,42,.18);
  --sg-hover:rgba(15,23,42,.052);
  --sg-shadow:0 18px 42px rgba(15,23,42,.10);
  --sg-shadow-soft:0 10px 26px rgba(15,23,42,.075);
  --sg-input-bg:#ffffff;
  --sg-input-bg-readonly:#f8fafc;
  --sg-input-text:#0f172a;
  --sg-input-placeholder:rgba(15,23,42,.46);
  --sg-modal-bg:#ffffff;
  --sg-backdrop:rgba(15,23,42,.42);
  --app-bg:var(--sg-bg);
  --app-surface:var(--sg-surface);
  --app-surface-2:var(--sg-surface-2);
  --app-sidebar:var(--sg-surface);
  --app-topbar:rgba(255,255,255,.88);
  --app-text:var(--sg-text);
  --app-muted:var(--sg-muted);
  --app-muted-2:var(--sg-muted-2);
  --app-border:var(--sg-border);
  --app-border-strong:var(--sg-border-strong);
  --app-hover:var(--sg-hover);
  --bs-body-bg:var(--sg-bg);
  --bs-body-color:var(--sg-text);
  --bs-border-color:var(--sg-border);
  --bs-emphasis-color:var(--sg-heading);
  --bs-secondary-color:var(--sg-muted);
  --bs-tertiary-bg:var(--sg-surface-2);
  --bs-link-color:#1d4ed8;
  --bs-link-hover-color:#1e40af;
}

html[data-bs-theme="dark"]{
  color-scheme: dark;
}

html[data-bs-theme="light"] body,
html[data-bs-theme="light"] .app-shell,
html[data-bs-theme="light"] .auth-page,
html[data-bs-theme="light"] .app-main,
html[data-bs-theme="light"] .app-content{
  background:
    radial-gradient(circle at 8% -10%, rgba(var(--app-primary-rgb,79,140,255), .055), transparent 32%),
    linear-gradient(180deg, #f6f8fc 0%, #eef2f7 100%) !important;
  color:var(--sg-text) !important;
}

html[data-bs-theme="light"] .auth-shell{
  background:transparent !important;
}

html[data-bs-theme="light"] .auth-top,
html[data-bs-theme="light"] .app-topbar{
  background:rgba(255,255,255,.92) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.04) !important;
  backdrop-filter:blur(16px);
}

html[data-bs-theme="light"] .app-sidebar,
html[data-bs-theme="light"] .app-sidebar-inner,
html[data-bs-theme="light"] .app-offcanvas,
html[data-bs-theme="light"] .offcanvas{
  background:#ffffff !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .auth-wrap{
  padding:clamp(1.25rem, 4vw, 2.5rem) !important;
}

html[data-bs-theme="light"] .auth-card{
  background:#ffffff !important;
  color:var(--sg-text) !important;
  border:1px solid rgba(15,23,42,.105) !important;
  box-shadow:0 20px 50px rgba(15,23,42,.13) !important;
  overflow:hidden !important;
}

html[data-bs-theme="light"] .auth-card .card-header,
html[data-bs-theme="light"] .auth-card .card-footer{
  background:linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .auth-card .card-body{
  background:#ffffff !important;
  color:var(--sg-text) !important;
}

html[data-bs-theme="light"] .auth-card .card-header img,
html[data-bs-theme="light"] .auth-card img.app-logo,
html[data-bs-theme="light"] .auth-top img.app-logo,
html[data-bs-theme="light"] .app-brand-link > img.app-logo{
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.10) !important;
  border-radius:14px !important;
  padding:4px !important;
  box-shadow:0 8px 18px rgba(15,23,42,.055) !important;
}

html[data-bs-theme="light"] .auth-card .card-header img{
  max-height:96px !important;
  max-width:min(360px, 84vw) !important;
  object-fit:contain !important;
}

html[data-bs-theme="light"] .app-logo{
  background:rgba(var(--app-primary-rgb,79,140,255), .08) !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .18) !important;
  color:#0f172a !important;
}

html[data-bs-theme="light"] .app-logo:has(img){
  background:#ffffff !important;
}

html[data-bs-theme="light"] .app-brand-text .name,
html[data-bs-theme="light"] .app-page-title,
html[data-bs-theme="light"] h1,
html[data-bs-theme="light"] h2,
html[data-bs-theme="light"] h3,
html[data-bs-theme="light"] h4,
html[data-bs-theme="light"] h5,
html[data-bs-theme="light"] h6,
html[data-bs-theme="light"] .fw-semibold,
html[data-bs-theme="light"] .fw-bold{
  color:var(--sg-heading) !important;
}

html[data-bs-theme="light"] .text-muted,
html[data-bs-theme="light"] .text-muted-2,
html[data-bs-theme="light"] .form-text,
html[data-bs-theme="light"] .small.text-muted,
html[data-bs-theme="light"] .app-brand-text .sub,
html[data-bs-theme="light"] label,
html[data-bs-theme="light"] .form-label{
  color:var(--sg-muted) !important;
}

html[data-bs-theme="light"] .card,
html[data-bs-theme="light"] .modal-content,
html[data-bs-theme="light"] .dropdown-menu,
html[data-bs-theme="light"] .list-group-item,
html[data-bs-theme="light"] .accordion-item,
html[data-bs-theme="light"] .toast,
html[data-bs-theme="light"] .preview-card,
html[data-bs-theme="light"] .portal-mock,
html[data-bs-theme="light"] .portal-mock-card{
  background:#ffffff !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  box-shadow:var(--sg-shadow-soft) !important;
}

html[data-bs-theme="light"] .card-header,
html[data-bs-theme="light"] .card-footer,
html[data-bs-theme="light"] .modal-header,
html[data-bs-theme="light"] .modal-footer,
html[data-bs-theme="light"] .accordion-button,
html[data-bs-theme="light"] .dropdown-header,
html[data-bs-theme="light"] .table thead th{
  background:#f8fafc !important;
  color:var(--sg-heading) !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .btn-ghost,
html[data-bs-theme="light"] .btn-outline-light,
html[data-bs-theme="light"] .btn-outline-secondary{
  background:#ffffff !important;
  color:var(--sg-heading) !important;
  border-color:var(--sg-border-strong) !important;
  box-shadow:0 1px 0 rgba(15,23,42,.035) !important;
}

html[data-bs-theme="light"] .btn-ghost:hover,
html[data-bs-theme="light"] .btn-outline-light:hover,
html[data-bs-theme="light"] .btn-outline-secondary:hover{
  background:#f8fafc !important;
  color:var(--sg-heading) !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .28) !important;
}

html[data-bs-theme="light"] .btn-primary{
  color:#ffffff !important;
  background:var(--app-primary) !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .86) !important;
  box-shadow:0 10px 20px rgba(var(--app-primary-rgb,79,140,255), .18) !important;
}

html[data-bs-theme="light"] .form-control,
html[data-bs-theme="light"] .form-select,
html[data-bs-theme="light"] .input-group-text,
html[data-bs-theme="light"] textarea.form-control{
  background:var(--sg-input-bg) !important;
  color:var(--sg-input-text) !important;
  border-color:var(--sg-border-strong) !important;
  box-shadow:inset 0 1px 2px rgba(15,23,42,.045) !important;
}

html[data-bs-theme="light"] .form-control[readonly],
html[data-bs-theme="light"] .form-control:disabled,
html[data-bs-theme="light"] .form-select:disabled{
  background:var(--sg-input-bg-readonly) !important;
  color:rgba(15,23,42,.72) !important;
  opacity:1 !important;
}

html[data-bs-theme="light"] .form-control::placeholder,
html[data-bs-theme="light"] textarea.form-control::placeholder{
  color:var(--sg-input-placeholder) !important;
}

html[data-bs-theme="light"] input:-webkit-autofill,
html[data-bs-theme="light"] input:-webkit-autofill:hover,
html[data-bs-theme="light"] input:-webkit-autofill:focus,
html[data-bs-theme="light"] textarea:-webkit-autofill,
html[data-bs-theme="light"] select:-webkit-autofill{
  -webkit-text-fill-color:var(--sg-input-text) !important;
  caret-color:var(--sg-input-text) !important;
  box-shadow:0 0 0 1000px #ffffff inset, inset 0 1px 2px rgba(15,23,42,.045) !important;
  border-color:var(--sg-border-strong) !important;
  transition:background-color 9999s ease-out 0s;
}

html[data-bs-theme="light"] .form-control:focus,
html[data-bs-theme="light"] .form-select:focus{
  background:#ffffff !important;
  color:var(--sg-input-text) !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .55) !important;
  box-shadow:0 0 0 .22rem rgba(var(--app-primary-rgb,79,140,255), .16), inset 0 1px 2px rgba(15,23,42,.045) !important;
}

html[data-bs-theme="light"] .badge:not([class*="bg-"]):not([class*="text-bg-"]),
html[data-bs-theme="light"] .chip,
html[data-bs-theme="light"] .ops-chip,
html[data-bs-theme="light"] .opsx-pill,
html[data-bs-theme="light"] .ops-filter-pill,
html[data-bs-theme="light"] .ops-legend-pill{
  background:rgba(15,23,42,.045) !important;
  color:rgba(15,23,42,.78) !important;
  border-color:rgba(15,23,42,.10) !important;
}

html[data-bs-theme="light"] .app-nav-section{
  color:rgba(15,23,42,.50) !important;
}

html[data-bs-theme="light"] .app-nav-link,
html[data-bs-theme="light"] .app-sub-link{
  color:rgba(15,23,42,.72) !important;
  border-color:transparent !important;
}

html[data-bs-theme="light"] .app-nav-link:hover,
html[data-bs-theme="light"] .app-sub-link:hover,
html[data-bs-theme="light"] .app-nav-link.active,
html[data-bs-theme="light"] .app-sub-link.active,
html[data-bs-theme="light"] .app-nav-link[aria-expanded="true"]{
  background:rgba(var(--app-primary-rgb,79,140,255), .11) !important;
  color:#0f172a !important;
  border-color:rgba(var(--app-primary-rgb,79,140,255), .18) !important;
}

html[data-bs-theme="light"] .nav-sublinks,
html[data-bs-theme="light"] .app-nav-sub{
  border-color:rgba(15,23,42,.10) !important;
}

html[data-bs-theme="light"] .table-responsive{
  background:#ffffff !important;
  border-color:var(--sg-border) !important;
  box-shadow:var(--sg-shadow-soft) !important;
}

html[data-bs-theme="light"] .table,
html[data-bs-theme="light"] .table td,
html[data-bs-theme="light"] .table th{
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .table{
  --bs-table-bg:#ffffff !important;
  --bs-table-striped-bg:#f8fafc !important;
  --bs-table-hover-bg:rgba(var(--app-primary-rgb,79,140,255), .075) !important;
}

html[data-bs-theme="light"] .dropdown-item{
  color:var(--sg-text) !important;
}

html[data-bs-theme="light"] .dropdown-item:hover,
html[data-bs-theme="light"] .dropdown-item:focus,
html[data-bs-theme="light"] .dropdown-item.active{
  background:rgba(var(--app-primary-rgb,79,140,255), .10) !important;
  color:var(--sg-heading) !important;
}

html[data-bs-theme="light"] .alert{
  background:#ffffff !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .alert-success{ background:rgba(25,135,84,.10) !important; border-color:rgba(25,135,84,.24) !important; }
html[data-bs-theme="light"] .alert-danger{ background:rgba(220,53,69,.09) !important; border-color:rgba(220,53,69,.24) !important; }
html[data-bs-theme="light"] .alert-warning{ background:rgba(255,193,7,.14) !important; border-color:rgba(255,193,7,.30) !important; }
html[data-bs-theme="light"] .alert-info{ background:rgba(13,202,240,.12) !important; border-color:rgba(13,202,240,.28) !important; }

html[data-bs-theme="light"] .opsx-hero,
html[data-bs-theme="light"] .ops-topbar{
  background:
    radial-gradient(circle at 88% 5%, rgba(var(--app-primary-rgb,79,140,255), .10), transparent 35%),
    linear-gradient(135deg, #ffffff, #f8fafc) !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  box-shadow:var(--sg-shadow-soft) !important;
}

html[data-bs-theme="light"] .opsx-card,
html[data-bs-theme="light"] .ops-card,
html[data-bs-theme="light"] .opsx-item,
html[data-bs-theme="light"] .ops-mini-card,
html[data-bs-theme="light"] .ops-timeline-content,
html[data-bs-theme="light"] .opsx-priority-card,
html[data-bs-theme="light"] .opsx-location-box,
html[data-bs-theme="light"] .opsx-location-result,
html[data-bs-theme="light"] .opsx-evidence-card,
html[data-bs-theme="light"] .opsx-timeline-body,
html[data-bs-theme="light"] .opsx-radio-card span,
html[data-bs-theme="light"] .opsx-file-zone,
html[data-bs-theme="light"] .opsx-kpi,
html[data-bs-theme="light"] .ops-kpi{
  background:#ffffff !important;
  color:var(--sg-text) !important;
  border-color:var(--sg-border) !important;
  box-shadow:var(--sg-shadow-soft) !important;
}

html[data-bs-theme="light"] .opsx-card-header,
html[data-bs-theme="light"] .ops-card-header{
  background:#f8fafc !important;
  color:var(--sg-heading) !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .opsx-card-sub,
html[data-bs-theme="light"] .ops-card-sub,
html[data-bs-theme="light"] .opsx-item-meta,
html[data-bs-theme="light"] .opsx-item-desc,
html[data-bs-theme="light"] .ops-mini-meta,
html[data-bs-theme="light"] .opsx-radio-sub,
html[data-bs-theme="light"] .opsx-modal-title-sub,
html[data-bs-theme="light"] .opsx-evidence-meta,
html[data-bs-theme="light"] .opsx-location-result-meta{
  color:var(--sg-muted) !important;
}

html[data-bs-theme="light"] .opsx-map,
html[data-bs-theme="light"] .ops-map,
html[data-bs-theme="light"] .opsx-map-canvas,
html[data-bs-theme="light"] .opsx-location-preview,
html[data-bs-theme="light"] .opsx-location-modal-map,
html[data-bs-theme="light"] .opsx-location-empty,
html[data-bs-theme="light"] .opsx-evidence-preview{
  background:#eef3f9 !important;
  border-color:var(--sg-border) !important;
}

html[data-bs-theme="light"] .swal2-popup{
  background:#ffffff !important;
  color:var(--sg-text) !important;
  border:1px solid var(--sg-border) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.18) !important;
}

html[data-bs-theme="light"] .swal2-title{
  color:var(--sg-heading) !important;
}

html[data-bs-theme="light"] .swal2-html-container{
  color:var(--sg-muted) !important;
}

@media (max-width: 767.98px){
  html[data-bs-theme="light"] .auth-top,
  html[data-bs-theme="light"] .app-topbar{
    background:#ffffff !important;
  }
  html[data-bs-theme="light"] .auth-card{
    box-shadow:0 14px 34px rgba(15,23,42,.14) !important;
  }
}

/* ==========================================================
   SUGUARDIA V21 - Brand/logo consistency across themes
   The logo treatment must not change between light and dark.
   ========================================================== */
:root{
  --sg-logo-radius: 14px;
  --sg-logo-bg: #ffffff;
  --sg-logo-border: rgba(15, 23, 42, .14);
  --sg-logo-shadow: 0 8px 18px rgba(15,23,42,.08);
}

/* Same visual pattern for central/tenant login logos in both modes */
.auth-card .card-header img[src*="brand/"],
.auth-card .card-header img[src*="/brand/"],
.auth-top img[src*="brand/"],
.auth-top img[src*="/brand/"],
.app-brand-link > img[src*="brand/"],
.app-brand-link > img[src*="/brand/"],
img.app-logo[src*="brand/"],
img.app-logo[src*="/brand/"]{
  display:block !important;
  background:var(--sg-logo-bg) !important;
  border:1px solid var(--sg-logo-border) !important;
  border-radius:var(--sg-logo-radius) !important;
  padding:4px !important;
  object-fit:contain !important;
  overflow:hidden !important;
  box-shadow:var(--sg-logo-shadow) !important;
}

/* Logo containers: same radius and clipping in light/dark */
.app-logo:has(img),
.auth-card .card-header .app-logo:has(img),
.auth-top .app-logo:has(img),
.app-brand-link .app-logo:has(img){
  background:var(--sg-logo-bg) !important;
  border:1px solid var(--sg-logo-border) !important;
  border-radius:var(--sg-logo-radius) !important;
  padding:4px !important;
  overflow:hidden !important;
  box-shadow:var(--sg-logo-shadow) !important;
}

/* Avoid double frame when the image is inside an already-framed .app-logo */
.app-logo:has(img) > img{
  width:100% !important;
  height:100% !important;
  max-width:100% !important;
  max-height:100% !important;
  padding:0 !important;
  border:0 !important;
  border-radius:calc(var(--sg-logo-radius) - 4px) !important;
  box-shadow:none !important;
  background:transparent !important;
  object-fit:contain !important;
}

/* Login main logo: stable size and rounded white tile in both themes */
.auth-card .card-header img[src*="brand/"]{
  max-height:96px !important;
  max-width:min(360px, 84vw) !important;
}

/* Top/header brand logo: stable small tile in both themes */
.auth-top img[src*="brand/"],
.app-brand-link > img[src*="brand/"]{
  width:42px !important;
  height:42px !important;
  max-width:42px !important;
  max-height:42px !important;
}

/* Initials fallback only applies when there is no image */
.app-logo:not(:has(img)){
  background:rgba(var(--app-primary-rgb,79,140,255), .12) !important;
  border:1px solid rgba(var(--app-primary-rgb,79,140,255), .22) !important;
  border-radius:12px !important;
  box-shadow:none !important;
}


/* ==========================================================
   SUGUARDIA V3 - Product branding for the shared SaaS access
   ========================================================== */
.auth-card .card-header .access-product-logo{
  display:block !important;
  width:min(360px, 84vw) !important;
  height:auto !important;
  max-height:118px !important;
  margin:0 auto !important;
  background:#ffffff !important;
  border:1px solid rgba(15,23,42,.12) !important;
  border-radius:16px !important;
  padding:8px 12px !important;
  object-fit:contain !important;
  box-shadow:0 10px 24px rgba(15,23,42,.10) !important;
}
@media (max-width: 575.98px){
  .auth-card .card-header .access-product-logo{
    width:min(320px, 82vw) !important;
    max-height:104px !important;
    padding:7px 10px !important;
  }
}