/* Buttons and icons -- the SAME file in fshc-homecare-app and
   fshc-homehealth-app, loaded after style.css, so one action looks the same
   everywhere in both products. The convention (2026-10-03), enforced by
   tests/test_button_conventions.py:

     PRIMARY    solid blue   the page's one main step forward: Save, Send,
                             Submit, Sign. At most one per form.
                             A bare <button>, .btn or .btn-primary.
     SECONDARY  outlined     neutral: Cancel, Close, Back, View, Edit,
                             Download, Print, Preview, Reset filters.
                             .btn-secondary
     DANGER     solid red    destructive or irreversible: Delete, Remove,
                             Revoke, Reject, Void, Restore. .btn-danger
     ICON       no chrome    a row's own actions, one icon per action from
                             app/icons.py; red for destructive (.icon-btn-danger),
                             green for approve (.icon-btn-approve).
     EHR        blue pill    talks to an outside clinical system (import,
                             sync, push). A different feature, so it looks
                             different. .btn-ehr

   The base `button` rule in style.css is what makes a bare <button>
   primary; everything here builds on it. */

/* --- primary --------------------------------------------------------------
   .btn-primary was used in templates for months with no rule behind it: a
   <button class="btn-primary"> happened to look right (the bare-button rule),
   and an <a class="btn-primary"> rendered as plain link text -- "Pay now" on
   the patient dashboard among them. */
