/* إضافات فوق theme.css */

.stack{ display:flex; flex-direction:column; gap:10px; margin-bottom:14px; }

.footer{ padding:18px 0 28px; }
.muted{ color: var(--muted); }
.small{ font-size:12px; }

.actions{ display:flex; align-items:center; gap:10px; }

/* Login layout */
.auth-wrap{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:16px;
  align-items:start;
}
.auth-card{ padding:22px; }
.auth-side{ padding:22px; }

.row{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:10px;
}

@media (max-width: 900px){
  .auth-wrap{ grid-template-columns: 1fr; }
  .row{ flex-direction:column; align-items:stretch; }
}
.topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}

.filters{
  display:grid;
  grid-template-columns: 1.2fr .6fr .6fr .6fr;
  gap:12px;
  align-items:end;
}

.form-grid{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:12px;
}

.branch-box{
  grid-column: 1 / -1;
  border:1px dashed var(--border);
  border-radius: var(--radius);
  padding:12px;
  background: var(--bg);
}

.actions-td{
  display:flex;
  gap:8px;
  align-items:center;
}
.actions-td form{ margin:0; }

.pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  border:1px solid var(--border);
}
.pill.ok{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.15); }
.pill.off{ background: rgba(0,0,0,.10); border-color: rgba(0,0,0,.25); }

@media (max-width: 900px){
  .filters{ grid-template-columns: 1fr; }
  .form-grid{ grid-template-columns: 1fr; }
  .topbar{ flex-direction:column; align-items:stretch; }
  .actions-td{ flex-direction:column; align-items:stretch; }
}
.quick-grid{
  margin-top:14px;
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
.quick-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow-sm);
  display:flex;
  gap:12px;
  align-items:center;
  transition:.15s;
}
.quick-card:hover{ transform: translateY(-1px); }
.q-ico{
  width:46px; height:46px;
  display:flex; align-items:center; justify-content:center;
  border-radius: 14px;
  background: var(--brand-100);
  font-size:20px;
}
.q-title{ font-weight:900; }
.q-sub{ color:var(--muted); font-size:13px; margin-top:2px; }

@media (max-width: 900px){
  .quick-grid{ grid-template-columns: 1fr; }
}
.table-wrap{
  overflow:auto;
  border-radius: var(--radius);
}

.center{ text-align:center !important; }

.btn-sm{
  padding:8px 10px;
  border-radius: 12px;
  font-size: 13px;
}

.pill.warn{
  background: rgba(0,0,0,.03);
  border-color: rgba(0,0,0,.10);
}
/* Filterbar (Admin Inbox) */
.filterbar{
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

.filterbar-grid{
  display: grid;
  grid-template-columns: 2fr 1fr 1fr auto;
  gap: 10px;
  align-items: end;
}

.fb-item label{
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
}

.fb-item input,
.fb-item select{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--border);
  padding: 10px 12px;
  outline: none;
}

.fb-actions{
  display:flex;
  gap:10px;
  align-items:center;
}

.fb-grow{ min-width: 260px; }

.advanced{
  display:none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border);
}
.advanced.show{ display:block; }

.advanced-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

@media (max-width: 1100px){
  .filterbar-grid{ grid-template-columns: 1fr 1fr; }
  .fb-actions{ justify-content: flex-start; }
  .advanced-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .filterbar-grid{ grid-template-columns: 1fr; }
  .advanced-grid{ grid-template-columns: 1fr; }
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 8px;
  border-radius:999px;
  margin-right:8px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--border);
  background:#fff;
}
.notice{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:14px;
  background:#fff;
  box-shadow: var(--shadow-sm);
}
.notice-danger{
  border-color: rgba(220,38,38,.28);
  background: rgba(220,38,38,.06);
}
.notice-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}
.notice-title{
  font-weight:900;
  font-size:15px;
}
.notice-body{
  margin-top:8px;
  font-size:14px;
  line-height:1.8;
}
.notice-foot{
  margin-top:10px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
/* =========================
   Professional Tables + Meta Cards (RTL)
   ========================= */

/* Table wrap better */
.table-wrap{
  overflow:auto;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: var(--shadow-sm);
}

/* Optional: make long tables easier */
.table-wrap.table-wrap-xl{
  max-height: 72vh;
}

/* Table enhancements */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  overflow:hidden;
  border:0;                 /* لأن table-wrap صار عنده border */
  border-radius: 0;         /* لأن table-wrap صار عنده radius */
  background:#fff;
}

