/* ETC Agency OS — visual identity matched to the real ETC marketing site
(etc-adv.com), verified against its live computed styles: deep navy
background #0A0E27, Inter typeface, bright cyan accent #00AEEF fading to
a deep navy #1B2A6B, pill buttons with that gradient glow, uppercase
eyebrow labels, white text on the accent gradient. This IS the mockup's
design language (same cards/hero/tabs/radius) — only the placeholder
colors/font the mockup used during prototyping are swapped for the
agency's real brand values, confirmed live on the site. */
:root {
/* Base surfaces — full dark theme throughout, like the real site */
--navy: #0A0E27; /* page background — exact site value */
--navy-light: #10182f; /* card/panel surface, one step lighter */
--navy-lighter: #182349; /* hover / raised surface */
--sidebar-bg: #060915; /* sidebar, a shade darker than the page for separation */
/* Brand accent — exact site values */
--primary: #00AEEF; /* the site's one accent color */
--primary-dark: #0090c7;
--gradient: linear-gradient(135deg, #1B2A6B 0%, #00AEEF 100%); /* site's CTA gradient */
--accent: #00AEEF; /* kept as an alias so old template refs still work */
--sky: #7cd2ef;
--amber: #f59e0b;
--danger: #f87171;
--text: #E2E8F0; /* headings / primary text on dark */
--heading: #fff; /* bold white headings/emphasis text */
--muted: #94A3B8; /* site's muted paragraph color, exact value */
--border: rgba(255,255,255,.09);
--bg: var(--navy);
--card: var(--navy-light);
--radius: 16px;
}
* { box-sizing: border-box; }
html, body {
margin: 0; padding: 0;
background: var(--bg);
color: var(--text);
font-family: 'Inter', 'Cairo', 'Segoe UI', Tahoma, Arial, sans-serif;
direction: rtl;
}
/* Faint ETC watermark, fixed in the bottom-left corner of every page — sits
behind all content (cards paint over it; it only shows through the flat
page background). ltr-positioned on purpose: "الكورنر الشمال" means the
physical left edge of the screen regardless of the page's own RTL flow. */
body::before {
content: '';
position: fixed;
bottom: -60px; left: -60px;
width: 440px; height: 440px;
background: url('../img/etc-logo-light.svg') no-repeat center / contain;
opacity: .09;
pointer-events: none;
z-index: 0;
}
/* ---------------------------------------------------------------------
Site-wide ambient background — lifted verbatim from the real ETC site's
hero section (orb blobs + drifting particles), extended to cover every
page instead of just one section. Same colors/timings/keyframe math.
--------------------------------------------------------------------- */
@keyframes orbFloat {
0%, 100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.04); }
}
@keyframes particleFade {
0% { opacity: 0; transform: translateY(0); }
10% { opacity: .7; transform: translateY(-20px); }
90% { opacity: .1; transform: translateY(-110px); }
100% { opacity: 0; transform: translateY(-130px); }
}
.orbs-bg {
position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0;
}
.hero-bg-orb {
position: absolute; border-radius: 50%;
filter: blur(100px); pointer-events: none;
animation: orbFloat 8s ease-in-out infinite;
}
.orb1 { width: 600px; height: 600px; background: rgba(27, 42, 107, .45); top: -5%; left: -15%; animation-delay: 0s; }
.orb2 { width: 450px; height: 450px; background: rgba(0, 174, 239, .18); bottom: 0; right: -10%; animation-delay: -4s; }
#particles { position: absolute; inset: 0; pointer-events: none; }
.particle {
position: absolute; width: 3px; height: 3px;
background: var(--primary); border-radius: 50%; opacity: 0;
animation: particleFade var(--dur) linear var(--delay) infinite;
}
a { color: inherit; text-decoration: none; }
.shell { display: flex; flex-direction: column; min-height: 100vh; }
/* ---------- Top nav (horizontal — replaces the old sidebar) ---------- */
.topnav {
/* Merged visually with the page background (منعم: "خليهم الإتنين أكنهم
حاجه واحده") — same solid color as .main/body instead of its own
gradient+border, so the bar reads as part of the page, not a separate
panel. Still position:sticky + opaque so content scrolling under it
doesn't bleed through. */
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; gap: 22px;
background: var(--bg);
padding: 18px 26px;
}
.brand { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.brand .brand-logo { height: 34px; width: auto; flex-shrink: 0; }
.brand .name { font-weight: 800; font-size: 16px; letter-spacing: .3px; white-space: nowrap; color: var(--heading); }
.brand .name span { color: var(--primary); }
.nav-row { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav-row::-webkit-scrollbar { display: none; }
.nav-item {
display: flex; align-items: center; gap: 7px; padding: 11px 15px; border-radius: 10px;
color: var(--muted); font-size: 13.5px; font-weight: 600; cursor: pointer;
white-space: nowrap; transition: .15s; border: none; background: transparent; font-family: inherit;
}
.nav-item .ic { opacity: .85; }
.nav-item:hover { background: rgba(255,255,255,.06); color: var(--heading); transform: translateY(-1px); }
.nav-item.active { background: var(--gradient); color: #fff; font-weight: 800; box-shadow: 0 6px 18px -8px rgba(0,174,239,.5); }
.nav-item.disabled { opacity: .35; cursor: default; pointer-events: none; }
.nav-divider { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; flex: 0 0 auto; }
.util-row { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }
.util-btn {
width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border);
background: transparent; color: var(--muted); display: flex; align-items: center; justify-content: center;
cursor: pointer; font-size: 14px; position: relative; transition: .15s;
}
.util-btn:hover { border-color: var(--primary); color: var(--primary); }
.util-btn .badge {
position: absolute; top: -5px; left: -5px; background: var(--danger); color: #fff;
font-size: 9px; font-weight: 800; min-width: 15px; height: 15px; border-radius: 100px;
display: flex; align-items: center; justify-content: center; padding: 0 3px;
}
.status-pill {
display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted);
border: 1px solid var(--border); padding: 6px 10px; border-radius: 100px; white-space: nowrap;
}
.status-pill .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.user-chip { position: relative; }
.user-chip summary {
display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; border-radius: 100px;
border: 1px solid var(--border); cursor: pointer; list-style: none;
}
.user-chip summary::-webkit-details-marker { display: none; }
.user-chip .av {
width: 26px; height: 26px; border-radius: 50%;
background: linear-gradient(135deg, #b38af0, var(--primary));
display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; color: #12102a;
flex-shrink: 0;
}
.user-chip .uname { font-size: 12px; font-weight: 700; color: var(--heading); }
.user-chip[open] summary { border-color: var(--primary); }
.user-menu {
position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40;
min-width: 160px; background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 10px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
}
.user-menu .um-role { font-size: 11px; color: var(--primary); font-weight: 700; padding: 4px 8px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.user-menu .um-logout { display: block; padding: 6px 8px; font-size: 12.5px; font-weight: 700; color: #fca5a5; border-radius: 8px; }
.user-menu .um-logout:hover { background: rgba(248,113,113,.1); }
.user-menu button.um-logout { width: 100%; background: transparent; border: none; text-align: start; font-family: inherit; cursor: pointer; }
/* ---------- Notifications bell dropdown ---------- */
.notif-chip { position: relative; }
.notif-chip summary { list-style: none; }
.notif-chip summary::-webkit-details-marker { display: none; }
.notif-chip[open] summary { border-color: var(--primary); color: var(--primary); }
.notif-menu {
position: absolute; inset-inline-end: 0; top: calc(100% + 8px); z-index: 40;
min-width: 280px; max-width: 320px; max-height: 360px; overflow-y: auto;
background: var(--card); border: 1px solid var(--border); border-radius: 12px;
padding: 10px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.6);
}
.notif-menu-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 2px 8px; border-bottom: 1px solid var(--border); margin-bottom: 6px; }
.notif-bulk-btn { background: none; border: none; color: var(--muted); font-size: 10.5px; font-family: inherit; cursor: pointer; padding: 0; }
.notif-bulk-btn:hover { color: var(--primary); text-decoration: underline; }
.notif-bulk-btn.danger:hover { color: var(--danger); }
.notif-row { display: flex; align-items: center; gap: 2px; }
.notif-item {
display: block; width: 100%; text-align: right; background: transparent; border: none;
border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: var(--text);
font-family: inherit; cursor: pointer;
}
.notif-item:hover { background: rgba(255,255,255,.04); }
.notif-item.unread { font-weight: 800; }
.notif-item.unread::before { content: '●'; color: var(--primary); font-size: 8px; margin-inline-end: 6px; }
.notif-del-btn {
flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; border: none; background: transparent;
color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1;
}
.notif-del-btn:hover { background: rgba(248,113,113,.15); color: var(--danger); }
/* ---------- Main content ---------- */
.main { flex: 1; min-width: 0; padding: 26px 34px 60px; max-width: 1180px; margin: 0 auto; width: 100%; animation: pageFadeIn .3s ease; }
/* مهم: الـanimation شيلنا منها كلمة "both" قصدًا. طول ما الأنيميشن شغّالة —
حتى لو خلصت وهي "ماسكة" آخر حالة بـfill-mode:both — الـtransform بتاعها
بيفضل computed كـmatrix(...) مش "none" الحرفية، وده وحده كفاية إن .main
يبقى containing block لأي عنصر position:fixed جواه (زي أي .overlay مودال)
— يعني المودال بيتحط نسبي لـ.main الطويلة بدل نص الشاشة فعليًا، وده اللي
كان بيخلي أي مودال في الصفحة يحتاج سكرول كتير عشان توصله. من غير "both"،
الأنيميشن بترجع للقيمة العادية (transform: none) فور ما تخلص، ومشكلة
الـcontaining block بتتحل تمامًا. */
@keyframes pageFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 10px; }
.page-header h1 { font-size: 22px; margin: 0; color: #fff; font-weight: 800; }
.page-header .subtitle { font-size: 13px; color: var(--muted); margin-top: 2px; }
/* ---------- Buttons — pill shape + gradient glow, matching the site exactly ---------- */
.btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 20px; border-radius: 50px;
font-family: inherit; font-weight: 700; font-size: 13px;
letter-spacing: .02em;
border: none; cursor: pointer; text-align: center;
}
.btn-primary { background: var(--gradient); color: #fff; box-shadow: 0 4px 20px rgba(0,174,239,.3); }
.btn-primary:hover { filter: brightness(1.08); }
.btn-outline { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); }
.btn-outline:hover { background: rgba(0,174,239,.1); }
.btn-danger { background: rgba(248,113,113,.12); color: var(--danger); border: 1.5px solid rgba(248,113,113,.4); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 7px 14px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* ---------- Cards / tables ---------- */
.card { background: var(--card); border-radius: var(--radius); border: 1px solid var(--border); padding: 20px; }
.card + .card { margin-top: 16px; }
table.data-table { width: 100%; border-collapse: collapse; }
table.data-table th { text-align: right; font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; padding: 10px 12px; border-bottom: 1px solid var(--border); }
table.data-table td { padding: 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; color: var(--text); }
table.data-table tr:hover td { background: rgba(255,255,255,.02); }
.badge { display: inline-block; padding: 4px 12px; border-radius: 50px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.badge-admin { background: rgba(0,174,239,.15); color: var(--primary); }
.badge-manager { background: rgba(16,185,129,.15); color: #34d399; }
.badge-viewer { background: rgba(148,163,184,.15); color: var(--muted); }
/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-field { margin-bottom: 14px; }
.form-field label { display: block; font-size: 12.5px; font-weight: 700; color: var(--text); margin-bottom: 6px; }
.form-field input[type=text], .form-field input[type=email], .form-field input[type=password],
.form-field input[type=number], .form-field input[type=date], .form-field input[type=url],
.form-field select, .form-field textarea {
width: 100%; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--border);
font-family: inherit; font-size: 13.5px; background: rgba(255,255,255,.03); color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--primary); }
.form-field .hint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.checkbox-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
/* ---------- Toggle switch (on/off) — used app-wide for "نشط/متوقف" fields ---------- */
.toggle-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; font-size: 13.5px; font-weight: 700; color: var(--text); }
.toggle-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-switch .toggle-track {
position: absolute; inset: 0; cursor: pointer; background: rgba(255,255,255,.12);
border: 1.5px solid var(--border); border-radius: 999px; transition: background .18s, border-color .18s;
}
.toggle-switch .toggle-track::before {
content: ""; position: absolute; height: 18px; width: 18px; left: 2px; top: 2px;
background: #fff; border-radius: 50%; transition: transform .18s;
box-shadow: 0 1px 3px rgba(0,0,0,.35);
}
.toggle-switch input:checked + .toggle-track { background: var(--primary); border-color: var(--primary); }
.toggle-switch input:checked + .toggle-track::before { transform: translateX(20px); }
.toggle-switch input:focus-visible + .toggle-track { outline: 2px solid var(--primary); outline-offset: 2px; }
.toggle-row .toggle-state { color: var(--muted); font-weight: 600; }
.toggle-row .toggle-state.is-on { color: var(--accent); font-weight: 800; }
/* ---------- Alerts ---------- */
.alerts { margin-bottom: 16px; }
.alert { padding: 11px 16px; border-radius: 10px; font-size: 13px; font-weight: 700; margin-bottom: 8px; border-inline-start: 3px solid transparent; }
.alert-success { background: rgba(16,185,129,.1); color: #34d399; border-inline-start-color: #34d399; }
.alert-error { background: rgba(248,113,113,.1); color: #f87171; border-inline-start-color: #f87171; }
.alert-warning { background: rgba(245,158,11,.1); color: #fbbf24; border-inline-start-color: #fbbf24; }
/* ---------- Auth pages ---------- */
.auth-shell {
min-height: 100vh; display: flex; align-items: center; justify-content: center;
background: radial-gradient(ellipse at 30% 20%, #131c44 0%, var(--navy) 55%);
position: relative; overflow: hidden;
}
.auth-card {
width: 100%; max-width: 380px; background: var(--navy-light);
border: 1px solid var(--border);
border-radius: 20px; padding: 34px 30px;
box-shadow: 0 25px 60px rgba(0,0,0,.5);
position: relative; z-index: 1;
}
.auth-card h1 { font-size: 20px; text-align: center; color: #fff; margin: 0 0 4px; font-weight: 800; }
.auth-card .tag { text-align: center; font-size: 11.5px; color: var(--primary); margin-bottom: 22px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
/* ---------- Empty state / coming soon ---------- */
.empty-state { text-align: center; padding: 60px 20px; color: var(--muted); }
.empty-state .icon { font-size: 34px; margin-bottom: 10px; }
.company-tabs { display: flex; gap: 10px; margin-bottom: 24px; flex-wrap: wrap; }
.company-tab-card {
display: flex; align-items: center; gap: 8px; padding: 12px 18px; border-radius: 14px;
background: var(--card); border: 1.5px solid var(--border); color: var(--muted); font-size: 13px; font-weight: 700;
transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease, box-shadow .18s ease;
animation: cardPop .4s ease both;
}
.company-tab-card .ctc-ic { font-size: 16px; }
.company-tab-card:hover { color: var(--text); border-color: rgba(255,255,255,.2); transform: translateY(-2px); }
.company-tab-card.active {
color: var(--primary); border-color: var(--primary); background: rgba(0,174,239,.1);
box-shadow: 0 10px 24px -14px rgba(0,174,239,.5);
}
.company-tab-card.disabled { opacity: .4; pointer-events: none; }
/* ---------- Small "eyebrow" label — site's uppercase pill pattern ---------- */
.eyebrow {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 50px;
background: rgba(0,174,239,.12); color: var(--primary);
font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
/* ---------- Planning / content calendar ---------- */
.month-pills { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 18px; }
.month-pill {
padding: 8px 18px; border-radius: 50px; font-size: 12.5px; font-weight: 800;
color: var(--muted); border: 1.5px solid var(--border); background: transparent;
}
.month-pill.active { background: var(--gradient); color: #fff; border-color: transparent; box-shadow: 0 4px 16px rgba(0,174,239,.25); }
.month-pill-add { display: flex; align-items: center; gap: 6px; }
.month-pill-add input {
padding: 8px 12px; border-radius: 50px; border: 1.5px solid var(--border);
background: rgba(255,255,255,.03); color: var(--text); font-size: 12.5px; width: 150px;
}
.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.post-card { background: var(--card); border: 1px solid var(--border); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.post-thumb {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
background: rgba(255,255,255,.03);
}
.post-thumb-empty {
width: 100%; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center;
font-size: 30px; color: var(--muted); background: rgba(255,255,255,.03);
}
.post-body { padding: 12px 14px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.post-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.post-tag { font-size: 10px; font-weight: 800; padding: 3px 10px; border-radius: 50px; background: rgba(255,255,255,.06); color: var(--muted); }
.post-tag-done { background: rgba(16,185,129,.15); color: #34d399; }
.post-tag-ad { background: rgba(245,158,11,.15); color: #fbbf24; }
.post-title { font-size: 13.5px; font-weight: 800; color: #fff; line-height: 1.4; }
.post-caption { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.5; }
.post-actions { display: flex; gap: 6px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--border); }
.post-actions form { display: contents; }
@media (max-width: 860px) {
.form-grid { grid-template-columns: 1fr; }
.util-row .status-pill { display: none; }
}
/* ---------------------------------------------------------------------
Invoices — data table + print
--------------------------------------------------------------------- */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td { padding: 12px 16px; text-align: right; border-bottom: 1px solid var(--border); }
.data-table th { color: var(--muted); font-weight: 700; font-size: 11.5px; text-transform: none; }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tfoot td { border-top: 2px solid var(--border); border-bottom: none; color: #fff; }
/* .pdf-header/.pdf-footer (اللوجو + ورقة الخطاب الرسمية) مصممين بس
لطباعة/PDF فعلي — أبعادهم وتموضعهم كلهم متعرّفين جوه @media print تحت.
من غير القاعدة دي، الصور بترندر بحجمها الطبيعي الكامل على الشاشة
العادية (مش جوه طباعة)، وده كان بيولّد مساحة فاضية ضخمة قبل محتوى
الفاتورة الفعلي — عرض الفاتورة جوه البرنامج مفروض يبقى شاشة عادية
نضيفة، مش نسخة طباعة مصغّرة. */
.pdf-header, .pdf-footer { display: none; }
.invoice-balance-summary { margin-top: 16px; max-width: 340px; margin-inline-start: auto; }
.ibs-row { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--border); }
.ibs-row span:last-child { color: var(--text); font-weight: 700; }
.ibs-row.ibs-total { border-bottom: none; border-top: 2px solid var(--border); margin-top: 4px; padding-top: 10px; font-size: 14px; font-weight: 800; }
.ibs-row.ibs-total span { color: #fff; }
.ibs-row .balance-due-paid { color: #34d399 !important; }
.ibs-row .balance-due-unpaid { color: #f87171 !important; }
.ibs-paid-banner {
display: flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 12px 16px;
border-radius: 10px; background: rgba(16,185,129,.12); border: 1.5px solid rgba(52,211,153,.4);
color: #34d399; font-weight: 800; font-size: 14px;
}
@media print {
/* لازم عشان المتصفح افتراضيًا بيشيل خلفيات/صور الطباعة (توفير حبر) لو
خيار "Background graphics" في نافذة الطباعة مش متفعّل — ده اللي كان
بيمسح ورقة الـLetter كاملة. الخاصية دي بتجبره يطبعها زي ما هي. */
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; }
.no-print, .topnav, .alerts, .orbs-bg { display: none !important; }
body::before { display: none !important; }
.shell { display: block; }
.main { padding: 0; max-width: none; margin: 0; }
body { background: #fff; color: #111; }
.card, .invoice-print-sheet { background: #fff; border-color: #ddd; color: #111; box-shadow: none; }
.data-table th, .data-table td { color: #111; border-color: #ddd; }
.hint { color: #555; }
/* الورقة الرسمية الموحّدة (Letter.svg اللي بعتها منعم) — أي PDF في
البرنامج لازم يستخدمها. @page بيظبط مقاس A4.
مهم (تجربة أولى فشلت): استخدمنا background-image كـCSS في الأول —
لكن المتصفحات (كروم بالذات) بتطبع خلفيات CSS بس لو خيار "Background
graphics" متفعّل يدويًا في نافذة الطباعة، وproperty زي
print-color-adjust:exact بتضمن الألوان الصلبة بس مش الصور. عشان كده
اللوجو (لأنه ![]()
حقيقي) كان بيطبع، والورقة (خلفية CSS) كانت
بتختفي. الحل: نخلي الورقة نفسها ![]()
حقيقي زيه بالظبط — أي عنصر
![]()
بيتطبع دايمًا بغض النظر عن إعدادات المتصفح. بنعمل القص (هيدر
فوق/فوتر تحت) بحاوية overflow:hidden بدل ما نعتمد على background. */
@page { size: A4; margin: 0; }
body { margin: 0; }
.invoice-print-sheet {
background: #fff;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
box-sizing: border-box;
}
.pdf-header, .pdf-footer { display: block; position: relative; overflow: hidden; }
.pdf-header { height: 150px; }
.pdf-footer { height: 120px; }
.pdf-letterhead-crop {
position: absolute; left: 50%; top: 0;
width: 794px; height: 1123px; max-width: none;
transform: translateX(-50%);
}
.pdf-footer .pdf-letterhead-crop { top: auto; bottom: 0; }
.pdf-header .pdf-logo { position: absolute; top: 30px; left: 46px; height: 48px; z-index: 2; }
.pdf-body { padding: 24px 50px; }
}
/* ---------------------------------------------------------------------
Services settings — catalog admin screen (categories / services / vendors)
see claude/services-settings-data-model-spec.md for the data model this
screen is built on.
--------------------------------------------------------------------- */
.hint { font-size: 11px; color: var(--muted); }
.cat-tabs { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 22px; }
.cat-tab {
background: var(--card); border: 1px solid var(--border); border-radius: 14px;
padding: 13px 16px; cursor: pointer; min-width: 150px; transition: .15s; position: relative;
}
.cat-tab:hover { border-color: var(--primary); }
.cat-tab.active {
border-color: var(--primary);
box-shadow: 0 0 0 1px var(--primary), 0 8px 24px -12px rgba(0,174,239,.35);
background: linear-gradient(180deg, rgba(0,174,239,.08), transparent);
}
.cat-tab .cat-name { font-weight: 800; font-size: 13.5px; color: #fff; }
.cat-tab .cat-count { color: var(--muted); font-size: 11.5px; margin-top: 4px; }
.cat-tab .cat-tab-actions { position: absolute; top: 8px; left: 8px; display: flex; gap: 4px; opacity: 0; transition: .15s; }
.cat-tab:hover .cat-tab-actions { opacity: 1; }
.cat-tab.add-cat {
display: flex; align-items: center; justify-content: center; min-width: 52px;
border-style: dashed; color: var(--muted); font-weight: 800; font-size: 12.5px;
}
.cat-tab.add-cat:hover { color: var(--primary); border-color: var(--primary); }
.icon-btn-mini {
width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
background: var(--navy); color: var(--muted); cursor: pointer; font-size: 11px;
display: flex; align-items: center; justify-content: center;
}
.icon-btn-mini:hover { border-color: var(--primary); color: var(--primary); }
.icon-btn-mini.danger:hover { border-color: var(--danger); color: var(--danger); }
.panel { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 10px; }
.panel-head h2 { font-size: 15.5px; margin: 0; font-weight: 800; color: #fff; }
.panel-head p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.svc-name { font-weight: 700; font-size: 13.5px; color: #fff; }
.svc-name .svc-note { display: block; color: var(--muted); font-size: 11px; font-weight: 400; margin-top: 2px; }
.price-cell { display: flex; align-items: baseline; gap: 5px; }
.price-cell .amount { font-weight: 800; font-size: 14px; color: #fff; }
.price-cell .cur { font-size: 11px; color: var(--muted); }
.default-flag {
display: inline-block; margin-inline-start: 6px; font-size: 9.5px; color: var(--muted);
border: 1px solid var(--border); padding: 1px 6px; border-radius: 100px;
}
.unit-pill { color: var(--muted); font-size: 12px; }
.method-badge {
display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 100px;
font-size: 11.5px; font-weight: 700;
}
.method-badge.third_party { background: rgba(245,158,11,.12); color: var(--amber); }
.method-badge.internal { background: rgba(0,174,239,.14); color: var(--primary); }
.method-badge.social_contract { background: rgba(179,138,240,.14); color: #b38af0; }
.method-badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.icon-btn {
width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--border);
background: transparent; color: var(--muted); cursor: pointer; font-size: 13px;
display: flex; align-items: center; justify-content: center; transition: .15s;
}
.icon-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,174,239,.08); }
.icon-btn.danger:hover { border-color: var(--danger); color: var(--danger); background: rgba(248,113,113,.1); }
.add-row-bar { padding: 14px 20px; }
.add-row-btn {
width: 100%; border: 1px dashed var(--border); background: transparent; color: var(--muted);
padding: 12px; border-radius: 10px; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 12.5px;
transition: .15s;
}
.add-row-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,174,239,.06); }
.hint-box {
display: flex; gap: 10px; align-items: flex-start; background: var(--navy-light);
border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin: 20px 0 0;
color: var(--muted); font-size: 12px; line-height: 1.9;
}
.hint-box .ic { color: var(--primary); font-size: 16px; }
th.col-toggle, td.col-toggle { width: 34px; padding-left: 6px; padding-right: 16px; }
.toggle-btn {
width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--border);
background: transparent; color: var(--muted); cursor: pointer; font-size: 10px;
display: flex; align-items: center; justify-content: center; transition: .15s;
}
.toggle-btn.disabled { opacity: .25; cursor: default; pointer-events: none; }
.toggle-btn:not(.disabled):hover { border-color: var(--primary); color: var(--primary); }
tr.vendors-row td { padding: 0; border-bottom: 1px solid var(--border); }
.vendors-wrap { background: var(--sidebar-bg); padding: 14px 20px 16px 54px; }
.vendors-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.vendors-head .lbl { font-size: 11.5px; font-weight: 800; color: var(--muted); }
table.vendor-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.vendor-table th { text-align: right; color: var(--muted); font-weight: 700; font-size: 10.5px; padding: 6px 12px; border-bottom: 1px solid var(--border); }
table.vendor-table td { padding: 9px 12px; vertical-align: middle; }
table.vendor-table tr:not(:last-child) td { border-bottom: 1px dashed var(--border); }
.vendor-name { font-weight: 700; color: #fff; }
.vendor-name .vn-note { display: block; color: var(--muted); font-weight: 400; font-size: 10.5px; margin-top: 1px; }
.default-vendor-badge {
font-size: 9.5px; font-weight: 800; color: #34d399; border: 1px solid rgba(52,211,153,.3);
background: rgba(52,211,153,.1); padding: 1px 7px; border-radius: 100px; margin-inline-start: 6px;
}
.margin-cell { font-size: 11.5px; }
.margin-cell .m-good { color: #34d399; font-weight: 800; }
.margin-cell .m-bad { color: var(--danger); font-weight: 800; }
.margin-cell .m-label { color: var(--muted); font-size: 10px; display: block; }
.add-vendor-btn {
border: 1px dashed var(--border); background: transparent; color: var(--muted);
padding: 6px 12px; border-radius: 8px; cursor: pointer; font-family: inherit; font-size: 11.5px; font-weight: 700;
transition: .15s;
}
.add-vendor-btn:hover { border-color: var(--primary); color: var(--primary); background: rgba(0,174,239,.08); }
.no-vendors { color: var(--muted); font-size: 11.5px; padding: 6px 2px 2px; }
/* ===== Modal overlay (shared by category / service / vendor forms) ===== */
.overlay {
position: fixed; inset: 0; background: rgba(5,9,20,.65); backdrop-filter: blur(3px);
display: none; align-items: center; justify-content: center; z-index: 50; padding: 20px;
}
.overlay.open { display: flex; }
.modal {
width: 440px; max-width: 100%; background: var(--navy-light); border: 1px solid var(--border);
border-radius: 18px; padding: 24px; box-shadow: 0 30px 60px -20px rgba(0,0,0,.6);
max-height: 90vh; overflow-y: auto;
}
.modal h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: #fff; }
.modal .sub { color: var(--muted); font-size: 12px; margin: 0 0 18px; }
.modal-actions { display: flex; gap: 10px; margin-top: 18px; }
.modal-actions .btn { flex: 1; justify-content: center; }
.btn-cancel { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.btn-cancel:hover { color: var(--text); }
/* ---------------------------------------------------------------------
Client profile — hero header (countdown + stats), project cards,
client-settings assign layout. See claude/services-settings-data-model-
spec.md and the approved client-profile mockup for the design this is
built from.
--------------------------------------------------------------------- */
.breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); margin-bottom: 10px; }
.breadcrumb a { color: var(--muted); }
.breadcrumb .sep { opacity: .5; }
.breadcrumb .cur { color: var(--primary); font-weight: 700; }
.client-hero {
background: linear-gradient(160deg, var(--card) 0%, var(--navy) 100%);
border: 1px solid var(--border); border-radius: 20px; padding: 22px 24px; margin-bottom: 20px;
}
.hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.hero-id { display: flex; align-items: center; gap: 14px; }
.hero-avatar {
width: 54px; height: 54px; border-radius: 14px; flex-shrink: 0;
background: linear-gradient(135deg, #b38af0, var(--primary));
display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 18px; color: #12102a;
}
.hero-logo-slot { position: relative; flex-shrink: 0; }
.hero-avatar-img { object-fit: cover; }
.hero-logo-upload-btn {
position: absolute; bottom: -4px; left: -4px; width: 20px; height: 20px; border-radius: 50%;
background: var(--primary); color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 10px; cursor: pointer; border: 2px solid var(--card);
}
.hero-logo-upload-btn input[type="file"] { display: none; }
.hero-name-row { display: flex; align-items: center; gap: 8px; }
.hero-left { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.hero-id h1 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: #fff; }
.hero-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hero-tag { font-size: 10.5px; font-weight: 800; padding: 3px 10px; border-radius: 100px; background: rgba(0,174,239,.12); color: var(--primary); }
.hero-status { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #34d399; font-weight: 700; }
.hero-status .dot { width: 6px; height: 6px; border-radius: 50%; background: #34d399; }
.hero-status.expired { color: var(--danger); }
.hero-status.expired .dot { background: var(--danger); }
.hero-actions { display: flex; gap: 8px; }
.countdown-wrap { margin-top: 18px; }
.countdown-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
.countdown-head .lbl { color: var(--muted); }
.countdown-head .val { font-weight: 700; color: var(--text); }
.countdown-head .val b { color: var(--primary); font-size: 14px; }
.countdown-bar { height: 10px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.countdown-fill {
height: 100%; border-radius: 100px; background: var(--gradient);
width: var(--pct, 0%);
animation: growBar 1s cubic-bezier(.16,.84,.44,1) both;
}
@keyframes growBar { from { width: 0%; } to { width: var(--pct, 0%); } }
.countdown-dates { display: flex; justify-content: space-between; margin-top: 6px; font-size: 10.5px; color: var(--muted); }
.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 20px; }
.stat-card {
background: rgba(255,255,255,.03); border: 1px solid var(--border); border-radius: 14px; padding: 14px 16px;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
animation: cardPop .4s ease both;
}
.stat-card:hover { transform: translateY(-3px) scale(1.02); border-color: var(--primary); box-shadow: 0 14px 30px -14px rgba(0,174,239,.4); }
.stat-row .stat-card:nth-child(1) { animation-delay: .05s; }
.stat-row .stat-card:nth-child(2) { animation-delay: .12s; }
.stat-row .stat-card:nth-child(3) { animation-delay: .19s; }
@keyframes cardPop { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } }
.stat-lbl { font-size: 11px; color: var(--muted); }
.stat-val { font-size: 19px; font-weight: 800; color: #fff; margin-top: 8px; }
.stat-val small { font-size: 11px; color: var(--muted); font-weight: 600; }
@media (max-width: 700px) {
.stat-row { grid-template-columns: 1fr; }
}
/* ===== Project cards (نظرة عامة) ===== */
.svc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.svc-card {
background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 16px; display: block;
transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
animation: cardPop .4s ease both;
}
.svc-grid .svc-card:nth-child(1) { animation-delay: .05s; }
.svc-grid .svc-card:nth-child(2) { animation-delay: .1s; }
.svc-grid .svc-card:nth-child(3) { animation-delay: .15s; }
.svc-grid .svc-card:nth-child(4) { animation-delay: .2s; }
.svc-card:hover { border-color: var(--primary); transform: translateY(-4px) scale(1.02); box-shadow: 0 16px 34px -16px rgba(0,174,239,.45); }
.sc-cat { font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.sc-name { font-size: 14px; font-weight: 800; margin: 4px 0 8px; color: #fff; }
.sc-price { font-size: 16px; font-weight: 800; color: var(--primary); }
.sc-price small { font-size: 10.5px; color: var(--muted); font-weight: 600; }
.sc-method { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; padding: 3px 9px; border-radius: 100px; margin-top: 10px; }
.sc-method.third_party { background: rgba(245,158,11,.12); color: var(--amber); }
.sc-method.internal { background: rgba(0,174,239,.14); color: var(--primary); }
.sc-method.social_contract { background: rgba(179,138,240,.14); color: #b38af0; }
.sc-progress-wrap { margin-top: 12px; }
.sc-progress-bar { height: 6px; border-radius: 100px; background: rgba(255,255,255,.06); overflow: hidden; }
.sc-progress-fill { height: 100%; border-radius: 100px; background: var(--gradient); width: var(--pct, 0%); }
.sc-progress-fill.overdue { background: var(--danger); }
.sc-progress-lbl { font-size: 10px; color: var(--muted); margin-top: 5px; }
/* كارت خدمة وصل لآخر مرحلة — تمييز لوني مختلف */
.svc-card.completed { border-color: rgba(52,211,153,.4); background: rgba(52,211,153,.06); }
.svc-card.completed:hover { border-color: #34d399; box-shadow: 0 16px 34px -16px rgba(52,211,153,.45); }
.stage-progress-badge {
display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 800;
padding: 3px 9px; border-radius: 100px; margin-top: 8px; margin-inline-start: 6px;
background: rgba(0,174,239,.14); color: var(--primary);
}
.svc-card.completed .stage-progress-badge { background: rgba(52,211,153,.16); color: #34d399; }
/* ===== خط مراحل الخدمة (assignment_detail.html) — نقطة لكل مرحلة، بتتلون
سيان لحد المرحلة الحالية، ودوسة على نقطة تنقل المرحلة الحالية. ===== */
.stage-timeline-wrap { margin-top: 18px; }
.stage-timeline-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.stage-timeline-head .lbl { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
/* align-items:flex-start (مش center) عشان الخط يتظبط على قد نص ارتفاع
النقطة بالظبط (top:7px) — لو سبناها center هتتحسب المسافة على طول عمود
النقطة+الاسم مع بعض، فالنقطة تطلع فوق الخط مش عليه. */
.stage-timeline { position: relative; display: flex; justify-content: space-between; align-items: flex-start; padding: 0 4px; }
.stage-timeline::before {
content: ""; position: absolute; top: 7px; inset-inline: 14px; height: 3px;
background: rgba(255,255,255,.08); border-radius: 100px; z-index: 0;
}
.stage-timeline .stage-fill-line {
position: absolute; top: 7px; right: 14px; height: 3px; background: var(--gradient);
border-radius: 100px; z-index: 1; transition: width .25s ease;
}
.stage-dot-wrap { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.stage-dot {
width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.18);
background: var(--navy-light); cursor: pointer; padding: 0; transition: transform .15s ease, border-color .15s ease, background .15s ease;
}
.stage-dot:hover { transform: scale(1.2); border-color: var(--primary); }
.stage-dot.filled { background: var(--primary); border-color: var(--primary); }
.stage-dot.current { box-shadow: 0 0 0 4px rgba(0,174,239,.25); }
.stage-dot-label { font-size: 9.5px; color: var(--muted); text-align: center; max-width: 70px; line-height: 1.3; }
.stage-dot-wrap.filled .stage-dot-label { color: var(--text); font-weight: 700; }
/* ===== بنود/أصناف خدمات Outdoor Media (assignment_detail.html) — جدول
البنود القائمة + فورم إضافة بند جديد. الإنپوتس هنا مش جوه .form-field
ولا .ac-field (اللي بيدوا الشكل الغامق المتسق في باقي البرنامج)، فمحتاجة
تنسيقها هنا بنفس الفورمولا يدويًا. ===== */
.item-table-wrap { overflow-x: auto; }
.item-table th, .item-table td { white-space: nowrap; }
.item-table input {
font-family: inherit; font-size: 12.5px; color: var(--text);
background: rgba(255,255,255,.03); border: 1.5px solid var(--border); border-radius: 8px;
padding: 6px 9px;
}
.item-table input:focus { outline: none; border-color: var(--primary); }
.item-table input::placeholder { color: var(--muted); }
.item-name-cell { min-width: 200px; white-space: normal; }
.item-name-cell input { display: block; width: 100%; box-sizing: border-box; }
.item-name-cell .item-name-input { font-weight: 700; margin-bottom: 5px; }
.item-name-cell .item-desc-input { font-size: 11.5px; color: var(--muted); }
.item-num-cell input { width: 78px; text-align: center; }
.item-total-cell { font-weight: 700; }
.item-add-form {
display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin-top: 16px;
padding: 16px; background: rgba(255,255,255,.02); border: 1px solid var(--border); border-radius: 14px;
}
.item-add-field { display: flex; flex-direction: column; gap: 6px; }
.item-add-field.grow { flex: 1 1 200px; }
.item-add-field.narrow { width: 120px; }
.item-add-field label { font-size: 11px; font-weight: 700; color: var(--muted); }
.item-add-field input {
width: 100%; box-sizing: border-box; padding: 9px 11px; border-radius: 9px;
border: 1.5px solid var(--border); background: rgba(255,255,255,.03);
color: var(--text); font-size: 13px; font-family: inherit;
}
.item-add-field input:focus { outline: none; border-color: var(--primary); }
.item-inline-input {
width: 150px; padding: 8px 11px; border-radius: 9px; border: 1.5px solid var(--border);
background: rgba(255,255,255,.03); color: var(--text); font-size: 12.5px; font-family: inherit;
}
.item-inline-input:focus { outline: none; border-color: var(--primary); }
/* ===== لايف سيرش بنود الطباعة (assignment_detail.html، خدمات Outdoor
Media) — قايمة مقترحات معلّقة تحت خانة "اسم البند" أثناء الكتابة. ===== */
.item-suggestions-dropdown {
position: absolute; top: 100%; inset-inline: 0; z-index: 30; margin-top: 4px;
background: var(--navy-light); border: 1px solid var(--border); border-radius: 10px;
box-shadow: 0 12px 24px -8px rgba(0,0,0,.5); max-height: 220px; overflow-y: auto;
}
.item-suggestion-row {
padding: 8px 12px; font-size: 12.5px; color: var(--text); cursor: pointer;
border-bottom: 1px solid var(--border);
}
.item-suggestion-row:last-child { border-bottom: none; }
.item-suggestion-row:hover { background: rgba(0,174,239,.12); }
.due-dates-wrap { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.due-dates-title { font-size: 13px; font-weight: 800; color: #fff; margin-bottom: 10px; }
.due-date-row {
display: grid; grid-template-columns: 1fr 1fr 2fr; gap: 10px; padding: 9px 4px;
font-size: 12px; color: var(--text); border-bottom: 1px solid var(--border);
}
.due-date-row:last-child { border-bottom: none; }
.due-date-row.overdue { color: var(--danger); }
/* ===== Custom select (replaces every native