/* ════════════════════════════════════════════════════════════ TicketDesk Pro — global theme Colors are NOT hard-coded here: --primary / --secondary are injected in from the admin Settings, so every company copy re-skins itself automatically. ════════════════════════════════════════════════════════════ */ :root { --primary: #f88302; --secondary: #011f47; --primary-soft: color-mix(in srgb, var(--primary) 12%, white); --secondary-soft: color-mix(in srgb, var(--secondary) 7%, white); --ink: #1c2b42; --muted: #6b7a90; --line: #e5ebf3; --bg: #f4f7fb; --card: #ffffff; --success: #1ea97c; --danger: #e5484d; --radius: 20px; --radius-sm: 13px; --shadow: 0 10px 34px rgba(1, 31, 71, .08); --font-en: 'Sora', 'Segoe UI', Roboto, sans-serif; --font-body-en: 'Inter', 'Segoe UI', Roboto, sans-serif; --font-ar: 'Rubik', 'Trebuchet MS', 'Lucida Grande', 'Lucida Sans Unicode', 'Lucida Sans', Tahoma, sans-serif; } .ff-ar { font-family: var(--font-ar); } .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: .5rem; } .icon-cell { border: 1px solid var(--line); background: #fff; border-radius: 14px; padding: .7rem .3rem .55rem; text-align: center; cursor: pointer; transition: all .15s ease; direction: ltr; } .icon-cell i { font-size: 1.35rem; color: var(--secondary); display: block; margin-bottom: .35rem; } .icon-cell span { font-size: .62rem; color: #7c8aa0; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .icon-cell:hover { border-color: var(--primary); box-shadow: 0 6px 16px rgba(248,131,2,.18); transform: translateY(-2px); } .icon-cell:hover i { color: var(--primary); } .form-check-input:checked { background-color: var(--primary) !important; border-color: var(--primary) !important; } .text-primary { color: var(--primary) !important; } .bg-primary { background-color: var(--primary) !important; } html { scroll-behavior: smooth; } body { background: var(--bg); color: var(--ink); font-family: var(--font-body-en); font-size: 15.5px; min-height: 100vh; display: flex; flex-direction: column; } html[dir="rtl"] body { font-family: var(--font-ar); } h1, h2, h3, h4, h5, .display-font, .navbar-brand { font-family: var(--font-en); font-weight: 700; letter-spacing: -.01em; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] .display-font, html[dir="rtl"] .navbar-brand { font-family: var(--font-ar); } main { flex: 1; } a { color: var(--primary); } /* ── Navbar ─────────────────────────────────────────────── */ .td-navbar { background: var(--secondary); padding: .9rem 0; } .td-navbar .navbar-brand { color: #fff; font-size: 1.25rem; display: flex; align-items: center; gap: .6rem; } .td-navbar .navbar-brand img { height: 38px; } .td-navbar .nav-link { color: rgba(255,255,255,.78); font-weight: 500; border-radius: 999px; padding: .45rem 1.05rem !important; transition: .2s; } .td-navbar .nav-link:hover { color: #fff; background: rgba(255,255,255,.08); } .td-navbar .nav-link.active { color: #fff; background: var(--primary); } /* ── Buttons ────────────────────────────────────────────── */ .btn { border-radius: 999px; font-weight: 600; padding: .6rem 1.4rem; } .btn-brand { background: var(--primary); border: none; color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 40%, transparent); } .btn-brand:hover { background: color-mix(in srgb, var(--primary) 88%, black); color: #fff; transform: translateY(-1px); } .btn-navy { background: var(--secondary); border: none; color: #fff; } .btn-navy:hover { background: color-mix(in srgb, var(--secondary) 82%, white); color: #fff; } .btn-ghost { background: var(--secondary-soft); border: 1px solid var(--line); color: var(--secondary); } .btn-ghost:hover { background: var(--line); color: var(--secondary); } /* ── Cards ──────────────────────────────────────────────── */ .td-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.8rem; } .td-card-sm { padding: 1.25rem 1.4rem; } .section-eyebrow { color: var(--primary); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: .74rem; } /* ── Hero ───────────────────────────────────────────────── */ .hero { background: radial-gradient(900px 380px at 85% -10%, color-mix(in srgb, var(--primary) 30%, transparent), transparent 65%), radial-gradient(700px 320px at 8% 110%, color-mix(in srgb, var(--primary) 18%, transparent), transparent 60%), var(--secondary); color: #fff; border-radius: 0 0 34px 34px; padding: 4.2rem 0 5.6rem; position: relative; } .hero h1 { font-size: clamp(1.9rem, 4vw, 3rem); color: #fff; } .hero p.lead { color: rgba(255,255,255,.75); max-width: 620px; } .hero-search { max-width: 640px; background: #fff; border-radius: 999px; padding: .45rem .55rem; display: flex; gap: .5rem; box-shadow: 0 18px 50px rgba(0,0,0,.28); } .hero-search input { border: none; outline: none; flex: 1; padding: .55rem 1rem; border-radius: 999px; font-size: 1rem; background: transparent; } /* ── Category cards ─────────────────────────────────────── */ .cat-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.6rem 1.4rem; text-align: center; height: 100%; transition: .22s; display: block; color: var(--ink); text-decoration: none; } .cat-card:hover { transform: translateY(-5px); border-color: var(--primary); box-shadow: 0 16px 40px color-mix(in srgb, var(--primary) 18%, transparent); color: var(--ink); } .cat-icon { width: 62px; height: 62px; border-radius: 18px; margin: 0 auto 1rem; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 1.5rem; } /* ── Forms ──────────────────────────────────────────────── */ .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--line); padding: .7rem 1rem; } .form-control:focus, .form-select:focus { border-color: var(--primary); box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--primary) 18%, transparent); } .form-label { font-weight: 600; color: var(--secondary); margin-bottom: .4rem; } .form-hint { font-size: .82rem; color: var(--muted); } .required-star { color: var(--danger); } .dropzone { border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 1.6rem; text-align: center; color: var(--muted); cursor: pointer; transition: .2s; background: var(--secondary-soft); } .dropzone:hover, .dropzone.dragover { border-color: var(--primary); color: var(--primary); background: var(--primary-soft); } .thumb { width: 74px; height: 74px; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); } /* ── Priority pills ─────────────────────────────────────── */ .prio-group .btn-check + label { border: 1.5px solid var(--line); background: #fff; color: var(--muted); } .prio-group .btn-check:checked + label { border-color: var(--primary); background: var(--primary-soft); color: var(--primary); font-weight: 700; } /* ── Badges ─────────────────────────────────────────────── */ .badge-status { border-radius: 999px; padding: .42em .95em; font-weight: 600; font-size: .78rem; } .st-new, .st-reopened { background: #eef2ff; color: #4353c7; } .st-assigned { background: var(--primary-soft); color: var(--primary); } .st-in_progress { background: #fff7e6; color: #b97300; } .st-waiting_customer { background: #f3e8ff; color: #8b3fd6; } .st-resolved { background: #e6f9f1; color: var(--success); } .st-closed { background: var(--line); color: var(--muted); } .pr-low { background: #eef2f7; color: var(--muted); } .pr-medium { background: #e8f1ff; color: #2f6fdb; } .pr-high { background: #fff1e6; color: #d96a00; } .pr-urgent { background: #ffe9ea; color: var(--danger); } /* ════════════════════════════════════════════════════════ SIGNATURE — the journey rail (ticket progress checklist) ════════════════════════════════════════════════════════ */ .journey { position: relative; padding-inline-start: 2.4rem; } .journey::before { content: ""; position: absolute; inset-inline-start: 13px; top: 12px; bottom: 12px; width: 4px; background: var(--line); border-radius: 999px; } .journey::after { content: ""; position: absolute; inset-inline-start: 13px; top: 12px; width: 4px; border-radius: 999px; height: calc((100% - 24px) * var(--journey-progress, 0)); background: linear-gradient(180deg, var(--primary), color-mix(in srgb, var(--primary) 60%, var(--secondary))); transition: height 1.1s cubic-bezier(.4, 0, .2, 1); } .journey-step { position: relative; padding-block: .95rem; } .journey-dot { position: absolute; inset-inline-start: -2.4rem; top: 1rem; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--line); display: grid; place-items: center; color: transparent; font-size: .72rem; z-index: 1; transition: .4s; } .journey-step.done .journey-dot { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary) 18%, transparent); } .journey-step.current .journey-dot { border-color: var(--primary); color: var(--primary); animation: pulse 1.8s infinite; } @keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 35%, transparent);} 50% { box-shadow: 0 0 0 10px transparent; } } .journey-step h6 { margin: 0; font-size: .95rem; } .journey-step small { color: var(--muted); } .journey-step.pending h6 { color: var(--muted); font-weight: 500; } /* Progress bar above the rail */ .progress-brand { height: 12px; border-radius: 999px; background: var(--line); overflow: hidden; } .progress-brand .bar { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 55%, var(--secondary))); transition: width 1.1s cubic-bezier(.4,0,.2,1); } /* ── Conversation thread ────────────────────────────────── */ .msg { max-width: 78%; padding: .95rem 1.2rem; border-radius: var(--radius-sm); margin-bottom: 1rem; position: relative; } .msg small { display: block; margin-top: .35rem; opacity: .7; font-size: .74rem; } .msg-agent { background: var(--secondary); color: #fff; margin-inline-start: auto; border-end-end-radius: 4px; } .msg-customer { background: #fff; border: 1px solid var(--line); border-end-start-radius: 4px; } .msg-system { background: var(--secondary-soft); color: var(--muted); font-size: .85rem; max-width: 100%; text-align: center; } /* ── OTP inputs ─────────────────────────────────────────── */ .otp-inputs { display: flex; gap: .7rem; justify-content: center; direction: ltr; } .otp-inputs input { width: 54px; height: 66px; text-align: center; font-size: 1.7rem; font-weight: 800; color: var(--secondary); border: 2px solid var(--line); border-radius: 14px; outline: none; transition: .18s; background: #fff; } .otp-inputs input:focus { border-color: var(--primary); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 20%, transparent); transform: translateY(-2px); } .otp-inputs input.filled { border-color: var(--secondary); background: var(--secondary-soft); } /* ── KPI tiles ──────────────────────────────────────────── */ .kpi { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem 1.5rem; height: 100%; } .kpi .val { font-family: var(--font-en); font-size: 1.9rem; font-weight: 800; color: var(--secondary); line-height: 1.1; } html[dir="rtl"] .kpi .val { font-family: var(--font-ar); } .kpi .lbl { color: var(--muted); font-size: .84rem; font-weight: 600; } .kpi .ic { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); font-size: 1.15rem; } /* ── Tables ─────────────────────────────────────────────── */ .table-wrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .table-wrap .table { margin: 0; } .table thead th { background: var(--secondary-soft); color: var(--secondary); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 1px solid var(--line); padding: .85rem 1rem; } .table tbody td { padding: .8rem 1rem; vertical-align: middle; border-color: var(--line); } .table tbody tr:hover { background: var(--secondary-soft); } /* ── Notes / todos ──────────────────────────────────────── */ .note-item { background: #fffaf1; border: 1px solid #f4e3c2; border-radius: var(--radius-sm); padding: .8rem 1rem; margin-bottom: .7rem; font-size: .9rem; } .todo-item { display: flex; align-items: center; gap: .65rem; padding: .55rem .3rem; border-bottom: 1px dashed var(--line); } .todo-item.done label { text-decoration: line-through; color: var(--muted); } /* ── FAQ accordion ──────────────────────────────────────── */ .accordion-item { border: 1px solid var(--line); border-radius: var(--radius-sm) !important; margin-bottom: .8rem; overflow: hidden; } .accordion-button { font-weight: 600; color: var(--secondary); padding: 1.05rem 1.3rem; } .accordion-button:not(.collapsed) { background: var(--primary-soft); color: var(--primary); box-shadow: none; } .accordion-button:focus { box-shadow: none; border-color: var(--line); } /* ── Footer ─────────────────────────────────────────────── */ .td-footer { background: var(--secondary); color: rgba(255,255,255,.65); padding: 1.6rem 0; margin-top: 4rem; font-size: .88rem; } .td-footer a { color: var(--primary); text-decoration: none; } /* ── Rating stars/segments ──────────────────────────────── */ .rate-seg { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; direction: ltr; } .rate-seg button { width: 46px; height: 52px; border-radius: 13px; border: 2px solid var(--line); background: #fff; font-weight: 800; font-size: 1.05rem; color: var(--muted); transition: .16s; } .rate-seg button:hover { transform: translateY(-3px); border-color: var(--primary); color: var(--primary); } .rate-seg button.sel { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 40%, transparent); } /* ── Misc ───────────────────────────────────────────────── */ .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--secondary); color: #fff; display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700; } .ticket-num { font-family: var(--font-en); font-weight: 700; color: var(--secondary); letter-spacing: .02em; } ::selection { background: color-mix(in srgb, var(--primary) 30%, transparent); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ── Print (Export ticket as PDF via browser) ───────────── */ @media print { body { background: #fff; } .no-print { display: none !important; } .td-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } .print-header { border-bottom: 4px solid var(--primary); padding-bottom: 12px; margin-bottom: 20px; } /* .msg-agent { background: #eef2f7 !important; color: #000 !important; -webkit-print-color-adjust: exact; } */ a { color: #000; text-decoration: none; } }