/* QoraVerse design system — Qora brand board, Arabic-first RTL. Tokens from the Qora Brand Board: primary #2563EB · secondary #38BDF8 · success #16A34A · warning #F59E0B · error #EF4444 text link #0A1733 / body #64748B · radius 7px · shadow rgba(145,158,171,…) · DM Sans (+ IBM Plex Sans Arabic) */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&family=Outfit:wght@600;700;800&family=Manrope:wght@400;500;600;700&display=swap'); :root { --ink: #0A1733; /* headings / strong text (TailAdmin "link") */ --ink-2: #64748B; /* body text */ --paper: #F6F8FC; /* page background (lightgray) */ --card: #ffffff; --line: #E2E8F0; /* borders */ --primary: #2563EB; --primary-strong: #1D4ED8; --primary-soft: rgba(37, 99, 235, .10); /* lightprimary */ --secondary: #38BDF8; --secondary-soft: rgba(56, 189, 248, .14); --success: #16A34A; --success-strong: #15803D; --success-soft: #DCFCE7; --gold: #F59E0B; /* warning */ --gold-strong: #B45309; --gold-soft: #FEF3C7; /* lightwarning */ --danger: #EF4444; --danger-strong: #DC2626; --danger-soft: #FEE2E2; /* lighterror */ --info: #0284C7; --info-soft: #E0F2FE; --radius: 14px; /* cards */ --radius-ctl: 10px; /* buttons, inputs, selects (brand board) */ --shadow: rgba(10, 23, 51, .08) 0px 0px 2px 0px, rgba(10, 23, 51, .10) 0px 12px 24px -4px; } /* ---------- Dark theme (toggle via ) ---------- */ html[data-theme="dark"] { --ink: #E6ECF8; --ink-2: #8CA0C4; /* darklink */ --paper: #0A1733; /* page bg (slightly below card) */ --card: #122142; /* TailAdmin dark */ --line: #24345C; /* darkborder */ --primary: #2563EB; --primary-strong: #3B82F6; --primary-soft: rgba(59, 130, 246, .16); --success-soft: rgba(22, 163, 74, .16); --gold-soft: rgba(245, 158, 11, .16); --danger-soft: rgba(239, 68, 68, .16); --info-soft: rgba(56, 189, 248, .16); --shadow: rgba(0, 0, 0, .35) 0px 0px 2px 0px, rgba(0, 0, 0, .20) 0px 12px 24px -4px; color-scheme: dark; } html[data-theme="dark"] .toast { background: #0A1733; color: #E6ECF8; } html[data-theme="dark"] .cats button.on { background: var(--primary); border-color: var(--primary); } html[data-theme="dark"] #langToggle { background: var(--primary); } * { box-sizing: border-box; margin: 0; } html, body { height: 100%; } body { font-family: 'IBM Plex Sans Arabic', 'Manrope', system-ui, sans-serif; background: var(--paper); color: var(--ink-2); font-size: 14px; line-height: 1.6; } .num { font-variant-numeric: tabular-nums; } h1,h2,h3 { font-family: 'Outfit', 'IBM Plex Sans Arabic', sans-serif; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); } h1 { font-size: 22px; } h2 { font-size: 18px; } h3 { font-size: 15px; } .muted { color: var(--ink-2); } .small { font-size: 12.5px; } /* Buttons — Qora brand board: 10px radius, Outfit 600, primary glow */ button, .btn { font-family: 'Outfit', 'IBM Plex Sans Arabic', sans-serif; font-size: 14px; font-weight: 600; border: none; border-radius: var(--radius-ctl); padding: 10px 20px; cursor: pointer; background: var(--primary); color: #fff; transition: background .15s, transform .05s; box-shadow: 0 6px 16px -6px rgba(37, 99, 235, .5); } button:hover, .btn:hover { background: var(--primary-strong); } button:active { transform: scale(.98); } button:focus-visible, input:focus-visible, select:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; } button.ghost { background: var(--card); color: var(--primary); border: 1.5px solid var(--primary); box-shadow: none; } button.ghost:hover { background: var(--primary-soft); } button.danger { background: var(--danger); } button.danger:hover { background: var(--danger-strong); } button.gold { background: var(--gold); color: #fff; } button.gold:hover { background: var(--gold-strong); } button:disabled { background: #93B4F5; box-shadow: none; cursor: not-allowed; } button.small, .btn.small { padding: 7px 15px; font-size: 12.5px; border-radius: 8px; } input, select, textarea { font-family: inherit; font-size: 14px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: var(--radius-ctl); background: var(--paper); color: var(--ink); transition: border-color .12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--primary); } /* TailAdmin-style select: no native arrow, theme chevron (direction-aware) */ select { appearance: none; -webkit-appearance: none; cursor: pointer; padding-inline-end: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 14px; background-position: left 12px center; /* RTL default */ } html[dir="ltr"] select, [dir="ltr"] select { background-position: right 12px center; } html[data-theme="dark"] select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CA0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } select option { background: var(--card); color: var(--ink); } /* qSelect — themed dropdown component (ui.js replaces native selects with this) */ .qsel { position: relative; display: block; } .qsel-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; text-align: start; cursor: pointer; background: var(--paper); color: var(--ink); border: 1.5px solid var(--line); border-radius: var(--radius-ctl); padding: 10px 14px; font-size: inherit; font-weight: 400; font-family: inherit; box-shadow: none; transition: border-color .12s; } .qsel-btn:hover, .qsel.open .qsel-btn { background: var(--paper); border-color: var(--primary); } .qsel-btn:active { transform: none; } .qsel-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .qsel-btn::after { content: ""; width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 14px no-repeat; } html[data-theme="dark"] .qsel-btn::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238CA0C4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } .qsel.open .qsel-btn::after { transform: rotate(180deg); } .qsel-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 100%; width: max-content; max-width: 320px; max-height: 280px; overflow: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; z-index: 90; display: none; animation: pop .14s ease; } html[data-theme="dark"] .qsel-menu { box-shadow: 0 12px 30px rgba(0,0,0,.45); } .qsel.open .qsel-menu { display: block; } .qsel-menu.up { top: auto; bottom: calc(100% + 6px); } .qsel-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; margin-bottom: 2px; border-radius: 8px; cursor: pointer; color: var(--ink-2); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .qsel-opt:last-child { margin-bottom: 0; } .qsel-opt:hover { background: var(--primary-soft); color: var(--primary); } .qsel-opt.on { background: var(--primary); color: #fff; font-weight: 600; } .qsel-opt.on::after { content: "✓"; font-weight: 700; } .qsel-opt.dis { opacity: .45; cursor: default; } input::placeholder, textarea::placeholder { color: var(--ink-2); opacity: .75; } label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); margin: 12px 0 5px; } .card { background: var(--card); border: 1px solid transparent; border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; position: relative; } html[data-theme="dark"] .card { border-color: var(--line); } table { width: 100%; border-collapse: collapse; } th { text-align: start; font-size: 12px; color: var(--ink); font-weight: 600; padding: 10px; border-bottom: 1px solid var(--line); } td { padding: 11px 10px; border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); } td:first-child, th:first-child { padding-inline-start: 4px; } tr:last-child td { border-bottom: none; } tr:hover td { background: color-mix(in srgb, var(--paper) 55%, transparent); } /* Badges — TailAdmin tinted rounded-full */ .pill { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; } .pill.green { background: var(--success-soft); color: #16A34A; } html[data-theme="dark"] .pill.green { color: #4ADE80; } .pill.gold { background: var(--gold-soft); color: var(--gold-strong); } .pill.red { background: var(--danger-soft); color: var(--danger-strong); } .pill.gray { background: var(--primary-soft); color: var(--primary); } .toast { position: fixed; bottom: 24px; inset-inline-start: 50%; transform: translateX(50%); background: var(--ink); color: var(--card); padding: 12px 24px; border-radius: 999px; font-weight: 600; box-shadow: var(--shadow); z-index: 99; animation: pop .18s ease; } [dir="ltr"] .toast { transform: translateX(-50%); } @keyframes pop { from { opacity: 0; translate: 0 8px; } } .modal-back { position: fixed; inset: 0; background: rgba(10,23,51,.55); display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px; } .modal { background: var(--card); border-radius: 12px; padding: 28px; width: min(480px, 100%); max-height: 92vh; max-height: 90dvh; overflow: auto; margin-bottom: env(safe-area-inset-bottom); box-shadow: 0 24px 60px rgba(0,0,0,.25); color: var(--ink-2); } html[data-theme="dark"] .modal { border: 1px solid var(--line); } /* Brand mark */ .brand { display: flex; align-items: center; gap: 10px; font-family: 'Outfit', 'IBM Plex Sans Arabic', sans-serif; font-weight: 700; font-size: 19px; color: var(--ink); } .brand .mark { width: 34px; height: 34px; border-radius: 9px; position: relative; flex: none; background: linear-gradient(150deg, #2563EB 0%, #1D4ED8 100%); box-shadow: 0 6px 14px -6px rgba(37, 99, 235, .55); } .brand .mark::before { /* the ring */ content: ""; position: absolute; inset: 21%; border-radius: 50%; border: 2.6px solid #fff; } .brand .mark::after { /* the forward-motion stroke */ content: ""; position: absolute; width: 7.5px; height: 2.8px; border-radius: 2px; background: #38BDF8; right: 15%; bottom: 18%; transform: rotate(45deg); } /* TailAdmin sidebar pieces (shared) */ .caption { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--ink); padding: 18px 12px 8px; } /* Help assistant — floating chat widget */ .helpfab { position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 95; width: 54px; height: 54px; border-radius: 99px; padding: 0; font-size: 22px; background: var(--primary); color: #fff; box-shadow: 0 8px 24px rgba(37,99,235,.45); } .helppanel { position: fixed; bottom: 88px; inset-inline-end: 22px; z-index: 95; width: min(360px, calc(100vw - 32px)); height: min(480px, 70vh); background: var(--card); border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow), 0 18px 50px rgba(0,0,0,.18); display: none; flex-direction: column; overflow: hidden; } .helppanel.open { display: flex; animation: pop .16s ease; } .helphead { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; background: var(--primary); color: #fff; font-weight: 700; } .helphead .helpclose { background: none; border: 0; color: #fff; font-size: 15px; padding: 2px 6px; cursor: pointer; } .helpmsgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 8px; } .helpmsg { max-width: 85%; padding: 9px 13px; border-radius: 12px; font-size: 13.5px; line-height: 1.7; white-space: pre-wrap; } .helpmsg.bot { background: var(--paper); color: var(--ink); align-self: flex-start; border-start-start-radius: 4px; } .helpmsg.me { background: var(--primary); color: #fff; align-self: flex-end; border-start-end-radius: 4px; } .helpsug { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 14px 6px; } .helpchip { background: var(--primary-soft); color: var(--primary); border: 0; font-size: 12px; padding: 6px 12px; } .helpinput { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); } .helpinput input { flex: 1; } .helpinput button { white-space: nowrap; padding-inline: 16px; } @media print { .helpfab, .helppanel { display: none !important; } } /* inline UI icons (emoji replacement) */ .ic { width: 1.06em; height: 1.06em; vertical-align: -0.18em; display: inline-block; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .ic.fill { fill: currentColor; stroke: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }