@import url('tableview.css');
@import url('registration.css');
@import url('dashboard.css');
/* This is the search bar style */
@import url('search_bar.css');
/* This is the messages/errors that user receives */
@import url('user_messages.css');
@import url('buttons.css');
@import url('clients_context.css'); /* radial menu */
@import url('options.css');
@import url('entity_notes.css');


/* Route Planner module ---------------------------------------------------- */

.alert {
  padding: 12px 14px;
  border-radius: 14px;
  margin-bottom: 18px;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
}
.alert-error {
  background: color-mix(in srgb, var(--c-delete, #ef4444) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-delete, #ef4444) 22%, transparent);
  color: var(--c-delete, #7f1d1d);
}
.alert-success {
  background: color-mix(in srgb, var(--c-progress-positive, #16a34a) 12%, transparent);
  border-color: color-mix(in srgb, var(--c-progress-positive, #16a34a) 22%, transparent);
  color: var(--c-progress-positive, #14532d);
}

.page-title {
  margin-bottom: 20px;
  color: var(--c-heading, #1a73e8);
}
.page-title .page-subtitle {
  display: block;
  margin-top: 6px;
  font-size: 0.95rem;
  color: var(--c-text, #475569);
  font-weight: 500;
}

.rp-page {
  max-width: 1100px;
  margin: 0 auto;
}
.rp-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.rp-header__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}

.planner-layout {
  display: grid;
  grid-template-columns: minmax(320px, 430px) minmax(0, 1fr);
  gap: 24px;
  align-items: flex-start;
}
@media (max-width: 960px) {
  .planner-layout { grid-template-columns: 1fr; }
}

.planner-form {
  display: grid;
  gap: 14px;
}
.rp-card {
  background: var(--c-card-bg, #fff);
  border-radius: 16px;
  padding: 18px;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}
.rp-form .input-group {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.rp-form .form__input {
  margin-bottom: 0;
}
.rp-form .form__hint {
  margin: 0;
  color: var(--c-topbar-muted, #64748b);
}
.rp-form .form__hint a {
  color: var(--c-link, #2563eb);
}
.rp-form .form__hint a:hover {
  text-decoration: underline;
}
.form-grid { display: grid; gap: 14px; }
@media (min-width: 900px) { .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rp-card h2 { margin-top: 0; }

.stops-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.stop-row,
.employee-row {
  display: grid;
  gap: 10px;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  margin-bottom: 12px;
}
.stop-row select,
.employee-row select { flex: 1; }
@media (max-width: 520px) {
  .stop-row,
  .employee-row {
    grid-template-columns: 1fr;
  }
  .stop-row .btn,
  .employee-row .btn {
    justify-self: flex-start;
  }
}

.employees-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
}
.employees-list {
  min-height: 4px;
  margin-top: 10px;
}
.employees-list.is-empty::before {
  content: attr(data-empty-message);
  display: block;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px dashed var(--c-border, rgba(0,0,0,0.12));
  background: var(--c-row-hover-bg, #f8fafc);
  color: var(--c-topbar-muted, #64748b);
  font-style: italic;
}
.employees-results {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
}
.employees-results li {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  border-radius: 14px;
  background: var(--c-row-hover-bg, rgba(241, 245, 249, 0.55));
}
.employees-results .employee-title {
  font-weight: 600;
  color: var(--c-text, #0f172a);
  margin-bottom: 4px;
}
.employees-results .employee-meta {
  color: var(--c-text, #334155);
  font-size: 0.9rem;
}
.employees-results .employee-meta.muted {
  color: var(--c-topbar-muted, #64748b);
}

.planner-meta {
  display: grid;
  gap: 12px;
}
.meta-card {
  background: var(--c-row-hover-bg, rgba(241, 245, 249, 0.55));
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  border-radius: 16px;
  padding: 12px 14px;
}
.meta-card h3 { margin: 0 0 4px; font-size: 0.95rem; color: var(--c-text, #1e293b); }
.meta-value { font-size: 1.1rem; font-weight: 600; margin: 0; }
.meta-card a { color: var(--c-link, #2563eb); font-weight: 700; }
.meta-card a:hover { text-decoration: underline; }

.planner-results {
  background: var(--c-card-bg, #fff);
  border-radius: 16px;
  padding: 20px;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
  min-height: 240px;
}
.planner-results .placeholder { color: var(--c-topbar-muted, #475569); font-style: italic; }
.planner-results .muted { color: var(--c-topbar-muted, #64748b); }

.rp-form-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}
@media (max-width: 520px) {
  .rp-form-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

.modern-form.form {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  font-family: inherit;
}
.modern-form .form-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 980px) {
  .modern-form .form-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.modern-form .form-card {
  background: var(--c-card-bg, #fff);
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}
.modern-form .form-card h2 {
  margin-top: 0;
}
.modern-form .input-group {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}
.modern-form .input-group.inline {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 520px) {
  .modern-form .input-group.inline {
    grid-template-columns: 1fr;
  }
}
.modern-form .form__input {
  margin-bottom: 0;
  border-radius: 10px;
}
.modern-form textarea.form__input {
  resize: vertical;
}
.modern-form .form__hint {
  margin: 0;
  color: var(--c-topbar-muted, #64748b);
}
.modern-form .form__hint a {
  color: var(--c-link, #2563eb);
}
.modern-form .form__hint a:hover {
  text-decoration: underline;
}
.required {
  color: var(--c-delete, #ef4444);
  font-weight: 900;
}
.sp-map-actions {
  display: grid;
  gap: 10px;
  margin: 8px 0 14px;
}
.sp-details {
  margin-top: 12px;
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  border-radius: 16px;
  padding: 12px 14px;
  background: var(--c-row-hover-bg, rgba(241, 245, 249, 0.55));
}
.sp-details summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 900;
  color: var(--c-text, #0f172a);
}
.sp-details summary::-webkit-details-marker {
  display: none;
}
.sp-details[open] {
  background: color-mix(in srgb, var(--c-card-bg, #fff) 80%, transparent);
}
.sp-details > .form__hint {
  margin-top: 6px;
  margin-bottom: 10px;
}
.sp-actions {
  margin-top: 18px;
}

.results-summary {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  margin-bottom: 18px;
}
.summary-card {
  background: color-mix(in srgb, var(--c-primary, #2563eb) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 18%, transparent);
  border-radius: 16px;
  padding: 12px;
}
.summary-card h3 { margin: 0 0 6px; font-size: 0.9rem; color: var(--c-text, #1d4ed8); }
.summary-card p { margin: 0; font-size: 1.1rem; font-weight: 600; }
.summary-card small { display: block; margin-top: 4px; color: var(--c-topbar-muted, #475569); }

.legs-list {
  margin: 0 0 22px;
  padding-left: 1.4rem;
}
.legs-list li { margin-bottom: 12px; }
.leg-title { font-weight: 800; color: var(--c-text, #0f172a); }
.leg-meta { color: var(--c-text, #334155); font-size: 0.9rem; }
.leg-meta.muted { color: var(--c-topbar-muted, #64748b); }

.map-preview { margin: 20px 0; }
.map-preview iframe,
.map-preview img {
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 240px;
  height: auto;
  border: 0;
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(15, 23, 42, 0.18);
}

.table-actions { display: flex; gap: 8px; align-items: center; }
.table-actions .btn { padding: 6px 10px; }

.toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 20px 0;
}

.toolbar--compact {
  margin-top: 10px;
  margin-bottom: 12px;
}

.toolbar--flush {
  margin: 0;
}

.toolbar--center {
  text-align: center;
}

.toolbar__group {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.toolbar__group--tight {
  gap: 6px;
}

.toolbar__label {
  color: #57707a;
  font-size: 0.9rem;
  line-height: 1.2;
  white-space: nowrap;
}

.toolbar__label--small {
  font-size: 0.82rem;
}

.toolbar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.toolbar__control {
  min-width: 0;
}

.toolbar select {
  min-width: 140px;
}

.toolbar__select--wide {
  min-width: 220px;
}

.toolbar .form__input--per-page {
  min-width: 90px;
  width: auto;
}

/* .toolbar .search-bar {
  margin-bottom: 0; REMOVED TO FIX VIEW
} */

.admin-filter-card,
.admin-list-card {
  background: var(--c-card-bg, #fff);
  border: 1px solid var(--c-border, #dbe3ee);
  border-radius: 20px;
  box-shadow: 0 12px 30px rgba(15, 23, 42, .07);
}

.admin-filter-card {
  display: grid;
  gap: 16px;
  padding: 20px 22px;
  margin-bottom: 18px;
}

.admin-filter-head,
.admin-list-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-filter-head h2,
.admin-list-head h2 {
  margin: 0;
  font-size: 1.15rem;
  color: var(--c-text, #0f172a);
}

.admin-filter-head p,
.admin-list-head p {
  margin: 6px 0 0;
  color: var(--c-topbar-muted, #64748b);
  font-size: .92rem;
  line-height: 1.55;
}

.admin-filter-pill {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-card-bg, #fff) 76%, var(--c-border, #e2e8f0));
  color: var(--c-topbar-muted, #475569);
  font-size: .82rem;
  font-weight: 700;
}

.admin-filter-form {
  display: grid;
  gap: 14px;
}

.admin-filter-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1.5fr) auto auto auto;
  gap: 10px;
  align-items: end;
}

.admin-filter-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px 14px;
}

.admin-field {
  display: grid;
  gap: 6px;
}

.admin-field label {
  font-weight: 600;
  color: var(--c-form-label, var(--c-text, #0f172a));
}

.admin-field input,
.admin-field select {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  box-sizing: border-box;
  border: 1px solid var(--c-form-input-border, var(--c-border, #cbd5e1));
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  font-size: .95rem;
  line-height: 1.35;
  color: var(--c-form-input-text, var(--c-text, #0f172a));
  background: var(--c-card-bg, #fff);
}

.admin-btn,
.admin-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 16px;
  border: 1px solid var(--c-border, #cbd5e1);
  border-radius: 12px;
  background: var(--c-card-bg, #fff);
  color: var(--c-text, #0f172a);
  cursor: pointer;
  text-decoration: none;
  font-weight: 700;
  font-size: .92rem;
  line-height: 1.2;
  white-space: nowrap;
  box-sizing: border-box;
  box-shadow: 0 6px 14px rgba(15, 23, 42, .05);
  transition: background-color .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.admin-btn:hover,
.admin-btn-secondary:hover {
  border-color: color-mix(in srgb, var(--c-primary, #2563eb) 24%, var(--c-border, #dbe3ee));
  background: color-mix(in srgb, var(--c-primary, #2563eb) 4%, var(--c-card-bg, #fff));
  color: var(--c-primary, #1d4ed8);
  transform: translateY(-1px);
}

.admin-btn {
  background: var(--c-button-primary-bg, var(--c-primary, #0f766e));
  border-color: color-mix(in srgb, var(--c-button-primary-bg, var(--c-primary, #0f766e)) 72%, #000 8%);
  color: var(--c-button-primary-text, #fff);
  box-shadow: 0 10px 20px color-mix(in srgb, var(--c-button-primary-bg, var(--c-primary, #0f766e)) 18%, transparent);
}

.admin-btn:hover {
  background: color-mix(in srgb, var(--c-button-primary-bg, var(--c-primary, #0f766e)) 88%, #000 12%);
  color: var(--c-button-primary-text, #fff);
}

.admin-btn svg,
.admin-btn-secondary svg {
  width: 16px;
  height: 16px;
  display: block;
}

.admin-btn-create {
  min-width: 176px;
}

@media (max-width: 960px) {
  .admin-filter-toolbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
  }

  .admin-filter-toolbar .admin-btn-create {
    grid-column: 1 / -1;
  }

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

@media (max-width: 720px) {
  .admin-filter-card {
    padding: 18px;
  }

  .admin-filter-head,
  .admin-list-head {
    display: grid;
  }

  .admin-filter-toolbar,
  .admin-filter-grid {
    grid-template-columns: 1fr;
  }

  .admin-btn,
  .admin-btn-secondary,
  .admin-btn-create {
    width: 100%;
  }
}

.form-inline { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 16px; }
.settings-grid { display: grid; gap: 14px; }
@media (min-width: 840px) { .settings-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.settings-section { margin-bottom: 32px; }

.empty-state { color: #475569; font-style: italic; }

.required { color: #dc2626; }

.page-title--centered {
  text-align: center;
  margin-bottom: 20px;
}

.form-card--responsive {
  max-width: 720px;
  margin: 0 auto 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
}

@media (max-width: 768px) {
  .form-card--responsive {
    padding: 18px;
    gap: 14px;
  }
}

.form__group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form__label {
  font-weight: 600;
  color: #0f172a;
  font-size: 0.95rem;
}

.form__input,
.form-card--responsive textarea,
.form-card--responsive select {
  width: 100%;
  min-height: 44px;
  border: 1px solid #d1d5db;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.95rem;
  color: #0f172a;
  background: #ffffff;
  box-sizing: border-box;
}

.form-card--responsive textarea {
  min-height: 120px;
  resize: vertical;
}

.form__hint {
  font-size: 0.8rem;
  color: #64748b;
  margin: 0;
}

.form__hint strong,
.form__hint .form__hint-label {
  font-weight: 600;
  color: #0f172a;
}

.context-wrapper select {
  width: 100%;
  min-height: 176px;
}

@media (max-width: 600px) {
  .context-wrapper select {
    min-height: 140px;
  }
}

.recording-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
  border-radius: 14px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

.recording-bar .button-add-new {
  margin-bottom: 0;
}

.recording-bar__toggle {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  color: #ffffff;
}

.recording-bar__toggle:hover {
  background: #b91c1c !important;
}

.recording-bar__timer {
  font-size: 1.4rem;
  font-weight: 700;
  color: #1f2937;
}

@media (max-width: 600px) {
  .recording-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .recording-bar__timer {
    text-align: center;
    width: 100%;
  }
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 640px) {
  .form-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .form-actions > * {
    width: 100%;
  }
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-bottom: 0;
  padding: 10px 12px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--c-topbar-bg, transparent) 88%, var(--c-card-bg, #fff));
  color: var(--c-topbar-text, inherit);
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 72%, transparent);
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.topbar-divider {
  display: block;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 12px 0 24px;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 18%, var(--c-border, #dbe3ee));
  box-shadow: 0 1px 0 color-mix(in srgb, #fff 60%, transparent);
}

.topbar__user {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  color: var(--c-topbar-muted, #475569);
  font-weight: 600;
  flex-wrap: wrap;
}

.topbar__status-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 64%, transparent);
  font-weight: 600;
  line-height: 1.15;
}

.topbar__status-label {
  font-size: 0.72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-topbar-muted, #475569);
  font-weight: 700;
}

.topbar__status-pill strong {
  font-size: 0.95rem;
  color: var(--c-topbar-button-text, #1e293b);
  font-weight: 700;
}

.topbar__status-pill--signed {
  gap: 10px;
}

.topbar__account-link {
  text-decoration: none;
}

.topbar__account-link:hover {
  border-color: var(--c-topbar-button-text, #1e293b);
}

.topbar__status-light {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #16a34a;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.14);
  flex: 0 0 auto;
}

.topbar__status-pill--timer strong {
  min-width: 70px;
  text-align: right;
}

.topbar__logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 64%, transparent);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.15;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.topbar__logout:hover {
  background: var(--c-topbar-button-hover-bg, #cbd5f5);
  color: var(--c-topbar-button-hover-text, #0f172a);
  border-color: color-mix(in srgb, var(--c-topbar-button-text, #1e293b) 38%, var(--c-border, #dbe3ee));
}

body.ui-effects-enabled .topbar__logout {
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

body.ui-effects-enabled .topbar__logout:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.topbar__notifications {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.topbar__notify-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 8px 14px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 64%, transparent);
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  line-height: 1.15;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.topbar__notify-button::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  padding: 3px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      transparent 18%,
      color-mix(in srgb, var(--topbar-notification-ring, #ef4444) 20%, transparent) 30%,
      var(--topbar-notification-ring, #ef4444) 42%,
      #ffffff 48%,
      var(--topbar-notification-ring, #ef4444) 54%,
      color-mix(in srgb, var(--topbar-notification-ring, #ef4444) 20%, transparent) 66%,
      transparent 80%,
      transparent 100%
    );
  background-size: 260% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  filter: drop-shadow(0 0 6px color-mix(in srgb, var(--topbar-notification-ring, #ef4444) 64%, transparent));
}

.topbar__notify-text {
  position: relative;
  z-index: 1;
}

.topbar__notifications.has-new .topbar__notify-button,
.topbar__notifications.has-seen .topbar__notify-button {
  border-color: transparent;
}

.topbar__notifications.has-new .topbar__notify-button::before,
.topbar__notifications.has-seen .topbar__notify-button::before {
  opacity: 1;
  animation: topbarNotificationBorderTravel 2.9s linear infinite;
}

.topbar__notifications.has-new .topbar__notify-button {
  --topbar-notification-ring: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.topbar__notifications.has-seen .topbar__notify-button {
  --topbar-notification-ring: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
}

.topbar__notifications.has-none .topbar__notify-button {
  --topbar-notification-ring: #22c55e;
  border-color: color-mix(in srgb, #22c55e 58%, var(--c-border, #dbe3ee));
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.10);
}

.topbar__notifications.has-none .topbar__notify-button::before {
  opacity: 1;
  animation: topbarNotificationBorderTravel 2.9s linear infinite;
}

@keyframes topbarNotificationBorderTravel {
  from {
    background-position: 140% 50%;
  }
  to {
    background-position: -140% 50%;
  }
}

.topbar__notify-button:hover,
.topbar__notifications.is-open .topbar__notify-button {
  background: var(--c-topbar-button-hover-bg, #cbd5f5);
  color: var(--c-topbar-button-hover-text, #0f172a);
  border-color: color-mix(in srgb, var(--c-topbar-button-text, #1e293b) 38%, var(--c-border, #dbe3ee));
}

body.ui-effects-enabled .topbar__notify-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.topbar__notifications.has-none .topbar__notify-button:hover {
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  border-color: color-mix(in srgb, #22c55e 58%, var(--c-border, #dbe3ee));
  box-shadow: none;
}

body.ui-effects-enabled .topbar__notifications.has-none .topbar__notify-button:hover {
  transform: none;
  box-shadow: none;
}

.topbar__notifications-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 650;
  width: min(420px, calc(100vw - 32px));
  max-height: min(70vh, 560px);
  overflow: auto;
  padding: 12px;
  border: 1px solid color-mix(in srgb, var(--c-notifications-border, var(--c-border, #dbe3ee)) 76%, transparent);
  border-radius: 18px;
  background: var(--c-notifications-bg, var(--c-card-bg, #ffffff));
  color: var(--c-notifications-text, var(--c-text, #0f172a));
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
  scrollbar-color: var(--c-notifications-scrollbar-thumb, var(--c-primary, #2563eb)) var(--c-notifications-scrollbar-track, var(--c-card-bg, #ffffff));
  scrollbar-width: thin;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.topbar__notifications-panel::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.topbar__notifications-panel::-webkit-scrollbar-track {
  background: var(--c-notifications-scrollbar-track, var(--c-card-bg, #ffffff));
  border-radius: 999px;
}

.topbar__notifications-panel::-webkit-scrollbar-thumb {
  background: var(--c-notifications-scrollbar-thumb, var(--c-primary, #2563eb));
  border: 3px solid var(--c-notifications-scrollbar-track, var(--c-card-bg, #ffffff));
  border-radius: 999px;
}

.topbar__notifications-panel::-webkit-scrollbar-thumb:hover {
  background: var(--c-notifications-scrollbar-thumb-hover, var(--c-primary, #1d4ed8));
}

.topbar__notifications.is-open .topbar__notifications-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbar__notifications-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 4px 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-notifications-border, var(--c-border, #dbe3ee)) 70%, transparent);
}

.topbar__notifications-head strong {
  color: var(--c-notifications-text, var(--c-card-title, var(--c-text, #0f172a)));
}

.topbar__notifications-head-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  min-width: 0;
}

.topbar__notifications-clear {
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid color-mix(in srgb, var(--c-primary, #2563eb) 22%, var(--c-border, #dbe3ee));
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary, #2563eb) 8%, var(--c-card-bg, #ffffff));
  color: var(--c-primary, #2563eb);
  cursor: pointer;
  font: inherit;
  font-size: 0.78rem;
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.topbar__notifications-clear:hover,
.topbar__notifications-clear:focus {
  outline: none;
  background: color-mix(in srgb, var(--c-primary, #2563eb) 14%, var(--c-card-bg, #ffffff));
  border-color: color-mix(in srgb, var(--c-primary, #2563eb) 38%, var(--c-border, #dbe3ee));
}

.topbar__notifications-head [data-notification-count] {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  min-height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--c-primary, #2563eb) 14%, var(--c-card-bg, #ffffff));
  color: var(--c-primary, #2563eb);
  font-weight: 800;
}

.topbar__notifications-empty {
  margin: 0;
  padding: 16px 8px 8px;
  color: var(--c-topbar-muted, #475569);
}

.topbar__notifications-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.topbar__notifications-list > li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 32px;
  gap: 6px;
  align-items: stretch;
}

.topbar__notification-item {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 11px 10px;
  border-radius: 14px;
  color: var(--c-notifications-text, var(--c-text, #0f172a));
  text-decoration: none;
  border: 1px solid transparent;
  background: color-mix(in srgb, var(--c-notifications-bg, var(--c-card-bg, #ffffff)) 88%, var(--c-bg, #f8fafc));
  min-width: 0;
}

.topbar__notification-item:hover,
.topbar__notification-item:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-primary, #2563eb) 28%, var(--c-border, #dbe3ee));
  background: color-mix(in srgb, var(--c-primary, #2563eb) 8%, var(--c-card-bg, #ffffff));
}

.topbar__notification-dot {
  width: 9px;
  height: 9px;
  margin-top: 5px;
  border-radius: 999px;
  background: var(--c-primary, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #2563eb) 14%, transparent);
}

.topbar__notification-item--done .topbar__notification-dot,
.topbar__notification-item--visit .topbar__notification-dot {
  background: var(--c-progress-positive, #16a34a);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-progress-positive, #16a34a) 14%, transparent);
}

.topbar__notification-item--call .topbar__notification-dot,
.topbar__notification-item--handoff .topbar__notification-dot {
  background: var(--c-chart-e, #f59e0b);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-chart-e, #f59e0b) 16%, transparent);
}

.topbar__notification-item--chat .topbar__notification-dot {
  background: var(--c-primary, #2563eb);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #2563eb) 16%, transparent);
}

.topbar__notification-dismiss {
  display: inline-grid;
  place-items: center;
  width: 32px;
  min-width: 32px;
  min-height: 100%;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c-notifications-bg, var(--c-card-bg, #ffffff)) 88%, var(--c-bg, #f8fafc));
  color: var(--c-topbar-muted, #475569);
  cursor: pointer;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 900;
  line-height: 1;
}

.topbar__notification-dismiss:hover,
.topbar__notification-dismiss:focus {
  outline: none;
  background: color-mix(in srgb, #ef4444 10%, var(--c-card-bg, #ffffff));
  border-color: color-mix(in srgb, #ef4444 28%, var(--c-border, #dbe3ee));
  color: #b91c1c;
}

.topbar__notification-copy {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.topbar__notification-copy strong,
.topbar__notification-copy span,
.topbar__notification-copy small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topbar__notification-copy strong {
  color: var(--c-notifications-text, var(--c-card-title, var(--c-text, #0f172a)));
  font-size: 0.92rem;
}

.topbar__notification-copy span {
  color: var(--c-notifications-text, var(--c-text, #0f172a));
  font-size: 0.88rem;
  line-height: 1.35;
}

.topbar__notification-copy small {
  color: var(--c-topbar-muted, #475569);
  font-size: 0.78rem;
  line-height: 1.35;
}

.topbar__profile {
  position: relative;
  display: inline-flex;
  flex: 0 0 auto;
}

.topbar__profile-button {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 4px;
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 64%, transparent);
  border-radius: 999px;
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.topbar__profile-button:hover,
.topbar__profile.is-open .topbar__profile-button {
  background: var(--c-topbar-button-hover-bg, #cbd5f5);
  border-color: color-mix(in srgb, var(--c-topbar-button-text, #1e293b) 38%, var(--c-border, #dbe3ee));
}

body.ui-effects-enabled .topbar__profile-button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.topbar__profile-avatar {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  border-radius: 999px;
  background: #1a73e8;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.34), 0 1px 2px rgba(60, 64, 67, 0.22);
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.topbar__profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.topbar__profile-avatar[data-profile-avatar-mode="icon"] img {
  filter: brightness(0) invert(1);
  object-fit: contain;
  padding: 6px;
  box-sizing: border-box;
}

.topbar__profile-avatar--large {
  width: 28px;
  height: 28px;
  font-size: 0.7rem;
  flex: 0 0 auto;
}

.topbar__profile-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 670;
  display: grid;
  gap: 5px;
  width: min(168px, calc(100vw - 32px));
  padding: 6px;
  border: 1px solid color-mix(in srgb, var(--c-notifications-border, var(--c-border, #dbe3ee)) 76%, transparent);
  border-radius: 12px;
  background: var(--c-notifications-bg, var(--c-card-bg, #ffffff));
  color: var(--c-notifications-text, var(--c-text, #0f172a));
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.18);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
}

.topbar__profile.is-open .topbar__profile-panel {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.topbar__profile-summary {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 6px;
  align-items: center;
  padding-bottom: 5px;
  border-bottom: 1px solid color-mix(in srgb, var(--c-notifications-border, var(--c-border, #dbe3ee)) 70%, transparent);
}

.topbar__profile-summary div,
.topbar__profile-row {
  min-width: 0;
}

.topbar__profile-summary strong,
.topbar__profile-summary small,
.topbar__profile-row strong {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topbar__profile-summary strong {
  display: block;
  color: var(--c-notifications-text, var(--c-card-title, var(--c-text, #0f172a)));
  font-size: 0.76rem;
}

.topbar__profile-summary small {
  display: block;
  margin-top: 1px;
  color: var(--c-topbar-muted, #475569);
  font-size: 0.64rem;
}

.topbar__profile-details {
  display: grid;
  gap: 4px;
}

.topbar__profile-row {
  display: grid;
  gap: 2px;
  padding: 4px 6px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c-notifications-bg, var(--c-card-bg, #ffffff)) 88%, var(--c-bg, #f8fafc));
}

.topbar__profile-row span,
.topbar__profile-language-title span {
  color: var(--c-topbar-muted, #475569);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1.2;
  text-transform: uppercase;
}

.topbar__profile-row strong {
  color: var(--c-notifications-text, var(--c-text, #0f172a));
  font-size: 0.7rem;
}

.topbar__profile-action,
.topbar__profile-logout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 26px;
  padding: 4px 7px;
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 68%, transparent);
  border-radius: 8px;
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.72rem;
  line-height: 1.2;
}

.topbar__profile-action svg,
.topbar__profile-logout svg,
.topbar__profile-language-title svg {
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
}

.topbar__profile-action span,
.topbar__profile-logout span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.topbar__profile-action:hover,
.topbar__profile-action:focus,
.topbar__profile-logout:hover,
.topbar__profile-logout:focus {
  outline: none;
  background: var(--c-topbar-button-hover-bg, #cbd5f5);
  color: var(--c-topbar-button-hover-text, #0f172a);
  border-color: color-mix(in srgb, var(--c-topbar-button-text, #1e293b) 38%, var(--c-border, #dbe3ee));
}

.topbar__profile-install {
  width: 100%;
  cursor: pointer;
  font: inherit;
}

.topbar__profile-install[hidden] {
  display: none;
}

.topbar__profile-language {
  display: grid;
  gap: 4px;
}

.topbar__profile-language-title {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.topbar__profile-language .topbar__language-select {
  width: 100%;
  max-width: none;
  min-height: 28px;
  height: 28px;
  padding: 3px 6px;
  font-size: 0.72rem;
}

.topbar__profile-logout {
  margin-top: 1px;
  background: color-mix(in srgb, #ef4444 9%, var(--c-card-bg, #ffffff));
  color: #b91c1c;
}

.page-scope--pos-workflow a:not(:has(img)):not(.device-history-main),
.page-scope--pos-workflow button,
.page-scope--pos-workflow input[type="submit"],
.page-scope--pos-workflow input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid transparent;
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.2;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
  white-space: nowrap;
  max-width: 100%;
}

.page-scope--pos-workflow a:not(:has(img)):not(.device-history-main):hover,
.page-scope--pos-workflow button:hover,
.page-scope--pos-workflow input[type="submit"]:hover,
.page-scope--pos-workflow input[type="button"]:hover {
  background: var(--c-topbar-button-hover-bg, #cbd5f5);
  color: var(--c-topbar-button-hover-text, #0f172a);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12);
}

.page-scope--pos-workflow a:not(:has(img)):not(.device-history-main):disabled,
.page-scope--pos-workflow button:disabled,
.page-scope--pos-workflow input[type="submit"]:disabled,
.page-scope--pos-workflow input[type="button"]:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.page-scope--pos-workflow td a:not(:has(img)),
.page-scope--pos-workflow th a:not(:has(img)),
.page-scope--pos-workflow li a:not(:has(img)),
.page-scope--pos-workflow p a:not(:has(img)),
.page-scope--pos-workflow small a:not(:has(img)),
.page-scope--pos-workflow form > a:not(:has(img)),
.page-scope--pos-workflow form > button,
.page-scope--pos-workflow .actions a:not(:has(img)),
.page-scope--pos-workflow .actions button,
.page-scope--pos-workflow .catalog-actions a:not(:has(img)),
.page-scope--pos-workflow .catalog-actions button {
  margin-right: 8px;
  margin-bottom: 8px;
}

@media (max-width: 720px) {
  .page-scope--pos-workflow a:not(:has(img)):not(.device-history-main),
  .page-scope--pos-workflow button,
  .page-scope--pos-workflow input[type="submit"],
  .page-scope--pos-workflow input[type="button"] {
    min-height: 32px;
    padding: 6px 11px;
    font-size: 0.86rem;
  }
}

.topbar__language {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  box-sizing: border-box;
}

.topbar__language[hidden] {
  display: none;
}

.topbar__language-select {
  width: auto;
  min-width: 118px;
  max-width: 150px;
  min-height: 40px;
  height: 40px;
  margin: 0;
  padding: 8px 16px;
  box-sizing: border-box;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--c-border, #dbe3ee) 64%, transparent);
  background: var(--c-topbar-button-bg, #e2e8f0);
  color: var(--c-topbar-button-text, #1e293b);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.15;
}

.topbar__language-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--c-topbar-button-text, #1e293b) 42%, var(--c-border, #dbe3ee));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-primary, #2563eb) 16%, transparent);
}

.visit-timer-popup,
.call-timer-popup,
.timer-popup {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 420;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: stretch;
  gap: 6px;
  width: min(360px, calc(100vw - 24px));
}

.call-timer-popup {
  bottom: 92px;
}

.device-timer-popup {
  bottom: 164px;
}

.visit-timer-popup__body,
.visit-timer-popup__action,
.visit-timer-popup__toggle,
.call-timer-popup__body,
.call-timer-popup__action,
.call-timer-popup__toggle,
.timer-popup__body,
.timer-popup__action,
.timer-popup__toggle {
  border: 1px solid var(--c-border, rgba(0,0,0,0.12));
  border-radius: 16px;
  background: color-mix(in srgb, var(--c-card-bg, #ffffff) 92%, var(--c-bg, #f8fafc));
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.16);
}

.visit-timer-popup__body,
.call-timer-popup__body,
.timer-popup__body {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 9px 12px;
  color: var(--c-text, #0f172a);
  cursor: pointer;
  overflow: hidden;
}

.visit-timer-popup__toggle,
.call-timer-popup__toggle,
.timer-popup__toggle {
  width: 34px;
  min-width: 34px;
  min-height: 42px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c-text, #0f172a);
  cursor: pointer;
}

.visit-timer-popup__toggle svg,
.call-timer-popup__toggle svg,
.timer-popup__toggle svg {
  width: 14px;
  height: 14px;
}

.visit-timer-popup__pulse,
.call-timer-popup__pulse,
.timer-popup__pulse {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
  background: #ef4444;
  box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.45);
  animation: visit-timer-pulse 1.8s infinite;
}

.timer-popup.is-paused .timer-popup__pulse {
  background: #f59e0b;
  animation: none;
  box-shadow: none;
}

.visit-timer-popup__copy,
.call-timer-popup__copy,
.timer-popup__copy {
  min-width: 0;
  display: grid;
  flex: 1 1 auto;
  gap: 1px;
}

.visit-timer-popup__copy strong,
.call-timer-popup__copy strong,
.timer-popup__copy strong {
  font-size: 0.9rem;
  line-height: 1.2;
}

.visit-timer-popup__copy strong,
.visit-timer-popup__copy span,
.call-timer-popup__copy strong,
.call-timer-popup__copy span,
.timer-popup__copy strong,
.timer-popup__copy span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.visit-timer-popup__copy span,
.call-timer-popup__copy span,
.timer-popup__copy span {
  color: var(--c-topbar-muted, #64748b);
  font-size: 0.76rem;
  line-height: 1.15;
}

.visit-timer-popup__time,
.call-timer-popup__time,
.timer-popup__time {
  flex: 0 0 auto;
  margin-left: 6px;
  font-weight: 800;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  color: var(--c-primary, #1a73e8);
}

.visit-timer-popup__action,
.call-timer-popup__action,
.timer-popup__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  min-height: 42px;
  padding: 0 12px;
  font-weight: 700;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--c-text, #0f172a);
  cursor: pointer;
}

.timer-popup.is-collapsed {
  gap: 0;
  width: 34px;
  grid-template-columns: 34px;
}

.timer-popup.is-collapsed .timer-popup__body,
.timer-popup.is-collapsed .timer-popup__action {
  display: none;
}

body.ui-effects-enabled .timer-popup__body,
body.ui-effects-enabled .timer-popup__action,
body.ui-effects-enabled .timer-popup__toggle {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body.ui-effects-enabled .timer-popup__body:hover,
body.ui-effects-enabled .timer-popup__action:hover,
body.ui-effects-enabled .timer-popup__toggle:hover {
  transform: translateY(-1px);
  box-shadow: 0 22px 42px rgba(15, 23, 42, 0.18);
}

@keyframes visit-timer-pulse {
  0% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
  70% { box-shadow: 0 0 0 12px rgba(239, 68, 68, 0); }
  100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

@media (max-width: 640px) {
  .timer-popup {
    left: 12px;
    right: 12px;
    bottom: 12px;
    width: auto;
    grid-template-columns: 34px minmax(0, 1fr);
  }

  .call-timer-popup {
    bottom: 78px;
  }

  .device-timer-popup {
    bottom: 144px;
  }

  .timer-popup__action {
    grid-column: 2 / 3;
    min-height: 38px;
  }

  .timer-popup__toggle {
    min-height: 38px;
  }
}

@media (max-width: 900px) {
  .page-title {
    font-size: 1.8rem;
  }

  .form-card--responsive {
    padding: 22px;
  }

  .form-grid {
    gap: 16px;
  }

  .toolbar {
    gap: 10px;
  }

  .toolbar__group {
    gap: 8px;
  }

  .topbar {
    justify-content: flex-end;
  }

  .topbar__user {
    width: 100%;
    justify-content: flex-end;
  }

  .topbar__language {
    justify-content: flex-end;
  }

  .topbar__language-select {
    max-width: 200px;
  }
}

@media (max-width: 640px) {
  h1,
  .page-title {
    font-size: 2rem;
  }

  h2 {
    font-size: 1.55rem;
  }

  .form__label {
    font-size: 1.05rem;
  }

  .form__input,
  .form-card--responsive textarea,
  .form-card--responsive select {
    font-size: 1.05rem;
    min-height: 52px;
  }

  .form__hint {
    font-size: 0.9rem;
  }

  .btn {
    min-height: 48px;
    font-size: 1.05rem;
    padding: 0 18px;
    width: auto;
  }

  .btn.btn-small {
    min-height: 44px;
    font-size: 1rem;
  }

  .toolbar {
    flex-wrap: wrap;
    flex-direction: column;
    align-items: stretch;
    margin-top: 18px;
  }

  .toolbar--compact {
    margin-top: 12px;
  }

  .toolbar > * {
    width: 100%;
  }

  .toolbar__group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .toolbar__group--tight {
    gap: 6px;
    align-items: stretch;
  }

  .toolbar__label {
    white-space: normal;
  }

  .toolbar select,
  .toolbar input,
  .toolbar .search-bar,
  .toolbar .form__input,
  .toolbar .form__input--per-page {
    width: 100%;
    min-width: 0;
  }

  .toolbar select {
    min-width: 0 !important;
  }

  .toolbar .button-add-new {
    align-self: center;
    width: auto;
  }

  .toolbar .button-add-new:not(.button-add-new--icon) {
    width: 100%;
  }

  .topbar {
    align-items: stretch;
    gap: 14px;
  }

  .topbar__user {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 12px;
  }

  .topbar__status-pill {
    justify-content: space-between;
    min-height: 42px;
    padding: 10px 14px;
    width: 100%;
  }

  .topbar__notifications {
    width: auto;
  }

  .topbar__notify-button {
    width: auto;
    justify-content: center;
    min-height: 40px;
    padding: 9px 13px;
    font-size: 0.95rem;
  }

  .topbar__notifications-panel {
    box-sizing: border-box;
    right: auto;
    left: 0;
    width: 100%;
    max-height: 62vh;
  }

  .topbar__profile {
    align-self: flex-end;
  }

  .topbar__profile-panel {
    right: 0;
    width: min(168px, calc(100vw - 32px));
    max-height: 72vh;
    overflow: auto;
  }

  .topbar__status-pill span,
  .topbar__status-pill strong {
    font-size: 1.05rem;
  }

  .topbar__logout {
    padding: 12px 18px;
    font-size: 1.05rem;
    width: 100%;
  }

  .topbar__language {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
  }

  .topbar__language-select {
    width: auto;
    max-width: 180px;
    min-height: 40px;
    height: 40px;
    padding: 12px 18px;
    font-size: 1.05rem;
  }
}

@media (max-width: 480px) {
  h1,
  .page-title {
    font-size: 2.1rem;
  }

  h2 {
    font-size: 1.6rem;
  }

  .form-card--responsive {
    padding: 20px;
  }

  .btn {
    min-height: 52px;
    font-size: 1.1rem;
  }

  .toolbar {
    gap: 14px;
  }

  .toolbar__group {
    gap: 10px;
  }

  .topbar__status-pill span,
  .topbar__status-pill strong {
    font-size: 1.1rem;
  }

  .topbar__logout {
    font-size: 1.1rem;
  }
}

.pwf-shell {
  min-width: 0;
  max-width: 100%;
  grid-template-columns: minmax(0, 1fr);
  display: grid;
  gap: 24px;
}

.pwf-card {
  min-width: 0;
  box-sizing: border-box;
  background: var(--c-card-bg, #ffffff);
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 18px;
  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.08);
  color: var(--c-text, #0f172a);
  padding: 20px;
}

.pwf-card__header {
  align-items: flex-start;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 16px;
}

.pwf-card__header h2 {
  color: var(--c-card-title, var(--c-text, #0f172a));
  margin: 0;
}

.pwf-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pwf-grid--cards {
  align-items: start;
}

.pwf-form,
.pwf-search-form {
  display: grid;
  gap: 14px;
}

.pwf-form label,
.pwf-search-form label {
  color: var(--c-form-label, var(--c-text, #0f172a));
  display: grid;
  font-weight: 600;
  gap: 6px;
}

.pwf-fieldset {
  border: 0;
  display: grid;
  gap: 14px;
  margin: 0;
  min-width: 0;
  padding: 0;
}

.pwf-fieldset[disabled] {
  opacity: 0.65;
}

.pwf-helper {
  color: var(--c-topbar-muted, #475569);
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.pwf-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.pwf-button {
  align-items: center;
  background: var(--c-button-primary-bg, var(--c-primary, #1a73e8));
  border: 1px solid transparent;
  border-radius: 12px;
  color: var(--c-button-primary-text, #ffffff);
  cursor: pointer;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  text-decoration: none;
}

.pwf-button:hover {
  filter: brightness(0.96);
}

.pwf-button--secondary {
  background: color-mix(in srgb, var(--c-card-bg, #ffffff) 82%, var(--c-border, #e5e7eb));
  border-color: var(--c-border, #d1d5db);
  color: var(--c-text, #0f172a);
}

.pwf-flash {
  border-radius: 14px;
  padding: 12px 14px;
}

.pwf-flash--success {
  background: color-mix(in srgb, #16a34a 12%, var(--c-card-bg, #ffffff));
  border: 1px solid color-mix(in srgb, #16a34a 40%, var(--c-border, #d1d5db));
  color: #166534;
}

.pwf-flash--error {
  background: color-mix(in srgb, #dc2626 10%, var(--c-card-bg, #ffffff));
  border: 1px solid color-mix(in srgb, #dc2626 36%, var(--c-border, #d1d5db));
  color: #991b1b;
}

.pwf-summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.pwf-summary-card {
  background: color-mix(in srgb, var(--c-card-bg, #ffffff) 88%, var(--c-bg, #f8fafc));
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 14px;
  display: grid;
  gap: 4px;
  padding: 14px;
}

.pwf-summary-card small {
  color: var(--c-topbar-muted, #475569);
}

.pwf-summary-card strong {
  color: var(--c-card-title, var(--c-text, #0f172a));
  font-size: 1rem;
}

.pwf-table-wrap {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
}

.pwf-table {
  border-collapse: collapse;
  min-width: 100%;
  width: 100%;
}

.pwf-table th,
.pwf-table td {
  border-bottom: 1px solid var(--c-border, #e5e7eb);
  padding: 12px 10px;
  text-align: left;
  vertical-align: top;
}

.pwf-table th {
  background: var(--c-table-header-bg, #0f172a);
  color: var(--c-table-header-text, #ffffff);
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.pwf-table td {
  color: var(--c-text, #0f172a);
}

.pwf-table a {
  color: var(--c-link, #1a73e8);
}

.pwf-details {
  display: grid;
  gap: 12px;
  margin: 0;
}

.pwf-details div {
  padding: 12px 14px;
  border: 1px solid var(--c-border, #e5e7eb);
  border-radius: 14px;
  background: var(--c-row-hover-bg, rgba(241, 245, 249, 0.55));
}

.pwf-details dt {
  margin: 0 0 4px;
  font-size: 0.82rem;
  color: var(--c-topbar-muted, #64748b);
}

.pwf-details dd {
  margin: 0;
  color: var(--c-text, #0f172a);
}

.pwf-details a {
  color: var(--c-link, #1a73e8);
  font-weight: 600;
}

@media (max-width: 768px) {
  .pwf-card {
    padding: 16px;
  }

  .pwf-actions,
  .pwf-card__header {
    align-items: stretch;
    flex-direction: column;
  }

  .pwf-button {
    box-sizing: border-box;
    width: 100%;
  }
}

.text-assist {
  display: grid;
  gap: 7px;
  margin-top: 8px;
  width: 100%;
}

.text-assist__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.task-description-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  align-items: center;
  margin-top: 0.75rem;
}

.task-tool-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 38px;
  white-space: nowrap;
}

.task-tool-btn svg {
  width: 18px;
  height: 18px;
}

.task-tool-btn.is-recording {
  background: #fee2e2;
  border-color: #ef4444;
  color: #991b1b;
}

.task-tool-select {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 38px;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--c-border, #dbe3ee);
  border-radius: 0.65rem;
  background: var(--c-card-bg, #fff);
  font-weight: 700;
  color: var(--c-text-muted, #52606d);
}

.task-tool-select span {
  font-size: 0.85rem;
}

.task-tool-select select {
  width: auto;
  min-width: 120px;
  border: 0;
  background: transparent;
  font-weight: 700;
  color: inherit;
}

.task-assist-status {
  min-height: 1.25rem;
  margin-top: 0.35rem;
  color: var(--c-text-muted, #52606d);
  font-size: 0.9rem;
}

.task-grammar-suggestions {
  margin-top: 0.6rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--c-border, #dbe3ee);
  border-radius: 0.85rem;
  background: var(--c-row-hover-bg, #f8fafc);
  color: var(--c-text, #0f172a);
}

.task-grammar-suggestions strong {
  display: block;
  margin-bottom: 0.35rem;
}

.task-grammar-suggestions ul {
  margin: 0.35rem 0 0;
  padding-left: 1.2rem;
}

.task-grammar-suggestions li + li {
  margin-top: 0.25rem;
}

/* An idle timer remains hidden; active timer state is unchanged. */
.timer-popup[hidden]{display:none!important}