:root {
  --blue-900:#00245c;
  --blue-800:#003982;
  --blue-700:#0054c8;
  --orange:#f97316;
  --orange-dark:#ea580c;
  --text:#0f1b3d;
  --muted:#64748b;
  --border:#dbe3ef;
  --bg:#f7f9fc;
  --white:#ffffff;
  --shadow:0 18px 45px rgba(15, 23, 42, .08);
}

* { box-sizing:border-box; }
body {
  margin:0;
  min-height:100vh;
  font-family: Arial, Aptos, sans-serif;
  color:var(--text);
  background:var(--bg);
}

a { color:#005bea; text-decoration:none; }
a:hover { text-decoration:underline; }

.btn {
  border:1px solid var(--border);
  background:#fff;
  color:var(--text);
  border-radius:10px;
  padding:11px 20px;
  font-weight:800;
  font-size:8px;
  cursor:pointer;
  text-decoration:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
}
.btn:hover { text-decoration:none; }
.btn-primary {
  background:linear-gradient(180deg,#ff8a00,#f26b00);
  border-color:#f26b00;
  color:#fff;
}
.btn-light {
  background:#fff;
  border-color:#cfd8e5;
}
.btn-full { width:100%; }

.alert {
  padding:12px 14px;
  border-radius:12px;
  margin:14px 0;
  font-size:8px;
}
.alert.error { background:#fef2f2; color:#b91c1c; border:1px solid #fecaca; }
.alert.success { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }

.required { color:#ef4444; }
.muted { color:var(--muted); }
.small { font-size:8px; }

/* Auth pages */
.auth-page {
  display:grid;
  grid-template-columns:minmax(360px, 36vw) 1fr;
  background:#fff;
}

.auth-brand {
  min-height:100vh;
  padding:70px 58px;
  color:#fff;
  background:
    linear-gradient(180deg, rgba(0,42,112,.96), rgba(0,28,80,.97)),
    radial-gradient(circle at 30% 75%, rgba(249,115,22,.22), transparent 34%);
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
}

.brand-logo {
  display:flex;
  align-items:center;
  gap:18px;
  font-size:22px;
  line-height:.95;
  font-weight:900;
  letter-spacing:.3px;
}
.brand-logo strong { color:var(--orange); }
.brand-mark, .ship-mark {
  width:70px;
  height:58px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:3px solid currentColor;
  border-radius:14px;
  transform:skew(-8deg);
  font-size:18px;
}

.auth-brand-line {
  border-top:1px solid rgba(255,255,255,.18);
  margin:44px 0 36px;
}
.auth-brand h1 {
  font-size:24px;
  line-height:1.2;
  margin:0 0 22px;
}
.auth-brand h1 strong { color:var(--orange); }
.auth-brand p {
  max-width:440px;
  line-height:1.7;
  color:#c8d8ff;
  font-size:9px;
}

.auth-main {
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.auth-card {
  width:min(100%, 560px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow);
  padding:54px 62px;
}
.auth-card-wide { width:min(100%, 640px); }
.auth-card h2 {
  margin:0;
  font-size:26px;
}
.auth-card label, .standard-form label {
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:22px;
  font-weight:800;
  color:#101a3d;
}
.auth-card input,
.standard-form input,
.standard-form textarea,
.standard-form select {
  width:100%;
  border:1px solid #ccd6e4;
  border-radius:11px;
  padding:15px 16px;
  font-size:8px;
  color:var(--text);
  background:#fff;
}
.auth-card input:focus,
.standard-form input:focus,
.standard-form textarea:focus,
.standard-form select:focus {
  border-color:var(--orange);
  box-shadow:0 0 0 3px rgba(249,115,22,.15);
  outline:0;
}
.auth-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:22px 0 30px;
}
.auth-row .check {
  margin:0;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  font-weight:500;
}
.auth-row input { width:auto; }
.auth-switch {
  text-align:center;
  color:var(--muted);
  margin:28px 0 0;
}

/* App layout */
.sidebar {
  position:fixed;
  inset:0 auto 0 0;
  width:250px;
  background:linear-gradient(180deg,var(--blue-900),#0049b7);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding:22px 16px;
  z-index:10;
}
.sidebar-brand {
  color:#fff;
  display:flex;
  align-items:center;
  gap:14px;
  padding:6px 10px 26px;
  border-bottom:1px solid rgba(255,255,255,.17);
  font-size:18px;
  font-weight:900;
  line-height:.9;
  text-decoration:none;
}
.sidebar-brand strong { color:var(--orange); }
.sidebar-brand .ship-mark {
  width:48px;
  height:42px;
  font-size:10px;
  border-width:2px;
}

.side-nav {
  display:flex;
  flex-direction:column;
  gap:8px;
  padding-top:24px;
}
.side-link,
.side-group-btn,
.side-sub-link {
  color:#fff;
  border:0;
  width:100%;
  border-radius:9px;
  background:transparent;
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px 14px;
  font-size:8px;
  font-weight:800;
  cursor:pointer;
  text-decoration:none;
}
.side-link:hover,
.side-group-btn:hover {
  background:rgba(255,255,255,.08);
  text-decoration:none;
}
.side-link.active,
.side-sub-link.active {
  background:linear-gradient(180deg,#ff8a00,#f26b00);
  color:#fff;
  text-decoration:none;
}
.side-group-btn {
  justify-content:space-between;
}
.side-group-btn span:first-child {
  display:flex;
  align-items:center;
  gap:12px;
}
.side-group-btn.group-active {
  background:rgba(255,255,255,.08);
}
.side-icon {
  width:24px;
  display:inline-flex;
  justify-content:center;
  font-size:12px;
}
.chev {
  transition:transform .2s ease;
}
.side-group.expanded .chev {
  transform:rotate(180deg);
}
.side-submenu {
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:5px 0 8px;
}
.side-sub-link {
  padding-left:44px;
  font-weight:700;
  color:#eaf2ff;
}
.side-sub-link .dot {
  margin-left:-14px;
}
.sidebar-user {
  margin-top:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:16px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
}
.sidebar-user strong, .sidebar-user span {
  display:block;
}
.sidebar-user span {
  color:#cbdcff;
  font-size:8px;
  margin-top:4px;
}

.app-main {
  margin-left:250px;
  min-height:100vh;
}
.topbar {
  height:86px;
  background:#fff;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 42px;
}
.topbar h1 {
  margin:0 0 6px;
  font-size:24px;
}
.topbar p {
  margin:0;
  color:#5e6f96;
  font-size:8px;
}
.topbar-actions {
  display:flex;
  align-items:center;
  gap:16px;
}
.user-menu {
  position:relative;
}
.user-menu-btn {
  border:0;
  background:#fff;
  display:flex;
  align-items:center;
  gap:9px;
  padding:8px 10px;
  font-weight:800;
  color:var(--text);
  cursor:pointer;
}
.user-symbol {
  color:var(--blue-800);
}
.user-menu-list {
  position:absolute;
  right:0;
  top:44px;
  width:210px;
  background:#fff;
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  border-radius:12px;
  padding:8px;
  z-index:20;
}
.user-menu-list a {
  display:block;
  padding:11px 12px;
  border-radius:8px;
  color:var(--text);
}
.user-menu-list a:hover {
  background:#f3f6fb;
  text-decoration:none;
}

.workspace-shell {
  margin:20px;
  min-height:calc(100vh - 192px);
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  display:flex;
  align-items:center;
  justify-content:center;
}
.workspace-empty {
  text-align:center;
  color:var(--text);
}
.empty-icon {
  width:110px;
  height:110px;
  margin:0 auto 22px;
  border-radius:999px;
  background:#edf4ff;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#8ba7d9;
  font-size:38px;
}
.workspace-empty h2 {
  margin:0 0 10px;
  font-size:18px;
}
.workspace-empty p {
  margin:0 0 6px;
  color:#5e6f96;
  font-size:9px;
}

.page-card {
  margin:20px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:34px;
}
.narrow-card {
  max-width:780px;
  margin:60px auto;
}
.card-title-center {
  text-align:center;
}
.circle-icon {
  width:72px;
  height:72px;
  margin:0 auto 18px;
  border-radius:999px;
  background:#eff6ff;
  color:#005bea;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:24px;
}
.card-title-center h1,
.form-heading h1 {
  margin:0 0 6px;
}
.card-title-center p,
.form-heading p {
  margin:0;
  color:#5e6f96;
}
.standard-form {
  margin-top:26px;
}
.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:14px;
  padding-top:26px;
  border-top:1px solid var(--border);
  margin-top:32px;
}
.form-heading {
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:26px;
}
.form-heading .circle-icon {
  margin:0;
  width:62px;
  height:62px;
  font-size:20px;
}
.profile-grid {
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:30px;
}
.span-2 {
  grid-column:1 / -1;
}

@media (max-width: 980px) {
  .auth-page { grid-template-columns:1fr; }
  .auth-brand { min-height:auto; padding:36px; }
  .sidebar { width:210px; }
  .app-main { margin-left:210px; }
  .topbar { padding:0 22px; }
  .profile-grid { grid-template-columns:1fr; }
}

@media (max-width: 760px) {
  .sidebar {
    position:relative;
    width:100%;
    min-height:auto;
  }
  .app-main { margin-left:0; }
  .topbar {
    height:auto;
    padding:22px;
    align-items:flex-start;
    flex-direction:column;
    gap:16px;
  }
  .workspace-shell, .page-card {
    margin:20px;
  }
}

/* Sidebar submenu must stay collapsed until the parent menu is clicked. */
.side-submenu[hidden] {
  display: none !important;
}

.side-group:not(.expanded) > .side-submenu {
  display: none !important;
}

.side-group.expanded > .side-submenu {
  display: flex !important;
}

.side-group:not(.expanded) .chev {
  transform: rotate(0deg);
}

.side-group.expanded .chev {
  transform: rotate(180deg);
}

/* Hide sidebar caret icon beside main menu labels. */
.side-group-btn .chev {
  display: none !important;
}

/* Hide all sidebar/menu caret symbols and remove duplicate bottom sidebar user block. */
.side-group-btn .chev,
.user-menu-btn > span:last-child:empty {
  display: none !important;
}

.sidebar-user {
  display: none !important;
}

/* Global font size adjustment: reduce all visible UI text by 2px. */
body {
  font-size: 14px;
}

.auth-brand h1 { font-size: 30px; }
.auth-brand p { font-size: 15px; }
.brand-logo { font-size: 28px; }

.auth-card h2 { font-size: 32px; }
.auth-card input,
.standard-form input,
.standard-form textarea,
.standard-form select {
  font-size: 13px;
}

.btn {
  font-size: 12px;
}

.side-link,
.side-group-btn,
.side-sub-link {
  font-size: 14px;
}

.side-icon {
  font-size: 18px;
}

.sidebar-user span {
  font-size: 11px;
}

.topbar h1 {
  font-size: 30px;
}

.topbar p {
  font-size: 14px;
}

.workspace-empty h2 {
  font-size: 24px;
}

.workspace-empty p {
  font-size: 15px;
}

.small {
  font-size: 11px;
}

/* Global compact sizing adjustment: fonts -2px, sidebar -10px, header -10px. */

/* Second compact sizing adjustment: fonts -2px again, sidebar -20px, header -20px. */

/* Font compact adjustment: all explicit font-size values reduced by another 4px. */

/* Global font stack: Arial, Aptos, sans-serif. */

/* Typography normalization: use the same text style as the main page title/subtitle. */
html,
body,
button,
input,
select,
textarea,
a,
table,
th,
td,
label {
  font-family: Arial, Aptos, sans-serif !important;
}

/* Sidebar should use the same clean typography as page title/subtitle, not extra-bold display text. */
.side-link,
.side-group-btn,
.side-sub-link {
  font-family: Arial, Aptos, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Main sidebar menu and submenu use readable compact sizes. */
.side-link,
.side-group-btn {
  font-size: 12px !important;
}

.side-sub-link {
  font-size: 11px !important;
  font-weight: 500 !important;
}

/* Buttons follow the same typography style, with medium weight only. */
.btn,
button,
.auth-card button,
.standard-form button {
  font-family: Arial, Aptos, sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* Keep headings clean and aligned with the Domestic Freight title style. */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Arial, Aptos, sans-serif !important;
  letter-spacing: 0 !important;
}

/* Sidebar active group behavior. */
.side-submenu[hidden] {
  display: none !important;
}

.side-group:not(.expanded) > .side-submenu {
  display: none !important;
}

.side-group.expanded > .side-submenu {
  display: flex !important;
}

.side-sub-link.active {
  background: linear-gradient(180deg,#ff8a00,#f26b00) !important;
  color: #fff !important;
}

.side-group-btn.group-open {
  background: rgba(255,255,255,.08) !important;
}

/* User Management module */
.user-management-module {
  margin: 20px;
}

.module-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.module-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--border);
  background: #fff7ed;
}

.module-header h2 {
  margin: 0 0 5px;
  font-size: 18px;
}

.module-header p {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.module-filter-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 170px 170px auto;
  gap: 10px;
  align-items: end;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
}

.module-filter-row label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-weight: 700;
  font-size: 11px;
}

.module-filter-row input,
.module-filter-row select {
  border: 1px solid #ccd6e4;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 12px;
  background: #fff;
}

.table-wrap {
  overflow: auto;
  max-height: calc(100vh - 245px);
}

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.data-table th,
.data-table td {
  padding: 10px 11px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #f3f4f6;
  color: var(--text);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.table-empty {
  text-align: center !important;
  color: var(--muted);
  padding: 28px !important;
}

.user-action-col {
  width: 120px;
}

.table-action-stack {
  display: flex;
  gap: 6px;
  flex-wrap: nowrap;
}

.btn-mini {
  min-width: 52px;
  border: 1px solid #d1d5db;
  background: #f8fafc;
  border-radius: 9px;
  padding: 7px 10px;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}

.btn-mini:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn-edit {
  background: #f3f4f6;
  color: #111827;
}

.btn-delete {
  background: #fff;
  border-color: #fecaca;
  color: #b91c1c;
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 68px;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 11px;
  font-weight: 700;
}

.pill-blue {
  background: #eff6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
}

.pill-green {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #86efac;
}

.pill-gray {
  background: #f3f4f6;
  color: #4b5563;
  border: 1px solid #d1d5db;
}

.app-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.app-modal.is-open {
  display: flex;
}

.app-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, .48);
}

.app-modal-box {
  position: relative;
  width: min(760px, 100%);
  max-height: 90vh;
  overflow: auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 24px 60px rgba(0,0,0,.24);
  padding: 22px;
}

.app-modal-user {
  width: min(720px, 100%);
}

.app-modal-box h3 {
  margin: 0 0 16px;
  font-size: 18px;
}

.app-modal-close {
  position: absolute;
  top: 13px;
  right: 13px;
  width: 34px;
  height: 34px;
  border: 1px solid #dbe3ef;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.app-modal-close svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.form-two-col {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 14px 18px;
}

.compact-modal-form label {
  margin-top: 0;
  font-size: 11px;
}

.compact-modal-form input,
.compact-modal-form select {
  padding: 10px 12px;
  font-size: 12px;
}

.compact-modal-form small {
  color: var(--muted);
  font-weight: 500;
  line-height: 1.4;
}

@media(max-width: 900px) {
  .module-filter-row {
    grid-template-columns: 1fr;
  }

  .form-two-col {
    grid-template-columns: 1fr;
  }

  .table-wrap {
    max-height: none;
  }
}

/* User menu permission table */
.permission-section {
  grid-column: 1 / -1;
  margin-top: 8px;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.permission-title {
  padding: 12px 14px;
  background: #f8fafc;
  border-bottom: 1px solid var(--border);
}

.permission-title h4 {
  margin: 0 0 4px;
  font-size: 13px;
}

.permission-title p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}

.permission-table-wrap {
  max-height: 280px;
  overflow: auto;
}

.permission-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}

.permission-table th,
.permission-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 8px 10px;
  text-align: center;
}

.permission-table th:first-child,
.permission-table td:first-child {
  text-align: left;
}

.permission-table th {
  background: #f3f4f6;
  color: var(--text);
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 1;
}

.permission-group-row td {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 700;
  text-align: left !important;
}

.permission-table input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
}

/* Permission checkbox click fix */
.permission-table input[type="checkbox"] {
  pointer-events: auto !important;
  cursor: pointer !important;
  position: relative;
  z-index: 2;
}

.permission-table td {
  position: relative;
}

/* Stable sidebar direct-link behavior */
.side-submenu[hidden],
.side-group:not(.expanded) > .side-submenu {
  display: none !important;
}

.side-group.expanded > .side-submenu {
  display: flex !important;
}

/* Menu Management module */
.menu-management-module {
  margin: 20px;
}

.module-header-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.menu-filter-row {
  grid-template-columns: minmax(260px, 1fr) 180px auto;
}

.menu-action-col {
  width: 124px;
}

.app-modal-menu {
  width: min(680px, 100%);
}

.menu-table code {
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 7px;
  padding: 4px 7px;
  font-size: 11px;
  color: #334155;
}

@media(max-width: 900px) {
  .menu-filter-row {
    grid-template-columns: 1fr;
  }

  .module-header-actions {
    width: 100%;
  }
}

/* Header + Sidebar mockup adjustment 20260506c */
:root {
  --df-header-height: 104px;
  --df-sidebar-width: 292px;
  --df-sidebar-collapsed-width: 74px;
}

body {
  background: #f6f8fc;
}

.topbar {
  position: fixed !important;
  inset: 0 0 auto 0 !important;
  height: var(--df-header-height) !important;
  z-index: 1000 !important;
  display: flex !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  padding: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid #d8e0ec !important;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
}

.topbar-brand-zone {
  width: var(--df-sidebar-width);
  min-width: var(--df-sidebar-width);
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 28px;
  border-right: 1px solid #d8e0ec;
  transition: width .22s ease, min-width .22s ease, padding .22s ease;
}

.df-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #073a85;
  text-decoration: none;
  overflow: hidden;
  white-space: nowrap;
}

.df-brand:hover {
  text-decoration: none;
}

.df-brand-mark {
  width: 52px;
  height: 60px;
  min-width: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg, #0744a6 0 50%, #ff5b13 50% 100%);
  clip-path: polygon(50% 0, 92% 23%, 92% 77%, 50% 100%, 8% 77%, 8% 23%);
  color: #fff;
  font-weight: 900;
  font-size: 22px;
}

.df-brand-mark span {
  width: 28px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 4px solid #fff;
  border-radius: 3px;
  font-size: 0;
}

.df-brand-text strong {
  display: block;
  color: #09357f;
  font-size: 20px;
  line-height: .9;
  letter-spacing: .3px;
  font-weight: 900;
}

.df-brand-text small {
  display: block;
  margin-top: 6px;
  color: #1d5fc7;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1px;
}

.topbar-breadcrumb {
  height: 100%;
  display: flex;
  align-items: center;
  gap: 16px;
  padding-left: 42px;
}

.crumb-main {
  color: #073a85;
  font-size: 21px;
  font-weight: 800;
}

.crumb-sep {
  color: #6f7d99;
  font-size: 28px;
  line-height: 1;
}

.crumb-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 5px;
  background: linear-gradient(180deg, #ff681c, #f45112);
  box-shadow: 0 3px 8px rgba(244, 81, 18, .24);
  color: #fff;
  font-size: 16px;
  font-weight: 800;
}

.header-spacer {
  flex: 1 1 auto;
}

.topbar .user-menu {
  position: relative;
  display: flex;
  align-items: center;
  margin-right: 38px;
}

.topbar .user-menu-btn {
  min-height: 68px;
  padding: 8px 8px;
  border: 0;
  background: transparent;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  color: #17223b;
}

.user-avatar-icon {
  width: 56px;
  height: 56px;
  border-radius: 999px;
  border: 2px solid #c9d0dd;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1f2937;
  background: #fff;
}

.user-avatar-icon svg {
  width: 31px;
  height: 31px;
  fill: currentColor;
}

.user-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 190px;
}

.user-meta strong {
  color: #111827;
  font-size: 18px;
  line-height: 1.1;
  font-weight: 800;
}

.user-meta span {
  margin-top: 6px;
  color: #79849b;
  font-size: 14px;
  font-weight: 500;
}

.user-caret {
  margin-left: 4px;
  color: #475569;
  font-size: 23px;
  font-weight: 700;
}

.topbar .user-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% - 8px);
  width: 258px;
  border: 1px solid #d8e0ec;
  border-radius: 4px;
  background: #fff;
  box-shadow: 0 16px 35px rgba(15, 23, 42, .16);
  padding: 14px;
  z-index: 1200;
}

.topbar .user-menu-list a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 10px;
  color: #23314d;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}

.topbar .user-menu-list a:hover {
  background: #f4f7fc;
  text-decoration: none;
}

.topbar .user-menu-list a + a:last-child {
  margin-top: 14px;
  padding-top: 20px;
  border-top: 1px solid #e5eaf2;
}

.dropdown-icon {
  width: 22px;
  display: inline-flex;
  justify-content: center;
  color: #55637d;
}

.sidebar {
  position: fixed !important;
  top: var(--df-header-height) !important;
  left: 0 !important;
  bottom: 0 !important;
  width: var(--df-sidebar-width) !important;
  z-index: 900 !important;
  padding: 54px 12px 22px !important;
  background: linear-gradient(180deg, #073a85 0%, #004aa8 100%) !important;
  color: #fff !important;
  overflow-x: visible !important;
  overflow-y: auto !important;
  transition: width .22s ease !important;
}

.sidebar-brand {
  display: none !important;
}

.sidebar-collapse-btn {
  position: absolute;
  top: 18px;
  right: -21px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 999px;
  background: #0c4da5;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(15, 23, 42, .2);
  z-index: 950;
  font-size: 20px;
  font-weight: 900;
}

.side-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  padding-top: 0 !important;
}

.side-link,
.side-group-btn {
  width: 100% !important;
  min-height: 54px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 13px 22px !important;
  font-size: 17px !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  text-decoration: none !important;
}

.side-link:hover,
.side-group-btn:hover,
.side-group.expanded > .side-group-btn {
  background: rgba(0,0,0,.13) !important;
  text-decoration: none !important;
}

.side-link.active {
  background: rgba(0,0,0,.14) !important;
}

