/* ====================================
   HESAB YAR AFTO - UI V3.4
   Visual enhancements and responsive
==================================== */

:root {
  --af-navy: #14243a;
  --af-navy2: #20415b;
  --af-gold: #f8b342;
  --af-teal: #159a83;
  --af-blue: #3479cf;
  --af-purple: #8962cb;
  --af-bg: #eaf0f6;
  --af-line: #cfdde9;
  --af-text: #1a334b;
}

html {
  scroll-padding-top: 108px;
}

body {
  background:
    radial-gradient(
      circle at 85% 0%,
      #d5e6f1 0,
      transparent 34%
    ),
    linear-gradient(
      165deg,
      #e7eff6 0%,
      #f1f5f9 55%,
      #e1ecf1 100%
    ) !important;
  color: var(--af-text);
}

/* هدر کوتاه با لوگوی بزرگ */

.topbar {
  position: sticky !important;
  top: 0;
  z-index: 1000;
  min-height: 76px !important;
  padding: 7px 3% !important;
  background: #14243a !important;
  box-shadow: 0 9px 24px rgba(9, 23, 42, .16);
  gap: 12px;
}

.brand,
.brand-rich {
  gap: 15px;
  align-items: center;
}

.brand-logo {
  width: 195px !important;
  max-height: none !important;
  height: auto !important;
  object-fit: contain;
  filter: none !important;
}

.brand-copy b {
  font-size: 22px !important;
  line-height: 1.4;
}

.brand-copy small {
  font-size: 11px !important;
  color: #c2d4df;
  margin-top: 1px;
}

.head-actions {
  gap: 8px;
}

.user-chip {
  padding: 7px 12px;
  background: #233c55;
}

/* منو دیگر زیر هدر نمی‌چسبد */

.container {
  padding-top: 20px !important;
}

.quick-nav {
  position: static !important;
  top: auto !important;
  margin: 0 0 23px !important;
  padding: 11px;
  background: #c0c6cc !important;
  border: 1px solid #bfcfdf;
  border-radius: 18px;
  box-shadow: 0 8px 20px rgba(18, 43, 67, .06);
}

.quick-nav a {
  background: #f0f5f9 !important;
  color: #1b3c57 !important;
  border: 1px solid #c8d8e6 !important;
  font-size: 12px;
}

.quick-nav a:hover,
.quick-nav a:focus-visible {
  background: #f8b342 !important;
  border-color: #db9b2e !important;
  color: #14243a !important;
}

/* داشبورد و پنل‌ها */

.page-heading {
  background: linear-gradient(120deg, #86afc4, #bdd9e4, #75bcdd) !important;
  border: 1px solid #b8cedd;
  box-shadow: 0 15px 28px rgba(23, 61, 89, .09);
}

.page-heading h1 {
  color: #17334b !important;
}

.card,
.filter-box,
.drawer,
.v3panel,
.settings-panel {
  border-color: var(--af-line);
  box-shadow: 0 12px 30px rgba(23, 52, 80, .07);
}

.drawer,
.v3panel,
.settings-panel {
  background: #e3e8ec;
}

.drawer-body {
  background: #dbecfb;
}

#new-transaction {
  border-right: 6px solid #d99b2d;
}

#new-transaction summary {
  background: #fff0d5 !important;
}

#records {
  border-right: 6px solid #3479cf;
}

#records summary {
  background: #edf76c !important;
}

#debts {
  border-right: 6px solid #19a284;
}

#debts summary {
  background: #aad4fb !important;
}

#settings {
  border-right: 6px solid #8962cb;
}

#settings summary {
  background: #d3bcf8 !important;
}

/* لوگوهای باکس‌ها */

