/* المهام على نمط Trello — مقاسات وألوان واجهة Trello (الوضع الداكن) على خلفية بهوية رسو */
.tr-app{--tx:#B6C2CF;--tx2:#9FADBC;--card:#22272B;--card-h:#2C333A;--pop:#282E33;--line:rgba(255,255,255,.12);--blue:#579DFF;
  margin:-22px -24px 0;min-height:calc(100dvh - 64px);display:flex;flex-direction:column;color:var(--tx);
  background:transparent}   /* خلفية المهام = خلفية النظام نفسها (يختارها المستخدم من المكتب) */
.tr-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;background:rgba(16,36,41,.62);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);flex-wrap:wrap}
.tr-bar-r,.tr-bar-l{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tr-title{margin:0;font-size:18px;font-weight:700;color:#fff;padding:4px 8px;border-radius:6px}
.tr-view{display:flex;background:rgba(255,255,255,.14);border-radius:6px;padding:2px}
.tr-view button,.tr-btn,.tr-ib{border:0;background:none;color:#fff;display:inline-flex;align-items:center;gap:6px;cursor:pointer;border-radius:6px;font:inherit;font-size:14px}
.tr-view button{width:32px;height:28px;justify-content:center}.tr-view button.on{background:#DFE1E6;color:#172B4D}
.tr-view svg,.tr-btn svg,.tr-ib svg{width:16px;height:16px}
.tr-boards{width:auto!important;max-width:220px;background:rgba(255,255,255,.14)!important;color:#fff!important;border:0!important;border-radius:6px!important;min-height:32px!important;padding:4px 10px!important;font-weight:700}
.tr-boards option{color:#172B4D}
.tr-btn{height:32px;padding:0 10px;background:rgba(255,255,255,.14)}.tr-btn:hover,.tr-ib:hover{background:rgba(255,255,255,.22)}.tr-btn.on{background:#DFE1E6;color:#172B4D}
.tr-btn b{background:#579DFF;color:#fff;border-radius:10px;padding:0 6px;font-size:12px}
.tr-ib{width:32px;height:32px;justify-content:center;color:var(--tx2)}
.tr-search{background:rgba(255,255,255,.14)!important;color:#fff!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:6px!important;min-height:32px!important;width:180px;padding:4px 10px!important}
.tr-search::placeholder{color:rgba(255,255,255,.7)}
.tr-avs{display:flex}.tr-avs button{border:0;background:none;padding:0;margin-inline-start:-6px;cursor:pointer;border-radius:50%}.tr-avs button.on{box-shadow:0 0 0 2px #579DFF}
.tr-avs .r-av,.tr-avs .r-av-img{box-shadow:0 0 0 2px #22272B}
/* اللوحة والقوائم */
.tr-board{flex:1;display:flex;align-items:flex-start;gap:12px;padding:12px 12px 24px;overflow-x:auto;overflow-y:hidden;scrollbar-color:rgba(255,255,255,.4) transparent}
.tr-list{flex:0 0 272px;max-height:calc(100dvh - 160px);display:flex;flex-direction:column;background:var(--lc);border-radius:12px;box-shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31);padding-bottom:4px}
.tr-lh{display:flex;align-items:center;gap:2px;padding:8px 8px 4px 4px}
.tr-lh h3{flex:1;margin:0;padding:6px 8px;font-size:14px;font-weight:700;color:#fff}
.tr-cnt{font-size:12px;color:var(--tx2);margin-inline-end:4px}
.tr-shut{flex:0 0 40px;align-items:center;gap:10px;padding:10px 0;cursor:pointer;max-height:none}
.tr-shut b{writing-mode:vertical-rl;color:#fff;font-size:14px}.tr-shut span{font-size:12px;color:var(--tx2)}.tr-shut svg{width:16px;height:16px;color:var(--tx2)}
.tr-cards{flex:1;overflow-y:auto;padding:2px 8px;display:flex;flex-direction:column;gap:8px;min-height:6px;scrollbar-width:thin}
.tr-lf{display:flex;align-items:center;gap:4px;padding:6px 8px 4px}
.tr-addbtn{flex:1;display:flex;align-items:center;gap:8px;border:0;background:none;color:var(--tx2);font:inherit;font-size:14px;font-weight:600;padding:6px 8px;border-radius:8px;cursor:pointer;text-align:right}
.tr-addbtn:hover{background:rgba(166,197,226,.16);color:#fff}.tr-addbtn svg{width:16px;height:16px}
/* البطاقة */
.tr-card{position:relative;background:var(--card);border-radius:8px;box-shadow:0 1px 1px rgba(9,30,66,.25),0 0 1px rgba(9,30,66,.31);cursor:pointer;color:var(--tx);outline:2px solid transparent;transition:outline-color .1s;overflow:hidden;touch-action:pan-y;user-select:none}
.tr-card:hover{outline-color:#85B8FF;background:var(--card-h)}
.tr-cover{height:32px}
.tr-lbls{display:flex;flex-wrap:wrap;gap:4px;padding:8px 12px 0}
.tr-lbls span{height:8px;min-width:40px;border-radius:4px;background:var(--l);transition:all .15s}
.tr-lbls.open span{height:16px;line-height:16px;font-size:12px;font-weight:700;color:#1D2125;padding:0 8px}
.tr-ct{display:flex;align-items:flex-start;gap:6px;padding:8px 12px 4px;font-size:14px;color:#DEE4EA;line-height:1.45;word-break:break-word}
.tr-done{border:0;background:none;padding:0;color:var(--tx2);cursor:pointer;display:none;flex-shrink:0;margin-top:1px}
.tr-done svg{width:16px;height:16px}.tr-card:hover .tr-done,.tr-card.done .tr-done{display:inline-flex}.tr-card.done .tr-done{color:#4BCE97}
.tr-card.done .tr-ct span{color:var(--tx2)}
.tr-badges{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;padding:0 12px 8px;font-size:12px;color:var(--tx2)}
.tr-badges:empty{display:none}.tr-badges svg{width:14px;height:14px}.tr-badges span{display:inline-flex;align-items:center;gap:4px}
.tr-badges .ok{background:#1F845A;color:#fff;border-radius:3px;padding:1px 4px}
.tr-due{display:inline-flex;align-items:center;gap:4px;border-radius:3px;padding:1px 4px}.tr-due svg{width:14px;height:14px}
.tr-due.late{background:#AE2E24;color:#FFECEB}.tr-due.soon{background:#7F5F01;color:#FFF7D6}.tr-due.ok{background:#1F845A;color:#fff}
.tr-ms{margin-inline-start:auto;display:flex}.tr-ms .r-av,.tr-ms .r-av-img{margin-inline-start:-4px;box-shadow:0 0 0 2px var(--card)}
.tr-edit{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;border:0;background:var(--card-h);color:var(--tx);display:none;place-items:center;cursor:pointer}
.tr-edit svg{width:14px;height:14px}.tr-card:hover .tr-edit{display:grid}
.tr-ph{border-radius:8px;background:rgba(0,0,0,.22);flex-shrink:0}
.tr-ghost{position:fixed;top:0;left:0;z-index:200;pointer-events:none;box-shadow:0 12px 24px rgba(0,0,0,.45);outline:0;opacity:.95}
body.tr-dragging,body.tr-dragging *{cursor:grabbing!important;user-select:none}
/* الإضافة السريعة */
.tr-composer{padding:4px 8px}.tr-composer textarea,.tr-itemadd textarea,#trDescIn{width:100%;background:var(--card)!important;color:#fff!important;border:0!important;border-radius:8px!important;box-shadow:inset 0 0 0 1px #85B8FF;padding:8px 12px!important;font:inherit;font-size:14px;resize:none}
.tr-composer>div,.tr-row{display:flex;align-items:center;gap:6px;margin-top:8px}
.tr-primary{background:#579DFF;color:#1D2125;border:0;border-radius:4px;padding:7px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}.tr-primary:hover{background:#85B8FF}
.tr-lbl{display:inline-block;background:var(--l);color:#1D2125;font-size:12px;font-weight:700;border-radius:4px;padding:1px 8px;margin:1px}
/* المنبثقات */
.tr-pop{position:fixed;z-index:300;background:var(--pop,#282E33);color:#B6C2CF;border-radius:8px;box-shadow:0 8px 12px rgba(0,0,0,.36),0 0 1px rgba(0,0,0,.5);padding:12px;max-height:80vh;overflow:auto;font-size:14px}
.tr-pop{--pop:#282E33}
.tr-pop-h{display:grid;grid-template-columns:1fr 32px;align-items:center;margin:-4px 0 8px}.tr-pop-h b{text-align:center;font-size:14px;color:#B6C2CF;padding-inline-start:32px}
.tr-pop>button,.tr-quick button{display:flex;align-items:center;gap:8px;width:100%;border:0;background:none;color:#B6C2CF;font:inherit;font-size:14px;padding:7px 10px;border-radius:4px;cursor:pointer;text-align:right}
.tr-pop>button:hover,.tr-quick button:hover{background:rgba(166,197,226,.16)}
.tr-quick{display:flex;flex-direction:column;gap:4px}.tr-quick button{background:#2C333A;width:auto}.tr-quick svg{width:16px;height:16px}
.tr-pop hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:8px 0}
.tr-pop-s{display:block;font-size:12px;font-weight:700;color:#9FADBC;margin:10px 0 4px}
.tr-pop input[type=date],.tr-pop select,.tr-pop-q{width:100%;background:#22272B!important;color:#fff!important;border:1px solid #738496!important;border-radius:4px!important;min-height:36px!important}
.tr-opt{display:flex;align-items:center;gap:8px;padding:4px 2px;cursor:pointer}
.tr-lrow{display:flex;align-items:center;gap:8px;margin:4px 0;cursor:pointer}.tr-lrow span{flex:1;height:32px;line-height:32px;border-radius:4px;padding:0 12px;color:#1D2125;font-weight:700}
.tr-mrow{display:flex!important;align-items:center;gap:10px}.tr-mrow span{flex:1}.tr-mrow.on{background:rgba(87,157,255,.14)!important}
.tr-covers{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.tr-covers button{height:40px;border-radius:4px;border:0;cursor:pointer}.tr-covers button.none{border:1px dashed #738496;color:#B6C2CF}
.tr-addrow{display:flex!important;align-items:center;gap:12px}.tr-addrow span{display:flex;flex-direction:column}.tr-addrow small{font-size:12px;color:#9FADBC}
/* نافذة البطاقة */
.tr-mbg{background:rgba(0,0,0,.64)!important;align-items:flex-start!important;padding:48px 16px!important;overflow:auto}
.tr-modal{width:min(1080px,100%);background:#22272B;color:#B6C2CF;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px rgba(0,0,0,.5);font-size:14px;text-align:right}
.tr-mtop{min-height:56px;display:flex;align-items:flex-start;justify-content:space-between;padding:12px 16px;background:#1D2125;border-bottom:1px solid rgba(255,255,255,.08)}
.tr-mtop[style]{min-height:116px}
.tr-listchip{display:inline-flex;align-items:center;gap:4px;border:0;background:#2C333A;color:#DEE4EA;border-radius:4px;padding:4px 8px;font:inherit;font-size:13px;font-weight:700;cursor:pointer}.tr-listchip svg{width:14px;height:14px}
.tr-mtop-a{display:flex;gap:8px}.tr-cib{width:32px;height:32px;border-radius:50%;border:0;background:rgba(0,0,0,.4);color:#fff;display:grid;place-items:center;cursor:pointer}.tr-cib:hover{background:rgba(0,0,0,.6)}.tr-cib svg{width:16px;height:16px}
.tr-mbody{display:grid;grid-template-columns:1.45fr 1fr;min-height:420px}
.tr-main{padding:20px 24px 28px;min-width:0}
.tr-side{background:#1D2125;padding:20px;border-inline-start:1px solid rgba(255,255,255,.08);min-width:0}
.tr-mtitle{display:flex;align-items:flex-start;gap:10px}
.tr-done.big{display:inline-flex;margin-top:8px}.tr-done.big svg{width:20px;height:20px}
#trTitle{flex:1;background:none!important;border:0!important;color:#DEE4EA!important;font:inherit;font-size:22px!important;font-weight:700;padding:2px 6px!important;border-radius:4px;resize:none;overflow:hidden;min-height:0!important;box-shadow:none!important}
#trTitle:focus{background:#22272B!important;box-shadow:inset 0 0 0 2px #85B8FF!important}
.tr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 4px}
.tr-chips button{display:inline-flex;align-items:center;gap:6px;border:1px solid #454F59;background:none;color:#B6C2CF;border-radius:4px;padding:5px 10px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}
.tr-chips button:hover{background:rgba(166,197,226,.12)}.tr-chips svg{width:15px;height:15px}
.tr-meta{display:flex;flex-wrap:wrap;gap:16px 24px;margin:16px 0 4px}
.tr-meta label{display:block;font-size:12px;font-weight:700;color:#9FADBC;margin-bottom:6px}
.tr-mavs,.tr-mlbls{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.tr-mlbls span{height:32px;line-height:32px;border-radius:4px;padding:0 12px;color:#1D2125;font-weight:700}
.tr-plus{width:32px;height:32px;border-radius:50%;border:0;background:#2C333A;color:#B6C2CF;display:grid;place-items:center;cursor:pointer}.tr-plus svg{width:16px;height:16px}
.tr-datechip{border:0;background:#2C333A;color:#DEE4EA;border-radius:4px;padding:6px 10px;font:inherit;font-size:13.5px;cursor:pointer;display:inline-flex;gap:8px;align-items:center}
.tr-meta-v{display:inline-flex;align-items:center;gap:6px;color:#DEE4EA}
.tr-sec{margin-top:24px}
.tr-sec-h{display:flex;align-items:center;gap:10px;margin-bottom:10px}.tr-sec-h svg{width:18px;height:18px;color:#9FADBC}.tr-sec-h h4{flex:1;margin:0;font-size:16px;color:#DEE4EA}
.tr-sbtn{border:0;background:#2C333A;color:#B6C2CF;border-radius:4px;padding:6px 12px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer}.tr-sbtn:hover{background:#333C43}
.tr-desc{line-height:1.8;color:#DEE4EA;padding:4px 28px;cursor:pointer}
.tr-descph{width:100%;text-align:right;border:0;background:#2C333A;color:#9FADBC;border-radius:4px;padding:10px 12px 34px;font:inherit;cursor:pointer;margin-inline-start:28px;width:calc(100% - 28px)}
.tr-att{display:flex;align-items:center;gap:12px;padding:6px 28px}.tr-att a{flex:1;color:#579DFF;font-weight:600;word-break:break-all}.tr-att-ic{width:44px;height:32px;border-radius:4px;background:#2C333A;display:grid;place-items:center}.tr-att-ic svg{width:16px;height:16px}
.tr-prog{display:flex;align-items:center;gap:10px;margin:0 0 8px}.tr-prog span{width:28px;font-size:11px;color:#9FADBC}.tr-prog div{flex:1;height:8px;background:#2C333A;border-radius:4px;overflow:hidden}.tr-prog i{display:block;height:100%;border-radius:4px;transition:width .3s}
.tr-item{display:flex;align-items:center;gap:10px;padding:5px 2px;border-radius:6px}.tr-item:hover{background:rgba(166,197,226,.08)}.tr-item span{flex:1;color:#DEE4EA}.tr-item.done span{text-decoration:line-through;color:#9FADBC}
.tr-item input{width:16px;height:16px;accent-color:#579DFF}.tr-item .tr-ib{opacity:0;width:28px;height:28px}.tr-item:hover .tr-ib{opacity:1}
.tr-itemadd{padding:4px 0 0 0;margin-inline-start:28px}
.tr-cmtbox{display:flex;gap:8px;align-items:flex-start}.tr-cmtbox textarea{flex:1;background:#22272B!important;color:#DEE4EA!important;border:0!important;border-radius:8px!important;box-shadow:inset 0 0 0 1px #454F59;padding:8px 12px!important;resize:none}
.tr-cmtact{display:flex;justify-content:flex-end;margin:6px 0 12px}
.tr-act{display:flex;flex-direction:column;gap:14px}.tr-actrow{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.6}.tr-actrow b{color:#DEE4EA}.tr-actrow small{display:block;color:#9FADBC;font-size:12px}
.tr-cbody{margin:4px 0 0;background:#22272B;border-radius:8px;padding:8px 12px;box-shadow:inset 0 0 0 1px #2C333A;color:#DEE4EA}
.tr-created{margin-top:18px}
.tr-tablewrap{margin:12px;background:#fff;border-radius:12px;overflow:auto}
.tr-app .r-av{color:#fff!important}
@media(max-width:820px){
  .tr-app{margin:-16px -14px 0;min-height:calc(100dvh - 130px)}
  .tr-bar{padding:8px 10px}.tr-search{width:120px}.tr-avs{display:none}
  .tr-board{scroll-snap-type:x mandatory;padding:10px}.tr-list{flex-basis:84vw;scroll-snap-align:center;max-height:calc(100dvh - 230px)}
  .tr-mbody{grid-template-columns:1fr}.tr-side{border:0;border-top:1px solid rgba(255,255,255,.08)}.tr-main{padding:16px}
  .tr-mbg{padding:0!important}.tr-modal{border-radius:0;min-height:100dvh}
  .tr-done{display:inline-flex}.tr-edit{display:grid;background:transparent}
}