/* ==========================================================================
   Auth / commercial-foundation UI: login screen, persistent user bar, admin
   panel, license panel. Entirely new stylesheet - styles.css is untouched.
   Reuses the existing CSS custom properties (--color-*, --radius-*, etc.)
   defined in styles.css so this matches whichever theme/branding is active.
   ========================================================================== */

#auth-root:empty {
  display: none;
}

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  background-size: cover;
  background-position: center;
  padding: var(--page-padding);
}

.auth-screen-split {
  justify-content: flex-end;
}

.auth-screen-split .auth-card {
  margin-right: min(8vw, 96px);
}

.auth-card {
  width: min(360px, 100%);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated);
  padding: var(--card-padding);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.auth-logo {
  max-height: 56px;
  width: auto;
  align-self: center;
}

.auth-title {
  margin: 0;
  font-size: 1.25rem;
  color: var(--color-heading);
  text-align: center;
}

.auth-subtitle {
  margin: -8px 0 0;
  color: var(--color-font-muted);
  text-align: center;
  font-size: 0.9rem;
}

.auth-notice {
  margin: 0;
  padding: 10px 12px;
  border-radius: var(--radius-button);
  background: var(--status-oversized-bg);
  color: var(--status-oversized);
  font-size: 0.85rem;
}

.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-font);
}

.auth-field input,
.auth-field select {
  height: var(--density-field-h);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0 12px;
  font-size: 0.95rem;
  background: var(--color-card);
  color: var(--color-font);
}

.auth-field input[type="color"] {
  padding: 4px;
  width: 100%;
}

.auth-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: var(--color-font);
}

.auth-submit {
  height: var(--density-field-h);
  border: none;
  border-radius: var(--radius-button);
  background: var(--color-primary);
  color: var(--color-primary-ink);
  font-weight: 600;
  cursor: pointer;
}

.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-link-button {
  background: none;
  border: none;
  color: var(--color-accent);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 4px 6px;
}

/* ---- persistent user bar ---- */
.auth-user-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px var(--page-padding);
  background: var(--color-header);
  color: var(--color-header-ink);
  font-size: 0.85rem;
  flex-wrap: wrap;
}

.auth-user-bar-identity strong {
  font-weight: 600;
}

.auth-user-bar-actions {
  display: flex;
  gap: 4px;
}

.auth-user-bar .auth-link-button {
  color: var(--color-header-ink);
  opacity: 0.85;
}

.auth-user-bar .auth-link-button:hover {
  opacity: 1;
}

/* ---- modal overlay (change password + admin panel) ---- */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 20, 34, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: var(--page-padding);
}

.admin-panel {
  width: min(720px, 100%);
  max-height: 85vh;
  background: var(--glass-bg-strong, var(--color-card));
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border, var(--color-border));
  border-radius: var(--radius-card);
  box-shadow: var(--glass-shadow, var(--shadow-elevated));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.admin-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px var(--card-padding);
  border-bottom: 1px solid var(--color-border);
}

.admin-panel-header h2 {
  margin: 0;
  font-size: 1.1rem;
  color: var(--color-heading);
}

.admin-panel-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px var(--card-padding) 0;
  border-bottom: 1px solid var(--color-border);
}

.admin-panel-tab {
  border: none;
  background: none;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 0.85rem;
  color: var(--color-font-muted);
  border-bottom: 2px solid transparent;
}

.admin-panel-tab.is-active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: 600;
}

.admin-panel-body {
  padding: var(--card-padding);
  overflow-y: auto;
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 480px;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  margin-bottom: 16px;
}

.admin-table th,
.admin-table td {
  border: 1px solid var(--color-border);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}

.admin-table thead th {
  background: var(--color-table-head);
}

/* ---- license panel ---- */
.license-status-badge {
  display: inline-block;
  padding: 6px 14px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--badge-color);
  background: color-mix(in srgb, var(--badge-color) 15%, transparent);
  margin-bottom: 8px;
}

.license-status-message {
  color: var(--color-font-muted);
  margin: 0 0 16px;
}

.license-module-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-button);
  background: var(--color-card-soft);
  border: 1px solid var(--color-border);
  font-size: 0.75rem;
  margin: 2px 4px 2px 0;
}

/* ---- role-based UI gating (kept in CSS, not JS, so it survives ui.js's
   full re-renders of #selector-root) ---- */
/* The sidebar's #sidebar-settings-open is intentionally visible to every
   role - the Settings Hub it opens filters its own contents per role. */

/* ==========================================================================
   Phase 4B additions: dashboard/about cards, license field grid, status
   chips, storage/health tables, branding + letterhead previews, audit log
   list. All built from the same tokens/components already established
   above - no new design language, per the UI-consistency directive.
   ========================================================================== */

.dashboard-panel .admin-panel-body,
.about-panel .admin-panel-body {
  overflow-y: auto;
}

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
}

.dashboard-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-card-soft);
}

.dashboard-card-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-font-muted);
}

.dashboard-card-value {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-heading);
}

