/*
  Tuwaiq Productive Families UI
  ملف تصميم موحد يراعي صفحات سطح المكتب والجوال.
*/

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  direction:rtl;
  font-family:'Almarai',Tahoma,Arial,sans-serif!important;
  color:var(--tw-ink)!important;
  background:
    radial-gradient(circle at 12% 0%, rgba(201,151,74,.18), transparent 27%),
    radial-gradient(circle at 96% 12%, rgba(75,42,20,.10), transparent 24%),
    linear-gradient(180deg, #fffaf2 0%, #f6ead8 58%, #fffaf4 100%)!important;
  min-height:100vh;
  position:relative;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-2;
  background-image:
    radial-gradient(rgba(75,42,20,.10) 1px, transparent 1px),
    linear-gradient(135deg, rgba(201,151,74,.09), transparent 35%, rgba(255,255,255,.28));
  background-size:24px 24px, 100% 100%;
  opacity:.35;
}
body::after{
  content:"";
  position:fixed;
  inset:auto -10% -26% -10%;
  height:42vh;
  pointer-events:none;
  z-index:-1;
  background:
    radial-gradient(ellipse at center, rgba(201,151,74,.16), transparent 58%),
    linear-gradient(90deg, transparent, rgba(75,42,20,.06), transparent);
  border-radius:50% 50% 0 0;
}

:where(a,button,input,select,textarea){font-family:inherit}
a{color:inherit;transition:.2s ease;text-decoration:none}
img{max-width:100%;height:auto}
svg{width:1.1em;height:1.1em;display:inline-block;vertical-align:middle}
::selection{background:rgba(201,151,74,.32);color:var(--tw-ink)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(94,61,33,.35);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ====== الشريط العلوي الموجود في الصفحات القديمة ====== */
.topbar{
  background:linear-gradient(135deg, rgba(54,29,13,.98), rgba(89,53,26,.96) 55%, rgba(119,76,36,.96))!important;
  color:#fff7e9!important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 16px 40px rgba(64,39,19,.18);
  padding:14px clamp(16px,3vw,30px)!important;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  position:sticky;
  top:0;
  z-index:70;
  backdrop-filter:blur(16px) saturate(130%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);
}
.topbar::before{
  content:"";
  width:42px;
  height:42px;
  border-radius:16px;
  flex:0 0 auto;
  order:-2;
  background:
    var(--tw-logo-url) center/68% no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.92), rgba(255,247,225,.72));
  box-shadow:inset 0 0 0 1px rgba(201,151,74,.28), 0 10px 26px rgba(0,0,0,.16);
}
.topbar h1,.topbar h2,.topbar h3{
  margin:0!important;
  font-weight:900!important;
  letter-spacing:-.02em;
  color:#fff7e9!important;
  line-height:1.35;
}
.topbar h2{font-size:clamp(17px,2.2vw,22px)!important}
.topbar > div,.topbar .actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.topbar a,.topbar button,.topbar .btn,.topbar input[type="submit"]{
  border:1px solid rgba(255,255,255,.16)!important;
  background:rgba(255,255,255,.10)!important;
  color:#fff7e9!important;
  border-radius:15px!important;
  padding:10px 14px!important;
  font-weight:800!important;
  line-height:1.2;
  box-shadow:none!important;
}
.topbar a:hover,.topbar button:hover,.topbar .btn:hover{
  background:rgba(255,255,255,.18)!important;
  transform:translateY(-1px);
}
.topbar .active,.topbar a.is-active{background:rgba(201,151,74,.28)!important}

/* ====== الحاويات والعناوين ====== */
.container{
  width:min(1240px,100%);
  margin-inline:auto!important;
  padding:clamp(16px,2.8vw,34px)!important;
}
.page-head,.section-title,.page-title,.section h2{
  color:var(--tw-ink)!important;
}
.page-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:18px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.page-head h1,.container > h1,.container > h2{
  color:var(--tw-ink)!important;
  margin-top:0;
  font-weight:900;
  letter-spacing:-.03em;
}
.section-title{
  font-weight:900!important;
  font-size:clamp(18px,2vw,22px)!important;
  margin:0 0 14px!important;
}
.muted,.hint,.desc,.meta,.page-subtitle,.section-note,.location-note{
  color:var(--tw-muted)!important;
  line-height:1.8;
}

