/* ================================================================
   NLC Tester — Design System  (admin theme: "Gov Console")
   یک تغییر اینجا = تمام صفحات بروز می‌شوند
   ================================================================ */

/* ── 1. Fonts ──────────────────────────────────────────────────── */
@font-face { font-family: IRANSansWeb; font-style: normal; font-weight: 200; src: url('/fonts/iransans-ultralight.woff2') format('woff2'), url('/fonts/iransans-ultralight.woff') format('woff'); }
@font-face { font-family: IRANSansWeb; font-style: normal; font-weight: 300; src: url('/fonts/iransans-light.woff2')      format('woff2'), url('/fonts/iransans-light.woff')      format('woff'); }
@font-face { font-family: IRANSansWeb; font-style: normal; font-weight: 400; src: url('/fonts/iransans-regular.woff2')    format('woff2'), url('/fonts/iransans-regular.woff')    format('woff'); }
@font-face { font-family: IRANSansWeb; font-style: normal; font-weight: 500; src: url('/fonts/iransans-medium.woff2')     format('woff2'), url('/fonts/iransans-medium.woff')     format('woff'); }
@font-face { font-family: IRANSansWeb; font-style: normal; font-weight: 700; src: url('/fonts/iransans-bold.woff2')       format('woff2'), url('/fonts/iransans-bold.woff')       format('woff'); }
@font-face { font-family: IRANSansWeb; font-style: normal; font-weight: 900; src: url('/fonts/iransans-black.woff2')      format('woff2'), url('/fonts/iransans-black.woff')      format('woff'); }

/* ── 2. Design Tokens ──────────────────────────────────────────── */
:root {
    /* Brand */
    --gov-900: #0E2F4C;
    --gov-800: #11406A;
    --gov-700: #1B4F7E;
    --gov-600: #2467A0;
    --gov-500: #2D7CC0;
    --gov-400: #4F97D4;
    --gov-100: #E8F0FB;
    --gov-50:  #F2F7FD;

    /* Surfaces */
    --bg-app:     #eef2f8;
    --bg-card:    #ffffff;
    --bg-soft:    #f6f8fc;
    --border:     #e7ebf2;
    --border-soft:#eef1f6;

    /* Text */
    --ink-900: #0f1b2d;
    --ink-700: #334155;
    --ink-500: #64748b;
    --ink-400: #94a3b8;

    /* Accents (soft bg / strong text) */
    --green-bg:#dcfce7; --green-tx:#15803d;
    --blue-bg: #dbeafe; --blue-tx: #1d4ed8;
    --sky-bg:  #e0f2fe; --sky-tx:  #0369a1;
    --amber-bg:#fef3c7; --amber-tx:#b45309;
    --red-bg:  #fee2e2; --red-tx:  #b91c1c;
    --gray-bg: #f1f5f9; --gray-tx: #475569;
    --slate-bg:#1e293b; --slate-tx:#e2e8f0;

    /* Typography */
    --font-body: IRANSansWeb, Tahoma, Arial, sans-serif;
    --font-mono: 'Courier New', Courier, IRANSansWeb, Tahoma, monospace;
    --text-xs:   0.72rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;

    /* Radius */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;

    /* Inputs */
    --input-border:  #d6dde8;
    --input-focus:   var(--gov-500);
    --input-radius:  var(--radius-md);
    --input-padding: 0.6rem 0.85rem;
    --input-font:    var(--text-sm);

    /* Shadows */
    --shadow-xs:  0 1px 2px 0 rgb(15 27 45 / .05);
    --shadow-sm:  0 1px 3px 0 rgb(15 27 45 / .06), 0 1px 2px -1px rgb(15 27 45 / .04);
    --shadow-md:  0 4px 14px -4px rgb(15 27 45 / .10), 0 2px 6px -2px rgb(15 27 45 / .06);
    --shadow-lg:  0 18px 40px -12px rgb(15 27 45 / .18);
    --shadow-card:var(--shadow-sm);

    /* Sidebar */
    --sidebar-w: 268px;
}

/* ── 3. Base ───────────────────────────────────────────────────── */
*, *::before, *::after { font-family: var(--font-body); box-sizing: border-box; }

html, body {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: 1.65;
    color: var(--ink-700);
}

/* form controls don't inherit font in browsers */
input, textarea, select, button, optgroup, option {
    font-family: var(--font-body) !important;
    font-size:   var(--text-sm)   !important;
}

code, pre, kbd, samp, .font-mono, textarea[dir="ltr"] {
    font-family: var(--font-mono) !important;
}

.datepicker-plot-area, .datepicker-plot-area * {
    font-family: var(--font-body) !important;
    direction: rtl;
}

/* nicer scrollbars inside the console */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
*::-webkit-scrollbar-track { background: transparent; }

