:root{--bg:#f4f6f8;--card:#fff;--text:#172033;--muted:#6b7280;--line:#e5e7eb;--primary:#0f172a;--accent:#f59e0b;--green:#15803d;--orange:#c2410c;--red:#b91c1c;--shadow:0 8px 24px rgba(15,23,42,.07);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text)}button,input,select,textarea{font:inherit}button{cursor:pointer}.hidden{display:none!important}.app{min-height:100vh}.topbar{height:62px;background:var(--primary);color:white;display:flex;align-items:center;justify-content:space-between;padding:0 14px;position:sticky;top:0;z-index:20}.brand{font-weight:900;letter-spacing:.4px}.top-actions{display:flex;gap:8px;align-items:center}.icon-btn,.ghost-btn{border:1px solid rgba(255,255,255,.18);background:transparent;color:white;border-radius:10px;padding:8px 10px}.layout{display:flex;min-height:calc(100vh - 62px)}.sidebar{width:240px;background:#fff;border-right:1px solid var(--line);padding:12px;position:fixed;top:62px;bottom:0;overflow:auto;z-index:15}.sidebar button{display:flex;width:100%;gap:10px;border:0;background:transparent;padding:11px 12px;border-radius:10px;color:#344054;text-align:start;margin-bottom:4px}.sidebar button.active,.sidebar button:hover{background:#eef2f6;color:#0f172a;font-weight:700}.content{margin-left:240px;padding:18px;width:calc(100% - 240px)}.page-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}.page-head h1{font-size:22px;margin:0}.btn{border:0;border-radius:10px;padding:10px 14px;background:var(--primary);color:white;font-weight:700}.btn.accent{background:var(--accent);color:#111827}.btn.danger{background:var(--red)}.btn.secondary{background:#e8edf3;color:#172033}.grid{display:grid;gap:12px}.cards{grid-template-columns:repeat(4,minmax(0,1fr))}.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow)}.metric .label{font-size:12px;color:var(--muted);margin-bottom:7px}.metric .value{font-size:23px;font-weight:850}.metric .sub{font-size:11px;color:var(--muted);margin-top:4px}.two{grid-template-columns:1.2fr .8fr}.section-title{font-size:16px;font-weight:800;margin:0 0 10px}.toolbar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}.search{flex:1;min-width:180px}.input,.select,.textarea{width:100%;border:1px solid #d6dae1;border-radius:10px;padding:10px;background:#fff;color:var(--text)}.textarea{min-height:90px;resize:vertical}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff}.table{width:100%;border-collapse:collapse;min-width:680px}.table th,.table td{padding:10px;border-bottom:1px solid var(--line);text-align:start;font-size:13px}.table th{background:#f8fafc;color:#475467;font-size:12px}.badge{display:inline-flex;padding:4px 8px;border-radius:999px;font-size:11px;font-weight:800}.green{background:#dcfce7;color:var(--green)}.orange{background:#ffedd5;color:var(--orange)}.red{background:#fee2e2;color:var(--red)}.gray{background:#eef2f6;color:#475467}.alert{border-radius:12px;padding:11px;margin-bottom:8px;border:1px solid}.alert.orange{border-color:#fdba74}.alert.red{border-color:#fca5a5}.alert.green{border-color:#86efac}.chart{height:210px;display:flex;align-items:end;gap:14px;padding:16px 10px}.bar{flex:1;background:#cbd5e1;border-radius:8px 8px 2px 2px;position:relative;min-height:4px}.bar span{position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:11px;color:var(--muted)}.modal-back{position:fixed;inset:0;background:rgba(2,6,23,.55);display:flex;align-items:center;justify-content:center;padding:14px;z-index:50}.modal{width:min(720px,100%);max-height:90vh;overflow:auto;background:#fff;border-radius:16px;padding:16px}.modal h2{margin:0 0 14px}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.field label{display:block;font-size:12px;font-weight:700;margin-bottom:5px;color:#475467}.field.full{grid-column:1/-1}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:15px}.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(135deg,#0f172a,#334155)}.login-card{width:min(430px,100%);background:#fff;border-radius:20px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.22)}.login-card h1{margin:0 0 4px}.login-card p{color:var(--muted);margin:0 0 20px}.lang-row{display:flex;gap:8px}.lang-row button{flex:1}.mobile-nav{display:none}.empty{padding:30px;text-align:center;color:var(--muted)}.rtl .sidebar{right:0;left:auto;border-right:0;border-left:1px solid var(--line)}.rtl .content{margin-left:0;margin-right:240px}.rtl .modal-actions{justify-content:flex-start}.small{font-size:12px;color:var(--muted)}
@media(max-width:900px){.sidebar{display:none}.content{margin:0;width:100%;padding:14px;padding-bottom:82px}.rtl .content{margin:0}.cards{grid-template-columns:repeat(2,minmax(0,1fr))}.two{grid-template-columns:1fr}.mobile-nav{display:flex;position:fixed;bottom:0;left:0;right:0;height:66px;background:#fff;border-top:1px solid var(--line);z-index:30;justify-content:space-around;padding:7px 4px}.mobile-nav button{border:0;background:transparent;font-size:11px;color:#475467;max-width:72px}.mobile-nav button.active{color:#0f172a;font-weight:800}.topbar{height:58px}.layout{min-height:calc(100vh - 58px)}}
@media(max-width:560px){.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.metric .value{font-size:18px}.card{padding:11px}.form-grid{grid-template-columns:1fr}.field.full{grid-column:auto}.page-head h1{font-size:19px}.page-head{align-items:flex-start}.toolbar .btn{padding:9px 10px}}
.row-actions{
  position:relative;
  display:inline-block;
}

.action-menu-button{
  white-space:nowrap;
}

.row-actions-menu{
  display:none;
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  min-width:180px;
  max-height:240px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(15,23,42,.15);
  z-index:100;
  padding:5px;
}

.row-actions-menu.open{
  display:block;
}

.row-actions-menu button{
  display:block;
  width:100%;
  border:0;
  background:#fff;
  padding:10px 12px;
  text-align:start;
  border-radius:7px;
  cursor:pointer;
  color:var(--text);
}

.row-actions-menu button:hover{
  background:#f1f5f9;
}

.row-actions-menu .delete-action{
  color:var(--red);
}

.rtl .row-actions-menu{
  right:auto;
  left:0;
}
/* تحسين قائمة الإجراءات للهاتف والحاسوب */
.row-actions-menu{
  display:none;
  position:absolute;
  top:calc(100% + 5px);
  right:0;
  min-width:190px;
  max-width:calc(100vw - 30px);
  max-height:240px;
  overflow-y:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  box-shadow:0 12px 30px rgba(15,23,42,.18);
  z-index:1000;
  padding:5px;
}

.row-actions-menu.open{
  display:block;
}

.row-actions-menu button{
  display:block;
  width:100%;
  min-height:42px;
  border:0;
  background:#fff;
  padding:10px 12px;
  text-align:start;
  border-radius:7px;
  cursor:pointer;
  color:var(--text);
  white-space:nowrap;
}

.row-actions-menu button:hover{
  background:#f1f5f9;
}

.row-actions-menu .delete-action{
  color:var(--red);
}

/* العربية */
.rtl .row-actions-menu{
  right:auto;
  left:0;
}

.rtl .row-actions-menu button{
  text-align:right;
}

/* الهاتف */
@media(max-width:560px){
  .row-actions-menu{
    position:fixed;
    top:auto;
    right:10px;
    left:auto;
    bottom:76px;
    width:calc(100vw - 20px);
    max-width:300px;
    max-height:55vh;
    border-radius:12px;
  }

  .rtl .row-actions-menu{
    right:auto;
    left:10px;
  }

  .row-actions-menu button{
    min-height:44px;
    padding:11px 14px;
    font-size:14px;
  }
}
.form-section{
  grid-column:1/-1;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px;
  background:#fafbfc;
  margin-bottom:4px;
}

.form-section-title{
  margin:0 0 12px;
  font-size:14px;
  font-weight:800;
  color:var(--primary);
  padding-bottom:8px;
  border-bottom:1px solid var(--line);
}

.rtl .form-section-title{
  text-align:right;
}

@media(max-width:560px){
  .form-section{
    padding:10px;
  }

  .form-section-title{
    font-size:13px;
  }
}
/* نافذة تفاصيل العامل */
.employee-summary-modal{
  max-width:760px;
}

/* عنوان النافذة */
.employee-summary-head{
  margin-bottom:18px;
}

.employee-summary-head h2{
  margin:0 0 5px;
}

/* أقسام التفاصيل */
.summary-section{
  margin-top:16px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fafbfc;
}

.summary-section-title{
  margin:0 0 12px;
  font-size:15px;
  font-weight:800;
  color:var(--primary);
  padding-bottom:9px;
  border-bottom:1px solid var(--line);
}

/* معلومات العامل والعمل */
.summary-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.summary-info-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
}

.summary-info-card strong{
  display:block;
  margin-top:5px;
  font-size:15px;
}

/* الحساب المالي */
.summary-finance-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:10px;
}

.summary-finance-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:12px;
  text-align:center;
}

