/* ABNMB Group Digital Desk — readable, responsive shared interface */

body.db-ui-v2 {
  --db-accent: #8b6a2b;
  --db-accent-hover: #684b20;
  --db-accent-strong: #5a3f1d;
  --db-accent-highlight: #c4ac5e;
  --db-accent-soft: #eee5cf;
  --db-bg: #f2eee7;
  --db-surface: #fffdf9;
  --db-surface-alt: #eee7dc;
  --db-text: #2d211b;
  --db-muted: #77695d;
  --db-border: #d8cdbf;
  --db-sidebar: #2b211c;
  --db-sidebar-hover: #3b2d26;
  --db-sidebar-text: #e9dfd2;
  --db-positive: #725c3d;
  --db-warning: #a66f2c;
  --db-danger: #a94f43;
  --db-info: #8f7963;
  --db-radius: 0px;
  --db-shadow: 0 4px 14px rgba(61, 44, 32, .07);
  --bs-theme: var(--db-accent);
  --bs-theme-rgb: 139, 106, 43;
  --bs-theme-color: #fff;
  --bs-primary: var(--db-accent);
  --bs-primary-rgb: 139, 106, 43;
  --bs-success: var(--db-positive);
  --bs-success-rgb: 114, 92, 61;
  --bs-warning: var(--db-warning);
  --bs-warning-rgb: 166, 111, 44;
  --bs-danger: var(--db-danger);
  --bs-danger-rgb: 169, 79, 67;
  --bs-info: var(--db-info);
  --bs-info-rgb: 143, 121, 99;
  --bs-body-bg: var(--db-bg);
  --bs-body-bg-rgb: 242, 238, 231;
  --bs-body-color: var(--db-text);
  --bs-body-color-rgb: 45, 33, 27;
  --bs-inverse: var(--db-text);
  --bs-inverse-rgb: 45, 33, 27;
  --bs-component-bg: var(--db-surface);
  --bs-component-bg-rgb: 255, 253, 249;
  --bs-component-color: var(--db-text);
  --bs-border-color: var(--db-border);
  min-width: 320px;
  background: var(--db-bg) !important;
  color: var(--db-text) !important;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif !important;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0;
}

html[data-db-ui-theme="dark"] body.db-ui-v2 {
  --db-bg: #17110e;
  --db-surface: #211814;
  --db-surface-alt: #2d211b;
  --db-text: #f0e6d9;
  --db-muted: #b6a696;
  --db-border: #4a3a30;
  --db-sidebar: #120d0b;
  --db-sidebar-hover: #31231d;
  --db-sidebar-text: #e8ddcf;
  --db-accent: #cfb568;
  --db-accent-hover: #e0c983;
  --db-accent-strong: #ead89d;
  --db-accent-highlight: #d8c37c;
  --db-accent-soft: rgba(207, 181, 104, .14);
  --db-positive: #c1aa82;
  --db-warning: #d49b54;
  --db-danger: #dd8274;
  --db-info: #b8a28c;
  --db-shadow: 0 12px 30px rgba(0, 0, 0, .22);
  --bs-theme: var(--db-accent);
  --bs-theme-rgb: 207, 181, 104;
  --bs-theme-color: #1d1511;
  --bs-primary: var(--db-accent);
  --bs-primary-rgb: 207, 181, 104;
  --bs-success: var(--db-positive);
  --bs-success-rgb: 193, 170, 130;
  --bs-warning: var(--db-warning);
  --bs-warning-rgb: 212, 155, 84;
  --bs-danger: var(--db-danger);
  --bs-danger-rgb: 221, 130, 116;
  --bs-info: var(--db-info);
  --bs-info-rgb: 184, 162, 140;
  --bs-body-bg: var(--db-bg);
  --bs-body-bg-rgb: 23, 17, 14;
  --bs-body-color: var(--db-text);
  --bs-body-color-rgb: 240, 230, 217;
  --bs-inverse: var(--db-text);
  --bs-inverse-rgb: 240, 230, 217;
  --bs-component-bg: var(--db-surface);
  --bs-component-bg-rgb: 33, 24, 20;
  --bs-component-color: var(--db-text);
  --bs-border-color: var(--db-border);
}

body.db-ui-v2,
body.db-ui-v2 button,
body.db-ui-v2 input,
body.db-ui-v2 select,
body.db-ui-v2 textarea,
body.db-ui-v2 table {
  font-family: inherit !important;
}

