/* =============== Theme (warm + modern) =============== */
:root{
    --bg: #f2efea;
    --card: #fbfaf7;
    --text: #1f2937;
    --muted: #566070;
    --border: rgba(31,41,55,0.12);
    --shadow: 0 10px 28px rgba(17,24,39,0.10);
    --radius: 16px;

    --primary: #2b6cb0;
    --accent: #0f766e;

    --success-bg: #e9f7ef;
    --danger-bg:  #fdecec;
}

/* =============== Base =============== */
*{ box-sizing: border-box; }
body{
    font-family: "Vazirmatn", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px;
    direction: rtl;
    margin: 0;
    background: var(--bg);
    color: var(--text);
}
a{ color: inherit; text-decoration: none; }

.container{
    max-width: 1040px;
    margin: 0 auto;
    padding: 14px 16px;
}
main.container{
    padding-top: 18px;
    padding-bottom: 28px;
}

/* =============== Cards =============== */
.card{
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 18px;
    margin-bottom: 16px;
}
.card h3{
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 900;
    letter-spacing: -0.2px;
}
.card h4{
    margin: 14px 0 8px;
    font-size: 15px;
    font-weight: 900;
}
.card .card,
.card .card-inner{
    border-radius: 14px;
    box-shadow: none;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.55);
    margin-top: 10px;
    padding: 14px;
}

/* =============== Buttons =============== */
.btn{
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 8px 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    line-height: 1.1;
    white-space: nowrap;
    transition: transform .08s ease, box-shadow .12s ease, background .18s ease, border-color .18s ease;
    font-size: 13px;
}
.btn-primary{
    background: linear-gradient(135deg, var(--primary), var(--accent));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 10px 22px rgba(43,108,176,0.22);
}
.btn-primary:hover{ transform: translateY(-1px); }

.btn-secondary{
    background: rgba(31,41,55,0.08);
    color: var(--text);
}
.btn-secondary:hover{ background: rgba(31,41,55,0.12); }

.btn-ghost{
    background: transparent;
    color: var(--text);
}
.btn-ghost:hover{ background: rgba(31,41,55,0.06); }

/* =============== Forms / Grid8 =============== */


