/* =========================================================
   Al-Eshan – Premium UI (Desktop + iPhone Safe)
   FINAL app.css (Mobile + iPhone polished, Desktop unchanged)
========================================================= */

/* =========================
   Root variables
========================= */
:root{
  --sidebar-w: 280px;
  --sidebar-bg: #1f242a;

  --card-bg: #2a2f36;
  --card-bg-hover: #343a42;
  --card-active: #1e6bff;

  --glass: rgba(31,36,42,.58);
  --glass-strong: rgba(31,36,42,.72);
  --glass-border: rgba(255,255,255,.12);
  --glass-shadow: 0 18px 40px rgba(0,0,0,.22);

  --thead-bg: rgba(0,0,0,.78);
  --thead-border: rgba(255,255,255,.12);

  --bg-size-desktop: 1200px;
  --bg-size-1200: 900px;
  --bg-size-768: 650px;
}

/* =========================
   Base
========================= */
html, body{
  height: 100%;
}

body{
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, Arial;
  background-color: #e6e6e6;
}

/* =========================================================
   ✅ Background layer (FIXED – works on iPhone)
   (يستبدل body::before)
========================================================= */
.app-bg{
  position: fixed;
  inset: 0;
  z-index: -2;

  background-image: url("/static/img/background.png");
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: var(--bg-size-desktop) auto;

  /* iOS stability */
  transform: translateZ(0);
  will-change: transform;
  pointer-events: none;
}

@media (max-width: 1200px){
  .app-bg{ background-size: var(--bg-size-1200) auto; }
}
@media (max-width: 768px){
  .app-bg{ background-size: var(--bg-size-768) auto; }
}

/* Overlay خفيف */
.app-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(255,255,255,.02);
}

/* =========================
   Sidebar
========================= */
.sidebar{
  position: fixed;
  top: 0;
  right: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--sidebar-bg);
  color: #fff;
  display: flex;
  flex-direction: column;
  z-index: 1000;
}