.summary-finance-card strong{
  display:block;
  margin-top:6px;
  font-size:16px;
}

/* العناوين الصغيرة */
.summary-label{
  display:block;
  font-size:12px;
  color:var(--muted);
  font-weight:600;
}

/* العربية */
.rtl .summary-section-title{
  text-align:right;
}

.rtl .summary-finance-card,
.rtl .summary-info-card{
  text-align:right;
}

/* الهاتف */
@media(max-width:560px){

  .employee-summary-modal{
    width:calc(100vw - 20px);
    max-width:none;
  }

  .summary-info-grid{
    grid-template-columns:1fr;
  }

  .summary-finance-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .summary-finance-card strong{
    font-size:14px;
  }

}
.project-account-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.project-account-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px;
}

.project-account-head{
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--line);
}

.project-account-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
}

.project-account-grid>div{
  background:#fafbfc;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px;
}

.project-account-grid strong{
  display:block;
  margin-top:5px;
  font-size:14px;
}

.project-account-grid .project-balance{
  font-weight:700;
}


@media(max-width:700px){
  .project-account-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:560px){
  .project-account-card{
    padding:10px;
  }

  .project-account-grid{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .project-account-grid>div{
    padding:9px;
  }
}
.financial-history{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.financial-history-item{
  display:grid;
  grid-template-columns:1.2fr 1fr auto auto;
  gap:10px;
  align-items:center;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:11px;
}

.financial-history-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.financial-history-project{
  font-size:13px;
  color:var(--muted);
}

.financial-history-amount{
  font-weight:800;
  text-align:end;
  white-space:nowrap;
}

.financial-history-details{
  min-height:36px;
  padding:7px 10px;
  font-size:12px;
  white-space:nowrap;
}

.financial-history-notes{
  grid-column:1/-1;
  padding-top:6px;
  border-top:1px solid var(--line);
}

@media(max-width:560px){

  .financial-history-item{
    grid-template-columns:1fr auto;
  }

  .financial-history-project{
    grid-column:1/-1;
    order:3;
  }

  .financial-history-amount{
    grid-column:2;
    grid-row:1;
  }

  .financial-history-details{
    grid-column:1/-1;
    width:100%;
    order:4;
  }

}

.financial-history-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.financial-history-project{
  font-size:13px;
  color:var(--muted);
}

.financial-history-amount{
  font-weight:800;
  text-align:end;
  white-space:nowrap;
}

.financial-history-notes{
  grid-column:1/-1;
  padding-top:6px;
  border-top:1px solid var(--line);
}

@media(max-width:560px){

  .financial-history-item{
    grid-template-columns:1fr auto;
  }

  .financial-history-project{
    grid-column:1/-1;
    order:3;
  }

  .financial-history-amount{
    grid-column:2;
    grid-row:1;
  }

}
.financial-history-details{
  min-height:36px;
  height:36px;
  width:auto;
  padding:7px 10px;
  font-size:12px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

.transaction-details-modal{
  max-width:650px;
}

.transaction-details-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.transaction-notes{
  grid-column:1/-1;
}

@media(max-width:560px){

  .transaction-details-grid{
    grid-template-columns:1fr;
  }

  .transaction-notes{
    grid-column:auto;
  }

.financial-history-details{
  grid-column:auto;
  width:auto;
  order:4;
  flex:0 0 auto;
}

}
.financial-cancelled-badge{
  display:inline-block;
  margin-top:4px;
  font-weight:700;
}

.financial-history-cancel{
  margin-inline-start:0;
  min-height:36px;
  height:36px;
  width:auto;
  padding:7px 10px;
  font-size:12px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
}

@media(max-width:560px){
  .financial-history-action{
    flex-wrap:wrap;
    gap:6px;
  }

 .financial-history-cancel{
  margin-inline-start:0;
  min-height:36px;
  padding:7px 10px;
  font-size:12px;
  width:auto;
  white-space:nowrap;
}
}
/* =========================================
   MODERN CUSTOM SELECT
   ========================================= */

.custom-select{
  position:relative;
  width:100%;
}

.custom-select-button{
  width:100%;
  min-height:46px;
  padding:12px 16px;
  border:1px solid #E2E8F0;
  border-radius:10px;
  background:#fff;
  color:#0f172a;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  line-height:1.4;
  cursor:pointer;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease;
  text-align:start;
}

.custom-select-button:hover{
  border-color:#CBD5E1;
  background:#F8FAFC;
}

.custom-select-button:focus{
  outline:none;
  border-color:#94A3B8;
  box-shadow:0 0 0 3px rgba(148,163,184,.18);
}

.custom-select-arrow{
  flex:0 0 auto;
  font-size:11px;
  color:#64748B;
  transition:transform .15s ease;
}

.custom-select.open .custom-select-arrow{
  transform:rotate(180deg);
}

.custom-select-menu{
  display:none;
  position:absolute;
  z-index:1000;
  top:calc(100% + 6px);
  left:0;
  right:0;

  max-height:240px;
  overflow-y:auto;

  background:#fff;
  border:1px solid #E2E8F0;
  border-radius:10px;

  box-shadow:
    0 10px 25px rgba(15,23,42,.10),
    0 4px 10px rgba(15,23,42,.06);

  padding:5px;
}

.custom-select.open .custom-select-menu{
  display:block;
}

.custom-select-option{
  padding:10px 12px;
  border-radius:7px;
  cursor:pointer;
  font-size:14px;
  color:#334155;
  transition:background .12s ease;
}

.custom-select-option:hover{
  background:#F1F5F9;
}

.custom-select-option.selected{
  background:#E8EEF5;
  color:#0F172A;
  font-weight:600;
}

.custom-select-placeholder{
  color:#94A3B8;
}

.rtl .custom-select-button{
  text-align:right;
}

.rtl .custom-select-menu{
  text-align:right;
}

/* Mobile */
@media(max-width:700px){

  .custom-select-button{
    min-height:46px;
    padding:12px 14px;
    border-radius:10px;
  }

  .custom-select-menu{
    max-height:220px;
  }

  .custom-select-option{
    padding:12px;
    min-height:44px;
    display:flex;
    align-items:center;
  }

}