body.db-ui-v2 *:focus-visible {
  outline: 3px solid rgba(139, 106, 43, .28) !important;
  outline-offset: 2px;
}

body.db-ui-v2 a { text-decoration-thickness: 1px; text-underline-offset: 2px; }
body.db-ui-v2 .text-theme { color: var(--db-accent) !important; }
body.db-ui-v2 .text-inverse { color: var(--db-text) !important; }
body.db-ui-v2 .text-muted { color: var(--db-muted) !important; }
body.db-ui-v2 .bg-theme { background-color: var(--db-accent) !important; }

/* Header */
body.db-ui-v2 .app-header {
  min-height: 64px;
  background: var(--db-surface) !important;
  border-bottom: 1px solid var(--db-border) !important;
  box-shadow: 0 2px 10px rgba(61, 44, 32, .05);
  color: var(--db-text) !important;
}

body.db-ui-v2 .app-header .brand {
  background: var(--db-surface) !important;
  border-right: 1px solid var(--db-border);
}

body.db-ui-v2 .app-header .brand-logo {
  gap: 10px;
  color: var(--db-text) !important;
  letter-spacing: -.01em;
  font-weight: 750;
}

body.db-ui-v2 .db-brand-logo-image { width: 92px; height: 30px; object-fit: contain; object-position: left center; }

body.db-ui-v2 .brand-img::before,
body.db-ui-v2 .brand-img::after { display: none !important; }

body.db-ui-v2 .brand-img-text {
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: -.04em;
  transform: none !important;
}

body.db-ui-v2 .brand-text { font-size: 13px; white-space: nowrap; }

body.db-ui-v2 .db-header-context {
  display: flex;
  min-width: 0;
  margin-right: auto;
  padding: 0 20px;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--db-border);
}

body.db-ui-v2 .db-header-context span {
  color: var(--db-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}

body.db-ui-v2 .db-header-context strong {
  max-width: 280px;
  overflow: hidden;
  color: var(--db-text);
  font-size: 13px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

body.db-ui-v2 .app-header .menu { margin-left: 0; }
body.db-ui-v2 .app-header .menu-link {
  min-width: 46px;
  min-height: 46px;
  color: var(--db-text) !important;
  border-radius: 10px;
  transition: background-color .18s ease, color .18s ease;
}
body.db-ui-v2 .app-header .menu-link:hover { background: var(--db-surface-alt); }
body.db-ui-v2 .db-ui-theme-button { padding: 0; border: 0; background: transparent; }
body.db-ui-v2 .db-ui-theme-button .db-svg { width: 19px; height: 19px; }
body.db-ui-v2 .menu-badge { border: 2px solid var(--db-surface); font-weight: 700; }
body.db-ui-v2 .db-user-icon {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--db-accent-soft);
  color: var(--db-accent);
}
body.db-ui-v2 .db-user-icon.online::after { border-color: var(--db-surface); }

/* Sidebar */
body.db-ui-v2 .app-sidebar {
  background: var(--db-sidebar) !important;
  color: var(--db-sidebar-text) !important;
  border-right: 0 !important;
  box-shadow: 8px 0 24px rgba(42, 29, 22, .10);
}

body.db-ui-v2 .app-sidebar::before,
body.db-ui-v2 .app-sidebar::after { display: none !important; }

body.db-ui-v2 .app-sidebar .menu { padding: 14px 12px 24px; }
body.db-ui-v2 .db-sidebar-profile {
  display: flex;
  min-width: 0;
  margin: 2px 2px 13px;
  padding: 10px;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
}

body.db-ui-v2 .db-sidebar-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  place-items: center;
  border-radius: 10px;
  background: rgba(214, 195, 138, .15);
  color: #d6c38a;
  font-size: 14px;
  font-weight: 800;
}

