/* =========================================================
   ديوني - Stylesheet
   Mobile-first, RTL, Design tokens matching brand reference
   ========================================================= */

/* ---------- Local Cairo font faces (offline, no CDN) ---------- */
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-ExtraLight.ttf') format('truetype');
  font-weight:200;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-Light.ttf') format('truetype');
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-Regular.ttf') format('truetype');
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-Medium.ttf') format('truetype');
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-SemiBold.ttf') format('truetype');
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-Bold.ttf') format('truetype');
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-ExtraBold.ttf') format('truetype');
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('../fonts/Cairo-Black.ttf') format('truetype');
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
/* Western/Latin digits only (U+0030-0039): forces plain Latin numeral
   glyphs for amounts, invoices, phone numbers, dates, tables, etc.,
   overriding any Arabic-locale numeral shaping, without altering the
   actual text/data content. */
@font-face{
  font-family:'Cairo';
  src:url('../fonts/roboto_medium_numbers.ttf') format('truetype');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0030-0039;
}

:root{
  --navy: #0B2A5B;
  --navy-dark: #071c40;
  --navy-light: #143a78;
  --green: #8EF0B2;
  --green-dark: #1E9E5A;
  --green-darker: #157a45;
  --red: #E5484D;
  --red-bg: #FDE8E8;
  --amber: #B98A00;
  --amber-bg: #FFF4D6;
  --green-bg: #E4F9EC;
  --blue-bg: #E7EEFB;
  --white: #FFFFFF;
  --bg: #F4F6FB;
  --card: #FFFFFF;
  --text: #101828;
  --text-muted: #6B7280;
  --border: #E7EAF0;
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-pill: 999px;
  --shadow-sm: 0 2px 8px rgba(11,42,91,0.06);
  --shadow: 0 8px 24px rgba(11,42,91,0.08);
  --shadow-lg: 0 16px 40px rgba(11,42,91,0.14);
  --nav-h: 68px;
  --font: 'Cairo', 'Tajawal', system-ui, sans-serif;
  --transition: .2s cubic-bezier(.4,0,.2,1);
}

[data-theme="dark"]{
  --bg:#0B1220;
  --card:#111A2E;
  --text:#EDF1F8;
  --text-muted:#8B95AA;
  --border:#1E2A44;
  --red-bg:#3A1620;
  --amber-bg:#3A2E0C;
  --green-bg:#0F2E1E;
  --blue-bg:#132038;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.35);
  --shadow: 0 8px 24px rgba(0,0,0,0.4);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font);
  background:var(--bg);
  color:var(--text);
  direction:rtl;
  text-align:right;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 35px);
  transition:background var(--transition), color var(--transition);
}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
.container-app{
  max-width:520px;
  margin:0 auto;
  padding:16px;
  padding-bottom:120px;
}
@media (min-width:768px){
  .container-app{max-width:640px;}
}
@media (min-width:1024px){
  .container-app{max-width:900px;padding:24px;}
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px;
  max-width:520px;
  margin:0 auto;
  gap:12px;
}
@media (min-width:768px){ .topbar{max-width:640px;} }
@media (min-width:1024px){ .topbar{max-width:900px;padding:20px 24px;} }

.topbar .brand{
  font-weight:800;
  font-size:1.15rem;
  color:var(--navy);
}
[data-theme="dark"] .topbar .brand{color:#EDF1F8;}
.icon-btn{
  width:42px;height:42px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--navy);
  cursor:pointer;
  transition:transform var(--transition), background var(--transition);
  position:relative;
}
.icon-btn:active{transform:scale(.92);}
.icon-btn .dot{
  position:absolute;top:6px;left:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--red);border:2px solid var(--bg);
}
.search-pill{
  flex:1;
  display:flex;align-items:center;gap:10px;
  background:var(--blue-bg);
  border-radius:var(--radius-pill);
  padding:10px 18px;
  color:var(--navy);
}
[data-theme="dark"] .search-pill{color:#cfe0ff;}
.search-pill input{
  background:transparent;border:0;outline:0;flex:1;color:inherit;font-size:.95rem;
}
.search-pill input::placeholder{color:var(--navy);opacity:.55;}

/* ---------- Hero balance card ---------- */
.hero-card{
  background:linear-gradient(135deg,var(--navy) 0%, var(--navy-dark) 100%);
  border-radius:var(--radius-lg);
  color:#fff;
  padding:24px;
  box-shadow:var(--shadow);
  position:relative;
  overflow:hidden;
}
.hero-card::after{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(120px 120px at 90% 10%, rgba(142,240,178,.18), transparent 70%);
}
.hero-card .hc-label{font-size:.85rem;opacity:.75;position:relative;}
.hero-card .hc-amount{font-size:2rem;font-weight:800;margin-top:6px;position:relative;}
.hero-card .hc-amount small{font-size:1rem;font-weight:600;opacity:.8;margin-inline-start:6px;}
.hero-card .hc-badges{display:flex;gap:8px;margin-top:14px;position:relative;flex-wrap:wrap;}
.pill{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:var(--radius-pill);
  font-size:.8rem;font-weight:700;
}
.pill-green{background:var(--green);color:var(--navy-dark);}
.pill-ghost{background:rgba(255,255,255,.14);color:#fff;}

/* ---------- Stat grid (dashboard) ---------- */
.stat-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;
}
.stat-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  box-shadow:var(--shadow-sm);
}
.stat-card .st-icon{
  width:38px;height:38px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;font-size:1rem;
}
.stat-card .st-value{font-weight:800;font-size:1.25rem;}
.stat-card .st-label{color:var(--text-muted);font-size:.8rem;margin-top:2px;}

/* ---------- Quick actions ---------- */
.quick-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;}
.qa-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:20px 12px;
  text-align:center;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
}
.qa-card:active{transform:scale(.97);}
.qa-card .qa-icon{
  width:48px;height:48px;border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 10px;font-size:1.2rem;
}
.qa-card.navy .qa-icon{background:var(--navy);color:var(--green);}
.qa-card.green .qa-icon{background:var(--green);color:var(--navy-dark);}
.qa-card .qa-label{font-weight:700;font-size:.9rem;}

/* ---------- Section header ---------- */
.section-head{
  display:flex;align-items:center;justify-content:space-between;
  margin:22px 0 12px;
}
.section-head h2{font-size:1.05rem;font-weight:800;margin:0;}
.section-head a{color:var(--navy);font-size:.85rem;font-weight:700;}
[data-theme="dark"] .section-head a{color:var(--green);}

/* ---------- Filter chips ---------- */
.chip-row{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;}
.chip-row::-webkit-scrollbar{display:none;}
.chip{
  flex:0 0 auto;
  padding:9px 18px;
  border-radius:var(--radius-pill);
  border:1px solid var(--border);
  background:var(--card);
  font-size:.85rem;font-weight:700;
  color:var(--text);
  cursor:pointer;
  white-space:nowrap;
  transition:all var(--transition);
}
.chip.active{background:var(--green);border-color:var(--green);color:var(--navy-dark);}

/* ---------- List item / customer card ---------- */
.list-card{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:16px;
  margin-bottom:12px;
  box-shadow:var(--shadow-sm);
  cursor:pointer;
  transition:transform var(--transition), box-shadow var(--transition);
}
.list-card:active{transform:scale(.98);}
.list-card .lc-right{text-align:left;}
.lc-amount{font-weight:800;font-size:1.05rem;}
.lc-amount.debt{color:var(--red);}
.lc-amount.zero{color:var(--text-muted);}
.lc-sub{font-size:.78rem;color:var(--text-muted);margin-top:4px;}
.lc-name{font-weight:700;font-size:1rem;}
.lc-meta{font-size:.78rem;color:var(--text-muted);margin-top:4px;}
.avatar{
  width:46px;height:46px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:1.05rem;flex:0 0 auto;
}
.badge-status{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);
}
.badge-late{background:var(--red-bg);color:var(--red);}
.badge-wait{background:var(--blue-bg);color:var(--navy);}
.badge-partial{background:var(--green-bg);color:var(--green-darker);}
.badge-paid{background:var(--green-bg);color:var(--green-darker);}

/* ---------- Buttons ---------- */
.btn-app{
  display:flex;align-items:center;justify-content:center;gap:8px;
  border:0;border-radius:var(--radius);
  padding:15px;font-weight:800;font-size:.95rem;
  cursor:pointer;width:100%;
  transition:transform var(--transition), filter var(--transition);
}
.btn-app:active{transform:scale(.98);}
.btn-navy{background:var(--navy);color:#fff;}
.btn-navy:hover{filter:brightness(1.1);}
.btn-green{background:var(--green-dark);color:#fff;}
.btn-green:hover{filter:brightness(1.08);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-light{background:var(--blue-bg);color:var(--navy);}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.fab{
  position:fixed;
  bottom:calc(var(--nav-h) + 18px);
  left:50%;transform:translateX(-50%);
  width:60px;height:60px;border-radius:50%;
  background:var(--green);color:var(--navy-dark);
  display:flex;align-items:center;justify-content:center;
  font-size:1.5rem;box-shadow:var(--shadow-lg);
  border:0;cursor:pointer;z-index:40;
  transition:transform var(--transition);
}
.fab:active{transform:translateX(-50%) scale(.92);}
@media (min-width:768px){
  .fab{left:auto;right:calc(50% - 260px);transform:none;}
  .fab:active{transform:scale(.92);}
}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:fixed;bottom:0;left:0;right:0;
  background:var(--card);
  border-top:1px solid var(--border);
  display:flex;
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  z-index:30;
  box-shadow:0 -4px 20px rgba(11,42,91,.06);
}
.bn-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:6px 2px;border-radius:14px;color:var(--text-muted);
  font-size:.68rem;font-weight:700;cursor:pointer;transition:all var(--transition);
}
.bn-item i{font-size:1.05rem;}
.bn-item.active{color:var(--navy-dark);background:var(--green);}
[data-theme="dark"] .bn-item.active{color:var(--navy-dark);}
.bn-item.center-add{color:var(--navy);}
.bn-item.center-add i{font-size:1.3rem;}

/* ---------- Forms ---------- */
.field{margin-bottom:16px;}
.field label{display:block;font-size:.85rem;font-weight:700;color:var(--text-muted);margin-bottom:8px;}
.field .control{
  width:100%;
  background:var(--card);
  border:1.5px solid var(--border);
  border-radius:var(--radius);
  padding:14px 16px;
  font-size:.95rem;color:var(--text);
  outline:0;transition:border-color var(--transition);
}
.field .control:focus{border-color:var(--green-dark);}
.field textarea.control{resize:vertical;min-height:90px;}
.upload-box{
  border:1.5px dashed var(--border);
  border-radius:var(--radius);
  padding:22px;text-align:center;color:var(--text-muted);
  cursor:pointer;font-size:.9rem;font-weight:700;
  transition:border-color var(--transition);
}
.upload-box:hover{border-color:var(--green-dark);}
.upload-box i{display:block;font-size:1.4rem;margin-bottom:8px;color:var(--navy);}

/* ---------- Cards / panels ---------- */
.panel{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-sm);
}
.info-tile{
  background:var(--blue-bg);border-radius:var(--radius);padding:16px;
  display:flex;align-items:center;justify-content:space-between;
}
[data-theme="dark"] .info-tile{background:var(--blue-bg);}
.info-tile .it-label{font-size:.78rem;color:var(--text-muted);}
.info-tile .it-value{font-weight:800;font-size:1.05rem;margin-top:2px;}
.info-tile .it-icon{
  width:38px;height:38px;border-radius:10px;background:var(--card);
  display:flex;align-items:center;justify-content:center;color:var(--navy);
}

