/* ===========================================================
   Shared base styles: reset, typography, buttons, forms, tables.
   Depends on tokens.css being loaded first.
=========================================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-family);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-text);
  background: var(--color-bg);
}

h1 { font-size: var(--font-size-h1); margin: 0 0 var(--space-4); }
h2 { font-size: var(--font-size-h2); margin: 0 0 var(--space-3); }
h3 { font-size: var(--font-size-h3); margin: 0 0 var(--space-2); }

/* Never remove a focus outline without replacing it - this is the one
   rule every interactive element in the app should end up honouring. */
a, button, input, select, textarea, [tabindex] {
  font-family: inherit;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* ---- Skip link ---- */
.skip-link {
  position: absolute;
  left: var(--space-3);
  top: -48px;
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  z-index: 10000;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: var(--space-3);
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: inherit;
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 1;
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}

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

.btn-primary {
  background: var(--color-primary);
  color: var(--color-primary-contrast);
  border-color: var(--color-primary);
}
.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-grey-300);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--color-grey-100);
}

.btn-danger {
  background: var(--color-danger);
  color: #ffffff;
  border-color: var(--color-danger);
}
.btn-danger:hover:not(:disabled) {
  background: #841c19;
  border-color: #841c19;
}

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border-color: transparent;
}
.btn-ghost:hover:not(:disabled) {
  background: var(--color-grey-100);
}

.btn-icon svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--font-size-tiny);
}

/* ---- Forms ---- */
.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.field label {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text);
}

.field input,
.field select,
.field textarea {
  font-family: inherit;
  font-size: var(--font-size-body);
  padding: 10px 12px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
}

.field .field-error {
  color: var(--color-danger);
  font-size: var(--font-size-small);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Tables ---- */
.table-scroll {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

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

.table thead {
  background: var(--color-grey-50);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-tiny);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-small);
  vertical-align: middle;
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover {
  background: var(--color-grey-50);
}

.table tbody tr.clickable {
  cursor: pointer;
}

/* ---- Page heading ---- */
.page-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-5);
}
.page-heading h1 { margin: 0; }

/* ---- Toolbar (search/filter/action row above a list) ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}
.toolbar-spacer { flex: 1; }

/* Bare form controls used directly in a toolbar (not wrapped in
   .field, no label) - a search box, a filter <select>. */
.input, .select {
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  padding: 8px 10px;
  font-family: inherit;
  font-size: var(--font-size-small);
  background: var(--color-surface);
  color: var(--color-text);
}

.search-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.search-input-wrap svg {
  position: absolute;
  left: 9px;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
}
.search-input-wrap input {
  padding-left: 30px;
}

/* ---- Status dot (compact row status, an alternative to .status-badge
   for dense tables - success/warning/neutral only, red is reserved for
   delete confirmations, never a status). ---- */
.status-dot-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.status-dot-success { background: var(--color-success); }
.status-dot-warning { background: var(--color-warning); }
.status-dot-neutral { background: var(--color-neutral); }

/* ---- Pagination bar ---- */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-1);
  font-size: var(--font-size-tiny);
  color: var(--color-text-muted);
}
.pagination-bar button {
  border: 1px solid var(--color-grey-300);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  padding: 5px 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--font-size-tiny);
  color: var(--color-text);
}
.pagination-bar button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Row menu (a table row's "⋯" overflow menu) ---- */
.row-menu {
  position: relative;
  display: inline-block;
}
.row-menu-btn {
  border: 1px solid transparent;
  background: none;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}
.row-menu-btn:hover { background: var(--color-grey-100); color: var(--color-text); }
.row-menu-dropdown {
  position: absolute;
  right: 0;
  top: 34px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  width: 200px;
  padding: var(--space-1);
  display: none;
  z-index: 200;
  text-align: left;
}
.row-menu-dropdown.open { display: block; }
.row-menu-dropdown button,
.row-menu-dropdown a {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-small);
  text-decoration: none;
  cursor: pointer;
  color: var(--color-text);
}
.row-menu-dropdown button:hover,
.row-menu-dropdown a:hover { background: var(--color-grey-100); }
.row-menu-dropdown button.danger { color: var(--color-danger); }
.row-menu-dropdown hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-1) 0;
}
.row-menu-status-picker {
  padding: 8px 10px;
}
.row-menu-status-picker select {
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-small);
}

/* ---- Status badges ----
   Deliberately not named .badge - header.css already uses that class
   for the notification-count bubble, and loading both stylesheets on
   the same page would make one silently override the other. */
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-size-small);
  font-weight: 600;
}

.status-badge-success { background: var(--color-success-bg); color: var(--color-success); }
.status-badge-warning { background: var(--color-warning-bg); color: var(--color-warning); }
.status-badge-danger  { background: var(--color-danger-bg);  color: var(--color-danger); }
.status-badge-info    { background: var(--color-info-bg);    color: var(--color-info); }
.status-badge-neutral { background: var(--color-grey-100);   color: var(--color-text-muted); }

/* ---- Tabs ----
   Shared by every tabbed page (Client Profile|Services, Service
   Details|Statement|Notes, Local Councils Details|Service Fees). Markup:
   a <div class="tabs"> of <button class="tab-btn"> siblings, followed by
   one <div class="tab-panel"> per tab - .active toggled on both by the
   page's own JS (not a shared behaviour script, since each tabbed page
   also needs to sync its own tab state to the URL). */