.grid{ display:grid; row-gap: 12px; column-gap: 14px; align-items: start; }
.grid-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 980px){
    .grid-3{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px){
    .grid-2, .grid-3{ grid-template-columns: 1fr; }
}

.field{ display:grid; gap: 6px; }
.field label{
    color: var(--text);
    font-size: 12.5px;
    font-weight: 900;
    opacity: 0.85;
}
.field small, .field .text-muted{
    display:block;
    color: var(--muted);
    line-height: 1.45;
    margin-top: 6px;
}

/* Inputs
/* فقط در نوبت‌دهی (booking) ورودی‌ها تمام‌عرض و هم‌قد شوند */
.booking-ui input,
.booking-ui textarea,
.booking-ui select{
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(31,41,55,0.16);
    border-radius: 12px;
    background: rgba(255,255,255,0.78);
    font-size: 13.5px;
    color: #222;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    min-height: 44px;              /* ✅ همه هم‌قد */
}
/* ✅ checkbox/radio نباید از قانون min-height ورودی‌ها تبعیت کنند */
input[type="checkbox"],
input[type="radio"]{
    width: 16px;
    height: 16px;
    min-height: unset;
    padding: 0;
    border-radius: 4px;
    vertical-align: middle;
}

textarea{ min-height: 86px; resize: vertical; }

input:focus, select:focus, textarea:focus{
    border-color: rgba(43,108,176,0.55);
    box-shadow: 0 0 0 2px rgba(43,108,176,0.12);
    background: #fff;
}

/* ✅ Select (RTL-safe) : ثابت + مرتب + بدون به‌هم‌ریختگی متن */
select{
    /* مهم: line-height رو دیگه 44 نذار، باعث بهم ریختن متن میشه */
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    /* چون در RTL فلش سمت چپ میاد */
    padding-left: 42px;     /* جا برای فلش */
    background-image:
    linear-gradient(45deg, transparent 50%, rgba(31,41,55,0.55) 50%),
    linear-gradient(135deg, rgba(31,41,55,0.55) 50%, transparent 50%);
    background-position: left 16px center, left 11px center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* گزینه‌ها: متن سالم */
select option{
    line-height: 1.35;
    white-space: nowrap;
}

/* File input */
input[type="file"]{
    background: rgba(255,255,255,0.85);
    padding: 9px 12px;
}

/* =============== Tables =============== */
table{ width:100%; border-collapse: collapse; font-size: 13px; }
th, td{ border: 1px solid rgba(31,41,55,0.10); padding: 8px; text-align: right; }
th{ background: rgba(31,41,55,0.05); font-weight: 900; color: #374151; }
tbody tr:nth-child(odd){ background: rgba(255,255,255,0.42); }
tbody tr:hover{ background: rgba(43,108,176,0.08); }

@media (max-width: 760px){
    .table{ display:block; overflow-x:auto; white-space:nowrap; }
}

/* =============== Alerts =============== */
.alert{
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    border: 1px solid transparent;
}
.alert-success{
    background: var(--success-bg);
    border-color: rgba(16,185,129,0.25);
    color: #166534;
}
.alert-error{
    background: var(--danger-bg);
    border-color: rgba(239,68,68,0.25);
    color: #991b1b;
}
.alert-warn{
background: rgba(245,158,11,0.14);
border-color: rgba(245,158,11,0.28);
color: #92400e;
}


/* =============== Header / Nav =============== */

.app-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: linear-gradient(135deg, #0f2f3a, #123a4a, #0f3a35);
  border-bottom: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 26px rgba(2,6,23,0.18);
}

.header-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 8px 0 6px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 950;
}
.brand-mark{
  width: 10px; height: 10px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--accent));
  display:inline-block;
}
.brand-title{ font-size: 15px; }

.icon-btn{
  display:none;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 7px 10px;
  cursor:pointer;
  color: rgba(255,255,255,0.92);
}

/* ===== Shared header nav (app + booking) ===== */
.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding: 6px 0 12px;
}
.nav-left,
.nav-right{
  display:flex;
  align-items:center;
  gap: 8px;
  flex-wrap: wrap;
}

/* لینک‌های ردیف اول (قرص روی هدر) */
.nav-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  font-size: 13px;
}
.nav-link:hover{
  background: rgba(255,255,255,0.16);
  border-color: rgba(255,255,255,0.18);
}

/* user chip */
.user-chip{
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.92);
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12.5px;
}

/* ========== dropdownهای کلاسیک داخل صفحه (نه منوی بالا) ========== */
.dropdown{
  position: relative;
}
.dropdown-menu{
  position:absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 230px;
  background: rgba(255,255,255,0.96);
  border-radius: 14px;
  border: 1px solid rgba(31,41,55,0.12);
  box-shadow: var(--shadow);
  padding: 8px;
  display: none;
  z-index: 1000;
}
.dropdown.open > .dropdown-menu{
  display:block;
}
.dropdown-item{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  color: #111827;
  font-weight: 500;
  font-size: 13px;
}
.dropdown-item:hover{
  background: rgba(15,118,110,0.10);
}
.dropdown-sep{
  height: 1px;
  background: rgba(31,41,55,0.10);
  margin: 6px 4px;
}

/* ========== منوی بالا به سبک booking: nav-group + nav-sub ========== */

/* ظرف هر زیرمنو (گروه) */
.app-header .nav-group{
  position: relative;
}

/* خود لینک toggle – چون کلاس nav-link هم دارد، از همان استایل استفاده می‌کند */
.app-header .nav-group-toggle{
  cursor: pointer;
}

/* ظرف زیرمنو: همیشه کادر سفید شناور روی منو (desktop + mobile) */
.app-header .nav-sub{
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: #ffffff;
  color: #0f172a;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,0.12);
  padding: 6px 4px;
  box-shadow: 0 12px 30px rgba(15,23,42,0.18);
  display: none;
  z-index: 1000;
}