/* Timeline (customer profile transactions) */
.timeline{position:relative;padding-inline-end:26px;}
.tl-item{
  position:relative;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;margin-bottom:14px;
  display:flex;align-items:center;justify-content:space-between;
}
.tl-item::after{
  content:"";position:absolute;top:50%;left:-26px;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  background:var(--card);border:2px solid var(--border);
}
.tl-dot{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:.85rem;flex:0 0 auto;
}
.tl-dot.debt{background:var(--red);}
.tl-dot.payment{background:var(--green-dark);}
.tl-title{font-weight:700;font-size:.85rem;}
.tl-title.debt{color:var(--red);}
.tl-title.payment{color:var(--green-darker);}
.tl-sub{font-size:.75rem;color:var(--text-muted);margin-top:3px;}
.tl-amount{font-weight:800;}
.tl-amount.debt{color:var(--red);}
.tl-amount.payment{color:var(--green-darker);}

/* ---------- Login page ---------- */

.auth-wrap{
    min-height:100dvh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    padding:48px 20px 30px;
    background:linear-gradient(180deg,#EAF0FB 0%,#F4F6FB 55%,#EAF7EF 100%);
}

.auth-logo{
    width:120px;
    height:120px;
    margin:0 auto 22px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.auth-logo{
    border-radius:24%;
    overflow:hidden;
    filter:drop-shadow(0 14px 28px rgba(11,42,91,.18));
}

.auth-logo img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
    filter:none;
}

.auth-title{
    margin:0;
    text-align:center;
    font-size:2rem;
    font-weight:800;
    color:var(--navy);
}

[data-theme="dark"] .auth-title{
    color:#fff;
}

.auth-sub{
    margin:10px 0 16px;
    text-align:center;
    color:var(--text-muted);
    font-size:.95rem;
    line-height:1.6;
}

.auth-card{
    width:100%;
    max-width:420px;
    margin:0 auto;
    background:var(--card);
    border-radius:var(--radius-lg);
    box-shadow:var(--shadow);
    padding:22px;
}

.auth-tabs{
    display:flex;
    border-bottom:1px solid var(--border);
    margin-bottom:20px;
}

.auth-tabs .tab{
    flex:1;
    text-align:center;
    padding:10px 0;
    font-weight:700;
    color:var(--text-muted);
    cursor:pointer;
    border-bottom:2px solid transparent;
    transition:.2s;
}

.auth-tabs .tab.active{
    color:var(--navy);
    border-color:var(--navy);
}

[data-theme="dark"] .auth-tabs .tab.active{
    color:#fff;
    border-color:var(--green);
}

.remember-row{
    display:flex;
    align-items:flex-start;
    gap:10px;
    background:var(--blue-bg);
    border-radius:var(--radius);
    padding:12px 14px;
    font-size:.8rem;
    color:var(--text-muted);
    margin-bottom:18px;
}

.divider-or{
    display:flex;
    align-items:center;
    gap:12px;
    color:var(--text-muted);
    font-size:.8rem;
    margin:16px 0;
}

.divider-or::before,
.divider-or::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--border);
}

.social-row{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
}

.social-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    padding:12px;
    background:var(--card);
    border:1.5px solid var(--border);
    border-radius:var(--radius);
    font-weight:700;
    font-size:.85rem;
    cursor:pointer;
    transition:.2s;
}

.social-btn:hover{
    border-color:var(--navy);
    transform:translateY(-2px);
}