.side-icon {
  width: 28px !important;
  min-width: 28px !important;
  display: inline-flex !important;
  justify-content: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

.side-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.side-group-main {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.side-group-btn {
  justify-content: space-between !important;
}

.side-arrow {
  margin-left: auto;
  color: #fff;
  font-size: 18px;
  transition: transform .2s ease;
}

.side-group:not(.expanded) .side-arrow {
  transform: rotate(90deg);
}

.side-group.expanded .side-arrow {
  transform: rotate(0deg);
}

.side-submenu {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 4px 0 6px !important;
}

.side-sub-link {
  width: 100% !important;
  min-height: 46px !important;
  border-radius: 7px !important;
  color: #fff !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 11px 18px 11px 56px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  background: transparent !important;
  text-decoration: none !important;
}

.side-sub-link:hover {
  background: rgba(255,255,255,.08) !important;
  text-decoration: none !important;
}

.side-sub-link.active {
  background: linear-gradient(180deg, #ff681c, #f45112) !important;
  box-shadow: 0 8px 18px rgba(244, 81, 18, .24) !important;
}

.side-sub-dot {
  width: 12px;
  min-width: 12px;
  font-size: 12px;
  line-height: 1;
}

.side-submenu[hidden],
.side-group:not(.expanded) > .side-submenu {
  display: none !important;
}

.side-group.expanded > .side-submenu {
  display: flex !important;
}

.app-main {
  margin-left: var(--df-sidebar-width) !important;
  padding-top: var(--df-header-height) !important;
  min-height: 100vh !important;
  transition: margin-left .22s ease !important;
}

.workspace-shell {
  margin: 40px 42px !important;
  min-height: calc(100vh - var(--df-header-height) - 80px) !important;
}

body.sidebar-collapsed .topbar-brand-zone,
body.sidebar-collapsed .sidebar {
  width: var(--df-sidebar-collapsed-width) !important;
  min-width: var(--df-sidebar-collapsed-width) !important;
}

body.sidebar-collapsed .topbar-brand-zone {
  padding-left: 11px !important;
  padding-right: 10px !important;
}

body.sidebar-collapsed .df-brand-text,
body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-arrow,
body.sidebar-collapsed .side-submenu {
  display: none !important;
}

body.sidebar-collapsed .df-brand-mark {
  width: 46px;
  min-width: 46px;
  height: 52px;
}

body.sidebar-collapsed .app-main {
  margin-left: var(--df-sidebar-collapsed-width) !important;
}

body.sidebar-collapsed .side-link,
body.sidebar-collapsed .side-group-btn {
  justify-content: center !important;
  padding-left: 10px !important;
  padding-right: 10px !important;
}

body.sidebar-collapsed .side-group-main {
  justify-content: center !important;
}

body.sidebar-collapsed .sidebar-collapse-btn span {
  transform: rotate(180deg);
}

@media (max-width: 900px) {
  :root {
    --df-header-height: auto;
    --df-sidebar-width: 240px;
  }

  .topbar {
    position: relative !important;
    height: auto !important;
    flex-wrap: wrap !important;
    padding-bottom: 14px !important;
  }

  .topbar-brand-zone {
    width: 100% !important;
    min-width: 100% !important;
    height: 88px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #d8e0ec;
  }

  .topbar-breadcrumb {
    padding: 16px 22px 0 !important;
    height: auto !important;
  }

  .topbar .user-menu {
    margin: 10px 22px 0 auto !important;
  }

  .sidebar {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    min-height: auto !important;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }

  .app-main,
  body.sidebar-collapsed .app-main {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }
}


/* Header Sidebar Mockup Fine Tune v4 */
:root {
  /* previous mockup sidebar was wide; reduce width by about 30% */
  --df-sidebar-width: 210px;
  --df-sidebar-collapsed-width: 58px;

  /* reduce header height by about 30% */
  --df-header-height: 58px;
}

/* Header height reduction */
.topbar,
.app-header,
.main-header,
.header {
  min-height: var(--df-header-height) !important;
  height: var(--df-header-height) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

.topbar-brand img,
.header-brand img,
.logo img {
  max-height: 42px !important;
}

.topbar-brand,
.header-brand,
.logo {
  min-height: 0 !important;
}

.topbar-user,
.user-menu-btn,
.user-profile,
.header-user {
  min-height: 42px !important;
}

/* Sidebar width and font sizing */
.sidebar,
.app-sidebar,
.side-menu {
  width: var(--df-sidebar-width) !important;
  min-width: var(--df-sidebar-width) !important;
  max-width: var(--df-sidebar-width) !important;
}

.app-main,
.main-content,
.page-wrapper,
.content-wrapper {
  margin-left: var(--df-sidebar-width) !important;
}

.side-link,
.side-group-btn,
.side-sub-link,
.sidebar a,
.sidebar button {
  font-size: 12px !important;
  line-height: 1.25 !important;
}

.side-link,
.side-group-btn {
  padding: 11px 14px !important;
}

.side-sub-link {
  padding: 9px 14px !important;
  font-size: 11.5px !important;
}

.side-icon {
  width: 17px !important;
  min-width: 17px !important;
  font-size: 14px !important;
}

.side-submenu {
  gap: 4px !important;
  margin-top: 4px !important;
  padding-left: 12px !important;
}

.sidebar-brand,
.side-brand {
  padding-left: 10px !important;
  padding-right: 10px !important;
}

.sidebar-brand-text,
.side-brand-text,
.brand-text {
  font-size: 13px !important;
  line-height: 1.05 !important;
}

/* Collapsed state: all menus and submenus must be closed/hidden */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .side-menu {
  width: var(--df-sidebar-collapsed-width) !important;
  min-width: var(--df-sidebar-collapsed-width) !important;
  max-width: var(--df-sidebar-collapsed-width) !important;
}

body.sidebar-collapsed .app-main,
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .page-wrapper,
body.sidebar-collapsed .content-wrapper {
  margin-left: var(--df-sidebar-collapsed-width) !important;
}

body.sidebar-collapsed .side-submenu,
body.sidebar-collapsed .side-group.expanded > .side-submenu,
body.sidebar-collapsed [data-side-group].expanded > .side-submenu {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .side-group,
body.sidebar-collapsed [data-side-group] {
  min-height: auto !important;
}

body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-arrow,
body.sidebar-collapsed .chev,
body.sidebar-collapsed .sidebar-brand-text,
body.sidebar-collapsed .side-brand-text,
body.sidebar-collapsed .brand-text {
  display: none !important;
}

body.sidebar-collapsed .side-link,
body.sidebar-collapsed .side-group-btn {
  justify-content: center !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.sidebar-collapsed .side-group-btn {
  pointer-events: auto;
}

body.sidebar-collapsed .side-icon {
  width: 20px !important;
  min-width: 20px !important;
}

@media (max-width: 760px) {
  .sidebar,
  .app-sidebar,
  .side-menu {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
  }

  .app-main,
  .main-content,
  .page-wrapper,
  .content-wrapper,
  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .page-wrapper,
  body.sidebar-collapsed .content-wrapper {
    margin-left: 0 !important;
  }
}


/* Header Logo User Size Fine Tune v5 */
/* 1. User icon/avatar reduced by about 50% */
.user-avatar,
.user-avatar-icon,
.topbar-user-icon,
.header-user-icon,
.user-menu-btn .avatar,
.user-menu-btn svg,
.user-profile svg {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  font-size: 10px !important;
}

.user-menu-btn,
.topbar-user,
.user-profile,
.header-user {
  gap: 8px !important;
}

/* Keep user text readable after avatar reduction */
.user-meta strong,
.user-name,
.header-user-name {
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.user-meta span,
.user-company,
.header-user-company {
  font-size: 11px !important;
  line-height: 1.1 !important;
}

/* 2. Domestic Freight logo text and tagline reduced by about 40% */
.topbar-brand-text,
.header-brand-text,
.sidebar-brand-text,
.side-brand-text,
.brand-text,
.logo-text {
  font-size: 60% !important;
  line-height: 1.05 !important;
}

.topbar-brand small,
.header-brand small,
.sidebar-brand small,
.side-brand small,
.brand-tagline,
.logo-tagline,
.tagline {
  font-size: 60% !important;
  line-height: 1.05 !important;
}

/* Reduce logo block spacing so header stays compact */
.topbar-brand,
.header-brand,
.sidebar-brand,
.side-brand,
.logo {
  gap: 8px !important;
}

.topbar-brand-mark,
.header-brand-mark,
.sidebar-brand-mark,
.side-brand-mark,
.brand-mark,
.logo-mark {
  transform: scale(.72) !important;
  transform-origin: center !important;
}


/* Header Left Brand Area Fine Tune v6 */
/* shrink top-left brand block around 40% */
.topbar-brand,
.header-brand,
.logo,
.brand,
.sidebar-top-brand {
  gap: 4px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

.topbar-brand-mark,
.header-brand-mark,
.logo-mark,
.brand-mark,
.sidebar-top-brand .brand-mark,
.topbar-brand img,
.header-brand img,
.logo img,
.brand img {
  max-height: 34px !important;
  width: auto !important;
}

.topbar-brand-text,
.header-brand-text,
.logo-text,
.brand-text,
.sidebar-top-brand .brand-text {
  font-size: 36% !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

.topbar-brand small,
.header-brand small,
.logo small,
.brand small,
.brand-tagline,
.logo-tagline,
.tagline,
.sidebar-top-brand small {
  font-size: 36% !important;
  line-height: 0.95 !important;
  letter-spacing: 0 !important;
}

/* keep left brand column narrow */
.topbar-left,
.header-left,
.brand-wrap {
  min-width: 0 !important;
}


/* Direct DF Brand Shrink Fix v7 */
/* Active logo classes from partials/topbar.php: df-brand, df-brand-mark, df-brand-text */
.topbar-brand-zone {
  width: 185px !important;
  min-width: 185px !important;
  max-width: 185px !important;
  height: 58px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
}

.df-brand {
  gap: 7px !important;
  height: 50px !important;
  min-height: 50px !important;
  padding: 0 !important;
  transform: none !important;
}

.df-brand-mark {
  width: 34px !important;
  height: 42px !important;
  min-width: 34px !important;
  max-width: 34px !important;
  border-width: 0 !important;
  border-radius: 0 !important;
  transform: none !important;
}

.df-brand-mark span {
  font-size: 0 !important;
}

.df-brand-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

.df-brand-text strong {
  font-size: 13px !important;
  line-height: .88 !important;
  letter-spacing: .2px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

.df-brand-text small {
  font-size: 6.5px !important;
  line-height: 1 !important;
  margin-top: 2px !important;
  letter-spacing: 0 !important;
  white-space: nowrap !important;
  max-width: 120px !important;
  overflow: hidden !important;
  text-overflow: clip !important;
}

/* keep header/breadcrumb aligned after shrinking left brand */
.topbar {
  grid-template-columns: 185px auto 1fr auto !important;
}

@media (max-width: 760px) {
  .topbar-brand-zone {
    width: 150px !important;
    min-width: 150px !important;
    max-width: 150px !important;
  }

  .df-brand-mark {
    width: 28px !important;
    height: 34px !important;
    min-width: 28px !important;
  }

  .df-brand-text strong {
    font-size: 11px !important;
  }

  .df-brand-text small {
    font-size: 6px !important;
  }
}


/* Header Sidebar Bug Fix v8 */
/* 1. Remove line after logo */
.topbar-brand-zone,
.df-brand,
.topbar-brand-zone::after,
.df-brand::after {
  border-right: 0 !important;
  box-shadow: none !important;
}

.topbar {
  overflow: visible !important;
}

/* 2. Remove sidebar horizontal scrollbar */
html,
body {
  overflow-x: hidden !important;
}

.sidebar {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  max-width: var(--df-sidebar-width) !important;
}

body.sidebar-collapsed .sidebar {
  overflow-x: hidden !important;
  max-width: var(--df-sidebar-collapsed-width) !important;
}

.side-nav,
.side-group,
.side-link,
.side-group-btn,
.side-submenu,
.side-sub-link {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

.side-label {
  min-width: 0 !important;
  max-width: 118px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* prevent arrows/submenu from exceeding sidebar width */
.side-group-btn {
  display: flex !important;
  justify-content: space-between !important;
  gap: 8px !important;
}

.side-group-main {
  min-width: 0 !important;
  max-width: calc(100% - 18px) !important;
}

.side-arrow,
.chev {
  width: 12px !important;
  min-width: 12px !important;
  flex: 0 0 12px !important;
}

/* 3. Ensure sidebar collapse button is clickable */
.sidebar-collapse-btn,
#sidebarCollapseBtn {
  z-index: 9999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.sidebar {
  z-index: 30 !important;
}

.app-main {
  overflow-x: hidden !important;
}

/* collapsed state must not leave open submenus */
body.sidebar-collapsed .side-submenu {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.sidebar-collapsed .side-group {
  overflow: hidden !important;
}

body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-arrow,
body.sidebar-collapsed .chev {
  display: none !important;
}

body.sidebar-collapsed .side-link,
body.sidebar-collapsed .side-group-btn {
  justify-content: center !important;
  width: 100% !important;
}


/* Breadcrumb Sidebar Compact Fix v9 */
/* 1. Reduce breadcrumb Master > User font and weight by about 30% */
.topbar-breadcrumb .crumb-main,
.topbar-breadcrumb .crumb-sep {
  font-size: 17px !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
}

.topbar-breadcrumb .crumb-pill {
  min-height: 28px !important;
  height: 28px !important;
  padding: 0 13px !important;
  border-radius: 6px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 28px !important;
  box-shadow: 0 6px 12px rgba(249, 115, 22, .22) !important;
}

.topbar-breadcrumb {
  gap: 8px !important;
}

/* 2. Reduce distance between main menu and submenu */
.side-group {
  margin-bottom: 4px !important;
}

.side-submenu {
  margin-top: 2px !important;
  gap: 2px !important;
  padding-top: 0 !important;
  padding-left: 12px !important;
}

/* 3. Reduce active submenu orange button height by about 40% */
.side-sub-link {
  min-height: 30px !important;
  height: 30px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-size: 10.5px !important;
  line-height: 30px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.side-sub-link.active {
  min-height: 34px !important;
  height: 34px !important;
  padding: 0 12px !important;
  border-radius: 7px !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
  line-height: 34px !important;
}

.side-sub-bullet {
  width: 8px !important;
  min-width: 8px !important;
  font-size: 12px !important;
}

/* Keep main sidebar menu readable but not oversized */
.side-link,
.side-group-btn {
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 12px !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 38px !important;
}

.side-icon {
  width: 15px !important;
  min-width: 15px !important;
  font-size: 12px !important;
}

.side-label {
  max-width: 104px !important;
}

/* prevent expanded parent block from creating excessive vertical space */
.side-group.expanded {
  padding-bottom: 0 !important;
}

@media (max-width: 760px) {
  .topbar-breadcrumb .crumb-main,
  .topbar-breadcrumb .crumb-sep {
    font-size: 15px !important;
  }

  .topbar-breadcrumb .crumb-pill {
    min-height: 26px !important;
    height: 26px !important;
    font-size: 11px !important;
    line-height: 26px !important;
  }
}


/* Sidebar Collapse Button Working Fix v10 */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: absolute !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

.sidebar {
  overflow-x: hidden !important;
}

body.sidebar-collapsed .side-submenu {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.sidebar-collapsed [data-side-group],
body.sidebar-collapsed .side-group {
  overflow: hidden !important;
}

body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-arrow,
body.sidebar-collapsed .chev {
  display: none !important;
}



/* Sidebar Icon and User Menu Fix v10 */
/* Main menu title icons +50% */
.side-link > .side-icon,
.side-group-btn .side-icon {
  width: 23px !important;
  min-width: 23px !important;
  height: 23px !important;
  font-size: 18px !important;
  line-height: 23px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Submenu bullet remains small */
.side-sub-bullet {
  width: 8px !important;
  min-width: 8px !important;
  font-size: 11px !important;
}

/* User avatar/icon +50% */
.user-avatar-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
}

.user-avatar-icon svg {
  width: 17px !important;
  height: 17px !important;
  min-width: 17px !important;
  max-width: 17px !important;
  max-height: 17px !important;
}

/* Username weight reduced */
.user-meta strong {
  font-weight: 600 !important;
  font-size: 13px !important;
  line-height: 1.1 !important;
}

.user-meta span {
  font-weight: 400 !important;
  font-size: 11px !important;
  line-height: 1.1 !important;
}

/* Profile dropdown fix */
.user-menu {
  position: relative !important;
  z-index: 20000 !important;
}

.user-menu-btn {
  cursor: pointer !important;
  pointer-events: auto !important;
}

.user-menu-list {
  z-index: 20001 !important;
  pointer-events: auto !important;
}

.user-menu-list[hidden] {
  display: none !important;
}

.user-menu-list:not([hidden]) {
  display: block !important;
}


/* User Menu Right Avatar Layout v11 */
.user-menu {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  position: relative !important;
  z-index: 20000 !important;
}

.user-menu-btn.user-menu-avatar-trigger {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  min-height: 38px !important;
  padding: 4px 0 !important;
  border: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  pointer-events: auto !important;
}

.user-menu-btn.user-menu-avatar-trigger:hover {
  background: transparent !important;
}

.user-menu-btn.user-menu-avatar-trigger .user-meta {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  text-align: right !important;
  min-width: 0 !important;
}

.user-menu-btn.user-menu-avatar-trigger .user-avatar-icon {
  order: 2 !important;
  margin-left: 2px !important;
  margin-right: 0 !important;
  cursor: pointer !important;
}

/* hide any old caret / v button if still present */
.user-caret,
.user-menu-btn .user-caret,
.header-user-caret,
.profile-caret {
  display: none !important;
}

/* make text lighter and compact */
.user-menu-btn.user-menu-avatar-trigger .user-meta strong {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  line-height: 1.1 !important;
  color: #0f1b3d !important;
}

.user-menu-btn.user-menu-avatar-trigger .user-meta span {
  font-weight: 400 !important;
  font-size: 10.5px !important;
  line-height: 1.1 !important;
  color: #64748b !important;
  margin-top: 2px !important;
}

/* avatar remains the only visual trigger on the far right */
.user-avatar-icon {
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  border-radius: 999px !important;
}

.user-avatar-icon svg {
  width: 17px !important;
  height: 17px !important;
}

/* dropdown aligns under avatar/right edge */
.user-menu-list {
  right: 0 !important;
  top: calc(100% + 10px) !important;
  z-index: 20001 !important;
}



/* User Name Font Plus 2 v12 */
.user-menu-btn.user-menu-avatar-trigger .user-meta strong,
.user-meta strong {
  font-size: 14.5px !important;
}


/* Logo One Line and Collapse Button v13 */
/* Domestic Freight text one line */
.df-brand-text strong {
  white-space: nowrap !important;
  font-size: 12px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Tagline +2px */
.df-brand-text small {
  font-size: 8.5px !important;
  line-height: 1.05 !important;
  margin-top: 2px !important;
  white-space: nowrap !important;
}

/* Give the one-line logo text enough room without making header tall */
.topbar-brand-zone {
  width: 205px !important;
  min-width: 205px !important;
  max-width: 205px !important;
}

.df-brand-text {
  max-width: 150px !important;
}

/* Collapse/expand button: always over top object and visible */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  left: calc(var(--df-sidebar-width) - 16px) !important;
  top: calc(var(--df-header-height) + 16px) !important;
  width: 23px !important;
  height: 23px !important;
  min-width: 23px !important;
  min-height: 23px !important;
  border-radius: 999px !important;
  z-index: 30000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 12px !important;
  line-height: 1 !important;
  overflow: visible !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 16px) !important;
}

#sidebarCollapseBtn span,
.sidebar-collapse-btn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 12px !important;
  line-height: 1 !important;
}

/* make sure no parent clips the button */
.sidebar,
#appSidebar {
  overflow: visible !important;
}



/* Logo Image Favicon Sidebar Button v14 */
.topbar-brand-zone {
  width: 205px !important;
  min-width: 205px !important;
  max-width: 205px !important;
  height: 58px !important;
  padding: 4px 10px !important;
  overflow: hidden !important;
}

.df-brand-image-link,
.df-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 50px !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
}

.df-brand-image {
  display: block !important;
  max-width: 170px !important;
  max-height: 44px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* Orange expand/collapse button +30% from compact size */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  left: calc(var(--df-sidebar-width) - 18px) !important;
  top: calc(var(--df-header-height) + 16px) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 2px solid #fff !important;
  background: linear-gradient(180deg, #ff8a00, #f97316) !important;
  color: #fff !important;
  box-shadow: 0 8px 18px rgba(249, 115, 22, .32) !important;
  z-index: 30000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 18px) !important;
}

#sidebarCollapseBtn span,
.sidebar-collapse-btn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

.sidebar,
#appSidebar {
  overflow: visible !important;
}


/* Header Logo and Sidebar Button Fix v15 */
.topbar-brand-zone {
  width: 250px !important;
  min-width: 250px !important;
  max-width: 250px !important;
  height: 58px !important;
  padding: 4px 10px !important;
  overflow: hidden !important;
  border-right: none !important;
  box-shadow: none !important;
}

.df-brand-image-link,
.df-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  height: 50px !important;
  width: 100% !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: transparent !important;
}

.df-brand-image {
  display: block !important;
  width: 220px !important;
  max-width: 220px !important;
  height: auto !important;
  max-height: 46px !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* Ensure no separator line after logo */
.topbar-brand-zone::after,
.df-brand::after,
.df-brand-image-link::after {
  display: none !important;
  content: none !important;
}
.topbar-left,
.topbar,
.topbar-brand-zone {
  border-right: none !important;
}

/* Sidebar collapse button: orange and larger */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  left: calc(var(--df-sidebar-width) - 18px) !important;
  top: calc(var(--df-header-height) + 18px) !important;
  width: 39px !important;
  height: 39px !important;
  min-width: 39px !important;
  min-height: 39px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(180deg, #ff8a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, .35) !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  overflow: visible !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 18px) !important;
}

#sidebarCollapseBtn span,
.sidebar-collapse-btn span,
#sidebarCollapseBtn i,
.sidebar-collapse-btn i {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 18px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

.sidebar,
#appSidebar {
  overflow: visible !important;
}


/* Icon Only Logo and Toggle Fix v16 */
.topbar-brand-zone {
  width: 128px !important;
  min-width: 128px !important;
  max-width: 128px !important;
  height: 58px !important;
  padding: 4px 8px !important;
  overflow: hidden !important;
  border-right: none !important;
  box-shadow: none !important;
}

.df-brand-image-link,
.df-brand {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 50px !important;
  padding: 0 !important;
  background: transparent !important;
  overflow: hidden !important;
}

.df-brand-image {
  display: block !important;
  width: 86px !important;
  max-width: 86px !important;
  max-height: 44px !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
}

/* remove separator line after logo */
.topbar-brand-zone::after,
.df-brand::after,
.df-brand-image-link::after {
  display: none !important;
  content: none !important;
}

/* force sidebar toggle appearance */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  left: calc(var(--df-sidebar-width) - 19px) !important;
  top: calc(var(--df-header-height) + 18px) !important;
  width: 39px !important;
  height: 39px !important;
  min-width: 39px !important;
  min-height: 39px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(180deg, #ff8a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, .35) !important;
  z-index: 99999 !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 19px) !important;
}

#sidebarCollapseBtn .toggle-symbol,
.sidebar-collapse-btn .toggle-symbol {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}


/* Sidebar Collapsed Logo Visibility Fix v17 */

/* make sure header stays above content and logo area remains clean */
.topbar,
.topbar-header,
.app-topbar {
  position: relative !important;
  z-index: 1000 !important;
}

/* expanded brand zone */
.topbar-brand-zone {
  position: relative !important;
  z-index: 1002 !important;
  overflow: hidden !important;
}

/* sidebar header/logo area */
.sidebar-header,
.app-sidebar-header,
.sidebar-brand-wrap,
.sidebar-brand {
  overflow: visible !important;
  position: relative !important;
  z-index: 1001 !important;
}

/* when sidebar collapsed, keep logo visible and centered */
body.sidebar-collapsed .topbar-brand-zone {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  padding: 4px 6px !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link {
  justify-content: center !important;
  width: 100% !important;
  overflow: hidden !important;
}

body.sidebar-collapsed .df-brand-image {
  width: 34px !important;
  max-width: 34px !important;
  max-height: 34px !important;
  margin: 0 auto !important;
  display: block !important;
}

/* hide any remaining brand text area if present */
body.sidebar-collapsed .df-brand-text,
body.sidebar-collapsed .df-brand-copy,
body.sidebar-collapsed .df-brand-tagline,
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .brand-copy {
  display: none !important;
}

/* keep collapse button outside object and not covering logo */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  z-index: 1100 !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 19px) !important;
  top: calc(var(--df-header-height) + 18px) !important;
}

/* ensure sidebar itself does not overlay the topbar logo area */
.sidebar,
#appSidebar,
.app-sidebar {
  z-index: 900 !important;
}


/* Sidebar Collapsed Layout Alignment Fix v18 */

/* keep dedicated left brand/header column */
.topbar-brand-zone {
  position: relative !important;
  width: var(--df-sidebar-width) !important;
  min-width: var(--df-sidebar-width) !important;
  max-width: var(--df-sidebar-width) !important;
  height: var(--df-header-height) !important;
  flex: 0 0 var(--df-sidebar-width) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border-right: 1px solid #d7e0ef !important;
  z-index: 1002 !important;
}

/* when collapsed, logo must stay inside its own left column */
body.sidebar-collapsed .topbar-brand-zone {
  width: var(--df-sidebar-collapsed-width) !important;
  min-width: var(--df-sidebar-collapsed-width) !important;
  max-width: var(--df-sidebar-collapsed-width) !important;
  flex: 0 0 var(--df-sidebar-collapsed-width) !important;
  padding: 4px 4px !important;
  justify-content: center !important;
  overflow: hidden !important;
  border-right: 1px solid #d7e0ef !important;
}

/* brand alignment */
.df-brand,
.df-brand-image-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  background: transparent !important;
}

body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link {
  justify-content: center !important;
}

.df-brand-image {
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
}

body.sidebar-collapsed .df-brand-image {
  width: 30px !important;
  max-width: 30px !important;
  max-height: 30px !important;
  height: auto !important;
  margin: 0 auto !important;
}

/* hide any text elements in collapsed mode */
body.sidebar-collapsed .df-brand-text,
body.sidebar-collapsed .df-brand-copy,
body.sidebar-collapsed .df-brand-tagline,
body.sidebar-collapsed .brand-text,
body.sidebar-collapsed .brand-copy {
  display: none !important;
}

/* topbar layout: content starts after brand zone, not under it */
.topbar,
.topbar-header,
.app-topbar {
  display: flex !important;
  align-items: stretch !important;
}

.topbar-main,
.topbar-content,
.header-main,
.app-topbar-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* if original layout uses margin-left, normalize it */
body.sidebar-collapsed .topbar-main,
body.sidebar-collapsed .topbar-content,
body.sidebar-collapsed .header-main,
body.sidebar-collapsed .app-topbar-main {
  margin-left: 0 !important;
}

/* sidebar placement stays below header */
.sidebar,
#appSidebar,
.app-sidebar {
  top: var(--df-header-height) !important;
  height: calc(100vh - var(--df-header-height)) !important;
}

/* toggle button sits on the sidebar edge */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  top: calc(var(--df-header-height) + 18px) !important;
  z-index: 1100 !important;
}

body:not(.sidebar-collapsed) #sidebarCollapseBtn,
body:not(.sidebar-collapsed) .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-width) - 19px) !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 19px) !important;
}


/* Header Above Sidebar Architecture Fix v19 */
/* Header full-width on top; sidebar starts below header; logo belongs to header. */
:root {
  --df-header-height: 58px;
  --df-sidebar-width: 210px;
  --df-sidebar-collapsed-width: 58px;
}

/* HEADER: fixed full-width top bar */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: var(--df-header-height) !important;
  min-height: var(--df-header-height) !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  z-index: 5000 !important;
  border-bottom: 1px solid #d7e0ef !important;
  box-shadow: 0 2px 10px rgba(15, 23, 42, .06) !important;
  overflow: visible !important;
}

/* HEADER LOGO: dedicated area in header, not sidebar */
.topbar-brand-zone {
  position: relative !important;
  width: var(--df-sidebar-width) !important;
  min-width: var(--df-sidebar-width) !important;
  max-width: var(--df-sidebar-width) !important;
  height: var(--df-header-height) !important;
  flex: 0 0 var(--df-sidebar-width) !important;
  padding: 0 12px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  border-right: 1px solid #d7e0ef !important;
  overflow: hidden !important;
  z-index: 5001 !important;
  transform: none !important;
  margin: 0 !important;
}

body.sidebar-collapsed .topbar-brand-zone {
  width: var(--df-sidebar-collapsed-width) !important;
  min-width: var(--df-sidebar-collapsed-width) !important;
  max-width: var(--df-sidebar-collapsed-width) !important;
  flex: 0 0 var(--df-sidebar-collapsed-width) !important;
  padding: 0 6px !important;
  justify-content: center !important;
}

/* LOGO IMAGE */
.df-brand,
.df-brand-image-link {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  overflow: hidden !important;
  transform: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link {
  justify-content: center !important;
}

.df-brand-image {
  width: 86px !important;
  max-width: 86px !important;
  max-height: 42px !important;
  height: auto !important;
  object-fit: contain !important;
  background: transparent !important;
  margin: 0 !important;
}

body.sidebar-collapsed .df-brand-image {
  width: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  margin: 0 auto !important;
}

/* HEADER CONTENT after logo */
.topbar-breadcrumb {
  flex: 0 0 auto !important;
  margin-left: 24px !important;
  z-index: 5001 !important;
}

.header-spacer {
  flex: 1 1 auto !important;
}

.user-menu {
  flex: 0 0 auto !important;
  margin-right: 24px !important;
  z-index: 5002 !important;
}

/* SIDEBAR: starts BELOW header */
.sidebar,
#appSidebar,
.app-sidebar {
  position: fixed !important;
  top: var(--df-header-height) !important;
  left: 0 !important;
  bottom: 0 !important;
  height: calc(100vh - var(--df-header-height)) !important;
  width: var(--df-sidebar-width) !important;
  min-width: var(--df-sidebar-width) !important;
  max-width: var(--df-sidebar-width) !important;
  z-index: 3000 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #appSidebar,
body.sidebar-collapsed .app-sidebar {
  width: var(--df-sidebar-collapsed-width) !important;
  min-width: var(--df-sidebar-collapsed-width) !important;
  max-width: var(--df-sidebar-collapsed-width) !important;
}

/* MAIN CONTENT: starts below header, right of sidebar */
.app-main,
.main-content,
.page-wrapper,
.content-wrapper {
  margin-top: var(--df-header-height) !important;
  margin-left: var(--df-sidebar-width) !important;
  min-height: calc(100vh - var(--df-header-height)) !important;
}

body.sidebar-collapsed .app-main,
body.sidebar-collapsed .main-content,
body.sidebar-collapsed .page-wrapper,
body.sidebar-collapsed .content-wrapper {
  margin-left: var(--df-sidebar-collapsed-width) !important;
}

/* TOGGLE button on sidebar edge, below header */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  top: calc(var(--df-header-height) + 18px) !important;
  left: calc(var(--df-sidebar-width) - 19px) !important;
  width: 39px !important;
  height: 39px !important;
  min-width: 39px !important;
  min-height: 39px !important;
  z-index: 6000 !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(180deg, #ff8a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, .35) !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 19px) !important;
}

@media (max-width: 760px) {
  .topbar-brand-zone,
  body.sidebar-collapsed .topbar-brand-zone {
    width: 72px !important;
    min-width: 72px !important;
    max-width: 72px !important;
    flex-basis: 72px !important;
  }

  .topbar-breadcrumb {
    margin-left: 12px !important;
  }

  .app-main,
  .main-content,
  .page-wrapper,
  .content-wrapper,
  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .page-wrapper,
  body.sidebar-collapsed .content-wrapper {
    margin-left: 72px !important;
  }
}


/* Toggle icon fix v20
   Expanded sidebar  = "<"
   Collapsed sidebar = ">"
*/
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#sidebarCollapseBtn .toggle-symbol,
.sidebar-collapse-btn .toggle-symbol,
#sidebarCollapseBtn span,
.sidebar-collapse-btn span {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
}

body:not(.sidebar-collapsed) #sidebarCollapseBtn .toggle-symbol::before,
body:not(.sidebar-collapsed) .sidebar-collapse-btn .toggle-symbol::before,
body:not(.sidebar-collapsed) #sidebarCollapseBtn span::before,
body:not(.sidebar-collapsed) .sidebar-collapse-btn span::before {
  content: "<" !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
}

body.sidebar-collapsed #sidebarCollapseBtn .toggle-symbol::before,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-symbol::before,
body.sidebar-collapsed #sidebarCollapseBtn span::before,
body.sidebar-collapsed .sidebar-collapse-btn span::before {
  content: ">" !important;
  font-size: 22px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  font-family: Arial, sans-serif !important;
}


/* Toggle icon state fix v21 */
/* Button shows exactly one icon:
   normal/expanded sidebar = <
   collapsed sidebar       = >
*/
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  top: calc(var(--df-header-height) + 18px) !important;
  left: calc(var(--df-sidebar-width) - 19px) !important;
  width: 39px !important;
  height: 39px !important;
  min-width: 39px !important;
  min-height: 39px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(180deg, #ff8a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 22px rgba(249, 115, 22, .35) !important;
  z-index: 6000 !important;
  pointer-events: auto !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 19px) !important;
}

/* kill old pseudo/text output */
#sidebarCollapseBtn span::before,
.sidebar-collapse-btn span::before {
  content: none !important;
  display: none !important;
}

#sidebarCollapseBtn .toggle-icon,
.sidebar-collapse-btn .toggle-icon {
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: Arial, sans-serif !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #ffffff !important;
}

/* expanded/default state */
#sidebarCollapseBtn .toggle-icon-expanded,
.sidebar-collapse-btn .toggle-icon-expanded {
  display: inline-flex !important;
}

#sidebarCollapseBtn .toggle-icon-collapsed,
.sidebar-collapse-btn .toggle-icon-collapsed {
  display: none !important;
}

/* collapsed state */
body.sidebar-collapsed #sidebarCollapseBtn .toggle-icon-expanded,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-icon-expanded {
  display: none !important;
}

body.sidebar-collapsed #sidebarCollapseBtn .toggle-icon-collapsed,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-icon-collapsed {
  display: inline-flex !important;
}


/* Toggle Direct Text Fix v22 */
/* No pseudo icon, no double symbols. JS writes literal < or > into button text. */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  font-size: 22px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: #fff !important;
  font-family: Arial, sans-serif !important;
  text-align: center !important;
}

#sidebarCollapseBtn *,
.sidebar-collapse-btn * {
  display: none !important;
}

#sidebarCollapseBtn::before,
#sidebarCollapseBtn::after,
.sidebar-collapse-btn::before,
.sidebar-collapse-btn::after,
#sidebarCollapseBtn span::before,
#sidebarCollapseBtn span::after,
.sidebar-collapse-btn span::before,
.sidebar-collapse-btn span::after {
  content: none !important;
  display: none !important;
}


/* Header Logo Consistency Fix v23 */
/* 1) remove vertical divider after logo
   2) keep truck logo size identical in expanded/collapsed state */

.header-brand,
.topbar-brand,
.app-topbar-brand,
.df-topbar-brand,
.df-brand,
.brand-wrap,
.brand-area,
.header-left,
.topbar-left {
  border-right: none !important;
  box-shadow: none !important;
}

.header-brand::after,
.topbar-brand::after,
.app-topbar-brand::after,
.df-topbar-brand::after,
.df-brand::after,
.brand-wrap::after,
.brand-area::after,
.header-left::after,
.topbar-left::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* Make the logo truck size stay the same for both states */
.header-brand img,
.topbar-brand img,
.app-topbar-brand img,
.df-topbar-brand img,
.df-brand img,
.brand-wrap img,
.brand-area img,
.header-left img,
.topbar-left img,
.header-brand .brand-logo,
.topbar-brand .brand-logo,
.app-topbar-brand .brand-logo,
.df-topbar-brand .brand-logo,
.df-brand .brand-logo,
.brand-wrap .brand-logo,
.brand-area .brand-logo,
.header-left .brand-logo,
.topbar-left .brand-logo {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  transform: none !important;
}

