/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 */
/* Native DeskApp layout bridge. Application behavior remains in app.js. */

:root {
  --native-primary: #1b00ff;
  --native-ink: #202342;
  --native-muted: #667f87;
  --native-canvas: #ecf0f4;
  --native-paper: #fff;
  --native-sidebar: #fff;
  --native-sidebar-active: #142127;
  --native-icon-bg: #334148;
  --native-border: #e3e8ee;
  --native-shadow: 0 0 28px rgb(0 0 0 / 8%);
}

html,
body {
  overflow-x: clip;
}

body.deskapp-ui {
  overflow: hidden;
  background: var(--native-canvas);
  color: var(--native-ink);
  font-family: Inter, sans-serif;
}

/* Original DeskApp shell proportions */
.left-side-bar {
  left: 0;
  width: 250px;
  background: var(--native-sidebar) !important;
  box-shadow: none;
  border-right: 1px solid var(--native-border);
}

.left-side-bar .brand-logo {
  width: 250px;
  height: 70px;
  min-height: 70px;
  padding: 5px 18px;
  border-bottom: 1px solid var(--native-border);
  background: var(--native-paper);
}

.left-side-bar .brand-logo .brand {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 11px;
  padding: 0;
}

.left-side-bar .brand-mark {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 0;
  background: transparent;
}

.left-side-bar .brand-mark .brand-logo-img {
  display: block !important;
  width: 48px;
  height: 48px;
  padding: 4px;
  object-fit: contain;
  transform: scale(1.55);
  filter: invert(1);
}

.left-side-bar .brand-mark .light-logo {
  display: none !important;
}

.left-side-bar .brand-title,
.sidebar-dark .brand-title {
  max-width: none;
  color: var(--native-ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0;
}

.left-side-bar .menu-block {
  height: calc(100vh - 70px);
  padding-top: 8px;
  overflow-y: auto;
}

.sidebar-menu {
  padding: 0 10px 18px;
}

.sidebar-menu > ul > li {
  margin-bottom: 4px;
}

.sidebar-menu .dropdown-toggle,
.sidebar-menu .dropdown-toggle.no-arrow {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 18px;
  min-height: 52px;
  align-items: center;
  column-gap: 12px;
  border-radius: 8px;
  padding: 12px 14px;
  color: #0b132b;
  font-size: 15px;
  font-weight: 500;
}

.sidebar-menu .dropdown-toggle .micon {
  position: static;
  display: grid;
  width: 30px;
  height: 30px;
  align-self: center !important;
  place-items: center;
  margin: 0;
  color: #0b132b;
  font-size: 22px;
  line-height: 1;
  text-align: center;
  transform: none !important;
}

.sidebar-menu .dropdown-toggle .micon::before {
  display: block;
  width: 30px;
  line-height: 30px;
  text-align: center;
}

.sidebar-menu .dropdown-toggle .micon.bi-house::before {
  transform: translateX(0);
}

.sidebar-menu .dropdown-toggle .micon.bi-hdd-stack::before {
  transform: translateX(1px);
}

.sidebar-menu .dropdown-toggle .micon.bi-pie-chart::before {
  transform: translateX(1px);
}

.sidebar-menu .dropdown-toggle .mtext {
  position: static;
  min-width: 0;
  margin: 0;
  line-height: 1.3;
  white-space: nowrap;
}

.sidebar-menu .dropdown-toggle::after {
  content: "" !important;
  position: static;
  display: block;
  width: 8px;
  height: 8px;
  justify-self: center;
  border: 0;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  color: #0b132b;
  font-family: inherit;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.sidebar-menu .dropdown.show > .dropdown-toggle::after {
  content: "" !important;
  transform: translateY(2px) rotate(225deg);
}

.sidebar-menu .dropdown.show > .dropdown-toggle,
.sidebar-menu .dropdown-toggle:hover {
  background: var(--native-sidebar-active);
  color: var(--native-paper);
}

.sidebar-menu .dropdown.show > .dropdown-toggle .micon,
.sidebar-menu .dropdown.show > .dropdown-toggle::after,
.sidebar-menu .dropdown-toggle:hover .micon,
.sidebar-menu .dropdown-toggle:hover::after {
  color: var(--native-paper);
}

.sidebar-menu .submenu {
  display: none;
  margin: 5px 0 8px;
  padding: 4px 6px;
  border-radius: 8px;
  background: #e5ebf0;
}

.sidebar-menu .dropdown.show > .submenu {
  display: block !important;
}

.sidebar-menu .submenu li {
  margin: 0;
}

.sidebar-menu .submenu a,
.sidebar-menu .submenu .nav-link {
  position: relative;
  display: flex;
  min-height: 44px;
  align-items: center;
  border-radius: 7px;
  padding: 10px 10px 10px 48px;
  color: #0b132b;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
}

.sidebar-menu .submenu a::before {
  content: "−";
  position: absolute;
  left: 25px;
  top: 50%;
  color: #0b132b;
  font-weight: 700;
  transform: translateY(-50%);
}

.sidebar-menu .submenu a.active,
.sidebar-menu .submenu a:hover {
  background: var(--native-sidebar-active);
  color: var(--native-paper);
}

.sidebar-menu .submenu a.active::before,
.sidebar-menu .submenu a:hover::before {
  color: var(--native-paper);
}

.main-container.shell {
  min-height: 100vh;
  padding: 70px 0 0 250px !important;
}

.main-container.shell > .header {
  left: 250px !important;
  right: 0;
  width: calc(100% - 250px) !important;
  height: 70px;
  padding: 0 20px;
  border: 0;
  background: var(--native-paper);
  box-shadow: 0 0 25px rgb(0 0 0 / 10%);
}

.header .header-left {
  width: 62%;
  gap: 20px;
}

#menu-toggle {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #555;
  font-size: 25px;
}

.topbar-breadcrumb {
  display: none;
}

.header .header-search {
  width: min(100%, 490px);
  max-width: 490px;
  padding-left: 0;
}

.header .header-search .search-input {
  height: 46px;
  min-height: 46px;
  border: 1px solid #d4d4d4;
  border-radius: 8px;
  background: var(--native-paper);
}

.header .header-search .search-icon {
  color: #334148;
  font-size: 20px;
}

.header .header-right {
  display: flex;
  height: 70px;
  align-items: center;
  gap: 0;
}

.language-picker {
  display: flex;
  height: 70px;
  align-items: center;
  padding: 0 8px;
}

.language-picker select,
.login-language-picker select {
  width: 66px;
  height: 38px;
  padding: 0 24px 0 10px;
  border-radius: 7px;
  font-weight: 700;
}

.login-language-picker {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 10;
}

.login-card .login-brand-mark {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  background: #0b132b;
}

.login-card .login-brand-mark .brand-logo-img {
  width: 64px;
  height: 64px;
  padding: 5px;
  object-fit: contain;
  transform: scale(1.55);
}

.header .user-notification {
  display: flex;
  height: 70px;
  align-items: center;
  margin: 0;
  padding: 0 5px;
  float: none;
}

.header .user-notification .dropdown,
.header .header-dropdown {
  display: flex;
  align-items: center;
}

.header .header-icon-button {
  display: grid;
  width: 48px;
  height: 48px;
  min-height: 48px;
  place-items: center;
  border: 1px solid var(--native-border);
  border-radius: 8px;
  color: #0b132b;
  font-size: 22px;
  line-height: 1;
  padding: 0;
}

.header .header-icon-button i {
  display: block;
  line-height: 1;
}

.header .header-user-toggle {
  height: 70px;
  padding: 0 8px;
}

.header .header-user-toggle .user-icon.admin-avatar {
  width: 52px;
  min-width: 52px;
  height: 52px;
}

.shell-content {
  height: calc(100vh - 70px);
  padding: 30px 20px;
  overflow-x: clip;
  overflow-y: auto;
}

.shell-content > :is(.page-heading, .status-line, section) {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

.page-heading {
  margin: 0;
  padding: 0 0 20px !important;
  background: transparent !important;
  box-shadow: none !important;
}

.page-heading .eyebrow,
.page-heading #page-subtitle {
  display: none;
}

.page-heading h1 {
  margin: 0;
  color: var(--native-ink);
  font-size: 28px;
  font-weight: 700;
}

.status-line {
  display: none;
}

#dashboard-view.active,
#table-view.active,
#profile-view:not([hidden]),
#reports-view:not([hidden]) {
  gap: 20px;
}

/* DeskApp widget-style3 cards */
.metrics,
.grid-4,
.dashboard-summary,
.customer-summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.metric-card,
.metric-card.card-box {
  min-height: 98px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: var(--native-paper);
  box-shadow: var(--native-shadow);
}

.metric-card .metric-native {
  display: flex;
  min-height: 98px;
}

.metric-card .widget-data {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  padding: 18px 15px;
}