.table th, .table td{
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  text-align:right;
  font-size:14px;
  vertical-align: middle;
}

.table thead th{
  background:#f8fafc;
  font-weight:900;
  position: sticky;
  top: 0;
  z-index: 2;
}

.table tbody tr:hover{
  background: rgba(0,0,0,.04);
}

.table.table-zebra tbody tr:nth-child(even){
  background: #fcfcfc;
}

.table .center{ text-align:center !important; }
.table .nowrap{ white-space: nowrap; }
.table .num{ text-align:center; direction:ltr; }

/* Inputs داخل الجدول */
.table input, .table select{
  height: 40px;
  padding: 8px 10px;
  border-radius: 12px;
  border:1px solid var(--border);
  background:#fff;
  font-size: 13px;
}
.table input:focus, .table select:focus{
  box-shadow: var(--focus);
  border-color: var(--brand-500);
}

/* Buttons inside table */
.table .btn-sm{ padding:8px 10px; border-radius: 12px; font-size:13px; }

/* Meta grid (عرض معلومات فوق الجدول) */
.meta-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:10px;
  margin-top: 12px;
}
.meta-item{
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding:10px 12px;
  background:#fff;
  box-shadow: var(--shadow-sm);
}
.meta-k{
  font-weight:900;
  color: var(--muted);
  font-size:12px;
  margin-bottom: 6px;
}
.meta-v{
  font-weight:900;
  font-size: 14px;
}