body.sidebar-collapsed .header-brand img,
body.sidebar-collapsed .topbar-brand img,
body.sidebar-collapsed .app-topbar-brand img,
body.sidebar-collapsed .df-topbar-brand img,
body.sidebar-collapsed .df-brand img,
body.sidebar-collapsed .brand-wrap img,
body.sidebar-collapsed .brand-area img,
body.sidebar-collapsed .header-left img,
body.sidebar-collapsed .topbar-left img,
body.sidebar-collapsed .header-brand .brand-logo,
body.sidebar-collapsed .topbar-brand .brand-logo,
body.sidebar-collapsed .app-topbar-brand .brand-logo,
body.sidebar-collapsed .df-topbar-brand .brand-logo,
body.sidebar-collapsed .df-brand .brand-logo,
body.sidebar-collapsed .brand-wrap .brand-logo,
body.sidebar-collapsed .brand-area .brand-logo,
body.sidebar-collapsed .header-left .brand-logo,
body.sidebar-collapsed .topbar-left .brand-logo {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Keep logo container stable */
.header-brand,
.topbar-brand,
.app-topbar-brand,
.df-topbar-brand,
.df-brand,
.brand-wrap,
.brand-area,
.header-left,
.topbar-left {
  min-height: 58px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  overflow: visible !important;
}


/* Header Logo Size 80 Line Fix v24 */
/* Truck logo +80% from prior 44px baseline => about 79px.
   Also remove the vertical divider/line after logo area. */

.topbar-brand-zone,
.df-brand,
.df-brand-image-link,
.topbar-left,
.header-left,
.brand-area,
.brand-wrap,
.topbar-brand,
.header-brand,
.app-topbar-brand,
.df-topbar-brand {
  border-right: 0 !important;
  border-left: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

.topbar-brand-zone::before,
.topbar-brand-zone::after,
.df-brand::before,
.df-brand::after,
.df-brand-image-link::before,
.df-brand-image-link::after,
.topbar-left::before,
.topbar-left::after,
.header-left::before,
.header-left::after,
.brand-area::before,
.brand-area::after,
.brand-wrap::before,
.brand-wrap::after,
.topbar-brand::before,
.topbar-brand::after,
.header-brand::before,
.header-brand::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Larger logo truck, same size in expanded and collapsed */
.df-brand-image,
.df-brand img,
.topbar-brand-zone img,
.topbar-left img,
.header-left img,
.brand-area img,
.brand-wrap img,
.topbar-brand img,
.header-brand img {
  width: 79px !important;
  min-width: 79px !important;
  max-width: 79px !important;
  height: 79px !important;
  max-height: 79px !important;
  object-fit: contain !important;
  transform: none !important;
  background: transparent !important;
}

body.sidebar-collapsed .df-brand-image,
body.sidebar-collapsed .df-brand img,
body.sidebar-collapsed .topbar-brand-zone img,
body.sidebar-collapsed .topbar-left img,
body.sidebar-collapsed .header-left img,
body.sidebar-collapsed .brand-area img,
body.sidebar-collapsed .brand-wrap img,
body.sidebar-collapsed .topbar-brand img,
body.sidebar-collapsed .header-brand img {
  width: 79px !important;
  min-width: 79px !important;
  max-width: 79px !important;
  height: 79px !important;
  max-height: 79px !important;
  object-fit: contain !important;
  transform: none !important;
}

/* Allow larger truck to be visible inside header logo container */
.topbar-brand-zone {
  overflow: visible !important;
  width: var(--df-sidebar-width) !important;
  min-width: var(--df-sidebar-width) !important;
  max-width: var(--df-sidebar-width) !important;
  padding-left: 8px !important;
  padding-right: 8px !important;
}

body.sidebar-collapsed .topbar-brand-zone {
  overflow: visible !important;
  width: var(--df-sidebar-collapsed-width) !important;
  min-width: var(--df-sidebar-collapsed-width) !important;
  max-width: var(--df-sidebar-collapsed-width) !important;
  padding-left: 4px !important;
  padding-right: 4px !important;
}

.df-brand,
.df-brand-image-link {
  overflow: visible !important;
}

/* If the line is from topbar grid/column separator, suppress it too */
.topbar {
  column-gap: 0 !important;
}

.topbar > * {
  border-left: 0 !important;
  border-right: 0 !important;
}


/* Sidebar Logo Toggle Refinement v25 */
/* 1) Move truck slightly right when collapsed
   2) remove remaining divider line
   3) make toggle button 20% smaller and icon lighter */

/* Stronger divider removal */
.topbar,
.topbar-brand-zone,
.df-topbar,
.df-topbar-inner,
.df-brand,
.df-brand-image-link,
.topbar-left,
.header-left,
.brand-area,
.brand-wrap,
.topbar-brand,
.header-brand,
.app-topbar-brand,
.df-topbar-brand {
  border-right: 0 !important;
  border-left: 0 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  background-image: none !important;
}

.topbar::before,
.topbar::after,
.topbar-brand-zone::before,
.topbar-brand-zone::after,
.df-topbar::before,
.df-topbar::after,
.df-topbar-inner::before,
.df-topbar-inner::after,
.df-brand::before,
.df-brand::after,
.df-brand-image-link::before,
.df-brand-image-link::after,
.topbar-left::before,
.topbar-left::after,
.header-left::before,
.header-left::after,
.brand-area::before,
.brand-area::after,
.brand-wrap::before,
.brand-wrap::after,
.topbar-brand::before,
.topbar-brand::after,
.header-brand::before,
.header-brand::after,
.app-topbar-brand::before,
.app-topbar-brand::after {
  content: none !important;
  display: none !important;
  width: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Logo position and equal truck size */
.topbar-brand-zone {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  padding-left: 8px !important;
}

body.sidebar-collapsed .topbar-brand-zone {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.df-brand,
.df-brand-image-link {
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link {
  justify-content: center !important;
  width: 100% !important;
  padding-left: 10px !important; /* nudge right */
  box-sizing: border-box !important;
}

/* keep truck consistent */
.df-brand-image,
.df-brand img,
.topbar-brand-zone img,
.topbar-left img,
.header-left img,
.brand-area img,
.brand-wrap img,
.topbar-brand img,
.header-brand img {
  width: 79px !important;
  min-width: 79px !important;
  max-width: 79px !important;
  height: 79px !important;
  max-height: 79px !important;
  object-fit: contain !important;
  transform: none !important;
  background: transparent !important;
}

body.sidebar-collapsed .df-brand-image,
body.sidebar-collapsed .df-brand img,
body.sidebar-collapsed .topbar-brand-zone img,
body.sidebar-collapsed .topbar-left img,
body.sidebar-collapsed .header-left img,
body.sidebar-collapsed .brand-area img,
body.sidebar-collapsed .brand-wrap img,
body.sidebar-collapsed .topbar-brand img,
body.sidebar-collapsed .header-brand img {
  width: 79px !important;
  min-width: 79px !important;
  max-width: 79px !important;
  height: 79px !important;
  max-height: 79px !important;
}

/* Sidebar toggle button smaller */
.sidebar-toggle,
.sidebar-collapse-toggle,
.df-sidebar-toggle,
#sidebarToggle,
button.sidebar-toggle {
  width: 41px !important;
  height: 41px !important;
  min-width: 41px !important;
  min-height: 41px !important;
  border-radius: 50% !important;
  font-size: 0 !important; /* suppress old text sizing */
  line-height: 1 !important;
}

/* Lighter/thinner chevron icon */
.sidebar-toggle::before,
.sidebar-collapse-toggle::before,
.df-sidebar-toggle::before,
#sidebarToggle::before,
button.sidebar-toggle::before {
  font-size: 22px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* If button uses direct text content, control it too */
.sidebar-toggle,
.sidebar-collapse-toggle,
.df-sidebar-toggle,
#sidebarToggle,
button.sidebar-toggle {
  font-family: Arial, sans-serif !important;
  font-weight: 400 !important;
  color: #ffffff !important;
  text-rendering: geometricPrecision !important;
}

/* Make sure collapsed state still visible over layout */
.sidebar-toggle,
.sidebar-collapse-toggle,
.df-sidebar-toggle,
#sidebarToggle,
button.sidebar-toggle {
  z-index: 9999 !important;
}

/* Remove possible thin separator on the right edge of brand zone */
.topbar-brand-zone {
  position: relative !important;
}
.topbar-brand-zone + * {
  border-left: 0 !important;
}


/* Remove Collapsed Header Divider v26 */
/* The remaining vertical line appears when the sidebar is collapsed.
   Remove all possible divider sources around the logo column and breadcrumb. */

body.sidebar-collapsed .topbar,
body.sidebar-collapsed .topbar *,
body.sidebar-collapsed .topbar-brand-zone,
body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link,
body.sidebar-collapsed .topbar-breadcrumb,
body.sidebar-collapsed .header-spacer,
body.sidebar-collapsed .user-menu {
  border-left-width: 0 !important;
  border-right-width: 0 !important;
  border-left-color: transparent !important;
  border-right-color: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* specifically kill pseudo separators */
body.sidebar-collapsed .topbar::before,
body.sidebar-collapsed .topbar::after,
body.sidebar-collapsed .topbar *::before,
body.sidebar-collapsed .topbar *::after,
body.sidebar-collapsed .topbar-brand-zone::before,
body.sidebar-collapsed .topbar-brand-zone::after,
body.sidebar-collapsed .topbar-breadcrumb::before,
body.sidebar-collapsed .topbar-breadcrumb::after,
body.sidebar-collapsed .df-brand::before,
body.sidebar-collapsed .df-brand::after,
body.sidebar-collapsed .df-brand-image-link::before,
body.sidebar-collapsed .df-brand-image-link::after {
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* keep the topbar background continuous so no column boundary is visible */
body.sidebar-collapsed .topbar,
body.sidebar-collapsed .topbar-brand-zone,
body.sidebar-collapsed .topbar-breadcrumb {
  background-color: #ffffff !important;
  background-image: none !important;
}

/* ensure no grid/flex column gap looks like a separator */
body.sidebar-collapsed .topbar {
  gap: 0 !important;
  column-gap: 0 !important;
}

/* offset breadcrumb slightly so it does not sit on the old divider coordinate */
body.sidebar-collapsed .topbar-breadcrumb {
  margin-left: 22px !important;
}

/* logo stays inside the collapsed logo column */
body.sidebar-collapsed .topbar-brand-zone {
  overflow: hidden !important;
}



/* When sidebar is collapsed, hover the icon to show a flyout label/submenu. */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #appSidebar,
body.sidebar-collapsed .app-sidebar {
  overflow: visible !important;
}

body.sidebar-collapsed .side-nav {
  overflow: visible !important;
}

body.sidebar-collapsed .side-link,
body.sidebar-collapsed .side-group {
  position: relative !important;
  overflow: visible !important;
}

/* Main icon hover highlight in collapsed state */
body.sidebar-collapsed .side-link:hover,
body.sidebar-collapsed .side-group:hover > .side-group-btn {
  background: rgba(255,255,255,.12) !important;
  border-radius: 9px !important;
}

/* Dashboard / single link tooltip */
body.sidebar-collapsed .side-link[data-collapsed-title]::after {
  content: attr(data-collapsed-title);
  position: absolute;
  left: calc(var(--df-sidebar-collapsed-width) - 2px);
  top: 50%;
  transform: translateY(-50%);
  min-width: 150px;
  padding: 11px 14px;
  border-radius: 10px;
  background: #073a85;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(15,23,42,.22);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 7000;
}

body.sidebar-collapsed .side-link[data-collapsed-title]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Group flyout panel */
body.sidebar-collapsed .side-group::after {
  content: attr(data-collapsed-title);
  position: absolute;
  left: calc(var(--df-sidebar-collapsed-width) - 2px);
  top: 0;
  min-width: 190px;
  height: 40px;
  padding: 0 14px;
  border-radius: 12px 12px 0 0;
  background: #073a85;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(15,23,42,.22);
  font-size: 12px;
  font-weight: 800;
  line-height: 40px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  z-index: 7001;
}

body.sidebar-collapsed .side-group:hover::after {
  opacity: 1;
  visibility: visible;
}

/* Show submenu as right-side flyout when collapsed */
body.sidebar-collapsed .side-group:hover > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) - 2px) !important;
  top: 40px !important;
  width: 190px !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 0 0 12px 12px !important;
  background: #073a85 !important;
  box-shadow: 0 18px 30px rgba(15,23,42,.24) !important;
  z-index: 7002 !important;
  gap: 4px !important;
  pointer-events: auto !important;
}

/* Ensure hidden attribute doesn't block hover flyout */
body.sidebar-collapsed .side-group:hover > .side-submenu[hidden] {
  display: flex !important;
}

/* Flyout submenu links */
body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  height: 32px !important;
  min-height: 32px !important;
  padding: 0 12px !important;
  border-radius: 8px !important;
  color: #eaf2ff !important;
  background: transparent !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active {
  background: #f97316 !important;
  color: #ffffff !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-bullet {
  width: 8px !important;
  min-width: 8px !important;
  color: currentColor !important;
}

/* Keep collapsed default hidden when not hovering */
body.sidebar-collapsed .side-group:not(:hover) > .side-submenu {
  display: none !important;
  visibility: hidden !important;
}

/* Collapsed label/icons stay compact; hover flyout handles text */
body.sidebar-collapsed .side-label,
body.sidebar-collapsed .side-arrow,
body.sidebar-collapsed .chev {
  display: none !important;
}



/* Fix:
   1. remove rendered stray text from malformed sidebar markup
   2. show submenu labels inside collapsed flyout
   3. make flyout panel stable while moving cursor from icon to panel
*/

body.sidebar-collapsed .side-group:hover > .side-submenu .side-label,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-label,
body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link .side-label,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link .side-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  max-width: 145px !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Show flyout both on CSS hover and JS hover class */
body.sidebar-collapsed .side-group.is-hovering::after {
  opacity: 1 !important;
  visibility: visible !important;
}

body.sidebar-collapsed .side-group.is-hovering > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  overflow: visible !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) - 2px) !important;
  top: 40px !important;
  width: 190px !important;
  min-width: 190px !important;
  margin: 0 !important;
  padding: 8px !important;
  border-radius: 0 0 12px 12px !important;
  background: #073a85 !important;
  box-shadow: 0 18px 30px rgba(15,23,42,.24) !important;
  z-index: 7002 !important;
  gap: 4px !important;
  pointer-events: auto !important;
}

/* Flyout links should show both dot and text */
body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

/* Keep normal collapsed sidebar labels hidden outside flyout */
body.sidebar-collapsed .side-link > .side-label,
body.sidebar-collapsed .side-group-btn .side-label,
body.sidebar-collapsed .side-arrow,
body.sidebar-collapsed .chev {
  display: none !important;
}

/* But never hide labels inside flyout submenu */
body.sidebar-collapsed .side-submenu .side-sub-link .side-label {
  display: inline-block !important;
}

/* Optional: make flyout title and body align cleaner */
body.sidebar-collapsed .side-group::after,
body.sidebar-collapsed .side-link[data-collapsed-title]::after {
  font-family: Arial, Aptos, sans-serif !important;
}

/* Remove any old accidental quote-like artifacts by clipping only actual content area */
body.sidebar-collapsed .side-nav {
  overflow: visible !important;
}



/* Make collapsed hover flyout harder to close and align parent/submenu widths. */

:root {
  --df-flyout-width: 210px;
  --df-flyout-left: calc(var(--df-sidebar-collapsed-width) - 1px);
}

/* Give a bridge area between icon and flyout so hover does not close while moving mouse. */
body.sidebar-collapsed .side-group::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 0;
  width: 20px;
  height: 100%;
  background: transparent;
  display: block !important;
  z-index: 6999;
}

/* Parent/title flyout width and submenu flyout width must match. */
body.sidebar-collapsed .side-group::after {
  left: var(--df-flyout-left) !important;
  top: 0 !important;
  width: var(--df-flyout-width) !important;
  min-width: var(--df-flyout-width) !important;
  max-width: var(--df-flyout-width) !important;
  height: 40px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 12px 12px 0 0 !important;
  background: #073a85 !important;
  box-shadow: 0 14px 28px rgba(15,23,42,.22) !important;
  z-index: 7001 !important;
}

/* Dashboard single flyout uses same width. */
body.sidebar-collapsed .side-link[data-collapsed-title]::after {
  left: var(--df-flyout-left) !important;
  width: var(--df-flyout-width) !important;
  min-width: var(--df-flyout-width) !important;
  max-width: var(--df-flyout-width) !important;
  box-sizing: border-box !important;
}

/* Submenu flyout aligns exactly under menu title. */
body.sidebar-collapsed .side-group:hover > .side-submenu,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu {
  left: var(--df-flyout-left) !important;
  top: 40px !important;
  width: var(--df-flyout-width) !important;
  min-width: var(--df-flyout-width) !important;
  max-width: var(--df-flyout-width) !important;
  padding: 8px !important;
  box-sizing: border-box !important;
  border-radius: 0 0 12px 12px !important;
  background: #073a85 !important;
  box-shadow: 0 18px 30px rgba(15,23,42,.24) !important;
}

/* Keep panel open when moving within flyout. */
body.sidebar-collapsed .side-group.is-hovering > .side-submenu,
body.sidebar-collapsed .side-group:hover > .side-submenu {
  pointer-events: auto !important;
}

/* Align submenu rows inside flyout. */
body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link {
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 0 12px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-label,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-label {
  max-width: calc(var(--df-flyout-width) - 48px) !important;
}

/* Prevent accidental clipping of the flyout. */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #appSidebar,
body.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .side-nav,
body.sidebar-collapsed .side-group {
  overflow: visible !important;
}


/* Collapsed Sidebar Hover Bridge Fix v30 */
/* Fix hover disappearing when moving mouse from collapsed icon to the right-side menu title box. */

:root {
  --df-flyout-width: 210px;
  --df-flyout-left: calc(var(--df-sidebar-collapsed-width) - 1px);
  --df-flyout-bridge-width: 36px;
}

/* Larger invisible bridge from icon to flyout. This prevents mouseleave during diagonal/right movement. */
body.sidebar-collapsed .side-group::before {
  content: "" !important;
  position: absolute !important;
  left: 100% !important;
  top: -8px !important;
  width: var(--df-flyout-bridge-width) !important;
  height: calc(100% + 56px) !important;
  background: transparent !important;
  display: block !important;
  z-index: 7003 !important;
  pointer-events: auto !important;
}

/* Make title box and submenu panel part of the hoverable area via JS class. */
body.sidebar-collapsed .side-group.is-hovering::after,
body.sidebar-collapsed .side-group:hover::after {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Keep title box aligned and reachable. */
body.sidebar-collapsed .side-group::after {
  left: var(--df-flyout-left) !important;
  top: 0 !important;
  width: var(--df-flyout-width) !important;
  min-width: var(--df-flyout-width) !important;
  max-width: var(--df-flyout-width) !important;
  height: 40px !important;
  padding: 0 14px !important;
  box-sizing: border-box !important;
  border-radius: 12px 12px 0 0 !important;
  background: #073a85 !important;
  z-index: 7004 !important;
}

/* Submenu starts exactly under title and stays visible while JS class is active. */
body.sidebar-collapsed .side-group.is-hovering > .side-submenu,
body.sidebar-collapsed .side-group:hover > .side-submenu {
  left: var(--df-flyout-left) !important;
  top: 40px !important;
  width: var(--df-flyout-width) !important;
  min-width: var(--df-flyout-width) !important;
  max-width: var(--df-flyout-width) !important;
  z-index: 7005 !important;
  pointer-events: auto !important;
}

/* Extra hover target: submenu gets a transparent top padding bridge without changing visual alignment. */
body.sidebar-collapsed .side-group.is-hovering > .side-submenu::before,
body.sidebar-collapsed .side-group:hover > .side-submenu::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: -44px !important;
  width: 100% !important;
  height: 44px !important;
  background: transparent !important;
  pointer-events: auto !important;
}

/* Ensure visible labels in flyout. */
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-label,
body.sidebar-collapsed .side-group:hover > .side-submenu .side-label {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Do not clip invisible bridge/flyout. */
body.sidebar-collapsed .sidebar,
body.sidebar-collapsed #appSidebar,
body.sidebar-collapsed .app-sidebar,
body.sidebar-collapsed .side-nav,
body.sidebar-collapsed .side-group,
body.sidebar-collapsed .side-submenu {
  overflow: visible !important;
}


/* Toggle Size and Content Spacing v31 */
/* 1. Reduce total collapse/expand button size by 20%
   2. Make > / < icon thinner
   3. Make top content gap equal to left content gap */

/* Toggle button final size: previous 39px -> 31px */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  left: calc(var(--df-sidebar-width) - 15px) !important;
  top: calc(var(--df-header-height) + 16px) !important;
  font-size: 17px !important;
  font-weight: 400 !important;
  border-width: 2px !important;
  box-shadow: 0 8px 16px rgba(249, 115, 22, .30) !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 15px) !important;
}

#sidebarCollapseBtn,
#sidebarCollapseBtn *,
.sidebar-collapse-btn,
.sidebar-collapse-btn * {
  font-family: Arial, Aptos, sans-serif !important;
  font-weight: 400 !important;
  text-rendering: geometricPrecision !important;
}

#sidebarCollapseBtn {
  font-size: 17px !important;
  line-height: 1 !important;
}

/* If button uses direct text, keep it visually light */
#sidebarCollapseBtn::before,
#sidebarCollapseBtn::after,
.sidebar-collapse-btn::before,
.sidebar-collapse-btn::after {
  font-weight: 400 !important;
}

/* If CSS pseudo symbol is active from older rules, override thickness and size */
body:not(.sidebar-collapsed) #sidebarCollapseBtn span::before,
body:not(.sidebar-collapsed) .sidebar-collapse-btn span::before,
body.sidebar-collapsed #sidebarCollapseBtn span::before,
body.sidebar-collapsed .sidebar-collapse-btn span::before {
  font-size: 17px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
}

/* Content spacing:
   Make the first content/card top gap equal to the left content gap.
   In current layout left gap is around 20px, so use 20px top. */
.app-main {
  padding-top: 20px !important;
}

.page-card,
.workspace-shell,
.content-card,
.module-card,
.master-card,
.user-management-card,
.main-panel {
  margin-top: 20px !important;
}

/* If app-main padding creates double spacing with child margin, normalize common module first card */
.app-main > .page-card:first-child,
.app-main > .workspace-shell:first-child,
.app-main > .content-card:first-child,
.app-main > .module-card:first-child,
.app-main > .master-card:first-child,
.app-main > .user-management-card:first-child,
.app-main > .main-panel:first-child {
  margin-top: 0 !important;
}

/* For module pages where topbar is inside app-main, keep content under topbar with equal 20px gap */
.app-main > .topbar + .page-card,
.app-main > .topbar + .workspace-shell,
.app-main > .topbar + .content-card,
.app-main > .topbar + .module-card,
.app-main > .topbar + .master-card,
.app-main > .topbar + .user-management-card,
.app-main > .topbar + .main-panel,
.app-main > header.topbar + .page-card,
.app-main > header.topbar + .workspace-shell,
.app-main > header.topbar + .content-card,
.app-main > header.topbar + .module-card,
.app-main > header.topbar + .master-card,
.app-main > header.topbar + .user-management-card,
.app-main > header.topbar + .main-panel {
  margin-top: 20px !important;
}

/* Specific common module containers */
.module-container,
.page-content,
.content-area,
.master-user-page,
.user-page {
  margin-top: 20px !important;
}


/* Content Spacing 10px v32 */
/* Set top gap between header and upper content box to 10px. */
.app-main {
  padding-top: 10px !important;
}

.page-card,
.workspace-shell,
.content-card,
.module-card,
.master-card,
.user-management-card,
.main-panel,
.module-container,
.page-content,
.content-area,
.master-user-page,
.user-page {
  margin-top: 10px !important;
}

.app-main > .topbar + .page-card,
.app-main > .topbar + .workspace-shell,
.app-main > .topbar + .content-card,
.app-main > .topbar + .module-card,
.app-main > .topbar + .master-card,
.app-main > .topbar + .user-management-card,
.app-main > .topbar + .main-panel,
.app-main > header.topbar + .page-card,
.app-main > header.topbar + .workspace-shell,
.app-main > header.topbar + .content-card,
.app-main > header.topbar + .module-card,
.app-main > header.topbar + .master-card,
.app-main > header.topbar + .user-management-card,
.app-main > header.topbar + .main-panel {
  margin-top: 10px !important;
}


/* Inner Box Spacing 10px v33 */
/* Make inner box left/right spacing equal to top spacing from header: 10px. */

/* Main content area should not add wide side padding */
.app-main,
.main-content,
.page-wrapper,
.content-wrapper {
  padding-left: 10px !important;
  padding-right: 10px !important;
  padding-top: 10px !important;
}

