/* Shared visual layer for Django pages. Presentation only. */
@media screen {
  :root {
    --premium-bg: #f3f6f8;
    --premium-panel: #ffffff;
    --premium-ink: #142d37;
    --premium-muted: #667b85;
    --premium-line: #dce6e9;
    --premium-accent: #087d77;
    --premium-shadow: 0 14px 38px rgba(23, 55, 68, .065), 0 2px 8px rgba(23, 55, 68, .035);
  }
  html[data-app-theme="dark"] {
    --premium-bg: #111918;
    --premium-panel: #1a2422;
    --premium-ink: #e4eeea;
    --premium-muted: #a9bbb4;
    --premium-line: #354440;
    --premium-accent: #83d7c5;
    --premium-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  }
  html { scroll-behavior: smooth; }
  body { font-family: 'Open Sans', system-ui, sans-serif; color: var(--premium-ink); background: var(--premium-bg); -webkit-font-smoothing: antialiased; }
  body :is(.container-fluid.bg-soft, main.content, main.main-content) { background-color: var(--premium-bg) !important; }
  body :is(main.content, main.main-content) { min-height: 100vh; padding-top: 1.5rem; padding-bottom: 3rem; }
  body :is(main.content, main.main-content) > :is(h1, h2, h3),
  body :is(main.content, main.main-content) > .row:first-child :is(h1, h2, h3) { color: var(--premium-ink); font-weight: 700; letter-spacing: -.035em; }
  body :is(.card, .table-container, .table-wrapper, .filter-section, .section-info-card, .form-card, .form-panel) {
    border: 1px solid var(--premium-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--premium-shadow);
  }
  body .card { background: var(--premium-panel); overflow: hidden; }
  body .card-header { border-bottom: 1px solid var(--premium-line); padding: 1rem 1.25rem; font-weight: 700; }
  body .card-body { padding: 1.25rem; }
  body :is(.table, table) { border-color: var(--premium-line); }
  body :is(.table, table) thead th { font-size: .73rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--premium-muted); border-bottom: 1px solid var(--premium-line); padding-top: .9rem; padding-bottom: .9rem; }
  body :is(.table, table) tbody td { vertical-align: middle; border-color: var(--premium-line); }
  body :is(.table, table) tbody tr { transition: background-color .18s ease; }
  body :is(.table, table) tbody tr:hover { background-color: rgba(8, 125, 119, .055); }
  body :is(.form-control, .form-select, .select2-selection, .input-group-text) { border-radius: 10px; border-color: var(--premium-line); min-height: 40px; }
  body :is(.form-control, .form-select, .select2-selection):focus { border-color: var(--premium-accent); box-shadow: 0 0 0 3px rgba(8, 125, 119, .14); }
  body :is(label, .form-label) { font-weight: 600; }
  body .btn { border-radius: 10px; font-weight: 650; letter-spacing: -.01em; transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease; }
  body .btn:hover { transform: translateY(-1px); box-shadow: 0 6px 14px rgba(20, 45, 55, .12); }
  body .btn:active { transform: translateY(0); }
  body :is(.btn-primary, .btn-success) { box-shadow: 0 3px 8px rgba(8, 90, 84, .14); }
  body :is(.badge, .alert, .dropdown-menu, .page-link) { border-radius: 10px; }
  body .modal-content { border: 1px solid var(--premium-line); border-radius: 20px; box-shadow: 0 30px 80px rgba(15, 37, 44, .2); overflow: hidden; }
  body .modal-header, body .modal-footer { border-color: var(--premium-line); }
  body :is(.breadcrumb, .nav-tabs) { border-color: var(--premium-line); }
  body :is(a, button, input, select, textarea):focus-visible { outline: 3px solid rgba(8, 125, 119, .4); outline-offset: 2px; }
  #sidebarMenu { background: linear-gradient(165deg, #0e343d 0%, #0b4a4d 58%, #075758 100%) !important; border-right: 1px solid rgba(255,255,255,.09) !important; box-shadow: 8px 0 32px rgba(9, 42, 46, .14); }
  #sidebarMenu .nav-link { border-radius: 10px; margin: 2px 8px; transition: background-color .18s ease, color .18s ease, transform .18s ease; }
  #sidebarMenu .nav-link:hover { background: rgba(255,255,255,.1) !important; color: #fff !important; transform: translateX(2px); }
  #sidebarMenu :is(.nav-link.active, .nav-item.active > .nav-link) { background: rgba(157, 230, 215, .17) !important; color: #fff !important; box-shadow: inset 3px 0 0 #9de6d7; }
  #sidebarMenu .soft-grey-divider { opacity: .2; }
  @media (max-width: 767px) {
    body :is(main.content, main.main-content) { padding: 1rem .75rem 2rem; }
    body .card-body { padding: 1rem; }
    body :is(.table-responsive, .table-container, .table-wrapper) { overflow-x: auto; }
  }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body .btn, #sidebarMenu .nav-link { transition: none; }
  }
}

