/* Bootstrap component theming + canonical product patterns.
   The markup is stock Bootstrap (btn, badge, alert, card, table, forms); this
   layer skins the framework components with the product tokens and adds the
   few product patterns Bootstrap has no equivalent for (command bar, table
   states, pagination bar, page headings). Product palette values resolve from
   tokens.css, so dark mode flips without extra selectors here. */

/* ---------------------------------------------------------------- Buttons */
.btn {
    --bs-btn-padding-x: var(--control-padding-x);
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: var(--font-size-md);
    --bs-btn-font-weight: var(--font-weight-semibold);
    --bs-btn-line-height: 1;
    --bs-btn-border-radius: var(--radius-xs);
    --bs-btn-color: var(--color-text);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-primary-hover);
    --bs-btn-hover-bg: var(--color-surface-hover);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-surface-hover);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-active-shadow: none;
    --bs-btn-disabled-color: var(--color-disabled);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border-subtle);
    --bs-btn-disabled-opacity: 1;
    --bs-btn-focus-box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--control-height);
}

.btn-primary {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-primary);
    --bs-btn-border-color: var(--color-primary);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: var(--color-primary-hover);
    --bs-btn-hover-border-color: var(--color-primary-hover);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: var(--color-primary-hover);
    --bs-btn-active-border-color: var(--color-primary-hover);
    --bs-btn-disabled-color: var(--color-disabled);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border-subtle);
    --bs-btn-focus-shadow-rgb: 15, 108, 189;
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-bg: var(--color-surface);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-color: var(--color-primary-hover);
    --bs-btn-hover-bg: var(--color-surface-hover);
    --bs-btn-hover-border-color: var(--color-primary);
    --bs-btn-active-color: var(--color-primary-hover);
    --bs-btn-active-bg: var(--color-surface-hover);
    --bs-btn-active-border-color: var(--color-primary);
    --bs-btn-disabled-color: var(--color-disabled);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border-subtle);
}

/* Kit "subtle" button: quiet text button with a soft hover wash. */
.btn-subtle {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--color-text-secondary);
    --bs-btn-hover-bg: var(--color-border-subtle);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--color-text-secondary);
    --bs-btn-active-bg: var(--color-border-subtle);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--color-disabled);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border-subtle);
}

.btn-danger {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-danger);
    --bs-btn-border-color: var(--color-danger);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-danger) 92%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-danger) 92%, #000);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-danger) 92%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-danger) 92%, #000);
    --bs-btn-disabled-color: var(--color-disabled);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border-subtle);
}

.btn-success {
    --bs-btn-color: var(--color-on-primary);
    --bs-btn-bg: var(--color-success);
    --bs-btn-border-color: var(--color-success);
    --bs-btn-hover-color: var(--color-on-primary);
    --bs-btn-hover-bg: color-mix(in srgb, var(--color-success) 92%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--color-success) 92%, #000);
    --bs-btn-active-color: var(--color-on-primary);
    --bs-btn-active-bg: color-mix(in srgb, var(--color-success) 92%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--color-success) 92%, #000);
    --bs-btn-disabled-color: var(--color-disabled);
    --bs-btn-disabled-bg: var(--color-surface-hover);
    --bs-btn-disabled-border-color: var(--color-border-subtle);
}

.btn-sm {
    --bs-btn-padding-x: var(--control-padding-x-sm);
    --bs-btn-padding-y: 0;
    --bs-btn-font-size: var(--font-size-xs);
    min-height: var(--control-height-sm);
}

/* -------------------------------------------------------- Badges (soft) */
.badge {
    --bs-badge-padding-x: var(--control-padding-x-sm);
    --bs-badge-padding-y: 4px;
    --bs-badge-font-size: var(--font-size-xs);
    --bs-badge-font-weight: var(--font-weight-medium);
    --bs-badge-border-radius: var(--radius-md);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    /* Bootstrap hard-codes line-height 1; the kit badges follow the body
       rhythm, so flex/grid neighbours keep their original spacing. */
    line-height: var(--line-height-body);
    border: 1px solid transparent;
}

/* Soft badges (bg-*-subtle + text-*-emphasis) gain the Fluent 1px rim. */
.badge.bg-success-subtle { border-color: var(--bs-success-border-subtle); }
.badge.bg-secondary-subtle { border-color: var(--bs-secondary-border-subtle); }
.badge.bg-warning-subtle { border-color: var(--bs-warning-border-subtle); }
.badge.bg-info-subtle { border-color: var(--bs-info-border-subtle); }
.badge.bg-danger-subtle { border-color: var(--bs-danger-border-subtle); }

/* ------------------------------------------------- Alerts (left accent) */
.alert {
    /* Spacing is owned by utility classes in the markup (mt-*, mb-*), as in
       the pre-Bootstrap kit — Bootstrap's default 1rem margin-bottom would
       double the gaps inside flex/grid stacks. */
    --bs-alert-margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 10px 12px;
    border: 0;
    border-left: 3px solid var(--bs-alert-border-color);
    border-radius: 0;
    font-size: var(--font-size-sm);
}

