/* ==========================================================================
   arHSEman — Shared Design Tokens & Base Styles
   Single source of truth for colors, spacing and base resets.
   Linked from every page: <link rel="stylesheet" href="assets/css/theme.css">
   (adjust the relative path per folder depth: "../assets/css/theme.css" from
   /modules or /apps, "assets/css/theme.css" from the project root)

   Palette is derived from the arHSEman logo: navy (shield/"A") + green (leaf).
   Variable NAMES are unchanged from the original inline stylesheets so this
   file can be dropped in without touching any page's markup or JS logic —
   only the <style> block that declared these tokens is removed from each
   page and replaced with a <link> to this file.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@100;300;400;500;600;700;900&display=swap');

/* ============================================
   THEME VARIABLES — LIGHT (default)
============================================ */
:root {
    --bg-deep: #f8fafc;
    --bg-surface: #ffffff;
    --bg-elevated: #f1f5f9;
    --bg-hover: #e2e8f0;
    --border-subtle: rgba(63, 145, 66, 0.3);
    --border-soft: rgba(0, 0, 0, 0.08);

    /* Primary brand accent (from logo) */
    --gold: #2a4f97;
    --gold-soft: #1c3d78;
    --gold-deep: #16305f;
    --gold-glow: rgba(42, 79, 151, 0.2);

    --text-primary: #1e293b;
    --text-secondary: #475569;
    --text-muted: #94a3b8;

    /* Module accent colors */
    --health: #059669;
    --chemical: #1c3d78;
    --training: #d97706;
    --risk: #db2777;
    --assistant: #2563eb;
    --pricing: #be185d;
    --software: #0891b2;
    --incidents: #dc2626;
    --anomaly: #d97706;
    --legal: #7c3aed;
    --moc: #0d9488;
    --objectives: #ea580c;
    --hazardreport: #0284c7;

    --legal-glow-soft: rgba(124, 58, 237, 0.10);
    --legal-glow-md: rgba(124, 58, 237, 0.2);
    --moc-glow-soft: rgba(13, 148, 136, 0.10);
    --moc-glow-md: rgba(13, 148, 136, 0.2);
    --objectives-glow-soft: rgba(234, 88, 12, 0.10);
    --objectives-glow-md: rgba(234, 88, 12, 0.2);
    --hazardreport-glow-soft: rgba(2, 132, 199, 0.10);
    --hazardreport-glow-md: rgba(2, 132, 199, 0.2);

    --danger-glow-soft: rgba(220, 38, 38, 0.10);
    --danger-glow-md: rgba(220, 38, 38, 0.18);
    --incidents-glow-soft: rgba(220, 38, 38, 0.10);
    --incidents-glow-md: rgba(220, 38, 38, 0.2);
    --anomaly-glow-soft: rgba(217, 119, 6, 0.10);
    --anomaly-glow-md: rgba(217, 119, 6, 0.2);
    --success: #059669;
    --success-glow-soft: rgba(5, 150, 105, 0.10);
    --warning: #d97706;
    --warning-glow-soft: rgba(217, 119, 6, 0.10);

    --body-bg-radial-1: rgba(42, 79, 151, 0.06);
    --body-bg-radial-2: rgba(28, 61, 120, 0.04);
    --card-bg: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    --shadow-color: rgba(0, 0, 0, 0.08);

    /* Glass navbar */
    --navbar-bg: rgba(255, 255, 255, 0.8);
    --navbar-border: rgba(63, 145, 66, 0.25);
    --navbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    --nav-item-bg: transparent;
    --nav-item-hover-bg: rgba(0, 0, 0, 0.03);
    --nav-item-active-bg: linear-gradient(135deg, rgba(42, 79, 151, 0.12), rgba(42, 79, 151, 0.04));
    --nav-item-active-border: rgba(42, 79, 151, 0.4);
    --nav-icon-bg: rgba(0, 0, 0, 0.04);
    --nav-icon-active-bg: linear-gradient(135deg, rgba(42, 79, 151, 0.15), rgba(42, 79, 151, 0.05));
    --logo-bg: rgba(0, 0, 0, 0.03);
    --logo-border: rgba(42, 79, 151, 0.3);
    --mobile-menu-bg: rgba(255, 255, 255, 0.98);
    --mobile-menu-border: rgba(63, 145, 66, 0.2);
    --hamburger-color: var(--gold-soft);
    --danger: #dc2626;

    /* Standardized spacing / radius / shadow scale (new — additive, for
       any new component work; existing pages are unaffected). */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
    --sp-5: 24px; --sp-6: 32px; --sp-7: 48px;
    --shadow-soft-sm: 0 2px 8px rgba(15, 34, 71, 0.06);
    --shadow-soft-md: 0 12px 32px rgba(15, 34, 71, 0.10);
    --shadow-soft-lg: 0 20px 48px rgba(15, 34, 71, 0.14);
}

