/* =============================================================================
   GSMOne Design System — Component Layer
   -----------------------------------------------------------------------------
   Ready-to-use classes built ENTIRELY on the tokens in gsmone-design-system.css.
   Load order: gsmone-design-system.css  →  gsmone-components.css  →  page CSS.

   Every class here is prefixed `ds-` to avoid collisions with legacy styles
   during incremental migration. Nothing here hardcodes a value — change a token
   once and every component updates.
   ============================================================================= */

/* ---------- Base / reset-lite ---------- */
.ds-root, body.ds {
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  line-height: var(--ds-leading-normal);
  color: var(--ds-text-primary);
  background: var(--ds-surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- Typography helpers ---------- */
.ds-h1 { font-size: var(--ds-text-4xl); font-weight: var(--ds-font-weight-bold);
         line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); }
.ds-h2 { font-size: var(--ds-text-2xl); font-weight: var(--ds-font-weight-bold);
         line-height: var(--ds-leading-tight); letter-spacing: var(--ds-tracking-tight); }
.ds-h3 { font-size: var(--ds-text-xl); font-weight: var(--ds-font-weight-semibold);
         line-height: var(--ds-leading-snug); }
.ds-body      { font-size: var(--ds-text-base); }
.ds-body-sm   { font-size: var(--ds-text-sm); }
.ds-caption   { font-size: var(--ds-text-xs); color: var(--ds-text-secondary); }
.ds-muted     { color: var(--ds-text-secondary); }
.ds-mono      { font-family: var(--ds-font-mono); }
.ds-label     { font-size: var(--ds-text-xs); font-weight: var(--ds-font-weight-semibold);
                text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
                color: var(--ds-text-secondary); }

/* ---------- Buttons ---------- */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  height: var(--ds-btn-height); padding: 0 var(--ds-btn-padding-x);
  font-family: var(--ds-font-sans); font-size: var(--ds-btn-font); font-weight: var(--ds-btn-weight);
  line-height: 1; border: 1px solid transparent; border-radius: var(--ds-btn-radius);
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: var(--ds-transition-base);
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-shadow-focus); }
.ds-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ds-btn-sm { height: var(--ds-btn-height-sm); font-size: var(--ds-text-xs); }
.ds-btn-lg { height: var(--ds-btn-height-lg); font-size: var(--ds-text-base); padding: 0 var(--ds-space-6); }
.ds-btn-block { width: 100%; }

.ds-btn-primary   { background: var(--ds-color-brand); color: var(--ds-text-inverse); box-shadow: var(--ds-shadow-xs); }
.ds-btn-primary:hover:not(:disabled)   { background: var(--ds-color-brand-hover); }
.ds-btn-secondary { background: var(--ds-surface-card); color: var(--ds-text-primary); border-color: var(--ds-border-strong); }
.ds-btn-secondary:hover:not(:disabled) { background: var(--ds-surface-hover); }
.ds-btn-accent    { background: var(--ds-color-accent); color: var(--ds-text-inverse); }
.ds-btn-accent:hover:not(:disabled)    { background: var(--ds-color-accent-hover); }
.ds-btn-danger    { background: var(--ds-color-danger-hover); color: var(--ds-text-inverse); }
.ds-btn-danger:hover:not(:disabled)    { background: var(--ds-color-danger); }
.ds-btn-ghost     { background: transparent; color: var(--ds-text-secondary); }
.ds-btn-ghost:hover:not(:disabled)     { background: var(--ds-surface-sunken); color: var(--ds-text-primary); }

/* ---------- Inputs / forms ---------- */
.ds-field { display: flex; flex-direction: column; gap: var(--ds-space-2); }
.ds-input, .ds-select, .ds-textarea {
  width: 100%; height: var(--ds-input-height); padding: 0 var(--ds-input-padding-x);
  font-family: var(--ds-font-sans); font-size: var(--ds-input-font); color: var(--ds-text-primary);
  background: var(--ds-surface-card); border: var(--ds-input-border); border-radius: var(--ds-input-radius);
  transition: var(--ds-transition-base);
}
.ds-textarea { height: auto; min-height: calc(var(--ds-input-height) * 2); padding: var(--ds-space-3) var(--ds-input-padding-x); line-height: var(--ds-leading-normal); resize: vertical; }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-text-tertiary); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
  outline: none; border-color: var(--ds-border-focus); box-shadow: var(--ds-shadow-focus);
}
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { background: var(--ds-surface-sunken); color: var(--ds-text-tertiary); cursor: not-allowed; }
.ds-input-error { border-color: var(--ds-color-danger); }
.ds-input-error:focus { box-shadow: var(--ds-shadow-focus-danger); }
.ds-field-hint  { font-size: var(--ds-text-xs); color: var(--ds-text-secondary); }
.ds-field-error { font-size: var(--ds-text-xs); color: var(--ds-color-danger-text); }
.ds-input-sm { height: var(--ds-input-height-sm); }
.ds-input-lg { height: var(--ds-input-height-lg); }

/* ---------- Cards ---------- */
.ds-card {
  background: var(--ds-card-bg); border: var(--ds-card-border);
  border-radius: var(--ds-card-radius); box-shadow: var(--ds-card-shadow);
  padding: var(--ds-card-padding);
}
.ds-card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-4); }
.ds-card-title  { font-size: var(--ds-text-lg); font-weight: var(--ds-font-weight-semibold); }
.ds-card-hover  { transition: var(--ds-transition-base); }
.ds-card-hover:hover { box-shadow: var(--ds-shadow-md); transform: translateY(-1px); }