.alert-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--color-success-bg);
    --bs-alert-border-color: var(--color-success);
}

.alert-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--color-warning-bg);
    --bs-alert-border-color: var(--color-warning);
}

.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--color-danger-bg);
    --bs-alert-border-color: var(--color-danger);
}

.alert-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--color-info-bg);
    --bs-alert-border-color: var(--color-primary);
}

/* -------------------------------------------------- Cards (panel look) */
.card {
    --bs-card-spacer-y: var(--space-4);
    --bs-card-spacer-x: var(--space-4);
    --bs-card-border-color: var(--color-border);
    --bs-card-border-radius: var(--radius-lg);
    --bs-card-cap-bg: transparent;
    --bs-card-bg: var(--color-surface);
    --bs-card-color: var(--color-text);
    --bs-card-box-shadow: var(--shadow-panel);
    overflow: hidden;
}

.card-header {
    padding: var(--panel-padding-compact);
    background: var(--color-surface);
    border-bottom: 1px solid var(--color-border);
}

.card-header h2 {
    margin: 0 0 4px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}

.card-header p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-sm);
}

/* Toolbar-style header row: label + trailing icon/actions. */
.card-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 46px;
    padding: 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
}

.card-titlebar i,
.card-titlebar .lucide {
    color: var(--color-text-muted);
    font-size: 1.15rem;
}

.card-body { padding: var(--panel-padding); }
.card-body + .card-body { border-top: 1px solid var(--color-border-subtle); }

.card-footer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 18px 20px 22px;
    background: var(--color-surface-muted);
    border-top: 1px solid var(--color-border);
}

/* ---------------------------------------------------------------- Tables */
.table {
    --bs-table-border-color: var(--color-border-subtle);
    --bs-table-hover-bg: var(--color-surface-hover);
    margin-bottom: 0;
}

.table > :not(caption) > * > * { padding: 11px 14px; }

.table thead th {
    padding: 10px 14px;
    color: var(--color-text-secondary);
    background: var(--color-surface-muted);
    border-bottom: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    white-space: nowrap;
}

.table tbody td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--color-border-subtle);
    font-size: var(--font-size-sm);
}

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

.table tbody td .btn-sm { min-width: 56px; }

/* --------------------------------------------------- Inputs and fields */
.form-control,
.form-select {
    min-height: var(--control-height);
    padding: 6px 10px;
    color: var(--color-text);
    background-color: var(--color-surface);
    border-color: var(--color-border-strong);
    border-radius: var(--radius-xs);
    font-size: var(--font-size-md);
}

textarea.form-control {
    min-height: auto;
    resize: vertical;
}

.form-label {
    margin-bottom: 5px;
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

.form-label:has(+ .input-group [required])::after,
.form-label:has(+ [required])::after,
.form-label:has(+ .password-toggle [required])::after {
    content: " *";
    color: var(--color-danger);
}

.form-text {
    margin-top: 4px;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

.form-control:disabled,
.form-select:disabled {
    color: var(--color-text-muted);
    background-color: var(--color-surface-muted);
    border-color: var(--color-border);
    opacity: 1;
}

/* --------------------------------------------------------- Modal surface */
.modal-content {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-overlay);
}

/* ------------------------- Product patterns (no Bootstrap equivalent) --- */

/* Lucide icons (UI kit default). The pinned Lucide bundle replaces
   <i data-lucide="name"> with an inline SVG that ignores font-size, so size it
   at 1em to follow the surrounding typography exactly.
   Context-specific rules override width/height where a fixed box is required. */
.lucide {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
}

/* Command bar: search/filter/action strip sitting above a data panel. */
.c-command-bar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: 12px;
    padding: var(--space-2);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.c-command-bar form { width: min(100%, 560px); }

.c-command-bar .input-group-text,
.c-command-bar .form-control {
    border-color: var(--color-border-strong);
}

.c-command-bar .input-group .btn {
    flex: 0 0 auto;
    border-radius: 0 var(--radius-xs) var(--radius-xs) 0;
}

/* Centered loading/empty state filling a table panel. */
.c-table-state {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: 240px;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
}

/* Panel footer pagination bar: prev / page info / next. */
.c-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--color-border);
    font-size: var(--font-size-xs);
}

/* Section and heading patterns for guide pages. */
.c-section {
    padding: var(--panel-padding);
    border-bottom: 1px solid var(--color-border-subtle);
}
.c-section:last-child { border-bottom: 0; }

.c-heading { margin-bottom: 18px; }
.c-heading--tight { margin-bottom: var(--space-2); }
.c-heading__title {
    margin: 0 0 3px;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
}
.c-heading__subtitle {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--font-size-xs);
}

/* Password visibility affordance */
.password-toggle { position: relative; }
.password-toggle .form-control { padding-right: 44px; }
.password-toggle-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: calc(100% - 2px);
    color: var(--color-text-secondary);
    background: transparent;
    border: 0;
}
.password-toggle-btn:hover { background: var(--color-surface-hover); }

@media (max-width: 575.98px) {
    .card-body,
    .c-section { padding: 18px 16px; }
    .card-footer { padding: var(--space-4); }
}