/* =============================================================================
   GIC Portal Design System — Component Styles v1.0
   Built on top of tokens.css
   ========================================================================== */

/* ---------- Reset hardening ---------- */
button { font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ---------- Buttons ---------- */
.gic-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  font-size: var(--gic-text-body);
  font-weight: var(--gic-w-bold);
  border: none;
  border-radius: var(--gic-radius-full);
  cursor: pointer;
  transition: transform var(--gic-dur-fast) var(--gic-ease-out),
              background var(--gic-dur-base) var(--gic-ease-out),
              box-shadow var(--gic-dur-base) var(--gic-ease-out),
              color var(--gic-dur-base) var(--gic-ease-out);
  white-space: nowrap;
  user-select: none;
}
.gic-btn:focus-visible { outline: none; box-shadow: var(--gic-focus-ring); }
.gic-btn:active { transform: translateY(1px); }

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

.gic-btn--secondary {
  background: var(--gic-surface);
  color: var(--gic-ink-900);
  border: 1.5px solid var(--gic-ink-200);
}
.gic-btn--secondary:hover { border-color: var(--gic-ink-900); }

.gic-btn--ghost {
  background: transparent;
  color: var(--gic-ink-900);
}
.gic-btn--ghost:hover { background: var(--gic-ink-100); }

.gic-btn--icon {
  width: 44px; height: 44px; padding: 0;
  border-radius: var(--gic-radius-full);
  background: var(--gic-accent);
  color: var(--gic-accent-on);
}
.gic-btn--icon:hover { background: var(--gic-accent-hover); }

.gic-btn--sm { height: 32px; padding: 0 14px; font-size: var(--gic-text-small); }
.gic-btn--lg { height: 52px; padding: 0 28px; font-size: 18px; }

.gic-btn[disabled] {
  opacity: 0.4;
  cursor: not-allowed;
}

/* The signature round arrow tag inside pill buttons */
.gic-btn .gic-arrow {
  width: 28px; height: 28px;
  background: var(--gic-accent);
  color: var(--gic-accent-on);
  border-radius: var(--gic-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  margin-right: -8px;
}
.gic-btn--primary .gic-arrow,
.gic-btn--secondary .gic-arrow { background: var(--gic-accent); color: var(--gic-accent-on); }

/* ---------- Inputs ---------- */
.gic-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gic-field__label {
  font-size: var(--gic-text-small);
  font-weight: var(--gic-w-medium);
  color: var(--gic-ink-700);
}
.gic-input,
.gic-select,
.gic-textarea {
  height: 44px;
  width: 100%;
  padding: 0 14px;
  font-size: var(--gic-text-body);
  background: var(--gic-surface);
  color: var(--gic-ink-900);
  border: 1.5px solid var(--gic-ink-200);
  border-radius: var(--gic-radius-sm);
  transition: border-color var(--gic-dur-base) var(--gic-ease-out),
              box-shadow var(--gic-dur-base) var(--gic-ease-out);
}
.gic-textarea { height: auto; padding: 12px 14px; min-height: 96px; resize: vertical; line-height: var(--gic-lh-normal); }
.gic-input::placeholder,
.gic-textarea::placeholder { color: var(--gic-ink-400); }
.gic-input:hover,
.gic-select:hover,
.gic-textarea:hover { border-color: var(--gic-ink-400); }
.gic-input:focus,
.gic-select:focus,
.gic-textarea:focus {
  outline: none;
  border-color: var(--gic-primary);
  box-shadow: var(--gic-focus-ring);
}
.gic-input[disabled] {
  background: var(--gic-surface-sunken);
  color: var(--gic-ink-400);
  cursor: not-allowed;
}

/* ---------- Checkbox / Radio / Toggle ---------- */
.gic-check {
  width: 20px; height: 20px;
  border: 1.5px solid var(--gic-ink-300);
  border-radius: var(--gic-radius-xs);
  background: var(--gic-surface);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--gic-dur-base) var(--gic-ease-out);
}
.gic-check[data-checked="true"] {
  background: var(--gic-accent);
  border-color: var(--gic-accent);
  color: var(--gic-accent-on);
}
.gic-radio {
  width: 20px; height: 20px;
  border: 1.5px solid var(--gic-ink-300);
  border-radius: var(--gic-radius-full);
  background: var(--gic-surface);
  position: relative;
  cursor: pointer;
  transition: all var(--gic-dur-base) var(--gic-ease-out);
}
.gic-radio[data-checked="true"] { border-color: var(--gic-primary); }
.gic-radio[data-checked="true"]::after {
  content: ""; position: absolute; inset: 4px;
  background: var(--gic-primary); border-radius: var(--gic-radius-full);
}
.gic-toggle {
  width: 44px; height: 24px;
  background: var(--gic-ink-200);
  border-radius: var(--gic-radius-full);
  position: relative;
  cursor: pointer;
  transition: background var(--gic-dur-base) var(--gic-ease-out);
}
.gic-toggle::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: white;
  border-radius: var(--gic-radius-full);
  box-shadow: var(--gic-shadow-01);
  transition: left var(--gic-dur-base) var(--gic-ease-spring);
}
.gic-toggle[data-on="true"] { background: var(--gic-primary); }
.gic-toggle[data-on="true"]::after { left: 22px; }