/* ---------- Invoice ---------- */
.invoice-wrap{max-width:400px;margin:0 auto;padding:16px;}
.invoice-top{display:flex;align-items:center;justify-content:space-between;padding:6px 4px 14px;}
.invoice-card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--border);
  padding:22px;position:relative;
}
.invoice-logo{
  width:56px;height:56px;border-radius:16px;background:var(--navy);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin:0 auto 10px;
}
.invoice-card h3{text-align:center;margin:4px 0;font-weight:800;color:var(--navy);}
.invoice-card .inv-sub{text-align:center;color:var(--text-muted);font-size:.82rem;margin:2px 0;}
.inv-divider{border:0;border-top:1px dashed var(--border);margin:16px 0;}
.inv-row{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:10px;}
.inv-row b{font-weight:800;}
table.inv-table{width:100%;border-collapse:collapse;font-size:.85rem;}
table.inv-table th{color:var(--text-muted);font-weight:700;text-align:right;padding-bottom:8px;border-bottom:1px solid var(--border);}
table.inv-table td{padding:8px 0;border-bottom:1px dashed var(--border);}
.inv-total-box{background:var(--blue-bg);border-radius:var(--radius);padding:14px;margin-top:14px;}
.inv-total-box .inv-row:last-child{margin-bottom:0;}
.inv-remain{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:12px;margin-top:14px;
}
.inv-qr{width:56px;height:56px;background:var(--bg);border-radius:8px;}
.inv-thanks{text-align:center;font-size:.82rem;color:var(--text-muted);margin-top:16px;}
.inv-actions{max-width:400px;margin:14px auto 0;display:flex;flex-direction:column;gap:10px;}

@media print{
  .bottom-nav,.fab,.no-print{display:none !important;}
  body{padding:0;background:#fff;}
  .invoice-card{box-shadow:none;border:none;}
}

/* ---------- Settings ---------- */
.settings-group{margin-bottom:22px;}
.settings-group h3{font-size:.85rem;color:var(--text-muted);margin-bottom:10px;font-weight:700;}
.settings-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card);border:1px solid var(--border);
  padding:15px 16px;
}
.settings-row:first-of-type{border-radius:var(--radius) var(--radius) 0 0;}
.settings-row:last-of-type{border-radius:0 0 var(--radius) var(--radius);border-top:none;}
.settings-row:not(:first-of-type){border-top:none;}
.settings-row .sr-left{display:flex;align-items:center;gap:12px;}
.settings-row .sr-icon{
  width:38px;height:38px;border-radius:10px;background:var(--blue-bg);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.switch{position:relative;width:46px;height:26px;flex:0 0 auto;}
.switch input{opacity:0;width:0;height:0;}
.switch .slider{
  position:absolute;inset:0;background:var(--border);border-radius:var(--radius-pill);
  cursor:pointer;transition:var(--transition);
}
.switch .slider::before{
  content:"";position:absolute;width:20px;height:20px;left:3px;top:3px;
  background:#fff;border-radius:50%;transition:var(--transition);box-shadow:var(--shadow-sm);
}
.switch input:checked + .slider{background:var(--green-dark);}
.switch input:checked + .slider::before{transform:translateX(-20px);}

/* Empty state */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-muted);}
.empty-state i{font-size:2.4rem;color:var(--border);margin-bottom:14px;display:block;}

/* Toast helper spacing for sweetalert rtl handled inline */
.text-muted-app{color:var(--text-muted);}
.mt-app{margin-top:16px;}
.hidden{display:none !important;}

::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}

/* =========================================================
   إضافات: الفاتورة الاحترافية (تصميم محدث)
   ========================================================= */
