/* Onnestra prototype — shared layout & component styles */

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Inter", var(--font-sans);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

/* ============================================================
   LOGO / DIAMOND MARK
   ============================================================ */

.logomark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.logomark svg {
  display: block;
}

.brand-lockup {
  display: block;
}

.brand-lockup-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.brand-lockup .brand-name {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--text-on-dark);
  line-height: 1;
  letter-spacing: -0.01em;
}

.brand-lockup .brand-descriptor {
  font-size: 0.75rem;
  font-weight: 500;
  color: #9aa5b1;
  margin-top: 4px;
  margin-left: 38px;
}

/* ============================================================
   APP SHELL — dark sidebar + pale content well
   ============================================================ */

.app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-content);
}

.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--bg-dark);
  display: flex;
  flex-direction: column;
  padding: var(--space-6) var(--space-5);
  position: sticky;
  top: 0;
  height: 100vh;
}

.sidebar-header {
  padding-bottom: var(--space-8);
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-top: var(--space-4);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  color: var(--text-on-dark-muted);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-item svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.85;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-on-dark);
}

.nav-item.active {
  background: rgba(47, 94, 255, 0.14);
  color: var(--accent-blue-light);
}

.sidebar-footer {
  margin-top: auto;
  padding-top: var(--space-8);
}

.sidebar-tagline {
  font-size: 0.82rem;
  color: var(--text-on-dark);
  line-height: 1.4;
  white-space: nowrap;
}

.sidebar-tagline .accent {
  color: var(--accent-blue-light);
}

.sidebar-trail-word {
  position: relative;
  display: inline-block;
}

.sidebar-swoosh-img {
  position: absolute;
  right: -4%;
  top: 100%;
  width: auto;
  height: 16px;
  margin-top: -2px;
}


/* Main content column */
.content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-8);
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  color: var(--text-primary);
  font-weight: 600;
  font-size: var(--text-base);
}

.topbar-left svg {
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.topbar-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: var(--bg-content);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  width: 340px;
  max-width: 100%;
  color: var(--text-muted);
}

.topbar-search svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.topbar-search input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: var(--text-sm);
  color: var(--text-primary);
  width: 100%;
}

.topbar-search input::placeholder {
  color: var(--text-placeholder);
}

.list-search {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.list-search .topbar-search {
  width: 100%;
  background: var(--bg-white);
}

.topbar-bell {
  position: relative;
  color: var(--text-muted);
  display: flex;
}

.topbar-bell svg {
  width: 20px;
  height: 20px;
}

.topbar-bell .dot {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent-blue);
  border: 2px solid var(--bg-white);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-blue);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xs);
  font-weight: 700;
}

.user-chip svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
}

.signout-link {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
}

.signout-link:hover {
  color: var(--text-primary);
  text-decoration: underline;
}

.page-body {
  padding: var(--space-10) var(--space-10);
  max-width: 1520px;
  width: 100%;
  margin: 0 auto;
}

.page-header {
  margin-bottom: var(--space-8);
}

.page-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.page-header h1 {
  font-size: var(--text-3xl);
  font-weight: 800;
  margin: 0 0 var(--space-2) 0;
  letter-spacing: -0.01em;
}

.page-header p {
  font-size: var(--text-base);
  color: var(--text-muted);
  margin: 0;
}

/* ============================================================
   CARD
   ============================================================ */

.card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
}

/* ============================================================
   STAT TILES
   ============================================================ */

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-5);
  margin-bottom: var(--space-8);
}

.stat-tile {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  padding: var(--space-5);
}

.stat-tile-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.stat-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-icon svg {
  width: 19px;
  height: 19px;
}

