/* portal.css — static portal shell. Layered on top of assets/app.css tokens. */

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--color-brand); color: #fff; padding: var(--space-3) var(--space-4);
  border-radius: 0 0 var(--btn-radius) 0;
}
.skip-link:focus { left: 0; }

.app-layout { display: flex; min-height: 100vh; }

/* ── Sidebar ─────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width); background: var(--sidebar-bg); color: var(--sidebar-text);
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 40;
  display: flex; flex-direction: column; overflow-y: auto;
  transition: transform var(--motion-duration) ease-out;
}
.sidebar-logo { padding: var(--space-6) var(--space-6) var(--space-4); display: flex; justify-content: center; }
.sidebar-logo img { height: 30px; width: auto; opacity: 0.9; }
.sidebar-separator {
  height: 1px; margin: 0 10% var(--space-4); width: 80%;
  background: linear-gradient(90deg, transparent, var(--accent-gold), transparent);
}
.sidebar-section { padding: var(--space-2) 0; }
.sidebar-label {
  text-transform: uppercase; font-size: var(--text-xs); letter-spacing: 0.08em;
  color: var(--color-text-subtle); padding: var(--space-3) var(--space-6) var(--space-2);
  font-weight: 600;
}
.sidebar-nav { list-style: none; margin: 0; padding: 0; }
.sidebar-nav a, .sidebar-nav button.folder-toggle {
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%; background: none; border: 0;
  color: var(--sidebar-text); font: inherit; text-align: left;
  padding: var(--space-2) var(--space-6); cursor: pointer;
  text-decoration: none;
}
.sidebar-nav a:hover, .sidebar-nav button.folder-toggle:hover {
  background: rgba(255,255,255,0.04); color: var(--sidebar-text-active);
  text-decoration: none;
}
.sidebar-nav a.active {
  background: rgba(255,255,255,0.08); color: var(--sidebar-text-active);
  border-left: 3px solid var(--accent-gold); padding-left: calc(var(--space-6) - 3px);
}
.sidebar-nav .nav-icon { width: 1.25em; text-align: center; flex-shrink: 0; }
.sidebar-nav .nav-pill {
  margin-left: auto; font-size: var(--text-xs);
  background: rgba(255,255,255,0.08); padding: 1px 6px; border-radius: 10px;
}
.sidebar-nav .chevron { margin-left: var(--space-2); transition: transform var(--motion-duration); }
.folder-toggle[aria-expanded="true"] .chevron { transform: rotate(90deg); }
.sub-nav { list-style: none; margin: 0; padding: 0 0 0 var(--space-4); }
.sub-nav a { font-size: var(--text-sm); padding-left: var(--space-8); }

.sidebar-bottom { margin-top: auto; padding: var(--space-4) var(--space-6); }
.sidebar-btn {
  background: transparent; border: 1px solid rgba(255,255,255,0.12); border-radius: var(--btn-radius);
  color: var(--sidebar-text); padding: var(--space-2) var(--space-3); font: inherit; cursor: pointer;
  width: 100%; margin-bottom: var(--space-2);
}
.sidebar-btn:hover { background: rgba(255,255,255,0.05); color: var(--sidebar-text-active); }
.sidebar-copyright { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-3); text-align: center; }

.a11y-panel { display: none; }
.a11y-panel.open {
  display: block; background: rgba(255,255,255,0.04); border-radius: var(--btn-radius);
  padding: var(--space-3); margin-bottom: var(--space-3);
}
.a11y-panel h2 { font-size: var(--text-base); margin: 0 0 var(--space-2); color: var(--sidebar-text-active); }
.a11y-panel .a11y-intro { font-size: var(--text-xs); color: var(--color-text-subtle); margin: 0 0 var(--space-3); }
.a11y-row { margin-bottom: var(--space-3); }
.a11y-row-label { font-size: var(--text-sm); color: var(--sidebar-text-active); margin-bottom: var(--space-1); }
.a11y-options { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.a11y-options button {
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: var(--sidebar-text); padding: 2px 8px; border-radius: 6px; font-size: var(--text-xs); cursor: pointer;
}
.a11y-options button[aria-pressed="true"] { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.a11y-row-help { font-size: var(--text-xs); color: var(--color-text-subtle); margin-top: var(--space-1); }
.a11y-reset { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); margin-top: var(--space-3); }
.a11y-reset-note { color: var(--color-text-subtle); }
.btn-link { background: none; border: 0; color: var(--accent-gold); cursor: pointer; padding: 0; }

/* ── Header + main ────────────────────────────────────────────────── */
.header-bar {
  position: fixed; top: 0; left: var(--sidebar-width); right: 0; height: var(--header-height);
  background: var(--header-bg); border-bottom: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--space-6); z-index: 20;
}
.header-bar h1 { font-size: var(--text-lg); margin: 0; font-weight: 600; }
.header-left { display: flex; align-items: center; gap: var(--space-3); }
.sidebar-toggle {
  display: none; background: none; border: 0; font-size: 1.5rem; cursor: pointer;
  color: var(--color-text);
}
.main-content {
  flex: 1; margin-left: var(--sidebar-width); margin-top: var(--header-height);
  padding: var(--space-6); min-height: calc(100vh - var(--header-height));
}
.sidebar-overlay {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 30;
}
.sidebar-overlay.open { display: block; }

