:root{
  --plum:#7F1E61; --plum-dark:#5E1548; --plum-soft:#F0E4EC;
  --orange:#EC612B; --amber:#F7A400;
  --ink:#241019; --muted:#8A7A83; --line:#E7DBE2;
  --bg:#F7F4F5; --card:#FFFFFF; --green:#2E7D46; --green-soft:#E4F3E9;
  --red:#C0392B; --red-soft:#FBE6E3; --blue-soft:#E4EEF5;
}
*{box-sizing:border-box; letter-spacing:0;}
html,body{margin:0; padding:0;}
body{
  font-family:"IBM Plex Sans Arabic",sans-serif;
  background:var(--bg); color:var(--ink); line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
.num{font-family:"IBM Plex Sans Arabic",sans-serif; font-variant-numeric:tabular-nums; unicode-bidi:plaintext;}
h1,h2,h3{font-family:"IBM Plex Sans Arabic",sans-serif; line-height:1.35; margin:0;}
.brand-word{font-family:"IBM Plex Sans Arabic",sans-serif; font-weight:600; letter-spacing:.2px; text-transform:lowercase; unicode-bidi:plaintext;}
button{font-family:inherit; cursor:pointer;}
input,select{font-family:inherit; font-size:16px;}

/* Login screen */
#login-screen{
  min-block-size:100vh; display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 30% 20%, #8E3572 0%, var(--plum-dark) 55%, #3A1230 100%);
  padding:20px;
}
.login-card{
  background:#fff; border-radius:20px; padding:36px 34px; inline-size:100%; max-inline-size:400px;
  box-shadow:0 30px 70px rgba(0,0,0,.35); text-align:center; position:relative;
}
.login-card img{inline-size:min(330px,92%); block-size:auto; max-block-size:125px; object-fit:contain; margin:0 auto 8px; display:block;}
.lang-toggle-app{inline-size:100%; background:rgba(0,0,0,.18); color:#EAD9E4; border:1px solid rgba(255,255,255,.18); padding:8px 10px; border-radius:9px; font-size:12.5px; margin-block-end:8px; transition:.15s; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lang-toggle-app:hover{background:rgba(0,0,0,.3); color:#fff;}
.login-card h2{color:var(--plum); font-size:24px; margin-block-end:4px;}
.login-card p.sub{color:var(--muted); font-size:13.5px; margin:0 0 22px;}
.login-field{text-align:start; margin-block-end:14px;}
.login-field label{display:block; font-size:13px; font-weight:500; margin-block-end:6px; color:var(--ink);}
.login-field input{inline-size:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:11px; background:#FBF8FA; transition:.15s;}
.login-field input:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-soft); background:#fff;}
.login-btn{inline-size:100%; background:var(--orange); color:#fff; border:none; padding:13px; border-radius:12px; font-size:15.5px; font-weight:600; margin-block-start:6px; transition:.18s;}
.login-btn:hover{background:#d24e1c;}
.login-err{background:var(--red-soft); color:var(--red); padding:9px 14px; border-radius:9px; font-size:13px; margin-block-end:14px; display:none; text-align:start;}
.modal-overlay{position:fixed; inset:0; background:rgba(30,20,28,.55); display:flex; align-items:center; justify-content:center; z-index:200; padding:16px;}
.modal-box{background:#fff; border-radius:16px; padding:22px; max-inline-size:380px; inline-size:100%; box-shadow:0 20px 60px rgba(0,0,0,.3);}
.modal-box h3{color:var(--plum-dark); margin-block-end:16px; font-size:17px;}
.modal-box .field{margin-block-end:12px;}
.modal-box .field label{display:block; font-size:12px; color:var(--muted); margin-block-end:5px;}
.modal-box .field input{inline-size:100%; padding:10px 12px; border:1.5px solid var(--line); border-radius:9px; font-size:14px; box-sizing:border-box;}
.login-err.show{display:block;}
.login-hint{margin-block-start:18px; font-size:11.5px; color:var(--muted); line-height:1.6;}
#app-shell{display:none;}
#app-shell.show{display:flex;}

/* Layout */
.app{display:flex; min-height:100vh;}
aside{
  inline-size:250px; background:linear-gradient(180deg,var(--plum) 0%,var(--plum-dark) 100%);
  color:#fff; padding:0; position:sticky; inset-block-start:0; block-size:100vh;
  display:flex; flex-direction:column; flex-shrink:0;
}
.brand{padding:18px 16px 16px; border-block-end:1px solid rgba(255,255,255,.12); display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
.brand-logo{inline-size:min(190px,100%); block-size:auto; max-block-size:72px; object-fit:contain; flex-shrink:0;}
.brand span{font-size:11px; color:var(--amber); font-family:"IBM Plex Sans Arabic";}
nav{padding:14px 12px; flex:1; overflow-y:auto; min-block-size:0;}
.navbtn{
  display:flex; align-items:center; gap:11px; inline-size:100%; text-align:start;
  background:transparent; border:none; color:#EAD9E4; padding:12px 14px;
  border-radius:11px; font-size:15.5px; margin-block-end:4px; transition:.18s; font-weight:500;
}
.navbtn:hover{background:rgba(255,255,255,.09); color:#fff;}
.navbtn.active{background:var(--orange); color:#fff; font-weight:600;}
.navbtn .ic{inline-size:20px; text-align:center; font-size:17px;}
.session-box{padding:14px 16px; border-block-start:1px solid rgba(255,255,255,.12);}
.session-box .who{font-size:13.5px; color:#fff; font-weight:600; margin-block-end:1px;}
.session-box .role{font-size:11.5px; color:#C9A9BE; margin-block-end:10px;}
.avatar-wrap{position:relative; inline-size:52px; block-size:52px; margin:0 auto 10px;}
.avatar-circle{inline-size:52px; block-size:52px; border-radius:50%; background:linear-gradient(135deg,var(--orange),var(--amber)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:19px; font-weight:700; cursor:pointer; background-size:cover; background-position:center; border:2px solid rgba(255,255,255,.25); transition:opacity .15s;}
.avatar-circle:hover{opacity:.85;}
.avatar-edit-badge{position:absolute; inset-inline-end:-2px; inset-block-end:-2px; inline-size:18px; block-size:18px; border-radius:50%; background:var(--card); color:var(--plum-dark); font-size:10px; display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(0,0,0,.3); pointer-events:none;}
@media(max-width:820px){ .avatar-wrap{display:none;} }
.logout-btn{inline-size:100%; background:rgba(0,0,0,.18); color:#EAD9E4; border:1px solid rgba(255,255,255,.18); padding:8px 10px; border-radius:9px; font-size:13px; transition:.15s; overflow:hidden; white-space:nowrap;}
.logout-btn:hover{background:rgba(0,0,0,.3); color:#fff;}
main{flex:1; padding:26px 30px 60px; overflow-x:hidden; min-inline-size:0;}
.pagehead{display:flex; justify-content:space-between; align-items:flex-end; margin-block-end:22px; flex-wrap:wrap; gap:12px;}
.pagehead h2{font-size:27px; color:var(--plum);}
.pagehead p{margin:3px 0 0; color:var(--muted); font-size:14px;}

/* KPI cards */
.kpigrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-block-end:24px;}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px 20px; position:relative; overflow:hidden;}
.kpi::before{content:""; position:absolute; inset-block-start:0; inset-inline-start:0; inline-size:4px; block-size:100%; background:var(--plum);}
.kpi.k-orange::before{background:var(--orange);} .kpi.k-amber::before{background:var(--amber);} .kpi.k-green::before{background:var(--green);} .kpi.k-blue::before{background:#3B7DBF;}
.kpi .lbl{font-size:13px; color:var(--muted); margin-block-end:8px;}
.kpi .val{font-size:30px; font-weight:700; color:var(--plum); font-family:"IBM Plex Sans Arabic";}
.kpi .sub{font-size:12px; color:var(--muted); margin-block-start:4px;}

/* Cards */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px; margin-block-end:20px;}
.card h3{font-size:18px; color:var(--plum); margin-block-end:16px; display:flex; align-items:center; gap:8px;}
/* ===== أقسام قابلة للطي على الجوال — كل قسم يبدأ مطوياً بعنوانه فقط، يتوسَّع بالضغط عليه، دون حذف أي محتوى ===== */
@media(max-width:720px){
  .card.js-collapsible h3{ cursor:pointer; user-select:none; }
  .card.js-collapsible.collapsed > :not(h3){ display:none; }
  .card.js-collapsible h3::after{ content:"⌄"; margin-inline-start:auto; font-size:15px; color:var(--muted); transition:transform .18s; flex-shrink:0; }
  .card.js-collapsible.collapsed h3::after{ transform:rotate(-90deg); }
  .card.js-collapsible{ margin-block-end:10px; }
  .card.js-collapsible h3{ margin-block-end:0; }
  .card.js-collapsible:not(.collapsed) h3{ margin-block-end:16px; }
}
.card h3 .tag{font-family:"IBM Plex Sans Arabic"; font-size:11px; font-weight:500; background:var(--plum-soft); color:var(--plum); padding:3px 9px; border-radius:20px;}
.card p.hint{color:var(--muted); font-size:13px; margin:-8px 0 16px;}

/* Table */
.tablewrap{overflow-x:auto; border-radius:12px; border:1px solid var(--line);}

/* ===== نظام البطاقات المتجاوب — يستبدل الجداول على الجوال بأسلوب تطبيقات حقيقي ===== */
.rt-cards{display:none;}
.rt-table{display:block;}
@media(max-width:720px){
  .rt-table{display:none;}
  .rt-cards{display:flex; flex-direction:column; gap:10px;}
}
/* نمط 1: بطاقة إحصائية (نوع + نسبة + شريط تقدُّم) — لجداول التوزيع والملخصات */
.mc-stat{background:#fff; border:1px solid var(--line); border-radius:14px; padding:14px 16px; position:relative; overflow:hidden;}
.mc-stat::before{content:""; position:absolute; inset-inline-start:0; inset-block:0; inline-size:4px; background:linear-gradient(180deg,var(--orange),var(--amber));}
.mc-stat-head{display:flex; justify-content:space-between; align-items:baseline; margin-block-end:10px;}
.mc-stat-head .ttl{font-weight:700; font-size:14px; color:var(--plum-dark);}
.mc-stat-head .pct{font-weight:800; font-size:16px; color:var(--orange);}
.mc-stat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(90px,1fr)); gap:8px;}
.mc-stat-cell{background:var(--cream,#FBF8F6); border-radius:9px; padding:7px 9px;}
.mc-stat-cell .v{font-weight:700; font-size:14px; color:var(--ink);}
.mc-stat-cell .l{font-size:10px; color:var(--muted); margin-block-start:1px;}
.mc-stat-bar{block-size:4px; background:var(--plum-soft); border-radius:99px; margin-block-start:10px; overflow:hidden;}
.mc-stat-bar div{block-size:100%; background:linear-gradient(90deg,var(--orange),var(--amber));}

/* نمط 2: بطاقة تفصيلية (أيقونة + عنوان + عنوان فرعي + قيمة بارزة) — لقوائم الإدارة (موظفين/فروع/طلبات) */
.mc-detail{background:#fff; border:1px solid var(--line); border-radius:13px; padding:12px 14px; display:flex; align-items:center; gap:12px;}
.mc-detail-ic{inline-size:38px; block-size:38px; border-radius:11px; background:var(--plum-soft); color:var(--plum-dark); display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0; font-weight:700;}
.mc-detail-body{flex:1; min-inline-size:0;}
.mc-detail-body .ttl{font-weight:600; font-size:13.5px; color:var(--ink); line-height:1.4;}
.mc-detail-body .sub{font-size:11.5px; color:var(--muted); margin-block-start:2px; display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.mc-detail-trail{text-align:left; flex-shrink:0;}
.mc-detail-trail .v{font-weight:700; font-size:14px; color:var(--plum-dark);}
.mc-detail-trail .l{font-size:9.5px; color:var(--muted);}

/* نمط 3: بطاقة صف مضغوطة (تسمية: قيمة، عدة أسطر) — للجداول الطويلة كثيرة الأعمدة (سجل التدقيق، الاستيراد) */
.mc-row{background:#fff; border:1px solid var(--line); border-radius:12px; padding:12px 14px;}
.mc-row-line{display:flex; justify-content:space-between; gap:10px; padding:4px 0; font-size:12.5px;}
.mc-row-line:not(:last-child){border-block-end:1px dashed var(--line);}
.mc-row-line .l{color:var(--muted); flex-shrink:0;}
.mc-row-line .v{color:var(--ink); font-weight:600; text-align:left;}

/* نمط 4: جدول يتحوّل تلقائياً لصفوف مكدَّسة على الجوال — لجداول تحتوي حقول إدخال حيّة (لا تكرار عناصر، آمن) */
@media(max-width:720px){
  .rt-form-table{overflow-x:hidden !important; max-width:100%;}
  .rt-form-table table{display:block !important; width:100% !important; max-width:100%; min-width:0 !important;}
  .rt-form-table thead, .rt-form-table tbody{display:block !important; width:100% !important; max-width:100%;}
  .rt-form-table tr{display:block !important; width:100% !important; max-width:100%; background:#fff; border:1px solid var(--line); border-radius:12px; margin-block-end:10px; padding:10px 12px; box-sizing:border-box;}
  .rt-form-table thead{position:absolute; inset-inline-start:-9999px;}
  .rt-form-table td{display:block !important; width:100% !important; max-width:100%; border:none !important; padding:6px 0 !important; text-align:start !important; box-sizing:border-box;}
  .rt-form-table td::before{content:attr(data-label); display:block; font-size:10.5px; color:var(--muted); font-weight:600; margin-block-end:3px;}
  .rt-form-table td input, .rt-form-table td select{width:100% !important; max-width:100%; box-sizing:border-box;}
}
table{inline-size:100%; border-collapse:collapse; font-size:13.5px; min-inline-size:640px;}
th{background:var(--plum); color:#fff; padding:11px 10px; text-align:start; font-weight:600; font-size:12.5px; white-space:nowrap;}
th.n,td.n{text-align:end; font-family:"IBM Plex Sans Arabic"; font-variant-numeric:tabular-nums;}
td{padding:9px 10px; border-block-start:1px solid var(--line); text-align:start; white-space:nowrap;}
tbody tr:nth-child(even){background:#FBF8FA;}
tbody tr:hover{background:var(--plum-soft);}
.chip{display:inline-block; padding:2px 10px; border-radius:20px; font-size:12px; font-weight:600;}
.chip.g{background:var(--green-soft); color:var(--green);}
.chip.r{background:var(--red-soft); color:var(--red);}
.chip.a{background:#FDF0DC; color:#9A6800;}
.chip.ch{background:var(--plum-soft); color:var(--plum); font-weight:500;}
.chip.b{background:var(--blue-soft); color:#3B7DBF;}

/* Progress ring */
.ring-wrap{display:flex; flex-wrap:wrap; gap:16px;}
.performer{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:18px; inline-size:210px; text-align:center; position:relative;}
.performer .rank{position:absolute; inset-block-start:12px; inset-inline-end:14px; font-size:12px; font-weight:700; color:#fff; background:var(--plum); inline-size:26px; block-size:26px; border-radius:50%; display:flex; align-items:center; justify-content:center;}
.performer .rank.gold{background:var(--amber);} .performer .rank.silver{background:#9CA3AF;} .performer .rank.bronze{background:#B87333;}
.ring{inline-size:120px; block-size:120px; margin:6px auto 10px;}
.performer .nm{font-weight:600; font-size:15px; margin-block-end:2px;}
.performer .br{font-size:12px; color:var(--muted);}
.performer .rev{font-family:"IBM Plex Sans Arabic"; font-weight:600; color:var(--plum); margin-block-start:8px; font-size:15px;}

/* Forms */
.formgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.field{display:flex; flex-direction:column; gap:6px;}
.field.full{grid-column:1 / -1;}
.field label{font-size:13.5px; font-weight:500; color:var(--ink);}
.field input,.field select{padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:#fff; transition:.15s;}
.field textarea{font-family:inherit; font-size:15px; padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:#fff; resize:vertical; transition:.15s;}
.field textarea:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-soft);}
.notif-list{display:flex; flex-direction:column; gap:10px;}
.notif-item{border:1px solid var(--line); border-radius:12px; padding:12px 14px; background:#fff;}
.notif-item.unread{border-color:var(--orange); background:#FFF6F1; cursor:pointer;}
.notif-item.unread::before{content:"●"; color:var(--orange); font-size:9px; margin-inline-end:6px;}
.notif-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px;}
.notif-time{font-size:11.5px; color:var(--muted); white-space:nowrap;}
.notif-body{font-size:13.5px; color:var(--ink); margin-block-start:4px; line-height:1.6;}
.notif-from{font-size:11.5px; color:var(--muted); margin-block-start:6px;}

/* ===== لوحة الموظف المُعاد تصميمها ===== */
.hero{background:radial-gradient(ellipse 140% 100% at 50% -20%, #3D2049 0%, #1A1420 55%, #241A2E 100%); padding:28px 20px 36px; position:relative; overflow:hidden; border-radius:0 0 22px 22px; margin:-26px -30px 20px;}
@media(max-width:820px){ .hero{margin:-18px -14px 20px;} }
.hero::before{content:""; position:absolute; inset:0; background-image:radial-gradient(circle at 15% 20%, rgba(247,164,0,.08), transparent 40%), radial-gradient(circle at 85% 80%, rgba(236,97,43,.08), transparent 40%); pointer-events:none;}
.hero-top{display:flex; align-items:center; gap:14px; position:relative; z-index:1;}
.avatar-big{inline-size:58px; block-size:58px; border-radius:50%; flex-shrink:0; background:linear-gradient(135deg,var(--orange),var(--amber)); display:flex; align-items:center; justify-content:center; font-weight:800; font-size:22px; color:#fff; border:2px solid rgba(255,255,255,.18); box-shadow:0 4px 18px rgba(236,97,43,.35);}
.hero-id h1{font-weight:800; font-size:21px; color:#fff; letter-spacing:.2px;}
.hero-id p{font-size:12.5px; color:#C9AFC4; margin-block-start:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap;}
.hero-id .dot{inline-size:4px; block-size:4px; border-radius:50%; background:#7A6B7F;}
.hourglass-zone{margin-block-start:26px; position:relative; z-index:1; text-align:center;}
.hourglass-svg{filter:drop-shadow(0 8px 20px rgba(0,0,0,.35));}
.hg-stats{display:flex; justify-content:center; gap:28px; margin-block-start:16px;}
.hg-stat{text-align:center;}
.hg-stat .v{font-weight:800; font-size:26px; color:#fff;}
.hg-stat .l{font-size:11px; color:#B7A2B2; margin-block-start:2px;}
.hg-stat.pace-good .v{color:#5FD99B;}
.hg-divider{inline-size:1px; background:rgba(255,255,255,.15); align-self:stretch; margin-block:2px;}
.hg-caption{font-size:12px; color:#9C8B98; margin-block-start:14px; max-inline-size:340px; margin-inline:auto; line-height:1.6;}
.target-num{font-weight:800; font-size:24px; color:var(--plum);}
.target-sub{font-size:12px; color:var(--muted); margin-block-start:4px;}
.progress-track{block-size:8px; background:var(--plum-soft); border-radius:99px; margin-block-start:12px; overflow:hidden;}
.progress-fill{block-size:100%; background:linear-gradient(90deg,var(--orange),var(--amber)); border-radius:99px; transition:inline-size .6s ease;}
.remaining-chip{display:inline-flex; align-items:center; gap:5px; background:var(--plum-soft); color:var(--plum-dark); font-size:12px; font-weight:600; padding:5px 11px; border-radius:99px; margin-block-start:12px;}
.rank-list{display:flex; flex-direction:column; gap:8px;}
.rank-row{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:10px;}
.rank-row.me{background:var(--plum-soft); border:1px solid #E4CADB;}
.rank-medal{inline-size:26px; block-size:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0;}
.rank-medal.g{background:#FFF2CC; color:#A87900;}
.rank-medal.s{background:#EAEAF0; color:#68687A;}
.rank-medal.b{background:#F5DCC4; color:#95592A;}
.rank-medal.n{background:var(--line); color:var(--muted);}
.rank-name{flex:1; font-size:13.5px; font-weight:500;}
.rank-name .you-tag{font-size:10px; color:var(--orange); font-weight:700; margin-inline-start:5px;}
.rank-val{font-size:13px; font-weight:700; color:var(--plum-dark);}
.team-note{background:linear-gradient(135deg,#FFF6E8,#FFF0DC); border:1px dashed var(--amber); border-radius:14px; padding:16px 18px; display:flex; gap:12px; align-items:flex-start; margin-block-end:14px;}
.team-note .gift-ic{font-size:26px; flex-shrink:0;}
.team-note p{font-size:12.5px; color:#7A5A12; line-height:1.7;}
.field input:focus,.field select:focus{outline:none; border-color:var(--plum); box-shadow:0 0 0 3px var(--plum-soft);}
.field .locked{padding:11px 13px; border:1.5px solid var(--line); border-radius:10px; background:#F4F1F3; color:var(--ink); font-weight:600;}
.btn{background:var(--orange); color:#fff; border:none; padding:12px 26px; border-radius:11px; font-size:15px; font-weight:600; transition:.18s;}
.btn:hover{background:#d24e1c;} .btn:focus-visible{outline:3px solid var(--amber); outline-offset:2px;}
.btn.sec{background:var(--plum);} .btn.sec:hover{background:var(--plum-dark);}
.btn.ghost{background:transparent; color:var(--plum); border:1.5px solid var(--line);}
.btn.ghost:hover{background:var(--plum-soft);}
.btnrow{display:flex; gap:10px; margin-block-start:18px; flex-wrap:wrap;}

.toast{position:fixed; inset-block-end:24px; inset-inline-start:50%; transform:translateX(50%) translateY(120px);
  background:var(--green); color:#fff; padding:14px 26px; border-radius:12px; font-weight:600; box-shadow:0 8px 30px rgba(0,0,0,.2); transition:.3s; z-index:50;}
.toast.show{transform:translateX(50%) translateY(0);}
.toast.err{background:var(--red);}

.gate-note{background:#FDF0DC; border:1px solid var(--amber); border-radius:11px; padding:12px 16px; font-size:13.5px; color:#7a5200; margin-block-end:18px; display:flex; gap:10px; align-items:flex-start;}
.pace-note{background:var(--blue-soft); border:1px solid #B9D4E8; border-radius:11px; padding:12px 16px; font-size:13.5px; color:#2B5A82; margin-block-end:18px; display:flex; gap:10px; align-items:flex-start;}
.split{display:grid; grid-template-columns:1fr 1fr; gap:20px;} @media(max-width:900px){.split{grid-template-columns:1fr;} .formgrid{grid-template-columns:1fr;}}
.bar-row{display:flex; align-items:center; gap:12px; margin-block-end:11px;}
.bar-row .bl{inline-size:90px; font-size:13.5px; font-weight:500; flex-shrink:0;}
.bar-track{flex:1; background:#EFE8EC; border-radius:8px; block-size:26px; overflow:hidden; position:relative;}
.bar-fill{block-size:100%; border-radius:8px; display:flex; align-items:center; justify-content:flex-start; padding-inline-start:10px; color:#fff; font-size:12px; font-weight:600; font-family:"IBM Plex Sans Arabic"; min-inline-size:2px;}
.only-mgr{display:block;} body.role-emp .only-mgr{display:none!important;} body.role-review .only-mgr{display:none!important;} body.role-accounts .only-mgr{display:none!important;} body.role-supervisor .only-mgr{display:none!important;}
.mgr-review{display:block;} body.role-emp .mgr-review{display:none!important;} body.role-supervisor .mgr-review{display:none!important;}
.mgr-emp{display:block;} body.role-review .mgr-emp{display:none!important;} body.role-accounts .mgr-emp{display:none!important;} body.role-supervisor .mgr-emp{display:none!important;}
body.role-supervisor .hide-for-supervisor{display:none!important;}
.mgr-review-sup{display:block;} body.role-emp .mgr-review-sup{display:none!important;}
.mgr-sup{display:block;} body.role-emp .mgr-sup{display:none!important;} body.role-review .mgr-sup{display:none!important;} body.role-accounts .mgr-sup{display:none!important;}
.navbtn.emp-only-flex{display:none;} body.role-emp .navbtn.emp-only-flex{display:flex;}
.navbtn[data-page="import"]{display:none;}
body.role-mgr .navbtn[data-page="import"], body.role-adminofficer .navbtn[data-page="import"]{display:flex;}
body.role-adminofficer .navbtn:not([data-page="import"]){display:none!important;}
body.role-mgr .navbtn[data-page="complaints"], body.role-supervisor .navbtn[data-page="complaints"], body.role-customerservice .navbtn[data-page="complaints"]{display:flex;}
body.role-emp .navbtn[data-page="complaints"], body.role-review .navbtn[data-page="complaints"], body.role-accounts .navbtn[data-page="complaints"]{display:none!important;}
body.role-customerservice .navbtn:not([data-page="complaints"]){display:none!important;}
.import-drop{border:2px dashed var(--line); border-radius:14px; padding:28px 18px; text-align:center; background:#FBF8FA; transition:.15s;}
.import-drop.drag{border-color:var(--plum); background:var(--plum-soft);}
.import-drop input[type=file]{display:none;}
.chart-box{position:relative; block-size:260px; margin-block-end:6px;}
.exec-kpi{display:flex; align-items:center; gap:12px; background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:14px 16px; cursor:default;}
.exec-kpi.clickable{cursor:pointer; transition:.15s;} .exec-kpi.clickable:hover{border-color:var(--plum); background:var(--plum-soft);}
.exec-kpi .ic2{font-size:24px;}
.exec-kpi .num2{font-size:22px; font-weight:700; font-family:"IBM Plex Sans Arabic"; color:var(--plum);}
.exec-kpi .lbl2{font-size:12.5px; color:var(--muted);}
.imp-row-err{background:var(--red-soft)!important;}
.imp-row-ok{background:var(--green-soft)!important;}
.emp-only{display:none;} body.role-emp .emp-only{display:block;}
.muted-line{color:var(--muted); font-size:13px; margin-block-start:4px;}
/* ===== القائمة المنسدلة على الجوال (Hamburger/Drawer) — تحل محل الشريط الجانبي الدائم لتوفير كامل مساحة العرض ===== */
.mobile-topbar{display:none;}
.mobile-nav-backdrop{display:none;}
@media(max-width:820px){
  .mobile-topbar{
    display:flex; align-items:center; gap:14px; position:sticky; inset-block-start:0; z-index:40;
    background:var(--plum); color:#fff; padding:13px 18px;
  }
  .hamburger-btn{ background:transparent; border:none; padding:6px; display:flex; flex-direction:column; gap:5px; cursor:pointer; }
  .hamburger-btn span{ display:block; inline-size:22px; block-size:2px; background:#fff; border-radius:2px; }
  .mobile-topbar-brand{ color:#fff; font-size:17px; }
  aside{
    position:fixed; inset-block-start:0; inset-inline-start:0; block-size:100vh; inline-size:250px;
    transform:translateX(-100%); transition:transform .22s ease; z-index:50;
  }
  /* inset-inline-start يتكيّف تلقائياً حسب الاتجاه (يمين بالعربي RTL، يسار بالإنجليزي LTR) — لا حاجة لقلبه يدوياً.
     المطلوب فقط عكس اتجاه الانزلاق (transform فيزيائي دائماً، لا يتكيّف تلقائياً حسب الاتجاه مثل خصائص inset).
     :not(.open) ضروري هنا: بدونه، خصوصية هذا المحدِّد (بسبب [dir="rtl"]) أعلى من aside.open فتبقى القائمة
     مغلقة دائماً بالعربي حتى بعد الضغط على الزر — هذا خطأ حقيقي وقع فيه الإصدار السابق واكتُشف بالمراجعة الأخيرة. */
  html[dir="rtl"] aside:not(.open){ transform:translateX(100%); }
  aside.open{ transform:translateX(0); }
  .avatar-wrap{ display:block; }
  main{ padding:18px 14px 50px; }
  .mobile-nav-backdrop.open{ display:block; position:fixed; inset:0; background:rgba(46,15,38,.5); z-index:45; }
}

/* === بطاقة الترتيب الاحتفالية === */
@keyframes rankPop{ 0%{transform:scale(.75); opacity:0;} 60%{transform:scale(1.08);} 100%{transform:scale(1); opacity:1;} }
@keyframes rankShine{ 0%{transform:translateX(-120%) rotate(20deg);} 100%{transform:translateX(220%) rotate(20deg);} }
@keyframes rankGlow{ 0%,100%{box-shadow:0 0 0 0 rgba(247,164,0,.0);} 50%{box-shadow:0 0 22px 4px rgba(247,164,0,.35);} }
.rank-kpi{ position:relative; overflow:hidden; animation:rankPop .5s cubic-bezier(.34,1.56,.64,1) both; }
.rank-kpi.rank-1{ background:linear-gradient(155deg,#FFF7E6,var(--card) 65%); border-color:#F0CE7A; animation:rankPop .5s cubic-bezier(.34,1.56,.64,1) both, rankGlow 2.6s ease-in-out .6s infinite; }
.rank-kpi.rank-2{ background:linear-gradient(155deg,#F3F1F6,var(--card) 65%); border-color:#C9C3D4; }
.rank-kpi.rank-3{ background:linear-gradient(155deg,#FBEEE3,var(--card) 65%); border-color:#E3B790; }
.rank-kpi .val{ position:relative; z-index:1; }
.rank-kpi::after{ content:""; position:absolute; inset-block:0; inline-size:38%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.75),transparent); animation:rankShine 2.8s ease-in-out .9s infinite; pointer-events:none; }
.rank-medal{ display:inline-block; font-size:15px; margin-inline-end:4px; animation:rankPop .6s .3s cubic-bezier(.34,1.56,.64,1) both; }

/* === صندوق الهدية الشخصي — يتوهج ويمتلئ كلما اقتربت من بوابة الحافز === */
.gift-wrap{ background:radial-gradient(ellipse at 50% 0%, #2A1730, #1A0E1F 70%); border-radius:18px; padding:26px 20px 20px; margin-block-start:16px; text-align:center; position:relative; overflow:hidden; }
.gift-pct{ font-size:34px; font-weight:800; color:#fff; font-family:'IBM Plex Sans Arabic',sans-serif; position:relative; z-index:2; text-shadow:0 0 18px rgba(247,164,0,.5); }
.gift-svg-wrap{ position:relative; inline-size:140px; block-size:140px; margin:6px auto 4px; }
.gift-svg-wrap svg{ inline-size:100%; block-size:100%; overflow:visible; }
@keyframes giftPop{ 0%{ transform:scale(.6) rotate(-6deg); opacity:0;} 65%{ transform:scale(1.08) rotate(2deg);} 100%{ transform:scale(1) rotate(0); opacity:1;} }
@keyframes giftFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-4px);} }
@keyframes giftGlowPulse{ 0%,100%{ opacity:.5; r:38;} 50%{ opacity:.85; r:44;} }
@keyframes sparkleTwinkle{ 0%,100%{ opacity:0; transform:scale(.4);} 50%{ opacity:1; transform:scale(1);} }
@keyframes lidPop{ 0%{ transform:translateY(0) rotate(0);} 100%{ transform:translateY(-14px) rotate(-14deg);} }
@keyframes confettiFall{ 0%{ transform:translateY(-10px) rotate(0); opacity:1;} 100%{ transform:translateY(90px) rotate(340deg); opacity:0;} }
.gift-box-anim{ animation:giftPop .6s cubic-bezier(.34,1.56,.64,1) both, giftFloat 2.4s ease-in-out .7s infinite; }
.gift-glow-ring{ animation:giftGlowPulse 2.2s ease-in-out infinite; }
.gift-fill{ transition:y 1.4s cubic-bezier(.22,.9,.3,1), height 1.4s cubic-bezier(.22,.9,.3,1); }
.gift-sparkle{ animation:sparkleTwinkle 1.8s ease-in-out infinite; }
.gift-wrap.opened .gift-lid{ animation:lidPop .7s cubic-bezier(.3,1.6,.5,1) forwards; }
.gift-wrap.opened .gift-glow-ring{ opacity:1!important; }
.confetti-bit{ position:absolute; inset-block-start:18%; inline-size:6px; block-size:9px; animation:confettiFall 1.8s ease-in 0s infinite; }
.gift-caption{ margin-block-start:8px; font-size:13px; color:#D9C9E0; position:relative; z-index:2; }
.gift-caption strong{ color:#F7A400; }

/* === بانر هدية الفريق — تقدُّم الفرع بأكمله نحو هدفه الكامل === */
.team-gift{ margin-block-start:14px; border-radius:14px; padding:16px 18px; position:relative; overflow:hidden;
  background:linear-gradient(135deg,#FFF6E8,#FDEBD3); border:1.5px dashed #E8B24D; }
.team-gift-head{ display:flex; align-items:center; gap:8px; font-weight:700; color:#8A5A0F; margin-block-end:8px; font-size:14.5px; }
.team-gift-head .ic{ font-size:19px; animation:giftFloat 2.2s ease-in-out infinite; }
.team-gift-track{ block-size:14px; border-radius:8px; background:#F3E0B8; overflow:hidden; position:relative;
  background-image:repeating-linear-gradient(135deg,#F3E0B8 0 8px,#EFD9A8 8px 16px); }
.team-gift-fill{ block-size:100%; border-radius:8px 0 0 8px; background:linear-gradient(90deg,#EC612B,#F7A400); transition:inline-size 1.2s cubic-bezier(.22,.9,.3,1); position:relative; }
.team-gift-fill::after{ content:""; position:absolute; inset:0; background-image:repeating-linear-gradient(90deg,transparent 0 10px,rgba(255,255,255,.35) 10px 12px); }
.team-gift-msg{ margin-block-start:8px; font-size:12.5px; color:#8A5A0F; }
.team-gift-msg strong{ color:#B8461E; }
.team-gift.reached{ background:linear-gradient(135deg,#FFF0CC,#FFE3A8); border-style:solid; }
.team-gift.reached .team-gift-head .ic{ animation:giftFloat 1s ease-in-out infinite; }
/* ===== Rento mobile-first refinement ===== */
html{min-width:320px;overflow-x:hidden;scroll-behavior:smooth;}
body{overflow-x:hidden;}
img{max-width:100%;}
button,a,input,select,textarea{touch-action:manipulation;}
button,.btn,.navbtn,.login-btn,.logout-btn,.lang-toggle-app{min-height:44px;}
.login-logo{display:block;inline-size:min(300px,82vw);block-size:auto;max-block-size:120px;object-fit:contain;margin:0 auto 10px;}
.brand-logo{background:transparent!important;padding:0!important;border-radius:0!important;inline-size:min(190px,100%);block-size:auto;max-block-size:72px;object-fit:contain;}
.mobile-logo{inline-size:126px;block-size:44px;object-fit:contain;flex-shrink:0;}
.mobile-page-title{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;}
.mobile-lang-btn{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:5px 10px;font-size:12px;font-weight:700;min-height:38px;}
@media(max-width:820px){
  .app{display:block;min-height:100dvh;}
  .mobile-topbar{position:sticky;top:0;padding:10px max(14px,env(safe-area-inset-left)) 10px max(14px,env(safe-area-inset-right));min-height:58px;box-shadow:0 3px 14px rgba(36,16,25,.14);}
  .hamburger-btn{min-width:42px;min-height:42px;align-items:center;justify-content:center;border-radius:10px;}
  .hamburger-btn:active{background:rgba(255,255,255,.12);}
  aside{inline-size:min(86vw,320px);max-inline-size:320px;box-shadow:0 0 40px rgba(0,0,0,.28);}
  aside .brand{padding:18px 18px 16px;}
  aside .brand-logo{inline-size:150px;block-size:56px;}
  nav{padding:12px 10px 18px;}
  .navbtn{font-size:14px;padding:11px 12px;min-height:48px;}
  .session-box{padding:12px 14px max(14px,env(safe-area-inset-bottom));}
  main{padding:14px 12px max(42px,env(safe-area-inset-bottom));}
  .pagehead{align-items:flex-start;margin-block-end:14px;gap:8px;}
  .pagehead h2{font-size:22px;}
  .pagehead p{font-size:12.5px;line-height:1.6;}
  .kpigrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-block-end:14px;}
  .kpi{border-radius:13px;padding:13px 12px;min-width:0;}
  .kpi .lbl{font-size:11.5px;line-height:1.5;margin-block-end:5px;}
  .kpi .val{font-size:22px;line-height:1.2;overflow-wrap:anywhere;}
  .kpi .sub{font-size:10.5px;line-height:1.45;}
  .card{border-radius:14px;padding:14px;margin-block-end:12px;}
  .card h3{font-size:15.5px;margin-block-end:12px;line-height:1.45;}
  .card p.hint{font-size:11.5px;line-height:1.6;}
  .split{gap:12px;}
  .formgrid{grid-template-columns:1fr!important;gap:10px!important;}
  .field label{font-size:12px;}
  .field input,.field select,.field textarea{font-size:16px!important;min-height:46px;padding:10px 12px!important;}
  .btnrow{display:grid;grid-template-columns:1fr;gap:8px;margin-block-start:14px;}
  .btnrow .btn{width:100%;}
  .tablewrap{border-radius:10px;}
  .rt-cards{gap:8px;}
  .mc-stat{padding:12px;}
  .bar-row{gap:7px;}
  .bar-row .bl{inline-size:72px;font-size:11.5px;}
  .bar-track{block-size:22px;}
  .bar-fill{font-size:10.5px;padding-inline-start:7px;}
  .chart-box{block-size:210px;}
  .gate-note,.pace-note{padding:10px 11px;font-size:12px;line-height:1.6;margin-block-end:12px;}
  .toast{inset-inline:12px;inset-block-end:max(14px,env(safe-area-inset-bottom));transform:translateY(120px);text-align:center;padding:12px 14px;font-size:13px;}
  .toast.show{transform:translateY(0);}
  .modal-overlay{padding:10px;align-items:flex-end;}
  .modal-box{max-block-size:90dvh;overflow:auto;border-radius:18px 18px 12px 12px;padding:18px 14px;}
  .modal-box .btnrow{grid-template-columns:1fr 1fr;}
  .import-drop{padding:22px 12px;}
  .exec-kpi{padding:11px 12px;}
  .exec-kpi .num2{font-size:18px;}
  .exec-kpi .lbl2{font-size:11px;}
  .gift-wrap{padding:20px 12px 16px;border-radius:15px;}
  .gift-svg-wrap{inline-size:112px;block-size:112px;}
}
@media(max-width:390px){
  .kpigrid{grid-template-columns:1fr 1fr;gap:7px;}
  .kpi{padding:11px 9px;}
  .kpi .val{font-size:20px;}
  .mobile-logo{inline-size:102px;block-size:38px;}
  .mobile-page-title{font-size:12.5px;}
  main{padding-inline:9px;}
}
@media(min-width:821px){.mobile-topbar,.mobile-nav-backdrop{display:none!important;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;}}

/* ===== Mobile UX v2: phone-first navigation and readable brand ===== */
@media(max-width:820px){
  .mobile-topbar{gap:9px; padding-inline:12px; min-height:62px;}
  .hamburger-btn{width:42px;height:42px;flex:0 0 42px;}
  .mobile-logo{width:126px;height:44px;}
  .mobile-page-title{min-width:0;}
  main{width:100%;max-width:100vw;}
  .pagehead{padding-inline:2px;}
  .pagehead h2{font-size:21px;}
  .kpigrid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .kpi{min-width:0;}
  .kpi .val{font-size:clamp(18px,6vw,24px);}
  .tablewrap{overflow:visible;border:0;}
  .tablewrap:has(.rt-cards){border:0;}
  .rt-cards{width:100%;}
  .btn,.login-btn,.navbtn,.logout-btn{min-height:48px;}
  .field input,.field select,.field textarea{min-height:48px;}
}
@media(max-width:360px){
  .mobile-topbar{gap:6px;padding-inline:8px;}
  .mobile-logo{width:96px;height:36px;}
  .mobile-lang-btn{padding-inline:8px;}
}

/* ===== Mobile UX v3 — clean branded header ===== */
@media(max-width:820px){
  .mobile-topbar{
    position:sticky;top:0;z-index:100;display:grid;grid-template-columns:44px 1fr 44px;align-items:center;
    min-height:64px;padding:8px 12px;background:rgba(127,30,97,.98);
    box-shadow:0 5px 18px rgba(36,16,25,.16);gap:8px;
  }
  .hamburger-btn{grid-column:1;width:42px;height:42px;padding:0;border:0;background:rgba(255,255,255,.09);border-radius:12px;display:flex;align-items:center;justify-content:center;}
  html[dir="rtl"] .hamburger-btn{grid-column:3;}
  .mobile-logo{grid-column:2;justify-self:center;width:52px;height:52px;object-fit:contain;display:block;}
  .mobile-page-title{display:none;}
  .mobile-lang-btn{grid-column:3;justify-self:end;width:42px;height:38px;min-height:38px;padding:0;border-radius:11px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.20);font-size:11px;}
  html[dir="rtl"] .mobile-lang-btn{grid-column:1;justify-self:start;}
  main{padding:16px 12px 52px!important;}
  .pagehead{margin-top:2px;}
  .pagehead h2{font-size:22px;line-height:1.35;}
  .pagehead p{font-size:12px;}
  .kpigrid{gap:10px;}
  .kpi{box-shadow:0 2px 10px rgba(36,16,25,.045);}
  .card{box-shadow:0 2px 12px rgba(36,16,25,.045);}
  aside .brand{padding:20px 18px 18px;}
  aside .brand-logo{width:190px;height:auto;max-height:74px;}
}
@media(max-width:360px){
  .mobile-topbar{grid-template-columns:40px 1fr 40px;padding-inline:9px;min-height:60px;}
  .hamburger-btn{width:38px;height:38px;}
  .mobile-logo{width:48px;height:48px;}
  .mobile-lang-btn{width:38px;height:36px;min-height:36px;}
  main{padding-inline:9px!important;}
}


/* ===== FINAL BRANCH UI — clean white canvas + original Rento logo ===== */
html, body { background:#fff; }
body { color:var(--ink); }
.app { background:#fff; }
main { background:#fff; }

/* Desktop brand: use the supplied full logo without cropping or recoloring. */
.brand { background:transparent; }
.brand-logo { width:min(205px,100%); height:auto; max-height:none; object-fit:contain; }

/* Phone header: same supplied logo, never the mark-only version. */
@media (max-width:820px){
  .mobile-topbar{
    position:sticky;
    top:0;
    z-index:100;
    display:grid;
    grid-template-columns:46px minmax(0,1fr) 46px;
    align-items:center;
    min-height:70px;
    padding:8px 12px;
    gap:8px;
    background:var(--plum);
    box-shadow:0 4px 14px rgba(36,16,25,.14);
  }
  html[dir="rtl"] .hamburger-btn { grid-column:3; }
  html[dir="ltr"] .hamburger-btn { grid-column:1; }
  .mobile-logo{
    grid-column:2;
    justify-self:center;
    width:min(148px,42vw);
    height:auto;
    max-height:52px;
    object-fit:contain;
    display:block;
  }
  html[dir="rtl"] .mobile-lang-btn { grid-column:1; justify-self:start; }
  html[dir="ltr"] .mobile-lang-btn { grid-column:3; justify-self:end; }
  .mobile-lang-btn{
    width:44px;
    height:38px;
    min-height:38px;
    padding:0;
    border-radius:10px;
    background:rgba(255,255,255,.10);
    border:1px solid rgba(255,255,255,.22);
    color:#fff;
    font-weight:700;
  }
  .hamburger-btn{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
    padding:0;
    border:0;
    background:rgba(255,255,255,.08);
    border-radius:11px;
  }
  main { padding:16px 12px max(42px,env(safe-area-inset-bottom)) !important; }
  .pagehead { margin-top:0; }
  .pagehead h2 { color:var(--plum-dark); }
  .card, .kpi { background:#fff; }
  aside .brand-logo { width:min(205px,100%); height:auto; max-height:none; }
}
@media (max-width:390px){
  .mobile-topbar{min-height:66px;grid-template-columns:42px minmax(0,1fr) 42px;padding-inline:9px;}
  .hamburger-btn{width:40px;height:40px;min-width:40px;min-height:40px;}
  .mobile-lang-btn{width:40px;height:36px;min-height:36px;}
  .mobile-logo{width:min(132px,43vw);max-height:48px;}
  main{padding-inline:9px!important;}
}
@media (max-width:330px){
  .mobile-logo{width:116px;}
}

/* ===== Rento 2026 Clean Executive UI ===== */
:root{--bg:#fff;--canvas:#fff;--surface:#fff;--surface-2:#FBF8FA;--line:#EDE3E9;--plum:#7F1E61;--plum-dark:#5E1548;--plum-soft:#F4EAF1;--orange:#EC612B;--amber:#F7A400;--ink:#241019;--muted:#8B7B84;}
body{background:#fff;color:var(--ink);}
.app,main{background:#fff!important;}
main{padding-block-end:56px;}
.card{border:1px solid var(--line);box-shadow:0 8px 28px rgba(77,29,61,.055);border-radius:20px;padding:22px;margin-block-end:18px;}
.kpi{border:1px solid var(--line);box-shadow:0 5px 18px rgba(77,29,61,.045);border-radius:18px;}
.pagehead{margin-block-end:18px;}
.pagehead h2{font-size:28px;letter-spacing:-.4px;}
.eyebrow{display:block;color:var(--muted);font-size:11px;font-weight:700;letter-spacing:.25px;margin-block-end:3px;}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-block-end:14px;}
.section-head h3{margin:0!important;font-size:18px;}
.soft-tag{display:inline-flex;align-items:center;min-height:28px;padding:4px 10px;border-radius:999px;background:var(--plum-soft);color:var(--plum);font-size:11px;font-weight:700;white-space:nowrap;}
.analytics-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:14px;}
.analytics-panel{background:var(--surface-2);border:1px solid #F0E6EC;border-radius:17px;padding:14px;min-width:0;}
.analytics-panel.wide{grid-row:span 2;}
.analytics-panel-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-block-end:6px;}
.analytics-panel-head strong{font-size:14px;color:var(--ink);}
.analytics-panel-head span{font-size:10.5px;color:var(--muted);}
.chart-box{block-size:250px;}
.chart-tall{block-size:360px;}
.employee-page{max-width:1180px;margin:0 auto;}
.employee-welcome{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-block-end:16px;padding:4px 2px;}
.employee-welcome h1{font-size:29px;color:var(--plum-dark);margin:0;}
.employee-welcome p{margin:3px 0 0;color:var(--muted);font-size:13px;}
.employee-avatar{inline-size:58px;block-size:58px;border-radius:18px;background:var(--plum-soft);color:var(--plum);display:grid;place-items:center;font-size:23px;font-weight:800;}
.employee-summary{display:grid;grid-template-columns:1.45fr .75fr;gap:14px;margin-block-end:16px;}
.employee-progress-card{background:linear-gradient(135deg,#7F1E61,#642052);color:#fff;border-radius:22px;padding:21px;box-shadow:0 14px 32px rgba(127,30,97,.18);}
.progress-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.progress-card-head span{display:block;font-size:12px;opacity:.78;}
.progress-card-head strong{display:block;font-size:25px;margin-top:2px;}
.progress-percent{font-size:31px;font-weight:800;}
.big-progress{height:10px;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;margin:20px 0 10px;}
.big-progress span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#fff,#F7A400);}
.progress-meta{display:flex;justify-content:space-between;gap:12px;font-size:11px;opacity:.9;flex-wrap:wrap;}
.employee-stat-grid{display:grid;grid-template-columns:1fr 1fr;background:#FBF8FA;border:1px solid var(--line);border-radius:22px;overflow:hidden;}
.employee-stat-grid>div{padding:16px;border-inline-end:1px solid var(--line);border-block-end:1px solid var(--line);}
.employee-stat-grid>div:nth-child(2n){border-inline-end:0;}
.employee-stat-grid>div:nth-last-child(-n+2){border-block-end:0;}
.employee-stat-grid small,.employee-stat-grid span{display:block;color:var(--muted);font-size:10.5px;}
.employee-stat-grid b{display:block;color:var(--plum);font-size:20px;margin:2px 0;}
.employee-grid-two{display:grid;grid-template-columns:1.15fr .85fr;gap:14px;}
.compact-chart{height:260px;}
.channel-list{display:grid;gap:9px;}
.channel-mini{display:grid;grid-template-columns:10px 1fr auto;align-items:center;gap:9px;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid var(--line);}
.channel-dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--plum);}
.channel-mini:nth-child(2) .channel-dot{background:var(--orange)}.channel-mini:nth-child(3) .channel-dot{background:var(--amber)}.channel-mini:nth-child(4) .channel-dot{background:#3B7DBF}
.channel-mini strong,.channel-mini small{display:block}.channel-mini strong{font-size:12px}.channel-mini small{font-size:10px;color:var(--muted)}.channel-mini b{font-size:12px;color:var(--plum)}
.employee-period-pills{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.employee-period-pills>div{padding:14px;border-radius:15px;background:var(--surface-2);text-align:center}.employee-period-pills b{display:block;color:var(--plum);font-size:22px}.employee-period-pills span{font-size:11px;color:var(--muted)}
.small-btn{min-height:38px!important;padding:5px 12px!important;}
/* Remove old decorative employee motivation elements completely. */
.role-emp .hourglass-zone,.role-emp .gift-wrap,.role-emp .team-gift,.role-emp .team-note{display:none!important;}
@media(max-width:820px){
  body{background:#fff!important}.card{border-radius:17px;padding:15px;box-shadow:0 5px 18px rgba(77,29,61,.045)}
  .pagehead h2{font-size:23px}.analytics-grid,.employee-summary,.employee-grid-two{grid-template-columns:1fr}.analytics-panel.wide{grid-row:auto}.chart-box{height:220px}.chart-tall{height:250px}
  .employee-welcome{padding-inline:2px}.employee-welcome h1{font-size:23px}.employee-avatar{width:48px;height:48px;border-radius:15px;font-size:19px}.employee-stat-grid{grid-template-columns:1fr 1fr}
  .employee-page .card{margin-block-end:12px}.section-head h3{font-size:16px}
  .mobile-topbar{background:var(--plum)!important;border-radius:0 0 16px 16px;box-shadow:0 5px 18px rgba(77,29,61,.13)}
  main{padding:14px 11px max(34px,env(safe-area-inset-bottom))!important}
}
@media(max-width:390px){.employee-stat-grid b{font-size:18px}.employee-period-pills{gap:7px}.employee-period-pills>div{padding:11px 6px}.employee-period-pills b{font-size:19px}.analytics-panel{padding:11px}.chart-box{height:205px}.chart-tall{height:225px}}

.mobile-bottom-nav{display:none;}
@media(max-width:820px){
  .mobile-bottom-nav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);inset-inline:10px;inset-block-end:max(10px,env(safe-area-inset-bottom));z-index:120;background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:18px;padding:7px 5px;box-shadow:0 10px 30px rgba(77,29,61,.13);}
  .mobile-bottom-nav button{border:0;background:transparent;color:var(--muted);min-height:52px;border-radius:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px;}
  .mobile-bottom-nav button span{font-size:19px;line-height:1.1}.mobile-bottom-nav button small{font-size:9px;font-weight:700}.mobile-bottom-nav button.active{background:var(--plum-soft);color:var(--plum)}
  .role-emp .mobile-bottom-nav [data-mobile-page="branches"],.role-emp .mobile-bottom-nav [data-mobile-page="employees"]{display:none;}
  .role-emp .mobile-bottom-nav{grid-template-columns:repeat(4,1fr)}
  .role-emp .mobile-bottom-nav button:nth-child(5){display:flex}
  main{padding-bottom:92px!important;}
}
@media(max-width:360px){.mobile-bottom-nav{inset-inline:6px}.mobile-bottom-nav button{min-height:48px}.mobile-bottom-nav button span{font-size:17px}.mobile-bottom-nav button small{font-size:8.5px}}

/* ===== Rento Joyful Employee Experience — 2026-08-30 ===== */
:root{
  --bg:#FFFFFF;
  --canvas:#FFFFFF;
  --surface:#FFFFFF;
  --surface-2:#FBF7FC;
  --line:#EEE3EB;
  --plum:#7F1E61;
  --plum-dark:#5E1548;
  --plum-soft:#F5EAF2;
  --orange:#EC612B;
  --amber:#F7A400;
  --ink:#241019;
  --muted:#897982;
  --green:#2E8B57;
  --green-soft:#EAF8F0;
  --blue:#3B7DBF;
  --blue-soft:#EAF3FA;
}
html,body,#app-shell,.app,main{background:#fff!important;}
body{color:var(--ink);}

/* Keep the supplied full logo intact: never crop, mask or replace it. */
.brand-logo,.mobile-logo,.login-logo,.login-card img{
  object-fit:contain!important;
  object-position:center!important;
}

/* A lively but restrained desktop navigation. */
aside{background:linear-gradient(180deg,#7F1E61 0%,#651650 100%);box-shadow:8px 0 28px rgba(127,30,97,.08);}
.brand{padding:20px 16px 18px;background:rgba(255,255,255,.035);}
.brand-logo{width:min(205px,100%);max-height:78px;}
.navbtn{border-radius:13px;margin-bottom:5px;}
.navbtn.active{background:linear-gradient(135deg,#EC612B,#F07A3C);box-shadow:0 8px 20px rgba(236,97,43,.22);}

/* Employee page: friendly, spacious, easy to scan. */
.role-emp main{padding-top:24px;}
.role-emp .employee-page{max-width:1120px;}
.role-emp .employee-welcome{padding:10px 2px 4px;margin-bottom:18px;}
.role-emp .employee-welcome .eyebrow{color:var(--orange);font-weight:800;}
.role-emp .employee-welcome h1{font-size:31px;letter-spacing:-.5px;color:var(--plum-dark);}
.role-emp .employee-welcome p{color:#776972;}
.role-emp .employee-avatar{background:linear-gradient(135deg,#F5EAF2,#FFF1E9);border:1px solid #EEDAE7;box-shadow:0 8px 20px rgba(127,30,97,.08);}

.employee-guide{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;margin:0 0 18px;padding:22px 24px;border:1px solid #E9DCE5;border-radius:22px;background:linear-gradient(135deg,#FFF 0%,#FCF6FA 68%,#FFF1E8 100%);box-shadow:0 14px 34px rgba(77,29,61,.08);position:relative;overflow:hidden}
.employee-guide::before{content:"";position:absolute;inset-block:0;inset-inline-start:0;inline-size:6px;background:var(--orange)}
.employee-guide.success::before{background:var(--green)}.employee-guide.ontrack::before{background:#3B7DBF}.employee-guide.neutral::before{background:#9B8E97}
.guide-kicker{display:flex;align-items:center;gap:8px;color:var(--plum);font-size:12px;font-weight:800;margin-bottom:7px}.guide-live-dot{inline-size:9px;block-size:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px rgba(236,97,43,.11)}
.guide-status{padding:4px 9px;border-radius:999px;background:#F5EAF2;color:var(--plum);margin-inline-start:3px}.employee-guide.success .guide-status{background:#EAF7EF;color:#197246}.employee-guide.ontrack .guide-status{background:#EAF3FA;color:#245F93}
.guide-main h2{font-size:23px;color:var(--plum-dark);margin:0 0 5px}.guide-main>p{font-size:13.5px;color:var(--muted);line-height:1.75;margin:0;max-width:760px}
.guide-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:16px}.guide-action{padding:11px 13px;border-radius:13px;background:rgba(255,255,255,.78);border:1px solid #EEE2E9}.guide-action.primary{background:var(--plum);border-color:var(--plum);color:#fff}.guide-action small{display:block;font-size:10.5px;color:var(--muted);margin-bottom:4px}.guide-action.primary small{color:#EFDDE9}.guide-action strong{font-size:14px}.guide-action.primary strong{font-size:17px}
.guide-reward{background:#24131F;color:#fff;border-radius:17px;padding:17px;display:flex;flex-direction:column;justify-content:center;min-width:0}.guide-reward>span{font-size:11px;color:#DCCBD7}.guide-reward>b{font-size:28px;margin:4px 0}.guide-reward>b small{font-size:11px;color:#DCCBD7}.guide-reward-track{height:7px;background:rgba(255,255,255,.14);border-radius:10px;overflow:hidden;margin:4px 0 8px}.guide-reward-track i{display:block;height:100%;background:linear-gradient(90deg,var(--orange),#FFD66B);border-radius:10px}.guide-reward em{font-style:normal;font-size:10.5px;color:#DCCBD7;line-height:1.5}
.intervention-panel{margin:0 0 20px;padding:20px 22px;border-radius:20px;background:linear-gradient(135deg,#FFF7F1,#FFF);border:1px solid #F2D2C2;box-shadow:0 9px 26px rgba(181,69,24,.07)}
.intervention-panel.clear{background:#F3FAF6;border-color:#CFE8D9}.intervention-panel.clear>div{display:flex;align-items:center;gap:11px}.intervention-panel.clear p{margin:3px 0 0;color:var(--muted);font-size:12px}.intervention-icon{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#DDF3E6;color:#197246;font-weight:900}
.intervention-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}.intervention-head h3{margin:3px 0}.intervention-head h3 b{display:inline-grid;place-items:center;min-width:27px;height:27px;border-radius:50%;background:var(--orange);color:#fff;font-size:13px}.intervention-head p{margin:0;color:var(--muted);font-size:12px}
.intervention-list{display:grid;gap:8px}.intervention-row{display:grid;grid-template-columns:minmax(0,1fr) 170px auto;align-items:center;gap:12px;background:#fff;border:1px solid #F0E3DC;border-radius:13px;padding:10px 12px}.intervention-row strong,.intervention-row small{display:block}.intervention-row small{color:var(--muted);font-size:10.5px;margin-top:2px}.intervention-gap b{font-size:14px}.check-line{display:flex!important;align-items:center;gap:8px}.check-line input{width:17px;height:17px}

.role-emp .employee-summary{gap:16px;}
.role-emp .employee-progress-card{
  background:linear-gradient(135deg,#7F1E61 0%,#8F2A70 58%,#A13A7F 100%);
  border:0;box-shadow:0 16px 34px rgba(127,30,97,.18);
}
.role-emp .big-progress{background:rgba(255,255,255,.2);}
.role-emp .big-progress span{background:linear-gradient(90deg,#fff 0%,#FFD66B 100%);}
.role-emp .employee-stat-grid{background:#fff;box-shadow:0 10px 26px rgba(77,29,61,.055);}
.role-emp .employee-stat-grid>div:nth-child(1){background:#FBF5FA;}
.role-emp .employee-stat-grid>div:nth-child(2){background:#FFF8F3;}
.role-emp .employee-stat-grid>div:nth-child(3){background:#F3F9FD;}
.role-emp .employee-stat-grid>div:nth-child(4){background:#F4FBF7;}
.role-emp .employee-stat-grid b{color:var(--plum-dark);}

.role-emp .card{
  border:1px solid #EEE3EB;
  box-shadow:0 8px 26px rgba(77,29,61,.055);
}
.role-emp .employee-chart-card{background:linear-gradient(180deg,#fff 0%,#FCF8FD 100%);}
.role-emp .soft-tag{background:#F5EAF2;color:var(--plum);}
.role-emp .channel-list{gap:10px;}
.role-emp .channel-mini{border:0;box-shadow:0 5px 16px rgba(77,29,61,.045);}
.role-emp .channel-mini:nth-child(1){background:#F7EFF5;}
.role-emp .channel-mini:nth-child(2){background:#FFF3ED;}
.role-emp .channel-mini:nth-child(3){background:#FFF8E7;}
.role-emp .channel-mini:nth-child(4){background:#EEF6FB;}
.role-emp .channel-mini:nth-child(1) .channel-dot{background:#7F1E61;}
.role-emp .channel-mini:nth-child(2) .channel-dot{background:#EC612B;}
.role-emp .channel-mini:nth-child(3) .channel-dot{background:#F7A400;}
.role-emp .channel-mini:nth-child(4) .channel-dot{background:#3B7DBF;}
.role-emp .employee-period-pills>div{border:1px solid #EEE3EB;box-shadow:0 5px 14px rgba(77,29,61,.035);}
.role-emp .employee-period-pills>div:nth-child(1){background:#F7EFF5;}
.role-emp .employee-period-pills>div:nth-child(2){background:#FFF4EE;}
.role-emp .employee-period-pills>div:nth-child(3){background:#EEF7FB;}

/* Mobile app feel without changing the supplied logo. */
@media(max-width:820px){
  .role-emp main{padding-top:12px!important;}
  .role-emp .mobile-topbar{
    background:linear-gradient(135deg,#7F1E61 0%,#6B1953 100%)!important;
    border-radius:0 0 18px 18px;
    min-height:68px;
  }
  .role-emp .mobile-logo{
    width:min(126px,43vw)!important;
    height:auto!important;
    max-height:48px!important;
  }
  .role-emp .employee-welcome{margin-bottom:12px;}
  .employee-guide{grid-template-columns:1fr;padding:18px 16px;gap:12px;border-radius:19px}.guide-main h2{font-size:19px}.guide-actions{grid-template-columns:1fr 1fr}.guide-action:first-child{grid-column:1/-1}.guide-reward{padding:14px 15px}.guide-reward>b{font-size:24px}
  .intervention-panel{padding:16px 14px}.intervention-head{align-items:flex-start;flex-direction:column}.intervention-row{grid-template-columns:1fr auto}.intervention-gap{grid-row:2}.intervention-row .btn{grid-row:1/3;grid-column:2}
  .role-emp .employee-welcome h1{font-size:22px;}
  .role-emp .employee-summary{gap:10px;}
  .role-emp .employee-progress-card{border-radius:20px;padding:18px;}
  .role-emp .progress-percent{font-size:28px;}
  .role-emp .employee-grid-two{gap:10px;}
  .role-emp .card{border-radius:17px;}
  .role-emp .chart-box{height:210px;}
  .role-emp .employee-recent{margin-bottom:4px;}
}
@media(max-width:390px){
  .role-emp .mobile-logo{width:112px!important;}
  .role-emp .employee-welcome h1{font-size:20px;}
  .role-emp .employee-progress-card{padding:16px;}
}

/* Production mobile safety: primary dashboard card content remains visible on small screens. */
@media (max-width:720px){
  #main .card.js-collapsible.collapsed > :not(h3){display:block !important;}
}

/* Totals row for every quantitative data table */
.rt-table tr.total-row{font-weight:800;background:var(--plum-soft);border-top:2px solid var(--line)}
.rt-table tr.total-row td{color:var(--ink)}

/* الشعار شفاف وألوانه بنفسجية؛ اللوحة البيضاء تحافظ على وضوح الهوية فوق الخلفيات الداكنة. */
.brand-logo,.mobile-logo,.login-logo,.login-card img{
  background:#fff!important;border:1px solid rgba(127,30,97,.12);border-radius:14px;
  padding:8px 11px!important;box-shadow:0 6px 18px rgba(43,22,37,.10);
}
.daily-notice-brand img,.email-preview-top img{
  background:#fff;border:1px solid rgba(255,255,255,.6);border-radius:13px;
  padding:8px 12px!important;box-shadow:0 7px 18px rgba(34,12,28,.15);
}

/* Branded daily-achievement composer and its true email preview. */
.daily-notice-card{overflow:hidden;padding:0!important;border-color:#eadce5!important;background:linear-gradient(180deg,#fff,#fdfafd)!important}
.daily-notice-brand{display:flex;align-items:center;gap:18px;padding:20px 22px;color:#fff;background:linear-gradient(135deg,#7f1e61,#5e1548)}
.daily-notice-brand img{width:150px;max-height:62px;object-fit:contain;border-inline-end:1px solid rgba(255,255,255,.2);padding-inline-end:18px}
.daily-notice-brand span{font-size:10px;color:#ffd7c5;font-weight:800}.daily-notice-brand h3{color:#fff;margin:2px 0 3px;font-size:21px}.daily-notice-brand p{margin:0;color:#eadce5;font-size:11.5px;line-height:1.6}
.daily-notice-card>.formgrid,.daily-notice-card>.btnrow{margin-inline:22px}.daily-notice-card>.formgrid{margin-block-start:20px}
.email-preview{margin:20px 22px 22px;border:1px solid #eadce5;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 8px 22px rgba(77,29,61,.055)}
.email-preview-top{padding:15px;text-align:center;background:linear-gradient(135deg,#7f1e61,#5e1548)}.email-preview-top img{width:142px;max-height:56px;object-fit:contain}
.email-preview-body{padding:20px}.email-preview-body small{color:var(--orange);font-weight:800}.email-preview-body h4{margin:6px 0 10px;color:var(--plum);font-size:18px}.email-preview-body p{margin:0;color:#655760;font-size:12.5px;line-height:1.9;white-space:pre-line}
.email-preview-foot{text-align:center;padding:12px 16px;background:#2b1625;color:#d9cbd4;font-size:10.5px;direction:ltr}
@media(max-width:720px){.daily-notice-brand{align-items:flex-start;flex-direction:column}.daily-notice-brand img{width:130px;border-inline-end:0;padding-inline-end:0}.daily-notice-card>.formgrid,.daily-notice-card>.btnrow,.email-preview{margin-inline:14px}.daily-notice-card>.formgrid{margin-block-start:15px}}


/* ===== Production mobile safety hotfix 2026-08-31 =====
   Keep wide tables inside the viewport, use stacked form rows through 820px,
   and reserve enough space for the fixed bottom navigation. */
@media(max-width:820px){
  main{max-width:100vw;overflow-x:hidden;padding-bottom:112px!important;}
  .tablewrap{max-width:100%;overflow-x:auto!important;-webkit-overflow-scrolling:touch;border:1px solid var(--line);}
  .rt-table{display:none!important;}
  .rt-cards{display:flex!important;flex-direction:column;gap:10px;}
  .rt-form-table{overflow-x:hidden!important;border:0!important;}
  .rt-form-table table,.rt-form-table thead,.rt-form-table tbody{display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;}
  .rt-form-table thead{position:absolute!important;inset-inline-start:-9999px!important;}
  .rt-form-table tr{display:block!important;width:100%!important;max-width:100%!important;background:#fff;border:1px solid var(--line);border-radius:12px;margin-block-end:10px;padding:10px 12px;box-sizing:border-box;}
  .rt-form-table td{display:block!important;width:100%!important;max-width:100%!important;border:none!important;padding:6px 0!important;text-align:start!important;white-space:normal!important;overflow-wrap:anywhere;box-sizing:border-box;}
  .rt-form-table td::before{content:attr(data-label);display:block;font-size:10.5px;color:var(--muted);font-weight:600;margin-block-end:3px;}
  .rt-form-table td input,.rt-form-table td select,.rt-form-table td textarea{width:100%!important;max-width:100%!important;box-sizing:border-box;}
  .import-drop{max-width:100%;box-sizing:border-box;}
}

/* ===== FINAL MOBILE SHELL FIX — 2026-08-31 =====
   #app-shell.show is more specific than .app, so without this override the
   mobile top bar becomes a flex-column sibling and squeezes <main>. */
@media (max-width:820px){
  #app-shell.show{display:block!important;width:100%!important;max-width:100vw!important;min-width:0!important;}
  #app-shell .mobile-topbar{width:100%!important;max-width:100vw!important;}
  #app-aside{visibility:hidden;pointer-events:none;}
  #app-aside.open{visibility:visible;pointer-events:auto;}
  #main{width:100%!important;max-width:100vw!important;min-width:0!important;}
}

/* === تحسينات لوحة المؤجّر (Employee Dashboard UI) === */
.employee-dashboard {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* إزالة الارتفاعات الثابتة الكبيرة المسببة للفراغات */
.card, .emp-card, .dashboard-card, .employee-chart-card {
  height: auto !important;
  min-height: 0 !important;
}

.emp-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.emp-page-head h2 { margin: 0; font-size: 24px; font-weight: 800; }
.emp-page-head p { margin: 4px 0 0; color: var(--muted, #666); font-size: 13px; }

.emp-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.emp-kpi-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-inline-start: 4px solid var(--plum);
  border-radius: 16px;
  padding: 18px;
  min-height: 110px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.emp-kpi-card:nth-child(1) { border-inline-start-color: var(--amber); }
.emp-kpi-card:nth-child(2) { border-inline-start-color: var(--orange); }
.emp-kpi-card:nth-child(3) { border-inline-start-color: var(--plum); }
.emp-kpi-card:nth-child(4) { border-inline-start-color: var(--green); }
.emp-kpi-card .label { font-size: 13px; color: var(--muted, #666); margin-bottom: 8px; }
.emp-kpi-card .value { font-size: 28px; font-weight: 800; line-height: 1; }
.emp-kpi-card .sub { margin-top: 8px; font-size: 12px; color: var(--muted, #666); }

.emp-target-card {
  background: linear-gradient(135deg, #7b1b76, #a52b86);
  color: #fff;
  border-radius: 20px;
  padding: 22px;
  min-height: 150px;
}
.emp-target-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.emp-target-head span { display: block; font-size: 13px; opacity: .85; }
.emp-target-head strong { display: block; margin-top: 6px; font-size: 24px; }
.emp-target-percent { font-size: 30px; font-weight: 900; }
.emp-target-stats { display: flex; justify-content: space-between; gap: 12px; margin-top: 20px; font-size: 13px; }
.emp-progress { margin-top: 12px; height: 9px; border-radius: 999px; background: rgba(255,255,255,.22); overflow: hidden; }
.emp-progress-bar { height: 100%; border-radius: inherit; background: #fff; }

.emp-chart-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
.emp-chart-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: 18px; min-height: 300px; }
.emp-chart-card h3 { margin: 0 0 14px; font-size: 16px; }
.chart-holder { height: 240px; min-height: 240px; }

.channel-list { display: flex; flex-direction: column; gap: 10px; }
.channel-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; background: #f8f8fa; border-radius: 10px; }
.channel-row strong { font-size: 15px; }
.channel-nums { display: flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted, #666); }
.channel-nums strong { font-size: 15px; color: var(--ink, #1a1a1a); }
.channel-nums i { font-style: normal; color: var(--line, #ddd); margin-inline: 2px; }

.emp-contract-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; }
.emp-contract-card { background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 16px; padding: 18px; text-align: center; min-height: 100px; }
.emp-contract-card span { display: block; color: var(--muted, #666); font-size: 13px; }
.emp-contract-card strong { display: block; margin-top: 10px; font-size: 30px; }

.emp-guide-card {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; align-items: center;
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 18px; padding: 20px; min-height: 160px;
}
.guide-main h3 { margin: 6px 0; font-size: 19px; }
.guide-main p { margin: 0; color: var(--muted, #666); }
.guide-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.guide-stats > div { background: #f8f8fa; border-radius: 12px; padding: 12px; }
.guide-stats span { display: block; font-size: 12px; color: var(--muted, #666); }
.guide-stats strong { display: block; margin-top: 5px; font-size: 15px; }

.emp-goal-banner { background: linear-gradient(135deg, var(--plum), var(--orange)); border-radius: 20px; padding: 22px 24px; color: #fff; }
.emp-goal-badge { display: inline-block; background: rgba(255,255,255,.18); border-radius: 999px; padding: 5px 14px; font-size: 12px; font-weight: 700; margin-block-end: 14px; }
.emp-goal-main { display: flex; justify-content: space-between; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.emp-goal-pct-block .pct { font-size: 40px; font-weight: 800; line-height: 1; }
.emp-goal-pct-block .lbl { font-size: 12.5px; opacity: .85; margin-block-start: 4px; }
.emp-goal-target-block { text-align: end; }
.emp-goal-target-block .lbl { font-size: 12px; opacity: .8; }
.emp-goal-target-block .val { font-size: 22px; font-weight: 800; margin-block-start: 2px; }
.emp-goal-bar { block-size: 10px; background: rgba(255,255,255,.25); border-radius: 999px; margin-block: 16px 10px; overflow: hidden; }
.emp-goal-bar > div { block-size: 100%; background: #fff; border-radius: 999px; }
.emp-goal-foot { display: flex; justify-content: space-between; font-size: 12.5px; opacity: .92; flex-wrap: wrap; gap: 6px; }

.emp-pace-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.emp-pace-cell { background: #f8f8fa; border-radius: 14px; padding: 14px; border-inline-start: 3px solid var(--line, #ddd); }
.emp-pace-cell.up { border-inline-start-color: var(--green); }
.emp-pace-cell.down { border-inline-start-color: var(--orange); }
.emp-pace-cell .l { font-size: 12px; color: var(--muted, #666); }
.emp-pace-cell .v { font-size: 18px; font-weight: 800; margin-block: 4px; }
.emp-pace-cell .d { font-size: 11.5px; color: var(--muted, #666); }
.emp-pace-cell.up .d { color: var(--green); font-weight: 700; }
.emp-pace-cell.down .d { color: var(--orange); font-weight: 700; }
@media (max-width: 700px) { .emp-pace-grid { grid-template-columns: 1fr; } .emp-goal-main { flex-direction: column; align-items: flex-start; } .emp-goal-target-block { text-align: start; } }

.whatif-presets { display: flex; gap: 8px; flex-wrap: wrap; margin-block-end: 6px; }
.whatif-result { display: flex; justify-content: space-between; align-items: center; background: var(--plum-soft); border-radius: 12px; padding: 12px 16px; }
.whatif-result strong { font-size: 20px; color: var(--plum-dark); }

.emp-compare-card h3 { margin: 0 0 8px; font-size: 16px; color: var(--plum-dark, #5E1548); }
.emp-compare-encourage { margin: 0 0 16px; font-size: 14px; color: var(--plum-dark, #5E1548); line-height: 1.7; font-weight: 600; }
.emp-compare-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.emp-compare-stat { background: #fff; border-radius: 14px; padding: 14px 16px; border-inline-start: 3px solid var(--plum); }
.emp-compare-stat span { display: block; font-size: 12.5px; color: var(--muted, #666); }
.emp-compare-stat strong { display: block; margin-top: 6px; font-size: 22px; }
.emp-compare-stat small { display: block; margin-top: 6px; font-size: 12px; font-weight: 700; }

.empty-state { min-height: 180px; display: flex; align-items: center; justify-content: center; color: var(--muted, #666); font-size: 13px; }

/* تحسينات الشريط الجانبي والمحتوى */
.sidebar { width: 230px; min-width: 230px; }
.navbtn { min-height: 44px; border-radius: 10px; padding: 10px 12px; }
.navbtn.active { background: rgba(255,255,255,.14); }
.app-shell { display: flex; }
.main-content { flex: 1; min-width: 0; padding: 20px; overflow-x: hidden; background: #f7f7f9; }

/* تجاوب الشاشات الصغيرة */
@media (max-width: 1100px) {
  .emp-kpi-grid { grid-template-columns: repeat(2,1fr); }
  .emp-chart-grid { grid-template-columns: 1fr; }
  .emp-guide-card { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .employee-dashboard { padding: 12px; }
  .emp-kpi-grid, .emp-contract-grid { grid-template-columns: 1fr; }
  .guide-stats { grid-template-columns: 1fr; }
  .emp-target-head { flex-direction: column; }
  .emp-compare-grid { grid-template-columns: 1fr; }
}


/* ===== Rento AI ===== */
.ai-readonly-badge{font-size:12px;padding:7px 11px;border-radius:999px;background:#EEF6F2;color:#34705C;border:1px solid #D8EAE2;font-weight:700}
.ai-shell{max-width:980px;margin-inline:auto;padding:0;overflow:hidden}
.ai-intro{display:flex;align-items:center;gap:14px;padding:20px 22px;border-bottom:1px solid var(--line);background:linear-gradient(135deg,#fff 0%,#FAF6F8 100%)}
.ai-intro p{margin:4px 0 0;color:var(--muted);font-size:13px;line-height:1.7}.ai-orb{width:46px;height:46px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(135deg,var(--plum),var(--orange));color:#fff;font-size:22px;box-shadow:0 8px 22px rgba(91,32,68,.18);flex:none}
.ai-suggestions{display:flex;gap:8px;flex-wrap:wrap;padding:14px 18px;border-bottom:1px solid var(--line);background:#fff}.ai-suggestions button{border:1px solid var(--line);background:var(--plum-soft);color:var(--plum);border-radius:999px;padding:8px 12px;font:inherit;font-size:12px;cursor:pointer;min-height:38px}.ai-suggestions button:hover{border-color:var(--plum);background:#fff}
.ai-chat{min-height:310px;max-height:52vh;overflow:auto;padding:20px;background:#FBFAFB;scroll-behavior:smooth}.ai-empty{text-align:center;color:var(--muted);padding:70px 15px;font-size:14px}
.ai-msg{max-width:82%;margin-bottom:14px;padding:12px 14px;border-radius:15px;line-height:1.8;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.035)}.ai-msg.user{margin-inline-start:auto;background:var(--plum);color:#fff;border-end-end-radius:5px}.ai-msg.assistant{margin-inline-end:auto;background:#fff;border:1px solid var(--line);color:var(--text);border-end-start-radius:5px}.ai-msg-label{font-size:10px;font-weight:800;opacity:.65;margin-bottom:4px;text-transform:uppercase;letter-spacing:.3px}
.ai-compose{display:flex;gap:10px;padding:14px 16px;border-top:1px solid var(--line);background:#fff}.ai-compose textarea{flex:1;min-height:52px;max-height:130px;resize:vertical;border:1.5px solid var(--line);border-radius:13px;padding:11px 13px;font:inherit;line-height:1.6;outline:none}.ai-compose textarea:focus{border-color:var(--plum);box-shadow:0 0 0 3px var(--plum-soft)}.ai-send{align-self:stretch;min-width:96px}.ai-footnote{padding:0 18px 14px;color:var(--muted);font-size:11px;background:#fff}
.ai-typing{display:flex;gap:4px;padding:6px 2px}.ai-typing i{width:7px;height:7px;border-radius:50%;background:var(--plum);opacity:.3;animation:aiPulse 1s infinite}.ai-typing i:nth-child(2){animation-delay:.15s}.ai-typing i:nth-child(3){animation-delay:.3s}@keyframes aiPulse{0%,80%,100%{transform:scale(.7);opacity:.25}40%{transform:scale(1);opacity:.8}}
@media(max-width:720px){.ai-shell{margin-inline:-2px}.ai-intro{padding:15px}.ai-intro p{font-size:11.5px}.ai-orb{width:40px;height:40px;border-radius:13px}.ai-suggestions{padding:10px;gap:6px;overflow-x:auto;flex-wrap:nowrap}.ai-suggestions button{white-space:nowrap;font-size:11px}.ai-chat{min-height:330px;max-height:49vh;padding:12px}.ai-msg{max-width:92%;font-size:13px;padding:10px 12px}.ai-compose{padding:10px;display:grid;grid-template-columns:1fr auto}.ai-compose textarea{min-height:48px}.ai-send{min-width:72px;padding-inline:14px}.ai-footnote{font-size:10px;padding:0 12px 10px}}

/* V4 — لغة ألوان موحدة للأداء */
.trend-good{color:var(--green)!important;font-weight:700}.trend-watch{color:var(--amber)!important;font-weight:700}.trend-risk{color:var(--orange)!important;font-weight:700}.trend-bad{color:var(--red)!important;font-weight:700}
.executive-note{border-inline-start:4px solid var(--plum)}

.login-admin-only{display:none!important} body.role-mgr .login-admin-only,body.role-rentalmanager .login-admin-only,body.role-supervisor .login-admin-only{display:flex!important}


.person-name-cell{display:inline-flex;align-items:center;gap:8px;min-inline-size:0}.person-avatar{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;border-radius:50%;background:linear-gradient(135deg,var(--plum),var(--orange));color:#fff;background-size:cover;background-position:center;font-weight:800}.avatar-symbol{background:var(--plum-soft);border:1px solid var(--line)}
.avatar-picker-overlay{position:fixed;inset:0;background:rgba(28,17,27,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:18px}.avatar-picker-card{background:#fff;border-radius:18px;max-inline-size:520px;inline-size:100%;padding:20px;box-shadow:0 24px 70px rgba(0,0,0,.25)}.avatar-options{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.avatar-option{border:1px solid var(--line);background:#fff;border-radius:14px;min-block-size:74px;font-size:32px;cursor:pointer}.avatar-option:hover{background:var(--plum-soft);border-color:var(--plum)}.executive-summary-lines{margin-top:12px;display:grid;gap:7px;color:var(--ink);font-size:13px}

/* V4.6.6.1 — compact admin accordions */
.admin-accordion{background:#fff;border:1px solid var(--line);border-radius:16px;margin-block:10px;overflow:hidden;box-shadow:0 4px 16px rgba(34,24,31,.035)}
.admin-accordion>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;cursor:pointer;font-weight:800;color:var(--ink);user-select:none}
.admin-accordion>summary::-webkit-details-marker{display:none}
.admin-accordion[open]>summary{border-bottom:1px solid var(--line);color:var(--plum)}
.admin-accordion-arrow{font-size:20px;transition:transform .18s ease;color:var(--muted)}
.admin-accordion[open] .admin-accordion-arrow{transform:rotate(180deg)}
.admin-accordion-body{padding:0}
.admin-accordion-card{margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.admin-accordion-source-title{display:none!important}
@media(max-width:720px){.admin-accordion>summary{padding:14px}.admin-accordion{border-radius:13px}}