.stat-tile.amber .stat-icon { background: rgba(226, 144, 12, 0.75); color: #fff; }
.stat-tile.red .stat-icon   { background: rgba(229, 72, 77, 0.75);  color: #fff; }
.stat-tile.blue .stat-icon  { background: #e5e7eb; color: #6b7280; }
.stat-tile.green .stat-icon { background: #e5e7eb; color: #9aa5b1; }

.stat-tile-label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
}

.stat-tile-number {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: var(--space-2);
}

.stat-tile-sub {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* ============================================================
   OPERATIONS LAYOUT — main content + right-side To Do List panel
   ============================================================ */

.ops-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-6);
  align-items: start;
}

.ops-main {
  min-width: 0;
}

@media (max-width: 1180px) {
  .ops-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   TO DO LIST PANEL
   ============================================================ */

.todo-panel {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
  position: sticky;
  top: var(--space-6);
}

.todo-header {
  background: var(--accent-blue-vivid);
  color: #fff;
  padding: var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.todo-header-text {
  min-width: 0;
}

.todo-header-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: var(--space-2);
}

.todo-header-next-label {
  font-size: 0.7rem;
  opacity: 0.75;
  margin-bottom: 2px;
}

.todo-header-next-task {
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-header-due {
  font-size: 0.72rem;
  opacity: 0.75;
  margin-top: 2px;
}

.todo-ring {
  flex-shrink: 0;
  position: relative;
  width: 52px;
  height: 52px;
}

.todo-ring svg { transform: rotate(-90deg); }
.todo-ring-track { stroke: rgba(255,255,255,0.25); }
.todo-ring-progress { stroke: #fff; stroke-linecap: round; transition: stroke-dashoffset 0.3s; }

.todo-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 700;
}

.todo-list {
  display: flex;
  flex-direction: column;
  max-height: 420px;
  overflow-y: auto;
}

.todo-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid transparent;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.todo-item:last-child { border-bottom: none; }
.todo-item:hover { background: #f8f9fb; }

.todo-item.is-overdue {
  border-left-color: var(--status-red-icon);
  background: rgba(229, 72, 77, 0.05);
}

.todo-item.is-overdue:hover { background: rgba(229, 72, 77, 0.09); }

.todo-item.is-overdue .todo-item-meta {
  color: var(--status-red-icon);
  font-weight: 700;
}

.todo-item-body {
  flex: 1;
  min-width: 0;
}

.todo-item-title {
  font-size: 0.85rem;
  font-weight: 500;
  color: #3d5a99;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.todo-item:hover .todo-item-title {
  color: var(--accent-blue-hover);
  text-decoration: underline;
}

.todo-item-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.todo-item-arrow {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform 0.12s, color 0.12s;
}

.todo-item:hover .todo-item-arrow {
  color: var(--accent-blue);
  transform: translateX(2px);
}

/* ============================================================
   TABLE
   ============================================================ */

.table-card {
  background: var(--bg-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--border-light);
  overflow: hidden;
}

.table-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.table-toolbar-title {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.table-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-5);
}

.btn-filter {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  background: transparent;
  border: 1px solid var(--border-light-strong);
  color: var(--text-secondary);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
}

.btn-filter svg {
  width: 14px;
  height: 14px;
}

.link-view-all {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--accent-blue);
}

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

.requests-table thead th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 500;
  color: #b3b9c4;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: var(--space-3) var(--space-6);
  border-bottom: 1px solid var(--border-light);
}

.requests-table tbody tr {
  border-bottom: 1px solid var(--border-light);
}

.requests-table tbody tr:nth-child(even) {
  background: rgba(47, 94, 255, 0.025);
}

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

.requests-table td {
  padding: var(--space-4) var(--space-6);
  font-size: var(--text-sm);
  vertical-align: middle;
}

.requests-table td.title-cell {
  font-weight: 600;
  color: var(--text-primary);
}

.title-cell a {
  color: #3d5a99;
  font-weight: 500;
}

.title-cell a:hover {
  color: var(--accent-blue-hover);
  text-decoration: underline;
}

.owner-cell {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.owner-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent-blue-subtle);
  color: #3d5a99;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

.meta-cell {
  color: var(--text-muted);
  white-space: nowrap;
}

/* ============================================================
   STATUS PILL
   ============================================================ */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
  color: var(--text-secondary);
}

.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.status-pill.amber::before { background: var(--status-amber-icon); }
.status-pill.red::before   { background: var(--status-red-icon); }
.status-pill.blue::before  { background: var(--status-blue-icon); }
.status-pill.green::before { background: var(--status-green-icon); }

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.btn-view {
  background: var(--bg-white);
  border: 1px solid var(--border-light-strong);
  color: var(--text-secondary);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}

.btn-view:hover {
  border-color: var(--accent-blue);
  color: var(--accent-blue);
}

.btn-primary {
  background: var(--accent-blue);
  color: #fff;
}

.btn-primary:hover {
  background: var(--accent-blue-hover);
}

.btn-secondary {
  background: var(--bg-white);
  border: 1px solid var(--border-light-strong);
  color: var(--text-secondary);
}

.btn-secondary:hover {
  border-color: var(--border-light-strong);
  background: #fafbfc;
}

.btn-approve {
  background: var(--action-approve);
  color: #fff;
}
.btn-approve:hover { background: var(--action-approve-hover); }

.btn-changes {
  background: var(--action-changes-bg);
  border-color: #fcd9a4;
  color: var(--action-changes);
}

.btn-reject {
  background: #fff;
  border-color: #f3c2c2;
  color: var(--action-reject);
}

.btn-reject:hover { background: var(--action-reject-bg); }

.btn.confirmed {
  opacity: 0.6;
  pointer-events: none;
}

.btn-full {
  width: 100%;
}

/* ============================================================
   FORM FIELDS
   ============================================================ */

.form-card {
  padding: var(--space-8);
}

.field-row {
  margin-bottom: var(--space-6);
}

.field-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: var(--space-2);
}

