/* ============================================================
   GRAPHITE DESIGN SYSTEM — COMPONENTS
   Depends on tokens.css. Uses ROLE tokens so all components
   respond to [data-theme="dark"].
   ============================================================ */

.gds, .gds * { box-sizing: border-box; }
.gds {
  font-family: var(--font-sans);
  color: var(--text-primary);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  --btn-h: 40px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
  height: var(--btn-h); padding: 0 var(--sp-5);
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold);
  line-height: 1; letter-spacing: 0.005em;
  border-radius: var(--r-md); border: 1px solid transparent;
  cursor: pointer; white-space: nowrap; user-select: none;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn .ico { width: 16px; height: 16px; display: inline-flex; }

.btn--primary { background: var(--blue-500); color: #fff; }
.btn--primary:hover { background: var(--blue-600); }
.btn--primary:active { background: var(--blue-700); }

.btn--secondary { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); box-shadow: var(--shadow-xs); }
.btn--secondary:hover { background: var(--bg-sunken); border-color: var(--text-tertiary); }

.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-sunken); color: var(--text-primary); }

.btn--danger { background: var(--danger-500); color: #fff; }
.btn--danger:hover { background: var(--danger-600); }

.btn--inverse { background: var(--bg-inverse); color: var(--text-inverse); }
.btn--inverse:hover { opacity: 0.88; }

.btn--sm { --btn-h: 32px; padding: 0 var(--sp-4); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.btn--lg { --btn-h: 48px; padding: 0 var(--sp-7); font-size: var(--fs-body-lg); }
.btn--icon { padding: 0; width: var(--btn-h); }
.btn--block { display: flex; width: 100%; }

/* =========================================================
   FORM CONTROLS
   ========================================================= */
.field { display: flex; flex-direction: column; gap: var(--sp-3); }
.field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-primary); }
.field__hint { font-size: var(--fs-xs); color: var(--text-tertiary); }
.field__error { font-size: var(--fs-xs); color: var(--soft-danger-fg); font-weight: var(--fw-medium); }

.input, .select, .textarea {
  font-family: var(--font-sans); font-size: var(--fs-body); color: var(--text-primary);
  background: var(--field-bg); border: 1px solid var(--border-strong); border-radius: var(--r-md);
  height: 40px; padding: 0 var(--sp-4); width: 100%;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.textarea { height: auto; padding: var(--sp-4); min-height: 92px; resize: vertical; line-height: var(--lh-normal); }
.input::placeholder, .textarea::placeholder { color: var(--text-tertiary); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-tertiary); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--blue-500); box-shadow: 0 0 0 3px var(--focus-ring); }
.input--invalid { border-color: var(--danger-500); }
.input--invalid:focus { box-shadow: 0 0 0 3px var(--soft-danger-bg); }
.input:disabled { background: var(--bg-sunken); color: var(--text-tertiary); cursor: not-allowed; }

.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%238b93a1' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right var(--sp-4) center; padding-right: var(--sp-9);
}

.input-group { position: relative; display: flex; align-items: center; }
.input-group .input { padding-left: var(--sp-9); }
.input-group .ig-ico { position: absolute; left: var(--sp-4); width: 16px; height: 16px; color: var(--text-tertiary); pointer-events: none; }

/* checkbox + radio */
.check { display: inline-flex; align-items: center; gap: var(--sp-3); cursor: pointer; font-size: var(--fs-body); user-select: none; color: var(--text-primary); }
.check input { position: absolute; opacity: 0; width: 0; height: 0; }
.check__box {
  width: 18px; height: 18px; border-radius: var(--r-xs); border: 1.5px solid var(--border-strong);
  background: var(--field-bg); display: grid; place-items: center; transition: all var(--dur-fast) var(--ease-out); flex-shrink: 0;
}
.check__box--radio { border-radius: var(--r-full); }
.check__box::after { content: ""; opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.check input:checked + .check__box { background: var(--blue-500); border-color: var(--blue-500); }
.check input:checked + .check__box:not(.check__box--radio)::after {
  width: 10px; height: 6px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translateY(-1px); opacity: 1;
}
.check input:checked + .check__box--radio::after { width: 8px; height: 8px; border-radius: var(--r-full); background: #fff; opacity: 1; }
.check input:focus-visible + .check__box { box-shadow: 0 0 0 3px var(--focus-ring); }

/* toggle */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle__track {
  width: 40px; height: 23px; border-radius: var(--r-full); background: var(--border-strong);
  transition: background var(--dur-base) var(--ease-out); position: relative; flex-shrink: 0;
}
.toggle__track::after {
  content: ""; position: absolute; top: 2.5px; left: 2.5px; width: 18px; height: 18px; border-radius: var(--r-full);
  background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-out);
}
.toggle input:checked + .toggle__track { background: var(--blue-500); }
.toggle input:checked + .toggle__track::after { transform: translateX(17px); }
.toggle input:focus-visible + .toggle__track { box-shadow: 0 0 0 3px var(--focus-ring); }

/* =========================================================
   BADGES / STATUS
   ========================================================= */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1;
  padding: 5px var(--sp-3); border-radius: var(--r-full); white-space: nowrap;
}
.badge--neutral { background: var(--soft-neutral-bg); color: var(--soft-neutral-fg); }
.badge--blue    { background: var(--soft-blue-bg);    color: var(--soft-blue-fg); }
.badge--cyan    { background: var(--soft-cyan-bg);    color: var(--soft-cyan-fg); }
.badge--success { background: var(--soft-success-bg); color: var(--soft-success-fg); }
.badge--warning { background: var(--soft-warning-bg); color: var(--soft-warning-fg); }
.badge--danger  { background: var(--soft-danger-bg);  color: var(--soft-danger-fg); }
.badge--solid   { background: var(--bg-inverse); color: var(--text-inverse); }
.badge .dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; }

.tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: 4px var(--sp-3); border-radius: var(--r-sm); background: var(--bg-sunken); color: var(--text-secondary);
  border: 1px solid var(--border);
}

/* =========================================================
   CARDS
   ========================================================= */
.card {
  background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}
.card--pad { padding: var(--sp-7); }
.card--interactive { transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); cursor: pointer; }
.card--interactive:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5); padding: var(--sp-6) var(--sp-7); border-bottom: 1px solid var(--border); }
.card__title { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-h3); letter-spacing: -0.01em; color: var(--text-primary); }
.card__body { padding: var(--sp-7); }

/* =========================================================
   TABLE
   ========================================================= */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table thead th {
  text-align: left; font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-tertiary);
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg-sunken);
}
.table tbody td { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); color: var(--text-secondary); }
.table tbody td:first-child { color: var(--text-primary); font-weight: var(--fw-medium); }
.table tbody tr { transition: background var(--dur-fast) var(--ease-out); }
.table tbody tr:hover { background: var(--row-hover); }
.table td .mono { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--text-secondary); }
.table .num { text-align: right; font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* =========================================================
   TABS
   ========================================================= */
.tabs { display: flex; gap: var(--sp-2); border-bottom: 1px solid var(--border); }
.tab {
  appearance: none; background: none; border: none; cursor: pointer;
  font-family: var(--font-sans); font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-secondary);
  padding: var(--sp-4) var(--sp-3); position: relative; transition: color var(--dur-fast) var(--ease-out);
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--text-link); }
.tab[aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue-500); border-radius: 2px; }

/* =========================================================
   ALERTS
   ========================================================= */
.alert { display: flex; gap: var(--sp-4); padding: var(--sp-5); border-radius: var(--r-md); border: 1px solid transparent; font-size: var(--fs-sm); }
.alert__ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.alert__title { font-weight: var(--fw-semibold); margin-bottom: 2px; color: var(--text-primary); }
.alert__msg { color: var(--text-secondary); }
.alert--info    { background: var(--soft-blue-bg);    border-color: color-mix(in srgb, var(--blue-500) 32%, transparent); }
.alert--info .alert__ico    { color: var(--soft-blue-fg); }
.alert--success { background: var(--soft-success-bg); border-color: color-mix(in srgb, var(--success-500) 32%, transparent); }
.alert--success .alert__ico { color: var(--soft-success-fg); }
.alert--warning { background: var(--soft-warning-bg); border-color: color-mix(in srgb, var(--warning-500) 32%, transparent); }
.alert--warning .alert__ico { color: var(--soft-warning-fg); }
.alert--danger  { background: var(--soft-danger-bg);  border-color: color-mix(in srgb, var(--danger-500) 32%, transparent); }
.alert--danger .alert__ico  { color: var(--soft-danger-fg); }

/* =========================================================
   AVATAR
   ========================================================= */
.avatar {
  width: 36px; height: 36px; border-radius: var(--r-full); background: var(--avatar-bg); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display);
  font-weight: var(--fw-bold); font-size: var(--fs-sm); flex-shrink: 0; overflow: hidden;
}
.avatar--sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.avatar--lg { width: 48px; height: 48px; font-size: var(--fs-body-lg); }
.avatar-group { display: flex; }
.avatar-group .avatar { border: 2px solid var(--bg-surface); margin-left: -10px; }
.avatar-group .avatar:first-child { margin-left: 0; }

/* =========================================================
   PROGRESS
   ========================================================= */
.progress { height: 8px; background: var(--bg-sunken); border: 1px solid var(--border); border-radius: var(--r-full); overflow: hidden; }
.progress__bar { height: 100%; background: var(--blue-500); border-radius: var(--r-full); transition: width var(--dur-slow) var(--ease-out); }
.progress__bar--cyan { background: var(--cyan-500); }
.progress__bar--success { background: var(--success-500); }

/* =========================================================
   TOOLTIP
   ========================================================= */
.tooltip { position: relative; display: inline-flex; }
.tooltip__bubble {
  position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  background: var(--bg-inverse); color: var(--text-inverse); font-size: var(--fs-xs); font-weight: var(--fw-medium);
  padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); white-space: nowrap; box-shadow: var(--shadow-lg);
  opacity: 0; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out); z-index: 5;
}
.tooltip__bubble::after { content: ""; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: var(--bg-inverse); }
.tooltip:hover .tooltip__bubble { opacity: 1; }

/* =========================================================
   BREADCRUMB + PAGINATION
   ========================================================= */
.breadcrumb { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-sm); color: var(--text-tertiary); }
.breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.breadcrumb a:hover { color: var(--text-link); }
.breadcrumb .sep { color: var(--border-strong); }
.breadcrumb .current { color: var(--text-primary); font-weight: var(--fw-semibold); }

.pagination { display: inline-flex; gap: var(--sp-2); }
.pagination .pg {
  min-width: 34px; height: 34px; padding: 0 var(--sp-3); display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-secondary); background: var(--bg-surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: all var(--dur-fast) var(--ease-out);
}
.pagination .pg:hover { border-color: var(--text-tertiary); background: var(--bg-sunken); }
.pagination .pg[aria-current="true"] { background: var(--bg-inverse); color: var(--text-inverse); border-color: var(--bg-inverse); }