/* ─── SIMPLEAML PRO — COMPONENT STYLES ──────────────────────────────────────
   Reusable component classes built on tokens.css variables.
   Every screen file uses these classes — never hardcoded styles.
   Requires tokens.css to be loaded first.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── RESET & BASE ─────────────────────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  font-family:      var(--font-family);
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  background:       var(--color-surface-alt);
  margin:           0;
  padding:          0;
  line-height:      var(--line-height-base);
  -webkit-font-smoothing: antialiased;
}

/* ── LAYOUT ───────────────────────────────────────────────────────────────── */

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

.sidebar {
  width:            var(--sidebar-width);
  min-height:       100vh;
  background:       var(--color-surface);
  border-right:     0.5px solid var(--color-border);
  flex-shrink:      0;
  display:          flex;
  flex-direction:   column;
  position:         fixed;
  top:              0;
  left:             0;
  bottom:           0;
  overflow-y:       auto;
}

.main-content {
  margin-left:      var(--sidebar-width);
  flex:             1;
  padding:          var(--space-8) var(--space-8);
  max-width:        calc(var(--sidebar-width) + var(--content-max-width) + var(--space-8) * 2);
}

.screen {
  max-width:        var(--content-max-width);
}

.screen-narrow {
  max-width:        var(--form-max-width);
}

/* ── SIDEBAR COMPONENTS ───────────────────────────────────────────────────── */

.sidebar-logo {
  display:          flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-5) var(--space-4);
  border-bottom:    0.5px solid var(--color-border);
}

.sidebar-logo-mark {
  width:            32px;
  height:           32px;
  background:       var(--color-primary);
  border-radius:    var(--radius-md);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-bold);
  color:            #fff;
  flex-shrink:      0;
}

.sidebar-logo-text {
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-semibold);
  color:            var(--color-text-primary);
}

.sidebar-logo-badge {
  font-size:        9px;
  font-weight:      var(--font-weight-bold);
  color:            var(--color-primary);
  background:       var(--color-primary-light);
  border:           0.5px solid var(--color-primary-border);
  padding:          1px 6px;
  border-radius:    var(--radius-pill);
  text-transform:   uppercase;
  letter-spacing:   0.04em;
}

.sidebar-nav {
  padding:          var(--space-3) 0;
  flex:             1;
}

.sidebar-section-label {
  font-size:        10px;
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-muted);
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  padding:          var(--space-3) var(--space-4) var(--space-1);
}

.sidebar-item {
  display:          flex;
  align-items:      center;
  gap:              var(--space-2);
  padding:          var(--space-2) var(--space-4);
  font-size:        var(--font-size-base);
  color:            var(--color-text-secondary);
  cursor:           pointer;
  border-radius:    0;
  transition:       background var(--transition-fast);
  text-decoration:  none;
  border:           none;
  background:       none;
  width:            100%;
  text-align:       left;
}

.sidebar-item:hover {
  background:       var(--color-surface-alt);
  color:            var(--color-text-primary);
}

.sidebar-item.active {
  background:       var(--color-primary-light);
  color:            var(--color-primary);
  font-weight:      var(--font-weight-medium);
}

.sidebar-item.active .sidebar-item-dot {
  background:       var(--color-primary);
}

.sidebar-item-dot {
  width:            6px;
  height:           6px;
  border-radius:    50%;
  background:       var(--color-border);
  flex-shrink:      0;
}

.sidebar-footer {
  padding:          var(--space-4);
  border-top:       0.5px solid var(--color-border);
  font-size:        var(--font-size-xs);
  color:            var(--color-text-muted);
}

/* ── SCREEN HEADER ────────────────────────────────────────────────────────── */

.screen-header {
  display:          flex;
  align-items:      flex-start;
  justify-content:  space-between;
  margin-bottom:    var(--space-6);
}

.screen-title {
  font-size:        var(--font-size-xl);
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-primary);
  margin:           0 0 var(--space-1);
}

.screen-subtitle {
  font-size:        var(--font-size-base);
  color:            var(--color-text-secondary);
  margin:           0;
  line-height:      var(--line-height-base);
}

/* ── CARDS ────────────────────────────────────────────────────────────────── */

.card {
  background:       var(--color-surface);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-xl);
  padding:          var(--space-5) 22px;
  margin-bottom:    var(--space-3);
}

.card-inset {
  background:       var(--color-surface-inset);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-lg);
  padding:          var(--space-4);
  margin-top:       var(--space-4);
}

.card-editing {
  border:           1.5px solid #c7d2fe;
}

