/* تحديث 57: إعادة تنسيق الجوال (الرأس، عنوان الشاشة مع السنة، النوافذ، مقاسات الخط)
   تُحمَّل بعد كل الملفات الأخرى. المحددات تبدأ بـ #appView لتتفوق على القواعد المتراكمة. */

@media (max-width: 820px) {

  /* ---------- الرأس: شبكة مرتبة من ثلاثة صفوف ---------- */
  html body #appView .main-head {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) auto !important;
    grid-template-areas:
      "menu title acct"
      "year year bell"
      "save save sub" !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    margin: 8px 0 0 !important;
    border-radius: 18px !important;
    border: 1px solid var(--hair, #e6dccb) !important;
    background: rgba(255, 253, 249, 0.96) !important;
    box-shadow: 0 6px 18px -12px rgba(15, 45, 40, 0.35) !important;
  }
  html body #appView .main-head .head-tools,
  html body #appView .main-head .hd-acct { display: contents !important; }

  html body #appView .menu-toggle { grid-area: menu; width: 40px !important; height: 40px !important; border-radius: 12px !important; }
  html body #appView .head-title { grid-area: title; min-width: 0; }
  html body #appView .head-kicker { display: none !important; }
  html body #appView .main-head h1 {
    font-size: 18px !important; line-height: 1.25 !important; font-weight: 800 !important;
    margin: 0 !important; display: flex !important; align-items: center !important; flex-wrap: wrap; gap: 6px;
    min-width: 0;
  }
  html body #appView #viewTitle { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  html body #appView .vt-year {
    display: inline-flex !important; align-items: center; height: 22px; padding: 0 9px;
    border-radius: 999px; background: rgba(184, 134, 47, 0.14); color: #7a5418;
    font-size: 12px !important; font-weight: 800 !important; white-space: nowrap; line-height: 1;
  }
  html body #appView .vt-year:empty { display: none !important; }

  html body #appView #acctWrap { grid-area: acct; }
  html body #appView .acct-chip { height: 40px; min-height: 40px; padding: 3px 10px 3px 3px !important; }
  html body #appView .acct-avatar { width: 32px !important; height: 32px !important; flex-basis: 32px !important; }
  html body #appView .acct-word { font-size: 12.5px !important; }
  html body #appView #subscriptionBtn { grid-area: sub; height: 40px !important; width: 40px !important; min-width: 40px !important; padding: 0 !important; justify-content: center; border-radius: 50% !important; }
  html body #appView #subscriptionBtn .hd-sub-lbl { display: none !important; }

  html body #appView .year-box {
    grid-area: year; width: 100%; min-width: 0; height: 42px;
    border-radius: 14px; padding: 3px; display: flex; align-items: center; gap: 6px;
  }
  html body #appView .year-box select { font-size: 14px !important; height: 34px; min-width: 0; flex: 1; }
  html body #appView .year-box .year-add,
  html body #appView .year-box .year-del {
    flex: 0 0 40px !important; width: 40px !important; min-width: 40px !important; height: 34px !important;
    padding: 0 !important; border-radius: 10px; overflow: hidden;
    text-indent: -9999px !important; white-space: nowrap !important;
  }
  html body #appView .year-box .year-add { background: #e3f4ec !important; color: #17603f !important; border: 1px solid #bfe3d0 !important; }
  html body #appView .year-box .year-del { background: #fbe9e6 !important; color: #b3261e !important; border: 1px solid #f1c3bc !important; }
  html body #appView #addYearBtn::before, html body #appView #deleteYearBtn::before, html body #appView .year-box .year-add::before, html body #appView .year-box .year-del::before { background-color: currentColor !important; display: block !important; width: 18px !important; height: 18px !important; margin: 0 !important; }
  html body #appView .year-box .year-add::before,

  html body #appView .year-box label { display: none !important; }

  html body #appView #ntfBellBtn { grid-area: bell; width: 42px !important; height: 42px !important; min-width: 42px !important; margin: 0 !important; justify-self: end; }
  html body #appView #saveBtn { grid-area: save; height: 42px !important; width: 100%; border-radius: 14px !important; justify-content: center; }
  html body #appView #saveBtn { position: relative !important; padding: 0 14px 0 52px !important; justify-content: center !important; }
  html body #appView #saveBtn::before { position: absolute !important; inset-inline-start: 7px !important; top: 50% !important; margin-top: -15px !important; width: 30px !important; height: 30px !important; border-radius: 9px !important; }
  html body #appView #saveBtn::after { position: absolute !important; inset-inline-start: 12px !important; top: 50% !important; margin: -9px 0 0 0 !important; width: 18px !important; height: 18px !important; }
  html body #appView #saveBtn .sb-text { align-items: center; text-align: center; }
  html body #appView #saveBtn .sb-text b { font-size: 13px !important; }
  html body #appView #saveBtn .sb-text small { font-size: 11px !important; }

  /* ---------- مقاسات الخط الموحدة ---------- */
  html body #appView .al-name { font-size: 19px !important; }
  html body #appView .al-sub { font-size: 12px !important; }
  html body #appView h3 { font-size: 15px !important; line-height: 1.35 !important; }
  html body #appView .panel-head p, html body #appView .panel-head small { font-size: 12px !important; line-height: 1.6 !important; }
  html body #appView .lg { font-size: 12px !important; }
  html body #appView .pc-name { font-size: 13.5px !important; }
  html body #appView .pc-total { font-size: 13px !important; }
  html body #appView .ssb-search-count { font-size: 12px !important; }
  html body #appView .sb-state { font-size: 11px !important; }
  html body #appView button:not(.nav-item):not(.ntf-mini):not(.acct-chip):not(.hd-sub) { font-size: 13px !important; }

  /* ---------- بطاقات الأرقام: حجم واحد في كل الشاشات ---------- */
  html body #appView .main .cards { gap: 8px !important; margin-top: 10px !important; }
  html body #appView .main .cards .card {
    min-height: 74px !important; padding: 10px 12px !important; border-radius: 14px !important;
    font-size: 12px !important; font-weight: 700 !important; line-height: 1.35 !important;
    display: flex !important; flex-direction: column !important; justify-content: space-between !important; gap: 4px;
  }
  html body #appView .main .cards .card b {
    font-size: 19px !important; line-height: 1.15 !important; font-weight: 800 !important; margin: 0 !important;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- الملف الشخصي: بطاقة ثابتة في منتصف الشاشة، لا تدفع الصفحة ---------- */
  html body .acct-panel {
    position: fixed !important; inset-inline: auto !important;
    left: 50% !important; top: calc(var(--sa-top, 0px) + 96px) !important;
    transform: translateX(-50%) !important;
    width: min(340px, calc(100vw - 28px)) !important;
    max-height: calc(100dvh - 140px); overflow-y: auto;
    z-index: 9100 !important; padding: 16px !important; border-radius: 18px !important;
  }
  html body .acct-panel[hidden] { display: none !important; }
  html body .acct-panel-title { font-size: 15px !important; font-weight: 800 !important; margin: 0 0 8px !important; }

  /* ---------- الستيكرات: حجم واحد وخط واحد ومحتوى في المنتصف في كل الشاشات ---------- */
  html body #appView .cards,
  html body #appView .ssb-mini-sum,
  html body #appView .smart-dashboard-metrics {
    display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important; margin-top: 10px !important;
  }
  /* 2 أو 4 ستيكرات: عمودان. 6 أو 3 أو 9: ثلاثة أعمدة */
  html body #appView .cards:has(> :nth-child(2):last-child),
  html body #appView .ssb-mini-sum:has(> :nth-child(2):last-child),
  html body #appView .smart-dashboard-metrics:has(> :nth-child(4):last-child),
  html body #appView .cards:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  html body #appView .cards > .card,
  html body #appView .ssb-mini-sum > .mini-tile,
  html body #appView .smart-dashboard-metrics > .smart-metric {
    box-sizing: border-box !important; height: 84px !important; min-height: 84px !important; max-height: 84px !important;
    margin: 0 !important; padding: 8px 8px !important; border-radius: 14px !important; overflow: hidden !important;
    display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important;
    gap: 4px !important; text-align: center !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important;
  }
  html body #appView .cards > .card b,
  html body #appView .ssb-mini-sum > .mini-tile b,
  html body #appView .smart-dashboard-metrics > .smart-metric b {
    display: block !important; margin: 0 !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.1 !important;
    font-variant-numeric: tabular-nums; text-align: center !important; width: 100%;
  }
  html body #appView .smart-dashboard-metrics > .smart-metric small { font-size: 11px !important; line-height: 1.25 !important; }
  html body #appView .ssb-mini-sum > .mini-tile span { font-size: 12px !important; line-height: 1.25 !important; text-align: center !important; }

  /* ---------- النصوص في المنتصف: الشاشات والتبويبات والملف الشخصي ---------- */
  html body #appView .panel-head, html body #appView .panel-head > div { text-align: center !important; }
  html body #appView .panel-head h3, html body #appView .panel-head p { text-align: center !important; }
  html body #appView .view-tabs, html body #appView .seg, html body #appView .ssb-seg { justify-content: center !important; }
  html body #appView .view-tabs button, html body #appView .seg button, html body #appView .ssb-seg button,
  html body #appView .lg, html body #appView .ssb-chip, html body #appView .ssb-search-count {
    justify-content: center !important; text-align: center !important;
  }
  html body .acct-panel { text-align: center !important; }
  html body .acct-panel .side-account-row {
    display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; text-align: center !important;
  }
  html body .acct-panel .side-account-row > span:first-child { font-size: 11.5px !important; }
  html body .acct-panel-title { text-align: center !important; }
  html body .acct-panel .plan-badge { display: inline-flex !important; }

  /* ---------- النوافذ: بطاقة في منتصف الشاشة، أعلى من 82% لا تتجاوز ---------- */
  html body .modal { align-items: center !important; justify-content: center !important; padding: 14px !important; }
  html body .modal .ntf-box {
    width: min(94vw, 460px) !important; max-width: 460px !important;
    height: auto !important; max-height: 80vh !important;
    border-radius: 20px !important; display: flex !important; flex-direction: column !important;
    overflow: hidden !important;
  }
  html body .modal .ntf-head {
    position: relative !important; flex: 0 0 auto;
    padding: 16px 52px 12px 16px !important; text-align: start;
  }
  html body .modal .ntf-head h2 { font-size: 16px !important; line-height: 1.35 !important; margin: 0 !important; }
  html body .modal .ntf-lead { font-size: 12px !important; line-height: 1.6 !important; margin: 4px 0 0 !important; }
  html body .modal .ntf-head .ntf-close,
  html body .modal .ntf-head > button {
    position: absolute !important; top: 12px !important; inset-inline-end: 12px !important;
    width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 50% !important;
    display: grid !important; place-items: center !important; padding: 0 !important; font-size: 16px !important;
  }
  html body .modal .ntf-scroll {
    flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; overflow-x: hidden !important;
    padding: 14px 16px 16px !important;
  }
  html body .modal .ntf-compose { gap: 10px !important; }
  html body .modal .ntf-field { font-size: 12px !important; gap: 5px !important; }
  html body .modal .ntf-field input,
  html body .modal .ntf-field select { font-size: 13.5px !important; height: 42px !important; }
  html body .modal .ntf-field textarea { font-size: 13.5px !important; height: 104px !important; min-height: 104px !important; }
  html body .modal .ntf-count { font-size: 11px !important; }
  html body .modal .ntf-sub { font-size: 14px !important; margin: 14px 0 8px !important; }
  html body .modal .ntf-item .ntf-main b { font-size: 13px !important; }
  html body .modal .ntf-item .ntf-body { font-size: 12px !important; }
  html body .modal .ntf-mini { min-width: 60px !important; height: 32px !important; font-size: 12px !important; white-space: nowrap !important; }
}