/* Status pills (منظمة أكثر) */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-weight:900;
  font-size:12px;
  border:1px solid var(--border);
  background:#fff;
}
.pill.ok{ background: rgba(0,0,0,.05); border-color: rgba(0,0,0,.15); color: #000; }
.pill.warn{ background: rgba(0,0,0,.03); border-color: rgba(0,0,0,.10); color:#4b5563; }
.pill.bad{ background: rgba(0,0,0,.10); border-color: rgba(0,0,0,.25); color:#000; }
.pill.info{ background: rgba(0,0,0,.02); border-color: rgba(0,0,0,.08); color:#374151; }

/* Mobile tweaks */
@media (max-width: 900px){
  .table-wrap.table-wrap-xl{ max-height: none; }
  .meta-grid{ grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px){
  .meta-grid{ grid-template-columns: 1fr; }
}
/* ==========================================
   FINAL FIX: Kill White Cards (even inline)
   Paste at END of static/css/app.css
   ========================================== */

/* أي عنصر بالمحتوى بيه خلفية inline/بيضاء */
.page .main .container [style*="background"],
.page .main .container [style*="background-color"],
.page .main .container [style*="#fff"],
.page .main .container [style*="#FFF"],
.page .main .container [style*="white"],
.page .main .container [style*="rgb(255"],
.page .main .container [style*="rgba(255"]{
  background: rgba(0,0,0,.14) !important;
  background-color: rgba(0,0,0,.14) !important;
  border: 1px solid rgba(120,220,240,.14) !important;
  color: rgba(235,250,255,.88) !important;
  box-shadow: 0 16px 46px rgba(0,0,0,.30) !important;
  border-radius: 20px !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* نخلي النصوص داخلها واضحة */
.page .main .container [style*="background"] *,
.page .main .container [style*="background-color"] *{
  color: rgba(235,250,255,.86) !important;
}

/* روابط/كروت قابلة للنقر (مثل كروت الاستمارات بالصورة) */
.page .main .container a{
  text-decoration: none;
}
.page .main .container a[style*="background"],
.page .main .container a[style*="#fff"],
.page .main .container a[style*="white"]{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

/* إذا عندك دوائر/أزرار صغيرة داخل الكروت (النقاط السود) نخليها متناسقة */
.page .main .container [style*="background"] .dot,
.page .main .container [style*="background"] .circle,
.page .main .container [style*="background"] .icon,
.page .main .container [style*="background"] .badge{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(120,220,240,.14) !important;
  box-shadow: 0 0 18px rgba(120,220,240,.10) !important;
  color: rgba(235,250,255,.88) !important;
}
/* =========================
   Global In-Page Alert Banner (Manual Alerts)
   ========================= */
.alerts-stack{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin: 0 0 14px 0;
}

.notice-banner{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:14px 16px;
  border-radius: 22px;
  border: 1px solid rgba(120,220,240,.14);
  background: rgba(0,0,0,.14);
  box-shadow: 0 16px 46px rgba(0,0,0,.30);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: rgba(235,250,255,.92);
}

.notice-banner *{
  color: inherit !important; /* ✅ يمنع أي عنصر يرجع أسود */
}

.notice-ico{
  width:44px;
  height:44px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex: 0 0 auto;
  border: 1px solid rgba(255,140,0,.22);
  background: rgba(255,140,0,.10);
  box-shadow: 0 0 22px rgba(255,140,0,.10);
  font-size: 18px;
}

.notice-body{
  flex:1;
  min-width:0;
}

.notice-title{
  font-weight: 1000;
  font-size: 18px;
  line-height: 1.35;
  margin: 0 0 6px 0;
  text-shadow: 0 0 18px rgba(120,220,240,.10);
}

.notice-sub{
  margin:0;
  font-size: 13px;
  line-height: 1.8;
  color: rgba(235,250,255,.70) !important;
  white-space: pre-wrap;
}

.notice-meta{
  margin-top: 10px;
  display:flex;
  flex-wrap: wrap;
  gap:8px;
}

.meta-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(120,220,240,.14);
  background: rgba(0,0,0,.18);
  font-weight: 900;
  font-size: 12px;
  color: rgba(235,250,255,.88) !important;
  font-variant-numeric: tabular-nums;
}

.meta-chip .lbl{
  color: rgba(235,250,255,.60) !important;
  font-weight: 900;
}

/* تنبيه واضح وملفت */
.notice-banner.is-urgent{
  border-color: rgba(255,140,0,.26);
  background: linear-gradient(180deg, rgba(255,140,0,.08), rgba(0,0,0,.16));
}

/* موبايل */
@media (max-width: 700px){
  .notice-banner{ flex-direction: column; }
  .notice-ico{ width:40px; height:40px; border-radius:14px; }
  .notice-title{ font-size: 16px; }
}
/* ✅ وضوح قائمة قرار الادمن عند الفتح */
.decision-bar select{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-image:
    linear-gradient(45deg, transparent 50%, rgba(235,250,255,.75) 50%),
    linear-gradient(135deg, rgba(235,250,255,.75) 50%, transparent 50%),
    linear-gradient(to right, rgba(120,220,240,.18), rgba(120,220,240,.18));
  background-position:
    calc(18px) 50%,
    calc(12px) 50%,
    10px 50%;
  background-size:
    6px 6px,
    6px 6px,
    1px 18px;
  background-repeat: no-repeat;

  padding-inline-start: 18px;
  padding-inline-end: 38px;  /* مساحة للسهم */
  cursor: pointer;
}

/* أهم جزء: لون قائمة الخيارات نفسها */
.decision-bar select option{
  background: #0B1419 !important;   /* داكن واضح */
  color: rgba(235,250,255,.95) !important;
}

/* حتى خيار "اختر..." */
.decision-bar select option[value=""]{
  color: rgba(235,250,255,.70) !important;
}

/* عند فتح القائمة/التركيز */
.decision-bar select:focus{
  border-color: rgba(120,220,240,.55) !important;
  box-shadow: 0 0 0 4px rgba(120,220,240,.14) !important;
}

/* إذا تريد تمييز الخيارات المهمة داخل القائمة (اختياري) */
.decision-bar select option[value="approve"]{
  background: #0B1419 !important;
}
.decision-bar select option[value="reject"]{
  background: #0B1419 !important;
}
.decision-bar select option[value="return_to_contracts"],
.decision-bar select option[value="return_to_finance"]{
  background: #0B1419 !important;
}
/* =========================
   MOBILE FIXES (Cards UI)
   ========================= */
@media (max-width: 900px){

  /* 1) topbar يصير عمودي */
  .topbar{
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .topbar .row{
    width: 100% !important;
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
  }
  .topbar .row .btn{
    flex: 1 1 auto;
  }

  /* 2) الغِ nowrap حتى ما ينقص النص */
  .nowrap{
    white-space: normal !important;
  }

  /* 3) الفلاتر/الفورمات كلها تصير عمود واحد */
  .filterbar-grid,
  .fh-grid,
  .logs-grid,
  .form-grid,
  .form-row,
  .form-row-3,
  .db-grid,
  .branch-grid{
    grid-template-columns: 1fr !important;
  }

  .fb-actions,
  .fh-actions,
  .db-actions,
  .form-actions{
    width: 100% !important;
    justify-content: stretch !important;
  }
  .fb-actions .btn,
  .fh-actions .btn,
  .db-actions .btn,
  .form-actions .btn{
    width: 100% !important;
    justify-content: center !important;
  }

  /* 4) تحويل أي جدول داخل table-wrap إلى كاردات */
  .table-wrap{ overflow: visible !important; }

  table.table,
  table.logs-table,
  table.manual-alerts-table{
    width: 100% !important;
  }

  table.table thead,
  table.logs-table thead,
  table.manual-alerts-table thead{
    display: none !important;
  }

  table.table,
  table.table tbody,
  table.table tr,
  table.table td,
  table.logs-table,
  table.logs-table tbody,
  table.logs-table tr,
  table.logs-table td,
  table.manual-alerts-table,
  table.manual-alerts-table tbody,
  table.manual-alerts-table tr,
  table.manual-alerts-table td{
    display: block !important;
    width: 100% !important;
  }

  /* كارد لكل صف */
  table.table tbody tr,
  table.logs-table tbody tr,
  table.manual-alerts-table tbody tr{
    border: 1px solid rgba(120,220,240,.12);
    background: rgba(0,0,0,.10);
    border-radius: 18px;
    padding: 10px;
    margin-bottom: 10px;
    box-shadow: 0 16px 46px rgba(0,0,0,.22);
  }

  /* خانات الكارد */
  table.table tbody td,
  table.logs-table tbody td,
  table.manual-alerts-table tbody td{
    background: transparent !important;
    border: 0 !important;
    padding: 10px 12px !important;
    overflow: visible !important;
    text-overflow: unset !important;
    word-break: break-word !important;
  }

  /* عنوان لكل خانة */
  table.table tbody td::before,
  table.logs-table tbody td::before,
  table.manual-alerts-table tbody td::before{
    content: attr(data-label);
    display: block;
    font-weight: 1000;
    font-size: 12px;
    color: rgba(235,250,255,.65);
    margin-bottom: 6px;
  }

  /* 5) زر الإجراءات داخل الجداول يصير واضح */
  .actions-td,
  .ac-actions{
    width: 100% !important;
  }
  .actions-box{
    width: 100% !important;
    display: flex !important;
    gap: 10px !important;
  }
  .actions-box .btn,
  .actions-box button{
    flex: 1 1 auto !important;
    width: 100% !important;
    justify-content: center !important;
  }
}