/* assets/css/company.css */
.co-page{ max-width:1200px; margin:0 auto; padding:110px 16px 90px; }

.co-hero{ display:grid; grid-template-columns:1.2fr .8fr; gap:14px; margin-bottom:14px; }
.co-kicker{ display:inline-flex; padding:6px 10px; border-radius:999px; font-size:12px; opacity:.85; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.co-title{ margin:10px 0 6px; font-size:26px; }
.co-sub{ margin:0; opacity:.85; line-height:1.7; }

.co-hero__right{ display:flex; flex-direction:column; gap:10px; }
.co-profile{ display:flex; align-items:center; gap:10px; padding:12px; border-radius:16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); }
.co-avatar{ width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:.6px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14); }
.co-name{ font-weight:900; }
.co-role{ opacity:.8; font-size:12px; margin-top:2px; }

.co-meta{ display:flex; flex-direction:column; gap:8px; }
.co-chip{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:14px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); font-size:12px; }
.co-chip.subtle{ opacity:.75; }
.dot{ width:8px;height:8px;border-radius:50%; background:#22c55e; box-shadow:0 0 0 4px rgba(34,197,94,.12); }

.co-card{ border-radius:18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10); overflow:hidden; }
.co-toolbar{
  position: sticky; top: 74px; z-index:10;
  background: rgba(15,15,18,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 12px;
}
.co-toolbar__row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.co-spacer{ flex:1; }

.co-list{ padding:12px; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.co-order{
  border-radius:16px; background:rgba(0,0,0,.18); border:1px solid rgba(255,255,255,.10);
  padding:14px; cursor:pointer; transition:.2s;
}
.co-order:hover{ border-color:rgba(255,255,255,.18); transform: translateY(-2px); }
.co-order.completed{
  border-color: rgba(34,197,94,.55);
  background: rgba(34,197,94,.10);
}
.co-order__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
.co-order__title{ font-weight:900; line-height:1.3; }
.co-order__meta{ margin-top:10px; display:flex; gap:8px; flex-wrap:wrap; }
.co-pill{ padding:6px 10px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); opacity:.95; }

.co-empty,.co-loading{ padding:16px; text-align:center; opacity:.75; border-top:1px solid rgba(255,255,255,.08); }

/* modal shared */
.wm-modal{ position:fixed; inset:0; z-index:999; display:none; }
.wm-modal[aria-hidden="false"]{ display:block; }
.wm-modal__backdrop{ position:absolute; inset:0; background: rgba(0,0,0,.55); }
.wm-modal__panel{
  position:relative;
  width:min(820px, calc(100vw - 24px));
  margin: 70px auto 24px;
  border-radius: 18px;
  background: rgba(20,20,25,.94);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(12px);
  overflow:hidden;
  max-height: calc(100vh - 110px);
  display:flex;
  flex-direction:column;
}
.wm-modal__head{
  padding:14px 14px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px;
}
.wm-modal__title{ font-weight:900; }
.wm-modal__sub{ opacity:.8; font-size:12px; margin-top:4px; }
.wm-modal__body{ padding:12px 14px 14px; overflow:auto; -webkit-overflow-scrolling:touch; flex:1 1 auto; }
.wm-modal__foot{ padding:12px 14px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:flex-end; gap:10px; flex:0 0 auto; }

.co-formGrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

@media (max-width:900px){
  .co-hero{ grid-template-columns:1fr; }
  .co-list{ grid-template-columns:1fr; }
  .co-toolbar{ top:64px; }
  .co-formGrid{ grid-template-columns: 1fr; }
}

.co-list {
    margin-top: 87px;
}

/* ===== Fix: Select / Dropdown text not visible ===== */
:root{
  --wm-input-bg: rgba(255,255,255,.06);
  --wm-input-border: rgba(255,255,255,.12);
  --wm-input-text: rgba(255,255,255,.92);
  --wm-input-placeholder: rgba(255,255,255,.55);
}

:root[data-theme="light"]{
  --wm-input-bg: rgba(0,0,0,.04);
  --wm-input-border: rgba(0,0,0,.12);
  --wm-input-text: rgba(0,0,0,.88);
  --wm-input-placeholder: rgba(0,0,0,.55);
}

/* select نفسه */
select,
select.wm-select,
.mi-select,
.ro-select,
.ct-select{
  background: var(--wm-input-bg) !important;
  color: var(--wm-input-text) !important;
  border: 1px solid var(--wm-input-border) !important;
  outline: none;
}

/* option داخل القائمة (مهم لأنه أحيانًا بيكون أبيض بالنص) */
select option{
  background: #121212; /* دارك */
  color: #ffffff;
}

:root[data-theme="light"] select option{
  background: #ffffff;
  color: #111111;
}

/* placeholder-like (لو عندك option أول واحد) */
select:invalid,
select option[disabled]{
  color: var(--wm-input-placeholder) !important;
}

/* optional: تحسين شكل السهم بالدارك */
select{
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(255,255,255,.85) 50%),
    linear-gradient(135deg, rgba(255,255,255,.85) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 55%,
    calc(100% - 11px) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}

:root[data-theme="light"] select{
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(0,0,0,.65) 50%),
    linear-gradient(135deg, rgba(0,0,0,.65) 50%, transparent 50%);
}