.drawer > summary > span:first-child::before,
.v3panel > h2::before,
.hero h1::before {
  width: 64px !important;
  height: 58px !important;
  min-width: 64px;
  border-radius: 12px;
  background-color: #172d43 !important;
  background-image: url("/static/logo-afto.png") !important;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 94% auto !important;
  border: 1px solid #354d63;
  box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.drawer summary small {
  color: #587088;
}

/* کارت‌های مالی */

.stat,
.mini-kpi,
.v3tile {
  background: linear-gradient(
    150deg, #e6f0f7, #f7fbff
  ) !important;
}

.stat:nth-child(1),
.mini-kpi:nth-child(1) {
  background: linear-gradient(
    145deg, #d7f1e7, #edf9f4
  ) !important;
}

.stat:nth-child(2),
.mini-kpi:nth-child(2) {
  background: linear-gradient(
    145deg, #fff0d1, #fff8e9
  ) !important;
}

.stat:nth-child(3) {
  background: linear-gradient(
    145deg, #ebe2fb, #f7f3fd
  ) !important;
}

.stat:nth-child(4) {
  background: linear-gradient(
    145deg, #dcecff, #f2f7ff
  ) !important;
}

.stat:nth-child(5) {
  background: linear-gradient(
    145deg, #d6e9ef, #edf5f7
  ) !important;
}

/* جدول‌های جذاب‌تر */

.table-scroll,
.v3table {
  background: #e4edf4 !important;
  border: 1px solid #bfd1e0;
  border-radius: 15px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-scroll table,
.v3table table,
.report-table table {
  border-collapse: collapse;
}

.table-scroll th,
.v3table th,
.report-table th {
  background: #204360 !important;
  color: #ffffff !important;
  border-bottom: 2px solid #f8b342;
  padding: 14px;
}

.table-scroll td,
.v3table td,
.report-table td {
  background: transparent;
  border-bottom: 1px solid #d2e1ea;
  color: #25435e;
  padding: 13px;
}

.table-scroll tbody tr:nth-child(odd),
.v3table tbody tr:nth-child(odd),
.report-table tbody tr:nth-child(odd) {
  background: #e3eff6 !important;
}

.table-scroll tbody tr:nth-child(even),
.v3table tbody tr:nth-child(even),
.report-table tbody tr:nth-child(even) {
  background: #f0f6fa !important;
}

.table-scroll tbody tr:hover,
.v3table tbody tr:hover,
.report-table tbody tr:hover {
  background: #ffefce !important;
}

.table-scroll tbody tr:hover td,
.v3table tbody tr:hover td,
.report-table tbody tr:hover td {
  background: #ffefce !important;
}

/* فرم‌ها */

input,
select,
textarea {
  background: #f9fcfe;
  border-color: #c5d7e5;
}

input:focus,
select:focus,
textarea:focus {
  border-color: #e4a42f;
  box-shadow: 0 0 0 3px rgba(248,179,66,.2);
}

.btn {
  transition: background .18s, transform .18s;
}

/* صفحات گزارش */

.report-heading,
.report-filter,
.report-result {
  padding: 22px;
  border: 1px solid #c4d5e3;
  border-radius: 22px;
  background: #edf5f9;
  box-shadow: 0 12px 28px rgba(20,50,80,.07);
  margin-bottom: 18px;
}

.report-heading,
.report-result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.report-heading h1 {
  margin: 6px 0;
  color: #163550;
  font-size: 26px;
}

.report-heading p,
.report-result-head p {
  color: #688097;
  margin: 5px 0;
}

.report-switcher {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
  margin-bottom: 17px;
}

.report-tab {
  display: block;
  padding: 17px;
  border-radius: 15px;
  text-align: center;
  font-weight: 800;
  background: #d8e6f0;
  border: 1px solid #bfd2df;
  color: #24516d;
}

.report-tab.active {
  background: #163955;
  color: #ffc66c;
  border-color: #163955;
}

.report-filter-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fit, minmax(150px,1fr)
  );
  align-items: end;
  gap: 12px;
}

.report-result-head h2 {
  margin: 4px 0;
}

.report-export {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.report-kpis {
  display: grid;
  grid-template-columns: repeat(
    5, minmax(0,1fr)
  );
  gap: 12px;
  margin: 20px 0;
}

.report-kpi {
  padding: 17px;
  border-radius: 16px;
  border: 1px solid #c6d8e5;
  min-width: 0;
}

.report-kpi span,
.report-kpi small {
  display: block;
  font-size: 12px;
}

.report-kpi strong {
  display: block;
  font-size: 21px;
  font-weight: 900;
  margin: 10px 0 5px;
  overflow-wrap: anywhere;
}

.report-kpi.income {
  background: #d8f4e6;
}

.report-kpi.expense {
  background: #ffefd0;
}

.report-kpi.fixed {
  background: #ece1fb;
}

.report-kpi.profit {
  background: #dbeafa;
}

.report-kpi.cash {
  background: #d4e8ed;
}

.report-disclaimer {
  color: #61778c;
  font-size: 12px;
  line-height: 1.9;
}

/* موبایل و تبلت */

@media (max-width: 1100px) {
  .report-kpis {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  /* هدر موبایل در بخش MOBILE HEADER پایین فایل تنظیم شده */
  .container {
    padding: 15px 10px !important;
  }

  .quick-nav {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
  }

  .quick-nav a {
    text-align: center;
    padding: 10px 6px;
    font-size: 11px;
  }

  .report-heading,
  .report-filter,
  .report-result {
    padding: 14px;
    border-radius: 16px;
  }

  .report-heading h1 {
    font-size: 20px;
  }

  .report-switcher {
    gap: 6px;
  }

  .report-tab {
    font-size: 11px;
    padding: 12px 5px;
  }

  .report-kpis {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 8px;
  }

  .report-kpi {
    padding: 12px;
  }

  .report-kpi strong {
    font-size: 17px;
  }

  .report-export {
    width: 100%;
  }

  .report-export a {
    flex: 1;
  }

  .drawer > summary > span:first-child::before,
  .v3panel > h2::before,
  .hero h1::before {
    width: 46px !important;
    height: 45px !important;
    min-width: 46px;
  }

  .table-scroll,
  .v3table {
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 390px) {
  .report-kpis {
    grid-template-columns: 1fr;
  }

  .user-chip {
    display: none;
  }
}

@media screen and (min-width: 721px) {

    /* هدر اصلی */
    body .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;

        width: 100% !important;

        height: 90px !important;
        min-height: 90px !important;
        max-height: 90px !important;

        padding: 6px 35px !important;

        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;

        box-sizing: border-box !important;
        overflow: hidden !important;

        background: #14243a !important;

        box-shadow:
            0 8px 25px rgba(0, 0, 0, 0.15);
    }

    /* بخش لوگو و عنوان */
    body .topbar .brand,
    body .topbar .brand-rich {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 0 !important;

        height: 78px !important;
        min-height: 78px !important;

        padding: 0 !important;
        margin: 0 !important;

        min-width: 0 !important;
        flex-shrink: 0 !important;
    }

    /* لوگوی بزرگ آفتو */
    body .topbar .brand-logo {
        display: block !important;

        width: 245px !important;
        min-width: 245px !important;
        max-width: 245px !important;

        height: 76px !important;
        min-height: 76px !important;
        max-height: 76px !important;

        object-fit: cover !important;
        object-position: center !important;

        margin: 0 !important;
        margin-left: -35px !important;

        padding: 0 !important;

        flex-shrink: 0 !important;
    }

    /* عنوان و زیرعنوان */
    body .topbar .brand-copy {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: center !important;

        gap: 2px !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
        z-index: 2 !important;
    }

   

    /* زیرعنوان */
    body .topbar .brand-copy small {
        font-size: 11px !important;
        font-weight: 400 !important;

        line-height: 1.5 !important;

        color: #c5d5e5 !important;

        margin: 0 !important;
        padding: 0 !important;

        white-space: nowrap !important;
    }

    /* بخش نام کاربری و دکمه خروج */
    body .topbar .head-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;

        gap: 10px !important;

        margin: 0 !important;
        padding: 0 !important;

        flex-shrink: 0 !important;
    }

    /* اطلاعات کاربر */
    body .topbar .user-chip {
        padding: 8px 14px !important;

        border-radius: 10px !important;

        background: #233c55 !important;
        color: #ffffff !important;
    }
}

/* ==========================================
   MOBILE HEADER
========================================== */

@media screen and (max-width: 720px) {

    /* هدر موبایل */
    body .topbar {
        position: sticky !important;
        top: 0 !important;
        z-index: 1000 !important;
        height: 68px !important;
        min-height: 68px !important;
        max-height: 68px !important;
        padding: 5px 10px !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        background: #14243a !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* لوگو */
    body .topbar .brand,
    body .topbar .brand-rich {
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        min-width: 0 !important;
        flex: 0 1 auto !important;
    }

    body .topbar .brand-logo {
        width: 130px !important;
        min-width: 0 !important;
        max-width: 100% !important;
        height: 52px !important;
        min-height: 0 !important;
        max-height: 52px !important;
        object-fit: contain !important;   /* به جای cover تا بریده نشود */
        object-position: center !important;
        margin: 0 !important;             /* margin منفی حذف شد */
        padding: 0 !important;
        flex-shrink: 1 !important;
    }

    /* متن «حساب‌یار افتو» در موبایل مخفی است (لوگو خودش نام برند را دارد) */
    body .topbar .brand-copy {
        display: none !important;
    }

    /* خروج */
    body .topbar .head-actions {
        display: flex !important;
        align-items: center !important;
        gap: 5px !important;
        flex-shrink: 0 !important;
    }

    body .topbar .user-chip,
    body .topbar .date-badge {
        display: none !important;
    }

    body .topbar .head-actions .btn {
        padding: 6px 9px !important;
        min-height: 34px !important;
        font-size: 11px !important;
    }
}

/* فاصله مناسب بین لوگو و متن - دسکتاپ */
@media screen and (min-width: 721px) {

    body .topbar .brand,
    body .topbar .brand-rich {
        gap: 12px !important;
    }

    body .topbar .brand-logo {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    body .topbar .brand-copy {
        margin: 0 !important;
        padding: 0 !important;
    }
}


/* کوچک‌تر شدن جزئی لوگوی آفتو - دسکتاپ */
@media screen and (min-width: 721px) {

    body .topbar .brand-logo {
        width: 230px !important;
        min-width: 230px !important;
        max-width: 230px !important;

        height: 52px !important;
        min-height: 62px !important;
        max-height: 62px !important;
    }
}


/* نمایش و مخفی‌کردن رمز عبور */

.password-eye-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 7px;
    padding: 7px 12px;

    border: 1px solid #bdd0df;
    border-radius: 8px;

    background: #eaf1f7;
    color: #173852;

    font-size: 12px;
    font-weight: 700;

    cursor: pointer;
}

.password-eye-button:hover {
    background: #dceaf4;
}

/* نمایش فرم افزودن طرف‌حساب */

#contactInlineBox {
    margin-top: 12px;
    margin-bottom: 20px;
}



/* =========================================
   🎨 باکس‌های بالای صفحات را سفید و مینیمال می‌کنیم
========================================= */
.page-heading,
.report-heading,
.report-filter,
.report-result,
.hero {
    background: #ffffff !important; /* سفید خالص */
    border: 1px solid #e2e8f0 !important; /* حاشیه طوسی خیلی ملایم */
    box-shadow: 0 4px 15px rgba(20, 36, 58, 0.04) !important; /* سایه بسیار ملایم */
}

/* تنظیم رنگ تیترها (سرمه‌ای برای خوانایی) */
.page-heading h1,
.report-heading h1,
.hero h1,
.report-result-head h2 {
    color: #14243a !important; 
}

/* تنظیم رنگ توضیحات (طوسی) */
.page-heading p,
.report-heading p,
.hero p,
.report-result-head p {
    color: #64748b !important; 
}

/* تنظیم رنگ نوشته‌های کوچک بالای عنوان (نارنجی برای حفظ هویت سایت) */
.page-heading .eyebrow,
.report-heading .eyebrow,
.hero .eyebrow {
    color: #d97706 !important; 
    font-weight: 800 !important;
}