/* «لوحة التحكم» / Dashboard (owner 2026-10-16) — see dashboard.js. Light by default, dark follows the device (html.dk). */
/* palette = the concept (MY TUNE dashboard canvas, 2026-10-15) */
:root{--d-bg:#F4F5F7;--d-head:#FFFFFF;--d-card:#FFFFFF;--d-line:#E3E6EB;--d-ink:#14171B;--d-mut:#5D6672;--d-chip:#F1F3F5;--d-next:#FFF6F6;--d-chatbg:#F7F8FA;--d-red:#C8141F;--d-log:#1F5FA8;--d-logbg:#F2F7FD;--d-logline:#B7CDEB;--d-green:#1F8A4C;--d-mz:#6B2D7B;--d-okbg:#E3F4EA;--d-okink:#127C4A}
html.dk{--d-bg:#0E1013;--d-head:#14171B;--d-card:#181B20;--d-line:#2A2F37;--d-ink:#F2F3F5;--d-mut:#A6ADB8;--d-chip:#22262D;--d-next:#1E1416;--d-chatbg:#121418;--d-log:#7AA7F0;--d-logbg:#121B2A;--d-logline:#2C4670;--d-mz:#B98BC9;--d-okbg:#12301F;--d-okink:#6FD39A}
html.dash-mode,html.dash-mode body{background:var(--d-bg)}

/* ── the dashboard tabs: underlined, Customize at the end ── */
#dashBar:empty{display:none}
.dsb-in{max-width:1360px;margin:0 auto;padding:16px 24px 0;display:flex;gap:6px;align-items:flex-end;border-bottom:1px solid var(--d-line)}
.dsb-tabs{display:flex;gap:6px;flex-wrap:wrap;flex:1;min-width:0}
.dsb-t{position:relative;border:0;background:transparent;color:var(--d-mut);font:500 15px var(--fb);padding:10px 14px;border-bottom:3px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.dsb-t:hover{color:var(--d-ink)}
.dsb-t.on{color:var(--d-ink);font-weight:700;border-bottom-color:var(--d-red)}
.dsb-end{display:flex;gap:8px;align-items:center;align-self:center;margin-inline-start:auto;padding-bottom:6px}
.dsb-btn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--d-line);background:var(--d-card);color:var(--d-ink);border-radius:10px;padding:7px 12px;font:600 14px var(--fb);min-height:40px;cursor:pointer;white-space:nowrap}
.dsb-btn[aria-pressed=true]{border-color:var(--d-red);color:var(--d-red)}
.dsb-acc-only .dsb-in{border-bottom:0;padding-bottom:4px}
.top-theme{border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
@media (min-width:821px){
  html.dash-mode #app .shell{grid-template-columns:minmax(0,1fr)!important}
  html.dash-mode #app .shell .sidebar{display:none!important}
  html:not(.dash-mode) #app .shell .side-nav>.side-link.dsi{display:none!important}
  html.dash-mode #app .shell .content{padding:20px 24px 48px!important;max-width:1360px;margin:0 auto;width:100%}
  html.dash-mode:not(.acct-msgs) #app .shell .content>*{max-width:none}
  html.dash-mode #mzHello:not(:empty){max-width:1360px;margin:16px auto 0;padding:0 24px}
}
@media (max-width:820px){.dsb{display:none}}

/* ── My tune ── */
.dsh{display:flex;gap:18px;flex-wrap:wrap;align-items:flex-start}
.dsh-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:12px 20px;border-radius:12px;border:1px solid var(--d-line);background:var(--d-card);color:var(--d-ink);font:700 15px var(--fb);cursor:pointer;text-decoration:none;white-space:nowrap}
.dsh-btn.red{background:#C8141F;border-color:#C8141F;color:#fff}
.dsh-btn:disabled{opacity:.6;cursor:default}

/* how-to */
.dsh-guide{padding:18px;display:flex;flex-direction:column;gap:14px}
.dsh-mut{font-size:13px;color:var(--d-mut)}
.dsh-gt{display:flex;gap:6px;flex-wrap:wrap}
.dsh-gt button{border:1px solid var(--d-line);background:transparent;color:var(--d-mut);border-radius:999px;padding:5px 14px;font:600 13px var(--fb);cursor:pointer}
.dsh-gt button.on{background:var(--d-ink);border-color:var(--d-ink);color:var(--d-card)}
.dsh-vids{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.dsh-v{text-align:start;background:none;border:1px solid var(--d-line);border-radius:16px;padding:0;overflow:hidden;color:var(--d-ink);display:flex;flex-direction:column;cursor:pointer;font:inherit}
.dsh-v.now{border-color:#C8141F}
.dsh-v:disabled{cursor:default}
.dsh-vth{height:118px;background-color:#1A1E24;background-image:linear-gradient(160deg,#2A2F37,#0F1216);background-size:cover;background-position:center;display:grid;place-items:center;position:relative}
.dsh-vth i{width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.92);display:grid;place-items:center}
.dsh-vth em{position:absolute;left:8px;top:8px;background:#C8141F;color:#fff;font-size:11px;font-weight:700;font-style:normal;border-radius:6px;padding:2px 8px}
[dir=rtl] .dsh-vth em{left:auto;right:8px}
.dsh-vth s{position:absolute;right:8px;bottom:8px;background:rgba(0,0,0,.65);color:#fff;font:600 12px 'IBM Plex Mono',ui-monospace,monospace;text-decoration:none;border-radius:6px;padding:1px 7px}
[dir=rtl] .dsh-vth s{right:auto;left:8px}
.dsh-vb{padding:10px 12px;display:flex;flex-direction:column}
.dsh-vb b{font-size:14px}
.dsh-vb span{font-size:12px;color:var(--d-mut);line-height:1.5}
.dsh-cfgw{border-top:1px solid var(--d-line);padding-top:14px;display:flex;flex-direction:column;gap:8px}
.dsh-cfg{display:flex;gap:10px;flex-wrap:wrap}
.dsh-cf{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--d-line);background:var(--d-bg);color:var(--d-ink);border-radius:12px;padding:9px 14px;min-height:44px;cursor:pointer;font:inherit;text-align:start}
.dsh-cf .dsh-cfi{color:var(--d-log);display:grid}
.dsh-cf span:last-child{display:flex;flex-direction:column}
.dsh-cf b{font-size:14px}.dsh-cf small{font-size:12px;color:var(--d-mut)}
.dsh-cfmore{border:0;background:none;color:var(--d-mut);font:600 13px var(--fb);cursor:pointer}
.dsh-note{padding:12px 14px;border-radius:12px;background:var(--d-chip);color:var(--d-mut);font-size:14px}

.dsh-empty{max-width:640px;margin:40px auto;text-align:center;background:var(--d-card);border:1px solid var(--d-line);border-radius:20px;padding:36px 28px;color:var(--d-ink)}
.dsh-empty h2{font-family:'Saira Condensed',var(--fd);font-size:30px;margin:0 0 8px}
.dsh-empty p{color:var(--d-mut);margin:0 0 18px}
.dsh-acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}

/* the revision form */
.dsh-modal{position:fixed;inset:0;z-index:300;background:rgba(8,10,12,.55);display:grid;place-items:center;padding:16px}
.dsh-mbox{width:100%;max-width:520px;max-height:calc(100dvh - 32px);overflow-y:auto;background:var(--d-card);color:var(--d-ink);border:1px solid var(--d-line);border-radius:20px;padding:20px 22px;display:flex;flex-direction:column;gap:10px}
.dsh-mh{display:flex;justify-content:space-between;align-items:center}
.dsh-mh b{font-family:'Saira Condensed',var(--fd);font-size:24px}
[dir=rtl] .dsh-mh b{font-family:'Changa',var(--fd);font-size:20px}
.dsh-mh button{border:0;background:transparent;color:var(--d-mut);font-size:1.1rem;cursor:pointer}
.dsh-mp{margin:-6px 0 0;color:var(--d-mut);font-size:14px}
.dsh-ml{font-weight:700;font-size:14px;margin-top:4px}
.dsh-chips{display:flex;flex-wrap:wrap;gap:6px}
.dsh-chips label{cursor:pointer;margin:0}
.dsh-chips input{display:none}
.dsh-chips span{display:inline-block;padding:7px 12px;border-radius:999px;border:1px solid var(--d-line);background:var(--d-chip);font-size:14px;font-weight:600;color:var(--d-ink)}
.dsh-chips input:checked+span{background:#C8141F;border-color:#C8141F;color:#fff}
.dsh-chk{display:flex!important;align-items:center;gap:8px;font-size:14px!important;color:var(--d-ink)!important;letter-spacing:0!important;font-weight:600!important;margin:4px 0 0!important;cursor:pointer}
.dsh-chk input{width:18px;height:18px;margin:0}
.dsh-mbox textarea{width:100%;border:1px solid var(--d-line);border-radius:12px;background:var(--d-bg);color:var(--d-ink);padding:10px 12px;font:inherit;resize:vertical}
.dsh-attach{display:flex!important;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border:2px dashed var(--d-logline);background:var(--d-logbg);border-radius:14px;color:var(--d-log)!important;font-size:14px!important;letter-spacing:0!important;cursor:pointer;margin:0!important}
.dsh-attach input{display:none}
.dsh-attach em{font-style:normal;color:var(--d-mut);font-size:13px;direction:ltr}
.dsh-merr{color:#C8141F;font-size:14px}
.dsh-macts{display:flex;gap:8px;margin-top:6px}

/* drag & drop */
.dsh-drop{display:none}
html.dsh-drag .dsh-drop{display:grid;place-items:center;position:fixed;inset:0;z-index:250;background:color-mix(in srgb,var(--d-bg) 70%,transparent);backdrop-filter:blur(3px);pointer-events:none}
.dsh-drop>div{display:flex;flex-direction:column;align-items:center;gap:6px;padding:40px 56px;border:2px dashed var(--d-logline);border-radius:20px;background:var(--d-logbg);color:var(--d-ink)}
.dsh-drop b{font-size:22px;color:var(--d-log)}
.dsh-drop span{color:var(--d-mut)}

@media (max-width:1100px){
  .dsh{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .dsh-guide{order:4}
}
@media (max-width:900px){.dsh-vids{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .dsh-vids{grid-template-columns:1fr}
  .dsh-v{flex-direction:row}.dsh-vth{width:120px;height:auto;min-height:76px;flex:none}.dsh-vth i{width:34px;height:34px}.dsh-vth em{display:none}
}
/* ── dark: the rest of the account page follows (cards, chat, forms) ── */
html.dk{--paper:#0E1013;--surface:#171A1F;--line:#2A2F37;--graphite:#F2F3F5;--steel:#A6ADB8;color-scheme:dark}
html.dk,html.dk body{background:var(--d-bg)}
html.dk nav.top{background:rgba(14,16,19,.9)!important;border-bottom-color:var(--d-line)!important}
html.dk nav.top .top-links a,html.dk nav.top .top-ico{color:var(--d-mut)}
html.dk nav.top .brand .mark,html.dk nav.top .brand{color:var(--d-ink)}
html.dk :is(.addr-box,.price-box,.notes-display,.file-row,.addr-card,.btn-ghost-lg,.mm-pick,.mx-chat,.mx-comp,.mx-back,.msg-bub,.msg-sys,.chip,.ap-card,.tbtn,.oc-chev,.oc-amt,.order-chat,.mx-day span,.dl-file,.wait-card,.gar-offer,.gcm,.modal-box,.empty-state,.order-card,.dev-form){background:var(--d-card)!important;color:var(--d-ink);border-color:var(--d-line)!important}
html.dk .gcm .tbtn{color:var(--d-ink)!important;border:1px solid var(--d-line)!important}
html.dk :is(.chat-box,.ap-pick,.mx-seg,.mx-attach,.pe-btn.mx-emo){background:var(--d-chip)!important;border-color:var(--d-line)!important;color:var(--d-ink)}
html.dk .msg-row.me .msg-bub,html.dk .msg-bub.me{background:#C8141F!important;color:#fff!important}
html.dk :is(input,select,textarea):not([type=checkbox]):not([type=radio]){background:var(--d-chip)!important;color:var(--d-ink)!important;border-color:var(--d-line)!important}
html.dk .mx-seg button.on{background:var(--d-card)!important;color:var(--d-ink)!important}
html.dk .content-title,html.dk h2,html.dk h3,html.dk h4{color:var(--d-ink)}
html.dk .mz-hello{background:var(--d-chip)!important;color:var(--d-ink)}
html.dk #chatHint[style]{background:#241B29!important;color:var(--d-ink)!important}
html.dk :is(.mx-files,.mx-st){background:var(--d-chip)!important;color:var(--d-ink)!important;border-color:var(--d-line)!important}
html.dk .oc-amt b,html.dk .order-total{color:var(--d-ink)!important}
/* phone: the header has no room for the theme button — it sits beside the title instead (layout check 2026-10-16) */
.dsh-theme{display:none;width:40px;height:40px;border-radius:10px;border:1px solid var(--d-line);background:var(--d-card);color:var(--d-ink);place-items:center;cursor:pointer}
@media (max-width:820px){nav.top .top-theme{display:none!important}.dsh-theme{display:grid}}

/* ── owner 2026-10-16 review: chat composer ── */
/* the paperclip is a <label>: the page's label margin pushed it up */
.mx-row .mx-attach{margin:0!important;align-self:flex-end}
.mx-row .pe-btn.mx-emo,.mx-row .mx-send{align-self:flex-end}
/* the conversations page under the dashboard tabs: the list and the chat fit the screen (composer visible) */
@media (min-width:821px){
  html.dash-mode.acct-msgs #app .mm-pane .mx-chat,html.dash-mode.acct-msgs #app .mm-pick{height:calc(100dvh - var(--acc-top,69px) - 130px)!important;min-height:440px}
}