/* ====== البطاقات ====== */
.card,.stat-card,.summary-card,.link-card,.filter-box,.login-card,.register-card,.box,.invoice-box,.summary,.settings-box,.price-box,.warning-total,.waiting-box,.location-box,.driver-box,.offer-card,.info-box,.accepted-driver-box,.external-fallback-box,.preorder-alert,.schedule-box,.map-picker-box,.family-order-sound-card,.family-new-order-toast,.product-card,.image-card,.cat-img,.invoice,.docs,.result,.notice{
  background:linear-gradient(180deg, rgba(255,252,246,.96), rgba(255,246,231,.90))!important;
  border:1px solid var(--tw-border)!important;
  border-radius:var(--tw-radius)!important;
  box-shadow:var(--tw-shadow)!important;
  color:var(--tw-ink)!important;
  backdrop-filter:blur(14px) saturate(124%);
  -webkit-backdrop-filter:blur(14px) saturate(124%);
}
.card,.stat-card,.summary-card,.link-card,.filter-box,.box,.invoice-box,.summary,.settings-box,.price-box,.waiting-box,.location-box,.driver-box,.offer-card,.info-box,.accepted-driver-box,.external-fallback-box,.preorder-alert,.schedule-box,.docs,.result,.notice{
  padding:clamp(16px,2vw,22px)!important;
}
.card:hover,.stat-card:hover,.summary-card:hover,.link-card:hover,.product-card:hover,.offer-card:hover{
  box-shadow:0 22px 52px rgba(65,39,19,.14)!important;
}
.link-card:hover,.product-card:hover{transform:translateY(-2px)}

.hero{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg, #3f220f 0%, #6f421f 54%, #b07a38 100%)!important;
  color:#fff8ed!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:32px!important;
  box-shadow:0 24px 60px rgba(75,42,20,.22)!important;
  padding:clamp(24px,4vw,42px)!important;
}
.hero::before{
  content:"";
  position:absolute;
  inset:-20% auto auto -10%;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(228,194,122,.25), transparent 66%);
}
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.08));
  opacity:.65;
}
.hero > *{position:relative;z-index:1}
.hero h1,.hero h2,.hero h3{color:#fffaf1!important;font-weight:900!important;margin-top:0!important}
.hero p{color:rgba(255,248,237,.92)!important}

/* ====== الشبكات ====== */
.grid,.stats-grid,.links,.form-grid,.quote-grid,.images-grid,.checks,.items,.layout,.summary-row,.preview-row,.track-steps,.totals{
  display:grid;
  gap:clamp(12px,1.7vw,18px);
}
.grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}
.stats-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important}
.links{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}
.form-grid,.quote-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.images-grid{grid-template-columns:repeat(auto-fill,minmax(145px,1fr))!important}
.products-grid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(245px,1fr))!important;gap:18px!important}
.layout{grid-template-columns:minmax(0,1fr) minmax(300px,380px)!important;align-items:start!important}
.full{grid-column:1 / -1!important}

/* ====== المنتجات وصفحات العميل ====== */
.product-card{overflow:hidden!important;padding:0!important}
.product-image,.main-image,.product-img{
  width:100%!important;
  object-fit:cover!important;
  background:linear-gradient(135deg, #efe0c7, #fff7e9)!important;
}
.product-image{height:190px!important;border-radius:var(--tw-radius) var(--tw-radius) 0 0!important}
.product-img{border-radius:18px!important}
.product-body{padding:18px!important}
.product-title,.product-card h3{font-weight:900!important;color:var(--tw-ink)!important;margin-top:0}
.category-badge,.category,.pill,.badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px!important;
  padding:7px 11px!important;
  font-size:12px!important;
  font-weight:900!important;
  background:rgba(201,151,74,.17)!important;
  color:#65401e!important;
  border:1px solid rgba(201,151,74,.22)!important;
}
.price,.value,.number,.amount,.total,.grand,.summary-total,.invoice-total{
  color:var(--tw-primary)!important;
  font-weight:900!important;
}
.number{font-size:clamp(26px,4vw,36px)!important}
.value{font-size:clamp(20px,3vw,30px)!important}
.label{color:var(--tw-muted)!important;font-weight:800!important}

