/* ================================================================
   LEAST LMS — Components
   All class selectors. No element-level selectors.
   Classes do not conflict with legacy css-prefixed class names.
   ================================================================ */

/* ================================================================
   BUTTONS
   ================================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-tight);
  min-height: 36px;         /* meets 44px touch target with padding */
  border-radius: var(--radius-base);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  user-select: none;
  vertical-align: middle;
  transition:
    background-color var(--transition-fast),
    border-color     var(--transition-fast),
    color            var(--transition-fast),
    box-shadow       var(--transition-fast);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.btn:disabled,
.btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primary — filled accent */
.btn-primary {
  background-color: var(--color-accent);
  border-color:     var(--color-accent);
  color:            var(--color-text-inverse);
}
.btn-primary:hover,
.btn-primary:visited:hover {
  background-color: var(--color-accent-hover);
  border-color:     var(--color-accent-hover);
  color:            var(--color-text-inverse);
}
.btn-primary:active {
  background-color: var(--color-accent-active);
  border-color:     var(--color-accent-active);
}

/* Secondary — outlined neutral */
.btn-secondary {
  background-color: var(--color-surface);
  border-color:     var(--color-border-strong);
  color:            var(--color-text);
}
.btn-secondary:hover,
.btn-secondary:visited:hover {
  background-color: var(--color-bg-subtle);
  border-color:     var(--color-border-strong);
  color:            var(--color-text);
}

/* Ghost — no border, accent text */
.btn-ghost {
  background-color: transparent;
  border-color:     transparent;
  color:            var(--color-accent-text);
}
.btn-ghost:hover,
.btn-ghost:visited:hover {
  background-color: var(--color-accent-subtle);
  color:            var(--color-accent-text);
}

/* Danger — destructive action */
.btn-danger {
  background-color: var(--color-danger);
  border-color:     var(--color-danger);
  color:            var(--color-text-inverse);
}
.btn-danger:hover,
.btn-danger:visited:hover {
  background-color: #b91c1c;
  border-color:     #b91c1c;
  color:            var(--color-text-inverse);
}

/* Size modifiers */
.btn-sm {
  padding:     var(--space-1) var(--space-3);
  font-size:   var(--font-size-sm);
  min-height:  30px;
  border-radius: var(--radius-sm);
}

.btn-lg {
  padding:     var(--space-3) var(--space-6);
  font-size:   var(--font-size-md);
  min-height:  44px;
}

/* Full-width */
.btn-block {
  width: 100%;
}


/* ================================================================
   FORMS
   ================================================================ */

.ui-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}

.ui-label {
  display: inline-block;
  font-family:     var(--font-family);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--letter-spacing-wider);
  text-transform:  uppercase;
  color:           var(--color-text);
  margin-bottom:   var(--space-1);
}

.ui-label abbr[title] {
  text-decoration: none;
  color: var(--color-danger);
  margin-left: 2px;
}

/* Highlight label when any field inside the group has focus */
.ui-form-group:focus-within .ui-label {
  color: var(--color-accent-text);
}

.ui-input {
  display: block;
  width: 100%;
  font-family:    var(--font-family);
  font-size:      var(--font-size-base);
  font-weight:    var(--font-weight-normal);
  line-height:    var(--line-height-base);
  color:          var(--color-text);
  background-color: var(--color-surface);
  border: 1px solid var(--color-border-strong);
  border-radius:  var(--radius-base);
  padding:        var(--space-2) var(--space-3);
  min-height:     36px;
  transition:
    border-color var(--transition-fast),
    box-shadow   var(--transition-fast);
  appearance:         none;
  -webkit-appearance: none;
}

.ui-input::placeholder {
  color: var(--color-text-subtle);
}

.ui-input:hover {
  border-color: var(--color-text-muted);
}

.ui-input:focus {
  outline:          none;
  border-color:     var(--color-accent);
  box-shadow:       var(--shadow-focus);
  background-color: var(--color-surface);
}

.ui-input:disabled {
  background-color: var(--color-bg-muted);
  color:            var(--color-text-subtle);
  cursor:           not-allowed;
}

.ui-input-error {
  border-color: var(--color-danger) !important;
}

.ui-input-error:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.2) !important;
}

.ui-form-hint {
  font-size:  var(--font-size-sm);
  color:      var(--color-text-muted);
  margin-top: var(--space-1);
}

.ui-form-error {
  font-size:  var(--font-size-sm);
  color:      var(--color-danger);
  margin-top: var(--space-1);
}

