/* خطوط جوجل بقت متحمّلة بـ في كل صفحة (مش @import هنا) — عشان تتحمّل بالتوازي مع باقي الصفحة من الأول بدل ما المتصفح يكتشفها متأخر جوه ملف الـ CSS، ده بيقلل وقت ظهور الخط الصح بشكل كبير */ :root{ color-scheme:light; --bg:#eef2f9; --surface:#ffffff; --surface-2:#f4f6fb; --border:#e6eaf1; --text:#1b2436; --muted:#6b7688; --accent:#1f6b47; --accent-2:#2a8560; --accent-3:#1f6b47; --accent-dim:#eaf0fe; --prio-high:#e0503f; --prio-med:#e0a53c; --prio-low:#2a8560; --status-new:#e0503f; --status-doing:#2a8560; --status-done:#22b573; --good:#1a9455; --warn:#b3791c; --bad:#d0402c; --teal:#0f8a7e; --on-accent:#ffffff; --font-body:'IBM Plex Sans Arabic',system-ui,sans-serif; } :root[data-theme="dark"]{ color-scheme:dark; --bg:#0c1116; --surface:#212b36; --surface-2:#2a3542; --border:#313d4a; --text:#f0f3f7; --muted:#a7afba; --accent:#2dd9ae; --accent-2:#5babf0; --accent-3:#b98cf2; --accent-dim:rgba(45,217,174,.14); --prio-high:#f2726f; --prio-med:#f2a83f; --prio-low:#5babf0; --status-new:#f2726f; --status-doing:#5babf0; --status-done:#41cd8c; --good:#41cd8c; --warn:#f2a83f; --bad:#f2726f; --teal:#2dd9ae; --on-accent:#06231c; --font-body:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} html{overflow-y:scroll;overflow-x:hidden;scrollbar-gutter:stable;} body{background:var(--bg);color:var(--text);font-family:var(--font-body);min-height:100vh; display:flex;flex-direction:column;cursor:default;user-select:none;-webkit-user-select:none;} /* نصوص/محتوى فعلي المفروض المستخدم يقدر يحدده وينسخه (رسايل، كومنتات، ملاحظات، خانات الجداول...) */ input,textarea,select,[contenteditable="true"]{cursor:auto;user-select:text;-webkit-user-select:text;} td,.comment-body,.chat-msg,.client-notes p,.rem-card-body,.ticket-desc,.last-comment, .mono,p,.field-hint,.field-val{cursor:auto;user-select:text;-webkit-user-select:text;} :root[data-theme="dark"] ::-webkit-scrollbar{width:11px;height:11px;} :root[data-theme="dark"] ::-webkit-scrollbar-track{background:var(--bg);} :root[data-theme="dark"] ::-webkit-scrollbar-thumb{background:var(--surface-2);border:2px solid var(--bg);border-radius:20px;} :root[data-theme="dark"] ::-webkit-scrollbar-thumb:hover{background:var(--border);} ::selection{background:var(--accent-dim);color:var(--text);} .app{flex:1 0 auto;} .rwt-footer{flex-shrink:0;} .mono{font-family:'JetBrains Mono',ui-monospace,monospace;} a{color:var(--accent-2);text-decoration:none;} .app{width:100%;max-width:1600px;margin-inline:0 auto;padding:24px 28px 60px;} .app-wide{max-width:1500px;} @keyframes fadeUp{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .row-fade{animation:fadeUp .35s ease both;} @keyframes rowFlash{0%{background:var(--accent-dim);}100%{background:transparent;}} .row-flash{animation:rowFlash 1.8s ease;} @media (prefers-reduced-motion:reduce){.row-flash{animation:none;}} .stat, .form-card, .comment, .a-panel{transition:transform .15s ease, box-shadow .15s ease;} .stat:hover{transform:translateY(-2px);} .topbar-band{border-bottom:1px solid var(--border);} header.top{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;gap:12px; max-width:1500px;margin:0 auto;padding:18px 24px;} .brand-row{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex:1 1 0;min-width:0;} .client-brand-corner{display:flex;align-items:center;gap:9px;opacity:0;transform:translateY(-4px); animation:clientBrandIn .6s ease .15s forwards;} .client-brand-logo{height:40px;width:auto;max-width:170px;object-fit:contain;} @keyframes clientBrandIn{to{opacity:1;transform:translateY(0);}} @media (prefers-reduced-motion:reduce){.client-brand-corner{animation:none;opacity:1;transform:none;}} .logo-img{height:40px;width:auto;border-radius:6px;} .brand .name{font-size:12px;color:var(--muted);} .brand h1{margin:0;font-size:22px;font-weight:700;color:var(--text);white-space:nowrap;} .me-box{display:flex;align-items:center;gap:7px;flex-wrap:wrap;flex:0 1 auto;justify-content:center; row-gap:8px;} .top-spacer{flex:1 1 0;} @media (max-width:1120px){ header.top{flex-wrap:wrap;align-items:flex-start;} .brand-row{flex:0 0 auto;} .me-box{flex:1 1 auto;justify-content:flex-end;} .top-spacer{display:none;} } .me-pill{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--border); padding:5px 10px;border-radius:8px;font-size:12px;box-shadow:0 2px 8px -4px rgba(20,30,60,.15);white-space:nowrap;} .me-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);} .badge{font-size:11px;color:var(--accent);border:1px solid var(--accent-dim);background:var(--accent-dim); padding:1px 7px;border-radius:4px;margin-inline-start:6px;} .bell{position:relative;} .bell-count{position:absolute;top:-6px;left:-6px;background:var(--prio-high);color:#fff;font-size:10px; border-radius:50%;min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;padding:0 3px;} /* ===== الشريط الجانبي (Sidebar Shell) ===== */ .app-sidebar{position:fixed;top:0;bottom:0;inset-inline-start:0;width:var(--v2-sidebar-w,248px);background:var(--surface); border-inline-end:1px solid var(--border);display:flex;flex-direction:column;z-index:150;} body{margin-inline-start:var(--v2-sidebar-w,248px);} .sidebar-brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:18px 18px 14px;flex-shrink:0;min-width:0;} .sidebar-brand-mark{width:32px;height:32px;border-radius:9px;background:var(--accent);display:flex; align-items:center;justify-content:center;flex-shrink:0;} .sidebar-brand-word{font-size:14.5px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-brand-word em{font-style:normal;font-weight:500;color:var(--muted);} .sidebar-brand .client-brand-logo{height:36px;width:auto;max-width:100%;object-fit:contain;} .sidebar-nav{flex:1 1 auto;overflow-y:auto;padding:6px 10px 10px;display:flex;flex-direction:column;gap:2px;min-height:0;} .sidebar-link{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:none;background:transparent; color:var(--muted);border-radius:9px;font-size:13px;font-family:inherit;cursor:pointer;text-decoration:none; text-align:start;box-shadow:none;transition:background .12s ease,color .12s ease;} .sidebar-link:hover{background:var(--accent-dim);color:var(--accent);transform:none;border-color:transparent;} .sidebar-link.active{background:var(--accent);color:var(--on-accent);font-weight:600;} .sidebar-link .nav-ic{flex-shrink:0;} .sidebar-link span:not(.nav-count):not(.alarm-bell){flex-grow:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .sidebar-link .nav-caret{flex-shrink:0;opacity:.6;transition:transform .15s ease;} .sidebar-link:has(+ .user-menu-panel.open) .nav-caret{transform:rotate(180deg);} .sidebar-group{position:relative;} .sidebar-link .nav-count{margin:0;} /* قوايم الأقسام (مشتريات/تجاري/حسابات...) بقت بتتمدد جوه السايدبار نفسه بدل ما تطلع بوب أب فوق المحتوى */ .sidebar-group > .user-menu-panel{position:static;top:auto;inset-inline-end:auto;display:none;min-width:0; margin-block:2px 4px;padding-block:4px;padding-inline-start:10px;background:transparent;border:none; border-inline-start:2px solid var(--border);border-radius:0;box-shadow:none;} .sidebar-group > .user-menu-panel.open{display:block;} /* NOTE: a legacy `@media (max-width:980px)` block used to live here, forcing a 76px icon rail via `.app-sidebar{width:76px}` + `body{margin-inline-start:76px}` + `.content-topbar{inset-inline-start:76px}`. It predated the v2 sidebar, whose later `.app-sidebar{width:var(--v2-sidebar-w)}` / `.content-topbar{inset-inline-start: var(--v2-sidebar-w)}` rules won the cascade for the sidebar and topbar but NOT for `body` — so between 761px and 980px the sidebar and topbar sat at 224px while the page body was only offset 76px, hiding ~150px of every page's leading edge under the sidebar. Sidebar width, body offset and topbar inset now all derive from the v2 tokens keyed on ONE state (`.app-sidebar.collapsed` / `body.sidebar-collapsed`, see "Sidebar v2" below); the icon-rail default for tablet widths is applied by that same state via includes/header.php + assets/app.js, not by a parallel set of rules. */ /* ===== شريط علوي: هوية المستخدم + الساعات + الإشعارات + الثيم/اللغة ===== */ .content-topbar{position:fixed;top:0;inset-inline-start:var(--v2-sidebar-w,248px);inset-inline-end:0;height:58px;z-index:140;} .content-topbar-inner{height:100%;background:var(--surface); border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between; gap:10px;padding:0 18px;} .topbar-user-menu{flex-shrink:0;min-width:0;} .topbar-user-btn{display:flex;align-items:center;gap:8px;padding:5px 8px 5px 5px;border:none;background:transparent; cursor:pointer;box-shadow:none;min-width:0;border-radius:999px;} .topbar-user-btn:hover{transform:none;background:var(--accent-dim);} .topbar-user-info{display:flex;flex-direction:column;align-items:flex-start;min-width:0;} .topbar-user-name{font-size:12.5px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:160px;} .topbar-user-role{font-size:10.5px;color:var(--muted);} .content-topbar .me-box{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;} .content-topbar .me-box .icon-btn{position:relative;} .content-topbar .me-box .icon-btn .nav-count{position:absolute;top:-2px;left:-2px;margin:0;min-width:15px;height:15px;font-size:9px;} button,.btn{font-family:inherit;cursor:pointer;border-radius:8px;border:1px solid var(--border); background:var(--surface);color:var(--text);padding:8px 14px;font-size:13px;display:inline-block;text-decoration:none; transition:all .15s ease;box-shadow:0 2px 6px -4px rgba(20,30,60,.15);} button:hover,.btn:hover{border-color:var(--accent-2);transform:translateY(-1px);} .btn.primary{background:linear-gradient(135deg,var(--accent-2),var(--accent));border-color:var(--accent);color:var(--on-accent);font-weight:600;} .btn.primary:hover{filter:brightness(1.06);box-shadow:0 6px 16px -6px rgba(31,107,71,.45);} .btn.ghost{background:transparent;box-shadow:none;} .btn.small{padding:4px 9px;font-size:12px;} .me-box .btn.small{padding:6px 12px;font-size:13px;color:var(--muted);border-radius:999px;display:inline-flex;align-items:center;gap:6px;} .nav-ic{flex-shrink:0;} .me-box .btn.small:hover{transform:none;background:var(--accent-dim);border-color:var(--accent-2);color:var(--accent);} .me-box .btn.small.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;box-shadow:0 4px 12px -5px rgba(31,107,71,.5);} .me-box .btn.small.active:hover{background:var(--accent);color:#fff;} .btn.small.icon-btn{display:inline-flex;align-items:center;justify-content:center;padding:7px;color:var(--muted);} .btn.small.icon-btn:hover{color:var(--accent);} .btn.danger:hover{border-color:var(--prio-high);color:var(--prio-high);} .stats{display:flex;gap:16px;margin-bottom:22px;flex-wrap:wrap;} .stat{flex:1;min-width:150px;padding:18px 20px;border-radius:14px;color:#fff; box-shadow:0 8px 20px -10px rgba(20,30,60,.35);} .stat:nth-child(1){background:linear-gradient(135deg,#2a8560,#1f6b47);} .stat:nth-child(2){background:linear-gradient(135deg,#2a8560,#1f6b47);} .stat:nth-child(3){background:linear-gradient(135deg,#2fc4b8,#12b3a8);} .stat:nth-child(4){background:linear-gradient(135deg,#f0705f,#e0503f);} /* ألوان دلالية للإحصائيات — بتتخطى ترتيب الـ nth-child */ .stat.s-blue{background:linear-gradient(135deg,#2a8560,#1f6b47);} .stat.s-purple{background:linear-gradient(135deg,#2a8560,#1f6b47);} .stat.s-teal{background:linear-gradient(135deg,#2fc4b8,#12b3a8);} .stat.s-green{background:linear-gradient(135deg,#34c97e,#22b573);} .stat.s-red{background:linear-gradient(135deg,#f0705f,#e0503f);} .stat.s-amber{background:linear-gradient(135deg,#f0a83c,#e0902b);} .stat.s-gray{background:linear-gradient(135deg,#9aa4b5,#6b7688);} .stat .num{font-family:'JetBrains Mono';font-size:26px;font-weight:700;} .stat .label{font-size:12px;color:rgba(255,255,255,.85);margin-top:2px;} .toolbar{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center;} .toolbar-group{display:flex;gap:6px;padding:4px;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;} .emp-tabs{margin-bottom:16px;width:fit-content;} .toolbar-group .btn{box-shadow:none;} .toolbar-sep{width:1px;align-self:stretch;background:var(--border);margin:2px 0;} .toolbar input,.toolbar select{background:var(--surface-2);border:1px solid var(--border);border-radius:8px; padding:8px 10px;font-size:12.5px;font-family:inherit;color:var(--text);} .toolbar input:focus,.toolbar select:focus{outline:none;border-color:var(--accent-2);background:var(--surface);} .toolbar-filter-q{width:160px;} .toolbar-filter-status{width:120px;} .toolbar .fp-alt-input.field-like{width:118px!important;padding:8px 10px!important;font-size:12.5px!important;} @media (max-width:900px){.toolbar-sep{display:none;}.toolbar-filter-q,.toolbar-filter-status{width:auto;flex:1 1 140px;}} /* List view */ .list-wrap{border:1px solid var(--border);border-radius:14px;overflow-x:auto;overflow-y:hidden;background:var(--surface); box-shadow:0 4px 16px -10px rgba(20,30,60,.2);} table.ticket-list{width:100%;border-collapse:collapse;font-size:13.5px;} table.ticket-list thead th{text-align:center;padding:12px 14px;font-size:11.5px;color:var(--muted); border-bottom:1px solid var(--border);background:var(--surface-2);white-space:nowrap;} table.ticket-list thead th.sortable{padding:0;} table.ticket-list thead th.sortable a{display:block;padding:12px 14px;color:inherit;text-decoration:none; font-size:inherit;transition:background .12s ease,color .12s ease;} table.ticket-list thead th.sortable a:hover{background:var(--accent-dim);color:var(--accent);} table.ticket-list thead th.sortable.active a{color:var(--accent);font-weight:700;} .sort-arrow{font-size:9px;opacity:.45;margin-inline-start:2px;vertical-align:middle;} th.sortable.active .sort-arrow{opacity:1;} table.ticket-list tbody td{padding:12px 14px;border-bottom:1px solid var(--border);vertical-align:middle;text-align:center;} table.ticket-list tbody tr:hover{background:var(--accent-dim);} table.ticket-list tbody tr:last-child td{border-bottom:none;} .col-id{width:70px;color:var(--muted);} .col-title{min-width:180px;} table.ticket-list tbody td.col-title{text-align:start;} .col-title a{color:var(--text);font-weight:400;font-size:15px;line-height:1.5; font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;} .col-title a:hover{color:var(--accent);} .col-assignees-cell{width:150px;} .assignee-chip{display:inline-block;background:var(--surface-2);border:1px solid var(--border); padding:3px 10px;border-radius:20px;font-size:11.5px;margin:2px 3px 2px 0;} .due{font-family:'JetBrains Mono';font-size:11.5px;color:var(--muted);} .due.overdue{color:var(--prio-high);font-weight:700;animation:overduePulse 1.25s ease-in-out infinite;} .status-btn.is-saving{opacity:.65;font-style:italic;pointer-events:none;} /* توست الإشعارات اللايف */ .notif-toast{position:fixed;top:16px;left:50%;transform:translate(-50%,-140%);z-index:300; display:flex;align-items:center;gap:10px;max-width:min(420px,calc(100vw - 32px)); background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:11px 16px; box-shadow:0 16px 40px -10px rgba(20,30,60,.35);text-decoration:none;color:var(--text); font-size:13px;transition:transform .3s cubic-bezier(.2,.9,.3,1.2);} .notif-toast.show{transform:translate(-50%,0);} .notif-toast-icon{font-size:16px;flex-shrink:0;} .notif-toast-msg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .notif-toast:hover{border-color:var(--accent-2);} .due.soon{color:var(--prio-med);font-weight:700;} @keyframes overduePulse{0%,100%{opacity:1;}50%{opacity:.25;}} @media (prefers-reduced-motion:reduce){.due.overdue{animation:none;}} .status-form{display:inline-block;} .status-select{border:none;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:#fff; cursor:pointer;appearance:none;-webkit-appearance:none;text-align:center;} .status-select.status-new{background:var(--status-new);} .status-select.status-doing{background:var(--status-doing);} .status-select.status-done{background:var(--status-done);} .prio-flag{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;} .prio-flag::before{content:'⚑';font-size:12px;} .prio-flag.prio-high{color:var(--prio-high);} .prio-flag.prio-med{color:var(--prio-med);} .prio-flag.prio-low{color:var(--prio-low);} .empty-col{color:var(--muted);font-size:13px;padding:30px 8px;text-align:center;} .col-last-update{white-space:nowrap;width:128px;} .last-update-cell{display:flex;align-items:center;gap:7px;justify-content:center;} /* زرار "إظهار التحديثات" — نقطة حمرا بتلف حوالين الإطار */ .updates-btn{position:relative;isolation:isolate;overflow:hidden;border:none;background:transparent;color:var(--prio-high); font-weight:700;font-size:10.5px;font-family:inherit;border-radius:999px;padding:5px 10px;cursor:pointer; white-space:nowrap;box-shadow:none;line-height:1.4;} .updates-btn::before{content:"";position:absolute;z-index:-2;left:50%;top:50%;width:240px;height:240px; translate:-50% -50%; background:conic-gradient(from 0deg, rgba(224,80,63,.10) 0%, rgba(224,80,63,.10) 74%, #e0503f 84%, #ff9d90 89%, #e0503f 92%, rgba(224,80,63,.10) 98%, rgba(224,80,63,.10) 100%); animation:updSpin 2.6s linear infinite;} .updates-btn::after{content:"";position:absolute;z-index:-1;inset:1.6px;border-radius:999px;background:var(--surface); transition:background .15s;} .updates-btn:hover::after{background:#fdeeeb;} .updates-btn:hover{transform:none;} @keyframes updSpin{from{rotate:0deg;}to{rotate:360deg;}} @media (prefers-reduced-motion:reduce){ .updates-btn::before{animation:none;background:rgba(224,80,63,.35);} } .tv2-updates-btn{width:28px;height:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;} /* توقيت التحديث في البوب أب: الساعة فوق والتاريخ تحت */ .upd-stamp{display:flex;flex-direction:column;align-items:flex-start;flex-shrink:0;line-height:1.3;} .upd-clock{font-size:11px;color:var(--muted);} .upd-day{font-size:10px;color:var(--muted);opacity:.85;} .system-comment .upd-stamp{align-items:flex-end;} /* Updates popup */ .updates-modal{max-width:520px;width:100%;text-align:start;} .updates-modal h2{margin:0 0 4px;font-size:16px;} .updates-modal .updates-sub{font-size:12px;color:var(--muted);margin-bottom:12px;} .updates-feed{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:10px;padding-inline-end:4px;} .updates-empty{color:var(--muted);font-size:13px;text-align:center;padding:20px;} .form-card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:22px;max-width:460px;margin:0 auto; box-shadow:0 4px 16px -10px rgba(20,30,60,.2);} /* صفحة تسجيل الدخول — خلفية متحركة هادئة + دخول الكارت بحركة ناعمة */ body.login-body{justify-content:center;position:relative;overflow:hidden;} .login-orb{position:absolute;border-radius:50%;filter:blur(70px);pointer-events:none;z-index:0;opacity:.28;} .login-orb.o1{width:440px;height:440px;background:var(--accent-2);top:-140px;inset-inline-start:-120px; animation:loginDrift1 24s ease-in-out infinite alternate;} .login-orb.o2{width:380px;height:380px;background:var(--accent-3);bottom:-150px;inset-inline-end:-110px; animation:loginDrift2 28s ease-in-out infinite alternate;} .login-orb.o3{width:280px;height:280px;background:var(--accent);top:38%;inset-inline-start:42%;opacity:.18; animation:loginDrift3 32s ease-in-out infinite alternate;} @keyframes loginDrift1{from{transform:translate(0,0);}to{transform:translate(70px,50px);}} @keyframes loginDrift2{from{transform:translate(0,0);}to{transform:translate(-60px,-45px);}} @keyframes loginDrift3{from{transform:translate(0,0) scale(1);}to{transform:translate(-45px,35px) scale(1.18);}} .login-body .app{position:relative;z-index:1;flex:0 0 auto;width:100%; animation:loginCardIn .65s cubic-bezier(.22,1,.36,1) both;} .login-brand{text-align:center;} .login-brand h1{margin-top:4px;} .login-toolbar{position:fixed;top:22px;left:22px;z-index:2;direction:ltr;gap:12px;} .login-seg{display:inline-flex;padding:5px;border-radius:13px;gap:5px;border:1px solid var(--border); background:color-mix(in srgb,var(--surface) 88%,transparent); backdrop-filter:blur(6px);box-shadow:0 8px 24px -10px rgba(20,30,60,.35);} .login-seg .seg{padding:10px 20px;font-size:14px;border-radius:9px;gap:7px;} .login-seg .seg{border:1.5px solid transparent;} .login-seg .seg.on{box-shadow:0 3px 12px -4px rgba(20,30,60,.3);border-color:var(--accent-2);} .seg-letter{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px; font-size:14px;font-weight:800;line-height:1;flex-shrink:0;} @media (max-width:560px){ .login-toolbar{position:static;justify-content:center;margin:16px auto 0;padding:0 12px;} .login-seg .seg{padding:8px 14px;font-size:12.5px;} } /* ليستة المسميات الوظيفية جوه القسم */ .jt-list{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;} .jt-row{display:flex;align-items:center;justify-content:space-between;gap:8px;background:var(--surface-2); border:1px solid var(--border);border-radius:8px;padding:7px 10px;font-size:13px;} .jt-row .icon-btn{color:var(--muted);} .jt-row .icon-btn:hover{color:var(--bad);} /* شاشة الترحيب بعد تسجيل الدخول — الأفاتار بيظهر وبعدين يصغّر ويتحرك لمكان الأفاتار في الهيدر */ .welcome-overlay{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:16px;background:color-mix(in srgb,var(--bg) 45%,transparent);backdrop-filter:blur(3px); opacity:0;pointer-events:none;transition:opacity .3s ease,background .4s ease;cursor:pointer;} .welcome-overlay.show{opacity:1;pointer-events:auto;} .welcome-overlay.shrink{background:transparent;backdrop-filter:none;} .welcome-avatar-ring{position:relative;display:inline-flex;} .welcome-avatar-ring::before{content:'';position:absolute;inset:-7px;border-radius:50%; border:3px solid transparent;border-top-color:var(--accent-2);border-inline-end-color:var(--accent-2); opacity:0;transition:opacity .3s ease;animation:welcomeRingSpin .9s linear infinite;} .welcome-overlay.show .welcome-avatar-ring::before{opacity:1;} .welcome-overlay.shrink .welcome-avatar-ring::before{opacity:0;} @keyframes welcomeRingSpin{to{transform:rotate(360deg);}} .welcome-avatar{width:92px;height:92px;border-radius:50%;overflow:hidden;display:flex;align-items:center; justify-content:center;background:linear-gradient(135deg,var(--accent-2),var(--accent-3));color:#fff; font-size:34px;font-weight:800;font-family:'Cairo','IBM Plex Sans Arabic',sans-serif; box-shadow:0 0 0 4px color-mix(in srgb,var(--accent-2) 25%,transparent),0 20px 50px -15px rgba(0,0,0,.5); transform:scale(.4);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .4s ease; flex-shrink:0;transform-origin:center center;} .welcome-avatar img{width:100%;height:100%;object-fit:cover;display:block;} .welcome-overlay.show .welcome-avatar{transform:scale(1);opacity:1;} .welcome-text{color:var(--text);font-size:20px;font-weight:700;font-family:'Cairo','IBM Plex Sans Arabic',sans-serif; opacity:0;transform:translateY(8px);transition:opacity .4s ease .15s,transform .4s ease .15s;} .welcome-overlay.show .welcome-text{opacity:1;transform:translateY(0);} .welcome-overlay.shrink .welcome-text{opacity:0;transform:translateY(-6px);transition:opacity .25s ease,transform .25s ease;} @media (prefers-reduced-motion:reduce){ .welcome-overlay,.welcome-avatar,.welcome-text{transition:none!important;} .welcome-avatar-ring::before{animation:none!important;} } @keyframes loginCardIn{from{opacity:0;transform:translateY(16px) scale(.96);}to{opacity:1;transform:translateY(0) scale(1);}} /* نجوم بتلمع في خلفية صفحة الدخول */ .login-stars{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;} .login-stars .star{position:absolute;border-radius:50%;background:var(--text);animation:starTwinkle 3s ease-in-out infinite;} @keyframes starTwinkle{0%,100%{opacity:.12;transform:scale(.8);}50%{opacity:.9;transform:scale(1.15);}} /* شبكة مدارية خلف كارت الدخول — دوائر متقطعة بتلف ببطء */ .orbit-stage{position:absolute;top:50%;left:50%;width:0;height:0;z-index:0;} .orbit-ring{position:absolute;top:0;left:0;width:0;height:0;border-radius:50%;} .orbit-ring::before{content:'';position:absolute;border:1px dashed color-mix(in srgb,var(--border) 70%,transparent); border-radius:50%;pointer-events:none;} .ring-b{animation:orbitSpin 55s linear infinite reverse;} .ring-b::before{width:640px;height:640px;top:-320px;left:-320px;} .ring-c{animation:orbitSpin 75s linear infinite;} .ring-c::before{width:820px;height:820px;top:-410px;left:-410px;opacity:.6;} @keyframes orbitSpin{to{transform:rotate(360deg);}} .orbit-node{position:absolute;top:0;left:0;transform:rotate(var(--angle)) translateX(var(--radius));} .orbit-node-inner{position:absolute;top:0;left:0;transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));} .ring-b .orbit-node-inner{animation:orbitCounterRev 55s linear infinite;} .ring-c .orbit-node-inner{animation:orbitCounter 75s linear infinite;} @keyframes orbitCounter{ from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));} to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle) - 360deg));} } @keyframes orbitCounterRev{ from{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle)));} to{transform:translate(-50%,-50%) rotate(calc(-1 * var(--angle) + 360deg));} } .orbit-node-inner.icon{width:19px;height:19px;color:var(--accent-2);opacity:.55;} .orbit-node-inner.icon svg{width:100%;height:100%;display:block;} .orbit-node-inner.icon.small{width:14px;height:14px;opacity:.35;color:var(--accent-3);} @media (max-width:640px){.ring-c{display:none;}} @media (prefers-reduced-motion:reduce){ .login-orb{animation:none;} .login-body .app{animation:none;} .orbit-ring,.orbit-node-inner,.login-stars .star{animation:none!important;} } /* شاشة "تحت الإنشاء" */ .soon-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:56px 32px; max-width:520px;margin:48px auto;text-align:center;box-shadow:0 4px 20px -12px rgba(20,30,60,.25);} .soon-card .soon-icon{margin-bottom:14px;line-height:1;color:var(--muted);display:flex;justify-content:center;} .soon-card h2{margin:0 0 10px;font-size:20px;} .soon-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.9;} .field{margin-bottom:14px;} .field label{display:block;font-size:12.5px;color:var(--muted);margin-bottom:6px;} .field input,.field select,.field textarea{width:100%;background:var(--surface-2);border:1px solid var(--border); color:var(--text);border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:inherit;} .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--accent-2);background:var(--surface);} .field textarea{resize:vertical;min-height:70px;} .field input[type="file"]{cursor:pointer;color:var(--muted);border-style:dashed;transition:border-color .15s,background .15s;} .field input[type="file"]:hover{border-color:var(--accent-2);background:var(--surface);} .field input[type="file"]::file-selector-button{background:var(--surface);color:var(--text);border:1px solid var(--border); border-radius:6px;padding:6px 14px;font-size:12.5px;font-weight:600;font-family:inherit;cursor:pointer; margin-inline-end:10px;transition:background .15s,border-color .15s;} .field input[type="file"]::file-selector-button:hover{background:var(--accent-dim);border-color:var(--accent-2);color:var(--accent);} /* سهم موحّد لكل الـselect في السوفتوير (بدل سهم المتصفح الافتراضي) */ select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer; background-color:var(--surface-2);background-repeat:no-repeat;background-size:12px; --sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%236b7688' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E"); background-image:var(--sel-arrow);} select::-ms-expand{display:none;} html[dir="rtl"] select{background-position:10px center;padding-left:28px;} html[dir="ltr"] select{background-position:right 10px center;padding-right:28px;} :root[data-theme="dark"] select{--sel-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%238B93A1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");} select.status-select{background-image:none;padding-left:14px;padding-right:14px;} .flatpickr-calendar select{appearance:auto;-webkit-appearance:auto;background-image:none;padding:0;} /* سيليكت مخصّص (custom select) — بيبدّل شكل الـselect الافتراضي بديزاين وفونت هوية النظام في كل مكان */ .csel{position:relative;display:inline-block;} .field .csel,.toolbar-filter-status.csel,.toolbar-filter-q.csel{width:100%;} .csel-native{position:absolute;inset:0;opacity:0;pointer-events:none;width:100%;height:100%;margin:0;padding:0;border:0;} .csel-trigger{width:100%;display:flex;align-items:center;gap:8px;background:var(--surface-2); border:1px solid var(--border);color:var(--text);border-radius:8px;padding:9px 10px;font-size:13.5px; font-family:inherit;line-height:1.3;cursor:pointer;text-align:start;transition:border-color .15s,background .15s;} .csel-trigger:hover{border-color:var(--accent-2);} .csel-trigger:focus-visible{outline:none;border-color:var(--accent-2);box-shadow:0 0 0 3px var(--accent-dim);} .csel.open .csel-trigger{border-color:var(--accent-2);background:var(--surface);} .csel-trigger:disabled{opacity:.55;cursor:not-allowed;} .csel-value{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .csel-value.is-placeholder{color:var(--muted);} .csel-chevron{flex-shrink:0;display:flex;color:var(--muted);transition:transform .15s;} .csel.open .csel-chevron{transform:rotate(180deg);} .toolbar .csel-trigger,.filter-bar .csel-trigger{padding:8px 10px;font-size:12.5px;} .rep-row .csel{width:100%;} .csel-menu{position:fixed;z-index:400;background:var(--surface);border:1px solid var(--border);border-radius:10px; box-shadow:0 14px 36px -10px rgba(15,23,42,.35);padding:5px;max-height:280px;overflow-y:auto;overflow-x:hidden; width:max-content;max-width:min(420px,calc(100vw - 16px));font-family:inherit;-webkit-overflow-scrolling:touch;} .csel-option{padding:8px 12px;border-radius:7px;font-size:13.5px;color:var(--text);cursor:pointer; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .csel-option:hover,.csel-option.is-active{background:var(--accent-dim);color:var(--accent);} .csel-option.is-selected{font-weight:700;} .csel-option.is-disabled{opacity:.4;cursor:not-allowed;} .csel-empty{padding:10px 12px;color:var(--muted);font-size:12.5px;text-align:center;} .checkbox-list{display:flex;flex-direction:column;gap:6px;max-height:180px;overflow-y:auto; border:1px solid var(--border);border-radius:8px;padding:8px 10px;background:var(--surface-2);} .checkbox-row{display:flex;align-items:center;gap:8px;font-size:13px;} .error{background:color-mix(in srgb, var(--bad) 12%, var(--surface));border:1px solid var(--bad);color:var(--bad);padding:10px 12px;border-radius:8px; font-size:13px;margin-bottom:14px;} .notice{background:var(--accent-dim);border:1px solid var(--accent-2);color:var(--accent);padding:10px 12px; border-radius:8px;font-size:13px;margin-bottom:14px;} table.simple{width:100%;border-collapse:collapse;font-size:13.5px;font-family:inherit;} table.simple thead th{text-align:start;padding:11px 14px;font-size:11px;font-weight:600;color:var(--muted); background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap;letter-spacing:.02em; text-transform:uppercase;} table.simple tbody td{padding:10px 14px;border-bottom:1px solid var(--border);text-align:start;vertical-align:middle; color:var(--text);} table.simple tbody tr:last-child td{border-bottom:none;} table.simple tbody tr:hover{background:var(--accent-dim);} /* two-column admin layout: list + side form */ .admin-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:20px;align-items:start;} .admin-split > .form-card{width:100%;max-width:none;margin:0;} @media (max-width:900px){.admin-split{grid-template-columns:1fr;}} /* clean data table (users / branches / roles) */ .data-table tbody tr{transition:background .1s ease;} .data-table tbody td{white-space:nowrap;} .data-table td.perms-cell{white-space:normal;} .data-table .avatar-col{width:46px;padding-inline-end:0;} .data-table .avatar-col .avatar,.data-table .avatar-col .avatar-fallback{width:32px;height:32px;font-size:12.5px;} .data-table .email-cell{font-size:12px;color:var(--muted);} .data-table .row-actions{white-space:nowrap;text-align:end;} .data-table .row-actions .btn{padding:4px 10px;} table.simple th.num-cell,table.simple td.num-cell{text-align:center;} .stat-mini{font-size:12.5px;color:var(--muted);} .stat-mini strong{color:var(--text);font-weight:700;font-size:13px;} .stat-mini .stat-mini-sep{margin:0 4px;opacity:.5;} .stat-zero{color:var(--border);font-size:14px;} /* pill tags */ .tag{display:inline-flex;align-items:center;padding:3px 11px;border-radius:999px;font-size:11.5px; font-weight:600;line-height:1.7;white-space:nowrap;} .tag-role{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2);} .tag-branch{background:color-mix(in srgb, var(--teal) 16%, transparent);color:var(--teal);} /* request status badges */ .req-status{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-size:11.5px; font-weight:700;white-space:nowrap;} .req-pending_manager{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);} .req-pending_admin{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2);} .req-approved{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good);} .req-rejected{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);} .nav-count{display:inline-flex;align-items:center;justify-content:center;min-width:16px;height:16px;padding:0 4px; border-radius:999px;background:var(--prio-high);color:#fff;font-size:10px;font-weight:700;margin-inline-start:4px;} .req-decision-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:6px;} .req-decision-box textarea{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:9px 10px; font-family:inherit;font-size:13px;min-height:56px;color:var(--text);} .req-decision-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;} .hint{font-size:11.5px;color:var(--muted);margin-top:10px;line-height:1.7;} .section-title{font-size:15px;font-weight:700;margin:0 0 14px;} .settings-link-card{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;} .settings-link-card .btn{flex-shrink:0;} /* Permission toggles (custom role builder) */ .perm-list{display:flex;flex-direction:column;gap:10px;} .perm-list .perm-toggle{position:relative;display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none; margin:0;padding:13px 16px;border-radius:11px;font-size:13.5px;font-weight:600;line-height:1.4; border:1.5px solid color-mix(in srgb, var(--bad) 35%, transparent);background:color-mix(in srgb, var(--bad) 10%, var(--surface));color:var(--bad); transition:background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease;} .perm-list .perm-toggle input{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;} .perm-list .perm-toggle .perm-text{flex:1;} .perm-list .perm-toggle .perm-state{flex-shrink:0;width:22px;height:22px;border-radius:50%;display:inline-flex; align-items:center;justify-content:center;font-size:13px;font-weight:800;color:#fff;background:var(--bad);} .perm-list .perm-toggle .perm-state::before{content:'\2715';} .perm-list .perm-toggle:hover{box-shadow:0 3px 10px -4px rgba(0,0,0,.3);} .perm-list .perm-toggle.is-on{border-color:color-mix(in srgb, var(--good) 40%, transparent);background:color-mix(in srgb, var(--good) 10%, var(--surface));color:var(--good);} .perm-list .perm-toggle.is-on .perm-state{background:var(--good);} .perm-list .perm-toggle.is-on .perm-state::before{content:'\2713';} .perm-list .perm-toggle:focus-within{outline:2px solid var(--accent-2);outline-offset:2px;} /* Ticket detail page */ .ticket-detail{max-width:760px;margin:0 auto;} .ticket-main{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:26px; box-shadow:0 4px 16px -10px rgba(20,30,60,.2);} .ticket-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;} .ticket-title{margin:0 0 10px;font-size:20px;} .ticket-desc{color:var(--muted);font-size:14px;line-height:1.7;margin-bottom:18px;} .ticket-meta-row{display:flex;gap:26px;flex-wrap:wrap;margin-bottom:14px;} .meta-item{display:flex;flex-direction:column;gap:6px;} .meta-label{font-size:11.5px;color:var(--muted);} .divider{border:none;border-top:1px solid var(--border);margin:24px 0;} .comments-feed{display:flex;flex-direction:column;gap:12px;margin-bottom:18px;} .comment{border-radius:10px;padding:12px 14px;} .comment.system-comment{background:var(--surface-2);border:1px dashed var(--border);font-size:12.5px;color:var(--muted); display:flex;justify-content:space-between;align-items:center;padding:8px 14px;} .comment.user-comment{background:var(--surface-2);border:1px solid var(--border);} .comment-top{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;} .comment-time{color:var(--muted);font-size:11px;} .comment-body{font-size:13.5px;line-height:1.6;margin:0;} .attachments-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;} .attachment-chip{display:inline-block;background:var(--surface);border:1px solid var(--border);border-radius:8px; padding:5px 10px;font-size:12px;} .attachment-chip:hover{border-color:var(--accent-2);} .comment-form-box{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:16px;} .notif-list{display:flex;flex-direction:column;gap:6px;} .notif-row{display:flex;justify-content:space-between;gap:12px;background:var(--surface);border:1px solid var(--border); border-radius:10px;padding:12px 14px;color:var(--text);font-size:13px;box-shadow:0 2px 8px -6px rgba(20,30,60,.15);} .notif-row.unread{border-inline-start:3px solid var(--accent-2);background:var(--accent-dim);} .notif-row:hover{border-color:var(--accent-2);} /* Icon status dropdown */ .status-widget{position:relative;display:inline-block;} .status-btn{border:none;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;color:#fff; cursor:pointer;display:inline-flex;align-items:center;gap:6px;} .status-btn:disabled{cursor:default;opacity:.85;} .status-btn.status-new{background:var(--status-new);} .status-btn.status-doing{background:var(--status-doing);} .status-btn.status-done{background:var(--status-done);} .status-btn.status-cancelled{background:#8b95a5;} .status-panel{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:170px; background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px; box-shadow:0 10px 28px -8px rgba(20,30,60,.28);display:none;} .status-panel.open{display:block;} .status-group-label{font-size:10.5px;color:var(--muted);padding:6px 8px 2px;text-transform:uppercase;letter-spacing:.03em;} .status-option{padding:8px 10px;border-radius:6px;font-size:13px;cursor:pointer;display:flex;align-items:center;gap:8px;} .status-option:hover{background:var(--accent-dim);} /* Modal (used for cancel reason etc) */ .overlay{position:fixed;inset:0;background:rgba(20,30,50,.45);display:flex;align-items:center;justify-content:center;z-index:80;padding:20px;} .modal{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;width:100%;max-width:420px; box-shadow:0 20px 50px -12px rgba(20,30,60,.35);} .modal h2{margin:0 0 14px;font-size:16px;} .modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px;} /* Broadcast (push) modal */ .broadcast-overlay{z-index:120;} .broadcast-modal{max-width:460px;text-align:center;animation:fadeUp .25s ease both;} .broadcast-modal h2{font-size:18px;margin:0 0 12px;} .broadcast-flag{display:inline-block;background:var(--accent-dim);color:var(--accent);font-size:11.5px; font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:14px;} .broadcast-img{width:100%;max-height:320px;object-fit:contain;border-radius:10px;border:1px solid var(--border); margin:6px 0 12px;background:var(--surface-2);} .broadcast-body{font-size:14px;line-height:1.7;color:var(--text);margin:0 0 4px;white-space:pre-wrap;} .broadcast-modal .modal-actions{justify-content:center;margin-top:16px;} .broadcast-modal .btn.primary{min-width:120px;} /* Footer */ .rwt-footer{text-align:center;font-size:11.5px;color:var(--muted);padding:28px 10px 34px; display:flex;flex-direction:column;align-items:center;gap:10px;} .albero-brand-link{display:block;line-height:0;} .albero-brand-logo{height:54px;width:auto;display:block;} body.login-body .rwt-footer .albero-brand-logo{height:78px;} body.login-body .rwt-footer{padding-top:10px;} .albero-brand-logo-light{display:block;} .albero-brand-logo-dark{display:none;} :root[data-theme="dark"] .albero-brand-logo-light{display:none;} :root[data-theme="dark"] .albero-brand-logo-dark{display:block;} .rwt-footer-line{font-size:11.5px;color:var(--muted);} /* Dual clock */ .rwt-clocks{display:flex;gap:6px;align-items:stretch;margin-inline-end:6px;} .rwt-clock{background:linear-gradient(135deg,var(--surface),var(--surface-2));border:1px solid var(--border); border-radius:9px;padding:5px 10px;min-width:92px;font-family:'JetBrains Mono';display:flex;flex-direction:column; align-items:center;justify-content:center;gap:1px;line-height:1.25;box-shadow:0 2px 8px -5px rgba(20,30,60,.2);} .rwt-clock-dot{width:5px;height:5px;border-radius:50%;background:var(--status-done,#22b573);flex-shrink:0; display:inline-block;animation:rwtClockPulse 1s ease-in-out infinite;} @keyframes rwtClockPulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.25;transform:scale(.65);}} .rwt-clock-city{font-size:8px;color:var(--muted);font-family:'IBM Plex Sans Arabic';letter-spacing:.4px; display:flex;align-items:center;gap:3px;} .rwt-clock-time{font-weight:700;font-size:13.5px;color:var(--text);} @media (prefers-reduced-motion:reduce){.rwt-clock-dot{animation:none;}} /* Sticky notes floating widget — اتشالت من الواجهة (استغنينا عنها)، الـ CSS فاضل هنا بس لو احتجناها تاني */ .sticky-toggle{position:fixed;bottom:22px;left:22px;z-index:60;width:48px;height:48px;border-radius:50%; background:linear-gradient(135deg,#2a8560,#1f6b47);border:none;color:#fff;cursor:pointer; display:flex;align-items:center;justify-content:center; box-shadow:0 8px 20px -8px rgba(106,79,224,.55);} .sticky-panel{position:fixed;bottom:82px;left:22px;z-index:60;width:280px;max-height:400px;overflow-y:auto; background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px;display:none; box-shadow:0 16px 40px -10px rgba(20,30,60,.3);} .sticky-panel.open{display:block;} .sticky-note-item{background:#f4f0ff;border:1px solid #cfe6da;border-radius:8px;padding:10px;margin-bottom:8px;font-size:13px;position:relative;} .sticky-note-item textarea{width:100%;border:none;background:transparent;resize:vertical;font-family:inherit;font-size:13px;min-height:50px;} .sticky-note-del{position:absolute;top:4px;left:6px;background:none;border:none;color:#2a8560;cursor:pointer;font-size:12px;box-shadow:none;padding:2px;} /* ===== الرسائل الداخلية ===== */ .chat-panel [hidden],.chat-badge[hidden]{display:none!important;} .chat-toggle{position:fixed;bottom:22px;left:22px;z-index:70;width:54px;height:54px;border-radius:50%; background:var(--teal);border:none;color:var(--on-accent);font-size:23px;cursor:pointer; box-shadow:0 12px 28px -8px rgba(15,138,126,.55);display:flex;align-items:center;justify-content:center;transition:transform .12s;} .chat-toggle:hover{transform:translateY(-2px);} .chat-badge{position:absolute;top:-2px;right:-2px;min-width:19px;height:19px;padding:0 5px;border-radius:999px; background:var(--prio-high);color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center; border:2px solid var(--bg);} .chat-panel{position:fixed;bottom:88px;left:22px;z-index:70;width:660px;max-width:calc(100vw - 44px); height:min(540px,calc(100vh - 130px));background:var(--surface);border:1px solid var(--border);border-radius:16px; box-shadow:0 28px 64px -16px rgba(20,30,60,.45);display:none;overflow:hidden;} .chat-panel.open{display:flex;} .chat-sidebar{width:240px;flex-shrink:0;display:flex;flex-direction:column; border-inline-end:1px solid var(--border);background:var(--surface-2);} .chat-sidebar-head{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 10px;font-size:15px;} .chat-close{background:none;border:none;cursor:pointer;font-size:15px;color:var(--muted);padding:2px 6px;box-shadow:none;} .chat-close:hover{color:var(--accent);transform:none;} .chat-search{padding:0 12px 10px;} .chat-search-input{width:100%;border:1px solid var(--border);border-radius:999px;padding:7px 14px;font-family:inherit; font-size:12.5px;background:var(--surface);} .chat-search-input:focus{outline:none;border-color:var(--accent-2);} .chat-threads{flex:1;overflow-y:auto;padding:4px 6px 8px;} .chat-threads-label{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;padding:12px 8px 4px;} .chat-threads-empty{color:var(--muted);font-size:12px;text-align:center;padding:24px 8px;} .chat-thread-item{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;position:relative;} .chat-thread-item:hover{background:var(--accent-dim);} .chat-thread-item.active{background:var(--accent);} .chat-thread-item.active .chat-thread-name,.chat-thread-item.active .chat-thread-last, .chat-thread-item.active .chat-thread-time{color:#fff;} .chat-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;flex-shrink:0;} .chat-avatar-fb{display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#2a8560,#1f6b47);color:#fff;font-size:14px;font-weight:700;} .chat-thread-meta{flex:1;min-width:0;} .chat-thread-top{display:flex;align-items:baseline;justify-content:space-between;gap:6px;} .chat-thread-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .chat-thread-last{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px;} .chat-thread-time{font-size:9.5px;color:var(--muted);flex-shrink:0;font-family:'JetBrains Mono';} .chat-thread-unread{position:absolute;inset-inline-start:8px;bottom:9px;min-width:17px;height:17px;padding:0 5px; border-radius:999px;background:var(--prio-high);color:#fff;font-size:10px;font-weight:700; display:flex;align-items:center;justify-content:center;} .chat-main{flex:1;min-width:0;display:flex;flex-direction:column;position:relative; background:linear-gradient(160deg,#f5f8f7,#eef3f1);} .chat-placeholder{margin:auto;text-align:center;color:var(--muted);padding:20px;} .chat-placeholder-icon{margin-bottom:8px;display:flex;justify-content:center;color:var(--muted);} .chat-placeholder p{font-size:13px;margin:0;} .chat-conv{flex:1;display:flex;flex-direction:column;min-height:0;} .chat-conv-head{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border); background:var(--surface);} .chat-back{background:none;border:none;cursor:pointer;font-size:20px;color:var(--muted);padding:0 4px;box-shadow:none;display:none;} .chat-back:hover{color:var(--accent);transform:none;} .chat-conv-avatar{width:34px;height:34px;border-radius:50%;object-fit:cover;flex-shrink:0;font-size:13px;font-weight:700;} .chat-conv-name{font-size:14px;font-weight:700;} .chat-messages{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:9px;} .chat-empty{color:var(--muted);font-size:12.5px;text-align:center;margin:auto;} .chat-msg{max-width:72%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.55; box-shadow:0 2px 8px -4px rgba(20,30,60,.14);} .chat-msg.mine{align-self:flex-end;background:linear-gradient(135deg,#2a8560,#1f6b47);color:#fff;border-bottom-left-radius:5px;} .chat-msg.them{align-self:flex-start;background:var(--surface);border:1px solid var(--border);color:var(--text);border-bottom-right-radius:5px;} .chat-msg-time{font-size:9.5px;opacity:.7;margin-top:3px;font-family:'JetBrains Mono';text-align:end;} .chat-msg-atts{display:flex;flex-direction:column;gap:6px;margin-top:6px;} .chat-att-img img{max-width:200px;max-height:180px;border-radius:10px;display:block;} .chat-att-file{display:inline-flex;align-items:center;gap:6px;font-size:12px;padding:6px 9px;border-radius:9px; background:rgba(255,255,255,.15);color:inherit;text-decoration:none;} .chat-att-file.mine{background:rgba(255,255,255,.18);} .chat-msg.them .chat-att-file{background:var(--surface-2);color:var(--text);} .chat-att-kb{opacity:.7;font-family:'JetBrains Mono';font-size:10.5px;} .chat-pending{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0;} .chat-chip{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--border); border-radius:999px;padding:3px 6px 3px 10px;font-size:11.5px;} .chat-chip button{background:none;border:none;cursor:pointer;color:var(--muted);font-size:11px;box-shadow:none;padding:0 2px;} .chat-input-row{display:flex;gap:8px;padding:10px 12px;border-top:1px solid var(--border);align-items:flex-end;background:var(--surface);} .chat-attach{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center; cursor:pointer;font-size:17px;background:var(--surface-2);border:1px solid var(--border);} .chat-attach:hover{border-color:var(--accent-2);} .chat-input{flex:1;resize:none;border:1px solid var(--border);border-radius:18px;padding:9px 14px;font-family:inherit; font-size:13px;background:var(--surface-2);max-height:110px;line-height:1.4;} .chat-input:focus{outline:none;border-color:var(--accent-2);background:#fff;} .chat-send{flex-shrink:0;width:36px;height:36px;border-radius:50%;border:none;background:linear-gradient(135deg,#2a8560,#1f6b47); color:#fff;font-size:15px;cursor:pointer;box-shadow:none;display:flex;align-items:center;justify-content:center;} .chat-dropzone{position:absolute;inset:0;display:none;align-items:center;justify-content:center; background:rgba(31,107,71,.12);border:3px dashed var(--accent-2);border-radius:12px;margin:8px; font-size:14px;font-weight:700;color:var(--accent);z-index:5;} .chat-panel.dragging .chat-dropzone{display:flex;} @media (max-width:720px){ .chat-panel{right:10px;left:10px;width:auto;bottom:84px;height:min(560px,calc(100vh - 120px));} .chat-sidebar{width:100%;} .chat-panel.conv-open .chat-sidebar{display:none;} .chat-panel:not(.conv-open) .chat-main{display:none;} .chat-back{display:block;} .chat-toggle{left:14px;bottom:14px;} } /* مراقبة المحادثات (أدمن) */ .msgmon{display:grid;grid-template-columns:300px 1fr;gap:16px;align-items:start;} .msgmon-list{max-height:600px;overflow-y:auto;padding:6px;} .msgmon-pair{display:block;padding:11px 12px;border-radius:10px;text-decoration:none;color:var(--text);} .msgmon-pair:hover{background:var(--accent-dim);} .msgmon-pair.active{background:var(--accent);color:#fff;} .msgmon-pair.active .msgmon-pair-meta{color:rgba(255,255,255,.8);} .msgmon-pair-names{font-size:13px;font-weight:600;} .msgmon-pair-meta{font-size:11px;color:var(--muted);margin-top:2px;font-family:'JetBrains Mono';} .msgmon-thread{max-height:600px;display:flex;flex-direction:column;overflow:hidden;} .msgmon-thread-head{padding:14px 16px;border-bottom:1px solid var(--border);background:var(--surface-2); font-weight:700;font-size:14px;flex-shrink:0;} .msgmon-messages{overflow-y:auto;padding:14px 16px;display:flex;flex-direction:column;gap:12px;} .msgmon-msg{border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--surface);} .msgmon-msg-head{display:flex;justify-content:space-between;gap:10px;font-size:12px;margin-bottom:5px;} .msgmon-msg-body{font-size:13px;line-height:1.6;} @media (max-width:760px){.msgmon{grid-template-columns:1fr;}} /* Language switch */ .lang-switch{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px; border-radius:50%;background:var(--surface);border:1px solid var(--border);font-size:10.5px;font-weight:700; color:var(--accent);text-decoration:none;flex-shrink:0;} .lang-switch:hover{border-color:var(--accent-2);} /* Bell: bigger + pushed to the far corner, separate from nav cluster */ .bell-btn{position:relative;display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%;background:var(--surface);border:1px solid var(--border); font-size:16px;text-decoration:none;margin-inline-start:8px;box-shadow:0 2px 8px -4px rgba(20,30,60,.2);flex-shrink:0;} .bell-btn:hover{border-color:var(--accent-2);} .bell-count{position:absolute;top:-4px;left:-4px;background:var(--prio-high);color:#fff;font-size:10.5px; border-radius:50%;min-width:18px;height:18px;display:flex;align-items:center;justify-content:center;padding:0 3px; border:2px solid var(--surface);} /* User dropdown menu in header */ .user-menu{position:relative;flex-shrink:0;margin-inline-start:4px;} .user-menu-btn{width:34px;height:34px;padding:0;border-radius:50%;border:1px solid var(--border); background:var(--surface);overflow:hidden;cursor:pointer;display:inline-flex;align-items:center;justify-content:center; box-shadow:0 2px 8px -4px rgba(20,30,60,.2);} .user-menu-btn:hover{border-color:var(--accent-2);transform:none;} .user-menu-btn img{width:100%;height:100%;object-fit:cover;display:block;} .user-menu-initial{width:100%;height:100%;display:flex;align-items:center;justify-content:center; background:var(--accent-2);color:#fff;font-size:14px;font-weight:700;} .user-menu-panel{position:absolute;top:calc(100% + 8px);inset-inline-end:0;z-index:200;min-width:180px; background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:6px; box-shadow:0 12px 30px -8px rgba(20,30,60,.28);display:none;} .user-menu-panel.open{display:block;} .user-menu-head{padding:8px 10px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;} .user-menu-name{font-size:13px;font-weight:700;color:var(--text);} .user-menu-role{font-size:11px;color:var(--accent);margin-top:2px;} .user-menu-panel a{display:block;padding:9px 10px;border-radius:6px;font-size:13px;color:var(--text); text-decoration:none;box-shadow:none;border:none;background:transparent;} .user-menu-panel a:hover{background:var(--accent-dim);color:var(--accent);transform:none;} /* قوايم ماليات: تتمدد جوه القايمة نفسها بدل ما تطلع فلاي-آوت جنبها — عشان القايمة بقت جوه سايدبار بيسكرول رأسي وممكن يقص أي حاجة بتطلع أفقي */ .fin-panel{min-width:210px;overflow:visible;} .submenu{position:relative;} .submenu-head{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%; padding:9px 10px;border-radius:6px;font-size:13px;color:var(--text);background:transparent;border:none; cursor:pointer;box-shadow:none;font-family:inherit;text-align:start;} .submenu-head:hover,.submenu:hover > .submenu-head,.submenu.open > .submenu-head{background:var(--accent-dim);color:var(--accent);} .submenu-caret{font-size:13px;line-height:1;color:var(--muted);flex-shrink:0;display:inline-block;transition:transform .15s ease;} .submenu.open > .submenu-head .submenu-caret{transform:rotate(90deg);} .submenu-body{display:none;position:static;margin:2px 0 4px;padding-inline-start:10px; border-inline-start:2px solid var(--border);min-width:0;background:transparent;border-radius:0;box-shadow:none;} .submenu.open > .submenu-body{display:block;} .submenu-nested > .submenu-head{font-size:12.5px;} /* جرس تذكيراتي + جرس الإشعارات: يرجّوا بس وقت الحاجة (نوبة رجّة ثم راحة) */ .alarm-bell,.bell-ic{display:inline-block;transform-origin:50% 10%;} .alarm-bell.ring,.bell-btn.ring .bell-ic{animation:alarmRing 2s ease-in-out infinite;} @keyframes alarmRing{ 0%,32%,100%{transform:rotate(0);} 2%,10%,18%,26%{transform:rotate(16deg);} 6%,14%,22%,30%{transform:rotate(-16deg);} } @media (prefers-reduced-motion:reduce){.alarm-bell.ring,.bell-btn.ring .bell-ic{animation:none;}} /* Portal-based status dropdown panel (JS moves it to to avoid clipping) */ .status-panel{position:fixed;z-index:200;right:auto;bottom:auto;width:max-content;min-width:150px;max-width:220px;} .checkbox-row{display:flex;align-items:center;justify-content:flex-start;gap:10px;padding:7px 10px;border-radius:6px;} .checkbox-row:hover{background:var(--accent-dim);} .checkbox-row input{flex-shrink:0;} .checkbox-row span.cb-name{flex:1;} .btn-back{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:20px;border:none; background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;font-weight:600;font-size:13px; text-decoration:none;box-shadow:0 4px 14px -6px rgba(31,107,71,.4);margin-bottom:16px;} .btn-back:hover{filter:brightness(1.06);} .avatar{width:26px;height:26px;border-radius:50%;object-fit:cover;display:inline-block;vertical-align:middle;} .avatar-fallback{width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center; background:var(--accent-2);color:#fff;font-size:11px;font-weight:700;vertical-align:middle;} .assignee-chip{display:inline-flex;align-items:center;gap:6px;} /* Assignees column: الزرار والصور صف واحد على اليمين */ .assignee-cell{display:flex;align-items:center;gap:8px;justify-content:flex-start;flex-wrap:nowrap;} .assignee-add-btn{flex-shrink:0;border:1px dashed var(--border);background:var(--surface-2);color:var(--muted); border-radius:999px;padding:4px 10px;font-size:11px;font-weight:600;cursor:pointer;font-family:inherit; white-space:nowrap;box-shadow:none;transition:all .12s;} .assignee-add-btn:hover{border-color:var(--accent-2);color:var(--accent);background:var(--accent-dim);border-style:solid;transform:none;} .assignee-panel{position:absolute;z-index:200;width:280px;background:var(--surface);border:1px solid var(--border); border-radius:13px;box-shadow:0 18px 44px -12px rgba(20,30,60,.34);overflow:hidden;} .assignee-panel-list{max-height:280px;overflow-y:auto;padding:7px;} .asg-row{display:flex;align-items:center;gap:10px;padding:7px 9px;border-radius:10px;cursor:pointer; transition:background .12s;} .asg-row:hover{background:var(--accent-dim);} .asg-av{width:30px;height:30px;border-radius:50%;object-fit:cover;flex-shrink:0;} .asg-av-fb{display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#2a8560,#1f6b47);color:#fff;font-size:12px;font-weight:700;} .asg-name{flex:1;min-width:0;font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif; font-size:13px;font-weight:500;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .asg-toggle{flex-shrink:0;border:none;cursor:pointer;font-family:inherit;font-size:10.5px;font-weight:700; padding:5px 13px;border-radius:999px;color:#fff;background:#e0503f;box-shadow:none; transition:background .15s,transform .1s;min-width:58px;text-align:center;} .asg-toggle[aria-pressed="true"]{background:#22b573;} .asg-toggle:hover{filter:brightness(1.06);transform:none;} .assignee-panel-foot{display:flex;gap:7px;padding:9px;border-top:1px solid var(--border);background:var(--surface-2);} .assignee-panel-foot .btn{flex:1;text-align:center;} .assignee-avatars{display:flex;align-items:center;} .assignee-avatars .avatar,.assignee-avatars .avatar-fallback{width:30px;height:30px;font-size:12px; border:2px solid var(--surface);box-shadow:0 1px 4px -1px rgba(20,30,60,.25);margin-inline-start:-8px; transition:transform .12s ease;} .assignee-avatars .avatar:first-child,.assignee-avatars .avatar-fallback:first-child{margin-inline-start:0;} .assignee-avatars .avatar:hover,.assignee-avatars .avatar-fallback:hover{transform:translateY(-2px);z-index:2;} /* صاحب التاسك (لو هو نفسه من المسؤولين) بيتفصل عن باقي المسؤولين بمسافة واضحة بدل ما يتراكب معاهم */ .assignee-avatars .assignee-owner{position:relative;z-index:3;} .assignee-avatars .assignee-owner + .avatar,.assignee-avatars .assignee-owner + .avatar-fallback{margin-inline-start:10px;} /* اختيار مستلمين للبث (شبكة صور — زي اختيار جهات الاتصال) */ .bcast-picker{max-height:270px;overflow-y:auto;display:flex;flex-wrap:wrap;justify-content:center;gap:4px; border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface-2);} .bcast-picker .bcast-chip{display:flex;flex-direction:column;align-items:center;gap:6px;width:74px;padding:9px 4px; border-radius:10px;cursor:pointer;transition:background .12s;text-align:center;margin-bottom:0;} .bcast-chip:hover{background:var(--surface);} .bcast-chip-av-wrap{position:relative;width:50px;height:50px;} .bcast-chip-av{width:50px;height:50px;border-radius:50%;object-fit:cover;display:block; border:2px solid transparent;opacity:.6;transition:border-color .15s,opacity .15s;} .bcast-chip-av-fb{display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:700; color:#fff;background:linear-gradient(135deg,#2a8560,#1f6b47);} .bcast-chip-check{position:absolute;bottom:-2px;left:-2px;width:19px;height:19px;border-radius:50%; background:var(--good);color:#fff;display:flex;align-items:center;justify-content:center; border:2px solid var(--surface-2);opacity:0;transform:scale(.4);transition:all .15s;} .bcast-chip-status{position:absolute;bottom:0;right:0;width:13px;height:13px;border-radius:50%; border:2px solid var(--surface-2);background:var(--muted);} .bcast-chip-status.is-online{background:#22c55e;box-shadow:0 0 0 2px rgba(34,197,94,.35),0 0 6px 0 rgba(34,197,94,.65);} .bcast-chip.is-checked .bcast-chip-av{border-color:var(--accent);opacity:1;} .bcast-chip.is-checked .bcast-chip-check{opacity:1;transform:scale(1);} .bcast-chip-name{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:72px;text-align:center;} .bcast-chip.is-checked .bcast-chip-name{color:var(--accent);font-weight:600;} .bcast-chip.is-hidden{display:none;} /* سجل الإشعارات المبعوتة */ .bcast-log{max-height:520px;overflow-y:auto;display:flex;flex-direction:column;gap:7px;padding-inline-end:2px;} .bcast-log-item{display:flex;align-items:center;gap:10px;background:var(--surface); border:1px solid var(--border);border-radius:12px;padding:9px 11px;transition:border-color .15s,transform .15s;} .bcast-log-item:hover{border-color:var(--accent-2);transform:translateY(-1px);} .bcast-log-icon{flex-shrink:0;width:32px;height:32px;border-radius:9px;background:var(--accent-dim); color:var(--accent);display:flex;align-items:center;justify-content:center;} .bcast-log-body{flex:1;min-width:0;} .bcast-log-title{font-size:13px;font-weight:600;color:var(--text);white-space:nowrap;overflow:hidden; text-overflow:ellipsis;} .bcast-log-meta{display:flex;align-items:center;gap:7px;margin-top:3px;font-size:11px;color:var(--muted);} .bcast-log-target{display:inline-flex;align-items:center;gap:3px;} .bcast-log-seen{flex-shrink:0;font-size:11.5px;color:var(--muted);background:var(--surface-2); border-radius:999px;padding:4px 10px;} .filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px; background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 14px;} .filter-bar input,.filter-bar select{background:var(--surface-2);border:1px solid var(--border);border-radius:6px; padding:7px 10px;font-size:12.5px;font-family:inherit;color:var(--text);} .view-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px; background:var(--surface-2);border:1px solid var(--border);text-decoration:none;font-size:14px;} .view-btn:hover{border-color:var(--accent-2);} /* ================= العملاء ================= */ .clients-table tbody td{font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif;} .client-name-cell{display:flex;align-items:center;gap:10px;} .client-name-cell a{font-family:'Cairo',sans-serif;font-weight:600;font-size:14.5px;color:var(--text);} .client-name-cell a:hover{color:var(--accent);} .client-name-cell .cn-main{display:flex;flex-direction:column;gap:2px;min-width:0;} .client-name-cell .cn-contact{font-size:11.5px;color:var(--muted);font-family:'Cairo',sans-serif;} .client-avatar{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; font-size:16px;flex-shrink:0;} .client-avatar.company{background:linear-gradient(135deg,#e6f1ea,#d3e6db);} .client-avatar.individual{background:linear-gradient(135deg,#e5f5f1,#d3efe6);} .country-cell{display:inline-flex;flex-direction:column;align-items:center;gap:1px;line-height:1.3;font-size:12.5px;} .country-cell .city-sub{font-size:10.5px;color:var(--muted);} .contact-cell{white-space:nowrap;} .contact-ic{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px; background:var(--surface-2);border:1px solid var(--border);text-decoration:none;font-size:13px;margin:0 2px;} .contact-ic:hover{border-color:var(--accent-2);} /* نجوم التقييم (عرض) */ .stars{display:inline-flex;gap:1px;font-size:14px;letter-spacing:1px;} .stars .star{color:#dbe3df;} .stars .star.on{color:#f2b01e;} .star-cell{position:relative;display:inline-block;line-height:1;} .star-bg{color:#dbe3df;} .star-fg{position:absolute;left:0;top:0;overflow:hidden;white-space:nowrap;color:#f2b01e;} :root[data-theme="dark"] .star-bg{color:var(--border);} :root[data-theme="dark"] .star-fg{color:var(--accent);} /* منتقي النجوم (إدخال) — ترتيب معكوس عشان الـ hover يشتغل صح */ .star-input{display:inline-flex;flex-direction:row-reverse;align-items:center;gap:2px;} .star-input input{position:absolute;opacity:0;width:0;height:0;} .star-input label{font-size:26px;color:#dbe3df;cursor:pointer;transition:color .12s,transform .12s;line-height:1;} .star-input label:hover,.star-input label:hover ~ label, .star-input input:checked ~ label{color:#f2b01e;} .star-input label:hover{transform:scale(1.12);} .star-input .star-clear{margin-inline-start:14px;font-size:12px;padding:5px 12px;color:var(--muted); transform:none;line-height:1;} .star-input .star-clear:hover{color:var(--prio-high);transform:none;} /* سويتش نوع العميل */ .seg-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:3px;gap:3px;} .seg{padding:7px 18px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted); transition:all .15s;display:flex;align-items:center;gap:6px;} .seg input{position:absolute;opacity:0;width:0;height:0;} .seg.on{background:var(--surface);color:var(--accent);box-shadow:0 2px 8px -3px rgba(20,30,60,.2);} /* نسخة اختيار متعدد (checkbox) من نفس شكل الأزرار المجزّأة */ .seg-toggle.seg-check{flex-wrap:wrap;background:none;border:none;padding:0;gap:8px;} .seg-toggle.seg-check .seg{background:var(--surface-2);border:1px solid var(--border);} .seg-toggle.seg-check .seg.on{background:var(--accent-dim);border-color:var(--accent-2);color:var(--accent);box-shadow:none;} .seg-toggle.seg-check .seg:hover{border-color:var(--accent-2);} .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;} .field-row[hidden]{display:none!important;} @media (max-width:560px){.field-row{grid-template-columns:1fr;}} .branch-form.break-free .break-fixed-only{display:none;} .branch-form.break-fixed .break-free-only{display:none;} .client-form .field{margin-bottom:16px;} .client-form .field label .hint{margin:0;} .client-form.type-individual .company-only{display:none;} .client-form.type-company .individual-only{display:none;} .client-form.type-individual #webEmailRow{grid-template-columns:1fr;} /* أشخاص التواصل */ .contacts-box{display:flex;flex-direction:column;gap:8px;margin-bottom:10px;} .contact-row{display:grid;grid-template-columns:1.3fr 1.1fr 1fr 1.1fr auto;gap:8px;align-items:center;} .contact-row input{margin:0;} .contact-del{flex-shrink:0;width:30px;height:30px;font-size:12px;} @media (max-width:640px){ .contact-row{grid-template-columns:1fr 1fr;position:relative;padding:12px;padding-top:32px; background:var(--surface-2);border:1px solid var(--border);border-radius:10px;} .contact-del{position:absolute;top:6px;left:6px;} } /* أشخاص التواصل — صفحة العرض */ .client-contacts{padding:18px 22px;border-top:1px solid var(--border);} .client-contacts .ci-label{margin-bottom:12px;} .contact-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;} .contact-card{background:var(--surface-2);border:1px solid var(--border);border-radius:12px;padding:12px 14px;} .contact-card .cc-name{font-weight:700;font-size:13.5px;color:var(--text);} .contact-card .cc-job{font-size:12px;color:var(--muted);margin-top:2px;} .contact-card .cc-links{display:flex;flex-direction:column;gap:4px;margin-top:8px;} .contact-card .cc-links a{font-size:12.5px;color:var(--accent);text-decoration:none;direction:ltr;text-align:start;} .contact-card .cc-links a:hover{text-decoration:underline;} /* كارت العميل (صفحة العرض) */ .client-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;overflow:hidden; box-shadow:0 8px 28px -14px rgba(20,30,60,.22);} .client-card-head{display:flex;align-items:center;gap:16px;padding:22px 24px;position:relative;} .client-card-head.company{background:linear-gradient(120deg,#edf5f0,#e0efe6);} .client-card-head.individual{background:linear-gradient(120deg,#e9f6f2,#dcf0e9);} .client-card-avatar{width:56px;height:56px;border-radius:15px;background:#fff;display:flex;align-items:center; justify-content:center;font-size:26px;flex-shrink:0;box-shadow:0 4px 14px -6px rgba(20,30,60,.25);} .client-card-title{flex:1;min-width:0;} .client-card-title h1{margin:0 0 6px;font-size:20px;font-family:'Cairo',sans-serif;font-weight:700;color:var(--text);} .client-card-sub{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--muted);} .client-loc{font-weight:600;} .client-card-rating{display:flex;align-items:center;gap:3px;font-size:17px;flex-shrink:0;} .client-card-rating .star{color:#d9e1dd;} .client-card-rating .star.on{color:#f2b01e;} .client-card-rating .rating-num{font-size:12px;color:var(--muted);font-weight:700;margin-inline-start:4px;font-family:'JetBrains Mono';} .client-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--border);} @media (max-width:560px){.client-grid{grid-template-columns:1fr;}} .client-item{background:var(--surface);padding:16px 24px;display:flex;flex-direction:column;gap:5px;} .ci-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;} .ci-val{font-size:13.5px;color:var(--text);font-family:'Cairo',sans-serif;} .ci-val a{color:var(--accent-2);} .client-notes{padding:18px 24px;border-top:1px solid var(--border);} .client-notes p{margin:6px 0 0;font-size:13.5px;line-height:1.7;color:var(--text);font-family:'Cairo',sans-serif;} .client-card-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap; padding:14px 24px;border-top:1px solid var(--border);background:var(--surface-2);} .client-card-actions{display:flex;gap:8px;} .flag-img{border-radius:3px;vertical-align:middle;box-shadow:0 0 0 1px rgba(20,30,60,.08);} .country-line{display:inline-flex;align-items:center;gap:6px;} .client-loc .flag-img{margin-inline-end:2px;} /* ================= سجل الموظفين (HR) ================= */ .emp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:14px;} .emp-card{display:block;background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px; text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s,transform .15s;} .emp-card:hover{border-color:var(--accent-2);box-shadow:0 10px 26px -14px rgba(20,30,60,.3);transform:translateY(-2px);} .emp-card-top{display:flex;align-items:center;gap:10px;} .emp-av{width:44px;height:44px;border-radius:12px;object-fit:cover;flex-shrink:0;} .emp-av-fb{display:flex;align-items:center;justify-content:center;background:var(--accent-2);color:#fff;font-weight:700;font-size:18px;} .emp-id{min-width:0;flex:1;} .emp-name{font-family:'Cairo',sans-serif;font-weight:700;font-size:14.5px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .emp-sub{font-size:12px;color:var(--muted);margin-top:2px;} .emp-card-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:11.5px;color:var(--muted);} .emp-card-meta span{background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:3px 7px;} .emp-status{font-size:10.5px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;flex-shrink:0;} .emp-status.st-active{background:#e6f7ee;color:#1a9455;} .emp-status.st-probation{background:#fff4e0;color:#c47d10;} .emp-status.st-on_leave{background:#e4f1ea;color:#1f6b47;} .emp-status.st-terminated{background:#fdecea;color:#d0402c;} /* فورم الموظف */ .emp-sec{font-size:13.5px;font-weight:700;margin:0 0 12px;color:var(--accent);} .quals-box{display:flex;flex-direction:column;gap:12px;margin-bottom:12px;} .qual-item{position:relative;border:1px solid var(--border);border-radius:12px;padding:14px 14px 2px;background:var(--surface-2);} .qual-item .field-row{margin-bottom:0;} .qual-item .field{margin-bottom:12px;} .qual-del{position:absolute;top:8px;inset-inline-end:8px;width:26px;height:26px;font-size:11px;z-index:1;} .doc-del{flex-shrink:0;width:24px;height:24px;font-size:10px;} /* ملف الموظف */ .emp-header{display:flex;gap:16px;align-items:center;background:var(--surface);border:1px solid var(--border); border-radius:16px;padding:18px 20px;margin-bottom:16px;box-shadow:0 4px 18px -12px rgba(20,30,60,.25);} .emp-header-av{width:72px;height:72px;border-radius:18px;object-fit:cover;flex-shrink:0;font-size:28px;} .emp-header-main{min-width:0;} .emp-header-main h1{margin:0;font-size:20px;font-family:'Cairo',sans-serif;} .emp-header-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0;align-items:center;} .emp-header-sub{font-size:12.5px;color:var(--muted);line-height:1.8;} .emp-cols{display:grid;grid-template-columns:1fr 1fr;gap:16px;} @media (max-width:760px){.emp-cols{grid-template-columns:1fr;}} .emp-block{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:16px 18px;margin-bottom:16px;} .emp-block h3{margin:0 0 12px;font-size:14px;font-weight:700;} .emp-dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0;} .emp-dl > div{min-width:0;} .emp-dl > div.wide{grid-column:1 / -1;} .emp-dl dt{font-size:11px;color:var(--muted);margin-bottom:2px;} .emp-dl dd{margin:0;font-size:13px;color:var(--text);word-break:break-word;} .emp-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} .emp-list li{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:9px 12px;font-size:13px;} .emp-list-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px;} .doc-group{margin-bottom:12px;} .doc-group-h{font-size:11.5px;color:var(--muted);font-weight:700;margin-bottom:6px;} .doc-item{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:7px 10px;background:var(--surface-2); border:1px solid var(--border);border-radius:9px;margin-bottom:5px;} .doc-item a{font-size:13px;color:var(--accent);text-decoration:none;font-weight:600;} .doc-item a:hover{text-decoration:underline;} .doc-upload,.ledger-add,.report-add{display:block;margin-top:10px;padding-top:14px;border-top:1px dashed var(--border);} .doc-upload .field-row,.ledger-add .field-row,.report-add .field-row{margin-bottom:12px;} .doc-upload .field:last-of-type,.ledger-add .field:last-of-type{margin-bottom:12px;} .report-add .field-row{margin-bottom:12px;} .ledger-totals{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px;} .lt{font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;font-family:'JetBrains Mono';} .lt-in{background:#e6f7ee;color:#1a9455;} .lt-out{background:#fdecea;color:#d0402c;} .lt-net{background:var(--surface-2);border:1px solid var(--border);color:var(--text);} .tag-in{background:#e6f7ee;color:#1a9455;} .tag-out{background:#fdecea;color:#d0402c;} .tag-warn{background:#fdf3e2;color:#b3791c;} .emp-report{background:var(--surface-2);border:1px solid var(--border);border-radius:10px;padding:12px 14px;margin-bottom:8px;} .emp-report-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:13.5px;} .emp-report p{margin:6px 0;font-size:13px;line-height:1.8;color:var(--text);} /* الراتب — مكوّنات وإجمالي */ .salary-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-bottom:8px;} @media (max-width:560px){.salary-grid{grid-template-columns:1fr;}} .salary-total{background:var(--surface-2);border:1px solid var(--border);border-radius:8px;padding:9px 12px; font-size:13px;display:flex;justify-content:space-between;margin-bottom:6px;} .salary-total strong{font-family:'JetBrains Mono';color:var(--accent);} .salary-table{display:flex;flex-direction:column;gap:1px;background:var(--border);border:1px solid var(--border);border-radius:10px;overflow:hidden;} .salary-row{display:flex;justify-content:space-between;gap:10px;padding:9px 13px;background:var(--surface);font-size:13px;} .salary-row span:first-child{color:var(--muted);} .salary-row-total{background:var(--surface-2);font-weight:700;} .salary-row-total span:first-child{color:var(--text);} .salary-row-total .mono{color:var(--accent);} /* إدارة الفريق — لوحة أقسام */ .hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:14px;} .hub-card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--border); border-radius:14px;padding:18px;text-decoration:none;color:inherit; transition:border-color .15s,box-shadow .15s,transform .15s;} .hub-card:hover{border-color:var(--accent-2);box-shadow:0 12px 28px -16px rgba(20,30,60,.32);transform:translateY(-2px);} .hub-card-top{display:flex;align-items:center;justify-content:space-between;} .hub-icon{font-size:26px;line-height:1;} .hub-count{font-family:'JetBrains Mono';font-weight:700;font-size:15px;color:var(--accent); background:var(--accent-dim);border-radius:8px;padding:2px 10px;} .hub-title{font-family:'Cairo',sans-serif;font-weight:700;font-size:15px;margin-top:6px;} .hub-desc{font-size:12px;color:var(--muted);line-height:1.7;flex:1;} .hub-go{font-size:12px;font-weight:700;color:var(--accent);margin-top:4px;} /* أيام الدوام + قواعد الحضور */ .day-pick{display:flex;flex-wrap:wrap;gap:6px;} .day-chip{position:relative;cursor:pointer;} .day-chip input{position:absolute;opacity:0;} .day-chip span{display:block;padding:6px 12px;border:1px solid var(--border);border-radius:20px;font-size:12.5px; background:var(--surface-2);color:var(--muted);transition:all .13s;} .day-chip input:checked + span{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:600;} .rule-box{border:1px solid var(--border);border-radius:12px;padding:14px;margin-bottom:12px;background:var(--surface-2);} .rule-head{display:flex;align-items:flex-start;gap:8px;cursor:pointer;margin-bottom:10px;font-size:13.5px;} .rule-head input{margin-top:2px;flex-shrink:0;} .rep-list{display:flex;flex-direction:column;gap:12px;margin-bottom:10px;} .rep-row.tier-row,.rep-row.pen-row{position:relative;border:1px solid var(--border);border-radius:12px; padding:14px 34px 2px 14px;background:var(--surface);} .rep-row.tier-row .field-row,.rep-row.pen-row .field-row{margin-bottom:12px;} .rep-row input,.rep-row select{margin:0;} .pen-lbl{font-size:11px;color:var(--muted);display:block;margin-bottom:6px;} .rep-del{position:absolute;top:8px;inset-inline-end:8px;flex-shrink:0;width:26px;height:26px;font-size:10px;z-index:1;} /* زرار حذف صغير موحّد — دائرة حمراء فاتحة تتغمّق عند التحويم (كل الـ ✕ الصغيرة في التطبيق) */ .contact-del,.qual-del,.doc-del,.rep-del{border-radius:50%;border:1px solid #f4cdc6;background:#fdecea; color:var(--prio-high);cursor:pointer;font-weight:700;line-height:1;box-shadow:0 2px 6px -3px rgba(224,80,63,.4); display:flex;align-items:center;justify-content:center;transition:all .15s;} .contact-del:hover,.qual-del:hover,.doc-del:hover,.rep-del:hover{background:var(--prio-high);color:#fff; border-color:var(--prio-high);transform:scale(1.08);} /* ================= تذكيراتي — كارت التذكير ================= */ .repeat-panel[hidden]{display:none !important;} .rem-list{display:flex;flex-direction:column;gap:10px;} .rem-card{display:flex;background:var(--surface);border:1px solid var(--border);border-radius:14px;overflow:hidden; box-shadow:0 3px 14px -10px rgba(20,30,60,.25);transition:box-shadow .15s;} .rem-card:hover{box-shadow:0 8px 22px -12px rgba(20,30,60,.32);} .rem-card-bar{width:5px;flex-shrink:0;background:var(--accent-2);} .rem-card.st-overdue .rem-card-bar{background:var(--prio-high);} .rem-card.st-upcoming .rem-card-bar{background:#22b573;} .rem-card.st-done{opacity:.55;} .rem-card.st-done .rem-card-bar{background:var(--border);} .rem-card-body{flex:1;min-width:0;padding:13px 14px;} .rem-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} .rem-title{font-family:'Cairo',sans-serif;font-size:14.5px;color:var(--text);} .rem-badge{font-size:10.5px;font-weight:700;color:#1f6b47;background:#e9f3ee;border-radius:20px;padding:3px 10px;white-space:nowrap;} .rem-when{font-size:12.5px;color:var(--muted);margin-top:4px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;} .rem-card.st-overdue .rem-when{color:var(--prio-high);font-weight:700;} .rem-tz{font-family:'IBM Plex Sans Arabic';font-size:10.5px;opacity:.75;font-weight:400;} .rem-note{margin:6px 0 0;font-size:12.5px;color:var(--text);line-height:1.7;} .rem-actions{display:flex;flex-direction:row;gap:6px;padding:10px;border-inline-start:1px solid var(--border); background:var(--surface-2);align-items:center;} .rem-act{width:30px;height:30px;border-radius:9px;border:none;cursor:pointer;font-size:13px;line-height:1; box-shadow:none;color:#fff;display:flex;align-items:center;justify-content:center;transition:filter .12s;flex-shrink:0;} .rem-act:hover{filter:brightness(1.08);transform:none;} .rem-act-done{background:#22b573;} .rem-act-stop{background:#e0a53f;} .rem-act-del{background:#e0503f;} @media (max-width:480px){.rem-card{flex-direction:column;}.rem-card-bar{width:100%;height:4px;} .rem-actions{flex-direction:row;border-inline-start:none;border-top:1px solid var(--border);}} /* شبكة أيام «مخصّص» — أحمر افتراضي، أخضر لما يتحدد */ .date-grid{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px;} .date-chip{min-width:34px;height:30px;padding:0 6px;border:none;border-radius:8px;background:#e0503f;color:#fff; font-weight:700;font-size:12px;font-family:'JetBrains Mono';cursor:pointer;box-shadow:none;transition:background .13s;} .date-chip[aria-pressed="true"]{background:#22b573;} .date-chip:hover{filter:brightness(1.06);transform:none;} /* صورة الموظف في الفورم */ .emp-avatar-field{display:flex;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px dashed var(--border);} .emp-avatar-preview{width:64px;height:64px;border-radius:16px;object-fit:cover;flex-shrink:0;} .emp-avatar-field .emp-av-fb{display:flex;align-items:center;justify-content:center;background:var(--accent-2);color:#fff;font-weight:700;font-size:24px;} .emp-avatar-field .field{flex:1;margin-bottom:0;} /* قايمة «حضوري»: أزرار تغيير حالة + ملاحظة معطّلة */ .user-menu-panel button.menu-item-btn{display:block;width:100%;text-align:start;padding:9px 10px;border-radius:6px; font-size:13px;color:var(--text);background:transparent;border:none;cursor:pointer;font-family:inherit;box-shadow:none;} .user-menu-panel button.menu-item-btn:hover{background:var(--accent-dim);color:var(--accent);transform:none;} .menu-note{padding:9px 10px;font-size:12px;color:var(--muted);line-height:1.5;max-width:190px;} /* بوب أبات حضوري (حضور/بريك/انصراف) */ .att-modal{max-width:420px;text-align:center;animation:fadeUp .25s ease both;} .att-modal-icon{line-height:1;margin-bottom:10px;display:flex;justify-content:center;color:var(--accent);} .att-modal-text{font-size:15px;line-height:1.8;color:var(--text);margin:0;} .att-modal .modal-actions{justify-content:center;margin-top:16px;} .att-modal.att-checkin .att-modal-icon{color:var(--warn, #e0a53c);} .att-modal.att-break_out .att-modal-icon,.att-modal.att-break_return .att-modal-icon{color:var(--good, #22b573);} .att-modal.att-end .att-modal-icon{color:var(--accent-2, #2a8560);} /* تقارير الحضور */ .month-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 18px;} .month-nav-label{font-size:14px;font-weight:700;color:var(--text);min-width:130px;text-align:center;} .att-summary{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:18px;} .att-sum-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 22px;text-align:center;min-width:140px;} .att-sum-num{font-family:'JetBrains Mono';font-size:22px;font-weight:700;color:var(--accent);} .att-sum-lbl{font-size:12px;color:var(--muted);margin-top:4px;} /* بوب أب إثبات الحضور للعمل عن بعد */ .presence-modal{max-width:380px;text-align:center;animation:fadeUp .25s ease both;} .presence-shield{line-height:1;margin-bottom:6px;display:flex;justify-content:center;color:var(--accent);} .presence-modal h2{font-size:16px;margin:0 0 10px;} .presence-hint{font-size:13px;color:var(--muted);margin:0 0 10px;} .presence-capture-hint{font-size:11.5px;color:var(--muted);margin:-4px 0 10px;display:flex;align-items:center;justify-content:center;gap:6px;} .presence-capture-dot{width:7px;height:7px;border-radius:50%;background:var(--prio-high);flex-shrink:0;animation:presenceDotPulse 1.4s ease-in-out infinite;} @keyframes presenceDotPulse{0%,100%{opacity:1;}50%{opacity:.25;}} .presence-video-wrap{position:relative;width:120px;height:120px;margin:0 auto 12px;border-radius:50%;overflow:hidden; border:3px solid var(--accent);box-shadow:0 0 0 4px var(--accent-dim);} .presence-video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);background:var(--surface-2);display:block;} .presence-video-off{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:var(--muted);font-size:11px;padding:8px;text-align:center;} @media (prefers-reduced-motion:reduce){.presence-capture-dot{animation:none;}} .checkbox-inline{display:flex;align-items:center;gap:7px;font-size:13px;font-weight:600;cursor:pointer;} .checkbox-inline input{margin:0;} .presence-log-thumb{width:32px;height:32px;border-radius:6px;object-fit:cover;border:1px solid var(--border);display:block;} .presence-code{font-family:'JetBrains Mono';font-size:32px;font-weight:700;letter-spacing:6px;color:var(--accent); background:var(--accent-dim);border-radius:10px;padding:10px 0;margin-bottom:12px;} .presence-modal .field{margin-bottom:4px;} .presence-modal .field input{text-align:center;font-size:16px;letter-spacing:3px;} .presence-timer{height:5px;border-radius:999px;background:var(--surface-2);overflow:hidden;margin-top:16px;} .presence-timer-bar{height:100%;background:linear-gradient(90deg,var(--accent-2),var(--accent));width:100%;transition:width 1s linear;} .presence-error{color:var(--prio-high);font-size:12.5px;font-weight:600;margin-top:10px;} .presence-slider{position:relative;height:46px;border-radius:23px;background:var(--surface-2);border:1px solid var(--border); margin-bottom:4px;overflow:hidden;display:flex;align-items:center;} .presence-slider-label{position:absolute;inset-inline:0;text-align:center;font-size:13px;color:var(--muted);pointer-events:none;} .presence-slider-knob{position:absolute;inset-inline-start:2px;top:2px;width:42px;height:42px;border-radius:50%; background:linear-gradient(135deg,var(--accent-2),var(--accent));color:#fff;display:flex;align-items:center;justify-content:center; font-size:16px;cursor:grab;touch-action:none;box-shadow:0 4px 10px -4px rgba(31,107,71,.5);} .presence-slider.done .presence-slider-knob{background:#22b573;} .presence-slider.done .presence-slider-label{opacity:0;} /* ===== منتقي التاريخ/الوقت (Flatpickr) — بألوان النظام ===== ملاحظة: !important هنا مقصودة — الـCSS بتاع المكتبة نفسها بيتحمّل من CDN جوه body بعد style.css، فبياخد أولوية بسبب ترتيب التحميل مش التخصيص. */ .fp-alt-input.field-like{width:100%;background:var(--surface-2)!important;border:1px solid var(--border)!important; color:var(--text)!important;border-radius:8px;padding:9px 10px;font-size:13.5px;font-family:inherit; text-align:start;cursor:pointer;} .fp-alt-input.field-like:focus{outline:none;border-color:var(--accent-2)!important;background:var(--surface)!important;} /* أيقونة التقويم لحقول اختيار التاريخ/الوقت فقط — مش لحقول البحث اللي بتشارك نفس الكلاس (data-no-fp) */ .fp-alt-input.field-like:not([data-no-fp]){ background-repeat:no-repeat!important;background-size:15px!important; --fp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E"); background-image:var(--fp-icon)!important;} html[dir="rtl"] .fp-alt-input.field-like:not([data-no-fp]){background-position:10px center!important;padding-left:30px!important;} html[dir="ltr"] .fp-alt-input.field-like:not([data-no-fp]){background-position:right 10px center!important;padding-right:30px!important;} :root[data-theme="dark"] .fp-alt-input.field-like:not([data-no-fp]){--fp-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B93A1' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4.5' width='17' height='16' rx='2'/%3E%3Cpath d='M3.5 9.5h17'/%3E%3Cpath d='M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E");} .flatpickr-calendar{background:var(--surface)!important;border:1px solid var(--border)!important;border-radius:14px!important; box-shadow:0 16px 40px -12px rgba(20,30,60,.28)!important;font-family:'Cairo','IBM Plex Sans Arabic',system-ui,sans-serif!important; direction:rtl;} .flatpickr-calendar.arrowTop:before{border-bottom-color:var(--border)!important;} .flatpickr-calendar.arrowTop:after{border-bottom-color:var(--surface)!important;} .flatpickr-months{padding:10px 10px 4px;} .flatpickr-current-month{font-size:14px;color:var(--text)!important;} .flatpickr-current-month input.cur-year{color:var(--text)!important;font-family:'JetBrains Mono';background:transparent!important;} .flatpickr-current-month .flatpickr-monthDropdown-months{color:var(--text)!important;background:transparent!important;} .flatpickr-monthDropdown-months option{background:var(--surface)!important;color:var(--text)!important;} .flatpickr-prev-month,.flatpickr-next-month{color:var(--muted)!important;fill:var(--muted)!important;} .flatpickr-prev-month:hover,.flatpickr-next-month:hover{color:var(--accent)!important;fill:var(--accent)!important;} .flatpickr-prev-month svg,.flatpickr-next-month svg{fill:currentColor!important;} .flatpickr-weekdays{background:transparent!important;} .flatpickr-weekdaycontainer{background:transparent!important;} span.flatpickr-weekday{background:transparent!important;color:var(--muted)!important;font-size:11px;font-weight:600;} .flatpickr-day{color:var(--text)!important;border-radius:8px;} .flatpickr-day.today{border-color:var(--accent-2)!important;} .flatpickr-day:hover{background:var(--accent-dim)!important;border-color:var(--accent-dim)!important;color:var(--accent)!important;} .flatpickr-day.selected,.flatpickr-day.selected:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:var(--on-accent)!important;font-weight:700;} .flatpickr-day.flatpickr-disabled,.flatpickr-day.flatpickr-disabled:hover{color:var(--border)!important;} .flatpickr-day.prevMonthDay,.flatpickr-day.nextMonthDay{color:var(--muted)!important;opacity:.5;} .flatpickr-day.week.selected{box-shadow:none;} .flatpickr-time{border-top:1px solid var(--border)!important;} .flatpickr-time input,.flatpickr-time .flatpickr-am-pm{color:var(--text)!important;background:transparent!important;} .flatpickr-time input:hover,.flatpickr-time .flatpickr-am-pm:hover, .flatpickr-time input:focus,.flatpickr-time .flatpickr-am-pm:focus{background:var(--accent-dim)!important;} .flatpickr-time .numInputWrapper span.arrowUp:after{border-bottom-color:var(--muted)!important;} .flatpickr-time .numInputWrapper span.arrowDown:after{border-top-color:var(--muted)!important;} .flatpickr-time .numInputWrapper:hover{background:var(--accent-dim)!important;} .flatpickr-time .flatpickr-time-separator,.flatpickr-time .flatpickr-am-pm{color:var(--muted)!important;} .numInputWrapper span{border-color:var(--border)!important;} /* شريط فلاتر التقارير */ .report-filters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px;margin:14px 0 18px; background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;} .report-filters .field{margin-bottom:0;min-width:150px;} .report-filters .btn{white-space:nowrap;} .period-panel[hidden]{display:none!important;} /* ================================================================ وضع "نبض" الداكن — كل حاجة هنا بتتفعّل بس لما data-theme="dark" (التصميم الأصلي فوق ده متغيّرش، فاضل هو نفسه لمّا المستخدم يختاره) ================================================================ */ :root[data-theme="dark"] .stat{background:var(--surface);border:1px solid var(--border);color:var(--text); box-shadow:none;position:relative;overflow:hidden;} :root[data-theme="dark"] .stat::before{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:3px;} :root[data-theme="dark"] .stat:nth-child(1){background:var(--surface);} :root[data-theme="dark"] .stat:nth-child(1)::before{background:var(--accent-2);} :root[data-theme="dark"] .stat:nth-child(2){background:var(--surface);} :root[data-theme="dark"] .stat:nth-child(2)::before{background:var(--accent-3);} :root[data-theme="dark"] .stat:nth-child(3){background:var(--surface);} :root[data-theme="dark"] .stat:nth-child(3)::before{background:var(--teal);} :root[data-theme="dark"] .stat:nth-child(4){background:var(--surface);} :root[data-theme="dark"] .stat:nth-child(4)::before{background:var(--bad);} :root[data-theme="dark"] .stat.s-blue{background:var(--surface);} :root[data-theme="dark"] .stat.s-blue::before{background:var(--accent-2);} :root[data-theme="dark"] .stat.s-purple{background:var(--surface);} :root[data-theme="dark"] .stat.s-purple::before{background:var(--accent-3);} :root[data-theme="dark"] .stat.s-teal{background:var(--surface);} :root[data-theme="dark"] .stat.s-teal::before{background:var(--teal);} :root[data-theme="dark"] .stat.s-green{background:var(--surface);} :root[data-theme="dark"] .stat.s-green::before{background:var(--good);} :root[data-theme="dark"] .stat.s-red{background:var(--surface);} :root[data-theme="dark"] .stat.s-red::before{background:var(--bad);} :root[data-theme="dark"] .stat.s-amber{background:var(--surface);} :root[data-theme="dark"] .stat.s-amber::before{background:var(--accent);} :root[data-theme="dark"] .stat.s-gray{background:var(--surface);} :root[data-theme="dark"] .stat.s-gray::before{background:var(--muted);} :root[data-theme="dark"] .stat .num{color:var(--text);} :root[data-theme="dark"] .stat .label{color:var(--muted);} :root[data-theme="dark"] .btn.primary{background:var(--accent);} :root[data-theme="dark"] .btn.primary:hover{box-shadow:0 8px 20px -8px rgba(240,166,58,.4);} :root[data-theme="dark"] .me-box .btn.small.active{background:var(--accent);box-shadow:0 4px 12px -5px rgba(45,217,174,.4);} :root[data-theme="dark"] .btn-back{background:var(--accent);color:var(--on-accent);box-shadow:0 4px 14px -6px rgba(240,166,58,.35);} :root[data-theme="dark"] .updates-btn::before{background:conic-gradient(from 0deg, rgba(240,85,63,.14) 0%, rgba(240,85,63,.14) 74%, var(--bad) 84%, #FF9B85 89%, var(--bad) 92%, rgba(240,85,63,.14) 98%, rgba(240,85,63,.14) 100%);} :root[data-theme="dark"] .updates-btn:hover::after{background:color-mix(in srgb, var(--bad) 18%, var(--surface));} :root[data-theme="dark"] .status-btn.status-cancelled{background:#5A6270;} :root[data-theme="dark"] .rwt-clock-dot{background:var(--status-done);} :root[data-theme="dark"] .sticky-toggle{background:var(--accent-3);box-shadow:0 8px 20px -8px rgba(185,140,242,.45);} :root[data-theme="dark"] .sticky-note-item{background:color-mix(in srgb, var(--accent-3) 14%, var(--surface)); border:1px solid color-mix(in srgb, var(--accent-3) 30%, transparent);color:var(--text);} :root[data-theme="dark"] .sticky-note-del{color:var(--accent-3);} :root[data-theme="dark"] .chat-badge{border-color:var(--bg);} :root[data-theme="dark"] .chat-avatar-fb{background:var(--accent-3);} :root[data-theme="dark"] .chat-main{background:var(--bg);} :root[data-theme="dark"] .chat-msg.mine{background:var(--accent-2);color:#08202A;} :root[data-theme="dark"] .chat-msg.mine .chat-att-file{background:rgba(0,0,0,.18);} :root[data-theme="dark"] .chat-input:focus{background:var(--surface-2);} :root[data-theme="dark"] .chat-send{background:var(--accent-2);color:#08202A;} :root[data-theme="dark"] .chat-dropzone{background:color-mix(in srgb, var(--accent-2) 14%, transparent);border-color:var(--accent-2);color:var(--accent-2);} :root[data-theme="dark"] .asg-av-fb{background:var(--accent-3);} :root[data-theme="dark"] .bcast-chip-av-fb{background:var(--accent-3);} :root[data-theme="dark"] .asg-toggle{background:var(--bad);} :root[data-theme="dark"] .asg-toggle[aria-pressed="true"]{background:var(--good);} :root[data-theme="dark"] .client-avatar.company{background:color-mix(in srgb, var(--accent-2) 16%, var(--surface));} :root[data-theme="dark"] .client-avatar.individual{background:color-mix(in srgb, var(--good) 16%, var(--surface));} :root[data-theme="dark"] .client-card-head.company{background:color-mix(in srgb, var(--accent-2) 12%, var(--surface));} :root[data-theme="dark"] .client-card-head.individual{background:color-mix(in srgb, var(--good) 12%, var(--surface));} :root[data-theme="dark"] .client-card-avatar{background:var(--surface-2);} :root[data-theme="dark"] .stars .star, :root[data-theme="dark"] .star-input label, :root[data-theme="dark"] .client-card-rating .star{color:var(--border);} :root[data-theme="dark"] .stars .star.on, :root[data-theme="dark"] .star-input input:checked ~ label, :root[data-theme="dark"] .client-card-rating .star.on{color:var(--accent);} :root[data-theme="dark"] .emp-status.st-active{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good);} :root[data-theme="dark"] .emp-status.st-probation{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);} :root[data-theme="dark"] .emp-status.st-on_leave{background:color-mix(in srgb, var(--accent-2) 16%, transparent);color:var(--accent-2);} :root[data-theme="dark"] .emp-status.st-terminated{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);} :root[data-theme="dark"] .lt-in,:root[data-theme="dark"] .tag-in{background:color-mix(in srgb, var(--good) 16%, transparent);color:var(--good);} :root[data-theme="dark"] .lt-out,:root[data-theme="dark"] .tag-out{background:color-mix(in srgb, var(--bad) 16%, transparent);color:var(--bad);} :root[data-theme="dark"] .tag-warn{background:color-mix(in srgb, var(--warn) 16%, transparent);color:var(--warn);} :root[data-theme="dark"] .contact-del,:root[data-theme="dark"] .qual-del, :root[data-theme="dark"] .doc-del,:root[data-theme="dark"] .rep-del{ border:1px solid color-mix(in srgb, var(--bad) 40%, transparent);background:color-mix(in srgb, var(--bad) 14%, transparent);} :root[data-theme="dark"] .contact-del:hover,:root[data-theme="dark"] .qual-del:hover, :root[data-theme="dark"] .doc-del:hover,:root[data-theme="dark"] .rep-del:hover{background:var(--bad);color:#fff;border-color:var(--bad);} :root[data-theme="dark"] .rem-card.st-upcoming .rem-card-bar{background:var(--good);} :root[data-theme="dark"] .rem-badge{color:var(--accent-3);background:color-mix(in srgb, var(--accent-3) 16%, transparent);} :root[data-theme="dark"] .rem-act-done{background:var(--good);} :root[data-theme="dark"] .rem-act-stop{background:var(--warn);} :root[data-theme="dark"] .rem-act-del{background:var(--bad);} :root[data-theme="dark"] .date-chip{background:var(--bad);} :root[data-theme="dark"] .date-chip[aria-pressed="true"]{background:var(--good);} :root[data-theme="dark"] .presence-slider-knob{background:var(--accent-2);color:#08202A;} :root[data-theme="dark"] .presence-slider.done .presence-slider-knob{background:var(--good);} /* دروب داون "ألوان النظام" في الهيدر */ .theme-menu-panel{min-width:190px;} .theme-option{display:flex;align-items:center;gap:10px;width:100%;text-align:start;padding:9px 10px; border-radius:6px;font-size:13px;color:var(--text);background:transparent;border:none;cursor:pointer; font-family:inherit;box-shadow:none;} .theme-option:hover{background:var(--accent-dim);color:var(--accent);transform:none;} .theme-option.active{font-weight:700;color:var(--accent);} .theme-swatch{width:14px;height:14px;border-radius:50%;flex-shrink:0;border:1px solid var(--border);} .theme-swatch.sw-light{background:linear-gradient(135deg,#eef2f9,#1f6b47);} .theme-swatch.sw-dark{background:linear-gradient(135deg,#15181D,#F0A63A);} /* ===== الهيكل التنظيمي (team_org.php) ===== */ .empty-hint{color:var(--muted);font-size:13.5px;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px;text-align:center;} .field-like-label{font-size:13px;color:var(--muted);} .org-wrap{max-width:900px;margin:0 auto;} .org-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:36px 20px; display:flex;flex-direction:column;align-items:center;min-height:220px;justify-content:center;gap:36px;} .org-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;} /* كارت الشخص — دايرة بحلقة ملوّنة + اسم في بوكس + مسمى وظيفي في بوكس رمادي (زي كروت الهيكل التنظيمي الكلاسيكية) */ .org-node{display:flex;flex-direction:column;align-items:center;width:118px;flex-shrink:0;} .org-avatar-ring{position:relative;width:66px;height:66px;border-radius:50%;padding:3px;border:2.5px solid var(--org-ring,var(--accent)); margin-bottom:9px;background:var(--surface);box-shadow:0 3px 10px -4px rgba(20,30,60,.25);} .org-node-root .org-avatar-ring{width:76px;height:76px;} /* حلقة بتلف حوالين أي حد بيدير فريق (ليه ناس تابعاله) — إشارة بصرية سريعة إنه مدير */ .org-node-has-team .org-avatar-ring::before{ content:'';position:absolute;inset:-5px;border-radius:50%; border:2.5px solid transparent;border-top-color:var(--org-ring,var(--accent));border-inline-end-color:var(--org-ring,var(--accent)); animation:orgTeamSpin 2.1s linear infinite; } @keyframes orgTeamSpin{to{transform:rotate(360deg);}} @media (prefers-reduced-motion:reduce){.org-node-has-team .org-avatar-ring::before{animation:none;}} /* بادچ عدد التاسكات المفتوحة على صورة الموظف */ .org-task-badge{position:absolute;bottom:-2px;left:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:20px; background:var(--accent-2);color:#fff;font-size:10.5px;font-weight:700;font-family:'JetBrains Mono',monospace; display:flex;align-items:center;justify-content:center;border:2px solid var(--surface);z-index:2;} .org-standalone .org-task-badge{width:16px;height:16px;min-width:16px;font-size:9px;bottom:-1px;left:-1px;} .org-stats{max-width:900px;margin:0 auto 18px;} .org-avatar{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;} .org-avatar-fb{width:100%;height:100%;border-radius:50%;display:flex;align-items:center;justify-content:center; font-size:19px;font-weight:700;background:var(--accent-dim);color:var(--accent);} .org-node-name{font-size:12.5px;font-weight:700;color:var(--text);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:100%;background:var(--surface);border:1.5px solid var(--org-ring,var(--accent));border-radius:8px;padding:4px 10px;} .org-node-root .org-node-name{font-size:13.5px;font-weight:800;padding:5px 12px;} .org-node-sub{font-size:10px;color:var(--muted);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; max-width:100%;background:var(--surface-2);border-radius:6px;padding:2px 10px;margin-top:5px;} .org-node-self .org-avatar-ring{box-shadow:0 0 0 3px var(--accent-dim),0 3px 10px -4px rgba(20,30,60,.25);} /* الشجرة الكاملة (الأدمن) — نمط CSS كلاسيكي لخريطة هيكلية بخطوط واصلة */ .org-tree-wrap{overflow-x:auto;width:100%;} .org-tree,.org-tree ul{list-style:none;margin:0;padding-top:24px;position:relative;display:flex;justify-content:center;gap:8px;} .org-tree{padding-top:0;} .org-tree li{position:relative;padding:24px 12px 0;display:flex;flex-direction:column;align-items:center;} .org-tree li::before,.org-tree li::after{content:'';position:absolute;top:0;width:50%;height:24px;border-top:2px solid var(--border);} .org-tree li::before{right:50%;border-right:2px solid var(--border);border-radius:0 0 0 6px;} .org-tree li::after{left:50%;border-left:2px solid var(--border);border-radius:0 0 6px 0;} .org-tree li:only-child{padding-top:0;} .org-tree li:only-child::before,.org-tree li:only-child::after{display:none;} .org-tree > li{padding-top:0;} .org-tree > li::before,.org-tree > li::after{display:none;} .org-tree li:first-child::before,.org-tree li:last-child::after{border:0 none;} .org-tree li:last-child::before{border-right:2px solid var(--border);} .org-tree li:first-child:after{border-left:0 none;} .org-tree ul::before{content:'';position:absolute;top:0;left:50%;margin-left:-1px;border-left:2px solid var(--border);width:0;height:24px;} /* الموظفين اللي مش تابعين لحد ومفيش حد تابعلهم — شبكة بسيطة منفصلة عن الهيكل */ .org-standalone{width:100%;padding-top:8px;border-top:1px dashed var(--border);} .org-standalone-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:20px 14px;} .org-standalone .org-node{width:82px;} .org-standalone .org-avatar-ring{width:46px;height:46px;border:2px solid var(--border);margin-bottom:6px;} .org-standalone .org-node-name{font-size:11px;font-weight:600;border-color:var(--border);padding:2px 6px;} .org-standalone .org-node-sub{display:none;} /* الشجرة الشخصية (غير الأدمن) */ .org-personal{display:flex;flex-direction:column;align-items:center;} .org-row{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;} .org-connector{width:2px;height:26px;background:var(--border);} .org-row-hint{color:var(--muted);font-size:13px;text-align:center;} /* ===== نظرة عامة وانطباع عام عن الموظف (employee_view.php) ===== */ .impr-card{background:linear-gradient(160deg,var(--surface),var(--surface-2));} .impr-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:10px;} .impr-head h3{margin:0;} .impr-head-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .impr-period{font-size:11px;font-weight:400;color:var(--muted);margin-inline-start:6px;} .impr-badge{padding:6px 16px;border-radius:20px;font-size:13px;font-weight:700;white-space:nowrap;} .impr-badge.impr-good{background:color-mix(in srgb,var(--good) 16%,transparent);color:var(--good);} .impr-badge.impr-warn{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn);} .impr-badge.impr-bad{background:color-mix(in srgb,var(--bad) 16%,transparent);color:var(--bad);} .impr-badge.impr-gray{background:var(--surface-2);color:var(--muted);} .impr-badge.impr-link{background:var(--surface-2);color:var(--accent);border:1px solid var(--border);text-decoration:none;cursor:pointer;transition:.15s;} .impr-badge.impr-link:hover{background:var(--accent-dim);border-color:var(--accent-2);transform:translateY(-1px);} .impr-note{font-size:13.5px;color:var(--text);line-height:1.7;margin:0 0 16px;} .impr-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;} @media (max-width:900px){.impr-stats{grid-template-columns:repeat(3,1fr);}} @media (max-width:560px){.impr-stats{grid-template-columns:repeat(2,1fr);}} .impr-stat{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:14px 10px;text-align:center;} .impr-stat-val{font-size:21px;font-weight:700;font-family:'JetBrains Mono';margin-bottom:5px;color:var(--text);} .impr-stat-val.impr-good{color:var(--good);} .impr-stat-val.impr-warn{color:var(--warn);} .impr-stat-val.impr-bad{color:var(--bad);} .impr-stat-val.impr-gray{color:var(--muted);font-size:17px;} .impr-stat-lbl{font-size:11.5px;color:var(--muted);line-height:1.5;} .impr-stat-hint{font-size:10px;opacity:.8;} /* ====================================================================== Albero Modern Workspace — Status Groups (Phase 1: shell + sidebar + topbar + tasks list). Scoped to new v2-* tokens/classes so existing pages/components are completely unaffected. ====================================================================== */ :root{ --v2-bg:#eef1f5; --v2-sidebar-bg:#ffffff; --v2-panel:#ffffff; --v2-panel-hover:#f4f6f9; --v2-border:#e2e7ee; --v2-text:#151b23; --v2-text-2:#66707c; --v2-accent:#0f9c82; --v2-accent-hover:#0c8570; --v2-on-accent:#ffffff; --v2-blue:#2f7fd0; --v2-amber:#b06e12; --v2-red:#d3363f; --v2-green:#0f9c82; --v2-radius-sm:6px; --v2-radius-md:10px; --v2-radius-lg:14px; --v2-shadow-sm:0 1px 2px rgba(20,30,45,.06); --v2-shadow-md:0 10px 26px -16px rgba(20,30,45,.25); --v2-row-h:38px; --v2-header-h:46px; --v2-sidebar-w:224px; --v2-sidebar-w-collapsed:64px; --v2-ease:cubic-bezier(.2,.8,.2,1); --v2-z-sidebar:150; --v2-z-topbar:140; --v2-z-tooltip:400; --v2-z-toast:500; } :root[data-theme="dark"]{ --v2-bg:#0B1118; --v2-sidebar-bg:#17222F; --v2-panel:#15202C; --v2-panel-hover:#1B2936; --v2-border:#293848; --v2-text:#F2F7FB; --v2-text-2:#8FA0B2; --v2-accent:#31D2B0; --v2-accent-hover:#53DFC2; --v2-on-accent:#062621; --v2-blue:#55AAF4; --v2-amber:#F5AD42; --v2-red:#FF6974; --v2-green:#31D2B0; --v2-shadow-sm:0 1px 0 rgba(255,255,255,.03) inset; --v2-shadow-md:0 14px 32px -18px rgba(0,0,0,.6); } @media (prefers-reduced-motion:reduce){ .app-sidebar,.content-topbar,.tg-body,.tg-chevron,.v2-drawer,.v2-tooltip,.sidebar-link .nav-caret{transition:none!important;animation:none!important;} } /* ---------- Sidebar v2 (collapsible) ---------- */ .app-sidebar{background:var(--v2-sidebar-bg);border-inline-start-color:var(--v2-border); width:var(--v2-sidebar-w);transition:width .24s var(--v2-ease);} body{transition:margin-inline-end .24s var(--v2-ease);} .sidebar-brand{border-bottom:1px solid var(--v2-border);} .sidebar-brand-mark{background:var(--v2-accent);} .sidebar-brand-word{color:var(--v2-text);} .sidebar-brand-word em{color:var(--v2-text-2);} .sidebar-nav{gap:1px;} .sidebar-section-label{font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--v2-text-2); text-transform:uppercase;padding:14px 10px 5px;} .sidebar-link{color:var(--v2-text-2);border-radius:var(--v2-radius-sm);transition:background .14s var(--v2-ease),color .14s var(--v2-ease);} .sidebar-link:hover{background:var(--v2-panel-hover);color:var(--v2-text);} .sidebar-link.active{background:color-mix(in srgb, var(--v2-accent) 16%, transparent);color:var(--v2-accent);font-weight:600;} .sidebar-group > .user-menu-panel{border-inline-start-color:var(--v2-border);} .sidebar-group > .user-menu-panel a:hover,.sidebar-group > .user-menu-panel .submenu-head:hover{color:var(--v2-accent);background:color-mix(in srgb, var(--v2-accent) 12%, transparent);} .sidebar-collapse-btn{position:absolute;top:22px;inset-inline-end:-13px;z-index:160; flex-shrink:0;width:26px;height:26px;border:1px solid var(--v2-border);background:var(--v2-panel); border-radius:50%;color:var(--v2-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center; box-shadow:var(--v2-shadow-sm);transition:transform .16s var(--v2-ease),color .14s ease,border-color .14s ease,background .14s ease;} .sidebar-collapse-btn svg{width:14px;height:14px;flex-shrink:0;transition:transform .22s var(--v2-ease);} .sidebar-collapse-btn:hover{color:var(--v2-accent);border-color:var(--v2-accent);background:var(--v2-panel-hover);transform:scale(1.08);} .sidebar-collapse-btn:active{transform:scale(.94);} .app-sidebar.collapsed .sidebar-collapse-btn svg{transform:rotate(180deg);} /* حالة السايدبار المطوي: أيقونات بس + تولتيب عند الهوفر/الفوكس */ .app-sidebar.collapsed{width:var(--v2-sidebar-w-collapsed);} body.sidebar-collapsed{margin-inline-start:var(--v2-sidebar-w-collapsed)!important;} body.sidebar-collapsed .content-topbar{inset-inline-start:var(--v2-sidebar-w-collapsed)!important;} .app-sidebar.collapsed .sidebar-brand-word, .app-sidebar.collapsed .client-brand-logo, .app-sidebar.collapsed .sidebar-link span:not(.nav-count):not(.alarm-bell), .app-sidebar.collapsed .sidebar-link .nav-caret, .app-sidebar.collapsed .sidebar-section-label{display:none;} .app-sidebar.collapsed .sidebar-brand{justify-content:center;padding:16px 8px;} .app-sidebar.collapsed .sidebar-link{justify-content:center;padding:9px;position:relative;} .app-sidebar.collapsed .sidebar-group > .user-menu-panel{position:absolute!important;top:0!important; inset-inline-start:calc(100% + 8px)!important;inset-inline-end:auto!important;margin:0;border:1px solid var(--v2-border); background:var(--v2-panel);border-radius:var(--v2-radius-md);box-shadow:var(--v2-shadow-md);padding:6px;min-width:200px;} .app-sidebar.collapsed .sidebar-link[data-tip]:hover::after, .app-sidebar.collapsed .sidebar-link[data-tip]:focus-visible::after{ content:attr(data-tip);position:absolute;top:50%;inset-inline-start:calc(100% + 8px);transform:translateY(-50%); background:var(--v2-text);color:var(--v2-bg); font-size:11.5px;font-weight:600;padding:5px 9px;border-radius:6px;white-space:nowrap;z-index:var(--v2-z-tooltip); box-shadow:var(--v2-shadow-md);pointer-events:none;} /* ---------- Topbar v2 + global search ---------- */ .content-topbar{height:var(--v2-header-h);top:12px; inset-inline-start:var(--v2-sidebar-w);inset-inline-end:0; transition:inset-inline-start .24s var(--v2-ease);} .content-topbar-inner{background:var(--v2-panel);height:100%;max-width:1680px;margin-inline:auto; border:1px solid var(--v2-border);border-radius:var(--v2-radius-lg);box-shadow:var(--v2-shadow-sm);min-width:0;} body{padding-top:calc(var(--v2-header-h) + 24px);} .content-topbar .topbar-user-menu{flex-shrink:0;} .content-topbar .me-box{flex-shrink:0;} .topbar-user-name{color:var(--v2-text);} .topbar-user-role{color:var(--v2-text-2);} .v2-search{position:relative;display:flex;align-items:center;flex:1 1 auto;max-width:420px;min-width:0;} .v2-search form{min-width:0;} .v2-search-ic{position:absolute;inset-inline-start:12px;color:var(--v2-text-2);pointer-events:none;display:flex;} .v2-search-input{width:100%;background:var(--v2-panel-hover);border:1px solid var(--v2-border);border-radius:999px; padding:8px 14px 8px 40px;font-size:13px;color:var(--v2-text);font-family:inherit; transition:border-color .16s var(--v2-ease),box-shadow .16s var(--v2-ease),background .16s var(--v2-ease);} :root[dir="rtl"] .v2-search-input{padding:8px 40px 8px 14px;} .v2-search-input:hover{border-color:color-mix(in srgb, var(--v2-accent) 30%, var(--v2-border));} .v2-search-input::placeholder{color:var(--v2-text-2);} .v2-search-input:focus{outline:none;border-color:var(--v2-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--v2-accent) 18%, transparent);background:var(--v2-panel);} .v2-search-kbd{position:absolute;inset-inline-end:8px;font-size:10.5px;font-weight:600;color:var(--v2-text-2); border:1px solid var(--v2-border);border-radius:5px;padding:1px 6px;pointer-events:none;background:var(--v2-panel);} @media (max-width:900px){ .v2-search{max-width:220px;} } @media (max-width:760px){ .v2-search{max-width:none;flex:1 1 auto;} .v2-search-kbd{display:none;} } /* ---------- Topbar action icons + theme/lang segmented switches (small, consistent) ---------- */ .content-topbar .me-box{gap:6px;} .content-topbar .me-box .bell-btn{width:30px;height:30px;margin-inline-start:0;box-shadow:none;} .content-topbar .me-box .bell-btn svg{width:14px;height:14px;} .content-topbar .me-box .bell-btn.active{border-color:var(--v2-accent);color:var(--v2-accent); background:color-mix(in srgb, var(--v2-accent) 12%, var(--v2-panel));} .content-topbar .me-box .bell-count{min-width:16px;height:16px;font-size:9.5px;border-width:1.5px;} .v2-topbar-seg{display:inline-flex;align-items:center;padding:3px;gap:2px;border-radius:999px; border:1px solid var(--v2-border);background:var(--v2-panel-hover);flex-shrink:0;} .v2-seg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:24px; padding:0 8px;border-radius:999px;border:none;background:transparent;color:var(--v2-text-2); font-size:10.5px;font-weight:700;font-family:inherit;text-decoration:none;cursor:pointer;line-height:1; transition:background .14s var(--v2-ease),color .14s var(--v2-ease);} .v2-seg-btn:hover{color:var(--v2-text);} .v2-seg-btn.on{background:var(--v2-panel);color:var(--v2-accent);box-shadow:var(--v2-shadow-sm);} .v2-seg-btn-icon{width:24px;min-width:24px;padding:0;} /* ---------- Tasks page v2 (Status Groups) ---------- */ body.tasks-v2{background:var(--v2-bg);} .tv2-wrap{flex:1 0 auto;width:100%;max-width:1680px;margin-inline:auto;padding:20px 26px 60px;color:var(--v2-text);overflow-x:hidden;box-sizing:border-box;} .tv2-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px;flex-wrap:wrap;} .tv2-title{font-size:19px;font-weight:700;margin:0;color:var(--v2-text);} .tv2-sub{font-size:12.5px;color:var(--v2-text-2);margin-top:3px;} .tv2-primary-btn{background:var(--v2-accent);color:var(--v2-on-accent);border:none;border-radius:var(--v2-radius-sm); padding:9px 16px;font-size:13px;font-weight:700;display:inline-flex;align-items:center;gap:7px;cursor:pointer; text-decoration:none;transition:background .14s var(--v2-ease),transform .1s ease;box-shadow:none;} .tv2-primary-btn:hover{background:var(--v2-accent-hover);transform:translateY(-1px);} .tv2-primary-btn:active{transform:translateY(0);} .tv2-tabs{display:flex;align-items:center;gap:18px;border-bottom:1px solid var(--v2-border);margin-bottom:14px;} .tv2-tab{position:relative;padding:9px 2px;font-size:13px;font-weight:600;color:var(--v2-text-2); background:none;border:none;cursor:pointer;box-shadow:none;} .tv2-tab.active{color:var(--v2-accent);} .tv2-tab.active::after{content:'';position:absolute;inset-inline:0;bottom:-1px;height:2px;background:var(--v2-accent);border-radius:2px 2px 0 0;} .tv2-tab:disabled{opacity:.4;cursor:default;} .tv2-toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--v2-panel); border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);padding:8px 10px;margin-bottom:14px;box-shadow:var(--v2-shadow-sm);} .tv2-toolbar-group{display:flex;gap:4px;background:var(--v2-bg);border:1px solid var(--v2-border);border-radius:8px;padding:3px;} .tv2-chip{padding:5px 11px;font-size:12px;font-weight:600;color:var(--v2-text-2);border-radius:6px;text-decoration:none; border:none;background:none;cursor:pointer;box-shadow:none;white-space:nowrap;transition:background .12s ease,color .12s ease;} .tv2-chip:hover{color:var(--v2-text);} .tv2-chip.active{background:var(--v2-panel);color:var(--v2-accent);box-shadow:var(--v2-shadow-sm);} .tv2-toolbar input[type="text"],.tv2-toolbar input[type="date"],.tv2-toolbar select{ background:var(--v2-bg);border:1px solid var(--v2-border);border-radius:7px;padding:6px 10px;font-size:12px; color:var(--v2-text);font-family:inherit;height:32px;} .tv2-toolbar input:focus,.tv2-toolbar select:focus{outline:none;border-color:var(--v2-accent);} .tv2-toolbar .tv2-q{width:150px;} .tv2-toolbar .fp-alt-input.field-like{width:118px!important;padding:6px 10px!important;font-size:12px!important;height:32px!important;box-sizing:border-box;} .tv2-toolbar .tv2-apply{background:var(--v2-accent);color:var(--v2-on-accent);border:none;border-radius:7px; height:32px;padding:0 14px;font-size:12px;font-weight:700;cursor:pointer;box-shadow:none;} .tv2-toolbar .tv2-apply:hover{background:var(--v2-accent-hover);} .tv2-spacer{flex:1 1 auto;} .tv2-toolbar-fields{display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .tv2-table-wrap{border:1px solid var(--v2-border);border-radius:var(--v2-radius-lg);overflow-x:auto;overflow-y:hidden;background:var(--v2-panel);box-shadow:var(--v2-shadow-sm);max-width:100%;} table.tv2-table{width:100%;border-collapse:collapse;font-size:12.5px;} .tv2-col-id{width:60px;} .tv2-col-title-c{width:230px;} .tv2-col-creator{width:130px;} .tv2-col-assignees-c{width:140px;} .tv2-col-status-c{width:140px;} .tv2-col-due-c{width:150px;} .tv2-col-created-c{width:95px;} .tv2-col-lastupd-c{width:95px;} .tv2-col-updbtn-c{width:46px;} .tv2-col-priority-c{width:100px;} .tv2-col-actions-c{width:50px;} .tv2-center{text-align:center!important;} table.tv2-table thead th.tv2-center a{text-align:center;} table.tv2-table thead th{text-align:start;padding:8px 12px;font-size:10.5px;font-weight:700;color:var(--v2-text-2); text-transform:uppercase;letter-spacing:.03em;border-bottom:1px solid var(--v2-border);background:var(--v2-panel);white-space:nowrap;} table.tv2-table thead th.sortable{padding:0;} table.tv2-table thead th.sortable a{display:block;padding:8px 12px;color:inherit;text-decoration:none;font-size:inherit; font-weight:inherit;text-transform:inherit;letter-spacing:inherit;transition:background .12s ease,color .12s ease;} table.tv2-table thead th.sortable a:hover{background:var(--v2-panel-hover);color:var(--v2-text);} table.tv2-table thead th.sortable.active a{color:var(--v2-accent);} table.tv2-table thead th .sort-arrow{font-size:8px;opacity:.5;margin-inline-start:3px;} table.tv2-table thead th.sortable.active .sort-arrow{opacity:1;} tr.tg-head{background:var(--v2-panel-hover);} tr.tg-head td{padding:0;border-bottom:1px solid var(--v2-border);} .tg-head-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:none; cursor:pointer;box-shadow:none;text-align:start;font-family:inherit;} .tg-chevron{flex-shrink:0;color:var(--v2-text-2);transition:transform .2s var(--v2-ease);} tr.tg-head.collapsed .tg-chevron{transform:rotate(-90deg);} :root[dir="rtl"] tr.tg-head .tg-chevron{transform:rotate(90deg);} :root[dir="rtl"] tr.tg-head.collapsed .tg-chevron{transform:rotate(0deg);} .tg-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;} .tg-dot-new{background:var(--v2-text-2);} .tg-dot-doing{background:var(--v2-blue);} .tg-dot-done{background:var(--v2-green);} .tg-dot-cancelled{background:var(--v2-red);} .tg-name{font-size:12.5px;font-weight:700;color:var(--v2-text);} .tg-count{font-size:11px;font-weight:600;color:var(--v2-text-2);background:var(--v2-bg);border-radius:999px; padding:1px 8px;} tr.tv2-row{transition:background .12s ease;} tr.tv2-row td{padding:0 12px;height:var(--v2-row-h);border-bottom:1px solid var(--v2-border);vertical-align:middle;text-align:start;} tr.tv2-row:last-child td{border-bottom:none;} tr.tv2-row:hover{background:var(--v2-panel-hover);} tr.tv2-row:hover .tv2-row-accent{opacity:1;} tr.tv2-row.hidden-by-group{display:none;} .tv2-row-accent{position:absolute;inset-inline-start:0;top:0;bottom:0;width:2px;background:var(--v2-accent);opacity:0;transition:opacity .12s ease;} td.tv2-title-cell{position:relative;} .tv2-task-link{color:var(--v2-text);text-decoration:none;font-size:13px;font-weight:500; display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px;} .tv2-task-link:hover{color:var(--v2-accent);} .tv2-creator-cell{overflow:hidden;} .tv2-creator{display:flex;align-items:center;justify-content:center;gap:7px;min-width:0;} .tv2-creator .avatar,.tv2-creator .avatar-fallback{width:22px;height:22px;border-radius:50%;flex-shrink:0;object-fit:cover;} .tv2-creator .avatar-fallback{display:flex;align-items:center;justify-content:center;background:var(--v2-accent-hover); color:var(--v2-on-accent);font-size:10px;font-weight:700;} .tv2-creator-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--v2-text-2);font-size:12px;max-width:85px;} .tv2-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--v2-text-2);font-size:11.5px;} .tv2-due{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11.5px;color:var(--v2-text-2);white-space:nowrap;} .tv2-due.tv2-overdue{color:var(--v2-red);font-weight:700;} .tv2-due.tv2-soon{color:var(--v2-amber);font-weight:700;} .tv2-col-actions{width:1%;white-space:nowrap;} .tv2-row-actions{display:flex;align-items:center;gap:3px;opacity:0;transition:opacity .12s ease;} tr.tv2-row:hover .tv2-row-actions,tr.tv2-row:focus-within .tv2-row-actions{opacity:1;} .tv2-icon-btn{width:26px;height:26px;border-radius:6px;border:1px solid transparent;background:none;color:var(--v2-text-2); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;text-decoration:none;} .tv2-icon-btn:hover{background:var(--v2-panel);border-color:var(--v2-border);color:var(--v2-accent);} @media (max-width:1150px){ .tv2-hide-lg{display:none;} } @media (max-width:820px){ .tv2-hide-md{display:none;} } /* ---------- سايدبار الموبايل: دِرج منزلق بدل الشريط الثابت ---------- */ .mobile-sidebar-toggle{display:none;width:34px;height:34px;border:1px solid var(--v2-border);background:var(--v2-panel); border-radius:8px;color:var(--v2-text);align-items:center;justify-content:center;cursor:pointer;box-shadow:none;flex-shrink:0;} .mobile-sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(10,14,20,.5);z-index:290;opacity:0;transition:opacity .22s var(--v2-ease);} .mobile-sidebar-backdrop.show{display:block;opacity:1;} @media (max-width:760px){ .app-sidebar{transform:translateX(100%);transition:transform .26s var(--v2-ease);width:264px!important;z-index:300;box-shadow:var(--v2-shadow-md);} :root[dir="ltr"] .app-sidebar{transform:translateX(-100%);} .app-sidebar.mobile-open{transform:translateX(0);} :root[dir="ltr"] .app-sidebar.mobile-open{transform:translateX(0);} /* الدرج على الموبايل دايمًا بيبيّن الأيقونة + الاسم الكامل، بغض النظر عن تفضيل الطي بتاع الديسكتوب */ .app-sidebar .sidebar-brand-word, .app-sidebar .sidebar-link span:not(.nav-count):not(.alarm-bell), .app-sidebar .sidebar-link .nav-caret, .app-sidebar .sidebar-section-label{display:revert!important;} .app-sidebar .sidebar-link{justify-content:flex-start!important;padding:8px 10px!important;} .app-sidebar .sidebar-brand{justify-content:flex-start!important;padding:18px 18px 14px!important;} .app-sidebar .sidebar-group > .user-menu-panel{position:static!important;transform:none!important; box-shadow:none!important;border:none!important;border-inline-start:2px solid var(--v2-border)!important; border-radius:0!important;margin-block:2px 4px!important;padding-block:4px!important;padding-inline-start:10px!important;background:transparent!important;} body,body.sidebar-collapsed{margin-inline-start:0!important;} .content-topbar,body.sidebar-collapsed .content-topbar{inset-inline-start:0!important;inset-inline-end:0!important;} .content-topbar-inner{padding-inline:10px;gap:6px;border-radius:0;} .sidebar-collapse-btn{display:none;} .mobile-sidebar-toggle{display:flex;} .topbar-user-info{display:none;} .v2-search{max-width:none;} .content-topbar .rwt-clocks{display:none;} .content-topbar .me-box{gap:4px;} } .tv2-status-pill{border:none;border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;cursor:pointer; display:inline-flex;align-items:center;gap:5px;box-shadow:none;font-family:inherit;transition:filter .12s ease;} .tv2-status-pill:hover{filter:brightness(1.06);} .tv2-status-pill:disabled{cursor:default;opacity:.9;} .tv2-status-pill.status-new{background:color-mix(in srgb, var(--v2-text-2) 18%, transparent);color:var(--v2-text);} .tv2-status-pill.status-doing{background:color-mix(in srgb, var(--v2-blue) 20%, transparent);color:var(--v2-blue);} .tv2-status-pill.status-done{background:color-mix(in srgb, var(--v2-green) 20%, transparent);color:var(--v2-green);} .tv2-status-pill.status-cancelled{background:color-mix(in srgb, var(--v2-red) 18%, transparent);color:var(--v2-red);} .tv2-status-pill.is-saving{opacity:.6;pointer-events:none;} .tv2-prio.prio-flag::before{content:none;} .tv2-prio{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;} .tv2-prio-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;} .tv2-prio.prio-high .tv2-prio-dot{background:var(--v2-red);} .tv2-prio.prio-high{color:var(--v2-red);} .tv2-prio.prio-med .tv2-prio-dot{background:var(--v2-amber);} .tv2-prio.prio-med{color:var(--v2-amber);} .tv2-prio.prio-low .tv2-prio-dot{background:var(--v2-blue);} .tv2-prio.prio-low{color:var(--v2-blue);} .tv2-avatars{display:flex;align-items:center;} .tv2-avatars .avatar,.tv2-avatars .avatar-fallback{width:24px;height:24px;border-radius:50%;font-size:10.5px; display:flex;align-items:center;justify-content:center;border:2px solid var(--v2-panel);margin-inline-start:-7px; background:var(--v2-panel-hover);color:var(--v2-text-2);font-weight:700;flex-shrink:0;object-fit:cover;} .tv2-avatars .avatar:first-child,.tv2-avatars .avatar-fallback:first-child{margin-inline-start:0;} .tv2-add-assignee{width:24px;height:24px;border-radius:50%;border:1px dashed var(--v2-border);background:none; color:var(--v2-text-2);font-size:13px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;flex-shrink:0;} .tv2-add-assignee:hover{border-color:var(--v2-accent);color:var(--v2-accent);} .tv2-empty{padding:34px 12px;text-align:center;color:var(--v2-text-2);font-size:13px;} /* إعادة تلبيس ويدجت الحالة المشترك (status_widget.php، مستخدم برضه في ticket_view.php) — من غير ما نلمس ملفه أو كلاسه الأصلي، بس هنا جوه جدول التاسكات الجديد بالشكل المضغوط */ .tv2-status-cell .status-widget{display:inline-block;} .tv2-status-cell .status-btn{border-radius:999px;padding:4px 11px;font-size:11px;font-weight:700;box-shadow:none;} .tv2-status-cell .status-btn.status-new{background:color-mix(in srgb, var(--v2-text-2) 18%, transparent);color:var(--v2-text);} .tv2-status-cell .status-btn.status-doing{background:color-mix(in srgb, var(--v2-blue) 20%, transparent);color:var(--v2-blue);} .tv2-status-cell .status-btn.status-done{background:color-mix(in srgb, var(--v2-green) 20%, transparent);color:var(--v2-green);} .tv2-status-cell .status-btn.status-cancelled{background:color-mix(in srgb, var(--v2-red) 18%, transparent);color:var(--v2-red);} .tv2-status-cell .status-panel{background:var(--v2-panel);border-color:var(--v2-border);box-shadow:var(--v2-shadow-md);} .tv2-status-cell .status-option:hover{background:color-mix(in srgb, var(--v2-accent) 14%, transparent);} /* Package 01 — environment model: staging banner (dormant unless APP_ENV=staging) */ .app-env-banner{position:fixed;top:0;inset-inline-start:0;inset-inline-end:0;z-index:500; background:#b8860b;color:#fff;text-align:center;font-size:12px;font-weight:700; letter-spacing:.04em;padding:4px 10px;} /* ===================================================================== Enterprise Reference UI ("ent-*") — GitHub Issue #3, polished per Issue #5 (density, hierarchy, integration — no structural rework). Reusable design-system layer for Finance/ERP document screens, built ON TOP of the existing --v2-* tokens (same shell already used by the sidebar/topbar/tasks-v2) rather than inventing a third token system. First consumer: journal_voucher_view.php / journal_voucher_form.php. Every rule here is additive — nothing in this block redefines an existing class, so it cannot regress any other page. ===================================================================== */ /* ---- Finance context bar (optional 2nd topbar row) ---- Opt-in only: includes/header.php renders this ONLY when a page sets $showFinanceContext = true before requiring it, so every other page's topbar/body offset is completely unaffected (see body.has-context-bar below, which only applies when that extra row actually exists). Issue #5: the row is now a deliberate strip of chip-style controls (icon + label: value, each its own bordered pill) instead of plain text separated by hairline dividers, and its content shares the same max-width/centering as .content-topbar-inner directly above it so the two topbar rows — and the page content below — line up on one edge. */ body.has-context-bar{padding-top:calc(var(--v2-header-h) + 24px + 40px);} .content-topbar.has-context-row{height:calc(58px + 40px);} .ent-context-bar{height:40px;display:flex;align-items:center;padding:0 18px; background:var(--v2-panel-hover);border-bottom:1px solid var(--v2-border);overflow-x:auto;} .ent-context-bar-inner{display:flex;align-items:center;gap:8px;width:100%;max-width:1680px;margin-inline:auto;} .ent-context-item{display:flex;align-items:center;gap:6px;flex-shrink:0;font-size:11.5px;color:var(--v2-text-2); white-space:nowrap;padding:4px 10px;border-radius:999px;background:var(--v2-panel);border:1px solid var(--v2-border);} .ent-context-item strong{color:var(--v2-text);font-weight:600;} .ent-context-icon{display:flex;flex-shrink:0;color:var(--v2-text-2);} .ent-context-chip{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;margin-inline-start:2px;border-radius:999px; background:color-mix(in srgb, var(--v2-accent) 10%, transparent);color:var(--v2-accent);font-size:10.5px;font-weight:600;} /* ---- Breadcrumb ---- */ .ent-breadcrumb{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;color:var(--v2-text-2);margin-bottom:10px;} .ent-breadcrumb a{color:var(--v2-text-2);text-decoration:none;} .ent-breadcrumb a:hover{color:var(--v2-accent);} .ent-breadcrumb .ent-crumb-current{color:var(--v2-text);font-weight:600;} .ent-breadcrumb .ent-crumb-sep{color:var(--v2-border);} /* ---- Page header: title + status badge + action buttons ---- Issue #5: stronger hierarchy — the voucher number leads at a larger size, the status badge is bolder/higher-contrast, the version drops to a quiet pill of its own (not bare text next to a badge), and the description reads as a real subtitle (higher contrast, larger) rather than sharing the breadcrumb's muted caption size. */ .ent-page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px;} .ent-page-title-block{display:flex;flex-direction:column;gap:5px;min-width:0;} .ent-page-title-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .ent-page-title-row h1{margin:0;font-size:23px;line-height:1.2;font-weight:800;font-family:'Cairo',sans-serif;color:var(--v2-text);} .ent-page-sub{font-size:13px;color:var(--v2-text);opacity:.75;} .ent-version-tag{font-size:11px;color:var(--v2-text-2);font-weight:600;background:var(--v2-panel-hover); border:1px solid var(--v2-border);border-radius:999px;padding:2px 9px;} .ent-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;flex-shrink:0;} /* Secondary (ghost) actions read as quiet/outlined; the primary action keeps the full accent treatment so it stays the obvious next step. */ .ent-actions .btn{padding:7px 15px;font-size:12.5px;font-weight:600;border-radius:var(--v2-radius-sm);} .ent-actions .btn.primary{box-shadow:var(--v2-shadow-sm);} .ent-actions .btn.ghost{border-color:var(--v2-border);background:var(--v2-panel);color:var(--v2-text-2);} .ent-actions .btn.ghost:hover{background:var(--v2-panel-hover);color:var(--v2-text);border-color:var(--v2-border);transform:none;} /* ---- Status badges (richer than the plain .tag, includes a dot) ---- */ .ent-status{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px; font-size:12px;font-weight:700;white-space:nowrap;} .ent-status::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex-shrink:0;} .ent-status.st-neutral{background:color-mix(in srgb, var(--v2-text-2) 16%, transparent);color:var(--v2-text-2);} .ent-status.st-info{background:color-mix(in srgb, var(--v2-blue) 18%, transparent);color:var(--v2-blue);} .ent-status.st-warn{background:color-mix(in srgb, var(--v2-amber) 20%, transparent);color:var(--v2-amber);} .ent-status.st-bad{background:color-mix(in srgb, var(--v2-red) 18%, transparent);color:var(--v2-red);} .ent-status.st-good{background:color-mix(in srgb, var(--v2-green) 18%, transparent);color:var(--v2-green);} /* ---- Two-column document layout: main content + right-hand rail ---- Issue #5: the rail gives back some width to the accounting content (300px -> 264px) and every gap in the layout tightens a notch. */ .ent-layout{display:grid;grid-template-columns:minmax(0,1fr) 264px;gap:14px;align-items:start;} @media (max-width:1080px){.ent-layout{grid-template-columns:1fr;}} .ent-main-col{min-width:0;display:flex;flex-direction:column;gap:14px;} .ent-side-col{min-width:0;display:flex;flex-direction:column;gap:14px;position:sticky;top:calc(var(--v2-header-h) + 24px + 10px);} @media (max-width:1080px){.ent-side-col{position:static;}} /* ---- Card ---- */ .ent-card{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md); box-shadow:var(--v2-shadow-sm);overflow:hidden;} .ent-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px; padding:11px 16px;border-bottom:1px solid var(--v2-border);} .ent-card-title{font-size:13px;font-weight:700;color:var(--v2-text);display:flex;align-items:center;gap:8px;} .ent-card-body{padding:14px 16px;} .ent-card-foot{padding:9px 16px;border-top:1px solid var(--v2-border);background:var(--v2-panel-hover);} /* ---- Enterprise field grid (denser than the legacy .field-row's fixed 2-col) ---- */ .ent-field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;} .ent-field{display:flex;flex-direction:column;gap:4px;min-width:0;} .ent-field label{font-size:11px;color:var(--v2-text-2);font-weight:600;} .ent-field .ent-field-val{font-size:12.5px;color:var(--v2-text);} .ent-field input,.ent-field select,.ent-field textarea{width:100%;background:var(--v2-bg); border:1px solid var(--v2-border);color:var(--v2-text);border-radius:var(--v2-radius-sm); padding:6px 10px;font-size:12.5px;font-family:inherit;height:32px;} .ent-field textarea{height:auto;min-height:64px;resize:vertical;} .ent-field input:focus,.ent-field select:focus,.ent-field textarea:focus{outline:none;border-color:var(--v2-accent);} .ent-field input:disabled,.ent-field select:disabled,.ent-field textarea:disabled{opacity:.6;cursor:not-allowed;} /* ---- Tabs ---- Issue #5: the active tab now carries a soft background tint behind the underline (not just a 2px line) so it reads unmistakably active at a glance, not only on close inspection. */ .ent-tabs{display:flex;align-items:center;gap:2px;border-bottom:1px solid var(--v2-border); padding:0 10px;overflow-x:auto;background:var(--v2-panel);} .ent-tab{display:inline-flex;align-items:center;gap:6px;padding:10px 12px;margin-block:4px; font-size:12.5px;color:var(--v2-text-2);text-decoration:none;border-bottom:2px solid transparent; border-radius:var(--v2-radius-sm) var(--v2-radius-sm) 0 0;white-space:nowrap;cursor:pointer; background:none;border-top:none;border-inline:none;font-family:inherit;box-shadow:none;} .ent-tab:hover{color:var(--v2-text);background:var(--v2-panel-hover);transform:none;} .ent-tab.active{color:var(--v2-accent);border-bottom-color:var(--v2-accent);font-weight:700; background:color-mix(in srgb, var(--v2-accent) 9%, transparent);} .ent-tab.active:hover{background:color-mix(in srgb, var(--v2-accent) 9%, transparent);} .ent-tab.disabled{color:var(--v2-text-2);opacity:.5;cursor:not-allowed;pointer-events:none;} .ent-tab .ent-tab-note{font-size:9.5px;background:var(--v2-panel-hover);border:1px solid var(--v2-border); border-radius:999px;padding:1px 6px;color:var(--v2-text-2);font-weight:600;} .ent-tab-panel[hidden]{display:none;} /* ---- Dense enterprise line table (Journal Lines, editable in the form) ---- */ .ent-line-table-wrap{overflow-x:auto;} table.ent-line-table{width:100%;border-collapse:collapse;font-size:12px;min-width:920px;} table.ent-line-table thead th{text-align:start;padding:6px 8px;font-size:10px;text-transform:uppercase; letter-spacing:.03em;color:var(--v2-text-2);border-bottom:1px solid var(--v2-border);white-space:nowrap;} table.ent-line-table thead th.ent-num-col{text-align:end;} table.ent-line-table tbody td{padding:3px 8px;border-bottom:1px solid var(--v2-border);vertical-align:middle;} table.ent-line-table tbody tr:last-child td{border-bottom:none;} table.ent-line-table tbody tr:hover{background:var(--v2-panel-hover);} table.ent-line-table input,table.ent-line-table select{width:100%;background:var(--v2-bg); border:1px solid transparent;color:var(--v2-text);border-radius:6px;padding:5px 7px;font-size:12px; font-family:inherit;height:29px;min-width:90px;} table.ent-line-table input:focus,table.ent-line-table select:focus{outline:none;border-color:var(--v2-accent);background:var(--v2-panel);} table.ent-line-table input.ent-num{text-align:end;font-family:'JetBrains Mono',monospace;min-width:100px;} table.ent-line-table .ent-line-account-col{min-width:210px;} table.ent-line-table .ent-line-del{width:27px;height:27px;border-radius:7px;border:1px solid var(--v2-border); background:none;color:var(--v2-text-2);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:none;} table.ent-line-table .ent-line-del:hover{border-color:var(--v2-red);color:var(--v2-red);transform:none;} /* Read-only variant, for the view/preview pages (no inputs, plain text cells) */ table.ent-line-table.ent-readonly tbody td{padding:7px 8px;} table.ent-line-table.ent-readonly td.ent-num{text-align:end;font-family:'JetBrains Mono',monospace;} /* ---- Line-table footer: balance badge + line count + totals, all in one compact strip — Issue #5 folds the debit/credit/difference summary directly into this footer instead of a separate card below, so the numbers read as part of the same table, not a detached block. */ .ent-line-table-foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap; padding:9px 16px;border-top:1px solid var(--v2-border);background:var(--v2-panel-hover);} .ent-line-table-foot .ent-line-table-foot-start{display:flex;align-items:center;gap:10px;flex-wrap:wrap;} .ent-line-totals{display:flex;align-items:center;gap:16px;flex-wrap:wrap;} .ent-line-totals .ent-total-item{display:flex;align-items:baseline;gap:6px;font-size:10.5px; text-transform:uppercase;letter-spacing:.03em;color:var(--v2-text-2);} .ent-line-totals .ent-total-item strong{font-size:13.5px;text-transform:none;letter-spacing:0; font-family:'JetBrains Mono',monospace;color:var(--v2-text);} /* ---- Balance summary strip (kept for any page that still wants a standalone totals block outside a table footer) ---- */ .ent-summary-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px; background:var(--v2-border);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);overflow:hidden;} .ent-summary-cell{background:var(--v2-panel);padding:10px 14px;display:flex;flex-direction:column;gap:3px;} .ent-summary-cell .ent-summary-label{font-size:10px;text-transform:uppercase;letter-spacing:.03em;color:var(--v2-text-2);} .ent-summary-cell .ent-summary-val{font-size:15px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--v2-text);} .ent-balance-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:11.5px;font-weight:700;} .ent-balance-badge.balanced{background:color-mix(in srgb, var(--v2-green) 16%, transparent);color:var(--v2-green);} .ent-balance-badge.unbalanced{background:color-mix(in srgb, var(--v2-red) 16%, transparent);color:var(--v2-red);} .ent-balance-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;} /* ---- Workflow & Status timeline (right rail) ---- Issue #5 explicitly asks to keep this visually strong — only the card padding around it tightens, the timeline's own rhythm doesn't. */ .ent-timeline{display:flex;flex-direction:column;} .ent-timeline-step{position:relative;padding:0 0 20px 26px;} html[dir="rtl"] .ent-timeline-step{padding:0 26px 20px 0;} .ent-timeline-step:last-child{padding-bottom:0;} .ent-timeline-step::before{content:"";position:absolute;inset-inline-start:0;top:2px;width:12px;height:12px; border-radius:50%;background:var(--v2-panel);border:2px solid var(--v2-border);} .ent-timeline-step::after{content:"";position:absolute;inset-inline-start:5px;top:14px;bottom:0;width:2px;background:var(--v2-border);} .ent-timeline-step:last-child::after{display:none;} .ent-timeline-step.done::before{background:var(--v2-green);border-color:var(--v2-green);} .ent-timeline-step.done::after{background:var(--v2-green);} .ent-timeline-step.current::before{background:var(--v2-panel);border-color:var(--v2-accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--v2-accent) 22%, transparent);} .ent-timeline-step.rejected::before{background:var(--v2-red);border-color:var(--v2-red);} .ent-timeline-title{font-size:12.5px;font-weight:700;color:var(--v2-text);} .ent-timeline-meta{font-size:11px;color:var(--v2-text-2);margin-top:2px;} .ent-timeline-step.current .ent-timeline-title{color:var(--v2-accent);} /* ---- Empty/placeholder state for a not-yet-available tab (Attachments/Notes) ---- */ .ent-placeholder{padding:32px 20px;text-align:center;color:var(--v2-text-2);} .ent-placeholder svg{margin-bottom:10px;opacity:.5;} .ent-placeholder p{font-size:13px;margin:0;} .ent-placeholder .ent-placeholder-sub{font-size:11.5px;margin-top:4px;opacity:.8;} /* ---- Responsive: tighten the layout on tablet/small screens ---- */ @media (max-width:760px){ .ent-page-head{flex-direction:column;align-items:stretch;} .ent-actions{width:100%;} .ent-actions .btn{flex:1;} .ent-context-bar{padding:0 12px;} .ent-context-bar-inner{gap:6px;} .ent-card-body{padding:12px;} .ent-field-grid{grid-template-columns:1fr 1fr;} .ent-line-table-foot{flex-direction:column;align-items:stretch;} } @media (max-width:480px){ .ent-field-grid{grid-template-columns:1fr;} } :root[data-theme="dark"] .ent-status.st-neutral,:root[data-theme="dark"] .ent-status.st-info, :root[data-theme="dark"] .ent-status.st-warn,:root[data-theme="dark"] .ent-status.st-bad, :root[data-theme="dark"] .ent-status.st-good{filter:none;} /* ===== Package 03 — AP screens (pagination, allocation rows). Uses the same v2 tokens as the .ent-* system. ===== */ .ap-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 4px;} .ap-pager-nav{display:inline-flex;align-items:center;gap:8px;} .ap-pager-size{display:inline-flex;align-items:center;gap:4px;} .ap-pp{padding:3px 9px;border:1px solid var(--v2-border);border-radius:6px;font-size:12px;color:var(--v2-text-2);text-decoration:none;font-family:'JetBrains Mono',monospace;} .ap-pp.on{background:var(--v2-accent);border-color:var(--v2-accent);color:#fff;} .ap-pp:hover:not(.on){border-color:var(--v2-accent);color:var(--v2-text);} .ap-alloc-row td{padding-top:0;padding-bottom:6px;border-top:0;font-size:12px;} .ent-summary-strip{overflow-x:auto;} /* ========================================================================== Issue #14 — Enterprise Overview master layout (client demo) Dark forest-green sidebar on a light enterprise workspace, in BOTH themes. Additive: only re-tints the sidebar and adds the Overview / Preview screens. ========================================================================== */ :root{ --ent-forest:#0c3a2d; --ent-forest-2:#11493a; --ent-forest-line:rgba(255,255,255,.09); --ent-side-text:#d6e9df; --ent-side-muted:#8db8a7; --ent-side-active:#4fe0b0; --ov-up:#0f9c82; --ov-down:#d3363f; --ov-warn:#b06e12; --ov-blue:#2f7fd0; } :root[data-theme="dark"]{ --ent-forest:#082a21; --ent-forest-2:#0d3a2e; } .app-sidebar{background:var(--ent-forest)!important;border-color:var(--ent-forest-line)!important;color:var(--ent-side-text);} .app-sidebar .sidebar-brand{border-bottom-color:var(--ent-forest-line)!important;} .app-sidebar .sidebar-brand-word{color:#fff!important;} .app-sidebar .sidebar-brand-word em{color:var(--ent-side-muted)!important;} .app-sidebar .sidebar-brand-mark{background:var(--ent-side-active)!important;color:#06261d!important;} .app-sidebar .sidebar-section-label{color:var(--ent-side-muted)!important;letter-spacing:.09em;} .app-sidebar .sidebar-link{color:var(--ent-side-text)!important;} .app-sidebar .sidebar-link .nav-ic{opacity:.85;} .app-sidebar .sidebar-link:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;} .app-sidebar .sidebar-link.active{background:rgba(79,224,176,.16)!important;color:var(--ent-side-active)!important;font-weight:600; box-shadow:inset 3px 0 0 var(--ent-side-active);} :root[dir="rtl"] .app-sidebar .sidebar-link.active{box-shadow:inset -3px 0 0 var(--ent-side-active);} .app-sidebar .sidebar-group > .user-menu-panel{background:rgba(0,0,0,.16)!important;border-inline-start-color:var(--ent-forest-line)!important;} .app-sidebar .user-menu-panel a,.app-sidebar .submenu-head{color:var(--ent-side-text)!important;} .app-sidebar .user-menu-panel a:hover,.app-sidebar .submenu-head:hover,.app-sidebar .submenu.open > .submenu-head{background:rgba(79,224,176,.12)!important;color:var(--ent-side-active)!important;} .app-sidebar .menu-note{color:var(--ent-side-muted)!important;} .app-sidebar .sidebar-collapse-btn{background:var(--ent-forest-2);border-color:var(--ent-forest-line);color:var(--ent-side-text);} .app-sidebar .nav-count{background:var(--ent-side-active);color:#06261d;} .app-sidebar.collapsed .sidebar-group > .user-menu-panel{background:var(--ent-forest-2)!important;border-color:var(--ent-forest-line)!important;} :root:not([data-theme="dark"]){ --v2-bg:#f1f5f3; } .demo-ribbon{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--ov-warn);background:color-mix(in srgb, var(--v2-amber) 16%, transparent);border:1px solid color-mix(in srgb, var(--v2-amber) 40%, transparent); padding:3px 10px;border-radius:999px;} /* ---- Enterprise Overview ---- */ .ov-head{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:14px;} .ov-head h1{font-size:22px;margin:0 0 2px;letter-spacing:-.01em;} .ov-sub{font-size:12.5px;color:var(--v2-text-2);} .ov-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;} .ov-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px;} .ov-kpi{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);padding:14px 16px;min-width:0; display:flex;flex-direction:column;gap:6px;text-decoration:none;color:inherit;box-shadow:var(--v2-shadow-sm);transition:border-color .15s,transform .15s;} a.ov-kpi:hover{border-color:var(--v2-accent);transform:translateY(-1px);} .ov-kpi-top{display:flex;align-items:center;justify-content:space-between;gap:8px;} .ov-kpi-label{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-text-2);} .ov-kpi-ic{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb, var(--v2-accent) 14%, transparent);color:var(--v2-accent);} .ov-kpi-ic svg{width:15px;height:15px;} .ov-kpi-val{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.1;} .ov-kpi-val small{font-size:12px;font-weight:500;color:var(--v2-text-2);margin-inline-start:4px;} .ov-kpi-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11.5px;color:var(--v2-text-2);} .ov-trend{font-weight:700;font-family:'JetBrains Mono',monospace;} .ov-trend.up{color:var(--ov-up);} .ov-trend.down{color:var(--ov-down);} .ov-trend.flat{color:var(--v2-text-2);} .ov-spark{height:26px;width:88px;flex-shrink:0;} .ov-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-bottom:12px;} .ov-card{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);box-shadow:var(--v2-shadow-sm);min-width:0;display:flex;flex-direction:column;} .ov-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 16px;border-bottom:1px solid var(--v2-border);} .ov-card-title{font-size:13.5px;font-weight:700;margin:0;} .ov-card-link{font-size:12px;color:var(--v2-accent);text-decoration:none;font-weight:600;white-space:nowrap;} .ov-card-link:hover{text-decoration:underline;} .ov-card-body{padding:14px 16px;min-width:0;flex:1;} .ov-span-4{grid-column:span 4;} .ov-span-5{grid-column:span 5;} .ov-span-6{grid-column:span 6;} .ov-span-7{grid-column:span 7;} .ov-span-8{grid-column:span 8;} .ov-span-12{grid-column:span 12;} .ov-chart{width:100%;height:190px;display:block;} .ov-legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11.5px;color:var(--v2-text-2);margin-top:8px;} .ov-legend i{display:inline-block;width:9px;height:9px;border-radius:3px;margin-inline-end:6px;vertical-align:-1px;} .ov-table-wrap{overflow-x:auto;} table.ov-table{width:100%;border-collapse:collapse;font-size:12.5px;} table.ov-table th{text-align:start;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--v2-text-2);padding:8px 12px;border-bottom:1px solid var(--v2-border);white-space:nowrap;} table.ov-table td{padding:9px 12px;border-bottom:1px solid color-mix(in srgb, var(--v2-border) 60%, transparent);vertical-align:middle;} table.ov-table tr:last-child td{border-bottom:0;} table.ov-table td.num,table.ov-table th.num{text-align:end;font-family:'JetBrains Mono',monospace;font-variant-numeric:tabular-nums;} table.ov-table a{color:var(--v2-text);text-decoration:none;font-weight:600;} table.ov-table a:hover{color:var(--v2-accent);} .ov-bar{height:7px;border-radius:99px;background:color-mix(in srgb, var(--v2-text-2) 18%, transparent);overflow:hidden;min-width:70px;} .ov-bar > span{display:block;height:100%;border-radius:99px;background:var(--v2-accent);} .ov-bar.warn > span{background:var(--v2-amber);} .ov-bar.bad > span{background:var(--v2-red);} .ov-quick{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;} .ov-quick a{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--v2-border);border-radius:10px;text-decoration:none;color:var(--v2-text);font-size:12.5px;font-weight:600;background:var(--v2-panel-hover);transition:border-color .15s,background .15s;} .ov-quick a:hover{border-color:var(--v2-accent);background:color-mix(in srgb, var(--v2-accent) 8%, var(--v2-panel));} .ov-quick a svg{width:16px;height:16px;color:var(--v2-accent);flex-shrink:0;} .ov-alerts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;} .ov-alerts li{display:flex;gap:10px;align-items:flex-start;padding:9px 11px;border-radius:10px;background:var(--v2-panel-hover);border:1px solid var(--v2-border);font-size:12.5px;line-height:1.45;} .ov-alerts li b{display:block;font-weight:700;} .ov-alerts a{color:inherit;text-decoration:none;display:flex;gap:10px;align-items:flex-start;width:100%;} .ov-alerts a:hover b{color:var(--v2-accent);} .ov-dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0;background:var(--v2-blue);} .ov-dot.warn{background:var(--v2-amber);} .ov-dot.bad{background:var(--v2-red);} .ov-dot.good{background:var(--v2-green);} .ov-muted{color:var(--v2-text-2);font-size:11.5px;} .ov-two{display:grid;grid-template-columns:1fr 1fr;gap:16px;} .ov-mini-stat{display:flex;flex-direction:column;gap:2px;} .ov-mini-stat b{font-family:'JetBrains Mono',monospace;font-size:17px;} @media (max-width:1180px){.ov-kpis{grid-template-columns:repeat(2,minmax(0,1fr));}.ov-span-4,.ov-span-5,.ov-span-6,.ov-span-7,.ov-span-8{grid-column:span 12;}} @media (max-width:560px){.ov-kpis{grid-template-columns:1fr;}.ov-two{grid-template-columns:1fr;}.ov-kpi-val{font-size:22px;}.ov-quick{grid-template-columns:1fr;}} /* ---- Preview / Demo screens ---- */ .pv-banner{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--v2-radius-md);margin-bottom:14px; background:color-mix(in srgb, var(--v2-amber) 12%, var(--v2-panel));border:1px solid color-mix(in srgb, var(--v2-amber) 38%, var(--v2-border));} .pv-banner svg{width:18px;height:18px;color:var(--ov-warn);flex-shrink:0;margin-top:1px;} .pv-banner b{display:block;font-size:13px;} .pv-banner span{font-size:12.5px;color:var(--v2-text-2);line-height:1.5;} .pv-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;} .pv-tab{padding:6px 12px;border:1px solid var(--v2-border);border-radius:999px;font-size:12.5px;font-weight:600;text-decoration:none;color:var(--v2-text-2);background:var(--v2-panel);} .pv-tab.on,.pv-tab:hover{color:var(--v2-accent);border-color:var(--v2-accent);} .pv-status{display:inline-flex;align-items:center;padding:2px 9px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb, var(--v2-text-2) 15%, transparent);color:var(--v2-text-2);} .pv-status.good{background:color-mix(in srgb, var(--v2-green) 17%, transparent);color:var(--v2-green);} .pv-status.warn{background:color-mix(in srgb, var(--v2-amber) 19%, transparent);color:var(--ov-warn);} .pv-status.bad{background:color-mix(in srgb, var(--v2-red) 16%, transparent);color:var(--v2-red);} .pv-status.info{background:color-mix(in srgb, var(--v2-blue) 16%, transparent);color:var(--v2-blue);} .pv-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-bottom:14px;} .pv-card{background:var(--v2-panel);border:1px solid var(--v2-border);border-radius:var(--v2-radius-md);padding:14px 16px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:6px;box-shadow:var(--v2-shadow-sm);} a.pv-card:hover{border-color:var(--v2-accent);} .pv-card h3{margin:0;font-size:14px;} .pv-card p{margin:0;font-size:12.5px;color:var(--v2-text-2);line-height:1.5;} .pv-foot{margin-top:14px;font-size:12px;color:var(--v2-text-2);} .nav-preview{display:inline-block;margin-inline-start:6px;padding:1px 7px;border-radius:999px;font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;background:rgba(245,173,66,.2);color:#f5c265;vertical-align:1px;} .app-env-demo{background:#0f6b53!important;color:#eafff6!important;} /* governance pages use st-ok for "good"; alias it so the status pills are coloured */ .ent-status.st-ok{background:color-mix(in srgb, var(--v2-green) 18%, transparent);color:var(--v2-green);} /* ========================================================================== APPROVED MASTER LAYOUT — Albero ERP Enterprise Overview (Issue #14 rebuild) Implements the approved reference: 238px forest sidebar with brand, large icons, flat menu and mountain scene; ONE-row topbar (Company / Branch / Fiscal Period pills · search · notifications · help · profile); light workspace. This block intentionally comes last so it wins over the earlier shell rules; every other page inherits the same shell. ========================================================================== */ :root{ --v2-sidebar-w:238px; --v2-sidebar-w-collapsed:76px; --v2-header-h:62px; --envbar:0px; --m-side-a:#0c2a22; --m-side-b:#0e2f26; --m-side-c:#123a2d; --m-side-text:#d6e5de; --m-side-muted:#8fb3a3; --m-active:#2b5c45; --m-line:#e5ebe9; --m-green:#1f6b47; --m-blue:#1e4fa0; } :root:not([data-theme="dark"]){ --v2-bg:#f5f8f7; } :root[data-theme="dark"]{ --m-side-a:#08201a; --m-side-b:#0a251e; --m-side-c:#0d2e24; --m-line:#26343e; --m-active:#23503c; } body,body.has-context-bar{padding-top:calc(var(--v2-header-h) + var(--envbar));} .app{padding:22px 24px 48px;} .app-wide{max-width:none;} /* ---------- Sidebar ---------- */ .app-sidebar{top:var(--envbar)!important;width:var(--v2-sidebar-w);background:linear-gradient(180deg,var(--m-side-a) 0%,var(--m-side-b) 55%,var(--m-side-c) 100%)!important;border:0!important;} .app-sidebar .sidebar-brand{justify-content:flex-start;gap:11px;padding:15px 44px 14px 18px;height:72px;border-bottom:0!important;position:relative;} .app-sidebar .sb-mark{flex:0 0 auto;width:40px;height:40px;display:block;} .app-sidebar .sb-brandtext{display:flex;flex-direction:column;gap:3px;min-width:0;} .app-sidebar .sidebar-brand-word{font-size:22px;font-weight:700;letter-spacing:-.01em;color:#fff!important;line-height:1;} .app-sidebar .sb-tag{font-size:7.4px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--m-side-muted);white-space:nowrap;line-height:1.25;} .app-sidebar .sidebar-brand .client-brand-logo{height:40px;max-width:150px;} .app-sidebar .sidebar-collapse-btn{top:24px;inset-inline-end:14px;inset-inline-start:auto;width:26px;height:26px;background:transparent!important;border:0!important;box-shadow:none!important;color:#b9cfc5!important;border-radius:6px;} .app-sidebar .sidebar-collapse-btn:hover{background:rgba(255,255,255,.08)!important;transform:none;color:#fff!important;} .app-sidebar .sidebar-collapse-btn svg{width:17px;height:17px;} :root[dir="rtl"] .app-sidebar .sidebar-collapse-btn svg{transform:scaleX(-1);} :root[dir="rtl"] .app-sidebar.collapsed .sidebar-collapse-btn svg{transform:none;} .app-sidebar .sidebar-brand{padding-inline-end:48px;} .app-sidebar .sidebar-nav{display:flex;flex-direction:column;gap:5px;padding:6px 12px 10px;flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:none;} .app-sidebar .sidebar-nav::-webkit-scrollbar{display:none;} .app-sidebar .sidebar-section-label{display:none!important;} .app-sidebar .sidebar-link{height:44px;padding:0 14px!important;gap:14px;font-size:15px;font-weight:500;border-radius:9px;color:var(--m-side-text)!important;background:transparent;} .app-sidebar .sidebar-link:hover{background:rgba(255,255,255,.07)!important;color:#fff!important;} .app-sidebar .sidebar-link.active{background:var(--m-active)!important;color:#fff!important;font-weight:600;box-shadow:none;} :root[dir="rtl"] .app-sidebar .sidebar-link.active{box-shadow:none;} .app-sidebar .sidebar-link .nav-ic{display:none;} .app-sidebar .sidebar-link::before{content:"";flex:0 0 24px;width:24px;height:24px;background:currentColor;-webkit-mask:var(--ic) center/contain no-repeat;mask:var(--ic) center/contain no-repeat;opacity:.92;} .app-sidebar .sidebar-link .nav-caret{width:14px;height:14px;opacity:.75;transform:rotate(-90deg);margin-inline-start:auto;flex:0 0 14px;} :root[dir="rtl"] .app-sidebar .sidebar-link .nav-caret{transform:rotate(90deg);} .app-sidebar .sidebar-link:has(+ .user-menu-panel.open) .nav-caret{transform:rotate(0deg);} .app-sidebar .sidebar-group{position:relative;display:block;} .app-sidebar .sidebar-group > .user-menu-panel{margin:3px 0 4px 20px!important;padding:2px 0 2px 10px!important;border-inline-start:1px solid rgba(255,255,255,.14)!important;background:transparent!important;} :root[dir="rtl"] .app-sidebar .sidebar-group > .user-menu-panel{margin:3px 20px 4px 0!important;padding:2px 10px 2px 0!important;} .app-sidebar .user-menu-panel a,.app-sidebar .submenu-head{font-size:13.5px;padding:8px 10px;border-radius:7px;} /* menu order of the approved design; Tasks / Requests / My Team stay reachable in a quiet secondary cluster */ .app-sidebar .sidebar-nav > a[href="overview.php"]{order:1;} .app-sidebar #accountingMenu{order:2;} .app-sidebar #procurementMenu{order:3;} .app-sidebar #projectsMenu{order:4;} .app-sidebar #commercialMenu{order:5;} .app-sidebar #inventoryMenu{order:6;} .app-sidebar #assetsMenu{order:7;} .app-sidebar #hrMenu,.app-sidebar #attendanceMenu{order:8;} .app-sidebar #reportsMenu{order:9;} .app-sidebar #adminMenu{order:10;} .app-sidebar .sidebar-nav > a[href="dashboard.php"],.app-sidebar .sidebar-nav > a[href="requests.php"],.app-sidebar .sidebar-nav > a[href="team_org.php"]{order:20;height:36px;font-size:13.5px;opacity:.9;} .app-sidebar .sidebar-nav > a[href="dashboard.php"]{margin-top:10px;border-top:1px solid rgba(255,255,255,.1);border-radius:0 0 9px 9px;padding-top:6px!important;height:42px;} .app-sidebar .sidebar-nav > a[href="dashboard.php"]::before,.app-sidebar .sidebar-nav > a[href="requests.php"]::before,.app-sidebar .sidebar-nav > a[href="team_org.php"]::before{width:18px;height:18px;flex-basis:18px;} .app-sidebar .sidebar-nav > .sidebar-link:not(.active) .nav-count{display:none;} /* icons: solid glyphs like the approved design */ .app-sidebar .sidebar-nav > a[href="overview.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.8 2.5 10.6V21h7v-6h5v6h7V10.6z'/%3E%3C/svg%3E");} .app-sidebar #accountingMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V11h4.5v10zm6.75 0V3h4.5v18zM16.5 21v-7H21v7z'/%3E%3C/svg%3E");} .app-sidebar #procurementMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 3h3.2l.7 3H22l-2.2 9.2H8.1L5.2 5H2zM8.5 17.6a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm9 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4z'/%3E%3C/svg%3E");} .app-sidebar #projectsMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3.5h6A1.5 1.5 0 0 1 16.5 5v2H20a1.5 1.5 0 0 1 1.5 1.5V19A1.5 1.5 0 0 1 20 20.5H4A1.5 1.5 0 0 1 2.5 19V8.5A1.5 1.5 0 0 1 4 7h3.5V5A1.5 1.5 0 0 1 9 3.5zM10 5.5V7h4V5.5zM2.5 12.5h19v1.6h-19z'/%3E%3C/svg%3E");} .app-sidebar #commercialMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 21V9.5h4.5V21zm6.75 0V3.5h4.5V21zM16.5 21v-8.5H21V21z'/%3E%3Cpath d='M2 21.2h20v1.3H2z'/%3E%3C/svg%3E");} .app-sidebar #inventoryMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2 3 6.4v11.2L12 22l9-4.4V6.4zm0 2.3 5.9 2.9L12 10 6.1 7.2zM5 8.8l6 3v7.5l-6-3zm14 0v7.5l-6 3v-7.5z'/%3E%3C/svg%3E");} .app-sidebar #assetsMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 3h6v3h5v15H4V6h5zm2 2v1h2V5zM7 9v2h2V9zm4 0v2h2V9zm4 0v2h2V9zm-8 4v2h2v-2zm4 0v2h2v-2zm4 0v2h2v-2zm-8 4v3h2v-3zm8 0v3h2v-3z'/%3E%3C/svg%3E");} .app-sidebar #hrMenu > .sidebar-link,.app-sidebar #attendanceMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8.5 11.2a3.6 3.6 0 1 0 0-7.2 3.6 3.6 0 0 0 0 7.2zm7.3-.7a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM8.5 12.9C5 12.9 2 14.7 2 17.2V20h13v-2.8c0-2.5-3-4.3-6.5-4.3zm7.3.4c-.7 0-1.4.1-2 .3 1.5 1 2.4 2.4 2.4 4V20H22v-2.4c0-2.3-2.7-4.3-6.2-4.3z'/%3E%3C/svg%3E");} .app-sidebar #reportsMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2h8.2L20 7.8V21a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1zm7.2 1.6V8.8h5.2zM8 12.2h8v1.7H8zm0 3.6h8v1.7H8z'/%3E%3C/svg%3E");} .app-sidebar #adminMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M10.4 2h3.2l.5 2.7c.6.2 1.2.5 1.7.9l2.6-.9 1.6 2.8-2.1 1.8c.1.6.1 1.2 0 1.8l2.1 1.8-1.6 2.8-2.6-.9c-.5.4-1.1.7-1.7.9l-.5 2.7h-3.2l-.5-2.7c-.6-.2-1.2-.5-1.7-.9l-2.6.9-1.6-2.8 2.1-1.8a5.6 5.6 0 0 1 0-1.8L4.4 7.5 6 4.7l2.6.9c.5-.4 1.1-.7 1.7-.9zM12 8.6a3.4 3.4 0 1 0 0 6.8 3.4 3.4 0 0 0 0-6.8z'/%3E%3C/svg%3E");} .app-sidebar .sidebar-nav > a[href="dashboard.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h6l1 2h3A1.5 1.5 0 0 1 20.5 6v15a1.5 1.5 0 0 1-1.5 1.5H5A1.5 1.5 0 0 1 3.5 21V6A1.5 1.5 0 0 1 5 4.5h3zM7.5 10v1.6h9V10zm0 3.8v1.6h9v-1.6z'/%3E%3C/svg%3E");} .app-sidebar .sidebar-nav > a[href="requests.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 5.5A1.5 1.5 0 0 1 4.5 4h15A1.5 1.5 0 0 1 21 5.5V13h-5l-1.5 2.5h-5L8 13H3zM3 14.6h4.1l1.5 2.5h6.8l1.5-2.5H21v3.9a1.5 1.5 0 0 1-1.5 1.5h-15A1.5 1.5 0 0 1 3 18.5z'/%3E%3C/svg%3E");} .app-sidebar .sidebar-nav > a[href="team_org.php"]{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12a4 4 0 1 0 0-8 4 4 0 0 0 0 8zm0 2c-3.9 0-8 2-8 4.5V21h16v-2.5c0-2.5-4.1-4.5-8-4.5z'/%3E%3C/svg%3E");} /* mountain scene */ .app-sidebar .sidebar-scene{flex:0 0 auto;position:relative;height:clamp(150px,27vh,300px);overflow:hidden;pointer-events:none;} .app-sidebar .sidebar-scene svg{position:absolute;inset:0;width:100%;height:100%;display:block;} .app-sidebar .sidebar-scene .sc-text{position:absolute;inset-inline-start:22px;bottom:18px;display:flex;flex-direction:column;gap:9px;color:#dbe9e2;font-size:11.5px;font-weight:600;letter-spacing:.2em;line-height:1.35;text-transform:uppercase;} .app-sidebar .sidebar-scene .sc-text svg{position:static;width:24px;height:24px;color:#4fbf87;} /* collapsed rail */ .app-sidebar.collapsed{width:var(--v2-sidebar-w-collapsed);} .app-sidebar.collapsed .sb-brandtext,.app-sidebar.collapsed .sidebar-scene,.app-sidebar.collapsed .sidebar-link .nav-caret{display:none!important;} .app-sidebar.collapsed .sidebar-brand{padding:15px 0 8px;justify-content:center;height:auto;flex-direction:column;gap:10px;} .app-sidebar.collapsed .sidebar-collapse-btn{position:static;margin:0 auto;} .app-sidebar.collapsed .sidebar-link{padding:0!important;justify-content:center;} .app-sidebar.collapsed .sidebar-link::before{margin:0;} /* ---------- Topbar: ONE row ---------- */ .content-topbar,.content-topbar.has-context-row{top:var(--envbar)!important;height:var(--v2-header-h)!important;inset-inline-start:var(--v2-sidebar-w);inset-inline-end:0;} body.sidebar-collapsed .content-topbar{inset-inline-start:var(--v2-sidebar-w-collapsed)!important;} .content-topbar-inner{height:100%!important;max-width:none!important;margin:0!important;border:0!important;border-bottom:1px solid var(--m-line)!important;border-radius:0!important;box-shadow:none!important; background:var(--v2-panel);padding:0 22px 0 24px!important;gap:12px!important;justify-content:flex-start!important;display:flex;align-items:center;} .tb-ctx{display:flex;align-items:center;gap:10px;min-width:0;} .tb-pillwrap{position:relative;flex:0 0 auto;} .tb-pill{display:inline-flex;align-items:center;gap:10px;height:38px;padding:0 13px;border:1px solid #dde5e1;border-radius:9px;background:var(--v2-panel);color:var(--v2-text);font-size:14.5px;font-weight:500;font-family:inherit;cursor:pointer;white-space:nowrap;box-shadow:none;} :root[data-theme="dark"] .tb-pill{border-color:var(--v2-border);} .tb-pill:hover{background:var(--v2-panel-hover);transform:none;border-color:#cbd8d2;} .tb-pill .ic{width:20px;height:20px;color:#5d6d66;flex:0 0 20px;} .tb-pill .chev{width:12px;height:12px;color:#66766f;flex:0 0 12px;} .tb-pill strong{font-weight:500;color:inherit;} .tb-pill .ent-context-chip{margin-inline-start:6px;} .tb-pop{display:none;position:absolute;top:calc(100% + 8px);inset-inline-start:0;min-width:260px;background:var(--v2-panel);border:1px solid var(--m-line);border-radius:12px;box-shadow:0 18px 40px -16px rgba(12,42,34,.35);padding:8px;z-index:420;} .tb-pillwrap.open .tb-pop{display:block;} .tb-pop h4{margin:4px 8px 6px;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--v2-text-2);font-weight:700;} .tb-pop .opt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-radius:8px;font-size:13.5px;color:var(--v2-text);} .tb-pop .opt.cur{background:color-mix(in srgb, var(--m-green) 10%, transparent);font-weight:600;} .tb-pop .opt.dim{color:var(--v2-text-2);} .tb-pop .note{margin:6px 8px 4px;font-size:11.5px;color:var(--v2-text-2);line-height:1.45;} .v2-search{flex:0 1 423px!important;max-width:423px!important;margin-inline-start:auto;min-width:120px;position:relative;} .v2-search-input{height:38px;width:100%;border-radius:9px!important;background:var(--v2-panel)!important;border:1px solid #dde5e1!important;padding:0 84px 0 42px!important;font-size:13.5px!important;} :root[dir="rtl"] .v2-search-input{padding:0 42px 0 84px!important;} :root[data-theme="dark"] .v2-search-input{border-color:var(--v2-border)!important;} .v2-search-ic{inset-inline-start:14px!important;color:#5d6d66;} .v2-search-kbd{position:absolute;inset-inline-end:10px;top:50%;transform:translateY(-50%);display:flex;gap:4px;background:none!important;border:0!important;padding:0!important;} .v2-search-kbd kbd{min-width:21px;height:21px;padding:0 5px;border:1px solid #d5ded9;border-radius:5px;background:var(--v2-panel-hover);color:#66766f;font:600 11px/19px inherit;font-family:inherit;text-align:center;} .me-box{display:flex;align-items:center;gap:6px;flex:0 0 auto;margin-inline-start:14px;} .tb-icon{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#2f3d37;background:transparent;border:0;cursor:pointer;text-decoration:none;box-shadow:none;} .tb-icon:hover{background:var(--v2-panel-hover);transform:none;} .tb-icon svg{width:23px;height:23px;} .tb-icon .bell-count{position:absolute;top:0;inset-inline-end:-1px;left:auto;min-width:17px;height:17px;border-radius:9px;background:#e5484d;color:#fff;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 4px;border:0;} .tb-icon.ring .bell-ic{animation:none;} .tb-demo{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:rgba(224,157,52,.16);color:#a5670f;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;margin-inline-end:4px;white-space:nowrap;} .topbar-user-menu{margin-inline-start:6px;} .topbar-user-btn{gap:10px!important;padding:3px 4px 3px 4px!important;border-radius:10px!important;} .topbar-user-btn .user-menu-btn{width:38px;height:38px;border-radius:50%;background:#2d6a4f;color:#fff;display:grid;place-items:center;overflow:hidden;} .topbar-user-btn .user-menu-initial{font-size:14px;font-weight:700;color:#fff;letter-spacing:.02em;} .topbar-user-btn img{width:100%;height:100%;object-fit:cover;} .topbar-user-name{font-size:14px!important;font-weight:700!important;max-width:170px!important;} .topbar-user-role{font-size:12px!important;color:var(--v2-text-2)!important;} .topbar-user-btn .u-chev{width:12px;height:12px;color:#66766f;margin-inline-start:2px;} #userMenuPanel{min-width:260px;padding:6px;} #userMenuPanel .tb-menu-sec{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px;font-size:12.5px;color:var(--v2-text-2);border-top:1px solid var(--m-line);} #userMenuPanel .tb-menu-info{padding:8px 10px;font-size:12.5px;color:var(--v2-text-2);border-top:1px solid var(--m-line);display:none;line-height:1.7;} #userMenuPanel .tb-menu-info b{color:var(--v2-text);font-weight:600;} .rwt-clocks,#rwtClocks{display:none!important;} .app-env-banner{position:fixed;top:0;inset-inline:0;height:26px;line-height:26px;font-size:11.5px;font-weight:700;text-align:center;z-index:600;} @media (max-width:1320px){ .tb-pill .txt-role{display:none;} .tb-pill{padding:0 11px;font-size:14px;gap:8px;} .v2-search{flex-basis:300px!important;} } @media (max-width:1180px){ .tb-ctx{display:none;} #userMenuPanel .tb-menu-info{display:block;} .v2-search{flex-basis:360px!important;} } @media (max-width:760px){ .content-topbar-inner{padding:0 10px!important;gap:6px!important;} .app-sidebar .sidebar-brand{padding-inline-end:18px!important;} .app-sidebar .sidebar-link{padding:0 14px!important;justify-content:flex-start!important;} .app-sidebar .sidebar-link::before{margin:0;} .app-sidebar .sidebar-link .nav-caret{display:block!important;} .app-sidebar .sb-brandtext{display:flex!important;} .app-sidebar .sidebar-scene{display:block;} .tb-icon.help{display:none;} .topbar-user-info,.topbar-user-btn .u-chev{display:none!important;} .v2-search{flex:1 1 auto!important;max-width:none!important;margin-inline-start:0;} .v2-search-kbd{display:none;} .v2-search-input{padding-inline-end:12px!important;} .app{padding:16px 14px 40px;} .tb-demo{display:none;} } /* ---------- Enterprise Overview page ---------- */ .ovx{display:block;} .ovx-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 16px;} .ovx-welcome{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:#7a8983;font-weight:600;margin-bottom:6px;} .ovx-head h1{margin:0;font-size:31px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--v2-text);font-family:inherit;} .ovx-sub{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:9px;font-size:15.5px;color:#5b6b64;} .ovx-sub i{width:1px;height:16px;background:#cdd8d3;display:inline-block;} .ovx-head-r{display:flex;align-items:center;gap:20px;padding-bottom:4px;font-size:15.5px;} .ovx-date{color:#5b6b64;} .ovx-vr{width:1px;height:26px;background:#cdd8d3;} .ovx-motto{font-weight:700;color:var(--m-green);} :root[data-theme="dark"] .ovx-motto{color:#4fd0a0;} :root[data-theme="dark"] .ovx-welcome,:root[data-theme="dark"] .ovx-sub,:root[data-theme="dark"] .ovx-date{color:var(--v2-text-2);} .ovx-card{background:var(--v2-panel);border:1px solid var(--m-line);border-radius:12px;box-shadow:0 1px 2px rgba(16,40,30,.04);min-width:0;} .ovx-kpis{display:grid;grid-template-columns:repeat(var(--kc,6),minmax(0,1fr));gap:14px;margin-bottom:18px;} .ovx-kpi{position:relative;display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:13px;row-gap:12px;padding:16px 16px 14px;min-height:130px;text-decoration:none;color:inherit;transition:border-color .15s,box-shadow .15s;} a.ovx-kpi:hover{border-color:#b9cdc3;box-shadow:0 6px 18px -10px rgba(16,60,44,.3);} .ovx-kic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;} .ovx-kic svg{width:24px;height:24px;} .ovx-klabel{font-size:14px;color:#66766f;line-height:1.2;} .ovx-klabel em{font-style:normal;font-size:10.5px;letter-spacing:.06em;color:#93a19b;margin-inline-start:4px;} .ovx-kval{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--v2-text);} .ovx-kfoot{grid-column:1/-1;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;min-height:42px;} .ovx-kd{display:flex;flex-direction:column;gap:1px;font-size:12px;color:#7a8983;line-height:1.25;} .ovx-kd b{font-size:13px;font-weight:700;display:flex;align-items:center;gap:3px;font-variant-numeric:tabular-nums;} .ovx-kd b svg{width:12px;height:12px;} .ovx-kd.good b{color:#1c9a5a;} .ovx-kd.bad b{color:#d9363e;} .ovx-kd.flat b{color:#7a8983;} .ovx-spark{width:112px;height:42px;flex:0 0 auto;display:block;} .ovx-main{display:grid;grid-template-columns:minmax(0,994fr) minmax(0,382fr);gap:14px;align-items:start;} .ovx-left,.ovx-right{display:flex;flex-direction:column;gap:14px;min-width:0;} .ovx-row-a{display:grid;grid-template-columns:minmax(0,610fr) minmax(0,370fr);gap:14px;} .ovx-row-b{display:grid;grid-template-columns:minmax(0,692fr) minmax(0,293fr);gap:14px;} .ovx-ch{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 16px 6px;} .ovx-ch h2{margin:0;font-size:17px;font-weight:800;letter-spacing:-.01em;color:var(--v2-text);} .ovx-link{font-size:13px;font-weight:600;color:var(--m-blue);text-decoration:none;white-space:nowrap;} .ovx-link:hover{text-decoration:underline;} :root[data-theme="dark"] .ovx-link{color:#7fb0ff;} .ovx-sel{height:32px;border:1px solid #dde5e1;border-radius:8px;background:var(--v2-panel);color:var(--v2-text);font:500 13px inherit;font-family:inherit;padding:0 26px 0 10px;cursor:pointer;} :root[data-theme="dark"] .ovx-sel{border-color:var(--v2-border);} .ovx-body{padding:4px 16px 14px;} .ovx-tabs{display:flex;gap:20px;padding:0 16px;border-bottom:1px solid var(--m-line);margin-top:6px;overflow-x:auto;} .ovx-tab{background:none;border:0;border-bottom:2px solid transparent;padding:6px 0 10px;font-size:13px;color:#66766f;cursor:pointer;font-family:inherit;white-space:nowrap;box-shadow:none;border-radius:0;} .ovx-tab:hover{transform:none;color:var(--v2-text);background:none;} .ovx-tab.on{color:var(--m-green);font-weight:700;border-bottom-color:var(--m-green);} :root[data-theme="dark"] .ovx-tab.on{color:#4fd0a0;border-bottom-color:#4fd0a0;} table.ovx-t{width:100%;border-collapse:collapse;font-size:12px;} table.ovx-t th{text-align:start;font-weight:600;font-size:11.5px;color:#7a8983;background:color-mix(in srgb, var(--v2-panel-hover) 70%, transparent);padding:8px 10px;white-space:nowrap;border-bottom:1px solid var(--m-line);} table.ovx-t td{padding:9px 10px;border-bottom:1px solid color-mix(in srgb, var(--m-line) 70%, transparent);vertical-align:middle;color:var(--v2-text);white-space:nowrap;} table.ovx-t tr:last-child td{border-bottom:0;} table.ovx-t td.r,table.ovx-t th.r{text-align:end;font-variant-numeric:tabular-nums;} table.ovx-t a{color:inherit;text-decoration:none;font-weight:500;} table.ovx-t a:hover{color:var(--m-green);} .ovx-tw{overflow-x:auto;padding:10px 16px 4px;} .ovx-ty{display:inline-flex;align-items:center;gap:8px;} .ovx-tyi{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;flex:0 0 22px;} .ovx-tyi svg{width:14px;height:14px;} .ovx-st{display:inline-block;padding:3px 9px;border-radius:5px;font-size:11px;font-weight:600;} .ovx-st.pending{background:#fdebd0;color:#a0621a;} .ovx-st.review{background:#e1ecfb;color:#265aa8;} .ovx-st.posted{background:#dcefe3;color:#1f6b47;} .ovx-st.approved{background:#d6ecdc;color:#1b6a41;} :root[data-theme="dark"] .ovx-st.pending{background:rgba(245,173,66,.18);color:#f5c265;} :root[data-theme="dark"] .ovx-st.review{background:rgba(85,170,244,.18);color:#8fc4ff;} :root[data-theme="dark"] .ovx-st.posted,:root[data-theme="dark"] .ovx-st.approved{background:rgba(49,210,176,.16);color:#4fd0a0;} .ovx-act{display:inline-flex;align-items:center;gap:8px;} .ovx-btn{display:inline-block;padding:4px 11px;border-radius:6px;background:#e2eee7;color:#1f6b47;font-size:11.5px;font-weight:700;text-decoration:none;} .ovx-btn:hover{background:#d3e6da;} :root[data-theme="dark"] .ovx-btn{background:rgba(49,210,176,.16);color:#4fd0a0;} .ovx-dots{color:#8b9a94;font-weight:700;letter-spacing:.06em;text-decoration:none;} .ovx-empty{padding:26px 16px;text-align:center;color:#7a8983;font-size:13px;} .ovx-donutw{display:flex;align-items:center;gap:22px;padding:8px 18px 18px;flex-wrap:wrap;justify-content:center;} .ovx-donut{width:160px;height:160px;flex:0 0 auto;position:relative;} .ovx-donut svg{width:100%;height:100%;transform:rotate(-90deg);} .ovx-dc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;} .ovx-dc b{font-size:30px;font-weight:800;line-height:1;} .ovx-dc span{font-size:13px;color:#66766f;margin-top:4px;} .ovx-leg{display:flex;flex-direction:column;gap:11px;min-width:150px;flex:1 1 150px;} .ovx-li{display:grid;grid-template-columns:12px 1fr auto auto;align-items:center;gap:9px;font-size:13px;color:var(--v2-text);} .ovx-li i{width:11px;height:11px;border-radius:50%;} .ovx-li em{font-style:normal;color:#7a8983;min-width:34px;text-align:end;} .ovx-chart{width:100%;height:auto;display:block;} .ovx-cleg{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;font-size:12px;color:#5b6b64;margin-top:6px;} .ovx-cleg span{display:inline-flex;align-items:center;gap:6px;} .ovx-cleg i{width:11px;height:11px;border-radius:3px;display:inline-block;} .ovx-cleg i.ln{height:2px;width:16px;border-radius:2px;position:relative;} .ovx-filters{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:0 16px 4px;} .ovx-search{display:flex;align-items:center;gap:6px;height:32px;border:1px solid #dde5e1;border-radius:8px;padding:0 10px;background:var(--v2-panel);min-width:150px;flex:1 1 150px;max-width:230px;} .ovx-search input{border:0;outline:0;background:transparent;font:500 12.5px inherit;font-family:inherit;color:var(--v2-text);width:100%;} .ovx-search svg{width:15px;height:15px;color:#7a8983;flex:0 0 15px;} .ovx-q{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:6px 16px 16px;} .ovx-q a{display:flex;align-items:center;gap:10px;height:37px;padding:0 12px;border:1px solid var(--m-line);border-radius:8px;background:color-mix(in srgb, var(--v2-panel-hover) 65%, var(--v2-panel));color:var(--v2-text);text-decoration:none;font-size:12.5px;font-weight:500;white-space:nowrap;overflow:hidden;transition:border-color .15s,background .15s;} .ovx-q a:hover{border-color:#a9c4b7;background:color-mix(in srgb, var(--m-green) 7%, var(--v2-panel));} .ovx-q a svg{width:18px;height:18px;flex:0 0 18px;color:#33423c;} .ovx-q a span{overflow:hidden;text-overflow:ellipsis;} :root[data-theme="dark"] .ovx-q a svg{color:#b9cdc5;} .ovx-al{list-style:none;margin:0;padding:2px 16px 12px;display:flex;flex-direction:column;gap:2px;} .ovx-al a{display:flex;align-items:center;gap:12px;padding:8px 0;text-decoration:none;color:inherit;border-radius:8px;} .ovx-al a:hover b{color:var(--m-green);} .ovx-ai{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;flex:0 0 26px;color:#fff;font-size:13px;font-weight:800;} .ovx-ai svg{width:15px;height:15px;} .ovx-at{flex:1;min-width:0;display:flex;flex-direction:column;} .ovx-at b{font-size:12.5px;font-weight:600;line-height:1.25;} .ovx-at span{font-size:11.5px;color:#7a8983;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .ovx-ac{width:14px;height:14px;color:#8b9a94;flex:0 0 14px;} :root[dir="rtl"] .ovx-ac{transform:scaleX(-1);} .ovx-banner{position:relative;height:74px;border-radius:12px;overflow:hidden;border:1px solid var(--m-line);display:flex;align-items:center;justify-content:space-between;padding:0 30px;background:#eef3f1;} .ovx-banner svg.bg{position:absolute;inset:0;width:100%;height:100%;} .ovx-banner .tx{position:relative;font-size:17px;font-weight:800;line-height:1.3;color:#14241e;} .ovx-banner .rt{position:relative;display:flex;align-items:center;gap:10px;font-size:13px;color:#22332c;background:rgba(255,255,255,.72);padding:8px 14px;border-radius:9px;backdrop-filter:blur(2px);} .ovx-banner .rt svg{width:22px;height:22px;color:#2e9d62;} :root[data-theme="dark"] .ovx-banner .tx{color:#e9f4ee;} :root[data-theme="dark"] .ovx-banner .rt{background:rgba(9,32,26,.7);color:#d6e5de;} .ovx-note{font-size:11.5px;color:#7a8983;padding:0 16px 12px;} @media (max-width:1240px){ .ovx-main{grid-template-columns:minmax(0,1fr);} .ovx-row-a,.ovx-row-b{grid-template-columns:minmax(0,1fr);} } @media (max-width:760px){ .ovx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .ovx-kpi{padding:12px;min-height:116px;grid-template-columns:38px minmax(0,1fr);column-gap:9px;} .ovx-kic{width:38px;height:38px;} .ovx-kic svg{width:20px;height:20px;} .ovx-kval{font-size:19px;} .ovx-spark{width:70px;height:32px;} .ovx-head h1{font-size:25px;} .ovx-head-r{display:none;} .ovx-q{grid-template-columns:1fr;} .ovx-banner{padding:0 16px;height:auto;min-height:74px;flex-wrap:wrap;gap:8px;padding-block:10px;} .ovx-banner .tx{font-size:15px;} } @media (max-width:420px){ .ovx-kpis{grid-template-columns:1fr;} } /* KPI value: full figure on wide screens, compact figure when cards get narrow */ .ovx-kval .cmp{display:none;} @media (max-width:1559px) and (min-width:1241px){ .ovx-kval .full{display:none;} .ovx-kval .cmp{display:inline;} .ovx-kpi{grid-template-columns:38px minmax(0,1fr);column-gap:10px;padding:14px 12px 12px;} .ovx-kic{width:38px;height:38px;} .ovx-kic svg{width:20px;height:20px;} .ovx-kval{font-size:22px;} .ovx-spark{width:84px;} .ovx-klabel{font-size:13px;} } @media (max-width:1240px){ .ovx-kpis{grid-template-columns:repeat(3,minmax(0,1fr));} } @media (max-width:760px){ .ovx-kval .full{display:none;} .ovx-kval .cmp{display:inline;} } .ovx-row-a.ovx-solo{grid-template-columns:minmax(0,1fr);} .ovx-row-b.ovx-solo{grid-template-columns:minmax(0,1fr);} /* ---------- Master layout: pixel tuning against the approved reference (1672 x 941 / 1920 x 1080) ---------- */ .app-sidebar .sidebar-brand{height:68px;padding:14px 46px 12px 16px;gap:10px;} .app-sidebar .sb-mark{width:38px;height:38px;} .app-sidebar .sidebar-brand-word{font-size:20px;} .app-sidebar .sb-tag{white-space:normal;font-size:6.6px;letter-spacing:.12em;max-width:104px;line-height:1.35;} .app-sidebar .sidebar-nav > a[href="dashboard.php"],.app-sidebar .sidebar-nav > a[href="requests.php"],.app-sidebar .sidebar-nav > a[href="team_org.php"]{display:none;} .app{padding:16px 24px 40px;} .tb-pill{max-width:230px;} .topbar-user-btn .user-menu-initial,.topbar-user-btn .user-menu-btn{background:#1f6b47!important;color:#fff!important;} /* header */ .ovx-head{margin:0 0 14px;align-items:flex-end;} .ovx-welcome{font-size:11px;margin-bottom:5px;letter-spacing:.06em;font-weight:500;} .ovx-head h1{font-size:30px;font-weight:700;letter-spacing:-.015em;} .ovx-sub{font-size:15px;margin-top:6px;gap:12px;} .ovx-sub i{height:15px;} .ovx-head-r{font-size:15px;padding-bottom:6px;gap:18px;} .ovx-motto{font-weight:700;} /* KPI cards */ .ovx-kpis{gap:14px;margin-bottom:20px;} .ovx-kpi{grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:7px;padding:14px 14px 12px;min-height:0;height:128px;} .ovx-kic{width:44px;height:44px;} .ovx-kic svg{width:22px;height:22px;} .ovx-klabel{font-size:13px;color:#4f5f58;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-top:2px;} .ovx-kval{font-size:clamp(19px,1.2vw,24px);font-weight:700;letter-spacing:-.015em;margin-top:3px;line-height:1.1;} .ovx-kval small{font-size:11px;font-weight:600;color:#93a19b;letter-spacing:.04em;margin-inline-end:4px;} .ovx-kfoot{min-height:0;align-items:flex-end;} .ovx-kd{font-size:11.5px;gap:0;} .ovx-kd b{font-size:13px;gap:4px;} .ovx-kd b svg{width:13px;height:13px;} .ovx-spark{width:90px;height:40px;} .ovx-kpi.tint-bad .ovx-kd b{color:#d9363e;} /* generic card chrome */ .ovx-main{gap:14px;} .ovx-left,.ovx-right{gap:13px;} .ovx-ch{padding:12px 14px 4px;} .ovx-ch h2{font-size:17px;font-weight:700;} .ovx-link{font-size:12.5px;font-weight:600;} .ovx-sel{height:28px;font-size:12px;border-radius:6px;padding:0 24px 0 9px;} .ovx-body{padding:2px 12px 10px;} /* approvals + transactions tables */ .ovx-tabs{gap:22px;padding:0 14px;margin-top:2px;} .ovx-tab{font-size:12.5px;padding:7px 0 9px;} .ovx-tw{padding:8px 12px 6px;overflow-x:hidden;} table.ovx-t{table-layout:fixed;font-size:11px;} table.ovx-t th{font-size:10.5px;padding:7px 5px;background:#f4f7f6;font-weight:600;color:#5f6f68;} table.ovx-t td{padding:5px 5px;height:35px;overflow:hidden;text-overflow:ellipsis;} table.ovx-t th:first-child,table.ovx-t td:first-child{padding-inline-start:9px;} #ovxApprT th:nth-child(1){width:21%;} #ovxApprT th:nth-child(2){width:17%;} #ovxApprT th:nth-child(3){width:15%;} #ovxApprT th:nth-child(4){width:10%;} #ovxApprT th:nth-child(5){width:14%;} #ovxApprT th:nth-child(6){width:10.5%;} #ovxApprT th:nth-child(7){width:12.5%;} #ovxTxT th:nth-child(1){width:11.5%;} #ovxTxT th:nth-child(2){width:13%;} #ovxTxT th:nth-child(3){width:14.5%;} #ovxTxT th:nth-child(4){width:16%;} #ovxTxT th:nth-child(5){width:15%;} #ovxTxT th:nth-child(6){width:8%;} #ovxTxT th:nth-child(7){width:11%;} #ovxTxT th:nth-child(8){width:11%;} #ovxTxT td{height:29px;padding:4px 5px;} .ovx-ty{gap:6px;} .ovx-tyi{width:20px;height:20px;flex-basis:20px;border-radius:5px;} .ovx-tyi svg{width:12px;height:12px;} .ovx-st{font-size:10px;padding:2px 7px;border-radius:4px;} .ovx-btn{font-size:10.5px;padding:3px 8px;border-radius:5px;} .ovx-act{gap:6px;} .ovx-filters{gap:8px;padding:2px 14px 6px;flex-wrap:nowrap;} .ovx-filters .ovx-sel{height:28px;flex:0 0 auto;max-width:170px;} .ovx-search{height:28px;min-width:0;flex:1 1 120px;max-width:190px;border-radius:6px;padding:0 8px;} .ovx-search input{font-size:11.5px;} .ovx-search svg{width:13px;height:13px;flex-basis:13px;} /* project performance */ .ovx-donutw{flex-wrap:nowrap;justify-content:flex-start;gap:14px;padding:18px 14px 14px;align-items:center;} .ovx-donut{width:152px;height:152px;} .ovx-dc b{font-size:28px;font-weight:700;} .ovx-dc span{font-size:12.5px;} .ovx-leg{gap:9px;min-width:0;flex:1 1 auto;} .ovx-li{font-size:12.5px;gap:7px;grid-template-columns:10px minmax(0,1fr) auto auto;} .ovx-li i{width:10px;height:10px;} .ovx-li em{min-width:30px;} /* quick actions + alerts */ .ovx-q{gap:7px;padding:4px 14px 14px;} .ovx-q a{height:33px;padding:0 10px;font-size:12px;border-radius:6px;gap:9px;background:#fff;border-color:#e6ecea;} :root[data-theme="dark"] .ovx-q a{background:var(--v2-panel-hover);} .ovx-q a svg{width:16px;height:16px;flex-basis:16px;} .ovx-al{padding:0 14px 10px;gap:0;} .ovx-al a{padding:6px 0;gap:10px;} .ovx-ai{width:24px;height:24px;flex-basis:24px;} .ovx-at b{font-size:12px;} .ovx-at span{font-size:10.5px;} .ovx-ac{width:14px;height:14px;color:#8b9a94;flex:0 0 14px;} :root[dir="rtl"] .ovx-ac{transform:scaleX(-1);} /* banner */ .ovx-banner{height:72px;padding:0 24px;border-radius:10px;} .ovx-banner::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,#f5f8f7 0%,#f5f8f7 26%,rgba(245,248,247,0) 62%);pointer-events:none;} :root[dir="rtl"] .ovx-banner::before{background:linear-gradient(270deg,#f5f8f7 0%,#f5f8f7 26%,rgba(245,248,247,0) 62%);} :root[data-theme="dark"] .ovx-banner::before{background:linear-gradient(90deg,#10261f 0%,#10261f 26%,rgba(16,38,31,0) 62%);} .ovx-banner .tx,.ovx-banner .rt{z-index:2;} .ovx-banner .tx{font-size:16px;font-weight:700;} .ovx-banner .rt{font-size:12px;background:rgba(255,255,255,.55);padding:6px 12px;} /* ---------- Master layout: pass 2 ---------- */ .csel.ovx-sel{height:auto;border:0;padding:0;background:transparent;box-shadow:none;display:inline-block;min-width:0;} .ovx-sel .csel-trigger{height:28px;padding:0 9px;font-size:12px;font-weight:500;border-radius:6px;border-color:#dde5e1;background:var(--v2-panel);gap:6px;} :root[data-theme="dark"] .ovx-sel .csel-trigger{border-color:var(--v2-border);} .ovx-filters .csel.ovx-sel{flex:0 1 auto;min-width:0;max-width:175px;} .ovx-filters .csel.ovx-sel .csel-trigger{width:auto;max-width:100%;} .ovx-filters .csel.ovx-sel .csel-trigger span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .app-sidebar .sidebar-brand{height:73px;} .ovx-head{margin-bottom:11px;} .ovx-sub{margin-top:4px;} .ovx-ch{padding:10px 14px 2px;} .ovx-tab{padding:6px 0 8px;} .ovx-klabel{font-size:12.5px;letter-spacing:-.005em;} .ovx-q a{font-size:11.5px;gap:8px;padding:0 9px;} .ovx-al a{padding:4px 0;} #ovxTxT th:nth-child(1){width:13%;} #ovxTxT th:nth-child(2){width:12.5%;} #ovxTxT th:nth-child(3){width:14%;} #ovxTxT th:nth-child(4){width:15%;} #ovxTxT th:nth-child(5){width:15%;} #ovxTxT th:nth-child(6){width:9%;} #ovxTxT th:nth-child(7){width:10.5%;} #ovxTxT th:nth-child(8){width:11%;} .v2-search{flex:0 1 423px!important;max-width:423px!important;margin-inline-start:auto!important;} .me-box{margin-inline-start:6px;} /* ---------- Master layout: pass 3 ---------- */ html[dir="ltr"] .app-sidebar,html[dir="ltr"] .content-topbar,html[dir="ltr"] .ovx,html[dir="ltr"] .ovx button,html[dir="ltr"] .ovx select,html[dir="ltr"] .ovx input,html[dir="ltr"] .ovx .csel-trigger{font-family:'Inter','IBM Plex Sans Arabic',system-ui,sans-serif;} body.ovx-page .rwt-footer{display:none;} body.ovx-page .app{padding-bottom:14px;} .ovx-left,.ovx-right{gap:12px;} #ovxTxT td{height:27px;padding:3px 5px;} #ovxTxT th{padding:5px;} .ovx-row-b .ovx-ch{padding-top:8px;} .ovx-filters{padding:0 14px 6px;} .ovx-q{gap:6px;padding:2px 14px 12px;} .ovx-q a{height:30px;} .ovx-al{padding:0 14px 8px;} .ovx-at b,.ovx-at span{line-height:1.2;} .ovx-al a{padding:3px 0;} .ovx-banner{margin-top:-3px;} .tb-icon{width:40px;height:40px;} .content-topbar .me-box{gap:12px;} .tb-pill{padding-inline:12px;gap:8px;} /* ---------- Master layout: pass 4 — wide screens use the extra height, tight screens stay compact ---------- */ .ovx-kpis{margin-bottom:18px;} @media (min-width:1800px){ .app{padding-top:22px;} .ovx-head{margin-bottom:16px;} .ovx-head h1{font-size:32px;} .ovx-sub,.ovx-head-r{font-size:16px;} .ovx-kpis{margin-bottom:22px;gap:16px;} .ovx-kpi{height:138px;padding:15px 16px 13px;} .ovx-kval{font-size:25px;} .ovx-spark{width:100px;height:46px;} .ovx-klabel{font-size:13.5px;} .ovx-main{gap:16px;} .ovx-left,.ovx-right{gap:16px;} .ovx-row-a,.ovx-row-b{gap:16px;} table.ovx-t{font-size:12px;} table.ovx-t th{font-size:11px;padding:9px 6px;} #ovxApprT td{height:40px;} #ovxTxT td{height:33px;} .ovx-ch{padding:14px 16px 4px;} .ovx-ch h2{font-size:18px;} .ovx-tab{font-size:13px;padding:8px 0 10px;} .ovx-donut{width:172px;height:172px;} .ovx-li{font-size:13.5px;} .ovx-leg{gap:12px;} .ovx-q a{height:36px;font-size:12.5px;} .ovx-q{gap:8px;padding:4px 16px 16px;} .ovx-al a{padding:6px 0;} .ovx-at b{font-size:12.5px;} .ovx-at span{font-size:11px;} .ovx-banner{height:78px;margin-top:0;} .ovx-banner .tx{font-size:18px;} .ovx-filters .ovx-sel .csel-trigger,.ovx-search{height:30px;} } /* ---------- Master layout: pass 5 — dark theme + small screens ---------- */ :root[data-theme="dark"] table.ovx-t th{background:rgba(255,255,255,.05);color:var(--v2-text-2);} :root[data-theme="dark"] .ovx-q a{border-color:var(--v2-border);color:var(--v2-text);} :root[data-theme="dark"] .ovx-q a:hover{border-color:#3d7a63;} :root[data-theme="dark"] .ovx-klabel{color:var(--v2-text-2);} :root[data-theme="dark"] .ovx-sel .csel-trigger{background:var(--v2-panel);color:var(--v2-text);} :root[data-theme="dark"] .ovx-search{border-color:var(--v2-border);} :root[data-theme="dark"] .ovx-cleg,:root[data-theme="dark"] .ovx-dc span{color:var(--v2-text-2);} :root[data-theme="dark"] .ovx-chart text{fill:#8fa39b;} @media (max-width:1240px){ .ovx-tw{overflow-x:auto;} table.ovx-t{table-layout:auto;min-width:640px;} #ovxTxT{min-width:720px;} table.ovx-t th,table.ovx-t td{white-space:nowrap;} .ovx-filters{flex-wrap:wrap;} } @media (max-width:760px){ .ovx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;} .ovx-kpi{height:auto;min-height:118px;} .ovx-kfoot{flex-wrap:wrap;} .ovx-spark{width:100%;height:30px;} .ovx-kd span{display:none;} .ovx-klabel{white-space:normal;font-size:12px;} .ovx-sub{gap:8px;font-size:13.5px;} .ovx-sub i{display:none;} .ovx-sub span+span::before{content:"· ";} .ovx-donutw{flex-wrap:wrap;justify-content:center;} .ovx-filters .csel.ovx-sel{max-width:100%;} } @media (max-width:420px){ .ovx-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} } .ovx-chart{direction:ltr;unicode-bidi:isolate;} /* ---------- Master system: sidebar hierarchy incl. "My Work" ---------- */ .app-sidebar .sidebar-nav > a[href="dashboard.php"],.app-sidebar .sidebar-nav > a[href="requests.php"],.app-sidebar .sidebar-nav > a[href="team_org.php"]{display:flex;order:0;height:44px;font-size:15px;opacity:1;margin-top:0;border-top:0;border-radius:9px;padding-top:0!important;} .app-sidebar .sidebar-nav > a[href="overview.php"]{order:1;} .app-sidebar #workMenu{order:2;} .app-sidebar #accountingMenu{order:3;} .app-sidebar #procurementMenu{order:4;} .app-sidebar #projectsMenu{order:5;} .app-sidebar #commercialMenu{order:6;} .app-sidebar #inventoryMenu{order:7;} .app-sidebar #assetsMenu{order:8;} .app-sidebar #hrMenu{order:9;} .app-sidebar #attendanceMenu{order:10;} .app-sidebar #reportsMenu{order:11;} .app-sidebar #adminMenu{order:12;} .app-sidebar #workMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 2.5h6l.6 1.8H19a1.5 1.5 0 0 1 1.5 1.5v14.7A1.5 1.5 0 0 1 19 22H5a1.5 1.5 0 0 1-1.5-1.5V5.800A1.500 1.500 0 0 1 5 4.300h3.400zm-2.500 8.300 3.600 3.600 5.600-5.600-1.400-1.400-4.200 4.200-2.200-2.200zM7 17h10v-1.800H7z'/%3E%3C/svg%3E");} .app-sidebar #attendanceMenu > .sidebar-link{--ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2.500a9.500 9.500 0 1 0 0 19 9.500 9.500 0 0 0 0-19zm1 5v4.600l3.400 2-.9 1.500L11 12.800V7.500z'/%3E%3C/svg%3E");} .app-sidebar .sidebar-nav{padding-bottom:16px;} .app-sidebar .user-menu-panel a .nav-count{margin-inline-start:auto;} /* ========================================================================== MASTER DESIGN SYSTEM — applies the approved Albero look to every page (tokens, page frame, page header + breadcrumb, cards, stat tiles, tables, forms, buttons, pills). Pure presentation: no markup or behaviour changes. ========================================================================== */ :root{ --bg:#f5f8f7; --surface:#ffffff; --surface-2:#f4f7f6; --border:#e3eae7; --text:#14241e; --muted:#5f6f68; --accent:#1f6b47; --accent-2:#2a8560; --accent-3:#3a8f68; --accent-dim:#e4f1ea; --teal:#1f6b47; --status-doing:#2f6fd0; --v2-border:#e3eae7; --v2-text:#14241e; --v2-text-2:#5f6f68; --v2-accent:#1f6b47; --v2-accent-hover:#185a3b; --v2-green:#1f6b47; --v2-panel-hover:#f4f7f6; --m-focus:0 0 0 3px rgba(31,107,71,.16); } :root[data-theme="dark"]{ --accent:#4fd0a0; --accent-2:#5fd8ae; --accent-3:#4fd0a0; --accent-dim:rgba(79,208,160,.14); --teal:#4fd0a0; --on-accent:#06231c; --m-focus:0 0 0 3px rgba(79,208,160,.22); } /* ---- page frame: every page uses the full content width, same gutters ---- */ .app{max-width:none!important;margin:0!important;padding:22px 24px 40px;width:100%;} .app[style*="max-width"]{max-width:none!important;} .app.app-wide{max-width:none!important;} .rwt-footer{display:none!important;} body{background:var(--bg);} @media (max-width:760px){ .app{padding:16px 14px 32px;} } /* ---- page header + breadcrumb ---- */ .ent-breadcrumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 10px;font-size:12.5px;color:var(--muted);} .ent-breadcrumb a{color:var(--muted);text-decoration:none;} .ent-breadcrumb a:hover{color:var(--accent);text-decoration:underline;} .ent-crumb-sep{color:#a9b7b0;font-size:12px;} .ent-crumb-current{color:var(--text);font-weight:600;} .pg-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 18px;} .pg-title,.app > h1,.app > h2.section-title.pg-title{margin:0 0 4px;font-size:26px;font-weight:700;letter-spacing:-.015em;line-height:1.2;color:var(--text);} .pg-sub{margin:0;font-size:14px;color:var(--muted);line-height:1.5;max-width:820px;} .app > p.hint.pg-sub{margin:0 0 18px!important;font-size:14px;} .pg-form .form-card{max-width:880px;} .pg-form .form-card > form > .btn.primary,.form-card form > .btn.primary[style*="width:100%"]{width:auto!important;min-width:180px;} .pg-form .field-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;} /* ---- cards ---- */ .form-card,.soon-card,.contact-card,.rem-card,.emp-card,.att-sum-card,.hub-card,.client-card,.org-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(16,40,30,.04);} .app .form-card{max-width:880px;margin-inline:0;padding:22px 24px;} .settings-link-card{max-width:880px!important;} .hub-card:hover{border-color:#b9cdc3;box-shadow:0 8px 22px -14px rgba(16,60,44,.32);transform:none;} .soon-card{max-width:720px;margin:24px 0;} /* ---- stat tiles: neutral surface, semantic number colour only ---- */ .stats{gap:14px;margin-bottom:20px;} .stats .stat,.stat{background:var(--surface)!important;color:var(--text)!important;border:1px solid var(--border);border-radius:12px;box-shadow:0 1px 2px rgba(16,40,30,.04);padding:16px 18px;min-width:170px;} .stat .num{color:var(--text);font-family:inherit;font-size:26px;font-weight:700;letter-spacing:-.01em;font-variant-numeric:tabular-nums;} .stat .label{color:var(--muted)!important;font-size:12.5px;margin-top:4px;} .stat.s-red .num{color:var(--bad);} .stat.s-green .num{color:var(--good);} .stat.s-amber .num{color:var(--warn);} .stat.s-blue .num,.stat.s-teal .num,.stat.s-purple .num,.stat.s-gray .num{color:var(--accent);} :root[data-theme="dark"] .stats .stat,:root[data-theme="dark"] .stat{box-shadow:none;} /* ---- tables ---- */ table.simple,table.ticket-list,table.ov-table,.ov-table table{font-size:13px;} table.simple thead th,table.ticket-list thead th,table.ov-table th{background:var(--surface-2);color:var(--muted);font-size:11.5px;font-weight:600;letter-spacing:0;text-transform:none;padding:10px 14px;border-bottom:1px solid var(--border);} table.simple tbody td,table.ticket-list tbody td{padding:11px 14px;border-bottom:1px solid var(--border);} table.simple tbody tr:hover,table.ticket-list tbody tr:hover{background:var(--accent-dim);} .table-wrap,.ticket-table-wrap,.table-card{border:1px solid var(--border);border-radius:12px;background:var(--surface);overflow-x:auto;box-shadow:0 1px 2px rgba(16,40,30,.04);} /* ---- buttons ---- */ .btn{border-radius:8px;font-weight:600;font-size:13px;box-shadow:none;background-image:none;} .btn:not(.primary):not(.danger){background:var(--surface);color:var(--text);border-color:var(--border);} .btn:not(.primary):hover{border-color:#b9cdc3;background:var(--accent-dim);color:var(--accent);} .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff);background-image:none;} .btn.primary:hover{background:#185a3b;border-color:#185a3b;color:#fff;filter:none;box-shadow:0 6px 14px -8px rgba(31,107,71,.55);} :root[data-theme="dark"] .btn.primary:hover{background:#6ee0b6;border-color:#6ee0b6;color:#06231c;} .btn.ghost{background:transparent!important;} .btn:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px;} /* ---- forms ---- */ .field label{font-size:12.5px;font-weight:600;color:var(--muted);} .field input,.field select,.field textarea,.csel-trigger,.toolbar input,.toolbar select,.filter-bar input,.filter-bar select{background:var(--surface);border:1px solid #d5dfda;border-radius:8px;color:var(--text);} :root[data-theme="dark"] .field input,:root[data-theme="dark"] .field select,:root[data-theme="dark"] .field textarea,:root[data-theme="dark"] .csel-trigger{background:var(--surface-2);border-color:var(--border);} .field input:focus,.field select:focus,.field textarea:focus,.csel.open .csel-trigger,.csel-trigger:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--m-focus);background:var(--surface);} /* ---- status pills: one shape, semantic colours ---- */ .tag,.badge,.status-pill,.pill{border-radius:999px;font-weight:600;} .tag-in{background:#e4f3ea;color:#1b7a4b;} .tag-out{background:#fdeaea;color:#c53a3a;} .tag-warn{background:#fdf1dc;color:#a8690e;} a{color:var(--accent-2);} .notice{background:var(--accent-dim);border:1px solid color-mix(in srgb, var(--accent) 35%, transparent);color:var(--accent);border-radius:10px;} /* ---- topbar: never let the pills, search and icons collide ---- */ .tb-ctx{min-width:0;flex:0 1 auto;} .tb-pillwrap{min-width:0;flex:0 1 auto;} .tb-pill{min-width:0;max-width:100%;} .tb-pill > span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .tb-pill strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;max-width:100%;vertical-align:bottom;} .v2-search{flex:0 1 423px!important;min-width:190px!important;} .content-topbar-inner{min-width:0;} @media (max-width:1560px){ .tb-pill{padding-inline:10px;gap:6px;} .tb-icon.help{display:none;} } @media (max-width:1380px){ .tb-pill > span{max-width:120px;} .tb-demo{display:none;} } @media (max-width:1180px){ .tb-ctx{display:none;} } .app-sidebar .sidebar-nav > *{flex-shrink:0;} .app > .pg-title,.app > h1.pg-title{margin-bottom:16px;} .app > .pg-title:has(+ .pg-sub){margin-bottom:4px;} @media (max-width:1560px){ .v2-search{flex:0 1 280px!important;min-width:170px!important;} } .app-sidebar .user-menu-panel a.cur{background:rgba(255,255,255,.1)!important;color:#fff!important;font-weight:600;} .filter-bar .fp-alt-input.field-like,.report-filters .fp-alt-input.field-like{width:150px!important;} .fp-alt-input.field-like{background:var(--surface)!important;border-color:#d5dfda!important;border-radius:8px!important;} :root[data-theme="dark"] .fp-alt-input.field-like{background:var(--surface-2)!important;border-color:var(--border)!important;} /* sidebar: the menu may use the whole height; the mountain scene sits behind it */ .app-sidebar .sidebar-scene{position:absolute;inset-inline:0;bottom:0;height:clamp(150px,27vh,300px);z-index:0;} .app-sidebar .sidebar-nav{position:relative;z-index:1;padding-bottom:64px;} .app-sidebar .sidebar-scene .sc-text{z-index:2;} .app-sidebar:has(.user-menu-panel.open) .sidebar-scene .sc-text{display:none;} :root[data-theme="dark"] .tb-icon,:root[data-theme="dark"] .bell-btn{color:#c9d6d0;} .v2-search #v2SearchForm{flex:1 1 auto;min-width:0;display:flex;margin:0;} .v2-search #v2SearchForm .v2-search-input{width:100%;}