/* ====== النماذج ====== */
label,.label{font-weight:900!important;color:var(--tw-ink)!important}
input:not([type="checkbox"]):not([type="radio"]),select,textarea,.qty-input{
  width:100%;
  border:1px solid rgba(94,61,33,.18)!important;
  background:rgba(255,253,248,.94)!important;
  color:var(--tw-ink)!important;
  border-radius:17px!important;
  padding:13px 15px!important;
  outline:none!important;
  transition:.18s ease;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
textarea{min-height:118px;resize:vertical}
input:focus,select:focus,textarea:focus,.qty-input:focus{
  border-color:rgba(201,151,74,.72)!important;
  box-shadow:0 0 0 4px rgba(201,151,74,.16)!important;
}
input::placeholder,textarea::placeholder{color:rgba(122,102,85,.62)}
.checkbox-row,.checkbox-line{display:flex!important;align-items:center;gap:10px;line-height:1.7}

/* ====== الأزرار ====== */
button,.btn,.btn-dark,.btn-secondary,.btn-danger,.btn-small,.btn-green,.btn-red,.checkout-btn,.add-btn,.location-btn,.map-current-btn,.map-save-btn,.map-cancel-btn,.accept,.reject,.open-file,.btn-dark-submit,.form-actions a,.actions a,.actions button{
  border-radius:16px!important;
  font-weight:900!important;
  transition:.18s ease!important;
  text-decoration:none!important;
}
.btn,.btn-dark,.btn-green,.checkout-btn,.add-btn,.map-save-btn,.accept,.btn-dark-submit,button[type="submit"],input[type="submit"]{
  background:linear-gradient(135deg, var(--tw-primary), var(--tw-primary-2) 58%, var(--tw-primary-3))!important;
  color:#fff8ed!important;
  border:0!important;
  box-shadow:0 14px 28px rgba(75,42,20,.20)!important;
  padding:12px 18px!important;
  cursor:pointer;
}
.btn:hover,.btn-dark:hover,.btn-green:hover,.checkout-btn:hover,.add-btn:hover,.accept:hover,button[type="submit"]:hover{
  transform:translateY(-1px);
  box-shadow:0 18px 34px rgba(75,42,20,.24)!important;
}
.btn-secondary,.map-cancel-btn,.btn-small,.location-btn,.open-file,.actions a:not(.btn):not(.btn-dark):not(.btn-danger):not(.btn-green){
  background:rgba(255,255,255,.68)!important;
  color:var(--tw-primary)!important;
  border:1px solid rgba(94,61,33,.15)!important;
  padding:10px 15px!important;
}
.btn-secondary:hover,.btn-small:hover,.location-btn:hover,.open-file:hover{
  background:rgba(201,151,74,.13)!important;
  transform:translateY(-1px);
}
.btn-danger,.btn-red,.reject,.map-picker-close{
  background:linear-gradient(135deg, #8a2f1f, #bd6046)!important;
  color:#fff!important;
  border:0!important;
  padding:10px 15px!important;
}
.btn-small{font-size:13px!important;padding:8px 12px!important}
.actions,.form-actions,.image-actions,.family-new-order-toast-actions{
  display:flex!important;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* ====== الجداول ====== */
.table-wrap,.table-responsive{
  width:100%;
  overflow-x:auto;
  border-radius:22px;
  border:1px solid var(--tw-border);
  background:rgba(255,250,242,.72);
  box-shadow:0 14px 34px rgba(65,39,19,.08);
}
table{
  width:100%;
  border-collapse:separate!important;
  border-spacing:0!important;
  background:transparent!important;
  overflow:hidden;
}
th,td{
  text-align:right!important;
  padding:14px 16px!important;
  border-bottom:1px solid rgba(94,61,33,.10)!important;
  vertical-align:middle!important;
}
th{
  background:linear-gradient(180deg, rgba(243,226,198,.72), rgba(255,250,242,.70))!important;
  color:#67411d!important;
  font-size:13px!important;
  font-weight:900!important;
  white-space:nowrap;
}
tbody tr{transition:.16s ease}
tbody tr:hover{background:rgba(201,151,74,.08)!important}
tbody tr:last-child td{border-bottom:0!important}

/* ====== الحالات والتنبيهات ====== */
.success,.alert-success,.ok,.green,.done,.tracking-active{
  background:rgba(107,125,69,.13)!important;
  color:#506033!important;
  border-color:rgba(107,125,69,.25)!important;
}
.error,.alert-error,.no,.red,.btn-danger,.tracking-stopped{
  background:rgba(180,83,62,.13)!important;
  color:#8a2f1f!important;
  border-color:rgba(180,83,62,.25)!important;
}
.yellow,.orange,.warning,.current{
  background:rgba(201,151,74,.16)!important;
  color:#7a4d22!important;
  border-color:rgba(201,151,74,.28)!important;
}
.blue,.info,.gray,.dark{
  background:rgba(94,61,33,.10)!important;
  color:#54351b!important;
  border-color:rgba(94,61,33,.20)!important;
}
.success,.error,.alert-success,.alert-error,.warning,.info,.notice{
  padding:12px 14px!important;
  border-radius:16px!important;
  border:1px solid currentColor;
  margin-bottom:14px;
}
.empty{
  text-align:center!important;
  padding:32px!important;
  color:var(--tw-muted)!important;
  border:1px dashed rgba(94,61,33,.22)!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.45)!important;
}

/* ====== صور ومرفقات وخرائط ====== */
.preview,.current-image,.thumb,.image-card img{
  border-radius:18px!important;
  border:1px solid rgba(94,61,33,.12)!important;
}
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.thumb{width:76px!important;height:76px!important;object-fit:cover!important;cursor:pointer;background:#fffaf2}
.map-picker-modal{z-index:200!important;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.map-picker-head,.map-picker-actions{border-color:rgba(94,61,33,.12)!important}

/* ====== تسجيل الدخول ====== */
.login-card,.register-card{
  width:min(440px, calc(100vw - 28px))!important;
  padding:clamp(22px,4vw,34px)!important;
  position:relative;
  overflow:hidden;
}
.login-card::before,.register-card::before{
  content:"";
  display:block;
  width:72px;
  height:72px;
  border-radius:26px;
  margin:0 auto 18px;
  background:
    var(--tw-logo-url) center/70% no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,244,220,.82));
  box-shadow:inset 0 0 0 1px rgba(201,151,74,.30), 0 14px 30px rgba(75,42,20,.16);
}
.login-card h1,.register-card h1{text-align:center;color:var(--tw-ink)!important;font-weight:900!important}
.login-card p,.register-card p{text-align:center;color:var(--tw-muted)!important}

/* ====== مكونات اختيارية للصفحات الجديدة ====== */
.tw-mobile-header{display:none}
.tw-sidebar-overlay{display:none}
.tw-sidebar{display:none}
.tw-bottom-nav{display:none}

.tw-mobile-header__mark,.tw-sidebar__logo{
  background:
    var(--tw-logo-url) center/70% no-repeat,
    linear-gradient(135deg, rgba(255,255,255,.95), rgba(255,246,225,.82));
}
.tw-mobile-header__user svg,.tw-sidebar__icon svg,.tw-sidebar__logout svg{width:20px;height:20px}

/* ====== تحسينات عامة ====== */
.invoice-head,.offer-head,.summary-row,.preview-row,.invoice-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
hr,.app-divider{border:0;height:1px;background:linear-gradient(90deg, transparent, rgba(94,61,33,.18), transparent);margin:20px 0}
.hidden{display:none!important}

/* ====== الجوال ====== */
@media (max-width: 980px){
  body{padding-bottom:76px}
  .topbar{
    position:sticky;
    top:0;
    align-items:flex-start;
    padding:12px 14px!important;
    gap:10px;
  }
  .topbar::before{width:38px;height:38px;border-radius:14px}
  .topbar h2,.topbar h1{font-size:17px!important;max-width:calc(100vw - 72px)}
  .topbar > div,.topbar .actions{width:100%;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px;scrollbar-width:none}
  .topbar > div::-webkit-scrollbar,.topbar .actions::-webkit-scrollbar{display:none}
  .topbar a,.topbar button,.topbar .btn{white-space:nowrap;padding:9px 11px!important;font-size:13px!important}

  .container{padding:14px!important;width:100%!important}
  .hero{border-radius:24px!important;padding:22px!important;margin-bottom:16px!important}
  .hero h1,.hero h2{font-size:24px!important}
  .grid,.stats-grid,.links,.form-grid,.quote-grid,.images-grid,.checks,.items,.layout,.summary-row,.preview-row,.track-steps,.totals,.products-grid{
    grid-template-columns:1fr!important;
  }
  .card,.stat-card,.summary-card,.link-card,.filter-box,.box,.invoice-box,.summary,.settings-box,.price-box,.waiting-box,.location-box,.driver-box,.offer-card,.info-box,.accepted-driver-box,.external-fallback-box,.preorder-alert,.schedule-box,.docs,.result,.notice{
    border-radius:20px!important;
    padding:16px!important;
  }
  .product-image{height:210px!important}
  .actions,.form-actions,.image-actions,.family-new-order-toast-actions{align-items:stretch!important}
  .actions > *,.form-actions > *,.image-actions > *,.family-new-order-toast-actions > *{flex:1 1 auto;text-align:center;justify-content:center}
  .btn,.btn-dark,.btn-secondary,.btn-danger,.btn-green,.checkout-btn,.add-btn,button[type="submit"],input[type="submit"]{width:100%;justify-content:center}

  .table-wrap{border-radius:18px;margin-inline:-2px;width:calc(100% + 4px)}
  table{min-width:720px}
  th,td{padding:12px 13px!important;font-size:13px!important}

  .page-head{gap:10px;margin-bottom:14px}
  .page-head > *{width:100%}
  .login-card,.register-card{border-radius:26px!important}

  .tw-mobile-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:sticky;
    top:0;
    z-index:90;
    min-height:62px;
    padding:10px 14px;
    background:rgba(66,37,18,.94);
    color:#fff8ed;
    box-shadow:0 12px 34px rgba(54,29,13,.18);
    backdrop-filter:blur(14px);
  }
  .tw-mobile-header__menu,.tw-mobile-header__user{
    width:42px;height:42px;border-radius:15px;border:1px solid rgba(255,255,255,.14);
    background:rgba(255,255,255,.10);color:#fff8ed;display:flex;align-items:center;justify-content:center;font-weight:900;
  }
  .tw-mobile-header__brand{display:flex;align-items:center;gap:10px;font-weight:900;color:#fff8ed}
  .tw-mobile-header__mark{width:38px;height:38px;border-radius:14px;display:inline-block;box-shadow:0 10px 22px rgba(0,0,0,.12)}
}

@media (min-width: 981px){
  .tw-sidebar{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:18px 18px 18px auto;
    width:292px;
    z-index:80;
    border-radius:32px;
    background:
      radial-gradient(circle at 18% 0%, rgba(201,151,74,.24), transparent 34%),
      linear-gradient(180deg, #3a210f, #27150a 100%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 26px 70px rgba(54,29,13,.30);
    color:#fff8ed;
    overflow:hidden;
  }
  .tw-sidebar__top{padding:20px 18px 14px;border-bottom:1px solid rgba(255,255,255,.10)}
  .tw-sidebar__close{display:none}
  .tw-sidebar__brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#fff8ed}
  .tw-sidebar__logo{width:78px;height:78px;border-radius:28px;box-shadow:0 16px 34px rgba(0,0,0,.20)}
  .tw-sidebar__title{font-weight:900;font-size:20px}
  .tw-sidebar small{color:rgba(255,248,237,.72);font-weight:700}
  .tw-sidebar__nav{padding:14px;overflow:auto;flex:1}
  .tw-sidebar__link{display:flex;align-items:center;gap:10px;color:rgba(255,248,237,.84);padding:12px;border-radius:18px;font-weight:900;margin-bottom:6px}
  .tw-sidebar__link:hover,.tw-sidebar__link.is-active{background:rgba(255,255,255,.12);color:#fff;transform:translateX(-2px)}
  .tw-sidebar__icon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
  .tw-sidebar__foot{padding:14px;border-top:1px solid rgba(255,255,255,.10)}
  .tw-sidebar__profile{display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:rgba(255,255,255,.08)}
  .tw-sidebar__avatar{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(201,151,74,.34);font-weight:900}
  .tw-sidebar__profile strong{display:block}.tw-sidebar__profile small{display:block;font-size:12px}
  .tw-sidebar__logout{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:16px;background:rgba(255,255,255,.10);color:#fff8ed;font-weight:900}
}

@media (max-width: 680px){
  body::after{height:30vh}
  .container{padding:12px!important}
  .topbar{border-radius:0 0 22px 22px}
  .hero{padding:20px 18px!important;border-radius:22px!important}
  .product-image{height:190px!important}
  input:not([type="checkbox"]):not([type="radio"]),select,textarea,.qty-input{font-size:16px!important}
  .number{font-size:28px!important}
  .value{font-size:24px!important}
  .invoice-head,.offer-head,.invoice-row{align-items:flex-start;flex-direction:column}
  .thumb{width:66px!important;height:66px!important}
  .family-new-order-toast{left:12px!important;right:12px!important;width:auto!important;bottom:14px!important}
}

@media print{
  body{background:#fff!important;color:#000!important;padding:0!important}
  body::before,body::after,.topbar,.tw-mobile-header,.tw-sidebar,.tw-sidebar-overlay,.actions,.form-actions{display:none!important}
  .container{width:100%!important;padding:0!important}
  .card,.invoice-box,.box{box-shadow:none!important;border-color:#ddd!important;background:#fff!important}
}

@media (max-width: 980px){
  .tw-sidebar{
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:10px 10px 10px auto;
    width:min(318px, calc(100vw - 20px));
    z-index:160;
    border-radius:28px;
    background:linear-gradient(180deg, #3a210f, #27150a 100%);
    border:1px solid rgba(255,255,255,.12);
    box-shadow:0 26px 70px rgba(54,29,13,.34);
    color:#fff8ed;
    overflow:hidden;
    transform:translateX(112%);
    opacity:.98;
    transition:.24s ease;
  }
  .tw-sidebar.is-open,.tw-sidebar-open .tw-sidebar{transform:translateX(0)}
  .tw-sidebar-overlay{
    display:block;
    position:fixed;
    inset:0;
    background:rgba(37,22,13,.48);
    z-index:150;
    opacity:0;
    visibility:hidden;
    transition:.2s ease;
    backdrop-filter:blur(6px);
  }
  .tw-sidebar-overlay.is-open,.tw-sidebar-open .tw-sidebar-overlay{opacity:1;visibility:visible}
  .tw-sidebar__top{padding:18px 16px 12px;border-bottom:1px solid rgba(255,255,255,.10);position:relative}
  .tw-sidebar__close{position:absolute;left:14px;top:14px;width:38px;height:38px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.10);color:#fff8ed;font-size:26px;line-height:1}
  .tw-sidebar__brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;color:#fff8ed;padding-top:10px}
  .tw-sidebar__logo{width:70px;height:70px;border-radius:25px;box-shadow:0 16px 34px rgba(0,0,0,.20)}
  .tw-sidebar__title{font-weight:900;font-size:18px}.tw-sidebar small{color:rgba(255,248,237,.72);font-weight:700}
  .tw-sidebar__nav{padding:12px;overflow:auto;flex:1}
  .tw-sidebar__link{display:flex;align-items:center;gap:10px;color:rgba(255,248,237,.84);padding:11px;border-radius:17px;font-weight:900;margin-bottom:6px}
  .tw-sidebar__link:hover,.tw-sidebar__link.is-active{background:rgba(255,255,255,.12);color:#fff}
  .tw-sidebar__icon{width:38px;height:38px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.10)}
  .tw-sidebar__foot{padding:12px;border-top:1px solid rgba(255,255,255,.10)}
  .tw-sidebar__profile{display:flex;align-items:center;gap:10px;padding:10px;border-radius:18px;background:rgba(255,255,255,.08)}
  .tw-sidebar__avatar{width:40px;height:40px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(201,151,74,.34);font-weight:900}
  .tw-sidebar__profile strong{display:block}.tw-sidebar__profile small{display:block;font-size:12px}
  .tw-sidebar__logout{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:8px;padding:11px;border-radius:16px;background:rgba(255,255,255,.10);color:#fff8ed;font-weight:900}
}


/* ====== إصلاحات V2 بعد المعاينة ====== */
.welcome{
  position:relative!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.22), transparent 26%),
    linear-gradient(135deg, #3f220f 0%, #6f421f 56%, #b07a38 100%)!important;
  color:#fff8ed!important;
  border:1px solid rgba(255,255,255,.16)!important;
  border-radius:32px!important;
  box-shadow:0 24px 60px rgba(75,42,20,.22)!important;
  padding:clamp(24px,4vw,42px)!important;
}
.welcome::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    var(--tw-pattern-url) left top/280px auto repeat,
    linear-gradient(90deg, transparent, rgba(255,255,255,.08));
  opacity:.18;
}
.welcome > *{position:relative;z-index:1}
.welcome h1,.welcome h2,.welcome h3{color:#fffaf1!important;font-weight:900!important;margin-top:0!important}
.welcome p{color:rgba(255,248,237,.92)!important}

.login-card button[type="submit"],
.register-card button[type="submit"],
.filter-box button[type="submit"],
.page-head .btn,
.container > .btn,
a.btn,
button.btn{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:46px!important;
  opacity:1!important;
  visibility:visible!important;
  background:linear-gradient(135deg, var(--tw-primary), var(--tw-primary-2) 58%, var(--tw-primary-3))!important;
  color:#fff8ed!important;
  border:1px solid rgba(255,255,255,.12)!important;
  text-shadow:none!important;
}
.login-card button[type="submit"],
.register-card button[type="submit"]{
  width:100%!important;
  margin-top:4px!important;
}
.login-card a,
.register-card a{color:#7a4d22!important;font-weight:900!important}
.filter-box button[type="submit"]{width:100%!important;padding-inline:16px!important}

.topbar::before,
.login-card::before,
.register-card::before,
.tw-mobile-header__mark,
.tw-sidebar__logo{
  background-repeat:no-repeat, no-repeat!important;
  background-position:center, center!important;
}

@media (min-width:981px){
  body.twui-with-sidebar .container{margin-right:326px!important;width:calc(100% - 344px)!important;max-width:1240px!important}
  body.twui-with-sidebar .topbar{margin-right:326px!important;width:calc(100% - 344px)!important;border-radius:0 0 0 26px!important}
}

@media (max-width:680px){
  .page-head .btn,.container > .btn,a.btn,button.btn{width:100%!important}
  .filter-box{gap:10px!important}
}

/* ===== شعار أسر طويق بدون بطاقة خارجية ===== */

.topbar::before,
.login-card::before,
.register-card::before,
.tw-sidebar__logo,
.tw-mobile-header__mark{
  background-image: var(--tw-logo-url) !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;

  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* شعار الشريط العلوي */
.topbar::before{
  width: 200px !important;
  height: 78px !important;
  flex: 0 0 200px !important;
}

/* شعار تسجيل الدخول والتسجيل */
.login-card::before,
.register-card::before{
  width: 210px !important;
  height: 105px !important;
  margin: 0 auto 18px !important;
}

/* شعار السايدبار */
.tw-sidebar__logo{
  width: 210px !important;
  height: 105px !important;
}

/* شعار الجوال */
.tw-mobile-header__mark{
  width: 120px !important;
  height: 46px !important;
}