.paper-size-bar{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.paper-size-bar .chip{padding:7px 12px;font-size:.75rem;}

.inv-info-box{
  background:var(--blue-bg);border-radius:var(--radius);padding:14px 16px;margin-top:14px;
}
.inv-info-row{display:flex;justify-content:space-between;align-items:center;font-size:.83rem;margin-bottom:9px;}
.inv-info-row:last-child{margin-bottom:0;}
.inv-info-row b{font-weight:800;}
.inv-type-badge{
  display:inline-flex;padding:3px 12px;border-radius:var(--radius-pill);font-size:.75rem;font-weight:800;
}
.inv-type-badge.type-cash{background:var(--green-bg);color:var(--green-darker);}
.inv-type-badge.type-credit{background:var(--amber-bg);color:var(--amber);}

.debt-status-pill{
  display:inline-flex;align-items:center;gap:4px;padding:3px 12px;border-radius:var(--radius-pill);
  font-size:.78rem;font-weight:800;
}
.debt-status-pill.status-paid{background:var(--green-bg);color:var(--green-darker);}
.debt-status-pill.status-due{background:var(--amber-bg);color:var(--amber);}
.debt-status-pill.status-late{background:var(--red-bg);color:var(--red);}

.inv-debt-notice{
  display:none;background:var(--red-bg);color:var(--red);border-radius:var(--radius);
  padding:10px 14px;font-size:.8rem;font-weight:700;text-align:center;margin-top:12px;
}
.inv-debt-notice.show{display:block;}

.inv-notes-box{
  background:var(--amber-bg);border-radius:var(--radius);padding:12px 14px;margin-top:14px;
}

.inv-icon-badge{
  position:absolute;bottom:-4px;left:-6px;width:24px;height:24px;border-radius:8px;
  background:var(--card);border:2px solid var(--bg);overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.inv-icon-badge img{width:100%;height:100%;object-fit:contain;}

.inv-payment-section{display:none;margin-top:18px;padding-top:16px;border-top:1px dashed var(--border);}
.inv-payment-section.show{display:block;}
.inv-payment-title{font-weight:800;font-size:.9rem;margin-bottom:10px;text-align:center;color:var(--navy);}
[data-theme="dark"] .inv-payment-title{color:#fff;}
.inv-payment-methods{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.pm-item{
  background:var(--blue-bg);border-radius:var(--radius-sm);padding:10px;text-align:center;
}
.pm-item-head{display:flex;flex-direction:column;align-items:center;gap:6px;margin-bottom:6px;}
.pm-logo{width:34px;height:34px;object-fit:contain;border-radius:8px;background:#fff;}
.pm-icon{
  width:34px;height:34px;border-radius:8px;background:var(--navy);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:.95rem;
}
.pm-name{font-weight:800;font-size:.78rem;}
.pm-detail{display:flex;justify-content:space-between;font-size:.68rem;color:var(--text-muted);gap:6px;margin-top:3px;}
.pm-detail b{color:var(--text);font-weight:700;}
.pm-qr{width:52px;height:52px;margin:6px auto 0;display:block;border-radius:6px;background:#fff;}
.inv-payment-note{
  text-align:center;font-size:.72rem;color:var(--text-muted);margin-top:12px;line-height:1.6;
}

.inv-sign-row{display:none;justify-content:space-between;gap:14px;margin-top:18px;}
.inv-sign-box{flex:1;text-align:center;}
.inv-sign-box canvas, .inv-sign-box img{
  border:1px dashed var(--border);border-radius:8px;width:100%;max-width:140px;height:60px;
  display:block;margin:6px auto 0;touch-action:none;background:#fff;object-fit:contain;
}

.inv-action-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px;
}
.inv-action-grid .btn-app{padding:12px 8px;font-size:.82rem;white-space:nowrap;}
@media (min-width:480px){
  .inv-action-grid{grid-template-columns:repeat(4,1fr);}
}

/* مقاسات الطباعة (عرض وطباعة) */
.invoice-wrap.paper-58{max-width:260px;}
.invoice-wrap.paper-58 .invoice-card{padding:12px;font-size:.8rem;}
.invoice-wrap.paper-80{max-width:340px;}
.invoice-wrap.paper-a4{max-width:700px;}
.invoice-wrap.paper-a5{max-width:480px;}
.invoice-wrap.paper-custom{max-width:400px;}

/* حجم الخط والهوامش (من إعدادات الطباعة) */
.invoice-card.font-sm{font-size:.82rem;}
.invoice-card.font-md{font-size:.92rem;}
.invoice-card.font-lg{font-size:1.05rem;}
.invoice-card.font-sm h3{font-size:1.05rem;}
.invoice-card.font-lg h3{font-size:1.3rem;}
.invoice-card.margin-sm{padding:14px;}
.invoice-card.margin-md{padding:22px;}
.invoice-card.margin-lg{padding:32px;}

@media print{
  .paper-size-bar{display:none !important;}
  .invoice-wrap.paper-58{max-width:58mm;}
  .invoice-wrap.paper-80{max-width:80mm;}
  .invoice-wrap.paper-a4{max-width:190mm;}
  .invoice-wrap.paper-a5{max-width:130mm;}
  .invoice-wrap.paper-custom{max-width:var(--custom-paper-width,58mm);}
  .invoice-wrap{margin:0 auto;padding:0;}
  @page{margin:8mm;}
}

/* =========================================================
   إضافات: صفحات إعدادات طرق السداد والهوية
   ========================================================= */
.brand-preview{
  width:60px;height:60px;border-radius:16px;background:var(--navy);color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex:0 0 auto;overflow:hidden;
}
.brand-preview img{width:100%;height:100%;object-fit:contain;background:#fff;}

.pm-row{
  display:flex;align-items:center;gap:10px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:12px;margin-bottom:10px;cursor:grab;
}
.pm-row.dragging{opacity:.4;}
.pm-row-drag{color:var(--text-muted);cursor:grab;padding:0 2px;}
.pm-row-logo{width:38px;height:38px;object-fit:contain;border-radius:8px;background:var(--blue-bg);}
.pm-row-icon{
  width:38px;height:38px;border-radius:8px;background:var(--blue-bg);color:var(--navy);
  display:flex;align-items:center;justify-content:center;
}
.pm-row-info{flex:1;cursor:pointer;}
.pm-row-name{font-weight:700;font-size:.9rem;}
.pm-row-meta{font-size:.74rem;color:var(--text-muted);margin-top:2px;}

.detail-row{
  background:var(--blue-bg);border-radius:var(--radius-sm);padding:10px;margin-bottom:8px;
}

/* =========================================================
   إصلاحات واجهة المستخدم (UI Fixes)
   ========================================================= */
html{ -webkit-text-size-adjust:100%; }
body{
  overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:none;
}
/* ضمان عدم تغطية شريط التنقل السفلي أو الزر العائم لآخر عنصر في أي قائمة قابلة للتمرير */
#recentList, #repList, #methodsList{
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 24px);
}
#customerList{
  padding-bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 90px);
  min-height:1px;
}
.container-app{overflow:visible;}
/* التأكد من أن أي مودال/عناصر منسدلة لا تُقطع أفقياً على الشاشات الصغيرة */
.modal-dialog{margin:12px;}
@media (max-width:360px){
  .inv-action-grid .btn-app{font-size:.74rem;padding:10px 4px;}
  .stat-grid, .quick-actions{gap:8px;}
}

/* Preserves the fa-spin rotation animation for the local SVG icon system
   (icons.js) now that the Font Awesome stylesheet is no longer loaded on
   every page. Kept functionally identical to Font Awesome's own fa-spin. */
.fa-spin{
  animation:ic-fa-spin 2s infinite linear;
}
@keyframes ic-fa-spin{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

/* Defensive rule: guarantees no leftover ::before glyph can ever render
   on top of a locally-replaced SVG icon. Font Awesome is not loaded
   anywhere in this app anymore, so this has no visible effect today —
   it only guards against any future icon font being reintroduced. */
i.ic-replaced::before, span.ic-replaced::before{ content:none !important; }

/* ---------- Night mode readability override ----------
   Night mode keeps the dark surfaces and layout intact, while all visible
   text, labels, icons, form controls, placeholders, and inline text colors
   become white. Removing data-theme="dark" restores the original palette
   because these rules are scoped exclusively to the dark theme. */
[data-theme="dark"] body,
[data-theme="dark"] body *,
[data-theme="dark"] body *::before,
[data-theme="dark"] body *::after {
  color: #FFFFFF !important;
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder,
[data-theme="dark"] select option {
  color: #FFFFFF !important;
  opacity: 1 !important;
}
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] button {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
[data-theme="dark"] .hero-card,
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-success,
[data-theme="dark"] .bn-item.active {
  color: #FFFFFF !important;
}
[data-theme="dark"] img,
[data-theme="dark"] canvas,
[data-theme="dark"] svg {
  color: #FFFFFF !important;
}

/* ---------- Night-mode surface contrast ---------- */
[data-theme="dark"] .card,
[data-theme="dark"] .panel,
[data-theme="dark"] .auth-card,
[data-theme="dark"] .invoice-card,
[data-theme="dark"] .info-tile,
[data-theme="dark"] .customer-card,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .dropdown-menu,
[data-theme="dark"] .list-group,
[data-theme="dark"] .table-wrap {
  background: #111A2E !important;
  border-color: #2A3958 !important;
}
[data-theme="dark"] .control,
[data-theme="dark"] input,
[data-theme="dark"] select,
[data-theme="dark"] textarea,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background: #18243A !important;
  border-color: #3A4B6B !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
[data-theme="dark"] .control:focus,
[data-theme="dark"] input:focus,
[data-theme="dark"] select:focus,
[data-theme="dark"] textarea:focus {
  background: #1D2C46 !important;
  border-color: #8EF0B2 !important;
  outline-color: #8EF0B2 !important;
}
[data-theme="dark"] .chip,
[data-theme="dark"] .filter-chip,
[data-theme="dark"] .inv-total-box,
[data-theme="dark"] .pm-item,
[data-theme="dark"] .settings-row,
[data-theme="dark"] .setting-row,
[data-theme="dark"] .paper-size-bar,
[data-theme="dark"] .notice,
[data-theme="dark"] .alert {
  background: #16243B !important;
  border-color: #334666 !important;
}
[data-theme="dark"] table,
[data-theme="dark"] th,
[data-theme="dark"] td {
  background-color: #111A2E !important;
  border-color: #334666 !important;
}
[data-theme="dark"] .btn,
[data-theme="dark"] button,
[data-theme="dark"] .btn-app,
[data-theme="dark"] .icon-btn {
  border-color: #3A4B6B !important;
}
[data-theme="dark"] .switch .slider {
  background: #3A4B6B !important;
}
[data-theme="dark"] .switch input:checked + .slider {
  background: #1E9E5A !important;
}
[data-theme="dark"] ::selection {
  background: #8EF0B2 !important;
  color: #071C40 !important;
}

/* ---------- Night-mode dialogs and inline surfaces ---------- */
[data-theme="dark"] .swal2-popup,
[data-theme="dark"] .swal2-modal,
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-body,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .offcanvas,
[data-theme="dark"] .popover,
[data-theme="dark"] .tooltip-inner {
  background: #111A2E !important;
  color: #FFFFFF !important;
  border-color: #334666 !important;
}
[data-theme="dark"] .swal2-title,
[data-theme="dark"] .swal2-html-container,
[data-theme="dark"] .swal2-validation-message,
[data-theme="dark"] .modal-title,
[data-theme="dark"] .modal-body *,
[data-theme="dark"] .modal-header *,
[data-theme="dark"] .modal-footer * {
  color: #FFFFFF !important;
}
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select,
[data-theme="dark"] .modal-content input,
[data-theme="dark"] .modal-content select,
[data-theme="dark"] .modal-content textarea {
  background: #1B2A45 !important;
  color: #FFFFFF !important;
  border: 1px solid #58739B !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
[data-theme="dark"] .swal2-input::placeholder,
[data-theme="dark"] .swal2-textarea::placeholder,
[data-theme="dark"] .modal-content input::placeholder,
[data-theme="dark"] .modal-content textarea::placeholder {
  color: #D9E4F5 !important;
  opacity: 1 !important;
}
[data-theme="dark"] .swal2-confirm,
[data-theme="dark"] .swal2-cancel,
[data-theme="dark"] .modal-content .btn {
  color: #FFFFFF !important;
  border-color: #58739B !important;
}
[data-theme="dark"] [style*="background:#fff"],
[data-theme="dark"] [style*="background: #fff"],
[data-theme="dark"] [style*="background:#ffffff"],
[data-theme="dark"] [style*="background: #ffffff"],
[data-theme="dark"] [style*="background:white"] {
  background: #1B2A45 !important;
}

/* ---------- Debtix night-mode polish: scoped fixes only ---------- */
[data-theme="dark"] .swal2-container.swal2-top,
[data-theme="dark"] .swal2-container.swal2-top-end,
[data-theme="dark"] .swal2-container.swal2-top-start {
  pointer-events: none !important;
  align-items: flex-start !important;
  padding-top: max(12px, env(safe-area-inset-top)) !important;
}
[data-theme="dark"] .swal2-container.swal2-top .swal2-popup,
[data-theme="dark"] .swal2-container.swal2-top-end .swal2-popup,
[data-theme="dark"] .swal2-container.swal2-top-start .swal2-popup {
  pointer-events: auto !important;
  width: min(92vw, 420px) !important;
  margin: 0 auto !important;
}
[data-theme="dark"] .debtix-compact-customer-dialog {
  width: min(92vw, 430px) !important;
  padding: 18px 16px 14px !important;
  border-radius: 18px !important;
}
[data-theme="dark"] .debtix-compact-customer-dialog .swal2-title {
  font-size: 1.25rem !important;
  margin: 0 0 10px !important;
}
[data-theme="dark"] .debtix-compact-customer-dialog .swal2-input {
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 7px 0 !important;
  min-height: 46px !important;
  font-size: 1rem !important;
}
[data-theme="dark"] .debtix-compact-customer-dialog .swal2-actions {
  margin-top: 10px !important;
  gap: 8px !important;
}
[data-theme="dark"] .debtix-compact-customer-dialog .swal2-confirm,
[data-theme="dark"] .debtix-compact-customer-dialog .swal2-cancel {
  min-height: 44px !important;
  margin: 0 !important;
}

/* Bootstrap customer form: compact mobile sheet instead of a full-height panel. */
[data-theme="dark"] #customerModal .modal-dialog {
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  margin: 12px auto !important;
}
[data-theme="dark"] #customerModal .modal-content {
  max-height: min(82vh, 680px) !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
  background: #111A2E !important;
}
[data-theme="dark"] #customerModal .modal-header,
[data-theme="dark"] #customerModal .modal-body {
  padding: 14px 16px !important;
}
[data-theme="dark"] #customerModal .field {
  margin-bottom: 10px !important;
}
[data-theme="dark"] #customerModal .btn-app {
  min-height: 46px !important;
}

