/* DimaTask - Local Stylesheet (no CDN, no build) */

@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: Vazirmatn;
    src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --primary: #6366f1;
    --primary-dark: #4f46e5;
    --primary-light: #818cf8;
    --primary-soft: #eef2ff;
    --surface: #ffffff;
    --surface-2: #dae4ee;
    --bg: #f0f2f8;
    --bg-gradient: linear-gradient(165deg, #eef2ff 0%, #f8fafc 40%, #f0f2f8 100%);
    --text: #1e293b;
    --text-muted: #64748b;
    --border: #e2e8f0;
    --radius-sm: 10px;
    --radius-md: 14px;
    --radius-lg: 18px;
    --radius-xl: 22px;
    --shadow-card: 0 2px 12px rgba(15, 23, 42, .06);
    --shadow-float: 0 8px 30px rgba(99, 102, 241, .15);
    --tab-h: 64px;
    --header-h: 56px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    /* legacy */
    --indigo-50: #eef2ff; --indigo-100: #e0e7ff; --indigo-200: #c7d2fe;
    --indigo-500: #6366f1; --indigo-600: #4f46e5; --indigo-700: #4338ca;
    --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1;
    --gray-50: #f9fafb; --gray-100: #f3f4f6; --gray-400: #9ca3af;
    --gray-500: #6b7280; --gray-600: #4b5563; --gray-700: #374151; --gray-800: #1f2937;
    --green-100: #dcfce7; --green-600: #16a34a; --green-700: #15803d;
    --yellow-100: #fef9c3; --yellow-500: #eab308; --yellow-600: #ca8a04; --yellow-700: #a16207;
    --red-100: #fee2e2; --red-400: #f87171; --red-500: #ef4444; --red-600: #dc2626; --red-700: #b91c1c;
    --blue-50: #eff6ff; --blue-400: #60a5fa; --blue-800: #1e40af;
    --purple-700: #7e22ce;
    --white: #fff;
    --radius: 0.5rem;
    --shadow: 0 1px 3px rgba(0,0,0,.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1);
    --shadow-2xl: 0 25px 50px -12px rgba(0,0,0,.25);
}

