/* =====================================================================
   SSBAPP — الشريط العلوي الاحترافي (عنوان + السنة + زر الحفظ)
   شاشة فقط. لا يمس الطباعة أو ملفات PDF.
   ===================================================================== */
@media screen{

/* ---------- العنوان مع السنة ---------- */
.main-head .head-title h1{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;line-height:1.25;}
.main-head .vt-year{
  display:inline-flex;align-items:center;padding:3px 12px;border-radius:999px;
  font-size:.62em;font-weight:800;letter-spacing:0;
  color:var(--brass-700,#8a6420);background:linear-gradient(180deg,#fbf3e2,#f4e5c4);
  border:1px solid #e6cf9d;
}
.main-head .vt-year:empty{display:none;}

/* ---------- صندوق السنة ---------- */
.year-box .yl-change{display:none;}
/* أزرار إضافة/حذف سنة: في لوحة المتابعة فقط */
body:not([data-current-view="overview"]) #addYearBtn,
body:not([data-current-view="overview"]) #deleteYearBtn{display:none!important;}
body:not([data-current-view="overview"]) .year-box .yl-full{display:none;}
body:not([data-current-view="overview"]) .year-box .yl-change{display:inline;}

/* ---------- زر الحفظ على السحابة ---------- */
#saveBtn{
  position:relative;display:inline-flex!important;align-items:center;gap:12px!important;
  height:54px!important;min-height:54px;padding:0 18px 0 22px!important;border-radius:15px!important;
  color:#fff!important;text-align:start;
  background:
    linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 55%),
    linear-gradient(135deg,#1f5a51 0%,#123d37 55%,#0c2c28 100%)!important;
  border:1px solid #0b2b28!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(11,43,40,.85)!important;
  transition:transform .12s ease,box-shadow .2s ease,background .25s ease;
}
#saveBtn::before{
  /* أيقونة السحابة داخل مربع ذهبي */
  width:34px!important;height:34px!important;border-radius:10px;
  background:linear-gradient(180deg,#f1dcae,#c69a45)!important;
  -webkit-mask:none!important;mask:none!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
#saveBtn::after{
  content:"";position:absolute;inset-inline-start:18px;top:50%;width:20px;height:20px;margin-top:-10px;margin-inline-start:7px;
  background:#123d37;-webkit-mask:var(--ico-save) center/contain no-repeat;mask:var(--ico-save) center/contain no-repeat;
}
#saveBtn .sb-text{display:flex;flex-direction:column;line-height:1.2;min-width:0;}
#saveBtn .sb-text b{font-size:16px;font-weight:800;color:#fff;white-space:nowrap;}
#saveBtn .sb-state{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:#bfe3d3;white-space:nowrap;}
#saveBtn .sb-state::before{content:"";display:inline-block;flex:0 0 7px;width:7px;height:7px;border-radius:50%;background:#4cc38a;box-shadow:0 0 0 3px rgba(76,195,138,.22);}
#saveBtn:hover:not(:disabled){filter:none!important;transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 14px 28px -12px rgba(11,43,40,.9)!important;}
#saveBtn:active:not(:disabled){transform:translateY(0);}
#saveBtn:disabled{opacity:.7;}

/* توجد تعديلات غير محفوظة: الزر يصبح ذهبيًا وينبض بهدوء */
body.has-unsaved #saveBtn{
  background:
    linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0) 55%),
    linear-gradient(135deg,#c99a42 0%,#a97a24 60%,#8c6219 100%)!important;
  border-color:#82591a!important;
  animation:ssbSavePulse 2.4s ease-in-out infinite;
}
body.has-unsaved #saveBtn::before{background:#fff8ea!important;}
body.has-unsaved #saveBtn::after{background:#8c6219;}
body.has-unsaved #saveBtn .sb-state{color:#fff4dc;}
body.has-unsaved #saveBtn .sb-state::before{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3);}
@keyframes ssbSavePulse{0%,100%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -12px rgba(140,98,25,.9),0 0 0 0 rgba(201,154,66,.45);}50%{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 10px 24px -12px rgba(140,98,25,.9),0 0 0 6px rgba(201,154,66,0);}}
@media (prefers-reduced-motion:reduce){body.has-unsaved #saveBtn{animation:none;}}
/* شريط «يوجد تعديلات غير محفوظة» صار داخل زر الحفظ */
.main #dirtyBanner{display:none!important;}

/* ---------- الجوال: شريط علوي مضغوط ---------- */
@media (max-width:980px){
  .main-head{
    display:grid!important;grid-template-columns:auto minmax(0,1fr);
    grid-template-areas:"menu title" "tools tools";
    gap:10px 12px!important;padding:10px 12px!important;
  }
  .main-head .menu-toggle{grid-area:menu;width:44px;height:44px;border-radius:13px;}
  .main-head .head-title{grid-area:title;align-self:center;}
  .main-head .head-title h1{font-size:20px!important;}
  .main-head .vt-year{font-size:12.5px;padding:2px 10px;}
  .main-head .head-tools{grid-area:tools;display:flex!important;flex-wrap:nowrap!important;gap:8px!important;align-items:stretch;}
  .main-head .year-box{flex:1 1 0!important;min-width:0;padding:4px;gap:4px;border-radius:13px;}
  .main-head .year-box label{display:none!important;}
  .main-head .year-box select{flex:1 1 auto;min-width:64px!important;height:42px!important;font-size:16px!important;padding:0 8px 0 24px!important;text-align:center;-webkit-appearance:none;appearance:none;
    background:#eef5f1 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123d37' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") left 7px center/14px no-repeat!important;}
  .main-head .year-box button{width:36px;height:42px!important;padding:0!important;justify-content:center;font-size:0!important;flex:0 0 auto;}
  .main-head .year-box button::before{width:19px;height:19px;}
  #saveBtn{height:50px!important;min-height:50px;padding:0 12px 0 14px!important;gap:9px!important;flex:0 0 auto!important;border-radius:14px!important;}
  #saveBtn::before{width:30px!important;height:30px!important;border-radius:9px;}
  #saveBtn::after{inset-inline-start:12px;width:18px;height:18px;margin-top:-9px;margin-inline-start:6px;}
  #saveBtn .sb-text b{font-size:14.5px;}
  #saveBtn .sb-state{font-size:11px;}
  /* في المدفوعات والمصروفات: صندوق السنة بدون إضافة/حذف، وزر الحفظ بنصفه الآخر */
  /* شريط الإصدار وآخر حفظ: في لوحة المتابعة فقط على الجوال */
  body:not([data-current-view="overview"]) .main .app-status-footer{display:none!important;}
  /* ترويسة أخف على الجوال */
  .app-letterhead{padding:12px 14px!important;border-radius:18px!important;}
}
@media (max-width:380px){
  #saveBtn .sb-state{display:none;}
  .main-head .head-title h1{font-size:18px!important;}
}

} /* end @media screen */