@media (max-width: 768px) {
  .sidebar { transform: translateX(-100%); }
  .sidebar.open { transform: translateX(0); }
  .header-bar { left: 0; }
  .main-content { margin-left: 0; }
  .sidebar-toggle { display: block; }
}

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  background: var(--color-bg-alt); border: 1px solid var(--color-border-subtle);
  border-radius: var(--card-radius); padding: var(--space-5);
  box-shadow: var(--card-shadow);
}

/* ── Dashboard ────────────────────────────────────────────────────── */
.dashboard-layout {
  display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-6);
}
@media (max-width: 1100px) { .dashboard-layout { grid-template-columns: 1fr; } }

.dash-section-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-4);
}
.dash-section-head h3 { margin: 0; }

.ac-filter { display: flex; gap: var(--space-2); }
.ac-toggle-btn {
  background: var(--color-bg-alt); border: 1px solid var(--color-border);
  border-radius: var(--btn-radius); padding: 4px 10px; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--color-text-muted);
}
.ac-toggle-btn.on { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }
.ac-toggle-count {
  display: inline-block; margin-left: 6px;
  background: rgba(255,255,255,0.25); padding: 0 6px; border-radius: 10px; font-size: var(--text-xs);
}
.ac-toggle-btn:not(.on) .ac-toggle-count { background: var(--color-bg-hover); color: var(--color-text-muted); }

.action-grid { display: flex; flex-direction: column; gap: var(--space-3); }
.action-card {
  background: var(--color-bg-alt); border: 1px solid var(--color-border-subtle);
  border-left: 4px solid var(--color-border); border-radius: var(--card-radius);
  padding: var(--space-4); box-shadow: var(--card-shadow);
}
.action-card.ac-pending  { border-left-color: var(--accent-gold); }
.action-card.ac-progress { border-left-color: var(--status-progress); }
.action-card.ac-blocked  { border-left-color: var(--status-blocked); }
.action-card.ac-done     { border-left-color: var(--status-done); opacity: 0.82; }

.ac-top { display: flex; justify-content: space-between; gap: var(--space-3); align-items: flex-start; }
.ac-title { font-weight: 600; font-size: var(--text-base); }
.ac-id { color: var(--color-text-subtle); margin-right: 6px; font-weight: 500; }
.ac-top-pills { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.ac-pill {
  font-size: var(--text-xs); padding: 2px 8px; border-radius: 10px;
  background: var(--color-bg-hover); color: var(--color-text-muted);
  white-space: nowrap;
}
.ac-pill.ac-pending  { background: rgba(214,173,96,0.18); color: #8a6a26; }
.ac-pill.ac-progress { background: rgba(75,184,212,0.18); color: #1b6d83; }
.ac-pill.ac-blocked  { background: rgba(192,57,43,0.15); color: #8a2018; }
.ac-pill.ac-done     { background: rgba(22,163,74,0.15); color: #126b34; }
.ac-mid { margin: var(--space-2) 0; }
.ac-desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.55; }
.ac-bottom {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: var(--space-2); font-size: var(--text-xs); color: var(--color-text-subtle);
  gap: var(--space-3);
}
.ac-location { color: var(--color-text-muted); }
a.ac-location:hover { color: var(--color-brand); text-decoration: underline; }
.ac-empty-state {
  display: none; padding: var(--space-6); text-align: center;
  color: var(--color-text-subtle); font-style: italic;
}

.howto-item { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border-subtle); }
.howto-item:last-child { border-bottom: 0; }
.howto-q { font-weight: 600; margin-bottom: var(--space-1); }
.howto-a { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }

/* ── Doc viewer ───────────────────────────────────────────────────── */
.doc-viewer { padding: 0; overflow: hidden; }
.doc-actions {
  display: flex; justify-content: flex-end; gap: var(--space-2);
  padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-alt);
}
.doc-action-btn {
  background: var(--color-bg-hover); border: 1px solid var(--color-border);
  border-radius: var(--btn-radius); padding: 4px 12px; cursor: pointer;
  font: inherit; font-size: var(--text-sm); color: var(--color-text);
}
.doc-action-btn:hover { background: var(--color-brand); color: #fff; border-color: var(--color-brand); }

.doc-frame, .doc-pdf {
  width: 100%; height: calc(100vh - var(--header-height) - 120px);
  min-height: 600px; border: 0; display: block;
}
.doc-frame { background: #fff; }
.empty-state { padding: var(--space-12) var(--space-6); text-align: center; color: var(--color-text-muted); }
.empty-state h3 { margin-bottom: var(--space-3); }

.site-footer { margin-top: var(--space-8); padding: var(--space-4) 0; text-align: center; color: var(--color-text-subtle); }