/* ── SECTION HEADING ──────────────────────────────────────────────────────── */

.section-heading {
  font-size:        10px;
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-muted);
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  margin-bottom:    var(--space-3);
}

/* ── FORM ELEMENTS ────────────────────────────────────────────────────────── */

.label {
  display:          block;
  font-size:        var(--font-size-xs);
  color:            var(--color-text-muted);
  margin-bottom:    var(--space-1);
}

.label-required::after {
  content:          ' *';
  color:            var(--color-danger);
}

.inp {
  display:          block;
  width:            100%;
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  background:       var(--color-surface);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          8px 10px;
  box-sizing:       border-box;
  transition:       border-color var(--transition-fast);
  outline:          none;
  font-family:      var(--font-family);
}

.inp:focus {
  border-color:     var(--color-border-focus);
}

.inp::placeholder {
  color:            var(--color-text-muted);
}

.inp[disabled] {
  background:       var(--color-surface-alt);
  color:            var(--color-text-muted);
  cursor:           not-allowed;
}

select.inp {
  cursor:           pointer;
  appearance:       none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 10px center;
  padding-right:    28px;
}

.form-grid {
  display:          grid;
  grid-template-columns: 1fr 1fr;
  gap:              var(--space-3);
}

.form-grid .span-2 {
  grid-column:      1 / -1;
}

.form-row {
  margin-bottom:    var(--space-3);
}

/* ── BUTTONS ──────────────────────────────────────────────────────────────── */

.btn {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-1);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-medium);
  color:            #fff;
  background:       var(--color-primary);
  border:           none;
  padding:          10px var(--space-4);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       background var(--transition-fast);
  white-space:      nowrap;
  font-family:      var(--font-family);
}

.btn:hover    { background: var(--color-primary-hover); }
.btn:active   { background: var(--color-primary-active); }

.btn-sm {
  font-size:        var(--font-size-sm);
  padding:          8px var(--space-4);
}

.btn-full {
  width:            100%;
  justify-content:  center;
}

.btn-sec {
  display:          inline-flex;
  align-items:      center;
  gap:              var(--space-1);
  font-size:        var(--font-size-base);
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-secondary);
  background:       var(--color-surface);
  border:           0.5px solid var(--color-border);
  padding:          10px var(--space-4);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  transition:       background var(--transition-fast), border-color var(--transition-fast);
  white-space:      nowrap;
  font-family:      var(--font-family);
}

.btn-sec:hover {
  background:       var(--color-surface-alt);
  border-color:     #cbd5e1;
}

.btn-sec-sm {
  font-size:        var(--font-size-sm);
  padding:          6px var(--space-3);
}

.btn-danger {
  color:            var(--color-danger-text);
  background:       var(--color-danger-light);
  border:           0.5px solid var(--color-danger-border);
}

.btn-danger:hover {
  background:       #fee2e2;
}

.btn-ghost {
  font-size:        var(--font-size-xs);
  color:            var(--color-text-muted);
  background:       none;
  border:           none;
  cursor:           pointer;
  padding:          var(--space-1) var(--space-2);
  border-radius:    var(--radius-sm);
  font-family:      var(--font-family);
  transition:       color var(--transition-fast);
}

.btn-ghost:hover { color: var(--color-danger); }

/* ── BADGES / STATUS PILLS ────────────────────────────────────────────────── */

.badge {
  display:          inline-block;
  font-size:        10px;
  font-weight:      var(--font-weight-medium);
  padding:          2px 10px;
  border-radius:    var(--radius-pill);
  white-space:      nowrap;
}

.badge-success {
  background:       var(--color-success-light);
  color:            var(--color-success-text);
}

.badge-warning {
  background:       var(--color-warning-light);
  color:            var(--color-warning-text);
}

.badge-danger {
  background:       var(--color-danger-light);
  color:            var(--color-danger-text);
}

.badge-primary {
  background:       var(--color-primary-light);
  color:            var(--color-primary-text);
}

.badge-neutral {
  background:       var(--color-surface-inset);
  color:            var(--color-text-secondary);
}

/* ── STATUS INDICATORS ────────────────────────────────────────────────────── */

.status-dot {
  display:          inline-block;
  width:            8px;
  height:           8px;
  border-radius:    50%;
  flex-shrink:      0;
}

.status-dot-compliant  { background: var(--color-success); }
.status-dot-attention  { background: var(--color-warning); }
.status-dot-action     { background: var(--color-danger);  }

/* ── BANNERS ──────────────────────────────────────────────────────────────── */

