/* ================================================================
   BahriUISet — components.css
   Primitive component styles for all component showcase pages.
   Drop-in replacement for daisyUI. Mapped to BahriUISet tokens.
================================================================ */

/* ----------------------------------------------------------------
   Matrix structure
----------------------------------------------------------------- */
.matrix-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}

.matrix {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  overflow-x: auto;
  overflow-y: hidden;
  min-width: 0;
}

.matrix-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6875rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  position: sticky;
  inset-inline-start: 0;
  z-index: 1;
  background: var(--color-surface-default);
}

.matrix-title {
  font-size: 0.6875rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  font-weight: 500;
}

.dir-badge {
  font-size: 0.625rem;
  padding: 2px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  letter-spacing: .08em;
  font-weight: 500;
}

[data-theme="light"]    { --matrix-dot: rgba(15,23,32,.06); }
[data-theme="dark"]     { --matrix-dot: rgba(255,255,255,.05); }
[data-theme="maritime"] { --matrix-dot: rgba(17,26,43,.06); }

.matrix-grid {
  display: grid;
  min-width: 64rem;
  background:
    radial-gradient(circle at 1px 1px, var(--matrix-dot, rgba(15,23,32,.06)) 1px, transparent 1px)
    0 0 / 14px 14px,
    var(--color-bg-subtle);
}

.matrix-grid > * {
  border-right: 1px dashed var(--color-border-subtle);
  border-bottom: 1px dashed var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  padding: 1rem;
}

.matrix-grid > .cell-corner,
.matrix-grid > .cell-colhead,
.matrix-grid > .cell-rowhead {
  background: var(--color-surface-default);
}

.cell-corner,
.cell-colhead,
.cell-rowhead {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 500;
}

.cell-corner {
  color: var(--color-text-tertiary);
  justify-content: flex-start !important;
}

.cell-colhead { color: var(--color-text-secondary); }

.cell-rowhead {
  color: var(--color-text-secondary);
  justify-content: flex-start !important;
  padding-inline-start: 1rem;
}

.matrix-grid .cell-comp { background: transparent; }
.col-last { border-right: 0 !important; }

/* ----------------------------------------------------------------
   Icon utility
----------------------------------------------------------------- */
.ic {
  width: 14px;
  height: 14px;
  display: inline-block;
  flex: none;
}
.ic svg {
  width: 100%;
  height: 100%;
  display: block;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----------------------------------------------------------------
   Button
----------------------------------------------------------------- */
.btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  font-family: var(--ui-font-sans);
  font-size: 0.8125rem;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  user-select: none;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s, filter .12s;
}
.btn-sm { padding: 5px 10px; font-size: 0.75rem; }
.btn-lg { padding: 10px 18px; font-size: 0.875rem; }

.btn-primary {
  background: var(--color-action-primary-bg);
  color: var(--color-action-primary-text);
}
.btn-primary.is-hover { background: var(--color-action-primary-bg-hover); }
.btn-primary.is-press  { background: color-mix(in srgb, var(--color-action-primary-bg) 75%, black); }
.btn-primary.is-focus  { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); }
.btn-primary.is-disabled { opacity: .45; cursor: not-allowed; }

.btn-secondary {
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  border-color: var(--color-border-default);
}
.btn-secondary.is-hover { background: var(--color-bg-subtle); }
.btn-secondary.is-press { background: var(--color-bg-subtle); filter: brightness(.94); }
.btn-secondary.is-focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); border-color: var(--color-border-focus); }
.btn-secondary.is-disabled { opacity: .5; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--color-text-primary);
}
.btn-ghost.is-hover { background: var(--color-bg-subtle); }
.btn-ghost.is-press { background: var(--color-bg-subtle); filter: brightness(.94); }
.btn-ghost.is-focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); }
.btn-ghost.is-disabled { opacity: .45; cursor: not-allowed; }

.btn-outline {
  background: transparent;
  color: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-bg);
}
.btn-outline.is-hover { background: color-mix(in srgb, var(--color-action-primary-bg) 8%, transparent); }
.btn-outline.is-press { background: color-mix(in srgb, var(--color-action-primary-bg) 15%, transparent); }
.btn-outline.is-focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); }
.btn-outline.is-disabled { opacity: .45; cursor: not-allowed; }

