/* ===================================================================
   Capora — Desktop Enhancement Layer
   این فایل فقط از عرض ۱۰۲۴ پیکسل به بالا فعال می‌شود.
   هیچ قانونی در اینجا روی حالت موبایل (که در app.min.css/app.dev.css
   تعریف شده) تأثیر نمی‌گذارد و نسخه موبایل بدون هیچ تغییری باقی می‌ماند.
   =================================================================== */

/* ---------- ریل ناوبری دسکتاپ: پیش‌فرض مخفی (فقط موبایل/تبلت) ---------- */
.desktop-rail{ display:none; }
/* ---------- پنل کناری ابزار (بازار لحظه‌ای + میانبر): پیش‌فرض مخفی ----------
   این خط جا افتاده بود و باعث می‌شد پنل کناری (که فقط باید در دسکتاپ و
   فقط داخل یک سرویس نمایش داده شود) در موبایل هم به‌صورت خام و بدون
   استایل، زیر فوتر هر صفحه ظاهر شود. */
.tool-side-panel{ display:none; }

@media (min-width: 1024px){

  html, body{ height:100%; }

  /* بدنه صفحه به‌صورت گرید دو ستونه: ریل ثابت + محتوای کاملاً پویا (1fr)
     که به‌طور دینامیک با تغییر عرض مرورگر/مانیتور رشد و کوچک می‌شود؛
     دیگر هیچ فضای خالی بلااستفاده در طرفین باقی نمی‌ماند. */
  body{
    display:grid !important;
    grid-template-columns: 260px minmax(0,1fr);
    gap:22px;
    max-width:1900px;
    width:100%;
    margin:0 auto;
    align-items:start;
    padding:24px 26px !important;
    background:
      radial-gradient(900px 480px at 12% -10%, rgba(99,102,241,.10), transparent 60%),
      radial-gradient(760px 420px at 100% 8%, rgba(245,158,11,.07), transparent 55%),
      var(--bg);
  }

  /* ---------- ریل ناوبری ---------- */
  .desktop-rail{
    display:flex;
    flex-direction:column;
    width:100%;
    background:var(--app-bg, #fff);
    border-radius:22px;
    box-shadow:0 14px 34px rgba(15,23,42,.09);
    padding:18px 14px 14px;
    height:calc(100vh - 48px);
    position:sticky;
    top:24px;
    overflow-y:auto;
    scrollbar-width:thin;
  }
  .desktop-rail::-webkit-scrollbar{ width:5px; }
  .desktop-rail::-webkit-scrollbar-thumb{ background:var(--border,#e2e8f0); border-radius:10px; }

  .rail-brand{
    display:flex; align-items:center; gap:9px;
    padding:4px 8px 16px; margin-bottom:6px;
    border-bottom:1px solid var(--border,#e2e8f0);
  }
  .rail-brand-mark{
    width:34px; height:34px; border-radius:11px;
    background:linear-gradient(150deg,#6366f1,#4338ca);
    display:flex; align-items:center; justify-content:center;
    font-size:16px; color:#fff; flex-shrink:0;
    box-shadow:0 6px 14px rgba(99,102,241,.35);
  }
  .rail-brand-text b{ font-size:14.5px; font-weight:900; display:block; color:var(--primary,#6366f1); }
  .rail-brand-text span{ font-size:10px; color:var(--secondary,#64748b); }

  .rail-home-btn{
    display:flex; align-items:center; gap:9px; width:100%;
    background:var(--primary,#6366f1); color:#fff; border:none;
    font-family:inherit; font-weight:800; font-size:12.5px;
    padding:10px 12px; border-radius:12px; cursor:pointer;
    margin-bottom:14px; text-align:right; transition:.15s;
  }
  .rail-home-btn:hover{ filter:brightness(1.08); }

  .rail-group-label{
    font-size:10.5px; font-weight:800; color:var(--secondary,#64748b);
    padding:12px 8px 6px; letter-spacing:.02em;
    display:flex; align-items:center;
  }
  .rail-group-label:first-of-type{ padding-top:2px; }
  .rail-group-icon{
    margin-inline-end:6px;
    flex-shrink:0;
  }

  .rail-btn{
    display:flex; align-items:center; gap:10px; width:100%;
    background:transparent; border:none; font-family:inherit;
    color:var(--text,#1e293b); font-size:12.5px; font-weight:700;
    padding:8px 8px; border-radius:10px; cursor:pointer; text-align:right;
    transition:.12s;
  }
  .rail-btn:hover{ background:var(--card,#f1f5f9); color:var(--primary,#6366f1); }
  .rail-btn .rail-ic{ font-size:15px; width:20px; text-align:center; flex-shrink:0; }

  /* ---------- کانتینر اصلی اپ: ستون دوم گرید، همیشه کل فضای باقی‌مانده را پر می‌کند ---------- */
  .app{
    margin:0 !important;
    width:100% !important;
    max-width:none !important;
    height:calc(100vh - 48px) !important;
    max-height:none !important;
  }

  .header{ padding:22px 30px 16px !important; }
  .brand-zone h1{ font-size:24px !important; }
  .brand-zone .brand-slogan{ font-size:12px !important; }

  #homeScreen, .home-screen{ padding-inline:30px !important; }

  /* جستجو: هم‌عرض با باکس بازار لحظه‌ای (کل عرض محتوا) */
  .app-search-wrap{ max-width:none; width:100%; }
  .app-search-box{ padding:8px 13px !important; border-radius:11px !important; width:100%; box-sizing:border-box; }
  .app-search-box input{ font-size:12.5px !important; padding-block:0 !important; }

  /* ---------- باکس بازار لحظه‌ای: باریک‌تر و ظریف‌تر ----------
     در دسکتاپ فقط ارزهای اصلی و طلا/کریپتوی پرکاربرد نمایش داده می‌شود؛
     اتریوم، سکه امامی و نیم‌سکه در این نما مخفی می‌شوند (در موبایل
     همچنان نمایش داده می‌شوند، چون این محدودیت فقط برای دسکتاپ است). */
  .market-ticker-row [data-key="ethereum"],
  .market-ticker-row [data-key="coin_emami"],
  .market-ticker-row [data-key="coin_half"]{
    display:none !important;
  }
  .market-ticker-banner{
    padding:12px 18px !important;
    border-radius:13px !important;
  }
  .market-ticker-header{ margin-bottom:8px !important; font-size:11.5px !important; }
  .market-ticker-row{
    overflow-x:visible !important;
    flex-wrap:wrap !important;
    gap:8px !important;
  }
  .ticker-item{
    min-width:130px !important;
    flex:1 1 130px !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:center !important;
    padding:7px 13px !important;
    border-radius:9px !important;
    gap:7px !important;
  }
  .ticker-item .ti-name{ font-size:10.5px !important; }
  .ticker-item .ti-val{ font-size:12px !important; }
  .ticker-item-skeleton{ flex:0 1 100px !important; height:32px !important; width:100px !important; }

  /* ---------- گرید کارت‌های اصلی: عریض‌تر ولی محدود به عرض مطلوب، وسط‌چین ---------- */
  .home-main-grid{
    gap:16px !important;
    max-width:none;
    width:100%;
  }
  .home-card{ padding:22px 18px !important; border-radius:20px !important; }
  .home-card-icon{ font-size:38px !important; }
  .home-card-text h2{ font-size:17px !important; }
  .home-card-text p{ font-size:11.5px !important; }

  .home-card-compact-grid{
    gap:14px !important;
    max-width:none;
    width:100%;
  }
  .articles-banner-card{
    padding:20px 24px !important;
    border-radius:18px !important;
  }
  .articles-banner-icon{ width:52px !important; height:52px !important; font-size:24px !important; }
  .articles-banner-text h3{ font-size:15px !important; }
  .articles-banner-text p{ font-size:11.5px !important; }

  .telegram-banner-card{ padding:22px 26px !important; border-radius:22px !important; }
  .telegram-banner-icon{ width:56px !important; height:56px !important; font-size:26px !important; }
  .telegram-banner-text h3{ font-size:16px !important; }
  .telegram-banner-text p{ font-size:12px !important; }
  /* ریدیزاین کامل کارت‌های فشرده برای دسکتاپ: به‌جای آیکون-روی-متن
     عمودی موبایل، حالا یک ردیف افقی (آیکون در یک باکس گرد + عنوان)
     است — از عرض کارت بهتر استفاده می‌کند و ظاهر مخصوص دسکتاپ دارد. */
  .home-card-compact{
    flex-direction:row !important;
    justify-content:flex-start !important;
    align-items:center !important;
    text-align:right !important;
    padding:18px 20px !important;
    gap:14px !important;
    border-radius:18px !important;
  }
  .home-card-compact-icon{
    font-size:22px !important;
    width:46px !important; height:46px !important;
    background:rgba(255,255,255,.2);
    border-radius:13px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .home-card-compact-title{ font-size:13.5px !important; font-weight:800 !important; }
  .home-card-compact:hover{ transform:translateY(-3px); box-shadow:0 10px 22px rgba(0,0,0,.16); }

  /* ---------- گرید ابزارهای کاربردی کوچک: کاملاً پویا، از کل عرض استفاده می‌کند ---------- */
  .home-mini-grid{
    display:grid !important;
    grid-template-columns:repeat(auto-fill, minmax(112px,1fr)) !important;
    gap:12px !important;
  }
  .home-mini-grid.grid-6, .home-mini-grid.grid-9{
    grid-template-columns:repeat(auto-fill, minmax(112px,1fr)) !important;
  }
  .mini-card{ padding:14px 6px !important; }
  .mini-card-icon{ font-size:22px !important; width:auto !important; height:auto !important; }
  .mini-card-text{ font-size:10.5px !important; }

  /* ---------- محتوای درون هر سرویس: گرید دو ستونه (فرم + پنل کناری) ----------
     ستون .app کل فضای باقی‌مانده صفحه را می‌گیرد. داخل آن، وقتی کاربر
     داخل یک سرویس است (.app.scrollable)، یک گرید دوستونه تشکیل می‌شود:
     ستون اول فرم با عرض راحت (بدون کشیدگی)، ستون دوم پنل «بازار لحظه‌ای
     + میانبر سریع» — به این ترتیب دیگر فضای خالی کنار فرم‌ها نمی‌ماند
     و در عین حال خودِ فرم هرگز دفرمه نمی‌شود. */
  .app.scrollable{
    display:grid !important;
    grid-template-columns: minmax(0,1fr) 290px;
    align-items:start;
    column-gap:28px;
  }
  .app.scrollable .header{ grid-column:1 / -1; }
  .app.scrollable [id$="Section"]{
    grid-column:1;
    max-width:820px;
    margin-inline:auto;
    width:100%;
    box-sizing:border-box;
  }
  .app.scrollable .footer{ display:none !important; }

  .section-header h2{ font-size:19px !important; }
  .tabs{ gap:8px !important; }
  .tab{ font-size:12.5px !important; padding:9px 14px !important; }
  .form-group label{ font-size:12px !important; }
  .input-wrapper input, .input-wrapper select{ font-size:14px !important; padding:12px 14px !important; }
  .btn{ font-size:13px !important; padding:12px !important; }

  /* ---------- پنل کناری ابزار (بازار لحظه‌ای + میانبر) ---------- */
  .app.scrollable .tool-side-panel{
    display:flex;
    flex-direction:column;
    grid-column:2;
    background:var(--card,#f1f5f9);
    border-radius:18px;
    padding:18px 16px;
    position:sticky;
    top:0;
  }
  .tsp-title{ font-size:11.5px; font-weight:800; color:var(--secondary,#64748b); margin-bottom:10px; }
  .tsp-ticker{ display:flex; flex-direction:column; gap:8px; }
  .tsp-ticker-item{
    display:flex; align-items:center; justify-content:space-between;
    background:var(--app-bg,#fff); border-radius:10px; padding:9px 12px;
    font-size:12px;
  }
  .tsp-ticker-item .tti-name{ color:var(--secondary,#64748b); font-weight:700; }
  .tsp-ticker-item .tti-val{ font-weight:800; color:var(--text,#1e293b); direction:ltr; }
  .tsp-ticker-skel{ height:36px; border-radius:10px; background:var(--app-bg,#fff); animation:pulse-skel 1.3s infinite; }

  .tsp-shortcuts{ display:flex; flex-direction:column; gap:6px; }
  .tsp-shortcut{
    display:flex; align-items:center; gap:9px;
    background:var(--app-bg,#fff); border:none; border-radius:10px;
    padding:10px 12px; font-family:inherit; font-size:12px; font-weight:700;
    color:var(--text,#1e293b); cursor:pointer; text-align:right; transition:.12s;
  }
  .tsp-shortcut:hover{ color:var(--primary,#6366f1); transform:translateX(-2px); }

  /* ---------- استایل زیبای اسکرول‌بار در دسکتاپ ---------- */
  .app, .home-screen, .app-search-results, .tool-side-panel{
    scrollbar-width:thin;
    scrollbar-color: var(--border,#cbd5e1) transparent;
  }
  .app::-webkit-scrollbar,
  .home-screen::-webkit-scrollbar,
  .app-search-results::-webkit-scrollbar,
  .tool-side-panel::-webkit-scrollbar{
    width:8px;
  }
  .app::-webkit-scrollbar-track,
  .home-screen::-webkit-scrollbar-track,
  .app-search-results::-webkit-scrollbar-track,
  .tool-side-panel::-webkit-scrollbar-track{
    background:transparent;
  }
  .app::-webkit-scrollbar-thumb,
  .home-screen::-webkit-scrollbar-thumb,
  .app-search-results::-webkit-scrollbar-thumb,
  .tool-side-panel::-webkit-scrollbar-thumb{
    background:var(--border,#cbd5e1);
    border-radius:20px;
    border:2px solid transparent;
    background-clip:padding-box;
  }
  .app::-webkit-scrollbar-thumb:hover,
  .home-screen::-webkit-scrollbar-thumb:hover,
  .app-search-results::-webkit-scrollbar-thumb:hover,
  .tool-side-panel::-webkit-scrollbar-thumb:hover{
    background:var(--primary,#6366f1);
    background-clip:padding-box;
  }
}

@media (min-width: 1500px){
  body{ grid-template-columns: 280px minmax(0,1fr); }
  .app.scrollable [id$="Section"]{ max-width:900px; }

  /* تقویم‌های انتخاب تاریخ نباید با پهنای سکشن کش بیایند.
     .cal-day دارای aspect-ratio:1 است، پس هر پیکسل عرض اضافه مستقیماً
     به ارتفاع خانه‌ها هم اضافه می‌شود و تقویم غول‌پیکر می‌شود. */
  .debt-date-picker{ max-width:330px; }
  .app.scrollable{ grid-template-columns: minmax(0,1fr) 320px; }
}

@media (min-width: 1850px){
  body{ grid-template-columns: 300px minmax(0,1fr); }
}