.banner {
  border-radius:    var(--radius-lg);
  padding:          var(--space-3) var(--space-4);
  margin-bottom:    var(--space-3);
  font-size:        var(--font-size-xs);
  line-height:      var(--line-height-relaxed);
}

.banner-info {
  background:       var(--color-info-light);
  border:           0.5px solid var(--color-info-border);
  color:            var(--color-info-text);
}

.banner-warning {
  background:       var(--color-warning-light);
  border:           0.5px solid var(--color-warning-border);
  color:            var(--color-warning-text);
}

.banner-danger {
  background:       var(--color-danger-light);
  border:           0.5px solid var(--color-danger-border);
  color:            var(--color-danger-text);
}

.banner-success {
  background:       var(--color-success-light);
  border:           0.5px solid var(--color-success-border);
  color:            var(--color-success-text);
}

.banner-title {
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-medium);
  margin-bottom:    var(--space-2);
}

/* ── TABLES ───────────────────────────────────────────────────────────────── */

.table-wrap {
  background:       var(--color-surface);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-xl);
  overflow:         hidden;
  margin-bottom:    var(--space-4);
}

table {
  width:            100%;
  border-collapse:  collapse;
}

thead th {
  text-align:       left;
  font-size:        10px;
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-muted);
  text-transform:   uppercase;
  letter-spacing:   0.06em;
  padding:          var(--space-2) var(--space-4);
  border-bottom:    0.5px solid var(--color-border);
  background:       var(--color-surface-alt);
}

tbody td {
  padding:          var(--space-3) var(--space-4);
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  border-bottom:    0.5px solid var(--color-border-light);
  vertical-align:   middle;
}

tbody tr:last-child td {
  border-bottom:    none;
}

tbody tr {
  cursor:           pointer;
  transition:       background var(--transition-fast);
}

tbody tr:hover {
  background:       var(--color-surface-alt);
}

/* ── SEARCH & FILTER BAR ──────────────────────────────────────────────────── */

.toolbar {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  margin-bottom:    var(--space-4);
}

.search-wrap {
  position:         relative;
  flex:             1;
}

.search-icon {
  position:         absolute;
  left:             10px;
  top:              50%;
  transform:        translateY(-50%);
  color:            var(--color-text-muted);
  font-size:        var(--font-size-base);
  pointer-events:   none;
}

.search-inp {
  width:            100%;
  font-size:        var(--font-size-base);
  color:            var(--color-text-primary);
  background:       var(--color-surface);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          8px 10px 8px 32px;
  box-sizing:       border-box;
  outline:          none;
  transition:       border-color var(--transition-fast);
}

.search-inp:focus {
  border-color:     var(--color-border-focus);
}

.filter-tabs {
  display:          flex;
  gap:              var(--space-1);
  background:       var(--color-surface);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  padding:          3px;
}

.filter-tab {
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-secondary);
  background:       none;
  border:           none;
  padding:          5px var(--space-3);
  border-radius:    var(--radius-sm);
  cursor:           pointer;
  transition:       background var(--transition-fast), color var(--transition-fast);
  white-space:      nowrap;
  font-family:      var(--font-family);
}

.filter-tab:hover {
  background:       var(--color-surface-alt);
}

.filter-tab.active {
  background:       var(--color-primary);
  color:            #fff;
}

/* ── EMPTY STATE ──────────────────────────────────────────────────────────── */

.empty-state {
  background:       var(--color-surface-alt);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-xl);
  padding:          var(--space-8);
  text-align:       center;
}

.empty-state-title {
  font-size:        var(--font-size-base);
  color:            var(--color-text-muted);
  margin-bottom:    var(--space-1);
}

.empty-state-sub {
  font-size:        var(--font-size-xs);
  color:            var(--color-text-light);
}

/* ── CHECKBOXES ───────────────────────────────────────────────────────────── */

.check-row {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-2);
  padding:          var(--space-3);
  border:           0.5px solid var(--color-border);
  border-radius:    var(--radius-md);
  cursor:           pointer;
  background:       var(--color-surface);
  margin-bottom:    var(--space-1);
  transition:       border-color var(--transition-fast), background var(--transition-fast);
}

.check-row:hover {
  border-color:     #cbd5e1;
  background:       var(--color-surface-alt);
}

.check-row.selected {
  border-color:     var(--color-warning-border);
  background:       var(--color-warning-light);
}

.check-row.selected-primary {
  border-color:     var(--color-primary-border);
  background:       var(--color-primary-light);
}

.check-row input[type="checkbox"] {
  margin-top:       2px;
  flex-shrink:      0;
  cursor:           pointer;
}