/* Inline form row */
.ui-form-row {
  display: flex;
  gap:         var(--space-4);
  flex-wrap:   wrap;
  align-items: flex-end;
}

.ui-form-row > .ui-form-group {
  flex: 1;
  min-width: 180px;
  margin-bottom: 0;
}


/* ================================================================
   CARDS
   ================================================================ */

.ui-card {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius:    var(--radius-md);
  box-shadow:       var(--shadow-xs);
  overflow:         hidden;
  transition:
    box-shadow   var(--transition-base),
    border-color var(--transition-base),
    transform    var(--transition-base);
}

.ui-card-header {
  padding:         var(--space-4) var(--space-5);
  border-bottom:   1px solid var(--color-border-strong);
  font-size:       var(--font-size-md);
  font-weight:     var(--font-weight-bold);
  color:           var(--color-text);
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-3);
}

.ui-card-body {
  padding: var(--space-5);
}

.ui-card-body-flush {
  padding: 0;
}

.ui-card-footer {
  padding:          var(--space-3) var(--space-5);
  border-top:       1px solid var(--color-border);
  background-color: var(--color-bg-subtle);
  display:          flex;
  align-items:      center;
  gap:              var(--space-2);
}

/* Subtle card — lighter border, no shadow */
.ui-card-subtle {
  background-color: var(--color-bg-subtle);
  border: 1px solid var(--color-border);
  border-radius:    var(--radius-md);
  box-shadow:       none;
  padding:          var(--space-5);
}

/* Opt-in hover elevation — only when .ui-card-hover is present */
.ui-card-hover:hover {
  box-shadow:   var(--shadow-sm);
  border-color: var(--color-border-strong);
}

/* Interactive card — focusable via tabindex="0" or <a> wrapper */
.ui-card-interactive:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}


/* ================================================================
   TABLES
   ================================================================ */

/* Responsive scroll container — opt-in, never forced globally.
   PHP usage:
     <div class="ui-table-wrapper">
       <table class="ui-table">...</table>
     </div> */
.ui-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.ui-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     var(--font-family);
  font-size:       var(--font-size-base);
  color:           var(--color-text);
}

.ui-table thead tr {
  background-color: var(--color-bg-subtle);
}

.ui-table th {
  padding:         var(--space-2) var(--space-4);
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--letter-spacing-wider);
  text-transform:  uppercase;
  color:           var(--color-text-muted);
  border-bottom:   1px solid var(--color-border);
  text-align:      left;
  white-space:     nowrap;
}

.ui-table td {
  padding:        var(--space-3) var(--space-4);
  border-bottom:  1px solid var(--color-border);
  vertical-align: middle;
}

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

.ui-table tbody tr:hover td {
  background-color: var(--color-bg-subtle);
  transition: background-color var(--transition-fast);
}

/* Compact modifier */
.ui-table-sm th,
.ui-table-sm td {
  padding: var(--space-1) var(--space-3);
}

/* Wrapped in a card: remove outer border */
.ui-card > .ui-table {
  border: none;
}


/* ================================================================
   NAVIGATION
   ================================================================ */

.ui-nav {
  display:     flex;
  align-items: center;
  gap:         var(--space-1);
  list-style:  none;
  margin:      0;
  padding:     0;
}

.ui-nav-item {
  display: flex;
}

.ui-nav-link {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-3);
  font-family:     var(--font-family);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-muted);
  text-decoration: none;
  border-radius:   var(--radius-base);
  transition:
    color            var(--transition-fast),
    background-color var(--transition-fast);
  white-space:     nowrap;
}

.ui-nav-link:hover,
.ui-nav-link:visited:hover {
  color:            var(--color-text);
  background-color: var(--color-bg-muted);
}

.ui-nav-link.active,
.ui-nav-link[aria-current="page"] {
  color:            var(--color-accent-text);
  background-color: var(--color-accent-subtle);
}

.ui-nav-link:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}


/* ================================================================
   SIDEBAR
   ================================================================ */

.ui-sidebar {
  width:            var(--sidebar-width);
  background-color: var(--color-surface);
  border-right:     1px solid var(--color-border);
  padding:          var(--space-5) var(--space-3);
  display:          flex;
  flex-direction:   column;
  gap:              2px;
  overflow-y:       auto;
  flex-shrink:      0;
}