.btn-danger {
  background: var(--color-feedback-danger-text);
  color: var(--color-text-inverse);
}
.btn-danger.is-hover   { filter: brightness(.92); }
.btn-danger.is-press   { filter: brightness(.84); }
.btn-danger.is-focus   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-feedback-danger-text) 30%, transparent); }
.btn-danger.is-disabled { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------------
   Field stack (label + input/select/textarea + helper)
----------------------------------------------------------------- */
.field-stack {
  display: grid;
  gap: 0.35rem;
  text-align: start;
  width: 100%;
}

.field-label {
  font-size: 0.8125rem;
  line-height: 1.2;
  font-weight: 500;
  color: var(--color-text-primary);
}

.field-helper {
  font-size: 0.76rem;
  line-height: 1.25;
  color: var(--color-text-tertiary);
}

.field-helper-error {
  color: var(--color-feedback-danger-text);
}

/* ----------------------------------------------------------------
   Field (input, select, textarea wrapper)
----------------------------------------------------------------- */
.field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background: var(--color-surface-default);
  color: var(--color-text-primary);
  font-size: 0.8125rem;
  line-height: 1.3;
  width: 100%;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
.field input,
.field textarea,
.field select {
  appearance: none;
  border: 0;
  outline: none;
  background: transparent;
  font: inherit;
  color: inherit;
  width: 100%;
  padding: 0;
  min-width: 0;
}
.field select { cursor: pointer; }
.field .leading,
.field .trailing {
  color: var(--color-text-tertiary);
  display: inline-flex;
  flex: none;
  font-size: 0.75rem;
}

.field.is-hover   { border-color: var(--color-border-strong); }
.field.is-focus   { border-color: var(--color-border-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 30%, transparent); }
.field.is-disabled { background: var(--color-bg-subtle); color: var(--color-text-disabled); cursor: not-allowed; }
.field.is-error   { border-color: var(--color-feedback-danger-text); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-feedback-danger-text) 22%, transparent); }
.field.is-error .trailing { color: var(--color-feedback-danger-text); }

.field-textarea {
  align-items: flex-start;
}
.field-textarea textarea {
  resize: vertical;
  min-height: 72px;
  font-family: inherit;
}

.field-select {
  position: relative;
}
.field-select select {
  padding-inline-end: 1.25rem;
}
.field-select::after {
  content: "";
  position: absolute;
  inset-inline-end: 0.625rem;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 12px;
  background-color: var(--color-text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C%2Fsvg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C%2Fsvg%3E") center / contain no-repeat;
  pointer-events: none;
}
.field-select.is-disabled::after { opacity: 0.4; }

/* Bare-select shorthand: <select class="field-select"> used standalone,
   without a surrounding .field wrapper. <select> is a replaced element so the
   wrapper-only ::after chevron above doesn't paint reliably on it; this rule
   gives the bare element the themed surface, border, and chevron directly. */
select.field-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 28px 7px 12px;
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-default);
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: 0.8125rem;
  line-height: 1.3;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23888' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 12px 12px;
  transition: border-color .12s, box-shadow .12s, background-color .12s;
}
select.field-select:hover { border-color: var(--color-border-strong); }
select.field-select:focus-visible {
  outline: none;
  border-color: var(--color-border-focus);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 30%, transparent);
}
select.field-select:disabled {
  background-color: var(--color-bg-subtle);
  color: var(--color-text-disabled);
  cursor: not-allowed;
}
[dir="rtl"] select.field-select {
  padding-inline: 28px 12px;
  background-position: left 8px center;
}

/* ----------------------------------------------------------------
   Toggle switch (visual-only div, for static showcase states)
----------------------------------------------------------------- */
.toggle-sw {
  --sw-w: 36px;
  --sw-h: 20px;
  position: relative;
  width: var(--sw-w);
  height: var(--sw-h);
  border-radius: 999px;
  background: var(--color-border-default);
  transition: background-color .15s;
  cursor: pointer;
  display: inline-block;
  flex: none;
}
.toggle-sw::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: calc(var(--sw-h) - 4px);
  height: calc(var(--sw-h) - 4px);
  border-radius: 50%;
  background: var(--color-text-inverse);
  box-shadow: 0 1px 2px rgba(0,0,0,.2);
  transition: left .15s;
}
.toggle-sw.is-on              { background: var(--color-action-primary-bg); }
.toggle-sw.is-on::after       { left: calc(var(--sw-w) - var(--sw-h) + 2px); }
.toggle-sw.is-focus           { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); }
.toggle-sw.is-disabled        { opacity: .4; cursor: not-allowed; }

[dir="rtl"] .toggle-sw::after        { left: auto; right: 2px; }
[dir="rtl"] .toggle-sw.is-on::after  { right: calc(var(--sw-w) - var(--sw-h) + 2px); left: auto; }

.toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

/* Checkbox */
.chk {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 4px;
  background: var(--color-surface-default);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  transition: background .12s, border-color .12s;
}
.chk:checked {
  background: var(--color-action-primary-bg);
  border-color: var(--color-action-primary-bg);
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='8' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4l3 3 5-6' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}
.chk.is-focus    { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); }
.chk.is-disabled { opacity: .45; cursor: not-allowed; }

/* Radio */
.radio-sw {
  appearance: none;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--color-border-default);
  border-radius: 50%;
  background: var(--color-surface-default);
  cursor: pointer;
  flex: none;
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.radio-sw:checked {
  border-color: var(--color-action-primary-bg);
  background: var(--color-action-primary-bg);
  box-shadow: inset 0 0 0 3px var(--color-surface-default);
}
.radio-sw.is-focus    { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-focus-ring) 40%, transparent); }
.radio-sw.is-disabled { opacity: .45; cursor: not-allowed; }

