/*
 DragonStar Design System V2 — components.
 Intent: consistent spacing, quieter borders, stronger hierarchy, premium focus layers.
*/

/* Common surfaces */
.surface-panel,
.metric-card,
.list-card,
.module-card,
.profile-panel,
.profile-hero,
.settings-action-card,
.folder-tile,
.document-toolbar,
.ds-smart-table,
.enterprise-table,
.document-table,
.activity-table,
.trash-table,
.wfm-page-header,
.wfm-route-toolbar,
.wfm-local-nav,
.admin-panel,
.admin-card,
.card {
  border-color: var(--ui-border);
}

.surface-panel,
.metric-card,
.list-card,
.module-card,
.profile-panel,
.profile-hero,
.admin-panel,
.admin-card {
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
}

.surface-panel,
.profile-panel,
.admin-panel,
.admin-card {
  padding: clamp(1.25rem, 1.5vw, 1.75rem);
}

/* Typography hierarchy */
.eyebrow,
.section-kicker,
.wfm-nav-group-title,
.panel-heading .eyebrow {
  margin: 0 0 .5rem;
  color: var(--ui-primary-strong);
  font-size: .72rem;
  line-height: 1.2;
  font-weight: 850;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.dashboard-header h1,
.wfm-page-header h1,
.module-dashboard h1,
.narrow-page h1,
.profile-hero h1 {
  margin: 0;
  color: var(--ui-heading);
  font-size: var(--ds-font-size-3xl);
  line-height: 1.05;
  font-weight: 760;
  letter-spacing: -.035em;
}

.panel-heading h2,
.surface-panel h2,
.module-card h2,
.module-card h3 {
  color: var(--ui-heading);
  font-weight: 720;
  letter-spacing: -.02em;
}

.text-muted,
small,
.module-card p,
.wfm-page-header p:not(.section-kicker) {
  color: var(--ui-text-muted) !important;
}

/* Buttons */
.btn,
.btn-action,
button {
  border-radius: var(--ui-radius-sm);
}

.btn-action,
.btn.btn-primary,
.btn.btn-outline-primary,
.btn.btn-outline-secondary {
  min-height: var(--ui-control-height);
  padding: .58rem .9rem;
  font-weight: 700;
  transition:
    transform var(--ui-motion-fast) var(--ui-ease),
    box-shadow var(--ui-motion-fast) var(--ui-ease),
    background-color var(--ui-motion-fast) var(--ui-ease),
    border-color var(--ui-motion-fast) var(--ui-ease);
}

.btn.btn-primary,
.btn-action.btn-primary {
  border-color: var(--ui-primary);
  background: var(--ui-primary);
  color: #fff;
  box-shadow: 0 5px 14px color-mix(in srgb, var(--ui-primary) 18%, transparent);
}

.btn.btn-outline-primary,
.btn-action:not(.btn-primary) {
  border-color: color-mix(in srgb, var(--ui-primary) 56%, var(--ui-border));
  background: color-mix(in srgb, var(--ui-surface-elevated) 92%, transparent);
  color: var(--ui-primary-strong);
}

.btn:hover:not(:disabled),
.btn-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--ui-shadow-sm);
}

/* Controls */
input:not([type="checkbox"]):not([type="radio"]),
select,
textarea,
.form-control,
.form-select,
.search-select-button,
.global-search input,
.inline-search {
  min-height: var(--ui-control-height);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-sm);
  background: var(--ui-surface-elevated);
  color: var(--ui-text);
  padding-inline: .85rem;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 35%, transparent);
  transition:
    border-color var(--ui-motion-fast) var(--ui-ease),
    box-shadow var(--ui-motion-fast) var(--ui-ease),
    background-color var(--ui-motion-fast) var(--ui-ease);
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover,
.form-control:hover,
.form-select:hover {
  border-color: var(--ui-border-strong);
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in srgb, var(--ui-text-muted) 78%, transparent);
}

label,
.field {
  color: var(--ui-heading);
  font-weight: 650;
}

.field {
  display: grid;
  gap: .5rem;
}

/* Pills / badges */
.status-pill,
.chip,
.module-meta span,
.attention-count {
  min-height: 1.7rem;
  border-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-muted) 74%, transparent);
  color: var(--ui-text-muted);
  font-size: .78rem;
  font-weight: 650;
}

/* Module cards */
.module-grid {
  gap: var(--ds-space-5);
}

