:root {
  /* Brand palette */
  --brand-navy: #2c3649;    /* Navy Grey */
  --brand-blue: #02c7ff;    /* Zima Blue */
  --brand-red: #c74634;     /* Oracle Red */
  --brand-red-dark: #a63a2b;
  --brand-outer: #4b4e63;   /* Outer Space */
  --brand-silver: #f6f7f9;  /* Silver White */

  /* UI tokens */
  /* Light sidebar to match modern dashboard */
  --sidebar-bg: #ffffff;
  --sidebar-text: #4b4e63;
  --sidebar-active: #0b2133;
  --accent: var(--brand-red);
  --accent-alpha: rgba(199, 70, 52, 0.20);
  --border: #e6e9f0;
  --text: var(--brand-navy);
  /* Layout tokens */
  /* Wider content area across the app */
  --content-max-width: none;
  --cell-max-width: 280px;
  --page-min-height: calc(100vh - 7rem);
  /* Charts */
  --chart-bg: #ffffff;
  --chart-axis: #e6e9f0;
  --chart-bar: var(--accent);
  --sidebar-width: 16rem;
  --sidebar-collapsed-width: 4.5rem;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  color: var(--text);
  /* Match login page background */
  background: #fff;
}

/* Skip link */
.skip-link { position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }
.skip-link:focus { position: absolute; left: 12px; top: 12px; width: auto; height: auto; padding: 8px 10px; background:#fff; border:1px solid var(--accent); border-radius: 8px; z-index: 1001; }

/* Focus visible */
*:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; }
.layout-container {
  width: 100%;
  max-width: none;
  min-height: var(--page-min-height);
  margin: 0;
  padding-left: clamp(8px, 2vw, 24px);
  padding-right: clamp(8px, 2vw, 24px);
}
.max-w-7xl { max-width: var(--content-max-width) !important; }
.max-w-6xl { max-width: 1200px !important; }
.app-shell { transition: none; }
@media (min-width: 1024px) {
  .app-shell { margin-left: var(--sidebar-width); }
}
#sidebar { width: var(--sidebar-width); }
body.sidebar-ui-ready .app-shell { transition: margin-left .2s ease; }
body.sidebar-collapsed { --sidebar-width: var(--sidebar-collapsed-width); }
@media (max-width: 1023px) {
  body.sidebar-collapsed { --sidebar-width: 16rem; }
  #sidebar {
    transform: translateX(-100%);
    transition: none;
  }
  #sidebar.translate-x-0 {
    transform: translateX(0);
  }
  #sidebar.-translate-x-full {
    transform: translateX(-100%);
  }
  body.sidebar-ui-ready #sidebar {
    transition: transform .2s ease;
  }
}
@media (min-width: 1024px) {
  #sidebar {
    transform: none !important;
    transition: none;
  }
  body.sidebar-ui-ready #sidebar {
    transition: width .2s ease;
  }
  body.sidebar-collapsed #sidebar .sidebar-label,
  body.sidebar-collapsed #sidebar .sidebar-section-title,
  body.sidebar-collapsed #sidebar .sidebar-expanded-only { display: none !important; }
  body.sidebar-collapsed #sidebar .px-6 { padding-left: 1rem !important; padding-right: 1rem !important; }
  body.sidebar-collapsed #sidebar a.group {
    justify-content: center;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  body.sidebar-collapsed #sidebar a.group i { margin-right: 0 !important; }
}
.nav-item { display: block; padding: 10px 12px; border-radius: 10px; color: var(--sidebar-text); text-decoration: none; margin: 4px 6px; transition: background .15s ease, color .15s ease; position: relative; }
.nav-item:hover { background: #f3f6fb; color: var(--sidebar-active); }
.nav-item.active { background: #eef7ff; color: var(--sidebar-active); box-shadow: inset 2px 0 0 var(--accent); }

.content { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.content, main.content, #main-content, #main-content-wrapper { min-width: 0; }
.topnav { display:flex; justify-content:space-between; align-items:center; background:transparent; padding: 0 8px; gap:12px; flex: 1; }
.topnav .tabs { display:flex; gap:10px; align-items:center; flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling: touch; }
.topnav .cta { display:flex; gap:10px; align-items:center; }
.topnav .nav-item { text-decoration:none; color:inherit; padding:8px 14px; border-radius:999px; border:1px solid var(--border); background:#fff; }
.topnav .nav-item, .topnav .cta { white-space: nowrap; }
.topnav .nav-item.active { box-shadow: 0 0 0 2px rgba(2,199,255,0.35) inset; }
body.theme-dark .topnav { background:transparent; }

/* Gradient CTA */
.btn.gradient { background: linear-gradient(135deg, #6a5cf0, #8ad3ff); color:#fff; border:0; padding:9px 16px; border-radius:999px; font-weight:800; box-shadow: 0 6px 18px rgba(106,92,240,0.25); }
.btn.gradient:hover { filter: brightness(1.05); }
.topbar { position: sticky; top: 0; left: 0; right: 0; z-index: 120; background: #0f172a; }
.topbar.topbar--compact #header { padding-top: 0.75rem; padding-bottom: 0.75rem; box-shadow: 0 20px 35px rgba(15,22,36,0.45); }
  @media (max-width: 640px) {
  .topbar { padding: 0; }
  }
  .title { font-size: 20px; font-weight: 800; }
  .spacer { flex: 1; }
.search input[type=text] { padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: #f6f8fb; }
.search input[type=text]:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-alpha); }
.search button { margin-left: 8px; padding: 8px 12px; border: 0; background: var(--accent); color: #0b2133; border-radius: 999px; cursor: pointer; font-weight: 800; min-width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center; }
.search button:hover { filter: brightness(1.05); }

.page-body { padding: clamp(16px, 4vw, 32px); width: min(100%, var(--content-max-width)); min-height: var(--page-min-height); max-width: var(--content-max-width); margin: 0 auto; overflow-x: auto; }
.crm-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:10px 12px; box-shadow: 0 8px 24px rgba(17,33,51,.06); margin-bottom:10px; }
.crm-toolbar .left, .crm-toolbar .right { display:flex; align-items:center; gap:10px; }
.crm-toolbar .muted { color:#667; font-size:12px; margin-right:6px; }
.crm-toolbar .pager-compact { display:flex; align-items:center; gap:8px; }
.crm-toolbar .pp { padding:6px 8px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.btn.icon { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; }
.btn.primary { background: linear-gradient(180deg, #6f7bf8 0%, #4f61f3 100%); color:#fff; border:0; padding:8px 14px; border-radius:8px; font-weight:700; box-shadow:0 4px 10px rgba(79,97,243,.25); }
.btn.primary:hover { filter: brightness(1.05); }
.dropdown { position:relative; }
.dropdown .menu { position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow:0 10px 28px rgba(17,33,51,.15); min-width:180px; padding:6px; z-index:20; }
.menu .menu-item { display:block; width:100%; text-align:left; background:transparent; border:0; padding:8px 10px; border-radius:8px; cursor:pointer; color:#223; text-decoration:none; }
.menu .menu-item:hover { background:#f2f6fb; }
.breadcrumbs { font-size: 12px; color:#7a8798; margin: 6px 22px 0; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.actions { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.btn { background: var(--accent); color: #fff; padding: 9px 14px; border-radius: 10px; text-decoration: none; display: inline-block; border: 0; font-weight: 700; box-shadow: 0 2px 0 rgba(11,33,51,0.08); }

/* ── Save button ─────────────────────────────────────────────────────────── */
.btn-save {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #2090ea 0%, #0068c2 100%);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 1px 3px rgba(0,80,180,.28), inset 0 1px 0 rgba(255,255,255,.18);
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, box-shadow .15s, transform .1s;
  letter-spacing: .2px;
  user-select: none;
  text-decoration: none;
}
.btn-save:not(:disabled):not(.opacity-50):hover {
  background: linear-gradient(180deg, #1d88e0 0%, #005fb5 100%);
  box-shadow: 0 3px 9px rgba(0,80,180,.38), inset 0 1px 0 rgba(255,255,255,.18);
  transform: translateY(-1px);
}
.btn-save:not(:disabled):not(.opacity-50):active {
  background: linear-gradient(180deg, #0068c2 0%, #004e99 100%);
  box-shadow: 0 1px 2px rgba(0,80,180,.18), inset 0 1px 2px rgba(0,0,0,.08);
  transform: translateY(0);
}
.btn-save.opacity-50,
.btn-save:disabled {
  background: #f3f2f1 !important;
  color: #b0adab !important;
  border-color: #e1dfdd !important;
  box-shadow: none !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  transform: none !important;
}
.btn:hover { filter: brightness(1.05); }
.btn.secondary { background: #e5e9f1; color: var(--brand-outer); }
.btn.danger, .btn.danger:hover { background: var(--brand-red); color:#fff; }
.meta { color: #667; }

/* Tabs bar */
.tabsbar { display:flex; gap:10px; margin: 10px 0 12px; }
.tabsbar .tab { display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:20px; background:#fff; color:inherit; text-decoration:none; font-weight:700; }
.tabsbar .tab.active { background:#f6f8fb; }

/* KPI cards */
.kpi-row { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-bottom: 12px; }
.kpi-card { display:flex; gap:12px; align-items:center; background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; box-shadow: 0 6px 20px rgba(17,33,51,0.06); }
.kpi-icon { width:36px; height:36px; border-radius:10px; background:#f3f6fb; display:flex; align-items:center; justify-content:center; }
.kpi-label { font-size:12px; color:#7a8798; }
.kpi-value { font-size:22px; font-weight:800; }

/* Filters bar */
.filtersbar { display:flex; align-items:center; justify-content:space-between; gap:10px; margin: 6px 0 12px; }
.filter-left { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; font-size:12px; color:#4b4e63; }
.input.search-inline input { padding:9px 12px; border:1px solid var(--border); border-radius:8px; background:#fff; }
.input.search-inline input:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-alpha); }

.table-wrap { background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 8px 30px rgba(17,33,51,0.06); overflow-x: auto; overflow-y: hidden; }
table.grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
table.grid thead th { text-align: left; font-weight: 600; color: #5a6b85; background: #f9fbfe; border-bottom: 1px solid var(--border); padding: 10px 12px; }
table.grid thead th { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: var(--cell-max-width); position: relative; }
table.grid tbody td { overflow: hidden; overflow-wrap: break-word; word-break: break-word; max-width: var(--cell-max-width); position: relative; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.grid tbody tr:hover { background: #f7fafc; }
table.grid tbody tr.selected { background: rgba(199,70,52,0.10); box-shadow: inset 0 0 0 1px rgba(199,70,52,0.35); }
.name { color: var(--accent); }
.name, td.name { max-width: 400px; }
.link { color: var(--accent); cursor: default; }
.name a { color: inherit; text-decoration: none; }
.name a:hover { text-decoration: underline; }

/* Inline row actions */
.row-actions { display: inline-flex; gap: 6px; align-items: center; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
tr.selected .row-actions { opacity: 1; pointer-events: auto; }

/* Hide built-in action buttons until row is selected */
table.grid tbody td:last-child .btn,
table.grid tbody td:last-child form { opacity: 0; pointer-events: none; transition: opacity .12s ease; }
table.grid tbody tr.selected td:last-child .btn,
table.grid tbody tr.selected td:last-child form { opacity: 1; pointer-events: auto; }
.empty { text-align: center; color: #8897aa; padding: 24px; }

/* Dashboard cards */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin: 10px 0 18px;
}
.kpi-card {
  border-radius: 14px;
  padding: 16px;
  color: #fff;
  box-shadow: 0 8px 24px rgba(17,33,51,0.10);
}
.kpi-card .kpi-label { font-weight: 700; opacity: .9; margin-bottom: 6px; }
.kpi-card .kpi-value { font-size: 28px; font-weight: 800; }
.kpi-card:nth-child(1) { background: linear-gradient(135deg, #7c4dff, #7e57c2); }
.kpi-card:nth-child(2) { background: linear-gradient(135deg, #ff7043, #ff8a65); }
.kpi-card:nth-child(3) { background: linear-gradient(135deg, #29b6f6, #4dd0e1); }
.kpi-card:nth-child(4) { background: linear-gradient(135deg, #26a69a, #66bb6a); }

.dash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 8px 0 18px;
}
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 8px 30px rgba(17,33,51,0.06);
}
.card-title { font-weight: 800; margin-bottom: 10px; }
.table-wrap .grid .th-actions { text-align:right; }
.table-wrap .grid .clip { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend { display:flex; gap:12px; color:#667; font-size:12px; margin-bottom:8px; }
.legend .dot { width:10px; height:10px; border-radius:5px; display:inline-block; margin-right:6px; }
.bars .bar-row { display:flex; align-items:center; gap:10px; margin:6px 0; }
.bars .bar { height:10px; border-radius:6px; min-width: 6px; }
.bar-label { font-size:12px; color:#667; }

@media (max-width: 1024px) {
  .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dash-grid { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  .page-body { padding: clamp(12px, 5vw, 20px); }
  .form-grid, .kv-grid { grid-template-columns: 1fr; }
  .contact-layout { grid-template-columns: 1fr; }
  .kpi-row { grid-template-columns: 1fr; }
  .actions { flex-wrap: wrap; }
.tabbar { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table.grid thead th, table.grid tbody td { max-width: none; }
}

/* Density compact */
/* Sub-tabs used on record edit pages */
.sub-tabs { display:flex; gap:18px; align-items:center; border-bottom:1px solid var(--border); margin: 10px 0 12px; }
.sub-tabs .nav-item { display:inline-block; padding:10px 4px; border:0; border-radius:0; background:transparent; color:inherit; text-decoration:none; position:relative; }
.sub-tabs .nav-item.active { color: var(--accent); }
.sub-tabs .nav-item.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px; height:3px; background: var(--accent); border-radius:2px; }
.tab-panel { margin-top: 8px; }
.tab-panel[hidden] { display: none; }
body.density-compact .topbar { background: #0f172a; }
body.density-compact .topbar.topbar--compact #header { padding-top: 0.65rem; padding-bottom: 0.65rem; }
body.density-compact .page-body { padding: 10px 14px; }
body.density-compact .btn { padding: 6px 10px; border-radius: 8px; }
body.density-compact table.grid thead th, 
body.density-compact table.grid tbody td { padding: 6px 8px; }
body.density-compact .form-grid { gap: 8px 10px; }
body.density-compact .tab { padding:6px 10px; }

/* Contacts grid column sizing */
.col-photo { width: var(--col-photo, 56px); }
.col-full_name { width: var(--col-full_name, 260px); }
.col-account { width: var(--col-account, 220px); }
.col-position { width: var(--col-position, 220px); }
.col-work_phone { width: var(--col-work_phone, 140px); }
.col-mobile_phone { width: var(--col-mobile_phone, 150px); }
.col-email { width: var(--col-email, 260px); }
.col-created_at { width: var(--col-created_at, 150px); }

/* Column resize handle */
.col-resize-handle { position: absolute; right: 0; top: 0; bottom: 0; width: 6px; cursor: col-resize; }
.resizable { position: relative; }
.resizable:hover .col-resize-handle { background: linear-gradient(to right, transparent 0, rgba(0,0,0,0.08) 60%, transparent 100%); }

/* Responsive tweaks: progressively hide less important columns */
@media (max-width: 1024px) {
  table.grid .col-position,
  table.grid .col-work_phone { display: none; }
}
@media (max-width: 840px) {
  table.grid .col-account,
  table.grid .col-email { display: none; }
}
@media (max-width: 640px) {
  table.grid .col-created_at { display: none; }
}
@media (max-width: 480px) {
  table.grid .col-mobile_phone { display: none; }
}

/* Companies grid sizing */
table.grid.companies-table th:nth-child(1),
table.grid.companies-table td:nth-child(1) { width: var(--col-name, 260px); }
table.grid.companies-table th:nth-child(2),
table.grid.companies-table td:nth-child(2) { width: var(--col-email, 260px); }
table.grid.companies-table th:nth-child(3),
table.grid.companies-table td:nth-child(3) { width: var(--col-phone, 160px); }
table.grid.companies-table th:nth-child(4),
table.grid.companies-table td:nth-child(4) { width: var(--col-website, 240px); }
table.grid.companies-table th:nth-child(5),
table.grid.companies-table td:nth-child(5) { width: var(--col-created_at, 150px); }
@media (max-width: 1024px) { table.grid.companies-table th:nth-child(4), table.grid.companies-table td:nth-child(4) { display:none; } }
@media (max-width: 840px) { table.grid.companies-table th:nth-child(3), table.grid.companies-table td:nth-child(3) { display:none; } }
@media (max-width: 640px) { table.grid.companies-table th:nth-child(2), table.grid.companies-table td:nth-child(2) { display:none; } }
@media (max-width: 480px) { table.grid.companies-table th:nth-child(5), table.grid.companies-table td:nth-child(5) { display:none; } }

/* Deals grid sizing */
table.grid.deals-table th:nth-child(1),
table.grid.deals-table td:nth-child(1) { width: var(--col-title, 280px); }
table.grid.deals-table th:nth-child(2),
table.grid.deals-table td:nth-child(2) { width: var(--col-amount, 120px); }
table.grid.deals-table th:nth-child(3),
table.grid.deals-table td:nth-child(3) { width: var(--col-status, 140px); }
table.grid.deals-table th:nth-child(4),
table.grid.deals-table td:nth-child(4) { width: var(--col-created_at, 150px); }
@media (max-width: 840px) { table.grid.deals-table th:nth-child(4), table.grid.deals-table td:nth-child(4) { display:none; } }
@media (max-width: 640px) { table.grid.deals-table th:nth-child(2), table.grid.deals-table td:nth-child(2) { display:none; } }

/* Activities grid sizing */
table.grid.activities-table th:nth-child(1),
table.grid.activities-table td:nth-child(1) { width: var(--col-type, 110px); }
table.grid.activities-table th:nth-child(2),
table.grid.activities-table td:nth-child(2) { width: var(--col-subject, 280px); }
table.grid.activities-table th:nth-child(3),
table.grid.activities-table td:nth-child(3) { width: var(--col-status, 140px); }
table.grid.activities-table th:nth-child(4),
table.grid.activities-table td:nth-child(4) { width: var(--col-due_date, 160px); }
@media (max-width: 840px) { table.grid.activities-table th:nth-child(4), table.grid.activities-table td:nth-child(4) { display:none; } }
@media (max-width: 640px) { table.grid.activities-table th:nth-child(1), table.grid.activities-table td:nth-child(1) { display:none; } }
@media (max-width: 480px) { table.grid.activities-table th:nth-child(3), table.grid.activities-table td:nth-child(3) { display:none; } }

/* Products grid sizing */
table.grid.products-table th:nth-child(1),
table.grid.products-table td:nth-child(1) { width: var(--col-name, 280px); }
table.grid.products-table th:nth-child(2),
table.grid.products-table td:nth-child(2) { width: var(--col-code, 160px); }
table.grid.products-table th:nth-child(3),
table.grid.products-table td:nth-child(3) { width: var(--col-price, 140px); }
table.grid.products-table th:nth-child(4),
table.grid.products-table td:nth-child(4) { width: var(--col-currency, 120px); }
table.grid.products-table th:nth-child(5),
table.grid.products-table td:nth-child(5) { width: var(--col-active, 110px); }
@media (max-width: 1024px) { table.grid.products-table th:nth-child(4), table.grid.products-table td:nth-child(4) { display:none; } }
@media (max-width: 840px) { table.grid.products-table th:nth-child(5), table.grid.products-table td:nth-child(5) { display:none; } }

/* Dark theme */
body.theme-dark { background: #0f141a; color: #dbe1e8; }
body.theme-dark .topbar { background: #080f1c; }
body.theme-dark .topbar.topbar--compact #header { box-shadow: 0 24px 40px rgba(0,0,0,0.55); }
body.theme-dark .logo { color:#fff; }
body.theme-dark .nav-item { color:#c0c9d2; }
body.theme-dark .nav-item:hover { background:#101722; color:#fff; }
body.theme-dark .nav-item.active { background: rgba(199,70,52,0.15); box-shadow: inset 2px 0 0 var(--accent); }
body.theme-dark .page-body, 
body.theme-dark .form, 
body.theme-dark .table-wrap, 
body.theme-dark .contact-aside, 
body.theme-dark .contact-main .card { background:#111922; border-color:#223040; }
body.theme-dark table.grid thead th { background:#0e1520; color:#c0c9d2; border-bottom-color:#223040; }
body.theme-dark .pager .page { background:#111922; border-color:#223040; color:#c0c9d2; }
body.theme-dark .btn.secondary { background:#223040; color:#dbe1e8; }
body.theme-dark .btn.danger { background:#a63a2b; color:#fff; }
body.theme-dark .search input[type=text] { background:#0e1520; color:#dbe1e8; border-color:#223040; }
/* Dark charts */
body.theme-dark { --chart-bg: #111922; --chart-axis: #223040; --chart-bar: var(--accent); }

.pager { display: flex; gap: 6px; padding: 12px 4px; }
.pager .page { padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px; background: #fff; text-decoration: none; color: inherit; }
.pager .current { background: rgba(199,70,52,0.12); border-color: rgba(199,70,52,0.35); }

.form { background: #fff; padding: 16px; border: 1px solid var(--border); border-radius: 8px; max-width: 900px; }
.form-row { display: grid; grid-template-columns: 180px 1fr; gap: 12px; align-items: center; margin-bottom: 12px; }
.form-row input, .form-row select { padding: 12px 14px; border: 1px solid #c8c6c4; border-bottom-color:#a19f9d; border-radius: 8px; background:#f3f2f1; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.form-row input:focus, .form-row select:focus { outline: none; border-color: #c8c6c4; box-shadow: inset 0 -2px 0 #0078d4; background:#f3f2f1; }
.form-row label { font-weight: 700; color: #4b4e63; }

/* Inline card forms (kv-form) */
.field { position: relative; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 18px 14px 10px;
  border: 1px solid #c8c6c4;
  border-bottom-color:#a19f9d;
  border-radius: 8px;
  background:#f3f2f1;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: #c8c6c4;
  box-shadow: inset 0 -2px 0 #0078d4;
  background:#f3f2f1;
}
.field input::placeholder, .field textarea::placeholder { color: transparent; }
.field label.float { position: absolute; left: 12px; top: 12px; color:#97a2b2; pointer-events: none; transition: all .15s ease; background: transparent; padding: 0 4px; }
.field input:focus + label.float,
.field textarea:focus + label.float,
.field select:focus + label.float,
.field input:not(:placeholder-shown) + label.float,
.field textarea:not(:placeholder-shown) + label.float { top: -7px; font-size: 11px; color: var(--brand-outer); background: #fff; }
.field select + label.float { top: -7px; font-size: 11px; }
.kv-form .form-grid .field { margin-bottom: 8px; }
.kv-form .form-grid label { font-weight: 700; color:#4b4e63; }
.kv-form .form-grid input,
.kv-form .form-grid select,
.kv-form .form-grid textarea { padding: 12px 14px; border: 1px solid #c8c6c4; border-bottom-color:#a19f9d; border-radius: 8px; background:#f3f2f1; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.kv-form .form-grid input:focus,
.kv-form .form-grid select:focus,
.kv-form .form-grid textarea:focus { outline: none; border-color: #c8c6c4; box-shadow: inset 0 -2px 0 #0078d4; background:#f3f2f1; }
.kv-form .form-actions { margin-top: 10px; }

/* Consistent placeholders */
input::placeholder, textarea::placeholder { color:#97a2b2; }

/* Dynamics-like field styling across the app */
:where(input, textarea, select).d365-field,
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]) {
  background: #f3f2f1;
  border: 1px solid #c8c6c4;
  border-bottom-color: #a19f9d;
  border-radius: 8px;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):focus {
  border-color: #c8c6c4;
  box-shadow: inset 0 -2px 0 #0078d4;
  background: #f3f2f1;
  outline: none;
}

.unsaved-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: #fef3c7;
  color: #92400e;
}

/* Compact density adjustments */
body.density-compact .form-row input,
body.density-compact .form-row select,
body.density-compact .kv-form .form-grid input,
body.density-compact .kv-form .form-grid select,
body.density-compact .kv-form .form-grid textarea { padding: 8px 10px; border-radius: 6px; }
.form-actions { display: flex; gap: 8px; margin-top: 8px; }

/* Modal confirm */
.modal-backdrop { position:fixed; inset:0; background:rgba(15,25,35,0.45); z-index: 2000; }
.modal { position:fixed; inset:0; display:flex; align-items:center; justify-content:center; z-index:2001; }
.modal[hidden], .modal-backdrop[hidden] { display:none !important; }
.modal-dialog { width: 420px; max-width: 92vw; background:#fff; border:1px solid var(--border); border-radius:12px; box-shadow: 0 12px 40px rgba(17,33,51,0.25); }
.modal-header { display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--border); font-weight:800; }
.modal-close { background:transparent; border:0; font-size:20px; cursor:pointer; }
.modal-body { padding:14px; color:#4b4e63; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; padding:12px 14px; border-top:1px solid var(--border); }
body.theme-dark .modal-dialog { background:#111922; border-color:#223040; }
body.theme-dark .modal-header, body.theme-dark .modal-actions { border-color:#223040; }

/* Headings tuned for the brand type scale */
h1, h2, h3 { color: var(--brand-navy); margin: 0 0 8px; }
h1 { font-weight: 800; letter-spacing: 0.2px; }
h2 { font-weight: 700; }
h3 { font-weight: 700; }

/* Contact detail/edit layout */
.contact-header { display:flex; align-items:center; justify-content: space-between; margin-bottom: 12px; }
.contact-header .contact-name { margin: 0; font-size: 22px; font-weight: 800; }
.id-meta { color:#889; font-size:12px; margin-top:4px; }
.title-wrap { display:flex; flex-direction:column; }
.contact-layout { display:grid; grid-template-columns: 280px 1fr; gap: 16px; align-items:start; }
.contact-aside { background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px; }
.avatar { display:flex; justify-content:center; margin:8px 0 12px; }
.avatar-circle { width:120px; height:120px; border-radius:60px; background:#eef3f8; display:flex; align-items:center; justify-content:center; font-size:44px; font-weight:800; color:#5a6b85; border:1px solid var(--border); }
.score { display:flex; gap:8px; align-items:center; margin:8px 0 12px; }
.score-bar { width:8px; height:100px; background:#f0f4f8; border-radius:6px; overflow:hidden; border:1px solid var(--border); }
.score-fill { width:100%; background:#00c853; }
.score-label { font-weight:700; color:#4b4e63; }
.aside-block { display:grid; grid-template-columns: 1fr; gap:4px; margin:10px 0; }
.aside-label { font-size:12px; color:#889; }
.aside-value { font-weight:600; }
.contact-main .card { background:#fff; border:1px solid var(--border); border-radius:8px; padding:12px; }
.tabbar { display:flex; gap:8px; margin-bottom:10px; }
.tab { display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:20px; background:#fff; color:inherit; text-decoration:none; font-weight:700; }

/* Uppercase all tab labels app-wide (record-view, form, and pill tabs) */
.tab, .tabsbar .tab, .tab-btn, .act-tab, .activity-tab { text-transform: uppercase; }

/* Quick date-filter buttons (Today "1" / 7-days "7"): bordered with a calendar
   glyph. Targeted by id so it overrides the Tailwind w-7/!px-0 utilities (and the
   warehouse list's inline width) across every section's toolbar. */
#qf-1, #qf-7 {
  border: 1px solid #e1dfdd;
  width: auto !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
  gap: 4px;
}
#qf-1::before, #qf-7::before {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;            /* solid */
  content: "\f073";            /* fa-calendar-days */
  font-size: 11px;
  color: #605e5c;
}

/* People (tri-pane) */
.people-layout { display:grid; grid-template-columns: 320px 1fr 360px; gap: 18px; min-height: calc(100vh - 140px); margin-left: -10px; margin-right: -10px; }
.people-list { background:#fff; border:1px solid var(--border); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.people-header { display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:10px 12px; border-bottom:1px solid var(--border); }
.people-items { flex: 1; min-height: 0; overflow: auto; }
.people-item { display:flex; align-items:center; gap:10px; padding:10px 12px; text-decoration:none; color:inherit; border-bottom:1px solid #f1f3f7; }
.people-item .pick { margin-right:6px; }
.people-item:hover { background:#f7fafc; }
.people-item.active { background:#eef7ff; }
.people-item .meta { flex:1; min-width:0; }
.people-item .name { font-weight:700; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.people-item .sub { font-size:12px; color:#7a8798; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.people-item .rel { font-size:11px; color:#9aa6b5; white-space:nowrap; text-overflow:ellipsis; overflow:hidden; }
.people-item .tag { font-size:12px; padding:4px 8px; border-radius:999px; border:1px solid var(--border); }
.people-item .tag.client { background:#e6f7ef; color:#197d4b; border-color:#bfe9d1; }
.people-item .tag.lead { background:#fff1e6; color:#9a5b00; border-color:#f7d8b2; }

.people-center { background:#fff; border:1px solid var(--border); border-radius:12px; padding:14px; }
.center-header { display:flex; align-items:center; gap:14px; }
.avatar-wrap { position: relative; display:flex; flex-direction:column; align-items:center; }
.avatar-actions { display:flex; gap:6px; position:absolute; left:50%; transform:translate(-50%, 6px); bottom:-18px; opacity:0; pointer-events:none; transition: opacity .15s ease, transform .15s ease; }
.avatar-wrap:hover .avatar-actions { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.icon-btn { width:28px; height:28px; border-radius:14px; border:1px solid var(--border); background:#fff; color:#4b4e63; display:inline-flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer; box-shadow: 0 2px 8px rgba(17,33,51,0.08); }
.icon-btn.plus { background:#f0f7ff; border-color:#cfe5ff; }
.icon-btn.minus { background:#fff1f0; border-color:#ffd6d1; }
.icon-btn:hover { filter: brightness(1.03); }
.btn-call-icon { width:22px; height:22px; border-radius:11px; border:1px solid #cdeccd; background:#eefbee; color:#107c10; display:inline-flex; align-items:center; justify-content:center; font-size:11px; cursor:pointer; vertical-align:middle; padding:0; }
.btn-call-icon:hover { background:#dff6df; }
.btn-call-icon:disabled { opacity:.5; cursor:default; }
.who .name { font-size:20px; font-weight:800; }
.who .email { color:#7a8798; margin-top:2px; }
.who .chips { margin-top:6px; }

.center-search { margin: 8px 0 12px; }
.center-search input { width: 100%; padding:9px 12px; border:1px solid var(--border); border-radius:8px; }
.center-search input:focus { outline:none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-alpha); }

.bulkbar { display:flex; gap:8px; padding:8px 12px; border-bottom:1px solid var(--border); }

.quick-actions { display:flex; gap:12px; margin:12px 0; }
.qa { display:inline-flex; align-items:center; gap:6px; padding:8px 12px; border:1px solid var(--border); border-radius:999px; text-decoration:none; color:inherit; background:#fff; }
.qa:hover { background:#f6f8fb; }
.qa span { font-weight:700; font-size:12px; }

.people-right { background:#fff; border:1px solid var(--border); border-radius:12px; padding:12px; }
.people-right .card { margin-bottom: 12px; }
.right-title { font-weight:800; margin-bottom:8px; }
.kv-row { display:grid; grid-template-columns: 140px 1fr; gap:10px; padding:8px 0; border-bottom:1px solid #f1f3f7; }
.kv-row.kv-row--single { grid-template-columns: 1fr; }
.kv-row .kv-val.full-span { grid-column: 1 / -1; }
.kv-key { font-size:12px; color:#7a8798; }
.kv-val { font-weight:600; }

/* Type pill dropdown */
.type-wrap { display:inline-flex; align-items:center; position:relative; min-width:110px; }
.type-wrap .type-select { display:none; }
.pill { display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border:1px solid var(--border); border-radius:999px; background:#fff; color:#4b4e63; font-size:12px; cursor:pointer; }
.pill::after { content:'▾'; font-size:10px; color:#7a8798; }
body.theme-dark .pill { background:#111922; border-color:#223040; color:#c0c9d2; }

/* Small action icons */
.icon-mini { width:22px; height:22px; border-radius:11px; border:1px solid var(--border); background:#fff; color:#4b4e63; display:inline-flex; align-items:center; justify-content:center; font-weight:800; cursor:pointer; }
.icon-mini:hover { filter: brightness(1.03); }
.comm-icon { width:16px; height:16px; object-fit:contain; border-radius:3px; }

/* Show tiny delete on hover for communication rows */
.comm-row .del { opacity: 0; transition: opacity .12s ease; }
.comm-row:hover .del { opacity: 1; }

/* Add communication inline composer */
.comm-add { display:flex; align-items:center; gap:6px; padding:6px 8px; border:1px solid var(--border); border-radius:12px; background:#fff; box-shadow: 0 6px 18px rgba(17,33,51,0.06); width: 100%; box-sizing: border-box; }
.comm-add .type-wrap { flex: 0 0 auto; min-width: 88px; }
.comm-add .pill { padding: 4px 8px; }
.comm-add .comm-input { padding:8px 10px; border:0; outline:none; background:transparent; min-width:120px; flex: 1 1 240px; max-width: 100%; border-radius:8px; box-sizing: border-box; }
.comm-add .comm-input::placeholder { color:#97a2b2; }
.comm-add .icon-mini { background: var(--accent); color:#0b2133; border-color: transparent; }
body.theme-dark .comm-add { background:#111922; border-color:#223040; }
/* Composer chips and input with icon */
.comm-add .types { display:flex; gap:6px; flex-wrap:wrap; }
.chip-btn { border:1px solid var(--border); background:#f6f8fb; color:#4b4e63; padding:6px 10px; border-radius:999px; cursor:pointer; font-weight:700; }
.chip-btn:hover { background:#eef2f7; }
.chip-btn.active { background:#eef7ff; box-shadow: inset 0 0 0 2px rgba(2,199,255,0.35); }
.chip-btn.more { background:#fff; }
.input-wrap { display:flex; align-items:center; gap:8px; flex:1 1 auto; }
.input-wrap .comm-icon { width:18px; height:18px; display:none; }
.input-wrap .comm-input { flex:1 1 auto; }
.icon-mini:disabled { opacity:.5; cursor:not-allowed; }

/* Dropdown menu for + type select */
.type-menu { background:#fff; border:1px solid var(--border); border-radius:10px; box-shadow: 0 12px 30px rgba(17,33,51,0.12); padding:6px; display:inline-block; position:absolute; z-index:20; opacity:0; transform: translateY(6px); transition: opacity .15s ease, transform .15s ease; }
.type-menu.open { opacity:1; transform: translateY(0); }
.type-menu { max-height: 320px; overflow: auto; width: 260px; }
.type-menu .type-search { padding:6px 8px; border:1px solid var(--border); border-radius:8px; width:100%; box-sizing:border-box; margin: 4px 2px 6px; }
.type-menu .menu-item { display:flex; align-items:center; gap:8px; padding:6px 8px; border:0; background:transparent; cursor:pointer; width:100%; text-align:left; border-radius:8px; }
.type-menu .menu-item:hover { background:#f6f8fb; }
.type-menu .menu-item:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.type-menu .menu-item.active { background:#eef7ff; }
.type-menu .menu-header { font-size:11px; color:#7a8798; padding:6px 8px; text-transform:uppercase; letter-spacing:.4px; }
body.theme-dark .type-menu { background:#111922; border-color:#223040; }
body.theme-dark .type-menu .menu-item:hover { background:#101722; }

/* Toast (undo) */
.toast { position: fixed; right: 16px; bottom: 16px; background:#0b2133; color:#fff; padding:10px 12px; border-radius:10px; box-shadow: 0 8px 24px rgba(0,0,0,0.25); display:flex; align-items:center; gap:10px; z-index: 50; }
.toast .undo { background:#fff; color:#0b2133; border:0; border-radius:8px; padding:6px 10px; cursor:pointer; font-weight:800; }

.avatar { display:inline-flex; align-items:center; justify-content:center; background:#eef3f8; border:1px solid var(--border); border-radius:50%; overflow:hidden; }
.avatar.small { width:36px; height:36px; }
.avatar.large { width:96px; height:96px; }
.avatar img { width:100%; height:100%; object-fit:cover; }
.avatar-fallback { font-weight:800; color:#5a6b85; }

@media (max-width: 1024px) {
  .people-layout { grid-template-columns: 1fr; }
  .people-right { order: 3; }
}

/* Additional responsiveness for People desk */
@media (max-width: 1200px) {
  .people-layout { grid-template-columns: 280px 1fr 320px; margin-left: -6px; margin-right: -6px; }
}
@media (max-width: 992px) {
  .people-layout { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
  .people-items { max-height: none; }
  .people-right { order: 3; }
  .people-center { order: 2; }
  .people-list { order: 1; }
}
@media (max-width: 768px) {
  .people-header { flex-wrap: wrap; gap:8px; }
  .comm-add { flex-wrap: wrap; }
  .comm-add .comm-input { min-width: 0; flex: 1 1 100%; }
}
@media (max-width: 640px) {
  .kv-row { grid-template-columns: 1fr; }
  .kv-key { margin-bottom: 4px; }
}
.tab.active { background: rgba(199,70,52,0.10); border-color: rgba(199,70,52,0.35); color: var(--accent); }
.kv-grid { display:grid; grid-template-columns: 220px 1fr; row-gap:10px; column-gap:12px; }
.kv-row { display:contents; }
.kv-key { color:#889; }
.kv-val { font-weight:600; }
.form-grid { display:grid; grid-template-columns: 220px 1fr; gap:10px 12px; }

/* Login page */
.login-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; }
.login-left { background: #1f2126; color: #fff; display: flex; align-items: flex-start; justify-content: flex-start; padding: 28px 36px; }
.login-brand { font-weight: 800; letter-spacing: .3px; }
.login-right { background: #fff; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 440px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 22px 22px 24px; box-shadow: 0 6px 24px rgba(17,33,51,.06); }
.login-title { font-size: 22px; font-weight: 800; margin: 6px 0 4px; text-align: center; }
.login-subtitle { color: #667; text-align: center; margin: 0 0 16px; font-size: 14px; }
.login-oauth { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.oauth-btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 10px 12px; background: #fff; border: 1px solid var(--border); border-radius: 10px; cursor: pointer; color: var(--brand-navy); font-weight: 700; }
.oauth-btn:hover { background: #f8fafc; }
.login-divider { display: flex; align-items: center; gap: 12px; color: #889; font-size: 12px; margin: 8px 0 12px; }
.login-divider::before, .login-divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }
.login-label { display: block; font-weight: 600; font-size: 14px; margin: 4px 0 6px; }
.login-input { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; }
.login-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(2,199,255,0.2); }
.login-meta-row { display: flex; justify-content: flex-end; margin: 6px 0 12px; }
.login-link { color: var(--brand-outer); text-decoration: none; }
.login-link:hover { text-decoration: underline; }
.login-submit { width: 100%; background: #0b2133; color: #fff; }
.login-submit:hover { filter: brightness(1.05); }
.login-footer { text-align: center; color: #667; margin-top: 10px; }
.login-error { background: #ffe8ea; color: #b00020; border: 1px solid #ffd0d6; padding: 8px 10px; border-radius: 8px; margin: 0 0 10px; font-weight: 600; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-logo { width:32px; height:32px; border-radius:16px; background: linear-gradient(135deg, #6a5cf0, #8ad3ff); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; }
.brand-name { font-weight:800; letter-spacing:.3px; }

/* Sort column header buttons — reset button appearance, keep cursor */
.sort-col { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }

/* Tab panes — minimal left gap */
.tab-pane { padding-top: 1.5rem !important; padding-left: 0 !important; }

/* List view rows — minimal left gap */
.resizable-grid .resizable-row { padding-left: 8px !important; }

/* Resizable columns */
.resizable-grid {
  overflow-x: auto;
}
.resizable-grid .resizable-row {
  display: grid;
  grid-template-columns: var(--grid-template, repeat(var(--col-count, 1), minmax(0, 1fr)));
}
/* Remove redundant bottom border on the last row — the grid wrapper already has one */
.resizable-grid .resizable-row:last-child {
  border-bottom: none !important;
}
.resizable-grid .resizable-header-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.resizable-grid .resizable-cell {
  overflow: hidden;
  overflow-wrap: break-word;
  word-break: break-word;
}
.resizable-header-cell {
  position: relative;
}
.resizable-grid .resizable-header-cell[hidden],
.resizable-grid .resizable-cell[hidden],
table.resizable-table th[hidden],
table.resizable-table td[hidden] {
  display: none !important;
}
/* Resize handle — always shows a subtle 2px gray bar; turns D365 blue on hover */
.resizer-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  z-index: 5;
}
.resizer-handle::after {
  content: "";
  position: absolute;
  top: 20%;
  bottom: 20%;
  right: 1px;
  width: 2px;
  border-radius: 1px;
  background: #c8c6c4;
  opacity: 0.5;
  transition: background 0.12s ease, opacity 0.12s ease;
}
.resizable-header-cell:hover .resizer-handle::after,
.resizing-columns .resizer-handle::after {
  background: #0078d4;
  opacity: 1;
}
.resizing-columns {
  cursor: col-resize;
  user-select: none;
}
.column-manager-button {
  white-space: nowrap;
}
.column-manager-panel {
  position: fixed;
  z-index: 10050;
  width: min(720px, calc(100vw - 24px));
  max-height: min(620px, calc(100vh - 96px));
  overflow: hidden;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  color: #111827;
}
.column-manager-panel[hidden] {
  display: none;
}
.column-manager-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border-bottom: 1px solid #e5e7eb;
  font-size: 14px;
  font-weight: 700;
}
.column-manager-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: #6b7280;
  cursor: pointer;
}
.column-manager-close:hover {
  background: #f3f4f6;
  color: #111827;
}
.column-manager-help {
  padding: 10px 14px 8px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.35;
}
.column-manager-list {
  min-height: 260px;
  max-height: 360px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.column-manager-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr);
  gap: 10px;
  padding: 4px 14px 14px;
}
.column-manager-pane {
  min-width: 0;
}
.column-manager-pane-title {
  margin-bottom: 6px;
  color: #374151;
  font-size: 12px;
  font-weight: 700;
}
.column-manager-controls {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.column-manager-controls button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 32px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  cursor: pointer;
}
.column-manager-controls button:hover {
  background: #eff6ff;
  border-color: #bfdbfe;
  color: #1d4ed8;
}
.column-manager-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: #111827;
  font-size: 13px;
  text-align: left;
  cursor: pointer;
}
.column-manager-item:hover {
  background: #fff;
  border-color: #e5e7eb;
}
.column-manager-item.is-selected {
  border-color: #93c5fd;
  background: #eff6ff;
}
.column-manager-item[disabled] {
  cursor: default;
}
.column-manager-grip {
  display: inline-flex;
  width: 16px;
  justify-content: center;
  color: #9ca3af;
}
.column-manager-item span:nth-child(2) {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.column-manager-item small {
  color: #6b7280;
  font-size: 11px;
}
.column-manager-footer {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid #e5e7eb;
}
.column-manager-footer-spacer {
  flex: 1;
}
.column-manager-reset,
.column-manager-cancel,
.column-manager-apply {
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #374151;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.column-manager-reset:hover,
.column-manager-cancel:hover {
  background: #f9fafb;
}
.column-manager-apply {
  border-color: #2563eb;
  background: #2563eb;
  color: #fff;
}
.column-manager-apply:hover {
  background: #1d4ed8;
}
@media (max-width: 720px) {
  .column-manager-picker {
    grid-template-columns: 1fr;
  }
  .column-manager-controls {
    flex-direction: row;
  }
}
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--borderRadiusMedium);
}

/* ============================================================
   DYNAMICS 365 DESIGN SYSTEM OVERRIDES
   Aligned with D365 Unified Interface (2023+)
   ============================================================ */

/* --- D365 CSS Tokens --------------------------------------- */
:root {
  --d365-blue:            #0078d4;
  --d365-blue-dark:       #106ebe;
  --d365-blue-hover:      #deecf9;
  --d365-text:            #323130;
  --d365-text-muted:      #605e5c;
  --d365-text-disabled:   #a19f9d;
  --d365-border:          #8a8886;
  --d365-border-light:    #e1dfdd;
  --d365-bg-field:        #f3f2f1;
  --d365-bg-hover:        #f3f2f1;
  --d365-bg-selected:     #deecf9;
  --d365-red:             #c74634;
  --d365-green:           #107c10;
  --d365-shadow-card:     0 1.6px 3.6px rgba(0,0,0,.132), 0 0.3px 0.9px rgba(0,0,0,.108);
  --d365-shadow-panel:    0 6.4px 14.4px rgba(0,0,0,.132), 0 1.2px 3.6px rgba(0,0,0,.108);
  /* Fluent UI v9 Design Tokens */
  --borderRadiusNone: 0;
  --borderRadiusSmall: 2px;
  --borderRadiusMedium: 4px;
  --borderRadiusLarge: 6px;
  --borderRadiusXLarge: 8px;
  --borderRadiusCircular: 10000px;
  --fontSizeBase100: 10px;
  --fontSizeBase200: 12px;
  --fontSizeBase300: 14px;
  --fontSizeBase400: 16px;
  --fontSizeBase500: 20px;
  --fontSizeBase600: 24px;
  --lineHeightBase100: 14px;
  --lineHeightBase200: 16px;
  --lineHeightBase300: 20px;
  --lineHeightBase400: 22px;
  --lineHeightBase500: 28px;
  --lineHeightBase600: 32px;
  --fontFamilyBase: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --fontFamilyMonospace: Consolas, 'Courier New', Courier, monospace;
  --fontFamilyNumeric: Bahnschrift, 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  --fontWeightRegular: 400;
  --fontWeightMedium: 500;
  --fontWeightSemibold: 600;
  --fontWeightBold: 700;
  --strokeWidthThin: 1px;
  --strokeWidthThick: 2px;
  --strokeWidthThicker: 3px;
  --strokeWidthThickest: 4px;
  --spacingHorizontalNone: 0;
  --spacingHorizontalXXS: 2px;
  --spacingHorizontalXS: 4px;
  --spacingHorizontalSNudge: 6px;
  --spacingHorizontalS: 8px;
  --spacingHorizontalMNudge: 10px;
  --spacingHorizontalM: 12px;
  --spacingHorizontalL: 16px;
  --spacingHorizontalXL: 20px;
  --spacingHorizontalXXL: 24px;
  --spacingHorizontalXXXL: 32px;
  --spacingVerticalNone: 0;
  --spacingVerticalXXS: 2px;
  --spacingVerticalXS: 4px;
  --spacingVerticalSNudge: 6px;
  --spacingVerticalS: 8px;
  --spacingVerticalMNudge: 10px;
  --spacingVerticalM: 12px;
  --spacingVerticalL: 16px;
  --spacingVerticalXL: 20px;
  --spacingVerticalXXL: 24px;
  --spacingVerticalXXXL: 32px;
  --durationUltraFast: 50ms;
  --durationFaster: 100ms;
  --durationFast: 150ms;
  --durationNormal: 200ms;
  --durationGentle: 250ms;
  --durationSlow: 300ms;
  --durationSlower: 400ms;
  --durationUltraSlow: 500ms;
  --curveAccelerateMax: cubic-bezier(0.9, 0.1, 1, 0.2);
  --curveAccelerateMid: cubic-bezier(1, 0, 1, 1);
  --curveAccelerateMin: cubic-bezier(0.8, 0, 0.78, 1);
  --curveDecelerateMax: cubic-bezier(0.1, 0.9, 0.2, 1);
  --curveDecelerateMid: cubic-bezier(0, 0, 0, 1);
  --curveDecelerateMin: cubic-bezier(0.33, 0, 0.1, 1);
  --curveEasyEaseMax: cubic-bezier(0.8, 0, 0.2, 1);
  --curveEasyEase: cubic-bezier(0.33, 0, 0.67, 1);
  --curveLinear: cubic-bezier(0, 0, 1, 1);
  --colorNeutralForeground1: #242424;
  --colorNeutralForeground2: #424242;
  --colorNeutralForeground3: #616161;
  --colorNeutralForeground4: #707070;
  --colorNeutralForegroundDisabled: #bdbdbd;
  --colorBrandForeground1: #0f6cbd;
  --colorBrandForeground2: #115ea3;
  --colorCompoundBrandForeground1: #0f6cbd;
  --colorNeutralBackground1: #f5f5f5;
  --colorNeutralBackground1Hover: #f5f5f5;
  --colorNeutralBackground1Pressed: #e0e0e0;
  --colorNeutralBackground2: #fafafa;
  --colorNeutralBackground3: #f5f5f5;
  --colorNeutralBackground4: #f0f0f0;
  --colorNeutralBackgroundDisabled: #f0f0f0;
  --colorSubtleBackgroundHover: #f5f5f5;
  --colorNeutralStroke1: #d1d1d1;
  --colorNeutralStroke1Hover: #c7c7c7;
  --colorNeutralStroke1Pressed: #b3b3b3;
  --colorNeutralStroke2: #e0e0e0;
  --colorNeutralStrokeAccessible: #616161;
  --colorNeutralStrokeAccessibleHover: #575757;
  --colorNeutralStrokeAccessiblePressed: #4d4d4d;
  --colorNeutralStrokeAccessibleSelected: #0f6cbd;
  --colorNeutralStrokeDisabled: #e0e0e0;
  --colorCompoundBrandStroke: #0f6cbd;
  --colorCompoundBrandStrokeHover: #115ea3;
  --colorCompoundBrandStrokePressed: #0f548c;
  --colorBrandStroke1: #0f6cbd;
  --colorBrandStroke2: #b4d6fa;
  --colorStrokeFocus1: #ffffff;
  --colorStrokeFocus2: #000000;
  --colorBrandBackground: #0f6cbd;
  --colorBrandBackgroundHover: #115ea3;
  --colorBrandBackgroundPressed: #0c3b5e;
  --shadow2: 0 0 2px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.14);
  --shadow4: 0 0 2px rgba(0,0,0,0.12), 0 2px 4px rgba(0,0,0,0.14);
  --shadow8: 0 0 2px rgba(0,0,0,0.12), 0 4px 8px rgba(0,0,0,0.14);
  --shadow16: 0 0 2px rgba(0,0,0,0.12), 0 8px 16px rgba(0,0,0,0.14);
  --shadow28: 0 0 8px rgba(0,0,0,0.12), 0 14px 28px rgba(0,0,0,0.14);
}

/* --- Input fields – Fluent UI v9 ----------------------------- */
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not(.no-d365) {
  background:             var(--colorNeutralBackground1);
  border:                 var(--strokeWidthThin) solid var(--colorNeutralStroke1);
  border-bottom:          var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible);
  border-radius:          var(--borderRadiusMedium);
  color:                  var(--colorNeutralForeground1);
  font-family:            var(--fontFamilyBase);
  font-size:              var(--fontSizeBase300);
  font-weight:            var(--fontWeightRegular);
  line-height:            var(--lineHeightBase300);
  -webkit-font-smoothing: antialiased;
  transition:             border-color var(--durationFaster) var(--curveEasyEase),
                          box-shadow var(--durationFaster) var(--curveEasyEase);
}
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not(.no-d365):hover {
  border-color:        var(--colorNeutralStroke1Hover);
  border-bottom-color: var(--colorNeutralStrokeAccessibleHover);
}
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not(.no-d365):focus {
  outline:             none;
  border-color:        var(--colorNeutralStroke1);
  border-bottom-color: var(--colorNeutralStroke1);
  box-shadow:          inset 0 calc(-1 * var(--strokeWidthThick)) 0 var(--colorCompoundBrandStroke);
  background:          var(--colorNeutralBackground1);
}
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not(.no-d365):disabled,
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not(.no-d365)[disabled] {
  background:   var(--colorNeutralBackgroundDisabled);
  border-color: var(--colorNeutralStrokeDisabled);
  color:        var(--colorNeutralForegroundDisabled);
  cursor:       not-allowed;
}
:where(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=color]):not([type=submit]):not([type=button]):not([type=reset]):not(.no-d365)::placeholder {
  color: var(--colorNeutralForeground4);
}

/* Re-apply border-radius override after Tailwind CDN */
.form-input,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
select,
textarea {
  border-radius: var(--borderRadiusMedium) !important;
}

/* Override form-row and field for Fluent UI v9 */
.form-row input, .form-row select, .form-row textarea,
.field input, .field select, .field textarea,
.kv-form .form-grid input, .kv-form .form-grid select, .kv-form .form-grid textarea {
  background:    var(--colorNeutralBackground1) !important;
  border:        var(--strokeWidthThin) solid var(--colorNeutralStroke1) !important;
  border-bottom: var(--strokeWidthThin) solid var(--colorNeutralStrokeAccessible) !important;
  border-radius: var(--borderRadiusMedium) !important;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus,
.field input:focus, .field select:focus, .field textarea:focus,
.kv-form .form-grid input:focus, .kv-form .form-grid select:focus, .kv-form .form-grid textarea:focus {
  border-color:        var(--colorNeutralStroke1) !important;
  border-bottom-color: var(--colorNeutralStroke1) !important;
  box-shadow:          inset 0 calc(-1 * var(--strokeWidthThick)) 0 var(--colorCompoundBrandStroke) !important;
  outline:             none !important;
  background:          var(--colorNeutralBackground1) !important;
}

/* --- D365 Form Label --------------------------------------- */
.d365-label,
.form-row label,
.kv-form .form-grid label {
  font-size:   13px;
  font-weight: 600;
  color:       var(--d365-text);
  margin-bottom: 4px;
  display:     block;
}

/* --- D365 Form Section (collapsible group) ----------------- */
.d365-section {
  background: #fff;
  border:     1px solid var(--d365-border-light);
  margin-bottom: 12px;
  box-shadow: var(--d365-shadow-card);
}
.d365-section-header {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     10px 16px;
  cursor:      pointer;
  user-select: none;
  border-bottom: 1px solid var(--d365-border-light);
  background:  #faf9f8;
}
.d365-section-header:hover { background: var(--d365-bg-hover); }
.d365-section-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--d365-text);
  flex:        1;
}
.d365-section-chevron {
  font-size:   11px;
  color:       var(--d365-text-muted);
  transition:  transform .15s ease;
}
.d365-section.is-collapsed .d365-section-chevron { transform: rotate(-90deg); }
.d365-section.is-collapsed .d365-section-body    { display: none; }
.d365-section-body {
  padding: 14px 16px;
}

/* --- D365 Two-column form layout --------------------------- */
.d365-form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
}
.d365-form-field {
  padding:     8px 12px;
  min-width:   0;
}
.d365-form-field:nth-child(odd)  { border-right: 1px solid var(--d365-border-light); }
.d365-form-field .d365-label     { color: var(--d365-text-muted); font-size: 12px; margin-bottom: 3px; }
.d365-form-field input,
.d365-form-field select,
.d365-form-field textarea {
  width: 100%;
}
@media (max-width: 768px) {
  .d365-form-grid { grid-template-columns: 1fr; }
  .d365-form-field:nth-child(odd) { border-right: none; }
}

/* --- D365 Entity/Record header ----------------------------- */
.d365-entity-header {
  background: #fff;
  border-bottom: 1px solid var(--d365-border-light);
  padding:    10px 16px 0;
  box-shadow: var(--d365-shadow-card);
}
.d365-entity-header-top {
  display:     flex;
  align-items: flex-start;
  gap:         16px;
  padding-bottom: 8px;
}
.d365-entity-title {
  font-size:   20px;
  font-weight: 600;
  color:       var(--d365-text);
  line-height: 1.2;
  margin:      0;
}
.d365-entity-subtitle {
  font-size: 12px;
  color:     var(--d365-text-muted);
  margin-top: 2px;
}
.d365-entity-actions {
  display:     flex;
  align-items: center;
  gap:         4px;
  margin-left: auto;
  flex-shrink: 0;
}

/* --- D365 Stage bar (opportunity/lead progress) ------------ */
.d365-stage-bar {
  display:     flex;
  align-items: stretch;
  height:      36px;
  overflow:    hidden;
  background:  var(--d365-bg-field);
  border-top:  1px solid var(--d365-border-light);
}
.d365-stage-step {
  display:     flex;
  align-items: center;
  justify-content: center;
  flex:        1;
  font-size:   12px;
  font-weight: 400;
  color:       var(--d365-text-muted);
  padding:     0 12px;
  position:    relative;
  cursor:      pointer;
  border-right: 1px solid var(--d365-border-light);
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.d365-stage-step:last-child { border-right: none; }
.d365-stage-step.is-active {
  background:  var(--d365-blue);
  color:       #fff;
  font-weight: 600;
}
.d365-stage-step.is-completed {
  background:  #e1dfdd;
  color:       var(--d365-text);
}

/* --- D365 Command bar (ribbon) ----------------------------- */
.d365-commandbar {
  display:     flex;
  align-items: center;
  height:      44px;
  padding:     0 8px;
  background:  #fff;
  border-bottom: 1px solid var(--d365-border-light);
  gap:         2px;
  flex-shrink: 0;
  position:    sticky;
  top:         var(--app-header-height, 64px);
  z-index:     35;
}
.d365-cmd-btn {
  display:     inline-flex;
  align-items: center;
  gap:         6px;
  padding:     6px 10px;
  font-size:   13px;
  font-weight: 400;
  color:       var(--d365-text);
  border:      none;
  background:  transparent;
  border-radius: 2px;
  cursor:      pointer;
  white-space: nowrap;
  text-decoration: none;
}
.d365-cmd-btn:hover { background: var(--d365-bg-hover); }
.d365-cmd-btn:active { background: #edebe9; }
.d365-cmd-btn.is-primary {
  background:  var(--d365-blue);
  color:       #fff;
}
.d365-cmd-btn.is-primary:hover  { background: var(--d365-blue-dark); }
.d365-cmd-btn.is-danger         { color: var(--d365-red); }
.d365-cmd-btn:disabled,
.d365-cmd-btn[disabled] {
  opacity: 0.45;
  cursor:  not-allowed;
  pointer-events: none;
}
.d365-cmd-separator {
  width:      1px;
  height:     20px;
  background: var(--d365-border-light);
  margin:     0 4px;
  flex-shrink: 0;
}
.d365-cmd-btn i { font-size: 14px; color: inherit; }
.d365-cmd-btn.is-primary i { color: #fff; }

/* Override legacy toolbar-btn with D365 style */
.toolbar-btn {
  border: none !important;
  background: none;
  border-radius: 2px !important;
  text-decoration: none !important;
  cursor: pointer;
}
.toolbar-btn:hover { background: var(--d365-bg-hover) !important; }
a.toolbar-btn, a.toolbar-btn:hover, a.toolbar-btn:visited { text-decoration: none !important; }
a.btn-save, a.btn-save:hover, a.btn-save:visited { text-decoration: none !important; }
#command-bar a, [id$="-bar"] a { text-decoration: none !important; }

/* --- D365 Grid / List -------------------------------------- */
table.grid thead th {
  background:    #faf9f8;
  color:         var(--d365-text-muted);
  border-bottom: 1px solid var(--d365-border-light);
  font-size:     12px;
  font-weight:   600;
  letter-spacing: .1px;
}
table.grid tbody td { color: var(--d365-text); font-size: 13px; }
table.grid tbody tr:hover { background: var(--d365-bg-hover) !important; }
table.grid tbody tr.selected {
  background: var(--d365-bg-selected) !important;
  box-shadow: none !important;
}
/* Grid linked/name cells – D365 blue */
table.grid .name a,
table.grid a.linked-record,
.linked-record { color: var(--d365-blue) !important; }

/* --- D365 Pagination --------------------------------------- */
.pager .current {
  background:   var(--d365-bg-selected) !important;
  border-color: var(--d365-blue) !important;
  color:        var(--d365-blue) !important;
}

/* --- D365 Tabs --------------------------------------------- */
.tab.active,
.tabsbar .tab.active {
  background:   var(--d365-bg-selected) !important;
  border-color: var(--d365-blue) !important;
  color:        var(--d365-blue) !important;
}
.sub-tabs .nav-item.active { color: var(--d365-blue) !important; }
.sub-tabs .nav-item.active::after { background: var(--d365-blue) !important; }

/* --- D365 Navigation sidebar accent change (red → blue) ---- */
.nav-item.active {
  background: #eff6fc !important;
  color:      var(--d365-blue) !important;
  box-shadow: inset 2px 0 0 var(--d365-blue) !important;
}

/* --- D365 Filter pane -------------------------------------- */
.d365-filter-pane {
  display:        flex;
  flex-direction: column;
  background:     #fff;
  border-left:    1px solid var(--d365-border-light);
  box-shadow:     var(--d365-shadow-panel);
  width:          320px;
  min-width:      280px;
  max-width:      480px;
}
.d365-filter-header {
  display:     flex;
  align-items: center;
  justify-content: space-between;
  padding:     10px 16px;
  border-bottom: 1px solid var(--d365-border-light);
  font-size:   14px;
  font-weight: 600;
  color:       var(--d365-text);
  flex-shrink: 0;
}
.d365-filter-body {
  flex:       1;
  overflow-y: auto;
  padding:    12px 16px;
}
.d365-filter-row {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           8px;
  margin-bottom: 8px;
  align-items:   end;
}
.d365-filter-row.single { grid-template-columns: 1fr; }
.d365-filter-label {
  font-size:   11px;
  color:       var(--d365-text-muted);
  margin-bottom: 3px;
}
.d365-filter-footer {
  display:     flex;
  align-items: center;
  gap:         8px;
  padding:     10px 16px;
  border-top:  1px solid var(--d365-border-light);
  flex-shrink: 0;
}
.d365-filter-apply {
  background:    var(--d365-blue);
  color:         #fff;
  border:        none;
  border-radius: 2px;
  padding:       6px 16px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
}
.d365-filter-apply:hover { background: var(--d365-blue-dark); }
.d365-filter-clear {
  background:    transparent;
  color:         var(--d365-blue);
  border:        1px solid var(--d365-blue);
  border-radius: 2px;
  padding:       5px 12px;
  font-size:     13px;
  cursor:        pointer;
}
.d365-filter-clear:hover { background: var(--d365-blue-hover); }

/* D365 search input in filter/toolbar */
.d365-search-input {
  display:      flex;
  align-items:  center;
  border:       1px solid var(--d365-border);
  border-radius: 2px;
  background:   #fff;
  overflow:     hidden;
}
.d365-search-input input {
  border:     none !important;
  box-shadow: none !important;
  background: transparent !important;
  flex:       1;
  min-width:  0;
  padding:    5px 8px;
}
.d365-search-input input:focus { box-shadow: none !important; }
.d365-search-btn {
  display:    flex;
  align-items: center;
  justify-content: center;
  width:      32px;
  height:     32px;
  border:     none;
  background: transparent;
  color:      var(--d365-text-muted);
  cursor:     pointer;
  flex-shrink: 0;
}
.d365-search-btn:hover { background: var(--d365-bg-hover); color: var(--d365-blue); }

/* --- D365 Buttons ------------------------------------------ */
.d365-btn {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       5px 12px;
  font-size:     13px;
  font-weight:   400;
  color:         var(--d365-text);
  background:    #fff;
  border:        1px solid var(--d365-border);
  border-radius: 2px;
  cursor:        pointer;
  white-space:   nowrap;
  text-decoration: none;
  transition:    background .1s, border-color .1s;
}
.d365-btn:hover  { background: var(--d365-bg-hover); border-color: var(--d365-text); }
.d365-btn:active { background: #edebe9; }
.d365-btn.is-primary {
  background:  var(--d365-blue);
  color:       #fff;
  border-color: var(--d365-blue);
}
.d365-btn.is-primary:hover  { background: var(--d365-blue-dark); border-color: var(--d365-blue-dark); }
.d365-btn.is-danger {
  color:        var(--d365-red);
  border-color: var(--d365-red);
}
.d365-btn.is-danger:hover { background: #fdf6f5; }
.d365-btn:disabled, .d365-btn[disabled] { opacity: .45; cursor: not-allowed; }

/* --- D365 Status / Badge pills ----------------------------- */
.d365-badge {
  display:       inline-flex;
  align-items:   center;
  padding:       2px 8px;
  font-size:     11px;
  font-weight:   600;
  border-radius: 2px;
  white-space:   nowrap;
}
.d365-badge.status-open     { background: #eff6fc; color: #004578; }
.d365-badge.status-active   { background: #dff6dd; color: #107c10; }
.d365-badge.status-inactive { background: #f3f2f1; color: #605e5c; }
.d365-badge.status-won      { background: #dff6dd; color: #107c10; }
.d365-badge.status-lost     { background: #fde7e9; color: #c74634; }
.d365-badge.status-warn     { background: #fff4ce; color: #835c00; }

/* --- D365 Card / Panel ------------------------------------- */
.d365-card {
  background:    #fff;
  border:        1px solid var(--d365-border-light);
  box-shadow:    var(--d365-shadow-card);
  border-radius: 0;
  overflow:      hidden;
}
.d365-card-header {
  padding:       10px 16px;
  border-bottom: 1px solid var(--d365-border-light);
  font-size:     14px;
  font-weight:   600;
  color:         var(--d365-text);
  background:    #faf9f8;
}
.d365-card-body { padding: 12px 16px; }

/* --- D365 Lookup field ------------------------------------- */
.d365-lookup {
  display:     flex;
  align-items: stretch;
  border:      1px solid var(--d365-border);
  border-radius: 2px;
  background:  var(--d365-bg-field);
  overflow:    hidden;
}
.d365-lookup input {
  border:     none !important;
  box-shadow: none !important;
  background: transparent !important;
  flex:       1;
  min-width:  0;
}
.d365-lookup input:focus { box-shadow: none !important; }
.d365-lookup-icon {
  display:    flex;
  align-items: center;
  justify-content: center;
  width:      32px;
  color:      var(--d365-text-muted);
  cursor:     pointer;
  flex-shrink: 0;
  font-size:  14px;
}
.d365-lookup-icon:hover { color: var(--d365-blue); }
.d365-lookup:focus-within {
  border-color: var(--d365-border);
  box-shadow:   inset 0 -2px 0 var(--d365-blue);
}

/* --- D365 Quick-create / side panel ------------------------ */
.d365-quick-panel {
  position:   fixed;
  top:        var(--app-header-height, 64px);
  right:      0;
  bottom:     0;
  width:      min(480px, 100vw);
  background: #fff;
  border-left: 1px solid var(--d365-border-light);
  box-shadow: var(--d365-shadow-panel);
  display:    flex;
  flex-direction: column;
  z-index:    200;
  overflow:   hidden;
}
.d365-quick-panel-header {
  padding:     12px 16px;
  border-bottom: 1px solid var(--d365-border-light);
  font-size:   16px;
  font-weight: 600;
  color:       var(--d365-text);
  display:     flex;
  align-items: center;
  gap:         10px;
}
.d365-quick-panel-body   { flex: 1; overflow-y: auto; padding: 16px; }
.d365-quick-panel-footer {
  padding:     10px 16px;
  border-top:  1px solid var(--d365-border-light);
  display:     flex;
  gap:         8px;
  justify-content: flex-end;
  flex-shrink: 0;
}

/* --- D365 Timeline entry ----------------------------------- */
.d365-timeline-item {
  display:     flex;
  gap:         12px;
  padding:     10px 0;
  border-bottom: 1px solid var(--d365-border-light);
}
.d365-timeline-item:last-child { border-bottom: none; }
.d365-timeline-icon {
  width:        32px;
  height:       32px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  background:    var(--d365-bg-field);
  color:         var(--d365-text-muted);
  flex-shrink:   0;
  font-size:     13px;
}
.d365-timeline-body { flex: 1; min-width: 0; }
.d365-timeline-title {
  font-size:   13px;
  font-weight: 600;
  color:       var(--d365-text);
}
.d365-timeline-meta {
  font-size: 11px;
  color:     var(--d365-text-disabled);
  margin-top: 2px;
}

/* --- D365 Header alignment ---------------------------------
   Keep the dark header but tweak proportions to feel like D365 */
#header { min-height: 48px; }
.d365-header-app-name {
  font-size:   15px;
  font-weight: 600;
  letter-spacing: .1px;
}

/* --- D365 Sidebar section labels --------------------------- */
#sidebar h3.sidebar-section-title {
  font-size:      10px;
  font-weight:    600;
  letter-spacing: .6px;
  text-transform: uppercase;
  color:          #8a8886;
  padding:        0 8px;
  margin:         16px 0 4px;
}
#sidebar nav a.group {
  border-radius: 2px !important;
}
/* Active sidebar link – D365 blue left border */
#sidebar nav a.border-dynamics-blue {
  background:    #eff6fc !important;
  border-color:  var(--d365-blue) !important;
}
#sidebar nav a.text-dynamics-blue { color: var(--d365-blue) !important; }

/* --- Accent overrides: red → D365 blue -------------------- */
.name, td.name                { color: var(--d365-blue) !important; }
*:focus-visible               { outline-color: var(--d365-blue); }
.crm-toolbar                  { border-radius: 2px !important; box-shadow: var(--d365-shadow-card) !important; }
.table-wrap                   { border-radius: 2px !important; }
.card                         { border-radius: 2px !important; }

/* --- Scrollbar (Chromium – subtle D365 style) -------------- */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #c8c6c4; border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: #8a8886; }

/* ============================================================
   CENTERED APP CONTAINER — 1200–1440 px
   ============================================================ */
.app-root {
  min-width: 320px;
  min-height: 100vh;
  background: #f5f5f5;
  display: flex;
  flex-direction: column;
}
@media (min-width: 1024px) {
  .app-root {
    flex-direction: row;
    align-items: stretch;
  }
  #sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    align-self: flex-start;
  }
  .app-shell {
    margin-left: 0 !important;
    flex: 1 1 0%;
    min-width: 0;
    overflow: hidden;
  }
  body.sidebar-ui-ready .app-shell {
    transition: none !important;
  }
}
@media (max-width: 1023px) {
  #sidebar {
    position: fixed !important;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 40;
  }
  .app-root {
    background: transparent;
  }
}

/* Toolbar separator — shared by all edit page command bars */
.toolbar-sep {
  width:       1px;
  height:      20px;
  background:  var(--d365-border-light);
  margin:      0 4px;
  flex-shrink: 0;
}

/* Remove all borders from .form-input globally */
.form-input,
.form-input:hover { border: none !important; box-shadow: none !important; outline: none; }
/* Blue bottom accent on focus */
.form-input:focus { border: none !important; outline: none !important; box-shadow: inset 0 -2px 0 0 #0078d4 !important; }

/* ============================================================
   EDIT PAGE SHELL — standardised #command-bar / #record-header
   ============================================================ */
#command-bar {
  background:     #fff;
  border-top:     none;
  border-left:    none;
  border-right:   none;
  border-bottom:  1px solid var(--d365-border-light);
  border-radius:  0;
  box-shadow:     0 1.6px 3.6px rgba(0,0,0,0.08);
  height:         44px;
  padding-top:    0;
  padding-bottom: 0;
  padding-left:   8px;
  padding-right:  8px;
  margin-bottom:  0;
  overflow:       hidden;
}
/* Neutralise inner card wrapper (contact / account pattern) */
#command-bar > div {
  border:         none;
  border-radius:  0;
  box-shadow:     none;
  background:     transparent;
  padding:        0;
  flex:           1;
  min-width:      0;
}
#record-header {
  background:     #fff;
  border-top:     none;
  border-left:    none;
  border-right:   none;
  border-bottom:  1px solid var(--d365-border-light);
  border-radius:  0;
  box-shadow:     none;
  padding:        16px 24px;
}

/*
 * Source - https://stackoverflow.com/a/70697099
 * Posted by YourBrainEatsYou
 * Retrieved 2026-06-19, License - CC BY-SA 4.0
 *
 * Breakpoint reference:
 *   phone-only            max-width:  599px
 *   tablet-portrait-up    min-width:  600px
 *   tablet-landscape-up   min-width:  900px
 *   desktop-up            min-width: 1200px
 *   medium-desktop-up     min-width: 1400px
 *   big-desktop-up        min-width: 1800px
 *
 * NOTE: sidebar open/close is locked to 1024px to stay in sync with
 * Tailwind's lg: breakpoint used in HTML templates (lg:hidden etc.).
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ALWAYS-ON — no breakpoint needed
   ═══════════════════════════════════════════════════════════════════════════ */

/* Horizontal-scroll wrappers */
.data-grid-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c8c6c4 transparent;
}
.data-grid-scroll::-webkit-scrollbar       { height: 5px; }
.data-grid-scroll::-webkit-scrollbar-track { background: transparent; }
.data-grid-scroll::-webkit-scrollbar-thumb { background: #c8c6c4; border-radius: 2px; }
.data-grid-scroll > .resizable-grid,
.data-grid-scroll .resizable-grid { min-width: 640px; }

.grid-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #c8c6c4 transparent;
}
.grid-scroll-x::-webkit-scrollbar       { height: 5px; }
.grid-scroll-x::-webkit-scrollbar-track { background: transparent; }
.grid-scroll-x::-webkit-scrollbar-thumb { background: #c8c6c4; border-radius: 2px; }

.specs-grid-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.specs-grid-wrap [id="specs-header"],
.specs-grid-wrap .specs-row { min-width: 400px; }

.invoice-products-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.invoice-products-wrap table,
.invoice-products-wrap > .grid { min-width: 600px; }

/* Notification dropdown: never wider than viewport */
#notificationsMenu { max-width: calc(100vw - 1rem); }


/* ═══════════════════════════════════════════════════════════════════════════
   for-phone-only  ·  max-width: 599px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 599px) {

  /* Header: hide decorative text, keep icons */
  #header .app-logo-text        { display: none !important; }
  #header .admin-header-badge span { display: none !important; }
  #header .user-menu-name       { display: none !important; }

  /* Notification panel: full-width overlay anchored to header bottom */
  #notificationsMenu {
    position:   fixed !important;
    left:       0.5rem !important;
    right:      0.5rem !important;
    top:        calc(var(--app-header-height, 64px) + 4px) !important;
    width:      auto !important;
    max-width:  none !important;
    border-radius: 12px;
  }

  /* User-menu: keep right-aligned, cap width */
  #header .menu.absolute {
    right: 0 !important;
    max-width: calc(100vw - 1rem);
  }

  /* Filter panels: edge-to-edge */
  [id$="-filter-panel"] {
    left:          0 !important;
    right:         0 !important;
    width:         100vw !important;
    max-width:     100vw !important;
    border-left:   none !important;
    border-right:  none !important;
    border-radius: 0 0 12px 12px !important;
    top:           44px !important;
  }

  /* Filter bar controls: full width */
  [id$="-filter-bar"] { gap: 0.5rem; }
  [id$="-filter-bar"] select,
  [id$="-filter-bar"] input[type="date"] {
    width: 100% !important;
    max-width: none !important;
  }

  /* Layout container: minimal gutter */
  .layout-container {
    padding-left:  0.5rem !important;
    padding-right: 0.5rem !important;
  }
  .tw-body > .p-6,
  .p-6.tw-section-pad { padding: 0.75rem !important; }

  /* Toolbar: narrow the inline search input */
  .section-toolbar-sticky input[type="text"],
  .section-toolbar-sticky input[type="search"] {
    width: 120px !important;
    min-width: 0;
  }

  /* Toolbar: drop extra separators */
  .section-toolbar-sticky .toolbar-sep:not(:first-of-type) { display: none; }

  /* Quick-filter labels: truncate */
  ._qf-ow-lbl, ._qf-dt-lbl { max-width: 80px; }

  /* Modals: constrain height */
  .h-\[520px\]     { height: auto !important; max-height: 82svh !important; }
  .h-\[480px\]     { height: auto !important; max-height: 78svh !important; }
  .h-\[560px\]     { height: auto !important; max-height: 84svh !important; }
  .h-\[600px\]     { height: auto !important; max-height: 85svh !important; }
  .max-h-\[80vh\]  { max-height: 70svh !important; }
  .fixed.inset-0.p-6 { padding: 0.75rem !important; }
  .fixed.inset-0.p-4 { padding: 0.5rem !important; }

  /* form-row: stack label above input */
  .form-row {
    grid-template-columns: 1fr;
    gap: 4px;
    margin-bottom: 14px;
  }
  .form-row label { font-size: 11px; }

  /* kv-grid: single column */
  .kv-grid { grid-template-columns: 1fr; }
  .kv-grid .kv-key { color: #605e5c; font-size: 11px; margin-top: 8px; }

  /* Card and tab-panel padding */
  .record-card { padding: 0.875rem !important; border-radius: 10px !important; }
  .tab-panel.p-6,
  .tab-pane.p-6 { padding: 0.75rem !important; }

  /* Pagination: compact */
  .pagination-wrap { gap: 0.25rem; }
  .pagination-wrap a,
  .pagination-wrap span { padding: 0.25rem 0.5rem; font-size: 12px; }
}

/* Height-constrained viewports (landscape phone etc.) */
@media (max-height: 700px) {
  .h-\[520px\]     { height: auto !important; max-height: 82svh !important; }
  .h-\[480px\]     { height: auto !important; max-height: 78svh !important; }
  .h-\[560px\]     { height: auto !important; max-height: 84svh !important; }
  .h-\[600px\]     { height: auto !important; max-height: 85svh !important; }
  .max-h-\[80vh\]  { max-height: 70svh !important; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   for-tablet-portrait-up  ·  min-width: 600px
   (styles that kick in once we leave phone-only territory)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 600px) {
  /* Login card: allow natural width again */
  .login-card { width: 440px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   below tablet-landscape  ·  max-width: 899px
   (phone + tablet-portrait combined)
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 899px) {

  /* Toolbar search: slightly narrower */
  .toolbar-search-input { width: 140px !important; min-width: 0; }

  /* Login: single column, hide brand panel */
  .login-layout { grid-template-columns: 1fr; }
  .login-left   { display: none; }
  .login-right  { align-items: flex-start; padding-top: 2rem; }
  .login-card   { width: 100%; max-width: 100%; border: none; box-shadow: none; padding: 1.25rem 1rem; }

  /* 12-col content grids (account/contact/lead forms): stack */
  #content-grid.grid-cols-12 {
    display: flex !important;
    flex-direction: column !important;
  }
  #content-grid > [class*="col-span-"] {
    width: 100% !important;
    max-width: 100% !important;
    order: unset;
  }

  /* Main vertical padding: compact */
  #main { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }

  /* D365 form tab bars: scroll */
  .d365-form-tabs,
  [class*="tab-list"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }
  .d365-form-tabs::-webkit-scrollbar,
  [class*="tab-list"]::-webkit-scrollbar { display: none; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   sidebar-sync  ·  max-width: 1023px
   Must match Tailwind lg: breakpoint — do not change independently.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023px) {

  /* Sidebar: drawer mode, scrollable */
  #sidebar { overflow-y: auto; }

  /* Toolbar: horizontal scroll so all buttons stay on one line */
  .section-toolbar-sticky {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .section-toolbar-sticky::-webkit-scrollbar { display: none; }
  .section-toolbar-sticky .flex-grow { flex: 0 0 auto; min-width: 6px; max-width: 6px; }
  .section-toolbar-sticky > * { flex-shrink: 0; }

  /* Tab buttons: scroll, no wrap */
  @supports selector(:has(.tab-btn)) {
    div:has(> .tab-btn) {
      overflow-x: auto;
      overflow-y: hidden;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      flex-wrap: nowrap;
    }
    div:has(> .tab-btn)::-webkit-scrollbar { display: none; }
    .tab-btn { white-space: nowrap; flex-shrink: 0; }
  }

  /* Deals kanban: horizontal scroll */
  .deals-kanban {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    padding-bottom: 0.5rem;
  }
  .deals-kanban > * { flex-shrink: 0; min-width: 280px; }

  /* Admin panels: release h-screen clip so content scrolls */
  #crm-dashboard.flex.h-screen.overflow-hidden,
  .flex.h-screen.overflow-hidden {
    height: auto !important;
    overflow: visible !important;
    flex-direction: column;
  }
}


/* ═══════════════════════════════════════════════════════════════════════════
   for-desktop-up  ·  min-width: 1200px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1200px) {
  /* Sidebar can be wider / fully labelled — handled by sidebar CSS above */
  /* Layout container hits its cap — handled by .layout-container max-width */
}


/* ═══════════════════════════════════════════════════════════════════════════
   for-medium-desktop-up  ·  min-width: 1400px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1400px) {
  /* Container is already capped — nothing extra needed at this tier */
}


/* ═══════════════════════════════════════════════════════════════════════════
   for-big-desktop-up  ·  min-width: 1800px
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 1800px) {
  /* Reserve for future large-monitor enhancements */
}


/* ═══════════════════════════════════════════════════════════════════════════
   print
   ═══════════════════════════════════════════════════════════════════════════ */
@media print {
  #sidebar, #header, .section-toolbar-sticky { display: none !important; }
  .app-shell    { margin: 0 !important; }
  #main         { padding: 0 !important; }
  .layout-container { padding: 0 !important; max-width: 100% !important; }
}