.field-input,
.field-textarea,
.field-select {
  width: 100%;
  border: 1px solid var(--border-light-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  font-size: var(--text-base);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--bg-white);
}

.field-input::placeholder,
.field-textarea::placeholder {
  color: var(--text-placeholder);
}

.field-textarea {
  min-height: 110px;
  resize: vertical;
}

.field-help {
  font-size: var(--text-xs);
  color: var(--text-muted);
  margin-top: var(--space-2);
}

.field-select-wrap {
  position: relative;
}

.field-select-wrap select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: var(--space-10);
}

.field-select-wrap svg {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.owner-select-display {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border: 1px solid var(--border-light-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-base);
  color: var(--text-primary);
  cursor: pointer;
}

.priority-group {
  display: flex;
  gap: var(--space-3);
}

.priority-option {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 1px solid var(--border-light-strong);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  background: var(--bg-white);
}

.priority-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.priority-option.low .priority-dot { background: var(--priority-low); }
.priority-option.medium .priority-dot { background: var(--priority-medium); }
.priority-option.high .priority-dot { background: var(--priority-high); }

.priority-option.selected {
  border-color: var(--accent-blue);
  background: var(--accent-blue-subtle);
  color: var(--accent-blue);
  box-shadow: 0 0 0 1px var(--accent-blue) inset;
}

.date-input-wrap {
  position: relative;
  max-width: 320px;
}

.date-input-wrap svg {
  position: absolute;
  right: var(--space-4);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

.form-footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* ============================================================
   REQUEST DETAILS / APPROVAL WORKFLOW
   ============================================================ */

.detail-header-card {
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
}

.detail-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  margin: 0 0 var(--space-3) 0;
}

.detail-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border-light);
}

.detail-meta-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: var(--space-2);
}

.detail-meta-value {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.priority-inline-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.section-card {
  padding: var(--space-6) var(--space-8);
  margin-bottom: var(--space-6);
}

.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin: 0 0 var(--space-5) 0;
}

.decision-trail {
  display: flex;
  flex-direction: column;
}

.trail-step {
  display: flex;
  gap: var(--space-4);
  position: relative;
}

.trail-step:not(:last-child) {
  padding-bottom: var(--space-6);
}

.trail-step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 40px;
  bottom: 0;
  width: 2px;
  background: var(--border-light);
}

.trail-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid #3d5a99;
  color: #3d5a99;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--bg-white);
  z-index: 1;
}

.trail-icon svg {
  width: 18px;
  height: 18px;
}

.trail-content {
  padding-top: var(--space-1);
}

.trail-step-title {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--text-primary);
}

.trail-step-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  margin-top: 2px;
}

.trail-step-reason {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  font-style: italic;
  margin-top: var(--space-2);
}

.doc-list {
  display: flex;
  flex-direction: column;
}

.doc-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--border-light);
}

.doc-row:last-child {
  border-bottom: none;
}

.doc-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  font-weight: 800;
  color: #fff;
  flex-shrink: 0;
}

.doc-icon.pdf { background: #e2574c; }
.doc-icon.xlsx { background: #1d9d5e; }

.doc-name {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-primary);
}

.doc-meta {
  font-size: var(--text-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.approval-textarea {
  margin-bottom: var(--space-5);
}

.approval-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-light);
}

.confirm-banner {
  display: none;
  align-items: center;
  gap: var(--space-2);
  background: var(--status-green-bg);
  color: var(--status-green-text);
  font-size: var(--text-sm);
  font-weight: 600;
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-5);
}

.confirm-banner.visible {
  display: flex;
}

.confirm-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ============================================================
   LOGIN PAGE
   Refined for visual fidelity against the approved mockup —
   scoped entirely under .login-shell so it cannot affect the
   other 4 screens.
   ============================================================ */

