/* =========================
   WebMeez Layout (RTL) — WebMiz Violet/Pink + Auto Dark
   (بدون تغییر کلاس‌ها)
   ========================= */

/* --- Theme Tokens: WebMiz Palette (Light) --- */
:root{
  /* Brand & Accents */
  --brand:       #7a3bdc;   /* Primary violet */
  --brand-700:   #5e2bd1;   /* Hover/Active */
  --brand-50:    #f3ecff;   /* Soft brand bg */
  --accent:      #ee2a7b;   /* Secondary / links / CTA */
  --grad:        linear-gradient(135deg,#ee2a7b 0%,#7a3bdc 100%);
  --ring:        rgba(122,59,220,.18);

  /* States */
  --success:     #1d9a6c;
  --warning:     #f59e0b;
  --danger:      #e11d48;
  --info:        #3b82f6;

  /* Neutrals */
  --bg:          #ffffff;
  --surface:     #ffffff;
  --muted:       #f6f7fb;
  --border:      #ececf4;
  --text:        #1f2544;
  --text-2:      #7b8197;

  /* Layout */
  --header-h:    60px;
  --sidebar-w:   260px;

  /* Motion & Shape */
  --radius:      12px;
  --radius-lg:   14px;
  --shadow-s:    0 2px 10px rgba(0,0,0,.05);
  --shadow-m:    0 4px 14px rgba(0,0,0,.08);
  --speed:       .18s;
}

/* --- Font (اختیاری) --- */
@font-face{
  font-family:'IRANSans';
  src:url('/assets/fonts/IRANSans.woff2') format('woff2'),
      url('/assets/fonts/IRANSans.woff') format('woff');
  font-weight:400; font-style:normal; font-display:swap;
}

html{direction:rtl}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:IRANSans, Tahoma, Arial, sans-serif;
  background:var(--bg);
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

/* ================= Header ================= */
.wmz-header{
  position:fixed; top:0; right:0; left:0;
  height:var(--header-h);
  background:var(--brand); color:#fff;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 16px; z-index:1000;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
  gap:12px;
}

/* ترتیب هدر (بدون تغییر کلاس) */
.wmz-header__brand{ display:flex; align-items:center; gap:10px; min-width:0; }
.wmz-brand__logo{
  height:calc(var(--header-h) - 14px);
  width:auto; min-height:40px; object-fit:contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.06));
}
.wmz-brand__name{ font-weight:800; line-height:1.1; color:#fff; white-space:nowrap; }

.wmz-header__actions{ display:flex; align-items:center; gap:8px; }
.wmz-header__btn--dashboard{ order:10; }
.wmz-header__btn--auth{ order:15; }
.wmz-notif{ order:20; }
.wmz-header__btn--menu{ order:30; }
.wmz-header__btn--menu{ display:inline-flex }
@media (min-width:1025px){ .wmz-header__btn--menu{ display:none !important; } }

@media (max-width:640px){
  .wmz-header__brand{ flex-direction:column; align-items:flex-start; gap:4px; }
  .wmz-brand__name{ display:none !important; }
}

.wmz-header__btn{
  background:rgba(255,255,255,.16); border:0; color:#fff;
  border-radius:10px; padding:8px 10px; cursor:pointer; text-decoration:none;
  transition:background var(--speed), transform var(--speed), box-shadow var(--speed);
}
.wmz-header__btn:hover{ background:rgba(255,255,255,.24) }
.wmz-header__btn:active{ transform:translateY(1px) }
.wmz-header__btn:focus-visible{ outline:2px solid #fff; outline-offset:2px }

/* ================= Sidebar (Desktop default) ================= */
.wmz-sidebar{
  position:fixed; top:var(--header-h); right:0; bottom:0;
  width:var(--sidebar-w);
  background:var(--surface);
  border-left:1px solid var(--border);
  box-shadow:-2px 0 10px rgba(0,0,0,.03);
  padding:16px; overflow-y:auto; z-index:900;
}
.wmz-sidebar__inner{display:block}
.wmz-sidebar__user{
  padding:10px 12px;border:1px solid #f1f4f7;border-radius:12px;background:#f9fbfd;margin-bottom:10px
}
.wmz-sidebar__user-name{font-weight:800;color:#1f2937}

/* Sidebar menu */
.wmz-menu{display:block; margin:0; padding:0; list-style:none;}
.wmz-menu__group{
  font-size:13px; font-weight:800; color:#4b5563;
  margin:14px 6px 8px; padding-inline-start:8px;
  border-inline-start:3px solid #e5e7eb;
}
.wmz-menu__item{
  display:block; background:var(--surface); border:1px solid #eef2f6;
  margin:6px 0; padding:10px 12px; border-radius:10px;
  color:#1f2937; text-decoration:none;
  transition:background var(--speed), border-color var(--speed), transform var(--speed), box-shadow var(--speed);
  font-weight:600; font-size:13px;
}
.wmz-menu__item:hover{ border-color:#cfe1ff; background:#f7fbff }
.wmz-menu__item.is-active{
  border-color:var(--brand); background:var(--brand-50); color:#3a2b66;
  box-shadow:0 3px 10px rgba(122,59,220,.12);
}

/* زیر‌دسته‌ها */
.wmz-menu .wmz-menu{ margin-top:6px; padding:0; }
.wmz-menu .wmz-menu .wmz-menu__item{
  font-size:12.5px; padding:8px 10px; margin:4px 0; border-radius:10px; border-color:#eef2f6;
}
.wmz-menu .wmz-menu .wmz-menu__item{ margin-inline-start:10px }

/* ناوبری قدیمی */
.wmz-nav{list-style:none;margin:0;padding:0}
.wmz-nav li{margin-bottom:6px}
.wmz-nav a{
  display:block;text-decoration:none;color:#2d3436;background:#f7f9fb;border:1px solid #eaeef2;border-radius:10px;padding:10px 12px;
  transition:background var(--speed), border-color var(--speed);
  font-size:13px;
}
.wmz-nav a:hover{background:#eef3f7; border-color:#dfe7ee}

/* ================= Main (internal pages) ================= */
.wmz-main{
  padding:calc(var(--header-h) + 20px) 16px 24px 16px;
  margin-right:calc(var(--sidebar-w) + 16px);
  min-width:0;
}
.wmz-main-full{ padding:calc(var(--header-h) + 20px) 16px 24px 16px }

/* ================= Cards / Sections ================= */
.wmz-section{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-m); padding:18px;
}
.wmz-section + .wmz-section{margin-top:16px}
.wmz-section__header{font-weight:800;margin-bottom:12px;color:var(--text)}

.wmz-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); padding:12px; box-shadow:var(--shadow-s);
  transition:transform var(--speed), box-shadow var(--speed);
}
.wmz-card:hover{ transform:translateY(-1px); box-shadow:var(--shadow-m) }
.wmz-card__title{font-weight:800;margin-bottom:6px;color:var(--text-2)}
.wmz-card__value{font-weight:900;font-size:18px;color:var(--text)}

/* ================= Tables ================= */
.wmz-table{
  width:100%; border-collapse:separate; border-spacing:0; font-size:14px;
  background:var(--surface); border-radius:12px; overflow:hidden;
  border:1px solid var(--border);
}
.wmz-table thead th{
  background:var(--muted); font-weight:800; color:var(--text); text-align:center;
  border-bottom:1px solid var(--border);
}
.wmz-table th,.wmz-table td{
  border-bottom:1px solid #f0f2f5; padding:10px; text-align:center; vertical-align:middle;
  white-space:nowrap;
}
.wmz-table tr:hover td{ background:#fafcff }

/* ================= Buttons ================= */
.wmz-btn{
  display:inline-block; border:0; border-radius:10px; padding:10px 14px; cursor:pointer;
  transition:filter var(--speed), transform var(--speed), box-shadow var(--speed), background var(--speed);
}
.wmz-btn:focus-visible{ outline:2px solid var(--ring); outline-offset:2px }
.wmz-btn:active{ transform:translateY(1px) }

.wmz-btn--primary{font-family: 'Vazirmatn', 'IRANSans'; background:var(--brand); color:#fff; box-shadow:0 6px 18px rgba(122,59,220,.22) }
.wmz-btn--primary:hover{ background:var(--brand-700); filter:brightness(.98) }

.wmz-btn--danger{ background:var(--danger); color:#fff; box-shadow:0 6px 18px rgba(225,29,72,.22) }
.wmz-btn--danger:hover{ filter:brightness(.98) }

.wmz-btn--sm{ padding:6px 10px; border-radius:8px; font-size:12px }

/* لینک‌ها */
.wmz-link{
  background:none; border:0; color:var(--accent); cursor:pointer;
  font-size:12px; text-decoration:none; transition:color var(--speed)
}
.wmz-link:hover{ text-decoration:underline }

/* ================= Footer ================= */
.wmz-footer{
  margin-top:24px; background:var(--surface); border-top:1px solid var(--border);
  color:#6c757d; padding:14px; text-align:center
}

/* ================= Notifications (Bell + Dropdown) ================= */
.wmz-notif{ position: relative; margin-inline-start: 6px; display:inline-block; }
.wmz-bell{
  position: relative; background: transparent; border: 0; cursor: pointer;
  display:flex; align-items:center; justify-content:center; gap:6px;
  height:36px; min-width:36px; border-radius:10px; padding:0 8px; color:#fff;
  transition:background var(--speed), transform var(--speed), box-shadow var(--speed);
}
.wmz-bell:hover{ background: rgba(255,255,255,.12) }
.wmz-bell:active{ transform:translateY(1px) }
.wmz-bell:focus-visible{ outline:2px solid #fff; outline-offset:2px }
.wmz-bell svg{ width:20px; height:20px; display:block; }

.wmz-badge{
  position: absolute; top: -6px; right: -4px;
  background: #e53935; color:#fff; border-radius: 999px;
  padding: 0 6px; font-size: 12px; line-height: 18px; min-width: 18px; text-align:center;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
}

/* Dropdown */
.wmz-dd{
  position: absolute;
  top: 44px;
  inset-inline-end: 0;
  width: 360px;
  max-width: 92vw;
  max-height: 440px;
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  z-index: 9999;
  margin-bottom: 14px;
}
.wmz-dd.is-open{
  display: flex; flex-direction: column; overflow: hidden;
  animation: wmzFadeIn .12s ease-out;
}
@keyframes wmzFadeIn{ from{opacity:0; transform: translateY(-4px)} to{opacity:1; transform: translateY(0)} }
.wmz-dd[data-align="left"]{ inset-inline-end: auto; left: 0; right: auto; }

.wmz-dd-head{
  flex: 0 0 auto;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; border-bottom:1px solid var(--border); font-weight:700; background:var(--muted);
}
.wmz-dd-list{ flex: 1 1 auto; overflow: auto; min-height: 0; padding: 4px 0 10px; }
.wmz-dd-item{ padding:10px 12px; border-bottom:1px solid #f2f2f2; cursor:pointer; transition: background var(--speed) }
.wmz-dd-item:hover{ background:#f7fafc }
.wmz-dd-item.unread{ background:var(--brand-50) }
.wmz-dd-item .ttl{ font-weight:800; font-size:14px; margin-bottom:4px; color:var(--text) }
.wmz-dd-item .bd{ font-size:13px; color:var(--text-2); line-height:1.6 }
.wmz-dd-item .tm{ font-size:12px; color:#94a3b8; margin-top:6px }
.wmz-dd-empty{ padding:18px; text-align:center; color:#94a3b8 }

.wmz-dd-foot{
  flex: 0 0 auto;
  padding:12px; text-align:center; background:var(--surface); border-top:1px solid var(--border);
}
.wmz-dd-allbtn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px;
  background:var(--brand); color:#fff; text-decoration:none;
  border:1px solid var(--brand); font-weight:800; font-size:12px;
  box-shadow:0 6px 18px rgba(122,59,220,.22); transition:.15s ease;
}
.wmz-dd-allbtn:hover{ background:var(--brand-700); filter:brightness(.98); transform:translateY(-1px) }
.wmz-dd-allbtn::before{
  content:""; width:14px; height:14px; display:inline-block;
  background-repeat:no-repeat; background-size:14px 14px;
  background-image:url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M21 7H7v2h14V7Zm0 4H7v2h14v-2Zm0 4H7v2h14v-2ZM3 7h2v2H3V7Zm0 4h2v2H3v-2Zm0 4h2v2H3v-2Z'/%3E%3C/svg%3E");
}

/* ================= Responsive ================= */
@media (max-width:1024px){
  .wmz-main{ margin-right:16px; padding-top:calc(var(--header-h) + 20px) }
  .wmz-sidebar{
    position:fixed; top:var(--header-h); right:0; bottom:0; width:calc(var(--sidebar-w) + 20px);
    z-index:1001; transform:translateX(100%); transition:transform .25s ease;
    border-left:1px solid var(--border); box-shadow:-2px 0 12px rgba(0,0,0,.08); padding:14px;
  }
  .wmz-sidebar.is-open{ transform:translateX(0) }

  .wmz-sidebar-overlay{
    position:fixed; top:var(--header-h); right:0; left:0; bottom:0;
    background:rgba(0,0,0,.35); z-index:1000; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .wmz-sidebar-overlay.is-show{ opacity:1; pointer-events:auto }
}
@media (max-width:640px){ .wmz-section{padding:14px} }
@media (max-width:480px){ .wmz-dd{ width:92vw; right:4vw; left:auto; } }

/* ================= Utility ================= */
.hide{display:none!important}
.text-center{text-align:center}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}
.mb-1{margin-bottom:4px}.mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}

/* ================= Dark Mode (auto) ================= */
@media (prefers-color-scheme: dark){
  :root{
    --bg:       #0b0d14;
    --surface:  #101224;
    --muted:    #121425;
    --border:   #1f2238;
    --text:     #e9ebf4;
    --text-2:   #aab1c3;

    --brand:     #8a5cff;   /* روشن‌تر برای دارک */
    --brand-700: #6b3fe0;
    --brand-50:  #1a1430;   /* زمینهٔ نرم برند در دارک */
    --accent:    #ff4fa0;

    --shadow-s:  0 2px 10px rgba(0,0,0,.35);
    --shadow-m:  0 10px 24px rgba(0,0,0,.45);
    --ring:      rgba(238,42,123,.28);
  }
  body{ color-scheme: dark; }

  /* هدر و لوگو */
  .wmz-brand__logo{ filter: brightness(1.1) contrast(1.05) drop-shadow(0 1px 0 rgba(0,0,0,.4)); }
  .wmz-brand__name{ color:#fff }

  /* سایدبار */
  .wmz-sidebar{
    background:var(--surface);
    border-left:1px solid var(--border);
    box-shadow:-2px 0 12px rgba(0,0,0,.35);
  }
  .wmz-sidebar__user{ background:#0f172a; border-color:#1f2937; color:var(--text-2); }

  .wmz-menu__group{ color:#cbd5e1; border-inline-start-color:#263449; }

  .wmz-menu__item{
    background:#0f1626; border-color:#263449; color:#e5e7eb;
  }
  .wmz-menu__item:hover{
    background:#132033; border-color:#34507a;
  }
  .wmz-menu__item.is-active{
    background:var(--brand-50); color:#e9ddff; border-color:var(--brand);
    box-shadow:0 3px 10px rgba(138,92,255,.18);
  }
  .wmz-menu .wmz-menu .wmz-menu__item{
    background:#0f1626; border-color:#263449; color:#dbe3f0;
  }

  /* Dropdown */
  .wmz-dd{
    background:#0f1626; border-color:#263449; box-shadow:0 16px 40px rgba(0,0,0,.45);
  }
  .wmz-dd-head{ background:#0f172a; border-bottom-color:#1f2937; color:#e5e7eb }
  .wmz-dd-item{ border-bottom-color:#1f2937 }
  .wmz-dd-item:hover{ background:#132033 }
  .wmz-dd-item.unread{ background:var(--brand-50); color:#e9ddff }
  .wmz-dd-empty{ color:#9aa8bd }
  .wmz-dd-foot{ background:#0f1626; border-top-color:#1f2937 }
}

/* Fix: .wmz-dd should fill viewport width with safe insets on mobile */
@media (max-width: 680px){
  .wmz-dd{
    position: fixed !important;
    top: calc(var(--header-h, 60px) + 8px) !important;
    inset-inline-start: 8px !important;
    inset-inline-end:   8px !important;
    left: auto !important; right: auto !important;
    width: auto !important; max-width: none !important;
    margin: 0 !important; box-sizing: border-box;
    z-index: 9999;
  }
  .wmz-dd.is-open{
    max-height: calc(80vh - (var(--header-h, 60px) + 24px)) !important;
  }
  .wmz-dd-list{ min-height: 0; overflow: auto; }
  .wmz-dd[data-align="left"]{
    inset-inline-start: 8px !important;
    inset-inline-end:   8px !important;
  }
}

/* Patch: Dark-mode readability for notifications dropdown (.wmz-dd) */
@media (prefers-color-scheme: dark){
  .wmz-dd, .wmz-dd-head, .wmz-dd-foot{ color:#e5e7eb; }
  .wmz-dd-item .ttl{ color:#f3f4f6 !important; font-weight:800; }
  .wmz-dd-item .bd{  color:#cbd5e1 !important; }
  .wmz-dd-item .tm{  color:#9fb2c9 !important; }

  .wmz-dd-item{ border-bottom-color:#1f2a44 !important; }
  .wmz-dd-item:hover{ background:#132033; }
  .wmz-dd-item.unread{
    background:var(--brand-50) !important;
    border-inline-start:3px solid var(--brand);
  }
  .wmz-dd-item.unread .ttl{ color:#fffaf2 !important; }
  .wmz-dd-item.unread .bd{  color:#eedeff !important; }

  .wmz-dd a, .wmz-dd .wmz-link{
    color:#8ab4ff !important; text-decoration:none;
  }
  .wmz-dd a:hover, .wmz-dd .wmz-link:hover{ text-decoration:underline; }
}