.tabs {
  display: flex;
  gap: var(--space-1);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.tab-btn {
  border: none;
  background: none;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: var(--font-size-body);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab-btn:hover { color: var(--color-text); }
.tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ---- Detail panel ----
   Shared by every read-only "detail view" page (Client Profile, Local
   Council Details, and similar). A .panel groups related fields under
   a heading; .detail-row is one label/value pair inside it. */
.panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.panel + .panel { margin-top: var(--space-5); }

.panel-header {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-weight: 700;
  font-size: var(--font-size-small);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.detail-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-small);
}
.detail-row:last-child { border-bottom: none; }
.detail-row .label { color: var(--color-text-muted); }
.detail-row .value { font-weight: 600; text-align: right; }

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}
.tag {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: var(--font-size-tiny);
  color: var(--color-text);
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.activity-list li {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-small);
}
.activity-list li:last-child { border-bottom: none; }
.activity-list .when { color: var(--color-text-muted); font-size: var(--font-size-tiny); white-space: nowrap; }

/* ---- Two-column form grid ----
   Shared by every "add/edit" form (Add Client, Add Service, Client
   Profile edit mode). Wraps .field (base.css's own form-field
   component, already used stand-alone elsewhere), collapsing to one
   column on narrow screens. */
.form-grid-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-5);
}
@media (max-width: 760px) {
  .form-grid-2col { grid-template-columns: 1fr; }
}
.form-grid-2col .field { margin-bottom: 0; }
.field-span-2 { grid-column: 1 / -1; }

.section-title {
  font-size: var(--font-size-small);
  font-weight: 700;
  margin: var(--space-5) 0 var(--space-3);
  color: var(--color-text);
}
.section-title:first-child { margin-top: 0; }

.field .hint {
  display: block;
  font-size: var(--font-size-tiny);
  color: var(--color-text-muted);
  margin-top: 4px;
}
.field input.invalid { border-color: var(--color-danger); }

.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

/* A left-aligned row of buttons below a read-only .panel (e.g. Council
   Details' Disable/Delete) - .modal-actions is right-aligned, for a
   dialog footer, which this isn't. */
.quick-actions {
  display: flex;
  gap: var(--space-3);
}

/* ---- Toggle switch ----
   A boolean on/off control (Add User's Enabled switch) - toggled by
   JS adding/removing the .on class, styled here only. */
.toggle-switch {
  position: relative;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--color-grey-300);
  border: none;
  cursor: pointer;
  flex: none;
  padding: 0;
}
.toggle-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: var(--shadow-sm);
  transition: left 0.12s ease;
}
.toggle-switch.on { background: var(--color-success); }
.toggle-switch.on::after { left: 18px; }

/* ---- Permission matrix table ----
   Module x View/Add/Edit/Delete checkbox grid (Add User's Permissions
   panel) - combined with .table (inside .table-scroll) for its base
   look, this just centers the checkbox columns instead of
   left-aligning text. */
.perm-table th,
.perm-table td { text-align: center; }
.perm-table th:first-child,
.perm-table td:first-child { text-align: left; }
.perm-table input[type="checkbox"] { width: 15px; height: 15px; }

/* ---- Optional fields ----
   Shared editable name/value list (utils/optionalfield.js), used by
   Add Client, Add Service and the Client Profile edit form. */
.optional-field-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.optional-field {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}
.optional-field .opt-key,
.optional-field .opt-value {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-small);
  background: var(--color-surface);
  color: var(--color-text);
}
.optional-field .remove-optional-btn {
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-h3);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
}
.optional-field .remove-optional-btn:hover { color: var(--color-danger); }
.add-optional-field-btn {
  align-self: flex-start;
  border: 1px solid var(--color-grey-300);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
}
.add-optional-field-btn:hover { background: var(--color-grey-100); }

/* View-only rendering (Client Profile view tab) - "Label: Value" rows,
   no inputs. */
.optional-field-container.view-only .optional-field.static {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.optional-field-container.view-only .optional-field.static label {
  color: var(--color-text-muted);
  font-weight: 400;
}

/* ---- Disability checkbox tree (utils/disability.js) ----
   Shared by Add Client and the Client Profile edit form. */
.disability-wrapper {
  grid-column: 1 / -1;
}
.disability-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-grey-50);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}
.disability-section label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 400;
}
.disability-section input[type="checkbox"] {
  transform: scale(1.1);
  cursor: pointer;
}
.disability-sub {
  margin-left: 25px;
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-border);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
}
.disability-sub label {
  font-weight: 400;
  font-size: var(--font-size-small);
}

/* ---- Service dynamic fields (Services/utils/serviceFields.js) ----
   Shared by Add Service and the Client/Service pages' service edit
   forms - a label+input row, and a repeatable "+ Add X" list of
   carer/agency/insurance/PA names. */
.form-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.form-row label {
  font-size: var(--font-size-small);
  font-weight: 600;
  color: var(--color-text);
}
.form-row input,
.form-row select {
  padding: 10px 12px;
  border: 1px solid var(--color-grey-300);
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--font-size-body);
  background: var(--color-surface);
  color: var(--color-text);
}
.form-row input[readonly] {
  background: var(--color-grey-100);
}

.dynamic-group .input-row {
  display: flex;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-2);
}
.dynamic-group .input-row input { flex: 1; }
.dynamic-group .input-row button {
  border: none;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: var(--font-size-body);
  padding: var(--space-1);
}
.dynamic-group .input-row button:hover { color: var(--color-danger); }

.add-btn {
  border: 1px solid var(--color-grey-300);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: var(--radius-sm);
  padding: 8px 12px;
  font-family: inherit;
  font-size: var(--font-size-small);
  cursor: pointer;
}
.add-btn:hover { background: var(--color-grey-100); }