*, *::before, *::after { box-sizing: border-box; }
html { direction: rtl; }
body, .app-body {
    margin: 0;
    font-family: Vazirmatn, Tahoma, sans-serif;
    background: var(--bg);
    background-image: var(--bg-gradient);
    background-attachment: fixed;
    min-height: 100vh;
    min-height: 100dvh;
    color: var(--text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* PWA — تمام‌صفحه / standalone */
html.pwa-standalone,
body.pwa-standalone {
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    overscroll-behavior-y: contain;
}

@media (display-mode: standalone), (display-mode: fullscreen) {
    .app-header {
        padding-top: var(--safe-top);
    }
    .app-header-inner {
        min-height: calc(var(--header-h) + var(--safe-top));
    }
    .tab-bar {
        height: calc(var(--tab-h) + var(--safe-bottom));
        padding-bottom: var(--safe-bottom);
    }
    .app-main {
        padding-bottom: calc(var(--tab-h) + var(--safe-bottom) + 1.25rem);
    }
    .task-modal {
        padding-top: var(--safe-top);
    }
    .fab {
        bottom: calc(var(--tab-h) + var(--safe-bottom) + .75rem);
    }
}

.pwa-standalone .app-header {
    padding-top: var(--safe-top);
}
.pwa-standalone .app-header-inner {
    min-height: calc(var(--header-h) + var(--safe-top));
}
.pwa-standalone .tab-bar {
    height: calc(var(--tab-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }
input, select, textarea, button { font-family: inherit; font-size: inherit; }
.min-h-screen { min-height: 100vh; }
.hidden { display: none !important; }
.sse-live { display: none; }
.block { display: block; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.inline-flex { display: inline-flex; }
.grid { display: grid; }
.flex-1 { flex: 1 1 0%; }
.shrink-0 { flex-shrink: 0; }
.flex-wrap { flex-wrap: wrap; }
.flex-col { flex-direction: column; }
.items-start { align-items: flex-start; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.gap-1 { gap: .25rem; } .gap-2 { gap: .5rem; } .gap-3 { gap: .75rem; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.space-y-1 > * + * { margin-top: .25rem; }
.space-y-2 > * + * { margin-top: .5rem; }
.space-y-3 > * + * { margin-top: .75rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-6 > * + * { margin-top: 1.5rem; }
.divide-y > * + * { border-top: 1px solid var(--slate-200); }
.w-full { width: 100%; }
.w-80 { width: 20rem; }
.w-72 { width: 18rem; }
.w-56 { width: 14rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.w-4 { width: 1rem; }
.h-8 { height: 2rem; }
.h-\[70vh\] { height: 70vh; }
.max-w-md { max-width: 28rem; }
.max-w-lg { max-width: 32rem; }
.max-w-xl { max-width: 36rem; }
.max-w-7xl { max-width: 98%; margin-left: auto; margin-right: auto; }
.max-w-\[80\%\] { max-width: 80%; }
.max-h-24 { max-height: 6rem; }
.max-h-64 { max-height: 16rem; }
.min-w-0 { min-width: 0; }
.min-w-max { min-width: max-content; }
.min-h-\[100px\] { min-height: 100px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mb-1 { margin-bottom: .25rem; } .mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; }
.mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; }
.mt-1 { margin-top: .25rem; } .mt-2 { margin-top: .5rem; } .mt-3 { margin-top: .75rem; }
.mt-4 { margin-top: 1rem; } .mt-8 { margin-top: 2rem; }
.mr-2 { margin-right: .5rem; } .mr-auto { margin-right: auto; }
.p-2 { padding: .5rem; } .p-3 { padding: .75rem; } .p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; }
.px-1 { padding-left: .25rem; padding-right: .25rem; }
.px-2 { padding-left: .5rem; padding-right: .5rem; }
.px-3 { padding-left: .75rem; padding-right: .75rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.py-0\.5 { padding-top: .125rem; padding-bottom: .125rem; }
.py-1 { padding-top: .25rem; padding-bottom: .25rem; }
.py-1\.5 { padding-top: .375rem; padding-bottom: .375rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.py-3 { padding-top: .75rem; padding-bottom: .75rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.pt-3 { padding-top: .75rem; }
.pr-3 { padding-right: .75rem; }
.pb-2 { padding-bottom: .5rem; } .pb-3 { padding-bottom: .75rem; } .pb-4 { padding-bottom: 1rem; }
.text-xs { font-size: .75rem; } .text-sm { font-size: .875rem; }
.text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; }
.text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } .text-4xl { font-size: 2.25rem; }
.font-medium { font-weight: 500; } .font-bold { font-weight: 700; }
.font-mono { font-family: ui-monospace, monospace; }
.text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; }
.text-white { color: var(--white); }
.text-white { color: var(--indigo-600); } .text-indigo-700 { color: var(--indigo-700); }
.text-indigo-200 { color: var(--indigo-200); }
.text-gray-300 { color: #d1d5db; } .text-gray-400 { color: var(--gray-400); }
.text-gray-500 { color: var(--gray-500); } .text-gray-600 { color: var(--gray-600); }
.text-gray-700 { color: var(--gray-700); } .text-gray-800 { color: var(--gray-800); }
.text-green-600 { color: var(--green-600); } .text-green-700 { color: var(--green-700); }
.text-yellow-600 { color: var(--yellow-600); } .text-yellow-700 { color: var(--yellow-700); }
.text-red-500 { color: var(--red-500); } .text-red-600 { color: var(--red-600); }
.text-red-400 { color: var(--red-400); }
.bg-white { background: var(--white); }
.bg-slate-100 { background: var(--slate-100); }
.bg-slate-200 { background: var(--slate-200); }
.bg-slate-200\/50 { background: rgba(226,232,240,.5); }
.bg-gray-50 { background: var(--gray-50); } .bg-gray-100 { background: var(--gray-100); }
.bg-indigo-50 { background: var(--indigo-50); } .bg-indigo-100 { background: var(--indigo-100); }
.bg-indigo-600 { background: var(--indigo-600);color:#FFF!important; } .bg-indigo-700 { background: var(--indigo-700); }
.bg-green-100 { background: var(--green-100); } .bg-green-600 { background: var(--green-600); }
.bg-yellow-100 { background: var(--yellow-100); }
.bg-red-100 { background: var(--red-100); } .bg-red-500 { background: var(--red-500); }
.bg-blue-50 { background: var(--blue-50); }
.bg-white\/70 { background: rgba(255,255,255,.7); }
.bg-gradient-to-br { background: linear-gradient(to bottom left, var(--indigo-600), var(--purple-700)); }
.border { border: 1px solid var(--slate-300); }
.border-0 { border: 0; }
.border-2 { border-width: 2px; }
.border-t { border-top: 1px solid var(--slate-200); }
.border-b { border-bottom: 1px solid var(--slate-200); }
.border-r-2 { border-right: 2px solid var(--indigo-200); }
.border-r-4 { border-right: 4px solid var(--indigo-500); }
.border-indigo-300 { border-color: var(--indigo-200); }
.border-green-400 { border-color: #4ade80; } .border-red-400 { border-color: var(--red-400); }
.border-dashed { border-style: dashed; }
.border-slate-300 { border-color: var(--slate-300); }
.rounded { border-radius: var(--radius); }
.rounded-lg { border-radius: var(--radius-lg); }
.rounded-xl { border-radius: var(--radius-xl); }
.rounded-full { border-radius: 9999px; }
.shadow { box-shadow: var(--shadow); }
.shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-auto { overflow-x: auto; }
.outline-none { outline: none; }
.cursor-grab { cursor: grab; }
.relative { position: relative; }
.absolute { position: absolute; }
.-top-1 { top: -.25rem; } .-left-1 { left: -.25rem; }
.opacity-50 { opacity: .5; }
.line-through { text-decoration: line-through; }
.transition { transition: all .2s; }
.hover\:shadow-md:hover { box-shadow: var(--shadow-md); }
.hover\:shadow-lg:hover { box-shadow: var(--shadow-lg); }
.hover\:shadow:hover { box-shadow: var(--shadow); }
.hover\:bg-gray-50:hover { background: var(--gray-50); }
.hover\:bg-gray-100:hover { background: var(--gray-100); }
.hover\:bg-indigo-50:hover { background: var(--indigo-50); }
.hover\:bg-indigo-500:hover { background: var(--indigo-500); }
.hover\:bg-indigo-700:hover { background: var(--indigo-700); }
.hover\:text-indigo-200:hover { color: var(--indigo-200); }
.hover\:text-white:hover { color: var(--indigo-600); }
.hover\:underline:hover { text-decoration: underline; }
.focus\:bg-white:focus { background: var(--white); }
.focus\:ring-2:focus { box-shadow: 0 0 0 2px var(--indigo-500); }
.last\:border-0:last-child { border: 0; }
.kanban-scroll { overflow-x: auto; }
.task-card { transition: transform .15s; }
.task-card:hover { transform: translateY(-2px); }
.sortable-ghost { opacity: .4; }

/* Nav */
nav.bg-indigo-700 { background: var(--indigo-700); color: var(--white); box-shadow: var(--shadow-lg); }
nav .nav-inner { max-width: 98%; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
nav a.brand { font-size: 1.25rem; font-weight: 700; }
nav input[type=search], nav input[type=text].nav-search {
    width: 100%; border-radius: var(--radius-lg); padding: .375rem .75rem; border: 0; color: var(--gray-800); font-size: .875rem;
}

/* Forms */
input[type=text], input[type=password], input[type=email], input[type=date], input[type=time], input[type=number], input[type=file], select, textarea {
    border: 1px solid var(--slate-300); border-radius: var(--radius-lg); padding: .5rem .75rem; width: 100%;
}
select, select option { direction: rtl; text-align: right; }
select { max-width: 100%; text-overflow: ellipsis; }
.btn, .btn-success, a.btn, a.btn-success {
    cursor: pointer; border: 0; border-radius: var(--radius-lg); padding: .5rem 1rem;
    background: #16a34a !important; color: #fff !important; font-weight: 500;
    box-shadow: 0 4px 12px rgba(22, 163, 74, .25);
    display: inline-flex; align-items: center; justify-content: center;
    text-decoration: none !important;
}
.btn:hover, .btn-success:hover { background: #15803d !important; }
.btn:active, .btn-success:active { transform: scale(.97); }
.btn-danger, button.btn-danger {
    background: #dc2626 !important; color: #fff !important;
    box-shadow: 0 4px 12px rgba(220, 38, 38, .25);
}
.btn-danger:hover, button.btn-danger:hover { background: #b91c1c !important; }
.btn-green, .btn-success { background: #16a34a !important; color: #fff !important; }
.btn-green:hover, .btn-success:hover { background: #15803d !important; }
.btn-icon {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: transparent !important;
    border: 1px solid transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    color: var(--text-muted) !important;
}
.btn-icon:hover { background: var(--primary-soft) !important; border-color: var(--border) !important; color: var(--primary) !important; }
.btn-icon-danger:hover { background: #fef2f2 !important; border-color: #fca5a5 !important; color: #dc2626 !important; }
.btn-icon i { font-size: .9rem; }
.inline { display: inline; }
.btn-outline { background: transparent !important; border: 1px solid var(--primary) !important; color: var(--primary) !important; box-shadow: none !important; }
.btn-sm { padding: .25rem .75rem; font-size: .875rem; }

/* Alerts */
.alert { padding: .75rem 1rem; border-radius: var(--radius); margin-bottom: 1rem; }
.alert-success { background: var(--green-100); border: 1px solid #4ade80; color: var(--green-700); }
.alert-error { background: var(--red-100); border: 1px solid var(--red-400); color: var(--red-700); }

/* Table */
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
thead { background: var(--gray-50); }
th, td { padding: .75rem; text-align: right; }
tr.border-t { border-top: 1px solid var(--slate-200); }

/* Calendar */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-day { min-height: 80px; background: var(--white); border: 1px solid var(--slate-200); padding: .25rem; font-size: .75rem; }
.cal-day.today { background: var(--indigo-50); border-color: var(--indigo-500); }
.cal-task { background: var(--indigo-100); color: var(--indigo-700); padding: 1px 4px; border-radius: 3px; margin-top: 2px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* AI Panel */
.ai-panel { background: linear-gradient(135deg, #1e1b4b, #312e81); color: #e0e7ff; border-radius: var(--radius-xl); padding: 1.25rem; }
.ai-msg { background: rgba(255,255,255,.1); border-radius: var(--radius-lg); padding: .75rem; margin-bottom: .5rem; font-size: .875rem; }
.ai-msg.user { background: rgba(99,102,241,.3); }
.ai-insight { border-right: 3px solid var(--yellow-500); padding-right: .75rem; margin-bottom: .5rem; }

/* Chat SSE indicator */
.sse-live { display: inline-flex; align-items: center; gap: .25rem; font-size: .75rem; color: var(--green-600); }
.sse-live::before { content: ''; width: 8px; height: 8px; background: var(--green-600); border-radius: 50%; animation: pulse 1.5s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.4} }

/* Jalali Date Picker */
.jalali-date { cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236b7280' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM2 4v10a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V4H2z'/%3E%3C/svg%3E") no-repeat left 8px center; padding-left: 28px !important; text-align: center; }
.jalali-picker { position: absolute; z-index: 10050; background: #fff; border: 1px solid var(--slate-300); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); width: 280px; padding: .75rem; }
.jalali-picker.hidden { display: none !important; }
.jp-header { display: flex; align-items: center; gap: .35rem; margin-bottom: .5rem; font-weight: 700; font-size: .875rem; }
.jp-nav { background: var(--indigo-100); color: var(--indigo-700); border: 0; border-radius: var(--radius); width: 28px; height: 28px; cursor: pointer; font-size: 1.1rem; }
.jp-month-select { flex: 1; border: 1px solid var(--slate-300); border-radius: var(--radius); padding: .2rem .25rem; font-size: .8rem; background: #fff; }
.jp-year-select { width: 72px; border: 1px solid var(--slate-300); border-radius: var(--radius); padding: .2rem .25rem; font-size: .8rem; background: #fff; }
.jp-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; font-size: .7rem; color: var(--gray-500); margin-bottom: .25rem; }
.jp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.jp-day { border: 0; background: var(--gray-50); border-radius: var(--radius); padding: .35rem; cursor: pointer; font-size: .8rem; color: #333 !important;}
.jp-day:hover { background: var(--indigo-100); color: var(--indigo-700); }
.jp-today-day { background: var(--indigo-600) !important; color: #fff !important; }
.jp-footer { display: flex; gap: .5rem; margin-top: .5rem; }
.jp-footer button { flex: 1; font-size: .75rem; padding: .35rem; border: 1px solid var(--slate-300); background: #999; border-radius: var(--radius); cursor: pointer; }
.jp-footer button:hover { background: var(--gray-50); }

@media (min-width: 640px) {
    .sm\:inline { display: inline !important; }
}
@media (min-width: 768px) {
    .md\:block { display: block !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .md\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
    .lg\:col-span-2 { grid-column: span 2 / span 2; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ========== APP SHELL (Mobile-first PM App) ========== */
.app-header {
    position: sticky; top: 0; z-index: 100;
    background: rgba(255,255,255,.88);
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.app-header-inner {
    max-width: 98%; margin: 0 auto;
    padding: .65rem 1rem;
    display: flex; align-items: center; gap: .75rem;
    min-height: var(--header-h);
}
.app-logo { display: flex; align-items: center; gap: .5rem; font-weight: 700; color: var(--text); }
.app-logo-icon {
    width: 34px; height: 34px; border-radius: 10px;
    background: none;
    color: #fff; display: flex; align-items: center; justify-content: center;
    font-size: .95rem; box-shadow: var(--shadow-float);
}
.app-logo-icon i { font-size: .95rem; }
.app-logo-text { font-size: 1.05rem; }
.app-header-start { flex-shrink: 0; }
.app-header-center { flex: 1; max-width: 420px; }
.app-header-end { display: flex; align-items: center; gap: .5rem; margin-right: auto; }
.search-bar {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 999px; padding: .45rem 1rem;
}
.search-bar input { border: 0; background: transparent; width: 100%; outline: none; font-size: .875rem; }
.search-icon { opacity: .5; font-size: .9rem; }
.search-icon i { font-size: .85rem; }
.header-icon-btn {
    position: relative; width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 12px; background: var(--surface-2); font-size: 1.1rem;
}
.header-icon-btn i { font-size: 1rem; color: var(--text-muted); }
.header-badge, .tab-badge {
    position: absolute; top: 2px; left: 2px;
    min-width: 16px; height: 16px; padding: 0 4px;
    background: #ef4444; color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 999px; display: flex; align-items: center; justify-content: center;
}
.header-user { text-align: left; line-height: 1.2; }
.header-user-name { display: block; font-size: .8rem; font-weight: 600; }
.header-user-sub { display: block; font-size: .7rem; color: var(--text-muted); }
.header-date { font-size: .7rem; color: var(--text-muted); }
.header-logout { font-size: .8rem; color: var(--primary); padding: .35rem .65rem; border-radius: 8px; background: var(--primary-soft); }
.app-subnav {
    max-width: 98%; margin: 0 auto; padding: 0 1rem .55rem;
    display: flex; gap: .35rem; overflow-x: auto;
}
.app-subnav a {
    padding: .35rem .85rem; border-radius: 999px; font-size: .8rem;
    color: var(--text-muted); white-space: nowrap;
    background: var(--surface-2); border: 1px solid transparent;
}
.app-subnav a:hover { color: var(--primary); border-color: var(--primary-soft); background: var(--primary-soft); }
.app-subnav a.active {
    color: #fff; background: linear-gradient(135deg, var(--primary), #7c3aed);
    border-color: transparent; font-weight: 600;
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
}

.app-main {
    max-width: 98%; margin: 0 auto;
    padding: 1rem 1rem calc(var(--tab-h) + var(--safe-bottom) + 1.5rem);
}
@media (min-width: 768px) {
    .app-main { padding-bottom: 2rem; }
}

.tab-bar {
    position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
    display: flex; align-items: stretch;
    height: calc(var(--tab-h) + var(--safe-bottom));
    padding-bottom: var(--safe-bottom);
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 24px rgba(15,23,42,.08);
}
.tab-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; color: var(--text-muted); font-size: .65rem; padding: .35rem;
    transition: color .2s;
}
.tab-item.active { color: var(--primary); }
.tab-item.active .tab-icon { transform: scale(1.08); }
.tab-icon { font-size: 1.35rem; line-height: 1; transition: transform .2s; display: flex; align-items: center; justify-content: center; }
.tab-icon i { font-size: 1.15rem; }
.tab-icon-wrap { position: relative; }
.tab-label { font-weight: 500; }

.show-mobile-only { display: flex !important; }
.hide-mobile { display: none !important; }
@media (min-width: 768px) {
    .tab-bar { display: none !important; }
    .show-mobile-only { display: none !important; }
    .hide-mobile { display: revert !important; }
    .app-subnav { display: flex !important; }
}
@media (max-width: 767px) {
    .app-subnav { display: none !important; }
    .app-logo-text { display: none; }
}

/* Hero & Stats */
.hero-banner {
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, var(--primary) 0%, #7c3aed 100%);
    border-radius: var(--radius-xl); padding: 1.25rem 1.5rem;
    color: #fff; margin-bottom: 1.25rem;
    box-shadow: var(--shadow-float);
}
.hero-greeting { opacity: .9; font-size: .875rem; margin: 0 0 .25rem; }
.hero-title { font-size: 1.35rem; font-weight: 700; margin: 0; }
.hero-sub { opacity: .75; font-size: .8rem; margin: .35rem 0 0; }
.hero-search-btn {
    width: 44px; height: 44px; border-radius: 14px;
    background: rgba(255,255,255,.2); display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem;
}
.hero-search-btn i { font-size: 1rem; }

.stat-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: .75rem;
    margin-bottom: 1.25rem;
}
@media (min-width: 768px) { .stat-grid { grid-template-columns: repeat(4, 1fr); gap: 1rem; } }
.stat-card {
    display: flex; align-items: center; gap: .75rem;
    background: var(--surface); border-radius: var(--radius-lg);
    padding: 1rem; box-shadow: var(--shadow-card);
    border: 1px solid var(--border);
}
.stat-icon { font-size: 1.5rem; width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; }
.stat-icon i { font-size: 1.15rem; }
.stat-indigo .stat-icon { background: var(--primary-soft); }
.stat-amber .stat-icon { background: #fef3c7; }
.stat-rose .stat-icon { background: #ffe4e6; }
.stat-emerald .stat-icon { background: #d1fae5; }
.stat-value { display: block; font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.stat-label { font-size: .75rem; color: var(--text-muted); }

.app-section {
    background: var(--surface); border-radius: var(--radius-xl);
    padding: 1.1rem; margin-bottom: 1rem;
    box-shadow: var(--shadow-card); border: 1px solid var(--border);
}
.section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: .85rem; }
.section-header h2 { font-size: 1rem; font-weight: 700; margin: 0; }
.section-link { font-size: .8rem; color: var(--primary); font-weight: 500; }

.task-list-app { display: flex; flex-direction: column; gap: .5rem; }
.task-row-app {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .85rem 1rem; border-radius: var(--radius-md);
    background: var(--surface-2); border: 1px solid var(--border);
    transition: transform .15s, box-shadow .15s;
}
.task-row-app .taskulu-color-box { margin-top: 0; }
.task-row-app:active { transform: scale(.98); }
.task-row-title { font-weight: 600; font-size: .9rem; margin: 0 0 .15rem; }
.task-row-meta { font-size: .75rem; color: var(--text-muted); margin: 0; }
.task-row-side { text-align: left; flex-shrink: 0; }
.task-due { display: block; font-size: .7rem; color: var(--text-muted); margin-bottom: .25rem; }
.task-due.overdue { color: #ef4444; font-weight: 600; }

.badge {
    display: inline-block; font-size: .65rem; font-weight: 600;
    padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
}
 .badge-todo { background: #f1f5f9; color: #475569; }
.badge-in_progress { background: #fef3c7; color: #b45309; }
.badge-done { background: #d1fae5; color: #047857; }
.badge-warning { background: #fef3c7; color: #b45309; }

/* مودال جزئیات نامه پیوست */
.modal-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .55);
    display: none; align-items: center; justify-content: center; z-index: 1000;
    padding: 1rem;
}
.modal-overlay.is-open { display: flex; }
.modal-box {
    background: #fff; border-radius: 14px; width: min(640px, 100%);
    max-height: 88vh; overflow-y: auto; box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid #eef2f7;
}
.modal-body { padding: 1.25rem; }
.modal-close {
    border: none; background: transparent; font-size: 1.5rem; line-height: 1;
    cursor: pointer; color: #64748b;
}
.letter-row:hover { background: #f8fafc; }


.job-cards-scroll {
    display: flex; gap: .75rem; overflow-x: auto;
    padding-bottom: .25rem; scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
}
.job-card-app {
    flex: 0 0 160px; scroll-snap-align: start;
    background: linear-gradient(145deg, var(--primary-soft), #fff);
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    padding: 1rem; display: flex; flex-direction: column; gap: .35rem;
}
.job-card-icon { font-size: 1.5rem; display: flex; }
.job-card-icon i { font-size: 1.25rem; color: var(--primary); }
.job-nav-icon { display: flex; width: 1.25rem; justify-content: center; }
.job-nav-icon i { font-size: .9rem; }
.breadcrumb-icon { font-size: .7rem; margin-left: .25rem; }
.icon-muted { color: var(--text-muted); }
.icon-primary { color: var(--primary); }
.job-card-app strong { font-size: .875rem; }
.job-card-meta { font-size: .7rem; color: var(--text-muted); }
.job-card-app-archived {
    background: linear-gradient(145deg, #fffbeb, #fff) !important;
    border-color: #fcd34d !important;
    opacity: .8;
}
.job-card-app-archived .job-card-icon i { color: #d97706 !important; }

.timeline { display: flex; flex-direction: column; gap: .65rem; }
.timeline-item { display: flex; gap: .65rem; font-size: .8rem; }
.timeline-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); margin-top: .35rem; flex-shrink: 0; }
.timeline-body { flex: 1; color: var(--text-muted); line-height: 1.5; }
.timeline-body strong { color: var(--text); }
.timeline-time { display: block; font-size: .7rem; margin-top: .15rem; opacity: .7; }

.empty-state { text-align: center; padding: 2rem 1rem; color: var(--text-muted); }
.empty-state.inline { padding: 1rem; }
.empty-icon { font-size: 2.5rem; display: block; margin-bottom: .5rem; opacity: .35; color: var(--text-muted); }
.empty-icon i { font-size: 2rem; }
.text-muted { color: var(--text-muted); font-size: .875rem; }

.toast {
    position: relative;
    padding: .75rem 2.5rem .75rem 1rem; border-radius: var(--radius-md); margin-bottom: 1rem;
    font-size: .875rem; animation: slideDown .3s ease;
    display: flex; align-items: center; gap: .5rem;
}
.toast-close {
    position: absolute; left: .65rem; top: 50%; transform: translateY(-50%);
    width: 24px; height: 24px; border: 0; background: transparent !important;
    color: inherit !important; opacity: .6; cursor: pointer; border-radius: 6px;
    box-shadow: none !important; padding: 0 !important; font-size: 1.1rem; line-height: 1;
}
.toast-close:hover { opacity: 1; background: rgba(0,0,0,.06) !important; }
.toast.is-hiding { animation: toastOut .3s ease forwards; }
@keyframes toastOut { to { opacity: 0; transform: translateY(-8px); } }
.toast-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.toast-error { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
@keyframes slideDown { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }

/* Job layout */
.job-layout { display: flex; flex-direction: column; gap: 1rem; }
@media (min-width: 992px) {
    .job-layout { flex-direction: row; align-items: flex-start; }
}
.job-sidebar-wrap {
    width: 100%;
    flex-shrink: 0;
}
@media (min-width: 992px) {
    .job-sidebar-wrap { width: 240px; }
}
.job-nav-mobile {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: .5rem;
    width: 100%;
    overflow-x: auto;
    padding: 0 0 .75rem;
    margin-bottom: .25rem;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
}
.job-nav-mobile::-webkit-scrollbar { display: none; }
.job-pill {
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .2rem;
    min-width: 4.1rem;
    padding: .5rem .55rem;
    border-radius: var(--radius-md);
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
    background: var(--surface);
    border: 1px solid var(--border);
    color: var(--text-muted);
    box-shadow: var(--shadow-card);
    text-align: center;
}
.job-pill-icon { margin: 0; line-height: 1; }
.job-pill-icon i { font-size: 1rem; }
.job-pill.active {
    background: var(--primary);
    color: #fff;
    border-color: var(--primary);
    box-shadow: var(--shadow-float);
}
.job-sidebar-desktop { display: none; width: 100%; }
@media (min-width: 992px) {
    .job-nav-mobile { display: none; }
    .job-sidebar-desktop { display: block; }
}
.job-sidebar-card {
    background: var(--surface); border-radius: var(--radius-xl);
    border: 1px solid var(--border); box-shadow: var(--shadow-card);
    overflow: hidden; position: sticky; top: calc(var(--header-h) + 1rem);
}
.job-sidebar-head {
    padding: 1rem; background: linear-gradient(135deg, var(--primary-soft), #fff);
    border-bottom: 1px solid var(--border);
}
.job-sidebar-head h3 { margin: 0 0 .25rem; font-size: .95rem; }
.job-sidebar-head p { margin: 0; font-size: .75rem; color: var(--text-muted); }
.job-sidebar-nav { padding: .5rem; }
.job-nav-link {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .75rem; border-radius: var(--radius-md);
    font-size: .85rem; color: var(--text-muted); margin-bottom: .15rem;
}
.job-nav-link.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.job-nav-icon { font-size: 1rem; }

/* Kanban refresh */
.kanban-scroll {
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; padding-bottom: .5rem;
    margin: 0 -.5rem; padding-left: .5rem; padding-right: .5rem;
}
.kanban-scroll .flex { scroll-snap-align: start; }
.list-column {
    width: min(85vw, 300px) !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
}
.list-column-head {
    display: flex; justify-content: space-between; align-items: center;
    padding-bottom: .65rem; margin-bottom: .65rem;
    border-bottom: 2px solid var(--primary-soft);
}
.list-count {
    font-size: .7rem; font-weight: 700;
    background: var(--primary-soft); color: var(--primary);
    padding: .15rem .5rem; border-radius: 999px;
}
.task-card {
    border-radius: var(--radius-md) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
    transition: box-shadow .2s, transform .15s !important;
}
.task-card:active { transform: scale(.98) !important; }
.phase-title {
    font-size: .8rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .03em;
    padding: .5rem 0; margin-bottom: .5rem;
}

.page-head { margin-bottom: 1rem; }
.page-head h1 { font-size: 1.35rem; font-weight: 700; margin: 0 0 .25rem; }
.page-head .breadcrumb { font-size: .8rem; color: var(--primary); }

.project-list-app { display: flex; flex-direction: column; gap: .5rem; }
.project-row-app {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.1rem; background: var(--surface);
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: var(--shadow-card);
}
.project-row-app:active { background: var(--primary-soft); }
.project-code { font-size: .7rem; background: var(--surface-2); padding: .15rem .45rem; border-radius: 6px; margin-right: .5rem; }

/* Projects dashboard (Taskulu-style) */
.projects-dashboard { padding-bottom: 2rem; }
.projects-topbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem;
    margin-bottom: 1.5rem;
}
.projects-topbar h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.projects-topbar-start { display: flex; align-items: center; gap: 1rem; flex: 1; min-width: 200px; }
.projects-search {
    display: flex; align-items: center; gap: .5rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 999px; padding: .45rem 1rem; flex: 1; max-width: 360px;
}
.projects-search input { border: 0; background: transparent; flex: 1; font-size: .875rem; outline: none; }
.project-group { margin-bottom: 2rem; }
.project-group-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .85rem; flex-wrap: wrap; gap: .5rem;
}
.project-group-head h2 { font-size: 1.1rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.project-group-head h2 a { color: inherit; text-decoration: none; }
.project-group-head h2 a:hover { color: var(--primary); }
.project-group-actions { display: flex; gap: 1rem; font-size: .8rem; }
.project-jobs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
    gap: .85rem;
}
.project-job-card {
    position: relative;
    display: flex; flex-direction: column; justify-content: space-between;
    min-height: 118px; padding: 1rem .9rem .75rem;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
    text-decoration: none; color: inherit;
    transition: transform .15s, box-shadow .15s, border-color .15s;
}
.project-job-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
    border-color: var(--primary-soft);
}
.project-job-card strong { font-size: .9rem; line-height: 1.4; display: block; }
.project-job-sub { font-size: .7rem; color: var(--text-muted); display: block; margin-top: .2rem; }
.project-job-card-add {
    align-items: center; justify-content: center; text-align: center;
    border-style: dashed; color: var(--text-muted); min-height: 118px;
}
.project-job-card-add:hover { color: var(--primary); border-color: var(--primary); }
.project-job-card-archived {
    background: #fffbeb !important;
    border-color: #fcd34d !important;
    opacity: .8;
}
.project-job-card-archived .job-card-meta i { color: #d97706; margin-inline-end: .25rem; }
.job-fav-btn {
    position: absolute; top: .55rem; left: .55rem;
    background: #f63b44; border: 0; color: #cbd5e1; cursor: pointer; padding: .15rem;
    font-size: .65rem; line-height: 1;
    border-radius: 4px;
    padding: 3px;
}
.job-fav-btn.is-fav { color: #3b82f6; }
.project-job-members {
    display: flex; flex-direction: row-reverse; justify-content: flex-start;
    margin-top: .65rem; padding-top: .5rem;
}
.member-avatar {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .65rem; font-weight: 700; color: #fff;
    border: 2px solid var(--surface); margin-right: -6px;
}
.checklist-head.editing-title [data-checklist-title] { display: none; }
.checklist-head.editing-title .checklist-title-form { display: flex !important; flex: 1; }
.checklist-title-input { width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: .25rem .5rem; font-size: .875rem; }

/* Task activity timeline */
.task-activity-timeline { position: relative; }
.timeline-add-bar {
    display: flex; flex-direction: column; gap: .65rem;
    padding-bottom: 1rem; margin-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.timeline-add-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.timeline-add-input { flex: 1; min-width: 140px; border: 1px solid var(--border); border-radius: 8px; padding: .45rem .65rem; font-size: .85rem; }
.timeline-stream { position: relative; padding-right: 1.25rem; }
.timeline-stream::before {
    content: ''; position: absolute; right: 5px; top: 0; bottom: 0;
    width: 2px; background: var(--border);
}
.timeline-event { position: relative; margin-bottom: 1.25rem; }
.timeline-event-marker {
    position: absolute; right: -1.25rem; top: .35rem;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--primary); border: 2px solid var(--surface);
    transform: translateX(50%);
    z-index: 1;
}
.timeline-event-comment .timeline-event-marker { background: #22c55e; }
.timeline-event-file .timeline-event-marker { background: #f59e0b; }
.timeline-event-checklist .timeline-event-marker { background: #6366f1; }
.timeline-event-body {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: .85rem 1rem;
}
.timeline-event-head {
    display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
    margin-bottom: .5rem; font-size: .85rem;
}
.timeline-event-icon { color: var(--primary); display: flex; }
.timeline-event-time { margin-right: auto; font-size: .7rem; color: var(--text-muted); }

/* Custom context menu */
.dima-context-menu {
    position: fixed; z-index: 9999; min-width: 180px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); box-shadow: 0 12px 40px rgba(15, 23, 42, .15);
    padding: .35rem 0; display: none;
}
.dima-context-menu.open { display: block; }
.dima-context-menu button,
.dima-context-menu a {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    padding: .55rem 1rem; border: 0; background: #3b82f6;
    text-align: right; font-size: .85rem; color: inherit; cursor: pointer;
    text-decoration: none;
}
.dima-context-menu button:hover,
.dima-context-menu a:hover { background: var(--surface-2); }
.dima-context-menu .ctx-divider { height: 1px; background: var(--border); margin: .25rem 0; }
.dima-context-menu .ctx-disabled { opacity: .45; pointer-events: none; }

.fab {
    position: fixed; bottom: calc(var(--tab-h) + var(--safe-bottom) + 1rem); left: 1rem;
    width: 56px; height: 56px; border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    color: #fff; font-size: 1.5rem; font-weight: 300;
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-float); z-index: 150; border: 0;
}
.fab i { font-size: 1.25rem; }
@media (min-width: 768px) { .fab { bottom: 2rem; } }

.login-screen {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #312e81 0%, #6366f1 50%, #8b5cf6 100%);
}
.login-card {
    width: 100%; max-width: 400px;
    background: rgba(255,255,255,.95); backdrop-filter: blur(10px);
    border-radius: var(--radius-xl); padding: 2rem;
    box-shadow: 0 25px 50px rgba(0,0,0,.2);
}
.login-logo {
    width: 56px; height: 56px; margin: 0 auto 1rem;
    background: none;
    border-radius: 16px; color: #fff; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
}
.login-logo i { font-size: 1.35rem; }
.login-card h1 { text-align: center; font-size: 1.35rem; margin: 0 0 .25rem; }
.login-card .subtitle { text-align: center; color: var(--text-muted); margin-bottom: 1.5rem; font-size: .875rem; }
.btn-block { width: 100%; padding: .75rem; font-size: 1rem; border-radius: var(--radius-md); }

input, select, textarea {
    border: 1px solid var(--border) !important;
    border-radius: var(--radius-md) !important;
    background: var(--surface) !important;
    transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 3px rgba(99,102,241,.15) !important;
    outline: none;
}
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .35rem; color: var(--text); }
.form-control { width: 100%; padding: .55rem .75rem !important; font-size: .875rem !important; }
.form-hint { font-size: .72rem; color: var(--text-muted); margin-top: .25rem; }
.text-primary { color: var(--primary); }

/* Calendar mobile */
.cal-wrap { background: var(--surface); border-radius: var(--radius-xl); padding: 1rem; box-shadow: var(--shadow-card); border: 1px solid var(--border); }
.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; margin-bottom: .35rem; text-align: center; font-size: .7rem; font-weight: 700; color: var(--text-muted); }
@media (max-width: 767px) {
    .cal-grid { gap: 1px; }
    .cal-day { min-height: 52px; font-size: .65rem; padding: .15rem; border-radius: 6px; }
    .cal-task { display: none; }
    .cal-day.today strong { background: var(--primary); color: #fff; border-radius: 50%; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
}
.cal-nav { display: flex; gap: .5rem; }
.cal-wrap .cal-day, .cal-wrap .cal-day strong { color: var(--text); }
.cal-wrap .cal-weekdays { color: var(--text-muted); }

/* Chat app */
.chat-panel {
    display: flex; flex-direction: column; flex: 1; min-width: 0;
    min-height: calc(100dvh - var(--header-h) - var(--tab-h) - var(--safe-bottom) - 7rem);
}
@media (min-width: 768px) { .chat-panel { min-height: 65vh; max-height: 75vh; } }
.chat-messages {
    flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
    background: var(--surface); border-radius: var(--radius-xl);
    border: 1px solid var(--border); padding: 1rem;
    display: flex; flex-direction: column; gap: .65rem;
}
.chat-bubble { max-width: 85%; padding: .65rem .85rem; border-radius: 16px; font-size: .875rem; }
.chat-bubble.me { background: var(--primary-soft); margin-right: auto; border-bottom-right-radius: 4px; }
.chat-bubble.them { background: var(--surface-2); margin-left: auto; border-bottom-left-radius: 4px; }
.chat-input-bar {
    display: flex; gap: .5rem; margin-top: .75rem;
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.chat-input-bar input { flex: 1; padding: .65rem 1rem !important; border-radius: 999px !important; }
.chat-room-card {
    display: block; padding: 1rem; background: var(--surface);
    border-radius: var(--radius-lg); border: 1px solid var(--border);
    box-shadow: var(--shadow-card); transition: transform .15s;
}
.chat-room-card:active { transform: scale(.98); }

/* Notifications */
.notif-list { background: var(--surface); border-radius: var(--radius-xl); border: 1px solid var(--border); overflow: hidden; box-shadow: var(--shadow-card); }
.notif-item { display: flex; gap: .75rem; padding: 1rem; border-bottom: 1px solid var(--border); align-items: flex-start; }
.notif-item:last-child { border-bottom: 0; }
.notif-item.unread { background: var(--primary-soft); }
.notif-item .notif-link { color: var(--primary); font-size: .8rem; flex-shrink: 0; }

/* Task detail mobile */
.task-detail-layout { display: flex; flex-direction: column; gap: 1rem; }
.task-detail-sidebar { width: 100%; }
@media (min-width: 992px) {
    .task-detail-layout { flex-direction: row; align-items: flex-start; }
    .task-detail-sidebar { width: 320px; flex-shrink: 0; }
}

/* Taskulu board */
.taskulu-job {
    display: flex;
    flex-direction: column;
    gap: 0;
    min-height: calc(100dvh - var(--header-h) - var(--tab-h) - var(--safe-bottom));
}
@media (min-width: 992px) {
    .taskulu-job {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        min-height: calc(100dvh - var(--header-h) - 2rem);
    }
}
@media (max-width: 768px) {
    .taskulu-job {
        display: block;
    }
}
.taskulu-sidebar .job-sidebar-card {
    background: #1e293b; border-color: #334155; color: #e2e8f0;
    box-shadow: 0 8px 24px rgba(15, 23, 42, .35);
}
.taskulu-sidebar .job-sidebar-head {
    background: linear-gradient(135deg, #0f172a, #1e293b);
    border-bottom-color: #334155;
}
.taskulu-sidebar .job-sidebar-head h3 { color: #f8fafc; }
.taskulu-sidebar .job-sidebar-head p { color: #94a3b8; }
.taskulu-sidebar .job-nav-link { color: #94a3b8; }
.taskulu-sidebar .job-nav-link:hover { background: rgba(255,255,255,.06); color: #f1f5f9; }
.taskulu-sidebar .job-nav-link.active { background: rgba(99,102,241,.25); color: #c7d2fe; }

.job-sidebar-members {
    border-top: 1px solid #334155;
    padding: .75rem .85rem 1rem;
}
.job-sidebar-members-btn { width: 100%; justify-content: center; }
.job-sidebar-member-list { list-style: none; margin: .5rem 0 0; padding: 0; background: #FFF;border-radius: 10px;padding: 5px;}
.job-sidebar-member { display: flex; align-items: center; justify-content: space-between; padding: .25rem 0; border-bottom: 1px solid #1e293b; }
.job-sidebar-member:last-child { border-bottom: none; }
.job-sidebar-member-name { font-size: .8rem; color: var(--text); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.color-picker-row { display: flex; align-items: center; gap: .5rem; }
.color-picker-select { flex: 1; }
.color-picker-swatch {
    width: 2rem; height: 2rem; border-radius: .35rem;
    border: 1px solid var(--border); flex-shrink: 0;
}

.checklist-add-item-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: .35rem;
    margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border);
}
.checklist-add-weight { width: 4.5rem; }
.checklist-add-unit { font-size: .72rem; color: var(--text-muted); }

.role-template-form { border: 1px solid var(--border); border-radius: var(--radius-md); padding: .85rem; }
.role-template-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .65rem;
}
.role-template-save { margin-left: auto; }

.taskulu-main { flex: 1; min-width: 0; width: 100%; display: flex; flex-direction: column; }
.taskulu-board-head {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: .5rem 0 .75rem; gap: .5rem;
}
.taskulu-board-head h1 { margin: .15rem 0 0; font-size: 1.15rem; font-weight: 700; }
@media (min-width: 768px) {
    .taskulu-board-head { padding: .75rem 0 1rem; }
    .taskulu-board-head h1 { font-size: 1.25rem; }
}

.taskulu-board { flex: 1; overflow: hidden; display: flex; flex-direction: column; }
.taskulu-lists-row {
    display: flex; gap: .75rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding-bottom: 1rem; align-items: flex-start; flex: 1;
    scroll-snap-type: x mandatory;
}
.taskulu-list-column {
    flex: 0 0 min(88vw, 280px); scroll-snap-align: start;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-xl); display: flex; flex-direction: column;
    max-height: calc(100dvh - var(--header-h) - var(--tab-h) - var(--safe-bottom) - 10rem);
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding:5px;
}
@media (min-width: 992px) {
    .taskulu-list-column {
        max-height: calc(100dvh - var(--header-h) - 8rem);
    }
}
.taskulu-list-head {
    padding: .75rem .85rem; border-bottom: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: center;
    cursor: grab; background: var(--surface-2); border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    position: sticky; top: 0; z-index: 2;
}
.taskulu-list-title { min-width: 0; flex: 1; }
.taskulu-list-head h3 { margin: 0; font-size: .9rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-menu { display: inline-flex; align-items: center; gap: .25rem; margin-right: .35rem; flex-shrink: 0; }
.list-title-form { display: none; margin: 0; }
.taskulu-list-head.editing-title [data-list-title] { display: none; }
.taskulu-list-head.editing-title .list-title-form { display: block; }
.list-title-input {
    width: 100% !important;
    padding: .35rem .55rem !important;
    font-size: .85rem !important;
    border-radius: 10px !important;
    background: #fff !important;
}
.taskulu-section {
    border-bottom: 1px solid var(--border); padding: .5rem .65rem .65rem;
}
.taskulu-section:last-child { border-bottom: 0; }
.taskulu-section-head {
    display: flex; justify-content: space-between; align-items: center;
    font-size: .72rem; font-weight: 700; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: .04em; margin-bottom: .4rem;
    padding: .25rem .15rem;
}
.section-title-wrap { display: flex; align-items: center; gap: .25rem; min-width: 0; flex: 1; }
.section-title-wrap [data-section-title] { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.section-title-form { display: none; margin: 0; flex: 1; }
.taskulu-section-head.editing-title [data-section-title] { display: none; }
.taskulu-section-head.editing-title .section-title-form { display: block; }
.taskulu-section-head.editing-title [data-edit-section-title] { display: none; }
.section-title-input {
    width: 100%; padding: .2rem .45rem; font-size: .72rem;
    border: 1px solid var(--border); border-radius: 6px; background: #fff;
}
.btn-icon-sm { font-size: .65rem; padding: .1rem .25rem; }
.section-count {
    background: var(--surface-2); color: var(--text-muted);
    font-size: .65rem; padding: .1rem .4rem; border-radius: 999px;
}
.task-sortable { min-height: 2rem; }
.taskulu-card {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius-md); margin-bottom: .4rem;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    transition: box-shadow .15s, transform .1s;
}
.taskulu-card:hover { box-shadow: 0 10px 22px rgba(15,23,42,.10); transform: translateY(-1px); }
.taskulu-card:active { transform: scale(.98); }
.taskulu-card .task-open-link {
    display: block; padding: .55rem .65rem; color: inherit; text-decoration: none;
}
.taskulu-card-head {
    display: flex; align-items: flex-start; gap: .5rem;
}
.taskulu-color-box {
    flex-shrink: 0;
    width: 1.1rem; height: 1.1rem;
    border-radius: .3rem;
    border: 1px solid rgba(15, 23, 42, .12);
    margin-top: .1rem;
}
.taskulu-color-box-empty {
    background: var(--surface-2);
    border-style: dashed;
}
.taskulu-card-body { flex: 1; min-width: 0; }
.taskulu-card-title { margin: 0; font-size: .82rem; font-weight: 600; line-height: 1.35; }
.task-num { font-size: .65rem; color: var(--text-muted); font-family: monospace; }
.taskulu-card-meta {
    display: flex; flex-wrap: wrap; gap: .35rem .5rem; margin-top: .35rem;
    font-size: .68rem; color: var(--text-muted);
}
.taskulu-card-meta i { opacity: .75; }
.taskulu-add-form { margin-top: .25rem; }
.taskulu-add-input {
    width: 100%; border: 1px dashed var(--border) !important;
    background: transparent !important; font-size: .78rem !important;
    padding: .4rem .5rem !important;
}
.taskulu-add-list {
    background: var(--surface-2); border-style: dashed;
    padding: .75rem; min-height: 120px;
}
.sortable-ghost { opacity: .45; background: var(--primary-soft) !important; }

/* Task modal */
body.modal-open { overflow: hidden; }
.task-modal {
    position: fixed; inset: 0; z-index: 500;
    display: flex; align-items: flex-end; justify-content: center;
}
.task-modal[hidden] { display: none !important; }
.task-modal-backdrop {
    position: absolute; inset: 0; background: rgba(15, 23, 42, .55);
    backdrop-filter: blur(2px);
}
.task-modal-dialog {
    position: relative; z-index: 1; width: 100%; max-width: 960px;
    max-height: 92dvh; background: var(--surface);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: 0 -8px 40px rgba(0,0,0,.2); overflow: hidden;
    display: flex; flex-direction: column;
}
@media (min-width: 768px) {
    .task-modal { align-items: center; padding: 1.5rem; }
    .task-modal-dialog { border-radius: var(--radius-xl); max-height: 88dvh; }
}
.task-modal-toolbar {
    position: relative; flex-shrink: 0; z-index: 10;
    display: flex; gap: .5rem; align-items: center; justify-content: flex-end;
    padding: .5rem .75rem; border-bottom: 1px solid var(--border);
    background: var(--surface);
}
.task-modal-tool, .task-modal-close {
    width: 34px; height: 34px; border-radius: var(--radius-md);
    background: var(--surface-2) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; box-shadow: none !important;
    display: flex; align-items: center; justify-content: center;
    padding: 0; cursor: pointer; flex-shrink: 0;
}
.task-modal-body { overflow-y: auto; flex: 1; padding: 1rem; }
@media (min-width: 768px) { .task-modal-body { padding: 1.25rem 1.5rem 1.5rem; } }
.task-modal-dialog.is-fullscreen {
    max-width: 100% !important; width: 100% !important;
    max-height: 100dvh !important; height: 100dvh !important;
    border-radius: 0 !important;
}
.task-member-checks { display: flex; flex-direction: column; gap: .25rem; max-height: 8rem; overflow-y: auto; }
.task-member-check { display: flex; align-items: center; gap: .35rem; font-size: .78rem; }
.checklist-item { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; }
.checklist-drag-handle { cursor: grab; color: var(--text-muted); padding: 0 .15rem; }
.checklist-item-admin { display: flex; align-items: center; gap: .35rem; width: 100%; margin-top: .25rem; padding-top: .25rem; border-top: 1px dashed var(--border); }
.checklist-weight-form { display: flex; align-items: center; gap: .25rem; flex: 1; }
.checklist-weight-input { width: 4.5rem; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .15rem .35rem; font-size: .75rem; }
.task-date-fields { position: relative; overflow: visible; }
.taskulu-modal-sidebar { overflow: visible; }

.taskulu-modal-inner {
    display: flex; flex-direction: column; gap: 1.25rem;
}
@media (min-width: 768px) {
    .taskulu-modal-inner { flex-direction: row; align-items: flex-start; }
}
.taskulu-modal-sidebar {
    flex: 0 0 100%; max-width: 100%;
}
@media (min-width: 768px) {
    .taskulu-modal-sidebar { flex: 0 0 320px; max-width: 320px; }
}
.taskulu-modal-content { flex: 1; min-width: 0; }
.taskulu-modal-title { margin: 0 0 .5rem; font-size: 1.1rem; font-weight: 700; }
.taskulu-field-label {
    display: block; font-size: .72rem; font-weight: 600;
    color: var(--text-muted); margin-bottom: .25rem;
}
.taskulu-field-label i { margin-left: .25rem; }

.job-progress-wrap { margin-top: .5rem; max-width: 280px; }
.job-progress-bar {
    height: 6px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
}
.job-progress-bar span {
    display: block; height: 100%; background: linear-gradient(90deg, var(--primary), #22c55e);
    border-radius: 999px; transition: width .3s;
}
.job-progress-label { font-size: .72rem; color: var(--text-muted); }
.job-card-progress {
    height: 4px; background: var(--surface-2); border-radius: 999px; overflow: hidden;
    margin: .35rem 0; width: 100%;
}
.job-card-progress span {
    display: block; height: 100%; background: var(--primary); border-radius: 999px;
}

/* Users admin */
.users-tabs { display: flex; gap: .5rem; margin-bottom: 1rem; flex-wrap: wrap; }
.users-tab {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .5rem .85rem; border-radius: var(--radius-md);
    background: var(--surface); border: 1px solid var(--border);
    color: var(--text-muted); font-size: .85rem; text-decoration: none;
}
.users-tab.active { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); font-weight: 600; }
.users-tab-badge {
    background: var(--primary); color: #fff; font-size: .65rem;
    padding: .1rem .4rem; border-radius: 999px;
}
.users-stats { display: flex; gap: 1.25rem; font-size: .85rem; color: var(--text-muted); }
.users-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card);
}
.users-table { width: 100%; border-collapse: collapse; font-size: .82rem; }
.users-table th, .users-table td { padding: .65rem .75rem; text-align: right; border-bottom: 1px solid var(--border); }
.users-table th { background: var(--surface-2); font-weight: 600; font-size: .75rem; color: var(--text-muted); }
.users-table tr:last-child td { border-bottom: 0; }
.badge-done { background: #dcfce7; color: #166534; padding: .15rem .45rem; border-radius: 6px; font-size: .72rem; }
.text-success { color: #16a34a; }

/* Timeline Gantt */
.timeline-page { max-width: 100%; }
.timeline-toolbar {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.page-title { font-size: 1.35rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; }
.timeline-filters { display: flex; gap: .5rem; align-items: center; }
.timeline-select {
    min-width: 200px; padding: .45rem .65rem !important; font-size: .85rem !important;
}
.btn-ghost {
    background: var(--surface) !important; color: var(--text) !important;
    border: 1px solid var(--border) !important; box-shadow: none !important;
}
.timeline-wrap {
    border: 1px solid var(--border); border-radius: var(--radius-xl);
    background: var(--surface); overflow: hidden; box-shadow: var(--shadow-card);
}
.timeline-header-row, .timeline-project-row, .timeline-job-row, .timeline-task-row {
    display: flex; border-bottom: 1px solid var(--border);
}
.timeline-label-col {
    flex: 0 0 min(280px, 38vw); padding: .5rem .75rem;
    border-left: 1px solid var(--border); background: var(--surface);
    min-width: 0;
}
.timeline-scale-col { flex: 1; min-width: 400px; position: relative; min-height: 2rem; }
.timeline-months { display: flex; height: 36px; border-bottom: 1px solid var(--border); }
.timeline-month {
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; font-weight: 700; color: var(--text-muted);
    border-left: 1px solid var(--border); text-transform: uppercase;
}
.timeline-project-label {
    font-weight: 700; font-size: .85rem; background: #ecfdf5; color: #065f46;
}
.timeline-job-label {
    font-weight: 600; font-size: .8rem; padding-right: 1.25rem;
    background: var(--surface-2);
}
.timeline-task-label { font-size: .78rem; padding-right: 1.75rem; }
.timeline-task-label a { color: inherit; text-decoration: none; font-weight: 500; }
.timeline-task-meta { display: block; font-size: .68rem; color: var(--text-muted); margin-top: .15rem; }
.timeline-grid-bg {
    background: repeating-linear-gradient(90deg, transparent, transparent calc(8.33% - 1px), var(--border) calc(8.33% - 1px), var(--border) 8.33%);
}
.timeline-bar-col { padding: .35rem 0; }
.timeline-bar {
    position: absolute; top: 50%; transform: translateY(-50%);
    height: 22px; border-radius: 6px; min-width: 4px;
    background: var(--primary); color: #fff; text-decoration: none;
    display: flex; align-items: center; overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,.12); z-index: 2;
}
.timeline-bar.status-done { background: #22c55e; }
.timeline-bar.status-in_progress { background: #f59e0b; }
.timeline-bar.status-todo { background: #6366f1; }
.timeline-bar.overdue { box-shadow: 0 0 0 2px #ef4444; }
.timeline-bar-text {
    font-size: .65rem; padding: 0 .4rem; white-space: nowrap;
    overflow: hidden; text-overflow: ellipsis;
}
.timeline-today-line {
    position: absolute; top: 0; bottom: 0; width: 2px;
    background: #ef4444; z-index: 3; pointer-events: none;
}
.timeline-body { overflow-x: auto; }

/* List progress bars (board) */
.list-progress-bars { margin-top: .35rem; font-size: .68rem; }
.list-progress-overall {
    height: 4px; background: var(--border); border-radius: 4px; overflow: hidden; flex: 1;
}
.list-progress-overall span {
    display: block; height: 100%; background: var(--primary); border-radius: 4px;
}
.list-progress-bars > .list-progress-overall { margin-bottom: .25rem; }
.list-progress-label { font-weight: 600; color: var(--text-muted); margin-right: .35rem; }
.list-progress-metric { display: flex; align-items: center; gap: .35rem; margin-top: .2rem; }
.list-progress-bar {
    flex: 1; height: 3px; background: var(--border); border-radius: 3px; overflow: hidden;
}
.list-progress-bar span {
    display: block; height: 100%; background: #22c55e; border-radius: 3px;
}

/* List column members */
.list-column-members {
    margin: .45rem 0 .55rem;
    padding: .45rem .5rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: .68rem;
}
.list-column-members-head {
    font-size: .62rem;
    color: var(--text-muted);
    margin-bottom: .35rem;
    font-weight: 600;
}
.list-column-members-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.list-column-member {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .35rem;
    padding: .15rem 0;
}
.list-column-member.has-access .list-column-member-name { color: var(--text); font-weight: 500; }
.list-column-member.no-access { opacity: .45; }
.list-column-member.no-access .list-column-member-name {
    color: var(--text-muted);
    text-decoration: line-through;
}
.list-column-member-role {
    font-size: .58rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* Members per-list permissions matrix */
.members-perm-table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.members-perm-table { width: 100%; border-collapse: collapse; font-size: .72rem; min-width: 720px; }
.members-perm-table th, .members-perm-table td {
    padding: .4rem .5rem; text-align: center; border: 1px solid var(--border);
}
.members-perm-table th:first-child, .members-perm-table td:first-child { text-align: right; font-weight: 600; }
.members-perm-table thead th { background: var(--surface-2); color: var(--text-muted); font-size: .68rem; }
.members-perm-table input[type="checkbox"] { width: 14px; height: 14px; cursor: pointer; }

/* Role default templates */
.role-templates-grid { display: flex; flex-direction: column; gap: 1rem; }
.role-template-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: .85rem 1rem;
    background: var(--surface);
}
.role-template-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: .65rem;
}
.role-template-flags {
    display: flex; flex-wrap: wrap; gap: 1rem;
    margin-bottom: .65rem;
}
.role-template-perms { min-width: 480px; }

/* Job / list weight progress */
.job-progress-main { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; }
.job-progress-bar-lg { height: 8px; flex: 1; background: var(--border); border-radius: 6px; overflow: hidden; }
.job-progress-bar-lg span { display: block; height: 100%; background: var(--primary); border-radius: 6px; }
.job-progress-bar-sm { height: 4px; flex: 1; background: var(--border); border-radius: 4px; overflow: hidden; }
.job-progress-bar-sm span { display: block; height: 100%; background: #6366f1; border-radius: 4px; }
.job-progress-metrics { display: flex; flex-direction: column; gap: .2rem; }
.job-progress-metric { display: flex; align-items: center; gap: .35rem; font-size: .68rem; }
.job-progress-metric small { min-width: 4.5rem; color: var(--text-muted); }
.list-progress-overall-lg { height: 6px; }

/* Task card weight bars */
.task-card-weight-bars { margin-top: .35rem; display: flex; flex-direction: column; gap: .15rem; }
.task-weight-metric { display: flex; align-items: center; gap: .25rem; font-size: .62rem; }
.task-weight-label { color: var(--text-muted); min-width: 2.5rem; }
.task-weight-bar { flex: 1; height: 3px; background: var(--border); border-radius: 2px; overflow: hidden; }
.task-weight-bar span { display: block; height: 100%; background: #22c55e; }

/* Checklist weight type */
.timeline-weight-type, .checklist-weight-select {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: .25rem .4rem; font-size: .78rem;
}
.checklist-weight-badge {
    font-size: .68rem; padding: .1rem .4rem; border-radius: 999px;
    background: var(--surface-2); color: var(--text-muted); margin-left: .35rem;
}

/* ========== MOBILE RESPONSIVE ========== */
@media (max-width: 991px) {
    .taskulu-job .job-nav-mobile,
    .job-layout .job-nav-mobile {
        border-bottom: 1px solid var(--border);
        padding-bottom: .65rem;
        margin-bottom: .35rem;
    }

    .taskulu-board {
        margin-left: -1rem;
        margin-right: -1rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .job-layout > .flex-1,
    .job-layout > .chat-panel,
    .job-layout > div:not(.job-sidebar-wrap) {
        width: 100%;
        min-width: 0;
    }

    .members-page-title { font-size: 1.1rem; }

    .task-modal {
        padding: 0;
        align-items: flex-end;
    }
    .task-modal-dialog {
        max-height: 94dvh;
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    .task-modal-body {
        padding: 2.25rem .85rem 1rem;
    }

    .timeline-add-form {
        flex-direction: column;
        align-items: stretch;
    }
    .checklist-add-item-form {
        flex-direction: column;
        align-items: stretch;
    }
    .checklist-add-weight { width: 100%; }

    .chat-panel {
        min-height: calc(100dvh - var(--header-h) - var(--tab-h) - var(--safe-bottom) - 9rem);
    }
}

@media (max-width: 767px) {
    .app-main {
        padding-left: .75rem;
        padding-right: .75rem;
    }

    .page-head h1,
    .page-title,
    .projects-topbar h1,
    .text-2xl {
        font-size: 1.15rem !important;
    }

    .page-head.flex {
        flex-wrap: wrap;
        gap: .5rem;
        align-items: flex-start;
    }

    .section-header {
        flex-wrap: wrap;
        gap: .35rem;
    }

    .grid-cols-2 {
        grid-template-columns: 1fr !important;
    }

    .settings-check-row {
        flex-direction: column;
        gap: .65rem !important;
        align-items: flex-start;
    }

    .job-layout .bg-white.rounded-xl.shadow,
    .job-layout .app-section,
    .task-detail-layout .app-section {
        padding: .85rem !important;
    }

    .member-card {
        flex-direction: column;
        gap: .75rem;
    }
    .member-card-actions {
        width: 100%;
    }
    .role-template-head {
        flex-wrap: wrap;
        gap: .5rem;
    }
    .role-template-save {
        width: 100%;
        justify-content: center;
    }

    .hour-row {
        flex-direction: column;
        align-items: stretch;
        padding: .75rem;
        background: var(--surface-2);
        border-radius: var(--radius-md);
        border: 1px solid var(--border);
    }
    .hour-row select,
    .hour-row input[type="time"] {
        width: 100%;
    }

    .chat-member-row {
        flex-direction: column;
        align-items: stretch !important;
    }
    .chat-member-row input[type="number"] {
        max-width: none !important;
        width: 100%;
    }

    .task-row-app {
        flex-wrap: wrap;
        align-items: flex-start;
    }
    .task-row-side {
        width: 100%;
        text-align: right;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .5rem;
    }

    .projects-topbar {
        flex-direction: column;
        align-items: stretch;
    }
    .projects-topbar-start {
        min-width: 0;
    }
    .projects-search {
        max-width: none;
        width: 100%;
    }

    .project-group-head {
        flex-direction: column;
        align-items: flex-start;
    }
    .project-jobs-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: .65rem;
    }
    .project-job-card {
        min-height: 100px;
        padding: .75rem .65rem .6rem;
    }

    .users-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
    }
    .users-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }
    .users-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .users-stats {
        flex-wrap: wrap;
        gap: .65rem;
    }

    .timeline-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .timeline-filters {
        flex-wrap: wrap;
    }
    .timeline-select {
        min-width: 0;
        flex: 1;
        width: 100%;
    }
    .timeline-label-col {
        flex: 0 0 132px;
        padding: .4rem .5rem;
        font-size: .72rem;
    }
    .timeline-scale-col {
        min-width: 240px;
    }
    .timeline-task-label {
        padding-right: .5rem;
    }
    .timeline-wrap::after {
        content: '← برای مشاهده نمودار بکشید';
        display: block;
        font-size: .68rem;
        color: var(--text-muted);
        text-align: center;
        padding: .45rem;
        background: var(--surface-2);
        border-top: 1px solid var(--border);
    }

    .cal-page-head {
        flex-direction: column;
        align-items: stretch;
        gap: .65rem;
    }
    .cal-nav {
        justify-content: space-between;
        width: 100%;
    }

    .notif-item {
        flex-wrap: wrap;
    }
    .notif-item .notif-link {
        margin-right: auto;
    }

    .taskulu-modal-sidebar {
        padding: .85rem;
    }

    .flex.justify-between.items-center {
        flex-wrap: wrap;
        gap: .5rem;
    }
}

/* ========== UI POLISH v2 ========== */

/* Scrollbars */
.taskulu-lists-row,
.job-cards-scroll,
.members-perm-table-wrap {
    scrollbar-width: thin;
    scrollbar-color: var(--primary-light) transparent;
}
.taskulu-lists-row::-webkit-scrollbar,
.job-cards-scroll::-webkit-scrollbar { height: 6px; }
.taskulu-lists-row::-webkit-scrollbar-thumb,
.job-cards-scroll::-webkit-scrollbar-thumb {
    background: var(--primary-light); border-radius: 999px;
}

/* Hover desktop */
@media (hover: hover) {
    .task-row-app:hover {
        transform: translateY(-1px);
        box-shadow: var(--shadow-card);
        border-color: var(--primary-soft);
    }
    .header-icon-btn:hover { background: var(--primary-soft); }
    .header-icon-btn:hover i { color: var(--primary); }
}

/* Page head */
.page-head { margin-bottom: 1.25rem; }
.page-head h1 { margin: .25rem 0 0; font-size: 1.35rem; font-weight: 700; }
.breadcrumb {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .8rem; color: var(--text-muted); margin-bottom: .25rem;
}
.breadcrumb:hover { color: var(--primary); }

/* Job progress */
.job-progress-wrap { display: flex; align-items: center; gap: .65rem; margin-top: .5rem; max-width: 280px; }
.job-progress-bar {
    flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden;
}
.job-progress-bar span {
    display: block; height: 100%;
    background: linear-gradient(90deg, var(--primary), #22c55e);
    border-radius: 999px; transition: width .4s ease;
}
.job-progress-label { font-size: .72rem; color: var(--text-muted); white-space: nowrap; }

/* List column scroll */
.taskulu-list-column .task-sortable {
    overflow-y: auto; flex: 1; min-height: 0;
    scrollbar-width: thin; scrollbar-color: var(--border) transparent;
}
.list-progress-bars {
    padding: .45rem .65rem .35rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

/* Timeline add bar — segmented */
.timeline-add-bar {
    display: grid; gap: .5rem;
    background: var(--surface-2); border-radius: var(--radius-md);
    padding: .65rem; border: 1px solid var(--border);
}
@media (min-width: 768px) {
    .timeline-add-bar { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
}
.timeline-add-form {
    display: flex; gap: .4rem; align-items: stretch;
    background: var(--surface); border-radius: 10px;
    padding: .4rem; border: 1px solid var(--border);
}
.timeline-add-input {
    flex: 1; min-width: 0; border: 0 !important; background: transparent !important;
    box-shadow: none !important; padding: .35rem .5rem !important; font-size: .82rem !important;
}
.timeline-add-input:focus { box-shadow: none !important; }
.timeline-add-form .btn-sm { flex-shrink: 0; padding: .35rem .65rem !important; }

/* Checklist items */
.checklist-block { margin-top: .35rem; }
.checklist-head {
    display: flex; align-items: center; gap: .4rem; flex-wrap: wrap;
    margin-bottom: .5rem; padding-bottom: .5rem;
    border-bottom: 1px dashed var(--border);
}
.checklist-weight-form {
    display: flex; gap: .35rem; align-items: center; flex-wrap: wrap;
    background: var(--surface-2); padding: .35rem .5rem;
    border-radius: 8px; font-size: .72rem;
}
.checklist-weight-form select,
.checklist-weight-form input[type="number"] {
    width: auto !important; padding: .2rem .4rem !important; font-size: .72rem !important;
}
.checklist-item {
    background: var(--surface-2); border: 1px solid var(--border);
    border-radius: 10px; padding: .55rem .65rem; margin-bottom: .4rem;
    transition: border-color .15s, background .15s;
}
.checklist-item.is-done {
    background: #f0fdf4; border-color: #bbf7d0;
}
.checklist-item-form {
    display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
}
.checklist-item-form label {
    display: flex; align-items: center; gap: .45rem; flex: 1; min-width: 120px;
    cursor: pointer; font-size: .85rem;
}
.checklist-item-form input[type="checkbox"] {
    width: 16px; height: 16px; accent-color: var(--primary); cursor: pointer;
}
.checklist-item-title.done { text-decoration: line-through; color: var(--text-muted); }
.checklist-item-note {
    flex: 1; min-width: 100px; font-size: .75rem !important;
    padding: .3rem .5rem !important;
}
.checklist-item-meta {
    font-size: .7rem; color: var(--primary); font-weight: 500;
    padding: .15rem .4rem; background: var(--primary-soft); border-radius: 6px;
}
.checklist-item-checker {
    font-size: .72rem; color: #15803d; margin: .35rem 1.6rem 0 0;
}
.checklist-item-readonly {
    padding: .45rem .65rem; font-size: .85rem; color: var(--text-muted);
    background: var(--surface-2); border-radius: 8px; margin-bottom: .35rem;
}
.checklist-add-item-form {
    display: flex; gap: .35rem; margin-top: .35rem;
}
.checklist-add-item-form input {
    flex: 1; font-size: .82rem !important; padding: .4rem .55rem !important;
}
.timeline-event-comment .timeline-event-body { border-right: 3px solid #22c55e; }
.timeline-event-file .timeline-event-body { border-right: 3px solid #f59e0b; }
.timeline-event-checklist .timeline-event-body { border-right: 3px solid var(--primary); }
.timeline-comment-body { font-size: .875rem; line-height: 1.6; margin: 0; }

/* Task comments (threads) */
.task-comments-section { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border, #e5e7eb); }
.comments-section-title { font-size: .95rem; font-weight: 700; margin: 0 0 .75rem; }
.comment-compose-form { display: flex; flex-direction: column; gap: .5rem; margin-bottom: 1rem; }
.comment-compose-actions { display: flex; gap: .5rem; justify-content: flex-end; }
.comment-reply-hint { font-size: .75rem; color: var(--primary); margin: 0; }
.comment-threads { display: flex; flex-direction: column; gap: .75rem; }
.comment-thread-item {
    background: #f9fafb; border-radius: 10px; padding: .65rem .75rem;
    border: 1px solid #e5e7eb;
}
.comment-thread-item.comment-pinned { border-color: #fbbf24; background: #fffbeb; }
.comment-thread-item.comment-reply { margin-right: 1.25rem; background: #fff; }
.comment-thread-head { display: flex; align-items: center; gap: .5rem; font-size: .8rem; margin-bottom: .35rem; flex-wrap: wrap; }
.comment-thread-head time { color: #9ca3af; margin-right: auto; }
.comment-pin-badge { color: #d97706; }
.comment-thread-body { font-size: .875rem; line-height: 1.6; }
.comment-mention { color: var(--primary); font-weight: 600; background: var(--primary-soft); padding: 0 .2rem; border-radius: 4px; }
.comment-thread-actions { display: flex; gap: .35rem; margin-top: .5rem; flex-wrap: wrap; }
.comment-replies { margin-top: .5rem; display: flex; flex-direction: column; gap: .5rem; }
.comment-mentions-me { border-color: var(--primary); }
.comment-mention-badge { color: #fff; background: var(--primary); border-radius: 50%; width: 1.25rem; height: 1.25rem; display: inline-flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 700; }
.comment-mention-badge-read { background: var(--surface-2); color: var(--text-muted); }
.comment-mention-unread { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.mention-jump-fab {
    position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%);
    z-index: 20; background: var(--primary); color: #fff;
    border: none; border-radius: 999px; padding: .65rem 1.25rem;
    font-size: 1.25rem; font-weight: 800; cursor: pointer;
    box-shadow: 0 4px 20px rgba(0,0,0,.25);
}
.task-mention-indicator {
    position: absolute; top: .35rem; left: .35rem; z-index: 2;
    background: var(--primary); color: #fff; font-weight: 800;
    width: 1.35rem; height: 1.35rem; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .72rem; box-shadow: 0 2px 6px rgba(0,0,0,.15);
}
.taskulu-card-head { position: relative; }
.task-member-tag { display: inline-block; font-size: .75rem; background: var(--primary-soft); color: var(--primary); padding: .15rem .45rem; border-radius: 6px; margin: .1rem; }
.task-members-display { display: flex; flex-wrap: wrap; gap: .25rem; }
.task-modal-dialog { position: relative; }
.letters-panel-title { margin: 0; font-size: .95rem; }
.letters-panel-hint { font-size: .75rem; margin: 0 0 .75rem; }
.letters-upload-details { margin-bottom: .75rem; border: 1px dashed var(--border); border-radius: 10px; padding: .5rem .75rem; }
.letters-upload-summary { cursor: pointer; font-weight: 600; font-size: .85rem; }
.letters-upload-form, .letters-attach-form { margin-top: .75rem; }
.letters-upload-form{display: none;}
.letter-card { border: 1px solid var(--border); border-radius: 10px; padding: .75rem; margin-bottom: .5rem; background: var(--surface); }
.letter-card-head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.letter-source-badge { font-size: .7rem; background: var(--surface-2); padding: .1rem .4rem; border-radius: 6px; }
.letter-card-body { font-size: .82rem; color: var(--text-muted); margin: .35rem 0; }
.letter-circulation-list { font-size: .78rem; margin: .5rem 0 0; padding-right: 1.25rem; }
.letter-circulation-note { margin: .15rem 0 0; color: var(--text-muted); }

/* Phase sortable in settings */
.phase-sortable-row { display: flex; align-items: center; gap: .5rem; }
.phase-drag-handle { cursor: grab; color: #9ca3af; padding: .25rem; }
.phase-sortable-ghost { opacity: .5; }

/* Job letters */
.letter-row { display: flex; align-items: center; gap: .75rem; padding: .75rem; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: .5rem; }
.letter-row-meta { font-size: .75rem; color: #6b7280; }

/* Shifts */
/* Shifts */
.shift-assign-row { display: flex; align-items: center; gap: .75rem; flex-direction: row-reverse; justify-content: flex-end; }
.shift-assign-name { min-width: 10rem; font-size: .9rem; font-weight: 600; }
.shift-assign-select { min-width: 14rem; max-width: 100%; }
.shift-manage-layout { display: grid; grid-template-columns: 220px 1fr; gap: 1rem; }
@media (max-width: 768px) { .shift-manage-layout { grid-template-columns: 1fr; } }
.shift-name-list { display: flex; flex-direction: column; gap: .35rem; border-left: 1px solid #e5e7eb; padding-left: .75rem; }
.shift-name-tab {
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
    width: 100%; text-align: right; padding: .5rem .65rem; border: 1px solid #e5e7eb;
    border-radius: 8px; background: #f9fafb; cursor: pointer; font-size: .85rem;
}
.shift-name-tab.active { background: var(--primary-soft); border-color: var(--primary); color: var(--primary); font-weight: 600; }
.shift-tab-icon { font-weight: 700; width: 1rem; text-align: center; }
.shift-new-row { margin-top: .5rem; padding-top: .5rem; border-top: 1px dashed #e5e7eb; }
.shift-panel { display: none; }
.shift-panel.active { display: block; }
.shift-slot-row {
    display: flex; flex-wrap: nowrap; align-items: center; gap: .4rem;
    margin-bottom: .4rem;
}
.shift-slot-row select { width: 7rem; flex-shrink: 0; }
.shift-slot-row input[type="time"] { width: 6.5rem; flex-shrink: 0; }
.shift-panel-head { display: flex; gap: .5rem; align-items: center; margin-bottom: .75rem; }
.shift-title-input { flex: 1; min-width: 0; }
.letters-inline-fields { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.letters-inline-fields input,
.letters-inline-fields select { flex: 1; min-width: 8rem; }
.automation-preview-card { font-size: .82rem; }
.automation-preview-notes { white-space: pre-wrap; color: var(--text-muted); }
.task-modal-toolbar { gap: .65rem; }
.task-modal-tool, .task-modal-close { min-width: 34px; }

/* Dashboard weekly report */
.weekly-report-list { display: flex; flex-direction: column; gap: .5rem; }
.weekly-report-item { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.weekly-report-summary {
    display: flex; align-items: center; justify-content: space-between; gap: .75rem;
    padding: .75rem 1rem; cursor: pointer; list-style: none;
}
.weekly-report-summary::-webkit-details-marker { display: none; }
.weekly-report-summary-main { display: flex; flex-direction: column; gap: .15rem; }
.weekly-report-badge { font-size: .75rem; color: #6b7280; white-space: nowrap; }
.weekly-report-body { padding: 0 1rem 1rem; border-top: 1px solid #f3f4f6; }
.weekly-report-form-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.weekly-report-activities { font-size: .82rem; max-height: 160px; overflow-y: auto; margin: .75rem 0; padding: 0; list-style: none; }
.weekly-report-activities li { padding: .3rem 0; border-bottom: 1px dashed #f3f4f6; }

.timeline-file-link {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .875rem; font-weight: 600; color: var(--primary);
    padding: .35rem .65rem; background: var(--primary-soft); border-radius: 8px;
}
.timeline-file-link:hover { background: #e0e7ff; }

/* Members page */
.members-page-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1rem; }
.member-card {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
    padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg);
    margin-bottom: .65rem; background: var(--surface);
    transition: box-shadow .15s, border-color .15s;
}
.member-card:hover { box-shadow: var(--shadow-card); border-color: var(--primary-soft); }
.member-card-info { flex: 1; min-width: 0; }
.member-card-name { font-weight: 700; font-size: .95rem; margin-bottom: .15rem; }
.member-card-role {
    display: inline-block; font-size: .7rem; font-weight: 600;
    padding: .15rem .5rem; border-radius: 999px; margin-bottom: .35rem;
}
.member-role-manager { background: #dbeafe; color: #1d4ed8; }
.member-role-observer { background: #fef3c7; color: #b45309; }
.member-role-member { background: var(--surface-2); color: var(--text-muted); }
.member-card-badges { display: flex; gap: .35rem; flex-wrap: wrap; }
.member-badge {
    font-size: .68rem; padding: .15rem .45rem; border-radius: 6px;
    background: var(--surface-2); color: var(--text-muted);
}
.member-badge.on { background: var(--primary-soft); color: var(--primary); }
.member-edit-details summary {
    cursor: pointer; font-size: .8rem; color: var(--primary); font-weight: 500;
    padding: .35rem 0; list-style: none;
}
.member-edit-details summary::-webkit-details-marker { display: none; }
.member-edit-panel {
    margin-top: .65rem; padding: .85rem;
    background: var(--surface-2); border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.member-perm-row {
    margin-bottom: .5rem; padding-bottom: .5rem;
    border-bottom: 1px dashed var(--border);
}
.member-perm-row:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.member-perm-row strong { display: block; font-size: .78rem; margin-bottom: .35rem; }
.member-perm-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.member-perm-chip {
    display: inline-flex; align-items: center; gap: .25rem;
    font-size: .68rem; padding: .2rem .45rem;
    background: var(--surface); border: 1px solid var(--border); border-radius: 6px;
    cursor: pointer; transition: border-color .15s;
}
.member-perm-chip:has(input:checked) {
    border-color: var(--primary); background: var(--primary-soft); color: var(--primary);
}
.member-perm-chip input { width: 12px; height: 12px; accent-color: var(--primary); }

/* Modal loading */
.task-modal-body.is-loading {
    display: flex; align-items: center; justify-content: center;
    min-height: 200px; color: var(--text-muted);
}
.modal-spinner {
    width: 36px; height: 36px; border: 3px solid var(--border);
    border-top-color: var(--primary); border-radius: 50%;
    animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
body.modal-open { overflow: hidden; }

/* Task modal polish */
.task-modal-dialog {
    box-shadow: 0 25px 60px rgba(15,23,42,.2);
    border: 1px solid var(--border);
}
.taskulu-modal-sidebar {
    background: var(--surface-2); border-radius: var(--radius-lg);
    padding: 1rem; border: 1px solid var(--border);
}
.taskulu-modal-form .taskulu-field-label + input,
.taskulu-modal-form .taskulu-field-label + select,
.taskulu-modal-form .taskulu-field-label + textarea { margin-bottom: .65rem; }

/* Empty state enhanced */
.empty-state {
    padding: 2.5rem 1.5rem;
    background: var(--surface-2); border-radius: var(--radius-lg);
    border: 1px dashed var(--border);
}
.empty-state p { margin: 0; font-size: .875rem; }

/* Stat cards hover */
@media (hover: hover) {
    .stat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-float); }
    .stat-card { transition: transform .2s, box-shadow .2s; }
}

/* Login polish */
.login-card input {
    padding: .65rem .85rem !important;
    border-radius: var(--radius-md) !important;
}
.login-card .form-group { margin-bottom: 1rem; }

/* Section count pill */
.section-count {
    min-width: 20px; text-align: center; font-weight: 700;
}

/* Sortable ghost */
.sortable-ghost { opacity: .45; background: var(--primary-soft) !important; }

#project-menu{min-width:250px;overflow:hidden;}
ul,li{
  list-style:none!important;
    padding:0;
}
button{
    border:1px solid #FFF;
    color: #fff!important;
    background: linear-gradient(135deg, var(--primary), #7c3aed);
    border-color: transparent;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(99,102,241,.3);
    margin-left:5px;
}
button:hover{
  color:#7c3aed!important;
  background-color:#7c3aed!important;
}
#editor-toolbar{
  padding:5px;
}
.upload-progress {
    display: grid;
    gap: .4rem;
    width: 100%;
    margin-top: .65rem;
    color: var(--text-muted);
    font-size: .82rem;
}
.upload-progress progress { width: 100%; height: .7rem; accent-color: var(--primary); }
.upload-progress-error { color: #b91c1c; }
.upload-progress-failed { accent-color: #dc2626; }