/* ============================================================
   CESIVI Modern UI — App Shell Layout
   All selectors scoped under body[data-modern-ui="true"]
   ============================================================ */

/* ---------- App shell grid ---------- */
body[data-modern-ui="true"] html,
body[data-modern-ui="true"] {
  height: 100%;
}

body[data-modern-ui="true"] .app {
  display: grid;
  /* PLAN-1725: dedicated rows for the edit-mode bar + archive banner ABOVE main.
     Without explicit placement these in-flow grid children auto-placed into trailing
     implicit rows (rendered at the BOTTOM); position:sticky cannot lift an item above
     its assigned grid row. The auto rows collapse to 0 when the bars are hidden/absent. */
  grid-template-rows: var(--topbar-h) auto auto auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "topbar  topbar"
    "sidebar ribbon-area"
    "sidebar editbar"
    "sidebar archivebar"
    "sidebar main";
  height: 100vh;
  min-height: 0;
}

body[data-modern-ui="true"] .topbar { grid-area: topbar; }
body[data-modern-ui="true"] .sidebar { grid-area: sidebar; }
body[data-modern-ui="true"] .ribbon-area { grid-area: ribbon-area; min-width: 0; overflow: hidden; }
body[data-modern-ui="true"] #spm-editmode-bar { grid-area: editbar; }
body[data-modern-ui="true"] #cesivi-archive-banner { grid-area: archivebar; }
body[data-modern-ui="true"] .main { grid-area: main; overflow: auto; min-width: 0; padding: 0; }

/* Panel / card utility */
body[data-modern-ui="true"] .panel {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 24px 28px;
  box-shadow: var(--shadow-sm);
}

/* Density toggle buttons */
body[data-modern-ui="true"] .density-toggle {
  display: inline-flex;
  gap: 4px;
  background: var(--bg-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 3px;
}

body[data-modern-ui="true"] .density-toggle .density-btn {
  padding: 4px 10px;
  border-radius: calc(var(--radius) - 2px);
  font-size: var(--font-size-sm);
  color: var(--fg-muted);
  transition: background 0.12s, color 0.12s;
}

body[data-modern-ui="true"] .density-toggle .density-btn:hover {
  color: var(--fg);
  background: var(--bg-hover);
}

body[data-modern-ui="true"] .density-toggle .density-btn[aria-pressed="true"] {
  background: var(--bg-panel);
  color: var(--fg);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}

/* Keyboard focus ring — uses --focus-ring token from tokens.css */
body[data-modern-ui="true"] :focus-visible {
  outline: var(--focus-ring);
  outline-offset: var(--focus-ring-offset);
}

/* PLAN-1364 Phase 2: collapse sidebar grid column at mobile (sidebar becomes fixed/off-canvas) */
@media (max-width: 768px) { /* token: --bp-tablet */
  body[data-modern-ui="true"] .app {
    grid-template-columns: 1fr;
    grid-template-areas:
      "topbar"
      "ribbon-area"
      "editbar"
      "archivebar"
      "main";
  }
}

/* BUG-0786: Edit-mode notification bar */
#spm-editmode-bar {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 20px;
  background: var(--accent, #0078d4);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  position: sticky;
  top: 0;
  z-index: 200;
}
body.sp-editmode #spm-editmode-bar { display: flex; }

.spm-editmode-label { display: flex; align-items: center; gap: 8px; }

.spm-editmode-actions { display: flex; gap: 8px; }

.spm-editmode-btn {
  padding: 4px 14px;
  border-radius: 3px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.5);
}
/* WCAG 2.1 AA PLAN-1644: solid contrasting fills on the blue edit-mode bar */
.spm-editmode-btn.spm-editmode-save { background: #ffffff; color: #004578; }
.spm-editmode-btn.spm-editmode-save:hover { background: #e8f0fe; }
.spm-editmode-btn.spm-editmode-discard { background: rgba(0,0,0,.4); color: #ffffff; }
.spm-editmode-btn.spm-editmode-discard:hover { background: rgba(0,0,0,.55); color: #ffffff; }