.about-panel-body {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.about-panel-software-name {
  margin: 0;
  font-size: 1.2rem;
  color: var(--color-heading);
}

.about-panel-edition {
  margin: 0 0 12px;
  color: var(--color-primary);
  font-weight: 600;
}

.about-panel-row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.85rem;
  text-align: left;
}

.about-panel-copyright {
  margin-top: 14px;
  color: var(--color-font-muted);
  font-size: 0.8rem;
}

.license-field-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.license-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
}

.license-field-label {
  font-size: 0.72rem;
  color: var(--color-font-muted);
}

.license-field-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-heading);
}

.license-section-heading {
  margin: 16px 0 8px;
  font-size: 0.95rem;
  color: var(--color-heading);
}

.license-modules-row {
  margin-bottom: 8px;
}

/* ---- status chips (users active/inactive, audit events) ---- */
.status-chip {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: capitalize;
}

.status-chip-active {
  background: var(--status-suitable-bg);
  color: var(--status-suitable);
}

.status-chip-inactive,
.status-chip-muted {
  background: var(--color-card-soft);
  color: var(--color-font-muted);
}

.status-chip-warning {
  background: var(--status-oversized-bg);
  color: var(--status-oversized);
}

.status-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ---- admin toolbar / sortable table headers ---- */
.admin-toolbar {
  margin-bottom: 10px;
}

.auth-field-input {
  height: var(--density-field-h);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 0 12px;
  font-size: 0.9rem;
  background: var(--color-card);
  color: var(--color-font);
  width: 100%;
  max-width: 280px;
}

.admin-table-sortable {
  cursor: pointer;
  user-select: none;
}

.admin-table-sortable:hover {
  color: var(--color-primary);
}

/* ---- image upload fields (company logo / logo placements / login bg) ---- */
.auth-field-label {
  display: block;
  font-size: 0.85rem;
  color: var(--color-font);
  margin-bottom: 6px;
}

.admin-upload-field {
  margin-bottom: 10px;
}

.admin-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-logo-preview {
  max-height: 48px;
  max-width: 120px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 4px;
}

.admin-upload-button {
  position: relative;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 6px 10px;
}

.branding-company-logo-reference {
  padding: 10px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-card-soft);
  margin-bottom: 12px;
}

.branding-logo-placement {
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
}

.branding-logo-override {
  margin-top: 8px;
  padding-left: 24px;
}

/* ---- storage health checklist ---- */
.storage-health-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}

.storage-health-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: 0.85rem;
}

.admin-table-note {
  color: var(--color-font-muted);
  font-size: 0.8rem;
}

/* ---- branding + letterhead previews ---- */
.branding-preview,
.letterhead-preview {
  margin-top: 16px;
  padding: 14px;
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-card);
  background: var(--color-card-soft);
  max-width: 480px;
  font-size: 0.85rem;
}

.branding-preview-logos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.branding-preview-logos figure {
  margin: 0;
  text-align: center;
}

.branding-preview-logos img {
  max-height: 48px;
  max-width: 96px;
  display: block;
  margin: 0 auto 4px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 4px;
}

.branding-preview-logos figcaption {
  font-size: 0.7rem;
  color: var(--color-font-muted);
}

.branding-preview-swatches {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.branding-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  display: inline-block;
}

.branding-preview-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: var(--radius-card);
  background: var(--color-bg);
  margin-bottom: 12px;
}

.letterhead-preview-tagline {
  color: var(--color-font-muted);
  font-size: 0.8rem;
  margin-bottom: 4px;
}

/* ---- audit log list ---- */
.audit-log-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.audit-log-entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: 0.82rem;
  flex-wrap: wrap;
}

.audit-log-detail {
  color: var(--color-font-muted);
  flex: 1;
  min-width: 120px;
}

.audit-log-time {
  color: var(--color-font-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

.auth-forgot-password {
  align-self: center;
}

/* ---- dashboard home page sections ---- */
.dashboard-section-heading {
  margin: 18px 0 8px;
  font-size: 0.95rem;
  color: var(--color-heading);
}

.dashboard-section-heading:first-child {
  margin-top: 0;
}

.dashboard-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.dashboard-quick-actions .auth-link-button {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
}

.dashboard-report-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dashboard-report-list li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  font-size: 0.82rem;
}

.dashboard-report-time {
  color: var(--color-font-muted);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* ---- settings hub launcher menu ---- */
.settings-hub-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-hub-menu {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-hub-item {
  display: flex;
  align-items: center;
  gap: 11px;
  text-align: left;
  background: var(--color-card-soft);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-button);
  padding: 11px 14px;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--color-font);
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.settings-hub-item-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--color-action, #1a63d8);
}

.settings-hub-item-icon svg {
  width: 17px;
  height: 17px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
}

.settings-hub-item:hover {
  border-color: var(--color-action, #1a63d8);
  background: var(--color-card);
}

.settings-hub-logout .settings-hub-item-icon {
  color: var(--status-undersized);
}

.settings-hub-logout {
  margin-top: 10px;
  color: var(--status-undersized);
  border-color: var(--status-undersized);
  background: transparent;
}