.btn-primary {
  display: inline-block;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 13px 18px;
  min-height: 44px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
  box-shadow: var(--shadow-xs);
  transition: opacity 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-primary:hover { opacity: 0.95; box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.btn-primary:active { transform: scale(0.98) translateY(0); box-shadow: var(--shadow-xs); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; }

/* A link that is a button keeps the button's ink and loses the underline. */
a.btn, a.btn-primary, a.btn-secondary, a.btn-danger, a.btn-ehr { text-decoration: none; }
a.btn, a.btn-primary, a.btn-danger, a.btn-ehr { color: #fff; }
a.btn-secondary { color: var(--text); }
a.btn:hover, a.btn-primary:hover, a.btn-secondary:hover, a.btn-danger:hover, a.btn-ehr:hover { text-decoration: none; }

/* --- secondary and danger ------------------------------------------------- */
.btn-secondary {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
}
.btn-secondary:hover { background: var(--surface-subtle); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn-danger { background: var(--danger); color: var(--badge-ink); border: none; }
.btn-danger:hover { box-shadow: var(--shadow-sm); }
.btn-small { min-height: 36px; padding: 8px 12px; font-size: 0.85rem; }

/* --- link-look -----------------------------------------------------------
   A control that opens something in place but reads as part of the text --
   a patient's name in a list that opens their record. Not a step forward,
   so not primary; underlined on hover like any link. */
.btn-link {
  display: inline;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-height: 0;
  font: inherit;
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}
.btn-link:hover { text-decoration: underline; opacity: 1; box-shadow: none; transform: none; }

/* --- icons (app/icons.py) -------------------------------------------------
   Sized against 1em so one icon works alone in a 30px row button and inline
   in a status badge; drawn in currentColor, so a danger button's icon is red
   and the theme's ink applies in dark mode with no per-icon rule. */
.ic {
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.22em;
  flex-shrink: 0;
}
/* Icon then label inside a text button: a fixed gap, not a typed space. */
button > .ic:first-child:not(:only-child),
a.btn > .ic:first-child:not(:only-child),
a.btn-primary > .ic:first-child:not(:only-child),
a.btn-secondary > .ic:first-child:not(:only-child),
a.btn-danger > .ic:first-child:not(:only-child),
a.btn-ehr > .ic:first-child:not(:only-child) { margin-right: 0.4em; }

/* --- icon buttons ---------------------------------------------------------
   One look for every row action, <button> or <a>: no chrome, muted ink, a
   tint on hover. Pairing .btn-secondary with .icon-btn no longer draws a box
   -- that pairing was how the same Reset control looked framed in one app
   and bare in the other. */
.icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  min-height: 30px;
  padding: 0;
  font-size: 0.95rem;
  line-height: 1;
  border-radius: 6px;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease), transform 0.1s var(--ease);
}
.icon-btn, .icon-btn.btn-secondary, button.icon-btn {
  background: transparent;
  border: 1px solid transparent;
  box-shadow: none;
  color: var(--muted);
}
.icon-btn > .ic { vertical-align: 0; }
.icon-btn:hover, .icon-btn.btn-secondary:hover, button.icon-btn:hover {
  background: var(--bg-subtle);
  border-color: var(--border);
  color: var(--text);
  opacity: 1;
  box-shadow: none;
  transform: none;
}
/* Also on the few compact custom controls (a calendar rotation's remove, a
   chat row's delete) that keep their own size but take the danger ink. */
.icon-btn-danger, .icon-btn.icon-btn-danger, button.icon-btn.icon-btn-danger { color: var(--danger); }
.icon-btn.icon-btn-danger:hover { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.icon-btn.icon-btn-approve, button.icon-btn.icon-btn-approve { color: var(--state-good); }
.icon-btn.icon-btn-approve:hover { color: var(--state-good); background: color-mix(in srgb, var(--state-good) 12%, transparent); }
.icon-btn:disabled, .icon-btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }

/* --- icon colour families (app/icons.py TONES, 2026-10-04) -----------------
   A row icon takes its family's colour, so the same colour means the same
   kind of thing in both apps: blue documents/communication, teal time,
   amber change/attention, green money/done, purple people/care, rose place,
   red destructive. Only on a plain .icon-btn: a danger or approve button
   keeps its own ink, and an icon inside a text button or badge still
   follows the text. */
:root {
  --ic-blue: #1565c0; --ic-teal: #00838f; --ic-amber: #b26a00; --ic-green: #2e7d32;
  --ic-purple: #7b3fa0; --ic-rose: #c2185b; --ic-red: #c62828;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ic-blue: #6aa8f5; --ic-teal: #4dd0e1; --ic-amber: #f0b44c; --ic-green: #6cc070;
    --ic-purple: #c08ae0; --ic-rose: #f06292; --ic-red: #ef7a72;
  }
}
:root[data-theme="dark"] {
  --ic-blue: #6aa8f5; --ic-teal: #4dd0e1; --ic-amber: #f0b44c; --ic-green: #6cc070;
  --ic-purple: #c08ae0; --ic-rose: #f06292; --ic-red: #ef7a72;
}
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-blue { color: var(--ic-blue); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-teal { color: var(--ic-teal); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-amber { color: var(--ic-amber); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-green { color: var(--ic-green); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-purple { color: var(--ic-purple); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-rose { color: var(--ic-rose); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) .ic-red { color: var(--ic-red); }

/* One colour per icon for the icons that sit side by side on a patient's
   row (Omid, 2026-10-07: "use different colors for icons" ... "keep the
   homecare and home health the same"). Keyed on the icon's own name
   (data-icon, set in app/icons.py), so an icon is the same colour wherever
   it appears, in both apps. Every other icon keeps its tone family above.
   Declared after the tone rules, same specificity, so these win. */
:root {
  --ic-compliance: #e65100;
  --ic-supply: #8e24aa;
  --ic-breakdown: #3949ab;
  --ic-cash: #2e7d32;
  --ic-cost: #827717;
  --ic-claim: #00838f;
  --ic-notice: #795548;
  --ic-evv: #c2185b;
  --ic-journey: #7b3fa0;
  --ic-admission: #b26a00;
  --ic-calendar: #1565c0;
  --ic-edit: #00897b;
  --ic-info: #d81b60;
  --ic-fax: #d84315;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --ic-compliance: #ffab40;
  --ic-supply: #ce93d8;
  --ic-breakdown: #8c9eff;
  --ic-cash: #6cc070;
  --ic-cost: #d4e157;
  --ic-claim: #4dd0e1;
  --ic-notice: #d7a98c;
  --ic-evv: #f06292;
  --ic-journey: #c08ae0;
  --ic-admission: #f0b44c;
  --ic-calendar: #6aa8f5;
  --ic-edit: #4db6ac;
  --ic-info: #f48fb1;
  --ic-fax: #ff8a65;
  }
}
:root[data-theme="dark"] {
  --ic-compliance: #ffab40;
  --ic-supply: #ce93d8;
  --ic-breakdown: #8c9eff;
  --ic-cash: #6cc070;
  --ic-cost: #d4e157;
  --ic-claim: #4dd0e1;
  --ic-notice: #d7a98c;
  --ic-evv: #f06292;
  --ic-journey: #c08ae0;
  --ic-admission: #f0b44c;
  --ic-calendar: #6aa8f5;
  --ic-edit: #4db6ac;
  --ic-info: #f48fb1;
  --ic-fax: #ff8a65;
}
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="compliance"] { color: var(--ic-compliance); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="supply"] { color: var(--ic-supply); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="breakdown"] { color: var(--ic-breakdown); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="cash"] { color: var(--ic-cash); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="cost"] { color: var(--ic-cost); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="claim"] { color: var(--ic-claim); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="notice"] { color: var(--ic-notice); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="evv"] { color: var(--ic-evv); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="journey"] { color: var(--ic-journey); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="admission"] { color: var(--ic-admission); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="calendar"] { color: var(--ic-calendar); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="edit"] { color: var(--ic-edit); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="info"] { color: var(--ic-info); }
.icon-btn:not(.icon-btn-danger):not(.icon-btn-approve) [data-icon="fax"] { color: var(--ic-fax); }

/* --- EHR: talks to an outside clinical system ------------------------------ */
.btn-ehr {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent-gradient);
  color: #fff;
  border: none;
  font-weight: 700;
  border-radius: 999px;
  padding: 10px 20px;
  min-height: 40px;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(13, 71, 161, 0.35);
  transition: box-shadow 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn-ehr:hover { box-shadow: 0 5px 16px rgba(13, 71, 161, 0.45); transform: translateY(-1px); opacity: 1; }
.btn-ehr:active { transform: translateY(0); }
.btn-ehr:disabled, .btn-ehr[disabled] {
  background: var(--surface-hover); color: var(--muted); box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-ehr.btn-small { padding: 7px 14px; min-height: 36px; font-size: 0.85rem; }
.btn-ehr > .ic:first-child { margin-right: 0; }

/* A <details> toggle that carries words ("6 blockers", "What the rejection
   means"). .icon-btn is a fixed 30px square for a lone icon -- text put in
   one wraps a letter per line down the cell. */
.summary-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  padding: 2px 0;
}
.summary-toggle:hover { text-decoration: underline; }