/* ============================================
   THEME VARIABLES — DARK
============================================ */
[data-theme="dark"] {
    --bg-deep: #0a0a0b;
    --bg-surface: #141416;
    --bg-elevated: #1c1c1f;
    --bg-hover: #242428;
    --border-subtle: rgba(63, 145, 66, 0.12);
    --border-soft: rgba(255, 255, 255, 0.06);

    --gold: #3f9142;
    --gold-soft: #8ed08f;
    --gold-deep: #2f6b31;
    --gold-glow: rgba(63, 145, 66, 0.25);

    --text-primary: #f5f5f0;
    --text-secondary: #a0a0a5;
    --text-muted: #6b6b70;

    --health: #10b981;
    --chemical: #2a4f97;
    --training: #fbbf24;
    --risk: #f472b6;
    --assistant: #3b82f6;
    --pricing: #ec4899;
    --software: #06b6d4;
    --incidents: #ef4444;
    --anomaly: #f59e0b;
    --legal: #a78bfa;
    --moc: #2dd4bf;
    --objectives: #fb923c;
    --hazardreport: #38bdf8;

    --legal-glow-soft: rgba(167, 139, 250, 0.15);
    --legal-glow-md: rgba(167, 139, 250, 0.3);
    --moc-glow-soft: rgba(45, 212, 191, 0.15);
    --moc-glow-md: rgba(45, 212, 191, 0.3);
    --objectives-glow-soft: rgba(251, 146, 60, 0.15);
    --objectives-glow-md: rgba(251, 146, 60, 0.3);
    --hazardreport-glow-soft: rgba(56, 189, 248, 0.15);
    --hazardreport-glow-md: rgba(56, 189, 248, 0.3);

    --danger-glow-soft: rgba(239, 68, 68, 0.15);
    --danger-glow-md: rgba(239, 68, 68, 0.25);
    --incidents-glow-soft: rgba(239, 68, 68, 0.15);
    --incidents-glow-md: rgba(239, 68, 68, 0.3);
    --anomaly-glow-soft: rgba(245, 158, 11, 0.15);
    --anomaly-glow-md: rgba(245, 158, 11, 0.3);
    --success: #10b981;
    --success-glow-soft: rgba(16, 185, 129, 0.15);
    --warning: #f59e0b;
    --warning-glow-soft: rgba(245, 158, 11, 0.15);

    --body-bg-radial-1: rgba(63, 145, 66, 0.08);
    --body-bg-radial-2: rgba(42, 79, 151, 0.05);
    --card-bg: linear-gradient(180deg, #141416 0%, #0a0a0b 100%);
    --shadow-color: rgba(0, 0, 0, 0.4);

    --navbar-bg: rgba(10, 10, 11, 0.75);
    --navbar-border: rgba(63, 145, 66, 0.15);
    --navbar-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    --nav-item-bg: transparent;
    --nav-item-hover-bg: rgba(255, 255, 255, 0.05);
    --nav-item-active-bg: linear-gradient(135deg, rgba(63, 145, 66, 0.15), rgba(63, 145, 66, 0.05));
    --nav-item-active-border: rgba(63, 145, 66, 0.3);
    --nav-icon-bg: rgba(255, 255, 255, 0.05);
    --nav-icon-active-bg: linear-gradient(135deg, rgba(63, 145, 66, 0.2), rgba(63, 145, 66, 0.05));
    --logo-bg: rgba(255, 255, 255, 0.05);
    --logo-border: rgba(63, 145, 66, 0.2);
    --mobile-menu-bg: rgba(10, 10, 11, 0.95);
    --mobile-menu-border: rgba(63, 145, 66, 0.15);
    --hamburger-color: var(--gold-soft);
    --danger: #ef4444;

    --shadow-soft-sm: 0 2px 8px rgba(0, 0, 0, 0.25);
    --shadow-soft-md: 0 12px 32px rgba(0, 0, 0, 0.30);
    --shadow-soft-lg: 0 20px 48px rgba(0, 0, 0, 0.35);
}

/* ============================================
   BASE RESET
============================================ */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--bg-deep);
    color: var(--text-primary);
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    transition: background 0.5s ease, color 0.5s ease;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse 80% 50% at 20% 0%, var(--body-bg-radial-1), transparent 50%),
                radial-gradient(ellipse 60% 50% at 80% 100%, var(--body-bg-radial-2), transparent 50%);
    pointer-events: none;
    z-index: 0;
    transition: background 0.5s ease;
}

:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ==========================================================================
   📱 PWA / NATIVE-APP FEEL — shared across every page
   (install FAB, bottom sheet, responsive tables, chip multi-select,
   iOS/Android native scroll & touch behaviors)
   ========================================================================== */

/* لبه‌های صفحه (Notch / نوار حرکتی) روی گوشی‌های جدید
   نکته: این قانون فقط باید روی نمایشگرهای موبایل/تبلت اعمال شود.
   قبلاً به‌صورت سراسری (بدون media query) روی html/body ست شده بود که باعث
   می‌شد در مرورگرهای ویندوز (Chrome/Edge) اسکرول عمودی با چرخ ماوس دچار
   اختلال شود یا کاملاً کار نکند (احتمالاً به‌دلیل تداخل بین
   overscroll-behavior روی body و لایه‌ی position:fixed پس‌زمینه در
   body::before). محدودسازی آن به همان breakpoint موبایلی که در بقیه‌ی
   این فایل استفاده شده (max-width: 768px) — به‌جای تشخیص pointer/hover که
   روی لپ‌تاپ‌های ویندوزِ لمسی می‌تواند نتیجه‌ی نادرست بدهد — مطمئن‌ترین راه
   است تا دسکتاپ همیشه از این قانون معاف بماند. */
@media (max-width: 768px) {
    html { overscroll-behavior: contain; }
    body { overscroll-behavior-y: contain; }
}

/* جلوگیری از زوم خودکار iOS روی فرم‌ها هنگام فوکوس (باید حداقل ۱۶px باشد) */
@media (max-width: 768px) {
    input, select, textarea { font-size: 16px !important; }
}

/* هایلایت لمسی مرورگر روی دکمه/آیکون غیرفعال، ولی متن قابل انتخاب بماند */
button, a, .nav-item, .bottom-nav-item, .tab-bar-item, [role="button"] {
    -webkit-user-select: none;
    user-select: none;
}
input, textarea, [contenteditable="true"] {
    -webkit-user-select: text;
    user-select: text;
}

/* ============================================
   🟢 دکمه شناور «نصب اپلیکیشن»
   فقط زمانی نمایش داده می‌شود که مرورگر رویداد beforeinstallprompt را
   ارسال کند (توسط assets/js/theme.js مدیریت می‌شود).
============================================ */
.pwa-install-fab {
    position: fixed;
    left: 16px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    z-index: 1200;
    display: none;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid var(--nav-item-active-border);
    border-radius: 999px;
    background: linear-gradient(135deg, var(--gold-soft), var(--gold));
    color: var(--bg-deep);
    font-family: 'Vazirmatn', sans-serif;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    box-shadow: 0 10px 24px var(--gold-glow), 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: pwaFabIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.pwa-install-fab.is-visible { display: inline-flex; }
.pwa-install-fab:active { transform: scale(0.96); }
.pwa-install-fab .pwa-fab-icon { font-size: 16px; }
.pwa-install-fab .pwa-fab-close {
    margin-right: 2px;
    margin-left: -4px;
    opacity: 0.7;
    font-size: 14px;
    padding: 2px 4px;
}
@keyframes pwaFabIn {
    from { opacity: 0; transform: translateY(12px) scale(0.9); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (min-width: 1025px) {
    .pwa-install-fab { bottom: 24px; left: 24px; }
}

/* ============================================
   🗂️ Bottom Sheet عمومی («بیشتر» و هر پنل کشویی دیگر)
============================================ */
.app-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 1400;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.app-sheet-overlay.is-open { opacity: 1; pointer-events: auto; }

.app-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: 1401;
    max-height: 78vh;
    overflow-y: auto;
    background: var(--mobile-menu-bg);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid var(--mobile-menu-border);
    border-bottom: none;
    border-radius: 24px 24px 0 0;
    box-shadow: 0 -16px 48px rgba(0, 0, 0, 0.4);
    padding: 10px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    /* 🛠️ حالت بسته: علاوه بر جابه‌جایی به پایین، کاملاً مخفی می‌شود. قبلاً فقط
       translateY(100%) بود؛ چون پنل دسکتاپ با فاصله‌ی bottom:24px قرار می‌گیرد،
       همان ۲۴ پیکسل لبه‌ی بالایی آن همیشه پایین صفحه دیده می‌شد. */
    transform: translateY(calc(100% + 80px));
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0.35s;
}
.app-sheet.is-open {
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: transform 0.35s cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 0s;
}

.app-sheet-handle {
    width: 40px; height: 4px;
    border-radius: 4px;
    background: var(--border-soft);
    margin: 6px auto 14px;
}
.app-sheet-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    margin: 0 4px 12px;
}
.app-sheet-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}
.app-sheet-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 6px;
    border-radius: 16px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}
.app-sheet-item:active { transform: scale(0.95); }
.app-sheet-item.active {
    background: var(--nav-item-active-bg);
    border-color: var(--nav-item-active-border);
    color: var(--text-primary);
}
.app-sheet-item .asi-icon { font-size: 22px; }

/* بنر یادآوری تقویم شمسی */
.cal-reminder-banner {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(217, 119, 6, 0.35);
    border-radius: var(--radius-md, 12px);
    padding: 14px 16px;
    margin-bottom: 20px;
    font-size: 12px;
    line-height: 1.9;
    color: var(--text-secondary);
    cursor: pointer;
}
.cal-reminder-banner b { color: #d97706; }
.cal-reminder-banner ul { margin: 6px 0 0; padding-inline-start: 18px; }

/* نشان روز شمسی امروز روی آیکون‌های تقویم */
.cal-icon-badge {
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 9px;
    font-weight: 800;
    background: var(--gold, #059669);
    color: #fff;
    border-radius: 4px;
    padding: 0 4px;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}
.app-sheet-item.danger { color: var(--danger); }

.app-sheet-divider {
    height: 1px;
    background: var(--border-soft);
    margin: 14px 2px;
}

/* ============================================
   📋 جدول‌های واکنش‌گرا → کارت در موبایل
   assets/js/theme.js برچسب‌های data-label را از thead می‌سازد.
============================================ */
@media (max-width: 640px) {
    table.rt-cards { border: none !important; }
    table.rt-cards thead { display: none; }
    table.rt-cards, table.rt-cards tbody, table.rt-cards tr, table.rt-cards td {
        display: block;
        width: 100% !important;
    }
    table.rt-cards tr {
        margin-bottom: 12px;
        padding: 10px 12px;
        border-radius: 14px;
        background: var(--bg-elevated);
        border: 1px solid var(--border-soft);
    }
    table.rt-cards td {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
        padding: 7px 2px !important;
        border: none !important;
        text-align: right !important;
        font-size: 13px;
    }
    table.rt-cards td:not(:last-child) {
        border-bottom: 1px dashed var(--border-soft) !important;
    }
    table.rt-cards td::before {
        content: attr(data-label);
        flex-shrink: 0;
        font-weight: 700;
        color: var(--text-muted);
        font-size: 11px;
    }
    table.rt-cards td[data-label=""]::before,
    table.rt-cards td:not([data-label])::before { content: none; }
}

/* ============================================
   🔘 گروه چیپ برای انتخاب چندگانه (جایگزین select multiple)
============================================ */
.chip-select-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.chip-select-option {
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border-soft);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    transition: all 0.2s ease;
}
.chip-select-option.selected {
    background: var(--nav-item-active-bg);
    border-color: var(--nav-item-active-border);
    color: var(--text-primary);
    font-weight: 600;
}
.chip-select-option:active { transform: scale(0.96); }

/* ============================================
   📅 تقویم شمسی (jalali.js) — پاپ‌آپ انتخاب تاریخ
============================================ */
input.jalali-date-input {
    cursor: pointer;
    background-image: none;
}
.jalali-datepicker-pop {
    /* باید بالاتر از همه‌ی مودال‌ها (تا 99999) باشد؛ jalali.js هم همین مقدار را inline می‌گذارد */
    z-index: 2147483000;
    width: 260px;
    background: var(--bg-elevated);
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft-lg);
    padding: 12px;
    font-family: 'Vazirmatn', sans-serif;
    direction: rtl;
}
.jdp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.jdp-title { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.jdp-nav {
    width: 28px; height: 28px; border-radius: 8px; border: 1px solid var(--border-soft);
    background: var(--bg-hover); color: var(--text-primary); cursor: pointer; font-size: 14px;
}
.jdp-week-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: 4px; }
.jdp-wd { text-align: center; font-size: 10px; color: var(--text-muted); font-weight: 700; }
.jdp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jdp-day {
    text-align: center; padding: 7px 0; border-radius: 8px; font-size: 12px;
    color: var(--text-secondary); cursor: pointer; transition: 0.15s;
}
.jdp-day:hover { background: var(--bg-hover); }
.jdp-day-empty { cursor: default; }
.jdp-day-empty:hover { background: transparent; }
.jdp-today { border: 1px solid var(--gold); color: var(--gold-soft); font-weight: 700; }
.jdp-selected { background: var(--gold); color: var(--bg-deep); font-weight: 800; }
.jdp-footer { display: flex; gap: 8px; margin-top: 10px; }
.jdp-today-btn, .jdp-clear-btn {
    flex: 1; padding: 7px 0; border-radius: 8px; border: 1px solid var(--border-soft);
    background: var(--bg-hover); color: var(--text-secondary); font-size: 11px; cursor: pointer; font-family: inherit;
}
.jdp-today-btn:hover { color: var(--gold-soft); border-color: var(--gold); }

/* ============================================
   📱 اصلاحات سراسری ریسپانسیو موبایل
   این دو قانون به‌صورت متمرکز در فایل مشترک theme.css اضافه شده‌اند
   (نه در تک‌تک ماژول‌ها) تا با کمترین ریسک، بیشترین پوشش را در کل
   پروژه داشته باشند. چون همه‌ی ماژول‌ها این فایل را import می‌کنند
   و این قوانین فقط زیر یک @media (max-width: 768px) فعال می‌شوند،
   ظاهر دسکتاپ هیچ ماژولی تغییر نمی‌کند.
============================================ */
@media (max-width: 768px) {

    /* ۱) سرریز افقی جدول‌ها
       ------------------------------------------------------------
       در چند ماژول جدول بدون کانتینر overflow-x:auto قرار دارد و در
       موبایل یا فشرده و نچسب می‌شود یا کل صفحه را افقی هل می‌دهد.
       به‌جای اصلاح تک‌تک فایل‌ها (و ریسک از قلم افتادن مواردی که در
       آینده اضافه می‌شوند)، خودِ تگ table را در موبایل به یک بلوک
       قابل‌اسکرول افقی تبدیل می‌کنیم. اگر جدولی از قبل داخل یک
       div با overflow-x:auto پیچیده شده باشد، این قانون کاملاً
       بی‌ضرر و هم‌راستا با همان رفتار است (اسکرول تکراری ایجاد
       نمی‌کند چون بلافاصله روی خودِ جدول اعمال می‌شود).
    */
    table {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table thead, table tbody, table tr {
        width: max-content;
        min-width: 100%;
    }

    /* ۲) زوم ناخواسته‌ی iOS Safari هنگام فوکوس روی فیلدهای ورودی
       ------------------------------------------------------------
       سافاری آیفون هر اینپوت/سلکت/تکست‌اریایی با فونت زیر ۱۶px را
       هنگام فوکوس با زوم خودکار صفحه نمایش می‌دهد — تجربه‌ای که در
       فرم‌هایی مثل امضای دیجیتال چک‌لیست یا فیلدهای فیلتر جدول‌ها
       عملاً کار را مختل می‌کند. برخی ماژول‌ها برای فیلدهای فشرده
       (مثل سلکت وضعیت داخل یک ردیف جدول) عمداً فونت کوچک‌تر تعریف
       کرده‌اند؛ !important اینجا آگاهانه استفاده شده تا این قانونِ
       ایمنی/دسترسی‌پذیری، مستقل از specificity هر ماژول، در موبایل
       همیشه برنده باشد.
    */
    input, select, textarea {
        font-size: 16px !important;
    }
}