:root{
  --bg:#F4F5F7;
  --surface:#FFFFFF;
  --border:#DFE1E6;
  --text:#172B4D;
  --muted:#6B778C;
  --blue:#0052CC;
  --blue-2:#0747A6;
  --blue-weak:#DEEBFF;
  --green:#00875A;
  --orange:#FF8B00;
  --red:#DE350B;

  --radius:10px;
  --shadow: 0 6px 18px rgba(9,30,66,.08);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  overflow-x:hidden;
  font-family:"Cairo",system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1100px 520px at 20% 10%, rgba(0,82,204,.14), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, rgba(0,135,90,.10), transparent 55%),
    linear-gradient(180deg, #F7FAFF, #EEF2FF);
}

/*
  Defensive overrides: some hosting setups (or old debug builds) may apply
  centering/max-width constraints to the root container which makes the UI look
  “shrunk”. Force the app and auth screens to occupy the full viewport.
*/
body{width:100vw;min-height:100vh;overflow-x:hidden;display:block !important;}
#appRoot{width:100% !important;max-width:none !important;margin:0 !important;min-height:100vh;display:block !important;}
.auth{width:100%}
.app{width:100%}
button,input,select,textarea{font-family:inherit}
a{color:inherit}

.hidden{display:none !important;}
.container{padding:16px}
.row{display:flex;gap:12px;align-items:center}
.spacer{flex:1}
.muted{color:var(--muted)}
.small{font-size:12px}
.h1{font-size:22px;font-weight:800;margin:0}
.h2{font-size:16px;font-weight:800;margin:0}