.login-shell {
  min-height: 100vh;
  display: flex;
  background: #051433; /* exact background color of the saved brand-mark asset — matched so the embedded PNG/JPG blend seamlessly with no visible box */
  position: relative;
  overflow: hidden;
  font-family: "Inter", var(--font-sans);
}

.login-shell .brand-lockup {
  display: block;
}

.login-shell .brand-lockup-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.login-shell .brand-name {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--text-on-dark);
}

.login-shell .brand-descriptor {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  color: #9aa5b1;
  margin-left: 62px;
  margin-top: 5px;
}

.login-left {
  flex: 1.15;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 56px 5vw 48px 7vw;
  position: relative;
  z-index: 1;
  overflow: visible;
}

/* Anchor from the top instead of true centering — pure centering can push the
   logo above y:0 (clipped by .login-shell's overflow:hidden) on shorter
   browser windows. Top-anchoring guarantees the logo always has clearance. */
@media (max-height: 860px) {
  .login-left {
    justify-content: flex-start;
  }
}

.login-left > * {
  position: relative;
  z-index: 1;
}

.login-headline {
  font-size: 3.75rem;
  font-weight: 800;
  color: var(--text-on-dark);
  line-height: 1.04;
  letter-spacing: -0.025em;
  margin: var(--space-8) 0 0 0;
}

.login-headline .accent {
  color: var(--accent-blue-vivid);
  text-shadow: 0 0 28px rgba(30, 99, 255, 0.45);
}

.login-accent-tick {
  width: 52px;
  height: 4px;
  border-radius: var(--radius-full);
  background: var(--accent-blue-vivid);
  margin: var(--space-5) 0 var(--space-6) 0;
  box-shadow: 0 0 12px rgba(30, 99, 255, 0.7);
}

.login-subtext {
  font-size: 1.2rem;
  font-weight: 400;
  color: #c3cad4;
  line-height: 1.55;
  max-width: 520px;
  margin-bottom: var(--space-10);
}

.login-principles {
  display: flex;
  gap: 0;
}

.login-principle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0 36px;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
}

.login-principle:first-child {
  padding-left: 0;
  border-left: none;
}

.login-principle svg {
  width: 32px;
  height: 32px;
  color: var(--accent-blue-light);
  stroke-width: 1.7;
}

.login-principle span {
  font-size: 1.1rem;
  color: var(--text-on-dark);
  font-weight: 500;
  line-height: 1.3;
}

.login-diamond-wrap {
  position: absolute;
  right: -12%;
  top: 50%;
  transform: translateY(-50%);
  width: 62%;
  max-width: 560px;
  z-index: -1;
  opacity: 1;
  pointer-events: none;
}

.login-right {
  flex: 0.85;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-12);
  position: relative;
  z-index: 1;
}

.auth-card {
  background: #0d1220;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 22px;
  /* the -60px/110px/-10px shadow bleeds blue glow onto the card's left edge,
     from the diamond mark tucked behind it, so the two read as one composition
     rather than separate elements */
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.4), -60px 0 110px -10px rgba(47, 94, 255, 0.45);
  padding: 44px 46px 40px 46px;
  width: 100%;
  max-width: 500px;
  overflow: hidden;
}

.auth-card h2 {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-on-dark);
  margin: 0 0 var(--space-2) 0;
}

.auth-card > p {
  font-size: 0.94rem;
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-8) 0;
}

.auth-field {
  margin-bottom: var(--space-5);
}

.auth-field label {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  color: #d3d8e0;
  margin-bottom: var(--space-2);
}

.auth-input-wrap {
  position: relative;
}

.auth-input-wrap input {
  width: 100%;
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 11px;
  padding: 14px var(--space-10) 14px var(--space-10);
  font-size: 0.95rem;
  color: var(--text-on-dark);
  font-family: inherit;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.auth-input-wrap input:focus {
  outline: none;
  border-color: rgba(76, 125, 255, 0.55);
  background: rgba(255, 255, 255, 0.045);
}

.auth-input-wrap input::placeholder {
  color: #5e6673;
}

.auth-input-wrap svg.leading-icon {
  position: absolute;
  left: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #7b8492;
}

.auth-input-wrap svg.trailing-icon {
  position: absolute;
  right: var(--space-3);
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: #7b8492;
  cursor: pointer;
}

.auth-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-6);
  font-size: 0.87rem;
}

.auth-row label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: #c3cad4;
}

.auth-row input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--accent-blue);
}

