/* ══════════════════════════════════════════════════════════════
   MINDSUP AI — dashboard.css
   Brand: Charcoal #1f271b, White #fbfffe, Purple #741054
   Layout: CSS Grid (Bento Box Architecture)
   ══════════════════════════════════════════════════════════════ */
   :root {
    --black: #1f271b; 
    --black-mid: #2a332c; 
    --black-light: #3d473f;
    
    --purple: #741054; 
    --purple-light: #9c1b74; 
    --purple-dark: #580c40;
    
    --bg: #151a12; /* زغالی تیره برای پس‌زمینه */
    --tx-1: #fbfffe; 
    --tx-2: #a3aba8; 
    --tx-3: #575e5a;
    
    --bdr: rgba(116, 16, 84, 0.2); 
    --bdr-mid: rgba(116, 16, 84, 0.4);
    
    --sh-sm: 0 2px 8px rgba(0,0,0,.45); 
    --sh-lg: 0 24px 64px rgba(0,0,0,.65); 
    --sh-purple: 0 0 24px rgba(116, 16, 84, 0.25);
    
    --font-body: 'Vazirmatn', sans-serif;
    --font-code: 'JetBrains Mono', monospace;
    
    --r-sm: 8px; --r-md: 12px; --r-lg: 18px; --r-xl: 24px;
    --t: .25s cubic-bezier(.22,1,.36,1);
    --sidebar-w: 260px;
  }
  
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  body{
    font-family:var(--font-body); background:var(--bg); color:var(--tx-1);
    direction:rtl; display:flex; min-height:100dvh; overflow-x:hidden;
  }
  a{text-decoration:none;color:inherit}
  button{cursor:pointer;font-family:inherit;border:none;background:none;outline:none}
  ul{list-style:none}
  ::-webkit-scrollbar{width:6px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:var(--purple-dark);border-radius:4px}
  
  /* Ambient Background */
  .ambient{position:fixed;inset:0;pointer-events:none;z-index:0;}
  .amb-1,.amb-2,.amb-3{position:absolute;border-radius:50%;filter:blur(90px);animation:ambDrift 12s ease-in-out infinite alternate}
  .amb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(116,16,84,.3) 0%,transparent 70%);top:-100px;right:-100px;}
  .amb-2{width:400px;height:400px;background:radial-gradient(circle,rgba(156,27,116,.15) 0%,transparent 70%);bottom:0;left:-50px;animation-delay:-5s}
  .amb-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(251,255,254,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(251,255,254,.03) 1px,transparent 1px);background-size:40px 40px;mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 40%,transparent 100%);}
  @keyframes ambDrift{0%{transform:translate(0,0) scale(1)}100%{transform:translate(20px,-15px) scale(1.05)}}
  
  /* Sidebar */
  .sidebar {
    width: var(--sidebar-w); min-width: var(--sidebar-w); height: 100dvh;
    background: rgba(31,39,27,.6); border-left: 1px solid var(--bdr);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    display: flex; flex-direction: column; position: relative; z-index: 200;
    transition: width var(--t), min-width var(--t);
  }
  .sidebar-head {
    height: 70px; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--bdr);
  }
  .logo-link {display: flex; align-items: center; gap: 10px;}
  .logo-badge {background: var(--purple); color: var(--tx-1); font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 4px; letter-spacing: 1px;}
  .logo-name {font-weight: 900; font-size: 18px; color: var(--tx-1);}
  .logo-tagline {display: block; font-size: .65rem; color: var(--tx-3); text-transform: uppercase; letter-spacing: 1px;}
  .sidebar-close-btn {display: none; color: var(--tx-3);}
  
  .main-nav {flex: 1; padding: 20px 12px; display: flex; flex-direction: column; gap: 4px;}
  .nav-item {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px;
    border-radius: var(--r-md); color: var(--tx-2); font-size: .88rem; transition: var(--t);
  }
  .nav-item:hover {background: rgba(251,255,254,.05); color: var(--tx-1);}
  .nav-item.active {background: rgba(116,16,84,.2); color: var(--purple-light); font-weight: 600;}
  .nav-item.active svg {color: var(--purple-light);}
  
  .sidebar-foot {padding: 16px; border-top: 1px solid var(--bdr);}
  .sf-user {display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: var(--r-md); background: rgba(31,39,27,.8); border: 1px solid var(--bdr-mid);}
  .sf-avatar {width: 36px; height: 36px; border-radius: 50%; background: var(--purple); border: 1.5px solid var(--purple-light); display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--tx-1);}
  .sf-name {display: block; font-size: .85rem; font-weight: 600; color: var(--tx-1);}
  .sf-plan {display: flex; align-items: center; gap: 5px; font-size: .7rem; color: var(--tx-3);}
  .sf-plan-dot {width: 6px; height: 6px; border-radius: 50%; background: var(--purple-light); box-shadow: 0 0 6px rgba(156,27,116,.6);}
  
  .sidebar-overlay {display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6); backdrop-filter: blur(4px); z-index: 150; opacity: 0; transition: var(--t);}
  
  /* Main Dashboard Wrapper */
  .dashboard-wrapper {
    flex: 1; min-width: 0; display: flex; flex-direction: column; z-index: 1;
    height: 100dvh; overflow-y: auto;
  }
  
  /* Topbar */
  .topbar {
    height: 70px; min-height: 70px; display: flex; align-items: center; justify-content: space-between;
    padding: 0 24px; position: sticky; top: 0; z-index: 100;
    background: rgba(21,26,18,.8); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--bdr);
  }
  .tb-left, .tb-right {display: flex; align-items: center; gap: 12px;}
  .page-title {font-size: 1.1rem; font-weight: 600; color: var(--tx-1);}
  .tb-btn {
    width: 38px; height: 38px; border-radius: var(--r-md); background: rgba(251,255,254,.03);
    border: 1px solid var(--bdr); color: var(--tx-2); display: flex; align-items: center; justify-content: center;
    transition: var(--t); position: relative;
  }
  .tb-btn:hover {background: rgba(116,16,84,.2); color: var(--purple-light); border-color: var(--bdr-mid);}
  .badge-dot {position: absolute; top: 8px; right: 8px; width: 8px; height: 8px; background: #ef4444; border-radius: 50%; border: 2px solid var(--bg);}
  
  /* Bento Grid System */
  .bento-container {
    padding: 24px; display: grid; grid-template-columns: repeat(12, 1fr);
    gap: 20px; grid-auto-rows: minmax(min-content, auto);
  }
  .glass-panel {
    background: rgba(31,39,27,.4); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid var(--bdr-mid); border-radius: var(--r-xl);
    box-shadow: 0 4px 24px rgba(0,0,0,.2); overflow: hidden; transition: var(--t);
  }
  .glass-panel:hover {border-color: var(--purple-light); box-shadow: var(--sh-md); transform: translateY(-2px);}
  
  .span-12 {grid-column: span 12;}
  .span-8 {grid-column: span 8;}
  .span-6 {grid-column: span 6;}
  .span-4 {grid-column: span 4;}
  
  /* Specific Cards */
  .bento-welcome {
    padding: 32px; display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(135deg, rgba(31,39,27,.6), rgba(116,16,84,.4));
    position: relative; overflow: hidden;
  }
  .welcome-content {position: relative; z-index: 2; max-width: 60%;}
  .welcome-content h2 {font-size: 1.8rem; font-family: var(--font-body); color: var(--tx-1); margin-bottom: 12px; font-weight: 800;}
  .welcome-content p {font-size: .95rem; color: var(--tx-2); line-height: 1.7; margin-bottom: 24px;}
  .welcome-actions {display: flex; gap: 12px;}
  .welcome-ai-graphic {position: absolute; left: 10px; bottom: -10px; filter: drop-shadow(0 0 20px rgba(116,16,84,.4)); pointer-events: none; opacity: 0.8;}
  
  /* Buttons inside Dashboard */
  .btn {padding: 10px 20px; border-radius: var(--r-lg); font-size: .85rem; font-weight: 700; transition: var(--t); display: inline-flex; align-items: center; justify-content: center;}
  .btn-primary {background: linear-gradient(135deg, var(--purple), var(--purple-dark)); border: 1px solid var(--bdr-mid); color: var(--tx-1);}
  .btn-primary:hover {border-color: var(--purple-light); box-shadow: var(--sh-purple);}
  .btn-outline {background: rgba(116,16,84,.1); border: 1px solid var(--bdr-mid); color: var(--purple-light);}
  .btn-outline:hover {background: rgba(116,16,84,.25); border-color: var(--purple-light);}
  
  /* Stats Card */
  .bento-stats {padding: 24px; display: flex; flex-direction: column; justify-content: space-between;}
  .card-head {display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px;}
  .card-head h3 {font-size: 1.05rem; font-weight: 600; color: var(--tx-1);}
  .view-all {font-size: .75rem; color: var(--purple-light); transition: var(--t);}
  .view-all:hover {text-decoration: underline;}
  
  .stat-number {font-size: 2.2rem; font-family: var(--font-code); font-weight: 700; color: var(--purple-light); display: flex; align-items: baseline; gap: 4px;}
  .stat-number small {font-size: .9rem; color: var(--tx-3); font-weight: 400;}
  .stat-label {font-size: .85rem; color: var(--tx-2); margin-top: 4px; margin-bottom: 20px;}
  
  .progress-track {width: 100%; height: 8px; background: rgba(0,0,0,.4); border-radius: var(--r-full); overflow: hidden;}
  .progress-fill {height: 100%; background: linear-gradient(90deg, var(--purple-dark), var(--purple-light)); border-radius: var(--r-full); transition: width 1s ease-out;}
  
  /* Models Grid inside Card */
  .bento-card {padding: 24px;}
  .models-grid {display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px;}
  .model-box {
    display: flex; align-items: center; gap: 12px; padding: 14px;
    background: rgba(31,39,27,.6); border: 1px solid var(--bdr);
    border-radius: var(--r-md); transition: var(--t);
  }
  .model-box:hover {background: rgba(116,16,84,.15); border-color: var(--purple-light);}
  .opt-badge {padding: 4px 8px; border-radius: var(--r-sm); font-family: var(--font-code); font-size: .65rem; font-weight: 600; background: var(--bc); color: var(--tc);}
  .model-box strong {display: block; font-size: .85rem; color: var(--tx-1);}
  .model-box small {font-size: .75rem; color: var(--tx-3);}
  
  /* Recent History List */
  .recent-list {display: flex; flex-direction: column; gap: 8px;}
  .recent-list li {
    display: flex; align-items: center; gap: 14px; padding: 12px;
    border-radius: var(--r-md); transition: var(--t); border: 1px solid transparent;
  }
  .recent-list li:hover {background: rgba(251,255,254,.05); border-color: var(--bdr);}
  .rl-icon {width: 36px; height: 36px; border-radius: var(--r-sm); background: rgba(116,16,84,.2); color: var(--purple-light); display: flex; align-items: center; justify-content: center; flex-shrink: 0;}
  .rl-info {flex: 1; min-width: 0;}
  .rl-info strong {display: block; font-size: .85rem; color: var(--tx-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
  .rl-info small {font-size: .75rem; color: var(--tx-3);}
  .rl-go {color: var(--tx-3); transition: var(--t);}
  .recent-list li:hover .rl-go {color: var(--purple-light); transform: translateX(-4px);}
  
  /* ─── RESPONSIVE ──────────────────────────────────────────── */
  @media (max-width: 1024px) {
    .span-8, .span-6 {grid-column: span 12;}
    .span-4 {grid-column: span 6;}
    .welcome-content {max-width: 100%;}
    .welcome-ai-graphic {opacity: 0.15; right: -20px; left: auto; transform: scale(1.2);}
  }
  @media (max-width: 768px) {
    .sidebar {position: fixed; right: 0; transform: translateX(100%); z-index: 300;}
    .sidebar.open {transform: translateX(0);}
    .sidebar-close-btn {display: block;}
    .sidebar-overlay.visible {display: block; opacity: 1;}
    
    .bento-container {padding: 16px; gap: 16px;}
    .span-4 {grid-column: span 12;}
    .models-grid {grid-template-columns: 1fr;}
    
    .topbar {padding: 0 16px;}
    .page-title {font-size: 1rem;}
  }