@charset "UTF-8";
@font-face {
    font-family: 'Estedad';
    src: url('../fonts/estedad-variable.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

/* ==========================================================================
   Stock Bot — Design System / Theme
   --------------------------------------------------------------------------
   Structure
     1. Theme-independent tokens  (typography, spacing, radius, motion, z-index)
     2. Dark theme   (default)    -> :root, [data-theme="dark"]
     3. Light theme               -> [data-theme="light"]
     4. Legacy aliases            (keep existing stylesheets working)
     5. Base / utility helpers

   Usage
     <html lang="fa" dir="rtl" data-theme="dark">   (omit attr = dark)
     <html lang="fa" dir="rtl" data-theme="light">

   Notes
     - Persian / RTL: everything here is direction-agnostic. Prefer logical
       properties (margin-inline-start, padding-inline, inset-inline-end)
       in components so layouts mirror correctly.
     - Trading colors: green = buy / profit, red = sell / loss.
   ========================================================================== */


/* ==========================================================================
   1. THEME-INDEPENDENT TOKENS
   ========================================================================== */
:root {
    /* ---- Typography ---------------------------------------------------- */
    --font-sans: 'Estedad', 'Segoe UI', Tahoma, 'Noto Sans Arabic', system-ui, -apple-system, sans-serif;
    --font-mono: 'Estedad', ui-monospace, 'Cascadia Mono', 'Consolas', 'Courier New', monospace;
    --font-numeric: var(--font-sans);

    --font-size-2xs: 0.6875rem;  /* 11px */
    --font-size-xs:  0.75rem;    /* 12px */
    --font-size-sm:  0.8125rem;  /* 13px */
    --font-size-md:  0.9375rem;  /* 15px (base) */
    --font-size-lg:  1.0625rem;  /* 17px */
    --font-size-xl:  1.25rem;    /* 20px */
    --font-size-2xl: 1.5rem;     /* 24px */
    --font-size-3xl: 2rem;       /* 32px */
    --font-size-display: 2.5rem; /* 40px — clocks, hero numbers */

    --font-weight-regular:  400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    /* Persian script needs more vertical room than Latin */
    --line-height-tight:   1.35;
    --line-height-normal:  1.65;
    --line-height-relaxed: 1.85;

    --letter-spacing-normal: 0;
    --letter-spacing-mono:   0.02em;

    /* ---- Spacing scale (4px base) -------------------------------------- */
    --space-0:  0;
    --space-1:  0.25rem;  /*  4px */
    --space-2:  0.5rem;   /*  8px */
    --space-3:  0.75rem;  /* 12px */
    --space-4:  1rem;     /* 16px */
    --space-5:  1.25rem;  /* 20px */
    --space-6:  1.5rem;   /* 24px */
    --space-8:  2rem;     /* 32px */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px */
    --space-16: 4rem;     /* 64px */

    /* Component-level shorthands */
    --card-padding:   var(--space-5);
    --input-padding-y: var(--space-2);
    --input-padding-x: var(--space-3);
    --gap-sm: var(--space-2);
    --gap-md: var(--space-4);
    --gap-lg: var(--space-6);

    /* ---- Border radius -------------------------------------------------- */
    --radius-xs:   4px;
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   14px;
    --radius-xl:   20px;
    --radius-pill: 999px;
    --radius-circle: 50%;

    /* ---- Borders -------------------------------------------------------- */
    --border-width: 1px;
    --border-width-strong: 2px;

    /* ---- Motion --------------------------------------------------------- */
    --duration-fast: 120ms;
    --duration-base: 200ms;
    --duration-slow: 320ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);
    --transition-base: var(--duration-base) var(--ease-standard);

    /* ---- Layering ------------------------------------------------------- */
    --z-base:     1;
    --z-sticky:   100;
    --z-dropdown: 1000;
    --z-modal:    1050;
    --z-toast:    1100;

    /* ---- Layout --------------------------------------------------------- */
    --container-max: 1200px;
    --terminal-height: 380px;
}


/* ==========================================================================
   2. DARK THEME  (default)
   Slate base, indigo-teal accent, high-legibility gains/losses.
   ========================================================================== */
:root,
[data-theme="dark"] {
    color-scheme: dark;

    /* ---- Surfaces ------------------------------------------------------- */
    --color-bg:             #0b0f17;   /* app background */
    --color-bg-subtle:      #0f1520;   /* inset areas, inputs */
    --color-surface:        #141a26;   /* cards */
    --color-surface-raised: #1a2231;   /* modals, dropdowns, hover cards */
    --color-surface-sunken: #080b12;   /* terminal, code */
    --color-overlay:        rgba(3, 6, 12, 0.72);

    /* ---- Borders -------------------------------------------------------- */
    --color-border:        #263041;
    --color-border-subtle: #1c2433;
    --color-border-strong: #364257;

    /* ---- Text ----------------------------------------------------------- */
    --color-text:           #e6ebf3;   /* primary */
    --color-text-secondary: #9aa6ba;   /* labels, helper */
    --color-text-muted:     #6b778c;   /* placeholders, disabled */
    --color-text-inverse:   #0b0f17;   /* on bright accents */

    /* ---- Brand / Primary (teal) ---------------------------------------- */
    --color-primary:        #2dd4bf;
    --color-primary-hover:  #5eead4;
    --color-primary-active: #14b8a6;
    --color-primary-soft:   rgba(45, 212, 191, 0.14);
    --color-primary-border: rgba(45, 212, 191, 0.38);
    --color-on-primary:     #04201c;

    /* ---- Secondary accent (indigo) ------------------------------------- */
    --color-accent:        #818cf8;
    --color-accent-hover:  #a5b4fc;
    --color-accent-soft:   rgba(129, 140, 248, 0.15);
    --color-accent-border: rgba(129, 140, 248, 0.40);

    /* ---- Trading signals ------------------------------------------------ */
    --color-buy:          #22c55e;
    --color-buy-hover:    #4ade80;
    --color-buy-soft:     rgba(34, 197, 94, 0.14);
    --color-buy-border:   rgba(34, 197, 94, 0.40);
    --color-on-buy:       #04200e;

    --color-sell:         #f43f5e;
    --color-sell-hover:   #fb7185;
    --color-sell-soft:    rgba(244, 63, 94, 0.14);
    --color-sell-border:  rgba(244, 63, 94, 0.40);
    --color-on-sell:      #ffffff;

    --color-neutral-signal: #94a3b8;

    /* ---- Status --------------------------------------------------------- */
    --color-success:        var(--color-buy);
    --color-success-soft:   var(--color-buy-soft);
    --color-danger:         var(--color-sell);
    --color-danger-soft:    var(--color-sell-soft);
    --color-warning:        #f59e0b;
    --color-warning-soft:   rgba(245, 158, 11, 0.15);
    --color-warning-border: rgba(245, 158, 11, 0.40);
    --color-info:           #38bdf8;
    --color-info-soft:      rgba(56, 189, 248, 0.14);
    --color-info-border:    rgba(56, 189, 248, 0.38);

    /* ---- Interaction ---------------------------------------------------- */
    --color-hover:    rgba(255, 255, 255, 0.04);
    --color-active:   rgba(255, 255, 255, 0.08);
    --color-selected: var(--color-primary-soft);
    --color-focus-ring: rgba(45, 212, 191, 0.45);
    --focus-ring: 0 0 0 3px var(--color-focus-ring);

    /* ---- Component-specific -------------------------------------------- */
    --color-input-bg:        var(--color-bg-subtle);
    --color-input-border:    var(--color-border);
    --color-terminal-bg:     var(--color-surface-sunken);
    --color-terminal-text:   #7ee2a8;
    --color-clock:           #5eead4;
    --color-clock-glow:      rgba(45, 212, 191, 0.35);
    --color-scrollbar-thumb: #2c3750;
    --color-scrollbar-track: transparent;

    --gradient-page: radial-gradient(circle at 12% 0%, #121a2b 0%, #0b0f17 55%);
    --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    --gradient-card: linear-gradient(160deg, #161d2b 0%, #121823 100%);

    /* ---- Shadows (dark UIs need deeper, tighter shadows) --------------- */
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.40);
    --shadow-md: 0 6px 16px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 14px 32px rgba(0, 0, 0, 0.55);
    --shadow-xl: 0 24px 56px rgba(0, 0, 0, 0.65);
    --shadow-glow-primary: 0 0 0 1px var(--color-primary-border), 0 6px 22px rgba(45, 212, 191, 0.18);
    --shadow-glow-buy:  0 0 0 1px var(--color-buy-border),  0 6px 22px rgba(34, 197, 94, 0.18);
    --shadow-glow-sell: 0 0 0 1px var(--color-sell-border), 0 6px 22px rgba(244, 63, 94, 0.18);
    --shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}


/* ==========================================================================
   3. LIGHT THEME
   Clean cool-gray base, indigo-teal accent tuned for AA contrast on white.
   ========================================================================== */
[data-theme="light"] {
    color-scheme: light;

    /* ---- Surfaces ------------------------------------------------------- */
    --color-bg:             #f4f6fa;
    --color-bg-subtle:      #eef1f6;
    --color-surface:        #ffffff;
    --color-surface-raised: #ffffff;
    --color-surface-sunken: #f0f3f8;
    --color-overlay:        rgba(15, 23, 42, 0.45);

    /* ---- Borders -------------------------------------------------------- */
    --color-border:        #dbe1ea;
    --color-border-subtle: #e8ecf2;
    --color-border-strong: #c3ccd9;

    /* ---- Text ----------------------------------------------------------- */
    --color-text:           #0f172a;
    --color-text-secondary: #475569;
    --color-text-muted:     #8492a6;
    --color-text-inverse:   #ffffff;

    /* ---- Brand / Primary (teal) ---------------------------------------- */
    --color-primary:        #0d9488;
    --color-primary-hover:  #0f766e;
    --color-primary-active: #115e59;
    --color-primary-soft:   rgba(13, 148, 136, 0.10);
    --color-primary-border: rgba(13, 148, 136, 0.35);
    --color-on-primary:     #ffffff;

    /* ---- Secondary accent (indigo) ------------------------------------- */
    --color-accent:        #4f46e5;
    --color-accent-hover:  #4338ca;
    --color-accent-soft:   rgba(79, 70, 229, 0.10);
    --color-accent-border: rgba(79, 70, 229, 0.32);

    /* ---- Trading signals ------------------------------------------------ */
    --color-buy:          #16a34a;
    --color-buy-hover:    #15803d;
    --color-buy-soft:     rgba(22, 163, 74, 0.10);
    --color-buy-border:   rgba(22, 163, 74, 0.35);
    --color-on-buy:       #ffffff;

    --color-sell:         #e11d48;
    --color-sell-hover:   #be123c;
    --color-sell-soft:    rgba(225, 29, 72, 0.09);
    --color-sell-border:  rgba(225, 29, 72, 0.35);
    --color-on-sell:      #ffffff;

    --color-neutral-signal: #64748b;

    /* ---- Status --------------------------------------------------------- */
    --color-success:        var(--color-buy);
    --color-success-soft:   var(--color-buy-soft);
    --color-danger:         var(--color-sell);
    --color-danger-soft:    var(--color-sell-soft);
    --color-warning:        #d97706;
    --color-warning-soft:   rgba(217, 119, 6, 0.12);
    --color-warning-border: rgba(217, 119, 6, 0.38);
    --color-info:           #0284c7;
    --color-info-soft:      rgba(2, 132, 199, 0.10);
    --color-info-border:    rgba(2, 132, 199, 0.35);

    /* ---- Interaction ---------------------------------------------------- */
    --color-hover:    rgba(15, 23, 42, 0.04);
    --color-active:   rgba(15, 23, 42, 0.08);
    --color-selected: var(--color-primary-soft);
    --color-focus-ring: rgba(13, 148, 136, 0.35);
    --focus-ring: 0 0 0 3px var(--color-focus-ring);

    /* ---- Component-specific -------------------------------------------- */
    --color-input-bg:        #ffffff;
    --color-input-border:    var(--color-border-strong);
    --color-terminal-bg:     #0f172a;       /* terminal stays dark for contrast */
    --color-terminal-text:   #86efac;
    --color-clock:           #0f766e;
    --color-clock-glow:      rgba(13, 148, 136, 0.18);
    --color-scrollbar-thumb: #c3ccd9;
    --color-scrollbar-track: transparent;

    --gradient-page: linear-gradient(180deg, #f8fafc 0%, #f1f4f9 100%);
    --gradient-primary: linear-gradient(135deg, #14b8a6 0%, #0d9488 100%);
    --gradient-card: linear-gradient(160deg, #ffffff 0%, #fafbfd 100%);

    /* ---- Shadows (soft, layered, low opacity) -------------------------- */
    --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
    --shadow-sm: 0 2px 6px rgba(15, 23, 42, 0.07);
    --shadow-md: 0 6px 16px rgba(15, 23, 42, 0.09);
    --shadow-lg: 0 14px 32px rgba(15, 23, 42, 0.12);
    --shadow-xl: 0 24px 56px rgba(15, 23, 42, 0.16);
    --shadow-glow-primary: 0 0 0 1px var(--color-primary-border), 0 6px 18px rgba(13, 148, 136, 0.14);
    --shadow-glow-buy:  0 0 0 1px var(--color-buy-border),  0 6px 18px rgba(22, 163, 74, 0.14);
    --shadow-glow-sell: 0 0 0 1px var(--color-sell-border), 0 6px 18px rgba(225, 29, 72, 0.14);
    --shadow-inset: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}


/* ==========================================================================
   4. LEGACY ALIASES
   Existing stylesheets (trading.css) read these names. They now resolve to
   the active theme, so current pages pick up the new palette automatically.
   Remove once all components use the --color-* tokens.
   ========================================================================== */
:root {
    --bg-color:      var(--color-bg);
    --card-bg:       var(--color-surface);
    --border-color:  var(--color-border);
    --accent-color:  var(--color-buy);
    --text-color:    var(--color-text);
    --danger-color:  var(--color-sell);
    --warning-color: var(--color-warning);
    --info-color:    var(--color-info);
}


/* ==========================================================================
   5. BASE / UTILITY HELPERS
   Low-specificity; opt-in via class or applied only to root-level elements.
   ========================================================================== */
html {
    font-family: var(--font-sans);
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    font-size: var(--font-size-md);
    line-height: var(--line-height-normal);
    font-weight: var(--font-weight-regular);
    color: var(--color-text);
    background-color: var(--color-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Smooth theme switching without animating every property */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
    transition: background-color var(--duration-base) var(--ease-standard),
                border-color var(--duration-base) var(--ease-standard),
                color var(--duration-base) var(--ease-standard) !important;
}

:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

::selection {
    background: var(--color-primary-soft);
    color: var(--color-text);
}

/* Themed scrollbars */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--color-scrollbar-thumb) var(--color-scrollbar-track);
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--color-scrollbar-track); }
*::-webkit-scrollbar-thumb {
    background: var(--color-scrollbar-thumb);
    border-radius: var(--radius-pill);
    border: 2px solid transparent;
    background-clip: content-box;
}

/* ---- Numeric / mono helpers (prices, clocks, quantities) --------------- */
.num,
.font-numeric {
    font-family: var(--font-numeric);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    direction: ltr;
    unicode-bidi: isolate;
}

.mono {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--letter-spacing-mono);
}

/* Force LTR for values that must not be bidi-reordered (IPs, tokens, ISIN) */
.ltr {
    direction: ltr;
    unicode-bidi: isolate;
    text-align: left;
}

/* ---- Trading signal text ------------------------------------------------ */
.text-buy     { color: var(--color-buy)  !important; }
.text-sell    { color: var(--color-sell) !important; }
.text-neutral { color: var(--color-neutral-signal) !important; }

.bg-buy-soft  { background-color: var(--color-buy-soft)  !important; }
.bg-sell-soft { background-color: var(--color-sell-soft) !important; }

/* ---- Surface helpers ---------------------------------------------------- */
.surface {
    background: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.surface-raised {
    background: var(--color-surface-raised);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
}

/* ==========================================================================
   6. BOOTSTRAP UTILITY BRIDGE
   Templates use Bootstrap utility classes (bg-dark, text-light, ...) whose
   colors are hardcoded for a dark UI. Re-point them at theme tokens so both
   themes render correctly on every page (index, login, admin).
   ========================================================================== */
.bg-dark         { background-color: var(--color-surface-sunken) !important; }
.text-light      { color: var(--color-text) !important; }
.text-secondary  { color: var(--color-text-secondary) !important; }
.text-info       { color: var(--color-info) !important; }
.text-warning    { color: var(--color-warning) !important; }
.text-success    { color: var(--color-buy) !important; }
.text-danger     { color: var(--color-sell) !important; }
.border-secondary { border-color: var(--color-border) !important; }
.border-success   { border-color: var(--color-buy-border) !important; }
.border-info      { border-color: var(--color-info-border) !important; }

/* Modals (shared by trading + admin) */
.modal-content {
    background-color: var(--color-surface-raised);
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
}
.modal-content.bg-dark,
.modal-content.text-white,
.modal-content.text-light {
    background-color: var(--color-surface-raised) !important;
    color: var(--color-text) !important;
}
.modal-header,
.modal-footer {
    border-color: var(--color-border) !important;
}
/* Template uses btn-close-white; keep it visible on the light theme */
.btn-close-white { filter: var(--bs-btn-close-filter); }


/* ==========================================================================
   7. THEME TOGGLE COMPONENT
   Markup (see templates):
     <button type="button" class="theme-toggle" data-theme-toggle ...>
       <span class="theme-toggle__option theme-toggle__option--dark"><i class="fa-solid fa-moon"></i></span>
       <span class="theme-toggle__option theme-toggle__option--light"><i class="fa-solid fa-sun"></i></span>
     </button>
   Behaviour lives in static/js/theme.js.
   ========================================================================== */
.theme-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 3px;
    direction: ltr;                       /* fixed icon order in RTL pages */
    background: var(--color-bg-subtle);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius-pill);
    color: var(--color-text-muted);
    line-height: 1;
    cursor: pointer;
    transition: background-color var(--transition-base),
                border-color var(--transition-base);
}
.theme-toggle:hover {
    border-color: var(--color-border-strong);
    background: var(--color-surface-raised);
}

.theme-toggle__option {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-circle);
    font-size: var(--font-size-sm);
    transition: background-color var(--transition-base),
                color var(--transition-base),
                box-shadow var(--transition-base);
}

/* Active option = current theme (dark is the default when no attribute is set) */
:root:not([data-theme="light"]) .theme-toggle__option--dark,
[data-theme="light"] .theme-toggle__option--light {
    background: var(--color-primary);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-xs);
}

/* Pinned variant for pages without a header (login) */
.theme-toggle--floating {
    position: fixed;
    top: var(--space-4);
    inset-inline-start: var(--space-4);
    z-index: var(--z-sticky);
}


/* Respect reduced-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;
    }
}