:root {
  --ink: #080d39;
  --muted: #606884;
  --line: #e4e9f3;
  --soft: #f7f9fd;
  --white: #ffffff;
  --accent: #5234f3;
  --accent-dark: #2c1bb5;
  --success: #0aa869;
  --warning: #e59700;
  --danger: #e93662;
  --info: #1272e8;
  --shadow: 0 18px 48px rgba(20, 28, 64, 0.08);
}

@media (max-width: 860px) {
  .page-content { grid-template-columns: minmax(0, 1fr); }
  .crm-dashboard,
  .crm-list-panel,
  .dashboard-table-fallback { min-width: 0; max-width: 100%; }

  #dashboardCards {
    display: none;
  }

  .dashboard-table-fallback {
    display: block;
    margin-top: 8px;
  }

  .dashboard-table-fallback .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .dashboard-table-fallback table.dashboard-contact-table {
    display: table;
    width: 900px;
    min-width: 900px;
    margin: 0;
    border: 0;
    border-radius: 0;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    overflow: visible;
  }

  .dashboard-table-fallback thead { display: table-header-group; }
  .dashboard-table-fallback tbody { display: table-row-group; }
  .dashboard-table-fallback tr {
    display: table-row;
    width: auto;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .dashboard-table-fallback tr + tr { margin-top: 0; }

  .dashboard-table-fallback th,
  .dashboard-table-fallback td {
    display: table-cell;
    width: auto;
    height: 42px;
    padding: 7px 9px;
    border-bottom: 1px solid var(--line);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
    vertical-align: middle;
    text-align: left;
    font-size: 11px;
  }

  .dashboard-table-fallback th { height: 38px; }
  .dashboard-table-fallback td::before { content: none; }
  .dashboard-table-fallback .row-check { width: 16px; min-height: 16px; height: 16px; }

}

* { box-sizing: border-box; }

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: #f7f9ff;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0;
}

button, input, select, textarea { font: inherit; }
input, select, textarea { min-width: 0; }

button {
  min-height: 38px;
  border: 0;
  border-radius: 6px;
  padding: 0 16px;
  cursor: pointer;
  font-weight: 800;
}

.sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: 245px;
  overflow-y: auto;
  padding: 24px 16px;
  color: #fff;
  background: linear-gradient(180deg, #090847 0%, #17166d 55%, #0b0a4c 100%);
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: center;
  margin-bottom: 28px;
}

.brand-logo { display: block; width: 108px; height: 108px; max-height: none; aspect-ratio: 1; object-fit: contain; object-position: center; padding: 0; border-radius: 8px; background: #fff; }

.menu-toggle {
  display: none;
  margin-left: auto;
  width: 42px;
  min-height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.08);
}

.menu-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  margin: 4px auto;
  border-radius: 999px;
  background: #fff;
}

.brand-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  color: #0a0a45;
  background: #ffd23f;
  font-size: 17px;
  font-weight: 900;
}

