/* REE Medical Nexus Portal: the same look as Secure File Transfer (navy, red rule, white cards). */
:root {
  --navy: #1b365d;
  --red: #d7263d;
  --ink: #1f2933;
  --muted: #5b6878;
  --line: #d9dee5;
  --bg: #f5f7fa;
  --card: #ffffff;
  --hover: #eef3f9;
  --warn-bg: #fff8e1;
  --warn-line: #e8c547;
  --ok: #1e7b34;
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); }

/* Header */
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 12px 24px; background: var(--card); border-bottom: 4px solid var(--red); }
.logo { height: 44px; }
.bar h1 { margin: 0; font-size: 1.3rem; color: var(--navy); flex: 1; }
.who { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.who-name { overflow-wrap: anywhere; }

main { flex: 1; width: 100%; max-width: 1400px; margin: 0 auto; padding: 24px 16px; }
footer { text-align: center; padding: 12px; color: var(--muted); font-size: .85rem; }

/* Building blocks */
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 24px; }
.center { max-width: 480px; margin: 48px auto; text-align: center; }
.narrow { max-width: 720px; margin: 24px auto; }
.center-text { text-align: center; }
h2 { color: var(--navy); font-size: 1.15rem; margin: 0 0 12px; }
h3 { color: var(--navy); font-size: 1rem; margin: 20px 0 8px; }
.button, button { display: inline-block; border: 1px solid var(--navy); border-radius: 6px; padding: 8px 16px; font: inherit; cursor: pointer; background: var(--navy); color: #fff; text-decoration: none; }
.button:hover, button:hover { filter: brightness(1.15); }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid #5b9bd5; outline-offset: 2px; }
button:disabled { opacity: .5; cursor: default; filter: none; }
/* Disabled buttons are gray, never a pale red that reads as an error (review O2). */
button:disabled, button.danger:disabled, button.danger-solid:disabled {
  background: #e6e6e6; color: #666; border-color: #c8c8c8; opacity: 1;
}
button.secondary { background: transparent; color: var(--navy); }
button.link { background: none; border: 0; color: var(--navy); padding: 0; text-decoration: underline; text-align: left; overflow-wrap: anywhere; }
button.small, .small { font-size: .85rem; }
button.danger { background: transparent; color: var(--red); border-color: var(--red); }
button.danger-solid { background: var(--red); border-color: var(--red); color: #fff; }
button.toggle { background: transparent; color: var(--navy); padding: 5px 12px; }
button.toggle[aria-pressed="true"] { background: var(--navy); color: #fff; }
.row-actions { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.row-actions button, .list td button { padding: 5px 10px; font-size: .9rem; white-space: nowrap; }
.list td button.link { padding: 0; font-size: inherit; }
.actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.actions.end { justify-content: flex-end; margin-top: 16px; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.toolbar p { margin: 0; }
.sort { display: flex; align-items: center; gap: 6px; }
.error { color: var(--red); }
.error:empty, .status:empty { display: none; }
.muted { color: var(--muted); }
.pre-line { white-space: pre-line; overflow-wrap: anywhere; }
.notice { padding: 10px 14px; border: 1px solid var(--warn-line); border-left: 4px solid var(--warn-line); border-radius: 6px; background: var(--warn-bg); text-align: left; }
.status { min-height: 1.2em; margin: 8px 0; }
.status.is-error { color: var(--red); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.field, .field-label { display: block; font-size: .9rem; color: var(--muted); margin: 8px 0 4px; }
input[type="text"], input[type="date"], select, textarea { font: inherit; color: var(--ink); padding: 8px 10px; border: 1px solid #b8c1cc; border-radius: 6px; background: var(--card); }
dialog input[type="text"], dialog textarea, .note-compose textarea, .note-edit textarea { width: 100%; }
textarea { resize: vertical; }

/* Workspace: the list, with the open folder's notes beside it (below it on narrow screens) */
.workspace { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start; }
.workspace.no-notes { grid-template-columns: minmax(0, 1fr); }
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 1.05rem; margin-bottom: 8px; }
.crumbs .sep { color: var(--muted); }
.crumbs [aria-current] { font-weight: 600; }
#folder-info { margin: 0 0 12px; }
.drop { border: 2px dashed var(--line); border-radius: 8px; padding: 20px 16px; text-align: center; color: var(--muted); margin-bottom: 12px; background: var(--card); }
.drop.over { border-color: var(--navy); color: var(--navy); background: var(--hover); }
.drop p { margin: 0; }
.drop-title { font-weight: 600; }
.drop-or { margin: 6px 0 10px !important; font-size: .9rem; }
#upload-limit { margin-top: 8px; }
.uploads { list-style: none; padding: 0; margin: 0 0 12px; }
.uploads li { display: grid; grid-template-columns: minmax(0, 1fr) 160px auto; gap: 4px 12px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.uploads li:last-child { border-bottom: 0; }
.uploads progress { width: 100%; }
.upload-name { overflow-wrap: anywhere; }
.upload-state { grid-column: 1 / -1; font-size: .9rem; }

.table-wrap { width: 100%; overflow-x: auto; }
.list { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); }
.list th, .list td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.list th { color: var(--muted); font-weight: 600; font-size: .85rem; white-space: nowrap; }
.list .num { text-align: right; white-space: nowrap; }
.list .check { width: 1%; }
.list td.nowrap { white-space: nowrap; }
.list tbody tr:hover { background: #fafbfc; }
/* A status-feed row's folder opens with its own row highlighted (N49), the list's equivalent of .note.highlight. */
.list tbody tr.highlight { background: var(--warn-bg); transition: background 2s ease; }
.list.log td { font-size: .88rem; }
.list.log td.details { min-width: 220px; }
.state-ready { color: var(--ok); }
.state-blocked, .state-unchecked, .state-not_ready { color: var(--red); font-weight: 600; }
.state-uploading, .state-checking { color: var(--muted); }
.folder-name::before { content: "\1F4C1\00A0"; }
/* Exchange status (N45, N47): informational, so plain navy text, unlike the colored File Status. */
.custom-status { color: var(--navy); overflow-wrap: anywhere; }

/* Notes */
.notes { position: sticky; top: 16px; padding: 16px; max-height: calc(100vh - 32px); overflow-y: auto; }
.notes-list { list-style: none; margin: 0 0 12px; padding: 0; }
.note { padding: 10px 0; border-bottom: 1px solid var(--line); }
.note-head { display: flex; flex-wrap: wrap; gap: 2px 10px; align-items: baseline; font-size: .9rem; overflow-wrap: anywhere; }
.note-text { white-space: pre-line; overflow-wrap: anywhere; margin: 6px 0 0; }
.note-tools { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 6px; }
.note-earlier { list-style: none; margin: 8px 0 0; padding: 0 0 0 12px; border-left: 3px solid var(--line); }
.note-earlier li { margin-bottom: 8px; font-size: .9rem; }
.note-edit { margin-top: 6px; }
.note-feed { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.note-feed-list { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.note-feed-list .note:last-child { border-bottom: none; }
.note-feed-path { display: block; margin-bottom: 2px; font-weight: 600; }
.note.highlight { background: var(--warn-bg); transition: background 2s ease; }
/* Status feed rows (N49): a small chip, not just colored text, so "Status" reads as a tag at a glance while
   scanning a mixed feed - navy-on-hover-tint, both already used elsewhere (.custom-status, .drop.over), so it's
   still the same visual language, not a new one; it's the only thing that tells a status row from a note row. */
.feed-type { display: inline-block; color: var(--navy); background: var(--hover); font-size: .75rem;
  font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: 2px 8px; border-radius: 10px;
  margin-right: 8px; }
.compose-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
.phi-warning { margin-top: 8px; padding: 10px 12px; border: 1px solid var(--warn-line); border-radius: 6px; background: var(--warn-bg); }
.phi-warning p { margin: 0 0 8px; white-space: pre-line; }

/* Admin */
.admin h2 { margin-bottom: 8px; }
.admin-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 8px; }
.admin-head h2 { margin: 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tabs [role="tab"] { background: transparent; color: var(--navy); border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 14px; }
.tabs [role="tab"][aria-selected="true"] { border-bottom-color: var(--red); font-weight: 600; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; color: var(--muted); }
#status-add-label { width: 260px; max-width: 100%; }
.panel > .muted { margin: 8px 0; }

/* Dialogs */
dialog { border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 8px; padding: 24px; max-width: 520px; width: calc(100% - 32px); color: var(--ink); }
dialog::backdrop { background: rgba(27, 54, 93, .45); }
dialog p { margin: 0 0 12px; overflow-wrap: anywhere; }
.item-list { max-height: 40vh; overflow-y: auto; margin: 0 0 12px; padding-left: 20px; overflow-wrap: anywhere; }

/* Narrow screens and phones */
@media (max-width: 1000px) {
  .workspace { grid-template-columns: minmax(0, 1fr); }
  .notes { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .bar { padding: 10px 16px; }
  .logo { height: 36px; }
  main { padding: 16px; }
  .card { padding: 16px; }
  .uploads li { grid-template-columns: minmax(0, 1fr) auto; }
  .uploads progress { grid-column: 1 / -1; grid-row: 2; }
  /* The workspace list becomes one block per row: name first, then the details, then the buttons. */
  #ws-table thead { display: none; }
  #ws-table, #ws-table tbody { display: block; border: 0; background: transparent; }
  #ws-table tbody tr { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
  #ws-table tbody td { display: block; padding: 0; border: 0; font-size: .9rem; }
  #ws-table tbody td.check { order: 0; padding-right: 4px; }
  #ws-table tbody td.name { flex: 1 1 calc(100% - 40px); order: 1; font-size: 1rem; }
  #ws-table tbody td.meta { order: 2; color: var(--muted); }
  #ws-table tbody td.meta:empty { display: none; }
  #ws-table tbody td.row-actions-cell { order: 3; flex: 1 1 100%; }
  #ws-table tbody td.num { text-align: left; }
  #ws-table tbody td[data-label]:not(:empty)::before { content: attr(data-label) ": "; color: var(--muted); }
}