/* وقتی nav-group باز است */
.app-header .nav-group.open > .nav-sub{
  display: block;
}

/* لینک‌های داخل زیرمنو: ستون، full-width، متن تیره */
.app-header .nav-sub .nav-link{
  display: block;
  width: 100%;
  text-align: right;
  margin: 0;
  padding: 7px 10px;
  border-radius: 10px;
  border: 0;
  background: transparent;
  font-weight: 500;
  font-size: 13px;
  color: #0f172a !important;
}
.app-header .nav-sub .nav-link *{
  color: inherit !important;
}
.app-header .nav-sub .nav-link:hover{
  background: rgba(15,23,42,0.06);
}

/* Divider فقط nav-sub-divider */
.app-header .nav-sub-divider{
  height: 1px;
  margin: 6px 4px;
  background: rgba(15,23,42,0.12);
}

/* ========== فرم‌ها در booking (100%) ========== */
/* form .btn:not(.dropdown-toggle),
.card form .btn:not(.dropdown-toggle),
.filters form .btn:not(.dropdown-toggle){
  width: 100%;
} */

/* ========== ریسپانسیو nav بالا (هر دو app + booking) ========== */
@media (max-width: 760px){
  .icon-btn{ display:inline-flex; }

  .nav{
    display:none;
  }
  .nav.open{
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap: 10px;
    padding-bottom: 14px;
  }

  .nav-left,
  .nav-right{
    flex-direction:column;
    align-items:stretch;
    width:100%;
  }

  /* هر nav-group یک سطر کامل بگیرد */
  .app-header .nav-group{
    width:100%;
  }

  /* دکمه‌های ردیف اول (خانه، تقویم، نوبت‌ها، CRM، مدیریت، ...) تمام‌عرض شوند */
  .app-header .nav > .nav-left > .nav-link,
  .app-header .nav > .nav-right > .nav-link,
  .app-header .nav-group .nav-group-toggle{
    display:flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
  }

  /* زیرمنو همچنان شناور می‌ماند (overlay)، فقط کمی padding داخلی بیشتر برای خوانایی */
  .app-header .nav-sub .nav-link{
    padding-inline: 12px;
  }
}
/* Frontdesk row colors */
#frontdesk-table tbody tr.row-has-sessions{ background-color: var(--success-bg) !important; }
#frontdesk-table tbody tr.row-no-sessions{  background-color: var(--danger-bg) !important; }

/* Toast */
#fd-toast{
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    max-width: 420px;
    margin: 0 auto;
    background: rgba(255,255,255,0.92);
    border-radius: 16px;
    box-shadow: 0 16px 34px rgba(0,0,0,0.16);
    padding: 12px 14px 12px 10px;
    z-index: 9999;
    display: none;
    font-size: 14px;
    border-right: 6px solid var(--primary);
}
/* ===== Header text contrast fix (brand + logout + links) ===== */

.app-header .user-chip,
/* فقط لینک‌های خود نوار (نه dropdown-menu) */
.app-header .nav > .nav-left > a,
.app-header .nav > .nav-right > a,
.app-header .nav-link,
.app-header .brand,
.app-header .brand-title,
.app-header .user-chip{
    color: rgba(255,255,255,0.94) !important;
}


/* خروج/ورود واضح‌تر از بقیه */
.app-header a[href="/logout"],
.app-header a[href="/login"]{
    background: rgba(255,255,255,0.16) !important;
    border: 1px solid rgba(255,255,255,0.24) !important;
    padding: 7px 12px !important;
    border-radius: 999px !important;
    font-weight: 900 !important;
}

.app-header a[href="/logout"]:hover,
.app-header a[href="/login"]:hover{
    background: rgba(255,255,255,0.22) !important;
    border-color: rgba(255,255,255,0.30) !important;
}
.app-header .user-chip{
    background: rgba(255,255,255,0.14) !important;
}

/* فرم عملیات داخل جدول: همیشه افقی و جمع‌وجور */
form.op-form{
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
    align-items:center !important;
    flex-wrap:wrap !important;
}

