/* ===================================================================
   Hoozryar — Time Management System
   Design tokens: warm neutral surface, deep indigo-blue primary,
   teal for positive/approved states, amber for pending/overdue,
   rose for negative/rejected. Vazirmatn for crisp Persian type on
   every screen size, tuned for Android + iOS touch targets.
=================================================================== */

/* -------------------------------------------------------------------
   فونت وزیرمتن — به‌صورت لوکال (self-hosted)
   -------------------------------------------------------------------
   قبلاً فونت از CDN گوگل (fonts.googleapis.com) لود می‌شد. آدرس‌های
   گوگل روی بسیاری از اینترنت‌ها و موبایل‌های ایران فیلتر/کند هستند،
   برای همین فونت هیچ‌وقت دانلود نمی‌شد و مرورگر بی‌صدا به Tahoma
   برمی‌گشت. راه‌حل مطمئن: خودِ فایل فونت کنار پروژه باشد — هم روی هر
   اینترنتی کار می‌کند، هم آفلاین (PWA) کار می‌کند.

   کار شما: فقط یک فایل کوچک (فونت Variable، همه‌ی وزن‌ها در یک فایل)
   به اسم "Vazirmatn[wght].woff2" دانلود و در همین پوشه‌ی fonts/ کنار
   style.css بگذارید. راهنمای کامل + لینک دانلود در fonts/README.md
   هست. تا وقتی فایل را اضافه نکرده‌اید، فونت به‌صورت خودکار و بی‌خطا
   روی Tahoma (که فارسی را هم تمیز نشان می‌دهد) برمی‌گردد.
------------------------------------------------------------------- */
@font-face {
    font-family: 'Vazirmatn';
    src: url('fonts/Vazirmatn-RD[wght].woff2') format('woff2-variations'),
         url('fonts/Vazirmatn-RD[wght].woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --color-bg: #eef1f6;
    --color-surface: #ffffff;
    --color-surface-muted: #f6f8fb;
    --color-border: #e3e7ee;
    --color-text: #1c2333;
    --color-text-muted: #6b7280;

    --color-primary: #2952d9;
    --color-primary-dark: #1e3fae;
    --color-primary-soft: #eaefff;

    --color-success: #0f9d6b;
    --color-success-bg: #e3f9ef;
    --color-success-text: #0b6b4a;

    --color-warning: #b8860b;
    --color-warning-bg: #fdf3d9;
    --color-warning-text: #8a5a00;

    --color-danger: #d64550;
    --color-danger-bg: #fde8e8;
    --color-danger-text: #9c1f2a;

    --gradient-brand: linear-gradient(135deg, #3a63e8 0%, #2952d9 55%, #6d3fd9 100%);

    --radius-sm: 8px;
    --radius-md: 14px;
    --radius-lg: 20px;

    --shadow-sm: 0 1px 2px rgba(20, 26, 46, 0.06);
    --shadow-md: 0 8px 24px rgba(20, 26, 46, 0.08);
    --shadow-lg: 0 16px 40px rgba(20, 26, 46, 0.12);

    color-scheme: light;
}

* { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
    width: 100%;
}

/* ایمنی در برابر اسکرول افقی کل صفحه: هر عنصری هرجا عرض بیشتری از
   ویوپورت بگیرد، فقط داخل جعبه‌ی خودش اسکرول می‌شود، نه کل صفحه — همان
   چیزی که باعث «بیرون‌زدگی» و بریده‌شدن نوار بالا و تب‌ها در گوشی می‌شد. */
body {
    font-family: 'Vazirmatn', Tahoma, "Segoe UI", -apple-system, sans-serif;
    background: linear-gradient(180deg, #eef1f8 0%, #eaeef6 100%);
    margin: 0;
    padding: 0;
    color: var(--color-text);
    direction: rtl;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    padding-bottom: env(safe-area-inset-bottom);
    overflow-x: hidden;
    width: 100%;
    min-width: 0;
}

.container {
    max-width: 860px;
    margin: 28px auto 48px;
    background: var(--color-surface);
    padding: 28px 32px 34px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-border);
    position: relative;
    overflow: hidden;
}
/* نوار تزئینی برند بالای کارت — امضای بصری ثابت در همه‌ی صفحات */
.container::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 5px;
    background: var(--gradient-brand);
}

h1 {
    font-size: 21px;
    font-weight: 800;
    margin: 0 0 2px;
    letter-spacing: -0.01em;
}
h2 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-text);
    margin: 26px 0 12px;
    padding-right: 10px;
    border-right: 3px solid var(--color-primary);
}
p { color: var(--color-text-muted); font-size: 14px; }

a { color: var(--color-primary); }

label {
    display: block;
    margin: 14px 0 6px;
    font-weight: 600;
    font-size: 13.5px;
    color: var(--color-text);
}

input[type="text"],
input[type="password"],
input[type="time"],
input[type="date"],
input[type="datetime-local"],
select,
textarea {
    width: 100%;
    max-width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text);
    transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
    min-height: 46px;
}
input::placeholder, textarea::placeholder { color: #9aa2b1; }
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    background: var(--color-surface);
    box-shadow: 0 0 0 4px var(--color-primary-soft);
}
input:disabled { background: #eef0f4; color: #9aa2b1; }

textarea { min-height: 90px; resize: vertical; }

button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 22px;
    min-height: 46px;
    background: var(--color-primary);
    background-image: linear-gradient(180deg, #3a63e8, var(--color-primary));
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 700;
    cursor: pointer;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(41, 82, 217, 0.28);
    transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
    -webkit-tap-highlight-color: transparent;
}
button:hover, .btn:hover { filter: brightness(1.05); }
button:active, .btn:active { transform: translateY(1px) scale(0.99); box-shadow: 0 1px 3px rgba(41, 82, 217, 0.28); }
button:focus-visible, .btn:focus-visible, a:focus-visible { outline: 3px solid #a9bcff; outline-offset: 2px; }
button:disabled { background: #b7bdc9; background-image: none; cursor: not-allowed; box-shadow: none; }
button.secondary, .btn.secondary {
    background: var(--color-surface-muted);
    background-image: none;
    color: var(--color-text);
    border: 1.5px solid var(--color-border);
    box-shadow: none;
}
button.secondary:hover, .btn.secondary:hover { background: #eef0f4; }

/* آیکون‌های ریز داخل دکمه‌های کلیدی — با mask، بدون هیچ فایل/شبکه‌ی
   اضافه، رنگشان از رنگ متن دکمه می‌آید */
.btn::before { content: ''; width: 17px; height: 17px; flex: 0 0 auto; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; display: none; }
a.btn[href="logout.php"]::before,
a.btn[href="export_csv.php"]::before,
a.btn[href="export_pdf.php"]::before { display: inline-block; }
a.btn[href="logout.php"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5.5A2.5%202.5%200%200%201%203%2018.5v-13A2.5%202.5%200%200%201%205.5%203H9'/%3E%3Cpath%20d='M16%2016.5%2021%2012l-5-4.5'/%3E%3Cpath%20d='M21%2012H9'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M9%2021H5.5A2.5%202.5%200%200%201%203%2018.5v-13A2.5%202.5%200%200%201%205.5%203H9'/%3E%3Cpath%20d='M16%2016.5%2021%2012l-5-4.5'/%3E%3Cpath%20d='M21%2012H9'/%3E%3C/svg%3E"); }
a.btn[href="export_csv.php"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5h9l4%204V21a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V3.5a1%201%200%200%201%201-1Z'/%3E%3Cpath%20d='M14.5%202.5V7a1%201%200%200%200%201%201H19.5'/%3E%3Cpath%20d='M7.5%2013.2h1.2M7.5%2016.2h1.2M7.5%2019.2h1.2'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5h9l4%204V21a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V3.5a1%201%200%200%201%201-1Z'/%3E%3Cpath%20d='M14.5%202.5V7a1%201%200%200%200%201%201H19.5'/%3E%3Cpath%20d='M7.5%2013.2h1.2M7.5%2016.2h1.2M7.5%2019.2h1.2'/%3E%3C/svg%3E"); }
a.btn[href="export_pdf.php"]::before { -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5h9l4%204V21a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V3.5a1%201%200%200%201%201-1Z'/%3E%3Cpath%20d='M14.5%202.5V7a1%201%200%200%200%201%201H19.5'/%3E%3Cpath%20d='M8.2%2017.5v-4h1.4a1.3%201.3%200%200%201%200%202.6H8.2M12.3%2017.5v-4h1a1.7%201.7%200%200%201%200%204h-1ZM16.6%2017.5v-4h2M16.6%2015.6h1.6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M6%202.5h9l4%204V21a1%201%200%200%201-1%201H6a1%201%200%200%201-1-1V3.5a1%201%200%200%201%201-1Z'/%3E%3Cpath%20d='M14.5%202.5V7a1%201%200%200%200%201%201H19.5'/%3E%3Cpath%20d='M8.2%2017.5v-4h1.4a1.3%201.3%200%200%201%200%202.6H8.2M12.3%2017.5v-4h1a1.7%201.7%200%200%201%200%204h-1ZM16.6%2017.5v-4h2M16.6%2015.6h1.6'/%3E%3C/svg%3E"); }

.alert {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 16px;
    border-radius: var(--radius-sm);
    margin: 14px 0;
    font-size: 14px;
    line-height: 1.6;
}
.alert-error   { background: var(--color-danger-bg);  color: var(--color-danger-text); }
.alert-success { background: var(--color-success-bg); color: var(--color-success-text); }
.alert-info    { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* --- Tables: horizontal scroll shell so nothing ever breaks the layout on a phone --- */
.table-scroll {
    position: relative;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    margin-top: 14px;
    max-width: 100%;
    /* حاشیه‌ی محو در دو طرف تا واضح باشد جدول قابل‌اسکرول است، نه بریده */
    background:
        linear-gradient(var(--color-surface) 0 0) left,
        linear-gradient(var(--color-surface) 0 0) right,
        linear-gradient(to left, rgba(28,35,51,.14), rgba(28,35,51,0) 70%) left,
        linear-gradient(to right, rgba(28,35,51,.14), rgba(28,35,51,0) 70%) right;
    background-repeat: no-repeat;
    background-size: 18px 100%, 18px 100%, 18px 100%, 18px 100%;
    background-attachment: local, local, scroll, scroll;
}
table {
    width: 100%;
    min-width: 560px;
    border-collapse: collapse;
    margin-top: 16px;
    font-size: 13.5px;
}
.table-scroll table { margin-top: 0; min-width: 620px; }
th, td { text-align: right; padding: 12px 14px; border-bottom: 1px solid var(--color-border); white-space: nowrap; }
thead th {
    background: var(--color-surface-muted);
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: 12.5px;
    position: sticky;
    top: 0;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: #fafbfd; }
tr.row-overdue td { background: var(--color-danger-bg); }
tr.row-overdue:hover td { background: #fbdcdc; }

.topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.topbar h1 { display: flex; align-items: center; gap: 10px; }
/* نشان (مونوگرام) برند کنار عنوان صفحه — یک نشانه‌ی بصری ثابت و حرفه‌ای
   به‌جای یک تیتر خشک متنی */
.topbar h1::before {
    content: '';
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: var(--gradient-brand);
    box-shadow: 0 4px 10px rgba(41, 82, 217, .35);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Cpath%20d='M12%208v4.3l3%201.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='white'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='8'/%3E%3Cpath%20d='M12%208v4.3l3%201.7'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: 60%; mask-size: 60%;
}

/* --- Navigation tabs ---------------------------------------------
   قبلاً یک ردیف تک‌خطی با اسکرول افقی بی‌نشانه بود که روی خیلی از
   گوشی‌ها انگار «بریده و بیرون‌زده» به‌نظر می‌رسید. حالا: تب‌ها با
   آیکون، در یک شبکه‌ی چندردیفه که کامل روی صفحه جا می‌شود (بدون هیچ
   اسکرول پنهانی) روی موبایل نمایش داده می‌شوند و در دسکتاپ یک ردیف
   می‌شوند. ------------------------------------------------------ */
.nav-links {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
    gap: 8px;
    margin: 20px 0 8px;
    padding: 14px;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
    border: 1px solid var(--color-border);
}
.nav-links a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 6px 9px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: var(--color-text-muted);
    font-size: 12px;
    font-weight: 700;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    white-space: nowrap;
    position: relative;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.nav-links a::before {
    content: '';
    width: 19px;
    height: 19px;
    background-color: currentColor;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
    -webkit-mask-position: center; mask-position: center;
    -webkit-mask-size: contain; mask-size: contain;
}
.nav-links a:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); border-color: var(--color-primary-soft); transform: translateY(-1px); }
.nav-links a.active {
    background: var(--gradient-brand);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 6px 14px rgba(41, 82, 217, 0.32);
}

.nav-links a[href="admin.php"]::before,
.nav-links a[href="employee.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207.2v5l3.3%202'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='12'%20cy='12'%20r='9'/%3E%3Cpath%20d='M12%207.2v5l3.3%202'/%3E%3C/svg%3E");
}
.nav-links a[href="admin_employees.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8.5'%20cy='7.5'%20r='3'/%3E%3Cpath%20d='M2.3%2020c0-3.4%202.8-6%206.2-6s6.2%202.6%206.2%206'/%3E%3Ccircle%20cx='17'%20cy='8.3'%20r='2.4'/%3E%3Cpath%20d='M15.2%2014.3c2.7.5%204.9%202.6%204.9%205.7'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Ccircle%20cx='8.5'%20cy='7.5'%20r='3'/%3E%3Cpath%20d='M2.3%2020c0-3.4%202.8-6%206.2-6s6.2%202.6%206.2%206'/%3E%3Ccircle%20cx='17'%20cy='8.3'%20r='2.4'/%3E%3Cpath%20d='M15.2%2014.3c2.7.5%204.9%202.6%204.9%205.7'/%3E%3C/svg%3E");
}
.nav-links a[href="admin_shifts.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='3'/%3E%3Cpath%20d='M3%2010h18M8%203v4M16%203v4'/%3E%3Cpath%20d='M8%2014h2M14%2014h2M8%2017.5h2M14%2017.5h2'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Crect%20x='3'%20y='5'%20width='18'%20height='16'%20rx='3'/%3E%3Cpath%20d='M3%2010h18M8%203v4M16%203v4'/%3E%3Cpath%20d='M8%2014h2M14%2014h2M8%2017.5h2M14%2017.5h2'/%3E%3C/svg%3E");
}
.nav-links a[href="admin_requests.php"]::before,
.nav-links a[href="requests.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2012h4.7l1.8%202.7h4l1.8-2.7h4.7'/%3E%3Cpath%20d='M5.3%2012%203.5%205.5h17l-1.8%206.5'/%3E%3Cpath%20d='M3.5%2012v6a2%202%200%200%200%202%202h13a2%202%200%200%200%202-2v-6'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M3.5%2012h4.7l1.8%202.7h4l1.8-2.7h4.7'/%3E%3Cpath%20d='M5.3%2012%203.5%205.5h17l-1.8%206.5'/%3E%3Cpath%20d='M3.5%2012v6a2%202%200%200%200%202%202h13a2%202%200%200%200%202-2v-6'/%3E%3C/svg%3E");
}
.nav-links a[href="admin_messages.php"]::before,
.nav-links a[href="messages.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205.5h16v11.2H9.2L4.5%2020V16.7H4Z'/%3E%3Cpath%20d='M8%209.5h8M8%2012.7h5'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4%205.5h16v11.2H9.2L4.5%2020V16.7H4Z'/%3E%3Cpath%20d='M8%209.5h8M8%2012.7h5'/%3E%3C/svg%3E");
}
.nav-links a[href="admin_reports.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%2020V11M12%2020V4M19.5%2020v-8'/%3E%3Cpath%20d='M2.5%2020h19'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='2'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M4.5%2020V11M12%2020V4M19.5%2020v-8'/%3E%3Cpath%20d='M2.5%2020h19'/%3E%3C/svg%3E");
}
.nav-links a[href="admin_settings.php"]::before {
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202.6v2.3M12%2019.1v2.3M4.7%204.7l1.6%201.6M17.7%2017.7l1.6%201.6M2.6%2012h2.3M19.1%2012h2.3M4.7%2019.3l1.6-1.6M17.7%206.3l1.6-1.6'%20stroke-width='2'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.6'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.4'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%20fill='none'%20stroke='%23000'%20stroke-width='1.8'%20stroke-linecap='round'%20stroke-linejoin='round'%3E%3Cpath%20d='M12%202.6v2.3M12%2019.1v2.3M4.7%204.7l1.6%201.6M17.7%2017.7l1.6%201.6M2.6%2012h2.3M19.1%2012h2.3M4.7%2019.3l1.6-1.6M17.7%206.3l1.6-1.6'%20stroke-width='2'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='4.6'/%3E%3Ccircle%20cx='12'%20cy='12'%20r='1.4'%20fill='%23000'%20stroke='none'/%3E%3C/svg%3E");
}

/* --- Status badges --- */
.badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.badge-pending  { background: var(--color-warning-bg); color: var(--color-warning-text); }
.badge-approved { background: var(--color-success-bg); color: var(--color-success-text); }
.badge-rejected { background: var(--color-danger-bg);  color: var(--color-danger-text); }

.badge-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 17px;
    height: 17px;
    padding: 0 5px;
    margin-inline-start: 2px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    text-align: center;
    box-shadow: 0 0 0 2px var(--color-surface);
}
.nav-links a.active .badge-count { box-shadow: 0 0 0 2px transparent; }

/* --- Requests / admin action forms --- */
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0;
    font-weight: 400;
    font-size: 13.5px;
    color: var(--color-text);
}
.checkbox-row input { width: auto; min-height: 20px; accent-color: var(--color-primary); }

.filter-row { display: flex; gap: 8px; margin: 14px 0; flex-wrap: wrap; }
.btn-active { background: var(--color-primary-dark) !important; }

.inline-form { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.note-input {
    padding: 8px 10px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    width: 140px;
    min-height: 38px;
}
.note-text { margin-top: 4px; font-size: 12.5px; color: var(--color-text-muted); }
.btn-sm {
    display: inline-block;
    padding: 8px 14px;
    min-height: 38px;
    border: none;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    color: #fff;
    text-decoration: none;
    transition: filter .12s ease, transform .12s ease;
}
.btn-sm:hover { filter: brightness(1.05); }
.btn-sm:active { transform: translateY(1px); }
.btn-approve { background: var(--color-success); }
.btn-reject  { background: var(--color-danger); }
.text-muted { color: var(--color-text-muted); font-size: 13px; }

/* --- Messages / chat thread --- */
.msg-thread {
    max-height: 420px;
    overflow-y: auto;
    padding: 6px;
    margin: 14px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--color-surface-muted);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
}
.msg-bubble {
    max-width: 82%;
    padding: 10px 15px;
    border-radius: var(--radius-md);
    font-size: 14px;
    box-shadow: var(--shadow-sm);
}
.msg-employee { background: var(--color-primary-soft); align-self: flex-end; border-bottom-left-radius: 4px; }
.msg-admin    { background: #fff; align-self: flex-start; border-bottom-right-radius: 4px; }
.msg-anon     { background: var(--color-warning-bg); align-self: stretch; max-width: 100%; }
.msg-meta { font-size: 11px; color: var(--color-text-muted); margin-bottom: 4px; }
.msg-text { white-space: pre-wrap; }

/* --- Overdue / incomplete attendance cards --- */
.overdue-list { display: flex; flex-direction: column; gap: 12px; margin: 14px 0 20px; }
.overdue-card {
    border: 1.5px solid #f3c6c9;
    background: #fff8f8;
    border-radius: var(--radius-md);
    padding: 14px 16px;
    box-shadow: var(--shadow-sm);
}
.overdue-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}
.fix-panel { margin-top: 10px; }
.fix-panel summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 13.5px;
    color: var(--color-primary-dark);
    padding: 8px 4px;
    list-style: none;
}
.fix-panel summary::-webkit-details-marker { display: none; }
.fix-panel summary::before { content: '⟩ '; display: inline-block; transition: transform .15s ease; }
.fix-panel[open] summary::before { transform: rotate(90deg); }
.fix-panel[open] summary { margin-bottom: 4px; }
.fix-panel form {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 12px 14px 16px;
}

/* --- Jalali (Persian/Shamsi) date picker --- */
.jdate-wrap { position: relative; }
.jdate-field { display: flex; gap: 6px; }
.jdate-display {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--color-border);
    background: var(--color-surface-muted);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-size: 15px;
    font-family: inherit;
    min-height: 46px;
}
.jdate-btn {
    flex: 0 0 auto;
    margin-top: 0;
    padding: 0 16px;
    min-height: 46px;
    border-radius: var(--radius-sm);
    border: 1.5px solid var(--color-border);
    background: var(--color-surface-muted);
    color: var(--color-text);
    cursor: pointer;
    font-size: 17px;
}
.jdate-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + 6px);
    right: 0;
    width: 270px;
    max-width: 90vw;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px;
}
.jdate-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jdate-title { font-weight: 700; font-size: 14px; }
.jdate-nav {
    border: none; background: var(--color-surface-muted); border-radius: var(--radius-sm);
    width: 32px; height: 32px; cursor: pointer; font-size: 16px; color: var(--color-text);
}
.jdate-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; text-align: center; }
.jdate-wd { font-size: 11px; color: #9ca3af; padding: 4px 0; }
.jdate-day {
    border: none; background: transparent; border-radius: var(--radius-sm);
    padding: 8px 0; font-size: 13px; cursor: pointer; color: var(--color-text);
}
.jdate-day:hover { background: var(--color-primary-soft); }
.jdate-day-sel { background: var(--color-primary); color: #fff; }
.jdate-foot { margin-top: 6px; text-align: center; }
.jdate-today {
    border: none; background: none; color: var(--color-primary); font-size: 12.5px; cursor: pointer; text-decoration: underline;
}

/* --- Login screen --- */
body.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(120% 90% at 50% -10%, #dde5ff 0%, #eef1f8 45%, #eaeef6 100%);
}
.login-card { margin: 24px auto; max-width: 400px; text-align: center; }
.login-mark {
    width: 56px; height: 56px;
    margin: 0 auto 14px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 16px;
    background: var(--gradient-brand);
    color: #fff;
    font-size: 26px;
    box-shadow: 0 10px 24px rgba(41, 82, 217, 0.35);
}
.login-card h1 { font-size: 24px; }
.login-sub { margin-top: 2px; margin-bottom: 6px; }
.login-card form { text-align: right; }

/* ===================================================================
   Mobile (Android + iPhone): tighter spacing, edge-to-edge card,
   full-width controls, larger tap targets, safe-area padding.
=================================================================== */
@media (max-width: 640px) {
    body { padding: 0; }
    .container {
        margin: 0;
        max-width: 100%;
        min-height: 100vh;
        border-radius: 0;
        border: none;
        box-shadow: none;
        padding: 18px 16px 28px;
        padding-top: calc(18px + env(safe-area-inset-top));
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
    }
    h1 { font-size: 19px; }
    .topbar .btn { margin-top: 0; padding: 9px 16px; min-height: 40px; font-size: 13px; }
    button, .btn { width: 100%; }
    .inline-form button, .inline-form .btn { width: auto; }
    .topbar .btn.secondary { width: auto; }
    .nav-links { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; padding: 10px; margin-inline: 0; }
    .nav-links a { font-size: 11px; padding: 9px 4px 8px; }
    .nav-links a::before { width: 17px; height: 17px; }
    table { font-size: 13px; }
    th, td { padding: 10px 12px; }
}

@media (min-width: 641px) {
    .inline-form { flex-wrap: nowrap; }
    /* روی صفحه‌ی بزرگ‌تر تب‌ها یک ردیف افقی و فشرده‌تر می‌شوند */
    .nav-links { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}

/* --- Push notification centre and management composer --- */
.push-permission-card,
.push-compose-card {
    margin: 20px 0;
    padding: 20px;
    border: 1px solid #cfd9ff;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, #eef2ff 0%, #f8faff 100%);
    box-shadow: var(--shadow-sm);
}
.push-permission-card h2,
.push-compose-card h2 { margin-top: 0; }
.action-row,
.section-head {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
.action-row button,
.section-head button { margin-top: 0; }
.notification-list { display: grid; gap: 10px; }
.notification-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.notification-item p { margin: 6px 0; white-space: normal; }
.notification-item .btn { margin-top: 0; flex: 0 0 auto; }
.notification-meta,
.notification-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.notification-actions form { margin: 0; }
.badge-neutral { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.empty-state {
    padding: 32px 16px;
    text-align: center;
    color: var(--color-text-muted);
    border: 1px dashed #bac4d4;
    border-radius: var(--radius-md);
    background: var(--color-surface-muted);
}
@media (max-width: 640px) {
    .notification-item { align-items: flex-start; flex-direction: column; }
    .notification-item .btn { width: 100%; }
    .action-row { width: 100%; }
    .action-row button { width: 100%; }
}