/* The top bar spans the viewport and continues the sidebar color. */
@media screen {
  body:has(#navbar) #navbar.navbar-top {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    width: 100vw !important;
    max-width: 100vw;
    height: 64px;
    min-height: 64px;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.12);
    border-radius: 0 !important;
    z-index: 1045;
  }
  body:has(#navbar) #navbarSupportedContent { min-height: 64px; gap: 16px; }
  body:has(#navbar) #sidebarMenu {
    top: 0 !important;
    bottom: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  body:has(#navbar) :is(main.content, main.main-content) { padding-top: 86px !important; }
  body:has(#navbar) #navbar-top { display: none !important; }
  @media (max-width: 767.98px) {
    body:has(#navbar) #navbar.navbar-top { height: 56px; min-height: 56px; padding: 0 10px !important; }
    body:has(#navbar) #navbarSupportedContent { min-height: 56px; gap: 4px; }
    body:has(#navbar) #sidebarMenu { top: 0 !important; height: 100dvh !important; }
    body:has(#navbar) :is(main.content, main.main-content) { padding-top: 72px !important; }
  }
}

/* Slim workspace bar inspired by the supplied reference. */
@media screen {
  #navbar.navbar-top {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    z-index: 20;
    width: 100%;
    min-height: 64px;
    margin: 0 0 20px;
    padding: 0 26px !important;
    background: var(--premium-panel) !important;
    border: 1px solid var(--premium-line);
    border-radius: 0;
    box-shadow: 0 2px 7px rgba(18, 47, 58, .045);
    color: var(--premium-ink);
  }
  #navbar .app-topbar-inner { width: 100%; }
  #navbarSupportedContent { min-height: 62px; gap: 12px; }
  #navbar .navbar-nav { margin-left: auto; }
  #navbar .status-avatar-group { gap: 18px; }
  #navbar .app-topbar-sidebar-toggle,
  #navbar .app-topbar-profile,
  #navbar .app-topbar-logout {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: #60758f;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .18s ease, color .18s ease;
  }
  #navbar .app-topbar-sidebar-toggle:hover,
  #navbar .app-topbar-profile:hover { background: rgba(8, 125, 119, .08); color: var(--premium-accent); }
  #navbar .app-topbar-logout { color: #df4e58; }
  #navbar .app-topbar-logout:hover { background: rgba(223, 78, 88, .09); color: #b72e3a; }
  #navbar .app-topbar-sidebar-toggle svg { width: 18px; height: 18px; }
  #navbar .app-topbar-user { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.2; }
  #navbar .username-text { color: var(--premium-ink) !important; font-size: 14px; font-weight: 700; white-space: nowrap; }
  #navbar .app-topbar-user-caption { color: var(--premium-muted); font-size: 12px; white-space: nowrap; }
  #navbar .connection-status { font-size: 12px; }
  #navbar .app-theme-toggle { flex: 0 0 auto; }
  @media (min-width: 768px) {
    #sidebarMenu #toggleSidebar { display: none !important; }
    #sidebarMenu .rail-top { min-height: 12px; }
  }
  @media (max-width: 767.98px) {
    #navbar.navbar-top { min-height: 56px; margin-bottom: 16px; padding: 0 10px !important; }
    #navbarSupportedContent { min-height: 54px; }
    #navbar .status-avatar-group { gap: 4px; }
    #navbar .app-topbar-user { max-width: 110px; }
    #navbar .username-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; font-size: 12px; }
    #navbar .app-topbar-user-caption { display: none; }
    #navbar .connection-status { display: none; }
    #navbar .app-topbar-profile { display: none; }
    #navbar .app-topbar-sidebar-toggle,
    #navbar .app-topbar-logout { width: 34px; height: 34px; }
  }
}

@media screen {
  body:has(#navbar) #navbar.navbar-top {
    background: #fff !important;
    color: #213b46 !important;
    border-bottom-color: #e1e8eb;
    box-shadow: 0 3px 16px rgba(23, 55, 68, .08);
  }
  #navbar .app-topbar-sidebar-toggle,
  #navbar .app-topbar-profile { color: #536e80; }
  @media (min-width: 768px) {
    #navbar .app-topbar-sidebar-toggle { margin-left: 272px; }
    body:has(#sidebarMenu[data-collapsed="true"]) #navbar .app-topbar-sidebar-toggle { margin-left: 56px; }
  }
  #navbar .app-topbar-sidebar-toggle:hover,
  #navbar .app-topbar-profile:hover { color: #087d77; background: #edf7f5; }
  #navbar .username-text { color: #213b46 !important; }
  #navbar .app-topbar-user-caption { color: #667b85; }
  #navbar .connection-status { color: #526d76; }
  #navbar .status-avatar-group .app-theme-toggle { color: #536e80; background: #f4f8f8; border-color: #e1e8eb; }
  #navbar .status-avatar-group .app-theme-toggle:hover { background: #eaf4f2; }
  #navbar .app-topbar-logout { color: #d64b55; }
  #navbar .app-topbar-logout:hover { color: #b72e3a; background: #fff0f0; }
  html[data-app-theme="dark"] body:has(#navbar) #navbar.navbar-top {
    background: #1a2422 !important;
    color: #e4eeea !important;
    border-bottom-color: #354440;
    box-shadow: 0 4px 18px rgba(0, 0, 0, .2);
  }
  html[data-app-theme="dark"] #navbar .app-topbar-sidebar-toggle,
  html[data-app-theme="dark"] #navbar .app-topbar-profile { color: #c0d4cc; }
  html[data-app-theme="dark"] #navbar .app-topbar-sidebar-toggle:hover,
  html[data-app-theme="dark"] #navbar .app-topbar-profile:hover { color: #e4eeea; background: #2a3b36; }
  html[data-app-theme="dark"] #navbar .username-text { color: #e4eeea !important; }
  html[data-app-theme="dark"] #navbar .connection-status { color: #bdd2c8; }
  html[data-app-theme="dark"] #navbar .status-avatar-group .app-theme-toggle {
    color: #d8ebe1;
    background: #263630;
    border-color: #465b51;
  }
  html[data-app-theme="dark"] #navbar .status-avatar-group .app-theme-toggle:hover { background: #32473e; }
  html[data-app-theme="dark"] #navbar .app-topbar-logout { color: #ffaaa8; }
  html[data-app-theme="dark"] #navbar .app-topbar-logout:hover { color: #ffd1cf; background: #4a2d30; }
}

/* Flat logo and coordinated sidebar motion. */
@media screen {
  #sidebarMenu .brand-logo picture { display: contents; }
  #sidebarMenu .brand-logo::before,
  #sidebarMenu .brand-logo::after,
  #sidebarMenu .logo-rail::before,
  #sidebarMenu .logo-rail::after { content: none !important; display: none !important; }
  #sidebarMenu .brand-logo img,
  #sidebarMenu .brand:hover .brand-logo img,
  #sidebarMenu .logo-rail img {
    filter: none !important;
    box-shadow: none !important;
    transform: none !important;
  }
  @media (min-width: 768px) {
    #sidebarMenu .sidebar-header {
      display: block !important;
      max-height: 250px;
      opacity: 1;
      overflow: hidden;
    }
    #sidebarMenu[data-collapsed="true"] .sidebar-header { max-height: 0; opacity: 0; }
    #sidebarMenu .logo-rail { display: flex !important; height: 0; opacity: 0; overflow: hidden; }
    #sidebarMenu[data-collapsed="true"] .logo-rail { height: 56px; opacity: 1; }
    #sidebarMenu .bold-text {
      display: inline-block !important;
      flex: 0 1 auto;
      max-width: 220px;
      opacity: 1;
      overflow: hidden !important;
      white-space: normal !important;
      vertical-align: middle;
    }
    #sidebarMenu[data-collapsed="true"] .bold-text { max-width: 0; opacity: 0; pointer-events: none; white-space: nowrap !important; }
  }
  @media (prefers-reduced-motion: no-preference) {
    #sidebarMenu { --sidebar-motion: .3s cubic-bezier(.4, 0, .2, 1); }
    #sidebarMenu {
      transition: width var(--sidebar-motion),
                  min-width var(--sidebar-motion),
                  max-width var(--sidebar-motion),
                  transform var(--sidebar-motion) !important;
    }
    #sidebarMenu ~ .content { transition: margin-left .3s cubic-bezier(.4, 0, .2, 1) !important; }
    #navbar .app-topbar-sidebar-toggle { transition: margin-left .3s cubic-bezier(.4, 0, .2, 1), background-color .18s ease, color .18s ease; }
    #sidebarMenu .nav-link { transition: background-color .2s ease, color .2s ease, transform .3s ease; }
    #sidebarMenu .sidebar-header,
    #sidebarMenu .logo-rail { transition: max-height var(--sidebar-motion), height var(--sidebar-motion), opacity var(--sidebar-motion) !important; }
    #sidebarMenu .bold-text { transition: max-width var(--sidebar-motion), opacity var(--sidebar-motion) !important; }
  }
}

/* Connection on the left, compact account controls on the right. */
@media screen {
  #navbar .connection-status { flex: 0 0 auto; margin: 0; color: #526d76; }
  #navbar .app-connection-icon { display: none; }
  #navbar .status-avatar-group { gap: 18px; }
  #navbar .app-topbar-identity { display: inline-flex; align-items: center; gap: 2px; min-width: 0; }
  #navbar .app-topbar-profile { width: 30px; height: 32px; }
  #navbar .app-topbar-logout { margin-right: 10px; }
  @media (max-width: 767.98px) {
    #navbar .connection-status {
      display: inline-flex !important;
      align-items: center;
      justify-content: center;
      width: 32px;
      min-width: 32px;
      height: 32px;
      padding: 0 !important;
      border: 0 !important;
      background: transparent !important;
    }
    #navbar .connection-status .status-dot { display: none !important; }
    #navbar .connection-status #connection-text {
      display: block !important;
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }
    #navbar .app-connection-icon { display: inline-block; font-size: 15px; }
    #navbar .connection-status.online .app-connection-icon { color: #168262; }
    #navbar .connection-status.offline .app-connection-icon { color: #d64b55; }
    #navbar .connection-status.checking .app-connection-icon { color: #718995; }
    #navbar .status-avatar-group { gap: 10px; }
    #navbar .app-topbar-identity { gap: 0; }
    #navbar .app-topbar-profile { display: none !important; }
    #navbar .app-topbar-logout { margin-right: 6px; }
  }
}

