/* ترجمه‌ی ZherTheme (app/ui/styles/theme.py) و استایل منوی کناری (main_window.py) برای وب.
   واکنش‌گرا: دسکتاپ (بیش از ۱۰۲۴)، تبلت (۷۶۱ تا ۱۰۲۴)، گوشی (تا ۷۶۰). */
:root{
  --navy:#17243A; --navy-hover:#243752; --red:#D94352; --red-hover:#BC3442; --red-light:#FCEBED;
  --teal:#13A89E; --teal-light:#E4F7F4; --bg:#F3F6FA; --surface:#FFFFFF; --text:#202C3C;
  --muted:#738096; --border:#E2E8F0; --success:#168568; --warning:#B7791F;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:Tahoma,"Segoe UI",sans-serif;font-size:14px;direction:rtl;-webkit-text-size-adjust:100%}
a{color:var(--red);text-decoration:none}

/* چیدمان: منوی کناری راست (۲۸۴ پیکسل) + محتوا */
.shell{display:flex;min-height:100vh;position:relative}
.navtoggle{display:none}
.menu-btn{display:none}
.mtop{display:none}
.nav-backdrop{display:none}
.sidebar{width:284px;flex:0 0 284px;background:var(--navy);color:#DCE5F2;padding:18px 14px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;max-height:100vh;position:sticky;top:0}
.brand{color:#FFFFFF;font-size:23px;font-weight:bold;margin:4px 6px 0}
.brand-sub{color:#AAB8CC;font-size:12px;margin:0 6px 10px}
.nav-group summary{list-style:none;cursor:pointer;color:#FFFFFF;font-size:14px;font-weight:900;padding:8px 6px;border-bottom:1px solid #2C3F5C}
.nav-group summary::-webkit-details-marker{display:none}
.nav-link{display:flex;align-items:center;gap:10px;color:#DCE5F2;padding:11px 13px;border-radius:10px;border:1px solid transparent;margin-top:3px;min-height:44px}
.nav-link:hover{background:#263752;color:#FFFFFF}
.nav-link.active{background:#2A3F63;border-color:var(--red);color:#FFFFFF}
.nav-icon{font-size:16px;width:24px;text-align:center}
.nav-home{background:var(--red);color:#FFFFFF;font-weight:bold;border-radius:10px;padding:13px;display:block;margin-bottom:6px}
.nav-home:hover{background:var(--red-hover);color:#FFFFFF}

.content{flex:1;min-width:0;padding:22px 26px}
.page-title{font-size:21px;font-weight:700;color:var(--navy);margin:0 0 4px}
.page-sub{color:var(--muted);font-size:13px;margin:0 0 16px}

/* کارت‌ها و جدول‌ها */
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 18px;margin:10px 0}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px}
.stat-caption{color:var(--muted);font-size:13px}
.stat-value{color:var(--red);font-size:20px;font-weight:700;margin-top:4px;overflow-wrap:anywhere}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:10px;background:var(--surface)}
.row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid #EEF2F6}
.row:last-child{border:0}
.muted{color:var(--muted);font-size:13px}
.err{color:#B92E42}

/* فرم‌ها و دکمه‌ها */
input,select,textarea{background:#FFFFFF;color:var(--text);border:1px solid #D8E1EC;border-radius:9px;padding:9px 11px;font:inherit;width:100%;min-height:44px}
input:focus,select:focus,textarea:focus{border-color:var(--red);outline:none}
label{display:block;font-weight:700;color:#34445B;margin:8px 0 2px}
.btn{display:inline-block;background:#FFFFFF;color:#26364B;border:1px solid #D8E1EC;border-radius:9px;padding:10px 15px;font-weight:600;font:inherit;cursor:pointer;min-height:44px}
.btn:hover{background:var(--red-light);color:#B92E42;border-color:#E7A8AF}
.btn-primary{background:var(--red);color:#FFFFFF;border-color:var(--red)}
.btn-primary:hover{background:var(--red-hover);color:#FFFFFF}

/* تبلت: منوی باریک‌تر و فاصله‌ی کمتر */
@media (max-width:1024px){
  .sidebar{width:230px;flex-basis:230px;padding:14px 10px}
  .content{padding:18px}
  .nav-link{padding:10px 10px}
}

/* گوشی: منو به‌صورت کشوی روی صفحه، دکمه‌ی ☰ بالای صفحه */
@media (max-width:760px){
  .shell{flex-direction:column}
  html,body{overflow-x:hidden}
  .mtop{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:20;background:var(--navy);color:#FFFFFF;padding:8px 10px;min-height:48px}
  .mtitle{flex:1;font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}
  .mback{color:#FFFFFF;text-decoration:none;font-size:14px;font-weight:700;padding:8px 10px;border-radius:8px;background:rgba(255,255,255,.12);white-space:nowrap}
  .menu-btn{display:block;color:#FFFFFF;padding:8px 12px;font-weight:700;font-size:14px;cursor:pointer;border-radius:8px;background:var(--red);white-space:nowrap}
  .navtoggle:checked ~ .nav-backdrop{display:block;position:fixed;inset:0;background:rgba(10,18,32,.45);z-index:25}
  .content label,.content .fx-f{min-width:0;max-width:100%;white-space:normal;overflow-wrap:anywhere}
  .content table{display:block;max-width:100%;overflow-x:auto}
  .content img,.content canvas,.content input,.content select,.content textarea{max-width:100%;min-width:0!important}
  .sidebar{position:fixed;top:0;right:0;height:100vh;width:min(84vw,300px);max-height:none;z-index:30;transform:translateX(100%);transition:transform .2s ease;box-shadow:-8px 0 24px rgba(0,0,0,.25)}
  .navtoggle:checked ~ .sidebar{transform:translateX(0)}
  .content{padding:14px}
  .page-title{display:none}
  .stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .stat-value{font-size:17px}
  .card{padding:12px 14px}
  .btn{width:100%;text-align:center;margin:4px 0}
  .row{flex-wrap:wrap}
  body{font-size:15px}
}
@media (max-width:420px){
  .stat-grid{grid-template-columns:minmax(0,1fr)}
}
.brand-logo{display:block;background:#FFFFFF;border-radius:12px;padding:6px;margin:0 0 4px;text-align:center}
.brand-logo img{width:auto;height:70px;max-width:100%}
/* English: the whole page left-to-right (page styles written for RTL are overridden) */
html[dir=ltr] body,html[dir=ltr] .shell *,html[dir=ltr] .auth *{direction:ltr!important}
html[dir=ltr] th,html[dir=ltr] td,html[dir=ltr] label,html[dir=ltr] p,html[dir=ltr] h1,html[dir=ltr] h2,html[dir=ltr] h3{text-align:left}
html[dir=ltr] .auth h1,html[dir=ltr] .auth .sub,html[dir=ltr] .auth .alt{text-align:center}