/* Common main white/card containers */
.workspace-shell,
.page-card,
.content-card,
.module-card,
.master-card,
.user-management-card,
.main-panel {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

/* If the white box is the first element after topbar, keep 10px gap only from app-main padding */
.app-main > .topbar + .workspace-shell,
.app-main > .topbar + .page-card,
.app-main > .topbar + .content-card,
.app-main > .topbar + .module-card,
.app-main > .topbar + .master-card,
.app-main > .topbar + .user-management-card,
.app-main > .topbar + .main-panel,
.app-main > header.topbar + .workspace-shell,
.app-main > header.topbar + .page-card,
.app-main > header.topbar + .content-card,
.app-main > header.topbar + .module-card,
.app-main > header.topbar + .master-card,
.app-main > header.topbar + .user-management-card,
.app-main > header.topbar + .main-panel {
  margin-top: 0 !important;
}

/* Some pages wrap content in module/page containers */
.module-container,
.page-content,
.content-area,
.master-user-page,
.user-page {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

/* Keep large empty dashboard box calculated to fit the new 10px side gutters */
.workspace-shell {
  min-height: calc(100vh - var(--df-header-height) - 20px) !important;
}


/* Inner Box Spacing 15px v34 */
/* Apply consistent 15px spacing on dashboard, user management, menu management, and forms. */

.app-main,
.main-content,
.page-wrapper,
.content-wrapper {
  padding-left: 15px !important;
  padding-right: 15px !important;
  padding-top: 15px !important;
}

.workspace-shell,
.page-card,
.content-card,
.module-card,
.master-card,
.user-management-card,
.menu-management-card,
.main-panel,
.card,
.panel {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

.app-main > .topbar + .workspace-shell,
.app-main > .topbar + .page-card,
.app-main > .topbar + .content-card,
.app-main > .topbar + .module-card,
.app-main > .topbar + .master-card,
.app-main > .topbar + .user-management-card,
.app-main > .topbar + .menu-management-card,
.app-main > .topbar + .main-panel,
.app-main > .topbar + .card,
.app-main > .topbar + .panel,
.app-main > header.topbar + .workspace-shell,
.app-main > header.topbar + .page-card,
.app-main > header.topbar + .content-card,
.app-main > header.topbar + .module-card,
.app-main > header.topbar + .master-card,
.app-main > header.topbar + .user-management-card,
.app-main > header.topbar + .menu-management-card,
.app-main > header.topbar + .main-panel,
.app-main > header.topbar + .card,
.app-main > header.topbar + .panel {
  margin-top: 0 !important;
}

.module-container,
.page-content,
.content-area,
.master-user-page,
.master-menu-page,
.user-page,
.menu-page,
.user-management-page,
.menu-management-page,
.form-page,
.form-container {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.user-management,
.menu-management,
.user-management-wrap,
.menu-management-wrap,
.master-user-wrapper,
.master-menu-wrapper,
.users-wrapper,
.menus-wrapper {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  max-width: none !important;
  width: 100% !important;
}

.workspace-shell {
  min-height: calc(100vh - var(--df-header-height) - 30px) !important;
}


/* User & Menu Management Box Style Fix v35 */
/* Make User Management and Menu Management forms/cards
   visually consistent with other white workspace boxes. */

.user-management-page,
.menu-management-page,
.master-user-page,
.master-menu-page,
.user-management-wrap,
.menu-management-wrap,
.master-user-wrapper,
.master-menu-wrapper {
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Main white container styling */
.user-management-card,
.menu-management-card,
.user-management,
.menu-management,
.master-user-card,
.master-menu-card,
.users-wrapper,
.menus-wrapper {
  background: #ffffff !important;
  border: 1px solid #dbe3f0 !important;
  border-radius: 22px !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, .05) !important;
  overflow: hidden !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Header area inside management modules */
.user-management-card .card-header,
.menu-management-card .card-header,
.user-management .card-header,
.menu-management .card-header,
.master-user-card .card-header,
.master-menu-card .card-header {
  background: #f8fafc !important;
  border-bottom: 1px solid #e2e8f0 !important;
  padding: 18px 22px !important;
}

/* Body spacing */
.user-management-card .card-body,
.menu-management-card .card-body,
.user-management .card-body,
.menu-management .card-body,
.master-user-card .card-body,
.master-menu-card .card-body {
  padding: 18px 22px !important;
}

/* Tables aligned with dashboard styling */
.user-management table,
.menu-management table,
.master-user-card table,
.master-menu-card table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Inputs/buttons consistency */
.user-management input,
.menu-management input,
.user-management select,
.menu-management select {
  border-radius: 10px !important;
  min-height: 40px !important;
}

.user-management .btn,
.menu-management .btn {
  border-radius: 10px !important;
}


/* Header Logo Fixed and Management Spacing v36 */
/* 1. Hide breadcrumb/menu position in header
   2. Header logo is part of header and keeps same position on collapse/expand
   3. User Management and Menu Management box spacing: left/right/top = 15px */

/* Hide breadcrumb if markup still exists */
.topbar-breadcrumb,
.crumb-main,
.crumb-sep,
.crumb-pill {
  display: none !important;
}

/* Header remains full-width and logo belongs to header, not sidebar */
.topbar {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100vw !important;
  height: var(--df-header-height) !important;
  min-height: var(--df-header-height) !important;
  display: flex !important;
  align-items: center !important;
  background: #ffffff !important;
  z-index: 5000 !important;
  border-bottom: 1px solid #d7e0ef !important;
  overflow: visible !important;
}

/* Logo column fixed width, not tied to sidebar collapsed/expanded state */
.topbar-brand-zone,
body.sidebar-collapsed .topbar-brand-zone {
  position: relative !important;
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  flex: 0 0 72px !important;
  height: var(--df-header-height) !important;
  padding: 0 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: #ffffff !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
  transform: none !important;
}

.df-brand,
.df-brand-image-link,
body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

.df-brand-image,
body.sidebar-collapsed .df-brand-image,
.df-brand img,
body.sidebar-collapsed .df-brand img,
.topbar-brand-zone img,
body.sidebar-collapsed .topbar-brand-zone img {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  background: transparent !important;
  transform: none !important;
  margin: 0 !important;
}

/* Remove all possible vertical separator beside logo */
.topbar-brand-zone::before,
.topbar-brand-zone::after,
.df-brand::before,
.df-brand::after,
.df-brand-image-link::before,
.df-brand-image-link::after {
  content: none !important;
  display: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header right user block remains on the right */
.header-spacer {
  flex: 1 1 auto !important;
}

/* Main content: real 15px spacing from sidebar/header */
.app-main,
.main-content,
.page-wrapper,
.content-wrapper {
  padding-top: 15px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* Remove wide margins from content boxes */
.workspace-shell,
.page-card,
.content-card,
.module-card,
.master-card,
.user-management-card,
.menu-management-card,
.main-panel,
.card,
.panel {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* User/Menu Management module boxes align exactly with other boxes */
.user-management,
.menu-management,
.user-management-card,
.menu-management-card,
.master-user-card,
.master-menu-card,
.users-wrapper,
.menus-wrapper,
.master-user-wrapper,
.master-menu-wrapper,
.user-management-wrap,
.menu-management-wrap {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Wrappers must not add their own side offset */
.module-container,
.page-content,
.content-area,
.master-user-page,
.master-menu-page,
.user-page,
.menu-page,
.user-management-page,
.menu-management-page,
.form-page,
.form-container {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* If User/Menu page uses a table/form section directly, style it as a box */
.master-user-page > *,
.master-menu-page > *,
.user-management-page > *,
.menu-management-page > * {
  box-sizing: border-box !important;
}

/* Keep top gap at 15px, not doubled by first card margin */
.app-main > .topbar + *,
.app-main > header.topbar + * {
  margin-top: 0 !important;
}

/* Dashboard/workspace height adjusted for 15px rhythm */
.workspace-shell {
  min-height: calc(100vh - var(--df-header-height) - 30px) !important;
}

/* Since breadcrumb hidden, do not reserve visual space for it */
.topbar > .header-spacer {
  margin-left: 0 !important;
}


/* Logo Size and Management 15px Fix v37 */
/* 1. Restore larger truck logo.
   2. Force User/Menu Management side spacing to exactly 15px. */

/* Logo should remain part of header and keep a larger consistent size */
.topbar-brand-zone,
body.sidebar-collapsed .topbar-brand-zone {
  width: 90px !important;
  min-width: 90px !important;
  max-width: 90px !important;
  flex: 0 0 90px !important;
  height: var(--df-header-height) !important;
  padding: 0 10px !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  border: 0 !important;
  box-shadow: none !important;
  background: #ffffff !important;
}

.df-brand,
.df-brand-image-link,
body.sidebar-collapsed .df-brand,
body.sidebar-collapsed .df-brand-image-link {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow: visible !important;
  background: transparent !important;
  padding: 0 !important;
  margin: 0 !important;
}

.df-brand-image,
body.sidebar-collapsed .df-brand-image,
.df-brand img,
body.sidebar-collapsed .df-brand img,
.topbar-brand-zone img,
body.sidebar-collapsed .topbar-brand-zone img {
  width: 68px !important;
  min-width: 68px !important;
  max-width: 68px !important;
  height: 68px !important;
  max-height: 68px !important;
  object-fit: contain !important;
  background: transparent !important;
  transform: none !important;
  margin: 0 !important;
}

/* No divider around the logo */
.topbar-brand-zone,
.topbar-brand-zone *,
.topbar-brand-zone::before,
.topbar-brand-zone::after,
.df-brand::before,
.df-brand::after,
.df-brand-image-link::before,
.df-brand-image-link::after {
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}

/* Main content spacing - actual page gutter */
.app-main,
.main-content,
.page-wrapper,
.content-wrapper {
  padding-top: 15px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
}

/* User/Menu pages often use .page-card with old margin-left/right.
   Force the outer card itself to start exactly after the 15px gutter. */
body:has(.user-management-card) .app-main,
body:has(.menu-management-card) .app-main,
body:has(.user-management) .app-main,
body:has(.menu-management) .app-main {
  padding-left: 15px !important;
  padding-right: 15px !important;
}

.user-management-card,
.menu-management-card,
.user-management,
.menu-management,
.master-user-card,
.master-menu-card,
.users-wrapper,
.menus-wrapper,
.master-user-wrapper,
.master-menu-wrapper,
.user-management-wrap,
.menu-management-wrap,
.page-card:has(.user-management),
.page-card:has(.menu-management),
.page-card:has([data-module="master-user"]),
.page-card:has([data-module="master-menu"]) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Broader fallback for master_user.php / master_menu.php cards */
body[data-current-page="master_user"] .page-card,
body[data-current-page="master_user"] .content-card,
body[data-current-page="master_user"] .module-card,
body[data-current-page="master_user"] .main-panel,
body[data-current-page="master_menu"] .page-card,
body[data-current-page="master_menu"] .content-card,
body[data-current-page="master_menu"] .module-card,
body[data-current-page="master_menu"] .main-panel {
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Remove extra wrapper padding/margins on management modules */
body[data-current-page="master_user"] .module-container,
body[data-current-page="master_user"] .page-content,
body[data-current-page="master_user"] .content-area,
body[data-current-page="master_user"] .master-user-page,
body[data-current-page="master_user"] .user-management-page,
body[data-current-page="master_menu"] .module-container,
body[data-current-page="master_menu"] .page-content,
body[data-current-page="master_menu"] .content-area,
body[data-current-page="master_menu"] .master-menu-page,
body[data-current-page="master_menu"] .menu-management-page {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* If a management page has a direct form/table block, keep it inside the card width */
body[data-current-page="master_user"] .app-main > *:not(.topbar),
body[data-current-page="master_menu"] .app-main > *:not(.topbar) {
  max-width: none !important;
}


/* Master Pages Direct Spacing Fix v38 */
/* master_user.php and master_menu.php spacing must match other boxes:
   top/right/left = 15px from the content area. */

/* Use 15px page gutter for master pages */
body[data-current-page="master_user"] .app-main,
body[data-current-page="master_menu"] .app-main {
  padding-top: 15px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
  box-sizing: border-box !important;
  overflow-x: hidden !important;
}

/* Direct child after topbar/module include should not add extra left offset */
body[data-current-page="master_user"] .app-main > *:not(.topbar),
body[data-current-page="master_menu"] .app-main > *:not(.topbar) {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Known module root containers */
body[data-current-page="master_user"] .users-page,
body[data-current-page="master_user"] .user-page,
body[data-current-page="master_user"] .master-user-page,
body[data-current-page="master_user"] .user-management-page,
body[data-current-page="master_user"] .module-container,
body[data-current-page="master_user"] .page-content,
body[data-current-page="master_user"] .content-area,
body[data-current-page="master_menu"] .menus-page,
body[data-current-page="master_menu"] .menu-page,
body[data-current-page="master_menu"] .master-menu-page,
body[data-current-page="master_menu"] .menu-management-page,
body[data-current-page="master_menu"] .module-container,
body[data-current-page="master_menu"] .page-content,
body[data-current-page="master_menu"] .content-area {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* Known card containers and generic first section/card in master pages */
body[data-current-page="master_user"] .page-card,
body[data-current-page="master_user"] .content-card,
body[data-current-page="master_user"] .module-card,
body[data-current-page="master_user"] .main-panel,
body[data-current-page="master_user"] .card,
body[data-current-page="master_user"] section,
body[data-current-page="master_user"] .user-management,
body[data-current-page="master_user"] .user-management-card,
body[data-current-page="master_user"] .master-user-card,
body[data-current-page="master_user"] .users-wrapper,
body[data-current-page="master_menu"] .page-card,
body[data-current-page="master_menu"] .content-card,
body[data-current-page="master_menu"] .module-card,
body[data-current-page="master_menu"] .main-panel,
body[data-current-page="master_menu"] .card,
body[data-current-page="master_menu"] section,
body[data-current-page="master_menu"] .menu-management,
body[data-current-page="master_menu"] .menu-management-card,
body[data-current-page="master_menu"] .master-menu-card,
body[data-current-page="master_menu"] .menus-wrapper {
  margin: 0 !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
}

/* If module itself has inline/common margins, cancel them. */
body[data-current-page="master_user"] [class*="management"],
body[data-current-page="master_menu"] [class*="management"] {
  max-width: none !important;
}

/* Preserve inner padding inside the cards, but not outer margins */
body[data-current-page="master_user"] .page-card,
body[data-current-page="master_user"] .content-card,
body[data-current-page="master_user"] .module-card,
body[data-current-page="master_user"] .main-panel,
body[data-current-page="master_user"] .card,
body[data-current-page="master_menu"] .page-card,
body[data-current-page="master_menu"] .content-card,
body[data-current-page="master_menu"] .module-card,
body[data-current-page="master_menu"] .main-panel,
body[data-current-page="master_menu"] .card {
  border-radius: 22px !important;
  overflow: hidden !important;
}

/* Make module tables fit inside new 15px gutters */
body[data-current-page="master_user"] table,
body[data-current-page="master_menu"] table {
  width: 100% !important;
}


/* Auth Change Password Form v39 */
/* Dedicated change password form triggered from login page.
   It is separated from dashboard/client profile change_password.php. */
.auth-change-password-page .auth-main,
.auth-change-main {
  align-items: center !important;
  justify-content: center !important;
  padding: 32px !important;
}

.auth-change-card {
  width: min(100%, 460px) !important;
  max-width: 460px !important;
  padding: 36px 42px !important;
  border-radius: 18px !important;
}

.auth-change-card h2 {
  font-size: 26px !important;
  margin-top: 0 !important;
}

.auth-change-card .muted {
  font-size: 13px !important;
}

.auth-change-card label {
  margin-top: 18px !important;
  gap: 8px !important;
  font-size: 13px !important;
}

.auth-change-card input {
  min-height: 42px !important;
  padding: 11px 13px !important;
  font-size: 13px !important;
}

.auth-change-card .btn {
  margin-top: 24px !important;
  min-height: 42px !important;
  font-size: 13px !important;
}

.auth-card-icon {
  width: 54px;
  height: 54px;
  border-radius: 999px;
  margin: 0 0 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eff6ff;
  color: #0f5bd7;
  font-size: 22px;
}

.auth-change-card .auth-switch {
  margin-top: 18px !important;
}


/* SVG Sidebar Toggle v40 */
/* Replace text < > with clean SVG chevrons. */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: linear-gradient(180deg, #ff8a00, #f97316) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 16px rgba(249, 115, 22, .30) !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#sidebarCollapseBtn::before,
#sidebarCollapseBtn::after,
.sidebar-collapse-btn::before,
.sidebar-collapse-btn::after,
#sidebarCollapseBtn span::before,
#sidebarCollapseBtn span::after,
.sidebar-collapse-btn span::before,
.sidebar-collapse-btn span::after {
  content: none !important;
  display: none !important;
}

#sidebarCollapseBtn .toggle-icon-svg,
.sidebar-collapse-btn .toggle-icon-svg {
  width: 18px !important;
  height: 18px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  pointer-events: none !important;
}

#sidebarCollapseBtn .toggle-icon-svg svg,
.sidebar-collapse-btn .toggle-icon-svg svg {
  width: 18px !important;
  height: 18px !important;
  display: block !important;
}

#sidebarCollapseBtn .toggle-icon-svg path,
.sidebar-collapse-btn .toggle-icon-svg path {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
}

/* Expanded sidebar: show chevron-left */
body:not(.sidebar-collapsed) #sidebarCollapseBtn .toggle-icon-expanded,
body:not(.sidebar-collapsed) .sidebar-collapse-btn .toggle-icon-expanded {
  display: inline-flex !important;
}

body:not(.sidebar-collapsed) #sidebarCollapseBtn .toggle-icon-collapsed,
body:not(.sidebar-collapsed) .sidebar-collapse-btn .toggle-icon-collapsed {
  display: none !important;
}

/* Collapsed sidebar: show chevron-right */
body.sidebar-collapsed #sidebarCollapseBtn .toggle-icon-expanded,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-icon-expanded {
  display: none !important;
}

body.sidebar-collapsed #sidebarCollapseBtn .toggle-icon-collapsed,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-icon-collapsed {
  display: inline-flex !important;
}


/* Mobile Logo Responsive Fix v41 */
/* Prevent logo from stretching/overflowing into sidebar/content on mobile. */

/* Desktop/tablet default: logo stays inside fixed header logo area */
.topbar-brand-zone {
  overflow: hidden !important;
}

.df-brand,
.df-brand-image-link {
  overflow: hidden !important;
}

.df-brand-image,
.df-brand img,
.topbar-brand-zone img {
  object-fit: contain !important;
  object-position: center !important;
}

/* Mobile layout */
@media (max-width: 768px) {
  :root {
    --df-mobile-logo-zone-width: 54px;
    --df-mobile-logo-size: 34px;
  }

  .topbar {
    height: var(--df-header-height) !important;
    min-height: var(--df-header-height) !important;
    overflow: hidden !important;
  }

  .topbar-brand-zone,
  body.sidebar-collapsed .topbar-brand-zone {
    width: var(--df-mobile-logo-zone-width) !important;
    min-width: var(--df-mobile-logo-zone-width) !important;
    max-width: var(--df-mobile-logo-zone-width) !important;
    flex: 0 0 var(--df-mobile-logo-zone-width) !important;
    height: var(--df-header-height) !important;
    padding: 0 6px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  .df-brand,
  .df-brand-image-link,
  body.sidebar-collapsed .df-brand,
  body.sidebar-collapsed .df-brand-image-link {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
  }

  .df-brand-image,
  body.sidebar-collapsed .df-brand-image,
  .df-brand img,
  body.sidebar-collapsed .df-brand img,
  .topbar-brand-zone img,
  body.sidebar-collapsed .topbar-brand-zone img {
    width: var(--df-mobile-logo-size) !important;
    min-width: var(--df-mobile-logo-size) !important;
    max-width: var(--df-mobile-logo-size) !important;
    height: var(--df-mobile-logo-size) !important;
    min-height: var(--df-mobile-logo-size) !important;
    max-height: var(--df-mobile-logo-size) !important;
    object-fit: contain !important;
    object-position: center !important;
    transform: none !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Sidebar on mobile must start below header and not overlap logo */
  .sidebar,
  #appSidebar,
  .app-sidebar,
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed #appSidebar,
  body.sidebar-collapsed .app-sidebar {
    top: var(--df-header-height) !important;
  }

  /* Content starts after compact sidebar width */
  .app-main,
  .main-content,
  .page-wrapper,
  .content-wrapper,
  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .page-wrapper,
  body.sidebar-collapsed .content-wrapper {
    margin-left: var(--df-sidebar-collapsed-width) !important;
  }
}

/* Extra small screens */
@media (max-width: 420px) {
  :root {
    --df-mobile-logo-zone-width: 50px;
    --df-mobile-logo-size: 30px;
  }

  .user-menu {
    margin-right: 8px !important;
  }
}


/* Mobile Sidebar Logo Toggle Fix v42 */
/* 1. Mobile logo bigger
   2. Fix sidebar collapse/expand icon
   3. Mobile default sidebar collapsed handled by JS */

@media (max-width: 768px) {
  :root {
    --df-mobile-logo-zone-width: 62px;
    --df-mobile-logo-size: 46px;
  }

  .topbar-brand-zone,
  body.sidebar-collapsed .topbar-brand-zone {
    width: var(--df-mobile-logo-zone-width) !important;
    min-width: var(--df-mobile-logo-zone-width) !important;
    max-width: var(--df-mobile-logo-zone-width) !important;
    flex: 0 0 var(--df-mobile-logo-zone-width) !important;
    padding: 0 7px !important;
    justify-content: center !important;
    overflow: hidden !important;
  }

  .df-brand-image,
  body.sidebar-collapsed .df-brand-image,
  .df-brand img,
  body.sidebar-collapsed .df-brand img,
  .topbar-brand-zone img,
  body.sidebar-collapsed .topbar-brand-zone img {
    width: var(--df-mobile-logo-size) !important;
    min-width: var(--df-mobile-logo-size) !important;
    max-width: var(--df-mobile-logo-size) !important;
    height: var(--df-mobile-logo-size) !important;
    min-height: var(--df-mobile-logo-size) !important;
    max-height: var(--df-mobile-logo-size) !important;
    object-fit: contain !important;
    object-position: center !important;
  }

  /* Mobile sidebar stays collapsed width by default after JS adds class */
  body.sidebar-collapsed .sidebar,
  body.sidebar-collapsed #appSidebar,
  body.sidebar-collapsed .app-sidebar {
    width: var(--df-sidebar-collapsed-width) !important;
    min-width: var(--df-sidebar-collapsed-width) !important;
    max-width: var(--df-sidebar-collapsed-width) !important;
  }
}

@media (max-width: 420px) {
  :root {
    --df-mobile-logo-zone-width: 60px;
    --df-mobile-logo-size: 42px;
  }
}

/* Toggle button icon fix: use CSS chevron as fallback even if SVG/text is broken */
#sidebarCollapseBtn,
.sidebar-collapse-btn {
  width: 31px !important;
  height: 31px !important;
  min-width: 31px !important;
  min-height: 31px !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 1 !important;
}

#sidebarCollapseBtn .toggle-icon-svg,
.sidebar-collapse-btn .toggle-icon-svg {
  display: none !important;
}

#sidebarCollapseBtn::before,
.sidebar-collapse-btn::before {
  content: "<" !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: #ffffff !important;
  font-family: Arial, Aptos, sans-serif !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
}

body.sidebar-collapsed #sidebarCollapseBtn::before,
body.sidebar-collapsed .sidebar-collapse-btn::before {
  content: ">" !important;
}


/* Sidebar Toggle Fixed Position Chevron v44 */
/* Revert position to fixed on sidebar edge, only fix the icon shape. */

#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  top: calc(var(--df-header-height) + 16px) !important;
  left: calc(var(--df-sidebar-width) - 14px) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: #f5821f !important;
  box-shadow: 0 7px 16px rgba(245, 130, 31, .30) !important;
  z-index: 9000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: visible !important;
  font-size: 0 !important;
  line-height: 1 !important;
  color: transparent !important;
  transform: none !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 14px) !important;
}

/* Hide every older text/svg/pseudo icon */
#sidebarCollapseBtn > *,
.sidebar-collapse-btn > *,
#sidebarCollapseBtn::before,
.sidebar-collapse-btn::before {
  display: none !important;
  content: none !important;
}

/* Draw clean chevron-left in expanded state */
#sidebarCollapseBtn::after,
.sidebar-collapse-btn::after {
  content: "" !important;
  display: block !important;
  width: 8px !important;
  height: 8px !important;
  border-left: 2px solid #ffffff !important;
  border-bottom: 2px solid #ffffff !important;
  transform: rotate(45deg) !important;
  box-sizing: border-box !important;
  margin-left: 3px !important;
}

/* Draw clean chevron-right in collapsed state */
body.sidebar-collapsed #sidebarCollapseBtn::after,
body.sidebar-collapsed .sidebar-collapse-btn::after {
  border-left: 0 !important;
  border-bottom: 0 !important;
  border-right: 2px solid #ffffff !important;
  border-top: 2px solid #ffffff !important;
  transform: rotate(45deg) !important;
  margin-left: -3px !important;
}

/* Mobile keeps same fixed edge position */
@media (max-width: 768px) {
  #sidebarCollapseBtn,
  .sidebar-collapse-btn {
    top: calc(var(--df-header-height) + 16px) !important;
    left: calc(var(--df-sidebar-width) - 14px) !important;
  }

  body.sidebar-collapsed #sidebarCollapseBtn,
  body.sidebar-collapsed .sidebar-collapse-btn {
    left: calc(var(--df-sidebar-collapsed-width) - 14px) !important;
  }
}


/* Final Image Sidebar Toggle v45 */
/* Final fix: icon uses PNG images, not text, pseudo CSS, or inline SVG.
   Responsive for desktop and mobile. */

#sidebarCollapseBtn,
.sidebar-collapse-btn {
  position: fixed !important;
  top: calc(var(--df-header-height) + 16px) !important;
  left: calc(var(--df-sidebar-width) - 14px) !important;
  width: 30px !important;
  height: 30px !important;
  min-width: 30px !important;
  min-height: 30px !important;
  border-radius: 999px !important;
  border: 2px solid #ffffff !important;
  background: #f5821f !important;
  box-shadow: 0 7px 16px rgba(245, 130, 31, .30) !important;
  z-index: 9000 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  overflow: hidden !important;
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  transform: none !important;
  cursor: pointer !important;
}

body.sidebar-collapsed #sidebarCollapseBtn,
body.sidebar-collapsed .sidebar-collapse-btn {
  left: calc(var(--df-sidebar-collapsed-width) - 14px) !important;
}

/* Completely disable any old text/pseudo/icon rules */
#sidebarCollapseBtn::before,
#sidebarCollapseBtn::after,
.sidebar-collapse-btn::before,
.sidebar-collapse-btn::after,
#sidebarCollapseBtn span,
.sidebar-collapse-btn span,
#sidebarCollapseBtn svg,
.sidebar-collapse-btn svg,
#sidebarCollapseBtn .toggle-icon-svg,
.sidebar-collapse-btn .toggle-icon-svg {
  content: none !important;
  display: none !important;
}

/* PNG chevron icon */
#sidebarCollapseBtn .toggle-img,
.sidebar-collapse-btn .toggle-img {
  width: 15px !important;
  height: 15px !important;
  min-width: 15px !important;
  min-height: 15px !important;
  max-width: 15px !important;
  max-height: 15px !important;
  object-fit: contain !important;
  display: block !important;
  pointer-events: none !important;
  user-select: none !important;
}

/* Expanded sidebar = show left chevron */
body:not(.sidebar-collapsed) #sidebarCollapseBtn .toggle-img-expanded,
body:not(.sidebar-collapsed) .sidebar-collapse-btn .toggle-img-expanded {
  display: block !important;
}

body:not(.sidebar-collapsed) #sidebarCollapseBtn .toggle-img-collapsed,
body:not(.sidebar-collapsed) .sidebar-collapse-btn .toggle-img-collapsed {
  display: none !important;
}

/* Collapsed sidebar = show right chevron */
body.sidebar-collapsed #sidebarCollapseBtn .toggle-img-expanded,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-img-expanded {
  display: none !important;
}

body.sidebar-collapsed #sidebarCollapseBtn .toggle-img-collapsed,
body.sidebar-collapsed .sidebar-collapse-btn .toggle-img-collapsed {
  display: block !important;
}

/* Mobile responsive button/icon */
@media (max-width: 768px) {
  #sidebarCollapseBtn,
  .sidebar-collapse-btn {
    top: calc(var(--df-header-height) + 16px) !important;
    left: calc(var(--df-sidebar-width) - 14px) !important;
    width: 30px !important;
    height: 30px !important;
    min-width: 30px !important;
    min-height: 30px !important;
  }

  body.sidebar-collapsed #sidebarCollapseBtn,
  body.sidebar-collapsed .sidebar-collapse-btn {
    left: calc(var(--df-sidebar-collapsed-width) - 14px) !important;
  }

  #sidebarCollapseBtn .toggle-img,
  .sidebar-collapse-btn .toggle-img {
    width: 15px !important;
    height: 15px !important;
    min-width: 15px !important;
    min-height: 15px !important;
  }
}

@media (max-width: 420px) {
  #sidebarCollapseBtn,
  .sidebar-collapse-btn {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    left: calc(var(--df-sidebar-width) - 13px) !important;
  }

  body.sidebar-collapsed #sidebarCollapseBtn,
  body.sidebar-collapsed .sidebar-collapse-btn {
    left: calc(var(--df-sidebar-collapsed-width) - 13px) !important;
  }

  #sidebarCollapseBtn .toggle-img,
  .sidebar-collapse-btn .toggle-img {
    width: 14px !important;
    height: 14px !important;
    min-width: 14px !important;
    min-height: 14px !important;
  }
}

/* Domestic Freight Standard Floating Notifications */
.df-toast-container {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 99999;
  display: grid;
  gap: 10px;
  width: min(380px, calc(100vw - 32px));
  pointer-events: none;
}

.auth-page .df-toast-container {
  top: 24px;
}

.df-toast {
  pointer-events: auto;
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr 22px;
  gap: 10px;
  align-items: start;
  overflow: hidden;
  padding: 12px 12px 14px;
  border: 1px solid #e5e7eb;
  border-left: 5px solid #64748b;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.18);
  font-size: 13px;
  line-height: 1.35;
  color: #1f2937;
  animation: dfToastIn .18s ease-out;
}

.df-toast.is-hiding {
  animation: dfToastOut .18s ease-in forwards;
}

.df-toast-icon {
  width: 28px;
  height: 28px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #64748b;
  color: #ffffff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}

.df-toast-body {
  display: block;
  min-width: 0;
  padding-top: 1px;
  word-break: break-word;
}

.df-toast-title {
  color: #111827;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  margin-right: 4px;
}

.df-toast-message {
  color: #374151;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
}

.df-toast-close {
  appearance: none;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: .78;
  padding: 0;
}

.df-toast-close:hover {
  background: #f3f4f6;
  color: #111827;
  opacity: 1;
}

.df-toast-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: #64748b;
  animation: dfToastProgress 3600ms linear forwards;
}

.df-toast-success {
  border-left-color: #16a34a;
}

.df-toast-success .df-toast-icon,
.df-toast-success .df-toast-progress {
  background: #16a34a;
}

.df-toast-error {
  border-left-color: #dc2626;
}

.df-toast-error .df-toast-icon,
.df-toast-error .df-toast-progress {
  background: #dc2626;
}

.df-toast-error .df-toast-progress {
  animation-duration: 6500ms;
}

.df-toast-warn {
  border-left-color: #d97706;
}

.df-toast-warn .df-toast-icon,
.df-toast-warn .df-toast-progress {
  background: #d97706;
}

.df-toast-info {
  border-left-color: #2563eb;
}

.df-toast-info .df-toast-icon,
.df-toast-info .df-toast-progress {
  background: #2563eb;
}

/* Existing inline .alert nodes are converted to floating toast by assets/js/app.js. */
.alert:not([data-keep-inline]) {
  display: none !important;
}

@keyframes dfToastIn {
  from { opacity: 0; transform: translateX(14px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes dfToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(14px); }
}

@keyframes dfToastProgress {
  from { width: 100%; }
  to { width: 0%; }
}

@media (max-width: 768px) {
  .df-toast-container {
    top: 64px;
    right: 10px;
    left: 10px;
    width: auto;
  }
  .auth-page .df-toast-container {
    top: 14px;
  }
}

/* Registration form UI standardization */
.auth-card .auth-field,
.auth-card label.auth-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
  font-weight: 800;
  color: #101a3d;
}

.auth-card .field-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  line-height: 1.2;
  font-weight: 800;
  color: #101a3d;
}

.auth-card .field-label .required {
  display: inline;
  margin-left: 2px;
  color: #ef4444;
  font-weight: 800;
}

.auth-card select,
.auth-card .auth-select {
  width: 100%;
  border: 1px solid #ccd6e4;
  border-radius: 11px;
  padding: 15px 42px 15px 16px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--text);
  background-color: #fff;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, #64748b 50%), linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

.auth-card select:focus,
.auth-card .auth-select:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
  outline: 0;
}


/* Registration password row and clear-entry refinements */
.auth-card .auth-password-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 22px;
}

.auth-card .auth-password-row .auth-field {
  margin-top: 0;
}

@media (max-width: 640px) {
  .auth-card .auth-password-row {
    grid-template-columns: 1fr;
  }
}


/* Registration email/password input refinements */
.auth-card input[type="email"] {
  text-transform: none;
}

.auth-card input[type="email"]::placeholder {
  text-transform: none;
}

.auth-card .password-input-wrap {
  position: relative;
  width: 100%;
}

.auth-card .password-input-wrap input {
  width: 100%;
  padding-right: 74px;
}

.auth-card .password-toggle-btn {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  min-width: 50px;
  height: 30px;
  border: 1px solid #ccd6e4;
  border-radius: 8px;
  background: #f8fafc;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
}

.auth-card .password-toggle-btn:hover {
  background: #eef2f7;
}

.auth-card .password-toggle-btn:focus {
  outline: 0;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(249,115,22,.15);
}


/* Mobile sidebar behavior: hidden by default, icon-only when opened */
.mobile-sidebar-toggle {
  display: none;
}

@media (max-width: 760px) {
  .mobile-sidebar-toggle {
    width: 38px !important;
    height: 38px !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 10px !important;
    background: #ffffff !important;
    color: #172033 !important;
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 10px 0 12px !important;
    padding: 0 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, .08) !important;
    flex: 0 0 auto !important;
    order: 0 !important;
  }

  .mobile-sidebar-toggle-line {
    width: 18px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: currentColor !important;
    display: block !important;
  }

  .topbar {
    position: sticky !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: nowrap !important;
    height: var(--df-header-height) !important;
    min-height: var(--df-header-height) !important;
    padding: 6px 10px !important;
  }

  .topbar-brand-zone {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    height: auto !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    padding: 0 !important;
    flex: 1 1 auto !important;
    overflow: hidden !important;
  }

  .df-brand-image {
    max-width: 170px !important;
    height: auto !important;
  }

  .header-spacer {
    display: none !important;
  }

  .topbar .user-menu {
    margin: 0 4px 0 8px !important;
    flex: 0 0 auto !important;
  }

  .topbar .user-meta {
    display: none !important;
  }

  .app-main,
  .main-content,
  .page-wrapper,
  .content-wrapper,
  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .page-wrapper,
  body.sidebar-collapsed .content-wrapper,
  body.df-mobile-sidebar-open .app-main,
  body.df-mobile-sidebar-open .main-content,
  body.df-mobile-sidebar-open .page-wrapper,
  body.df-mobile-sidebar-open .content-wrapper {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  .sidebar,
  .app-sidebar,
  .side-menu {
    position: fixed !important;
    top: var(--df-header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--df-sidebar-collapsed-width) !important;
    min-width: var(--df-sidebar-collapsed-width) !important;
    max-width: var(--df-sidebar-collapsed-width) !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 16px 6px 18px !important;
    z-index: 1095 !important;
    overflow-x: visible !important;
    overflow-y: auto !important;
    transform: translateX(-110%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: transform .2s ease, opacity .2s ease, visibility .2s ease !important;
  }

  body.df-mobile-sidebar-open .sidebar,
  body.df-mobile-sidebar-open .app-sidebar,
  body.df-mobile-sidebar-open .side-menu {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .sidebar-collapse-btn {
    display: none !important;
  }

  body.df-mobile-sidebar-open .side-label,
  body.df-mobile-sidebar-open .side-arrow,
  body.df-mobile-sidebar-open .chev,
  body.df-mobile-sidebar-open .sidebar-brand-text,
  body.df-mobile-sidebar-open .side-brand-text,
  body.df-mobile-sidebar-open .brand-text,
  body.df-mobile-sidebar-open .side-submenu,
  body.df-mobile-sidebar-open .side-group.expanded > .side-submenu,
  body.df-mobile-sidebar-open [data-side-group].expanded > .side-submenu {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.df-mobile-sidebar-open .side-link,
  body.df-mobile-sidebar-open .side-group-btn {
    min-height: 46px !important;
    justify-content: center !important;
    padding: 10px 6px !important;
    gap: 0 !important;
  }

  body.df-mobile-sidebar-open .side-group-main {
    justify-content: center !important;
    gap: 0 !important;
  }

  body.df-mobile-sidebar-open .side-icon {
    width: 24px !important;
    min-width: 24px !important;
    font-size: 18px !important;
  }

  body.df-mobile-sidebar-open .side-nav {
    gap: 8px !important;
  }

  body.df-mobile-sidebar-open .side-group.is-hovering > .side-submenu {
    display: none !important;
  }

  body.df-mobile-sidebar-open::before {
    content: "";
    position: fixed;
    top: var(--df-header-height);
    left: var(--df-sidebar-collapsed-width);
    right: 0;
    bottom: 0;
    background: rgba(15, 23, 42, .18);
    z-index: 1090;
  }
}

/* Mobile header and icon-sidebar submenu refinement */
@media (max-width: 760px) {
  body {
    padding-top: var(--df-header-height) !important;
  }

  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--df-header-height) !important;
    min-height: var(--df-header-height) !important;
    padding: 7px 10px !important;
    z-index: 1200 !important;
    background: #ffffff !important;
    border-bottom: 1px solid #e6edf5 !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .08) !important;
  }

  .mobile-sidebar-toggle {
    margin: 0 10px 0 0 !important;
    order: 0 !important;
  }

  .topbar-brand-zone,
  .topbar .df-brand,
  .topbar .df-brand-image-link,
  .topbar .df-brand-image {
    display: none !important;
  }

  .header-spacer {
    display: block !important;
    flex: 1 1 auto !important;
  }

  .topbar .user-menu {
    margin-left: auto !important;
    margin-right: 0 !important;
    max-width: calc(100vw - 64px) !important;
  }

  .topbar .user-menu-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
    padding: 6px 6px 6px 10px !important;
  }

  .topbar .user-meta {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    min-width: 0 !important;
    max-width: calc(100vw - 120px) !important;
    line-height: 1.15 !important;
  }

  .topbar .user-meta strong,
  .topbar .user-meta span {
    display: block !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .topbar .user-meta strong {
    font-size: 12px !important;
  }

  .topbar .user-meta span {
    font-size: 10px !important;
  }

  .app-main,
  .main-content,
  .page-wrapper,
  .content-wrapper,
  body.sidebar-collapsed .app-main,
  body.sidebar-collapsed .main-content,
  body.sidebar-collapsed .page-wrapper,
  body.sidebar-collapsed .content-wrapper,
  body.df-mobile-sidebar-open .app-main,
  body.df-mobile-sidebar-open .main-content,
  body.df-mobile-sidebar-open .page-wrapper,
  body.df-mobile-sidebar-open .content-wrapper {
    margin-left: 0 !important;
    padding-top: 0 !important;
  }

  .sidebar,
  .app-sidebar,
  .side-menu {
    top: var(--df-header-height) !important;
    z-index: 1160 !important;
    overflow: visible !important;
  }

  body.df-mobile-sidebar-open::before {
    top: var(--df-header-height) !important;
    z-index: 1150 !important;
  }

  body.df-mobile-sidebar-open .side-group {
    position: relative !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    min-width: 205px !important;
    width: 205px !important;
    max-height: calc(100vh - var(--df-header-height) - 28px) !important;
    overflow-y: auto !important;
    position: absolute !important;
    left: calc(var(--df-sidebar-collapsed-width) - 2px) !important;
    top: 0 !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18) !important;
    z-index: 1180 !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-label {
    display: inline-block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    font-size: 13px !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-dot {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    font-size: 8px !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-group-btn {
    background: #eef4ff !important;
    color: #1d4ed8 !important;
  }
}


/* Mobile submenu final fix v47 */
@media (max-width: 760px) {
  /* Hide orange desktop expand/collapse button on mobile only. */
  #sidebarCollapseBtn,
  .sidebar-collapse-btn {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* Mobile header menu button must stay at the far left of the header. */
  .topbar {
    justify-content: flex-start !important;
  }

  #mobileSidebarToggle,
  .mobile-sidebar-toggle {
    order: -100 !important;
    margin-left: 0 !important;
    margin-right: 10px !important;
    flex: 0 0 38px !important;
  }

  .header-spacer {
    flex: 1 1 auto !important;
  }

  /* Submenu flyout must open on the first tap and text must be readable. */
  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu,
  body.df-mobile-sidebar-open .side-group.expanded.mobile-submenu-open > .side-submenu,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    position: absolute !important;
    left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
    top: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
    padding: 8px !important;
    background: #f8fafc !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 14px !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
    z-index: 1300 !important;
    box-sizing: border-box !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-sub-link {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    gap: 8px !important;
    border-radius: 10px !important;
    background: transparent !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link:hover,
  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link.active {
    background: #e8f0ff !important;
    color: #111827 !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-label,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-label {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: auto !important;
    overflow: visible !important;
    white-space: nowrap !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-dot,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-sub-dot {
    display: inline-flex !important;
    visibility: visible !important;
    color: #334155 !important;
    font-size: 7px !important;
    line-height: 1 !important;
    flex: 0 0 auto !important;
  }
}

/* Mobile menu button + submenu-only flyout fix v48 */
@media (max-width: 760px) {
  .topbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: var(--df-header-height) !important;
    min-height: var(--df-header-height) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
    z-index: 1200 !important;
    background: #ffffff !important;
  }

  .topbar-brand-zone,
  .topbar .df-brand,
  .topbar .df-brand-image-link,
  .topbar .df-brand-image {
    display: none !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    overflow: hidden !important;
  }

  #mobileSidebarToggle,
  .mobile-sidebar-toggle {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    order: -999 !important;
    z-index: 1210 !important;
  }

  .header-spacer {
    display: block !important;
    flex: 1 1 auto !important;
    min-width: 48px !important;
  }

  .topbar .user-menu {
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    margin: 0 !important;
    max-width: calc(100vw - 68px) !important;
    z-index: 1205 !important;
  }

  .topbar .user-menu-btn {
    max-width: calc(100vw - 68px) !important;
  }

  /* Hide desktop collapsed main-menu title/tooltip on mobile. Mobile must show submenu labels only. */
  body.df-mobile-sidebar-open .side-group::after,
  body.df-mobile-sidebar-open .side-group::before,
  body.df-mobile-sidebar-open .side-link[data-collapsed-title]::after {
    content: none !important;
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  body.df-mobile-sidebar-open .side-group-btn .side-label,
  body.df-mobile-sidebar-open .side-group-btn .side-arrow,
  body.df-mobile-sidebar-open .side-group-btn .chev {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: absolute !important;
    left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
    top: 0 !important;
    width: 210px !important;
    min-width: 210px !important;
    max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
    margin: 0 !important;
    padding: 8px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
    z-index: 1300 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-sub-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    min-height: 38px !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #111827 !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link:hover,
  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link.active {
    background: #eef4ff !important;
    color: #111827 !important;
  }

  /* Submenu only: remove dot/bullet and show the submenu label clearly. */
  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-dot,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-sub-dot,
  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-bullet,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-sub-bullet {
    display: none !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-label,
  body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }
}

/* Mobile header/logo/profile hard fix v49 */
@media (max-width: 760px) {
  .topbar {
    overflow: visible !important;
  }

  /* Mobile must not show any logo/brand in the header. */
  .topbar-brand-zone,
  .topbar-brand-zone *,
  .topbar .df-brand,
  .topbar .df-brand *,
  .topbar .df-brand-image-link,
  .topbar .df-brand-image,
  .topbar .df-brand-text,
  .topbar .brand-logo,
  .topbar .brand-logo *,
  .topbar img.df-brand-image,
  .topbar a[aria-label="Domestic Freight"] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  /* Menu button fixed to the left side of the mobile header. */
  #mobileSidebarToggle,
  .topbar #mobileSidebarToggle,
  .mobile-sidebar-toggle,
  .topbar .mobile-sidebar-toggle {
    position: fixed !important;
    left: 10px !important;
    top: calc(var(--df-header-height) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1305 !important;
  }

  /* User/profile area fixed to the right side of the mobile header. */
  .topbar .user-menu {
    position: fixed !important;
    right: 10px !important;
    top: calc(var(--df-header-height) / 2) !important;
    transform: translateY(-50%) !important;
    z-index: 1304 !important;
    overflow: visible !important;
  }

  .topbar .user-menu-btn,
  .topbar .user-menu-btn.user-menu-avatar-trigger {
    pointer-events: auto !important;
    cursor: pointer !important;
    touch-action: manipulation !important;
  }

  .topbar .user-avatar-icon,
  .topbar .user-avatar-icon svg {
    pointer-events: none !important;
  }

  /* Dropdown must appear below header and above all content/sidebar overlays. */
  .topbar .user-menu-list {
    position: fixed !important;
    top: calc(var(--df-header-height) + 8px) !important;
    right: 10px !important;
    left: auto !important;
    width: 220px !important;
    max-width: calc(100vw - 20px) !important;
    transform: none !important;
    z-index: 50000 !important;
    background: #ffffff !important;
    border: 1px solid #dbe5f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 40px rgba(15, 23, 42, .22) !important;
    overflow: hidden !important;
  }

  .topbar .user-menu-list:not([hidden]) {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* Mobile header orange background + icon size normalization v50 */
@media (max-width: 760px) {
  /* Slightly darker soft orange header background for mobile only. */
  .topbar {
    background: #ffe8d1 !important;
    border-bottom: 1px solid #fdba74 !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .14) !important;
  }

  /* Keep header controls readable on the soft orange background. */
  #mobileSidebarToggle,
  .topbar #mobileSidebarToggle,
  .mobile-sidebar-toggle,
  .topbar .mobile-sidebar-toggle,
  .topbar .user-menu-btn,
  .topbar .user-menu-btn.user-menu-avatar-trigger {
    background: #ffffff !important;
    border-color: #fdba74 !important;
  }

  /* Normalize sidebar icon box size on mobile so all menu icons align visually. */
  body.df-mobile-sidebar-open .side-link > .side-icon,
  body.df-mobile-sidebar-open .side-group-btn .side-icon {
    width: 26px !important;
    min-width: 26px !important;
    height: 26px !important;
    min-height: 26px !important;
    font-size: 20px !important;
    line-height: 26px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    font-family: Arial, Helvetica, sans-serif !important;
  }

  /* Dashboard and Master glyphs render smaller than the others; compensate only on mobile. */
  body.df-mobile-sidebar-open .side-link[href="index.php"] > .side-icon,
  body.df-mobile-sidebar-open .side-group[data-collapsed-title="Master"] .side-group-btn .side-icon {
    font-size: 23px !important;
    transform: scale(1.12) !important;
    transform-origin: center center !important;
  }

  /* Prevent visually large group icons from growing beyond the normalized icon box. */
  body.df-mobile-sidebar-open .side-group[data-collapsed-title="Rate & Information"] .side-group-btn .side-icon,
  body.df-mobile-sidebar-open .side-group[data-collapsed-title="Route Management"] .side-group-btn .side-icon {
    font-size: 20px !important;
    transform: none !important;
  }
}

/* Mobile header orange + mobile sidebar logout fix v51 */
.mobile-sidebar-logout {
  display: none;
}

@media (max-width: 760px) {
  /* Force the actual top application header to use the requested soft orange. */
  html body header.topbar,
  html body .topbar,
  html body .app-header,
  html body .main-header {
    background-color: #ffd7ad !important;
    background-image: none !important;
    background: #ffd7ad !important;
    border-bottom-color: #fb923c !important;
    box-shadow: 0 6px 18px rgba(249, 115, 22, .18) !important;
  }

  /* Keep menu/profile buttons readable on the orange header. */
  html body header.topbar #mobileSidebarToggle,
  html body header.topbar .mobile-sidebar-toggle,
  html body .topbar #mobileSidebarToggle,
  html body .topbar .mobile-sidebar-toggle,
  html body .topbar .user-menu-btn,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger {
    background-color: #ffffff !important;
    border-color: #fb923c !important;
  }

  /* Sidebar must behave as a vertical container so logout can stay at the bottom. */
  body.df-mobile-sidebar-open .sidebar,
  body.df-mobile-sidebar-open .app-sidebar,
  body.df-mobile-sidebar-open .side-menu {
    display: flex !important;
    flex-direction: column !important;
  }

  body.df-mobile-sidebar-open .sidebar .side-nav,
  body.df-mobile-sidebar-open .app-sidebar .side-nav,
  body.df-mobile-sidebar-open .side-menu .side-nav {
    flex: 0 0 auto !important;
  }

  /* Mobile-only logout button: bottom-left of the icon sidebar. */
  body.df-mobile-sidebar-open .mobile-sidebar-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: auto auto 0 auto !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(239, 68, 68, .16) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout:hover,
  body.df-mobile-sidebar-open .mobile-sidebar-logout:focus {
    background: #ef4444 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout .side-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 24px !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout .side-label {
    display: none !important;
  }
}

/* Mobile sidebar footer logout fix v52 */
.mobile-sidebar-footer {
  display: none;
}

@media (max-width: 760px) {
  /* Make the mobile sidebar use the full viewport height so the footer is really at the bottom. */
  body.df-mobile-sidebar-open .sidebar,
  body.df-mobile-sidebar-open aside.sidebar#appSidebar {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  /* The menu area takes the remaining space, then the logout footer sits at the real bottom. */
  body.df-mobile-sidebar-open .sidebar .side-nav,
  body.df-mobile-sidebar-open aside.sidebar#appSidebar .side-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    padding-bottom: 12px !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    justify-content: center !important;
    align-items: center !important;
    margin-top: auto !important;
    padding-top: 10px !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(239, 68, 68, .16) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout:hover,
  body.df-mobile-sidebar-open .mobile-sidebar-logout:focus {
    background: #ef4444 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout .mobile-exit-icon,
  body.df-mobile-sidebar-open .mobile-sidebar-logout .mobile-exit-icon svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    display: block !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout .side-label {
    display: none !important;
  }
}

/* Mobile sidebar exit footer center fix v53 */
@media (max-width: 760px) {
  /* The mobile sidebar is a fixed box; keep the footer independent from the menu icon list. */
  body.df-mobile-sidebar-open aside.sidebar#appSidebar,
  body.df-mobile-sidebar-open .sidebar {
    position: fixed !important;
    top: var(--df-header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--df-sidebar-collapsed-width) !important;
    min-width: var(--df-sidebar-collapsed-width) !important;
    max-width: var(--df-sidebar-collapsed-width) !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    padding-bottom: 76px !important;
  }

  /* Give the menu list space so the last menu icon never overlaps the footer exit button. */
  body.df-mobile-sidebar-open aside.sidebar#appSidebar .side-nav,
  body.df-mobile-sidebar-open .sidebar .side-nav {
    flex: 0 1 auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--df-header-height) - 96px) !important;
    overflow-y: auto !important;
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }

  /* Put the exit button in the real sidebar footer, centered inside the sidebar box. */
  body.df-mobile-sidebar-open aside.sidebar#appSidebar .mobile-sidebar-footer,
  body.df-mobile-sidebar-open .sidebar .mobile-sidebar-footer {
    display: flex !important;
    position: absolute !important;
    left: 0 !important;
    right: auto !important;
    bottom: max(14px, env(safe-area-inset-bottom)) !important;
    width: var(--df-sidebar-collapsed-width) !important;
    height: 52px !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1195 !important;
    pointer-events: auto !important;
  }

  body.df-mobile-sidebar-open aside.sidebar#appSidebar .mobile-sidebar-logout,
  body.df-mobile-sidebar-open .sidebar .mobile-sidebar-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border-radius: 14px !important;
  }
}

/* Registration/profile refinements - 20260507 limits patch */
.auth-card .field-label,
.standard-form label .required {
  white-space: nowrap;
}

.auth-card .password-input-wrap input {
  padding-right: 46px !important;
}

.auth-card .password-toggle-btn {
  min-width: 28px !important;
  width: 30px !important;
  height: 30px !important;
  border: 0 !important;
  background: transparent !important;
  color: #64748b !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

.auth-card .password-toggle-btn:hover {
  color: #0f172a !important;
  background: #f1f5f9 !important;
}

.auth-card .password-toggle-btn svg {
  display: block;
}

.auth-card .password-toggle-btn .icon-eye,
.auth-card .password-toggle-btn .icon-eye-off {
  align-items: center;
  justify-content: center;
}


/* Required mark inline fix - keep (*) exactly beside label text */
.auth-card .field-label.field-label-inline,
.auth-card label.auth-field > .field-label.field-label-inline,
.auth-page .auth-card .field-label.field-label-inline {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 4px !important;
  width: auto !important;
  max-width: max-content !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.auth-card .field-label-inline .field-label-text,
.auth-card .field-label-inline .required-inline {
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  line-height: 1.2 !important;
}

.auth-card .field-label-inline .required-inline {
  color: #ef4444 !important;
  font-weight: 800 !important;
  margin-left: 2px !important;
}


/* Mobile sidebar final behavior v54 */
.mobile-sidebar-footer {
  display: none;
}

@media (max-width: 760px) {
  #mobileSidebarToggle,
  .mobile-sidebar-toggle {
    display: inline-flex !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    z-index: 60000 !important;
  }

  .topbar {
    z-index: 59000 !important;
  }

  .sidebar#appSidebar,
  aside.sidebar#appSidebar {
    position: fixed !important;
    top: var(--df-header-height) !important;
    left: 0 !important;
    bottom: 0 !important;
    width: var(--df-sidebar-collapsed-width) !important;
    min-width: var(--df-sidebar-collapsed-width) !important;
    max-width: var(--df-sidebar-collapsed-width) !important;
    height: calc(100dvh - var(--df-header-height)) !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--df-header-height)) !important;
    transform: translateX(-110%) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    z-index: 58000 !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    transition: transform .18s ease, opacity .18s ease, visibility .18s ease !important;
    padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
    box-sizing: border-box !important;
  }

  body.df-mobile-sidebar-open .sidebar#appSidebar,
  body.df-mobile-sidebar-open aside.sidebar#appSidebar {
    transform: translateX(0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  body.df-mobile-sidebar-open::before {
    content: "" !important;
    position: fixed !important;
    top: var(--df-header-height) !important;
    left: var(--df-sidebar-collapsed-width) !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, .18) !important;
    z-index: 57000 !important;
    pointer-events: auto !important;
  }

  body.df-mobile-sidebar-open .sidebar#appSidebar .side-nav,
  body.df-mobile-sidebar-open aside.sidebar#appSidebar .side-nav {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: visible !important;
    padding-bottom: 12px !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-footer {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    margin-top: auto !important;
    padding: 8px 0 0 !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    min-height: 46px !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    background: rgba(239, 68, 68, .18) !important;
    color: #ffffff !important;
    text-decoration: none !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16) !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout:hover,
  body.df-mobile-sidebar-open .mobile-sidebar-logout:focus {
    background: #ef4444 !important;
    color: #ffffff !important;
    text-decoration: none !important;
    outline: none !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout .side-icon {
    width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    min-height: 24px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
    line-height: 24px !important;
  }

  body.df-mobile-sidebar-open .mobile-sidebar-logout .side-label {
    display: none !important;
  }

  body.df-mobile-sidebar-open .side-group {
    position: relative !important;
  }

  body.df-mobile-sidebar-open .side-link,
  body.df-mobile-sidebar-open .side-group-btn {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  body.df-mobile-sidebar-open .side-group:not(.mobile-submenu-open) > .side-submenu {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    position: absolute !important;
    left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
    top: 0 !important;
    width: 220px !important;
    min-width: 220px !important;
    max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
    padding: 8px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 12px !important;
    box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
    z-index: 61000 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    pointer-events: auto !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-height: 38px !important;
    width: 100% !important;
    padding: 9px 10px !important;
    border-radius: 9px !important;
    background: transparent !important;
    color: #111827 !important;
    pointer-events: auto !important;
    text-decoration: none !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link:hover,
  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link.active {
    background: #eef4ff !important;
    color: #111827 !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-label {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    color: #111827 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
  }

  body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-dot {
    display: none !important;
  }
}



/* This part also works on desktop collapsed sidebar, not only mobile. */
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--df-header-height) - 24px) !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
  z-index: 61000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-sub-link,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-link,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #111827 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link.active,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-link:hover,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-link.active {
  background: #eef4ff !important;
  color: #111827 !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-label,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-label,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-label,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-dot,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-sub-dot,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-dot,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-dot {
  display: none !important;
}



/* Expanded sidebar: inline submenu should work normally. */
body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) .side-group.expanded > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  position: static !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Collapsed sidebar: submenu is hidden until user clicks icon. */
body.sidebar-collapsed .side-group:not(.icon-submenu-open):not(.mobile-submenu-open) > .side-submenu,
body.df-mobile-sidebar-open .side-group:not(.icon-submenu-open):not(.mobile-submenu-open) > .side-submenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Collapsed/mobile sidebar flyout. */
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--df-header-height) - 24px) !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
  z-index: 61000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

body.sidebar-collapsed .side-group,
body.df-mobile-sidebar-open .side-group {
  position: relative !important;
  overflow: visible !important;
}

body.sidebar-collapsed .sidebar#appSidebar,
body.sidebar-collapsed aside.sidebar#appSidebar,
body.df-mobile-sidebar-open .sidebar#appSidebar,
body.df-mobile-sidebar-open aside.sidebar#appSidebar,
body.sidebar-collapsed .side-nav,
body.df-mobile-sidebar-open .side-nav {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.sidebar-collapsed .sidebar#appSidebar::-webkit-scrollbar,
body.df-mobile-sidebar-open .sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed .side-nav::-webkit-scrollbar,
body.df-mobile-sidebar-open .side-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-sub-link,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-link,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #111827 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link.active,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-link:hover,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-link.active {
  background: #eef4ff !important;
  color: #111827 !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-label,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-label,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-label,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-dot,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-sub-dot,
body.df-mobile-sidebar-open .side-group.icon-submenu-open > .side-submenu .side-sub-dot,
body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-dot {
  display: none !important;
}



/* Expanded sidebar: normal inline submenu. */
body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) .side-group.expanded > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

/* Collapsed sidebar: never show title/tooltip panel. */
body.sidebar-collapsed .side-group::after,
body.sidebar-collapsed .side-link[data-collapsed-title]::after,
body.sidebar-collapsed .side-group[data-collapsed-title]::after,
body.sidebar-collapsed .side-link::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep only a transparent bridge so moving mouse from icon to submenu does not close the flyout. */
body.sidebar-collapsed .side-group::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  width: 18px !important;
  height: 100% !important;
  background: transparent !important;
  z-index: 60990 !important;
  pointer-events: auto !important;
}

body.sidebar-collapsed .sidebar#appSidebar,
body.sidebar-collapsed aside.sidebar#appSidebar,
body.sidebar-collapsed .side-nav {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.sidebar-collapsed .sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed aside.sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed .side-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.sidebar-collapsed .side-group {
  position: relative !important;
  overflow: visible !important;
}

/* Collapsed sidebar: submenu hidden by default. */
body.sidebar-collapsed .side-group:not(:hover):not(.is-hovering):not(.icon-submenu-open):not(.mobile-submenu-open) > .side-submenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

/* Collapsed sidebar: hover icon/menu group shows submenu directly. No title row. */
body.sidebar-collapsed .side-group:hover > .side-submenu,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu,
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--df-header-height) - 24px) !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
  z-index: 61000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
  gap: 2px !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-link,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #111827 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active {
  background: #eef4ff !important;
  color: #111827 !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-label,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-label,
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-label,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-dot,
body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-dot,
body.sidebar-collapsed .side-group.icon-submenu-open > .side-submenu .side-sub-dot,
body.sidebar-collapsed .side-group.mobile-submenu-open > .side-submenu .side-sub-dot {
  display: none !important;
}

/* Mobile open keeps the same no-title behavior. */
body.df-mobile-sidebar-open .side-group::after,
body.df-mobile-sidebar-open .side-link[data-collapsed-title]::after {
  content: none !important;
  display: none !important;
}



/* No title/tooltip at all in collapsed sidebar. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group::after,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group::before,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-link[data-collapsed-title]::after,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group[data-collapsed-title]::after,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-collapsed-title]::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep collapsed sidebar able to show flyout outside its width. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .sidebar#appSidebar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) aside.sidebar#appSidebar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-nav {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) aside.sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group {
  position: relative !important;
  overflow: visible !important;
}

/* Hidden by default when collapsed. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:not(:hover):not(.collapsed-hover-open):not(.is-hovering) > .side-submenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Hover icon/group directly displays submenu only, no title row. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--df-header-height) - 24px) !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
  z-index: 61000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
  gap: 2px !important;
}

/* Submenu rows. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-link,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-link,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #111827 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-link.active,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-link.active,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-link.active {
  background: #eef4ff !important;
  color: #111827 !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-label,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-label,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-dot,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-dot,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-dot {
  display: none !important;
}

/* Expanded sidebar remains normal inline submenu. */
body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) .side-group.expanded > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}


/* Sidebar collapsed hover submenu CSS-only update ver 01 */

/* Expanded sidebar: inline submenu works normally. */
body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) .side-group.expanded > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 0 !important;
  margin-top: 2px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
  pointer-events: auto !important;
}

/* Expanded sidebar: closed groups stay closed. */
body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) .side-group:not(.expanded) > .side-submenu {
  display: none !important;
}

/* Collapsed sidebar: no title or tooltip, only submenu flyout. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-link[data-collapsed-title]::after,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group[data-collapsed-title]::after,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group::after,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-collapsed-title]::after {
  content: none !important;
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Collapsed sidebar: transparent bridge to keep hover while moving to submenu. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 100% !important;
  top: 0 !important;
  width: 18px !important;
  height: 100% !important;
  background: transparent !important;
  z-index: 60990 !important;
  pointer-events: auto !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .sidebar#appSidebar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) aside.sidebar#appSidebar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-nav {
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) aside.sidebar#appSidebar::-webkit-scrollbar,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-nav::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group {
  position: relative !important;
  overflow: visible !important;
}

/* Collapsed sidebar: hide submenu by default. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:not(:hover) > .side-submenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Collapsed sidebar: hover icon/menu group shows submenu directly. */
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--df-header-height) - 24px) !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
  z-index: 61000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
  gap: 2px !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #111827 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-link.active {
  background: #eef4ff !important;
  color: #111827 !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:hover > .side-submenu .side-sub-dot {
  display: none !important;
}

/* Mobile sidebar: keep title tooltip disabled too. */
body.df-mobile-sidebar-open .side-group::after,
body.df-mobile-sidebar-open .side-link[data-collapsed-title]::after,
body.df-mobile-sidebar-open [data-collapsed-title]::after {
  content: none !important;
  display: none !important;
}


/* Sidebar submenu state stability fix v20260508.1
   Desktop-only overrides. Mobile selectors are excluded with :not(.df-mobile-sidebar-open)
   and wrapped outside max-width mobile-specific rules to avoid changing tap behavior.
*/
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].is-hovering > .side-submenu,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].collapsed-hover-open > .side-submenu {
  display: flex !important;
  flex-direction: column !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: calc(100dvh - var(--df-header-height) - 24px) !important;
  position: absolute !important;
  left: calc(var(--df-sidebar-collapsed-width) + 4px) !important;
  top: 0 !important;
  width: 220px !important;
  min-width: 220px !important;
  max-width: calc(100vw - var(--df-sidebar-collapsed-width) - 16px) !important;
  padding: 8px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 12px !important;
  box-shadow: 0 18px 38px rgba(15, 23, 42, .22) !important;
  z-index: 61000 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  pointer-events: auto !important;
  gap: 2px !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group:not(:hover):not(.is-hovering):not(.collapsed-hover-open) > .side-submenu,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group]:not(:hover):not(.is-hovering):not(.collapsed-hover-open) > .side-submenu {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-link,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-link,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].is-hovering > .side-submenu .side-sub-link,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].collapsed-hover-open > .side-submenu .side-sub-link {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 38px !important;
  width: 100% !important;
  padding: 9px 10px !important;
  border-radius: 9px !important;
  background: transparent !important;
  color: #111827 !important;
  pointer-events: auto !important;
  text-decoration: none !important;
  box-sizing: border-box !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-link:hover,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-link.active,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-link.active {
  background: #eef4ff !important;
  color: #111827 !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-label,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-label,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].is-hovering > .side-submenu .side-label,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].collapsed-hover-open > .side-submenu .side-label {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: #111827 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
}

body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.is-hovering > .side-submenu .side-sub-dot,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) .side-group.collapsed-hover-open > .side-submenu .side-sub-dot,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].is-hovering > .side-submenu .side-sub-dot,
body.sidebar-collapsed:not(.df-mobile-sidebar-open) [data-side-group].collapsed-hover-open > .side-submenu .side-sub-dot {
  display: none !important;
}