/* Compact mobile header: green surface and a connection indicator dot. */
@media screen and (max-width: 767.98px) {
  html[data-app-theme] body:has(#navbar) #navbar.navbar-top {
    background: linear-gradient(100deg, #0e343d 0%, #0b4a4d 58%, #075758 100%) !important;
    color: #f2faf8 !important;
    border-bottom-color: rgba(255,255,255,.12);
  }
  html[data-app-theme] #navbar .app-topbar-sidebar-toggle,
  html[data-app-theme] #navbar .app-topbar-profile { color: #d5ece9; }
  html[data-app-theme] #navbar .username-text { color: #f2faf8 !important; }
  html[data-app-theme] #navbar .status-avatar-group .app-theme-toggle {
    color: #f1fff9;
    background: rgba(255,255,255,.08);
    border-color: rgba(230,255,248,.24);
  }
  #navbar .connection-status .app-connection-icon { display: none !important; }
  #navbar .connection-status .status-dot {
    display: inline-block !important;
    width: 11px;
    height: 11px;
    margin: 0 !important;
    border: 2px solid rgba(255,255,255,.55);
    border-radius: 50%;
    box-shadow: none !important;
  }
  #navbar .connection-status.online .status-dot { background: #49d39b !important; }
  #navbar .connection-status.offline .status-dot { background: #f17675 !important; }
  #navbar .connection-status.checking .status-dot { background: #b9cac9 !important; }
}