/* Real dashboard classes (the markup uses st-icon/qa-icon, not stat-icon). */
[data-theme="dark"] .st-icon,
[data-theme="dark"] .qa-icon {
  background: #1B3A5B !important;
  color: #FFFFFF !important;
  border-color: #4B6F96 !important;
}
[data-theme="dark"] .st-icon i,
[data-theme="dark"] .qa-icon i,
[data-theme="dark"] .bottom-nav i,
[data-theme="dark"] .fab i {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}

/* Login page: explicitly paint the dark surface and all labels/text. */
[data-theme="dark"] body:has(.auth-wrap),
[data-theme="dark"] body:has(.auth-wrap) .auth-wrap,
[data-theme="dark"] body:has(.auth-wrap) .auth-card {
  background: #0B1426 !important;
  color: #FFFFFF !important;
}
[data-theme="dark"] body:has(.auth-wrap) .auth-wrap *,
[data-theme="dark"] body:has(.auth-wrap) .auth-card * {
  color: #FFFFFF !important;
}
[data-theme="dark"] body:has(.auth-wrap) .auth-wrap input,
[data-theme="dark"] body:has(.auth-wrap) .auth-wrap select,
[data-theme="dark"] body:has(.auth-wrap) .auth-wrap textarea {
  background: #1B2A45 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-color: #58739B !important;
}
[data-theme="dark"] body:has(.auth-wrap) .auth-wrap input::placeholder {
  color: #D9E4F5 !important;
  opacity: 1 !important;
}