.module-card {
  min-height: 15rem;
  padding: 0;
  overflow: clip;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ui-surface-elevated) 99%, var(--ui-primary) 1%), var(--ui-surface-elevated));
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  box-shadow: var(--ui-shadow-xs);
  transition:
    transform var(--ui-motion-normal) var(--ui-ease),
    box-shadow var(--ui-motion-normal) var(--ui-ease),
    border-color var(--ui-motion-normal) var(--ui-ease);
}

.module-card:hover {
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--ui-primary) 32%, var(--ui-border));
  box-shadow: var(--ui-shadow-card);
}

.module-card-body {
  display: grid;
  align-content: start;
  gap: .75rem;
  padding: 1.35rem 1.35rem .9rem;
}

.module-card-footer {
  margin-top: auto;
  padding: 0 1.35rem 1.35rem;
}

.module-card-top {
  margin-bottom: .15rem;
}

.module-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--ui-radius-sm);
  background: var(--ui-primary-soft);
  color: var(--ui-primary-strong);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ui-primary) 14%, transparent);
}

.module-card h2,
.module-card h3 {
  margin: .1rem 0 0;
  font-size: 1.08rem;
}

.module-card p {
  margin: 0;
  line-height: 1.6;
}

/* Table shell */
.ds-smart-table,
.enterprise-table,
.document-table,
.activity-table,
.trash-table {
  overflow: clip;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-elevated);
  box-shadow: var(--ui-shadow-xs);
}

.ds-table-toolbar {
  display: grid;
  grid-template-columns: auto minmax(12rem, 1fr) auto;
  align-items: end;
  gap: .75rem;
  min-height: auto;
  padding: 1rem;
  border-bottom: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-muted) 52%, var(--ui-surface-elevated));
}

.ds-table-search {
  min-width: 0;
}

.ds-table-search input {
  width: 100%;
}

.ds-table-export {
  display: flex;
  gap: .5rem;
  align-items: end;
}

.ds-table-export button,
.ds-table-size select,
.ds-table-pager button {
  min-height: 2.65rem;
  border-radius: var(--ui-radius-sm);
}

.dragon-table thead th,
.document-head,
.enterprise-head,
.admin-table thead th {
  background: color-mix(in srgb, var(--ui-surface-muted) 76%, var(--ui-surface-elevated));
  color: var(--ui-text-muted);
  font-size: .74rem;
  letter-spacing: .035em;
  font-weight: 750;
  text-transform: uppercase;
}

.dragon-table td,
.dragon-table th {
  padding: 1rem .85rem;
  border-color: var(--ui-border);
}

.dragon-table tbody tr,
.document-row,
.enterprise-row,
.admin-table tbody tr {
  transition: background-color var(--ui-motion-fast) var(--ui-ease);
}

.dragon-table tbody tr:hover,
.document-row:not(.document-head):hover,
.enterprise-row:not(.enterprise-head):hover,
.admin-table tbody tr:hover {
  background: color-mix(in srgb, var(--ui-primary) 5%, var(--ui-surface-elevated));
}

.ds-table-pager {
  min-height: auto;
  padding: .8rem 1rem;
  border-top: 1px solid var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-muted) 38%, var(--ui-surface-elevated));
}

/* Panel headers */
.panel-heading,
.wfm-route-toolbar,
.document-toolbar {
  gap: 1rem;
}

.panel-heading {
  margin-bottom: 1.15rem;
}

.panel-heading h2 {
  margin: 0;
}

/* Folder / document cards */
.folder-grid {
  gap: 1rem;
}

.folder-tile {
  min-height: 7rem;
  padding: 1rem;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-elevated);
}

.folder-tile:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-primary) 34%, var(--ui-border));
  box-shadow: var(--ui-shadow-sm);
}

/* Settings rows */
.settings-list {
  gap: .7rem;
}

.settings-action-card {
  min-height: 4.2rem;
  padding: .9rem 1rem;
  border-radius: var(--ui-radius-md);
  background: var(--ui-surface-subtle);
}

/* Focus layer: preserve the current treatment the owner likes, but refine it. */
.modal-backdrop {
  background: var(--ui-backdrop) !important;
  backdrop-filter: blur(var(--ui-backdrop-blur)) saturate(.78);
  -webkit-backdrop-filter: blur(var(--ui-backdrop-blur)) saturate(.78);
}

.modal-backdrop.show {
  opacity: 1 !important;
}