/* ----------------------------------------------------------------
   Badge
----------------------------------------------------------------- */
.bdg {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.6875rem;
  letter-spacing: .03em;
  font-weight: 500;
  border: 1px solid transparent;
  white-space: nowrap;
}
.bdg .pip {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.bdg-neutral { background: var(--color-bg-subtle);              color: var(--color-text-secondary);          border-color: var(--color-border-subtle); }
.bdg-info    { background: var(--color-action-secondary-bg);    color: var(--color-action-secondary-text); }
.bdg-success { background: var(--color-feedback-success-bg);    color: var(--color-feedback-success-text); }
.bdg-warning { background: var(--color-feedback-warning-bg);    color: var(--color-feedback-warning-text); }
.bdg-danger  { background: var(--color-feedback-danger-bg);     color: var(--color-feedback-danger-text); }
.bdg-solid   { background: var(--color-action-primary-bg);      color: var(--color-action-primary-text); }
.bdg-outline { background: transparent; color: var(--color-text-secondary); border-color: var(--color-border-default); }

/* ----------------------------------------------------------------
   Card
----------------------------------------------------------------- */
.crd {
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 240px;
}
.crd-elev {
  box-shadow: var(--shadow-raised);
  border-color: transparent;
  background: var(--color-surface-raised);
}
.crd-media {
  height: 72px;
  background: repeating-linear-gradient(
    135deg,
    var(--color-bg-subtle) 0 8px,
    var(--color-bg-canvas) 8px 16px
  );
  border-bottom: 1px solid var(--color-border-subtle);
  display: grid;
  place-items: center;
  font-size: 0.625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.crd-body {
  padding: 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
}
.crd-eyebrow {
  font-size: 0.625rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.crd-title {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--color-text-primary);
}
.crd-desc {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.crd-foot {
  padding: 0.625rem 0.875rem;
  border-top: 1px solid var(--color-border-subtle);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

/* ----------------------------------------------------------------
   Tabs — underline style
----------------------------------------------------------------- */
.tabs {
  display: inline-flex;
  border-bottom: 1px solid var(--color-border-subtle);
  gap: 0;
}
.tabs .tab {
  padding: 8px 14px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.tabs .tab.is-hover    { color: var(--color-text-primary); background: var(--color-bg-subtle); }
.tabs .tab.is-active   { color: var(--color-action-primary-bg); border-bottom-color: var(--color-action-primary-bg); font-weight: 500; }
.tabs .tab.is-disabled { color: var(--color-text-tertiary); opacity: .5; cursor: not-allowed; }

/* Tabs — pill style */
.tabs-pill {
  display: inline-flex;
  background: var(--color-bg-subtle);
  border-radius: var(--radius-md);
  padding: 3px;
  border: 1px solid var(--color-border-subtle);
}
.tabs-pill .tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  white-space: nowrap;
}
.tabs-pill .tab.is-active   { background: var(--color-surface-default); color: var(--color-text-primary); box-shadow: 0 1px 2px rgba(0,0,0,.08); font-weight: 500; }
.tabs-pill .tab.is-hover    { background: color-mix(in srgb, var(--color-surface-default) 60%, transparent); }
.tabs-pill .tab.is-disabled { color: var(--color-text-tertiary); opacity: .5; cursor: not-allowed; }

/* ----------------------------------------------------------------
   Dialog
----------------------------------------------------------------- */
.dlg {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-overlay);
  overflow: hidden;
  width: 100%;
  max-width: 300px;
}
.dlg-head {
  padding: 0.875rem 1.125rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
}
.dlg-head h4 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.dlg-body {
  padding: 1.125rem;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.dlg-foot {
  padding: 0.625rem 1.125rem;
  display: flex;
  gap: 0.625rem;
  justify-content: flex-end;
  background: var(--color-bg-subtle);
  border-top: 1px solid var(--color-border-subtle);
}
.x-btn {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 4px;
  color: var(--color-text-tertiary);
  cursor: pointer;
  border: none;
  background: transparent;
  font-size: 1rem;
  line-height: 1;
}
.x-btn:hover {
  background: var(--color-bg-subtle);
  color: var(--color-text-primary);
}

/* ----------------------------------------------------------------
   Table
----------------------------------------------------------------- */
.tbl-wrap {
  width: 100%;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  background: var(--color-surface-default);
  overflow: hidden;
}
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.tbl th {
  text-align: start;
  font-size: 0.625rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  padding: 9px 1rem;
  background: var(--color-bg-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  font-weight: 500;
}
.tbl td {
  padding: 9px 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  color: var(--color-text-primary);
  line-height: 1.4;
}
.tbl tr:last-child td { border-bottom: 0; }
.tbl tr.is-hover td   { background: var(--color-bg-subtle); }
.tbl tr.is-selected td { background: var(--color-action-secondary-bg); }
.tbl .num { text-align: end; color: var(--color-text-secondary); }
[dir="rtl"] .tbl .num { text-align: start; }