/* Phase 6.7 authenticated usability surfaces. Staging only. */

/* The inspector column is removed, rather than left at the authenticated shell width. */
@media (min-width: 901px) {
  .editor-active .app-shell.inspector-hidden {
    grid-template-columns: 62px 264px minmax(0, 1fr);
  }

  .editor-active .app-shell.inspector-hidden .properties-panel { display: none; }
  .editor-active .app-shell.inspector-hidden .workspace { grid-column: auto; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .editor-active .app-shell.inspector-hidden {
    grid-template-columns: 58px 238px minmax(0, 1fr);
  }
}

.editor-active .icon-btn:disabled,
.portal-active button:disabled {
  cursor: not-allowed;
  opacity: .38;
  filter: saturate(.45);
}

/* Account menu */
.account-menu { position: relative; }
.account-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
.account-popover {
  position: absolute;
  z-index: 90;
  top: calc(100% + 10px);
  right: 0;
  display: grid;
  width: min(250px, calc(100vw - 24px));
  padding: 7px;
  border: 1px solid var(--lc-border);
  border-radius: 11px;
  background: #0b1624;
  box-shadow: 0 20px 56px rgba(0, 0, 0, .5);
}
.account-popover[hidden] { display: none; }
.account-popover button {
  width: 100%;
  min-height: 42px;
  padding-inline: 12px;
  text-align: left;
}
.account-popover button:last-child {
  margin-top: 5px;
  border-top-color: var(--lc-border-soft);
  color: #ffaaa5;
}

/* Interactive statistics and private quick views */
.stat-card.interactive {
  width: 100%;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.stat-card.interactive:hover {
  transform: translateY(-2px);
  border-color: #3975be;
  box-shadow: 0 16px 34px rgba(0, 0, 0, .26), 0 0 20px rgba(47, 124, 255, .08);
}
.stat-card.interactive:focus-visible { box-shadow: var(--lc-focus); }
.stat-card:disabled { text-align: left; }
.quick-view-dialog { width: min(720px, 96vw); max-height: min(780px, 92dvh); overflow: auto; }
.quick-view-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.quick-view-heading h2 { margin-top: 6px; }
.quick-search { display: flex; margin: 18px 0 12px; }
.quick-search input { min-height: 44px; font-size: 16px; }
.quick-view-list { display: grid; gap: 7px; max-height: 52dvh; overflow: auto; }
.quick-record {
  display: grid;
  gap: 5px;
  min-height: 78px;
  padding: 13px 15px;
  color: var(--lc-text);
  border: 1px solid var(--lc-border-soft);
  border-radius: 9px;
  background: #0d1928;
  text-align: left;
}
.quick-record:hover { border-color: #3975be; background: #10223a; }
.quick-record span { color: var(--lc-muted-strong); font-size: 11px; }
.quick-record small, .quick-empty { color: var(--lc-muted); font-size: 10px; }

/* Account settings and data controls */
.settings-main, .admin-main { width: min(1080px, 100%); }
.settings-heading { margin-bottom: 25px; }
.settings-heading h1 { margin: 8px 0; font-size: clamp(28px, 4vw, 42px); letter-spacing: -.035em; }
.settings-heading p { max-width: 680px; color: var(--lc-muted); }
.settings-tabs {
  display: flex;
  gap: 5px;
  overflow-x: auto;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lc-border-soft);
}
.settings-tabs button {
  flex: 0 0 auto;
  min-height: 42px;
  padding: 0 14px;
  color: var(--lc-muted);
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
}
.settings-tabs button.active { color: var(--lc-text); border-color: #315e99; background: #10243e; }
.settings-panel { margin-top: 18px; }
.settings-panel > section {
  margin-bottom: 16px;
  padding: 24px;
  border: 1px solid var(--lc-border);
  border-radius: 13px;
  background: linear-gradient(145deg, #0e1a29, #091522);
  box-shadow: 0 16px 38px rgba(0, 0, 0, .2);
}
.settings-panel h2 { margin: 0 0 8px; font-size: 19px; }
.settings-panel p { max-width: 720px; color: var(--lc-muted); font-size: 12px; line-height: 1.6; }
.settings-facts, .data-counts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 18px 0;
}
.settings-facts span, .data-counts span {
  min-width: 0;
  padding: 13px;
  color: var(--lc-muted);
  border: 1px solid var(--lc-border-soft);
  border-radius: 8px;
  background: #091522;
  font-size: 10px;
}
.settings-facts strong { display: block; overflow-wrap: anywhere; margin-top: 5px; color: var(--lc-text); font-size: 12px; }
.data-counts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.data-counts span { text-align: center; }
.data-counts strong { display: block; margin-bottom: 5px; color: var(--lc-blue-bright); font-size: 25px; }
.settings-form { display: grid; gap: 13px; max-width: 620px; margin-top: 18px; }
.settings-form label { color: var(--lc-muted); font-size: 11px; }
.settings-form input, .admin-filters input, .admin-filters select {
  width: 100%;
  min-height: 46px;
  margin-top: 6px;
  padding: 0 12px;
  color: var(--lc-text);
  border: 1px solid #274463;
  border-radius: 8px;
  background: #0d1928;
  font-size: 16px;
}
.settings-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 18px; }
.settings-message { margin-top: 14px; color: #9dffc7; font-size: 11px; }
.settings-message.error, .inline-error { color: #ffaaa5; }
.danger-settings { border-color: #5e3035 !important; background: linear-gradient(145deg, #201218, #0f1118) !important; }
.destructive-check { display: flex; align-items: center; gap: 9px; }
.destructive-check input { width: 20px; min-height: 20px; margin: 0; }
.protected-owner { padding: 13px; border: 1px solid #315e99; border-radius: 8px; background: #10243e; color: #c8dcfa !important; }

/* User administration */
.admin-filters {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 150px 150px auto;
  gap: 8px;
  margin: 18px 0;
  padding: 12px;
  border: 1px solid var(--lc-border-soft);
  border-radius: 10px;
  background: #091522;
}
.admin-filters input, .admin-filters select { margin: 0; min-width: 0; }
.admin-user-list { display: grid; gap: 8px; }
.admin-user-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 15px 17px;
  border: 1px solid var(--lc-border-soft);
  border-radius: 10px;
  background: #0b1624;
}
.admin-user-card > div:first-child { display: grid; gap: 4px; min-width: 0; }
.admin-user-card span { overflow-wrap: anywhere; color: var(--lc-muted-strong); font-size: 11px; }
.admin-user-card small { color: var(--lc-muted); font-size: 9px; line-height: 1.55; }
.admin-user-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.admin-user-actions button {
  min-height: 38px;
  padding: 0 10px;
  color: #c8dcfa;
  border: 1px solid #294b74;
  border-radius: 7px;
  background: #10243e;
  font-size: 9px;
}
.admin-user-actions button.danger { color: #ffaaa5; border-color: #68363b; background: #25151a; }
.admin-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 14px; color: var(--lc-muted); font-size: 10px; }
.admin-confirm-target {
  display: grid;
  gap: 4px;
  margin: 17px 0;
  padding: 13px;
  border: 1px solid #315e99;
  border-radius: 8px;
  background: #0d2038;
}
.admin-confirm-target strong { overflow-wrap: anywhere; color: #f3f7fc; }
.admin-confirm-target small { overflow-wrap: anywhere; color: var(--lc-muted); font-size: 9px; }

/* Private custom symbol library */
.custom-symbol-tools { display: grid; gap: 10px; }
.custom-symbol-tools > .template-card { width: 100%; }
.custom-symbol-tools .search { display: flex; }
.custom-symbol-tools .search input { min-width: 0; }
.custom-symbol-grid { grid-template-columns: 1fr !important; }
.custom-symbol-item { overflow: hidden; border: 1px solid var(--lc-border-soft); border-radius: 8px; background: #091522; }
.custom-symbol-item .component-card { width: 100%; border: 0; border-radius: 0; }
.custom-symbol-preview, .custom-symbol-large-preview {
  overflow: hidden;
  color: #e6edf6;
  background: #eef3f8;
}
.custom-symbol-preview svg { width: 38px; height: 38px; }
.custom-symbol-large-preview { display: grid; place-items: center; min-height: 180px; margin: 15px 0; border: 1px solid #294667; border-radius: 9px; }
.custom-symbol-large-preview svg { width: min(240px, 80%); height: 150px; }
.custom-symbol-actions { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--lc-border-soft); }
.custom-symbol-actions button { min-height: 38px; color: var(--lc-muted-strong); border: 0; background: #0d1928; font-size: 9px; }
.custom-symbol-actions button + button { border-left: 1px solid var(--lc-border-soft); }
.custom-symbol-actions button.danger { color: #ffaaa5; }
.custom-symbol-empty { grid-column: 1 / -1; padding: 14px; color: var(--lc-muted); }
.custom-symbol-dialog { width: min(520px, 96vw); max-height: 92dvh; overflow: auto; }

@media (max-width: 760px) {
  .settings-facts { grid-template-columns: 1fr; }
  .data-counts { grid-template-columns: repeat(2, 1fr); }
  .admin-filters { grid-template-columns: 1fr 1fr; }
  .admin-filters input { grid-column: 1 / -1; }
  .admin-filters .portal-btn { grid-column: 1 / -1; }
  .admin-user-card { grid-template-columns: 1fr; gap: 13px; }
  .admin-user-actions { justify-content: flex-start; }
  .admin-user-actions button { min-height: 44px; }
}

@media (max-width: 430px) {
  .account-menu-toggle .account-label, .account-menu-toggle .role-chip { display: none; }
  .account-popover { position: fixed; top: 66px; right: max(10px, env(safe-area-inset-right)); }
  .quick-view-dialog { width: 100%; max-height: 88dvh; padding: 18px; }
  .quick-view-heading { align-items: center; }
  .quick-record { min-height: 88px; }
  .settings-panel > section { padding: 18px 14px; }
  .data-counts, .admin-filters { grid-template-columns: 1fr; }
  .admin-filters input, .admin-filters .portal-btn { grid-column: auto; }
  .admin-user-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .admin-user-actions button { min-width: 0; }
  .dialog-actions { flex-wrap: wrap; }
  .dialog-actions .portal-btn { flex: 1 1 140px; min-height: 46px; }
  .editor-active .top-actions #undoBtn,
  .editor-active .top-actions #redoBtn { display: inline-grid; }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  .quick-view-dialog, .custom-symbol-dialog { max-height: calc(100dvh - 18px); }
  .settings-panel > section { padding-block: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .stat-card.interactive { transition: none; }
  .stat-card.interactive:hover { transform: none; }
}