/* One night-mode icon surface with white icon glyphs. */
[data-theme="dark"] .st-icon,
[data-theme="dark"] .qa-icon,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .btn-app,
[data-theme="dark"] .quick-action,
[data-theme="dark"] .stat-icon,
[data-theme="dark"] .action-icon,
[data-theme="dark"] .nav-icon,
[data-theme="dark"] .icon-box {
  background: #1B3A5B !important;
  color: #FFFFFF !important;
  border-color: #4B6F96 !important;
}
[data-theme="dark"] .st-icon i,
[data-theme="dark"] .qa-icon i,
[data-theme="dark"] .st-icon svg,
[data-theme="dark"] .qa-icon svg,
[data-theme="dark"] .icon-btn i,
[data-theme="dark"] .btn-app i,
[data-theme="dark"] .quick-action i,
[data-theme="dark"] .stat-icon i,
[data-theme="dark"] .action-icon i,
[data-theme="dark"] .nav-icon i,
[data-theme="dark"] .icon-box i,
[data-theme="dark"] .icon-btn svg,
[data-theme="dark"] .btn-app svg,
[data-theme="dark"] .quick-action svg {
  color: #FFFFFF !important;
  fill: #FFFFFF !important;
  stroke: #FFFFFF !important;
}


/* Add New Debt -> Add Customer: compact light-mode layout only. */
[data-theme="light"] .debtix-compact-customer-dialog {
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  padding: 18px 16px 14px !important;
  margin: 0 auto !important;
  border-radius: 18px !important;
  box-sizing: border-box !important;
}
[data-theme="light"] .debtix-compact-customer-dialog .swal2-title {
  font-size: clamp(1.35rem, 5vw, 1.75rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 10px !important;
}
[data-theme="light"] .debtix-compact-customer-dialog .swal2-html-container {
  margin: 0 !important;
  padding: 0 !important;
}
[data-theme="light"] .debtix-compact-customer-dialog .swal2-input {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 46px !important;
  margin: 8px 0 !important;
  box-sizing: border-box !important;
  font-size: 1rem !important;
}
[data-theme="light"] .debtix-compact-customer-dialog .swal2-actions {
  width: 100% !important;
  margin: 12px 0 0 !important;
  gap: 8px !important;
}
[data-theme="light"] .debtix-compact-customer-dialog .swal2-confirm,
[data-theme="light"] .debtix-compact-customer-dialog .swal2-cancel {
  min-height: 44px !important;
  margin: 0 !important;
  flex: 1 1 0 !important;
}

/* Existing Customers-page modal: keep the light dialog inside the viewport. */
[data-theme="light"] #customerModal .modal-dialog {
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  margin: 12px auto !important;
}
[data-theme="light"] #customerModal .modal-content {
  max-height: min(82vh, 680px) !important;
  overflow-y: auto !important;
  border-radius: 20px !important;
}
[data-theme="light"] #customerModal .modal-header,
[data-theme="light"] #customerModal .modal-body {
  padding: 14px 16px !important;
}
[data-theme="light"] #customerModal .field {
  margin-bottom: 10px !important;
}
[data-theme="light"] #customerModal .btn-app {
  min-height: 46px !important;
}