/* ── 4. App Background ─────────────────────────────────────────── */
.nlc-app-bg {
    background-color: var(--bg-app);
    background-image:
        radial-gradient(1200px 600px at 100% -5%, rgba(45,124,192,.10), transparent 60%),
        radial-gradient(900px 500px at -10% 110%, rgba(27,79,126,.08), transparent 55%);
    min-height: 100vh;
}

/* ── 5. Sidebar ────────────────────────────────────────────────── */
.nlc-sidebar {
    width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--gov-900) 0%, var(--gov-800) 55%, var(--gov-700) 100%);
    color: #dbe7f5;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;            /* RTL: sidebar pinned to the physical right */
    z-index: 30;
    display: flex;
    flex-direction: column;
    box-shadow: -6px 0 30px -18px rgb(14 47 76 / .8);
}
.nlc-brand-badge {
    width: 42px; height: 42px;
    border-radius: 13px;
    background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.06));
    display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.nlc-nav-label {
    font-size: 0.66rem;
    letter-spacing: .12em;
    color: #6f93b8;
    font-weight: 700;
    padding-inline: 14px;
    margin: 6px 0 8px;
    text-transform: uppercase;
}
.nlc-nav-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    border-radius: 12px;
    font-size: var(--text-sm);
    color: #b9cde2;
    transition: background .16s, color .16s;
}
.nlc-nav-item:hover { background: rgba(255,255,255,.07); color: #fff; }
.nlc-nav-item.active {
    background: linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    color: #fff;
    font-weight: 700;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.nlc-nav-item.active::before {
    content: "";
    position: absolute;
    right: 2px;          /* RTL: indicator on the right (screen-edge) side */
    top: 50%; transform: translateY(-50%);
    width: 4px; height: 22px;
    border-radius: 4px;
    background: #7cc0ff;
    box-shadow: 0 0 12px #4f97d4;
}
.nlc-nav-item .nlc-nav-ico {
    width: 30px; height: 30px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 9px;
    background: rgba(255,255,255,.06);
    flex-shrink: 0;
}
.nlc-nav-item.active .nlc-nav-ico { background: rgba(124,192,255,.20); }

/* ── 6. Topbar ─────────────────────────────────────────────────── */
.nlc-topbar {
    background: rgba(255,255,255,.85);
    backdrop-filter: saturate(150%) blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
}

/* ── 7. Page Header ────────────────────────────────────────────── */
.nlc-page-title { font-size: 1.05rem; font-weight: 800; color: var(--ink-900); }
.nlc-page-sub   { font-size: var(--text-xs); color: var(--ink-400); margin-top: 2px; }

/* ── 8. Cards ──────────────────────────────────────────────────── */
.nlc-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}
.nlc-card-hover { transition: box-shadow .18s, transform .18s; }
.nlc-card-hover:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.nlc-card-header {
    padding: 0.95rem 1.25rem;
    border-bottom: 1px solid var(--border-soft);
    display: flex; align-items: center; justify-content: space-between;
}

/* ── 9. Stat Card ──────────────────────────────────────────────── */
.nlc-stat {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 1.05rem 1.15rem;
    display: flex; align-items: center; gap: 14px;
    transition: box-shadow .18s, transform .18s;
}
.nlc-stat:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.nlc-stat-ico {
    width: 46px; height: 46px; flex-shrink: 0;
    border-radius: 13px;
    display: flex; align-items: center; justify-content: center;
}
.nlc-stat-num { font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--ink-900); }
.nlc-stat-lbl { font-size: var(--text-xs); color: var(--ink-500); margin-top: 5px; }

/* ── 10. Tables ────────────────────────────────────────────────── */
.nlc-table { width: 100%; border-collapse: collapse; }
.nlc-table thead th {
    text-align: right;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--ink-500);
    background: var(--bg-soft);
    padding: 0.7rem 1.15rem;
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
}
.nlc-table tbody td {
    padding: 0.8rem 1.15rem;
    font-size: var(--text-sm);
    color: var(--ink-700);
    border-bottom: 1px solid var(--border-soft);
    vertical-align: middle;
}
.nlc-table tbody tr { transition: background .12s; }
.nlc-table tbody tr:hover { background: var(--gov-50); }
.nlc-table tbody tr:last-child td { border-bottom: none; }

/* ── 11. Inputs ────────────────────────────────────────────────── */
.nlc-input {
    display: block; width: 100%;
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-padding);
    font-size: var(--input-font);
    font-family: var(--font-body);
    background: #fff;
    color: var(--ink-700);
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}
.nlc-input:focus { border-color: var(--input-focus); box-shadow: 0 0 0 3px rgb(45 124 192 / .15); }
.nlc-input.error { border-color: #f87171; }
.nlc-label { display:block; font-size: var(--text-xs); font-weight: 600; color: var(--ink-500); margin-bottom: 5px; }

/* ── 12. Buttons ───────────────────────────────────────────────── */
.nlc-btn {
    display: inline-flex; align-items: center; gap: 7px;
    font-family: var(--font-body);
    font-size: var(--text-sm); font-weight: 700;
    padding: 0.55rem 1.15rem;
    border-radius: var(--radius-md);
    cursor: pointer; border: 1px solid transparent;
    transition: background .15s, box-shadow .15s, opacity .15s, transform .05s;
    text-decoration: none; line-height: 1.2;
}
.nlc-btn:active { transform: translateY(1px); }
.nlc-btn-primary { background: linear-gradient(135deg, var(--gov-700), var(--gov-500)); color:#fff; box-shadow: var(--shadow-sm); }
.nlc-btn-primary:hover { filter: brightness(1.06); }
.nlc-btn-danger  { background:#dc2626; color:#fff; }
.nlc-btn-danger:hover { background:#b91c1c; }
.nlc-btn-ghost   { background:#fff; border-color: var(--input-border); color: var(--ink-700); }
.nlc-btn-ghost:hover { background: var(--bg-soft); }
.nlc-btn-sm { padding: 0.4rem 0.8rem; font-size: var(--text-xs); border-radius: 9px; }

/* small soft action chips used in table rows */
.nlc-chip {
    display:inline-flex; align-items:center; gap:5px;
    font-size: var(--text-xs); font-weight:600;
    padding: 6px 10px; border-radius: 9px;
    transition: background .14s, color .14s;
    cursor: pointer; border:none; text-decoration:none;
}
.nlc-chip-blue  { background: var(--blue-bg);  color: var(--blue-tx);  }
.nlc-chip-blue:hover  { background:#bfdbfe; }
.nlc-chip-indigo{ background:#e0e7ff; color:#4338ca; }
.nlc-chip-indigo:hover{ background:#c7d2fe; }
.nlc-chip-violet{ background:#ede9fe; color:#6d28d9; }
.nlc-chip-violet:hover{ background:#ddd6fe; }
.nlc-chip-red   { background: var(--red-bg);   color: var(--red-tx);   }
.nlc-chip-red:hover   { background:#fecaca; }
.nlc-chip-gray  { background: var(--gray-bg);  color: var(--gray-tx);  }
.nlc-chip-gray:hover  { background:#e2e8f0; }

/* ── 13. Badges ────────────────────────────────────────────────── */
.nlc-badge {
    display:inline-flex; align-items:center; gap:5px;
    padding: 3px 11px; border-radius: 9999px;
    font-size: var(--text-xs); font-weight: 700;
}
.nlc-badge-green { background: var(--green-bg); color: var(--green-tx); }
.nlc-badge-blue  { background: var(--blue-bg);  color: var(--blue-tx);  }
.nlc-badge-sky   { background: var(--sky-bg);   color: var(--sky-tx);   }
.nlc-badge-amber { background: var(--amber-bg); color: var(--amber-tx); }
.nlc-badge-red   { background: var(--red-bg);   color: var(--red-tx);   }
.nlc-badge-gray  { background: var(--gray-bg);  color: var(--gray-tx);  }
.nlc-badge-slate { background: var(--slate-bg); color: var(--slate-tx); }

/* ── 14. Section Heading ───────────────────────────────────────── */
.nlc-section-title {
    font-size: var(--text-sm); font-weight: 700;
    color: var(--gov-700);
    border-right: 4px solid var(--gov-500);
    padding-right: 0.75rem; margin-bottom: 1rem;
}

/* ── 15. JSON / Code Boxes ─────────────────────────────────────── */
.nlc-json-box, .json-preview {
    font-family: var(--font-mono) !important;
    font-size: var(--text-xs);
    background: #0f172a;
    color: #cbd5e1;
    border: 1px solid #1e293b;
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    max-height: 240px;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
    direction: ltr; text-align: left;
    line-height: 1.6; margin: 0;
}

/* ── 16. Collapse / Chevron ────────────────────────────────────── */
.nlc-chevron { transition: transform .18s ease; }
.nlc-chevron.rotated { transform: rotate(-90deg); }
details[open] .details-arrow { transform: rotate(180deg); }
.details-arrow { transition: transform .15s ease; }
.chevron { transition: transform .2s ease; }

/* ── 17. Log Card Header ───────────────────────────────────────── */
.nlc-log-header {
    display:flex; align-items:center; gap:8px;
    padding: 0.6rem 1rem;
    background: var(--bg-soft);
    border-bottom: 1px solid var(--border-soft);
    cursor: pointer; width:100%; text-align:right;
    font-family: var(--font-body);
}
.nlc-log-header:hover { background: #eef2f8; }

/* ── 18. Misc helpers ──────────────────────────────────────────── */
.nlc-empty { text-align:center; padding: 4rem 1rem; color: var(--ink-400); }
.nlc-count-pill {
    background: var(--gov-50); color: var(--gov-700);
    font-size: var(--text-xs); font-weight: 700;
    padding: 3px 11px; border-radius: 9999px;
    border: 1px solid var(--gov-100);
}