.ds-modal-content,
.modal-content {
  overflow: clip;
  border: 1px solid color-mix(in srgb, var(--ui-border-strong) 78%, transparent);
  border-radius: var(--ui-radius-xl);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--ui-modal-bg) 98%, white 2%),
      var(--ui-modal-bg));
  color: var(--ui-text);
  box-shadow: var(--ui-shadow-floating);
}

.ds-modal-content .modal-header,
.modal-content .modal-header {
  padding: 1.15rem 1.25rem;
  border-bottom-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-muted) 30%, transparent);
}

.ds-modal-content .modal-body,
.modal-content .modal-body {
  padding: 1.25rem;
}

.ds-modal-content .modal-footer,
.modal-content .modal-footer {
  padding: 1rem 1.25rem;
  border-top-color: var(--ui-border);
  background: color-mix(in srgb, var(--ui-surface-muted) 30%, transparent);
}

.ds-modal-content .btn-close,
.modal-content .btn-close {
  width: 2.35rem;
  height: 2.35rem;
  border-color: var(--ui-border);
  background-color: color-mix(in srgb, var(--ui-surface-muted) 76%, var(--ui-surface-elevated));
}

/* Dropdowns / floating panels */
.dropdown-panel,
.dropdown-menu,
.search-results,
.search-select-panel,
.command-palette,
[data-command-palette] {
  border-color: var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-elevated);
  box-shadow: var(--ui-shadow-floating);
}

/* Theme gallery */
.appearance-shell {
  display: grid;
  gap: 1.5rem;
}

.appearance-section {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 2vw, 1.75rem);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-elevated);
  box-shadow: var(--ui-shadow-xs);
}

.appearance-theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.appearance-theme-card {
  position: relative;
  display: grid;
  gap: .85rem;
  min-height: 12rem;
  padding: 1rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface-subtle);
  color: var(--ui-text);
  text-align: left;
  cursor: pointer;
  transition:
    transform var(--ui-motion-normal) var(--ui-ease),
    border-color var(--ui-motion-normal) var(--ui-ease),
    box-shadow var(--ui-motion-normal) var(--ui-ease);
}

.appearance-theme-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--ui-primary) 42%, var(--ui-border));
  box-shadow: var(--ui-shadow-card);
}

.appearance-theme-card[aria-pressed="true"] {
  border-color: var(--ui-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ui-primary) 16%, transparent), var(--ui-shadow-sm);
}

.appearance-theme-card[aria-pressed="true"]::after {
  content: "Selected";
  position: absolute;
  top: .75rem;
  right: .75rem;
  padding: .24rem .5rem;
  border-radius: var(--ui-radius-pill);
  background: var(--ui-primary);
  color: #fff;
  font-size: .7rem;
  font-weight: 800;
}

.theme-preview {
  display: grid;
  grid-template-columns: 2.6rem 1fr;
  min-height: 6.5rem;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: var(--ui-radius-md);
  background: var(--preview-bg, #eef2f7);
}

.theme-preview-sidebar {
  background: var(--preview-sidebar, #14243d);
}

.theme-preview-main {
  display: grid;
  grid-template-rows: 1.6rem 1fr;
  background: var(--preview-bg, #eef2f7);
}

.theme-preview-topbar {
  border-bottom: 1px solid var(--preview-border, #d7dee8);
  background: var(--preview-surface, #fff);
}

.theme-preview-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .4rem;
  padding: .5rem;
}

.theme-preview-cards span {
  border: 1px solid var(--preview-border, #d7dee8);
  border-radius: .35rem;
  background: var(--preview-surface, #fff);
}

.appearance-theme-card strong {
  color: var(--ui-heading);
  font-size: 1rem;
}

.appearance-theme-card small {
  color: var(--ui-text-muted) !important;
}

.appearance-mode-group {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.appearance-mode-button {
  min-height: var(--ui-control-height);
  padding: .55rem .85rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-pill);
  background: var(--ui-surface-elevated);
  color: var(--ui-text);
  font-weight: 700;
}

.appearance-mode-button[aria-pressed="true"] {
  border-color: var(--ui-primary);
  background: var(--ui-primary-soft);
  color: var(--ui-primary-strong);
}

@media (max-width: 760px) {
  .ds-table-toolbar {
    grid-template-columns: 1fr;
  }

  .ds-table-export {
    flex-wrap: wrap;
  }

  .appearance-theme-grid {
    grid-template-columns: 1fr;
  }
}