/* ---------- Tags / Chips / Badges ---------- */
.gic-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 24px;
  padding: 0 10px;
  font-size: var(--gic-text-caption);
  font-weight: var(--gic-w-medium);
  border-radius: var(--gic-radius-full);
  background: var(--gic-primary-soft);
  color: var(--gic-primary);
  white-space: nowrap;
}
.gic-tag--yellow { background: var(--gic-accent-soft); color: #8a6a00; }
.gic-tag--pink   { background: var(--gic-pink-soft); color: #b03765; }
.gic-tag--green  { background: var(--gic-green-soft); color: #0f7a55; }
.gic-tag--purple { background: var(--gic-purple-soft); color: #6b4fd1; }
.gic-tag--neutral { background: var(--gic-ink-100); color: var(--gic-ink-700); }
.gic-tag--danger  { background: var(--gic-danger-soft); color: var(--gic-danger); }

.gic-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: var(--gic-text-small);
  font-weight: var(--gic-w-medium);
  border-radius: var(--gic-radius-full);
  background: var(--gic-surface);
  color: var(--gic-ink-700);
  border: 1.5px solid var(--gic-ink-200);
  cursor: pointer;
}
.gic-chip[data-selected="true"] {
  background: var(--gic-primary);
  border-color: var(--gic-primary);
  color: var(--gic-primary-on);
}

.gic-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--gic-radius-full);
  background: var(--gic-danger);
  color: #fff;
  font-size: var(--gic-text-micro);
  font-weight: var(--gic-w-bold);
}

/* ---------- Cards ---------- */
.gic-card {
  background: var(--gic-surface);
  border-radius: var(--gic-radius-lg);
  box-shadow: var(--gic-shadow-01);
  padding: var(--gic-space-6);
}
.gic-card--flat { box-shadow: none; border: 1px solid var(--gic-ink-200); }
.gic-card--feature {
  border-radius: var(--gic-radius-2xl);
  padding: var(--gic-space-8);
}

/* ---------- Alerts ---------- */
.gic-alert {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 16px;
  border-radius: var(--gic-radius-md);
  font-size: var(--gic-text-small);
  line-height: var(--gic-lh-snug);
}
.gic-alert--info { background: var(--gic-info-soft); color: #1e3a8a; }
.gic-alert--warn { background: var(--gic-warning-soft); color: #8a5a00; }
.gic-alert--error { background: var(--gic-danger-soft); color: #8b1a1e; }
.gic-alert--success { background: var(--gic-success-soft); color: #0f7a55; }

/* ---------- Tables ---------- */
.gic-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--gic-text-small);
}
.gic-table th {
  text-align: left;
  font-weight: var(--gic-w-medium);
  color: var(--gic-ink-500);
  padding: 12px 12px;
  border-bottom: 1.5px solid var(--gic-ink-200);
  background: var(--gic-surface);
  position: sticky;
  top: 0;
}
.gic-table td {
  padding: 14px 12px;
  border-bottom: 1px solid var(--gic-ink-100);
  color: var(--gic-ink-900);
  vertical-align: middle;
}
.gic-table tr:hover td { background: var(--gic-surface-sunken); }
.gic-table tr[data-highlight="true"] td { background: var(--gic-highlight); }

/* ---------- Tabs ---------- */
.gic-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--gic-ink-100);
  border-radius: var(--gic-radius-full);
}
.gic-tab {
  height: 36px;
  padding: 0 18px;
  border: none;
  background: transparent;
  border-radius: var(--gic-radius-full);
  font-size: var(--gic-text-small);
  font-weight: var(--gic-w-medium);
  color: var(--gic-ink-700);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gic-tab[data-active="true"] {
  background: var(--gic-surface);
  color: var(--gic-ink-900);
  box-shadow: var(--gic-shadow-01);
}

/* ---------- Pagination ---------- */
.gic-pag {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}
.gic-pag__item {
  min-width: 32px;
  height: 32px;
  padding: 0 10px;
  border-radius: var(--gic-radius-full);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--gic-text-small);
  font-weight: var(--gic-w-medium);
  color: var(--gic-ink-700);
  cursor: pointer;
  border: none;
  background: transparent;
}
.gic-pag__item:hover { background: var(--gic-ink-100); }
.gic-pag__item[data-active="true"] {
  background: var(--gic-primary);
  color: var(--gic-primary-on);
}

/* ---------- Breadcrumb ---------- */
.gic-crumb {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: var(--gic-text-small);
  color: var(--gic-ink-500);
}
.gic-crumb a {
  color: var(--gic-ink-500);
  text-decoration: none;
}
.gic-crumb a:hover { color: var(--gic-ink-900); }
.gic-crumb [aria-current="page"] { color: var(--gic-ink-900); font-weight: var(--gic-w-medium); }

/* ---------- Sidebar (dashboard) ---------- */
.gic-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px;
}
.gic-nav__group-label {
  font-size: var(--gic-text-caption);
  font-weight: var(--gic-w-medium);
  color: var(--gic-ink-400);
  padding: 14px 12px 6px;
  letter-spacing: 0.04em;
}
.gic-nav__item {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--gic-radius-md);
  color: var(--gic-ink-700);
  text-decoration: none;
  font-size: var(--gic-text-small);
  font-weight: var(--gic-w-medium);
  cursor: pointer;
}
.gic-nav__item:hover { background: var(--gic-ink-100); }
.gic-nav__item[data-active="true"] {
  background: var(--gic-primary-soft);
  color: var(--gic-primary);
}

/* ---------- Utility ---------- */
.gic-stack { display: flex; flex-direction: column; }
.gic-row { display: flex; align-items: center; }
.gic-spacer { flex: 1; }
.gic-divider { border: none; border-top: 1px solid var(--gic-ink-200); margin: 0; }

/* ---------- Doc-page layout (for index.html) ---------- */
.ds-page {
  min-height: 100vh;
  background: var(--gic-surface-sunken);
  color: var(--gic-ink-900);
}
.ds-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
.ds-sidebar {
  background: var(--gic-surface);
  border-right: 1px solid var(--gic-ink-200);
  padding: 24px 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
.ds-main {
  padding: 48px 64px 120px;
  max-width: 1200px;
}
.ds-section {
  margin-bottom: 120px;
  scroll-margin-top: 24px;
}
.ds-section__kicker {
  font-size: var(--gic-text-caption);
  font-weight: var(--gic-w-bold);
  letter-spacing: 0.1em;
  color: var(--gic-ink-400);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ds-section__kicker-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--gic-ink-900);
  color: white;
  border-radius: var(--gic-radius-xs);
  font-size: 11px;
}
.ds-section__title {
  font-size: var(--gic-text-h2);
  font-weight: var(--gic-w-bold);
  margin: 0 0 6px;
  letter-spacing: -0.02em;
}
.ds-section__sub {
  font-size: var(--gic-text-body);
  color: var(--gic-ink-500);
  margin: 0 0 32px;
  max-width: 68ch;
  line-height: var(--gic-lh-normal);
}
.ds-subsection__title {
  font-size: var(--gic-text-h4);
  font-weight: var(--gic-w-bold);
  margin: 48px 0 16px;
  letter-spacing: -0.01em;
}

/* Brand hero / mascot area */
.ds-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(0.3px);
}
.ds-mascot {
  position: relative;
  width: 100%;
  aspect-ratio: 1.4 / 1;
  background: linear-gradient(180deg, #F6FAFF 0%, #EEF4FF 100%);
  border-radius: var(--gic-radius-2xl);
  overflow: hidden;
}