body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) .side-group.expanded > .side-submenu,
body:not(.sidebar-collapsed):not(.df-mobile-sidebar-open) [data-side-group].expanded > .side-submenu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  pointer-events: auto !important;
}

/* Domestic Freight Standard Confirmation Dialog */
.df-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, .42);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease;
}
.df-confirm-backdrop.is-show {
  opacity: 1;
  pointer-events: auto;
}
.df-confirm-dialog {
  position: relative;
  width: min(430px, 100%);
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
  border-radius: 18px;
  padding: 26px 26px 22px;
  transform: translateY(10px) scale(.98);
  transition: transform .16s ease;
}
.df-confirm-backdrop.is-show .df-confirm-dialog {
  transform: translateY(0) scale(1);
}
.df-confirm-close {
  position: absolute;
  top: 12px;
  right: 14px;
  border: 0;
  background: transparent;
  color: #64748b;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.df-confirm-icon {
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: #fff7ed;
  color: var(--orange-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 24px;
  margin-bottom: 14px;
}
.df-confirm-copy h2 {
  margin: 0 28px 8px 0;
  font-size: 20px;
  color: var(--text);
}
.df-confirm-copy p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.6;
}
.df-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}
.df-confirm-actions .btn {
  font-size: 12px;
  min-width: 86px;
}
@media (max-width: 520px) {
  .df-confirm-actions { flex-direction: column-reverse; }
  .df-confirm-actions .btn { width: 100%; }
}