.ui-sidebar-title {
  font-size:       var(--font-size-xs);
  font-weight:     var(--font-weight-semibold);
  letter-spacing:  var(--letter-spacing-wider);
  text-transform:  uppercase;
  color:           var(--color-text-subtle);
  padding:         var(--space-3) var(--space-3) var(--space-2);
}

.ui-sidebar-link {
  display:         flex;
  align-items:     center;
  gap:             var(--space-2);
  padding:         var(--space-2) var(--space-3);
  font-family:     var(--font-family);
  font-size:       var(--font-size-sm);
  font-weight:     var(--font-weight-medium);
  color:           var(--color-text-muted);
  text-decoration: none;
  border-radius:   var(--radius-base);
  transition:
    color            var(--transition-fast),
    background-color var(--transition-fast);
}

.ui-sidebar-link:hover,
.ui-sidebar-link:visited:hover {
  color:            var(--color-text);
  background-color: var(--color-bg-muted);
}

.ui-sidebar-link.active,
.ui-sidebar-link[aria-current="page"] {
  color:            var(--color-accent-text);
  background-color: var(--color-accent-subtle);
  font-weight:      var(--font-weight-semibold);
}

.ui-sidebar-link:focus-visible {
  outline:    none;
  box-shadow: var(--shadow-focus);
}

.ui-sidebar-divider {
  height:     1px;
  background: var(--color-border);
  margin:     var(--space-2) var(--space-3);
  border:     none;
}

@media (max-width: 768px) {
  .ui-sidebar {
    width:          100%;
    border-right:   none;
    border-bottom:  1px solid var(--color-border);
    flex-direction: row;
    flex-wrap:      wrap;
    padding:        var(--space-2);
    gap:            var(--space-1);
  }
  .ui-sidebar-title {
    display: none;
  }
  .ui-sidebar-divider {
    display: none;
  }
}


/* ================================================================
   BADGES
   ================================================================ */

.ui-badge {
  display:        inline-flex;
  align-items:    center;
  padding:        2px var(--space-2);
  font-family:    var(--font-family);
  font-size:      var(--font-size-xs);
  font-weight:    var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  border-radius:  var(--radius-full);
  white-space:    nowrap;
  background-color: var(--color-bg-muted);
  color:          var(--color-text-muted);
}

.ui-badge-success {
  background-color: var(--color-success-subtle);
  color:            var(--color-success);
}
.ui-badge-warning {
  background-color: var(--color-warning-subtle);
  color:            var(--color-warning-text);
}
.ui-badge-danger {
  background-color: var(--color-danger-subtle);
  color:            var(--color-danger);
}
.ui-badge-accent {
  background-color: var(--color-accent-subtle);
  color:            var(--color-accent-text);
}


/* ================================================================
   ALERTS
   ================================================================ */

.ui-alert {
  display:       flex;
  gap:           var(--space-3);
  padding:       var(--space-4);
  border-radius: var(--radius-md);
  border:        1px solid transparent;
  font-size:     var(--font-size-base);
  line-height:   var(--line-height-base);
  background-color: var(--color-bg-subtle);
  border-color:     var(--color-border);
  color:            var(--color-text);
}
.ui-alert-success {
  background-color: var(--color-success-subtle);
  border-color:     var(--color-success);
  color:            var(--color-success);
}
.ui-alert-warning {
  background-color: var(--color-warning-subtle);
  border-color:     var(--color-warning-text);
  color:            var(--color-warning-text);
}
.ui-alert-danger {
  background-color: var(--color-danger-subtle);
  border-color:     var(--color-danger);
  color:            var(--color-danger);
}


/* ================================================================
   PAGE HEADER
   ================================================================ */

.ui-page-header {
  display:        flex;
  align-items:    flex-start;
  justify-content: space-between;
  gap:            var(--space-4);
  margin-bottom:  var(--space-6);
  flex-wrap:      wrap;
}

.ui-page-header-title {
  font-size:      var(--font-size-2xl);
  font-weight:    var(--font-weight-bold);
  color:          var(--color-text);
  letter-spacing: var(--letter-spacing-tight);
  line-height:    var(--line-height-tight);
  margin:         0;
}

.ui-page-header-subtitle {
  font-size:    var(--font-size-base);
  color:        var(--color-text-muted);
  margin-top:   var(--space-1);
}

.ui-page-header-actions {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .ui-page-header {
    flex-direction: column;
    margin-bottom:  var(--space-5);
  }
  .ui-page-header-title {
    font-size: var(--font-size-xl);
  }
  .ui-page-header-actions {
    width: 100%;
  }
}