/* ============================================================
   ريفاي فلو — نظام التصميم
   لون واحد (بنفسجي ريف فاليو) + ألوان الحالات فقط · فاتح · Cairo · RTL أولاً
   الهيكل: قائمة جانبية يمين (سطح المكتب) / شريط سفلي (جوال)
   ============================================================ */
:root{
  --accent:#5400A8; --accent-2:#6b14c9; --accent-soft:#f0e8fb; --accent-ink:#3d007a;
  --gold:#A89048; --gold-soft:#f7f1de;
  --bg:#f4f5f8; --card:#fff; --line:#e9eaef; --field:#f6f6f9; --hover:#f8f6fc;
  --ink:#2a2438; --muted:#8b8698; --faint:#b9b5c4;
  --red:#d94a4a; --red-soft:#fbeaea; --amber:#c98a12; --amber-soft:#fcf2dc;
  --green:#2c9e63; --green-soft:#e5f4ec; --blue:#3d7fd9; --blue-soft:#e9f1fc;
  --r:12px; --r-lg:16px; --shadow:0 2px 10px rgba(42,36,56,.05); --shadow-lg:0 12px 40px rgba(42,36,56,.16);
  --sidebar:236px; --topbar:60px; --bottomnav:62px;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.7 Cairo,system-ui,sans-serif;min-height:100vh}
a{color:var(--accent);text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff;outline:0;transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{min-height:90px;resize:vertical}
label{display:block;font-size:13px;font-weight:700;color:var(--muted);margin-bottom:4px}
.field{margin-bottom:12px}
.row{display:flex;gap:12px;flex-wrap:wrap} .row>.field{flex:1;min-width:180px}
::placeholder{color:var(--faint)}
[hidden]{display:none!important}
svg.ic{width:18px;height:18px;flex:none;vertical-align:-4px}

/* ---- الأزرار ---- */
.btn{display:inline-flex;align-items:center;gap:6px;border:0;border-radius:10px;padding:8px 16px;font-weight:700;cursor:pointer;background:var(--accent);color:#fff;white-space:nowrap;transition:filter .15s,transform .05s}
.btn:hover{filter:brightness(1.08)} .btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--accent-soft);color:var(--accent)}
.btn.light{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--red-soft);color:var(--red)}
.btn.sm{padding:5px 11px;font-size:13px;border-radius:8px}
.btn.icon{padding:7px;border-radius:9px}
.btn:disabled{opacity:.5;cursor:not-allowed}

/* ---- الهيكل ---- */
.app{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
.sidebar{background:#fff;border-left:1px solid var(--line);position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:16px 12px}
.brand{display:flex;align-items:center;gap:10px;padding:6px 8px 16px}
.brand .logo{width:36px;height:36px;border-radius:11px;background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px}
.brand .logo img{width:36px;height:36px;border-radius:11px;object-fit:cover}
.brand b{display:block;font-size:16px;line-height:1.2} .brand small{color:var(--muted);font-size:12px}
.nav{display:flex;flex-direction:column;gap:2px}
.nav .sec{font-size:11px;color:var(--faint);font-weight:700;letter-spacing:.5px;padding:12px 10px 4px}
.nav a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:10px;color:var(--ink);font-weight:600;font-size:14px}
.nav a:hover{background:var(--hover)} .nav a.on{background:var(--accent-soft);color:var(--accent)}
.nav a .cnt{margin-inline-start:auto;background:var(--red);color:#fff;border-radius:999px;font-size:11px;padding:0 7px;min-width:20px;text-align:center}
.nav a.soon{opacity:.45;pointer-events:none} .nav a.soon .cnt{background:var(--line);color:var(--muted)}
.sidebar .foot{margin-top:auto;font-size:11.5px;color:var(--faint);padding:10px 8px 0}

.main{min-width:0;display:flex;flex-direction:column}
.topbar{height:var(--topbar);background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 20px;position:sticky;top:0;z-index:20}
.topbar .search{flex:1;max-width:380px;position:relative}
.topbar .search input{padding-inline-start:36px;background:var(--field);border-color:transparent}
.topbar .search svg{position:absolute;inset-inline-start:11px;top:11px;color:var(--faint)}
.topbar .dept{max-width:220px;background:var(--field);border-color:transparent;font-weight:700;padding:7px 12px}
.topbar .spacer{flex:1}
.iconbtn{position:relative;border:0;background:transparent;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;cursor:pointer;color:var(--muted)}
.iconbtn:hover{background:var(--hover);color:var(--ink)}
.iconbtn .dot{position:absolute;top:6px;inset-inline-end:6px;background:var(--red);color:#fff;font-size:10px;border-radius:999px;padding:0 5px;min-width:17px;line-height:17px;text-align:center}
.userchip{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 6px;border-radius:10px}
.userchip:hover{background:var(--hover)}
.userchip .n{font-weight:700;font-size:13px;line-height:1.2;white-space:nowrap} .userchip .r{font-size:11.5px;color:var(--muted);white-space:nowrap;max-width:160px;overflow:hidden;text-overflow:ellipsis}
.content{padding:20px 22px 40px;max-width:1280px;width:100%}
.bottomnav{display:none}

/* ---- رأس الصفحة ---- */
.page-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.page-head h1{margin:0;font-size:20px;font-weight:800}
.page-head .sub{color:var(--muted);font-size:13px}
.page-head .actions{display:flex;gap:8px;flex-wrap:wrap}
.crumbs{font-size:12.5px;color:var(--muted)} .crumbs a{color:var(--muted)}

/* ---- البطاقات والشبكات ---- */
.card{background:var(--card);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 18px}
.card+.card{margin-top:14px}
.card h3{margin:0 0 10px;font-size:15px;font-weight:800}
.grid{display:grid;gap:14px} .grid.c2{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))} .grid.c3{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:16px}
.tile{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:12px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;border:2px solid transparent}
.tile.on{border-color:var(--accent)}
.tile .ico{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent)}
.tile.red .ico{background:var(--red-soft);color:var(--red)} .tile.amber .ico{background:var(--amber-soft);color:var(--amber)}
.tile.green .ico{background:var(--green-soft);color:var(--green)} .tile.blue .ico{background:var(--blue-soft);color:var(--blue)}
.tile b{display:block;font-size:22px;line-height:1.1} .tile span{color:var(--muted);font-size:12.5px}