.sidebar-header{
  padding: 20px 16px;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.brand{
  font-size: 18px;
  font-weight: 900;
  line-height: 1.4;
}
.brand small{
  font-size: 12px;
  opacity: .8;
}

.sidebar-nav.cards{
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.menu-card{
  display: block;
  text-align: center;
  padding: 16px 12px;
  background: var(--card-bg);
  color: #fff;
  text-decoration: none;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 800;
  transition: .15s ease;
}
.menu-card:hover{ background: var(--card-bg-hover); }
.menu-card.active{ background: var(--card-active); }

.sidebar-footer{
  margin-top: auto;
  padding: 16px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.menu-card.danger{ background:#8b1d1d; }
.menu-card.danger:hover{ background:#b32626; }

/* =========================
   Main content
========================= */
.main-content{
  min-height: 100vh;
}

/* Desktop: نفس وضعك تمام */
@media (min-width:768px){
  .main-content{
    margin-right: var(--sidebar-w);
  }
}

/* =========================
   Mobile sidebar (off-canvas)
========================= */
.mobile-menu-btn{
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1200;
  border-radius: 10px;
}

@media (max-width:767.98px){
  .main-content{
    margin-right: 0;
    padding-top: 56px;
  }

  .sidebar{
    right: -320px;
    transition: right .25s ease;
    z-index: 1300;
  }
  .sidebar.open{ right:0; }

  .sidebar-backdrop{
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 1250;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .sidebar-backdrop.show{
    opacity: 1;
    pointer-events: auto;
  }
}

/* =========================
   Cards / Glass
========================= */
.card{
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  border-radius: 16px;
  backdrop-filter: blur(8px);
  overflow: hidden;
}
.card-header{
  background: rgba(0,0,0,.78) !important;
  color:#fff !important;
  font-weight:900;
}
.card-body{ color:#fff; }

.alert{
  background: var(--glass-strong) !important;
  border: 1px solid var(--glass-border) !important;
  color:#fff !important;
}

/* =========================
   Inputs
========================= */
.form-control,
.form-select{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color:#fff !important;
  border-radius:12px;
}
.form-control::placeholder{
  color: rgba(255,255,255,.65) !important;
}
.form-control:focus,
.form-select:focus{
  box-shadow:0 0 0 .2rem rgba(30,107,255,.25) !important;
  border-color: rgba(30,107,255,.45) !important;
}

/* ✅ iOS: منع zoom */
@media (max-width:767.98px){
  input, select, textarea{
    font-size: 16px !important;
  }
}

/* =========================
   Buttons
========================= */
.btn{
  border-radius:12px;
  font-weight:800;
}

/* ✅ أزرار الهيدر على الجوال تصير تحت بعض */
@media (max-width:767.98px){
  .mobile-stack{
    width: 100% !important;
  }
  .mobile-stack > .btn,
  .mobile-stack a.btn{
    width: 100% !important;
  }
}

/* =========================
   Tiles
========================= */
.page-tiles{
  max-width:1100px;
  margin:0 auto;
}

.page-titlebar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom: 16px;
}

.tiles-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
@media (max-width:992px){
  .tiles-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:576px){
  .tiles-grid{ grid-template-columns:1fr; }
}

.tile-card{
  display:flex;
  flex-direction:column;
  justify-content:center;
  text-align:center;
  padding:26px 12px;
  border-radius:16px;
  min-height:110px;

  background: var(--glass) !important;
  border:1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(8px);

  color:#fff;
  text-decoration:none;
  transition: transform .15s ease, background .15s ease;
}
.tile-card:hover{
  transform: translateY(-3px);
  background: rgba(31,36,42,.85) !important;
  color:#fff;
}
.tile-title{
  font-size:18px;
  font-weight:900;
}
.tile-sub{
  font-size:13px;
  opacity:.85;
}

/* =========================
   Tables
========================= */
.table{
  background:transparent !important;
}
.table>:not(caption)>*>*{
  background-color: transparent !important;
}

.table thead th{
  background: var(--thead-bg) !important;
  color:#fff !important;
  font-weight:900;
  text-align:center;
  vertical-align: middle;
}

.table tbody td,
.table tbody th{
  text-align:center;
  vertical-align: middle;
  /* ✅ مهم: النص واضح فوق الزجاج */
  color: #111;
}

/* Hover */
.table-hover tbody tr:hover > *{
  background: rgba(255,255,255,.06) !important;
}

/* Status colors (صفوف) */
.bg-green{ background: rgba(169,209,142,.35) !important; }
.bg-yellow{ background: rgba(255,217,102,.35) !important; }
.bg-red{ background: rgba(255,124,128,.35) !important; }

/* Tables on mobile */
.table-responsive{
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
@media (max-width:767.98px){
  .table{
    font-size: 14px;
  }
}

/* =========================
   ✅ Totals Cards (Glass – same identity)
   Fix: كانت بيضاء والنص أبيض -> الآن مراية مثل الباقي
========================= */
.totals-card{
  background: var(--glass) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  border-radius: 14px;
  backdrop-filter: blur(8px);
}

.totals-card,
.totals-card *{
  color: #fff !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}

.totals-card .text-muted,
.totals-card .small{
  color: rgba(255,255,255,.75) !important;
}

.totals-card .text-danger{
  color: #ff6b6b !important;
  font-weight: 900;
}

/* =========================
   Mobile helpers
========================= */
.mobile-input{
  direction:ltr;
  text-align:left;
  font-weight:600;
}

/* Riyal icon */
.riyal-icon{
  background: transparent !important;
  border: none !important;
}
.riyal-icon img{
  height:18px;
  width:auto;
  display:block;
}

/* =========================
   iPhone Safe Area (Notch)
   - ما يأثر على الديسكتوب
========================= */
@supports (padding: max(0px)) {
  .mobile-menu-btn{
    top: max(10px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
  }

  .sidebar{
    padding-top: env(safe-area-inset-top);
  }

  .main-content{
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-bottom: env(safe-area-inset-bottom);
  }

  .app-bg{
    padding-top: env(safe-area-inset-top);
    box-sizing: border-box;
  }
}
/* =========================
   Totals cards layout on Mobile
   (2 columns on phones, 1 column on very small screens)
   Desktop unchanged
========================= */
@media (max-width: 767.98px){

  /* أي صف يحتوي إجماليات (لأنه غالبًا row g-3) */
  .row.g-3{
    --bs-gutter-x: .75rem;
    --bs-gutter-y: .75rem;
  }

  /* خلّ كروت الإجماليات نصف الشاشة (2 في السطر) */
  .row.g-3 > .col-md-3:has(.totals-card),
  .row.g-3 > .col-md-4:has(.totals-card){
    flex: 0 0 50% !important;
    max-width: 50% !important;
  }

  /* تحسينات شكل الكرت على الجوال */
  .totals-card{
    padding: 12px !important;
    border-radius: 14px !important;
  }

  .totals-card .fs-5{
    font-size: 1.05rem !important;
    line-height: 1.2;
  }
}

/* شاشات صغيرة جدًا (آيفون SE وما شابه): عمود واحد */
@media (max-width: 360px){
  .row.g-3 > .col-md-3:has(.totals-card),
  .row.g-3 > .col-md-4:has(.totals-card){
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}