:root { color-scheme: light; --bg: #f4f5f7; --surface: #ffffff; --surface-2: #f6f7f9; --surface-3: #eef0f3; --border: #e2e5ea; --border-strong: #cfd4dc; --text: #141821; --text-2: #4a5263; --muted: #858c9c; --brand: #408e91; --brand-dark: #1f2b2e; --accent: #2c7478; --accent-ink: #ffffff; --accent-soft: #e5f1f1; --good: #16a34a; --good-ink: #0f7a37; --warn: #f5a623; --warn-ink: #8a5600; --serious: #ec835a; --bad: #d64545; --bad-ink: #b42323; --bar: #408e91; --bar-track: #e8eaee; --shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .04); --shadow-lg: 0 10px 30px rgba(16, 24, 40, .12); --ring: color-mix(in srgb, var(--accent) 35%, transparent); --radius: 12px; } /* الداكن: تلقائي حسب ويندوز إلا إذا اختار «فاتح»، أو إجباري إذا اختار «داكن» */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1c212a; --surface-3: #232935; --border: #2a303b; --border-strong: #3a4250; --text: #e9ecf2; --text-2: #b4bccb; --muted: #858ea0; --accent: #6cc3c6; --accent-ink: #0b1a1b; --accent-soft: #15292b; --good: #34c46a; --good-ink: #5ad68a; --warn: #f5b041; --warn-ink: #f5b041; --bad: #f06a6a; --bad-ink: #ff8a8a; --bar: #52a9ac; --bar-track: #262c37; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .5); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #161a21; --surface-2: #1c212a; --surface-3: #232935; --border: #2a303b; --border-strong: #3a4250; --text: #e9ecf2; --text-2: #b4bccb; --muted: #858ea0; --accent: #6cc3c6; --accent-ink: #0b1a1b; --accent-soft: #15292b; --good: #34c46a; --good-ink: #5ad68a; --warn: #f5b041; --warn-ink: #f5b041; --bad: #f06a6a; --bad-ink: #ff8a8a; --bar: #52a9ac; --bar-track: #262c37; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 34px rgba(0, 0, 0, .5); } * { box-sizing: border-box; } html, body { margin: 0; } body { background: var(--bg); color: var(--text); font: 14px/1.6 "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3 { margin: 0; line-height: 1.3; font-weight: 650; } h1 { font-size: 20px; } h2 { font-size: 16px; } h3 { font-size: 14px; } .num, td.n, .kpi .v { font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .small { font-size: 12px; } .ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; } td.ltr, th.ltr { display: table-cell; text-align: start; } code, pre, .mono { font-family: Consolas, "Cascadia Mono", monospace; font-size: 12.5px; } /* ---------------- layout */ .shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; } .side { background: var(--surface); border-inline-start: 0; border-inline-end: 1px solid var(--border); padding: 16px 12px; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; } .brand { display: flex; align-items: center; gap: 10px; padding: 4px 8px 14px; font-weight: 700; font-size: 15px; } .brand .logo, .brand-sm .logo { /* رمز المكتب شفاف — بدون مربع خلفه */ width: 34px; height: 34px; flex: none; display: grid; place-items: center; background: none; } .brand .logo img, .brand-sm .logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .nav a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; color: var(--text-2); font-weight: 500; } .nav a:hover { background: var(--surface-2); text-decoration: none; color: var(--text); } .nav a.on { background: var(--accent-soft); color: var(--accent); } .nav .sec { font-size: 11px; color: var(--muted); padding: 14px 10px 4px; letter-spacing: .02em; } .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--muted); } .side .foot { margin-top: auto; padding: 10px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); } .side .foot form { display: inline; } .linkbtn { background: none; border: 0; color: var(--accent); cursor: pointer; font: inherit; padding: 0; } .main { padding: 22px 28px 60px; max-width: 1400px; width: 100%; min-width: 0; } .grid > *, .stack > * { min-width: 0; } .head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .head p { margin: 4px 0 0; color: var(--text-2); } .btn.menu-btn { display: none; } .topbar { display: none; } .backdrop { display: none; } @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 272px; z-index: 30; box-shadow: var(--shadow-lg); transform: translateX(110%); transition: transform .2s ease; } body.menu .side { transform: none; } body.menu .backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .35); } .main { padding: 10px 14px 60px; } .topbar { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 10; margin: -10px -14px 12px; padding: 8px 14px; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--border); } .brand-sm { display: flex; align-items: center; gap: 8px; font-weight: 700; } .brand-sm .logo { width: 26px; height: 26px; display: grid; place-items: center; font-size: 13px; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } /* ---------------- building blocks */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .card > .hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); flex-wrap: wrap; } .card > .bd { padding: 14px 16px; } .card > .bd.flush { padding: 0; } .grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } .env-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 12px; align-items: start; } .env-grid .k { font-size: 11px; color: var(--muted); direction: ltr; } .stack { display: flex; flex-direction: column; gap: 16px; } .row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .spacer { flex: 1; } .btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 6px 12px; border-radius: 8px; font: inherit; font-weight: 550; cursor: pointer; white-space: nowrap; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .btn.primary:hover { filter: brightness(1.08); } .btn.danger { color: var(--bad-ink); } .btn.sm { padding: 3px 9px; font-size: 12.5px; } .btn:disabled { opacity: .5; cursor: not-allowed; } input:not([type]), input[type=text], input[type=search], input[type=email], input[type=password], input[type=date], input[type=month], input[type=time], input[type=number], input[type=url], input[type=tel], select, textarea { font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; min-width: 0; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; } textarea.code { width: 100%; min-height: 60vh; direction: ltr; text-align: left; font-family: Consolas, monospace; font-size: 13px; line-height: 1.5; tab-size: 2; } label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); } label.chk { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; } .form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; align-items: end; } .flash { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; border: 1px solid var(--border); background: var(--surface); } .flash.ok { border-color: color-mix(in srgb, var(--good) 45%, transparent); } .flash.err { border-color: color-mix(in srgb, var(--bad) 55%, transparent); color: var(--bad-ink); } .flash.info { border-color: var(--border); } .chip { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px 1px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-2); color: var(--text-2); white-space: nowrap; } .chip i { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); font-style: normal; } .st-success i, .st-done i, .st-good i { background: var(--good); } .st-warning i, .st-warn i { background: var(--warn); } .st-failed i, .st-lost i, .st-critical i { background: var(--bad); } .st-running i, .st-queued i, .st-stopping i { background: var(--bar); animation: pulse 1.2s infinite; } .st-stopped i, .st-skipped i { background: var(--muted); } .st-waiting i { background: #f59e0b; } /* 29/10 خ: ينتظر النت */ .st-success, .st-done { color: var(--good-ink); } .st-failed, .st-lost { color: var(--bad-ink); } .st-warning { color: var(--warn-ink); } @keyframes pulse { 50% { opacity: .35; } } /* ---------------- tables */ .tbl-wrap { overflow-x: auto; } table.t { width: 100%; border-collapse: collapse; } table.t th, table.t td { padding: 8px 12px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; } table.t th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--surface-2); position: sticky; top: 0; white-space: nowrap; } table.t tr:last-child td { border-bottom: 0; } table.t tbody tr:hover td { background: var(--surface-2); } table.t td.n { text-align: end; white-space: nowrap; } table.t th.n { text-align: end; } /* 25/10: العنوان فوق الرقم بنفس الجهة */ table.t td.n input { text-align: end; direction: ltr; } table.t.compact td { white-space: nowrap; } table.t td { min-width: 70px; } table.t .clickable { cursor: pointer; } /* ---------------- KPI tiles */ .kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(165px, 45%), 1fr)); gap: 10px; } .kpi { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } .kpi .l { font-size: 12.5px; color: var(--text-2); display: flex; align-items: center; gap: 6px; } .kpi .v { font-size: 22px; font-weight: 700; margin-top: 2px; letter-spacing: -.01em; } .kpi .v small { font-size: 12px; font-weight: 500; color: var(--muted); margin-inline-start: 4px; } .kpi .s { font-size: 12px; color: var(--muted); } .kpi .flag { font-size: 11.5px; font-weight: 600; margin-inline-start: auto; } .kpi.good .flag { color: var(--good-ink); } .kpi.warning .flag { color: var(--warn-ink); } .kpi.critical .flag { color: var(--bad-ink); } .kpi.critical { border-color: color-mix(in srgb, var(--bad) 40%, var(--border)); } /* ---------------- progress bars */ .bar { display: flex; align-items: center; gap: 8px; min-width: 150px; } .bar .track { position: relative; flex: 1; height: 8px; background: var(--bar-track); border-radius: 4px; overflow: visible; } .bar .fill { position: absolute; inset-block: 0; inset-inline-start: 0; background: var(--bar); border-radius: 4px; } .bar .fill.low { background: var(--bad); } .bar .fill.mid { background: var(--warn); } .bar .mark { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--text); opacity: .55; border-radius: 1px; } .bar .lbl { font-size: 12.5px; font-variant-numeric: tabular-nums; min-width: 38px; text-align: end; } /* ---------------- agent cards */ .agent-card { display: flex; flex-direction: column; } .agent-card .top { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; } .avatar { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-weight: 700; flex: none; } .agent-card .meta { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; padding: 0 16px 14px; font-size: 12.5px; } .agent-card .meta b { display: block; font-size: 11.5px; color: var(--muted); font-weight: 500; } .agent-card .foot { display: flex; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--border); margin-top: auto; } .warnbox { margin: 0 16px 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn-ink); } .errbox { margin: 0 16px 12px; padding: 8px 10px; border-radius: 8px; font-size: 12.5px; background: color-mix(in srgb, var(--bad) 12%, transparent); color: var(--bad-ink); } /* ---------------- tabs */ .tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; } .tabs a { padding: 8px 14px; color: var(--text-2); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; font-weight: 550; } .tabs a:hover { text-decoration: none; color: var(--text); } .tabs a.on { color: var(--accent); border-color: var(--accent); } /* ---------------- actions */ details.action { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); } details.action + details.action { margin-top: 8px; } details.action summary { list-style: none; padding: 10px 14px; cursor: pointer; display: flex; align-items: center; gap: 10px; } details.action summary::-webkit-details-marker { display: none; } details.action summary::before { content: "‹"; color: var(--muted); font-size: 18px; line-height: 1; transition: transform .15s; } details.action[open] summary::before { transform: rotate(-90deg); } details.action .body { padding: 4px 14px 14px; border-top: 1px solid var(--border); } /* ---------------- alerts list */ .alerts { list-style: none; margin: 0; padding: 0; } .alerts li { display: flex; gap: 10px; padding: 8px 16px; border-bottom: 1px solid var(--border); font-size: 13px; } .alerts li:last-child { border-bottom: 0; } .sev { flex: none; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 5px; height: fit-content; margin-top: 2px; } .sev.high { background: color-mix(in srgb, var(--bad) 15%, transparent); color: var(--bad-ink); } .sev.medium { background: color-mix(in srgb, var(--warn) 20%, transparent); color: var(--warn-ink); } .sev.low { background: var(--surface-2); color: var(--muted); } /* ---------------- run graph + log */ .graph-wrap { overflow-x: auto; padding: 8px 4px; } .graph-wrap svg { display: block; margin-inline: auto; } .node rect { fill: var(--surface); stroke: var(--border); stroke-width: 1.5; } .node text { fill: var(--text); font: 600 12.5px "Segoe UI", Tahoma, sans-serif; } .node .sub { fill: var(--muted); font-weight: 500; font-size: 11px; } .node.done rect { stroke: var(--good); } .node.warn rect { stroke: var(--warn); } .node.failed rect { stroke: var(--bad); stroke-width: 2.5; } .node.running rect { stroke: var(--bar); stroke-width: 2.5; stroke-dasharray: 6 4; animation: dash 1s linear infinite; } .node.skipped rect, .node.pending rect { stroke-dasharray: 3 3; } .node.skipped text, .node.pending text { fill: var(--muted); } .node .ic { font-size: 13px; } @keyframes dash { to { stroke-dashoffset: -20; } } .edge { fill: none; stroke: var(--border); stroke-width: 2; } .edge.on { stroke: var(--muted); } pre.log { margin: 0; padding: 12px 14px; max-height: 60vh; overflow: auto; direction: ltr; text-align: left; background: #0f0f0e; color: #dcdcd4; unicode-bidi: plaintext; border-radius: 0 0 var(--radius) var(--radius); white-space: pre-wrap; word-break: break-word; } pre.log .e { color: #ff8d8d; } pre.log .w { color: #ffd166; } pre.log .o { color: #7ee08a; } iframe.report { width: 100%; height: 78vh; border: 1px solid var(--border); border-radius: var(--radius); background: #fff; } pre.text { white-space: pre-wrap; margin: 0; padding: 14px; max-height: 78vh; overflow: auto; } .empty { padding: 26px 16px; text-align: center; color: var(--muted); } .auth-box { max-width: 380px; margin: 12vh auto; } .auth-box .card { padding: 22px; } .auth-box h1 { margin-bottom: 4px; } .auth-box form { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; } .auth-box input { width: 100%; } hr.sep { border: 0; border-top: 1px solid var(--border); margin: 14px 0; } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; font-size: 13px; } .kv b { color: var(--muted); font-weight: 500; } .alerts li > div, .flash, .kpi .s, .agent-card .meta { overflow-wrap: anywhere; min-width: 0; } html { overflow-x: hidden; } /* ---------------- trends */ .trend { display: flex; align-items: flex-end; gap: 2px; height: 96px; padding-top: 4px; } .trend .b { flex: 1 1 0; min-width: 3px; min-height: 2px; background: var(--bar); border-radius: 4px 4px 0 0; } .trend .b.z { background: var(--bar-track); } .trend .b:hover { filter: brightness(1.15); } .chk.box { border: 1px solid var(--border); padding: 2px 8px; border-radius: 7px; } .chk.box:has(input:checked) { border-color: var(--accent); color: var(--accent); } /* ---------- إرسال فوري ---------- */ .send-box{border:1px dashed var(--border);border-radius:10px;padding:10px 12px 12px;margin:0} .send-box legend{padding:0 6px;font-weight:600} .send-box.on{border-style:solid;border-color:var(--accent);background:var(--accent-soft)} /* ---------- الصلاحيات ---------- */ .perm-grid{display:flex;flex-wrap:wrap;gap:4px 10px} .perm-grid .chk.box.def{opacity:.85} .perm-grid .chk.box.ov{outline:2px solid var(--warn);outline-offset:-2px} .diag td:first-child{white-space:nowrap} .st-ok{color:var(--good-ink)}.st-warn{color:var(--warn-ink)}.st-fail{color:var(--bad-ink)} /* ================= 30/09: المظهر وتحسينات الواجهة ================= */ body { transition: background-color .2s ease, color .2s ease; } ::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } select { max-width: 100%; } input::placeholder, textarea::placeholder { color: var(--muted); } h1 { font-size: 21px; letter-spacing: -.01em; } /* القائمة الجانبية */ .side { gap: 2px; } .nav a { padding: 8px 10px; transition: background-color .12s ease, color .12s ease; } .nav a > span:not(.dot):not(.chip) { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .nav a .ic { flex: none; opacity: .75; } .nav a.on .ic, .nav a:hover .ic { opacity: 1; } .nav a.on { font-weight: 600; box-shadow: inset -3px 0 0 var(--accent); } .side .foot { display: flex; flex-direction: column; gap: 10px; padding: 12px 6px 4px; } .side .foot .me { display: flex; align-items: center; gap: 10px; font-size: 13px; } .side .foot .me a { color: var(--text); font-weight: 600; } .avatar-sm { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent); font-weight: 700; } .icon-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid transparent; background: none; color: var(--text-2); cursor: pointer; padding: 0; } .icon-btn:hover { background: var(--surface-2); color: var(--text); border-color: var(--border); } /* مفتاح المظهر: فاتح / تلقائي / داكن */ .theme-switch { align-self: flex-start; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); } .theme-switch button { display: grid; place-items: center; width: 34px; height: 28px; border: 0; border-radius: 7px; background: none; color: var(--muted); cursor: pointer; transition: background-color .15s, color .15s; } .theme-switch button:hover { color: var(--text); } .theme-switch button[aria-checked="true"] { background: var(--surface); color: var(--accent); box-shadow: var(--shadow); } .theme-switch .ic { width: 16px; height: 16px; } /* بطاقات وأزرار */ .card > .hd { background: color-mix(in srgb, var(--surface-2) 55%, var(--surface)); border-radius: var(--radius) var(--radius) 0 0; } .diag td:first-child { white-space: normal !important; width: 48%; } .diag td { overflow-wrap: break-word; } .btn { transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease; } .btn:hover { border-color: var(--border-strong); } .btn.primary:hover { filter: brightness(1.06); } .kpi { box-shadow: var(--shadow); transition: border-color .15s ease; } .kpi:hover { border-color: var(--border-strong); } .agent-card { transition: box-shadow .15s ease, transform .15s ease; } .agent-card:hover { box-shadow: var(--shadow-lg); } table.t tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 45%, transparent); } table.t tbody tr:hover td { background: var(--accent-soft); } /* رسائل: زر إغلاق، والنجاح يختفي وحده */ .flash { position: relative; padding-inline-end: 38px; box-shadow: var(--shadow); } .flash.ok { background: color-mix(in srgb, var(--good) 8%, var(--surface)); } .flash.err { background: color-mix(in srgb, var(--bad) 7%, var(--surface)); } .flash .x { position: absolute; top: 6px; inset-inline-end: 6px; width: 26px; height: 26px; } .flash.fade { opacity: 0; transform: translateY(-4px); transition: opacity .3s, transform .3s; } /* الداكن: لمسات */ :root[data-theme="dark"] iframe.report { border-color: var(--border-strong); } :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2f3643; border-radius: 8px; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) ::-webkit-scrollbar { width: 10px; height: 10px; } :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: #2f3643; border-radius: 8px; } } @media print { .side, .topbar, .backdrop, .theme-switch { display: none !important; } .shell { display: block; } } /* ---- قائمة موظفي سدرة ---- */ .flash.warn { border-color: color-mix(in srgb, var(--warn, #d97706) 55%, transparent); background: color-mix(in srgb, var(--warn, #d97706) 7%, var(--surface)); } a.kpi { color: inherit; text-decoration: none; transition: border-color .15s; } a.kpi:hover { border-color: var(--accent, var(--border)); } details > summary.btn { list-style: none; display: inline-flex; } details > summary.btn::-webkit-details-marker { display: none; } details[open] > summary.btn { background: var(--surface-2, var(--surface)); } @media (max-width: 700px) { .staff-t .hide-sm { display: none; } .staff-t td, .staff-t th { padding-inline: 8px; } } .staff-t td.ltr { white-space: nowrap; } .staff-t td:first-child { min-width: 150px; } /* اسم الشركة: عربي + إنكليزي تحته */ .brand-t { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; } .brand-t small { font-size: 8.5px; font-weight: 600; letter-spacing: .02em; white-space: nowrap; color: var(--muted); direction: ltr; text-align: start; } /* ---- هوية مكتب سدرة الحياة العلمي ---- */ .auth-brand { display: flex; justify-content: center; padding: 6px 0 16px; margin-bottom: 12px; border-bottom: 2px solid var(--brand, #408e91); } /* الشعار شفاف بالنص فوق الكارت */ .auth-brand img { width: 100%; max-width: 280px; height: auto; display: block; } body:has(.auth-box) { background-image: url("brand/tree.png"); background-repeat: no-repeat; background-position: left -120px bottom -80px; background-size: min(560px, 70vw); } body:has(.auth-box)::before { content: ""; position: fixed; inset: 0; background: var(--bg); opacity: .9; z-index: -1; } .side::after { content: ""; position: absolute; inset: auto 0 0 0; height: 180px; pointer-events: none; background: url("brand/tree.png") no-repeat center bottom / 170px auto; opacity: .06; } /* 01/10: رسائل متعددة الأسطر + لون الخلل */ .flash { white-space: pre-line; } .bad-ink { color: var(--bad-ink); } /* تحية الرئيسية */ .hero .hello { font-size: 13px; color: var(--text-2); margin-bottom: 2px; } .hero .hello b { color: var(--text); } :root[data-theme="dark"] .hero h1 { font-size: 28px; background: linear-gradient(90deg, #fff 30%, #ffb07a); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero h1 { font-size: 28px; background: linear-gradient(90deg, #fff 30%, #ffb07a); -webkit-background-clip: text; background-clip: text; color: transparent; } } /* ================= 10/10: Glassy V2 — الداكن الزجاجي (الافتراضي) ================= يتولد من scratch/gen/glass.py: نفس القواعد للداكن الإجباري والتلقائي (ويندوز داكن). */ :root[data-theme="dark"] { color-scheme: dark; --bg: #08080d; --bg-image: radial-gradient(900px 520px at 88% -8%, rgba(255, 110, 40, .20), transparent 62%), radial-gradient(760px 560px at -6% 18%, rgba(64, 142, 145, .26), transparent 64%), radial-gradient(820px 620px at 55% 115%, rgba(120, 70, 210, .14), transparent 62%), linear-gradient(180deg, #0b0b12 0%, #08080d 100%); --surface: rgba(24, 24, 34, .58); --surface-2: rgba(255, 255, 255, .045); --surface-3: rgba(255, 255, 255, .08); --surface-solid: #14141c; --border: rgba(255, 255, 255, .085); --border-strong: rgba(255, 255, 255, .16); --text: #f4f5f8; --text-2: #b8bccb; --muted: #7d8193; --accent: #ff8a3d; --accent-ink: #ffffff; --accent-soft: rgba(255, 128, 50, .14); --link: #7fd3d6; --hot: linear-gradient(135deg, #ff9a4a 0%, #ff6a1f 55%, #f2501a 100%); --good: #3ddc84; --good-ink: #5fe39a; --warn: #ffb547; --warn-ink: #ffc46b; --bad: #ff5d5d; --bad-ink: #ff8686; --bar: #4fb3b6; --bar-track: rgba(255, 255, 255, .08); --bar-fill: linear-gradient(90deg, #3f9a9d, #ff8a3d); --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 50px rgba(0, 0, 0, .55); --ring: rgba(255, 138, 61, .35); --radius: 18px; --glass: blur(18px) saturate(150%); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 42%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #08080d; --bg-image: radial-gradient(900px 520px at 88% -8%, rgba(255, 110, 40, .20), transparent 62%), radial-gradient(760px 560px at -6% 18%, rgba(64, 142, 145, .26), transparent 64%), radial-gradient(820px 620px at 55% 115%, rgba(120, 70, 210, .14), transparent 62%), linear-gradient(180deg, #0b0b12 0%, #08080d 100%); --surface: rgba(24, 24, 34, .58); --surface-2: rgba(255, 255, 255, .045); --surface-3: rgba(255, 255, 255, .08); --surface-solid: #14141c; --border: rgba(255, 255, 255, .085); --border-strong: rgba(255, 255, 255, .16); --text: #f4f5f8; --text-2: #b8bccb; --muted: #7d8193; --accent: #ff8a3d; --accent-ink: #ffffff; --accent-soft: rgba(255, 128, 50, .14); --link: #7fd3d6; --hot: linear-gradient(135deg, #ff9a4a 0%, #ff6a1f 55%, #f2501a 100%); --good: #3ddc84; --good-ink: #5fe39a; --warn: #ffb547; --warn-ink: #ffc46b; --bad: #ff5d5d; --bad-ink: #ff8686; --bar: #4fb3b6; --bar-track: rgba(255, 255, 255, .08); --bar-fill: linear-gradient(90deg, #3f9a9d, #ff8a3d); --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .35); --shadow-lg: 0 1px 0 rgba(255, 255, 255, .06) inset, 0 22px 50px rgba(0, 0, 0, .55); --ring: rgba(255, 138, 61, .35); --radius: 18px; --glass: blur(18px) saturate(150%); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 42%); } } :root[data-theme="dark"] body { background-color: var(--bg); background-image: var(--bg-image); background-attachment: fixed; } :root[data-theme="dark"] a { color: var(--link); } :root[data-theme="dark"] h1 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; } /* زجاج: البطاقات والقائمة */ :root[data-theme="dark"] .card, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] details.action, :root[data-theme="dark"] .flash, :root[data-theme="dark"] .theme-switch, :root[data-theme="dark"] .send-box.on { backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); background-image: var(--sheen); } :root[data-theme="dark"] .card { border-radius: 20px; } :root[data-theme="dark"] .card > .hd { background: transparent; border-bottom-color: rgba(255, 255, 255, .06); border-radius: 20px 20px 0 0; padding: 14px 18px; } :root[data-theme="dark"] .card > .bd { padding: 16px 18px; } :root[data-theme="dark"] .card > .bd.flush { padding: 0; } :root[data-theme="dark"] .card .card { background-color: rgba(255, 255, 255, .03); border-radius: 16px; } :root[data-theme="dark"] .shell { grid-template-columns: 244px 1fr; } :root[data-theme="dark"] .side { margin: 14px 14px 14px 0; height: calc(100vh - 28px); top: 14px; border-radius: 24px; border: 1px solid var(--border); background: rgba(16, 16, 24, .55); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-lg); } :root[data-theme="dark"] .nav a { border-radius: 12px; color: var(--text-2); } :root[data-theme="dark"] .nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); } :root[data-theme="dark"] .nav a.on { color: #fff; font-weight: 650; background: linear-gradient(270deg, rgba(255, 128, 50, .30), rgba(255, 128, 50, .07)); box-shadow: inset -3px 0 0 #ff8a3d, 0 0 0 1px rgba(255, 138, 61, .22), 0 8px 22px rgba(255, 106, 31, .16); } :root[data-theme="dark"] .nav a.on .ic { color: #ffb07a; } :root[data-theme="dark"] .nav .sec { color: #6d7184; text-transform: none; } :root[data-theme="dark"] .side .foot { border-top-color: rgba(255, 255, 255, .06); } :root[data-theme="dark"] .avatar-sm { background: var(--hot); color: #fff; box-shadow: 0 6px 16px rgba(255, 106, 31, .35); } :root[data-theme="dark"] .main { padding: 24px 26px 70px; } /* أزرار */ :root[data-theme="dark"] .btn { border-radius: 12px; background: rgba(255, 255, 255, .05); border-color: var(--border); color: var(--text); } :root[data-theme="dark"] .btn:hover { background: rgba(255, 255, 255, .09); border-color: var(--border-strong); } :root[data-theme="dark"] .btn.primary { background: var(--hot); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(255, 106, 31, .32); } :root[data-theme="dark"] .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 26px rgba(255, 106, 31, .42); } :root[data-theme="dark"] .btn.danger { color: var(--bad-ink); } :root[data-theme="dark"] .icon-btn:hover { background: rgba(255, 255, 255, .07); } /* حقول */ :root[data-theme="dark"] input:not([type]), :root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=search], :root[data-theme="dark"] input[type=email], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] input[type=date], :root[data-theme="dark"] input[type=month], :root[data-theme="dark"] input[type=time], :root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=url], :root[data-theme="dark"] input[type=tel], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea { background: rgba(255, 255, 255, .045); border-color: var(--border); border-radius: 11px; } :root[data-theme="dark"] select option { background: var(--surface-solid); color: var(--text); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: #ff8a3d; box-shadow: 0 0 0 3px var(--ring); } /* مؤشرات */ :root[data-theme="dark"] .kpis { gap: 12px; } :root[data-theme="dark"] .kpi { border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); } :root[data-theme="dark"] .kpi .l { color: var(--muted); } :root[data-theme="dark"] .kpi .v { font-size: clamp(18px, 1.55vw, 24px); font-weight: 750; color: #fff; overflow-wrap: anywhere; } :root[data-theme="dark"] .kpis { grid-template-columns: repeat(auto-fill, minmax(min(180px, 46%), 1fr)); } :root[data-theme="dark"] .kpi:hover { border-color: var(--border-strong); } :root[data-theme="dark"] .kpi.critical { border-color: rgba(255, 93, 93, .45); box-shadow: 0 0 0 1px rgba(255, 93, 93, .12) inset, 0 10px 30px rgba(255, 60, 60, .12); } :root[data-theme="dark"] .kpi.good .v { color: #fff; } /* شرائط ورسوم */ :root[data-theme="dark"] .bar .track { height: 7px; border-radius: 99px; } :root[data-theme="dark"] .bar .fill { background: var(--bar-fill); border-radius: 99px; box-shadow: 0 0 12px rgba(255, 138, 61, .25); } :root[data-theme="dark"] .bar .fill.low { background: linear-gradient(90deg, #b8323a, #ff5d5d); box-shadow: none; } :root[data-theme="dark"] .bar .fill.mid { background: linear-gradient(90deg, #c27a14, #ffb547); box-shadow: none; } :root[data-theme="dark"] .bar .mark { background: #fff; } :root[data-theme="dark"] .trend .b { background: linear-gradient(180deg, #ff9a4a, #3f9a9d); border-radius: 6px 6px 2px 2px; } :root[data-theme="dark"] .trend .b.z { background: rgba(255, 255, 255, .07); } /* شارات */ :root[data-theme="dark"] .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .10); border-radius: 99px; } :root[data-theme="dark"] .sev.low { background: rgba(255, 255, 255, .06); } /* جداول */ :root[data-theme="dark"] table.t th { background: rgba(14, 14, 21, .88); color: var(--muted); border-bottom-color: rgba(255, 255, 255, .07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root[data-theme="dark"] table.t td { border-bottom-color: rgba(255, 255, 255, .055); } :root[data-theme="dark"] table.t tbody tr:nth-child(even) td { background: transparent; } :root[data-theme="dark"] table.t tbody tr:hover td { background: rgba(255, 255, 255, .04); } /* رسائل وتبويبات */ :root[data-theme="dark"] .flash { border-radius: 14px; border-inline-start-width: 3px; } :root[data-theme="dark"] .flash.ok { background-color: rgba(61, 220, 132, .08); border-inline-start-color: var(--good); } :root[data-theme="dark"] .flash.err { background-color: rgba(255, 93, 93, .09); border-inline-start-color: var(--bad); } :root[data-theme="dark"] .flash.warn { background-color: rgba(255, 181, 71, .09); border-inline-start-color: var(--warn); } :root[data-theme="dark"] .tabs { border-bottom-color: rgba(255, 255, 255, .07); gap: 4px; } :root[data-theme="dark"] .tabs a { border-radius: 10px 10px 0 0; } :root[data-theme="dark"] .tabs a.on { color: #ffb07a; border-color: #ff8a3d; } :root[data-theme="dark"] .warnbox { background: rgba(255, 181, 71, .10); border: 1px solid rgba(255, 181, 71, .22); border-radius: 12px; } :root[data-theme="dark"] .errbox { background: rgba(255, 93, 93, .09); border: 1px solid rgba(255, 93, 93, .22); border-radius: 12px; } /* بطاقات الوكلاء */ :root[data-theme="dark"] .agent-card { border-radius: 22px; } :root[data-theme="dark"] .agent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } :root[data-theme="dark"] .agent-card .foot { border-top-color: rgba(255, 255, 255, .06); } :root[data-theme="dark"] .avatar { border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px rgba(0, 0, 0, .45); } /* مفتاح المظهر */ :root[data-theme="dark"] .theme-switch { background: rgba(255, 255, 255, .04); border-radius: 12px; } :root[data-theme="dark"] .theme-switch button[aria-checked="true"] { background: var(--hot); color: #fff; box-shadow: 0 4px 12px rgba(255, 106, 31, .35); } /* مخطط التشغيل */ :root[data-theme="dark"] .node rect { fill: rgba(22, 22, 32, .85); stroke: rgba(255, 255, 255, .14); } :root[data-theme="dark"] .edge { stroke: rgba(255, 255, 255, .12); } :root[data-theme="dark"] pre.log { background: rgba(5, 5, 9, .85); } :root[data-theme="dark"] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; } :root[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; } /* الدخول */ :root[data-theme="dark"] body:has(.auth-box)::before { background: radial-gradient(800px 500px at 70% 10%, rgba(255, 110, 40, .16), transparent 60%), var(--bg); opacity: .93; } :root[data-theme="dark"] .auth-box .card { border-radius: 24px; } /* الموبايل: القائمة درج كامل */ @media (max-width: 860px) { :root[data-theme="dark"] .shell { grid-template-columns: 1fr; } :root[data-theme="dark"] .side { margin: 0; height: 100vh; top: 0; border-radius: 0 0 0 0; background: rgba(12, 12, 18, .92); } :root[data-theme="dark"] .main { padding: 10px 14px 60px; } :root[data-theme="dark"] .topbar { background: rgba(10, 10, 15, .72); border-bottom-color: rgba(255, 255, 255, .06); } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-color: var(--bg); background-image: var(--bg-image); background-attachment: fixed; } :root:not([data-theme="light"]) a { color: var(--link); } :root:not([data-theme="light"]) h1 { font-size: 24px; font-weight: 700; letter-spacing: -.015em; } /* زجاج: البطاقات والقائمة */ :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) details.action, :root:not([data-theme="light"]) .flash, :root:not([data-theme="light"]) .theme-switch, :root:not([data-theme="light"]) .send-box.on { backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); background-image: var(--sheen); } :root:not([data-theme="light"]) .card { border-radius: 20px; } :root:not([data-theme="light"]) .card > .hd { background: transparent; border-bottom-color: rgba(255, 255, 255, .06); border-radius: 20px 20px 0 0; padding: 14px 18px; } :root:not([data-theme="light"]) .card > .bd { padding: 16px 18px; } :root:not([data-theme="light"]) .card > .bd.flush { padding: 0; } :root:not([data-theme="light"]) .card .card { background-color: rgba(255, 255, 255, .03); border-radius: 16px; } :root:not([data-theme="light"]) .shell { grid-template-columns: 244px 1fr; } :root:not([data-theme="light"]) .side { margin: 14px 14px 14px 0; height: calc(100vh - 28px); top: 14px; border-radius: 24px; border: 1px solid var(--border); background: rgba(16, 16, 24, .55); backdrop-filter: var(--glass); -webkit-backdrop-filter: var(--glass); box-shadow: var(--shadow-lg); } :root:not([data-theme="light"]) .nav a { border-radius: 12px; color: var(--text-2); } :root:not([data-theme="light"]) .nav a:hover { background: rgba(255, 255, 255, .05); color: var(--text); } :root:not([data-theme="light"]) .nav a.on { color: #fff; font-weight: 650; background: linear-gradient(270deg, rgba(255, 128, 50, .30), rgba(255, 128, 50, .07)); box-shadow: inset -3px 0 0 #ff8a3d, 0 0 0 1px rgba(255, 138, 61, .22), 0 8px 22px rgba(255, 106, 31, .16); } :root:not([data-theme="light"]) .nav a.on .ic { color: #ffb07a; } :root:not([data-theme="light"]) .nav .sec { color: #6d7184; text-transform: none; } :root:not([data-theme="light"]) .side .foot { border-top-color: rgba(255, 255, 255, .06); } :root:not([data-theme="light"]) .avatar-sm { background: var(--hot); color: #fff; box-shadow: 0 6px 16px rgba(255, 106, 31, .35); } :root:not([data-theme="light"]) .main { padding: 24px 26px 70px; } /* أزرار */ :root:not([data-theme="light"]) .btn { border-radius: 12px; background: rgba(255, 255, 255, .05); border-color: var(--border); color: var(--text); } :root:not([data-theme="light"]) .btn:hover { background: rgba(255, 255, 255, .09); border-color: var(--border-strong); } :root:not([data-theme="light"]) .btn.primary { background: var(--hot); border-color: transparent; color: #fff; box-shadow: 0 8px 22px rgba(255, 106, 31, .32); } :root:not([data-theme="light"]) .btn.primary:hover { filter: brightness(1.08); box-shadow: 0 10px 26px rgba(255, 106, 31, .42); } :root:not([data-theme="light"]) .btn.danger { color: var(--bad-ink); } :root:not([data-theme="light"]) .icon-btn:hover { background: rgba(255, 255, 255, .07); } /* حقول */ :root:not([data-theme="light"]) input:not([type]), :root:not([data-theme="light"]) input[type=text], :root:not([data-theme="light"]) input[type=search], :root:not([data-theme="light"]) input[type=email], :root:not([data-theme="light"]) input[type=password], :root:not([data-theme="light"]) input[type=date], :root:not([data-theme="light"]) input[type=month], :root:not([data-theme="light"]) input[type=time], :root:not([data-theme="light"]) input[type=number], :root:not([data-theme="light"]) input[type=url], :root:not([data-theme="light"]) input[type=tel], :root:not([data-theme="light"]) select, :root:not([data-theme="light"]) textarea { background: rgba(255, 255, 255, .045); border-color: var(--border); border-radius: 11px; } :root:not([data-theme="light"]) select option { background: var(--surface-solid); color: var(--text); } :root:not([data-theme="light"]) input:focus, :root:not([data-theme="light"]) select:focus, :root:not([data-theme="light"]) textarea:focus { border-color: #ff8a3d; box-shadow: 0 0 0 3px var(--ring); } /* مؤشرات */ :root:not([data-theme="light"]) .kpis { gap: 12px; } :root:not([data-theme="light"]) .kpi { border-radius: 18px; padding: 14px 16px; box-shadow: var(--shadow); } :root:not([data-theme="light"]) .kpi .l { color: var(--muted); } :root:not([data-theme="light"]) .kpi .v { font-size: clamp(18px, 1.55vw, 24px); font-weight: 750; color: #fff; overflow-wrap: anywhere; } :root:not([data-theme="light"]) .kpis { grid-template-columns: repeat(auto-fill, minmax(min(180px, 46%), 1fr)); } :root:not([data-theme="light"]) .kpi:hover { border-color: var(--border-strong); } :root:not([data-theme="light"]) .kpi.critical { border-color: rgba(255, 93, 93, .45); box-shadow: 0 0 0 1px rgba(255, 93, 93, .12) inset, 0 10px 30px rgba(255, 60, 60, .12); } :root:not([data-theme="light"]) .kpi.good .v { color: #fff; } /* شرائط ورسوم */ :root:not([data-theme="light"]) .bar .track { height: 7px; border-radius: 99px; } :root:not([data-theme="light"]) .bar .fill { background: var(--bar-fill); border-radius: 99px; box-shadow: 0 0 12px rgba(255, 138, 61, .25); } :root:not([data-theme="light"]) .bar .fill.low { background: linear-gradient(90deg, #b8323a, #ff5d5d); box-shadow: none; } :root:not([data-theme="light"]) .bar .fill.mid { background: linear-gradient(90deg, #c27a14, #ffb547); box-shadow: none; } :root:not([data-theme="light"]) .bar .mark { background: #fff; } :root:not([data-theme="light"]) .trend .b { background: linear-gradient(180deg, #ff9a4a, #3f9a9d); border-radius: 6px 6px 2px 2px; } :root:not([data-theme="light"]) .trend .b.z { background: rgba(255, 255, 255, .07); } /* شارات */ :root:not([data-theme="light"]) .chip { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .10); border-radius: 99px; } :root:not([data-theme="light"]) .sev.low { background: rgba(255, 255, 255, .06); } /* جداول */ :root:not([data-theme="light"]) table.t th { background: rgba(14, 14, 21, .88); color: var(--muted); border-bottom-color: rgba(255, 255, 255, .07); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } :root:not([data-theme="light"]) table.t td { border-bottom-color: rgba(255, 255, 255, .055); } :root:not([data-theme="light"]) table.t tbody tr:nth-child(even) td { background: transparent; } :root:not([data-theme="light"]) table.t tbody tr:hover td { background: rgba(255, 255, 255, .04); } /* رسائل وتبويبات */ :root:not([data-theme="light"]) .flash { border-radius: 14px; border-inline-start-width: 3px; } :root:not([data-theme="light"]) .flash.ok { background-color: rgba(61, 220, 132, .08); border-inline-start-color: var(--good); } :root:not([data-theme="light"]) .flash.err { background-color: rgba(255, 93, 93, .09); border-inline-start-color: var(--bad); } :root:not([data-theme="light"]) .flash.warn { background-color: rgba(255, 181, 71, .09); border-inline-start-color: var(--warn); } :root:not([data-theme="light"]) .tabs { border-bottom-color: rgba(255, 255, 255, .07); gap: 4px; } :root:not([data-theme="light"]) .tabs a { border-radius: 10px 10px 0 0; } :root:not([data-theme="light"]) .tabs a.on { color: #ffb07a; border-color: #ff8a3d; } :root:not([data-theme="light"]) .warnbox { background: rgba(255, 181, 71, .10); border: 1px solid rgba(255, 181, 71, .22); border-radius: 12px; } :root:not([data-theme="light"]) .errbox { background: rgba(255, 93, 93, .09); border: 1px solid rgba(255, 93, 93, .22); border-radius: 12px; } /* بطاقات الوكلاء */ :root:not([data-theme="light"]) .agent-card { border-radius: 22px; } :root:not([data-theme="light"]) .agent-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); } :root:not([data-theme="light"]) .agent-card .foot { border-top-color: rgba(255, 255, 255, .06); } :root:not([data-theme="light"]) .avatar { border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, .25) inset, 0 8px 20px rgba(0, 0, 0, .45); } /* مفتاح المظهر */ :root:not([data-theme="light"]) .theme-switch { background: rgba(255, 255, 255, .04); border-radius: 12px; } :root:not([data-theme="light"]) .theme-switch button[aria-checked="true"] { background: var(--hot); color: #fff; box-shadow: 0 4px 12px rgba(255, 106, 31, .35); } /* مخطط التشغيل */ :root:not([data-theme="light"]) .node rect { fill: rgba(22, 22, 32, .85); stroke: rgba(255, 255, 255, .14); } :root:not([data-theme="light"]) .edge { stroke: rgba(255, 255, 255, .12); } :root:not([data-theme="light"]) pre.log { background: rgba(5, 5, 9, .85); } :root:not([data-theme="light"]) ::-webkit-scrollbar { width: 10px; height: 10px; } :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); border-radius: 8px; } :root:not([data-theme="light"]) ::-webkit-scrollbar-track { background: transparent; } /* الدخول */ :root:not([data-theme="light"]) body:has(.auth-box)::before { background: radial-gradient(800px 500px at 70% 10%, rgba(255, 110, 40, .16), transparent 60%), var(--bg); opacity: .93; } :root:not([data-theme="light"]) .auth-box .card { border-radius: 24px; } /* الموبايل: القائمة درج كامل */ } @media (max-width: 860px) and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .shell { grid-template-columns: 1fr; } :root:not([data-theme="light"]) .side { margin: 0; height: 100vh; top: 0; border-radius: 0 0 0 0; background: rgba(12, 12, 18, .92); } :root:not([data-theme="light"]) .main { padding: 10px 14px 60px; } :root:not([data-theme="light"]) .topbar { background: rgba(10, 10, 15, .72); border-bottom-color: rgba(255, 255, 255, .06); } } /* 12/10: صفحة بكامل الشاشة (سدرة الاحتياطية داخل اللوحة) — قائمة اللوحة تنسحب من الجانب بزر ☰ (:root body.fullpage حتى تغلب قواعد الثيم الداكن والموبايل) */ :root body.fullpage .shell { grid-template-columns: 1fr; } :root body.fullpage .side { position: fixed; inset-block: 0; inset-inline-start: 0; width: 272px; z-index: 30; margin: 0; height: 100vh; top: 0; border-radius: 0; box-shadow: var(--shadow-lg); background: color-mix(in srgb, var(--bg) 94%, transparent); transform: translateX(110%); transition: transform .2s ease; } :root body.fullpage.menu .side { transform: none; } :root body.fullpage.menu .backdrop { display: block; position: fixed; inset: 0; z-index: 25; background: rgba(0, 0, 0, .35); } :root body.fullpage .main { padding: 0; max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; } :root body.fullpage .main > .topbar { display: none; } :root body.fullpage .main > .flash { margin: 8px 12px 0; } .sx-bar { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; padding: 7px 12px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 90%, transparent); backdrop-filter: blur(8px); } .sx-bar .sp { flex: 1; } .sx-bar .brand-sm { display: flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; } .sx-bar .brand-sm .logo { width: 26px; height: 26px; } .sx-frame { flex: 1; min-height: 0; width: 100%; border: 0; display: block; background: #fff; } .sx-empty { flex: 1; display: grid; place-items: center; padding: 24px 14px; overflow: auto; } .sx-empty .card { max-width: 580px; padding: 22px 24px; line-height: 1.8; } @media (max-width: 700px) { .sx-bar .sx-hide-sm { display: none; } .sx-bar { padding: 6px 10px; } } @media print { body.fullpage .sx-bar { display: none; } } /* ===================================================== جارتات ثلاثية الأبعاد متحركة (19/10) أعمدة بارزة (وجه + سطح فوق + جانب) بإسقاط مائل — الأطوال تبقى تنقارن، والعمق ثابت لكل عمود. .c3 : عمود (أفقي .c3h أو عمودي .c3v) — اللون من --c3، والعمق من --d، والتأخير من --i تحترم «تقليل الحركة» بإعدادات الجهاز. */ .c3 { --c3: var(--bar); --d: 6px; position: relative; background: var(--c3); } .c3::before, .c3::after { content: ""; position: absolute; pointer-events: none; } .c3::before { /* السطح العلوي */ left: calc(-1 * var(--d)); right: 0; top: calc(-1 * var(--d)); height: var(--d); background: color-mix(in srgb, var(--c3) 62%, #fff); clip-path: polygon(var(--d) 100%, 100% 100%, calc(100% - var(--d)) 0, 0 0); } .c3::after { /* الجانب (نهاية العمود الأفقي باليسار، أو جانب العمود العمودي) */ left: calc(-1 * var(--d)); width: var(--d); top: calc(-1 * var(--d)); bottom: 0; background: color-mix(in srgb, var(--c3) 70%, #000); clip-path: polygon(0 0, 100% var(--d), 100% 100%, 0 calc(100% - var(--d))); } .c3h { transform-origin: right center; animation: c3grow-x .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } .c3v { transform-origin: center bottom; animation: c3grow-y .8s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 18ms); } @keyframes c3grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes c3grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } } .c3:hover { filter: brightness(1.12); } /* الترند (صفحة الوكيل): أعمدة 3D صغيرة */ .trend.t3 { gap: 5px; padding-top: 8px; padding-inline-end: 4px; } .trend.t3 .b { --d: 3px; border-radius: 0; } :root[data-theme="dark"] .trend.t3 .b, :root:not([data-theme="light"]) .trend.t3 .b { --c3: #4fa4a7; background: linear-gradient(180deg, #ff9a4a, #3f9a9d); border-radius: 0; } .trend.t3 .b.z { --c3: var(--bar-track); background: var(--bar-track); } /* شريط التحقيق بالجداول: سطح بارز + حركة */ .bar .fill { --d: 3px; transform-origin: right center; animation: c3grow-x .8s cubic-bezier(.2, .8, .2, 1) both; } .bar .fill::before { content: ""; position: absolute; left: calc(-1 * var(--d)); right: 0; top: calc(-1 * var(--d)); height: var(--d); background: rgba(255, 255, 255, .45); clip-path: polygon(var(--d) 100%, 100% 100%, calc(100% - var(--d)) 0, 0 0); pointer-events: none; } /* جارت الترتيب الأفقي (أعلى العيادات) */ .rank3 { display: grid; grid-template-columns: minmax(120px, 30%) 1fr auto; gap: 12px 10px; align-items: center; padding: 10px 4px 4px; } .rank3 .nm { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rank3 .nm small { color: var(--muted); } .rank3 .tr { position: relative; height: 18px; margin-inline-end: 8px; } .rank3 .tr .c3 { height: 100%; min-width: 2px; } .rank3 .vl { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; } .rank3 .vl b { color: var(--text); } @media (max-width: 640px) { .rank3 { grid-template-columns: 1fr auto; } .rank3 .nm { grid-column: 1 / -1; margin-bottom: -8px; } } /* شريط التقدم (السبورت) */ .prog3 { position: relative; height: 12px; background: var(--bar-track); margin-top: 8px; } .prog3 .c3 { --d: 4px; height: 100%; } .prog3 .c3.done { --c3: var(--good); } /* التلميح العائم للجارتات */ .c3tip { position: fixed; z-index: 60; pointer-events: none; background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); border-radius: 8px; padding: 6px 10px; font-size: 12px; line-height: 1.6; max-width: 320px; opacity: 0; transition: opacity .12s; } .c3tip.on { opacity: 1; } @media (prefers-reduced-motion: reduce) { .c3h, .c3v, .bar .fill { animation: none; } } /* ================= 20/10: Glass V3 — الداكن الزجاجي البنفسجي + القائمة الأيقونية ================= يتولد من scratch/gen/glass3.py. الخط: IBM Plex Sans Arabic (محلي بـ static/fonts — يشتغل بدون إنترنت). */ @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-ar-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/plex-ar-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-ar-arabic-500.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/plex-ar-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-ar-arabic-600.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/plex-ar-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plex-ar-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/plex-ar-latin-700.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --rail-bg: rgba(255, 255, 255, .72); --fly-bg: rgba(255, 255, 255, .97); --on-bg: var(--accent-soft); --on-border: color-mix(in srgb, var(--accent) 45%, transparent); --on-ink: var(--accent); --pill-on-bg: var(--accent-soft); --pill-on-bd: var(--accent); --glass-card: var(--surface); --blob-op: .16; --hero-grad: linear-gradient(135deg, #5B5FEF 0%, #3A3DB0 100%); --vio: #6366F1; --vio-2: #7C80FF; --info: #0284c7; --chip-up-bg: rgba(22, 163, 74, .12); --chip-up-ink: #0f7a37; --chip-dn-bg: rgba(214, 69, 69, .12); --chip-dn-ink: #b42323; --warn-bg: rgba(245, 166, 35, .14); --track: var(--bar-track); --lift-bd: rgba(99, 102, 241, .45); } body { font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", system-ui, sans-serif; } input, select, textarea, button { font-family: inherit; } /* الخلفية: بقعتين ضبابيتين تتحرك ببطء */ .bg-blobs { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .blob { position: absolute; width: min(64vw, 780px); aspect-ratio: 1; border-radius: 50%; filter: blur(120px); opacity: var(--blob-op); will-change: transform; animation: v3drift 14s ease-in-out infinite alternate; } .blob.b1 { background: #3B3FB8; top: -24%; inset-inline-end: -10%; } .blob.b2 { background: #1F6F5C; bottom: -30%; inset-inline-start: 2%; animation-duration: 18s; animation-delay: -7s; } @keyframes v3drift { 0% { transform: translate(0, 0) scale(1); } 50% { transform: translate(6%, 5%) scale(1.08); } 100% { transform: translate(-5%, 8%) scale(.95); } } @keyframes v3rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } } @keyframes v3grow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes v3growx { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes v3draw { to { stroke-dashoffset: 0; } } @keyframes v3fade { to { opacity: 1; } } @keyframes v3spin { from { transform: rotate(-80deg); opacity: 0; } to { transform: none; opacity: 1; } } /* الهيكل: قائمة أيقونات زجاجية + المحتوى */ :root .shell.v3 { display: grid; grid-template-columns: 98px minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1; } .rail { position: sticky; top: 14px; z-index: 40; height: calc(100vh - 28px); width: 72px; margin-block: 14px; margin-inline: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px 0 12px; border-radius: 24px; isolation: isolate; } .rail::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--rail-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); } .rail-logo { width: 46px; height: 46px; display: grid; place-items: center; flex: none; margin-bottom: 2px; } .rail-logo img { width: 40px; height: 40px; object-fit: contain; display: block; } .rail-nav { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-height: 0; } .rail-item { position: relative; } .rail-btn { position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; padding: 0; color: var(--text-2); background: none; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease; } .rail-btn .ic { width: 21px; height: 21px; } .rail-btn:hover, .rail-item.open > .rail-btn { background: var(--surface-3); color: var(--text); text-decoration: none; } .rail-btn.on { background: var(--on-bg); border-color: var(--on-border); color: var(--on-ink); box-shadow: 0 8px 22px rgba(99, 102, 241, .20); } .rail-btn:focus-visible, .tbtn:focus-visible, .pill:focus-visible, .flyout a:focus-visible { outline: 2px solid var(--vio-2); outline-offset: 2px; } .bdg { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: #EF4444; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; } .rail-btn .bdg { position: absolute; top: -5px; inset-inline-end: -5px; box-shadow: 0 0 0 2px var(--bg); } .flyout { position: absolute; top: -8px; inset-inline-start: calc(100% + 16px); z-index: 60; min-width: 236px; max-width: 300px; padding: 10px; border-radius: 18px; background: var(--fly-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); visibility: hidden; opacity: 0; transform: translateX(8px); transition: opacity .15s ease, transform .15s ease, visibility 0s linear .15s; } .flyout::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: -18px; width: 18px; } /* جسر للماوس */ .rail-item.open > .flyout { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease, transform .15s ease; } @media (hover: hover) and (min-width: 861px) { .rail-item:hover > .flyout { visibility: visible; opacity: 1; transform: none; transition: opacity .15s ease .06s, transform .15s ease .06s; } } .flyout h4 { margin: 2px 8px 8px; font-size: 12px; font-weight: 600; color: var(--muted); } .flyout a, .flyout .frow { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 10px; border-radius: 11px; color: var(--text-2); font-weight: 500; font-size: 13.5px; background: none; border: 0; cursor: pointer; text-align: start; font-family: inherit; } .flyout a:hover, .flyout .frow:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .flyout a.on { background: var(--on-bg); color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--on-border); font-weight: 600; } .flyout a .bdg { margin-inline-start: auto; } .flyout .ic { width: 17px; height: 17px; flex: none; } .rail-item.single > .flyout { min-width: 0; padding: 7px 12px; white-space: nowrap; top: 7px; border-radius: 12px; font-size: 13px; font-weight: 600; } .rail-foot { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: none; } .rail-me { width: 42px; height: 42px; border-radius: 14px; background: var(--hero-grad); color: #fff; font-weight: 700; font-size: 16px; display: grid; place-items: center; border: 0; cursor: pointer; box-shadow: 0 6px 16px rgba(99, 102, 241, .35); font-family: inherit; } .flyout.me-fly { top: auto; bottom: -6px; min-width: 250px; } .me-fly .who { padding: 4px 10px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .me-fly .who b { display: block; font-size: 14px; color: var(--text); } .me-fly .who span { font-size: 12px; color: var(--muted); } .me-fly .theme-switch { margin: 6px 8px 8px; } .me-fly form { margin: 0; } /* الشريط العلوي: بحث + تاريخ اليوم + الإشعارات */ .topbar3 { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; position: relative; z-index: 30; } .tsearch { position: relative; flex: 1; max-width: 480px; margin: 0; } .tsearch input { width: 100%; height: 46px; padding-block: 0; padding-inline: 44px 14px; border-radius: 15px; color: var(--text); font-size: 14px; background: var(--glass-card); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .tsearch input::placeholder { color: var(--muted); } .tsearch .ic { position: absolute; inset-inline-start: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--muted); pointer-events: none; } .tdate { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 16px; border-radius: 15px; background: var(--glass-card); border: 1px solid var(--border); color: var(--text-2); font-size: 13px; white-space: nowrap; box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .tdate b { color: var(--text); font-weight: 600; } .tdate .ic { width: 17px; height: 17px; color: var(--vio-2); } .tbtn { position: relative; width: 46px; height: 46px; flex: none; border-radius: 15px; display: grid; place-items: center; padding: 0; cursor: pointer; background: var(--glass-card); border: 1px solid var(--border); color: var(--text-2); box-shadow: var(--shadow); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transition: color .15s, border-color .15s; } .tbtn:hover, .tbtn[aria-expanded="true"] { color: var(--text); border-color: var(--lift-bd); } .tbtn .ic { width: 20px; height: 20px; } .tbtn .bdg { position: absolute; top: -5px; inset-inline-end: -5px; box-shadow: 0 0 0 2px var(--bg); } .tbtn .bdg[hidden] { display: none; } .npanel { position: absolute; top: calc(100% + 10px); inset-inline-end: 0; width: min(380px, calc(100vw - 28px)); max-height: 70vh; overflow: auto; padding: 10px; border-radius: 18px; background: var(--fly-bg); border: 1px solid var(--border); box-shadow: var(--shadow-lg); z-index: 70; backdrop-filter: blur(22px) saturate(150%); -webkit-backdrop-filter: blur(22px) saturate(150%); animation: v3rise .18s ease both; } .npanel[hidden] { display: none; } .npanel h4 { margin: 4px 8px 8px; font-size: 13px; display: flex; align-items: center; justify-content: space-between; } .nitem { display: flex; gap: 10px; align-items: flex-start; padding: 9px 10px; border-radius: 12px; color: var(--text); font-size: 13px; } .nitem:hover { background: var(--surface-3); text-decoration: none; } .nitem i { width: 8px; height: 8px; border-radius: 50%; margin-top: 7px; flex: none; background: var(--muted); } .nitem.bad i { background: #F87171; box-shadow: 0 0 0 3px rgba(248, 113, 113, .18); } .nitem.warn i { background: #F5B544; box-shadow: 0 0 0 3px rgba(245, 181, 68, .18); } .nitem.ok i { background: #34D399; box-shadow: 0 0 0 3px rgba(52, 211, 153, .18); } .nempty { padding: 18px 10px; text-align: center; color: var(--muted); font-size: 13px; } :root .shell.v3 > .main { padding: 14px 26px 70px; max-width: 1480px; width: 100%; min-width: 0; } .shell.v3 > .main > :not(.topbar3) { animation: v3rise .5s cubic-bezier(.2, .7, .2, 1) both; } .shell.v3 > .main > :nth-child(3) { animation-delay: .04s; } .shell.v3 > .main > :nth-child(4) { animation-delay: .08s; } .shell.v3 > .main > :nth-child(5) { animation-delay: .12s; } .shell.v3 > .main > :nth-child(6) { animation-delay: .16s; } .shell.v3 > .main > :nth-child(n+7) { animation-delay: .2s; } .rise { animation: v3rise .55s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); } /* ---------- مكونات صفحات النظرة العامة ---------- */ .kpis3 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .kpis3.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kpi3, .glass { position: relative; border-radius: 22px; background: var(--glass-card); border: 1px solid var(--border); box-shadow: var(--shadow); backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%); min-width: 0; } .kpi3 { padding: 18px 20px; overflow: hidden; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .kpi3:hover, .lift:hover { transform: translateY(-4px); border-color: var(--lift-bd); box-shadow: var(--shadow-lg); } .lift { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } .kpi3 .l { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .kpi3 .l .ic { width: 17px; height: 17px; } .kpi3 .v { font-size: clamp(22px, 1.9vw, 30px); font-weight: 700; letter-spacing: -.01em; margin-top: 10px; line-height: 1.25; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--text); } .kpi3 .v small { font-size: 12px; font-weight: 500; color: var(--muted); margin-inline-start: 5px; letter-spacing: 0; } .kpi3 .v.na { color: var(--muted); } .kpi3 .ft { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 12px; color: var(--muted); flex-wrap: wrap; } .kpi3.hero { background: var(--hero-grad); border-color: rgba(255, 255, 255, .14); color: #fff; box-shadow: 0 18px 40px rgba(58, 61, 176, .38); } .kpi3.hero::before { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; top: -90px; inset-inline-end: -70px; background: radial-gradient(circle, rgba(255, 255, 255, .22), transparent 70%); pointer-events: none; } .kpi3.hero .l, .kpi3.hero .ft, .kpi3.hero .v small { color: rgba(255, 255, 255, .8); } .kpi3.hero .v { color: #fff; } .kpi3.hero .chg { background: rgba(255, 255, 255, .18); color: #fff; } .kpi3.hero:hover { border-color: rgba(255, 255, 255, .4); } .chg { display: inline-flex; align-items: center; gap: 3px; padding: 2px 9px; border-radius: 99px; font-size: 11.5px; font-weight: 650; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; white-space: nowrap; } .chg.up { background: var(--chip-up-bg); color: var(--chip-up-ink); } .chg.dn { background: var(--chip-dn-bg); color: var(--chip-dn-ink); } .chg.flat { background: var(--surface-3); color: var(--text-2); } .soon { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 99px; font-size: 11px; font-weight: 600; background: var(--warn-bg); color: var(--warn-ink); white-space: nowrap; } .ov-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-top: 16px; align-items: start; } .ov-grid > * { min-width: 0; } .span-4 { grid-column: span 4; } .span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; } .span-8 { grid-column: span 8; } .span-12 { grid-column: 1 / -1; } .ov-grid .stack { gap: 16px; } .panel { padding: 18px 20px; } .panel > .ph { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .panel > .ph h2 { font-size: 15.5px; font-weight: 650; } .panel > .ph .muted { font-size: 12px; } .glass.hl { transition: border-color .2s ease; } .glass.hl:hover { border-color: var(--lift-bd); } /* أعمدة يومية تطلع من تحت */ .vbars { position: relative; display: flex; align-items: flex-end; gap: clamp(4px, 1.1vw, 12px); height: 220px; padding: 22px 2px 0; border-bottom: 1px solid var(--border); background: repeating-linear-gradient(to top, transparent 0 calc(25% - 1px), var(--border) calc(25% - 1px) 25%); background-clip: content-box; } .vbars .col { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; min-width: 0; position: relative; } .gbar { width: 100%; max-width: 34px; min-height: 3px; border-radius: 10px 10px 4px 4px; transform-origin: bottom; background: linear-gradient(180deg, rgba(139, 143, 255, .72), rgba(67, 70, 201, .5)); animation: v3grow .8s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 45ms); } .gbar.hi { background: linear-gradient(180deg, #8B8FFF, #4346C9); box-shadow: 0 8px 22px rgba(99, 102, 241, .35); } .gbar.z { background: var(--track); } .gbar:hover { filter: brightness(1.18); } .vbars .bv { position: absolute; bottom: calc(var(--h) + 6px); font-size: 11px; font-weight: 650; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; opacity: 0; animation: v3fade .4s .7s forwards; } .vbars-x { display: flex; gap: clamp(4px, 1.1vw, 12px); padding: 8px 2px 0; } .vbars-x span { flex: 1; text-align: center; font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 0; } /* دونات التوزيع */ .donut { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; } .donut svg { width: 168px; height: 168px; flex: none; animation: v3spin .9s cubic-bezier(.2, .7, .2, 1) both; } .donut .ring { fill: none; stroke: var(--track); } .donut .seg { fill: none; stroke-linecap: butt; } .donut .ctr-n { font-size: 28px; font-weight: 700; fill: var(--text); font-variant-numeric: tabular-nums; } .donut .ctr-l { font-size: 11px; fill: var(--muted); } .donut .seg { transition: stroke-width .15s ease; } .donut .seg:hover { stroke-width: 20; } .legend3 { display: flex; flex-direction: column; gap: 8px; min-width: 150px; flex: 1; } .legend3 > div { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); } .legend3 i { width: 10px; height: 10px; border-radius: 3px; flex: none; } .legend3 b { margin-inline-start: auto; color: var(--text); font-variant-numeric: tabular-nums; font-weight: 600; } .legend3 small { color: var(--muted); min-width: 34px; text-align: end; font-variant-numeric: tabular-nums; } /* أرقام صغيرة داخل البطاقات */ .mini3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .mini3 > a, .mini3 > div { padding: 12px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); text-align: center; color: var(--text); transition: border-color .15s; } .mini3 > a:hover { border-color: var(--lift-bd); text-decoration: none; } .mini3 b { display: block; font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; } .mini3 span { font-size: 12px; color: var(--muted); } .mini3 .ok b { color: var(--good-ink); } .mini3 .bad b { color: var(--bad-ink); } .mini3 .wait b { color: var(--warn-ink); } .bignum { display: flex; align-items: baseline; gap: 10px; } .bignum b { font-size: 40px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .bignum span { color: var(--muted); font-size: 13px; } /* أزرار الأرباع / الفلاتر */ .pills { display: inline-flex; gap: 4px; padding: 4px; border-radius: 14px; background: var(--glass-card); border: 1px solid var(--border); flex-wrap: wrap; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 15px; border-radius: 10px; border: 1px solid transparent; color: var(--text-2); font-weight: 600; font-size: 13px; background: none; cursor: pointer; line-height: 1.4; } .pill:hover { color: var(--text); text-decoration: none; background: var(--surface-3); } .pill.on { border-color: var(--pill-on-bd); background: var(--pill-on-bg); color: var(--text); } .pill.dis { opacity: .4; pointer-events: none; } .pill .n { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; } /* كبسولات التحصيل مقابل المبيعات */ .caps { display: flex; gap: 14px; align-items: stretch; justify-content: space-around; height: 250px; } .cap { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; max-width: 110px; min-width: 0; } .cap .pc { font-weight: 700; font-size: 16px; font-variant-numeric: tabular-nums; color: var(--text); } .cap .tube { position: relative; flex: 1; width: 48px; border-radius: 99px; background: var(--track); overflow: hidden; border: 1px solid var(--border); } .cap .fillc { position: absolute; inset-inline: 0; bottom: 0; height: var(--h); border-radius: 99px; transform-origin: bottom; background: linear-gradient(180deg, #8B8FFF, #4346C9); box-shadow: 0 0 18px rgba(99, 102, 241, .35); animation: v3grow 1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 90ms); } .cap .fillc.full { background: linear-gradient(180deg, #6EE7B7, #10B981); box-shadow: 0 0 18px rgba(52, 211, 153, .3); } .cap .nm { font-size: 12.5px; font-weight: 600; color: var(--text-2); } .cap .sub { font-size: 11px; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; line-height: 1.4; } .cap.total .tube { width: 56px; border-color: var(--lift-bd); } /* الأرباح والمصاريف */ .plbars { display: grid; gap: 14px; } .plrow { display: grid; grid-template-columns: minmax(120px, 30%) minmax(0, 1fr) auto; gap: 12px; align-items: center; } .plrow .lb { font-size: 13px; color: var(--text-2); display: flex; align-items: center; gap: 8px; } .plrow .lb i { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c); } .plrow .tr { height: 14px; border-radius: 99px; background: var(--track); overflow: hidden; } .plrow .fl { height: 100%; width: var(--w); min-width: 3px; border-radius: 99px; background: var(--c); transform-origin: right center; animation: v3growx .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms); } .plrow .vl { font-size: 13px; font-weight: 650; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--text); direction: ltr; unicode-bidi: isolate; } .plrow.total { padding-top: 12px; border-top: 1px dashed var(--border); } .plrow.total .lb { color: var(--text); font-weight: 650; } /* تنبيهات المخزن */ .wh-list { display: flex; flex-direction: column; gap: 8px; } .wh-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); transition: border-color .15s ease; } .wh-item:hover { border-color: var(--lift-bd); } .wh-item[hidden] { display: none; } .wh-item .ico { width: 40px; height: 40px; border-radius: 13px; display: grid; place-items: center; flex: none; } .wh-item .ico .ic { width: 19px; height: 19px; } .wh-item.low .ico { background: var(--chip-dn-bg); color: var(--chip-dn-ink); } .wh-item.exp .ico { background: var(--warn-bg); color: var(--warn-ink); } .wh-item .tx { min-width: 0; flex: 1; } .wh-item .nm { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; } .wh-item .nt { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .tagc { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap; flex: none; } .tagc.red { background: var(--chip-dn-bg); color: var(--chip-dn-ink); } .tagc.amber { background: var(--warn-bg); color: var(--warn-ink); } .tagc.green { background: var(--chip-up-bg); color: var(--chip-up-ink); } .tagc .sdot { width: 7px; height: 7px; box-shadow: none; } .tagc.gray { background: var(--surface-3); color: var(--text-2); } .tagc.vio { background: var(--on-bg); color: var(--on-ink); } /* منحنى الصرف */ .spl svg { display: block; width: 100%; height: auto; overflow: visible; } .spl .grid3 line { stroke: var(--border); stroke-dasharray: 3 6; } .spl .line { fill: none; stroke: #38BDF8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: v3draw 1.6s .15s cubic-bezier(.4, 0, .2, 1) forwards; } .spl .area { opacity: 0; animation: v3fade .8s 1s forwards; } .spl .dot { fill: var(--fly-bg); stroke: #38BDF8; stroke-width: 2; opacity: 0; animation: v3fade .3s 1.3s forwards; } .spl .dot.last { fill: #38BDF8; } .spl .hit { fill: transparent; cursor: default; } .spl .hit:hover + .dot { r: 6; } .spl-x { display: flex; justify-content: space-between; padding-inline: 2.5%; margin-top: 6px; } .spl-x span { width: 0; display: flex; justify-content: center; white-space: nowrap; font-size: 11px; color: var(--muted); } /* بطاقات الوكلاء (الميديا) */ .agents3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } .agent3 { padding: 20px; display: flex; flex-direction: column; gap: 14px; } .agent3 .top { display: flex; gap: 12px; align-items: center; } .agent3 .av { width: 50px; height: 50px; border-radius: 16px; display: grid; place-items: center; color: #fff; flex: none; background: var(--hero-grad); box-shadow: 0 10px 24px rgba(67, 70, 201, .35); } .agent3 .av .ic { width: 24px; height: 24px; } .agent3 .av.av-g2 { background: linear-gradient(135deg, #38BDF8, #0E7490); box-shadow: 0 10px 24px rgba(14, 116, 144, .35); } .agent3 .av.av-g3 { background: linear-gradient(135deg, #34D399, #047857); box-shadow: 0 10px 24px rgba(4, 120, 87, .35); } .agent3 h3 { font-size: 15px; font-weight: 650; } .agent3 p { margin: 0; font-size: 12.5px; color: var(--text-2); line-height: 1.7; } .agent3 .meta { display: flex; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); } .agent3 .foot { margin-top: auto; display: flex; gap: 8px; flex-wrap: wrap; } /* الأنظمة المربوطة */ .links3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 16px; } .link3 { padding: 18px; display: flex; flex-direction: column; gap: 12px; } .link3 .top { display: flex; align-items: center; gap: 12px; } .link3 .in { width: 48px; height: 48px; border-radius: 15px; display: grid; place-items: center; font-weight: 800; font-size: 19px; color: #fff; flex: none; background: var(--c); box-shadow: 0 8px 20px color-mix(in srgb, var(--c) 35%, transparent); font-family: Inter, "Segoe UI", system-ui, sans-serif; } .link3 .nm { font-weight: 650; font-size: 14.5px; } .link3 .kd { font-size: 12px; color: var(--muted); overflow-wrap: anywhere; } .link3 .st { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); overflow-wrap: anywhere; } .link3 .bt { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); font-size: 12px; color: var(--muted); } .link3.soon-card { opacity: .72; } .sdot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); flex: none; } .sdot.ok { background: #34D399; box-shadow: 0 0 0 4px rgba(52, 211, 153, .16); } .sdot.bad { background: #F87171; box-shadow: 0 0 0 4px rgba(248, 113, 113, .16); } .sdot.warn { background: #F5B544; box-shadow: 0 0 0 4px rgba(245, 181, 68, .16); } .switch { position: relative; width: 48px; height: 28px; flex: none; margin-inline-start: auto; display: inline-block; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; z-index: 1; } .switch .tk { position: absolute; inset: 0; border-radius: 99px; background: var(--surface-3); border: 1px solid var(--border-strong); transition: background-color .2s, border-color .2s; } .switch .tk::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transition: transform .2s cubic-bezier(.2, .7, .2, 1); } .switch input:checked + .tk { background: #22C55E; border-color: transparent; } .switch input:checked + .tk::after { transform: translateX(-20px); } [dir="ltr"] .switch input:checked + .tk::after { transform: translateX(20px); } .switch input:focus-visible + .tk { outline: 2px solid var(--vio-2); outline-offset: 2px; } .switch input:disabled { cursor: not-allowed; } .switch input:disabled + .tk { opacity: .5; } .switch.busy .tk { opacity: .6; } /* البحث */ .sres { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr)); align-items: start; } .sres .glass { padding: 16px 18px; } .sres h2 { font-size: 14.5px; display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .sres ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; } .sres li a, .sres li > span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 11px; color: var(--text); font-size: 13.5px; } .sres li a:hover { background: var(--surface-3); text-decoration: none; } .sres li small { margin-inline-start: auto; color: var(--muted); font-size: 11.5px; } .empty3 { padding: 34px 16px; text-align: center; color: var(--muted); } .pghead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; } .pghead h1 { font-size: 26px; font-weight: 700; letter-spacing: -.01em; } .pghead p { margin: 4px 0 0; color: var(--text-2); font-size: 13.5px; } .srcnote { font-size: 11.5px; color: var(--muted); margin-top: 10px; } @media (max-width: 1180px) { .kpis3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .kpis3.k3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ov-grid > .span-4, .ov-grid > .span-5, .ov-grid > .span-6, .ov-grid > .span-7, .ov-grid > .span-8 { grid-column: 1 / -1; } .agents3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-height: 760px) and (min-width: 861px) { .rail { gap: 6px; padding-block: 10px; } .rail-nav { gap: 3px; } .rail-btn { width: 42px; height: 42px; border-radius: 13px; } .rail-logo { width: 40px; height: 40px; } .rail-logo img { width: 34px; height: 34px; } } /* الموبايل: القائمة تصير شريط فوق، والبطاقات عمود واحد */ @media (max-width: 860px) { :root .shell.v3 { grid-template-columns: minmax(0, 1fr); } .rail { position: sticky; top: 0; height: auto; width: auto; margin: 0; flex-direction: row; gap: 6px; padding: 8px 10px; border-radius: 0 0 20px 20px; } .rail::before { background: var(--fly-bg); } .rail-logo { width: 38px; height: 38px; margin: 0; } .rail-logo img { width: 32px; height: 32px; } .rail-nav { flex-direction: row; overflow-x: auto; gap: 4px; padding: 4px 2px; scrollbar-width: none; } .rail-nav::-webkit-scrollbar { display: none; } .rail-btn { width: 42px; height: 42px; flex: none; } .rail-btn .bdg { top: -3px; inset-inline-end: -3px; } .rail-foot { flex-direction: row; } .rail-me { width: 38px; height: 38px; border-radius: 12px; } .flyout, .flyout.me-fly { position: fixed; top: 68px; bottom: auto; inset-inline: 10px; min-width: 0; max-width: none; max-height: calc(100vh - 90px); overflow: auto; transform: translateY(-6px); } .flyout::before { display: none; } .rail-item.single > .flyout { display: none; } :root .shell.v3 > .main { padding: 12px 14px 60px; } .topbar3 { flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .tsearch { order: 3; flex-basis: 100%; max-width: none; } .tsearch input, .tdate, .tbtn { height: 42px; } .tbtn { width: 42px; } .tdate { margin-inline-start: 0; flex: 1; justify-content: center; font-size: 12.5px; } .pghead h1 { font-size: 22px; } .vbars { height: 180px; } .vbars .bv { display: none; } .vbars .col.lastc .bv { display: block; } .caps { height: 210px; gap: 8px; } .cap .tube { width: 38px; } } @media (max-width: 640px) { .kpis3, .kpis3.k3, .agents3 { grid-template-columns: minmax(0, 1fr); } .plrow { grid-template-columns: minmax(0, 1fr) auto; } .plrow .tr { grid-column: 1 / -1; grid-row: 2; } .spl-x span:nth-child(even) { visibility: hidden; } .vbars-x span:nth-child(even) { visibility: hidden; } .mini3 b { font-size: 20px; } } /* روابط المكونات: تغلب لون الروابط العام بالداكن */ :root .flyout a, :root a.rail-btn, :root a.pill { color: var(--text-2); } :root .flyout a:hover, :root a.rail-btn:hover, :root a.pill:hover, :root a.pill.on { color: var(--text); } :root .flyout a.on, :root a.rail-btn.on { color: var(--on-ink); } :root a.nitem, :root .sres li a, :root .mini3 > a { color: var(--text); } /* صفحة سدرة الاحتياطية (iframe بكامل الصفحة): القائمة تبقى، والشريط العلوي يختفي */ :root body.fullpage .shell.v3 { grid-template-columns: 98px minmax(0, 1fr); } :root body.fullpage .shell.v3 > .main { padding: 0; max-width: none; height: 100vh; height: 100dvh; display: flex; flex-direction: column; } :root body.fullpage .shell.v3 > .main > .topbar3 { display: none; } :root body.fullpage .shell.v3 > .main > * { animation: none; } @media (max-width: 860px) { :root body.fullpage .shell.v3 { grid-template-columns: minmax(0, 1fr); } :root body.fullpage .shell.v3 > .main { height: calc(100dvh - 60px); } } @media print { .rail, .topbar3, .bg-blobs { display: none !important; } :root .shell.v3 { display: block; } } @media (prefers-reduced-motion: reduce) { .blob, .gbar, .cap .fillc, .plrow .fl, .donut svg, .rise, .shell.v3 > .main > * { animation: none !important; } .spl .line { animation: none; stroke-dashoffset: 0; } .spl .area, .spl .dot, .vbars .bv { animation: none; opacity: 1; } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0B0D14; --bg-image: none; --surface: rgba(20, 22, 34, .62); --surface-2: rgba(255, 255, 255, .04); --surface-3: rgba(255, 255, 255, .075); --surface-solid: #141725; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .17); --text: #EEF0F6; --text-2: #A3A9BC; --muted: #7E849A; --accent: #7C80FF; --accent-ink: #ffffff; --accent-soft: rgba(99, 102, 241, .16); --link: #A5A8FF; --hot: linear-gradient(135deg, #7C80FF 0%, #6366F1 55%, #4F46E5 100%); --good: #34D399; --good-ink: #6EE7B7; --warn: #F5B544; --warn-ink: #FCD38A; --bad: #F87171; --bad-ink: #FCA5A5; --bar: #7C80FF; --bar-track: rgba(255, 255, 255, .07); --bar-fill: linear-gradient(90deg, #4346C9, #8B8FFF); --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 32px rgba(0, 0, 0, .32); --shadow-lg: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 24px 54px rgba(0, 0, 0, .5); --ring: rgba(99, 102, 241, .40); --radius: 22px; --glass: blur(18px) saturate(140%); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 40%); --rail-bg: rgba(255, 255, 255, .045); --fly-bg: rgba(17, 19, 31, .92); --on-bg: rgba(99, 102, 241, .22); --on-border: rgba(165, 168, 255, .5); --on-ink: #ffffff; --pill-on-bg: rgba(99, 102, 241, .25); --pill-on-bd: #6366F1; --glass-card: rgba(255, 255, 255, .045); --blob-op: .30; --info: #38BDF8; --chip-up-bg: rgba(52, 211, 153, .15); --chip-up-ink: #6EE7B7; --chip-dn-bg: rgba(248, 113, 113, .15); --chip-dn-ink: #FCA5A5; --warn-bg: rgba(245, 181, 68, .14); --lift-bd: rgba(124, 128, 255, .55); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0B0D14; --bg-image: none; --surface: rgba(20, 22, 34, .62); --surface-2: rgba(255, 255, 255, .04); --surface-3: rgba(255, 255, 255, .075); --surface-solid: #141725; --border: rgba(255, 255, 255, .09); --border-strong: rgba(255, 255, 255, .17); --text: #EEF0F6; --text-2: #A3A9BC; --muted: #7E849A; --accent: #7C80FF; --accent-ink: #ffffff; --accent-soft: rgba(99, 102, 241, .16); --link: #A5A8FF; --hot: linear-gradient(135deg, #7C80FF 0%, #6366F1 55%, #4F46E5 100%); --good: #34D399; --good-ink: #6EE7B7; --warn: #F5B544; --warn-ink: #FCD38A; --bad: #F87171; --bad-ink: #FCA5A5; --bar: #7C80FF; --bar-track: rgba(255, 255, 255, .07); --bar-fill: linear-gradient(90deg, #4346C9, #8B8FFF); --shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 12px 32px rgba(0, 0, 0, .32); --shadow-lg: 0 1px 0 rgba(255, 255, 255, .07) inset, 0 24px 54px rgba(0, 0, 0, .5); --ring: rgba(99, 102, 241, .40); --radius: 22px; --glass: blur(18px) saturate(140%); --sheen: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, 0) 40%); --rail-bg: rgba(255, 255, 255, .045); --fly-bg: rgba(17, 19, 31, .92); --on-bg: rgba(99, 102, 241, .22); --on-border: rgba(165, 168, 255, .5); --on-ink: #ffffff; --pill-on-bg: rgba(99, 102, 241, .25); --pill-on-bd: #6366F1; --glass-card: rgba(255, 255, 255, .045); --blob-op: .30; --info: #38BDF8; --chip-up-bg: rgba(52, 211, 153, .15); --chip-up-ink: #6EE7B7; --chip-dn-bg: rgba(248, 113, 113, .15); --chip-dn-ink: #FCA5A5; --warn-bg: rgba(245, 181, 68, .14); --lift-bd: rgba(124, 128, 255, .55); } } :root[data-theme="dark"] body { background-color: var(--bg); background-image: none; } :root[data-theme="dark"] .card, :root[data-theme="dark"] .kpi, :root[data-theme="dark"] .agent-card { background-color: var(--glass-card); } :root[data-theme="dark"] .card { border-radius: 22px; transition: border-color .2s ease, box-shadow .2s ease; } :root[data-theme="dark"] .card:hover { border-color: rgba(124, 128, 255, .28); } :root[data-theme="dark"] .card > .hd { border-radius: 22px 22px 0 0; } :root[data-theme="dark"] .card .card { background-color: rgba(255, 255, 255, .03); } :root[data-theme="dark"] .kpi { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } :root[data-theme="dark"] .kpi:hover, :root[data-theme="dark"] .agent-card:hover, :root[data-theme="dark"] a.kpi:hover { transform: translateY(-4px); border-color: var(--lift-bd); box-shadow: var(--shadow-lg); } :root[data-theme="dark"] .avatar-sm { background: var(--hot); box-shadow: 0 6px 16px rgba(99, 102, 241, .35); } :root[data-theme="dark"] .btn.primary { background: var(--hot); box-shadow: 0 8px 22px rgba(99, 102, 241, .32); } :root[data-theme="dark"] .btn.primary:hover { box-shadow: 0 10px 26px rgba(99, 102, 241, .45); } :root[data-theme="dark"] input:focus, :root[data-theme="dark"] select:focus, :root[data-theme="dark"] textarea:focus { border-color: #6366F1; } :root[data-theme="dark"] select option { background: var(--surface-solid); } :root[data-theme="dark"] .bar .fill { box-shadow: 0 0 12px rgba(124, 128, 255, .25); } :root[data-theme="dark"] .trend .b, :root[data-theme="dark"] .trend.t3 .b { --c3: #6366F1; background: linear-gradient(180deg, #8B8FFF, #4346C9); } :root[data-theme="dark"] .tabs a.on { color: #A5A8FF; border-color: #6366F1; } :root[data-theme="dark"] .theme-switch button[aria-checked="true"] { background: var(--hot); box-shadow: 0 4px 12px rgba(99, 102, 241, .35); } :root[data-theme="dark"] .hero h1 { background: linear-gradient(90deg, #fff 30%, #A5A8FF); -webkit-background-clip: text; background-clip: text; color: transparent; } :root[data-theme="dark"] body:has(.auth-box)::before { background: radial-gradient(800px 500px at 70% 10%, rgba(99, 102, 241, .18), transparent 60%), var(--bg); opacity: .9; } :root[data-theme="dark"] table.t th { background: rgba(14, 16, 26, .9); } :root[data-theme="dark"] .c3tip { background: rgba(17, 19, 31, .95); border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } :root[data-theme="dark"] ::selection { background: rgba(99, 102, 241, .45); color: #fff; } :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body { background-color: var(--bg); background-image: none; } :root:not([data-theme="light"]) .card, :root:not([data-theme="light"]) .kpi, :root:not([data-theme="light"]) .agent-card { background-color: var(--glass-card); } :root:not([data-theme="light"]) .card { border-radius: 22px; transition: border-color .2s ease, box-shadow .2s ease; } :root:not([data-theme="light"]) .card:hover { border-color: rgba(124, 128, 255, .28); } :root:not([data-theme="light"]) .card > .hd { border-radius: 22px 22px 0 0; } :root:not([data-theme="light"]) .card .card { background-color: rgba(255, 255, 255, .03); } :root:not([data-theme="light"]) .kpi { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; } :root:not([data-theme="light"]) .kpi:hover, :root:not([data-theme="light"]) .agent-card:hover, :root:not([data-theme="light"]) a.kpi:hover { transform: translateY(-4px); border-color: var(--lift-bd); box-shadow: var(--shadow-lg); } :root:not([data-theme="light"]) .avatar-sm { background: var(--hot); box-shadow: 0 6px 16px rgba(99, 102, 241, .35); } :root:not([data-theme="light"]) .btn.primary { background: var(--hot); box-shadow: 0 8px 22px rgba(99, 102, 241, .32); } :root:not([data-theme="light"]) .btn.primary:hover { box-shadow: 0 10px 26px rgba(99, 102, 241, .45); } :root:not([data-theme="light"]) input:focus, :root:not([data-theme="light"]) select:focus, :root:not([data-theme="light"]) textarea:focus { border-color: #6366F1; } :root:not([data-theme="light"]) select option { background: var(--surface-solid); } :root:not([data-theme="light"]) .bar .fill { box-shadow: 0 0 12px rgba(124, 128, 255, .25); } :root:not([data-theme="light"]) .trend .b, :root:not([data-theme="light"]) .trend.t3 .b { --c3: #6366F1; background: linear-gradient(180deg, #8B8FFF, #4346C9); } :root:not([data-theme="light"]) .tabs a.on { color: #A5A8FF; border-color: #6366F1; } :root:not([data-theme="light"]) .theme-switch button[aria-checked="true"] { background: var(--hot); box-shadow: 0 4px 12px rgba(99, 102, 241, .35); } :root:not([data-theme="light"]) .hero h1 { background: linear-gradient(90deg, #fff 30%, #A5A8FF); -webkit-background-clip: text; background-clip: text; color: transparent; } :root:not([data-theme="light"]) body:has(.auth-box)::before { background: radial-gradient(800px 500px at 70% 10%, rgba(99, 102, 241, .18), transparent 60%), var(--bg); opacity: .9; } :root:not([data-theme="light"]) table.t th { background: rgba(14, 16, 26, .9); } :root:not([data-theme="light"]) .c3tip { background: rgba(17, 19, 31, .95); border-color: rgba(255, 255, 255, .12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } :root:not([data-theme="light"]) ::selection { background: rgba(99, 102, 241, .45); color: #fff; } :root:not([data-theme="light"]) ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .12); } } /* ================= /Glass V3 ================= */