/* ===== Rate pages v5: hide ONLY the outer/browser scrollbar UI =====
   Do not set overflow:hidden here. Inner data-list scrollbars must remain visible. */
body[data-current-page="rate_sea_freight"],
body[data-current-page="rate_road_freight"],
body[data-current-page="rate_intersuller"] {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

body[data-current-page="rate_sea_freight"]::-webkit-scrollbar,
body[data-current-page="rate_road_freight"]::-webkit-scrollbar,
body[data-current-page="rate_intersuller"]::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
  background: transparent !important;
}

@supports selector(html:has(body)) {
  html:has(body[data-current-page="rate_sea_freight"]),
  html:has(body[data-current-page="rate_road_freight"]),
  html:has(body[data-current-page="rate_intersuller"]) {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
  }

  html:has(body[data-current-page="rate_sea_freight"])::-webkit-scrollbar,
  html:has(body[data-current-page="rate_road_freight"])::-webkit-scrollbar,
  html:has(body[data-current-page="rate_intersuller"])::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    background: transparent !important;
  }
}

/* Keep inner data-list scrollbars visible and usable. */
body[data-current-page="rate_road_freight"] .rates-modern-page[data-rates-page="road"] .table-wrap.has-rows,
body[data-current-page="rate_road_freight"] .rates-modern-page[data-rates-page="road"] .table-wrap {
  overflow: auto !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

body[data-current-page="rate_sea_freight"] .rates-modern-page[data-rates-page="sea"] .sea-table-body-scroll-y {
  overflow-y: auto !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}

body[data-current-page="rate_sea_freight"] .rates-modern-page[data-rates-page="sea"] .sea-table-h-scroll {
  overflow-x: auto !important;
  scrollbar-width: auto !important;
  -ms-overflow-style: auto !important;
}


/* ADI System Global Header Brand v84 */
:root {
  --adi-header-bg: #ffedd5;
  --adi-header-border: #fed7aa;
  --adi-header-text: #7c2d12;
  --adi-header-text-soft: #0f172a;
  --adi-brand-zone-width: 382px;
}

.topbar,
.topbar-header,
.app-topbar {
  background: var(--adi-header-bg) !important;
  border-bottom: 1px solid var(--adi-header-border) !important;
  box-shadow: 0 2px 12px rgba(124, 45, 18, .08) !important;
}

.topbar-brand-zone,
body.sidebar-collapsed .topbar-brand-zone {
  width: var(--adi-brand-zone-width) !important;
  min-width: var(--adi-brand-zone-width) !important;
  max-width: var(--adi-brand-zone-width) !important;
  flex: 0 0 var(--adi-brand-zone-width) !important;
  height: var(--df-header-height) !important;
  padding: 0 22px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  background: var(--adi-header-bg) !important;
  border-right: 1px solid var(--adi-header-border) !important;
  box-shadow: none !important;
  overflow: hidden !important;
}

.topbar .df-brand-text-link,
.df-brand-text-link,
body.sidebar-collapsed .topbar .df-brand-text-link,
body.sidebar-collapsed .df-brand-text-link {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: var(--df-header-height) !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  color: var(--adi-header-text) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

.topbar .df-brand-text-link:hover,
.df-brand-text-link:hover {
  color: var(--adi-header-text) !important;
  text-decoration: none !important;
}

.topbar .df-brand-title,
.df-brand-title,
body.sidebar-collapsed .df-brand-title {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--adi-header-text) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .2px !important;
  white-space: nowrap !important;
}

.topbar .df-brand-divider,
.df-brand-divider,
body.sidebar-collapsed .df-brand-divider {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #fb923c !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.topbar .df-brand-subtitle,
.df-brand-subtitle,
body.sidebar-collapsed .df-brand-subtitle {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--adi-header-text-soft) !important;
  font-size: 13px !important;
  line-height: 1 !important;
  font-weight: 800 !important;
  letter-spacing: .1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Hide legacy image logo in the global header only. */
.topbar .df-brand-image,
.topbar img.df-brand-image,
.topbar .df-brand-image-link img,
.topbar-brand-zone img.df-brand-image {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}

/* Mobile: keep the brand readable without covering the profile area. */
@media (max-width: 760px) {
  .topbar-brand-zone,
  body.sidebar-collapsed .topbar-brand-zone {
    width: 132px !important;
    min-width: 132px !important;
    max-width: 132px !important;
    flex: 0 0 132px !important;
    padding: 0 12px !important;
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: hidden !important;
    background: var(--adi-header-bg) !important;
  }

  .topbar .df-brand-text-link,
  .df-brand-text-link,
  body.sidebar-collapsed .topbar .df-brand-text-link,
  body.sidebar-collapsed .df-brand-text-link {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 100% !important;
    min-height: var(--df-header-height) !important;
    align-items: center !important;
    justify-content: flex-start !important;
    pointer-events: auto !important;
  }

  .topbar .df-brand-title,
  .df-brand-title,
  body.sidebar-collapsed .df-brand-title {
    display: inline !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 13px !important;
    line-height: 1 !important;
  }

  .topbar .df-brand-divider,
  .topbar .df-brand-subtitle,
  .df-brand-divider,
  .df-brand-subtitle,
  body.sidebar-collapsed .df-brand-divider,
  body.sidebar-collapsed .df-brand-subtitle {
    display: none !important;
  }
}


/* ADI System Global Header Brand v85: final desktop/mobile wording */
:root {
  --adi-brand-zone-width: 382px;
}

.topbar .df-brand-text-link,
.df-brand-text-link,
body.sidebar-collapsed .topbar .df-brand-text-link,
body.sidebar-collapsed .df-brand-text-link {
  gap: 0 !important;
}

.topbar .df-brand-title,
.df-brand-title,
body.sidebar-collapsed .df-brand-title {
  display: inline-block !important;
  color: var(--adi-header-text) !important;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .1px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.df-brand-parenthetical {
  color: var(--adi-header-text-soft) !important;
  font-weight: 800 !important;
}

.df-brand-title-mobile {
  display: none !important;
}

.df-brand-divider,
.df-brand-subtitle {
  display: none !important;
}

@media (max-width: 760px) {
  .topbar-brand-zone,
  body.sidebar-collapsed .topbar-brand-zone {
    width: 210px !important;
    min-width: 210px !important;
    max-width: 210px !important;
    flex: 0 0 210px !important;
    padding: 0 12px !important;
    background: var(--adi-header-bg) !important;
  }

  .df-brand-title-desktop {
    display: none !important;
  }

  .topbar .df-brand-title-mobile,
  .df-brand-title-mobile,
  body.sidebar-collapsed .df-brand-title-mobile {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    max-width: 186px !important;
  }
}

@media (max-width: 420px) {
  .topbar-brand-zone,
  body.sidebar-collapsed .topbar-brand-zone {
    width: 198px !important;
    min-width: 198px !important;
    max-width: 198px !important;
    flex-basis: 198px !important;
    padding: 0 10px !important;
  }

  .topbar .df-brand-title-mobile,
  .df-brand-title-mobile,
  body.sidebar-collapsed .df-brand-title-mobile {
    font-size: 11.5px !important;
    max-width: 178px !important;
  }
}


/* ADI System Global Header Brand v86: full orange header, no desktop clipping, no mobile brand text */
:root {
  --adi-header-bg: #ffedd5;
  --adi-header-border: #fed7aa;
  --adi-header-text: #7c2d12;
  --adi-header-text-soft: #0f172a;
}

html body header.topbar,
html body .topbar,
html body .topbar-header,
html body .app-topbar,
html body .app-header,
html body .main-header,
html body .navbar {
  background: var(--adi-header-bg) !important;
  background-color: var(--adi-header-bg) !important;
  border-bottom: 1px solid var(--adi-header-border) !important;
  box-shadow: 0 2px 12px rgba(124, 45, 18, .08) !important;
}

html body .topbar-brand-zone,
html body.sidebar-collapsed .topbar-brand-zone {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  padding: 0 28px !important;
  border-right: 0 !important;
  border-left: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  background-color: transparent !important;
  overflow: visible !important;
}

html body .topbar .df-brand-text-link,
html body .df-brand-text-link,
html body.sidebar-collapsed .topbar .df-brand-text-link,
html body.sidebar-collapsed .df-brand-text-link {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: var(--adi-header-text) !important;
}

html body .topbar .df-brand-title-desktop,
html body .df-brand-title-desktop,
html body.sidebar-collapsed .topbar .df-brand-title-desktop,
html body.sidebar-collapsed .df-brand-title-desktop {
  display: inline-block !important;
  visibility: visible !important;
  opacity: 1 !important;
  width: auto !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  color: var(--adi-header-text) !important;
  font-size: 16px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: .15px !important;
}

html body .topbar .df-brand-title-mobile,
html body .df-brand-title-mobile,
html body.sidebar-collapsed .topbar .df-brand-title-mobile,
html body.sidebar-collapsed .df-brand-title-mobile {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  width: 0 !important;
  max-width: 0 !important;
  overflow: hidden !important;
}

html body .topbar .df-brand-parenthetical,
html body .df-brand-parenthetical {
  color: var(--adi-header-text-soft) !important;
  font-weight: 800 !important;
}

html body .header-spacer {
  flex: 1 1 auto !important;
  min-width: 16px !important;
}

@media (max-width: 760px) {
  html body header.topbar,
  html body .topbar,
  html body .topbar-header,
  html body .app-topbar,
  html body .app-header,
  html body .main-header,
  html body .navbar {
    background: var(--adi-header-bg) !important;
    background-color: var(--adi-header-bg) !important;
    border-bottom: 1px solid var(--adi-header-border) !important;
  }

  html body .topbar-brand-zone,
  html body.sidebar-collapsed .topbar-brand-zone {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    min-width: 0 !important;
    max-width: 0 !important;
    flex: 0 0 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  html body .topbar .df-brand-text-link,
  html body .df-brand-text-link,
  html body .topbar .df-brand-title,
  html body .df-brand-title,
  html body .topbar .df-brand-title-desktop,
  html body .df-brand-title-desktop,
  html body .topbar .df-brand-title-mobile,
  html body .df-brand-title-mobile {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
}

/* ADI Global Header + Sidebar refinement v87
   Scope: global page layout only. Transport Eligible module is not changed. */
:root {
  --adi-header-brand-text: #7c2d12;
  --adi-sidebar-active-bg: linear-gradient(180deg, #ff7a1a 0%, #f15a18 100%);
}

/* Header brand text: final wording, no parenthetical text. */
html body .topbar .df-brand-title-desktop,
html body .df-brand-title-desktop,
html body.sidebar-collapsed .topbar .df-brand-title-desktop,
html body.sidebar-collapsed .df-brand-title-desktop {
  color: var(--adi-header-brand-text) !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

html body .df-brand-parenthetical {
  display: none !important;
}

/* Desktop sidebar layout follows the clean menu placement reference. */
@media (min-width: 761px) {
  html body .sidebar,
  html body .app-sidebar,
  html body .side-menu {
    top: var(--df-header-height) !important;
    padding: 0 0 22px !important;
    overflow-x: hidden !important;
  }

  html body .side-nav {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html body .side-group {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .side-link,
  html body .side-group-btn,
  html body .side-sub-link {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    border-radius: 0 !important;
    text-decoration: none !important;
  }

  html body .side-link,
  html body .side-group-btn {
    min-height: 54px !important;
    padding: 13px 18px !important;
    gap: 12px !important;
  }

  html body .side-link.active,
  html body .side-sub-link.active {
    background: var(--adi-sidebar-active-bg) !important;
    color: #fff !important;
    box-shadow: none !important;
  }

  html body .side-link:hover,
  html body .side-group-btn:hover,
  html body .side-group.expanded > .side-group-btn {
    background: rgba(0, 0, 0, .14) !important;
  }

  html body .side-icon,
  html body .side-sub-dot {
    width: 28px !important;
    min-width: 28px !important;
    max-width: 28px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 28px !important;
    margin: 0 !important;
  }

  html body .side-group-main {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
    min-width: 0 !important;
  }

  html body .side-submenu {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }

  html body .side-sub-link {
    min-height: 46px !important;
    padding: 11px 18px !important;
    gap: 12px !important;
    display: flex !important;
    align-items: center !important;
  }

  html body .side-sub-link .side-label {
    margin: 0 !important;
    padding: 0 !important;
  }

  html body .side-sub-dot {
    color: currentColor !important;
    font-size: 9px !important;
    line-height: 1 !important;
  }

  /* Filled arrowheads for expand/collapse. */
  html body .side-arrow {
    width: 20px !important;
    min-width: 20px !important;
    height: 20px !important;
    margin-left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: currentColor !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transform: none !important;
    transition: opacity .18s ease !important;
  }

  html body .side-arrow::before {
    content: '▶' !important;
  }

  html body .side-group.expanded > .side-group-btn .side-arrow::before,
  html body .side-group.mobile-submenu-open > .side-group-btn .side-arrow::before {
    content: '▼' !important;
  }

  html body .side-group:not(.expanded) .side-arrow,
  html body .side-group.expanded .side-arrow {
    transform: none !important;
  }

  body.sidebar-collapsed .side-link,
  body.sidebar-collapsed .side-group-btn {
    justify-content: center !important;
    padding: 13px 0 !important;
  }

  body.sidebar-collapsed .side-icon {
    margin: 0 auto !important;
  }
}

/* Mobile header stays clean: only hamburger/profile, no brand text. */
@media (max-width: 760px) {
  html body .topbar-brand-zone,
  html body .df-brand,
  html body .df-brand-title,
  html body .df-brand-title-desktop,
  html body .df-brand-title-mobile {
    display: none !important;
  }
}


/* ADI Global Sidebar refinement v88
   Scope: global layout only. Transport Eligible module remains baseline v82.
   Changes: remove submenu dots visually and keep submenu text position stable on active/click. */
html body .side-sub-dot {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

html body .side-sub-spacer {
  width: 28px !important;
  min-width: 28px !important;
  max-width: 28px !important;
  flex: 0 0 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  color: transparent !important;
  pointer-events: none !important;
}

html body .side-submenu {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
}

html body .side-sub-link,
html body .side-sub-link.active,
html body .side-sub-link:hover,
html body .side-sub-link:focus,
html body .side-sub-link:active {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  border-radius: 0 !important;
  min-height: 46px !important;
  height: 46px !important;
  padding: 11px 18px !important;
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transform: none !important;
}

html body .side-sub-link .side-label,
html body .side-sub-link.active .side-label,
html body .side-sub-link:hover .side-label,
html body .side-sub-link:focus .side-label,
html body .side-sub-link:active .side-label {
  margin: 0 !important;
  padding: 0 !important;
  position: static !important;
  transform: none !important;
  max-width: calc(100% - 40px) !important;
}

html body .side-sub-link.active {
  background: var(--adi-sidebar-active-bg) !important;
  color: #fff !important;
  box-shadow: none !important;
}

@media (max-width: 760px) {
  html body .side-sub-link,
  html body .side-sub-link.active,
  html body .side-sub-link:hover,
  html body .side-sub-link:focus,
  html body .side-sub-link:active {
    min-height: 44px !important;
    height: 44px !important;
    padding: 10px 16px !important;
    gap: 12px !important;
  }

  html body .side-sub-spacer {
    width: 28px !important;
    min-width: 28px !important;
    flex-basis: 28px !important;
  }
}

/* ADI Global Sidebar font scale refinement v89
   Scope: global sidebar only. Submenu font is kept 2px smaller than main menu,
   and the submenu position remains stable in normal, hover, focus, and active states. */
html body {
  --adi-sidebar-main-font-size: 15px;
  --adi-sidebar-sub-font-size: 13px;
}

html body .side-link,
html body .side-group-btn,
html body .side-link.active,
html body .side-group-btn.active,
html body .side-link:hover,
html body .side-group-btn:hover,
html body .side-group.expanded > .side-group-btn {
  font-size: var(--adi-sidebar-main-font-size) !important;
  line-height: 1.2 !important;
}

html body .side-sub-link,
html body .side-sub-link.active,
html body .side-sub-link:hover,
html body .side-sub-link:focus,
html body .side-sub-link:active {
  font-size: var(--adi-sidebar-sub-font-size) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  transform: none !important;
}

html body .side-sub-link .side-label,
html body .side-sub-link.active .side-label,
html body .side-sub-link:hover .side-label,
html body .side-sub-link:focus .side-label,
html body .side-sub-link:active .side-label {
  font-size: var(--adi-sidebar-sub-font-size) !important;
  line-height: 1.2 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body {
    --adi-sidebar-main-font-size: 15px;
    --adi-sidebar-sub-font-size: 13px;
  }
}

/* ADI Global Sidebar font weight/size refinement v90
   Scope: global sidebar only. Main menu is 1px smaller than v89 and submenu is
   2px smaller than v89. Font weight is reduced and kept stable on click/active. */
html body {
  --adi-sidebar-main-font-size: 14px;
  --adi-sidebar-sub-font-size: 11px;
  --adi-sidebar-main-font-weight: 600;
  --adi-sidebar-sub-font-weight: 600;
}

html body .side-link,
html body .side-group-btn,
html body .side-link.active,
html body .side-group-btn.active,
html body .side-link:hover,
html body .side-group-btn:hover,
html body .side-link:focus,
html body .side-group-btn:focus,
html body .side-link:active,
html body .side-group-btn:active,
html body .side-group.expanded > .side-group-btn {
  font-size: var(--adi-sidebar-main-font-size) !important;
  font-weight: var(--adi-sidebar-main-font-weight) !important;
  line-height: 1.2 !important;
}

html body .side-link .side-label,
html body .side-group-btn .side-label,
html body .side-link.active .side-label,
html body .side-group-btn.active .side-label,
html body .side-link:hover .side-label,
html body .side-group-btn:hover .side-label,
html body .side-link:focus .side-label,
html body .side-group-btn:focus .side-label,
html body .side-link:active .side-label,
html body .side-group-btn:active .side-label,
html body .side-group.expanded > .side-group-btn .side-label {
  font-size: var(--adi-sidebar-main-font-size) !important;
  font-weight: var(--adi-sidebar-main-font-weight) !important;
  line-height: 1.2 !important;
}

html body .side-sub-link,
html body .side-sub-link.active,
html body .side-sub-link:hover,
html body .side-sub-link:focus,
html body .side-sub-link:active {
  font-size: var(--adi-sidebar-sub-font-size) !important;
  font-weight: var(--adi-sidebar-sub-font-weight) !important;
  line-height: 1.2 !important;
  transform: none !important;
}

html body .side-sub-link .side-label,
html body .side-sub-link.active .side-label,
html body .side-sub-link:hover .side-label,
html body .side-sub-link:focus .side-label,
html body .side-sub-link:active .side-label {
  font-size: var(--adi-sidebar-sub-font-size) !important;
  font-weight: var(--adi-sidebar-sub-font-weight) !important;
  line-height: 1.2 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body {
    --adi-sidebar-main-font-size: 14px;
    --adi-sidebar-sub-font-size: 11px;
    --adi-sidebar-main-font-weight: 600;
    --adi-sidebar-sub-font-weight: 600;
  }
}

/* ADI Global Sidebar font/height refinement v91
   Scope: global sidebar only. Transport Eligible module is not changed.
   Changes from v90:
   - main menu font: 14px -> 13px, lighter weight
   - submenu font weight lighter
   - submenu button height: reduced by 4px and kept stable on hover/click/active */
html body {
  --adi-sidebar-main-font-size: 13px;
  --adi-sidebar-sub-font-size: 11px;
  --adi-sidebar-main-font-weight: 500;
  --adi-sidebar-sub-font-weight: 500;
  --adi-sidebar-sub-height: 42px;
  --adi-sidebar-sub-padding-y: 9px;
}

html body .side-link,
html body .side-group-btn,
html body .side-link.active,
html body .side-group-btn.active,
html body .side-link:hover,
html body .side-group-btn:hover,
html body .side-link:focus,
html body .side-group-btn:focus,
html body .side-link:active,
html body .side-group-btn:active,
html body .side-group.expanded > .side-group-btn {
  font-size: var(--adi-sidebar-main-font-size) !important;
  font-weight: var(--adi-sidebar-main-font-weight) !important;
  line-height: 1.2 !important;
}

html body .side-link .side-label,
html body .side-group-btn .side-label,
html body .side-link.active .side-label,
html body .side-group-btn.active .side-label,
html body .side-link:hover .side-label,
html body .side-group-btn:hover .side-label,
html body .side-link:focus .side-label,
html body .side-group-btn:focus .side-label,
html body .side-link:active .side-label,
html body .side-group-btn:active .side-label,
html body .side-group.expanded > .side-group-btn .side-label {
  font-size: var(--adi-sidebar-main-font-size) !important;
  font-weight: var(--adi-sidebar-main-font-weight) !important;
  line-height: 1.2 !important;
}

html body .side-sub-link,
html body .side-sub-link.active,
html body .side-sub-link:hover,
html body .side-sub-link:focus,
html body .side-sub-link:active {
  min-height: var(--adi-sidebar-sub-height) !important;
  height: var(--adi-sidebar-sub-height) !important;
  padding-top: var(--adi-sidebar-sub-padding-y) !important;
  padding-bottom: var(--adi-sidebar-sub-padding-y) !important;
  font-size: var(--adi-sidebar-sub-font-size) !important;
  font-weight: var(--adi-sidebar-sub-font-weight) !important;
  line-height: 1.2 !important;
  transform: none !important;
}

html body .side-sub-link .side-label,
html body .side-sub-link.active .side-label,
html body .side-sub-link:hover .side-label,
html body .side-sub-link:focus .side-label,
html body .side-sub-link:active .side-label {
  font-size: var(--adi-sidebar-sub-font-size) !important;
  font-weight: var(--adi-sidebar-sub-font-weight) !important;
  line-height: 1.2 !important;
  transform: none !important;
}

@media (max-width: 760px) {
  html body {
    --adi-sidebar-main-font-size: 13px;
    --adi-sidebar-sub-font-size: 11px;
    --adi-sidebar-main-font-weight: 500;
    --adi-sidebar-sub-font-weight: 500;
    --adi-sidebar-sub-height: 40px;
    --adi-sidebar-sub-padding-y: 8px;
  }
}


/* ADI Global Sidebar submenu height refinement v92
   Scope: global sidebar only. Transport Eligible module is not changed.
   Changes from v91:
   - submenu button height desktop: 42px -> 38px
   - submenu button height mobile: 40px -> 36px */
html body {
  --adi-sidebar-sub-height: 38px;
  --adi-sidebar-sub-padding-y: 7px;
}

html body .side-sub-link,
html body .side-sub-link.active,
html body .side-sub-link:hover,
html body .side-sub-link:focus,
html body .side-sub-link:active {
  min-height: var(--adi-sidebar-sub-height) !important;
  height: var(--adi-sidebar-sub-height) !important;
  padding-top: var(--adi-sidebar-sub-padding-y) !important;
  padding-bottom: var(--adi-sidebar-sub-padding-y) !important;
}

@media (max-width: 760px) {
  html body {
    --adi-sidebar-sub-height: 36px;
    --adi-sidebar-sub-padding-y: 6px;
  }
}


/* Auth pages ADI brand refresh v97 */
.auth-brand .auth-adi-brand {
  display: block !important;
  color: #ffffff !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: .35px !important;
  max-width: 440px !important;
  gap: 0 !important;
  padding: 0 !important;
  transform: none !important;
}
.auth-brand .auth-adi-brand span {
  display: block !important;
  color: inherit !important;
  white-space: normal !important;
}
.auth-brand .auth-adi-brand::before,
.auth-brand .auth-adi-brand::after {
  display: none !important;
  content: none !important;
}
.auth-brand .auth-adi-brand .brand-mark {
  display: none !important;
}
.auth-brand .auth-adi-brand + .auth-brand-line {
  margin-top: 40px !important;
}
.auth-brand h1 {
  max-width: 480px;
}
.auth-brand p {
  max-width: 480px;
}
@media (max-width: 980px) {
  .auth-brand .auth-adi-brand {
    font-size: 20px !important;
  }
}


/* Auth pages ADI brand refinement v98
   Scope: login, registration, and auth change-password pages only. */
.auth-page .auth-brand .auth-adi-brand {
  color: var(--orange) !important;
  font-size: 24px !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: .35px !important;
}

.auth-page .auth-brand .auth-adi-brand span {
  color: var(--orange) !important;
}

.auth-page .auth-brand h1 {
  font-size: 22px !important;
  line-height: 1.25 !important;
  font-weight: 800 !important;
  max-width: 480px !important;
}

.auth-page .auth-card .auth-contact-row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .72fr);
  gap: 14px;
  align-items: start;
  margin-top: 22px;
}

.auth-page .auth-card .auth-contact-row .auth-field {
  margin-top: 0 !important;
}

@media (max-width: 980px) {
  .auth-page .auth-brand .auth-adi-brand {
    font-size: 22px !important;
  }
  .auth-page .auth-brand h1 {
    font-size: 20px !important;
  }
}

@media (max-width: 640px) {
  .auth-page .auth-card .auth-contact-row {
    grid-template-columns: 1fr;
  }
}

/* ADI Global Header/Sidebar Orange Balance v99
   Scope: global topbar + sidebar active states only.
   - Header uses the previous Dashboard active orange.
   - Active sidebar button uses a 25% deeper orange treatment.
   Transport Eligible, Sea Freight, Road Freight, and auth form layout are not changed. */
:root {
  --adi-header-solid: #ff7a1a;
  --adi-header-bg: linear-gradient(180deg, #ff7a1a 0%, #f15a18 100%);
  --adi-header-border: #e85a16;
  --adi-header-text: #ffffff;
  --adi-header-text-soft: rgba(255,255,255,.86);
  --adi-header-brand-text: #ffffff;
  --adi-sidebar-active-bg: linear-gradient(180deg, #ff5f00 0%, #d9480f 100%);
}

html body header.topbar,
html body .topbar,
html body .topbar-header,
html body .app-topbar,
html body .app-header,
html body .main-header,
html body .navbar {
  background: var(--adi-header-bg) !important;
  background-color: var(--adi-header-solid) !important;
  border-bottom: 1px solid var(--adi-header-border) !important;
  box-shadow: 0 2px 14px rgba(216, 72, 15, .18) !important;
}

html body .topbar-brand-zone,
html body.sidebar-collapsed .topbar-brand-zone {
  background: transparent !important;
  background-color: transparent !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

html body .topbar .df-brand-text-link,
html body .df-brand-text-link,
html body.sidebar-collapsed .topbar .df-brand-text-link,
html body.sidebar-collapsed .df-brand-text-link,
html body .topbar .df-brand-title-desktop,
html body .df-brand-title-desktop,
html body.sidebar-collapsed .topbar .df-brand-title-desktop,
html body.sidebar-collapsed .df-brand-title-desktop,
html body .topbar .df-brand-title,
html body .df-brand-title {
  color: var(--adi-header-text) !important;
}

html body .topbar .df-brand-parenthetical,
html body .df-brand-parenthetical,
html body .topbar .df-brand-subtitle,
html body .df-brand-subtitle {
  color: var(--adi-header-text-soft) !important;
}

html body .topbar .user-name,
html body .topbar .user-company,
html body .topbar .topbar-user,
html body .topbar .topbar-user strong,
html body .topbar .topbar-user span,
html body .topbar .user-menu,
html body .topbar .user-menu strong,
html body .topbar .user-menu span {
  color: var(--adi-header-text) !important;
}

html body .topbar .topbar-user-icon,
html body .topbar .user-menu-btn,
html body .topbar .user-avatar {
  background: rgba(255,255,255,.92) !important;
  color: #0f172a !important;
  border-color: rgba(255,255,255,.72) !important;
}

html body .side-link.active,
html body .side-sub-link.active,
html body .side-group.active > .side-group-btn,
html body .side-group.has-active > .side-group-btn {
  background: var(--adi-sidebar-active-bg) !important;
  background-color: #ff5f00 !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .side-link.active .side-label,
html body .side-sub-link.active .side-label,
html body .side-group.active > .side-group-btn .side-label,
html body .side-group.has-active > .side-group-btn .side-label,
html body .side-link.active .side-icon,
html body .side-sub-link.active .side-icon,
html body .side-group.active > .side-group-btn .side-icon,
html body .side-group.has-active > .side-group-btn .side-icon {
  color: #ffffff !important;
}

@media (max-width: 760px) {
  html body header.topbar,
  html body .topbar,
  html body .topbar-header,
  html body .app-topbar,
  html body .app-header,
  html body .main-header,
  html body .navbar {
    background: var(--adi-header-bg) !important;
    background-color: var(--adi-header-solid) !important;
    border-bottom: 1px solid var(--adi-header-border) !important;
  }
}


/* ADI Global Header/User/Register refinement v100
   Scope: global topbar user area, Dashboard active state, profile dropdown, and registration auth card only.
   Transport Eligible, Sea Freight, and Road Freight logic are not changed. */

/* 1. Header right user block: transparent, white text, no white box behind user info/avatar. */
html body header.topbar .user-menu,
html body .topbar .user-menu {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

html body header.topbar .user-menu-btn.user-menu-avatar-trigger,
html body .topbar .user-menu-btn.user-menu-avatar-trigger,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger:hover,
html body .topbar .user-menu-btn.user-menu-avatar-trigger:hover,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger:focus,
html body .topbar .user-menu-btn.user-menu-avatar-trigger:focus,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger:active,
html body .topbar .user-menu-btn.user-menu-avatar-trigger:active {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #ffffff !important;
}

html body header.topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span {
  color: #ffffff !important;
  text-shadow: none !important;
}

html body header.topbar .user-avatar-icon,
html body .topbar .user-avatar-icon,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger .user-avatar-icon,
html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-avatar-icon {
  background: transparent !important;
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html body header.topbar .user-avatar-icon svg,
html body .topbar .user-avatar-icon svg {
  fill: currentColor !important;
  stroke: none !important;
}

/* 2. Dashboard stays visually transparent even when it is the active menu. */
html body .side-nav > a.side-link[href="index.php"].active,
html body .side-nav > a.side-link[href="index.php"].active:hover,
html body .side-nav > a.side-link[href="index.php"].active:focus,
html body .side-nav > a.side-link[href="index.php"].active:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html body .side-nav > a.side-link[href="index.php"].active .side-icon,
html body .side-nav > a.side-link[href="index.php"].active .side-label {
  color: #ffffff !important;
}

/* 3. Profile dropdown gets a light gray box so it is separated from the page/hero below. */
html body header.topbar .user-menu-list,
html body .topbar .user-menu-list,
html body .user-menu-list {
  background: #f3f4f6 !important;
  background-color: #f3f4f6 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .20) !important;
  color: #111827 !important;
}

html body header.topbar .user-menu-list a,
html body .topbar .user-menu-list a,
html body .user-menu-list a {
  color: #1f2937 !important;
  background: transparent !important;
}

html body header.topbar .user-menu-list a:hover,
html body .topbar .user-menu-list a:hover,
html body .user-menu-list a:hover {
  background: #e5e7eb !important;
  color: #111827 !important;
}

html body header.topbar .user-menu-list .dropdown-icon,
html body .topbar .user-menu-list .dropdown-icon,
html body .user-menu-list .dropdown-icon {
  color: #475569 !important;
}

/* 4. Registration form: make the card more compact and lift the Registration heading. */
html body.auth-register-page .auth-main {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
}

html body.auth-register-page .auth-card.auth-card-wide {
  padding-top: 39px !important;
  padding-bottom: 39px !important;
}

html body.auth-register-page .auth-card.auth-card-wide h2 {
  margin-top: -15px !important;
}

@media (max-width: 760px) {
  html body.auth-register-page .auth-main {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  html body.auth-register-page .auth-card.auth-card-wide {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }
}


/* ADI Global Header/Button/Profile/Auth refinement v101
   Scope: global topbar, sidebar active buttons, user dropdown, and auth titles.
   Transport Eligible, Sea Freight, and Road Freight logic are not changed. */
:root {
  --adi-header-solid: #e66e17;
  --adi-header-bg: linear-gradient(180deg, #e66e17 0%, #d85216 100%);
  --adi-header-border: #c94712;
  --adi-header-text: #ffffff;
  --adi-header-text-soft: rgba(255,255,255,.88);
  --adi-button-orange-bg: linear-gradient(180deg, #d75a12 0%, #b63d0a 100%);
  --adi-button-orange-solid: #c84a0c;
  --adi-button-orange-border: #a93a09;
}

/* 1. Header orange reduced by about 10% from previous v99/v100 tone. */
html body header.topbar,
html body .topbar,
html body .topbar-header,
html body .app-topbar,
html body .app-header,
html body .main-header,
html body .navbar {
  background: var(--adi-header-bg) !important;
  background-color: var(--adi-header-solid) !important;
  border-bottom-color: var(--adi-header-border) !important;
  box-shadow: 0 2px 12px rgba(201, 71, 18, .16) !important;
}

/* 1b. Orange buttons/active states reduced by about 30% and kept consistent. */
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body .module-header .btn-primary,
html body .topbar .btn-primary,
html body #sidebarCollapseBtn,
html body .sidebar-collapse-btn,
html body .side-sub-link.active,
html body .side-group.active > .side-group-btn,
html body .side-group.has-active > .side-group-btn,
html body .side-link.active:not([href="index.php"]) {
  background: var(--adi-button-orange-bg) !important;
  background-color: var(--adi-button-orange-solid) !important;
  border-color: var(--adi-button-orange-border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-primary:hover {
  background: linear-gradient(180deg, #c84a0c 0%, #a93408 100%) !important;
  background-color: #b63d0a !important;
  color: #ffffff !important;
}

/* Dashboard menu must remain transparent even when active. */
html body .side-nav > a.side-link[href="index.php"],
html body .side-nav > a.side-link[href="index.php"].active,
html body .side-nav > a.side-link[href="index.php"].active:hover,
html body .side-nav > a.side-link[href="index.php"].active:focus,
html body .side-nav > a.side-link[href="index.php"].active:active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

/* Header right user area: always white text/icon and no box background. */
html body header.topbar .user-menu,
html body .topbar .user-menu,
html body header.topbar .user-menu-btn,
html body .topbar .user-menu-btn,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger,
html body .topbar .user-menu-btn.user-menu-avatar-trigger,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger:hover,
html body .topbar .user-menu-btn.user-menu-avatar-trigger:hover,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger:focus,
html body .topbar .user-menu-btn.user-menu-avatar-trigger:focus,
html body header.topbar .user-menu-btn.user-menu-avatar-trigger:active,
html body .topbar .user-menu-btn.user-menu-avatar-trigger:active,
html body header.topbar .user-avatar-icon,
html body .topbar .user-avatar-icon {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #ffffff !important;
}

html body header.topbar .user-meta strong,
html body .topbar .user-meta strong,
html body header.topbar .user-meta span,
html body .topbar .user-meta span,
html body header.topbar .user-menu strong,
html body .topbar .user-menu strong,
html body header.topbar .user-menu span,
html body .topbar .user-menu span {
  color: #ffffff !important;
}

html body header.topbar .user-avatar-icon svg,
html body .topbar .user-avatar-icon svg {
  color: #ffffff !important;
  fill: currentColor !important;
}

/* 3. Profile menu dropdown: every part of the box uses light gray, including rows and logout area. */
html body header.topbar .user-menu-list,
html body .topbar .user-menu-list,
html body .user-menu-list {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  border: 1px solid #cbd5e1 !important;
  box-shadow: 0 18px 36px rgba(15, 23, 42, .22) !important;
  color: #111827 !important;
}

html body header.topbar .user-menu-list a,
html body .topbar .user-menu-list a,
html body .user-menu-list a,
html body header.topbar .user-menu-list a:link,
html body .topbar .user-menu-list a:link,
html body .user-menu-list a:link,
html body header.topbar .user-menu-list a:visited,
html body .topbar .user-menu-list a:visited,
html body .user-menu-list a:visited {
  background: #f1f5f9 !important;
  background-color: #f1f5f9 !important;
  color: #1f2937 !important;
}

html body header.topbar .user-menu-list a:hover,
html body .topbar .user-menu-list a:hover,
html body .user-menu-list a:hover,
html body header.topbar .user-menu-list a:focus,
html body .topbar .user-menu-list a:focus,
html body .user-menu-list a:focus {
  background: #e2e8f0 !important;
  background-color: #e2e8f0 !important;
  color: #111827 !important;
  text-decoration: none !important;
}

html body header.topbar .user-menu-list a + a:last-child,
html body .topbar .user-menu-list a + a:last-child,
html body .user-menu-list a + a:last-child {
  border-top-color: #cbd5e1 !important;
}

html body header.topbar .user-menu-list .dropdown-icon,
html body .topbar .user-menu-list .dropdown-icon,
html body .user-menu-list .dropdown-icon {
  color: #475569 !important;
}

/* 4. Registration form compact refinement: reduce vertical space around title/card. */
html body.auth-register-page .auth-main {
  padding-top: 15px !important;
  padding-bottom: 15px !important;
}

html body.auth-register-page .auth-card.auth-card-wide {
  padding-top: 24px !important;
  padding-bottom: 30px !important;
}

html body.auth-register-page .auth-card.auth-card-wide h2 {
  margin-top: -15px !important;
  margin-bottom: 12px !important;
}

html body.auth-register-page .auth-card.auth-card-wide > p.muted {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
}

/* Auth wording color follows ADI orange while browser title is handled in PHP. */
html body.auth-page .auth-brand .auth-adi-brand,
html body.auth-page .auth-brand .auth-adi-brand span {
  color: var(--adi-button-orange-solid) !important;
}

/* ADI Global Header/Button/Profile/Auth color correction v102
   Corrects v101 wording: "diturunkan" means lighter/softer, not darker.
   Header is 10% lighter than v101; orange buttons/active states are 30% lighter than v101. */
:root {
  --adi-header-solid: #e87c2e;
  --adi-header-bg: linear-gradient(180deg, #e87c2e 0%, #dc632d 100%);
  --adi-header-border: #ce592a;
  --adi-header-text: #ffffff;
  --adi-header-text-soft: rgba(255,255,255,.90);
  --adi-button-orange-bg: linear-gradient(180deg, #e38c59 0%, #cc7754 100%);
  --adi-button-orange-solid: #d88055;
  --adi-button-orange-border: #c37553;
}

/* Header orange: softer/lighter by 10% from v101. */
html body header.topbar,
html body .topbar,
html body .topbar-header,
html body .app-topbar,
html body .app-header,
html body .main-header,
html body .navbar {
  background: var(--adi-header-bg) !important;
  background-color: var(--adi-header-solid) !important;
  border-bottom-color: var(--adi-header-border) !important;
  box-shadow: 0 2px 12px rgba(206, 89, 42, .14) !important;
}

/* Orange buttons/active states: softer/lighter by 30% from v101. */
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body .module-header .btn-primary,
html body .topbar .btn-primary,
html body #sidebarCollapseBtn,
html body .sidebar-collapse-btn,
html body .side-sub-link.active,
html body .side-group.active > .side-group-btn,
html body .side-group.has-active > .side-group-btn,
html body .side-link.active:not([href="index.php"]) {
  background: var(--adi-button-orange-bg) !important;
  background-color: var(--adi-button-orange-solid) !important;
  border-color: var(--adi-button-orange-border) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-primary:hover {
  background: linear-gradient(180deg, #d88055 0%, #c37453 100%) !important;
  background-color: #d88055 !important;
  border-color: #c37453 !important;
  color: #ffffff !important;
}

/* ADI Global Color Scope Correction v103
   Scope fix: do not use one orange token for every component.
   Header, sidebar active state, normal action buttons, and sidebar toggle now have separate colors.
   This restores the action button and sidebar collapse toggle colors to the v99/baseline values. */
:root {
  --adi-topbar-orange-solid: #e87c2e;
  --adi-topbar-orange-bg: linear-gradient(180deg, #e87c2e 0%, #dc632d 100%);
  --adi-topbar-orange-border: #ce592a;
  --adi-action-orange-bg: linear-gradient(180deg, #ff8a00 0%, #f26b00 100%);
  --adi-action-orange-solid: #f26b00;
  --adi-action-orange-hover-bg: linear-gradient(180deg, #ff7a1a 0%, #f15a18 100%);
  --adi-sidebar-toggle-orange: #f5821f;
  --adi-sidebar-toggle-shadow: rgba(245, 130, 31, .30);
}

/* Keep the topbar color independent from buttons. */
html body header.topbar,
html body .topbar,
html body .topbar-header,
html body .app-topbar,
html body .app-header,
html body .main-header,
html body .navbar {
  background: var(--adi-topbar-orange-bg) !important;
  background-color: var(--adi-topbar-orange-solid) !important;
  border-bottom-color: var(--adi-topbar-orange-border) !important;
}

/* Restore normal orange action buttons to the v99/baseline color.
   Example: dashboard '+ Create Sea Rate'. */
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body .mock-hero-actions .btn.btn-primary,
html body .module-header .btn-primary {
  background: var(--adi-action-orange-bg) !important;
  background-color: var(--adi-action-orange-solid) !important;
  border-color: var(--adi-action-orange-solid) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

html body .btn-primary:hover,
html body button.btn-primary:hover,
html body a.btn-primary:hover,
html body .mock-hero-actions .btn.btn-primary:hover,
html body .module-header .btn-primary:hover {
  background: var(--adi-action-orange-hover-bg) !important;
  background-color: #f15a18 !important;
  border-color: #f15a18 !important;
  color: #ffffff !important;
}

/* Restore the sidebar expand/collapse button color to v99/base.
   This must not follow .btn-primary or header colors. */
html body #sidebarCollapseBtn,
html body .sidebar-collapse-btn,
html body #sidebarCollapseBtn:hover,
html body .sidebar-collapse-btn:hover,
html body #sidebarCollapseBtn:focus,
html body .sidebar-collapse-btn:focus,
html body #sidebarCollapseBtn:active,
html body .sidebar-collapse-btn:active {
  background: var(--adi-sidebar-toggle-orange) !important;
  background-color: var(--adi-sidebar-toggle-orange) !important;
  border: 2px solid #ffffff !important;
  color: #ffffff !important;
  box-shadow: 0 7px 16px var(--adi-sidebar-toggle-shadow) !important;
}

html body #sidebarCollapseBtn::before,
html body .sidebar-collapse-btn::before,
html body #sidebarCollapseBtn::after,
html body .sidebar-collapse-btn::after,
html body #sidebarCollapseBtn span,
html body .sidebar-collapse-btn span,
html body #sidebarCollapseBtn svg,
html body .sidebar-collapse-btn svg,
html body #sidebarCollapseBtn .toggle-icon-svg,
html body .sidebar-collapse-btn .toggle-icon-svg {
  color: #ffffff !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ADI Global Header/Submenu Color Segregation v104
   Scope notes:
   - Desktop/web header uses a left-to-right gradient only on the topbar.
   - Mobile keeps a separate solid header rule, so future web color edits do not affect mobile.
   - Action buttons and the sidebar expand/collapse button keep their own v99/base orange.
   - Collapsed desktop submenu flyout uses a light-blue panel; selected submenu stays orange like expanded sidebar selection. */
:root {
  --adi-web-header-left: #f5821f;
  --adi-web-header-mid: #ff9f45;
  --adi-web-header-right: #ffd7b0;
  --adi-web-header-border: #f8b26a;

  --adi-sidebar-selected-bg: linear-gradient(180deg, #ff8a00 0%, #f26b00 100%);
  --adi-sidebar-selected-solid: #f26b00;
  --adi-sidebar-selected-hover-bg: linear-gradient(180deg, #ff7a1a 0%, #f15a18 100%);

  --adi-submenu-flyout-bg: #eaf4ff;
  --adi-submenu-flyout-bg-strong: #dbeafe;
  --adi-submenu-flyout-border: #bfdbfe;
  --adi-submenu-flyout-text: #0f172a;
  --adi-submenu-flyout-muted: #1e3a8a;

  --adi-mobile-header-bg: #e87c2e;
  --adi-mobile-header-border: #ce592a;
}

@media (min-width: 761px) {
  /* 1. Desktop/web header gradient only. */
  html body header.topbar,
  html body .topbar,
  html body .topbar-header,
  html body .app-topbar,
  html body .app-header,
  html body .main-header,
  html body .navbar {
    background: linear-gradient(90deg, var(--adi-web-header-left) 0%, var(--adi-web-header-mid) 54%, var(--adi-web-header-right) 100%) !important;
    background-color: var(--adi-web-header-left) !important;
    border-bottom-color: var(--adi-web-header-border) !important;
    box-shadow: 0 2px 12px rgba(245, 130, 31, .16) !important;
  }

  /* Keep brand/user areas transparent so the gradient is continuous across the whole header. */
  html body .topbar-brand-zone,
  html body .topbar .user-menu,
  html body .topbar .user-menu-btn,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger,
  html body .topbar .user-avatar-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  html body .topbar .df-brand-title,
  html body .topbar .user-meta strong,
  html body .topbar .user-meta span,
  html body .topbar .user-avatar-icon,
  html body .topbar .user-avatar-icon svg {
    color: #ffffff !important;
    fill: currentColor !important;
  }

  /* 2. Selected sidebar submenu button uses the same orange as expanded-sidebar selected state. */
  html body .sidebar .side-sub-link.active,
  html body .sidebar .side-sub-link.active:hover,
  html body .sidebar .side-sub-link.active:focus,
  html body .sidebar .side-sub-link.active:active,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active:hover,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active:hover {
    background: var(--adi-sidebar-selected-bg) !important;
    background-color: var(--adi-sidebar-selected-solid) !important;
    border-color: var(--adi-sidebar-selected-solid) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  html body .sidebar .side-sub-link.active .side-label,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active .side-label,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active .side-label {
    color: #ffffff !important;
  }

  /* Dashboard stays transparent even when active. */
  html body .side-nav > a.side-link[href="index.php"],
  html body .side-nav > a.side-link[href="index.php"].active,
  html body .side-nav > a.side-link[href="index.php"].active:hover,
  html body .side-nav > a.side-link[href="index.php"].active:focus,
  html body .side-nav > a.side-link[href="index.php"].active:active {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
  }

  /* 3. Desktop collapsed submenu flyout panel: light blue box. */
  html body.sidebar-collapsed .side-link[data-collapsed-title]::after,
  html body.sidebar-collapsed .side-group::after {
    background: var(--adi-submenu-flyout-bg-strong) !important;
    color: var(--adi-submenu-flyout-text) !important;
    border: 1px solid var(--adi-submenu-flyout-border) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18) !important;
  }

  html body.sidebar-collapsed .side-group:hover > .side-submenu,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu,
  html body.sidebar-collapsed .side-group:hover > .side-submenu[hidden],
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu[hidden] {
    background: var(--adi-submenu-flyout-bg) !important;
    border: 1px solid var(--adi-submenu-flyout-border) !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .20) !important;
  }

  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link {
    background: transparent !important;
    color: var(--adi-submenu-flyout-text) !important;
  }

  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link .side-label,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link .side-label {
    color: var(--adi-submenu-flyout-text) !important;
  }

  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:hover,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:hover,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:focus,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:focus {
    background: #d7e9ff !important;
    color: var(--adi-submenu-flyout-text) !important;
  }

  /* Keep normal action buttons and sidebar toggle at their v99/base colors. */
  html body .btn-primary,
  html body button.btn-primary,
  html body a.btn-primary,
  html body .mock-hero-actions .btn.btn-primary,
  html body .module-header .btn-primary {
    background: var(--adi-action-orange-bg) !important;
    background-color: var(--adi-action-orange-solid) !important;
    border-color: var(--adi-action-orange-solid) !important;
    color: #ffffff !important;
  }

  html body #sidebarCollapseBtn,
  html body .sidebar-collapse-btn,
  html body #sidebarCollapseBtn:hover,
  html body .sidebar-collapse-btn:hover,
  html body #sidebarCollapseBtn:focus,
  html body .sidebar-collapse-btn:focus,
  html body #sidebarCollapseBtn:active,
  html body .sidebar-collapse-btn:active {
    background: var(--adi-sidebar-toggle-orange) !important;
    background-color: var(--adi-sidebar-toggle-orange) !important;
    border-color: #ffffff !important;
    color: #ffffff !important;
    box-shadow: 0 7px 16px var(--adi-sidebar-toggle-shadow) !important;
  }
}

@media (max-width: 760px) {
  /* Mobile header is intentionally separate from the desktop gradient. */
  html body header.topbar,
  html body .topbar,
  html body .topbar-header,
  html body .app-topbar,
  html body .app-header,
  html body .main-header,
  html body .navbar {
    background: var(--adi-mobile-header-bg) !important;
    background-color: var(--adi-mobile-header-bg) !important;
    background-image: none !important;
    border-bottom-color: var(--adi-mobile-header-border) !important;
  }

  /* Mobile submenu keeps its own existing mobile flyout treatment; no desktop light-blue panel bleed. */
  html body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu,
  html body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
  }

  html body.df-mobile-sidebar-open .side-group.mobile-submenu-open > .side-submenu .side-sub-link.active,
  html body.df-mobile-sidebar-open [data-side-group].mobile-submenu-open > .side-submenu .side-sub-link.active {
    background: #eef4ff !important;
    color: #111827 !important;
  }
}

/* ADI Global Header/Sidebar Color Isolation v105
   - Header is independent from sidebar expanded/collapsed state.
   - Desktop header keeps the same gradient whether sidebar is expanded or collapsed.
   - Mobile keeps its own non-desktop styling.
   - Collapsed sidebar flyout uses light-blue panel, orange active item, soft-orange hover. */
:root {
  --adi-v105-header-left: #f5821f;
  --adi-v105-header-mid: #ff9f45;
  --adi-v105-header-right: #ffd7b0;
  --adi-v105-header-border: #f8b26a;
  --adi-v105-text-dark: #111827;
  --adi-v105-user-muted: #1f2937;
  --adi-v105-active-orange-bg: linear-gradient(180deg, #ff8a00 0%, #f26b00 100%);
  --adi-v105-active-orange-solid: #f26b00;
  --adi-v105-hover-orange-soft: #ffead5;
  --adi-v105-hover-orange-text: #7c2d12;
  --adi-v105-submenu-panel: #eaf4ff;
  --adi-v105-submenu-panel-strong: #dbeafe;
  --adi-v105-submenu-border: #bfdbfe;
}

@media (min-width: 761px) {
  /* Header: independent from sidebar state. Do not let body.sidebar-collapsed change header colors. */
  html body header.topbar,
  html body .topbar,
  html body .topbar-header,
  html body .app-topbar,
  html body .app-header,
  html body .main-header,
  html body .navbar,
  html body.sidebar-collapsed header.topbar,
  html body.sidebar-collapsed .topbar,
  html body.sidebar-collapsed .topbar-header,
  html body.sidebar-collapsed .app-topbar,
  html body.sidebar-collapsed .app-header,
  html body.sidebar-collapsed .main-header,
  html body.sidebar-collapsed .navbar {
    background: linear-gradient(90deg, var(--adi-v105-header-left) 0%, var(--adi-v105-header-mid) 54%, var(--adi-v105-header-right) 100%) !important;
    background-color: var(--adi-v105-header-left) !important;
    background-image: linear-gradient(90deg, var(--adi-v105-header-left) 0%, var(--adi-v105-header-mid) 54%, var(--adi-v105-header-right) 100%) !important;
    border-bottom: 1px solid var(--adi-v105-header-border) !important;
    box-shadow: 0 2px 12px rgba(245, 130, 31, .16) !important;
  }

  /* Header child zones should never paint white over the gradient. */
  html body .topbar-brand-zone,
  html body.sidebar-collapsed .topbar-brand-zone,
  html body .topbar .header-spacer,
  html body.sidebar-collapsed .topbar .header-spacer,
  html body .topbar .user-menu,
  html body.sidebar-collapsed .topbar .user-menu,
  html body .topbar .user-menu-btn,
  html body.sidebar-collapsed .topbar .user-menu-btn,
  html body .topbar .user-avatar-icon,
  html body.sidebar-collapsed .topbar .user-avatar-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* Header brand must not be hidden or resized because the sidebar is collapsed. */
  html body.sidebar-collapsed .topbar-brand-zone {
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    flex: 0 0 90px !important;
    justify-content: flex-start !important;
    padding: 0 10px !important;
    overflow: visible !important;
  }

  html body.sidebar-collapsed .topbar .df-brand,
  html body.sidebar-collapsed .topbar .df-brand-text-link,
  html body.sidebar-collapsed .topbar .df-brand-title,
  html body.sidebar-collapsed .topbar .df-brand-title-desktop {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    max-width: none !important;
    overflow: visible !important;
  }

  /* With gradient header, user name/company/avatar should be dark and readable. */
  html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body .topbar .user-meta strong,
  html body .topbar .user-meta span,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body.sidebar-collapsed .topbar .user-meta strong,
  html body.sidebar-collapsed .topbar .user-meta span {
    color: var(--adi-v105-text-dark) !important;
    text-shadow: none !important;
  }

  html body .topbar .user-avatar-icon,
  html body .topbar .user-avatar-icon svg,
  html body .topbar .user-avatar-icon path,
  html body.sidebar-collapsed .topbar .user-avatar-icon,
  html body.sidebar-collapsed .topbar .user-avatar-icon svg,
  html body.sidebar-collapsed .topbar .user-avatar-icon path {
    color: var(--adi-v105-text-dark) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
  }

  /* Collapsed submenu flyout: light-blue panel/list background. */
  html body.sidebar-collapsed .side-link[data-collapsed-title]::after,
  html body.sidebar-collapsed .side-group::after {
    background: var(--adi-v105-submenu-panel-strong) !important;
    background-color: var(--adi-v105-submenu-panel-strong) !important;
    background-image: none !important;
    color: var(--adi-v105-text-dark) !important;
    border: 1px solid var(--adi-v105-submenu-border) !important;
    box-shadow: 0 16px 34px rgba(15, 23, 42, .18) !important;
  }

  html body.sidebar-collapsed .side-group:hover > .side-submenu,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu,
  html body.sidebar-collapsed .side-group:hover > .side-submenu[hidden],
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu[hidden] {
    background: var(--adi-v105-submenu-panel) !important;
    background-color: var(--adi-v105-submenu-panel) !important;
    background-image: none !important;
    border: 1px solid var(--adi-v105-submenu-border) !important;
    box-shadow: 0 18px 34px rgba(15, 23, 42, .20) !important;
  }

  /* Collapsed active parent/menu button must be orange, not blue. */
  html body.sidebar-collapsed .sidebar .side-link.active:not([href="index.php"]),
  html body.sidebar-collapsed .sidebar .side-link.active:not([href="index.php"]):hover,
  html body.sidebar-collapsed .sidebar .side-link.active:not([href="index.php"]):focus,
  html body.sidebar-collapsed .sidebar .side-group-btn.group-open,
  html body.sidebar-collapsed .sidebar .side-group-btn.group-open:hover,
  html body.sidebar-collapsed .sidebar .side-group-btn.group-open:focus,
  html body.sidebar-collapsed .sidebar .side-group.expanded > .side-group-btn,
  html body.sidebar-collapsed .sidebar .side-group.expanded > .side-group-btn:hover {
    background: var(--adi-v105-active-orange-bg) !important;
    background-color: var(--adi-v105-active-orange-solid) !important;
    color: #ffffff !important;
    border-color: var(--adi-v105-active-orange-solid) !important;
    box-shadow: none !important;
  }

  /* Collapsed flyout active submenu must be orange. */
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active:hover,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active:hover,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active:focus,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active:focus {
    background: var(--adi-v105-active-orange-bg) !important;
    background-color: var(--adi-v105-active-orange-solid) !important;
    color: #ffffff !important;
    border-color: var(--adi-v105-active-orange-solid) !important;
    box-shadow: none !important;
  }

  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link.active .side-label,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link.active .side-label {
    color: #ffffff !important;
  }

  /* Hover state: soft orange, not blue. Applies to expanded and collapsed submenu rows. */
  html body .sidebar .side-submenu .side-sub-link:hover:not(.active),
  html body .sidebar .side-submenu .side-sub-link:focus:not(.active),
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:hover:not(.active),
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:hover:not(.active),
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:focus:not(.active),
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:focus:not(.active) {
    background: var(--adi-v105-hover-orange-soft) !important;
    background-color: var(--adi-v105-hover-orange-soft) !important;
    color: var(--adi-v105-hover-orange-text) !important;
  }

  html body .sidebar .side-submenu .side-sub-link:hover:not(.active) .side-label,
  html body .sidebar .side-submenu .side-sub-link:focus:not(.active) .side-label,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:hover:not(.active) .side-label,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:hover:not(.active) .side-label,
  html body.sidebar-collapsed .side-group:hover > .side-submenu .side-sub-link:focus:not(.active) .side-label,
  html body.sidebar-collapsed .side-group.is-hovering > .side-submenu .side-sub-link:focus:not(.active) .side-label {
    color: var(--adi-v105-hover-orange-text) !important;
  }

  /* Dashboard remains transparent even when active, including collapsed state. */
  html body .side-nav > a.side-link[href="index.php"],
  html body .side-nav > a.side-link[href="index.php"].active,
  html body .side-nav > a.side-link[href="index.php"].active:hover,
  html body.sidebar-collapsed .side-nav > a.side-link[href="index.php"],
  html body.sidebar-collapsed .side-nav > a.side-link[href="index.php"].active,
  html body.sidebar-collapsed .side-nav > a.side-link[href="index.php"].active:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }
}

/* ADI Header/Collapsed Sidebar Final Segregation v106
   - Header colors/text are independent from sidebar expanded/collapsed state.
   - Desktop topbar text stays black on the gradient.
   - Collapsed sidebar flyout active submenu is orange.
   - Collapsed sidebar flyout hover is soft orange, while the flyout panel stays light blue.
*/
:root {
  --adi-v106-header-left: #f5821f;
  --adi-v106-header-mid: #ff9f45;
  --adi-v106-header-right: #ffd7b0;
  --adi-v106-header-border: #f8b26a;
  --adi-v106-header-text: #111827;
  --adi-v106-active-orange-bg: linear-gradient(180deg, #ff8a00 0%, #f26b00 100%);
  --adi-v106-active-orange-solid: #f26b00;
  --adi-v106-hover-orange-soft: #ffead5;
  --adi-v106-hover-orange-text: #7c2d12;
  --adi-v106-flyout-bg: #eaf4ff;
  --adi-v106-flyout-title-bg: #dbeafe;
  --adi-v106-flyout-border: #bfdbfe;
}

@media (min-width: 761px) {
  /* Header belongs to the page header only; sidebar collapse must not override it. */
  html body header.topbar,
  html body .topbar,
  html body .topbar-header,
  html body .app-topbar,
  html body .app-header,
  html body .main-header,
  html body .navbar,
  html body.sidebar-collapsed header.topbar,
  html body.sidebar-collapsed .topbar,
  html body.sidebar-collapsed .topbar-header,
  html body.sidebar-collapsed .app-topbar,
  html body.sidebar-collapsed .app-header,
  html body.sidebar-collapsed .main-header,
  html body.sidebar-collapsed .navbar {
    background: linear-gradient(90deg, var(--adi-v106-header-left) 0%, var(--adi-v106-header-mid) 54%, var(--adi-v106-header-right) 100%) !important;
    background-color: var(--adi-v106-header-left) !important;
    background-image: linear-gradient(90deg, var(--adi-v106-header-left) 0%, var(--adi-v106-header-mid) 54%, var(--adi-v106-header-right) 100%) !important;
    border-bottom: 1px solid var(--adi-v106-header-border) !important;
    box-shadow: 0 2px 12px rgba(245, 130, 31, .16) !important;
  }

  /* Header child zones stay transparent in every desktop state. */
  html body .topbar-brand-zone,
  html body.sidebar-collapsed .topbar-brand-zone,
  html body .topbar .header-spacer,
  html body.sidebar-collapsed .topbar .header-spacer,
  html body .topbar .user-menu,
  html body.sidebar-collapsed .topbar .user-menu,
  html body .topbar .user-menu-btn,
  html body.sidebar-collapsed .topbar .user-menu-btn,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger,
  html body .topbar .user-avatar-icon,
  html body.sidebar-collapsed .topbar .user-avatar-icon {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
  }

  /* All desktop topbar text/icons stay black, both expanded and collapsed. */
  html body .topbar .df-brand-title,
  html body .topbar .df-brand-title-desktop,
  html body .topbar .df-brand-text-link,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body .topbar .user-meta strong,
  html body .topbar .user-meta span,
  html body .topbar .user-avatar-icon,
  html body .topbar .user-avatar-icon svg,
  html body .topbar .user-avatar-icon path,
  html body.sidebar-collapsed .topbar .df-brand-title,
  html body.sidebar-collapsed .topbar .df-brand-title-desktop,
  html body.sidebar-collapsed .topbar .df-brand-text-link,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body.sidebar-collapsed .topbar .user-meta strong,
  html body.sidebar-collapsed .topbar .user-meta span,
  html body.sidebar-collapsed .topbar .user-avatar-icon,
  html body.sidebar-collapsed .topbar .user-avatar-icon svg,
  html body.sidebar-collapsed .topbar .user-avatar-icon path {
    color: var(--adi-v106-header-text) !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    text-shadow: none !important;
  }

  /* Collapsed sidebar flyout list/title box is light blue. */
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-link[data-collapsed-title]::after,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group::after {
    background: var(--adi-v106-flyout-title-bg) !important;
    background-color: var(--adi-v106-flyout-title-bg) !important;
    background-image: none !important;
    border: 1px solid var(--adi-v106-flyout-border) !important;
    color: #111827 !important;
  }

  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu[hidden],
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu[hidden] {
    background: var(--adi-v106-flyout-bg) !important;
    background-color: var(--adi-v106-flyout-bg) !important;
    background-image: none !important;
    border: 1px solid var(--adi-v106-flyout-border) !important;
  }

  /* Active parent icon/button in collapsed sidebar is orange, never light blue. */
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.expanded > .side-group-btn,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.expanded > .side-group-btn:hover,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.expanded > .side-group-btn:focus,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group-btn.group-open,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group-btn.group-open:hover,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group-btn.group-open:focus,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-link.active:not([href="index.php"]),
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-link.active:not([href="index.php"]):hover,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-link.active:not([href="index.php"]):focus {
    background: var(--adi-v106-active-orange-bg) !important;
    background-color: var(--adi-v106-active-orange-solid) !important;
    background-image: var(--adi-v106-active-orange-bg) !important;
    border-color: var(--adi-v106-active-orange-solid) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  /* Active submenu inside collapsed flyout is orange. This also handles pages by current-page value. */
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link.active,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link.active,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link.active:hover,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link.active:hover,
  html body.sidebar-collapsed[data-current-page="rate_sea_freight"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_sea_freight"],
  html body.sidebar-collapsed[data-current-page="rate_road_freight"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_road_freight"],
  html body.sidebar-collapsed[data-current-page="rate_intersuller"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_intersuller"],
  html body.sidebar-collapsed[data-current-page="find_address"] aside#appSidebar.sidebar a.side-sub-link[href*="find_address"],
  html body.sidebar-collapsed[data-current-page="transport_eligible"] aside#appSidebar.sidebar a.side-sub-link[href*="transport_eligible"],
  html body.sidebar-collapsed[data-current-page="rate_management_sea"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_management_sea"],
  html body.sidebar-collapsed[data-current-page="rate_management_road"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_management_road"],
  html body.sidebar-collapsed[data-current-page="master_liner"] aside#appSidebar.sidebar a.side-sub-link[href*="master_liner"],
  html body.sidebar-collapsed[data-current-page="master_port"] aside#appSidebar.sidebar a.side-sub-link[href*="master_port"],
  html body.sidebar-collapsed[data-current-page="master_route"] aside#appSidebar.sidebar a.side-sub-link[href*="master_route"],
  html body.sidebar-collapsed[data-current-page="master_route_pic"] aside#appSidebar.sidebar a.side-sub-link[href*="master_route_pic"],
  html body.sidebar-collapsed[data-current-page="master_user"] aside#appSidebar.sidebar a.side-sub-link[href*="master_user"],
  html body.sidebar-collapsed[data-current-page="master_menu"] aside#appSidebar.sidebar a.side-sub-link[href*="master_menu"] {
    background: var(--adi-v106-active-orange-bg) !important;
    background-color: var(--adi-v106-active-orange-solid) !important;
    background-image: var(--adi-v106-active-orange-bg) !important;
    border-color: var(--adi-v106-active-orange-solid) !important;
    color: #ffffff !important;
    box-shadow: none !important;
  }

  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link.active *,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link.active *,
  html body.sidebar-collapsed[data-current-page="rate_sea_freight"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_sea_freight"] *,
  html body.sidebar-collapsed[data-current-page="rate_road_freight"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_road_freight"] *,
  html body.sidebar-collapsed[data-current-page="rate_intersuller"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_intersuller"] *,
  html body.sidebar-collapsed[data-current-page="find_address"] aside#appSidebar.sidebar a.side-sub-link[href*="find_address"] *,
  html body.sidebar-collapsed[data-current-page="transport_eligible"] aside#appSidebar.sidebar a.side-sub-link[href*="transport_eligible"] *,
  html body.sidebar-collapsed[data-current-page="rate_management_sea"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_management_sea"] *,
  html body.sidebar-collapsed[data-current-page="rate_management_road"] aside#appSidebar.sidebar a.side-sub-link[href*="rate_management_road"] *,
  html body.sidebar-collapsed[data-current-page="master_liner"] aside#appSidebar.sidebar a.side-sub-link[href*="master_liner"] *,
  html body.sidebar-collapsed[data-current-page="master_port"] aside#appSidebar.sidebar a.side-sub-link[href*="master_port"] *,
  html body.sidebar-collapsed[data-current-page="master_route"] aside#appSidebar.sidebar a.side-sub-link[href*="master_route"] *,
  html body.sidebar-collapsed[data-current-page="master_route_pic"] aside#appSidebar.sidebar a.side-sub-link[href*="master_route_pic"] *,
  html body.sidebar-collapsed[data-current-page="master_user"] aside#appSidebar.sidebar a.side-sub-link[href*="master_user"] *,
  html body.sidebar-collapsed[data-current-page="master_menu"] aside#appSidebar.sidebar a.side-sub-link[href*="master_menu"] * {
    color: #ffffff !important;
  }

  /* Hover only for non-active collapsed flyout rows: soft orange. */
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link:not(.active):hover,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link:not(.active):hover,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link:not(.active):focus,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link:not(.active):focus {
    background: var(--adi-v106-hover-orange-soft) !important;
    background-color: var(--adi-v106-hover-orange-soft) !important;
    background-image: none !important;
    color: var(--adi-v106-hover-orange-text) !important;
  }

  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link:not(.active):hover *,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link:not(.active):hover *,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group:hover > .side-submenu a.side-sub-link:not(.active):focus *,
  html body.sidebar-collapsed aside#appSidebar.sidebar .side-group.is-hovering > .side-submenu a.side-sub-link:not(.active):focus * {
    color: var(--adi-v106-hover-orange-text) !important;
  }

  /* Dashboard stays transparent in collapsed and expanded state. */
  html body .side-nav > a.side-link[href="index.php"],
  html body .side-nav > a.side-link[href="index.php"].active,
  html body .side-nav > a.side-link[href="index.php"].active:hover,
  html body.sidebar-collapsed .side-nav > a.side-link[href="index.php"],
  html body.sidebar-collapsed .side-nav > a.side-link[href="index.php"].active,
  html body.sidebar-collapsed .side-nav > a.side-link[href="index.php"].active:hover {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
  }
}

/* ADI Header Text Color Minor Fix v107
   Scope: header/topbar only.
   - Brand title stays white on gradient header.
   - User name/company/avatar stay black.
   - Independent from sidebar expanded/collapsed state. */
@media (min-width: 761px) {
  html body header.topbar .df-brand,
  html body header.topbar .df-brand-text-link,
  html body header.topbar .df-brand-title,
  html body header.topbar .df-brand-title-desktop,
  html body .topbar .df-brand,
  html body .topbar .df-brand-text-link,
  html body .topbar .df-brand-title,
  html body .topbar .df-brand-title-desktop,
  html body.sidebar-collapsed header.topbar .df-brand,
  html body.sidebar-collapsed header.topbar .df-brand-text-link,
  html body.sidebar-collapsed header.topbar .df-brand-title,
  html body.sidebar-collapsed header.topbar .df-brand-title-desktop,
  html body.sidebar-collapsed .topbar .df-brand,
  html body.sidebar-collapsed .topbar .df-brand-text-link,
  html body.sidebar-collapsed .topbar .df-brand-title,
  html body.sidebar-collapsed .topbar .df-brand-title-desktop {
    color: #ffffff !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .16) !important;
  }

  html body header.topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body header.topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body header.topbar .user-meta strong,
  html body header.topbar .user-meta span,
  html body header.topbar .user-avatar-icon,
  html body header.topbar .user-avatar-icon svg,
  html body header.topbar .user-avatar-icon path,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body .topbar .user-meta strong,
  html body .topbar .user-meta span,
  html body .topbar .user-avatar-icon,
  html body .topbar .user-avatar-icon svg,
  html body .topbar .user-avatar-icon path,
  html body.sidebar-collapsed header.topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body.sidebar-collapsed header.topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body.sidebar-collapsed header.topbar .user-meta strong,
  html body.sidebar-collapsed header.topbar .user-meta span,
  html body.sidebar-collapsed header.topbar .user-avatar-icon,
  html body.sidebar-collapsed header.topbar .user-avatar-icon svg,
  html body.sidebar-collapsed header.topbar .user-avatar-icon path,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta strong,
  html body.sidebar-collapsed .topbar .user-menu-btn.user-menu-avatar-trigger .user-meta span,
  html body.sidebar-collapsed .topbar .user-meta strong,
  html body.sidebar-collapsed .topbar .user-meta span,
  html body.sidebar-collapsed .topbar .user-avatar-icon,
  html body.sidebar-collapsed .topbar .user-avatar-icon svg,
  html body.sidebar-collapsed .topbar .user-avatar-icon path {
    color: #111827 !important;
    fill: currentColor !important;
    stroke: currentColor !important;
    text-shadow: none !important;
  }
}

/* User Management two-column editor */
.app-modal-user {
  width: min(1280px, calc(100vw - 36px));
  max-height: 92vh;
}

.app-modal-user .app-modal-close {
  top: 14px;
  right: 14px;
}

.user-editor-form {
  margin-top: 0;
}

.user-management-editor {
  display: grid;
  grid-template-columns: minmax(380px, 1fr) minmax(520px, 1.25fr);
  gap: 16px;
  align-items: stretch;
}

.user-editor-panel {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}

.user-info-panel {
  padding: 18px;
}

.user-editor-panel-title {
  margin-bottom: 16px;
}

.user-editor-panel-title h4,
.app-modal-user .permission-title h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--text);
}

.user-editor-panel-title p,
.app-modal-user .permission-title p {
  margin: 0;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--muted);
}

.user-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 16px;
}

.user-field-full {
  grid-column: 1 / -1;
}

.app-modal-user .compact-modal-form label {
  margin-top: 0;
  gap: 8px;
  font-size: 12px;
  font-weight: 800;
}

.app-modal-user .compact-modal-form input,
.app-modal-user .compact-modal-form select {
  min-height: 42px;
  padding: 10px 12px;
  font-size: 12px;
}

.password-auto-note {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 18px;
  padding: 14px;
  border: 1px solid #bfdbfe;
  border-radius: 12px;
  background: #f8fbff;
  color: #1e3a8a;
}

.password-auto-note[hidden] {
  display: none !important;
}

.password-auto-note strong {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 800;
}

.password-auto-note p {
  margin: 0;
  font-size: 12px;
  line-height: 1.45;
  color: #475569;
}

.password-auto-icon {
  width: 22px;
  height: 22px;
  min-width: 22px;
  border: 1px solid #2563eb;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #2563eb;
}

.password-reset-panel {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #e5e7eb;
}

.password-reset-panel[hidden] {
  display: none !important;
}

.password-reset-panel .btn-reset-password {
  background: #f97316;
  border-color: #f97316;
  color: #fff;
  box-shadow: 0 8px 18px rgba(249, 115, 22, 0.18);
}

.password-reset-panel .btn-reset-password:hover:not(:disabled) {
  background: #ea580c;
  border-color: #ea580c;
}

.password-reset-panel .btn-reset-password:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.password-reset-panel p {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: #64748b;
}

.app-modal-user .permission-section {
  grid-column: auto;
  margin-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.app-modal-user .permission-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
}

.permission-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.btn-permission-select,
.btn-permission-refresh {
  min-height: 36px;
  padding: 9px 14px;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.btn-permission-refresh {
  width: 40px;
  padding: 9px;
  font-size: 18px;
  line-height: 1;
}

.app-modal-user .permission-table-wrap {
  max-height: min(520px, 58vh);
  flex: 1;
  overflow: auto;
  position: relative;
}

.app-modal-user .permission-table {
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: 12px;
}

.app-modal-user .permission-table th:first-child,
.app-modal-user .permission-table td:first-child {
  width: 60%;
}

.app-modal-user .permission-table th:nth-child(n+2),
.app-modal-user .permission-table td:nth-child(n+2) {
  width: 10%;
  padding-left: 4px;
  padding-right: 4px;
}

.app-modal-user .permission-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f3f4f6;
  box-shadow: 0 1px 0 #e5e7eb;
}

.app-modal-user .permission-table th,
.app-modal-user .permission-table td {
  padding: 7px 12px;
}

.app-modal-user .permission-table th {
  font-weight: 700;
}

.app-modal-user .permission-table-compact tbody tr[data-menu-key] {
  height: 13px;
}

.app-modal-user .permission-table-compact tbody tr[data-menu-key] td {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 0.8;
  vertical-align: middle;
}

.app-modal-user .permission-table-compact tbody tr[data-menu-key] td:first-child {
  padding-left: 27px !important;
  font-size: 10.5px;
}

.app-modal-user .permission-table-compact .permission-group-row td {
  padding-top: 3px !important;
  padding-bottom: 3px !important;
  font-weight: 700;
}

.app-modal-user .permission-table-compact input[type="checkbox"] {
  width: 11px;
  height: 11px;
  margin: 0;
}

.app-modal-user .permission-row-disabled td,
.app-modal-user .permission-group-disabled td {
  color: #94a3b8;
}

.app-modal-user .permission-row-disabled input[type="checkbox"] {
  cursor: not-allowed;
  opacity: 0.55;
}

.user-form-actions {
  margin: 18px -22px -22px;
  padding: 16px 22px;
  background: #fff;
}

@media (max-width: 1100px) {
  .user-management-editor {
    grid-template-columns: 1fr;
  }

  .app-modal-user .permission-table-wrap {
    max-height: 360px;
  }
}

@media (max-width: 700px) {
  .user-info-grid {
    grid-template-columns: 1fr;
  }
}

/* First login password change lock */
.side-link.disabled,
.side-sub-link.disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

.sidebar-locked-note {
  margin: 10px 12px 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(245, 158, 11, 0.12);
  color: #92400e;
  font-size: 12px;
  line-height: 1.35;
}


/* Registration custom email confirmation modal */
.auth-confirm-modal .auth-confirm-box {
  width: min(460px, 100%);
  padding: 26px;
  text-align: center;
  overflow: visible;
}

.auth-confirm-icon {
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  border-radius: 999px;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #ea580c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 20px;
}

.auth-confirm-box h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  color: #0f172a;
}

.auth-confirm-box p {
  margin: 0;
  color: #475569;
  font-size: 13px;
  line-height: 1.5;
}

.auth-confirm-email {
  margin: 16px 0 20px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #dbe3ef;
  color: #0f172a;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.auth-confirm-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

@media (max-width: 520px) {
  .auth-confirm-actions {
    flex-direction: column-reverse;
  }
  .auth-confirm-actions .btn {
    width: 100%;
  }
}


/* Clean Route Management / Route PIC shell: remove page outer card box. */
.workspace-shell.route-module-shell,
.workspace-shell.route-pic-module-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}


/* Clean Master Data Liner / Ports shell: remove page outer card box. */
.workspace-shell.master-liner-module-shell,
.workspace-shell.master-port-module-shell {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
  display: block !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  padding: 0 !important;
}

/* Domestic Freight standard SVG icon masks v1.0 */
.df-icon-mask {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  background-color: currentColor !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-image: var(--df-icon-url) !important;
  mask-image: var(--df-icon-url) !important;
  font-size: 0 !important;
  line-height: 0 !important;
}

.df-icon-add { --df-icon-url: url('../img/icons/df-icon-add.svg'); }
.df-icon-add-user { --df-icon-url: url('../img/icons/df-icon-add-user.svg'); }
.df-icon-add-pic { --df-icon-url: url('../img/icons/df-icon-add-pic.png'); }
.df-icon-edit { --df-icon-url: url('../img/icons/df-icon-edit.svg'); }
.df-icon-delete { --df-icon-url: url('../img/icons/df-icon-delete.svg'); }
.df-icon-save { --df-icon-url: url('../img/icons/df-icon-save.svg'); }
.df-icon-cancel { --df-icon-url: url('../img/icons/df-icon-cancel.svg'); }
.df-icon-exit,
.df-icon-quit { --df-icon-url: url('../img/icons/df-icon-exit.svg'); }
.df-icon-export { --df-icon-url: url('../img/icons/df-icon-export.svg'); }
.df-icon-convert { --df-icon-url: url('../img/icons/df-icon-convert.svg'); }
.df-icon-dashboard { --df-icon-url: url('../img/icons/df-icon-dashboard.svg'); }
.df-icon-rate-information { --df-icon-url: url('../img/icons/df-icon-rate-information.svg'); }
.df-icon-route-management { --df-icon-url: url('../img/icons/df-icon-route-management.svg'); }
.df-icon-master-data { --df-icon-url: url('../img/icons/df-icon-master-data.svg'); }
.df-icon-system { --df-icon-url: url('../img/icons/df-icon-system.svg'); }

.df-icon-link { --df-icon-url: url('../img/icons/df-icon-link.svg'); }
.df-icon-link-pic { --df-icon-url: url('../img/icons/df-icon-link-pic.png'); }
.df-icon-unlink { --df-icon-url: url('../img/icons/df-icon-unlink.svg'); }
.df-icon-cost { --df-icon-url: url('../img/icons/df-icon-cost.svg'); }
.df-icon-users { --df-icon-url: url('../img/icons/df-icon-users.svg'); }

.side-link > .side-icon.df-icon-mask,
.side-group-btn .side-icon.df-icon-mask {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  color: #fff !important;
}

.mobile-sidebar-logout .side-icon.df-icon-mask {
  width: 20px !important;
  min-width: 20px !important;
  height: 20px !important;
}


/* v2026-05-3: mobile auth pages start tight to TOP. */
@media (max-width: 900px) {
  html body.auth-page {
    min-height: 100dvh !important;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
  }

  html body.auth-page .auth-brand {
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
  }

  html body.auth-page .auth-brand .auth-adi-brand {
    margin: 0 !important;
    padding: 10px 14px !important;
  }

  html body.auth-page .auth-brand-line,
  html body.auth-page .auth-brand h1,
  html body.auth-page .auth-brand p {
    display: none !important;
  }

  html body.auth-page .auth-main,
  html body.auth-change-password-page .auth-main,
  html body.auth-change-password-page .auth-change-main,
  html body.auth-register-page .auth-main {
    min-height: 0 !important;
    height: auto !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0 10px 16px !important;
  }

  html body.auth-page .auth-card,
  html body.auth-register-page .auth-card.auth-card-wide,
  html body.auth-change-password-page .auth-change-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
    border-radius: 0 0 16px 16px !important;
    padding-top: 22px !important;
  }

  html body.auth-register-page .auth-card.auth-card-wide h2,
  html body.auth-page .auth-card h2 {
    margin-top: 0 !important;
  }

  html body > .app-main > .page-card.narrow-card:first-child,
  html body > .app-main > header.topbar + .page-card.narrow-card {
    margin-top: 0 !important;
  }
}

/* v2026-05-5: desktop/web profile dropdown reliability fix. */
@media (min-width: 901px) {
  html body .topbar .user-menu,
  html body header.topbar .user-menu {
    position: relative !important;
    z-index: 2147480000 !important;
    pointer-events: auto !important;
  }

  html body .topbar .user-menu-btn[data-user-menu],
  html body header.topbar .user-menu-btn[data-user-menu] {
    pointer-events: auto !important;
    cursor: pointer !important;
  }

  html body .topbar .user-menu-list,
  html body header.topbar .user-menu-list {
    z-index: 2147480001 !important;
    pointer-events: auto !important;
  }

  html body .topbar .user-menu-list[hidden],
  html body header.topbar .user-menu-list[hidden] {
    display: none !important;
  }

  html body .topbar .user-menu.is-open .user-menu-list:not([hidden]),
  html body header.topbar .user-menu.is-open .user-menu-list:not([hidden]) {
    display: block !important;
  }
}


/* v2026-05-6: final desktop/web profile dropdown controller CSS.
   This is desktop-only and does not affect the native mobile shell. */
@media (min-width: 901px) {
  html body header.topbar .user-menu[data-web-profile-menu],
  html body .topbar .user-menu[data-web-profile-menu],
  html body header.topbar .user-menu,
  html body .topbar .user-menu {
    position: relative !important;
    z-index: 2147483000 !important;
    pointer-events: auto !important;
    overflow: visible !important;
  }

  html body header.topbar .user-menu-btn[data-user-menu],
  html body .topbar .user-menu-btn[data-user-menu],
  html body #webProfileMenuButton {
    pointer-events: auto !important;
    cursor: pointer !important;
    user-select: none !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 2147483001 !important;
  }

  html body header.topbar .user-menu-list[data-web-profile-list],
  html body .topbar .user-menu-list[data-web-profile-list],
  html body #webProfileMenuList {
    position: absolute !important;
    right: 0 !important;
    top: calc(100% + 8px) !important;
    left: auto !important;
    min-width: 236px !important;
    width: max-content !important;
    max-width: 320px !important;
    z-index: 2147483002 !important;
    pointer-events: auto !important;
    background: #ffffff !important;
    border: 1px solid #d8e0ec !important;
    border-radius: 10px !important;
    box-shadow: 0 18px 42px rgba(15, 23, 42, .22) !important;
  }

  html body header.topbar .user-menu-list[data-web-profile-list][hidden],
  html body .topbar .user-menu-list[data-web-profile-list][hidden],
  html body #webProfileMenuList[hidden] {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  html body header.topbar .user-menu[data-profile-open="1"] .user-menu-list[data-web-profile-list],
  html body .topbar .user-menu[data-profile-open="1"] .user-menu-list[data-web-profile-list],
  html body .user-menu[data-profile-open="1"] #webProfileMenuList {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

/* v2026-05-8: desktop/web update prompt, bottom-right only. */
@media (min-width: 901px) {
  html body .df-web-update-panel {
    position: fixed !important;
    right: 24px !important;
    bottom: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147482000 !important;
    width: auto !important;
    max-width: min(360px, calc(100vw - 48px)) !important;
    pointer-events: none !important;
  }

  html body .df-web-update-panel[hidden] {
    display: none !important;
  }

  html body .df-web-update-card {
    width: min(348px, calc(100vw - 48px)) !important;
    padding: 18px 18px 16px !important;
    border: 1px solid rgba(251, 113, 0, .42) !important;
    border-radius: 8px !important;
    background: #fff7ed !important;
    box-shadow: 0 20px 44px rgba(15, 23, 42, .18) !important;
    pointer-events: auto !important;
  }

  html body .df-web-update-card h2 {
    margin: 0 0 10px !important;
    color: #b45309 !important;
    font-size: 19px !important;
    line-height: 1.2 !important;
    font-weight: 800 !important;
    letter-spacing: .01em !important;
  }

  html body .df-web-update-card p {
    margin: 0 0 14px !important;
    color: #3f3f46 !important;
    font-size: 15px !important;
    line-height: 1.35 !important;
  }

  html body .df-web-update-button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 90px !important;
    min-height: 36px !important;
    padding: 8px 18px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: #f97316 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    box-shadow: 0 10px 22px rgba(249, 115, 22, .25) !important;
  }

  html body .df-web-update-button:hover {
    filter: brightness(.98) !important;
  }

  html body .df-web-update-button:active {
    transform: translateY(1px) !important;
  }
}

@media (max-width: 900px) {
  html body .df-web-update-panel {
    display: none !important;
  }
}

/* Clean route navigation v20260523: sidebar/tabs use buttons so the browser
   does not show index.php?page=... in the bottom-left hover status text. */
.side-nav {
  border: 0;
  margin: 0;
  padding: 0;
}

button.side-link,
button.side-sub-link,
button.df-mobile-native-rate-link,
button.op-tab {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font: inherit;
  color: inherit;
  text-align: inherit;
  cursor: pointer;
}

button.side-link,
button.side-sub-link {
  width: 100%;
  background: transparent;
}

button.side-link:disabled,
button.side-sub-link:disabled {
  cursor: default;
}

button.df-mobile-native-rate-link,
button.op-tab {
  background: transparent;
}

/* --------------------------------------------------------------------------
   Global notification standardization
   Legacy inline/page notices are converted by assets/js/app.js to .df-toast.
   Keep these legacy boxes hidden so every form/page uses one standard toast style.
   -------------------------------------------------------------------------- */
.alert:not([data-keep-inline]),
.mfs-alert:not([data-keep-inline]),
.route-pic-alert:not([data-keep-inline]),
.lm-alert:not([data-keep-inline]),
.lm-notice:not([data-keep-inline]),
.pm-alert:not([data-keep-inline]),
.pm-page-notice:not([data-keep-inline]),
.pm-charge-notice:not([data-keep-inline]),
.tv-alert:not([data-keep-inline]),
.tv-notice:not([data-keep-inline]),
.um-alert:not([data-keep-inline]),
.user-alert:not([data-keep-inline]),
.op-alert:not([data-keep-inline]),
.rr-alert:not([data-keep-inline]),
.menu-alert:not([data-keep-inline]),
.pc-alert:not([data-keep-inline]),
.bri-alert:not([data-keep-inline]),
.msg-success:not([data-keep-inline]),
.msg-error:not([data-keep-inline]),
.msg-danger:not([data-keep-inline]),
.msg-warning:not([data-keep-inline]),
[data-df-alert]:not([data-keep-inline]),
[data-notification]:not([data-keep-inline]),
[data-toast-message]:not([data-keep-inline]) {
  display: none !important;
}