لدي مشكلة في css

لدي مشكلة في القائمة المنسدلة على الشاشات الكبيرة لا تظهر القائمة لانها مغطاة باللون الابيض

وعلى الشاشات الصغيرة لا يوجد مشكلة لاحظت المشكلة على فايرفوكس

ارفقت صورة للمشكلة :

شكرا على تعاونكم 

        <div class="field" style="margin-top:10px">
          <label>المادة</label>
          <select name="tahsili_subject_id" onchange="this.form.submit()">
            <option value="">— اختر المادة —</option>
            <?php foreach($subjects_tahsili as $s): ?>
              <option value="<?= (int)$s['id'] ?>"</option>
            <?php endforeach; ?>
          </select>
        </div>
      <?php elseif($section==='qdrat'): ?>
        <div class="field" style="margin-top:10px">
          <label>قسم القدرات</label>
          <select name="qdrat_class_id" onchange="this.form.submit()">
            <option value="">— اختر القسم —</option>
            <?php foreach($qdrat_classes as $c): ?>
              <option value="<?= (int)$c['id'] ?>"</option>
            <?php endforeach; ?>
          </select>

<style>
:root{
  --bg:#0f172a; --surface:#111827; --card:#0b1220; --line:#1f2937;
  --ink:#f1f5f9; --muted:#9aa6b2; --primary:#0ea5a6; --accent:#22c55e;
  --shadow:0 16px 40px rgba(0,0,0,.45); --btn-ink:#062221;
}
html[data-theme="light"]{
  --bg:#f6f7fb; --surface:#ffffff; --card:#ffffff; --line:#d9e0e8;
  --ink:#0f172a; --muted:#5b6573; --primary:#0f9da0; --accent:#16a34a;
  --shadow:0 16px 40px rgba(0,0,0,.10); --btn-ink:#001b1b;
}
:root{ --font-ar:"IBM Plex Arabic", system-ui, -apple-system, "Segoe UI", Tahoma, Arial, sans-serif; }

/* أساسيات الخط */
html, body{
  font-family: var(--font-ar);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
*, *::before, *::after{ font-family: inherit; }
button, input, select, textarea{ font: inherit; }
a, label, summary, details, small, strong, h1, h2, h3, h4, h5, h6, p, div, span{ font-family: inherit; }
mjx-container{ font-family: var(--font-ar); }

/* الخلفية العامة */
html,body{
  background:
    radial-gradient(1200px 800px at 80% -10%, rgba(14,165,166,.08), transparent 60%),
    radial-gradient(1000px 700px at -10% 110%, rgba(34,197,94,.06), transparent 50%),
    var(--bg);
  color:var(--ink);
  min-height:100dvh;
}
.wrap{ max-width:1200px; margin:0 auto; padding:20px 14px 56px; }
/* مهم: اسمح بتجاوز القوائم المنسدلة */
.wrap, .page-card{ overflow:visible; }

.theme-toggle{ position:fixed; inset-inline-start:14px; inset-block-end:calc(14px + env(safe-area-inset-bottom));
  z-index:9999; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:var(--shadow); user-select:none; }
.theme-toggle svg{ width:22px; height:22px; pointer-events:none; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin:8px 0 14px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand-mark{ width:44px; height:44px; border-radius:12px; background:linear-gradient(135deg, rgba(14,165,166,.25), rgba(34,197,94,.18));
  border:1px solid var(--line); display:grid; place-items:center; font-weight:900; color:var(--primary) }
.brand h1{ margin:0; font-size:18px; font-weight:800 }
.brand p{ margin:0; font-size:12px; color:var(--muted) }
.help-link a{ color:var(--btn-ink); background:rgba(14,165,166,.14); border:1px solid rgba(14,165,166,.25);
  padding:8px 12px; border-radius:10px; text-decoration:none; font-weight:800; font-size:13px; }
html[data-theme="dark"] .help-link a{ color:#fff; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15); }

.page-card{
  position:relative; /* لسياق التراكب */
  background:linear-gradient(180deg, color-mix(in oklab, var(--primary) 10%, transparent), transparent 45%), var(--card);
  border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow);
}
.muted{ color:var(--muted); font-size:12px }

/* أزرار */
.btn{
  appearance:none; border:none; cursor:pointer; text-decoration:none;
  padding:12px 18px; border-radius:12px; font-weight:800; font-size:14px;
  background:var(--primary); color:var(--btn-ink);
  box-shadow:0 8px 24px color-mix(in srgb, var(--primary) 30%, transparent);
  transition:transform .05s, box-shadow .2s, filter .2s;
  display:inline-flex; align-items:center; gap:8px; position:relative; overflow:hidden; transform:translateZ(0);
}
.btn:hover{ filter:brightness(1.05); box-shadow:0 10px 28px color-mix(in srgb, var(--primary) 38%, transparent) }
.btn:active{ transform:translateY(1px) scale(.99) }
.btn-ghost{ background:var(--card); color:var(--ink); border:1px solid var(--line); box-shadow:0 8px 24px rgba(0,0,0,.15); }
.btn .ripple{ position:absolute; border-radius:50%; pointer-events:none; width:12px; height:12px;
  transform:translate(-50%,-50%); background:rgba(255,255,255,.45); animation:ripple .6s ease forwards; mix-blend-mode:soft-light; }
@keyframes ripple{ from{opacity:.65; transform:translate(-50%,-50%) scale(1);} to{opacity:0; transform:translate(-50%,-50%) scale(24);} }

.radio-row{ display:flex; gap:12px; flex-wrap:wrap }
.radio-row label{ display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:8px 12px; cursor:pointer; }

.form-grid{ display:grid; gap:16px; grid-template-columns: repeat(3, minmax(0,1fr)); align-items:start; }
@media (max-width:880px){ .form-grid{ grid-template-columns:1fr; } }

.field{ min-width:0; position:relative; } /* relative مهم للتراكب */
.field label{ display:block; margin-bottom:8px; font-size:14px; font-weight:800; color:var(--muted); letter-spacing:.2px; }

/* مدخلات وسيلكت – قاعدة موحدة (لا نكررها لاحقًا) */
.field input,
.field select{
  width:100%; box-sizing:border-box; display:block;
  background:var(--card); border:1px solid var(--line); color:var(--ink);
  border-radius:12px; padding:12px 14px; line-height:1.4; font-size:16px;
  transition:border-color .15s, box-shadow .15s, background .15s; min-height:44px;
}
@media (max-width:600px){
  .field input, .field select{ padding:14px 16px; font-size:16px; }
}
.field input::placeholder{ color: color-mix(in oklab, var(--muted) 80%, transparent); }
.field input:focus, .field select:focus{
  outline:none; border-color: color-mix(in oklab, var(--primary) 75%, var(--line));
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--primary) 25%, transparent);
  background: color-mix(in oklab, var(--card) 92%, transparent);
}
/* عند التركيز، ارفع الحقل فوق كل شيء (لإظهار القائمة) */
@media (min-width:801px){
  .field:focus-within{ z-index: 9999; }
}