.metric-card strong {
  order: -1;
  margin-bottom: 4px;
  color: var(--native-ink);
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.metrics .metric-card strong {
  overflow: hidden;
  font-size: clamp(18px, 1.7vw, 24px);
  overflow-wrap: normal;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.metric-card .metric-label {
  color: var(--native-muted);
  font-size: 14px;
  font-weight: 500;
}

.metric-card .widget-data p,
.metric-card .widget-data small {
  margin: 3px 0 0;
  color: #7f92a9;
  font-size: 11px;
  line-height: 1.25;
}

.entity-panel-grid {
  align-items: stretch;
}

.entity-panel-grid .metric-card {
  min-width: 0;
}

.entity-panel-grid .metric-card strong {
  font-size: clamp(19px, 2vw, 25px);
}

.metric-card .widget-icon {
  display: grid;
  width: 60px;
  flex: 0 0 60px;
  place-items: center;
  border-radius: 0 10px 10px 0;
  background: var(--native-icon-bg);
  color: var(--native-paper);
  font-size: 28px;
}

.metric-card.green .widget-icon { color: #09cc06; }
.metric-card.red .widget-icon { color: #ff5b5b; }
.metric-card.amber .widget-icon { color: #f2a654; }
.metric-card.blue .widget-icon { color: #00eccf; }

.panel-card,
.table-card,
.form-card {
  border: 0;
  border-radius: 10px;
  background: var(--native-paper);
  box-shadow: var(--native-shadow);
}

.panel-card,
.table-card,
.form-card {
  padding: 20px;
}

.section-head {
  padding-bottom: 16px;
}

.section-head h2 {
  color: var(--native-ink);
  font-size: 18px;
}

.section-head p {
  color: var(--native-muted);
}

.dashboard-hero-grid {
  grid-template-columns: minmax(0, 2fr) minmax(280px, .75fr);
  gap: 20px;
}

.dashboard-grid,
.grid-2,
.notices-sections {
  gap: 20px;
}

.table-wrap {
  border-color: var(--native-border);
  border-radius: 5px;
}

.table-wrap th {
  background: #f3f5f7;
}

.grace-control-card {
  align-items: start;
}

.grace-control-fields {
  grid-template-columns: minmax(220px, .55fr) minmax(320px, 1fr);
  align-items: end;
}

.grace-presets {
  align-items: stretch;
}

.grace-presets .btn-secondary {
  min-height: 44px;
}

.automation-settings-form .action-row {
  align-items: center;
  flex-wrap: wrap;
}

/* Full dark theme, not just isolated surfaces. */
body:not(.light-theme) {
  --native-ink: #f4f7fb;
  --native-muted: #a9b7ca;
  --native-canvas: #0c1424;
  --native-paper: #152033;
  --native-sidebar: #101a2c;
  --native-sidebar-active: #315fe5;
  --native-icon-bg: #26364d;
  --native-border: #2b3a51;
  --native-shadow: 0 12px 30px rgb(0 0 0 / 24%);
  background: var(--native-canvas);
  color: var(--native-ink);
}

body:not(.light-theme) .left-side-bar,
body:not(.light-theme) .left-side-bar .brand-logo,
body:not(.light-theme) .main-container.shell > .header,
body:not(.light-theme) .panel-card,
body:not(.light-theme) .table-card,
body:not(.light-theme) .form-card,
body:not(.light-theme) .metric-card,
body:not(.light-theme) .metric-card.card-box,
body:not(.light-theme) .right-sidebar,
body:not(.light-theme) .header-panel,
body:not(.light-theme) dialog .dialog-panel,
body:not(.light-theme) dialog .modal-content {
  border-color: var(--native-border);
  background: var(--native-paper) !important;
  color: var(--native-ink);
}

body:not(.light-theme) .left-side-bar .brand-title,
body:not(.light-theme) .sidebar-menu .dropdown-toggle,
body:not(.light-theme) .sidebar-menu .dropdown-toggle .micon,
body:not(.light-theme) .sidebar-menu .dropdown-toggle::after,
body:not(.light-theme) .sidebar-menu .submenu a,
body:not(.light-theme) h1,
body:not(.light-theme) h2,
body:not(.light-theme) h3,
body:not(.light-theme) h4,
body:not(.light-theme) .metric-card strong,
body:not(.light-theme) .table {
  color: var(--native-ink);
}

body:not(.light-theme) .sidebar-menu .submenu,
body:not(.light-theme) .table-wrap th,
body:not(.light-theme) .table-striped tbody tr:nth-of-type(odd),
body:not(.light-theme) input,
body:not(.light-theme) select,
body:not(.light-theme) textarea,
body:not(.light-theme) .form-control {
  border-color: var(--native-border);
  background: #1c2940;
  color: var(--native-ink);
}

body:not(.light-theme) .sidebar-menu .dropdown.show > .dropdown-toggle,
body:not(.light-theme) .sidebar-menu .dropdown-toggle:hover,
body:not(.light-theme) .sidebar-menu .submenu a.active,
body:not(.light-theme) .sidebar-menu .submenu a:hover {
  background: var(--native-sidebar-active);
  color: #fff;
}

body:not(.light-theme) .sidebar-menu .dropdown.show > .dropdown-toggle .micon,
body:not(.light-theme) .sidebar-menu .dropdown.show > .dropdown-toggle::after,
body:not(.light-theme) .sidebar-menu .submenu a.active::before {
  color: #fff;
}

body:not(.light-theme) .table-wrap,
body:not(.light-theme) .table td,
body:not(.light-theme) .table th {
  border-color: var(--native-border);
}

body:not(.light-theme) p,
body:not(.light-theme) small,
body:not(.light-theme) .metric-label,
body:not(.light-theme) .metric-card .widget-data p,
body:not(.light-theme) .metric-card .widget-data small {
  color: var(--native-muted);
}

body:not(.light-theme) .header .header-search .search-input {
  border-color: var(--native-border);
  background: #1c2940;
  color: var(--native-ink);
}

body:not(.light-theme) .header .header-icon-button,
body:not(.light-theme) #menu-toggle {
  color: var(--native-ink);
}

body:not(.light-theme) .right-sidebar .sidebar-title {
  border-color: var(--native-border);
}

/* Brand header follows the selected theme with explicit contrast. */
body.deskapp-ui.light-theme .left-side-bar .brand-logo {
  border-color: #e3e8ee;
  background: #fff !important;
}

body.deskapp-ui.light-theme .left-side-bar .brand-logo .brand {
  background: #fff !important;
  color: #202342 !important;
}

body.deskapp-ui.light-theme .left-side-bar .brand-title {
  color: #202342 !important;
}

body.deskapp-ui.light-theme .left-side-bar .brand-mark {
  background: transparent !important;
}

body.deskapp-ui.light-theme .left-side-bar .brand-logo-img {
  filter: invert(1);
}

body.deskapp-ui:not(.light-theme) .left-side-bar .brand-logo {
  border-color: #2b3a51;
  background: #0b132b !important;
}

body.deskapp-ui:not(.light-theme) .left-side-bar .brand-logo .brand {
  background: #0b132b !important;
  color: #fff !important;
}

body.deskapp-ui:not(.light-theme) .left-side-bar .brand-title {
  color: #fff !important;
}

body.deskapp-ui:not(.light-theme) .left-side-bar .brand-mark {
  background: transparent !important;
}

body.deskapp-ui:not(.light-theme) .left-side-bar .brand-logo-img {
  filter: none;
}

/* Explicit light state prevents a stale sidebar-dark class from leaking through. */
body.light-theme .left-side-bar,
body.light-theme.sidebar-light .left-side-bar {
  border-color: #e3e8ee;
  background: #fff !important;
}

body.light-theme .left-side-bar .brand-logo,
body.light-theme.sidebar-light .left-side-bar .brand-logo {
  border-color: #e3e8ee;
  background: #fff !important;
}

body.light-theme .left-side-bar .brand-title,
body.light-theme.sidebar-light .left-side-bar .brand-title,
body.light-theme .sidebar-menu .dropdown-toggle,
body.light-theme .sidebar-menu .dropdown-toggle .micon,
body.light-theme .sidebar-menu .dropdown-toggle::after,
body.light-theme .sidebar-menu .submenu a {
  color: #0b132b;
}

body.light-theme .sidebar-menu .submenu {
  background: #e5ebf0;
}

body.sidebar-shrink .main-container.shell {
  padding-left: 0 !important;
}

body.sidebar-shrink .main-container.shell > .header {
  left: 0 !important;
  width: 100% !important;
}

@media (max-width: 1300px) {
  .left-side-bar {
    left: -251px;
  }

  .left-side-bar.open {
    left: 0;
  }

  .main-container.shell {
    padding-left: 0 !important;
  }

  .main-container.shell > .header {
    left: 0 !important;
    width: 100% !important;
  }
}

@media (max-width: 1100px) {
  .metrics,
  .grid-4,
  .dashboard-summary,
  .customer-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-hero-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .shell-content {
    padding: 20px 10px;
  }

  .metrics,
  .grid-4,
  .dashboard-summary,
  .customer-summary-grid,
  .dashboard-grid,
  .grid-2,
  .notices-sections {
    grid-template-columns: 1fr;
  }

  .header .header-left {
    width: 25%;
  }

  .header .header-right {
    width: 75%;
  }
}

@media (max-width: 560px) {
  .language-picker {
    padding: 0 2px;
  }

  .language-picker select {
    width: 54px;
    padding-left: 7px;
  }

  .grace-control-fields {
    grid-template-columns: 1fr;
  }
}