/* Per-operation actions in the customer transaction timeline. */
.txn-actions {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--blue-bg);
  color: var(--navy);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}
.txn-actions:active { transform: scale(.94); }
[data-theme="dark"] .txn-actions {
  background: #1B3A5B;
  color: #FFFFFF;
  border-color: #4B6F96;
}
.debtix-txn-menu {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  width: 100%;
}
.debtix-txn-menu button { margin: 0 !important; min-height: 44px; }


/* Transaction edit dialog: viewport-aware layout for narrow and short devices. */
.debtix-transaction-edit-dialog {
  width: min(92vw, 430px) !important;
  max-width: 430px !important;
  max-height: min(88dvh, 720px) !important;
  margin: 0 auto !important;
  padding: clamp(16px, 3.5vw, 26px) !important;
  border-radius: clamp(16px, 4vw, 22px) !important;
  box-sizing: border-box !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}
.debtix-transaction-edit-dialog .swal2-title {
  font-size: clamp(1.35rem, 5.6vw, 2rem) !important;
  line-height: 1.25 !important;
  margin: 0 0 clamp(8px, 2vw, 16px) !important;
}
.debtix-transaction-edit-dialog .swal2-html-container {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}
.debtix-transaction-edit-dialog .swal2-input {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-height: clamp(42px, 7vh, 54px) !important;
  margin: clamp(7px, 1.6vh, 12px) 0 !important;
  box-sizing: border-box !important;
  font-size: clamp(.95rem, 3.8vw, 1.1rem) !important;
}
.debtix-transaction-edit-dialog .swal2-actions {
  width: 100% !important;
  margin: clamp(10px, 2vh, 18px) 0 0 !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
}
.debtix-transaction-edit-dialog .swal2-confirm,
.debtix-transaction-edit-dialog .swal2-cancel {
  flex: 1 1 0 !important;
  min-height: clamp(42px, 7vh, 52px) !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
@media (max-height: 700px) {
  .debtix-transaction-edit-dialog {
    max-height: 92dvh !important;
    padding: 12px !important;
  }
  .debtix-transaction-edit-dialog .swal2-title {
    font-size: 1.3rem !important;
    margin-bottom: 6px !important;
  }
  .debtix-transaction-edit-dialog .swal2-input {
    min-height: 40px !important;
    margin: 5px 0 !important;
  }
  .debtix-transaction-edit-dialog .swal2-actions {
    margin-top: 8px !important;
  }
}

/* شارة جرس شفافة: يبقى الزر نفسه بلا خلفية وبلا إطار مثل زر البحث الحالي. */
.notification-action{position:relative;}
.notification-action .dot{
  position:absolute;
  top:7px;
  inset-inline-start:6px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--red);
  border:2px solid var(--bg);
  pointer-events:none;
}

/* ---------- Notification inbox ---------- */
.notification-item{
  display:flex;
  align-items:flex-start;
  gap:12px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:14px;
  margin-bottom:10px;
  box-shadow:var(--shadow-sm);
}
.notification-item-icon{
  flex:0 0 40px;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:var(--blue-bg);
  color:var(--navy);
}
.notification-item-content{min-width:0;flex:1;}
.notification-item-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;}
.notification-item-head strong{font-size:.92rem;color:var(--text);}
.notification-item-head span{flex:0 0 auto;font-size:.72rem;color:var(--text-muted);}
.notification-item p{margin:4px 0 0;color:var(--text-muted);font-size:.84rem;line-height:1.75;}