.auth-row a {
  color: var(--accent-blue-light);
  font-weight: 600;
}

.auth-card .btn-primary {
  height: 52px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 8px 22px rgba(47, 94, 255, 0.28);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin: var(--space-6) 0;
  color: #5e6673;
  font-size: 0.85rem;
}

.auth-divider::before,
.auth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.1);
}

.btn-microsoft {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-on-dark);
  font-weight: 600;
  font-size: 0.95rem;
  height: 50px;
  border-radius: 11px;
  transition: background 0.15s ease;
}

.btn-microsoft:hover {
  background: rgba(255, 255, 255, 0.055);
}

.auth-footer-link {
  text-align: center;
  margin-top: var(--space-6);
  font-size: 0.87rem;
  color: #9aa5b1;
}

.auth-footer-link a {
  color: var(--accent-blue-light);
  font-weight: 600;
}

.login-tagline-footer {
  position: absolute;
  bottom: var(--space-10);
  left: 0;
  right: 0;
  text-align: center;
  font-size: 1.85rem;
  font-weight: 400;
  color: var(--text-on-dark);
  z-index: 2;
  letter-spacing: -0.005em;
}

.login-tagline-footer .accent {
  color: var(--accent-blue-vivid);
}

.tagline-inner {
  position: relative;
  display: inline-block;
}

.tagline-swoosh-img {
  position: absolute;
  right: -1%;
  top: 100%;
  width: auto;
  height: 40px;
  margin-top: -4px;
}

/* Responsive guard for common desktop widths */
@media (max-width: 1360px) {
  .login-headline {
    font-size: 3rem;
  }
  .login-diamond-wrap {
    width: 40%;
  }
}

@media (max-width: 1280px) {
  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .detail-meta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   COMING SOON — placeholder for nav destinations not yet built
   (e.g. Reports / Operational Governance Digest, a V2 roadmap
   item — see context/product-roadmap.md). Deliberately plain so
   it never reads as a finished feature sitting next to the real
   MVP screens.
   ============================================================ */

.coming-soon-card {
  padding: var(--space-16) var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 560px;
  margin: 0 auto;
}

.coming-soon-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  background: var(--accent-blue-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-blue);
  margin-bottom: var(--space-6);
}

.coming-soon-icon svg {
  width: 26px;
  height: 26px;
}

.coming-soon-badge {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent-blue);
  background: var(--accent-blue-subtle);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-4);
}

.coming-soon-title {
  font-size: var(--text-2xl);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin: 0 0 var(--space-3) 0;
  color: var(--text-primary);
}

.coming-soon-summary {
  font-size: var(--text-base);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ============================================================
   PREVIEW BANNER — deployed-website-only. Not used by this
   standalone prototype (no .preview-banner element exists in
   these files), but kept here too — not just in
   outputs/onnestra-website/preview/styles/main.css — so that a
   future full-file copy from this master into that deployed
   copy can't silently delete it again (has happened twice).
   Sits on the app's light content palette, not the dark
   marketing-hero palette, so it reads as product chrome rather
   than a warning interstitial.
   ============================================================ */
.preview-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 34px;
  padding: 0 var(--space-4);
  background: var(--accent-blue-subtle);
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: 0.8rem;
  text-align: center;
}

.preview-banner strong {
  color: var(--text-primary);
  font-weight: 700;
}

.preview-banner-sep {
  color: var(--border-light-strong);
}

.preview-banner a {
  color: var(--accent-blue);
  font-weight: 600;
}

.preview-banner a:hover {
  text-decoration: underline;
}

/* ============================================================
   ALL MOBILE-SPECIFIC RULES (≤768px), CONSOLIDATED AT END OF FILE
   ------------------------------------------------------------
   Every @media(max-width:768px) block in this stylesheet lives
   here, in one place, at the very end — on purpose. CSS resolves
   equal-specificity conflicts on the same property by SOURCE
   ORDER, not by which rule's condition is "more specific" or
   "more true" — a media query being active does NOT give it
   priority over a later unconditional rule targeting the same
   property. Early in this file's history, a mobile override
   (.topbar-search { display:none }) was inserted near the top of
   the file and got silently defeated by an unconditional
   .topbar-search { display:flex } rule defined further down —
   confirmed live via getComputedStyle() returning "flex" at
   375px width, i.e. the search box was never actually hidden on
   phones despite the override existing. Keeping every mobile
   block down here guarantees it always wins the cascade,
   regardless of where any current or future desktop/base rule
   for the same property is placed above. The five blocks below
   keep their original relative order and their original internal
   comments/attribution; nothing about their selectors or
   declarations changed — only their position in the file did.
   ============================================================ */

