/* ==========================================================================
   PandBaz — Shared Base Components
   Single source of truth for HsProject (public website) and HsProject.App
   (end-user web app) — and also linked into the admin dashboard, since
   these rules used to live only in the admin's own components.css.
   Synced into each project's wwwroot by an MSBuild Copy target (see the
   SyncDesignSystem target in both .csproj files), not a file Link —
   see the Copy target's comment for why.
   Depends on tokens.css (shared or admin's own — both define the same
   variable names) and must load AFTER it.
   Each component is an independent BEM block (block__element--modifier)
   so adding or changing one never breaks another.
   ========================================================================== */

@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-weight: normal;
    src: url("font/IRANYekanX-Regular.woff2") format("woff2"), url("font/IRANYekanX-Regular.woff") format("woff");
    font-display: swap;
}
@font-face {
    font-family: "IRANYekan";
    font-style: normal;
    font-weight: bold;
    src: url("font/IRANYekanX-Bold.woff2") format("woff2"), url("font/IRANYekanX-Bold.woff") format("woff");
    font-display: swap;
}

* { box-sizing: border-box;margin:0;padding:0; }
body { font-family: var(--font-sans); color: var(--text-primary); background: var(--surface-page); }

a { color: var(--color-brand-primary); text-decoration: none; }

/* ==========================================================================
   1. Button
   Color (variant) + size + state are independent of each other so any
   combination works without an extra class.
   ========================================================================== */

.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); font-family: inherit; font-size: var(--font-size-body); font-weight: bold; border-radius: var(--radius-md); border: 1px solid transparent; padding: 10px var(--space-lg); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease; }
    .button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Color — variant */
.button--primary { background: var(--color-brand-primary); color: var(--text-on-brand); }
    .button--primary:hover:not(:disabled) { background: var(--color-brand-primary-hover); }
.button--secondary { background: var(--color-brand-secondary); color: var(--text-on-copper); }
    .button--secondary:hover:not(:disabled) { background: var(--color-brand-secondary-hover); }
.button--outline { background: transparent; color: var(--color-brand-primary); border-color: var(--border-strong); }
    .button--outline:hover:not(:disabled) { background: var(--surface-sunken); }
.button--ghost { background: transparent; color: var(--text-secondary); }
    .button--ghost:hover:not(:disabled) { background: var(--surface-sunken); }
.button--danger { background: var(--state-danger-text); color: var(--text-on-brand); }
    .button--danger:hover:not(:disabled) { opacity: 0.9; }
.button--success { background: var(--state-success-text); color: var(--text-on-brand); }
    .button--success:hover:not(:disabled) { opacity: 0.9; }

/* Size */
.button--size-small { padding: 6px var(--space-md); font-size: var(--font-size-caption); border-radius: var(--radius-sm); }
.button--size-large { padding: 14px var(--space-xl); font-size: var(--font-size-base); }

/* Icon-only button */
.button--icon-only { padding: 10px; border-radius: var(--radius-sm); }


/* ==========================================================================
   2. Alert / Message
   For system messages (save result, form error, warning, etc.).
   Colors always come from --state-*, never from the brand palette.
   ========================================================================== */

.alert { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); font-size: var(--font-size-body); border: 1px solid transparent; }
.alert__icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.alert__title { font-weight: 500; margin: 0 0 2px; }
.alert__text { margin: 0; color: var(--text-secondary); }
.alert--success { background: var(--state-success-bg); color: var(--state-success-text); }
    .alert--success .alert__icon { background: var(--state-success-text); color: var(--text-on-brand); }
.alert--danger { background: var(--state-danger-bg); color: var(--state-danger-text); }
    .alert--danger .alert__icon { background: var(--state-danger-text); color: var(--text-on-brand); }
.alert--warning { background: var(--state-warning-bg); color: var(--state-warning-text); }
    .alert--warning .alert__icon { background: var(--state-warning-text); color: var(--text-on-brand); }
.alert--info { background: var(--state-info-bg); color: var(--state-info-text); }
    .alert--info .alert__icon { background: var(--state-info-text); color: var(--text-on-brand); }


/* ==========================================================================
   3. Badge
   For status labels — e.g. active/inactive rows in admin tables, or
   "به‌زودی" (coming soon) labels on the public site.
   ========================================================================== */

.badge { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-caption); font-weight: bold; font-family: inherit; padding: 3px 10px; border-radius: var(--radius-pill); }
.badge--success { background: var(--state-success-bg); color: var(--state-success-text); }
.badge--danger { background: var(--state-danger-bg); color: var(--state-danger-text); }
.badge--warning { background: var(--state-warning-bg); color: var(--state-warning-text); }
.badge--info { background: var(--state-info-bg); color: var(--state-info-text); }
.badge--neutral { background: var(--surface-sunken); color: var(--text-secondary); }


/* ==========================================================================
   4. Form controls
   ========================================================================== */

.form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-lg); }
.label { font-size: var(--font-size-caption); font-weight: 500; color: var(--text-secondary); }

.input,
.select,
.textarea { font-family: inherit; font-size: var(--font-size-body); color: var(--text-primary); background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-sm); padding: 10px var(--space-md); width: 100%; }
    .input:focus,
    .select:focus,
    .textarea:focus { outline: none; border-color: var(--color-brand-primary); box-shadow: 0 0 0 3px var(--color-indigo-100); }
.input--error { border-color: var(--state-danger-text); }
.form-hint { font-size: var(--font-size-caption); color: var(--text-muted); }
.form-hint--error { color: var(--state-danger-text); }


/* ==========================================================================
   5. Card
   Base container for content blocks (skill cards, lesson cards, admin
   tables/forms, etc.)
   ========================================================================== */

.card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.card__header { padding: var(--space-lg); border-bottom: 1px solid var(--border-default); display: flex; align-items: center; justify-content: space-between; }
.card__title { font-size: var(--font-size-heading); font-weight: 500; margin: 0; }
.card__body { padding: var(--space-lg); }
.card__footer { padding: var(--space-lg); border-top: 1px solid var(--border-default); }

/* Modifiers used by the public site (editorial feel: no shadow, thin border only;
   pill-shaped buttons). Kept here, not duplicated in site.css, since any other
   project can reuse them too. */
.card--flat { box-shadow: none; }
.button--pill { border-radius: var(--radius-pill); }


/* ==========================================================================
   6. Theme toggle
   Same markup in both the site and the app:
   <button type="button" class="theme-toggle" onclick="window.pandbazTheme.toggle()" aria-label="...">
       <i class="ti ti-sun theme-toggle__icon--light"></i>
       <i class="ti ti-moon theme-toggle__icon--dark"></i>
   </button>
   Icon visibility is pure CSS, driven by [data-theme] on <html> — theme.js
   (DesignSystem/js/theme.js) only ever sets that one attribute; nothing
   else needs to know which theme is active.
   ========================================================================== */

.theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-pill); border: 1px solid var(--border-default); background: transparent; color: var(--text-secondary); font-size: var(--font-size-heading); cursor: pointer; transition: background 0.15s ease; flex-shrink: 0; }
    .theme-toggle:hover { background: var(--surface-sunken); }
    .theme-toggle .theme-toggle__icon--dark { display: none; }
    [data-theme="dark"] .theme-toggle .theme-toggle__icon--light { display: none; }
    [data-theme="dark"] .theme-toggle .theme-toggle__icon--dark { display: inline; }