form.op-form input[type="text"]{
    width: 160px !important;
    min-height: 34px !important;
    padding: 7px 9px !important;
    font-size: 12.5px !important;
}

form.op-form .btn{
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    line-height: 36px !important;
}
/* ===== Accounting filters: keep buttons compact even on small screens ===== */
.acc-filter-actions{
    display:flex;
    gap:8px;
    align-items:center;
    justify-content:flex-start;
    flex-wrap:wrap;
}

/* override the mobile rule ".btn{width:100%}" but فقط در فرم حسابداری */
.acc-filter-actions .btn{
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 14px !important;
    font-size: 12.5px !important;
    border-radius: 999px !important;
    line-height: 36px !important;   /* هم‌قد و وسط‌چین */
    box-sizing: border-box !important;
}
/* لینک <a> هم مثل button */
.acc-filter-actions a.btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
}

/* کمی جمع‌وجورترش کن */
.acc-filter-actions .btn.btn-primary{
    min-width: 110px;
}
/* filter bar: labels in this bar shouldn't add height */
.filter-bar .field label{
    margin:1px !important;
    height:0 !important;
    padding:0 !important;
    line-height:0 !important;
}


/* ===== Bottom Navigation (Telegram-like) ===== */
.bottom-nav{
  display: none; 
}
@media (max-width: 768px){
  .bottom-nav{
    position: fixed;
    left: 10px; right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    backdrop-filter: blur(10px);
    padding: 8px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    z-index: 3000;
  }

  .bottom-nav .bn-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    text-decoration: none;
    color: #222;
    padding: 10px 6px;
    border-radius: 14px;
    background: rgba(0,0,0,.04);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
  }

  .bottom-nav .bn-ico{
    font-size: 18px;
    line-height: 1;
  }
  .bottom-nav .bn-txt{
    font-size: 11px;
    opacity: .9;
  }

  /* دکمه اصلی وسط */
  .bottom-nav .bn-item.bn-primary{
    background: rgba(0,0,0,.04);
    color: #222;
  }

  /* جا برای منو */
  main.container{ padding-bottom: 110px; }
}

@media (max-width:768px){
  /* فقط لینک‌های ردیف اول منو، نه زیرمنو */
  header .nav > .nav-left > .nav-link,
  header .nav > .nav-right > .nav-link{
    width: auto !important;
    display: inline-flex !important;
  }

  /* اگر جایی از nav کلاس navbar استفاده شده */
  nav.navbar .btn,
  nav.navbar .nav-link{
    width: auto !important;
    display: inline-flex !important;
  }
}

/* nav group toggle دقیقا مثل nav-link */
.nav-group .nav-group-toggle,
.nav-group .dropdown-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.92);
  font-weight: 900;
  font-size: 13px;
}
/* ===== Dropdown nav items same size as others ===== */
.nav-group .nav-group-toggle,
.nav-group button,
.nav-group a{
  font-size: 13px !important;
  font-weight: 900 !important;
  padding: 7px 10px !important;
  border-radius: 999px !important;
}



/* ===== Fix APP mobile drawer/menu stretching ===== */
@media (max-width: 768px){
  /* هر چیزی که داخل منوی کناری/بالا هست، تمام‌عرض نشه */
  .sidebar .btn, .sidebar a,
  .mobile-menu .btn, .mobile-menu a,
  .nav-drawer .btn, .nav-drawer a,
  header .btn, header a,
  nav .btn, nav a{
    width: auto !important;
    max-width: 100% !important;
  }

  /* اگر منوها به شکل لیست قرص بزرگ دراومدن، ارتفاع و padding کم بشه */
  .sidebar a, .mobile-menu a, .nav-drawer a{
    padding: 10px 12px !important;
    font-size: 14px !important;
    border-radius: 14px !important;
  }
}
/* THEME_MARKER_OK */

.app-header .nav-group-toggle{
  font-size: 13px;
  font-weight: 900;
  padding: 7px 10px;
  border-radius: 999px;
}