/* ============================================================
   MOBILE PRESENTATION (≤768px)
   Per plans/2026-09-10-mobile-purpose-built-experience.md —
   replaces the superseded hamburger-into-desktop-sidebar approach.
   Below this one breakpoint, the desktop sidebar and topbar search
   are hidden and replaced by a purpose-built bottom nav. Every
   mobile-specific element lives under a new `.m-*` class namespace
   that never reuses an existing desktop id/class, so nothing above
   this block is ever touched by these rules — see the plan's
   "Duplicate-ID / DOM-Collision Prevention" section.
   ============================================================ */

.m-bottom-nav,
.m-bottom-nav-spacer,
.m-more-sheet,
.m-more-overlay,
.m-topbar-brand {
  display: none;
}

@media (max-width: 768px) {
  .sidebar,
  .topbar-left svg {
    display: none;
  }

  /* Desktop's topbar Sign Out link overflows/gets clipped off-screen on a
     narrow topbar (bell + avatar + name + this link all competing for
     ~375px) — and it's redundant on mobile anyway, since Sign Out already
     lives in the "More" sheet (#m-signout-link). Hide it here rather than
     trying to fit it twice. */
  .signout-link {
    display: none;
  }

  /* MOBILE HEADER — FINAL UI REFINEMENT (ChatGPT review, 2026-09-10).
     A clean application header, not a compressed desktop topbar: swap
     the page-title text for a compact Onnestra brand mark, drop the
     user's full name and the desktop "expand" chevron next to it, but
     keep the things a mobile app header actually needs — brand
     identity, search, notifications, and the avatar as the entry point
     into account/profile behavior. The desktop #topbar-title/#user-name
     elements and .topbar-search input aren't duplicated for mobile —
     they're the same elements, just re-presented at this breakpoint. */
  #topbar-title,
  #user-name,
  .user-chip svg {
    display: none;
  }

  /* The dial icon and wordmark PNGs are both white/light marks on a
     transparent background — meant to sit on the app's dark navy
     (visible on .sidebar and the whole login screen). Dropped directly
     onto this white topbar they're invisible, so this small pill gives
     them the same navy backdrop they already get everywhere else in the
     app, just compact — not a new color or a new asset, the existing
     brand backdrop (#051433, the exact shade .login-shell uses) scaled
     down to header size. */
  .m-topbar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
    background: #051433;
    padding: 5px 12px 5px 7px;
    border-radius: var(--radius-full);
  }

  .m-topbar-brand img:first-child {
    width: 17px;
    height: 17px;
  }

  .m-topbar-brand img:last-child {
    height: 12px;
    width: auto;
    display: block;
  }

  /* Search stays available (per the same review) but as a compact icon
     affordance, not desktop's 340px input box — there's no room for
     that next to the brand mark, bell, and avatar at 375px, and a
     purpose-built mobile header shouldn't just be the desktop one
     squeezed down. */
  .topbar-search {
    width: auto;
    background: none;
    border: none;
    /* A little padding around the bare icon so the tap target is more
       than the visible 16px glyph — matching the comfortable-tap-target
       guidance the rest of this header refinement (bell, avatar) already
       meets, without changing how big the icon itself looks. */
    padding: 8px;
  }

  .topbar-search input {
    display: none;
  }

  .m-bottom-nav {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: var(--bg-white);
    border-top: 1px solid var(--border-light);
    padding: var(--space-2) 0;
    padding-bottom: calc(var(--space-2) + env(safe-area-inset-bottom, 0px));
  }

  .m-bottom-nav-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: var(--space-1) 0;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
    text-decoration: none;
  }

  .m-bottom-nav-item svg {
    width: 22px;
    height: 22px;
  }

  .m-bottom-nav-item.active {
    color: var(--accent-blue);
  }

  .m-bottom-nav-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--accent-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -18px;
    box-shadow: 0 4px 12px rgba(47, 94, 255, 0.4);
  }

  .m-bottom-nav-fab svg {
    width: 24px;
    height: 24px;
  }

  /* Reserves space at the bottom of the page so real content never
     sits underneath the fixed bottom nav. */
  .m-bottom-nav-spacer {
    display: block;
    height: 72px;
  }

  /* "More" — a small bottom sheet, not a full modal library. */
  .m-more-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(6, 12, 24, 0.5);
    z-index: 199;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
  }

  .m-more-overlay.open {
    opacity: 1;
    pointer-events: auto;
  }

  .m-more-sheet {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 201;
    background: var(--bg-white);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-5) var(--space-5) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
    transform: translateY(100%);
    transition: transform 0.25s ease;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.2);
  }

  .m-more-sheet.open {
    transform: translateY(0);
  }

  .m-more-sheet-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-2);
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--border-light);
  }

  .m-more-sheet-item:last-child {
    border-bottom: none;
  }

  .m-more-sheet-item svg {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
  }
}

