/* ==========================================================================
   Base: reset, document defaults, typography and shared primitives.
   Direction-aware throughout by using logical properties, so one
   stylesheet serves both Persian and English.
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background: var(--color-background);
    color: var(--color-text-primary);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

body[dir="rtl"],
[dir="rtl"] body {
    font-family: var(--font-persian);
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: var(--weight-semibold);
    line-height: var(--leading-tight);
    color: var(--color-text-primary);
}

h1 { font-size: var(--text-xl); letter-spacing: -0.01em; }
h2 { font-size: var(--text-lg); letter-spacing: -0.005em; }
h3 { font-size: var(--text-md); }
h4 { font-size: var(--text-base); }

p {
    margin: 0;
}

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

a:hover {
    text-decoration: underline;
}

/* An underline belongs on a link in a sentence, never on something shaped
   like a button. Anchors are used for both here, so the control shapes opt
   out by name rather than each one remembering to. */
a.btn:hover,
a.menu-item:hover,
a.nav-item:hover,
a.tab:hover,
a.chip:hover,
a.card:hover,
a[class*="-brand"]:hover {
    text-decoration: none;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

img, svg, video {
    max-width: 100%;
    display: block;
}

/* Icons carry a viewBox and no dimensions, so without a size they stretch
   to fill whatever box they land in. Every component that wants a
   different size sets one and wins on specificity; this is only the floor,
   so a newly placed icon can never swallow its row. The sprite is exempt:
   its inline display:none beats any stylesheet. */
svg[viewBox="0 0 20 20"] {
    width: 16px;
    height: 16px;
    flex: none;
}

button {
    font: inherit;
    color: inherit;
}

input, textarea, select {
    font: inherit;
    color: inherit;
}

code, pre, kbd {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

hr {
    border: 0;
    border-block-start: 1px solid var(--color-border);
    margin: var(--space-4) 0;
}

/* --- Focus -----------------------------------------------------------------
   Visible for keyboard users, quiet for pointer users. Never removed. */
:focus {
    outline: none;
}

:focus-visible {
    outline: 2px solid var(--color-border-focus);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* --- Scrollbars -----------------------------------------------------------
   Applied to everything that scrolls, not only to the named regions. A
   table that overflows, a dialog body and a long textarea are all scroll
   areas as far as the reader is concerned, and a default system scrollbar
   sitting beside a styled one is the kind of detail that makes an
   interface look assembled from parts. Anything that wants no scrollbar
   at all opts out with scrollbar-width: none, which still wins. */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-border-strong) transparent;
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--color-border-strong);
    border: 3px solid transparent;
    background-clip: content-box;
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-text-tertiary);
    background-clip: content-box;
}

::-webkit-scrollbar-corner {
    background: transparent;
}

.scroll-area {
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* --- Text helpers --------------------------------------------------------- */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-danger { color: var(--color-danger); }
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }

.text-xs { font-size: var(--text-xs); }
.text-sm { font-size: var(--text-sm); }
.text-lg { font-size: var(--text-lg); }

.font-medium { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }

.truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.clamp-1,
.clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.clamp-1 { -webkit-line-clamp: 1; line-clamp: 1; }
.clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }

.numeric {
    font-variant-numeric: tabular-nums;
}

/* A column of figures. Aligned to the end of the line so the digits stack
   under each other, and tabular so they keep their columns as the values
   change. Nine tables were already asking for this class; none of them
   were getting anything. */
.num {
    text-align: end;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Mixed Persian and Latin text inside one message reads correctly when the
   paragraph resolves direction from its first strong character. */
.bidi-auto {
    unicode-bidi: plaintext;
    text-align: start;
}

/* --- Layout helpers ------------------------------------------------------- */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.gap-1 { gap: var(--space-1); }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.flex-1 { flex: 1; min-width: 0; }
.wrap { flex-wrap: wrap; }

.hidden { display: none !important; }

/* Available to assistive technology, invisible on screen. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.skip-link {
    position: absolute;
    inset-inline-start: var(--space-3);
    inset-block-start: -100px;
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-md);
    transition: inset-block-start var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
    inset-block-start: var(--space-3);
    text-decoration: none;
}

/* --- Motion preferences --------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

@media print {
    .app-sidebar,
    .app-topbar,
    .composer,
    .btn {
        display: none !important;
    }
}