/* Shared logout confirmation for the sidebar and top bar. */
@media screen {
  body.app-logout-open { overflow: hidden; }
  .app-logout-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(12, 29, 34, .54);
    backdrop-filter: blur(5px);
  }
  .app-logout-backdrop[hidden] { display: none !important; }
  .app-logout-dialog {
    width: min(100%, 390px);
    padding: 27px;
    border: 1px solid #dce6e9;
    border-radius: 20px;
    background: #fff;
    color: #213b46;
    box-shadow: 0 28px 90px rgba(4, 24, 32, .25);
    text-align: center;
    animation: app-logout-in .22s ease-out both;
  }
  .app-logout-icon {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin: 0 auto 15px;
    border-radius: 15px;
    background: #eaf5f2;
    color: #087d77;
    font-size: 19px;
  }
  .app-logout-dialog h2 { margin: 0 0 8px; color: inherit; font-size: 20px; font-weight: 750; }
  .app-logout-dialog p { margin: 0 0 22px; color: #667b85; font-size: 14px; }
  .app-logout-actions { display: flex; justify-content: flex-end; gap: 10px; }
  .app-logout-actions button {
    flex: 1 1 0;
    min-height: 42px;
    border-radius: 10px;
    font-weight: 700;
    cursor: pointer;
  }
  .app-logout-cancel { border: 1px solid #dce6e9; background: #fff; color: #3c5863; }
  .app-logout-cancel:hover { background: #f3f7f8; }
  .app-logout-proceed { border: 1px solid #087d77; background: #087d77; color: #fff; }
  .app-logout-proceed:hover { background: #086b66; }
  .app-logout-dialog.is-loading .app-logout-actions { display: none; }
  .app-logout-progress {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;
    min-height: 42px;
    color: #087d77;
    font-size: 14px;
    font-weight: 700;
  }
  .app-logout-progress[hidden] { display: none !important; }
  .app-logout-spinner {
    width: 19px;
    height: 19px;
    border: 2px solid rgba(8, 125, 119, .2);
    border-top-color: #087d77;
    border-radius: 50%;
    animation: app-logout-spin .7s linear infinite;
  }
  html[data-app-theme="dark"] .app-logout-dialog { background: #1a2422; color: #e4eeea; border-color: #354440; }
  html[data-app-theme="dark"] .app-logout-dialog p { color: #a9bbb4; }
  html[data-app-theme="dark"] .app-logout-icon { background: #294138; color: #83d7c5; }
  html[data-app-theme="dark"] .app-logout-cancel { background: #263330; border-color: #465751; color: #e4eeea; }
  html[data-app-theme="dark"] .app-logout-cancel:hover { background: #30413c; }
  html[data-app-theme="dark"] .app-logout-progress { color: #83d7c5; }
  html[data-app-theme="dark"] .app-logout-spinner { border-color: rgba(131, 215, 197, .2); border-top-color: #83d7c5; }
  @keyframes app-logout-spin { to { transform: rotate(360deg); } }
  @keyframes app-logout-in {
    from { opacity: 0; transform: translateY(8px) scale(.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .app-logout-dialog { animation: none; }
    .app-logout-spinner { animation-duration: 1.4s; }
  }
}

/* Login keeps its existing theme styling without a floating theme control. */
body.login-page > .app-theme-toggle-floating { display: none !important; }

/* The Material Scanner uses the viewport as its fixed canvas. */
@media screen {
  html:has(main.qr-page),
  body:has(main.qr-page) {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden !important;
  }
  body:has(main.qr-page) > .container-fluid.bg-soft {
    height: 100vh;
    height: 100dvh;
    min-height: 100dvh !important;
    overflow: hidden;
  }
  body:has(main.qr-page) main.qr-page {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    min-height: 0 !important;
    max-height: 100dvh;
    padding-top: 64px !important;
    padding-bottom: 0 !important;
    overflow: hidden;
  }
  body:has(main.qr-page) .qr-shell {
    flex: 1 1 auto;
    min-height: 0 !important;
    height: auto;
    max-height: 100%;
    padding: clamp(8px, 2vh, 18px) 16px;
    overflow: hidden;
  }
  body:has(main.qr-page) .qr-card { padding: clamp(12px, 2.5vh, 24px); }
  body:has(main.qr-page) .qr-sketch { width: min(100%, clamp(120px, 20vh, 240px)); margin: 0 auto 6px; }
  body:has(main.qr-page) .qr-eyebrow { margin-bottom: 8px; }
  body:has(main.qr-page) .qr-description { margin-top: 6px; line-height: 1.4; }
  body:has(main.qr-page) .qr-widget { margin-top: 10px; }
  body:has(main.qr-page) .qr-hint { margin-top: 8px; padding-top: 8px; line-height: 1.35; }
  @media (max-width: 767.98px) {
    body:has(main.qr-page) main.qr-page { padding-top: 56px !important; }
    body:has(main.qr-page) .qr-shell { padding-inline: 10px; }
    body:has(main.qr-page) .qr-sketch { width: min(100%, clamp(110px, 17vh, 180px)); }
    body:has(main.qr-page) .qr-card { padding: clamp(12px, 2vh, 20px) 14px; }
  }
}

/* Desktop sidebar changes state immediately to keep the web view light. */
@media screen and (min-width: 768px) {
  #sidebarMenu,
  #sidebarMenu ~ .content,
  #sidebarMenu .sidebar-header,
  #sidebarMenu .logo-rail,
  #sidebarMenu .bold-text,
  #navbar .app-topbar-sidebar-toggle {
    transition: none !important;
  }
}

@media screen and (max-width: 767.98px) {
  #sidebarMenu .brand-logo { width: 78px; height: 78px; margin: 14px auto 20px; }
  #sidebarMenu { width: 80vw !important; min-width: 80vw !important; max-width: 80vw !important; }
  #sidebarOverlay { -webkit-backdrop-filter: blur(0); backdrop-filter: blur(0); transition: opacity .25s ease, backdrop-filter .25s ease; }
  #sidebarMenu.sidebar-open ~ #sidebarOverlay {
    opacity: 1 !important;
    background: rgba(245, 248, 247, .12);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
  }
  html[data-app-theme="dark"] #sidebarMenu.sidebar-open ~ #sidebarOverlay { background: rgba(8, 16, 15, .18); }
}