/*
  MR TASK • Mobile-first minimal UI pass
  2026-10-21 | Presentation-only layer over the existing compiled V4 React app.
  No API/auth/business logic touched. Keep after the generated Tailwind stylesheet.
*/
:root {
  --mr-bg: #f7f8fa;
  --mr-surface: #ffffff;
  --mr-muted: #687386;
  --mr-ink: #20283a;
  --mr-line: #e7eaf0;
  --mr-accent: #4355b9;
  --mr-accent-soft: #eff2ff;
  --mr-radius: 15px;
  --mr-shadow: 0 2px 14px rgba(20, 30, 60, .035);
}
html { -webkit-text-size-adjust: 100%; }
html, body, #root { width: 100%; max-width: 100%; }
body {
  background: var(--mr-bg) !important;
  color: var(--mr-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.font-vazir, [dir="rtl"] { font-family: "Vazirmatn", Tahoma, sans-serif !important; }
button, input, select, textarea { font-family: inherit; }
button, [role="button"] { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid rgba(67,85,185,.34) !important;
  outline-offset: 2px;
}
/* Keep content legible and usable at narrow widths. */
main { min-width: 0; overscroll-behavior-y: contain; }
main, main > div { max-width: 100%; }
main [class*="overflow-x-auto"] {
  max-width: 100%;
  scrollbar-width: thin;
  scrollbar-color: #cdd4e2 transparent;
  -webkit-overflow-scrolling: touch;
}
main [class*="overflow-x-auto"]::-webkit-scrollbar { height: 5px; }
main [class*="overflow-x-auto"]::-webkit-scrollbar-thumb { background: #cdd4e2; border-radius: 10px; }
/* Less visual noise in shared chrome */
#root aside[class*="md:flex"] {
  background: var(--mr-surface) !important;
  border-color: var(--mr-line) !important;
  box-shadow: 1px 0 12px rgba(22,34,57,.015);
}
#root aside button { letter-spacing: -.005em; }
#root aside [class*="border-b"] { border-color: var(--mr-line) !important; }
#root main[class*="bg-"] { background-color: var(--mr-bg) !important; }
#root header[class*="bg-white"] { border-color: var(--mr-line) !important; }
/* Card and table surfaces */
main [class*="bg-white"][class*="rounded-2xl"],
main [class*="bg-white"][class*="rounded-3xl"] {
  border-color: var(--mr-line);
  box-shadow: var(--mr-shadow);
}
main [class*="shadow-xs"], main [class*="shadow-sm"] { box-shadow: var(--mr-shadow); }
main table { border-collapse: separate; border-spacing: 0; }
main table thead { background: #f8f9fc; }
main table th { color: #657184; font-weight: 650; }
main table td, main table th { border-color: #eef0f4; }
main table tbody tr { transition: background-color .14s ease; }
main table tbody tr:hover { background-color: #f8faff; }
/* Compact welcome banner: replace large saturated gradient with a calm surface */
main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] {
  background: linear-gradient(135deg, #ffffff 0%, #f1f4ff 100%) !important;
  border: 1px solid #e3e8fb !important;
  box-shadow: var(--mr-shadow) !important;
  color: #283354 !important;
  border-radius: 20px !important;
}
main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] h1,
main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] p,
main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] span,
main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] [class*="text-white"] {
  color: #303b5e !important;
}
/* Neutralize heavy gradients on important CTA buttons without weakening feedback colors. */
button[class*="bg-gradient-to-r"][class*="from-blue-600"] {
  background: #4355b9 !important;
  border: 1px solid #4355b9 !important;
  box-shadow: 0 2px 8px rgba(67,85,185,.12) !important;
  color: white !important;
}
button[class*="bg-gradient-to-r"][class*="from-blue-600"]:hover { background: #34449f !important; }
/* Input legibility and comfortable hit areas in forms. */
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  min-width: 0;
  accent-color: var(--mr-accent);
}
input::placeholder, textarea::placeholder { opacity: .7; }
button:disabled { cursor: not-allowed; }
/* Native mobile nav exists in the app. Make it calmer and thumb-friendly. */
nav[aria-label="Mobile Navigation"] {
  background: rgba(255,255,255,.97) !important;
  border-top: 1px solid var(--mr-line) !important;
  box-shadow: 0 -5px 20px rgba(20,30,60,.035) !important;
  padding-bottom: max(8px, env(safe-area-inset-bottom, 8px)) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
nav[aria-label="Mobile Navigation"] button { min-height: 48px; border-radius: 13px; }
nav[aria-label="Mobile Navigation"] button:active { background: #f0f3ff; }
/* Mobile first: controls, spacing, overlays and scrollable data rather than clipped data. */
@media (max-width: 767px) {
  :root { --mr-radius: 13px; }
  html { font-size: 15px; }
  #root { min-width: 0; }
  #root > [class*="min-h-screen"] { min-width: 0; max-width: 100vw; }
  #root > [class*="min-h-screen"] > [class*="flex-1"] { min-width: 0; }
  #root main { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)); }
  #root main > div { min-width: 0; }
  #root main [class*="px-6"] { padding-left: 14px; padding-right: 14px; }
  #root main [class*="px-8"] { padding-left: 14px; padding-right: 14px; }
  #root main [class*="p-6"] { padding: 14px; }
  #root main [class*="p-8"] { padding: 16px; }
  #root main [class*="gap-6"] { gap: 14px; }
  #root main [class*="gap-8"] { gap: 16px; }
  #root main [class*="rounded-3xl"] { border-radius: 17px; }
  #root main [class*="rounded-2xl"] { border-radius: 14px; }
  #root main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] {
    padding: 15px !important;
    margin-bottom: 12px !important;
  }
  #root main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] h1 {
    font-size: 1.04rem !important;
    line-height: 1.8 !important;
    font-weight: 750 !important;
  }
  #root main table { font-size: .82rem; }
  #root main table th, #root main table td { padding-block: 10px; }
  #root main [class*="overflow-x-auto"] { position: relative; }
  #root main [class*="grid-cols-1"] { min-width: 0; }
  #root button, #root select { touch-action: manipulation; }
  #root input:not([type="checkbox"]):not([type="radio"]),
  #root select, #root textarea { font-size: 16px; } /* Prevent mobile Safari zoom-on-focus */
  #root [role="dialog"], #root [aria-modal="true"] {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    overflow-y: auto;
  }
  #root [class*="fixed"][class*="inset-0"] > [class*="bg-white"][class*="rounded"] {
    max-width: min(96vw, 600px);
    max-height: min(94dvh, 850px);
    overflow-y: auto;
  }
  #root nav[aria-label="Mobile Navigation"] { padding-inline: 8px; }
  #root nav[aria-label="Mobile Navigation"] button { padding-inline: 2px; }
  #root nav[aria-label="Mobile Navigation"] span[class*="text-"] { line-height: 1.35; }
  #root .font-vazir { line-height: 1.65; }
}
@media (max-width: 380px) {
  #root main [class*="px-4"] { padding-left: 12px; padding-right: 12px; }
  #root nav[aria-label="Mobile Navigation"] { padding-inline: 4px; }
  #root nav[aria-label="Mobile Navigation"] button { min-height: 45px; }
}
@media (min-width: 768px) {
  #root main { background: var(--mr-bg) !important; }
  #root main [class*="rounded-2xl"] { border-radius: 15px; }
  #root main [class*="rounded-3xl"] { border-radius: 19px; }
  #root aside[class*="md:flex"] { transition: width .18s ease; }
}
/* Respect the application's explicit dark-mode class, if present. */
html.dark, .dark {
  --mr-bg: #101621;
  --mr-surface: #17202e;
  --mr-muted: #a5afbf;
  --mr-ink: #e7ebf3;
  --mr-line: #2a3444;
  --mr-shadow: 0 2px 14px rgba(0,0,0,.12);
}
.dark main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] {
  background: linear-gradient(135deg, #1b2638, #1d2844) !important;
  border-color: #34405b !important;
  color: #eef2ff !important;
}
.dark main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] h1,
.dark main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] p,
.dark main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] span,
.dark main [class*="bg-gradient-to-br"][class*="from-blue-600"][class*="via-indigo-600"] [class*="text-white"] { color: #eef2ff !important; }
.dark nav[aria-label="Mobile Navigation"] { background: rgba(23,32,46,.97) !important; }
.dark main table thead { background: #1b2533; }
.dark main table th { color: #b1bbce; }
.dark main table td, .dark main table th { border-color: #273345; }
.dark main table tbody tr:hover { background-color: #1b2534; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}