body.db-ui-v2 .db-sidebar-profile-copy { display: flex; min-width: 0; flex-direction: column; }
body.db-ui-v2 .db-sidebar-profile-copy strong,
body.db-ui-v2 .db-sidebar-profile-copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body.db-ui-v2 .db-sidebar-profile-copy strong { color: #f4eadc; font-size: 12px; font-weight: 700; }
body.db-ui-v2 .db-sidebar-profile-copy small { color: #b8a798; font-size: 10px; }

body.db-ui-v2 .db-sidebar-search {
  display: flex;
  height: 40px;
  margin: 0 2px 16px;
  padding: 0 10px;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 10px;
  background: rgba(255, 255, 255, .055);
  color: #b9aa9b;
}
body.db-ui-v2 .db-sidebar-search .db-svg { width: 16px; height: 16px; }
body.db-ui-v2 .db-sidebar-search input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0 !important;
  background: transparent;
  color: #f4eadc;
  font-size: 12px;
}
body.db-ui-v2 .db-sidebar-search input::placeholder { color: #99897c; }
body.db-ui-v2 .db-sidebar-search kbd {
  padding: 1px 5px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 5px;
  background: transparent;
  color: #b8a798;
  font: inherit;
  font-size: 9px;
}

body.db-ui-v2 .app-sidebar .menu-header {
  position: relative;
  margin: 18px 5px 6px;
  padding: 0 18px 0 6px;
  color: #a99686 !important;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .11em;
  line-height: 1.6;
  text-transform: uppercase;
  cursor: pointer;
  user-select: none;
}
body.db-ui-v2 .app-sidebar .menu-header::after {
  position: absolute;
  top: 1px;
  right: 5px;
  content: "−";
  color: #8f7c6e;
  font-size: 13px;
  font-weight: 400;
}
body.db-ui-v2 .app-sidebar .menu-header.is-collapsed::after { content: "+"; }
body.db-ui-v2 .app-sidebar .menu-header.db-search-hidden,
body.db-ui-v2 .app-sidebar .menu-item.db-search-hidden,
body.db-ui-v2 .app-sidebar .menu-item.db-group-hidden { display: none !important; }

body.db-ui-v2 .app-sidebar .menu-item { margin: 2px 0; }
body.db-ui-v2 .app-sidebar .menu-item .menu-link {
  min-height: 42px;
  padding: 9px 10px;
  gap: 10px;
  border: 1px solid transparent;
  border-radius: 10px;
  color: var(--db-sidebar-text) !important;
  font-size: 12px;
  font-weight: 530;
  letter-spacing: 0;
  line-height: 1.3;
  text-transform: none;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
body.db-ui-v2 .app-sidebar .menu-item .menu-link:hover {
  background: var(--db-sidebar-hover) !important;
  color: #fff !important;
}
body.db-ui-v2 .app-sidebar .menu-item.active .menu-link {
  border-color: rgba(214, 195, 138, .14);
  background: rgba(214, 195, 138, .14) !important;
  color: #fff8ed !important;
  box-shadow: inset 3px 0 0 #d6c38a;
}
body.db-ui-v2 .app-sidebar .menu-icon {
  display: grid;
  width: 20px;
  min-width: 20px;
  place-items: center;
  color: #b9aa9b !important;
}
body.db-ui-v2 .app-sidebar .active .menu-icon { color: #d6c38a !important; }
body.db-ui-v2 .app-sidebar .menu-text { overflow: hidden; text-overflow: ellipsis; white-space: normal; }

body.db-ui-v2 .app.app-sidebar-collapsed .db-sidebar-profile,
body.db-ui-v2 .app.app-sidebar-collapsed .db-sidebar-search { display: none; }
body.db-ui-v2 .app.app-sidebar-collapsed .app-sidebar .menu { padding-left: 6px; padding-right: 6px; }

/* Main content and typography */
body.db-ui-v2 .app-content {
  min-height: calc(100vh - 64px);
  padding: 24px !important;
  background: var(--db-bg) !important;
  color: var(--db-text) !important;
}

body.db-ui-v2 .page-title,
body.db-ui-v2 h1,
body.db-ui-v2 h2,
body.db-ui-v2 h3,
body.db-ui-v2 h4,
body.db-ui-v2 h5,
body.db-ui-v2 h6 {
  color: var(--db-text);
  font-family: inherit !important;
  letter-spacing: -.015em;
  text-transform: none;
}
body.db-ui-v2 .page-title { font-size: clamp(22px, 2vw, 30px); font-weight: 760; line-height: 1.2; }
body.db-ui-v2 .page-kicker {
  margin-bottom: 5px;
  color: var(--db-accent) !important;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
body.db-ui-v2 p { color: var(--db-muted); }
body.db-ui-v2 .small,
body.db-ui-v2 small { letter-spacing: 0; }

/* Cards and panels */
body.db-ui-v2 .card,
body.db-ui-v2 .panel,
body.db-ui-v2 .widget-card,
body.db-ui-v2 .form-panel,
body.db-ui-v2 .db-panel,
body.db-ui-v2 .hud-panel {
  background: var(--db-surface) !important;
  color: var(--db-text) !important;
  border: 1px solid var(--db-border) !important;
  border-radius: var(--db-radius) !important;
  box-shadow: var(--db-shadow) !important;
}
body.db-ui-v2 .card-header,
body.db-ui-v2 .panel-heading,
body.db-ui-v2 .card-footer {
  background: transparent !important;
  color: var(--db-text) !important;
  border-color: var(--db-border) !important;
}
body.db-ui-v2 .card-body { padding: clamp(16px, 2vw, 22px); }
body.db-ui-v2 .card-arrow,
body.db-ui-v2 [class^="card-arrow-"] { display: none !important; }
body.db-ui-v2 .db-theme-panel { display: none !important; }

/* Forms */
body.db-ui-v2 .form-label {
  margin-bottom: 6px;
  color: var(--db-text);
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 0;
  text-transform: none;
}
body.db-ui-v2 .form-control,
body.db-ui-v2 .form-select,
body.db-ui-v2 input[type="text"],
body.db-ui-v2 input[type="search"],
body.db-ui-v2 input[type="email"],
body.db-ui-v2 input[type="password"],
body.db-ui-v2 input[type="number"],
body.db-ui-v2 input[type="date"],
body.db-ui-v2 input[type="datetime-local"],
body.db-ui-v2 textarea,
body.db-ui-v2 select {
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--db-border) !important;
  border-radius: 10px !important;
  background-color: var(--db-surface) !important;
  color: var(--db-text) !important;
  font-size: 13px;
  box-shadow: none !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
body.db-ui-v2 textarea { min-height: 96px; resize: vertical; }
body.db-ui-v2 .form-control:focus,
body.db-ui-v2 .form-select:focus,
body.db-ui-v2 textarea:focus,
body.db-ui-v2 select:focus {
  border-color: var(--db-accent) !important;
  box-shadow: 0 0 0 3px rgba(139, 106, 43, .14) !important;
}
body.db-ui-v2 .form-control::placeholder,
body.db-ui-v2 textarea::placeholder { color: #a29284; opacity: 1; }
body.db-ui-v2 .input-group-text {
  border-color: var(--db-border);
  background: var(--db-surface-alt);
  color: var(--db-muted);
}
body.db-ui-v2 .form-check-input:checked { border-color: var(--db-accent); background-color: var(--db-accent); }

/* Buttons */
body.db-ui-v2 .btn {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px !important;
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: none;
  transition: transform .12s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
body.db-ui-v2 .btn:hover { transform: translateY(-1px); }
body.db-ui-v2 .btn:active { transform: translateY(0); }
body.db-ui-v2 .btn-theme,
body.db-ui-v2 .btn-primary {
  border-color: var(--db-accent) !important;
  background: var(--db-accent) !important;
  color: #fff !important;
}
html[data-db-ui-theme="dark"] body.db-ui-v2 .btn-theme,
html[data-db-ui-theme="dark"] body.db-ui-v2 .btn-primary { color: #1d1511 !important; }
body.db-ui-v2 .btn-theme:hover,
body.db-ui-v2 .btn-primary:hover { border-color: var(--db-accent-hover) !important; background: var(--db-accent-hover) !important; }
body.db-ui-v2 .btn-outline-theme { border-color: var(--db-accent) !important; color: var(--db-accent) !important; }
body.db-ui-v2 .btn-outline-theme:hover { background: var(--db-accent) !important; color: #fff !important; }
body.db-ui-v2 .btn-light,
body.db-ui-v2 .btn-default { border-color: var(--db-border) !important; background: var(--db-surface) !important; color: var(--db-text) !important; }
body.db-ui-v2 .btn-sm { min-height: 34px; padding: 6px 10px; }
body.db-ui-v2 .btn-lg { min-height: 48px; padding: 11px 18px; font-size: 14px; }

/* Tables and data density */
body.db-ui-v2 .table-responsive {
  max-width: 100%;
  overflow-x: auto !important;
  border: 1px solid var(--db-border);
  border-radius: 12px;
  background: var(--db-surface);
  scrollbar-width: thin;
}
body.db-ui-v2 .table-responsive.db-has-overflow { box-shadow: inset -12px 0 12px -14px rgba(61, 44, 32, .42); }
body.db-ui-v2 .table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--db-text);
  --bs-table-border-color: var(--db-border);
  width: 100%;
  margin-bottom: 0;
  color: var(--db-text) !important;
  font-size: 12px;
  letter-spacing: 0;
}
body.db-ui-v2 .table > :not(caption) > * > * { padding: 11px 12px; border-color: var(--db-border); vertical-align: middle; }
body.db-ui-v2 .table thead th {
  position: sticky;
  z-index: 2;
  top: 0;
  background: var(--db-surface-alt) !important;
  color: var(--db-muted) !important;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: none;
  white-space: nowrap;
}
body.db-ui-v2 .table tbody tr { transition: background-color .14s ease; }
body.db-ui-v2 .table tbody tr:hover > * { background-color: var(--db-accent-soft) !important; }
body.db-ui-v2 .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(119, 105, 93, .045); color: var(--db-text); }
body.db-ui-v2 .table a { font-weight: 650; }

/* Menus, badges, messages */
body.db-ui-v2 .dropdown-menu {
  padding: 7px;
  border: 1px solid var(--db-border) !important;
  border-radius: 12px !important;
  background: var(--db-surface) !important;
  color: var(--db-text) !important;
  box-shadow: 0 16px 42px rgba(61, 44, 32, .17) !important;
}
body.db-ui-v2 .dropdown-item {
  min-height: 38px;
  border-radius: 8px;
  color: var(--db-text) !important;
  font-size: 12px;
}
body.db-ui-v2 .dropdown-item:hover,
body.db-ui-v2 .dropdown-item:focus { background: var(--db-accent-soft) !important; color: var(--db-text) !important; }
body.db-ui-v2 .dropdown-divider { border-color: var(--db-border); }
body.db-ui-v2 .dropdown-header { color: var(--db-muted); font-weight: 750; }
body.db-ui-v2 .badge { padding: 5px 8px; border-radius: 999px; font-weight: 650; letter-spacing: 0; }
body.db-ui-v2 .alert {
  border-width: 1px;
  border-radius: 12px;
  font-size: 13px;
  box-shadow: 0 6px 18px rgba(61, 44, 32, .06);
}
body.db-ui-v2 .pagination .page-link {
  min-width: 36px;
  min-height: 36px;
  border-color: var(--db-border);
  background: var(--db-surface);
  color: var(--db-text);
}
body.db-ui-v2 .pagination .active .page-link { border-color: var(--db-accent); background: var(--db-accent); color: #fff; }

/* Charts, modals and common third-party surfaces */
body.db-ui-v2 .modal-content,
body.db-ui-v2 .offcanvas {
  border: 1px solid var(--db-border);
  border-radius: 16px;
  background: var(--db-surface);
  color: var(--db-text);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .24);
}
body.db-ui-v2 .modal-header,
body.db-ui-v2 .modal-footer { border-color: var(--db-border); }
body.db-ui-v2 .nav-tabs { border-color: var(--db-border); gap: 4px; }
body.db-ui-v2 .nav-tabs .nav-link { border-radius: 9px 9px 0 0; color: var(--db-muted); font-weight: 650; }
body.db-ui-v2 .nav-tabs .nav-link.active { border-color: var(--db-border) var(--db-border) var(--db-surface); background: var(--db-surface); color: var(--db-accent); }
body.db-ui-v2 .apexcharts-tooltip,
body.db-ui-v2 .apexcharts-xaxistooltip { border-color: var(--db-border) !important; background: var(--db-surface) !important; color: var(--db-text) !important; }
body.db-ui-v2 .leaflet-popup-content-wrapper,
body.db-ui-v2 .leaflet-popup-tip { background: var(--db-surface); color: var(--db-text); }

/* Login */
body.db-ui-v2.db-login-body {
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 15% 18%, rgba(139, 106, 43, .14), transparent 24rem),
    var(--db-bg) !important;
}
body.db-ui-v2 .db-login-wrap {
  display: grid;
  min-height: 100vh;
  padding: 32px;
  place-items: center;
}
body.db-ui-v2 .db-login-shell {
  display: grid;
  width: min(1040px, 100%);
  min-height: 610px;
  grid-template-columns: minmax(0, 1.12fr) minmax(380px, .88fr);
  overflow: hidden;
  border: 1px solid var(--db-border);
  border-radius: 24px;
  background: var(--db-surface);
  box-shadow: 0 28px 80px rgba(54, 37, 27, .18);
}
body.db-ui-v2 .db-login-welcome {
  position: relative;
  display: flex;
  padding: 48px;
  overflow: hidden;
  flex-direction: column;
  justify-content: space-between;
  background:
    radial-gradient(circle at 80% 14%, rgba(214, 195, 138, .18), transparent 16rem),
    linear-gradient(150deg, #211712 0%, #4a3428 100%);
  color: #fff;
}
body.db-ui-v2 .db-login-welcome::after {
  position: absolute;
  right: -90px;
  bottom: -90px;
  width: 290px;
  height: 290px;
  border: 1px solid rgba(214, 195, 138, .14);
  border-radius: 50%;
  box-shadow: 0 0 0 48px rgba(214, 195, 138, .035), 0 0 0 96px rgba(214, 195, 138, .02);
  content: "";
}
body.db-ui-v2 .db-login-brand { display: flex; align-items: center; gap: 10px; font-size: 13px; letter-spacing: -.01em; }
body.db-ui-v2 .db-login-brand-light { position: relative; z-index: 1; color: #fff; }
body.db-ui-v2 .db-login-brand img { width: 140px; height: 45px; object-fit: contain; object-position: left center; }
body.db-ui-v2 .db-login-mark {
  display: grid;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #684b20, #c4ac5e);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
  box-shadow: 0 7px 18px rgba(0, 0, 0, .16);
}
body.db-ui-v2 .db-login-welcome-copy { position: relative; z-index: 1; max-width: 500px; }
body.db-ui-v2 .db-login-eyebrow { display: block; margin-bottom: 16px; color: #d6c38a; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

body.db-ui-v2 .db-stop-thumb { display:inline-grid; width:52px; height:52px; object-fit:cover; place-items:center; border:1px solid var(--db-border); border-radius:10px; background:var(--db-surface-alt); color:var(--db-muted); }
body.db-ui-v2 .db-login-welcome h1 { margin: 0 0 18px; color: #fff; font-size: clamp(32px, 3.2vw, 48px); font-weight: 760; line-height: 1.08; }
body.db-ui-v2 .db-login-welcome p { max-width: 470px; margin: 0; color: #d8cabc; font-size: 15px; line-height: 1.65; }
body.db-ui-v2 .db-login-benefits { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 8px; }
body.db-ui-v2 .db-login-benefits span { padding: 7px 10px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 0; background: rgba(255, 255, 255, .06); color: #eadfce; font-size: 10px; }
body.db-ui-v2 .db-login-card {
  width: auto;
  margin: 0;
  align-self: stretch;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.db-ui-v2 .db-login-card .card-body { display: flex; height: 100%; padding: clamp(36px, 6vw, 68px); flex-direction: column; justify-content: center; }
body.db-ui-v2 .db-login-card .page-title { font-size: 28px; }
body.db-ui-v2 .db-login-hint { margin: 0 0 26px; color: var(--db-muted); font-size: 13px; }
body.db-ui-v2 .db-login-brand-mobile { display: none; margin-bottom: 36px; color: var(--db-text); }
body.db-ui-v2 .db-login-security { margin-top: 20px; color: var(--db-muted); font-size: 10px; text-align: center; }

/* ABNMB unified coffee system: square geometry and warm semantic colors. */
body.db-ui-v2 a:not(.btn):not(.menu-link):not(.dropdown-item) { color: var(--db-accent-strong); }
html[data-db-ui-theme="dark"] body.db-ui-v2 a:not(.btn):not(.menu-link):not(.dropdown-item) { color: var(--db-accent); }

body.db-ui-v2 .text-primary,
body.db-ui-v2 .text-theme { color: var(--db-accent) !important; }
body.db-ui-v2 .text-success { color: var(--db-positive) !important; }
body.db-ui-v2 .text-info { color: var(--db-info) !important; }
body.db-ui-v2 .text-warning { color: var(--db-warning) !important; }
body.db-ui-v2 .text-danger { color: var(--db-danger) !important; }
body.db-ui-v2 .bg-primary,
body.db-ui-v2 .bg-theme { background-color: var(--db-accent) !important; }
body.db-ui-v2 .bg-success { background-color: var(--db-positive) !important; }
body.db-ui-v2 .bg-info { background-color: var(--db-info) !important; }

body.db-ui-v2 .badge.ok,
body.db-ui-v2 .badge.bg-success {
  border-color: rgba(114, 92, 61, .34) !important;
  background: rgba(114, 92, 61, .11) !important;
  color: var(--db-positive) !important;
}
body.db-ui-v2 .badge.warn,
body.db-ui-v2 .badge.bg-warning {
  border-color: rgba(166, 111, 44, .34) !important;
  background: rgba(166, 111, 44, .11) !important;
  color: var(--db-warning) !important;
}
body.db-ui-v2 .badge.danger,
body.db-ui-v2 .badge.bg-danger {
  border-color: rgba(169, 79, 67, .34) !important;
  background: rgba(169, 79, 67, .11) !important;
  color: var(--db-danger) !important;
}
body.db-ui-v2 .alert-success { border-color: rgba(114, 92, 61, .34) !important; background: rgba(114, 92, 61, .09) !important; color: var(--db-text) !important; }
body.db-ui-v2 .alert-info { border-color: rgba(143, 121, 99, .34) !important; background: rgba(143, 121, 99, .09) !important; color: var(--db-text) !important; }
body.db-ui-v2 .alert-warning { border-color: rgba(166, 111, 44, .34) !important; background: rgba(166, 111, 44, .09) !important; color: var(--db-text) !important; }
body.db-ui-v2 .alert-danger { border-color: rgba(169, 79, 67, .34) !important; background: rgba(169, 79, 67, .09) !important; color: var(--db-text) !important; }

body.db-ui-v2 .card,
body.db-ui-v2 .panel,
body.db-ui-v2 .widget-card,
body.db-ui-v2 .form-panel,
body.db-ui-v2 .db-panel,
body.db-ui-v2 .hud-panel {
  border-top: 2px solid var(--db-accent-highlight) !important;
}
body.db-ui-v2 .corner { display: none !important; }
body.db-ui-v2 .btn:hover { transform: none; }
body.db-ui-v2 .db-import-review-original { background: var(--db-accent-soft) !important; }

body.db-ui-v2 .card,
body.db-ui-v2 .panel,
body.db-ui-v2 .widget-card,
body.db-ui-v2 .form-panel,
body.db-ui-v2 .db-panel,
body.db-ui-v2 .hud-panel,
body.db-ui-v2 .modal-content,
body.db-ui-v2 .offcanvas,
body.db-ui-v2 .dropdown-menu,
body.db-ui-v2 .dropdown-item,
body.db-ui-v2 .alert,
body.db-ui-v2 .table-responsive,
body.db-ui-v2 .btn,
body.db-ui-v2 .badge,
body.db-ui-v2 .pagination .page-link,
body.db-ui-v2 .form-control,
body.db-ui-v2 .form-select,
body.db-ui-v2 input,
body.db-ui-v2 select,
body.db-ui-v2 textarea,
body.db-ui-v2 .input-group-text,
body.db-ui-v2 .nav-tabs .nav-link,
body.db-ui-v2 .chip,
body.db-ui-v2 .zone-card,
body.db-ui-v2 .db-status-pill,
body.db-ui-v2 .db-metric-chip,
body.db-ui-v2 .db-channel-mini,
body.db-ui-v2 .db-items-box,
body.db-ui-v2 .db-map-candidate,
body.db-ui-v2 .db-map-status,
body.db-ui-v2 .db-map-table-wrap,
body.db-ui-v2 .db-review-modal-card,
body.db-ui-v2 .db-import-review-text,
body.db-ui-v2 .db-review-media-grid img,
body.db-ui-v2 .db-stop-thumb,
body.db-ui-v2 .db-login-shell,
body.db-ui-v2 .db-login-mark,
body.db-ui-v2 .db-login-benefits span,
body.db-ui-v2 .db-sidebar-profile,
body.db-ui-v2 .db-sidebar-avatar,
body.db-ui-v2 .db-sidebar-search,
body.db-ui-v2 .db-sidebar-search kbd,
body.db-ui-v2 .app-header .menu-link,
body.db-ui-v2 .app-sidebar .menu-item .menu-link,
body.db-ui-v2 .db-attachment-thumb,
body.db-ui-v2 .db-ticket-status-badge,
body.db-ui-v2 .loyalty-refresh-box,
body.db-ui-v2 [class*="rounded"] {
  border-radius: 0 !important;
}

body.db-ui-v2 .apexcharts-tooltip,
body.db-ui-v2 .apexcharts-xaxistooltip,
body.db-ui-v2 .apexcharts-menu,
body.db-ui-v2 .leaflet-popup-content-wrapper {
  border-radius: 0 !important;
}
body.db-ui-v2 .apexcharts-gridline { stroke: var(--db-border) !important; }
body.db-ui-v2 .apexcharts-text,
body.db-ui-v2 .apexcharts-legend-text { fill: var(--db-muted) !important; color: var(--db-muted) !important; }

/* Responsive behavior */
@media (max-width: 1199.98px) {
  body.db-ui-v2 .db-header-context strong { max-width: 180px; }
  body.db-ui-v2 .app-content { padding: 20px !important; }
}

@media (max-width: 991.98px) {
  body.db-ui-v2 .app-header { min-height: 58px; }
  body.db-ui-v2 .app-header .brand { border-right: 0; }
  body.db-ui-v2 .db-header-context { display: none; }
  body.db-ui-v2 .app-sidebar { width: min(86vw, 310px) !important; }
  body.db-ui-v2 .app-content { min-height: calc(100vh - 58px); padding: 16px !important; }
  body.db-ui-v2 .app-sidebar-mobile-backdrop { background: rgba(4, 10, 20, .55); backdrop-filter: blur(2px); }
  body.db-ui-v2 .db-login-wrap { padding: 20px; }
  body.db-ui-v2 .db-login-shell { min-height: 570px; grid-template-columns: minmax(0, 1fr) minmax(360px, .9fr); }
  body.db-ui-v2 .db-login-welcome { padding: 38px; }
}

@media (max-width: 767.98px) {
  body.db-ui-v2 .brand-text { display: none; }
  body.db-ui-v2 .app-header .brand { width: auto; }
  body.db-ui-v2 .app-header .menu-link { min-width: 42px; }
  body.db-ui-v2 .app-content { padding: 14px !important; }
  body.db-ui-v2 .card-body { padding: 16px; }
  body.db-ui-v2 .row { --bs-gutter-x: 16px; }
  body.db-ui-v2 .btn { min-height: 42px; }
  body.db-ui-v2 .table { min-width: 680px; }
  body.db-ui-v2 .table > :not(caption) > * > * { padding: 10px; }
  body.db-ui-v2 .dropdown-mobile-full .dropdown-menu { max-width: calc(100vw - 20px); }
  body.db-ui-v2 .db-login-wrap { padding: 14px; }
  body.db-ui-v2 .db-login-shell { display: block; width: min(480px, 100%); min-height: 0; border-radius: 20px; }
  body.db-ui-v2 .db-login-welcome { display: none; }
  body.db-ui-v2 .db-login-card .card-body { padding: 32px 26px; }
  body.db-ui-v2 .db-login-brand-mobile { display: flex; }
}

@media (max-width: 479.98px) {
  body.db-ui-v2 .app-header .brand-img { width: 32px; height: 32px; flex-basis: 32px; }
  body.db-ui-v2 .app-header .menu > .menu-item:first-child { margin-left: auto; }
  body.db-ui-v2 .app-content { padding: 12px !important; }
  body.db-ui-v2 .page-title { font-size: 22px; }
  body.db-ui-v2 .card,
  body.db-ui-v2 .panel { border-radius: 0 !important; }
  body.db-ui-v2 .db-login-card .card-body { padding: 28px 20px; }
}

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

@media print {
  body.db-ui-v2 .app-header,
  body.db-ui-v2 .app-sidebar,
  body.db-ui-v2 .app-sidebar-mobile-backdrop,
  body.db-ui-v2 .btn-scroll-top { display: none !important; }
  body.db-ui-v2 .app-content { margin: 0 !important; padding: 0 !important; background: #fff !important; color: #111 !important; }
  body.db-ui-v2 .card { break-inside: avoid; box-shadow: none !important; }
}