/* ---------- Modals ---------- */
.ds-modal-backdrop {
  position: fixed; inset: 0; background: var(--ds-modal-backdrop);
  display: flex; align-items: center; justify-content: center;
  z-index: var(--ds-z-modal); padding: var(--ds-space-4);
  animation: ds-fade-in var(--ds-duration-fast) var(--ds-ease-out);
}
.ds-modal {
  width: var(--ds-modal-width); max-width: 100%; max-height: 90vh; overflow: auto;
  background: var(--ds-surface-card); border-radius: var(--ds-modal-radius);
  box-shadow: var(--ds-modal-shadow); padding: var(--ds-modal-padding);
  animation: ds-modal-in var(--ds-duration-normal) var(--ds-ease-emphasized);
}
.ds-modal-sm { width: var(--ds-modal-width-sm); }
.ds-modal-lg { width: var(--ds-modal-width-lg); }
.ds-modal-xl { width: var(--ds-modal-width-xl); }
.ds-modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--ds-space-4); }
.ds-modal-title  { font-size: var(--ds-text-xl); font-weight: var(--ds-font-weight-semibold); }
.ds-modal-footer { display: flex; gap: var(--ds-space-3); justify-content: flex-end; margin-top: var(--ds-space-6); }

/* ---------- Tables ---------- */
.ds-table { width: 100%; border-collapse: collapse; font-size: var(--ds-text-sm); }
.ds-table thead th {
  text-align: left; padding: var(--ds-table-cell-padding);
  background: var(--ds-table-header-bg); color: var(--ds-table-header-color);
  font-size: var(--ds-text-xs); font-weight: var(--ds-font-weight-semibold);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
  border-bottom: var(--ds-table-border);
}
.ds-table tbody td { padding: var(--ds-table-cell-padding); height: var(--ds-table-row-height); border-bottom: var(--ds-table-border); color: var(--ds-text-primary); }
.ds-table tbody tr:hover { background: var(--ds-surface-hover); }
.ds-table-striped tbody tr:nth-child(even) { background: var(--ds-table-stripe); }

/* ---------- Badges ---------- */
.ds-badge {
  display: inline-flex; align-items: center; gap: var(--ds-space-1);
  height: var(--ds-badge-height); padding: 0 var(--ds-badge-padding-x);
  font-size: var(--ds-badge-font); font-weight: var(--ds-badge-weight);
  border-radius: var(--ds-badge-radius); line-height: 1; white-space: nowrap;
}
.ds-badge-neutral { background: var(--ds-surface-sunken);          color: var(--ds-text-secondary); }
.ds-badge-brand   { background: var(--ds-color-brand-subtle);      color: var(--ds-color-brand-700); }
.ds-badge-success { background: var(--ds-color-success-subtle);    color: var(--ds-color-success-text); }
.ds-badge-warning { background: var(--ds-color-warning-subtle);    color: var(--ds-color-warning-text); }
.ds-badge-danger  { background: var(--ds-color-danger-subtle);     color: var(--ds-color-danger-text); }
.ds-badge-info    { background: var(--ds-color-info-subtle);       color: var(--ds-color-info-text); }

/* ---------- Alerts ---------- */
.ds-alert {
  display: flex; gap: var(--ds-space-3); align-items: flex-start;
  padding: var(--ds-space-4); border-radius: var(--ds-radius-md);
  border: 1px solid transparent; font-size: var(--ds-text-sm);
}
.ds-alert-icon { flex-shrink: 0; width: var(--ds-icon-md); height: var(--ds-icon-md); margin-top: 1px; }
.ds-alert-success { background: var(--ds-color-success-subtle); border-color: var(--ds-color-success); color: var(--ds-color-success-text); }
.ds-alert-warning { background: var(--ds-color-warning-subtle); border-color: var(--ds-color-warning); color: var(--ds-color-warning-text); }
.ds-alert-danger  { background: var(--ds-color-danger-subtle);  border-color: var(--ds-color-danger);  color: var(--ds-color-danger-text); }
.ds-alert-info    { background: var(--ds-color-info-subtle);    border-color: var(--ds-color-info);    color: var(--ds-color-info-text); }

/* ---------- Toasts ---------- */
.ds-toast {
  position: fixed; bottom: var(--ds-space-6); right: var(--ds-space-6);
  z-index: var(--ds-z-toast); padding: var(--ds-space-3) var(--ds-space-5);
  border-radius: var(--ds-radius-md); font-size: var(--ds-text-sm); font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-inverse); box-shadow: var(--ds-shadow-lg);
  animation: ds-toast-in var(--ds-duration-normal) var(--ds-ease-emphasized);
}
.ds-toast-success { background: var(--ds-color-success-hover); }
.ds-toast-danger  { background: var(--ds-color-danger-hover); }

/* ---------- Icons ---------- */
.ds-icon    { width: var(--ds-icon-md); height: var(--ds-icon-md); flex-shrink: 0; }
.ds-icon-sm { width: var(--ds-icon-sm); height: var(--ds-icon-sm); }
.ds-icon-lg { width: var(--ds-icon-lg); height: var(--ds-icon-lg); }

/* ---------- Keyframes (all respect prefers-reduced-motion via 0ms tokens) ---------- */
@keyframes ds-fade-in  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-modal-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes ds-toast-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---------- Responsive: stack table to cards on mobile (opt-in) ---------- */
@media (max-width: 767px) {
  .ds-modal-footer { flex-direction: column-reverse; }
  .ds-modal-footer .ds-btn { width: 100%; }
}