.brand strong, .brand small, .user-chip strong, .user-chip small { display: block; }
.brand strong { font-size: 20px; line-height: 1.1; }
.brand small { margin-top: 3px; color: #d8ddff; font-size: 12px; }

.sidebar-section {
  margin: 28px 0 12px;
  color: #b8c1ff;
  font-size: 12px;
  text-transform: uppercase;
}

.nav-list {
  display: grid;
  gap: 8px;
}

.nav-link {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  color: #fff;
  background: transparent;
  text-align: left;
  font-weight: 500;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.nav-notification-badge {
  display: inline-grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  margin-left: auto;
  padding: 0 5px;
  border-radius: 999px;
  background: #e93662;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
  box-shadow: 0 0 0 2px rgba(9, 8, 71, .65);
}

.inline-task-form {
  display: block;
}

.inline-task-row select,
.inline-task-row input {
  width: 100%;
  min-width: 120px;
  box-sizing: border-box;
  min-width: 150px;
  height: 38px;
  padding: 0 10px;
  border: 1px solid #cfd7eb;
  border-radius: 7px;
  background: #fff;
  color: #111848;
  appearance: auto;
}

.inline-task-row select[name="inlineTaskType"] {
  min-width: 125px;
}

.inline-task-row select[name="inlineTaskEntity"] {
  min-width: 230px;
}

.inline-task-row input[name="inlineTaskReason"],
.inline-task-row select[name="inlineTaskReason"] {
  min-width: 210px;
}

.inline-task-row input[name="inlineTaskManagerComments"],
.inline-task-row input[name="inlineTaskExecutiveComments"] {
  min-width: 220px;
}

.inline-task-row td {
  padding: 8px;
  background: #f7f8ff;
  vertical-align: middle;
}

.inline-task-row td:last-child {
  white-space: nowrap;
}

.task-entry-remove {
  min-width: 36px;
  min-height: 36px;
  padding: 0 8px;
  color: #b4233b;
  font-size: 21px;
  line-height: 1;
}

.inline-date-task-list {
  margin-top: 18px;
  padding: 16px;
  border: 1px solid #dbe2f4;
  border-radius: 12px;
  background: #fafbff;
}

.inline-date-task-list h3 {
  margin: 0;
  color: #111848;
}

.menu-notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  min-width: 19px;
  height: 19px;
  padding: 0 5px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e93662;
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  line-height: 1;
}

.nav-link::after {
  width: 7px;
  height: 7px;
  margin-left: auto;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  content: "";
  opacity: 0.65;
  transform: rotate(45deg);
  transition: transform 180ms ease, opacity 180ms ease;
}

.nav-link:hover {
  color: #fff;
  background: rgba(112, 72, 255, 0.24);
  box-shadow: 0 0 22px rgba(112, 72, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: translateX(3px);
}

.nav-link:hover::after {
  opacity: 1;
  transform: rotate(45deg) translate(2px, -2px);
}

.nav-icon {
  display: grid;
  place-items: center;
  width: 18px;
  color: #d9ddff;
  font-size: 16px;
  font-weight: 900;
}

.nav-link.active {
  border-radius: 7px;
  background: linear-gradient(135deg, #7048ff, #3e25dd);
  box-shadow: 0 12px 25px rgba(87, 65, 250, 0.36);
  animation: nav-glow 2.6s ease-in-out infinite;
}

@keyframes nav-glow {
  0%, 100% { box-shadow: 0 12px 25px rgba(87, 65, 250, 0.28); }
  50% { box-shadow: 0 12px 30px rgba(112, 72, 255, 0.54); }
}

@media (prefers-reduced-motion: reduce) {
  .nav-link,
  .nav-link::after {
    transition: none;
  }

  .nav-link.active {
    animation: none;
  }
}

.nav-link.active .nav-icon,
.nav-link.active::after {
  color: #fff;
  opacity: 1;
}

.app-shell {
  margin-left: 245px;
  padding: 24px clamp(14px, 2vw, 28px) 34px;
}

.topbar, .user-chip, .panel-head, .actions, .endpoint-row, .toolbar, .record-actions {
  display: flex;
  align-items: center;
}

.topbar {
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.topbar > div:first-child { flex: 1; }
.topbar.admin-dashboard-topbar { position: relative; justify-content: center; }
.topbar.admin-dashboard-topbar > div:first-child { flex: 0 1 auto; text-align: center; }
.topbar.admin-dashboard-topbar .account-controls { position: absolute; right: 0; }

.account-controls { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex: 0 0 auto; }
.notification-toggle { position: relative; display: grid; place-items: center; width: 38px; height: 38px; min-height: 38px; padding: 0; flex: 0 0 auto; border: 1px solid #dce4f4; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; box-shadow: 0 6px 18px rgba(20, 28, 64, .06); }
.notification-toggle:hover, .notification-toggle[aria-expanded="true"] { border-color: var(--accent); background: #faf9ff; }
.notification-toggle:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.notification-toggle svg { width: 19px; height: 19px; transform: translateY(-1px); }
.notification-badge { position: absolute; top: 0; right: 0; min-width: 17px; height: 17px; padding: 0 3px; display: grid; place-items: center; border: 2px solid #fff; border-radius: 999px; background: #e13951; color: #fff; font-size: 9px; line-height: 1; font-weight: 800; box-shadow: 0 1px 3px rgba(20, 28, 64, .18); }
.notification-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 51; width: min(360px, calc(100vw - 24px)); max-height: min(490px, 75vh); overflow: hidden; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(18, 26, 60, .18); }
.notification-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.notification-panel-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex: 0 0 auto; }
.notification-panel-head strong { font-size: 16px; }
.notification-panel-title { display: flex; align-items: center; gap: 9px; min-width: 0; }
.notification-panel-title-icon { display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px; border-radius: 50%; background: #f0efff; color: var(--accent-dark); }
.notification-panel-title-icon svg { width: 18px; height: 18px; }
.notification-panel-head button { border: 0; background: none; color: var(--accent-dark); font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.notification-list { min-height: 65px; overflow-y: auto; }
.notification-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: start; gap: 11px; width: 100%; padding: 13px 14px; border: 0; border-bottom: 1px solid var(--line); background: #fff; color: var(--ink); text-align: left; }
.notification-row:hover, .notification-row:focus-visible { background: #f4f2ff; }
.notification-row.unread { background: #f1f5ff; border-left: 3px solid var(--accent); padding-left: 11px; }
.notification-row-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; }
.notification-row-icon svg { width: 23px; height: 23px; }
.notification-row-icon.approval { color: #0aa869; background: #e4f8ef; }
.notification-row-icon.created { color: #5735ee; background: #ebe7ff; }
.notification-row-icon.updated { color: #1272e8; background: #e4f3ff; }
.notification-row-icon.system { color: #e59700; background: #fff3d7; }
.notification-row-content { display: grid; gap: 3px; min-width: 0; }
.notification-row-title { font-size: 13px; font-weight: 800; }
.notification-row-message { font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.notification-row-context { color: var(--accent-dark); font-size: 11px; font-weight: 800; }
.notification-row time { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; }
.notification-row time svg { width: 14px; height: 14px; flex: 0 0 auto; }
.notification-row-chevron { color: var(--muted); font-size: 25px; font-weight: 400; line-height: 1; }
.notification-open-action { align-self: center; min-height: 30px; padding: 5px 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--white); color: var(--accent-dark); font-size: 11px; font-weight: 800; white-space: nowrap; cursor: pointer; }
.notification-open-action:hover, .notification-open-action:focus-visible { border-color: var(--accent); background: #f4f2ff; }
.notification-empty { padding: 22px 16px; color: var(--muted); font-size: 13px; }
.profile-toggle { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 5px 12px 5px 5px; border: 1px solid #dce4f4; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; box-shadow: 0 6px 18px rgba(20, 28, 64, .06); }
.profile-toggle:hover, .profile-toggle[aria-expanded="true"] { border-color: var(--accent); background: #faf9ff; }
.profile-toggle:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.account-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, #6849ff, #3421b9); color: #fff; }
.account-avatar svg { width: 22px; height: 22px; }
.account-avatar-large { width: 48px; height: 48px; }
.account-avatar-large svg { width: 28px; height: 28px; }
.profile-trigger-name { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-chevron { width: 18px; height: 18px; color: var(--muted); transition: transform .18s ease; }
.profile-toggle[aria-expanded="true"] .profile-chevron { transform: rotate(180deg); }
.profile-panel { position: absolute; top: calc(100% + 10px); right: 0; z-index: 50; width: min(320px, calc(100vw - 32px)); padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; box-shadow: 0 18px 44px rgba(18, 26, 60, .18); }
.profile-summary { display: flex; gap: 12px; align-items: center; padding: 10px; border-bottom: 1px solid var(--line); }
.profile-summary > div { display: grid; gap: 3px; min-width: 0; }
.profile-summary strong, .profile-summary small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-summary strong { color: var(--ink); font-size: 14px; }
.profile-summary small { color: var(--muted); font-size: 12px; }
.profile-role { width: fit-content; margin-top: 3px; padding: 2px 7px; border-radius: 999px; background: #f0edff; color: var(--accent-dark); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.account-menu-actions { display: grid; gap: 2px; padding-top: 6px; }
.account-menu-actions button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.account-menu-actions button:hover, .account-menu-actions button:focus-visible { background: #f4f2ff; }
.account-menu-actions svg { width: 19px; height: 19px; flex: 0 0 auto; }

[hidden] { display: none !important; }

.login-screen { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(100%, 520px); padding: 32px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.login-card img { display: block; width: min(180px, 100%); aspect-ratio: 1; object-fit: contain; margin: 0 auto 18px; }
.login-card h1 { font-size: 26px; }
.login-card p { margin: 8px 0 20px; color: var(--muted); }
.login-card small { display: block; margin-top: 18px; color: var(--muted); line-height: 1.5; }
.admin-login-form { display: grid; gap: 10px; text-align: left; }
.admin-login-form label { font-weight: 800; }
.admin-login-form input { width: 100%; min-height: 48px; border: 1px solid #cad4e8; border-radius: 7px; padding: 0 14px; }
.password-input-wrap { position: relative; }
.password-input-wrap input { padding-right: 76px; }
.password-toggle { position: absolute; top: 50%; right: 8px; min-height: 32px !important; padding: 4px 8px; border: 0; border-radius: 6px; background: transparent; color: var(--accent-dark); font-size: 12px; font-weight: 800; transform: translateY(-50%); }
.password-toggle:hover, .password-toggle:focus-visible { background: var(--soft); }
.admin-login-form button { min-height: 48px; }
.admin-login-status { min-height: 18px; color: var(--danger); font-size: 12px; }
.admin-login-status[data-state="loading"] { color: var(--muted); }
.password-dialog { width: min(100% - 32px, 460px); border: 1px solid var(--line); border-radius: 16px; padding: 24px; box-shadow: var(--shadow); }
.password-dialog::backdrop { background: rgba(8, 13, 57, .55); }
.password-dialog h2 { margin-bottom: 8px; }
.password-dialog label input { margin-top: 6px; }
.confirm-dialog { width: min(100% - 32px, 430px); border: 1px solid var(--line); border-radius: 18px; padding: 0; background: #fff; color: var(--ink); box-shadow: 0 24px 70px rgba(8, 13, 57, .25); }
.confirm-dialog::backdrop { background: rgba(8, 13, 57, .58); backdrop-filter: blur(2px); }
.confirm-dialog-content { display: grid; justify-items: center; gap: 10px; padding: 28px 26px 24px; text-align: center; }
.confirm-dialog-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #f0b7c5; border-radius: 50%; color: #b51442; background: #fff0f3; font-size: 24px; font-weight: 900; }
.confirm-dialog h2 { margin: 0; font-size: 19px; }
.confirm-dialog p { max-width: 34ch; margin: 0; color: var(--muted); line-height: 1.5; }
.confirm-dialog-actions { justify-content: center; width: 100%; margin-top: 8px; }
.confirm-dialog-actions button { min-width: 112px; }
.confirm-danger { color: #fff; border: 1px solid #c72851; background: linear-gradient(135deg, #e93662, #b51442); }
.confirm-danger:hover, .confirm-danger:focus-visible { border-color: #9e1036; background: linear-gradient(135deg, #d92d58, #a30d39); }
.movement-edit-dialog { width: min(100% - 32px, 430px); border: 1px solid var(--line); border-radius: 18px; padding: 0; background: #fff; color: var(--ink); box-shadow: 0 24px 70px rgba(8, 13, 57, .25); }
.movement-edit-dialog::backdrop { background: rgba(8, 13, 57, .58); backdrop-filter: blur(2px); }
.movement-edit-form { display: grid; justify-items: center; gap: 10px; padding: 28px 26px 24px; text-align: center; }
.movement-edit-form label { display: grid; width: 100%; gap: 6px; color: var(--muted); font-size: 12px; font-weight: 800; text-align: left; }
.movement-edit-form input { width: 100%; min-height: 44px; }
.movement-edit-form .status { min-height: 18px; margin: 0; }
.account-list { display: grid; gap: 8px; margin: 16px 0 20px; }
.account-form-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: end; gap: 12px; }
.account-form-row > button { width: auto; white-space: nowrap; }
#accountForm > .status { margin: 0; }
#accountForm > .status:empty { display: none; }
.account-list > div { display: grid; grid-template-columns: minmax(100px, max-content) minmax(0, 1fr) auto; align-items: center; gap: 8px 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.account-list span { min-width: 0; color: var(--muted); overflow-wrap: anywhere; }
.account-list em { font-style: normal; color: var(--accent-dark); font-weight: 700; }
.login-divider { margin: 10px 0 14px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.login-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.login-choices button { min-height: 50px; border: 1px solid var(--line); background: var(--soft); color: var(--ink); }
.login-choices button:hover { border-color: var(--accent); background: #f0edff; }

@media (max-width: 680px) {
  .topbar { flex-wrap: wrap; }
  .account-controls { width: 100%; justify-content: flex-end; }
  .login-choices { grid-template-columns: 1fr; }
  .account-form-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .account-form-row > label:first-child { grid-column: 1; grid-row: 1; }
  .account-form-row #accountPasswordLabel { grid-column: 1 / -1; grid-row: 2; }
  .account-form-row > button { grid-column: 2; grid-row: 1; padding-inline: 10px; font-size: 12px; }
  .account-list > div { grid-template-columns: minmax(0, 1fr) auto; gap: 5px 10px; padding: 11px 12px; }
  .account-list span { grid-column: 1 / -1; grid-row: 2; font-size: 14px; line-height: 1.4; }
  .account-list em { grid-column: 2; grid-row: 1; font-size: 13px; }
}

.topbar h1 {
  text-align: center;
}

.topbar.employee-dashboard-topbar h1 { text-align: left; }
.topbar.employee-dashboard-topbar #pageSubtitle { margin-top: 4px; }
.topbar.employee-dashboard-topbar h1 { animation: employee-enter 480ms ease-out backwards; }
.topbar.employee-dashboard-topbar #pageSubtitle { animation: employee-enter 480ms ease-out 100ms backwards; }

h1, h2, h3, p { margin: 0; }
h1 { font-size: 27px; line-height: 1.15; }

.topbar p, .panel-head p, .empty-note, .hint {
  margin-top: 6px;
  color: var(--muted);
}

.user-chip { gap: 10px; }

.avatar {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-weight: 900;
}

.user-chip small { color: var(--muted); font-size: 12px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.metrics[hidden] {
  display: none;
}

.metric-card, .panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.metric-card {
  position: relative;
  display: flex;
  gap: 14px;
  align-items: center;
  min-height: 96px;
  padding: 18px;
}

.metric-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 8px;
  font-size: 25px;
}

.blue { background: #e9f2ff; }
.green { background: #e8f9ef; }
.amber { background: #fff2d8; }
.violet { background: #f0edff; }
.rose { background: #ffeaf0; }

.metric-card small {
  display: block;
  color: var(--ink);
  font-weight: 800;
}

.metric-card strong {
  display: block;
  margin-top: 5px;
  font-size: 24px;
}

.metric-card em {
  color: var(--success);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.metric-card em.down { color: var(--danger); }
.page-content { display: grid; gap: 18px; }
.panel { padding: 20px; }

.app-shell,
.page-content,
.panel,
form,
fieldset,
.grid,
label,
.table-wrap {
  min-width: 0;
  max-width: 100%;
}

.panel-head {
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.panel h2 { font-size: 18px; }
.actions, .endpoint-row, .toolbar, .record-actions { gap: 10px; }

.admin-tools {
  display: grid;
  gap: 18px;
}

.bulk-import-panel {
  order: -1;
  border: 1px solid #d9d2ff;
  background: linear-gradient(135deg, #fff 0%, #faf9ff 100%);
}

.admin-tool-badge {
  padding: 7px 11px;
  border-radius: 999px;
  color: #3f2ab9;
  background: #ece8ff;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.bulk-import-form {
  display: grid;
  gap: 18px;
  margin-top: 20px;
}

.bulk-import-actions {
  justify-content: flex-end;
}

.grid.two.import-source-row { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
#bulkImportType,
#bulkImportOwner {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23616b88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 16px;
}
.import-download-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.import-download-actions button { width: 100%; min-height: 42px; padding: 7px 10px; font-size: 12px; }
.import-download-button { width: 100%; min-width: 0; min-height: 42px; padding: 7px 10px; font-size: 12px; }
.import-drop-zone { display: grid; place-items: center; gap: 6px; min-height: 150px; padding: 22px; border: 2px dashed #bfc9dc; border-radius: 12px; background: var(--soft); text-align: center; cursor: pointer; }
.import-drop-zone:hover, .import-drop-zone:focus-within { border-color: var(--accent); background: #f7f5ff; }
.import-drop-zone .import-upload-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #e9e5ff; color: var(--accent-dark); font-size: 28px; font-weight: 900; }
.import-drop-zone small { color: var(--muted); font-weight: 600; }
.import-drop-zone input[type="file"] { width: min(100%, 390px); margin-top: 6px; background: var(--white); }
.import-preview { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); }
.import-preview-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.import-preview-stats > div { display: grid; gap: 3px; padding: 10px; border-radius: 8px; background: var(--soft); text-align: center; }
.import-preview-stats strong { color: var(--accent-dark); font-size: 22px; }
.import-preview-stats span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.import-preview-stats .has-errors strong { color: var(--danger); }
.import-preview p { color: var(--muted); font-size: 13px; }
.import-preview ul { margin: 0; padding-left: 20px; color: var(--danger); font-size: 12px; }
.bulk-import-actions button:disabled { opacity: .5; cursor: not-allowed; }

.bulk-import-notes {
  display: grid;
  gap: 14px;
}

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

.import-columns > div {
  display: grid;
  gap: 7px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.import-columns span {
  color: var(--muted);
  line-height: 1.55;
}

.contact-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.admin-contact-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.admin-contact-table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  background: #fff;
}

.admin-contact-table th,
.admin-contact-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  white-space: nowrap;
}

.admin-contact-table th {
  color: var(--muted);
  background: #f8f9fd;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.admin-contact-table tbody tr:last-child td {
  border-bottom: 0;
}

.admin-contact-table tbody tr:hover {
  background: #fbfcff;
}

.admin-contact-name,
.admin-contact-email {
  color: #126b70;
  font-weight: 800;
}

.admin-contact-email {
  min-width: 220px;
}

.contact-id,
.contact-type {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 999px;
  color: #4d5875;
  background: #eef1f7;
  font-size: 11px;
  font-weight: 800;
}

.contact-type {
  color: #3f2ab9;
  background: #ece8ff;
}

@media (max-width: 860px) {
  .admin-tool-badge {
    align-self: flex-start;
  }

  .grid.two.import-source-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-download-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .import-drop-zone { min-height: 130px; padding: 16px 10px; }

  .import-columns {
    grid-template-columns: 1fr;
  }
}

.form-actions-bottom {
  margin-top: 16px;
}

.task-status-actions { justify-content: flex-end; }
.task-status-actions[hidden], .task-batch-actions[hidden] { display: none; }
.task-status-actions button:disabled { opacity: .55; cursor: not-allowed; }

.form-panel-head {
  justify-content: flex-end;
  margin-bottom: 14px;
}

.primary {
  color: #fff;
  background: linear-gradient(135deg, #5f42f7, #321fc5);
}

.secondary {
  color: var(--ink);
  border: 1px solid var(--line);
  background: #fff;
}

.sheet-config {
  padding: 14px;
  margin-bottom: 18px;
  border: 1px solid #dbe5ff;
  border-radius: 8px;
  background: #f7faff;
}

.sheet-config label { margin-bottom: 8px; }
.endpoint-row input, .toolbar input { flex: 1; }

fieldset {
  padding: 0;
  margin: 0;
  border: 0;
}

fieldset + fieldset {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

legend {
  margin-bottom: 12px;
  color: #0d35ff;
  font-weight: 900;
}

.stepper-header {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 360px;
  margin: 0 auto 18px;
}

.stepper-header.three-step-header {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stepper-header.two-step-header {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.step-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: var(--soft);
}

.step-pill span {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #2540d8;
  background: #e9f0ff;
  font-size: 12px;
  font-weight: 900;
}

.step-pill.active {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, #5f42f7, #321fc5);
  box-shadow: 0 12px 26px rgba(74, 47, 224, 0.2);
}

.step-pill.active span {
  color: #321fc5;
  background: #fff;
}

.step-panel {
  min-height: 230px;
}

.step-panel[hidden] {
  display: none;
}

.stepper-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.grid {
  display: grid;
  gap: 14px 28px;
}

.form-section-title {
  grid-column: 1 / -1;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--line);
  color: #0d35ff;
  font-weight: 900;
}

.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }

label {
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.required-mark { color: #eb1d4d; }

input, select, textarea {
  width: 100%;
  min-height: 39px;
  margin-top: 8px;
  border: 1px solid #cfd7e6;
  border-radius: 5px;
  padding: 9px 12px;
  color: var(--ink);
  background: #fff;
  font-weight: 500;
  outline: none;
}

input::placeholder,
textarea::placeholder {
  color: #929bad;
  font-weight: 400;
}

form[data-record-type] input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="date"]):not([type="time"]),
form[data-record-type] textarea {
  color: #111a3d;
  font-weight: 600;
}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(81, 55, 244, 0.12);
}

.custom-select {
  position: relative;
  margin-top: 8px;
}

.crm-toolbar .custom-select {
  margin-top: 0;
}

.custom-select-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 39px;
  padding: 9px 12px;
  color: var(--ink);
  border: 1px solid #cfd7e6;
  border-radius: 5px;
  background: #fff;
  font-weight: 600;
  text-align: left;
}

.custom-select-btn span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select:not(.has-value) .custom-select-btn {
  color: #72788a;
  font-weight: 500;
}

.custom-select-btn b {
  width: 9px;
  height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
}

.custom-select.open .custom-select-btn,
.custom-select-btn:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(81, 55, 244, 0.12);
}

.custom-select-btn:disabled {
  cursor: not-allowed;
  opacity: .6;
  background: #f4f6fb;
}

.custom-select.has-value .custom-select-btn {
  font-weight: 700;
}

.custom-select.invalid .custom-select-btn {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(233, 54, 98, 0.12);
}

.custom-select-menu {
  position: absolute;
  z-index: 20;
  inset: calc(100% + 6px) 0 auto 0;
  display: none;
  max-height: 220px;
  overflow-y: auto;
  padding: 6px;
  border: 1px solid #dfe5f2;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(20, 28, 64, 0.16);
}

.custom-select.open .custom-select-menu {
  display: grid;
  gap: 4px;
}

.custom-select.open-up .custom-select-menu {
  inset: auto 0 calc(100% + 6px) 0;
}

.custom-select-menu button {
  justify-content: flex-start;
  width: 100%;
  min-height: 34px;
  padding: 0 10px;
  color: var(--ink);
  border-radius: 5px;
  background: transparent;
  text-align: left;
  font-weight: 700;
}

.custom-select-menu button:hover,
.custom-select-menu button:focus {
  color: var(--accent-dark);
  background: #f1efff;
}

.custom-select-search {
  width: 100%;
  min-height: 34px;
  padding: 7px 9px;
  border: 1px solid #cfd7e6;
  border-radius: 5px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 12px;
}

.custom-select-search:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(81, 55, 244, 0.12);
  outline: 0;
}

.custom-select-search:disabled {
  cursor: not-allowed;
  opacity: .6;
  background: #f4f6fb;
}

.wide { grid-column: span 2; }
.full { grid-column: 1 / -1; }

/* Keep every form answer within one grid column, regardless of field type. */
form .grid > label.wide,
form .grid > label.full { grid-column: auto; }

form .grid > label {
  min-width: 0;
  align-self: end;
}

form .grid > label input:not([type="hidden"]),
form .grid > label select,
form .grid > label textarea,
form .grid > label .custom-select-btn { min-height: 44px; }

form .grid > label textarea {
  height: 44px;
  resize: vertical;
}

.contact-number-field .add-phone-btn {
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
}

.flow {
  display: grid;
  grid-template-columns: repeat(8, minmax(100px, 1fr));
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.flow li {
  display: grid;
  place-items: center;
  min-height: 58px;
  border: 1px solid #e7eaf4;
  border-radius: 8px;
  padding: 8px;
  text-align: center;
  font-size: 12px;
  font-weight: 900;
  background: var(--soft);
}

.multi-contact {
  margin-top: 16px;
  display: grid;
  gap: 10px;
}

.add-contact-btn {
  justify-self: start;
  min-height: 30px;
  padding: 0 12px;
  border: 1px dashed #c9a66b;
  color: #8b6a32;
  background: #fffaf0;
  font-size: 12px;
}

.add-phone-btn {
  position: absolute;
  top: -7px;
  right: 0;
  margin: 0;
  width: 28px;
  min-width: 28px;
  min-height: 28px;
  padding: 0;
  border: 1px solid #dfe5f2;
  color: var(--ink);
  background: #fff;
  font-size: 18px;
  line-height: 1;
}

.contact-number-field {
  position: relative;
}

.contact-number-field > input {
  display: block;
  clear: both;
}

.multi-contact-list {
  display: grid;
  gap: 12px;
}

.primary-phone-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.multi-contact-row {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr)) 42px;
  gap: 12px;
  align-items: end;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.contact-details-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 420px));
  justify-content: center;
  gap: 14px;
  align-items: start;
}

.contact-details-card {
  min-width: 0;
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--soft);
}

.contact-details-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: var(--ink);
  font-size: 14px;
}

.contact-details-stack {
  display: grid;
  gap: 8px;
}

.contact-details-stack > label {
  font-size: 12px;
}

.contact-details-stack input,
.contact-details-stack .custom-select-btn {
  min-height: 38px;
  padding-top: 8px;
  padding-bottom: 8px;
  font-size: 13px;
}

.contact-details-layout > .multi-contact,
.contact-details-layout .multi-contact-list {
  display: contents;
}

.contact-details-layout .multi-contact-row {
  grid-template-columns: 1fr;
  align-items: stretch;
}

.contact-details-layout .add-contact-btn {
  justify-self: start;
  margin-top: 2px;
}

.multi-phone-list {
  display: grid;
  gap: 12px;
}

.multi-phone-row {
  display: grid;
  grid-template-columns: 330px auto;
  gap: 8px;
  align-items: end;
  width: fit-content;
  max-width: 100%;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.multi-phone-row input {
  min-height: 38px;
}

.additional-phone-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.status {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 22px;
  margin-top: 14px;
  font-weight: 800;
}

.status.ok { color: var(--success); }
.status.error { color: var(--danger); }
.status.loading { color: var(--ink); }
.status.pending { color: var(--muted); }

.loader-dot {
  width: 16px;
  height: 16px;
  border: 3px solid #dfe5f2;
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}

button:disabled {
  cursor: wait;
  opacity: 0.72;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.dashboard-grid, .bottom-grid {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 18px;
}

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

.crm-dashboard {
  display: block;
}

.dashboard-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.dashboard-head-actions button {
  width: auto;
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
  white-space: nowrap;
}

.dashboard-list-title { display: flex; align-items: center; gap: 10px; }
.dashboard-title-icon { display: grid; place-items: center; width: 42px; height: 42px; flex: 0 0 42px; border-radius: 10px; background: #eaf4ff; color: #1272e8; }
.dashboard-title-icon svg { width: 25px; height: 25px; fill: currentColor; }
.contact-type-label { display: inline-flex; align-items: center; gap: 9px; min-width: 0; color: var(--ink); font-weight: 700; }
.contact-type-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 50%; }
.contact-type-icon svg { width: 20px; height: 20px; }
.contact-type-label.school .contact-type-icon { color: #1272e8; background: #e5f3ff; }
.contact-type-label.distributor .contact-type-icon { color: #5735ee; background: #eee9ff; }
.contact-type-label.distributor .contact-type-icon svg { fill: currentColor; }

@media (max-width: 420px) {
  .crm-list-panel > .panel-head { flex-wrap: wrap; }

  .dashboard-table-fallback .has-select-column th:nth-child(2),
  .dashboard-table-fallback .has-select-column td:nth-child(2),
  .dashboard-table-fallback .dashboard-contact-table:not(.has-select-column) th:first-child,
  .dashboard-table-fallback .dashboard-contact-table:not(.has-select-column) td:first-child {
    width: 145px;
  }
  .contact-type-label { gap: 6px; font-size: 10px; }
  .contact-type-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .contact-type-icon svg { width: 17px; height: 17px; }
}

.role-overview {
  --role-accent: #5234f3;
  --role-soft: #f0edff;
  padding: 24px;
  margin-bottom: 20px;
  border: 1px solid var(--line);
  border-top: 5px solid var(--role-accent);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow);
}
.role-overview-manager { --role-accent: #00877e; --role-soft: #e7f7f4; }
.role-overview-employee { --role-accent: #1769d2; --role-soft: #eaf3ff; }
.role-overview-employee { position: relative; overflow: hidden; padding: 20px 24px; border-top-color: transparent; animation: employee-enter 560ms ease-out 120ms backwards; }
.role-overview-employee::before { content: ""; position: absolute; inset: 0 0 auto; height: 5px; background: linear-gradient(90deg, #1769d2, #69a8ff, #1769d2); background-size: 200% 100%; animation: employee-accent-flow 7s linear infinite; }
.role-overview-head { display: flex; justify-content: space-between; align-items: start; gap: 20px; margin-bottom: 20px; }
.role-kicker { color: var(--role-accent); font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.role-overview-head h2 { margin: 5px 0; font-size: 24px; }
.role-overview-head p { color: var(--muted); }
.role-shortcuts { display: flex; flex-wrap: wrap; gap: 8px; }
.role-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.role-stat-grid article { display: grid; gap: 8px; padding: 16px; border-radius: 10px; background: var(--role-soft); }
.role-stat-grid small { color: var(--muted); font-weight: 700; }
.role-stat-grid strong { color: var(--role-accent); font-size: 25px; }
.role-overview-employee .role-stat-grid { margin-bottom: 0; }
.role-overview-employee .employee-summary-card { grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 12px; transition: transform 180ms ease, box-shadow 180ms ease; animation: employee-enter 480ms ease-out backwards; }
.role-overview-employee .employee-summary-card:nth-child(1) { animation-delay: 180ms; }
.role-overview-employee .employee-summary-card:nth-child(2) { animation-delay: 260ms; }
.role-overview-employee .employee-summary-card:nth-child(3) { animation-delay: 340ms; }
.role-overview-employee .employee-summary-card:nth-child(4) { animation-delay: 420ms; }
@media (hover: hover) { .role-overview-employee .employee-summary-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(23, 105, 210, .11); } }
.employee-summary-card > div { display: grid; gap: 5px; min-width: 0; }
.employee-summary-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px; background: #fff; font-size: 21px; }
@keyframes employee-enter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes employee-accent-flow { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) {
  .topbar.employee-dashboard-topbar h1,
  .topbar.employee-dashboard-topbar #pageSubtitle,
  .role-overview-employee,
  .role-overview-employee::before,
  .role-overview-employee .employee-summary-card { animation: none; transition: none; }
}
.role-task-panel { border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.role-task-panel .panel-head { justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.role-task-list { display: grid; gap: 8px; }
.role-task-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.role-task-row > div { display: grid; gap: 3px; min-width: 180px; flex: 1; }
.role-task-row > div span, .role-task-row > div small { color: var(--muted); }
.contact-approval-row > .record-actions { display: flex; flex: 0 0 auto; min-width: 0; }
.contact-approval-row > .record-actions button { width: auto; }
.task-approval-hint { margin-top: 14px; color: var(--accent-dark); font-weight: 700; }
.task-creator-field input[readonly] { background: #f5f7fc; color: var(--ink); cursor: default; }
.task-list-panel { min-height: 0; }
.task-employee-group { margin: 0 0 10px; }
.task-employee-group-toggle { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 12px; width: 100%; min-height: 44px; margin: 0; padding: 7px 13px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--ink); font-size: 15px; font-weight: 800; text-align: left; cursor: pointer; }
.task-employee-group-toggle:hover { border-color: var(--accent); }
.task-employee-group-toggle:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.task-employee-group-count { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 13px; font-weight: 700; }
.task-employee-group-count [data-task-owner-indicator] { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--white); color: var(--accent-dark); font-size: 18px; }
.task-group-status-pending { border: 1px solid #ddd5ff; color: var(--accent-dark); background: #f0edff; }
.task-group-status-completed { border: 1px solid var(--accent); color: #fff; background: var(--accent); }
.task-employee-group-content { margin-top: 12px; }
.task-employee-group:last-child { margin-bottom: 0; }
.task-table-name-link {
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.task-table-name-link:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.task-table-date-link { color: var(--accent-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.task-table-date-link:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.task-date-notification-wrap { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.task-location-notification { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: 999px; background: #e93662; color: #fff; font-size: 10px; font-weight: 900; line-height: 1; white-space: nowrap; box-shadow: 0 2px 6px rgba(185, 22, 66, .28); }
.task-date-notification-wrap .task-location-notification { position: absolute; top: -13px; left: -12px; z-index: 1; }
.task-details-panel { max-width: 980px; margin-inline: auto; }
.task-date-details-panel { width: 100%; max-width: 100%; box-sizing: border-box; margin-inline: auto; }
.task-date-table { width: 100%; max-width: 100%; overflow-x: auto; overflow-y: hidden; }
.task-date-table table { min-width: 1180px; margin-left: 0; margin-right: 0; }
.task-date-table th, .task-date-table td { vertical-align: top; }
.task-date-table .record-actions { flex-wrap: wrap; }
.task-date-table td[data-label^="Comments by"] {
  min-width: 0;
}
.task-date-table td[data-label^="Comments by"] textarea {
  width: 100%;
  min-width: 0;
  min-height: 78px;
  box-sizing: border-box;
  resize: vertical;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.bulk-task-panel { max-width: 1120px; margin-inline: auto; }
.bulk-task-settings { display: grid; grid-template-columns: minmax(220px, 1fr) 180px; gap: 12px; margin-bottom: 14px; }
.bulk-task-rows { display: grid; gap: 8px; margin-bottom: 10px; }
.bulk-task-row { display: grid; grid-template-columns: 28px 140px minmax(220px, 1.4fr) minmax(180px, 1fr) auto; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.bulk-task-row select, .bulk-task-row input { min-width: 0; width: 100%; box-sizing: border-box; }
.bulk-task-number { color: var(--muted); font-size: 12px; font-weight: 800; text-align: center; }
@media (max-width: 700px) {
  .bulk-task-settings { grid-template-columns: 1fr; }
  .bulk-task-row { grid-template-columns: 24px 1fr; }
  .bulk-task-row select, .bulk-task-row input { grid-column: 2; }
  .bulk-task-row button { grid-column: 2; justify-self: start; }
}
.task-detail-head { margin-bottom: 18px; }
.task-detail-head p { margin-top: 4px; color: var(--muted); }
.task-date-owner::before { content: " · "; }
.task-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 24px;
  margin: 0;
}
.task-detail-item {
  display: grid;
  grid-template-columns: minmax(130px, .8fr) minmax(0, 1.2fr);
  gap: 14px;
  padding: 13px 4px;
  border-bottom: 1px solid var(--line);
}
.task-detail-item dt { color: var(--muted); font-weight: 700; }
.task-detail-item dd { margin: 0; color: var(--ink); font-weight: 800; overflow-wrap: anywhere; white-space: pre-wrap; }
.task-detail-comments {
  grid-template-columns: minmax(0, 1fr);
}
.task-detail-actions { margin-top: 22px; }
.task-list-panel .table-wrap { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.task-list-panel table { width: max-content; min-width: 1200px; }
.task-list-panel th, .task-list-panel td { white-space: nowrap; }
.task-list-panel .date-cell { min-width: 118px; white-space: nowrap; }
.task-list-panel td[data-label="Comments"] {
  width: 340px;
  max-width: 340px;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  line-height: 1.45;
  vertical-align: top;
}
.task-view-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.task-view-tabs button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 8px 15px; border: 1px solid #dfe3ee; border-radius: 10px; background: #f7f8fc; color: #59627a; font-weight: 800; box-shadow: none; transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease; }
.task-view-tabs button:hover { border-color: #bdb1ff; background: #f1eeff; color: var(--accent-dark); }
.task-view-tabs button[aria-selected="true"] { border-color: var(--accent); background: linear-gradient(135deg, #6547f5, #4327d8); color: #fff; box-shadow: 0 7px 16px rgba(82, 52, 243, .22); }
.task-view-tabs button:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.task-view-tabs button span { display: grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 999px; background: #e7eaf2; color: #3f4861; font-size: 11px; }
.task-view-tabs button .task-tab-notification { display: grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 999px; background: #e93662; color: #fff; font-size: 10px; line-height: 1; }
.task-view-tabs button[aria-selected="true"] span { background: rgba(255, 255, 255, .92); color: #4327d8; }
.record-delete-action { border-color: #f0b7c5; color: #b51442; }
.record-delete-action:hover, .record-delete-action:focus-visible { border-color: #e93662; background: #fff0f3; color: #a30d39; }
.task-view-tabs button[aria-selected="true"] .task-tab-notification { background: #e93662; color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, .9); }
.task-source-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: -5px 0 14px; }
.task-source-filters button { min-height: 30px; padding: 4px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--muted); font-size: 11px; font-weight: 800; }
.task-source-filters button[aria-pressed="true"] { border-color: var(--accent); background: var(--soft); color: var(--accent-dark); }
.task-source-filters button:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
#taskResults > .empty-note { padding: 16px 0; }
@media (max-width: 620px) {
  .task-view-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    overflow: visible;
    padding-bottom: 0;
  }
  .task-view-tabs button {
    width: 100%;
    min-width: 0;
    gap: 4px;
    padding: 7px 4px;
    font-size: 11px;
    line-height: 1.15;
  }
  .task-view-tabs button span { min-width: 18px; height: 18px; padding: 0 4px; font-size: 10px; flex: 0 0 auto; }
}
.task-scroll-hint { display: none; color: var(--muted); font-size: 12px; }
.assigned-distributors-panel { min-height: 420px; }
.task-list-head { justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 20px; }
.task-list-head p { margin-top: 5px; color: var(--muted); }
.task-list-head > button { white-space: nowrap; }
.task-list-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-left: auto; }
.task-list-actions > button { white-space: nowrap; }
.task-list-search {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 240px;
  min-height: 40px;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  color: var(--muted);
}
.task-list-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(82, 52, 243, .1); }
.task-list-search span { font-size: 23px; line-height: 1; transform: rotate(-18deg); }
.task-list-search input {
  width: 100%;
  min-height: 34px;
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  box-shadow: none;
}
.task-entry-summary {
  margin-top: 16px;
  padding: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
}
.task-form-panel { max-width: 850px; min-height: 500px; }
.task-form-panel .form-actions-bottom { margin-top: 20px; }
@media (max-width: 900px) { .role-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .role-overview { padding: 16px; }
  .role-overview-head { flex-direction: column; }
  .role-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .role-overview-employee .employee-summary-card { grid-template-columns: 1fr; gap: 7px; padding: 12px; }
  .role-overview-employee .employee-summary-card small { font-size: 12px; line-height: 1.3; }
  .role-task-panel .panel-head { flex-wrap: wrap; }
  .task-list-head { flex-wrap: wrap; }
  .task-list-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: min(100%, 326px);
    gap: 8px;
    margin-left: 0;
  }
  .task-list-search { width: 100%; min-width: 0; min-height: 40px; }
  .task-list-actions > button { width: 100%; min-width: 0; min-height: 40px; padding: 7px 10px; font-size: 13px; }
  .task-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 12px; }
  .task-detail-item { grid-template-columns: minmax(0, 1fr); gap: 5px; padding: 10px 3px; }
  .task-detail-comments { grid-column: auto; grid-template-columns: minmax(0, 1fr); }
  .crm-list-panel > .panel-head:has(.has-import-action) { flex-wrap: wrap; }
  .dashboard-head-actions.has-import-action { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .dashboard-head-actions.has-import-action .dashboard-add-btn { grid-column: auto; }
  .dashboard-head-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 7px; }
  .dashboard-head-actions button { width: 100%; min-width: 0; padding: 7px 6px; font-size: 11px; }
}

@media (max-width: 620px) {
  .task-list-panel .table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  .task-list-panel .table-wrap table {
    display: table;
    width: max-content;
    min-width: 900px;
    margin-top: 0;
    border-collapse: collapse;
  }
  .task-list-panel .table-wrap thead { display: table-header-group; }
  .task-list-panel .table-wrap tbody { display: table-row-group; }
  .task-list-panel .table-wrap tr {
    display: table-row;
    width: auto;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }
  .task-list-panel .table-wrap th,
  .task-list-panel .table-wrap td {
    display: table-cell;
    width: auto;
    min-width: 120px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }
  .task-list-panel .table-wrap th:first-child,
  .task-list-panel .table-wrap td:first-child {
    position: static;
    width: 140px;
    min-width: 140px;
    max-width: 140px;
    background: var(--white);
    box-shadow: none;
    white-space: normal;
  }
  .task-list-panel .table-wrap th:first-child {
    background: #f3f5fa;
  }
  .task-list-panel .table-wrap td::before { display: none; content: none; }
  .task-list-panel .record-actions { flex-wrap: nowrap; }
  .task-list-panel .record-actions button,
  .task-list-panel .compact-btn { width: auto; }
}

.crm-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 180px 180px auto auto;
  gap: 10px;
  margin-bottom: 14px;
}

.dashboard-toolbar-action {
  width: auto;
  min-height: 42px;
  padding: 8px 11px;
  white-space: nowrap;
}

.dashboard-filter-btn,
.dashboard-list-meta {
  display: none;
}

.crm-toolbar input,
.crm-toolbar select {
  margin-top: 0;
}

.dashboard-search-wrap {
  position: relative;
  margin: 0;
}

.dashboard-search-wrap span {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 12px;
  color: #6d7b9a;
  font-size: 25px;
  line-height: 1;
  transform: translateY(-54%);
}

.dashboard-search-wrap input {
  padding-left: 38px;
}

.filter-icon {
  display: inline-block;
  width: 14px;
  height: 12px;
  margin-right: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) scale(0.72) translateY(-2px);
}

.crm-table {
  min-width: 1060px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.dashboard-table-fallback {
  display: block;
  margin-top: 4px;
}

.contact-card-list {
  display: none;
  gap: 12px;
}

.dashboard-table-fallback .crm-table th {
  padding: 13px 14px;
  color: var(--muted);
  background: #f7f8fb;
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.dashboard-table-fallback .crm-table td {
  padding: 14px;
  font-size: 13px;
  vertical-align: middle;
}

.dashboard-table-fallback .crm-table tbody tr:hover {
  background: #f8faff;
}

.dashboard-table-fallback .crm-table td[data-label="School Name"] {
  font-weight: 800;
}

.dashboard-table-fallback .crm-table td[data-label="Contact Person"],
.dashboard-table-fallback .crm-table td[data-label="School E-mail"],
.dashboard-table-fallback .crm-table td[data-label="Contact Number"] {
  color: #247b7b;
  font-weight: 700;
}

.contact-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 88px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(20, 28, 64, 0.06);
}
.contact-card.has-selection { grid-template-columns: auto 42px minmax(0, 1fr) auto; }

.contact-card-check {
  display: grid;
  place-items: center;
}

.contact-card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  color: #1769d2;
  background: #eaf3ff;
  font-size: 12px;
  font-weight: 900;
}

.contact-card-main { min-width: 0; }
.contact-card-topline { display: flex; align-items: center; gap: 10px; }
.contact-card-topline strong { font-size: 13px; }
.contact-card h3 {
  margin-top: 3px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 15px;
}
.contact-card-person {
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.contact-card time { color: var(--muted); font-size: 12px; white-space: nowrap; }
.contact-card-menu {
  width: 34px;
  min-height: 34px;
  padding: 0;
  color: var(--ink);
  background: transparent;
  font-size: 17px;
  letter-spacing: 1px;
}
.contact-card-menu:hover { background: var(--soft); }

.selectable-row {
  cursor: pointer;
}

.selectable-row:hover,
.selectable-row.selected {
  background: #f3f6ff;
}

.row-check {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--brand);
}

.row-check:focus,
.row-check:focus-visible {
  outline: none;
  box-shadow: none;
}

.contact-card-check:focus-within {
  outline: none;
  box-shadow: none;
}

.crm-detail-panel {
  position: sticky;
  top: 24px;
}

.chart-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.chart-card {
  min-height: 260px;
}

.chart-legend {
  display: grid;
  gap: 10px;
}

.chart-legend div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  color: var(--muted);
}

.chart-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.chart-legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chart-legend strong {
  color: var(--ink);
}

.radar-wrap {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 28px;
  align-items: center;
}

.radar-chart {
  width: 220px;
  height: 220px;
}

.radar-axis {
  stroke: #dfe5f2;
  stroke-width: 1;
}

.radar-ring {
  fill: none;
  stroke: #dfe5f2;
  stroke-width: 1;
}

.radar-ring:nth-child(even) {
  stroke-dasharray: 4 4;
}

.radar-fill {
  fill: rgba(82, 52, 243, 0.24);
  stroke: #5234f3;
  stroke-width: 0;
}

.radar-line {
  fill: none;
  stroke: #5234f3;
  stroke-width: 3;
  stroke-linejoin: round;
}

.radar-point {
  fill: #fff;
  stroke: #5234f3;
  stroke-width: 2.5;
}

.radar-legend i {
  background: #5234f3;
}

.bar-chart {
  display: grid;
  gap: 14px;
  margin-top: 12px;
}

.bar-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 24px;
  gap: 10px;
  align-items: center;
}

.bar-row span {
  color: var(--muted);
  font-weight: 800;
}

.bar-row div {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f8;
}

.bar-row b {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #5234f3, #0aa869);
}

.bar-row strong {
  text-align: right;
}

.donut-wrap {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  gap: 18px;
  align-items: center;
  margin-top: 10px;
}

.donut-chart {
  position: relative;
  display: grid;
  place-items: center;
  width: 148px;
  height: 148px;
  border-radius: 50%;
  background: conic-gradient(var(--donut));
}

.donut-chart::after {
  position: absolute;
  inset: 38px;
  border-radius: 50%;
  background: #fff;
  content: "";
}

.donut-chart span {
  position: relative;
  z-index: 1;
  font-size: 26px;
  font-weight: 900;
}

.interest-bars {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end;
  min-height: 178px;
  margin-top: 12px;
}

.interest-bar {
  display: grid;
  grid-template-rows: 24px 120px auto;
  gap: 8px;
  justify-items: center;
  min-width: 0;
}

.interest-bar strong {
  color: var(--ink);
  font-size: 18px;
  font-weight: 900;
}

.interest-bar span {
  display: flex;
  align-items: end;
  width: 38px;
  height: 120px;
  overflow: hidden;
  border-radius: 999px;
  background: #edf1f8;
}

.interest-bar b {
  display: block;
  width: 100%;
  min-height: 8px;
  border-radius: inherit;
}

.interest-bar em {
  max-width: 100%;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  font-style: normal;
  font-weight: 800;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-gauge-wrap {
  display: grid;
  justify-items: center;
  gap: 10px;
  margin-top: 10px;
}

.owner-gauge {
  width: 184px;
  height: 116px;
}

.owner-gauge-track,
.owner-gauge-fill {
  fill: none;
  stroke-width: 12;
  stroke-linecap: round;
}

.owner-gauge-track {
  stroke: #f0d8de;
}

.owner-gauge-fill {
  stroke: #5234f3;
}

.owner-gauge-value {
  fill: var(--ink);
  font-size: 24px;
  font-weight: 900;
}

.owner-gauge-label {
  fill: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.owner-gauge-legend {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
  width: 100%;
}

.owner-gauge-legend div {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  gap: 7px;
  align-items: center;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.owner-gauge-legend i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.owner-gauge-legend span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.owner-gauge-legend strong {
  color: var(--ink);
}

.compact-btn {
  min-height: 32px;
  padding: 0 12px;
  white-space: nowrap;
}

.record-hero p {
  margin-top: 6px;
  color: var(--muted);
}

.record-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.record-card dl {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0 0;
}

.record-card dl > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 5px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

.record-card dt {
  color: var(--muted);
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.record-card dd {
  margin: 0;
  font-weight: 800;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.record-detail-workspace { min-width: 0; }
.record-detail-head { align-items: flex-end; margin-bottom: 18px; }
.record-detail-head h2 { margin-top: 8px; }
.record-detail-head p { margin-top: 5px; color: var(--muted); overflow-wrap: anywhere; }
.record-detail-layout { --record-sidebar-width: 280px; position: relative; display: grid; grid-template-columns: var(--record-sidebar-width) minmax(0, 1fr); gap: 22px; align-items: start; }
.record-detail-sidebar { display: grid; gap: 14px; max-height: 680px; overflow-y: auto; padding-right: 5px; scrollbar-width: thin; }
.record-summary-card { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8f4f4; }
.record-summary-card h3 { margin-bottom: 12px; font-size: 18px; }
.record-summary-card dl { display: grid; gap: 0; margin: 0; }
.record-summary-card dl > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 8px; padding: 8px 0; border-bottom: 1px solid rgba(32, 42, 82, .08); }
.record-summary-card dl > div:last-child { border-bottom: 0; }
.record-summary-card dt { color: var(--muted); font-size: 12px; line-height: 1.35; overflow-wrap: anywhere; }
.record-summary-card dd { margin: 0; color: var(--ink); font-size: 12px; font-weight: 800; line-height: 1.35; overflow-wrap: anywhere; }
.record-contact-panel { min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: #f8f4f4; }
.record-contact-panel > h3 { margin-bottom: 12px; font-size: 18px; }
.record-contact-panel .record-contact-card { margin-top: 10px; padding: 12px; background: var(--soft); }
.record-contact-panel .record-contact-card:first-of-type { margin-top: 0; }
.record-detail-main { display: grid; gap: 22px; min-width: 0; }
.record-detail-bottom { display: grid; gap: 18px; margin-top: 22px; }
.record-detail-main h3 { margin-bottom: 13px; text-align: center; font-size: 19px; }
.record-activity-section > h3,
.record-tasks-section > h3,
.record-comments-section .record-section-title { min-height: 34px; box-sizing: border-box; margin: 0 0 12px; padding: 6px 12px; border-radius: 3px; background: linear-gradient(135deg, #6849ff, #3421b9); color: #fff; }
.record-activity-section > h3,
.record-tasks-section > h3 { display: flex; align-items: center; justify-content: center; }
.record-section-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.record-section-title h3 { margin: 0; }
.record-section-title .compact-btn { min-height: 26px; padding: 3px 9px; border-color: rgba(255, 255, 255, .65); background: #fff; color: #090847; font-size: 11px; }
.record-activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.record-activity-grid article { display: grid; gap: 7px; padding: 14px 12px; border: 1px solid #eee8e8; border-radius: 14px; background: #f8f4f4; text-align: center; }
.record-activity-grid span { color: var(--muted); font-size: 12px; font-weight: 800; }
.record-activity-grid strong { color: var(--ink); font-size: 13px; overflow-wrap: anywhere; }
.record-comments-section, .record-tasks-section { min-width: 0; }
.record-comments-section { overflow-x: auto; }
.record-comment-list { display: grid; gap: 10px; max-height: 180px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; }
.record-comment-list { min-width: 620px; }
.record-comment-head, .record-comment-list article { display: grid; grid-template-columns: 110px 130px minmax(0, 1fr) auto; align-items: center; }
.record-comment-head { padding: 8px 13px; border: 1px solid #eee8e8; border-bottom: 0; background: #f2eeee; color: var(--muted); font-size: 11px; font-weight: 850; text-transform: uppercase; letter-spacing: .02em; }
.record-comment-list article { border: 1px solid #eee8e8; background: #f8f4f4; }
.record-comment-list time, .record-comment-author { min-width: 0; padding: 13px; border-right: 1px solid #eee8e8; font-size: 12px; font-weight: 800; }
.record-comment-author { overflow-wrap: anywhere; }
.record-comment-list p { min-width: 0; padding: 13px; line-height: 1.45; overflow-wrap: anywhere; }
.record-comment-edit { width: auto; margin-right: 10px; }
.record-comment-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding: 0 8px 0 4px; }
.record-comment-actions .record-comment-edit { width: auto; margin: 0; }
.record-comment-delete { width: auto; min-height: 30px; margin: 0; padding: 5px 9px; border-color: #f0c7cf; color: #a51f3d; background: #fff7f8; }
.record-tasks-section .table-wrap { max-height: 265px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; scrollbar-width: thin; }
.record-task-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 12px; }
.record-task-table th { position: sticky; top: 0; z-index: 1; background: #f8f4f4; }
.record-task-table th, .record-task-table td { min-width: 125px; padding: 10px 11px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.record-task-table th:nth-child(4), .record-task-table td:nth-child(4) { min-width: 200px; max-width: 260px; white-space: normal; overflow-wrap: anywhere; }
.record-orders-section, .record-edit-history-section { width: 100%; min-width: 0; padding: 18px; border: 1px solid #eee8e8; border-radius: 14px; background: #f8f4f4; }
.daily-task-progress { margin: -4px 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--soft); color: var(--muted); font-size: 13px; line-height: 1.4; }
.daily-task-marked { display: block; margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.3; }
.record-supply-totals { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-bottom: 13px; }
.record-supply-totals span { padding: 8px 12px; border: 1px solid #eee8e8; border-radius: 999px; background: #fff; color: var(--muted); font-size: 12px; font-weight: 700; }
.record-supply-totals strong { color: var(--ink); }
.record-compact-table-wrap { max-height: 230px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; background: #fff; scrollbar-width: thin; }
.record-compact-table { width: max-content; min-width: 100%; border-collapse: collapse; font-size: 11px; }
.record-compact-table th { position: sticky; top: 0; z-index: 1; background: #f2eeee; }
.record-compact-table th, .record-compact-table td { min-width: 105px; padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; white-space: normal; overflow-wrap: anywhere; }

@media (max-width: 900px) {
  .record-detail-layout { --record-sidebar-width: 230px; gap: 14px; }
}

@media (min-width: 701px) {
  .record-detail-sidebar { position: absolute; inset: 0 auto 0 0; width: var(--record-sidebar-width); max-height: none; }
  .record-detail-main { grid-column: 2; }
}

@media (max-width: 700px) {
  .record-detail-head { align-items: stretch; }
  .record-detail-layout { grid-template-columns: 1fr; }
  .record-detail-sidebar { position: static; inset: auto; width: auto; grid-template-columns: repeat(3, minmax(220px, 1fr)); max-height: none; overflow-x: auto; overflow-y: hidden; padding: 0 0 6px; }
  .record-summary-card { min-width: 220px; }
  .record-contact-panel { min-width: 220px; }
  .record-activity-grid { gap: 8px; }
  .record-activity-grid article { padding: 11px 7px; }
  .record-activity-grid span { font-size: 10px; }
  .record-activity-grid strong { font-size: 11px; }
  .record-comments-section .record-section-title {
    min-height: 30px;
    margin-bottom: 6px;
    padding: 3px 8px;
    border-radius: 6px;
  }
  .record-comments-section .record-section-title h3 {
    font-size: 14px;
    line-height: 1;
  }
  .record-comments-section .record-section-title .compact-btn {
    width: auto;
    min-width: 0;
    min-height: 25px;
    flex: 0 0 auto;
    padding: 3px 7px;
    font-size: 9px;
    white-space: nowrap;
  }
  .record-comment-list { gap: 6px; max-height: 160px; }
  .record-comment-head, .record-comment-list article { grid-template-columns: 74px 90px minmax(0, 1fr) auto; }
  .record-comment-head, .record-comment-list time, .record-comment-author, .record-comment-list p { padding: 8px; font-size: 11px; }
  .record-comment-edit { min-height: 28px; margin-right: 0; padding: 4px 8px; font-size: 10px; }
  .record-comment-actions { gap: 4px; padding: 0 5px 0 2px; }
  .record-comment-delete { min-height: 28px; padding: 4px 6px; font-size: 10px; }
  .record-orders-section, .record-edit-history-section { padding: 13px; }
  .record-section-title { justify-content: space-between; }
  .record-section-title h3 { text-align: left; }
  .record-orders-section .record-section-title { flex-wrap: nowrap; gap: 8px; }
  .record-orders-section .record-section-title h3 { flex: 1 1 auto; white-space: nowrap; font-size: 15px; }
  .record-orders-section .record-section-title .compact-btn { width: auto; min-width: 0; min-height: 30px; flex: 0 1 auto; padding: 5px 8px; font-size: 9px; white-space: nowrap; }
  .record-orders-section .record-supply-totals { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .record-orders-section .record-supply-totals span { display: flex; align-items: center; justify-content: center; gap: 3px; min-width: 0; padding: 7px 5px; font-size: 9px; line-height: 1.2; text-align: center; white-space: nowrap; }
  .record-task-table, .record-compact-table { display: table; width: max-content; min-width: 720px; margin: 0; border-collapse: collapse; }
  .record-task-table thead, .record-compact-table thead { display: table-header-group; }
  .record-task-table tbody, .record-compact-table tbody { display: table-row-group; }
  .record-task-table tr, .record-compact-table tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; }
  .record-task-table th, .record-task-table td, .record-compact-table th, .record-compact-table td { display: table-cell; width: auto; padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
  .record-task-table td::before, .record-compact-table td::before { content: none; }
}

@media (max-width: 420px) {
  .record-detail-workspace { padding: 12px; }
  .record-detail-head { gap: 12px; }
  .record-detail-head .record-hero-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-detail-main { gap: 18px; }
}

.contact-profile {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}

.profile-avatar {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  color: var(--accent-dark);
  background: #ecefff;
  font-weight: 900;
}

.contact-profile h2 {
  margin-bottom: 4px;
}

.contact-profile span {
  color: var(--muted);
}

.profile-actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.profile-actions a,
.profile-actions button {
  display: grid;
  place-items: center;
  min-height: 38px;
  border-radius: 6px;
  color: var(--accent-dark);
  background: #f1efff;
  text-decoration: none;
  font-weight: 800;
}

.detail-section {
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
}

.detail-section h3 {
  margin-bottom: 10px;
  font-size: 14px;
}

.detail-section dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.detail-section div {
  display: grid;
  grid-template-columns: 145px minmax(0, 1fr);
  gap: 10px;
}

.detail-section dt,
.detail-section dd {
  margin: 0;
}

.detail-section dt {
  color: var(--muted);
  font-size: 12px;
}

.detail-section dd {
  overflow-wrap: anywhere;
  font-weight: 700;
}

.split-panels {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 18px;
}

.list-stack {
  display: grid;
  gap: 11px;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}

.summary-row:last-child { border-bottom: 0; }
.summary-row dt, .summary-row dd { margin: 0; }
.summary-row dd { font-weight: 900; }

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

table {
  width: 100%;
  min-width: 720px;
  margin-top: 12px;
  border-collapse: collapse;
}

th, td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

th {
  background: #f5f6fb;
  font-size: 12px;
}

.badge {
  display: inline-flex;
  border-radius: 999px;
  padding: 4px 9px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}

.badge.ok { color: #057547; background: #dff8ed; }
.badge.warn { color: #966100; background: #fff0c8; }
.badge.info { color: #0b56aa; background: #e5f0ff; }
.badge.awaiting { color: #5133b8; background: #eee9ff; }
.badge.danger-soft { color: #b51442; background: #ffe7ee; }
.task-list-panel .badge.warn,
.task-date-details-panel .badge.warn { color: #8a3d18; background: #ffe1d5; }
.task-list-panel .badge.awaiting,
.task-date-details-panel .badge.awaiting { color: #1559a6; background: #dceaff; }

.quick-actions {
  display: grid;
  gap: 10px;
}

.quick-actions button {
  width: 100%;
  color: var(--accent-dark);
  background: #f1efff;
}

.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.report-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.small-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
  background: var(--soft);
}

.small-card h3 {
  margin-bottom: 8px;
  font-size: 15px;
}

.small-card p {
  color: var(--muted);
  line-height: 1.45;
}

.record-actions {
  justify-content: flex-end;
}

.record-actions button {
  min-height: 32px;
  padding: 0 10px;
  font-size: 12px;
}

.report-box {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.report-box div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--soft);
}

@media (max-width: 1440px) and (min-width: 861px) {
  .grid.four { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .split-panels { grid-template-columns: 1fr; }
  .wide { grid-column: span 3; }
}

@media (max-width: 1220px) {
  .metrics, .grid.four, .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dashboard-grid, .bottom-grid, .split-panels { grid-template-columns: 1fr; }
  .chart-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wide { grid-column: span 2; }
  .crm-detail-panel { position: static; }

  .radar-wrap {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .radar-chart {
    width: 180px;
    height: 180px;
  }

  .donut-wrap {
    grid-template-columns: 140px minmax(0, 1fr);
  }

  .donut-chart {
    width: 140px;
    height: 140px;
  }

  .panel {
    overflow: hidden;
  }

}

@media (max-width: 860px) {
  .dashboard-table-fallback {
    display: block;
  }

  .contact-card-list {
    display: none;
  }

  .dashboard-table-fallback .crm-table td {
    padding: 7px 9px;
    font-size: 11px;
  }

  .dashboard-table-fallback .has-select-column th:first-child,
  .dashboard-table-fallback .has-select-column td:first-child {
    padding-inline: 8px;
    overflow: visible;
    text-overflow: clip;
  }

  .dashboard-table-fallback .has-select-column th:first-child {
    font-size: 0;
  }

  body {
    background: #fff;
  }

  .sidebar {
    position: fixed;
    top: 0;
    right: auto;
    bottom: 0;
    left: 0;
    z-index: 30;
    width: 0;
    min-height: 100vh;
    padding: 0;
    overflow: visible;
    background: transparent;
    box-shadow: none;
  }

  .brand {
    display: none;
  }

  .brand-logo { width: 136px; height: 136px; max-height: none; }

  .menu-toggle {
    position: fixed;
    top: 12px;
    right: auto;
    left: 12px;
    z-index: 50;
    display: block;
    margin: 0;
    background: #17166d;
  }

  .sidebar.menu-open {
    z-index: 45;
    width: min(300px, 84vw);
    padding: 24px 16px 24px;
    overflow-y: auto;
    background: linear-gradient(180deg, #090847 0%, #17166d 55%, #0b0a4c 100%);
    box-shadow: 18px 0 42px rgba(8, 13, 57, 0.28);
  }

  .sidebar.menu-open .brand { display: flex; justify-content: flex-start; width: 100%; min-height: 50px; margin: -12px 0 18px; padding: 0 10px 0 54px; }

  .sidebar.menu-open .brand-logo { width: 56px; height: 56px; max-height: none; object-position: center; }

  .nav-list {
    display: none;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 14px;
  }

  .sidebar.menu-open .nav-list {
    display: grid;
    grid-template-columns: 1fr;
  }

  .nav-link {
    width: 100%;
    min-height: 38px;
    padding: 0 12px;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  .app-shell { margin-left: 0; padding: 16px 12px 24px; }
  .topbar, .panel-head, .endpoint-row, .toolbar { align-items: stretch; flex-direction: column; }
  .metrics, .grid.two, .grid.three, .grid.four, .cards-grid, .flow { grid-template-columns: 1fr; }
  .page-content,
  .chart-grid,
  .split-panels,
  .record-card-grid {
    gap: 12px;
  }

  .chart-grid { grid-template-columns: 1fr; }
  .chart-card {
    min-height: 0;
    padding: 14px;
  }
  .stepper-header { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stepper-header.three-step-header { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wide { grid-column: auto; }
  .crm-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-toolbar {
    gap: 10px;
  }

  .crm-toolbar .dashboard-search-wrap,
  .crm-toolbar .custom-select {
    grid-column: 1 / -1;
  }

  .crm-toolbar .custom-select.dashboard-filter-select { grid-column: auto; min-width: 0; }
  .crm-toolbar .custom-select.dashboard-filter-select-wide { grid-column: 1 / -1; }

  .crm-toolbar input,
  .crm-toolbar .custom-select-btn,
  .crm-toolbar .dashboard-toolbar-action,
  .dashboard-filter-btn {
    width: 100%;
  }

  .dashboard-filter-btn {
    display: block;
    width: 100%;
    color: var(--accent-dark);
    background: #f1f5ff;
  }

  .dashboard-filter-btn span {
    margin-right: 6px;
    font-weight: 900;
  }

  .dashboard-filter-btn .filter-icon {
    margin-right: 6px;
  }

  .dashboard-list-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-width: 0;
    margin: 4px 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
  }

  .dashboard-sort {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 6px;
    color: var(--muted);
    font-size: 12px;
    line-height: 1;
    white-space: nowrap;
  }

  .dashboard-sort select {
    flex: 0 0 104px;
    width: 104px;
    box-sizing: border-box;
    min-height: 36px;
    margin: 0;
    padding: 6px 30px 6px 10px;
    font-size: 13px;
    line-height: 1.2;
  }
  .crm-table { min-width: 0; }
  .record-card-grid { grid-template-columns: 1fr; }

  .topbar {
    position: sticky;
    top: 0;
    z-index: 35;
    min-height: 62px;
    margin: -16px -12px 16px;
    padding: 12px 58px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 5px 15px rgba(20, 28, 64, .05);
  }

  .topbar > div:first-child {
    flex: none;
    width: 100%;
    padding: 0;
  }

  .account-controls {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 40;
    width: auto;
  }

  .notification-toggle { width: 40px; height: 40px; }
  .topbar.employee-dashboard-topbar { padding-right: 108px; }

  .profile-toggle {
    justify-content: center;
    width: 42px;
    min-height: 42px;
    padding: 3px;
  }

  .profile-toggle .account-avatar {
    width: 34px;
    height: 34px;
  }

  .profile-toggle .account-avatar svg {
    width: 20px;
    height: 20px;
  }

  .profile-trigger-name,
  .profile-chevron {
    display: none;
  }

  h1 {
    font-size: 24px;
    text-align: center;
  }

  .panel h2 {
    font-size: 18px;
    line-height: 1.25;
  }

  .user-chip {
    display: none;
  }

  .metrics {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding: 2px 2px 10px;
    margin: 0 -2px 16px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .metric-card {
    flex: 0 0 172px;
    min-height: 112px;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    scroll-snap-align: start;
  }

  .metric-icon {
    width: 42px;
    height: 42px;
    font-size: 19px;
  }

  .metric-card strong {
    font-size: 20px;
  }

  .panel {
    width: 100%;
    padding: 16px 14px;
    border-radius: 6px;
    box-shadow: none;
  }

  .panel-head {
    gap: 10px;
    margin-bottom: 14px;
  }

  .small-card {
    padding: 14px;
  }

  .small-card p {
    overflow-wrap: anywhere;
  }

  .form-panel-head {
    margin-bottom: 12px;
  }

  .stepper-header {
    gap: 7px;
    max-width: 280px;
    margin-bottom: 14px;
  }

  .step-pill {
    min-height: 40px;
    padding: 0 8px;
    font-size: 12px;
  }

  .step-pill span {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
  }

  .step-panel {
    min-height: 0;
  }

  .stepper-actions {
    position: sticky;
    bottom: 0;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 12px 0 0;
    background: #fff;
  }

  .stepper-actions button {
    min-width: 0;
    padding: 0 10px;
  }

  .radar-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 14px;
  }

  .radar-chart {
    width: min(220px, 100%);
    height: auto;
  }

  .donut-wrap {
    grid-template-columns: 112px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .donut-chart {
    width: 112px;
    height: 112px;
  }

  .donut-chart::after {
    inset: 30px;
  }

  .donut-chart span {
    font-size: 21px;
  }

  .interest-bars {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    min-height: auto;
  }

  .interest-bar {
    grid-template-rows: 20px 74px auto;
    gap: 6px;
  }

  .interest-bar span {
    width: 28px;
    height: 74px;
  }

  .interest-bar strong {
    font-size: 15px;
  }

  .interest-bar em {
    font-size: 11px;
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .owner-gauge {
    width: 150px;
    height: auto;
  }

  .owner-gauge-wrap {
    gap: 8px;
  }

  .owner-gauge-legend {
    gap: 7px 10px;
  }

  .owner-gauge-legend div,
  .chart-legend div {
    font-size: 12px;
  }

  .record-hero p {
    overflow-wrap: anywhere;
  }

  .record-hero .panel-head {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
  }

  .record-hero .secondary {
    width: auto;
    min-width: 86px;
  }

  .record-card dl {
    gap: 8px;
    margin-top: 12px;
  }

  .record-card dl > div {
    padding: 8px;
  }

  .record-card dt {
    font-size: 11px;
  }

  .record-card dd {
    font-size: 12px;
  }

  .contact-profile {
    align-items: flex-start;
  }

  .profile-actions {
    grid-template-columns: 1fr;
  }

  .summary-row,
  .report-box div {
    align-items: flex-start;
  }

  .report-box div {
    flex-direction: column;
    gap: 6px;
  }

  .actions {
    width: 100%;
    align-items: stretch;
    flex-direction: column;
  }

  .panel-head .actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .panel-head .form-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-actions-bottom {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .crm-list-panel > .panel-head {
    flex-direction: row;
    align-items: center;
  }

  .crm-list-panel > .panel-head h2 {
    font-size: 20px;
  }

  .crm-list-panel > .panel-head > .primary {
    width: auto;
    min-width: 110px;
  }

  .actions button,
  .endpoint-row button,
  .primary,
  .secondary {
    width: 100%;
  }

  .record-hero .secondary {
    width: auto;
  }

  .crm-list-panel > .panel-head > .primary {
    width: auto;
  }

  .contact-card {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 9px;
    min-height: 76px;
    padding: 10px;
  }
  .contact-card.has-selection { grid-template-columns: auto 40px minmax(0, 1fr) auto; }

  .contact-card h3,
  .contact-card-person {
    overflow: visible;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .contact-card-topline {
    flex-wrap: wrap;
  }

  .contact-card time {
    grid-column: 2;
    grid-row: 2;
    justify-self: start;
    margin-top: -4px;
  }
  .contact-card.has-selection time { grid-column: 3; }

  .contact-card-menu {
    grid-column: 4;
    grid-row: 1 / span 2;
  }

  .contact-card-icon {
    width: 40px;
    height: 40px;
  }

  fieldset + fieldset {
    padding-top: 14px;
    margin-top: 14px;
  }

  .grid {
    gap: 12px;
  }

  input, select, textarea {
    min-height: 44px;
    font-size: 16px;
  }

  .custom-select-btn {
    min-height: 44px;
    font-size: 16px;
  }

  .flow li {
    min-height: 44px;
  }

  .multi-contact-head,
  .multi-contact-row {
    grid-template-columns: 1fr;
  }

  .multi-contact-head {
    display: grid;
    align-items: stretch;
  }

  .multi-contact-row {
    gap: 10px;
    padding: 10px;
  }

  .table-wrap {
    overflow-x: visible;
    width: 100%;
  }

  table,
  .crm-table {
    min-width: 0;
  }

  thead {
    display: none;
  }

  table,
  tbody,
  tr,
  td {
    display: block;
    width: 100%;
  }

  tr {
    padding: 10px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
  }

  tr + tr {
    margin-top: 10px;
  }

  td {
    display: grid;
    grid-template-columns: 118px minmax(0, 1fr);
    gap: 10px;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #edf1f8;
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  td .record-actions,
  td .record-actions button,
  td .compact-btn {
    width: 100%;
  }

  td:last-child {
    border-bottom: 0;
  }

  td::before {
    color: var(--muted);
    content: attr(data-label);
    font-size: 12px;
    font-weight: 800;
  }

  .detail-section div {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .reports-page .table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .reports-page .table-wrap table {
    display: table;
    width: max-content;
    min-width: 100%;
    margin-top: 0;
    border-collapse: collapse;
  }

  .reports-page .table-wrap thead {
    display: table-header-group;
  }

  .reports-page .table-wrap tbody {
    display: table-row-group;
  }

  .reports-page .table-wrap tr {
    display: table-row;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
  }

  .reports-page .table-wrap th,
  .reports-page .table-wrap td {
    display: table-cell;
    width: auto;
    min-width: 120px;
    padding: 10px 12px;
    text-align: left;
    vertical-align: middle;
    white-space: nowrap;
    overflow-wrap: normal;
    word-break: normal;
  }

  .reports-page .table-wrap td {
    font-size: 12px;
  }

  .reports-page .table-wrap td::before {
    content: none;
  }

  .reports-page .table-wrap td .badge {
    justify-self: auto;
    max-width: none;
    overflow: visible;
    text-overflow: clip;
  }
}

@media (max-width: 600px) {
  .dashboard-table-fallback .has-select-column td:first-child {
    background: var(--white);
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    top: 12px;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(380px, 82vw);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    padding: 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 14px 14px 0;
  }
}

@media (max-width: 600px) {
  .crm-toolbar.employee-dashboard-toolbar .dashboard-filter-select-wide {
    grid-column: 1 / -1 !important;
  }

  .crm-toolbar.employee-dashboard-toolbar > [data-select-all-visible] {
    grid-column: 1;
    grid-row: 3;
  }

  .crm-toolbar.employee-dashboard-toolbar #dashboardExportBtn {
    grid-column: 2;
    grid-row: 3;
  }
}

html[data-theme="dark"] .record-section-title .compact-btn {
  border-color: #c8d2e8;
  background: #fff;
  color: #1d2850;
}

@media (max-width: 700px) {
  .record-orders-section .record-section-title .compact-btn {
    flex: 0 0 auto;
  }
}

html[data-theme="dark"] .record-contact-panel {
  border-color: var(--line);
  background: var(--soft);
  color: var(--ink);
}

html[data-theme="dark"] .record-contact-panel .record-contact-card {
  border-color: var(--line);
  background: var(--white);
}

@media (max-width: 420px) {
  .fulfillment-fields {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.45fr);
  }
}

.fulfillment-form .fulfillment-fields {
  grid-template-columns: 1fr;
}

.fulfillment-form .fulfillment-fields label {
  display: grid;
  gap: 6px;
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    top: 12px;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(380px, 82vw);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    padding: 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 14px 14px 0;
  }
}

/* Keep the unread counter out of the hamburger's three-line icon styling. */
.menu-toggle > .menu-notification-badge {
  position: absolute;
  top: -5px;
  right: -5px;
  display: grid;
  place-items: center;
  width: auto;
  min-width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin: 0;
  padding: 0 4px;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #e93662;
  color: #fff;
  font-size: 10px;
  line-height: 1;
  z-index: 1;
}

.menu-toggle > .menu-notification-badge[hidden] {
  display: none !important;
}

.bulk-import-heading {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
}

.admin-import-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  width: auto;
  min-height: 32px;
  margin-top: 2px;
  padding: 0;
  font-size: 14px;
  white-space: nowrap;
}

.admin-import-back span { font-size: 13px; }

@media (max-width: 600px) {
  .crm-toolbar .dashboard-filter-select-wide {
    grid-column: 1 / -1 !important;
  }

.crm-toolbar #dashboardExportBtn {
    grid-column: 2;
  }
}

@media (max-width: 620px) {
  .topbar.employee-dashboard-topbar {
    min-height: 72px;
    padding: 6px 96px 6px 58px;
  }

  .topbar.employee-dashboard-topbar > div:first-child {
    width: auto;
    max-width: none;
    min-width: 0;
    flex: 1 1 auto;
  }

  .topbar.employee-dashboard-topbar h1 {
    width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 13px;
    line-height: 1.15;
  }

  .topbar.employee-dashboard-topbar #pageSubtitle {
    font-size: 10px;
    line-height: 1.2;
    white-space: normal;
  }
}

@media (max-width: 860px) {
  .task-scroll-hint { display: block; margin: 0 0 8px; }
  .task-list-panel .table-wrap { width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border: 1px solid var(--line); border-radius: 10px; }
  .task-list-panel .table-wrap:focus-visible { outline: 3px solid rgba(82, 52, 243, .3); outline-offset: 2px; }
  .task-list-panel table { display: table; width: max-content; min-width: 1200px; margin: 0; border-collapse: collapse; }
  .task-list-panel thead { display: table-header-group; }
  .task-list-panel tbody { display: table-row-group; width: auto; }
  .task-list-panel tr { display: table-row; width: auto; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; }
  .task-list-panel th, .task-list-panel td { display: table-cell; width: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; white-space: nowrap; overflow-wrap: normal; word-break: normal; }
  .task-list-panel td::before { content: none; }
  .task-list-panel th:first-child, .task-list-panel td:first-child { position: static; min-width: 92px; background: #fff; }
  .task-list-panel th:first-child { background: #f5f6fb; }
  .task-list-panel td:nth-last-child(2) { max-width: 220px; white-space: normal; overflow-wrap: anywhere; }
  .task-list-panel td .record-actions, .task-list-panel td .record-actions button { width: auto; }
  .task-list-panel .record-actions { flex-wrap: nowrap; }
}

@media (min-width: 540px) and (max-width: 860px) {
  .grid.two,
  .grid.three,
  .grid.four {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wide,
  .full {
    grid-column: 1 / -1;
  }

  .multi-contact-row {
    grid-template-columns: repeat(5, minmax(0, 1fr)) 42px;
  }

  .multi-contact-row button {
    width: 42px;
    min-width: 42px;
    padding-inline: 0;
  }
}

@media (max-width: 420px) {
  .app-shell {
    padding: 14px 10px 22px;
  }

  .metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
    padding: 0;
    margin: 0 0 16px;
  }

  .metric-card {
    min-width: 0;
    min-height: 104px;
  }

  .topbar {
    margin: -14px -10px 16px;
  }

  .sidebar {
    max-height: none;
    width: 0;
    padding: 0;
  }

  .brand-logo { width: 132px; height: 132px; max-height: none; }

  .menu-toggle {
    position: fixed;
    top: 12px;
    right: auto;
    left: 12px;
    width: 40px;
    min-height: 36px;
    margin: 0;
  }

  .sidebar.menu-open {
    width: min(300px, 84vw);
    padding: 24px 10px 22px;
  }

  h1 {
    font-size: 22px;
  }

  .nav-link {
    flex: none;
    justify-content: center;
    text-align: center;
  }

  .brand small {
    display: none;
  }

  .metric-card {
    flex-basis: 154px;
  }

  .donut-wrap {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .chart-legend {
    width: 100%;
  }

  .owner-gauge-legend {
    grid-template-columns: 1fr;
  }

  .stepper-header {
    max-width: none;
  }

  .stepper-header.three-step-header { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .contact-card {
    grid-template-columns: auto 36px minmax(0, 1fr) auto;
  }

  .contact-card-icon {
    width: 36px;
    height: 36px;
  }

  .step-pill {
    padding: 0 6px;
    font-size: 11px;
  }

  td {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .record-hero .panel-head {
    grid-template-columns: 1fr;
  }

  .record-hero .secondary {
    width: 100%;
  }

}

@media (max-width: 860px) {
  .topbar {
    min-height: 56px;
    margin-bottom: 12px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .topbar h1 { font-size: 20px; }
  .menu-toggle { top: 10px; min-height: 36px; }
  .account-controls { top: 10px; }
  .profile-toggle { width: 38px; min-height: 38px; }
  .profile-toggle .account-avatar { width: 30px; height: 30px; }

  .crm-list-panel { padding: 12px; }
  .crm-list-panel > .panel-head { gap: 8px; margin-bottom: 10px; }
  .crm-list-panel > .panel-head h2 { font-size: 18px; }
  .dashboard-list-title { gap: 8px; }
  .dashboard-title-icon { width: 36px; height: 36px; flex-basis: 36px; border-radius: 9px; }
  .dashboard-title-icon svg { width: 22px; height: 22px; }
  .dashboard-head-actions { gap: 6px; }
  .dashboard-head-actions button {
    min-height: 40px;
    padding: 0 10px;
    font-size: 12px;
  }

  .crm-list-panel .crm-toolbar { gap: 8px; margin-bottom: 10px; }
  .crm-list-panel .dashboard-search-wrap input,
  .crm-list-panel .crm-toolbar .custom-select-btn {
    min-height: 42px;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 13px;
  }

  .crm-list-panel .dashboard-search-wrap input { padding-left: 32px; }
  .crm-list-panel .dashboard-search-wrap span { left: 10px; font-size: 20px; }
  .crm-list-panel .dashboard-list-meta { margin: 2px 0 8px; }

  form[data-record-type] .grid.two,
  form[data-record-type] .grid.three,
  form[data-record-type] .grid.four,
  #taskEditForm .grid.two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 420px) {
  form .grid input[type="date"] {
    padding-left: 6px;
    padding-right: 4px;
    font-size: 14px;
  }
}

@media (max-width: 620px) {
  form[data-record-type] .grid > label input,
  form[data-record-type] .grid > label select,
  form[data-record-type] .grid > label textarea,
  form[data-record-type] .grid > label .custom-select-btn,
  #taskEditForm .grid > label textarea,
  #taskEditForm .grid > label .custom-select-btn {
    padding-left: 8px;
    padding-right: 8px;
    font-size: 13px;
  }
}

.theme-toggle {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  min-height: 38px;
  padding: 0;
  border: 1px solid #dce4f4;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  box-shadow: 0 6px 18px rgba(20, 28, 64, .06);
}
.theme-toggle:hover { border-color: var(--accent); background: #faf9ff; }
.theme-toggle:focus-visible { outline: 3px solid rgba(82, 52, 243, .25); outline-offset: 2px; }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle-mobile { display: none; }
.theme-moon { display: none; }
html[data-theme="dark"] .theme-moon { display: block; }
html[data-theme="dark"] .theme-sun { display: none; }

@media (max-width: 860px) {
  .theme-toggle-header { display: none; }
  .theme-toggle-mobile { display: grid; width: 34px; height: 34px; min-height: 34px; }
  .notification-toggle { width: 38px; height: 38px; min-height: 38px; padding: 0; }
  .notification-toggle svg { width: 19px; height: 19px; transform: translateY(-1px); }
  .account-controls { gap: 6px; }
  .profile-summary > div { flex: 1; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --ink: #edf1ff;
  --muted: #aeb9d2;
  --line: #35415e;
  --soft: #202b46;
  --white: #18243c;
  --accent: #8b75ff;
  --accent-dark: #b6a7ff;
  --success: #47d6a1;
  --warning: #ffd077;
  --danger: #ff7899;
  --info: #77b5ff;
  --shadow: 0 18px 48px rgba(0, 0, 0, .2);
}
html[data-theme="dark"] body { background: #0d1427; }
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .sidebar.menu-open { background: linear-gradient(180deg, #090b2e 0%, #101346 55%, #0a1035 100%); }
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .login-card,
html[data-theme="dark"] .password-dialog,
html[data-theme="dark"] .confirm-dialog,
html[data-theme="dark"] .movement-edit-dialog,
html[data-theme="dark"] .profile-panel,
html[data-theme="dark"] .notification-panel,
html[data-theme="dark"] .notification-row,
html[data-theme="dark"] .profile-toggle,
html[data-theme="dark"] .notification-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .secondary,
html[data-theme="dark"] .admin-contact-table,
html[data-theme="dark"] .crm-table,
html[data-theme="dark"] .contact-card,
html[data-theme="dark"] .role-overview,
html[data-theme="dark"] .custom-select-menu,
html[data-theme="dark"] .add-phone-btn,
html[data-theme="dark"] .employee-summary-icon,
html[data-theme="dark"] .donut-chart::after {
  background: var(--white);
  color: var(--ink);
}
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .topbar.admin-dashboard-topbar {
  background: transparent;
  box-shadow: none;
}
html[data-theme="dark"] .profile-toggle:hover,
html[data-theme="dark"] .profile-toggle[aria-expanded="true"],
html[data-theme="dark"] .notification-toggle:hover,
html[data-theme="dark"] .notification-toggle[aria-expanded="true"],
html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .notification-row:hover,
html[data-theme="dark"] .notification-row:focus-visible,
html[data-theme="dark"] .account-menu-actions button:hover,
html[data-theme="dark"] .account-menu-actions button:focus-visible,
html[data-theme="dark"] .login-choices button:hover,
html[data-theme="dark"] .custom-select-menu button:hover,
html[data-theme="dark"] .custom-select-menu button:focus { background: #2a3657; }
html[data-theme="dark"] .custom-select-search { border-color: #465372; background: #152039; color: var(--ink); }
html[data-theme="dark"] .notification-row.unread { background: #293557; }
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .custom-select-btn { border-color: #465372; background: #152039; color: var(--ink); }
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .custom-select:not(.has-value) .custom-select-btn { color: #a2aec9; }
html[data-theme="dark"] input:disabled,
html[data-theme="dark"] input[readonly],
html[data-theme="dark"] .task-creator-field input[readonly] { background: #26314b; color: var(--ink); }
html[data-theme="dark"] .inline-task-row td {
  background: #1b2944;
  color: var(--ink);
}
html[data-theme="dark"] .inline-task-row input,
html[data-theme="dark"] .inline-task-row select {
  border-color: #4b5c80;
  background: #253456;
  color: #edf1ff;
}
html[data-theme="dark"] .inline-task-row input::placeholder {
  color: #aeb9d2;
}
html[data-theme="dark"] .inline-task-row input:disabled,
html[data-theme="dark"] .inline-task-row select:disabled {
  background: #303d5c;
  color: #d6def1;
  opacity: .9;
}
html[data-theme="dark"] .inline-task-row .task-entry-remove {
  border-color: #536487;
  background: #202b46;
  color: #edf1ff;
}
html[data-theme="dark"] .inline-task-row .task-entry-remove:hover,
html[data-theme="dark"] .inline-task-row .task-entry-remove:focus-visible {
  border-color: #8b75ff;
  background: #302853;
  color: #fff;
}
html[data-theme="dark"] .bulk-import-panel { border-color: #554a8b; background: linear-gradient(135deg, #1a2440 0%, #221d42 100%); }
html[data-theme="dark"] .sheet-config,
html[data-theme="dark"] .contact-card time,
html[data-theme="dark"] .contact-id,
html[data-theme="dark"] .contact-type,
html[data-theme="dark"] .profile-role,
html[data-theme="dark"] .admin-tool-badge,
html[data-theme="dark"] .quick-actions button,
html[data-theme="dark"] .profile-actions a,
html[data-theme="dark"] .profile-actions button { background: #2b3157; color: #c8beff; }
html[data-theme="dark"] .blue,
html[data-theme="dark"] .contact-card-icon { background: #203a65; color: #a6caff; }
html[data-theme="dark"] .green { background: #1b473e; }
html[data-theme="dark"] .amber { background: #514021; }
html[data-theme="dark"] .violet { background: #382d66; }
html[data-theme="dark"] .rose { background: #572c42; }
html[data-theme="dark"] .role-overview { --role-soft: #2b3157; }
html[data-theme="dark"] .role-overview-manager { --role-soft: #1d4746; --role-accent: #62dfd2; }
html[data-theme="dark"] .role-overview-employee { --role-soft: #213b62; --role-accent: #87bbff; }
html[data-theme="dark"] .role-overview:not(.role-overview-manager):not(.role-overview-employee) { --role-accent: #b6a7ff; }
html[data-theme="dark"] legend,
html[data-theme="dark"] .form-section-title { color: #a9b5ff; }
html[data-theme="dark"] .admin-contact-table th,
html[data-theme="dark"] th,
html[data-theme="dark"] .dashboard-table-fallback .crm-table th { background: #24304d; color: #bdc8df; }
html[data-theme="dark"] .admin-contact-table tbody tr:hover,
html[data-theme="dark"] .dashboard-table-fallback .crm-table tbody tr:hover { background: #263352; }
html[data-theme="dark"] .dashboard-table-fallback .has-select-column td:first-child,
html[data-theme="dark"] .dashboard-table-fallback .has-select-column td:nth-child(2),
html[data-theme="dark"] .dashboard-table-fallback .dashboard-contact-table:not(.has-select-column) td:first-child,
html[data-theme="dark"] .task-list-panel td:first-child { background: #18243c; }
html[data-theme="dark"] .dashboard-table-fallback .has-select-column th:first-child,
html[data-theme="dark"] .dashboard-table-fallback .has-select-column th:nth-child(2),
html[data-theme="dark"] .dashboard-table-fallback .dashboard-contact-table:not(.has-select-column) th:first-child,
html[data-theme="dark"] .task-list-panel th:first-child { background: #24304d; }
html[data-theme="dark"] .badge.ok { color: #94f2c3; background: #1b4b3c; }
html[data-theme="dark"] .badge.warn { color: #ffe09a; background: #55401f; }
html[data-theme="dark"] .badge.info { color: #abd2ff; background: #203d66; }
html[data-theme="dark"] .badge.awaiting { color: #d1c3ff; background: #36285b; }
html[data-theme="dark"] .task-list-panel .badge.warn,
html[data-theme="dark"] .task-date-details-panel .badge.warn { color: #ffc2ad; background: #5a3028; }
html[data-theme="dark"] .task-list-panel .badge.awaiting,
html[data-theme="dark"] .task-date-details-panel .badge.awaiting { color: #b7d7ff; background: #203f6e; }
html[data-theme="dark"] .task-location-notification { border-color: #18243c; color: #fff; background: #ff4d78; }
html[data-theme="dark"] .task-view-tabs button { border-color: #3b4864; background: #222d47; color: #b9c2d7; }
html[data-theme="dark"] .task-view-tabs button:hover { border-color: #7865dc; background: #302853; color: #e0d9ff; }
html[data-theme="dark"] .task-view-tabs button[aria-selected="true"] { border-color: #806aff; background: linear-gradient(135deg, #7055f6, #4c32d6); color: #fff; }
html[data-theme="dark"] .task-view-tabs button span { background: #39445d; color: #e1e6f2; }
html[data-theme="dark"] .task-view-tabs button[aria-selected="true"] span { background: rgba(255, 255, 255, .92); color: #4327d8; }
html[data-theme="dark"] .badge.danger-soft { color: #ffb1c4; background: #552b3c; }
html[data-theme="dark"] .confirm-dialog-icon { border-color: #7d3c55; color: #ffb1c4; background: #552b3c; }
html[data-theme="dark"] .copy-phone-button { border-color: #495777; background: #202b46; color: #f3f4f6; }
html[data-theme="dark"] .copy-phone-button:hover, html[data-theme="dark"] .copy-phone-button:focus-visible { border-color: #d1d5db; background: #2b3854; color: #fff; }
html[data-theme="dark"] .copy-phone-button.is-copied { border-color: #2e8d69; background: #1b4b3c; color: #94f2c3; }
html[data-theme="dark"] .task-group-status-pending { border-color: #574b86; color: #e1dbff; background: #342b55; }
html[data-theme="dark"] .task-group-status-completed { border-color: #7664ff; color: #fff; background: #5b45eb; }
html[data-theme="dark"] .step-pill.active,
html[data-theme="dark"] .primary { color: #fff; }
html[data-theme="dark"] .step-pill.active span { background: #fff; }
html[data-theme="dark"] .radar-axis,
html[data-theme="dark"] .radar-ring { stroke: #52617e; }
html[data-theme="dark"] .radar-point { fill: #18243c; }
html[data-theme="dark"] .bar-row div,
html[data-theme="dark"] .interest-bar span { background: #2c3855; }
html[data-theme="dark"] .admin-contact-name,
html[data-theme="dark"] .admin-contact-email,
html[data-theme="dark"] .dashboard-table-fallback .crm-table td[data-label="Contact Person"],
html[data-theme="dark"] .dashboard-table-fallback .crm-table td[data-label="School E-mail"],
html[data-theme="dark"] .dashboard-table-fallback .crm-table td[data-label="Contact Number"] { color: #7fe1d6; }
html[data-theme="dark"] .add-contact-btn { color: #ffd58b; border-color: #a87b3c; background: #4a3729; }
html[data-theme="dark"] .notification-badge { border-color: #18243c; }
html[data-theme="dark"] .notification-toggle,
html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .profile-toggle { border-color: var(--line); }
html[data-theme="dark"] .stepper-actions,
html[data-theme="dark"] tr { background: var(--white); }
html[data-theme="dark"] td { border-bottom-color: var(--line); }
html[data-theme="dark"] .custom-select-menu button,
html[data-theme="dark"] .account-menu-actions button { color: var(--ink); }
html[data-theme="dark"] .notification-panel-head button { color: #c8beff; }
html[data-theme="dark"] .notification-open-action { border-color: var(--line); background: #24304d; color: #d2caff; }
html[data-theme="dark"] .record-summary-card,
html[data-theme="dark"] .record-activity-grid article,
html[data-theme="dark"] .record-comment-list article,
html[data-theme="dark"] .record-orders-section,
html[data-theme="dark"] .record-edit-history-section { border-color: var(--line); background: var(--soft); color: var(--ink); }
html[data-theme="dark"] .record-summary-card dl > div { border-bottom-color: var(--line); }
html[data-theme="dark"] .record-comment-list time, html[data-theme="dark"] .record-comment-author { border-right-color: var(--line); }
html[data-theme="dark"] .record-supply-totals span,
html[data-theme="dark"] .record-compact-table-wrap { border-color: var(--line); background: var(--white); color: var(--ink); }
html[data-theme="dark"] .record-compact-table th { background: #24304d; color: #bdc8df; }
html[data-theme="dark"] .record-task-table,
html[data-theme="dark"] .record-compact-table { color: var(--ink); }

@media (max-width: 860px) {
  .topbar.has-profile-toggle { padding-right: 98px; }
  .topbar.has-profile-toggle:not(.employee-dashboard-topbar) h1 { font-size: 18px; }
}

.inventory-dashboard { display: grid; gap: 18px; min-width: 0; }
.inventory-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.inventory-summary-card { display: grid; gap: 8px; padding: 18px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); box-shadow: var(--shadow); }
.inventory-summary-card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.inventory-summary-card strong { color: var(--accent-dark); font-size: 30px; line-height: 1; }
.dashboard-pagination { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 18px; }
.dashboard-pagination button { width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 9px; }
.dashboard-pagination button.active { border-color: var(--accent); background: var(--accent); color: #fff; box-shadow: 0 7px 16px rgba(82, 52, 243, .22); }
.dashboard-pagination button:disabled { opacity: .42; cursor: not-allowed; }
.dashboard-page-gap { min-width: 20px; color: var(--muted); text-align: center; font-weight: 800; }
.inventory-page-actions { display: flex; justify-content: flex-end; margin-top: -2px; }
.inventory-page-actions .primary { width: auto; min-width: 132px; }
.inventory-form-panel, .inventory-table-panel { min-width: 0; }
.inventory-form-panel .panel-head, .inventory-table-panel .panel-head { margin-bottom: 18px; }
.inventory-header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.inventory-header-actions button { width: auto; min-width: 132px; }
.inventory-add-books-button { width: auto; min-width: 132px; align-self: flex-start; }
.inventory-category-panel { display: grid; gap: 12px; }
.inventory-category-panel form { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.inventory-category-panel form label { flex: 1 1 260px; }
.inventory-category-panel .form-actions { margin: 0; }
.inventory-category-list { display: grid; gap: 6px; max-width: 420px; }
.inventory-category-list label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; font-weight: 800; }
.inventory-category-list select { width: 100%; min-height: 42px; }
.inventory-form-panel .grid.two { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; }
.inventory-form-panel .form-actions-bottom { justify-content: flex-end; }
.inventory-add-preview { margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); color: var(--muted); }
.inventory-add-preview strong { color: var(--ink); }
.inventory-table-wrap { max-width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; border: 1px solid var(--line); border-radius: 10px; }
.inventory-table-wrap:focus-visible { outline: 3px solid rgba(82, 52, 243, .3); outline-offset: 2px; }
.inventory-table { width: 100%; min-width: 700px; margin: 0; }
.inventory-table th, .inventory-table td { white-space: nowrap; vertical-align: middle; }
.inventory-stock-filters { display: grid; grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(145px, 1fr)) auto; align-items: end; gap: 10px; margin: 0 0 14px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.inventory-stock-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; font-weight: 800; }
.inventory-stock-filters input, .inventory-stock-filters select { min-height: 38px; padding: 7px 10px; background: var(--white); }
.inventory-stock-filter-clear { min-height: 38px; white-space: nowrap; }
.inventory-table .inventory-stock-qty { color: var(--accent-dark); font-weight: 900; }
.inventory-table td .compact-btn { width: auto; }
.inventory-row-actions { display: flex; align-items: center; gap: 9px; }
.inventory-row-actions button { white-space: nowrap; }
.dashboard-delete-selected { border-color: #f0b7c5; color: #b51442; }
.dashboard-delete-selected:hover:not(:disabled), .dashboard-delete-selected:focus-visible:not(:disabled) { border-color: #e93662; background: #fff0f3; color: #a30d39; }
.inventory-stock-action { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 38px; padding: 6px 12px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 12px; font-weight: 850; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.inventory-stock-action-icon { display: grid; place-items: center; width: 21px; height: 21px; flex: 0 0 21px; border-radius: 50%; font-size: 17px; font-weight: 900; line-height: 1; }
.inventory-stock-action-add { border-color: #ded8ff; background: #f3f0ff; color: var(--accent-dark); }
.inventory-stock-action-add .inventory-stock-action-icon { background: #e5dfff; color: var(--accent-dark); }
.inventory-stock-action-add:hover, .inventory-stock-action-add:focus-visible { border-color: var(--accent); background: #eae6ff; box-shadow: 0 4px 11px rgba(82, 52, 243, .12); transform: translateY(-1px); }
.inventory-stock-action-reduce { border-color: #f5d5df; background: #fff3f6; color: #b4234b; }
.inventory-stock-action-reduce .inventory-stock-action-icon { background: #ffe1e9; color: #b4234b; }
.inventory-stock-action-reduce:hover:not(:disabled), .inventory-stock-action-reduce:focus-visible:not(:disabled) { border-color: var(--danger); background: #ffe9ef; box-shadow: 0 4px 11px rgba(233, 54, 98, .1); transform: translateY(-1px); }
.inventory-stock-action:disabled { opacity: .48; cursor: not-allowed; }
.inventory-supply-action { color: var(--accent-dark); }
.inventory-supply-action:disabled { opacity: .45; cursor: not-allowed; }
.inventory-history-head { align-items: flex-end; gap: 16px; }
.inventory-history-controls { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.inventory-history-controls label { display: grid; gap: 4px; color: var(--muted); font-size: 11px; font-weight: 800; }
.inventory-history-controls input { min-height: 38px; padding: 7px 9px; }
@media (max-width: 760px) {
  .inventory-history-head { align-items: stretch; }
  .inventory-history-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); justify-content: stretch; }
  .inventory-history-controls label, .inventory-history-controls button { min-width: 0; width: 100%; }
}
.inventory-supply-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.inventory-supply-balance { display: grid; gap: 8px; min-height: 64px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.inventory-supply-balance span { color: var(--muted); font-size: 12px; font-weight: 700; }
.inventory-supply-balance strong { color: var(--ink); font-size: 18px; }
.inventory-scroll-hint { display: none; margin: 0 0 8px; color: var(--muted); font-size: 12px; }

@media (max-width: 1240px) {
  .inventory-form-panel .grid.two { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .inventory-dashboard { gap: 12px; }
  .inventory-stock-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-stock-filters label:first-child { grid-column: 1 / -1; }
  .inventory-stock-filter-clear { width: 100%; }
  .inventory-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 7px; }
  .inventory-summary-card { gap: 6px; padding: 11px 9px; }
  .inventory-summary-card span { font-size: 11px; line-height: 1.2; }
  .inventory-summary-card strong { font-size: 22px; }
  .inventory-page-actions .primary { width: 100%; min-height: 42px; }
  .inventory-form-panel .grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .inventory-form-panel .grid.two > label:first-child { grid-column: 1 / -1; }
  .inventory-scroll-hint { display: block; }
  .inventory-table { display: table; width: 700px; min-width: 700px; border-collapse: collapse; }
  .inventory-table thead { display: table-header-group; }
  .inventory-table tbody { display: table-row-group; }
  .inventory-table tr { display: table-row; width: auto; padding: 0; border: 0; border-radius: 0; }
  .inventory-table tr + tr { margin-top: 0; }
  .inventory-table th, .inventory-table td { display: table-cell; width: auto; padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; overflow-wrap: normal; word-break: normal; }
  .inventory-table td::before { content: none; }
  .inventory-table td .compact-btn { width: auto; }
.inventory-row-actions { flex-wrap: nowrap; }
}

.contact-approval-table-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.contact-approval-table { width: 100%; min-width: 1180px; margin: 0; }
.contact-approval-table th,
.contact-approval-table td { white-space: nowrap; }
.contact-approval-table td:nth-child(2) { white-space: normal; min-width: 180px; }
.contact-approval-table .record-actions { flex-wrap: nowrap; }
.contact-approval-table .record-actions button { width: auto; }

@media (max-width: 760px) {
  .contact-approval-table-wrap { overflow-x: auto; }
  .contact-approval-table,
  .contact-approval-table tbody { display: table; width: 100%; min-width: 1180px; }
  .contact-approval-table thead { display: table-header-group; }
  .contact-approval-table tr { display: table-row; width: auto; padding: 0; border: 0; border-radius: 0; }
  .contact-approval-table tr + tr { margin-top: 0; }
  .contact-approval-table th,
  .contact-approval-table td { display: table-cell; width: auto; padding: 11px 13px; border-bottom: 1px solid var(--line); white-space: nowrap; }
  .contact-approval-table td:nth-child(2) { white-space: normal; }
  .contact-approval-table td::before { content: none; }
}

@media (max-width: 620px) {
  .contact-approval-row > .record-actions { width: 100%; }
  .contact-approval-row > .record-actions button { flex: 1; }
  .dashboard-pagination { gap: 5px; }
  .dashboard-pagination button { width: 38px; min-width: 38px; height: 38px; }
  .inventory-supply-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
  .inventory-supply-fields > label { grid-column: 1 / -1; }
  .inventory-supply-balance { padding: 9px; }
}

.record-name-link { color: var(--accent-dark); font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }
.record-name-link:hover, .record-name-link:focus-visible { color: var(--accent); }
.detail-back-row { display: flex; align-items: center; margin-bottom: 4px; }
.back-arrow-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--accent-dark); font-size: 25px; font-weight: 800; line-height: 1; cursor: pointer; }
.back-arrow-btn:hover { background: transparent; color: var(--accent); }
.back-arrow-btn:focus-visible { border-radius: 3px; outline: 2px solid rgba(82, 52, 243, .3); outline-offset: 2px; }
.back-link-btn { padding: 2px 0; border: 0; background: transparent; color: var(--info); font-size: 13px; font-weight: 800; cursor: pointer; }
.back-link-btn:hover, .back-link-btn:focus-visible { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.inventory-book-details-page { min-width: 0; }
.record-hero-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.school-edit-panel, .comments-panel, .requirement-panel, .school-history-panel, .inventory-add-panel, .inventory-history-panel { min-width: 0; }
.school-edit-panel { padding: 12px; }
.school-edit-panel .panel-head { margin-bottom: 8px; }
.school-edit-panel .form-actions-bottom { margin-top: 8px; }
.inventory-book-details-panel { min-width: 0; }
.inventory-book-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin: 14px 0 18px; }
.inventory-book-summary > div { display: grid; gap: 5px; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); }
.inventory-book-summary span { color: var(--muted); font-size: 12px; font-weight: 700; }
.inventory-book-summary strong { color: var(--ink); overflow-wrap: anywhere; }
.school-edit-panel { overflow: hidden; }
.school-edit-panel .grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.school-edit-panel .grid.three > label { min-width: 0; }
.school-edit-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: 8px; }
.school-edit-group { min-width: 0; padding: 10px; border: 1px solid #dfe5f0; border-radius: 12px; background: var(--white); box-shadow: 0 1px 5px rgba(25, 45, 80, .04); }
.school-edit-group h3 { margin: 0 0 6px; font-size: 16px; }
.school-edit-fields { display: grid; gap: 0; }
.school-edit-fields > label, .school-edit-contact > label { min-width: 0; }
.school-edit-fields > label,
.school-edit-contact > label { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); align-items: center; gap: 6px; padding: 5px 0; border-bottom: 1px solid #e2e6ed; color: #53698c; font-size: 11px; line-height: 1.15; }
.school-edit-fields input, .school-edit-fields select, .school-edit-fields textarea,
.school-edit-contact input, .school-edit-contact select { width: 100%; min-width: 0; box-sizing: border-box; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 3px 0; background: transparent; color: var(--ink); font-weight: 700; }
.school-edit-fields input:focus, .school-edit-fields select:focus,
.school-edit-contact input:focus, .school-edit-contact select:focus { border-bottom-color: var(--accent); outline: none; box-shadow: none; }
.school-edit-contact-list { display: grid; gap: 5px; }
.school-edit-contact { display: grid; gap: 0; margin-top: 6px; padding: 8px; border: 1px solid #dfe5f0; border-radius: 10px; background: #f8faff; }
.school-edit-contact-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.school-edit-contact-heading { margin-bottom: 4px; color: var(--ink); }
.school-edit-contact-heading + label { border-top: 0; }
.school-edit-add-contact { margin-top: 6px; }
.school-edit-add-contact { justify-self: start; }
@media (min-width: 1550px) {
  .school-edit-group:first-child .school-edit-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.comments-panel > form { margin-top: 14px; }
.comments-panel textarea { width: 100%; min-height: 108px; resize: vertical; }
.fulfillment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0; }
.fulfillment-form { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); }
.fulfillment-fields { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 10px; }
.fulfillment-fields label { min-width: 0; }
.fulfillment-form .primary { justify-self: start; }
.history-list { display: grid; gap: 9px; margin-top: 12px; }
.history-item { min-width: 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--soft); overflow-wrap: anywhere; }
.history-item p { margin-top: 5px; color: var(--muted); }
.history-item ul { margin: 8px 0 0; padding-left: 18px; }
.inventory-history-panel .inventory-table { min-width: 900px; }
.school-history-expand { margin-top: 10px; }
.stock-movement-edit-button { white-space: nowrap; }
.detail-copy-value { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; }
.detail-copy-value > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.copy-phone-button { display: inline-grid; place-items: center; width: 26px; height: 26px; flex: 0 0 26px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: #fff; color: #111827; font-size: 14px; line-height: 1; cursor: pointer; }
.copy-phone-button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.copy-phone-button:hover, .copy-phone-button:focus-visible { border-color: #111827; background: #f3f4f6; color: #000; }
.copy-phone-button.is-copied { border-color: #82d8b6; background: #e8fbf2; color: #087f52; }
@media (max-width: 860px) {
  .school-edit-panel .grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fulfillment-grid { grid-template-columns: 1fr; }
  .inventory-book-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) {
  .school-edit-panel .grid.three { grid-template-columns: 1fr; }
  .fulfillment-fields { grid-template-columns: 1fr; }
  .inventory-book-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .record-hero-actions { width: 100%; }
  .record-hero-actions button { flex: 1; }
}

@media (max-width: 700px) and (orientation: portrait) {
  .school-edit-groups { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .topbar.employee-dashboard-topbar {
    min-height: 0;
    margin-bottom: 8px;
    padding: 8px 108px 8px 58px;
  }
  .topbar.employee-dashboard-topbar h1 { font-size: 17px; line-height: 1.18; }
  .topbar.employee-dashboard-topbar #pageSubtitle { margin-top: 2px; font-size: 12px; line-height: 1.25; }
  .role-overview-employee { padding: 10px; }
  .role-overview-employee .role-stat-grid { gap: 7px; }
  .role-overview-employee .employee-summary-card {
    grid-template-columns: 30px minmax(0, 1fr);
    align-items: center;
    gap: 7px;
    padding: 9px;
  }
  .role-overview-employee .employee-summary-card > div { gap: 2px; }
  .role-overview-employee .employee-summary-card small { font-size: 11px; line-height: 1.18; }
  .role-overview-employee .employee-summary-card strong { font-size: 20px; line-height: 1; }
  .role-overview-employee .employee-summary-icon { width: 30px; height: 30px; border-radius: 8px; font-size: 16px; }
}

@media (max-width: 600px) {
  .app-shell {
    width: 100%;
    max-width: 100%;
    padding-inline: 10px;
  }

  .topbar,
  .topbar.admin-dashboard-topbar {
    width: calc(100% + 20px);
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 54px;
    padding-right: 112px;
  }

  .topbar.admin-dashboard-topbar > div:first-child {
    width: 100%;
    min-width: 0;
  }

  .topbar.admin-dashboard-topbar h1 {
    font-size: 21px;
    line-height: 1.2;
    white-space: nowrap;
    font-size: clamp(17px, 5vw, 21px);
  }

  .panel {
    width: 100%;
    padding: 14px;
    overflow: hidden;
  }

  .panel-head,
  .task-list-head,
  .inventory-table-panel > .panel-head {
    width: 100%;
    gap: 10px;
    align-items: stretch;
  }

  .panel-head > div,
  .panel-head h2,
  .panel-head p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .panel-head .actions,
  .task-list-actions,
  .dashboard-head-actions,
  .inventory-add-books-button,
  .inventory-header-actions {
    width: 100%;
  }

  .task-list-actions,
  .dashboard-head-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .task-list-search,
  .task-list-search input,
  .dashboard-head-actions button,
  .task-list-actions button,
  .inventory-add-books-button,
  .inventory-header-actions button {
    width: 100%;
    min-width: 0;
  }

  .inventory-header-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .task-view-tabs {
    width: 100%;
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .task-view-tabs button {
    flex: 1 0 auto;
    min-width: 120px;
    white-space: nowrap;
  }

  .inventory-summary {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .inventory-summary-card {
    gap: 5px;
    min-width: 0;
    padding: 10px 7px;
  }

  .inventory-summary-card span {
    font-size: 10px;
    line-height: 1.15;
  }

  .inventory-summary-card strong {
    font-size: 18px;
    overflow-wrap: anywhere;
  }

  .inventory-summary-card {
    padding: 13px 15px;
  }

  .inventory-form-panel .grid.two,
  form[data-record-type] .grid.two,
  form[data-record-type] .grid.three,
  form[data-record-type] .grid.four,
  #taskEditForm .grid.two {
    grid-template-columns: 1fr;
  }

  form[data-record-type] .wide,
  form[data-record-type] .full,
  #taskEditForm .wide,
  #taskEditForm .full {
    grid-column: auto;
  }

  #salesForm .step-panel .grid,
  #distributorsForm .step-panel .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 10px;
  }

  #salesForm .step-panel .wide,
  #salesForm .step-panel .full,
  #distributorsForm .step-panel .wide,
  #distributorsForm .step-panel .full {
    grid-column: 1 / -1;
  }

  .form-actions,
  .form-actions-bottom,
  .record-hero-actions,
  .record-actions {
    width: 100%;
    flex-wrap: wrap;
  }

  .form-actions > button,
  .form-actions-bottom > button,
  .record-hero-actions > button,
  .record-actions > button {
    flex: 1 1 140px;
    min-width: 0;
  }

  .crm-toolbar {
    grid-template-columns: 1fr;
  }

  .crm-toolbar .custom-select.dashboard-filter-select,
  .crm-toolbar .custom-select.dashboard-filter-select-wide,
  .crm-toolbar .dashboard-search-wrap {
    grid-column: 1;
  }

  .notification-panel {
    position: fixed;
    top: 60px;
    right: 10px;
    left: 10px;
    width: auto;
    max-height: calc(100vh - 74px);
  }

  .login-card,
  .password-dialog {
    width: calc(100% - 20px);
    padding: 16px;
  }

  .stepper-header {
    overflow-x: auto;
    grid-template-columns: repeat(4, minmax(110px, 1fr));
  }

  /* Keep the mobile app header clear of the fixed menu and account controls. */
  .topbar > div:first-child {
    display: grid;
    place-items: center;
  }

  .topbar h1,
  .topbar.admin-dashboard-topbar h1 {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Task-date records use compact label/value cards instead of very tall rows. */
  .task-date-details-panel {
    padding: 12px;
  }

  .task-date-details-panel .detail-back-row {
    margin-bottom: 4px;
  }

  .task-date-details-panel .task-detail-head {
    gap: 10px;
    margin-bottom: 10px;
  }

  .task-date-details-panel .task-detail-head > button {
    width: 100%;
  }

  .task-date-table {
    width: 100%;
    overflow: visible;
  }

  .task-date-table table,
  .task-date-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .task-date-table tr {
    width: 100%;
    padding: 7px 10px;
  }

  .task-date-table td {
    display: grid;
    grid-template-columns: minmax(104px, 38%) minmax(0, 1fr);
    gap: 8px;
    min-width: 0;
    padding: 7px 0;
    font-size: 13px;
    line-height: 1.35;
  }

  .task-date-table td::before {
    line-height: 1.35;
  }

  .task-date-table td .record-actions {
    display: flex;
    gap: 6px;
  }

  .task-date-table .inline-task-row input,
  .task-date-table .inline-task-row select {
    width: 100%;
    min-width: 0;
  }

  .task-date-details-panel {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 12px 10px 16px;
    overflow: hidden;
  }

  .task-date-details-panel .task-detail-head {
    width: 100%;
    margin-bottom: 12px;
  }

  .task-date-details-panel .task-detail-head h2 {
    font-size: 19px;
    line-height: 1.25;
  }

  .task-date-details-panel .task-date-owner { display: block; }
  .task-date-details-panel .task-date-owner::before { content: ""; }

  .task-date-details-panel .task-detail-head p {
    font-size: 14px;
    line-height: 1.35;
  }

  .task-date-details-panel .task-detail-head > button {
    min-height: 44px;
    margin-top: 0;
  }

  .task-date-table tr {
    box-sizing: border-box;
    margin: 0;
    padding: 4px 2px;
  }

  .task-date-table td {
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr);
    gap: 10px;
    padding: 8px 0;
    overflow-wrap: anywhere;
  }

  .task-date-table td::before {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .task-date-table td > * {
    min-width: 0;
    max-width: 100%;
  }

  .task-date-table .badge {
    justify-self: stretch;
    width: auto;
    max-width: 100%;
    text-align: left;
  }

  /* Keep task rows in a compact horizontal table on phones. */
  .task-date-table {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .task-date-table table {
    display: table;
    width: max-content;
    min-width: 900px;
    table-layout: auto;
  }

  .task-date-table thead {
    display: table-header-group;
  }

  .task-date-table tbody {
    display: table-row-group;
    width: auto;
    min-width: 0;
  }

  .task-date-table tr {
    display: table-row;
    width: auto;
    margin: 0;
    padding: 0;
  }

  .task-date-table th,
  .task-date-table td {
    display: table-cell;
    min-width: 86px;
    padding: 8px 9px;
    vertical-align: middle;
    overflow-wrap: normal;
  }

  .task-date-table th:first-child,
  .task-date-table td:first-child {
    width: 88px;
    min-width: 88px;
  }

  .task-date-table th:nth-child(2),
  .task-date-table td:nth-child(2) {
    width: 118px;
    min-width: 118px;
  }

  .task-date-table td::before {
    display: none;
  }

  .task-date-table .inline-task-row input,
  .task-date-table .inline-task-row select {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .task-date-table .inline-task-row td {
    text-align: center;
    vertical-align: middle;
  }

  .task-date-table .inline-task-row td > input,
  .task-date-table .inline-task-row td > select {
    display: block;
    margin: 0 auto;
  }
}

@media (max-width: 380px) {
  .topbar,
  .topbar.admin-dashboard-topbar {
    padding-left: 50px;
    padding-right: 98px;
  }

  .topbar h1,
  .topbar.admin-dashboard-topbar h1 {
    font-size: 16px;
  }

  .task-date-table td {
    grid-template-columns: minmax(94px, 36%) minmax(0, 1fr);
  }
}

/* Keep the fixed mobile menu button on the same center line as the admin header. */
@media (max-width: 600px) {
  .topbar.admin-dashboard-topbar .menu-toggle {
    top: 52px;
    left: 12px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    padding: 0;
    transform: translateY(-50%);
  }

  .topbar.admin-dashboard-topbar .menu-toggle span {
    width: 20px;
    height: 2px;
    margin: 0;
  }
}

@media (max-width: 600px) {
  .task-date-table {
    width: 100%;
    overflow: visible;
  }

  .task-date-table table,
  .task-date-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .task-date-table thead {
    display: none;
  }

  .task-date-table tr {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
  }

  .task-date-table th,
  .task-date-table td {
    display: flex;
    gap: 8px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 7px 0;
    vertical-align: middle;
    overflow-wrap: anywhere;
  }

  .task-date-table td::before {
    display: block;
    flex: 0 0 112px;
    width: 112px;
    min-width: 112px;
    overflow-wrap: anywhere;
  }

  .task-date-table td > * {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .task-date-table td {
    overflow-wrap: normal;
    word-break: normal;
  }

  .task-date-table .inline-task-row input,
  .task-date-table .inline-task-row select {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
  }
}

@media (max-width: 600px) {
  html,
  body,
  .app-shell,
  .page-content {
    min-width: 0;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    background: var(--white);
  }

  .app-shell {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-left: 0 !important;
    padding-left: 10px;
    padding-right: 10px;
    overflow: visible;
  }

  .sidebar:not(.menu-open) {
    width: 0 !important;
    min-width: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .topbar,
  .topbar.admin-dashboard-topbar {
    position: sticky !important;
    top: 0;
    z-index: 100;
    isolation: isolate;
    margin-top: 0;
    margin-bottom: 14px;
    background: var(--white);
    border-bottom: 0;
    box-shadow: 0 5px 15px rgba(20, 28, 64, .05);
  }

  .topbar,
  .topbar.admin-dashboard-topbar {
    width: 100vw;
    margin-left: -10px;
    margin-right: -10px;
    min-height: 52px;
    padding-top: 7px;
    padding-bottom: 7px;
  }

  .menu-toggle {
    position: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    top: 8px;
    left: 12px;
    z-index: 120;
    width: 36px;
    min-height: 36px;
    border: 0;
    border-radius: 8px;
    background: #17166d;
  }

  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    flex: 0 0 2px;
    margin: 0;
    border-radius: 999px;
    background: #fff;
  }

  .account-controls {
    top: 8px;
    right: 10px;
    gap: 6px;
  }

  .notification-toggle,
  .profile-toggle {
    width: 36px;
    min-height: 36px;
    height: 36px;
  }

  .notification-toggle svg {
    width: 17px;
    height: 17px;
  }

  .profile-toggle .account-avatar {
    width: 29px;
    height: 29px;
  }

  .topbar h1,
  .topbar.admin-dashboard-topbar h1 {
    font-size: 18px;
    line-height: 1.15;
  }

  .topbar.admin-dashboard-topbar {
    min-height: 58px;
    align-items: center;
  }

  .topbar.admin-dashboard-topbar > div:first-child {
    position: absolute;
    left: 50%;
    width: calc(100% - 210px);
    max-width: none;
    min-width: 0;
    transform: translateX(-50%);
    text-align: center;
  }

  .topbar.admin-dashboard-topbar h1 {
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 18px;
    line-height: 1.2;
  }

  .topbar.admin-dashboard-topbar .account-controls {
    top: 8px;
    right: 10px;
    align-items: center;
    gap: 8px;
  }

  .topbar.admin-dashboard-topbar .notification-toggle,
  .topbar.admin-dashboard-topbar .profile-toggle {
    width: 42px;
    height: 42px;
    min-height: 42px;
  }

  .topbar.admin-dashboard-topbar .notification-toggle svg {
    width: 19px;
    height: 19px;
  }

  .topbar.admin-dashboard-topbar .profile-toggle .account-avatar {
    width: 34px;
    height: 34px;
  }

  .menu-toggle {
    top: 8px;
    left: 12px;
    width: 42px;
    min-height: 42px;
  }

  .task-list-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .task-list-actions {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 8px;
  }

  .task-list-actions .task-list-search {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }

  .task-list-actions > button {
    flex: 0 0 auto;
    width: auto;
    min-width: 112px;
    padding-inline: 10px;
    white-space: nowrap;
  }

  .crm-toolbar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .crm-toolbar .dashboard-search-wrap {
    grid-column: 1 / -1;
  }

  .crm-toolbar .custom-select,
  .crm-toolbar .dashboard-toolbar-action {
    grid-column: auto;
    width: 100%;
    min-width: 0;
  }

  .crm-toolbar > :nth-child(1) {
    grid-column: 1 / -1;
  }

  .crm-toolbar > :nth-child(2),
  .crm-toolbar > :nth-child(3) {
    grid-column: auto !important;
  }

  .crm-toolbar > :nth-child(4) {
    grid-column: 1;
  }

  .crm-toolbar > :nth-child(5) {
    grid-column: 2;
  }

  .dashboard-table-fallback .has-select-column th:first-child,
  .dashboard-table-fallback .has-select-column td:first-child {
    position: sticky;
    left: 0;
    z-index: 3;
    width: 42px;
    min-width: 42px;
    max-width: 42px;
    padding-left: 8px;
    padding-right: 8px;
    text-align: center;
  }

  .dashboard-table-fallback .has-select-column th:nth-child(2),
  .dashboard-table-fallback .has-select-column td:nth-child(2) {
    position: sticky;
    left: 42px;
    z-index: 2;
    width: 110px;
    min-width: 110px;
    max-width: 110px;
    background: var(--white);
  }

  .dashboard-table-fallback .has-select-column th:first-child {
    background: #f3f5fa;
  }

  .task-view-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
    overflow: visible;
  }

  .task-view-tabs button {
    width: 100%;
    min-width: 0;
    flex: none;
    padding-inline: 8px;
    white-space: nowrap;
  }

  .crm-dashboard,
  .crm-list-panel,
  .task-list-panel,
  .inventory-dashboard,
  .split-panels {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .crm-list-panel,
  .task-list-panel {
    border-radius: 12px;
  }

  .crm-dashboard > .panel,
  .crm-dashboard > .role-overview,
  .crm-dashboard > .crm-list-panel {
    margin-left: 0;
    margin-right: 0;
  }
}

/* Keep the centered admin title clear of the fixed menu and account buttons. */
@media (max-width: 600px) {
  .topbar.admin-dashboard-topbar {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 80px;
    align-items: center;
    justify-content: stretch;
    column-gap: 8px;
    min-height: 56px;
    padding: 8px 10px;
  }

  .topbar.admin-dashboard-topbar > div:first-child {
    position: absolute;
    left: 50%;
    width: max-content;
    max-width: calc(100% - 130px);
    min-width: 0;
    transform: translateX(-50%);
  }

  .topbar.admin-dashboard-topbar h1 {
    width: max-content;
    max-width: 100%;
    font-size: clamp(15px, 4.6vw, 18px);
    line-height: 1.2;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .topbar.admin-dashboard-topbar .account-controls {
    position: static;
    grid-column: 3;
    grid-row: 1;
    width: 80px;
    justify-self: end;
    gap: 8px;
  }

  .topbar.admin-dashboard-topbar .notification-toggle,
  .topbar.admin-dashboard-topbar .profile-toggle {
    width: 36px;
    height: 36px;
    min-height: 36px;
  }

  .topbar.admin-dashboard-topbar .profile-toggle .account-avatar {
    width: 28px;
    height: 28px;
  }

  .menu-toggle {
    top: 8px;
    left: 12px;
    width: 42px;
    min-height: 42px;
    z-index: 120;
  }
}

@media (max-width: 420px) {
  .menu-toggle {
    top: 8px;
    left: 12px;
  }
}

@media (max-width: 600px) {
  .topbar.admin-dashboard-topbar {
    position: sticky !important;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) auto;
    align-items: center;
    column-gap: 12px;
    width: 100vw;
    min-height: 58px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px;
  }

  .topbar.admin-dashboard-topbar > div:first-child {
    position: static;
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    width: 100%;
    min-width: 0;
    transform: translateY(-12px);
    text-align: left;
  }

  .topbar.admin-dashboard-topbar h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(14px, 4.5vw, 17px);
    line-height: 1;
    letter-spacing: -0.02em;
    text-align: left;
    overflow: visible;
    text-overflow: clip;
    white-space: nowrap;
  }

  .topbar.admin-dashboard-topbar .account-controls {
    position: absolute;
    top: 50%;
    right: 10px;
    grid-column: 3;
    grid-row: 1;
    display: flex;
    width: auto;
    transform: translateY(-50%);
    align-items: center;
    gap: 9px;
  }

  .topbar.admin-dashboard-topbar .notification-toggle,
  .topbar.admin-dashboard-topbar .profile-toggle {
    width: 44px;
    height: 44px;
    min-height: 44px;
  }

  .topbar.admin-dashboard-topbar .notification-toggle svg {
    width: 20px;
    height: 20px;
  }

  .topbar.admin-dashboard-topbar .profile-toggle .account-avatar {
    width: 35px;
    height: 35px;
  }

  .topbar.admin-dashboard-topbar .menu-toggle {
    top: 50%;
    left: 12px;
    margin: 0;
    transform: translateY(-50%);
  }
}

/* Keep the mobile admin title, menu and account buttons aligned in one row. */
@media (max-width: 600px) {
  .topbar.admin-dashboard-topbar {
    position: relative;
    box-sizing: border-box;
    width: calc(100% + 20px);
    margin-top: -16px;
    margin-left: -10px;
    margin-right: -10px;
    padding: 0 10px 0 58px;
    min-height: 64px;
    display: block;
  }

  .topbar.admin-dashboard-topbar > div:first-child {
    position: absolute;
    top: 50%;
    left: 96px;
    width: calc(100% - 190px);
    min-width: 0;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    text-align: left;
  }

  .topbar.admin-dashboard-topbar h1 {
    width: 100%;
    max-width: 100%;
    margin: 0;
    font-size: clamp(15px, 4.5vw, 18px);
    line-height: 1.2;
    text-align: left;
    letter-spacing: normal;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar.admin-dashboard-topbar .account-controls {
    position: absolute;
    top: 50%;
    right: 10px;
    width: auto;
    transform: translateY(-50%);
    gap: 8px;
  }

  .topbar.admin-dashboard-topbar .notification-toggle,
  .topbar.admin-dashboard-topbar .profile-toggle {
    width: 40px;
    height: 40px;
    min-height: 40px;
  }

  .topbar.admin-dashboard-topbar .profile-toggle .account-avatar {
    width: 31px;
    height: 31px;
  }

  .menu-toggle {
    top: 8px;
    left: 12px;
    width: 42px;
    height: 42px;
    min-height: 42px;
    transform: none;
  }
}

@media (max-width: 420px) {
  .topbar.admin-dashboard-topbar { margin-top: -14px; }
}

/* Keep every mobile page title centered vertically with its header controls. */
@media (max-width: 600px) {
  .topbar:not(.admin-dashboard-topbar) {
    position: sticky !important;
    top: 0;
    display: block;
    box-sizing: border-box;
    width: calc(100% + 24px);
    min-height: 64px;
    margin: -16px -12px 16px;
    padding: 0 10px;
  }

  .topbar:not(.admin-dashboard-topbar) > div:first-child {
    position: absolute;
    top: 50%;
    left: 84px;
    width: calc(100% - 180px);
    min-width: 0;
    padding: 0;
    transform: translateY(-50%);
  }

  .topbar:not(.admin-dashboard-topbar) h1 {
    width: 100%;
    margin: 0;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.2;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .topbar:not(.admin-dashboard-topbar) .account-controls {
    position: absolute;
    top: 50%;
    right: 10px;
    width: auto;
    transform: translateY(-50%);
  }
}

/* Keep task rows on one line on phones and make District/Area columns compact. */
.task-date-table table {
  table-layout: fixed;
  /* Keep the fixed column widths plus cell padding from being compressed. */
  width: max(100%, 1660px);
  min-width: 1660px;
}

.task-date-table th:nth-child(1), .task-date-table td:nth-child(1) { width: 76px; min-width: 76px; }
.task-date-table th:nth-child(2), .task-date-table td:nth-child(2) { width: 94px; min-width: 94px; }
.task-date-table th:nth-child(3), .task-date-table td:nth-child(3) { width: 118px; min-width: 118px; }
.task-date-table th:nth-child(4), .task-date-table td:nth-child(4) { width: 132px; min-width: 132px; }
.task-date-table th:nth-child(5), .task-date-table td:nth-child(5) { width: 180px; min-width: 180px; }
.task-date-table th:nth-child(6), .task-date-table td:nth-child(6) { width: 125px; min-width: 125px; }
.task-date-table th:nth-child(7), .task-date-table td:nth-child(7) { width: 150px; min-width: 150px; }
.task-date-table th:nth-child(8), .task-date-table td:nth-child(8) { width: 190px; min-width: 190px; }
.task-date-table th:nth-child(9), .task-date-table td:nth-child(9) { width: 190px; min-width: 190px; }
.task-date-table th:nth-child(10), .task-date-table td:nth-child(10) { width: 142px; min-width: 142px; }
.task-date-table th:nth-child(11), .task-date-table td:nth-child(11) { width: 145px; min-width: 145px; }
.task-date-table th:nth-child(12), .task-date-table td:nth-child(12) { width: 82px; min-width: 82px; }
.task-date-table .task-action-column { width: 104px; min-width: 104px; white-space: nowrap; overflow-wrap: normal; word-break: keep-all; }
.task-date-table .inline-task-row input,
.task-date-table .inline-task-row select {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 0;
}
.task-date-table input:disabled { opacity: .72; cursor: not-allowed; }
.task-date-table .employee-task-status-select { min-width: 112px; padding: 8px 26px 8px 10px; }
.task-date-table .employee-task-status-select:disabled { opacity: .72; cursor: not-allowed; }

@media (min-width: 861px) {
  .task-date-table table { width: 100%; min-width: 1680px; table-layout: fixed; }
  .task-date-table th, .task-date-table td { box-sizing: border-box; padding: 12px 10px; }
  .task-date-table th:nth-child(7), .task-date-table td:nth-child(7) { width: 138px; min-width: 138px; }
  .task-date-table th:nth-child(8), .task-date-table td:nth-child(8),
  .task-date-table th:nth-child(9), .task-date-table td:nth-child(9) { width: 176px; min-width: 176px; }
  .task-date-table th:nth-child(10), .task-date-table td:nth-child(10) { width: 142px; min-width: 142px; }
  .task-date-table th:nth-child(11), .task-date-table td:nth-child(11) { width: 192px; min-width: 192px; }
  .task-date-table th:nth-child(12), .task-date-table td:nth-child(12) { width: 124px; min-width: 124px; }
  .task-date-table td[data-label^="Comments by"] textarea {
    display: block;
    width: 100%;
    min-width: 0;
    height: 76px;
    min-height: 76px;
    max-height: 180px;
    padding: 10px 12px;
    line-height: 1.4;
  }
  .task-date-table .employee-task-status-select { width: 100%; min-width: 0; }
  .task-date-table td:nth-child(10), .task-date-table td:nth-child(11) { white-space: nowrap; }
  .task-date-table td:nth-child(10) .badge,
  .task-date-table td:nth-child(11) .badge { display: inline-flex; max-width: 100%; white-space: nowrap; }
  .task-date-table .record-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .task-date-table .record-actions button { box-sizing: border-box; width: 100%; min-width: 0; padding: 8px 9px; white-space: nowrap; }
}

@media (max-width: 600px) {
  .task-date-table {
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
  }

  .task-date-table table,
  .task-date-table tbody { display: table-row-group; }
  .task-date-table table { display: table; }
  .task-date-table thead { display: table-header-group; }
  .task-date-table tr { display: table-row; width: auto; min-width: 0; margin: 0; padding: 0; }
  .task-date-table th,
  .task-date-table td { display: table-cell; padding: 8px 9px; vertical-align: middle; }
  .task-date-table td::before { display: none; }
}

/* Let the open mobile drawer use the available screen width instead of
   leaving a large empty strip beside its fixed 300px desktop cap. */
@media (max-width: 600px) {
  .sidebar.menu-open {
    width: min(420px, 90vw);
  }
}


/* Mobile task rows stay horizontal and scroll inside the table viewport. */
@media (max-width: 860px) {
  .task-date-table { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
  .task-date-table table { display: table !important; width: 1781px !important; min-width: 1781px !important; table-layout: fixed !important; }
  .task-date-table thead { display: table-header-group !important; }
  .task-date-table tbody { display: table-row-group !important; width: auto !important; }
  .task-date-table tr { display: table-row !important; width: auto !important; padding: 0 !important; }
  .task-date-table th, .task-date-table td { display: table-cell !important; padding: 9px 8px !important; vertical-align: middle; white-space: normal; }
  .task-date-table td::before { display: none !important; content: none !important; }
  .task-date-table th:nth-child(1), .task-date-table td:nth-child(1) { width: 76px !important; min-width: 76px !important; }
  .task-date-table th:nth-child(2), .task-date-table td:nth-child(2) { width: 94px !important; min-width: 94px !important; }
  .task-date-table th:nth-child(3), .task-date-table td:nth-child(3) { width: 118px !important; min-width: 118px !important; }
  .task-date-table th:nth-child(4), .task-date-table td:nth-child(4) { width: 132px !important; min-width: 132px !important; }
  .task-date-table th:nth-child(5), .task-date-table td:nth-child(5) { width: 180px !important; min-width: 180px !important; }
  .task-date-table th:nth-child(6), .task-date-table td:nth-child(6) { width: 125px !important; min-width: 125px !important; }
  .task-date-table th:nth-child(7), .task-date-table td:nth-child(7) { width: 150px !important; min-width: 150px !important; }
  .task-date-table th:nth-child(8), .task-date-table td:nth-child(8), .task-date-table th:nth-child(9), .task-date-table td:nth-child(9) { width: 190px !important; min-width: 190px !important; }
  .task-date-table th:nth-child(10), .task-date-table td:nth-child(10) { width: 142px !important; min-width: 142px !important; }
  .task-date-table th:nth-child(11), .task-date-table td:nth-child(11) { width: 230px !important; min-width: 230px !important; white-space: nowrap; }
  .task-date-table th:nth-child(12), .task-date-table td:nth-child(12) { width: 154px !important; min-width: 154px !important; }
  .task-date-table td[data-label^="Comments by"] textarea { width: 100%; min-width: 0; min-height: 72px; }
  .task-date-table td:nth-child(11) .badge.awaiting { width: max-content !important; max-width: none !important; white-space: nowrap !important; }
  .task-date-table td:nth-child(12) .record-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px; }
  .task-date-table td:nth-child(12) .record-actions button { width: 100%; min-width: 0; white-space: nowrap; }
}

.task-date-table td[data-label^="Comments by"] { min-width: 0; }
.task-comment-preview {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  line-height: 1.35;
  text-align: left;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.task-comment-preview:hover,
.task-comment-preview:focus-visible { border-color: var(--accent); outline: 0; box-shadow: 0 0 0 3px rgba(82, 52, 243, .12); }
.task-comment-preview.is-empty { color: var(--muted); font-weight: 500; }

.task-comment-dialog {
  box-sizing: border-box;
  width: min(540px, calc(100vw - 28px));
  max-width: calc(100vw - 28px);
  max-height: min(82vh, 720px);
  padding: 0;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(8, 13, 57, .25);
}
.task-comment-dialog::backdrop { background: rgba(8, 13, 57, .5); backdrop-filter: blur(2px); }
.task-comment-dialog-content { display: grid; gap: 14px; padding: 20px; }
.task-comment-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.task-comment-dialog-kicker { color: var(--accent-dark); font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.task-comment-dialog-head h2 { margin: 4px 0 0; font-size: 20px; }
.task-comment-dialog-record { margin: 0; color: var(--muted); font-size: 13px; }
.task-comment-dialog-text { box-sizing: border-box; max-height: min(48vh, 420px); margin: 0; padding: 15px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--soft); color: var(--ink); font-size: 15px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.task-comment-close { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; }
.task-comment-dialog-editor { display: grid; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 800; }
.task-comment-dialog-editor textarea { box-sizing: border-box; width: 100%; min-height: 120px; resize: vertical; }
.task-comment-dialog-status { margin: 0; }
.task-comment-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
html[data-theme="dark"] .task-comment-preview { background: #17213a; color: var(--ink); }
html[data-theme="dark"] .task-comment-preview.is-empty { color: var(--muted); }

@media (max-width: 600px) {
  .task-comment-dialog-content { gap: 11px; padding: 16px; }
  .task-comment-dialog-text { font-size: 14px; }
  .task-comment-dialog-actions > button { flex: 1 1 110px; }
}

/* Keep only the selection checkbox column pinned during horizontal scroll. */
@media (max-width: 600px) {
  .dashboard-table-fallback .has-select-column th:nth-child(2),
  .dashboard-table-fallback .has-select-column td:nth-child(2) {
    position: static !important;
    left: auto !important;
    z-index: auto;
  }
}

@media (max-width: 700px) {
  /* The contact summary sits inside its own panel; don't let the general
     220px mobile card minimum push it outside the panel. */
  .record-contact-panel .record-contact-card {
    width: 100%;
    min-width: 0;
  }
}

@media (max-width: 420px) {
  .fulfillment-fields {
    grid-template-columns: minmax(0, 1fr) minmax(88px, 0.45fr);
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    top: 12px;
    right: auto;
    bottom: auto;
    left: 0;
    width: min(380px, 82vw);
    height: auto;
    min-height: 0;
    max-height: calc(100dvh - 24px);
    padding: 24px 16px;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 14px 14px 0;
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    width: min(340px, 78vw);
  }

  #menuToggle[aria-expanded="true"] > .menu-notification-badge {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    top: 0;
    bottom: 0;
    height: 100dvh;
    min-height: 100vh;
    max-height: none;
    border-radius: 0 14px 14px 0;
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    width: min(400px, 96vw);
  }

  .sidebar.menu-open .brand {
    gap: 8px;
    min-height: 68px;
    margin-bottom: 14px;
    padding-left: 46px;
    align-items: center;
  }

  .sidebar.menu-open .brand-logo {
    width: 68px;
    height: 68px;
    transform: translateY(-8px);
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    width: min(340px, 78vw);
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open .brand-logo {
    width: 52px;
    height: 52px;
    transform: translateY(-8px);
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open {
    width: min(300px, 72vw);
  }
}

@media (max-width: 600px) {
  .sidebar.menu-open .brand-logo {
    width: 42px;
    height: 42px;
    transform: translateY(-16px);
  }
}


/* Compact mobile drawer header and remove the excess gap before navigation. */
@media (max-width: 600px) {
  .sidebar.menu-open {
    width: min(260px, 76vw);
    padding: 8px 10px 24px;
  }

  .sidebar.menu-open .brand {
    min-height: 42px;
    margin: 0 0 6px;
    padding-left: 52px;
    gap: 4px;
  }

  .sidebar.menu-open .brand-logo {
    width: 42px;
    height: 42px;
    transform: none;
  }

  .sidebar.menu-open .nav-list {
    margin-top: 16px;
  }
}

/* Keep the Orders & Sample card compact and aligned on narrow screens. */
@media (max-width: 600px) {
  .record-orders-section,
  .record-edit-history-section {
    box-sizing: border-box;
    width: 100%;
    padding: 10px;
  }

  .record-orders-section .record-section-title .compact-btn {
    min-height: 26px;
    padding: 4px 6px;
    font-size: 8px;
    line-height: 1.1;
  }

  .record-orders-section .record-compact-table-wrap,
  .record-edit-history-section .record-compact-table-wrap {
    width: 100%;
    max-width: 100%;
  }
}

/* Keep the notification drawer inside the phone viewport. */
@media (max-width: 600px) {
  .notification-panel {
    position: fixed !important;
    top: 58px;
    right: 10px !important;
    left: auto !important;
    width: min(360px, calc(100vw - 24px)) !important;
    max-width: calc(100vw - 24px);
    max-height: min(520px, calc(100dvh - 120px));
  }

  .notification-panel-head {
    flex-wrap: wrap;
    padding: 12px;
  }

  .notification-panel-actions {
    margin-left: auto;
  }

  .notification-row {
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
  }

  .notification-row-icon {
    width: 34px;
    height: 34px;
  }

  .notification-open-action {
    grid-column: 2;
    justify-self: start;
  }
}
.contact-details-layout {
  grid-template-columns: 1fr;
}

@media (min-width: 861px) {
  .contact-details-layout {
    grid-template-columns: repeat(2, minmax(280px, 420px));
    justify-content: center;
  }
}

@media (max-width: 860px) {
  .task-date-table {
    width: 100%;
    max-width: 100%;
    overflow: visible;
  }

  .task-date-table table,
  .task-date-table tbody {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .task-date-table thead {
    display: none;
  }

  .task-date-table tr {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
  }

  .task-date-table th,
  .task-date-table td {
    display: grid;
    grid-template-columns: minmax(112px, 36%) minmax(0, 1fr);
    gap: 10px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    padding: 8px 0;
    vertical-align: top;
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* Earlier fixed column rules are intentionally overridden in card mode. */
  .task-date-table th:nth-child(n),
  .task-date-table td:nth-child(n) {
    width: 100% !important;
    min-width: 0 !important;
  }

  .task-date-table td::before {
    display: block;
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .task-date-table td > * {
    min-width: 0;
    max-width: 100%;
    width: 100%;
  }

  .task-date-table td[data-label^="Comments by"] textarea {
    width: 100%;
    min-width: 0;
    min-height: 72px;
  }
}

/* Keep approval and row actions clear in the wide task table. */
@media (min-width: 861px) {
  .task-date-table table { min-width: 1750px !important; }
  .task-date-table th:nth-child(11),
  .task-date-table td:nth-child(11) { width: 230px !important; min-width: 230px !important; }
  .task-date-table td:nth-child(11) .badge.awaiting {
    display: inline-flex;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
  }
  .task-date-table th:nth-child(12),
  .task-date-table td:nth-child(12) { width: 154px !important; min-width: 154px !important; }
  .task-date-table td:nth-child(12) .record-actions {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px;
  }
  .task-date-table td:nth-child(12) .record-actions button {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    white-space: nowrap;
  }
}

@media (max-width: 860px) {
  .task-date-table { overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; }
  .task-date-table table { display: table !important; width: 1781px !important; min-width: 1781px !important; table-layout: fixed !important; }
  .task-date-table thead { display: table-header-group !important; }
  .task-date-table tbody { display: table-row-group !important; width: auto !important; }
  .task-date-table tr { display: table-row !important; width: auto !important; padding: 0 !important; }
  .task-date-table th, .task-date-table td { display: table-cell !important; padding: 9px 8px !important; vertical-align: middle; white-space: normal; }
  .task-date-table td::before { display: none !important; content: none !important; }
  .task-date-table th:nth-child(1), .task-date-table td:nth-child(1) { width: 76px !important; min-width: 76px !important; }
  .task-date-table th:nth-child(2), .task-date-table td:nth-child(2) { width: 94px !important; min-width: 94px !important; }
  .task-date-table th:nth-child(3), .task-date-table td:nth-child(3) { width: 118px !important; min-width: 118px !important; }
  .task-date-table th:nth-child(4), .task-date-table td:nth-child(4) { width: 132px !important; min-width: 132px !important; }
  .task-date-table th:nth-child(5), .task-date-table td:nth-child(5) { width: 180px !important; min-width: 180px !important; }
  .task-date-table th:nth-child(6), .task-date-table td:nth-child(6) { width: 125px !important; min-width: 125px !important; }
  .task-date-table th:nth-child(7), .task-date-table td:nth-child(7) { width: 150px !important; min-width: 150px !important; }
  .task-date-table th:nth-child(8), .task-date-table td:nth-child(8), .task-date-table th:nth-child(9), .task-date-table td:nth-child(9) { width: 190px !important; min-width: 190px !important; }
  .task-date-table th:nth-child(10), .task-date-table td:nth-child(10) { width: 142px !important; min-width: 142px !important; }
  .task-date-table th:nth-child(11), .task-date-table td:nth-child(11) { width: 230px !important; min-width: 230px !important; }
  .task-date-table th:nth-child(12), .task-date-table td:nth-child(12) { width: 154px !important; min-width: 154px !important; }
  .task-date-table td[data-label^="Comments by"] textarea { width: 100%; min-width: 0; min-height: 72px; }
  .task-date-table td:nth-child(11) .badge.awaiting { width: max-content !important; max-width: none !important; white-space: nowrap !important; }
  .task-date-table td:nth-child(12) .record-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 6px; }
  .task-date-table td:nth-child(12) .record-actions button { width: 100%; min-width: 0; white-space: nowrap; }
}