.check-row-label {
  font-size:        var(--font-size-sm);
  font-weight:      var(--font-weight-medium);
  color:            var(--color-text-primary);
}

.check-row-desc {
  font-size:        var(--font-size-xs);
  color:            var(--color-text-muted);
  margin-top:       2px;
}

/* ── DIVIDER ──────────────────────────────────────────────────────────────── */

.divider {
  border:           none;
  border-top:       0.5px solid var(--color-border);
  margin:           var(--space-5) 0;
}

.divider-light {
  border-top-color: var(--color-border-light);
}

/* ── TOAST ────────────────────────────────────────────────────────────────── */

.toast {
  position:         fixed;
  bottom:           24px;
  left:             50%;
  transform:        translateX(-50%);
  background:       #1e293b;
  color:            #fff;
  font-size:        var(--font-size-base);
  padding:          var(--space-3) var(--space-5);
  border-radius:    var(--radius-xl);
  z-index:          9999;
  white-space:      nowrap;
  box-shadow:       var(--shadow-modal);
}

/* ── INFO BUTTON & POPOVER ────────────────────────────────────────────────── */

.info-btn {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            16px;
  height:           16px;
  border-radius:    50%;
  background:       var(--color-surface-inset);
  border:           0.5px solid var(--color-border);
  font-size:        10px;
  color:            var(--color-text-muted);
  cursor:           pointer;
  flex-shrink:      0;
  font-weight:      var(--font-weight-bold);
  user-select:      none;
}

/* ── MODAL ────────────────────────────────────────────────────────────────── */

.modal-backdrop {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       rgba(0,0,0,0.5);
  z-index:          9999;
  align-items:      center;
  justify-content:  center;
}

.modal-backdrop.open {
  display:          flex;
}

.modal {
  background:       var(--color-surface);
  border-radius:    var(--radius-2xl);
  padding:          var(--space-8);
  max-width:        480px;
  width:            90%;
  box-shadow:       var(--shadow-modal);
}

/* ── AUDIT TRAIL ──────────────────────────────────────────────────────────── */

.audit-row {
  display:          flex;
  align-items:      flex-start;
  gap:              var(--space-2);
  padding:          var(--space-2) 0;
  border-bottom:    0.5px solid var(--color-border-light);
  font-size:        var(--font-size-xs);
  color:            var(--color-text-secondary);
}

.audit-row:last-child {
  border-bottom:    none;
}

.audit-arrow {
  color:            var(--color-primary);
  flex-shrink:      0;
  font-size:        var(--font-size-xs);
}

.audit-date {
  color:            var(--color-text-muted);
  flex-shrink:      0;
  min-width:        100px;
}

/* ── COMPLIANCE SUMMARY CARD ──────────────────────────────────────────────── */

.compliance-card {
  display:          flex;
  align-items:      center;
  gap:              var(--space-3);
  padding:          var(--space-4);
  border-radius:    var(--radius-xl);
  border:           0.5px solid var(--color-border);
  background:       var(--color-surface);
  margin-bottom:    var(--space-2);
}

.compliance-card-compliant  { border-left: 3px solid var(--color-success); }
.compliance-card-attention  { border-left: 3px solid var(--color-warning); }
.compliance-card-action     { border-left: 3px solid var(--color-danger);  }

/* ── USER AVATAR ──────────────────────────────────────────────────────────── */

.avatar {
  width:            32px;
  height:           32px;
  border-radius:    50%;
  background:       var(--color-primary-light);
  color:            var(--color-primary-text);
  display:          flex;
  align-items:      center;
  justify-content:  center;
  font-size:        var(--font-size-xs);
  font-weight:      var(--font-weight-bold);
  flex-shrink:      0;
}

/* ── UTILITY ──────────────────────────────────────────────────────────────── */

.flex         { display: flex; }
.flex-center  { display: flex; align-items: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1        { gap: var(--space-1); }
.gap-2        { gap: var(--space-2); }
.gap-3        { gap: var(--space-3); }
.gap-4        { gap: var(--space-4); }
.mt-3         { margin-top: var(--space-3); }
.mt-4         { margin-top: var(--space-4); }
.mb-3         { margin-bottom: var(--space-3); }
.mb-4         { margin-bottom: var(--space-4); }
.text-muted   { color: var(--color-text-muted); }
.text-sm      { font-size: var(--font-size-sm); }
.text-xs      { font-size: var(--font-size-xs); }
.font-medium  { font-weight: var(--font-weight-medium); }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }