/* ============================================================
   تم یکپارچه برنامه (بعد از استایل‌های هر صفحه بارگذاری می‌شود)
   فونت محلی: فایل‌های Vazirmatn را در assets/fonts قرار دهید
   (Vazirmatn-Regular.woff2 ، Vazirmatn-Medium.woff2 ، Vazirmatn-Bold.woff2)
   ============================================================ */
@font-face { font-family: 'VazirLocal'; src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'VazirLocal'; src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'VazirLocal'; src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2'); font-weight: 700 900; font-display: swap; }

:root {
    --primary: #4361EE;
    --primary-dark: #3048C9;
    --primary-soft: #EEF1FE;
    --success: #12B886;
    --success-soft: #E6F8F2;
    --warning: #F59F00;
    --warning-soft: #FFF6E0;
    --danger: #E5484D;
    --danger-soft: #FDECEC;
    --info: #1C9BEF;
    --info-soft: #E6F4FD;
    --ink: #1B2437;
    --ink-2: #3B4660;
    --muted: #7A8599;
    --line: #E6E9F0;
    --bg: #F4F6FB;
    --surface: #FFFFFF;
    --sidebar: #111A2E;
    --sidebar-2: #18233B;
    --radius: 14px;
    --radius-sm: 10px;
    --shadow: 0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.06);
    --shadow-lg: 0 12px 40px rgba(16,24,40,.18);
    --sidebar-w: 256px;
    --topbar-h: 58px;
    --bottombar-h: 64px;
    --hero-gradient: linear-gradient(120deg, #1E2A4A 0%, #2B3F7A 55%, #4361EE 100%);
    /* سازگاری با متغیرهای قدیمی */
    --primary-color: var(--primary); --success-color: var(--success); --danger-color: var(--danger);
    --warning-color: var(--warning); --info-color: var(--info); --light-bg: var(--bg);
    --border-color: var(--line); --text-primary: var(--ink); --text-secondary: var(--muted); --secondary-color: var(--ink);
}

html { -webkit-text-size-adjust: 100%; }
body {
    font-family: 'VazirLocal', 'Vazirmatn', Tahoma, 'Segoe UI', sans-serif !important;
    background: var(--bg) !important;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.75;
}
a { color: var(--primary); }
button, input, select, textarea { font-family: inherit !important; }

/* ==================== چیدمان ==================== */
.main-content {
    margin-right: var(--sidebar-w);
    padding: 28px 8px 24px !important;
    min-height: 100vh !important;
    background: transparent !important;
}
.main-content > .container { max-width: 1280px; padding: 0 16px; }
.main-footer {
    margin: 0 var(--sidebar-w) 0 0 !important;
    background: transparent !important;
    color: var(--muted) !important;
    padding: 16px 0 24px !important;
    font-size: 12px;
    text-align: center;
    border: none !important;
}
.main-footer p { color: var(--muted) !important; }

/* ==================== نوار کناری ==================== */
.app-sidebar {
    position: fixed; top: 0; right: 0; bottom: 0; width: var(--sidebar-w);
    background: linear-gradient(180deg, var(--sidebar) 0%, var(--sidebar-2) 100%);
    color: #C9D2E3; display: flex; flex-direction: column; z-index: 1200;
    box-shadow: -1px 0 0 rgba(255,255,255,.04);
}
.app-brand { display: flex; align-items: center; gap: 12px; padding: 20px 18px 16px; border-bottom: 1px solid rgba(255,255,255,.07); }
.app-brand-logo { width: 40px; height: 40px; border-radius: 12px; background: linear-gradient(135deg, #4361EE, #7B61FF); display: grid; place-items: center; font-size: 20px; box-shadow: 0 6px 16px rgba(67,97,238,.4); }
.app-brand-logo, .app-brand-mini { color: #fff; font-weight: 800; font-size: 18px; flex-shrink: 0; overflow: hidden; }
.app-brand-logo.has-img, .app-brand-mini.has-img { background: #fff !important; box-shadow: 0 4px 12px rgba(0,0,0,.25); padding: 4px; }
.app-brand-logo img, .app-brand-mini img { width: 100%; height: 100%; object-fit: contain; display: block; }
.app-brand-text { min-width: 0; }
.app-brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-brand-mini-link { text-decoration: none; }
.app-brand-name { color: #fff; font-weight: 700; font-size: 16px; line-height: 1.3; }
.app-brand-sub { color: #8A96AE; font-size: 11px; }
.app-close { display: none !important; margin-right: auto; }
.app-menu { flex: 1; overflow-y: auto; padding: 10px 12px 16px; }
.app-menu-group { color: #66728A; font-size: 11px; font-weight: 600; padding: 16px 12px 6px; letter-spacing: .3px; }
.app-menu-item {
    display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin: 2px 0;
    color: #C9D2E3 !important; text-decoration: none !important; border-radius: 10px; font-size: 14px;
    transition: background .15s, color .15s;
}
.app-menu-item:hover { background: rgba(255,255,255,.06); color: #fff !important; }
.app-menu-item.active { background: var(--primary); color: #fff !important; box-shadow: 0 6px 16px rgba(67,97,238,.35); }
.nav-ic { width: 20px; height: 20px; flex-shrink: 0; }
.nav-badge { margin-right: auto; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid; place-items: center; line-height: 1; }
.app-menu-item.active .nav-badge { background: #fff; color: var(--primary); }
.app-user { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.07); }
.app-avatar { width: 38px; height: 38px; border-radius: 50%; background: #2A3656; color: #fff; display: grid; place-items: center; font-weight: 700; }
.app-user-info { flex: 1; min-width: 0; }
.app-user-name { color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-user-role { color: #8A96AE; font-size: 11px; }
.app-icon-btn { background: transparent; border: none; color: inherit; width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; cursor: pointer; padding: 0; }
.app-logout { color: #FF8A8E !important; }
.app-logout:hover { background: rgba(229,72,77,.15); }
.app-topbar, .app-bottomnav, .app-overlay { display: none; }

/* ==================== کارت‌ها ==================== */
.card {
    background: var(--surface) !important;
    border-radius: var(--radius) !important;
    padding: 20px !important;
    box-shadow: var(--shadow) !important;
    border: 1px solid var(--line);
    margin-bottom: 18px !important;
}
.card-header { border-bottom: 1px solid var(--line) !important; padding-bottom: 14px !important; margin-bottom: 16px !important; }
.card-title { font-size: 17px !important; font-weight: 700 !important; color: var(--ink) !important; }
.section-title { color: var(--ink) !important; border-bottom-color: var(--line) !important; }

/* ==================== دکمه‌ها ==================== */
.btn {
    display: inline-flex !important; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px; border-radius: var(--radius-sm) !important; font-weight: 600 !important; font-size: 13px;
    border: 1px solid transparent !important; box-shadow: none; line-height: 1.5; text-decoration: none !important;
    transition: filter .15s, transform .05s, background .15s;
}
.btn:hover { filter: brightness(.95); text-decoration: none !important; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--primary) !important; color: #fff !important; }
.btn-success { background: var(--success) !important; color: #fff !important; }
.btn-danger  { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: #F8CFD0 !important; }
.btn-warning { background: var(--warning-soft) !important; color: #B26B00 !important; border-color: #FBE3B0 !important; }
.btn-info    { background: var(--info-soft) !important; color: #0B74C0 !important; border-color: #C4E4FA !important; }
.btn-secondary { background: #EEF0F4 !important; color: var(--ink-2) !important; }
.btn-sm { padding: 5px 11px !important; font-size: 12px !important; border-radius: 8px !important; }
.btn-block { display: flex !important; width: 100%; }

/* ==================== فرم‌ها ==================== */
.form-group { margin-bottom: 16px; }
.form-group label { font-weight: 600; color: var(--ink-2); font-size: 13px; margin-bottom: 6px; }
.main-content input[type=text], .main-content input[type=password], .main-content input[type=number],
.main-content input[type=date], .main-content input[type=email], .main-content input[type=search],
.main-content input:not([type]), .main-content select, .main-content textarea,
.modal-box input, .modal-box select, .modal-box textarea {
    border: 1px solid #D9DEE8 !important; border-radius: var(--radius-sm) !important; background: #fff !important;
    padding: 9px 12px !important; font-size: 14px !important; color: var(--ink) !important; min-height: 42px;
    box-shadow: none !important; transition: border-color .15s, box-shadow .15s;
}
.main-content textarea, .modal-box textarea { min-height: 80px; }
.main-content input:focus, .main-content select:focus, .main-content textarea:focus,
.modal-box input:focus, .modal-box select:focus, .modal-box textarea:focus {
    outline: none; border-color: var(--primary) !important; box-shadow: 0 0 0 3px rgba(67,97,238,.15) !important;
}
.main-content input[type=checkbox], .main-content input[type=radio] { accent-color: var(--primary); min-height: 0; }

/* ==================== هشدارها و نشان‌ها ==================== */
.alert { border-radius: var(--radius-sm) !important; padding: 12px 16px !important; border: 1px solid transparent !important; border-right-width: 4px !important; font-size: 13px; }
.alert-success { background: var(--success-soft) !important; color: #0B7A5A !important; border-color: var(--success) !important; }
.alert-error   { background: var(--danger-soft) !important; color: #B4262B !important; border-color: var(--danger) !important; }
.alert-info    { background: var(--info-soft) !important; color: #0B6AAE !important; border-color: var(--info) !important; }
.badge { border-radius: 20px !important; font-weight: 600 !important; font-size: 11px !important; padding: 3px 10px !important; }
.badge-pending { background: var(--warning-soft) !important; color: #B26B00 !important; }
.badge-done    { background: var(--success-soft) !important; color: #0B7A5A !important; }
.badge-missed  { background: var(--danger-soft) !important; color: #B4262B !important; }
.badge-unable  { background: #FFF0E6 !important; color: #C2410C !important; }
.badge-moved   { background: var(--info-soft) !important; color: #0B6AAE !important; }
.badge-deleted { background: #EEF0F4 !important; color: var(--muted) !important; }
.dept-tag { background: var(--primary-soft) !important; color: var(--primary) !important; border-radius: 20px !important; }

/* ==================== آمار ==================== */
.stats-grid { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; gap: 14px !important; margin-bottom: 18px !important; }
.stat-card {
    background: var(--surface) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow) !important;
    border: 1px solid var(--line) !important; padding: 16px 18px !important;
}
.stat-number, .stat-value { color: var(--ink) !important; font-weight: 800 !important; }
.stat-label { color: var(--muted) !important; font-size: 12px !important; }

/* ردیف آمار داشبورد مدیر */
.stats-row { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 14px !important; }
.stat-card .stat-icon { border-radius: 12px !important; }
.quick-link { background: #F7F8FC !important; border: 1px solid var(--line) !important; border-radius: 12px !important; }
.quick-link:hover { border-color: var(--primary) !important; background: #fff !important; }

/* ==================== جدول‌ها + سربرگ شناور ==================== */
.table-responsive {
    overflow: auto !important;
    max-height: calc(100vh - 150px);
    border: 1px solid var(--line); border-radius: var(--radius-sm);
    background: #fff; margin: 0 !important; padding: 0 !important;
    -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.main-content table, .modal-box table, .list-modal table, .details-modal table {
    width: 100%; border-collapse: separate !important; border-spacing: 0 !important;
    background: #fff; box-shadow: none !important; border-radius: 0 !important; overflow: visible !important; margin: 0;
}
.main-content thead, .modal-box thead { background: transparent !important; }
.main-content thead th, .modal-box thead th, .list-modal thead th {
    position: sticky; top: 0; z-index: 5;
    background: #F1F4FA !important; color: var(--ink-2) !important;
    font-size: 12px !important; font-weight: 700 !important; white-space: nowrap;
    padding: 11px 12px !important; border-bottom: 1px solid var(--line) !important; text-align: right;
    box-shadow: 0 1px 0 var(--line);
}
.main-content tbody td { padding: 11px 12px !important; border-bottom: 1px solid #EEF1F6 !important; vertical-align: middle; font-size: 13px; }
.main-content tbody tr:last-child td { border-bottom: none !important; }
.main-content tbody tr:hover td { background: #FAFBFE; }
.main-content table tr { border: none !important; }
.cal-table td { vertical-align: top !important; }
.row-late td { background: #FFFAF2 !important; }

/* ==================== مودال ==================== */
.modal-box, .modal-content { border-radius: 18px !important; box-shadow: var(--shadow-lg) !important; }
.modal-overlay { background: rgba(15,23,42,.55) !important; backdrop-filter: blur(2px); }

/* ==================== صفحه‌بندی و تب‌ها ==================== */
.pagination a, .pagination span { border-radius: 9px !important; border: 1px solid var(--line) !important; min-width: 36px; text-align: center; }
.pagination .active, .pagination span.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.act-tabs a, .tab-btn { border-radius: 10px !important; border: 1px solid var(--line) !important; font-weight: 600; }
.act-tabs a.active, .tab-btn.active { background: var(--primary) !important; border-color: var(--primary) !important; color: #fff !important; }
.stage-badge.done, .approval-approved { background: var(--success-soft) !important; color: #0B7A5A !important; }
.stage-badge.pending, .approval-pending { background: var(--warning-soft) !important; color: #B26B00 !important; }
.approval-rejected { background: var(--danger-soft) !important; color: #B4262B !important; }
.cal-box, .cal-filter, .act-filter, .filter-bar, .add-form { background: #F7F8FC !important; border: 1px solid var(--line); border-radius: var(--radius-sm) !important; }
.cal-team { background: var(--primary-soft) !important; border-radius: var(--radius-sm) !important; }

/* بنرهای بالای صفحات */
.employer-header, .welcome-banner, .welcome-section, .employee-info {
    background: var(--hero-gradient) !important;
    border-radius: 18px !important; box-shadow: var(--shadow) !important; color: #fff !important;
}

/* ==================== موبایل و تبلت ==================== */
@media (max-width: 991px) {
    .main-content { margin-right: 0; padding: calc(var(--topbar-h) + 14px) 0 calc(var(--bottombar-h) + 18px) !important; }
    .main-content > .container { padding: 0 12px; }
    .main-footer { margin: 0 !important; padding-bottom: calc(var(--bottombar-h) + 16px) !important; }

    .app-topbar {
        display: flex; align-items: center; gap: 8px; position: absolute; top: 0; right: 0; left: 0; height: var(--topbar-h);
        background: rgba(255,255,255,.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px);
        border-bottom: 1px solid var(--line); z-index: 1100; padding: 0 8px; color: var(--ink);
    }
    .app-topbar-title { flex: 1; font-weight: 700; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .app-brand-mini { width: 38px; height: 38px; display: grid; place-items: center; text-decoration: none; border-radius: 10px; background: linear-gradient(135deg, #4361EE, #7B61FF); font-size: 16px; }

    .app-sidebar { transform: translateX(105%); transition: transform .25s ease; width: min(84vw, 300px); box-shadow: var(--shadow-lg); }
    .nav-open .app-sidebar { transform: none; }
    .app-overlay { display: block; position: fixed; inset: 0; background: rgba(15,23,42,.45); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 1150; }
    .nav-open .app-overlay { opacity: 1; pointer-events: auto; }
    .nav-open body { overflow: hidden; }
    .app-close { display: inline-grid !important; color: #C9D2E3; }

    .app-bottomnav {
        display: flex; position: fixed; bottom: 0; right: 0; left: 0; height: var(--bottombar-h); z-index: 1100;
        background: rgba(255,255,255,.96); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
        border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom);
    }
    .app-bottomnav a {
        flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        color: var(--muted); text-decoration: none; font-size: 10.5px; font-weight: 600; position: relative;
    }
    .app-bottomnav a.active { color: var(--primary); }
    .app-bottomnav a.active::before { content: ''; position: absolute; top: 0; width: 28px; height: 3px; border-radius: 0 0 3px 3px; background: var(--primary); }
    .app-bottomnav .nav-ic { width: 22px; height: 22px; }
    .app-bottomnav .nav-badge { position: absolute; top: 6px; margin: 0; transform: translateX(-14px); min-width: 18px; height: 17px; font-size: 10px; }

    .table-responsive { max-height: calc(100vh - var(--bottombar-h) - 16px); }

    /* تقویم محتوایی در موبایل: هر ردیف یک کارت */
    .cal-wrap { max-height: none !important; overflow: visible !important; border: none !important; background: transparent !important; }
    .cal-wrap .cal-table { min-width: 0 !important; background: transparent !important; }
    .cal-wrap thead { display: none !important; }
    .cal-wrap table, .cal-wrap tbody, .cal-wrap tr, .cal-wrap td { display: block; width: 100%; }
    .cal-wrap tr { background: #fff; border: 1px solid var(--line) !important; border-radius: 14px; margin-bottom: 12px; padding: 12px 14px; box-shadow: var(--shadow); position: relative; }
    .cal-wrap tr.row-late { border-color: #F7D7A8 !important; }
    .cal-wrap tr.row-late td { background: transparent !important; }
    .cal-wrap td { border: none !important; padding: 4px 0 !important; background: transparent !important; }
    .cal-wrap td:first-child { position: absolute; top: 10px; left: 14px; width: auto; color: var(--muted); font-size: 11px; }
    .cal-wrap td:nth-child(2) { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-weight: 700; }
    .cal-wrap td:nth-child(2) > * { margin: 0; }
    .cal-wrap td:nth-child(3) { font-size: 15px; font-weight: 600; }
    .cal-wrap td:nth-child(3) small { margin-right: 6px; }
    .cal-wrap td:nth-child(3) > div { display: inline; }
    .cal-wrap .team-cell { min-width: 0; background: #F7F8FC !important; border-radius: 10px; padding: 8px 10px !important; margin: 6px 0; }
    .cal-wrap td.nowrap { white-space: normal; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .cal-wrap td:last-child { border-top: 1px dashed var(--line) !important; margin-top: 6px; padding-top: 10px !important; }
    .modal-overlay { align-items: flex-end !important; padding: 0 !important; }
    .modal-overlay .modal-box { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 18px 18px 0 0 !important; max-height: 92vh !important; }
}
@media (max-width: 600px) {
    body { font-size: 13.5px; }
    .card { padding: 14px !important; border-radius: 12px !important; }
    .card-title { font-size: 15px !important; }
    .stats-grid, .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
    .stat-card { gap: 10px !important; }
    .stat-card .stat-icon { width: 38px !important; height: 38px !important; font-size: 18px !important; }
    .stat-card { padding: 12px !important; }
    .stat-number, .stat-value { font-size: 22px !important; }
    .main-content thead th { padding: 9px 8px !important; font-size: 11px !important; }
    .table-responsive:not(.cal-wrap) > table { min-width: 640px; }
    .main-content tbody td { padding: 9px 8px !important; font-size: 12px; }
    .btn { padding: 9px 14px; }
    .main-content input, .main-content select, .main-content textarea { font-size: 16px !important; } /* جلوگیری از زوم خودکار iOS */
}