/* ---- الشارات والحالات ---- */
.badge{display:inline-flex;align-items:center;border-radius:999px;padding:1px 10px;font-size:12px;font-weight:700;white-space:nowrap;line-height:1.6}
.b-late,.b-urgent{background:var(--red-soft);color:var(--red)} .b-esc{background:var(--red);color:#fff}
.b-today,.b-high,.b-review{background:var(--amber-soft);color:var(--amber)}
.b-open,.b-normal,.b-todo{background:var(--blue-soft);color:var(--blue)} .b-doing{background:var(--accent-soft);color:var(--accent)}
.b-done,.b-active{background:var(--green-soft);color:var(--green)} .b-low,.b-cancelled,.b-muted{background:var(--line);color:var(--muted)}
.b-lead{background:var(--gold-soft);color:#7a6520} .b-member{background:var(--blue-soft);color:var(--blue)} .b-viewer{background:var(--line);color:var(--muted)}
.avatar{width:32px;height:32px;border-radius:50%;background:var(--accent-soft);color:var(--accent);display:inline-grid;place-items:center;font-weight:800;font-size:13px;flex:none;overflow:hidden}
.avatar img{width:100%;height:100%;object-fit:cover} .avatar.lg{width:56px;height:56px;font-size:20px;border-radius:16px} .avatar.xl{width:84px;height:84px;font-size:30px;border-radius:22px}
.who{display:inline-flex;align-items:center;gap:8px} .who small{color:var(--muted);display:block;line-height:1.2}
.meta{color:var(--muted);font-size:12.5px} .muted{color:var(--muted)} .small{font-size:13px}
.empty{color:var(--muted);text-align:center;padding:26px 12px;border:1px dashed var(--line);border-radius:var(--r);font-size:14px}
.empty svg{width:32px;height:32px;color:var(--faint);display:block;margin:0 auto 6px}
.progress{height:6px;background:var(--line);border-radius:999px;overflow:hidden} .progress i{display:block;height:100%;background:var(--accent);border-radius:999px}
.progress.green i{background:var(--green)} .progress.red i{background:var(--red)} .progress.amber i{background:var(--amber)}

/* ---- القوائم والجداول ---- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.toolbar input,.toolbar select{width:auto;min-width:130px;background:#fff}
.toolbar .search{min-width:200px;flex:1;max-width:320px}
.seg{display:inline-flex;background:var(--field);border-radius:10px;padding:3px}
.seg button{border:0;background:transparent;padding:5px 11px;border-radius:8px;cursor:pointer;color:var(--muted);font-weight:700;display:flex;gap:4px;align-items:center}
.seg button.on{background:#fff;color:var(--accent);box-shadow:var(--shadow)}
.tbl{overflow-x:auto;background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow)}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;text-align:right;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12px;color:var(--muted);font-weight:700;white-space:nowrap;background:#fafafc}
tr:last-child td{border-bottom:0} tbody tr{cursor:pointer} tbody tr:hover td{background:var(--hover)}
td .t{font-weight:700} td .s{display:block;color:var(--muted);font-size:12px;font-weight:400}
.list{display:flex;flex-direction:column;gap:8px}
.item{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:10px 14px;display:flex;align-items:center;gap:12px;cursor:pointer;border-inline-start:4px solid transparent}
.item:hover{background:var(--hover)}
.item .body{flex:1;min-width:0} .item .ttl{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item .sub{color:var(--muted);font-size:12.5px}
.item.late,.item.esc{border-color:var(--red)} .item.today{border-color:var(--amber)} .item.done{opacity:.7}
.chips{display:flex;gap:6px;flex-wrap:wrap} .chip{background:var(--field);border-radius:999px;padding:0 9px;font-size:12px;color:var(--muted);display:inline-flex;align-items:center;gap:4px}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin-bottom:14px;overflow-x:auto}
.tabs button{border:0;background:transparent;padding:8px 14px;font-weight:700;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap;display:flex;gap:6px;align-items:center}
.tabs button.on{color:var(--accent);border-color:var(--accent)}
.tabs .cnt{background:var(--accent-soft);color:var(--accent);border-radius:999px;font-size:11px;padding:0 7px}

/* ---- التفاصيل: محتوى + عمود جانبي ثابت ---- */
.detail{display:grid;grid-template-columns:1fr 300px;gap:16px;align-items:start}
.detail .side{position:sticky;top:calc(var(--topbar) + 16px)}
.side .card{padding:14px 16px} .side .card+.card{margin-top:12px}
.kv{display:flex;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .kv:last-child{border:0}
.kv span:first-child{color:var(--muted)}
.desc{white-space:pre-wrap;line-height:1.8}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:12px 0}
.facts div small{display:block;color:var(--muted);font-size:11.5px;font-weight:700;text-transform:uppercase} .facts div b{font-size:14px}
.check{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line)} .check input{width:20px;height:20px;margin:0}
.check.done span{text-decoration:line-through;color:var(--muted)} .check .x{margin-inline-start:auto;color:var(--faint);cursor:pointer}
.comment{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)} .comment:last-child{border:0}
.comment .bubble{flex:1;background:var(--field);border-radius:12px;padding:8px 12px} .comment .bubble b{font-size:13px} .comment .bubble time{color:var(--muted);font-size:11.5px;margin-inline-start:8px}
.comment.followup .bubble{background:var(--gold-soft)}
.composer{display:flex;gap:8px;align-items:flex-end;margin-top:10px} .composer textarea{min-height:44px;flex:1}
.filerow{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .filerow:last-child{border:0} .filerow .sz{color:var(--muted);font-size:12px;margin-inline-start:auto}

/* ---- الكانبان ---- */
.kanban{display:grid;grid-template-columns:repeat(4,minmax(240px,1fr));gap:12px;overflow-x:auto;padding-bottom:8px;align-items:start}
.kcol{background:var(--field);border-radius:var(--r-lg);padding:10px;min-height:200px}
.kcol .kh{display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:14px;padding:2px 6px 10px} .kcol .kh .cnt{background:#fff;border-radius:999px;padding:0 9px;font-size:12px;color:var(--muted)}
.kcol.over{outline:2px dashed var(--accent)}
.kcard{background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding:10px 12px;margin-bottom:8px;cursor:grab;display:flex;flex-direction:column;gap:6px}
.kcard:active{cursor:grabbing} .kcard .ttl{font-weight:700;font-size:14px;line-height:1.5}
.kcard .foot{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:12px} .kcard .foot .cnt{display:inline-flex;align-items:center;gap:3px}
.kcard .foot .who{margin-inline-end:auto}

/* ---- سجل النشاط ---- */
.stream{display:flex;flex-direction:column}
.stream .ev{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px} .stream .ev:last-child{border:0}
.stream .ev time{color:var(--muted);font-size:12px;white-space:nowrap;min-width:78px}
.act{display:inline-block;border-radius:6px;padding:0 8px;font-size:11.5px;font-weight:700;min-width:58px;text-align:center}
.act-create,.act-upload{background:var(--blue-soft);color:var(--blue)} .act-update,.act-assign{background:var(--amber-soft);color:var(--amber)}
.act-done{background:var(--green-soft);color:var(--green)} .act-move,.act-comment{background:var(--accent-soft);color:var(--accent)}
.act-delete,.act-delete_file,.act-followup{background:var(--red-soft);color:var(--red)}

/* ---- الأشخاص ---- */
.person{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px;cursor:pointer}
.person .head{display:flex;gap:12px;align-items:center;margin-bottom:10px} .person .head b{display:block} .person .head small{color:var(--muted)}
.person .nums{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;text-align:center;margin:8px 0}
.person .nums b{display:block;font-size:18px;line-height:1.1} .person .nums span{font-size:11px;color:var(--muted)}
.person .nums .red b{color:var(--red)} .person .nums .green b{color:var(--green)}
.wa{background:#f6fbf7;border:1px solid #d9efe0;border-radius:var(--r);padding:10px 12px}
.wa textarea{background:#fff;font-size:13.5px;min-height:170px}
.wa .bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-weight:700;font-size:13px}

/* ---- الوارد ---- */
.inbox-tabs .cnt{min-width:22px}
.notif{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:var(--r);background:#fff;box-shadow:var(--shadow);cursor:pointer}
.notif.unread{border-inline-start:4px solid var(--accent)} .notif .k{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:none}
.notif time{display:block;color:var(--muted);font-size:12px}

/* ---- الدخول ---- */
.login{min-height:100vh;display:grid;place-items:center;padding:20px;background:linear-gradient(160deg,#f7f3fd,var(--bg))}
.login .box{background:#fff;border-radius:22px;box-shadow:var(--shadow-lg);padding:32px 30px;width:100%;max-width:400px}
.login .brand{justify-content:center;padding-bottom:10px} .login h2{text-align:center;margin:0 0 4px;font-size:18px} .login p{text-align:center;color:var(--muted);margin:0 0 18px;font-size:13.5px}
.login .btn{width:100%;justify-content:center;padding:11px}
.err{background:var(--red-soft);color:var(--red);border-radius:10px;padding:8px 12px;font-size:13.5px;margin-bottom:12px}

/* ---- النوافذ والتنبيهات ---- */
.overlay{position:fixed;inset:0;background:rgba(30,20,50,.35);z-index:50;display:grid;place-items:center;padding:16px}
.modal{background:#fff;border-radius:18px;box-shadow:var(--shadow-lg);padding:20px 22px;width:100%;max-width:560px;max-height:92vh;overflow:auto}
.modal h3{margin:0 0 12px;font-size:16px}
.modal .foot{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}
.toasts{position:fixed;bottom:20px;inset-inline-start:20px;z-index:99;display:flex;flex-direction:column;gap:8px}
.toast{background:var(--ink);color:#fff;border-radius:12px;padding:9px 16px;font-size:13.5px;box-shadow:var(--shadow-lg);animation:up .2s}
.toast.err{background:var(--red)} .toast.ok{background:var(--green)}
@keyframes up{from{transform:translateY(8px);opacity:0}}
.pop{position:absolute;top:calc(100% + 6px);inset-inline-end:0;background:#fff;border-radius:14px;box-shadow:var(--shadow-lg);width:360px;max-height:70vh;overflow:auto;z-index:30;padding:8px}
.pop .hd{display:flex;justify-content:space-between;align-items:center;padding:6px 8px;font-weight:800;font-size:14px}
.menu a{display:block;padding:8px 12px;border-radius:8px;color:var(--ink)} .menu a:hover{background:var(--hover)}
.loading{text-align:center;color:var(--muted);padding:30px}
.spin{width:22px;height:22px;border:3px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .8s linear infinite;margin:0 auto 8px}
@keyframes sp{to{transform:rotate(360deg)}}
kbd{background:var(--field);border-radius:5px;padding:0 6px;font-size:12px;border:1px solid var(--line)}
.note{background:var(--gold-soft);border-radius:var(--r);padding:12px 14px;font-size:14px}

/* ---- الجوال ---- */
@media (max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{display:none}
  .content{padding:14px 14px calc(var(--bottomnav) + 24px)}
  .topbar{padding:0 12px;gap:8px} .topbar .search{display:none} .topbar .dept{max-width:150px;font-size:13px} .userchip .r{display:none} .userchip .n{max-width:90px;overflow:hidden;text-overflow:ellipsis}
  .detail{grid-template-columns:1fr} .detail .side{position:static}
  .kanban{display:flex;overflow-x:auto;scroll-snap-type:x mandatory} .kcol{min-width:82vw;scroll-snap-align:start}
  .bottomnav{display:flex;position:fixed;bottom:0;inset-inline:0;height:var(--bottomnav);background:#fff;border-top:1px solid var(--line);z-index:40;justify-content:space-around;align-items:center;padding-bottom:env(safe-area-inset-bottom)}
  .bottomnav a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);font-weight:700;position:relative;padding:4px 10px}
  .bottomnav a.on{color:var(--accent)} .bottomnav a .cnt{position:absolute;top:0;inset-inline-end:2px;background:var(--red);color:#fff;font-size:10px;border-radius:999px;padding:0 5px}
  .bottomnav a.plus{background:var(--accent);color:#fff;border-radius:16px;padding:8px 14px;margin-top:-22px;box-shadow:0 6px 18px rgba(84,0,168,.3)}
  input,select,textarea{font-size:16px}
  .pop{position:fixed;inset-inline:10px;top:66px;width:auto}
  .person .nums{grid-template-columns:repeat(4,1fr)}
  .page-head h1{font-size:18px}
}
@media print{.sidebar,.topbar,.bottomnav,.btn,.toolbar{display:none!important} .app{display:block} .content{padding:0}}