/* تحسين الـselect: سهم + اتجاه RTL */
.field select{
  -webkit-appearance:none; -moz-appearance:none; appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg fill='%239aa6b2' height='20' viewBox='0 0 24 24' width='20' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-repeat:no-repeat;
  background-position: left 12px center; /* RTL: السهم يسار */
  background-size:20px;
  padding-inline-end:36px; /* مساحة للسهم */
}

/* input[type=date] — اعرض القيمة بشكل نظيف في RTL */
.field input[type="date"]{
  direction:ltr; text-align:start; -webkit-appearance:none; appearance:none; overflow:hidden;
}

/* أقسام */
.form-section{ margin-top:18px; }
.form-section .section-title{ margin:0 0 10px; font-size:15px; font-weight:900; color:var(--ink); }

.list-head{ display:flex; justify-content:space-between; align-items:center; margin:10px 0 6px }

.box{
  border:1px solid var(--line); border-radius:12px; padding:10px;
  max-height:340px; overflow:auto; background:var(--card);
  position:relative; z-index:1; /* تحت السيلكت عند الفتح */
}

/* على الشاشات الكبيرة إن قصّت القائمة، اسمح لها بالخروج */
@media (min-width:801px){
  .box{ overflow:visible; } /* فعّلها فقط لو كانت القائمة تختفي */
}

.chk{ display:flex; gap:8px; align-items:center; margin:4px 0 }

.footer{ margin-top:34px; padding:14px; text-align:center; color:var(--muted); font-size:12px; border-top:1px solid var(--line); }
.footer a{ color:var(--muted); text-decoration:none; }

.actions-row{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
@media (max-width:600px){ .actions-row .btn, .actions-row .btn-ghost{ width:100%; justify-content:center; } }
.radio-row{ display:flex; gap:12px; flex-wrap:wrap; }
.radio-row label{ flex:1; display:inline-flex; align-items:center; gap:8px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:10px 14px; cursor:pointer; justify-content:center; font-weight:600; box-sizing:border-box; max-width:100%; }
@media (max-width:600px){ .radio-row{ flex-direction:column; } .radio-row label{ width:100%; justify-content:flex-start; } }




</style>