/* ============================================================
   MOBILE HOME / REQUESTS / APPROVALS (≤768px)
   Operations Center's purpose-built mobile presentation — a
   personal "Needs Attention" queue + Recent Requests as cards,
   never the desktop stat-tile/table markup. Per
   plans/2026-09-10-mobile-purpose-built-experience.md, Step 3.
   ============================================================ */

.m-page-body {
  display: none;
}

@media (max-width: 768px) {
  /* Only Operations Center's desktop main gets fully hidden and replaced
     by .m-page-body — it's the one page with genuinely separate mobile
     content. Other pages reusing the plain .page-body class (Submit
     Request, Directory, Request Details' #page-content) are NOT touched
     by this rule: they either get a lighter mobile-CSS pass over the same
     content (Submit Request, Directory) or have their content swapped by
     JS via the <template> mechanism into the same container (Request
     Details) — hiding .page-body there would hide the mobile content too. */
  .m-hide-on-mobile {
    display: none;
  }

  /* Tighter mobile margins for the pages that keep using .page-body as
     their real (not hidden/swapped) container: Submit Request, Directory,
     and Request Details' #page-content. */
  .page-body:not(.m-hide-on-mobile) {
    padding: var(--space-4);
  }

  /* Submit Request (plans/2026-09-10-mobile-purpose-built-experience.md,
     Step 5) was already single-column on desktop — this is a spacing/
     touch-target pass only, same fields/form/IDs. Cancel/Submit go
     full-width, stacked, Submit on top (DOM order is Cancel then Submit —
     column-reverse puts the last child, Submit, first, matching the
     Approve-first principle used everywhere else in this plan). */
  .form-footer {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .form-footer .btn {
    width: 100%;
    padding: var(--space-4);
  }

  .m-page-body {
    display: block;
    padding: var(--space-5) var(--space-4) var(--space-6);
  }

  .m-greeting {
    /* ~14% smaller than --text-2xl (28px), per ChatGPT's refinement pass —
       stays the primary heading without overpowering the rest of the
       screen. */
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-5);
  }

  .m-section-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-3);
  }

  .m-section-label {
    font-size: var(--text-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
  }

  .m-section-link {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--accent-blue);
    text-decoration: none;
  }

  .m-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
  }

  .m-empty {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: var(--space-5);
    color: var(--text-muted);
    font-size: var(--text-sm);
    text-align: center;
  }

  /* Only present when .m-empty wraps a message + a real "Submit a
     request" link (Recent Requests on Home) — see renderMobileCardList's
     emptyLink parameter. A restrained text link, not another CTA button:
     the bottom nav's central + is already the one primary create action. */
  .m-empty p {
    margin: 0 0 var(--space-2) 0;
  }

  .m-empty-link {
    display: inline-block;
    color: var(--accent-blue);
    font-size: var(--text-sm);
    font-weight: 600;
    text-decoration: none;
  }

  .m-empty-link:hover {
    text-decoration: underline;
  }

  .m-request-card {
    display: block;
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    text-decoration: none;
    color: inherit;
  }

  .m-request-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--space-3);
  }

  .m-request-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
  }

  .m-request-card-owner {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }
}

/* ============================================================
   MOBILE REQUEST DETAILS (≤768px)
   Single-column card layout for the mobile <template> (see
   request-details.html's #tpl-content-mobile). The Decision Trail
   itself reuses .decision-trail/.trail-step unchanged — already a
   vertical timeline, no mobile-specific version needed. Approval
   actions reuse the same .approval-actions/.btn classes
   renderActions() already outputs on desktop; stacked full-width
   here for touch, same as the rest of the mobile treatment.
   Per plans/2026-09-10-mobile-purpose-built-experience.md, Step 4.
   ============================================================ */

@media (max-width: 768px) {
  .m-detail-card {
    background: var(--bg-white);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-card);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
  }

  .m-detail-title {
    font-size: var(--text-xl);
    font-weight: 800;
    margin: 0 0 var(--space-3) 0;
  }

  .m-detail-meta-list {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--border-light);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
  }

  .m-detail-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .m-detail-meta-label {
    font-size: var(--text-sm);
    color: var(--text-muted);
  }

  .m-detail-meta-value {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-primary);
  }

  .m-detail-section-title {
    font-size: var(--text-lg);
    font-weight: 800;
    margin: 0 0 var(--space-4) 0;
  }

  .m-detail-export {
    display: block;
    width: 100%;
    text-align: center;
  }

  /* Approve / Request Changes / Reject — stacked, full-width,
     thumb-sized. DOM order is Reject, Request Changes, Approve —
     column-reverse puts Approve on top, matching the mobile
     principle used everywhere else in this plan. Same treatment
     applies to the Accept/Decline pair and Assign/Complete
     single-button states renderActions() also produces. */
  .approval-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }

  .approval-actions .btn,
  #actions-body > div[style*="flex"] .btn,
  #actions-body .btn-primary {
    width: 100%;
    padding: var(--space-4);
  }
}

/* ============================================================
   MOBILE DIRECTORY (≤768px)
   Per plans/2026-09-10-mobile-purpose-built-experience.md, Step 6:
   Directory gets the bottom nav but no dedicated mobile redesign —
   its Team Members table still needs to not be a squeezed 4-column
   table on a phone, though. `renderMembers()`'s data-label
   attributes (directory.html) already exist for exactly this; this
   is the CSS that reads them, scoped to `.requests-table` (the
   class Directory's table uses) so it doesn't affect Operations
   Center's desktop table, which sits inside the fully-hidden
   .m-hide-on-mobile container at this width anyway.
   ============================================================ */

@media (max-width: 768px) {
  .requests-table thead {
    display: none;
  }

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

  .requests-table tbody tr {
    padding: var(--space-4);
    border-bottom: 8px solid var(--bg-content);
  }

  .requests-table td {
    padding: var(--space-1) 0;
  }

  .requests-table td[data-label]::before {
    content: attr(data-label) ": ";
    font-weight: 600;
    color: var(--text-muted);
  }
}

/* ============================================================
   MOBILE LOGIN (≤768px)
   Per plans/2026-09-10-mobile-purpose-built-experience.md, Design
   Decision 2 / Duplicate-ID Prevention: the marketing hero
   (.login-left) is hidden entirely — it has no form elements in
   it, nothing to collide. The one real signin-form/signup-form
   inside .login-right/.auth-card is never duplicated, only its
   container's spacing/width changes. The only new element is
   .m-login-brand — an image + text, no IDs, shown only here.
   ============================================================ */

.m-login-brand {
  display: none;
}

@media (max-width: 768px) {
  .login-shell {
    flex-direction: column;
    overflow: visible;
    min-height: 100vh;
  }

  .login-left {
    display: none;
  }

  /* Refinement per ChatGPT review, 2026-09-10: the wordmark must be the
     real brand asset (assets/Onnestra Wordmark Text Only.png), not plain
     text — the browser's default font draws the "A" in ONNESTRA with a
     crossbar; the actual brand mark doesn't. A small uppercase descriptor
     sits under it, clearly subordinate, matching the sidebar's own
     brand-lockup pattern elsewhere in the app. */
  .m-login-brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-5) 0;
  }

  .m-login-brand-row {
    display: flex;
    align-items: center;
    gap: var(--space-3);
  }

  .m-login-brand-icon {
    width: 32px;
    height: 32px;
  }

  .m-login-brand-word {
    height: 20px;
    width: auto;
    display: block;
  }

  .m-login-brand-descriptor {
    color: var(--text-on-dark-muted);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.14em;
  }

  /* "Sign in to your Onnestra account" reads as an accidental/disabled
     element at this contrast on mobile — "Sign in" alone is sufficient,
     per the same review. Desktop keeps it untouched: this hides the one
     shared #signin-subtext element only inside this mobile breakpoint. */
  #signin-subtext {
    display: none;
  }

  .login-right {
    order: initial;
    flex: none;
    width: 100%;
    padding: var(--space-4) var(--space-4) var(--space-8);
  }

  .auth-card {
    width: 100%;
    max-width: none;
    padding: 28px 24px 26px 24px;
  }

  /* Sibling of .login-left/.login-right, absolutely positioned —
     part of the marketing hero treatment, not the sign-in flow. */
  .login-tagline-footer {
    display: none;
  }
}