.badge{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:800;font-size:12px;
  padding:2px 10px;border-radius:999px;
  border:1px solid var(--border);
  background: #FAFBFC;
}
.badge.todo{background:#FFFAE6;border-color:#FFE380;color:#7A5D00}
.badge.progress{background:#DEEBFF;border-color:#B3D4FF;color:var(--blue-2)}
.badge.done{background:#E3FCEF;border-color:#ABF5D1;color:#006644}
.badge.low{background:#E6FCFF;border-color:#B3F5FF;color:#006A75}
.badge.medium{background:#FFF0B3;border-color:#FFE380;color:#7A5D00}
.badge.high{background:#FFEBE6;border-color:#FFBDAD;color:#BF2600}

.btn{
  border:1px solid var(--border);
  background:var(--surface);
  color:var(--text);
  font-weight:800;
  padding:8px 12px;border-radius:8px;
  cursor:pointer;
}
.btn:hover{box-shadow:0 6px 14px rgba(9,30,66,.10)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:#fff}
.btn.primary:hover{background:var(--blue-2);border-color:var(--blue-2)}
.btn.link{background:transparent;border-color:transparent;color:var(--blue);box-shadow:none}
.btn.danger{background:#FFEBE6;border-color:#FFBDAD;color:#BF2600}

.btn.lang-flag-btn{
  width:58px;
  min-width:58px;
  height:44px;
  padding:0;
  border-radius:14px;
  position:relative;
  overflow:hidden;
  font-size:0;
  color:transparent;
  background:#fff;
  box-shadow:0 8px 18px rgba(9,30,66,.08);
}
.btn.lang-flag-btn::before{
  content:'';
  display:block;
  width:34px;
  height:24px;
  margin:auto;
  border-radius:5px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  box-shadow:0 0 0 1px rgba(9,30,66,.08);
}
.btn.lang-flag-btn[data-lang='ar']::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23ce1126'/%3E%3Crect y='13.33' width='60' height='13.34' fill='%23fff'/%3E%3Crect y='26.66' width='60' height='13.34' fill='%23000000'/%3E%3Ccircle cx='30' cy='20' r='4.2' fill='%23c9a227'/%3E%3C/svg%3E");}
.btn.lang-flag-btn[data-lang='en']::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'%3E%3Crect width='60' height='40' fill='%23b22234'/%3E%3Cg fill='%23fff'%3E%3Crect y='3.08' width='60' height='3.08'/%3E%3Crect y='9.23' width='60' height='3.08'/%3E%3Crect y='15.38' width='60' height='3.08'/%3E%3Crect y='21.53' width='60' height='3.08'/%3E%3Crect y='27.68' width='60' height='3.08'/%3E%3Crect y='33.83' width='60' height='3.08'/%3E%3C/g%3E%3Crect width='27' height='21.5' fill='%233c3b6e'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='4.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='10.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='16.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='22.5' cy='4.3' r='1.1'/%3E%3Ccircle cx='7.5' cy='8.6' r='1.1'/%3E%3Ccircle cx='13.5' cy='8.6' r='1.1'/%3E%3Ccircle cx='19.5' cy='8.6' r='1.1'/%3E%3Ccircle cx='4.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='10.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='16.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='22.5' cy='12.9' r='1.1'/%3E%3Ccircle cx='7.5' cy='17.2' r='1.1'/%3E%3Ccircle cx='13.5' cy='17.2' r='1.1'/%3E%3Ccircle cx='19.5' cy='17.2' r='1.1'/%3E%3C/g%3E%3C/svg%3E");}
.btn.lang-flag-btn:focus-visible{outline:0;box-shadow:0 0 0 4px rgba(0,82,204,.18),0 12px 24px rgba(9,30,66,.10)}

.input, .select, .textarea{
  width:100%;
  border:1px solid var(--border);
  background:#FAFBFC;
  border-radius:8px;
  padding:10px 12px;
  outline:none;
}
.input:focus, .select:focus, .textarea:focus{
  border-color: rgba(0,82,204,.55);
  box-shadow: 0 0 0 4px rgba(0,82,204,.12);
  background:#fff;
}
.textarea{min-height:92px;resize:vertical}

.app{
  height:100%;
  display:flex;
  flex-direction:column;
}

/* Top bar */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--border);
  height:60px;
  display:flex;
  align-items:center;
  padding:0 16px;
  gap:12px;
}
.topbar-brand{display:flex;align-items:center;line-height:0;text-decoration:none;flex:0 0 auto}
.topbar .logo{
  width:44px;height:44px;border-radius:14px;
  background:#000 url("./mustafa-geek-logo.png?v=2") center/84% no-repeat;
  box-shadow:0 10px 24px rgba(9,30,66,.16);
  border:1px solid rgba(223,225,230,.95);
}
.topbar .product{
  font-weight:900;
}
.search{
  max-width:520px;
  width:100%;
  position:relative;
}
.search input{
  width:100%;
  padding:10px 12px;
  padding-inline-start:38px;
  border-radius:999px;
}
.search .icon{
  position:absolute;
  inset-inline-start:12px;
  top:50%;
  transform:translateY(-50%);
  color:var(--muted);
  font-weight:900;
}

/* Layout */
.shell{
  flex:1;
  display:flex;
  min-height:0;
}
.sidebar{
  width:268px;
  background:var(--surface);
  border-inline-end:1px solid var(--border);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}
.sidebar .project-card{
  border:1px solid var(--border);
  border-radius:12px;
  padding:10px;
  background:#FAFBFC;
}
.sidebar .project-title{
  font-weight:900;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.sidebar .project-sub{font-size:12px;color:var(--muted);margin-top:2px}
.sidebar .menu{
  display:flex;flex-direction:column;gap:4px;
}
.menu-item{
  display:flex;align-items:center;gap:10px;
  padding:8px 10px;border-radius:10px;
  cursor:pointer;border:1px solid transparent;
  position:relative;
}
.menu-item:hover{background:#F4F5F7}
.menu-item.active{
  background:var(--blue-weak);
  border-color:#B3D4FF;
  color:var(--blue-2);
  font-weight:900;
}

/* Active menu checkmark */
.menu-item.active .menu-ico{
  background: var(--blue-2);
  border-color: var(--blue-2);
  position: relative;
}
.menu-item.active .menu-ico::after{
  content: "✓";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
}
.menu-ico{
  width:18px;height:18px;border-radius:4px;
  border:1px solid var(--border);
  background:#fff;
}
.main{
  flex:1;
  min-width:0;
  min-height:0;
  padding:18px;
}
.main-header{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
}
.toolbar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
}

/* Table */
.table-wrap{
  margin-top:14px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  box-shadow:var(--shadow);
  overflow:auto;
  min-height:0;
}
table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
  min-width:880px;
}
thead th{
  text-align:start;
  padding:12px 12px;
  color:var(--muted);
  font-weight:900;
  border-bottom:1px solid var(--border);
  background:#FAFBFC;
  position:sticky;top:0;z-index:1;
}
tbody td{
  padding:10px 12px;
  border-bottom:1px solid #EFF1F3;
  vertical-align:middle;
}
tbody tr:hover{background:#FAFBFC;cursor:pointer}
.key{
  color:var(--muted);
  font-weight:900;
}
.type-dot{
  width:10px;height:10px;border-radius:999px;background:#B3BAC5;display:inline-block
}
.actions{
  display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap
}
.task-row-actions{
  justify-content:flex-start;
  align-items:center;
  flex-wrap:nowrap;
  gap:6px;
  white-space:nowrap;
}
.task-row-actions .btn{
  padding:7px 10px;
  font-size:13px;
}
.task-extra-btn{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.task-extra-btn .task-action-icon{
  color:#BF2600;
  font-size:14px;
  line-height:1;
}

/* Drawer */
.drawer-actions{
  position:sticky;
  bottom:0;
  padding:12px 0 6px;
  margin-top:12px;
  background:var(--surface);
  border-top:1px solid var(--border);
}
.drawer-actions .btn{width:100%;}

.drawer-backdrop{
  position:fixed;inset:0;background:rgba(9,30,66,.45);
  display:flex;justify-content:flex-end;
  z-index:1500;
}
.drawer{
  width:min(520px, 95vw);
  height:100%;
  background:var(--surface);
  border-inline-start:1px solid var(--border);
  padding:16px;
  overflow:auto;
}
.drawer .title{font-size:18px;font-weight:900}
.drawer .section{margin-top:12px}
.hr{height:1px;background:var(--border);margin:12px 0}
.comment{border:1px solid var(--border);border-radius:10px;padding:10px;background:#FAFBFC}
.comment + .comment{margin-top:10px}

/* Toast (success/error) */
.toast-wrap{
  position:fixed;
  top:12px;
  inset-inline:0;
  display:flex;
  justify-content:center;
  pointer-events:none;
  z-index:2000;
}
.toast{
  pointer-events:auto;
  min-width:240px;
  max-width:min(640px, 92vw);
  border-radius:14px;
  padding:12px 14px;
  border:1px solid rgba(17,24,39,.12);
  box-shadow: 0 18px 60px rgba(0,0,0,.18);
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-weight:800;
}
.toast .ico{
  width:22px;
  height:22px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:13px;
  font-weight:900;
  flex:0 0 auto;
}
.toast.ok{
  background: rgba(0,135,90,.10);
  border-color: rgba(0,135,90,.25);
  color: #005a3c;
}
.toast.ok .ico{
  background: rgba(0,135,90,.18);
  color:#004a32;
}
.toast.err{
  background: rgba(222,53,11,.10);
  border-color: rgba(222,53,11,.25);
  color: #7b1c00;
}
.toast.err .ico{
  background: rgba(222,53,11,.18);
  color:#7b1c00;
}

/* Auth */
.auth{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:18px;
  background:
    radial-gradient(1100px 520px at 20% 10%, rgba(0,82,204,.18), transparent 60%),
    radial-gradient(900px 520px at 85% 18%, rgba(0,135,90,.14), transparent 55%),
    linear-gradient(180deg, #F7FAFF, #EEF2FF);
}
.auth .card{
  width:min(560px, 95vw);
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px);
  border:1px solid rgba(17,24,39,.10);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:16px;
}
.auth-brand-wrap{display:flex;justify-content:center;margin-bottom:12px}
.auth-logo-mark{width:82px;height:82px;border-radius:22px;object-fit:cover;display:block;background:#000;box-shadow:0 18px 36px rgba(9,30,66,.18);border:1px solid rgba(223,225,230,.95)}
.auth-head{align-items:center}
.card h2{margin:0 0 10px 0}
.form-grid{display:grid;gap:10px}
.label{font-size:12px;color:var(--muted);font-weight:800}
.small-link{font-size:12px}
.auth-meta{margin-top:10px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.auth-api-line{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;direction:ltr}
.auth-version-line{display:block;font-weight:800;letter-spacing:.2px}

/* Forgot modal */
.modal{
  display:none;
  position:fixed;
  inset:0;
  background: rgba(9,30,66,.45);
  padding:20px;
  z-index:1000;
}
.modal.open{display:flex;align-items:center;justify-content:center}
.modal-card{
  width:min(520px, 100%);
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(17,24,39,.10);
  box-shadow: 0 24px 80px rgba(0,0,0,.28);
  padding:16px;
}
.modal-head{display:flex;align-items:center;gap:12px}
.icon-btn{
  margin-inline-start:auto;
  border:1px solid var(--border);
  background: #FAFBFC;
  border-radius:10px;
  width:38px;
  height:38px;
  cursor:pointer;
  font-weight:900;
}
.icon-btn:hover{box-shadow:0 6px 14px rgba(9,30,66,.10)}

/* Responsive */
@media (max-width: 980px){
  .sidebar{display:none}
  .main{padding:16px 12px 90px}
  table{min-width:720px}
}

@media (max-width: 640px){
  .auth .card{width:min(560px, 100%)}
  .auth-meta{gap:3px}
  .auth-api-line{font-size:11px;white-space:nowrap}
  .auth-version-line{font-size:11px}
  .btn.lang-flag-btn{
    width:64px;
    min-width:64px;
    height:48px;
    border-radius:15px;
  }
  .btn.lang-flag-btn::before{width:38px;height:27px}
  .topbar{height:58px;padding:0 12px;gap:10px}
  .topbar .logo{width:40px;height:40px;border-radius:12px}
  .topbar .product{display:none}
  .auth-logo-mark{width:74px;height:74px;border-radius:20px}
}

/*
  Fix: the sticky table header in "List" view should never cover the task drawer.
  Some browsers/hosting combos may create unexpected stacking contexts.
  We enforce a much higher z-index for the drawer, and when the drawer is open
  we disable the sticky header so the "Change status" control stays visible.
*/
.drawer-backdrop{z-index:99999 !important;}
.drawer{position:relative;z-index:100000 !important;}
body.drawer-open thead th{position:static !important;top:auto !important;}


/* Admin: compact task view switcher */
.view-switcher{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}
.chip{
  border:1px solid var(--border);
  background:#fff;
  padding:6px 10px;
  border-radius:999px;
  cursor:pointer;
  font-weight:800;
  font-size:13px;
}
.chip:hover{background:#F4F5F7}
.chip.active{
  background:var(--blue-weak);
  border-color:#B3D4FF;
  color:var(--blue-2);
}


/* Task alert badge in sidebar */
.menu-badge{
  min-width:18px;
  height:18px;
  padding:0 6px;
  border-radius:999px;
  background: var(--blue-2);
  color:#fff;
  font-size:12px;
  font-weight:900;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-inline-start:auto;
}

.pulse{
  animation: pulse 1.25s infinite;
}

@keyframes pulse{
  0%{ transform: scale(1); opacity: 1; }
  70%{ transform: scale(1.08); opacity: .9; }
  100%{ transform: scale(1); opacity: 1; }
}

.task-alert{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#FFF0B3;
  border:1px solid #FFE380;
  color:#7A5D00;
  font-weight:900;
}

/* Deliverables tags */
.badge.in{ background:#DEEBFF;border-color:#B3D4FF;color:var(--blue-2) }
.badge.out{ background:#E3FCEF;border-color:#ABF5D1;color:#006644 }

/* Links */
.link{ color: var(--blue-2); font-weight:900; text-decoration:none; }
.link:hover{ text-decoration:underline; }