/* css/style.css — REPLACE / PASTE this file into css/style.css */

/* Variables */
:root{
    --primary: #2563eb; /* main blue — used for finalConfirmBtn and primary actions */
    --accent: #7c3aed;
    --bg: #0f172a;      /* dark text / backgrounds as needed */
    --text-dark: #0f172a;
    --muted: #64748b;
    --white: #ffffff;
    --card-shadow: 0 8px 30px rgba(15,23,42,0.08);
    --glass: rgba(255,255,255,0.7);
    --radius-lg: 14px;
    --radius-md: 10px;
    --radius-sm: 8px;
    --success: #16a34a;
    --danger: #ef4444;
    --max-width: 1140px;
  }
  
  /* Reset & base */
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    font-family: "Tahoma", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, #f6f8fb 0%, #eef2ff 100%);
    color: var(--text-dark);
    direction: rtl;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    line-height:1.45;
    -webkit-text-size-adjust:100%;
  }
  
  /* Container */
  .container{
    width: calc(100% - 40px);
    max-width: var(--max-width);
    margin: 18px auto;
  }

  /* Header */
  .main-header{
    background: linear-gradient(90deg, rgba(37,99,235,0.95), rgba(99,102,241,0.95));
    color: white;
    padding: 14px 20px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position: sticky;
    top:0;
    z-index:200;
    box-shadow: 0 6px 20px rgba(15,23,42,0.12);
  }
  .logo{font-weight:700; font-size:1.15rem; letter-spacing:0.2px}
  .menu-toggle{font-size:1.3rem; color: rgba(255,255,255,0.95); cursor:pointer}
  
  /* Dashboard (side panel) */
  .dashboard{
    position: fixed;
    right: -360px;
    top: 0;
    width: 360px;
    height: 100%;
    background: linear-gradient(180deg,#fff 0%, #fbfdff 100%);
    z-index: 1200;
    transition: right .28s cubic-bezier(.2,.9,.2,1);
    box-shadow: -20px 40px 80px rgba(15,23,42,0.12);
    padding: 18px;
  }
  .dashboard.active{ right: 0; }
  .dashboard-header{
    background: linear-gradient(90deg,var(--primary), var(--accent));
    color: white;
    padding: 22px;
    border-radius: 10px;
    margin-bottom: 14px;
  }
  .dashboard-nav{ display:flex; flex-direction:column; gap:8px; }
  .dashboard-nav button{
    text-align: right;
    padding: 10px 12px;
    border-radius: 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--text-dark);
    font-weight:600;
  }
  .dashboard-nav button:hover{ background: rgba(37,99,235,0.06); color: var(--primary); }
  
  /* Dashboard overlay */
  .dashboard-overlay{
    position: fixed; inset:0; background: rgba(2,6,23,0.45); display:none; z-index:1100;
  }
  
  /* Cards and paper */
  .card, .salon-card, .salon-info, .salon-card .salon-info, .salon-card img, .salon-card *{
    color: var(--text-dark);
  }
  .salon-card{
    background: var(--white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--card-shadow);
    transition: transform .22s ease, box-shadow .22s ease;
    cursor: pointer;
    display:flex;
    flex-direction:column;
  }
  .salon-card:hover{ transform: translateY(-6px); box-shadow: 0 18px 45px rgba(15,23,42,0.12); }
  
  /* Image */
  .salon-card img{
    width:100%; height:200px; object-fit:cover; display:block;
  }
  
  /* Salon info */
  .salon-info{ padding: 14px 16px; display:block }
  .salon-info h3{ margin-bottom:6px; font-size:1.05rem; color:var(--text-dark) }
  .salon-info p{ margin:0; color:var(--muted); font-size:0.9rem }
  .price-tag{ margin-top:10px; display:inline-block; font-weight:700; color:var(--primary); }
  
  /* Grid */
  .salon-grid{
    display:grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 18px 0;
  }
  
  /* Buttons */
  .btn-primary{
    background: var(--primary);
    color: white;
    border: none;
    padding: 10px 14px;
    border-radius: 10px;
    cursor: pointer;
    font-weight:700;
    box-shadow: 0 8px 20px rgba(37,99,235,0.18);
    transition: transform .14s ease, box-shadow .14s ease;
  }
  .btn-primary:hover{ transform: translateY(-3px); box-shadow: 0 14px 35px rgba(37,99,235,0.18); }
  
  /* Ensure final confirm button is the same blue */
  #finalConfirmBtn{
    background: var(--primary) !important;
    color: #fff !important;
    border-radius: 8px;
    padding: 10px 18px;
    box-shadow: 0 10px 28px rgba(37,99,235,0.18);
  }
  
  /* Back button */
  .btn-back{
    background: transparent;
    border: none;
    color: var(--primary);
    font-weight:700;
    cursor:pointer;
  }
  
  /* Cards used in admin/owner */
  .salon-card .salon-info small, .salon-card small{ color: var(--muted); }
  
  /* Forms & inputs — white backgrounds must have black text */
  input, textarea, select, .form-control, .input-group input, .input-group textarea, .input-group select{
    width:100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #e6edf6;
    background: var(--white);
    color: #000; /* make sure text in white bg is black */
    font-size: 0.95rem;
    outline: none;
    transition: box-shadow .12s ease, border-color .12s ease;
  }
  input::placeholder, textarea::placeholder{ color: #8b8f94; opacity:0.9; }
  
  /* Form focus */
  input:focus, textarea:focus, select:focus, .form-control:focus{
    border-color: rgba(37,99,235,0.35);
    box-shadow: 0 6px 20px rgba(37,99,235,0.08);
  }
  
  /* Modal */
  .modal{
    position: fixed; inset: 0;
    display: none;
    justify-content: center;
    align-items: center;
    background: rgba(2,6,23,0.48);
    z-index: 2000;
  }
  .modal-content{
    width: 92%;
    max-width: 480px;
    background: var(--white);
    color: #000; /* white bg -> black text */
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 30px 80px rgba(2,6,23,0.2);
  }
  .input-group{ margin-bottom: 12px; position:relative }
  
  /* Owner panel specific */
  .owner-header{
    background: var(--white);
    padding: 18px;
    border-radius: 12px;
    box-shadow: var(--card-shadow);
    border-left: 6px solid var(--primary);
    margin-bottom: 18px;
    color: var(--text-dark);
  }
  
  /* Slot cards */
  .slot-container{ display:grid; grid-template-columns: repeat(auto-fill,minmax(160px,1fr)); gap:14px; }
  .slot-card{
    background: var(--white);
    border-radius: 12px;
    padding: 12px;
    text-align:center;
    box-shadow: var(--card-shadow);
    transition: transform .14s ease;
    position: relative;
    color: var(--text-dark);
  }
  .slot-card.free{ border-top: 4px solid var(--success); }
  .slot-card.reserved{ border-top: 4px solid var(--danger); opacity:0.96; }
  .slot-card.full{ border-top: 4px solid #f59e0b; }
  
  /* Salon detail booking grid */
  .grid-container{ display:grid; grid-template-columns: repeat(4,1fr); gap:10px; margin-top:20px; }
  .slot{ padding:14px; border-radius:8px; text-align:center; cursor:pointer; color:#fff; transition: transform .12s; }
  .slot.free{ background: linear-gradient(180deg,#16a34a,#22c55e); }
  .slot.reserved{ background: linear-gradient(180deg,#ef4444,#f87171); cursor:not-allowed; }
  .slot.selected{ border: 3px solid var(--text-dark); transform: scale(0.96); }
  .footer-action{
    position: fixed; bottom: 12px; left: 12px; right:12px; background: var(--white); padding: 16px; box-shadow: 0 -10px 40px rgba(2,6,23,0.06); border-radius: 12px; z-index: 1500; display:flex; justify-content:space-between; align-items:center;
  }
  
  /* My bookings */
  .salon-card.salon-card-compact{ display:flex; gap:12px; align-items:center; padding:12px; }
  
  /* Admin styles */
  .admin-nav{
    background: linear-gradient(90deg,var(--primary), var(--accent));
    color:white; padding:14px; display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; z-index:1000; border-radius:0 0 12px 12px;
  }
  .stats-container{ display:grid; grid-template-columns: repeat(2,1fr); gap:14px; margin:20px 0; }
  .stat-card{ background:var(--white); padding:16px; border-radius:12px; text-align:center; box-shadow:var(--card-shadow); border-bottom: 4px solid var(--primary); color:var(--text-dark) }
  
  /* admin user card */
  .user-card{ background:var(--white); padding:12px; border-radius:10px; display:flex; justify-content:space-between; align-items:center; box-shadow: 0 8px 24px rgba(15,23,42,0.04); cursor:pointer; transition: transform .14s ease; }
  .user-card:hover{ transform: translateY(-4px) }
  
  /* small utilities */
  .hr-muted{ height:1px; background:#eef2ff; margin:14px 0; border-radius:2px; }
  
  /* Text colors for white backgrounds explicitly */
  .modal-content, .salon-card, .card, .form-control, .owner-header, .add-salon-form, .stat-card, .user-card, .booking-card{
    color: #000 !important;
  }
  
  /* Links & icons color */
  a, .link-like{ color: var(--primary); text-decoration: none; }
  
  /* Responsive */
  @media (max-width: 900px){
    .grid-container{ grid-template-columns: repeat(2,1fr) }
    .slot-card{ padding:12px }
  }
  @media (max-width: 640px){
    .salon-grid{ grid-template-columns: 1fr; padding: 10px; }
    .grid-container{ grid-template-columns: repeat(1,1fr) }
    .dashboard{ width: 88%; }
    .modal-content{ width: 96%; padding:14px; }
    .footer-action{ flex-direction: column; gap:10px; align-items:stretch; bottom:8px; left:8px; right:8px; }
  }
  
  /* Small helpers */
  .text-muted{ color:var(--muted) }
  .badge{ display:inline-block; padding:6px 10px; border-radius:999px; background:#f1f5f9; color:var(--text-dark); font-size:0.8rem }
  
  /* Accessibility: focus outline */
  a:focus, button:focus, input:focus, select:focus { outline: 3px solid rgba(37,99,235,0.12); outline-offset: 2px; }
  
  /* End of file *//* ==== MOBILE / HAMBURGER & DASHBOARD FIX (paste at end of css/style.css) ==== */

/* 1) Use transform to hide/show the dashboard reliably on all widths */
.dashboard{
    right: 0;                    /* keep at right edge, but move via transform */
    transform: translateX(110%); /* fully out of viewport to the right */
    transition: transform .28s cubic-bezier(.2,.9,.2,1);
    z-index: 1500;               /* above most content */
    width: 360px;
    max-width: 92%;
  }
  
  /* when JS adds .active, bring it in */
  .dashboard.active{
    transform: translateX(0);
  }
  
  /* 2) Ensure the menu toggle (hamburger) is always visible on mobile */
  .menu-toggle{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: rgba(255,255,255,0.06);
    color: #ffffff;
    font-size: 20px;
    cursor: pointer;
    z-index: 1600; /* above header and dashboard */
    box-shadow: 0 6px 18px rgba(2,6,23,0.12);
  }
  
  /* make sure the header doesn't hide the toggle on very small screens */
  .main-header{ z-index: 1400; }
  
  /* 3) mobile adjustments: reduce dashboard width & make overlay friendlier */
  @media (max-width: 640px){
    .dashboard{
      width: 88%;
      max-width: 88%;
      transform: translateX(110%);
      box-shadow: -20px 40px 70px rgba(2,6,23,0.2);
      border-radius: 12px 0 0 12px;
      top: 0;
      height: 100%;
    }
  
    /* ensure overlay sits under the dashboard but above page */
    .dashboard-overlay{
      position: fixed;
      inset: 0;
      background: rgba(2,6,23,0.45);
      z-index: 1400;
      display: none; /* remains JS-controlled in original; keep hidden by default */
    }
  
    /* if overlay element follows or is toggled by JS, try to ensure visibility when dashboard becomes active.
       This rule helps in many DOM orders, but if your overlay doesn't follow the dashboard element,
       overlay visibility should still be controlled by your JS (unchanged here). */
    .dashboard.active ~ .dashboard-overlay,
    .dashboard.active + .dashboard-overlay{
      display: block;
    }
  
    /* slightly larger clickable area for the hamburger */
    .menu-toggle{ width:48px; height:48px; font-size:22px; }
  }
  
  /* 4) Safety: prevent dashboard content from affecting page layout (just in case) */
  body{
    -webkit-overflow-scrolling: auto;
  }
  
  /* End of mobile/dashboard fixes */
  .logo {
    display: flex;
    align-items: baseline; /* برای هماهنگ شدن خط کرسی دو کلمه */
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* یک فونت مدرن و شیک */
  }
  
  .logo {
    display: flex;
    align-items: baseline;
    /* اضافه کردن این خط برای حل مشکل جابجایی EZ و reserve */
    direction: ltr; 
    justify-content: flex-start;
    
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  }
  
  .ez {
    font-size: 3rem;
    font-weight: 800;
    margin-right: 8px; /* فاصله بین دو بخش */
    
    /* استایل طلایی */
    background: linear-gradient(145deg, #bf953f, #fcf6ba, #b38728, #fbf5b7, #aa771c);
    -webkit-background-clip: text;
    background-clip: text; /* نسخه استاندارد برای رفع احتمالی خطای ویرایشگر */
    -webkit-text-fill-color: transparent;
    
    /* برای مرورگرهایی که از گرادینت متن پشتیبانی نمی‌کنند */
    color: #d4af37; 
  }
  
  .reserve {
    font-size: 1.4rem;
    color: #000000;
    font-weight: 400;
    letter-spacing: 0.5px;
  }
  /* ==== استایل پیشرفته فرم ساخت سالن در پنل ادمین ==== */

.add-salon-form {
  background: var(--white);
  padding: 30px;
  border-radius: var(--radius-lg);
  box-shadow: 0 10px 40px rgba(15, 23, 42, 0.08);
  border: 1px solid #edf2f7;
  margin-top: 20px;
}

.add-salon-form h2 {
  color: var(--text-dark);
  margin-bottom: 25px;
  font-size: 1.4rem;
  border-right: 4px solid var(--primary);
  padding-right: 15px;
}

/* استایل دسته‌بندی ورودی‌ها */
.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: #4a5568;
  font-size: 0.9rem;
}

/* استایل فیلدها */
.add-salon-form input[type="text"],
.add-salon-form input[type="number"],
.add-salon-form textarea,
.add-salon-form select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #f1f5f9;
  border-radius: var(--radius-md);
  background-color: #f8fafc;
  color: #000 !important; /* متن کاملا مشکی */
  font-size: 1rem;
  transition: all 0.3s ease;
}

/* حالت فوکوس با انیمیشن آبی */
.add-salon-form input:focus,
.add-salon-form textarea:focus,
.add-salon-form select:focus {
  background-color: #fff;
  border-color: var(--primary);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.1);
  outline: none;
}

/* استایل دکمه انتخاب عکس */
.add-salon-form input[type="file"] {
  background: #fff;
  padding: 10px;
  border: 2px dashed #cbd5e1;
  border-radius: var(--radius-md);
  cursor: pointer;
  width: 100%;
}

.add-salon-form input[type="file"]:hover {
  border-color: var(--primary);
  background: #f0f7ff;
}

/* دکمه ثبت نهایی */
.add-salon-form .btn-submit {
  width: 100%;
  background: var(--primary);
  color: white;
  padding: 16px;
  border-radius: var(--radius-md);
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 10px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

.add-salon-form .btn-submit:hover {
  background: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3);
}

/* ریسپانسیو کردن فرم در دو ستون برای مانیتور */
@media (min-width: 768px) {
  .form-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 20px;
  }
  .full-width {
      grid-column: span 2;
  }
}
/* استایل دکمه تغییر عکس در پنل ادمین */
.btn-change-photo {
  background: #f1f5f9; /* خاکستری خیلی روشن */
  color: #0f172a !important; /* متن کاملا مشکی */
  border: 1px solid #cbd5e1;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.2s ease;
  height: 32px;
}

.btn-change-photo:hover {
  background: #e2e8f0;
  border-color: var(--primary);
  color: var(--primary) !important; /* در هاور کمی متمایل به آبی شود */
  transform: translateY(-1px);
}

.btn-change-photo i {
  font-size: 0.85rem;
}
        /* رنگ آیکون تراکنش‌ها (سبز) */
        .menu-btn.txn-btn i { color: #10b981; background: #ecfdf5; }
        
        /* رنگ آیکون آمار (آبی تیره/زغال سنگی) */
        .menu-btn.stats-btn i { color: #475569; background: #f1f5f9; }
        /* استایل دکمه بازگشت مشکی و بزرگ */
.btn-back-main {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  background: #0f172a; /* مشکی ذغالی */
  color: white !important;
  padding: 16px;
  border-radius: 15px;
  border: none;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 25px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
  text-decoration: none;
}

.btn-back-main:hover {
  background: #000000;
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.btn-back-main i {
  font-size: 1.2rem;
}

/* 
  Define this in your CSS 
  .linearTransition = Replace it by the name you want to give your transition
*/