/* =========================================================
ACB Admin UI — Modern Pro (v2) — CLEAN (One Source of Truth)
Scope: .acb-ui mostly
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
:root{
/* Core */
--acb-bg: #0b1220;
--acb-surface: rgba(255,255,255,.06);
--acb-card: rgba(255,255,255,.08);
--acb-border: rgba(255,255,255,.10);
--acb-border-2: rgba(255,255,255,.14);
--acb-text: rgba(255,255,255,.92);
--acb-muted: rgba(255,255,255,.62);
--acb-shadow: 0 18px 60px rgba(0,0,0,.35);
--acb-shadow-soft: 0 10px 30px rgba(0,0,0,.22);
--acb-radius: 18px;
--acb-modal-backdrop: rgba(0,0,0,.55);
--acb-modal-panel-bg: rgba(18,26,40,.72);
--acb-modal-panel-border: rgba(255,255,255,.10);
--acb-modal-panel-shadow: 0 24px 80px rgba(0,0,0,.55);
--acb-modal-max-h: calc(100vh - 80px);
}
/* === Theme Picker Patch (auto) === */
:root{
--acb-col-00b053d6: #050a14;
--acb-col-01f5fe6a: rgba(0,0,0,.45);
--acb-col-04b94238: rgba(255,255,255,.55);
--acb-col-0764f9ba: rgba(255,255,255,.75);
--acb-col-07b4596e: rgba(59,130,246,0.75);
--acb-col-0943a933: rgba(0,0,0,.35);
--acb-col-095959ea: rgba(255,91,106,.55);
--acb-col-09f570a9: rgba(255,255,255,.18);
--acb-col-0a759dab: rgba(96,165,250,0.70);
--acb-col-0b90c74e: rgba(59,130,246,.22);
--acb-col-0bf0b344: rgba(168,85,247,.12);
--acb-col-0e2aae9e: rgba(0,0,0,.60);
--acb-col-0f1ec95c: #07101f;
--acb-col-10165fa1: rgba(255,255,255,.30);
--acb-col-106b8e92: rgba(59,130,246,.18);
--acb-col-11a092d7: #065f46;
--acb-col-13169777: rgba(30,144,255,.35);
--acb-col-1374e53e: rgba(255,255,255,.72);
--acb-col-1be95e3d: rgba(255,255,255,.15);
--acb-col-1d03f78c: rgba(30,144,255,.55);
--acb-col-1d2a2395: rgba(255,255,255,0.20);
--acb-col-21117f07: rgba(10, 15, 26, .55);
--acb-col-225b603a: rgba(37,99,235,.30);
--acb-col-22ea9230: rgba(0,0,0,.08);
--acb-col-2335c737: rgba(15, 23, 42, .78);
--acb-col-27ffacf8: rgba(91,140,255,.55);
--acb-col-28a8a5e9: rgba(255,91,106,.35);
--acb-col-294e1742: rgba(255,255,255,.45);
--acb-col-2d309039: rgba(239,68,68,.12);
--acb-col-2f12973a: rgba(245,158,11,.25);
--acb-col-348aaeea: rgba(255,255,255,.16);
--acb-col-3ae10c99: rgba(59,130,246,.20);
--acb-col-3f8801c5: #ffb6be;
--acb-col-400f30bf: rgba(91,140,255,.45);
--acb-col-406cfae4: rgba(10, 15, 26, .72);
--acb-col-4080ab91: rgba(255,255,255,.07);
--acb-col-40a8883b: rgba(255,255,255,.02);
--acb-col-423234bf: rgba(46,229,157,.25);
--acb-col-44c7dbf3: #ddd;
--acb-col-44e3e71e: rgba(46,229,157,.10);
--acb-col-4daea360: #991b1b;
--acb-col-4ddb50b7: rgba(0,0,0,.66);
--acb-col-4edc71c8: rgba(15, 23, 42, 0.85);
--acb-col-4ffd358f: rgba(16,185,129,.12);
--acb-col-50119378: rgba(255,255,255,.35);
--acb-col-505e86e5: rgba(0,0,0,.25);
--acb-col-53ad2d66: rgba(30,58,138,0.50);
--acb-col-5b06a995: rgba(255,255,255,0.85);
--acb-col-5dc5d8f4: #7f1d1d;
--acb-col-60809a99: rgba(59,130,246,.10);
--acb-col-616847d7: rgba(255,91,106,.14);
--acb-col-673401fc: rgba(16,185,129,.35);
--acb-col-70f07db3: rgba(0,0,0,.20);
--acb-col-7108ee7f: rgba(239,68,68,.14);
--acb-col-72654161: #fff;
--acb-col-746e4401: rgba(59,130,246,.25);
--acb-col-74b8da3c: rgba(0,0,0,.22);
--acb-col-7eaf1b49: rgba(96,165,250,0.28);
--acb-col-818e3b23: rgba(96,165,250,0.10);
--acb-col-8557c36b: #1e3a8a;
--acb-col-868aeeec: rgba(0,0,0,0.38);
--acb-col-88ac9d4b: rgba(59,130,246,.14);
--acb-col-8ad22920: #b91c1c;
--acb-col-8ba51cd4: rgba(255,255,255,.32);
--acb-col-8ff8047a: rgba(59,130,246,.65);
--acb-col-91ec7981: rgba(0,0,0,.55);
--acb-col-94619350: rgba(255,255,255,.28);
--acb-col-98845d06: rgba(255,91,106,.12);
--acb-col-9991351a: #ffd0d6;
--acb-col-9a3d2556: rgba(255,91,106,.10);
--acb-col-9c0ebe13: rgba(91,140,255,.08);
--acb-col-a181b002: rgba(91,140,255,.18);
--acb-col-a2d1fdd8: #020617;
--acb-col-a54e3c56: #1e293b;
--acb-col-a598862b: rgba(34,197,94,.14);
--acb-col-a75d4ab9: rgba(59,130,246,.16);
--acb-col-aaf9bd43: rgba(239,68,68,.35);
--acb-col-abf0660c: rgba(0,0,0,.28);
--acb-col-adc2ab4e: rgba(255,255,255,.88);
--acb-col-af720b27: rgba(30,58,138,0.55);
--acb-col-b035b76f: rgba(255,255,255,.80);
--acb-col-b16e068a: rgba(255,255,255,.04);
--acb-col-b6e4b1ab: rgba(255,255,255,.90);
--acb-col-b81d4dfd: rgba(255,91,106,.25);
--acb-col-b8e6afe5: rgba(255,255,255,.24);
--acb-col-ba091e55: rgba(37,99,235,.12);
--acb-col-c1d9cf29: rgba(255,255,255,.12);
--acb-col-c4812c7d: #111;
--acb-col-c6e53de0: rgba(59,130,246,.85);
--acb-col-c7c5f866: rgba(0,0,0,.12);
--acb-col-ca6d077e: rgba(255,255,255,.84);
--acb-col-caf39569: rgba(0,0,0,0);
--acb-col-cbe95d7a: rgba(239,68,68,.16);
--acb-col-d804efff: rgba(239,68,68,.25);
--acb-col-d8df46a5: rgba(15,15,18,.90);
--acb-col-d9fae496: rgba(15, 23, 42, .35);
--acb-col-df0c0981: rgba(255,255,255,.03);
--acb-col-e2704f20: rgba(255,255,255,.05);
--acb-col-e5cab81c: rgba(34,197,94,.25);
--acb-col-e708672a: rgba(255,255,255,.22);
--acb-col-e9743b04: rgba(0,0,0,.30);
--acb-col-e9a1abf9: rgba(245,158,11,.14);
--acb-col-ec3dbdb9: rgba(239,68,68,.28);
--acb-col-f1eed66e: rgba(91,140,255,.25);
--acb-col-f3b827a8: rgba(168,85,247,.65);
--acb-col-f61209fe: rgba(59,130,246,.55);
--acb-col-ff19f235: rgba(46,229,157,.95);
--acb-ex-bg1: var(--acb-col-0f1ec95c, #07101f);
--acb-ex-bg2: var(--acb-col-00b053d6, #050a14);
--acb-ex-glow1: var(--acb-col-a181b002, rgba(91,140,255,.18));
--acb-ex-glow2: var(--acb-col-44e3e71e, rgba(46,229,157,.10));
--acb-ex-glow3: var(--acb-col-9a3d2556, rgba(255,91,106,.10));
}
html[data-acb-theme="light"]{
--acb-bg: rgb(11, 18, 32);
--acb-surface: rgba(26, 26, 26, 0.06);
--acb-card: rgba(26, 26, 26, 0.08);
--acb-border: rgba(26, 26, 26, 0.1);
--acb-border-2: rgba(26, 26, 26, 0.14);
--acb-text: rgba(26, 26, 26, 0.92);
--acb-muted: rgba(26, 26, 26, 0.62);
--acb-primary: rgb(91, 140, 255);
--acb-primary-2: rgb(59, 108, 255);
--acb-danger: rgb(255, 91, 106);
--acb-success: rgb(46, 229, 157);
--acb-warning: rgb(255, 204, 102);
--acb-col-00b053d6: rgb(5, 10, 20);
--acb-col-01f5fe6a: rgba(242, 242, 242, 0.45);
--acb-col-04b94238: rgba(26, 26, 26, 0.55);
--acb-col-0764f9ba: rgba(26, 26, 26, 0.75);
--acb-col-07b4596e: rgba(59, 130, 246, 0.75);
--acb-col-0943a933: rgba(242, 242, 242, 0.35);
--acb-col-095959ea: rgba(255, 91, 106, 0.55);
--acb-col-09f570a9: rgba(26, 26, 26, 0.18);
--acb-col-0a759dab: rgba(96, 165, 250, 0.7);
--acb-col-0b90c74e: rgba(59, 130, 246, 0.22);
--acb-col-0bf0b344: rgba(168, 85, 247, 0.12);
--acb-col-0e2aae9e: rgba(242, 242, 242, 0.6);
--acb-col-0f1ec95c: rgb(7, 16, 31);
--acb-col-10165fa1: rgba(26, 26, 26, 0.3);
--acb-col-106b8e92: rgba(59, 130, 246, 0.18);
--acb-col-11a092d7: rgb(6, 95, 70);
--acb-col-13169777: rgba(30, 144, 255, 0.35);
--acb-col-1374e53e: rgba(26, 26, 26, 0.72);
--acb-col-1be95e3d: rgba(26, 26, 26, 0.15);
--acb-col-1d03f78c: rgba(30, 144, 255, 0.55);
--acb-col-1d2a2395: rgba(26, 26, 26, 0.2);
--acb-col-21117f07: rgba(10, 15, 26, 0.55);
--acb-col-225b603a: rgba(37, 99, 235, 0.3);
--acb-col-22ea9230: rgba(242, 242, 242, 0.08);
--acb-col-2335c737: rgba(15, 23, 42, 0.78);
--acb-col-27ffacf8: rgba(91, 140, 255, 0.55);
--acb-col-28a8a5e9: rgba(255, 91, 106, 0.35);
--acb-col-294e1742: rgba(26, 26, 26, 0.45);
--acb-col-2d309039: rgba(239, 68, 68, 0.12);
--acb-col-2f12973a: rgba(245, 158, 11, 0.25);
--acb-col-348aaeea: rgba(26, 26, 26, 0.16);
--acb-col-3ae10c99: rgba(59, 130, 246, 0.2);
--acb-col-3f8801c5: rgb(255, 25, 51);
--acb-col-400f30bf: rgba(91, 140, 255, 0.45);
--acb-col-406cfae4: rgba(10, 15, 26, 0.72);
--acb-col-4080ab91: rgba(26, 26, 26, 0.07);
--acb-col-40a8883b: rgba(26, 26, 26, 0.02);
--acb-col-423234bf: rgba(46, 229, 157, 0.25);
--acb-col-44c7dbf3: rgb(54, 54, 54);
--acb-col-44e3e71e: rgba(46, 229, 157, 0.1);
--acb-col-4daea360: rgb(153, 27, 27);
--acb-col-4ddb50b7: rgba(242, 242, 242, 0.66);
--acb-col-4edc71c8: rgba(15, 23, 42, 0.85);
--acb-col-4ffd358f: rgba(16, 185, 129, 0.12);
--acb-col-50119378: rgba(26, 26, 26, 0.35);
--acb-col-505e86e5: rgba(242, 242, 242, 0.25);
--acb-col-53ad2d66: rgba(30, 58, 138, 0.5);
--acb-col-5b06a995: rgba(26, 26, 26, 0.85);
--acb-col-5dc5d8f4: rgb(127, 29, 29);
--acb-col-60809a99: rgba(59, 130, 246, 0.1);
--acb-col-616847d7: rgba(255, 91, 106, 0.14);
--acb-col-673401fc: rgba(16, 185, 129, 0.35);
--acb-col-70f07db3: rgba(242, 242, 242, 0.2);
--acb-col-7108ee7f: rgba(239, 68, 68, 0.14);
--acb-col-72654161: rgb(26, 26, 26);
--acb-col-746e4401: rgba(59, 130, 246, 0.25);
--acb-col-74b8da3c: rgba(242, 242, 242, 0.22);
--acb-col-7eaf1b49: rgba(96, 165, 250, 0.28);
--acb-col-818e3b23: rgba(96, 165, 250, 0.1);
--acb-col-8557c36b: rgb(30, 58, 138);
--acb-col-868aeeec: rgba(242, 242, 242, 0.38);
--acb-col-88ac9d4b: rgba(59, 130, 246, 0.14);
--acb-col-8ad22920: rgb(185, 28, 28);
--acb-col-8ba51cd4: rgba(26, 26, 26, 0.32);
--acb-col-8ff8047a: rgba(59, 130, 246, 0.65);
--acb-col-91ec7981: rgba(242, 242, 242, 0.55);
--acb-col-94619350: rgba(26, 26, 26, 0.28);
--acb-col-98845d06: rgba(255, 91, 106, 0.12);
--acb-col-9991351a: rgb(255, 26, 55);
--acb-col-9a3d2556: rgba(255, 91, 106, 0.1);
--acb-col-9c0ebe13: rgba(91, 140, 255, 0.08);
--acb-col-a181b002: rgba(91, 140, 255, 0.18);
--acb-col-a2d1fdd8: rgb(2, 6, 23);
--acb-col-a54e3c56: rgb(30, 41, 59);
--acb-col-a598862b: rgba(34, 197, 94, 0.14);
--acb-col-a75d4ab9: rgba(59, 130, 246, 0.16);
--acb-col-aaf9bd43: rgba(239, 68, 68, 0.35);
--acb-col-abf0660c: rgba(242, 242, 242, 0.28);
--acb-col-adc2ab4e: rgba(26, 26, 26, 0.88);
--acb-col-af720b27: rgba(30, 58, 138, 0.55);
--acb-col-b035b76f: rgba(26, 26, 26, 0.8);
--acb-col-b16e068a: rgba(26, 26, 26, 0.04);
--acb-col-b6e4b1ab: rgba(26, 26, 26, 0.9);
--acb-col-b81d4dfd: rgba(255, 91, 106, 0.25);
--acb-col-b8e6afe5: rgba(26, 26, 26, 0.24);
--acb-col-ba091e55: rgba(37, 99, 235, 0.12);
--acb-col-c1d9cf29: rgba(26, 26, 26, 0.12);
--acb-col-c4812c7d: rgb(228, 228, 228);
--acb-col-c6e53de0: rgba(59, 130, 246, 0.85);
--acb-col-c7c5f866: rgba(242, 242, 242, 0.12);
--acb-col-ca6d077e: rgba(26, 26, 26, 0.84);
--acb-col-caf39569: rgba(242, 242, 242, 0);
--acb-col-cbe95d7a: rgba(239, 68, 68, 0.16);
--acb-col-d804efff: rgba(239, 68, 68, 0.25);
--acb-col-d8df46a5: rgba(226, 226, 231, 0.9);
--acb-col-d9fae496: rgba(15, 23, 42, 0.35);
--acb-col-df0c0981: rgba(26, 26, 26, 0.03);
--acb-col-e2704f20: rgba(26, 26, 26, 0.05);
--acb-col-e5cab81c: rgba(34, 197, 94, 0.25);
--acb-col-e708672a: rgba(26, 26, 26, 0.22);
--acb-col-e9743b04: rgba(242, 242, 242, 0.3);
--acb-col-e9a1abf9: rgba(245, 158, 11, 0.14);
--acb-col-ec3dbdb9: rgba(239, 68, 68, 0.28);
--acb-col-f1eed66e: rgba(91, 140, 255, 0.25);
--acb-col-f3b827a8: rgba(168, 85, 247, 0.65);
--acb-col-f61209fe: rgba(59, 130, 246, 0.55);
--acb-col-ff19f235: rgba(46, 229, 157, 0.95);
}
/* =========================================================
ACB Modals + Tables — ONE SOURCE OF TRUTH (CLEAN)
Put at VERY END of aldelta-ui.css
========================================================= */
/* ========== MODAL CORE ========== */
body.acb-modal-open{ overflow:hidden !important; }
.acb-modal-card{
position: fixed;
inset: 0;
z-index: 999999;
/* لا تستخدم display none */
display: block;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity .18s ease, visibility .18s ease;
}
.acb-modal-card.is-open{
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.acb-modal-card__backdrop{
position:absolute;
inset:0;
background: var(--acb-modal-backdrop);
backdrop-filter: blur(10px);
}
/* ✅ panel هو scroll container */
.acb-modal-card__panel{
position:absolute;
top:50%;
left:50%;
transform: translate(-50%,-50%);
width: min(920px, calc(100vw - 28px));
max-height: var(--acb-modal-max-h);
overflow: auto; /* ✅ scroll شغال */
-webkit-overflow-scrolling: touch;
border-radius: 22px;
background: var(--acb-modal-panel-bg);
border: 1px solid var(--acb-modal-panel-border);
box-shadow: var(--acb-modal-panel-shadow);
}
/* ✅ اخفاء شكل الاسكرول بار فقط (بدون تعطيل الاسكرول) */
.acb-modal-card__panel{
scrollbar-width: none; /* Firefox: يخفي البار */
}
.acb-modal-card__panel::-webkit-scrollbar{
width: 0;
height: 0;
}
/* inner card */
.acb-modal-card__panel > .acb-card{
margin:0;
border-radius: 22px;
background: transparent;
overflow: visible; /* ✅ متعملش hidden هنا */
}
/* header compact */
.acb-modal-card__panel .acb-card__head{
position: sticky;
top: 0;
z-index: 10;
padding: 10px 12px;
background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.05));
border-bottom: 1px solid rgba(255,255,255,.10);
backdrop-filter: blur(14px);
}
.acb-modal-card__panel .acb-card__head h2{ font-size: 15px; margin:0 !important; }
.acb-modal-card__panel .acb-card__head h3{ font-size: 14px; margin:0 !important; }
.acb-modal-card__panel .acb-card__body{ padding: 12px 12px; }
.acb-modal-card__panel .acb-btn{
height: 34px;
padding: 0 12px;
font-size: 12.5px;
border-radius: 999px;
}
/* ========== TABLES (GLASSY) ========== */
.acb-ui .acb-table-wrap,
.wrap.acb-ui table,
.wrap.acb-ui .widefat{
border-radius: var(--acb-radius);
overflow: hidden;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.04);
box-shadow: 0 14px 34px rgba(0,0,0,.25);
}
.acb-ui .acb-table-scroll{
overflow: auto;
-webkit-overflow-scrolling: touch;
max-width: 100%;
}
/* ✅ في المودال اخفي شكل البار فقط (والاسكرول شغال) */
.acb-modal-card .acb-table-scroll{
scrollbar-width: none;
-ms-overflow-style: none;
}
.acb-modal-card .acb-table-scroll::-webkit-scrollbar{
width: 0;
height: 0;
}
/* base table */
.acb-ui .acb-table,
.wrap.acb-ui table,
.wrap.acb-ui .widefat{
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: transparent;
}
/* sticky header */
.acb-ui .acb-table thead th,
.wrap.acb-ui table thead th,
.wrap.acb-ui .widefat thead th{
position: sticky;
top: 0;
z-index: 2;
background: rgba(255,255,255,.06);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255,255,255,.10);
padding: 14px 12px;
font-size: 12px;
font-weight: 800;
white-space: nowrap;
text-align: right;
color: var(--acb-text);
}
/* cells */
.acb-ui .acb-table tbody td,
.wrap.acb-ui table td,
.wrap.acb-ui .widefat td{
padding: 14px 12px;
border-bottom: 1px solid rgba(255,255,255,.06);
font-size: 13px;
font-weight: 700;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: right;
}
/* zebra + hover */
.acb-ui .acb-table tbody tr:nth-child(odd) td,
.wrap.acb-ui table tbody tr:nth-child(odd) td,
.wrap.acb-ui .widefat tbody tr:nth-child(odd) td{
background: rgba(255,255,255,.02);
}
.acb-ui .acb-table tbody tr:hover td,
.wrap.acb-ui table tbody tr:hover td,
.wrap.acb-ui .widefat tbody tr:hover td{
background: rgba(255,255,255,.05);
}
/* external dashboard direction override */
body.acb-ui--external.acb-route-dashboard .acb-table{ direction: ltr; }
body.acb-ui--external.acb-route-dashboard .acb-table th,
body.acb-ui--external.acb-route-dashboard .acb-table td{ text-align: right; }
/* =========================================================
ACB Inputs / Selects / Textarea — ONE SOURCE OF TRUTH
Scope: .acb-ui (Admin + External)
Replace ALL previous inputs/select/textarea blocks with this
========================================================= */
/* ---- (Optional) ensure vars exist (no color changes) ---- */
:root{
--acb-radius-sm: 14px;
--acb-focus: 0 0 0 4px rgba(91,140,255,.22), inset 0 1px 0 rgba(255,255,255,.06);
}
/* =========================
1) Base (Classed controls)
========================= */
.acb-ui .acb-input,
.acb-ui .acb-select,
.acb-ui .acb-textarea{
width: 100%;
border-radius: var(--acb-radius-sm);
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
color: var(--acb-text);
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.25);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
font-size: 14px;
font-weight: 600;
caret-color: var(--acb-text);
-webkit-text-fill-color: var(--acb-text);
}
/* heights */
.acb-ui .acb-input,
.acb-ui .acb-select{
height: 50px;
padding: 0 16px;
}
.acb-ui .acb-textarea{
min-height: 110px;
padding: 12px 16px;
resize: vertical;
}
/* placeholder */
.acb-ui .acb-input::placeholder,
.acb-ui .acb-textarea::placeholder{
color: rgba(255,255,255,.45);
font-weight: 500;
opacity: 1;
}
/* hover */
.acb-ui .acb-input:hover,
.acb-ui .acb-select:hover,
.acb-ui .acb-textarea:hover{
border-color: var(--acb-border-2);
}
/* focus */
.acb-ui .acb-input:focus,
.acb-ui .acb-select:focus,
.acb-ui .acb-textarea:focus{
border-color: rgba(91,140,255,.65);
background: linear-gradient(180deg, rgba(91,140,255,.14), rgba(255,255,255,.04));
box-shadow: var(--acb-focus);
}
/* disabled */
.acb-ui .acb-input:disabled,
.acb-ui .acb-select:disabled,
.acb-ui .acb-textarea:disabled{
opacity: .55;
cursor: not-allowed;
}
/* =========================
2) Native controls (NO class) داخل .acb-ui
========================= */
.acb-ui input:not(.acb-input),
.acb-ui select:not(.acb-select),
.acb-ui textarea:not(.acb-textarea){
width: 100%;
border-radius: var(--acb-radius-sm);
border: 1px solid rgba(255,255,255,.10);
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
color: var(--acb-text);
outline: none;
box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.25);
transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
font-size: 14px;
font-weight: 600;
caret-color: var(--acb-text);
-webkit-text-fill-color: var(--acb-text);
}
/* heights native */
.acb-ui input:not(.acb-input),
.acb-ui select:not(.acb-select){
height: 50px;
padding: 0 16px;
}
.acb-ui textarea:not(.acb-textarea){
min-height: 110px;
padding: 12px 16px;
resize: vertical;
}
/* placeholder native */
.acb-ui input:not(.acb-input)::placeholder,
.acb-ui textarea:not(.acb-textarea)::placeholder{
color: rgba(255,255,255,.45);
font-weight: 500;
opacity: 1;
}
/* focus native */
.acb-ui input:not(.acb-input):focus,
.acb-ui select:not(.acb-select):focus,
.acb-ui textarea:not(.acb-textarea):focus{
border-color: rgba(91,140,255,.65);
background: linear-gradient(180deg, rgba(91,140,255,.14), rgba(255,255,255,.04));
box-shadow: var(--acb-focus);
}
/* =========================
3) Select arrow (RTL friendly) — واحد فقط
========================= */
.acb-ui .acb-select,
.acb-ui select:not(.acb-select){
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* مساحة للسهم */
padding-inline-end: 46px;
/* سهم SVG هادي */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: 14px 50%;
background-size: 18px 18px;
}
/* options */
.acb-ui select option{
color: var(--acb-text);
background: var(--acb-bg);
}
/* =========================
4) Field errors (اختياري)
========================= */
.acb-ui .acb-field.is-error .acb-input,
.acb-ui .acb-field.is-error .acb-select,
.acb-ui .acb-field.is-error .acb-textarea,
.acb-ui .acb-field.is-error input:not(.acb-input),
.acb-ui .acb-field.is-error select:not(.acb-select),
.acb-ui .acb-field.is-error textarea:not(.acb-textarea){
border-color: var(--acb-danger);
box-shadow: 0 0 0 3px rgba(255,91,106,.22);
}
.acb-ui .acb-error{
margin-top: 6px;
font-size: 12px;
color: var(--acb-danger);
opacity: .95;
}
/* =========================
5) Labels
========================= */
.acb-ui label{
display: block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,.75);
}
.acb-ui label .req,
.acb-ui .acb-required{
color: var(--acb-danger);
margin-right: 4px;
}
/* =========================
6) Page-specific tweaks (keep)
========================= */
/* Reports period select alignment */
.acb-page-reports #acb_reports_period.acb-select{
padding-top: 0 !important;
padding-bottom: 0 !important;
display: flex !important;
align-items: center !important;
background-position: 14px 50% !important;
}
/* Bigger "Day select" */
.acb-page-bookings #acb_day_select{
width: 100%;
min-height: 48px;
height: 48px;
padding: 0 14px;
font-size: 16px;
line-height: 1.2;
}
/* wrapper that forces height */
.acb-page-bookings #acb_days .acb-select-wrap{
width: 100%;
min-height: 48px;
}
/* Front (لو عندك acb-ui--front) */
.acb-ui--front .acb-input,
.acb-ui--front .acb-select{
background: var(--acb-card);
border: 1px solid var(--acb-col-1be95e3d);
color: var(--acb-col-72654161);
}
.acb-ui--front label{
color: var(--acb-col-5b06a995);
}
/* ====== Buttons unified ====== */
.wrap.acb-ui .acb-btn,
.wrap.acb-ui .button,
.wrap.acb-ui button{
border-radius: 14px;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: var(--acb-text);
box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.wrap.acb-ui .acb-btn--primary,
.wrap.acb-ui .button.button-primary{
background: linear-gradient(180deg, rgba(91,140,255,.95), rgba(59,108,255,.9));
border-color: rgba(91,140,255,.55);
}
/* ====== Inputs unified ====== */
/* ===== Buttons (PRO / CALM) ===== */
.acb-ui .acb-actions{
display:flex;
gap: 10px;
flex-wrap:wrap;
margin-top: 12px;
}
/* Base */
.acb-ui .acb-btn{
display:inline-flex;
align-items:center;
justify-content:center;
gap: 8px;
white-space: nowrap;
padding: 10px 14px;
border-radius: 999px;
font-weight: 900;
font-size: 13px;
line-height: 1;
cursor:pointer;
user-select:none;
border: 1px solid var(--acb-border);
color: var(--acb-text);
background: linear-gradient(180deg, var(--acb-card), var(--acb-col-e2704f20));
box-shadow: 0 6px 16px rgba(0,0,0,.14);
transition: transform .08s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease;
}
.acb-ui .acb-btn:hover{
transform: translateY(-1px);
border-color: var(--acb-border-2);
box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
.acb-ui .acb-btn:active{
transform: translateY(0);
box-shadow: 0 6px 16px rgba(0,0,0,.16);
}
/* Focus (مهم للـ UX) */
.acb-ui .acb-btn:focus-visible{
outline: none;
box-shadow: 0 0 0 3px rgba(91,140,255,.18), 0 10px 22px rgba(0,0,0,.20);
border-color: rgba(91,140,255,.35);
}
/* Disabled */
.acb-ui .acb-btn:disabled,
.acb-ui .acb-btn.is-disabled{
opacity: .55;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
/* Primary (هادئ + محترم) */
.acb-ui .acb-btn--primary{
color: var(--acb-col-72654161);
border-color: rgba(91,140,255,.28);
background: linear-gradient(180deg, rgba(91,140,255,.90), rgba(59,108,255,.75));
box-shadow: 0 10px 22px rgba(91,140,255,.18), 0 6px 16px rgba(0,0,0,.18);
}
.acb-ui .acb-btn--primary:hover{
border-color: rgba(91,140,255,.38);
box-shadow: 0 14px 28px rgba(91,140,255,.22), 0 10px 22px rgba(0,0,0,.20);
}
/* Ghost (هادئ جدًا) */
.acb-ui .acb-btn--ghost{
background: rgba(255,255,255,.03);
border-color: var(--acb-border);
color: var(--acb-col-ca6d077e);
box-shadow: none;
}
.acb-ui .acb-btn--ghost:hover{
background: rgba(255,255,255,.06);
border-color: var(--acb-border-2);
box-shadow: 0 8px 18px rgba(0,0,0,.18);
}
/* Danger (بدون صريخ) */
.acb-ui .acb-btn--danger{
background: linear-gradient(180deg, rgba(255,91,106,.18), rgba(255,91,106,.10));
border-color: rgba(255,91,106,.28);
color: rgba(255,182,190,.95);
box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.acb-ui .acb-btn--danger:hover{
background: linear-gradient(180deg, rgba(255,91,106,.26), rgba(255,91,106,.14));
border-color: rgba(255,91,106,.38);
box-shadow: 0 10px 22px rgba(0,0,0,.20);
}
/* Block */
.acb-ui .acb-btn--block{
width:100%;
border-radius: var(--acb-radius-sm);
}
/* Small / Large (اختياري لو تحتاج) */
.acb-ui .acb-btn--sm{ padding: 8px 12px; font-size: 12px; }
.acb-ui .acb-btn--lg{ padding: 12px 16px; font-size: 14px; }
/* Icon size consistency (لو عندك svg جوه الزرار) */
.acb-ui .acb-btn svg{
width: 16px;
height: 16px;
flex: 0 0 16px;
}
/* Loading state (اختياري) */
.acb-ui .acb-btn.is-loading{
position: relative;
pointer-events: none;
opacity: .85;
}
.acb-ui .acb-btn.is-loading::after{
content:"";
width: 14px;
height: 14px;
border-radius: 50%;
border: 2px solid rgba(255,255,255,.28);
border-top-color: rgba(255,255,255,.72);
margin-inline-start: 8px;
animation: acbSpin .8s linear infinite;
}
@keyframes acbSpin{
to{ transform: rotate(360deg); }
}
/* =========================================================
Day / Time Pill (ONE DESIGN)
========================================================= */
#acb_days .acb-day-btn,
#acb_days_bar .acb-day-btn,
#acb_times .acb-time-btn,
#acb_times_list .acb-timepill{
box-sizing: border-box;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
padding: 10px 16px;
min-height: 38px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
white-space: nowrap;
cursor:pointer;
color: var(--acb-text);
border: 1px solid var(--acb-border);
background:
linear-gradient(180deg, var(--acb-card), var(--acb-col-e2704f20));
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
box-shadow:
inset 0 1px 0 var(--acb-col-e708672a),
0 6px 16px rgba(0,0,0,.14);
transition:
transform .12s ease,
box-shadow .15s ease,
border-color .15s ease,
background .15s ease;
}
/* Hover */
#acb_days .acb-day-btn:hover,
#acb_days_bar .acb-day-btn:hover,
#acb_times .acb-time-btn:hover,
#acb_times_list .acb-timepill:hover{
transform: translateY(-1px);
border-color: var(--acb-border-2);
box-shadow:
inset 0 1px 0 var(--acb-col-94619350),
0 10px 22px rgba(0,0,0,.20);
}
/* Active / Selected (supports BOTH states) */
#acb_days .acb-day-btn.is-active,
#acb_days .acb-day-btn.is-selected,
#acb_days_bar .acb-day-btn.is-active,
#acb_days_bar .acb-day-btn.is-selected,
#acb_times .acb-time-btn.is-active,
#acb_times .acb-time-btn.is-selected,
#acb_times_list .acb-timepill.is-active{
border-color: rgba(91,140,255,.45);
color: var(--acb-col-72654161);
background:
linear-gradient(180deg,
rgba(91,140,255,.22),
rgba(91,140,255,.10)
);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.35),
0 12px 26px rgba(91,140,255,.25);
}
/* =========================================================
Delete Time (calm & professional)
========================================================= */
.acb-ui #acb_times_list .acb-del-time{
display:inline-flex;
align-items:center;
justify-content:center;
width:18px;
height:18px;
border-radius: 6px;
border:1px solid rgba(255,91,106,.35);
background: rgba(255,91,106,.10);
color: rgba(255,182,190,.95);
font-size: 13px;
font-weight: 900;
line-height: 1;
cursor:pointer;
transition:
background .15s ease,
border-color .15s ease,
transform .08s ease;
}
.acb-ui #acb_times_list .acb-del-time:hover{
background: rgba(255,91,106,.18);
border-color: rgba(255,91,106,.45);
transform: scale(1.05);
}
/* =========================
Time Button (PRO / CALM) — scoped to front ONLY
(won’t fight admin pills)
========================= */
.acb-ui--front .acb-time-btn{
display:inline-flex;
align-items:center;
justify-content:center;
border: 1px solid var(--acb-border);
background: linear-gradient(180deg, var(--acb-card), var(--acb-col-e2704f20));
color: var(--acb-col-72654161);
border-radius: 12px;
padding: 8px 10px;
cursor:pointer;
font-size:13px;
font-weight:900;
transition: transform .12s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.acb-ui--front .acb-time-btn:hover{
transform: translateY(-1px);
border-color: var(--acb-border-2);
box-shadow: 0 10px 22px rgba(0,0,0,.18);
}
.acb-ui--front .acb-time-btn.is-selected{
background: linear-gradient(180deg, rgba(91,140,255,.22), rgba(91,140,255,.10));
border-color: rgba(91,140,255,.45);
box-shadow: 0 12px 26px rgba(91,140,255,.20);
}
/* =========================
Patients controls layout
========================= */
.acb-pat-controls{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
margin-bottom:10px;
flex-wrap:wrap;
}
.acb-pat-controls__filters{
display:flex;
gap:10px;
flex: 1 1 560px;
min-width: 260px;
}
.acb-pat-controls__filters #acb_pat_q{
flex: 1 1 auto;
min-width: 260px;
}
.acb-pat-controls__filters #acb_pat_date{
width: 180px;
min-width: 180px;
}
.acb-pat-controls__buttons{
display:flex;
gap:10px;
flex: 0 0 auto;
}
.acb-actions--exports{
margin-bottom:12px;
display:flex;
gap:10px;
flex-wrap:wrap;
align-items:center;
}
/* =======================================
External only: kill wp-admin button look
======================================= */
body.acb-ui--external button,
body.acb-ui--external input[type="button"],
body.acb-ui--external input[type="submit"],
body.acb-ui--external .button,
body.acb-ui--external .button-primary,
body.acb-ui--external .button-secondary{
box-sizing: border-box;
font-family: inherit;
}
/* ✅ ACB buttons (external only) */
body.acb-ui--external .acb-btn{
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 10px 14px;
border-radius: 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.92);
cursor: pointer;
user-select: none;
line-height: 1;
font-weight: 700;
text-decoration: none;
}
body.acb-ui--external .acb-btn:hover{
background: rgba(255,255,255,.12);
border-color: rgba(255,255,255,.20);
}
body.acb-ui--external .acb-btn:active{
transform: translateY(1px);
}
body.acb-ui--external .acb-btn:focus{
outline: none;
box-shadow: 0 0 0 3px rgba(91,140,255,.25);
}
/* variants */
body.acb-ui--external .acb-btn--primary{
background: rgba(91,140,255,.35);
border-color: rgba(91,140,255,.55);
}
body.acb-ui--external .acb-btn--ghost{
background: rgba(255,255,255,.05);
border-color: rgba(255,255,255,.12);
font-weight: 600;
}
body.acb-ui--external .acb-btn--icon{
padding-inline: 12px;
}
body.acb-ui--external .acb-btn__txt{
font-size: 13px;
font-weight: 700;
}
body.acb-ui--external .acb-ico{
width: 18px;
height: 18px;
display: block;
}
.acb-master__top--row{
display:flex;
align-items:center;
gap:10px;
flex-wrap: nowrap;
}
.acb-master__top--row .acb-input{
flex: 1 1 auto;
min-width: 160px;
}
.acb-dot-solid{
width:8px;height:8px;border-radius:50%;
display:inline-block;
background: rgba(255,255,255,.85);
box-shadow: 0 0 0 3px rgba(91,140,255,.18);
}
/* force svg icons to show inside wp-admin */
.wrap.acb-ui .acb-btn--icon{
display:inline-flex;
align-items:center;
gap:10px;
}
.wrap.acb-ui .acb-btn--icon svg.acb-ico{
width:18px;
height:18px;
display:block;
flex: 0 0 auto;
}
/* =========================================================
ACB Design System — "SumCard Look" (GLOBAL)
Scope: .wrap.acb-ui ONLY
========================================================= */
body.acb-ui--external{
--acb-side-top: 16px; /* نفس القيمة اللي السايدبار واقف عندها */
}
.wrap.acb-ui{
--acb-bg: #0b1220;
--acb-card: rgba(255,255,255,.06);
--acb-card-2: rgba(255,255,255,.08);
--acb-border: rgba(255,255,255,.10);
--acb-text: rgba(255,255,255,.92);
--acb-muted: rgba(255,255,255,.62);
--acb-primary: #5b8cff;
--acb-shadow: 0 18px 60px rgba(0,0,0,.35);
--acb-radius: 18px;
}
.wrap.acb-ui .acb-container{
max-width: 1100px;
margin: 0 auto;
}
/* ====== Card (one source of truth) ====== */
.wrap.acb-ui .acb-card,
.wrap.acb-ui .acb-sumCard,
.wrap.acb-ui .postbox,
.wrap.acb-ui .notice,
.wrap.acb-ui .stuffbox{
background: linear-gradient(180deg, var(--acb-card-2), var(--acb-card));
border: 1px solid var(--acb-border);
border-radius: var(--acb-radius);
box-shadow: var(--acb-shadow);
color: var(--acb-text);
backdrop-filter: blur(10px);
}
.wrap.acb-ui .acb-card__body,
.wrap.acb-ui .acb-card__head,
.wrap.acb-ui .acb-sumCard__body{
padding: 14px 16px;
}
.wrap.acb-ui .acb-card__head{
border-bottom: 1px solid rgba(255,255,255,.08);
}
/* ====== Header (same vibe as sum cards) ====== */
.wrap.acb-ui .acb-header,
.wrap.acb-ui .acb-pageHeader{
background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
border: 1px solid rgba(255,255,255,.10);
border-radius: calc(var(--acb-radius) + 6px);
box-shadow: var(--acb-shadow);
padding: 16px 18px;
margin-bottom: 14px;
}
.wrap.acb-ui .acb-header h1,
.wrap.acb-ui .acb-pageHeader h1{
margin: 0;
font-size: 20px;
letter-spacing: .2px;
color: var(--acb-text);
}
.wrap.acb-ui .acb-header p,
.wrap.acb-ui .acb-pageHeader p{
margin: 6px 0 0;
color: var(--acb-muted);
}
/* ====== Toolbar / Controls row ====== */
.wrap.acb-ui .acb-week-controls .acb-card__body,
.wrap.acb-ui .acb-toolbar{
display: flex;
align-items: center;
gap: 12px;
}
/* meta (date + refresh) left pinned */
.wrap.acb-ui .acb-week-controls__meta{
display: inline-flex;
align-items: center;
gap: 8px;
margin-inline-start: auto;
}
/* ===============================
Global Font – Aldelta Clinic
=============================== */
.acb-ui,
.acb-ui *{
font-family: 'Cairo', sans-serif !important;
box-sizing: inherit;
}
/* ===== Scope reset ===== */
.acb-ui{
direction: rtl;
text-align: right;
color: var(--acb-text);
box-sizing: border-box;
}
.acb-ui *::before,
.acb-ui *::after{
box-sizing: inherit;
}
.acb-ui a{
color: inherit;
text-decoration: none;
}
.acb-ui h1,
.acb-ui h2,
.acb-ui h3{
margin: 0;
font-weight: 800;
letter-spacing: 0;
}
.acb-ui h1{ color: var(--acb-text); }
.acb-ui h2{ color: var(--acb-text); }
.acb-ui h3{ color: var(--acb-col-0764f9ba); }
.acb-ui p{
margin: 6px 0 0;
color: var(--acb-muted);
}
.acb-ui .acb-muted{
color: var(--acb-muted);
}
.acb-ui.wrap{
margin-top: 16px;
}
/* KPI numbers */
.acb-ui .kpi,
.acb-ui [id^="kpi_"]{
font-variant-numeric: tabular-nums;
}
/* ===== Page container ===== */
.acb-ui .acb-container{
position: relative;
z-index: 1;
max-width: none;
margin: 0 auto;
padding: 18px 14px 28px;
}
/* ===== Background panel ===== */
.acb-ui .acb-container::before{
content:"";
position: fixed;
inset: 0;
z-index: 0;
pointer-events: none;
background:
radial-gradient(900px 450px at 85% 10%, var(--acb-col-a181b002), transparent 60%),
radial-gradient(800px 420px at 15% 25%, var(--acb-col-44e3e71e), transparent 55%),
radial-gradient(900px 520px at 50% 110%, var(--acb-col-9a3d2556), transparent 55%),
linear-gradient(
180deg,
var(--acb-col-0f1ec95c) 0%,
var(--acb-col-00b053d6) 100%
);
}
/* ===== Header ===== */
.acb-ui .acb-header{
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 12px;
margin: 6px 0 14px;
padding: 16px 18px;
border-radius: var(--acb-radius);
background: linear-gradient(180deg, var(--acb-card), var(--acb-col-e2704f20));
border: 1px solid var(--acb-border);
box-shadow: var(--acb-shadow-soft);
backdrop-filter: blur(10px);
}
.acb-ui .acb-header__title h1{
font-size: 20px;
font-weight: 950;
letter-spacing: .2px;
}
.acb-ui .acb-header__title p{
font-size: 12px;
line-height: 1.7;
max-width: 920px;
}
.acb-ui .acb-header__title .acb-muted{
opacity: .85;
max-width: 920px;
}
.acb-ui .acb-header__actions{
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}
/* ===== Grid ===== */
.acb-ui .acb-grid{
display: grid;
gap: 14px;
align-items: start;
}
.acb-ui .acb-grid--2{
grid-template-columns: 1fr 1fr;
align-items: start;
}
/* ===== Cards ===== */
.acb-ui .acb-card{
border-radius: var(--acb-radius);
background: linear-gradient(180deg, var(--acb-border), var(--acb-surface));
border: 1px solid var(--acb-border);
box-shadow: var(--acb-shadow);
backdrop-filter: blur(10px);
}
.acb-ui .acb-card__head{
padding: 14px 16px;
border-bottom: 1px solid var(--acb-border);
background: linear-gradient(180deg, var(--acb-card), var(--acb-col-40a8883b));
}
.acb-ui .acb-card__head h2{
font-size: 14px;
font-weight: 950;
display: flex;
align-items: center;
gap: 8px;
}
.acb-ui .acb-card__body{
padding: 16px 16px 18px;
}
/* ===== Forms (Better look — SAFE) ===== */
/* نفس اللي عندك + تحسينات خفيفة */
.acb-ui .acb-row{
display: grid;
grid-template-columns: 1fr;
gap: 12px;
margin-top: 12px;
}
.acb-ui .acb-form-grid{
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
margin-top: 12px;
}
.acb-ui .acb-form-grid .acb-field--wide{ grid-column: 1 / -1; }
/* field wrapper */
.acb-ui .acb-field{
margin: 0;
position: relative;
}
/* labels */
.acb-ui label{
display: block;
font-size: 12px;
font-weight: 900;
color: var(--acb-text);
margin: 2px 0 6px;
}
/* help text (اختياري لو عندك small أو .acb-help) */
.acb-ui .acb-help,
.acb-ui small{
display: block;
margin-top: 6px;
font-size: 12px;
color: var(--acb-muted);
opacity: .9;
}
/* =========================================================
Unified Days & Times – Modern Calm (MERGED)
========================================================= */
/* Containers */
.acb-ui #acb_days_bar,
.acb-ui #acb_times_list,
#acb_days,
#acb_times{
display:flex;
flex-wrap:wrap;
gap:8px;
align-items:center;
}
/* =========================================================
Badges (calm)
========================================================= */
.acb-ui .acb-badge{
display:inline-flex;
align-items:center;
gap:6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 900;
border: 1px solid var(--acb-border);
background:
linear-gradient(180deg, var(--acb-surface), var(--acb-col-e2704f20));
color: var(--acb-text);
}
.acb-ui .acb-badge--ok{
border-color: rgba(46,229,157,.35);
background:
linear-gradient(180deg,
rgba(46,229,157,.16),
rgba(46,229,157,.08)
);
color: rgba(46,229,157,.95);
}
/* =========================================================
Alerts (professional & quiet)
========================================================= */
.acb-ui .acb-alert{
padding: 12px 14px;
border-radius: var(--acb-radius-sm);
border: 1px solid var(--acb-border);
margin-top: 10px;
font-weight: 900;
font-size: 13px;
background:
linear-gradient(180deg, var(--acb-surface), var(--acb-col-e2704f20));
color: var(--acb-col-adc2ab4e);
box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
.acb-ui .acb-alert--info{
border-color: rgba(91,140,255,.35);
background:
linear-gradient(180deg,
rgba(91,140,255,.14),
rgba(91,140,255,.08)
);
}
.acb-ui .acb-alert--ok{
border-color: rgba(46,229,157,.35);
background:
linear-gradient(180deg,
rgba(46,229,157,.14),
rgba(46,229,157,.08)
);
}
.acb-ui .acb-alert--bad{
border-color: rgba(255,91,106,.35);
background:
linear-gradient(180deg,
rgba(255,91,106,.16),
rgba(255,91,106,.08)
);
}
/* ===== Utility ===== */
.acb-ui .acb-hide{ display:none !important; }
.acb-ui .acb-sep{
height: 1px;
background: var(--acb-border);
margin: 12px 0;
}
/* =========================
Front-end Booking Fix (CLEAN / SAFE SCOPE)
========================= */
.acb-ui--front{
background:
radial-gradient(1200px 500px at 50% -200px,
var(--acb-col-a54e3c56) 0%,
var(--acb-col-a2d1fdd8) 60%
);
padding: 60px 0;
}
/* keep front container centered */
.acb-ui--front .acb-container{
max-width: 920px;
margin: 0 auto;
}
/* main card */
.acb-ui--front .acb-card{
background: var(--acb-col-4edc71c8);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
border-radius: 16px;
}
/* hide admin header if any */
.acb-ui--front .acb-header{ display:none !important; }
/* ===== Booking UI Addons ===== */
.acb-ui--front .acb-hr{
height:1px;
background: var(--acb-card);
margin:18px 0;
}
.acb-ui--front .acb-h3{
margin:0 0 10px;
font-size:15px;
}
/* grid of days */
.acb-ui--front .acb-avail{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap:12px;
}
/* day card */
.acb-ui--front .acb-daycard{
border-radius:14px;
background: var(--acb-surface);
border: 1px solid var(--acb-border);
padding:12px;
}
.acb-ui--front .acb-daycard__top{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:10px;
}
.acb-ui--front .acb-daycard__date{ font-weight:800; font-size:14px; }
.acb-ui--front .acb-daycard__day{ opacity:.8; font-size:13px; }
.acb-ui--front .acb-daycard__times{
display:flex;
flex-wrap:wrap;
gap:8px;
}
/* =========================
suggest dropdown — themable & safe
========================= */
.acb-ui--front .acb-suggest{
position:absolute;
inset-inline:0;
top:calc(100% + 6px);
z-index:9999;
border-radius:12px;
overflow:hidden;
background: color-mix(in srgb, var(--acb-bg) 82%, transparent);
border:1px solid var(--acb-border);
box-shadow: 0 18px 40px rgba(0,0,0,.25);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
.acb-ui--front .acb-suggest__item{
padding:10px 12px;
cursor:pointer;
border-bottom:1px solid var(--acb-col-4080ab91);
}
.acb-ui--front .acb-suggest__item:last-child{ border-bottom:0; }
.acb-ui--front .acb-suggest__item:hover{ background: var(--acb-surface); }
.acb-ui--front .acb-suggest__title{ font-weight:800; font-size:13px; color: var(--acb-text); }
.acb-ui--front .acb-suggest__sub{ opacity:.75; font-size:12px; margin-top:2px; color: var(--acb-muted); }
.acb-ui--front .acb-suggest.acb-hide{ display:none; }
/* =========================
Performance Page (ONE SOURCE)
========================= */
/* دعم الاتنين: class على الـ body أو slug page */
.acb-page-performance .acb-container,
.page-aldelta-clinic-performance .acb-container{
max-width: 1400px;
padding: 22px 18px;
}
.acb-page-performance .acb-card,
.page-aldelta-clinic-performance .acb-card{
margin-bottom: 18px;
transition: transform .18s ease, box-shadow .18s ease;
animation: acbFadeUp .35s ease both;
}
.acb-page-performance .acb-grid,
.page-aldelta-clinic-performance .acb-grid{
gap: 16px !important;
}
@keyframes acbFadeUp{
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.acb-page-performance .acb-card:hover,
.page-aldelta-clinic-performance .acb-card:hover{
transform: translateY(-2px);
box-shadow: 0 16px 50px var(--acb-col-505e86e5);
}
/* =========================
Charts (shared look)
========================= */
/* simple chart */
.acb-chart{
border-radius: 18px;
padding: 14px;
background: var(--acb-col-b16e068a);
border: 1px solid var(--acb-card);
}
.acb-chart__title{ font-weight: 900; margin-bottom: 12px; opacity: .9; }
.acb-chart__bars{ display: grid; gap: 10px; }
.acb-bar{ display: grid; grid-template-columns: 90px 1fr 50px; align-items: center; gap: 10px; }
.acb-bar__label{ font-weight: 700; opacity: .9; font-size: 13px; }
.acb-bar__track{ height: 10px; border-radius: 999px; background: var(--acb-card); overflow: hidden; }
.acb-bar__fill{ height: 100%; width: 0%; border-radius: 999px; background: var(--acb-col-07b4596e); transition: width .6s ease; }
.acb-bar__value{ text-align: left; font-weight: 900; opacity: .9; }
/* days chart (different DOM -> keep) */
#days_chart{ width:100%; }
#days_chart .acb-bars{ display:flex; flex-direction:column; gap:10px; }
#days_chart .acb-bar-row{
display:grid;
grid-template-columns: 140px 1fr 60px;
gap:12px;
align-items:center;
padding:8px 10px;
border-radius:14px;
background: var(--acb-col-b16e068a);
border: 1px solid var(--acb-card);
}
#days_chart .acb-bar-label{
font-weight:800;
opacity:.9;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
#days_chart .acb-bar-track{
height:12px;
border-radius:999px;
background: var(--acb-card);
border: 1px solid var(--acb-border);
overflow:hidden;
}
#days_chart .acb-bar-fill{
height:100%;
border-radius:999px;
background: var(--acb-col-8ff8047a);
box-shadow: 0 6px 18px var(--acb-col-0b90c74e);
}
#days_chart .acb-bar-value{ font-weight:900; text-align:left; }
/* =========================
Master Layout
========================= */
.acb-master{ display:flex; gap:14px; flex-direction: row-reverse; }
.acb-master__left{ flex: 1 1 auto; min-width:0; }
.acb-master__right{ width:180px; flex:0 0 180px; border-left:1px solid var(--acb-card); padding-left:12px; }
.acb-master__top{ display:flex; gap:10px; align-items:center; margin-bottom:10px; }
.acb-master__list{ max-height: calc(100vh - 260px); overflow:auto; padding-right:6px; }
.acb-filter__head{ font-weight:900; margin-bottom:10px; color:var(--acb-col-72654161) !important; }
.acb-day{ margin-bottom:12px; }
.acb-day__btn{
width:100%;
text-align:right;
padding:10px 12px;
border-radius:14px;
background: var(--acb-col-b16e068a);
border:1px solid var(--acb-card);
cursor:pointer;
font-weight:900;
color:var(--acb-col-72654161) !important;
}
.acb-day__ranges{ display:grid; gap:6px; margin-top:8px; }
.acb-range__btn{
width:100%;
text-align:right;
padding:7px 10px;
border-radius:12px;
background: var(--acb-col-40a8883b);
border:1px solid var(--acb-card);
cursor:pointer;
font-size:12px;
opacity:.9;
}
.acb-day__btn.is-active,
.acb-range__btn.is-active{
outline:2px solid var(--acb-col-e708672a);
}
.acb-mini{
padding:10px 12px;
border-radius:14px;
background: var(--acb-col-df0c0981);
border:1px solid var(--acb-card);
margin-bottom:8px;
}
/* السطر العلوي: الاسم + الساعة */
.acb-mini__row{
font-size:13px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
font-weight:800;
}
.acb-mini__name{
flex:1;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.acb-mini__time{
font-size:12px;
font-weight:700;
color: var(--acb-primary);
white-space:nowrap;
}
/* التفاصيل */
.acb-mini__meta{
margin-top:6px;
font-size:11px;
opacity:.9;
display:grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap:4px 10px;
}
.acb-mini__meta span{
display:flex;
align-items:center;
gap:4px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
/* ===== Appointments filters inline ===== */
.acb-row.acb-row--4{
display: flex !important;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap; /* مهم للموبايل */
}
.acb-row.acb-row--4 .acb-field{
flex: 0 0 auto !important;
min-width: 180px;
}
.acb-row.acb-row--4 .acb-field:last-child{
min-width: auto;
}
#acb_filter{
height: 38px;
padding: 0 18px;
}
/* =========================
Reports (ONE SOURCE OF TRUTH)
========================= */
.acb-page-reports .acb-controls{
display: flex;
flex-direction: column;
gap: 18px;
width: 100% !important;
}
.acb-page-reports .acb-controls__row1{ width:100%; }
.acb-page-reports .acb-controls__row1 .acb-input{ width:100%; min-width:0 !important; }
.acb-page-reports .acb-controls__row2{
display: flex;
align-items: center;
width: 100%;
gap: 22px;
flex-wrap: wrap;
}
.acb-page-reports .acb-inline{
display:flex;
align-items:center;
gap:10px;
flex-wrap: wrap;
white-space: normal !important;
min-width:0;
}
.acb-page-reports .acb-inline-label{
font-weight: 950;
color: var(--acb-text);
}
.acb-page-reports .acb-inline-sub{
font-weight: 900;
color: var(--acb-col-1374e53e);
}
.acb-page-reports #acb_reports_period,
.acb-page-reports .acb-date-input{
height: 44px;
line-height: 44px;
}
.acb-page-reports .acb-date-input{ width:190px; min-width:0; }
.acb-page-reports #acb_reports_period{ width:160px; min-width:0; }
.acb-page-reports .acb-controls__row3{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
width:100%;
}
/* =========================
Patients panel card UI
========================= */
.acb-profile{
border:1px solid var(--acb-card);
background: var(--acb-col-df0c0981);
border-radius: 18px;
padding: 14px;
}
.acb-big{ font-size: 16px; letter-spacing: .5px; }
.acb-profile__head{
display:flex;
gap:12px;
align-items:center;
justify-content:space-between;
margin-bottom: 12px;
}
.acb-profile__avatar{
width:44px;height:44px;
border-radius: 14px;
display:grid;place-items:center;
background: var(--acb-surface);
border:1px solid var(--acb-card);
flex:0 0 auto;
}
.acb-profile__meta{flex:1 1 auto; min-width: 0;}
.acb-profile__name{
font-weight: 900;
font-size: 16px;
line-height: 1.2;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.acb-profile__sub{
opacity:.85;
font-size: 12px;
display:flex;
align-items:center;
gap:6px;
}
.acb-profile__badges{ display:flex; gap:8px; flex:0 0 auto; }
.acb-profile__grid{
display:grid;
grid-template-columns: 1fr 1fr;
gap:10px;
}
.acb-kv{
border:1px solid var(--acb-surface);
background: var(--acb-col-c7c5f866);
border-radius: 14px;
padding: 10px 12px;
display:flex;
flex-direction:column;
gap:4px;
}
.acb-kv span{ font-size: 11px; opacity:.75; }
.acb-kv b{ font-size: 13px; font-weight: 900; }
.acb-kv--wide{ grid-column: 1 / -1; }
.acb-notes{ opacity:.9; font-weight: 700; line-height: 1.5; }
/* Pills */
.acb-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 900;
border:1px solid var(--acb-border);
background: var(--acb-surface);
}
.acb-pill--ok{ background: var(--acb-col-a598862b); border-color: var(--acb-col-e5cab81c); }
.acb-pill--warn{ background: var(--acb-col-e9a1abf9); border-color: var(--acb-col-2f12973a); }
.acb-pill--bad{ background: var(--acb-col-7108ee7f); border-color: var(--acb-col-d804efff); }
.acb-pill--info{ background: var(--acb-col-88ac9d4b); border-color: var(--acb-col-746e4401); }
.acb-statusline{display:flex; gap:8px; align-items:center;}
.acb-card--tight .acb-card__body{padding: 10px 12px;}
.acb-card__head--row{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
}
/* ==============================
Suggest dropdown — SAFE (Admin + Public)
============================== */
/* خلي الفيلد مرجع للـ absolute dropdown */
.acb-ui .acb-field,
.aldelta-booking .acb-field{
position: relative;
overflow: visible !important;
}
/* افتح القصّ في صفحة العميل بس */
.aldelta-booking,
.aldelta-booking .acb-card,
.aldelta-booking .acb-card__body,
.aldelta-booking .elementor-widget-container,
.aldelta-booking .wpb_wrapper{
overflow: visible !important;
}
/* أي wrappers كانت بتقص القائمة */
.acb-cardLite,
.acb-cardLite--inner,
.acb-cardLite--container{
overflow: visible !important;
}
/* Utility (one source) */
.acb-hide{ display:none !important; }
/* ==============================
Patient Suggest (FINAL)
============================== */
#acb_patient_suggest{
position: absolute !important;
inset-inline: 0;
top: calc(100% + 6px);
z-index: 999999 !important;
background: var(--acb-bg);
border: 1px solid var(--acb-col-c1d9cf29);
border-radius: 14px;
box-shadow: 0 20px 50px var(--acb-col-01f5fe6a);
max-height: 260px;
overflow-y: auto;
padding: 6px;
}
#acb_patient_suggest .acb-suggest__item{
padding: 10px 12px;
border-radius: 10px;
cursor: pointer;
font-size: 13px;
font-weight: 800;
color: var(--acb-col-72654161);
transition: background .15s ease, transform .05s ease;
}
#acb_patient_suggest .acb-suggest__item:hover{
background: var(--acb-col-a181b002);
}
#acb_patient_suggest .acb-suggest__title{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* =========================
Reports small alignment
========================= */
.acb-page-reports .acb-actions--exports{
display:flex;
align-items:center;
}
.acb-page-reports #acb_reports_range{
display:inline-flex;
align-items:center;
margin-right:auto;
}
/* =========================
Booking / Patients message (ONE SOURCE)
========================= */
#acb_msg{
padding: 14px 16px;
border-radius: 16px;
font-weight: 800;
line-height: 1.6;
margin-top: 14px;
display: flex;
align-items: center;
gap: 12px;
background: var(--acb-col-50119378);
border: 1px solid var(--acb-col-22ea9230);
}
/* Base icon */
#acb_msg::before{
content: "";
width: 22px;
height: 22px;
flex: 0 0 22px;
background-repeat: no-repeat;
background-size: contain;
}
/* ✅ Success */
#acb_msg.acb-alert--ok{
background: var(--acb-col-4ffd358f);
border-color: var(--acb-col-673401fc);
color: var(--acb-col-11a092d7);
}
#acb_msg.acb-alert--ok::before{
background-image: url("data:image/svg+xml;utf8,\
");
}
/* ❌ Error */
#acb_msg.acb-alert--bad{
background: var(--acb-col-2d309039);
border-color: var(--acb-col-aaf9bd43);
color: var(--acb-col-5dc5d8f4);
}
#acb_msg.acb-alert--bad::before{
background-image: url("data:image/svg+xml;utf8,\
");
}
/* ℹ️ Info */
#acb_msg.acb-alert--info{
background: var(--acb-col-ba091e55);
border-color: var(--acb-col-225b603a);
color: var(--acb-col-8557c36b);
}
#acb_msg.acb-alert--info::before{
background-image: url("data:image/svg+xml;utf8,\
");
}
/* =========================
Bookings page — grid only
========================= */
.acb-page-bookings .acb-grid--2{
display: grid;
grid-template-columns: 1.15fr .85fr;
gap: 14px;
align-items: start;
}
/* =========================
Weekly page — controls spacing
========================= */
.acb-page-weekly .acb-week-controls{ margin-top: 14px; }
.acb-page-weekly .acb-week-controls__body{
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
/* يخلي range يزق الأزرار */
.acb-page-weekly #acb_week_range{ margin-right: auto; }
/* Weekly container spacing */
.acb-page-weekly .acb-week-card{ margin-top: 14px; }
/* =========================
Clinics page — layout only (dedup)
========================= */
.acb-page-clinics .acb-clinics-grid{ margin-top: 14px; }
.acb-page-clinics .acb-clinics-card{ align-self: start; }
/* Clinics page: force vertical layout (بدل 3 قواعد مكررة) */
.acb-page-clinics .acb-grid--2{
grid-template-columns: 1fr !important;
}
/* =========================
Common link style
========================= */
.acb-ui .acb-link{
all: unset;
cursor: pointer;
color: var(--acb-text);
font-weight: 900;
}
.acb-ui .acb-link:hover{ text-decoration: underline; }
/* =========================
Doctors Page — spacing fix (THEMABLE, scoped)
========================= */
.acb-page-doctors .acb-doctors-card{ margin-top: 14px; }
.acb-page-doctors #acb_schedule_builder_wrap .acb-card{ margin-top: 12px; }
.acb-page-doctors #acb_schedule_builder_wrap .acb-card__head{ padding: 12px 14px; }
.acb-page-doctors #acb_schedule_builder_wrap .acb-card__body{ padding: 12px 14px 14px; }
.acb-page-doctors .acb-schedule__section{
border: 1px solid var(--acb-border);
border-radius: 16px;
background: var(--acb-surface);
overflow: hidden;
}
.acb-page-doctors .acb-schedule__head{
padding: 10px 12px;
font-weight: 950;
font-size: 12px;
border-bottom: 1px solid var(--acb-border);
}
.acb-page-doctors .acb-schedule__body{ padding: 12px; }
.acb-page-doctors .acb-schedule__body .acb-row{ margin-top: 10px; }
.acb-page-doctors .acb-schedule__body .acb-row:first-child{ margin-top: 0; }
.acb-page-doctors #acb_days_bar,
.acb-page-doctors #acb_times_list,
.acb-page-doctors #acb_dates_list{ gap: 8px; }
.acb-page-doctors #acb_times_list{ margin-bottom: 10px; }
.acb-page-doctors .acb-timebar{ align-items: end; }
.acb-page-doctors .acb-timebar .acb-field label{ margin-bottom: 6px; }
.acb-page-doctors .acb-time-legacy{ display: none !important; }
.acb-page-doctors #acb_schedule_type{ margin-bottom: 12px; }
.acb-page-doctors #acb_days_bar{ margin-top: 8px; }
.acb-page-doctors .acb-schedule{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
align-items: start;
}
.acb-page-doctors #acb_weekly_controls{ margin-top: 10px; }
.acb-page-doctors #acb_days_bar{ margin-bottom: 14px; }
/* =========================
Performance Page (THEMABLE, scoped)
========================= */
.acb-page-performance .acb-perf-card{ margin-top: 14px; }
.acb-page-performance .acb-perf-grid{ margin-top: 14px; }
.acb-page-performance .acb-perf-controls{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.acb-page-performance .acb-perf-controls__filters{
display:flex;
gap:10px;
flex: 1 1 720px;
min-width: 260px;
align-items:center;
flex-wrap:wrap;
}
.acb-page-performance .acb-perf-controls__buttons{ display:flex; gap:10px; flex:0 0 auto; }
/* KPI grid */
.acb-page-performance .acb-kpi-grid{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.acb-page-performance .acb-kpi{
border: 1px solid var(--acb-card);
background: var(--acb-col-df0c0981);
border-radius: 18px;
padding: 14px;
min-width: 0;
}
.acb-page-performance .acb-kpi--wide{ grid-column: 1 / -1; }
.acb-page-performance .acb-kpi__label{ font-weight: 900; opacity: .85; font-size: 12px; }
.acb-page-performance .acb-kpi__value{ font-size: 28px; font-weight: 950; margin-top: 6px; }
.acb-page-performance .acb-kpi__sub{ margin-top: 4px; font-size: 12px; }
.acb-page-performance .acb-kpi__row{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
margin-top: 10px;
}
.acb-page-performance .acb-kpi__miniLabel{ font-weight:900; opacity:.8; font-size:12px; }
.acb-page-performance .acb-kpi__miniValue{ font-weight:950; margin-top:4px; }
.acb-page-performance .acb-kpi__miniSub{ font-size:12px; margin-top:2px; }
/* Donuts */
.acb-page-performance .acb-perf-donuts{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.acb-page-performance .acb-donutCard{
border: 1px solid var(--acb-card);
background: var(--acb-col-df0c0981);
border-radius: 18px;
padding: 14px;
}
.acb-page-performance .acb-donutCard__title{ font-weight: 950; margin-bottom: 10px; }
.acb-page-performance .acb-donut{
width: 100%;
max-width: 280px;
aspect-ratio: 1 / 1;
margin: 0 auto;
border-radius: 999px;
border: 1px solid var(--acb-border);
background: var(--acb-surface);
display:grid;
place-items:center;
position: relative;
overflow: hidden;
}
.acb-page-performance .acb-donut__center{
position:absolute;
inset: 18%;
border-radius: 999px;
background: color-mix(in srgb, var(--acb-bg) 80%, transparent);
border: 1px solid var(--acb-border);
display:grid;
place-items:center;
text-align:center;
padding: 10px;
}
.acb-page-performance .acb-donut__big{ font-weight: 950; font-size: 18px; }
.acb-page-performance .acb-donut__small{ font-size: 12px; opacity:.8; margin-top:2px; }
.acb-page-performance .acb-donutLegend{
display:flex;
gap:10px;
justify-content:center;
flex-wrap:wrap;
margin-top: 10px;
}
.acb-page-performance .acb-leg{
display:flex;
gap:8px;
align-items:center;
padding: 6px 10px;
border-radius: 999px;
border: 1px solid var(--acb-border);
background: var(--acb-surface);
font-weight: 900;
font-size: 12px;
}
.acb-page-performance .acb-dot{
width: 10px; height: 10px;
border-radius: 999px;
background: var(--acb-col-8ff8047a);
}
/* Bars */
.acb-page-performance .acb-chartBox{
border: 1px solid var(--acb-card);
background: var(--acb-col-b16e068a);
border-radius: 18px;
padding: 12px;
min-height: 120px;
}
.acb-page-performance .acb-bars{ display:flex; flex-direction:column; gap:10px; }
.acb-page-performance .acb-barRow{
display:grid;
grid-template-columns: 140px 1fr 60px;
gap: 12px;
align-items:center;
}
.acb-page-performance .acb-barLabel{
font-weight: 900;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.acb-page-performance .acb-barTrack{
height: 12px;
border-radius: 999px;
background: var(--acb-card);
border: 1px solid var(--acb-border);
overflow:hidden;
}
.acb-page-performance .acb-barFill{
height:100%;
width:0%;
border-radius: 999px;
background: var(--acb-col-8ff8047a);
box-shadow: 0 8px 18px var(--acb-col-0b90c74e);
transition: width .6s ease;
}
.acb-page-performance .acb-barVal{ text-align:left; font-weight: 950; opacity:.9; }
.acb-page-performance .acb-splitCharts{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.acb-page-performance .acb-miniTitle{
font-weight: 950;
margin-bottom: 8px;
opacity: .9;
}
/* Force one-column helper (keep if used) */
.acb-ui .acb-grid--1{
display: grid;
grid-template-columns: 1fr !important;
gap: 14px;
}
/* ===========================
External override (NO conflict)
=========================== */
/* امنع container العام يبوّظ external */
body.acb-ui--external .acb-container{
padding: 0 !important;
margin: 0 !important;
max-width: 100% !important;
}
/* امنع خلفية ::before بتاعة admin من إنها تشتغل على external */body.acb-ui--external > .acb-container::before{
content: none !important;
}
/* =========================================================
External Shell + Sidebar — CLEAN (No duplicates)
Scope: body.acb-ui--external
========================================================= */
body.acb-ui--external{
margin: 0;
padding: 0;
direction: ltr;
background:
radial-gradient(900px 450px at 85% 10%, var(--acb-ex-glow1), transparent 60%),
radial-gradient(800px 420px at 15% 25%, var(--acb-ex-glow2), transparent 55%),
radial-gradient(900px 520px at 50% 110%, var(--acb-ex-glow3), transparent 55%),
linear-gradient(180deg, var(--acb-ex-bg1) 0%, var(--acb-ex-bg2) 100%);
min-height: 100vh;
}
body.acb-ui--external *,
body.acb-ui--external *::before,
body.acb-ui--external *::after{
box-sizing: border-box;
}
/* ===== Container ===== */
body.acb-ui--external > .acb-container{
max-width: none !important;
width: 100% !important;
margin: 0 !important;
padding: var(--acb-ex-pad) !important;
}
/* ===== Sidebar (Card style + sticky full height) ===== */
body.acb-ui--external main .wrap.acb-ui{
margin: 0 !important;
}
/* ===== Main fills rest ===== */
body.acb-ui--external main{
flex: 1 1 auto;
min-width: 0;
padding-top: 10px; /* شيك فوق */
}
/* ===== Logo / Title (card-ish blocks) ===== */
body.acb-ui--external .acb-side__logo{
background: var(--acb-surface, rgba(255,255,255,.06));
border: 1px solid var(--acb-border, rgba(255,255,255,.10));
border-radius: 14px;
padding: 12px;
display: flex;
align-items: center;
justify-content: center;
}
body.acb-ui--external .acb-side__logo img{
max-width: 160px;
height: auto;
}
body.acb-ui--external .acb-side__title{
background: var(--acb-surface, rgba(255,255,255,.06));
border: 1px solid var(--acb-border, rgba(255,255,255,.10));
border-radius: 14px;
padding: 10px 12px;
text-align: center;
font-weight: 800;
font-size: 13px;
margin: 0;
opacity: .95;
}
/* ===== Divider ===== */
body.acb-ui--external .acb-side__hr{
border: 0;
height: 1px;
margin: 10px 6px;
background: linear-gradient(to left,
rgba(255,255,255,0),
rgba(255,255,255,.20),
rgba(255,255,255,0)
);
}
/* ===== Welcome (fix: مرحبا والاسم جنب بعض) ===== */
body.acb-ui--external .acb-side__welcome{
padding: 10px 12px;
border-radius: 14px;
background: var(--acb-surface, rgba(255,255,255,.06));
border: 1px solid var(--acb-border, rgba(255,255,255,.10));
text-align: center;
display: flex;
flex-direction: column;
gap: 8px;
}
body.acb-ui--external .acb-side__welcome strong{
display: inline-block;
margin-right: 6px;
}
body.acb-ui--external .acb-side__datetime{
opacity: .9;
font-size: 13px;
line-height: 1.4;
}
/* ===== Menu (scroll area) ===== */
body.acb-ui--external .acb-side__menu{
flex: 1 1 auto;
overflow: auto;
padding: 6px 0;
padding-right: 6px; /* مساحة للسكرول */
display: flex;
flex-direction: column;
gap: 8px;
}
/* ===== Menu Item (button card) ===== */
body.acb-ui--external .acb-side__item{
display: flex;
align-items: center;
gap: 10px;
background: var(--acb-surface, rgba(255,255,255,.06));
border: 1px solid var(--acb-border, rgba(255,255,255,.10));
border-radius: 14px;
padding: 12px 12px;
font-weight: 900;
transition: transform .12s ease, border-color .12s ease, background .12s ease;
}
body.acb-ui--external .acb-side__item:hover{
transform: translateY(-1px);
border-color: var(--acb-border-2, rgba(255,255,255,.14));
}
body.acb-ui--external .acb-side__item.is-active{
background: linear-gradient(180deg, rgba(91,140,255,.18), rgba(91,140,255,.08));
border-color: rgba(91,140,255,.35);
box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
/* Icons */
body.acb-ui--external .acb-side__icon svg{
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: 2;
}
/* ===== Footer pinned ===== */
body.acb-ui--external .acb-side__footer{
margin-top: 6px;
padding-top: 10px;
}
body.acb-ui--external .acb-side__item.logout{
background: rgba(255,91,106,.10);
border-color: rgba(255,91,106,.25);
}
/* ===== Dashboard: فوق بعض ===== */
body.acb-ui--external.acb-route-dashboard .acb-grid--2{
grid-template-columns: 1fr !important;
}
/* =========================================
Smart Invisible Scrollbar (Sidebar)
Default: hidden
On hover: smooth glass style
========================================= */
/* Firefox */
.acb-ui--external .acb-side__menu{
scrollbar-width: none; /* مخفي افتراضي */
}
/* Firefox – يظهر عند hover */
.acb-ui--external .acb-side__menu:hover{
scrollbar-width: thin;
scrollbar-color: rgba(255,255,255,.28) transparent;
}
/* Chrome / Edge / Safari */
.acb-ui--external .acb-side__menu::-webkit-scrollbar{
width: 8px;
}
.acb-ui--external .acb-side__menu::-webkit-scrollbar-track{
background: transparent;
}
.acb-ui--external .acb-side__menu::-webkit-scrollbar-thumb{
background: transparent; /* مخفي */
border-radius: 999px;
transition: background .2s ease;
}
/* يظهر عند hover */
.acb-ui--external .acb-side__menu:hover::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.22);
}
/* hover أقوى */
.acb-ui--external .acb-side__menu:hover::-webkit-scrollbar-thumb:hover{
background: rgba(255,255,255,.35);
}
/* =========================================
External Sidebar (Desktop)
========================================= */
body.acb-ui--external .acb-side{
/* Size */
width: var(--acb-side-w);
flex: 0 0 var(--acb-side-w);
position: sticky;
top: var(--acb-side-top);
max-height: calc(100vh - (var(--acb-side-top) * 2));
overflow: hidden; /* عشان السكرول يبقى جوه المنيو */
display:flex;
flex-direction:column;
/* Card look (THEMEABLE) */
background: var(--acb-card, rgba(255,255,255,.08));
border: 1px solid var(--acb-border, rgba(255,255,255,.10));
box-shadow: var(--acb-shadow-soft, 0 10px 30px rgba(0,0,0,.25));
border-radius: 18px;
/* Layout */
padding: 14px;
flex-direction: column;
gap: 12px; /* مسافات أهدى */
}
/* =========================================
Sidebar Menu Scroll Area
========================================= */
body.acb-ui--external .acb-side__menu{
flex: 1 1 auto;
overflow-y: auto;
overflow-x: hidden;
}
.acb-ui--external .acb-side__welcome-row{
display: flex;
align-items: center;
justify-content: center;
gap: 6px; /* مسافة خفيفة بين مرحبا والاسم */
font-weight: 700;
}
.acb-ui--external .acb-side__hello{
opacity: .9;
}
.acb-ui--external .acb-side__name{
font-weight: 800;
}
/* =========================================
Sidebar System Time Card (match your design)
========================================= */
body.acb-ui--external .acb-side__sysTime{
padding: 10px 12px;
border-radius: 14px;
background: var(--acb-surface, rgba(255,255,255,.06));
border: 1px solid var(--acb-border, rgba(255,255,255,.10));
text-align: center;
box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
/* تاريخ */
body.acb-ui--external .acb-side__sysDate{
opacity: .88;
font-size: 12px;
font-weight: 800;
line-height: 1.35;
margin-bottom: 6px;
}
/* ساعة */
body.acb-ui--external .acb-side__sysClock{
font-size: 15px;
font-weight: 900;
letter-spacing: .2px;
line-height: 1.2;
display: inline-flex;
align-items: center;
gap: 8px;
}
/* dot نفس روح التصميم */
body.acb-ui--external .acb-side__sysClock::before{
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
opacity: .9;
box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
/* =========================================
Tight divider spacing before menu
(make the HR just a tiny gap)
========================================= */
/* الخط اللي قبل المنيو */
body.acb-ui--external .acb-side__hr.acb-side__hr--tight{
margin: 4px 6px !important; /* ✅ صغير جدًا فوق/تحت */
}
/* لو عندك HR عادي خليّه زي ما تحب */
body.acb-ui--external .acb-side__hr:not(.acb-side__hr--tight){
margin: 10px 6px;
}
/* =========================================
Optional: fine-tune sidebar gaps globally
(keeps look tight & clean)
========================================= */
/* خلي المسافات بين عناصر السايد هادية */
body.acb-ui--external .acb-side{
gap: 10px; /* بدل 12 لو حابب أضيق شوية */
}
/* المنيو يبدأ قريب من الـ HR */
body.acb-ui--external .acb-side__menu{
padding-top: 2px;
}
/* ===== Shell Layout (ONE SOURCE OF TRUTH) ===== */
body.acb-ui--external .acb-shell2{
width: 100%;
display: flex;
align-items: stretch;
min-height: calc(100vh - (var(--acb-ex-pad) * 2));
gap: var(--acb-ex-gap);
}
/* تحكم في الجاب الحقيقي بين main والسايدبار */
body.acb-ui--external .acb-shell2{
gap: 12px; /* عدّلها زي ما تحب */
}
/* ===============================
FIX: External Shell + Sidebar
Put at VERY END of file
=============================== */
:root{
--acb-ex-pad: 14px;
--acb-ex-gap: 12px;
--acb-side-w: 260px;
--acb-side-top: 14px;
}
/* =========================
GLOBAL (ALL SIZES)
========================= */
/* الغي أي reset بيقتل padding */
body.acb-ui--external > .acb-container{
max-width:none !important;
width:100%;
margin:0;
padding: var(--acb-ex-pad);
}
/* الـ shell لازم يبقى flex واضح + ترتيب RTL */
body.acb-ui--external .acb-shell2{
display: flex !important;
flex-direction: row-reverse !important; /* sidebar يمين */
align-items: stretch !important;
gap: var(--acb-ex-gap) !important;
min-height: calc(100vh - (var(--acb-ex-pad) * 2)) !important;
}
/* main ياخد باقي المساحة */
body.acb-ui--external main{
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Sticky FIX pack */
body.acb-ui--external .acb-container,
body.acb-ui--external .acb-shell2,
body.acb-ui--external main{
overflow: visible !important;
transform: none !important;
filter: none !important;
}
/* =========================
Sidebar Desktop (DEFAULT)
========================= */
body.acb-ui--external .acb-side{
width: var(--acb-side-w) !important;
flex: 0 0 var(--acb-side-w) !important;
position: sticky !important;
top: var(--acb-side-top) !important;
max-height: calc(100vh - (var(--acb-side-top) * 2)) !important;
overflow: hidden;
}
/* =========================
FINAL Z-INDEX FIX (GLOBAL)
========================= */
body.acb-ui--external,
body.acb-ui--external .acb-container,
body.acb-ui--external .acb-shell2,
body.acb-ui--external main{
position: relative;
z-index: auto;
filter: none !important;
opacity: 1 !important;
}
/* overlay (base) */
body.acb-ui--external .acb-oc-overlay{
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
z-index: 10000030 !important;
}
/* زر الفتح أعلى الكل (base) */
body.acb-ui--external .acb-oc-toggle{
position: fixed !important;
z-index: 10000 !important;
}
/* =========================================
DISABLE WOODMART UI INSIDE ACB PLUGIN (GLOBAL)
========================================= */
body.acb-ui--external .wd-toolbar,
body.acb-ui--external .wd-nav-mobile,
body.acb-ui--external .wd-header-mobile,
body.acb-ui--external .whb-mobile-nav,
body.acb-ui--external .woodmart-toolbar,
body.acb-ui--external .wd-bottom-toolbar,
body.acb-ui--external .woodmart-bottom-toolbar,
body.acb-ui--external .mobile-nav,
body.acb-ui--external .wd-mobile-nav{
display: none !important;
}
/* يلغي أي padding / margin بيضيفه وودمارت */
body.acb-ui--external{
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* =========================
Desktop: اخفاء زر المنيو
========================= */
@media (min-width: 901px){
body.acb-ui--external .acb-oc-toggle{ display:none !important; }
}
/* =========================
Mobile Off-canvas (ONLY)
========================= */
@media (max-width: 900px){
/* الغي قلب الـ flex على الموبايل */
body.acb-ui--external .acb-shell2{
flex-direction: row !important;
}
body.acb-ui--external.acb-oc-open .acb-oc-overlay{
opacity: 1;
pointer-events: auto;
}
/* السايدبار off-canvas */
body.acb-ui--external .acb-side{
position: fixed !important;
top: 12px;
right: 12px;
left: auto !important;
height: calc(100vh - 24px);
width: min(320px, 88vw);
transform: translateX(110%);
transition: transform .25s ease;
opacity: 1 !important;
filter: none !important;
z-index: 10000041 !important;
}
body.acb-ui--external.acb-oc-open .acb-side{
transform: translateX(0);
}
/* زر الفتح (CLEAN) */
body.acb-ui--external .acb-oc-toggle{
appearance: none;
-webkit-appearance: none;
border: 0;
padding: 0;
margin: 0;
font: inherit;
line-height: 1;
text-decoration: none;
outline: none;
cursor: pointer;
top: 14px;
right: 14px;
z-index: 1000010 !important;
width: 44px;
height: 44px;
border-radius: 999px;
display: grid;
place-items: center;
background: rgba(15, 23, 42, .55);
color: rgba(255,255,255,.92);
border: 1px solid rgba(255,255,255,.14);
box-shadow: 0 10px 26px rgba(0,0,0,.35);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body.acb-ui--external .acb-oc-toggle::before{
content: "☰";
font-size: 18px;
font-weight: 900;
transform: translateY(-1px);
}
body.acb-ui--external .acb-oc-toggle:active{
transform: scale(.95);
}
body.acb-ui--external.acb-oc-open .acb-oc-toggle{
background: rgba(59,130,246,.85);
border-color: rgba(59,130,246,.65);
}
}
@media (min-width: 901px){
body.acb-ui--external .acb-oc-overlay{
display: none !important;
}
}
/* =========================
FIX: Sidebar RTL Direction
========================= */
/* خلي السايدبار RTL حقيقي */
body.acb-ui--external .acb-side{
direction: ltr !important;
text-align: right !important;
}
/* عناصر المنيو */
body.acb-ui--external .acb-side a,
body.acb-ui--external .acb-side button,
body.acb-ui--external .acb-side .acb-menu-item{
direction: ltr;
text-align: right;
}
/* الأيقونة + النص */
body.acb-ui--external .acb-side .acb-menu-item,
body.acb-ui--external .acb-side a{
display: flex;
flex-direction: row-reverse; /* أيقونة يمين، نص شمالها */
justify-content: flex-start;
align-items: center;
gap: 12px;
}
/* تأكيد إن النص عربي صح */
body.acb-ui--external .acb-side span,
body.acb-ui--external .acb-side strong,
body.acb-ui--external .acb-side p{
direction: ltr;
text-align: right;
}
/* التاريخ والترحيب */
body.acb-ui--external .acb-side .acb-welcome,
body.acb-ui--external .acb-side .acb-user-box{
direction: ltr;
text-align: right;
}
body.acb-ui--external .acb-side__logo{
background: rgba(255,255,255,.28);
border: 1px solid rgba(255,255,255,.32);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
@media (max-width: 900px){
body.acb-ui--external .acb-container{
padding: 10px !important;
}
body.acb-ui--external main{
padding: 0 !important;
}
}
@media (max-width: 900px){
body.acb-ui--external .acb-oc-toggle{
width: 40px;
height: 40px;
background: rgba(15,23,42,.45);
box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
}
body.acb-ui--external.acb-scroll-down .acb-oc-toggle{
opacity: .6;
}
body.acb-ui--external > .acb-container{
padding: var(--acb-ex-pad, 14px) !important;
}
/* Dashboard: نفس مسافة باقي الصفحات بين الهيدر والمحتوى */
body.acb-ui--external.acb-route-dashboard .acb-header--sticky{
margin-bottom: 14px !important; /* زي باقي الصفحات */
}
body.acb-ui--external.acb-route-dashboard .acb-dashboard-grid{
margin-top: 14px !important;
}
/* Welcome card */
.acb-dash-welcome__name{
font-size: 22px;
font-weight: 900;
margin-bottom: 6px;
}
.acb-dash-welcome__meta{
display:flex;
align-items:center;
gap:8px;
color: var(--acb-muted);
}
.acb-dash-welcome__badge{
margin-top: 12px;
}
/* Analog clock */
.acb-analog{
width: 170px;
height: 170px;
margin: 0 auto;
position: relative;
border-radius: 999px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 12px 35px rgba(0,0,0,.25);
}
.acb-analog__face{
position:absolute;
inset: 10px;
border-radius: 999px;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.08), rgba(255,255,255,.02));
border: 1px solid rgba(255,255,255,.08);
}
/* hands */
.acb-analog__hand{
position:absolute;
left: 50%;
top: 50%;
transform-origin: 50% 100%;
transform: translate(-50%, -100%) rotate(0deg);
border-radius: 999px;
}
.acb-analog__hand--hour{
width: 6px;
height: 48px;
background: rgba(255,255,255,.85);
}
.acb-analog__hand--min{
width: 4px;
height: 64px;
background: rgba(255,255,255,.75);
}
.acb-analog__hand--sec{
width: 2px;
height: 74px;
background: rgba(91,140,255,.95);
}
.acb-analog__pin{
position:absolute;
left: 50%;
top: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
border-radius: 999px;
background: rgba(255,255,255,.9);
box-shadow: 0 0 0 3px rgba(91,140,255,.35);
}
/* ================================
ACB Login — Glass Pro
================================ */
body.acb-login{
min-height: 100vh;
display:flex;
align-items:center;
justify-content:center;
background: radial-gradient(1200px 600px at 80% 20%, rgba(91,140,255,.20), transparent 60%),
radial-gradient(900px 500px at 20% 80%, rgba(46,229,157,.14), transparent 60%),
linear-gradient(180deg, #070b12, #0b1220);
overflow:hidden;
}
.acb-login-bg{
position: fixed;
inset: -120px;
background:
radial-gradient(600px 320px at 70% 25%, rgba(91,140,255,.18), transparent 60%),
radial-gradient(520px 280px at 30% 75%, rgba(255,204,102,.10), transparent 60%);
filter: blur(10px);
opacity: .9;
pointer-events:none;
}
.acb-login-wrap{
width: min(520px, 92vw);
display:flex;
flex-direction:column;
gap: 14px;
position:relative;
z-index: 2;
}
.acb-login-brand{
display:flex;
align-items:center;
gap: 12px;
padding: 14px 16px;
border-radius: 18px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 18px 60px rgba(0,0,0,.28);
backdrop-filter: blur(10px);
}
.acb-login-logo{
width: 52px;
height: 52px;
object-fit: contain;
border-radius: 14px;
background: rgba(255,255,255,.05);
border: 1px solid rgba(255,255,255,.10);
padding: 6px;
}
.acb-login-brandTitle{
font-weight: 900;
font-size: 16px;
color: var(--acb-text, rgba(255,255,255,.92));
}
.acb-login-brandSub{
font-size: 12px;
color: var(--acb-muted, rgba(255,255,255,.62));
margin-top: 2px;
}
.acb-login-card{
padding: 16px;
border-radius: 22px;
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 22px 70px rgba(0,0,0,.34);
backdrop-filter: blur(12px);
}
.acb-login-head{
display:flex;
gap: 12px;
align-items:center;
margin-bottom: 10px;
}
.acb-login-icon{
width: 46px;
height: 46px;
border-radius: 16px;
display:grid;
place-items:center;
background: rgba(91,140,255,.18);
border: 1px solid rgba(91,140,255,.25);
font-size: 20px;
}
.acb-login-title{
margin:0;
font-size: 18px;
font-weight: 900;
}
.acb-login-sub{
margin: 4px 0 0;
font-size: 12px;
color: var(--acb-muted, rgba(255,255,255,.62));
}
.acb-login-form .acb-field{ margin-top: 12px; }
.acb-login-input{
position: relative;
}
.acb-login-inputIcon{
position:absolute;
inset-inline-start: 12px;
top: 50%;
transform: translateY(-50%);
opacity: .75;
pointer-events:none;
}
.acb-login-form .acb-input{
padding-inline-start: 40px;
padding-inline-end: 44px;
height: 44px;
border-radius: 14px;
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.10);
}
.acb-login-form .acb-input:focus{
outline: none;
border-color: rgba(91,140,255,.45);
box-shadow: 0 0 0 3px rgba(91,140,255,.18);
}
.acb-login-eye{
position:absolute;
inset-inline-end: 10px;
top: 50%;
transform: translateY(-50%);
width: 34px;
height: 34px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.85);
cursor:pointer;
}
.acb-login-eye.is-on{
border-color: rgba(46,229,157,.45);
box-shadow: 0 0 0 3px rgba(46,229,157,.14);
}
.acb-login-btn{
margin-top: 14px;
border-radius: 16px;
height: 46px;
font-weight: 900;
position:relative;
overflow:hidden;
}
.acb-login-btnGlow{
position:absolute;
inset: -40%;
background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.35), transparent 55%);
opacity:.35;
transform: rotate(12deg);
pointer-events:none;
}
.acb-login-foot{
margin-top: 10px;
text-align:center;
font-size: 12px;
}
.acb-login-mini{
text-align:center;
font-size: 11px;
color: rgba(255,255,255,.55);
}
/* RTL friendly */
body.acb-login{
direction: rtl;
}
/* ================================
LOGIN POLISH (Overrides)
================================ */
/* 1) الخلفية أفتح/أبيض حبة */
body.acb-login{
background:
radial-gradient(1100px 600px at 80% 18%, rgba(120,170,255,.28), transparent 60%),
radial-gradient(900px 520px at 20% 82%, rgba(80,255,200,.16), transparent 60%),
linear-gradient(180deg, #0a1020, #0b1220);
}
.acb-login-bg{
opacity: 1;
filter: blur(8px);
background:
radial-gradient(700px 380px at 70% 20%, rgba(255,255,255,.08), transparent 60%),
radial-gradient(640px 340px at 30% 78%, rgba(255,255,255,.06), transparent 60%),
radial-gradient(520px 300px at 78% 42%, rgba(91,140,255,.20), transparent 60%),
radial-gradient(520px 300px at 22% 62%, rgba(46,229,157,.14), transparent 60%);
}
/* 2) كروت أبـيَض شوية وGlass أنضف */
.acb-login-brand,
.acb-login-card{
background: rgba(255,255,255,.085);
border: 1px solid rgba(255,255,255,.14);
}
/* 3) اللوجو أكبر */
.acb-login-logo{
width: 66px;
height: 66px;
border-radius: 18px;
padding: 8px;
}
/* 4) عنوان البراند + السطر الفرعي لوحده */
.acb-login-brandText{
display:flex;
flex-direction:column;
gap: 4px;
}
.acb-login-brandTitle{
font-size: 17px;
letter-spacing: .2px;
}
.acb-login-brandSub{
display:inline-block;
width: fit-content;
padding: 6px 10px;
border-radius: 999px;
background: rgba(0,0,0,.18);
border: 1px solid rgba(255,255,255,.10);
font-size: 12px;
color: rgba(255,255,255,.72);
}
/* 5) Textboxes احترافية */
.acb-login-form .acb-input{
height: 48px;
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.12));
border: 1px solid rgba(255,255,255,.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 10px 30px rgba(0,0,0,.18);
transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
/* hover */
.acb-login-form .acb-input:hover{
border-color: rgba(255,255,255,.18);
}
/* focus */
.acb-login-form .acb-input:focus{
border-color: rgba(91,140,255,.55);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 0 0 4px rgba(91,140,255,.16),
0 14px 40px rgba(0,0,0,.22);
transform: translateY(-1px);
}
/* 6) الأيقونة جوه الـ input تبقى أنضف */
.acb-login-inputIcon{
opacity: .85;
filter: drop-shadow(0 6px 14px rgba(0,0,0,.25));
}
/* 7) زرار العين يبقى Glass ومش أبيض فاقع */
.acb-login-eye{
width: 36px;
height: 36px;
border-radius: 14px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.12);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.10),
0 10px 24px rgba(0,0,0,.22);
}
/* 8) زر الدخول يبان Premium */
.acb-login-btn{
height: 48px;
border-radius: 18px;
box-shadow: 0 16px 40px rgba(0,0,0,.28);
}
/* ================================
LOGIN INPUTS — PRO
================================ */
/* اللابل لوحده */
.acb-login-label{
display:block;
margin-bottom: 6px;
font-size: 13px;
font-weight: 700;
color: rgba(255,255,255,.85);
}
/* wrapper للـ input */
.acb-login-inputWrap{
position: relative;
}
/* input نفسه */
.acb-login-input{
width: 100%;
height: 48px;
padding-inline: 14px 46px; /* مساحة للعين */
border-radius: 16px;
background:
linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14));
border: 1px solid rgba(255,255,255,.14);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 10px 28px rgba(0,0,0,.22);
transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* hover */
.acb-login-input:hover{
border-color: rgba(255,255,255,.22);
}
/* focus */
.acb-login-input:focus{
outline: none;
border-color: rgba(91,140,255,.6);
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 0 0 4px rgba(91,140,255,.18),
0 16px 40px rgba(0,0,0,.28);
transform: translateY(-1px);
}
/* زرار العين جوه التيكست */
.acb-login-eye{
position: absolute;
inset-inline-end: 8px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 12px;
display: grid;
place-items: center;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.14);
color: rgba(255,255,255,.9);
cursor: pointer;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.12),
0 8px 20px rgba(0,0,0,.22);
}
/* حالة ON */
.acb-login-eye.is-on{
border-color: rgba(46,229,157,.6);
box-shadow:
0 0 0 3px rgba(46,229,157,.18),
0 10px 24px rgba(0,0,0,.28);
}
/* ================================
LOGIN: eye inside password + canvas style
================================ */
/* خلي الـ wrap يتحكم في العناصر */
.acb-login-inputWrap{
position: relative;
display: flex;
align-items: center;
}
/* input يسيب مساحة للعين داخل الصندوق */
.acb-login-input{
width: 100% !important;
padding-inline-start: 14px !important;
padding-inline-end: 58px !important; /* مساحة للعين جوه */
box-sizing: border-box;
}
/* زر العين: جوه التيكست بوكس + على نفس السطر */
.acb-login-eye{
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
/* في RTL العين تبقى على الشمال داخل البوكس */
inset-inline-end: 3px !important;
inset-inline-start: auto !important;
width: 44px !important;
height: 36px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
/* Canvas-like glass button */
background: linear-gradient(180deg, rgba(120,170,255,.28), rgba(255,255,255,.08)) !important;
border: 1px solid rgba(255,255,255,.18) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 10px 26px rgba(0,0,0,.28) !important;
color: rgba(255,255,255,.92) !important;
cursor: pointer !important;
opacity: 1 !important;
z-index: 3 !important;
}
/* Hover */
.acb-login-eye:hover{
border-color: rgba(120,170,255,.38) !important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.16),
0 14px 36px rgba(0,0,0,.32) !important;
}
/* ON state */
.acb-login-eye.is-on{
background: linear-gradient(180deg, rgba(46,229,157,.26), rgba(255,255,255,.08)) !important;
border-color: rgba(46,229,157,.40) !important;
box-shadow:
0 0 0 4px rgba(46,229,157,.14),
0 14px 36px rgba(0,0,0,.32) !important;
}
/* ==========================================
Patient Visits Cards — NO EXTRA CONTAINER
targets: #acb_patient_visits + .acb-bookcards/.acb-bookcard
========================================== */
.acb-ui #acb_patient_visits{
min-width: 0;
}
/* شيل أي شكل "كونتينر" حوالين الكروت */
.acb-ui #acb_patient_bookcards,
.acb-ui #acb_patient_visits .acb-bookcards{
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
padding: 0 !important;
border-radius: 0 !important;
display: grid;
grid-template-columns: 1fr;
gap: 12px;
max-height: 520px;
overflow: auto;
}
/* سكرول شيك */
.acb-ui #acb_patient_bookcards::-webkit-scrollbar{ width: 10px; }
.acb-ui #acb_patient_bookcards::-webkit-scrollbar-thumb{
background: rgba(255,255,255,.12);
border-radius: 999px;
border: 2px solid transparent;
background-clip: content-box;
}
/* كل كارت حجز */
.acb-ui .acb-bookcard{
border-radius: 16px;
padding: 12px;
background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
border: 1px solid rgba(255,255,255,.10);
box-shadow: 0 10px 30px rgba(0,0,0,.18);
min-width: 0;
}
/* الصف العلوي: رقم + الحالة */
.acb-ui .acb-bookcard__top{
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
.acb-ui .acb-bookcard__idx{
font-size: 12px;
font-weight: 800;
color: rgba(255,255,255,.75);
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
padding: 6px 10px;
border-radius: 999px;
}
.acb-ui .acb-statusline{
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* pills */
.acb-ui .acb-pill{
display: inline-flex;
align-items: center;
justify-content: center;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
font-weight: 800;
border: 1px solid rgba(255,255,255,.14);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.9);
}
.acb-ui .acb-pill--ok{ background: rgba(46,229,157,.14); border-color: rgba(46,229,157,.25); }
.acb-ui .acb-pill--warn{ background: rgba(255,204,102,.14); border-color: rgba(255,204,102,.25); }
.acb-ui .acb-pill--bad{ background: rgba(255,91,106,.14); border-color: rgba(255,91,106,.25); }
.acb-ui .acb-pill--info{ background: rgba(91,140,255,.14); border-color: rgba(91,140,255,.25); }
/* تفاصيل الحجز */
.acb-ui .acb-bookcard__grid{
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
.acb-ui .acb-bookcard__row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 12px;
border-radius: 12px;
background: rgba(0,0,0,.16);
border: 1px solid rgba(255,255,255,.08);
min-width: 0;
}
.acb-ui .acb-bookcard__k{
font-size: 12px;
color: rgba(255,255,255,.65);
font-weight: 700;
white-space: nowrap;
}
.acb-ui .acb-bookcard__v{
font-size: 13px;
color: rgba(255,255,255,.92);
font-weight: 800;
text-align: left;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* RTL */
html[dir="rtl"] .acb-ui .acb-bookcard__k{ text-align: right; }
html[dir="rtl"] .acb-ui .acb-bookcard__v{ text-align: left; }
.acb-ui .acb-bookcard{ padding: 10px; }
.acb-ui .acb-bookcard__row{ padding: 9px 10px; }
/* ✅ خلي الـ main يطلع سكرول عادي */
body.acb-ui--external .acb-main{
min-width: 0;
}
/* ===== Summary Cards ===== */
.acb-summary{
display:grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
margin: 12px 0 14px;
}
.acb-sumCard{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 16px;
padding: 12px 12px;
display:flex;
align-items:center;
gap: 10px;
}
.acb-sumCard__icon{ font-size: 18px; }
.acb-sumCard__lbl{ font-size: 12px; opacity:.75; }
.acb-sumCard__val{ font-weight: 800; letter-spacing:.2px; }
.acb-sumCard--warn{
border-color: rgba(255,170,80,.35);
}
/* ===== Day pills (right panel) ===== */
.acb-day__btn{
width: 100%;
text-align: right;
padding: 10px 10px;
border-radius: 14px;
}
.acb-day__row{
display:flex;
align-items:center;
gap: 8px;
}
.acb-day__label{ font-weight: 700; }
.acb-day__date{ opacity:.7; font-size: 12px; }
.acb-day__dot{
width: 8px; height: 8px; border-radius: 999px;
margin-inline-start: auto;
background: rgba(255,255,255,.35);
}
.acb-day__dot.is-hot{ background: #ff5b6a; }
.acb-day__dot.is-mid{ background: #ffcc66; }
.acb-day__dot.is-cool{ background: #2ee59d; }
.acb-day__cap{
display:block;
margin-top: 6px;
font-size: 12px;
opacity: .75;
}
.acb-day__bar{
display:block;
height: 6px;
margin-top: 6px;
border-radius: 999px;
background: rgba(255,255,255,.08);
overflow:hidden;
}
.acb-day__bar i{
display:block;
height:100%;
background: rgba(255,255,255,.35);
border-radius: 999px;
}
#acb_week_summary.acb-summary{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
margin: 12px 0;
}
/* ===== Weekly Summary Cards ===== */
.wrap.acb-ui .acb-summary{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap: 12px;
margin: 12px 0 14px;
}
.wrap.acb-ui .acb-sumCard{
display:flex;
align-items:center;
gap:10px;
padding: 12px 14px;
border-radius: 14px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 12px 35px rgba(0,0,0,.25);
}
.wrap.acb-ui .acb-sumCard__icon{
width:34px;height:34px;
border-radius: 12px;
display:grid;
place-items:center;
background: rgba(91,140,255,.18);
border: 1px solid rgba(91,140,255,.28);
flex: 0 0 auto;
font-size: 16px;
}
.wrap.acb-ui .acb-sumCard__lbl{
font-size: 12px;
opacity: .75;
}
.wrap.acb-ui .acb-sumCard__val{
font-size: 14px;
font-weight: 800;
line-height: 1.2;
margin-top: 2px;
}
.wrap.acb-ui .acb-sumCard--warn .acb-sumCard__icon{
background: rgba(255,204,102,.18);
border-color: rgba(255,204,102,.30);
}
/* dot in "week current" */
.wrap.acb-ui .acb-dot-solid{
width:8px;height:8px;border-radius:50%;
display:inline-block;
background: rgba(255,255,255,.90);
box-shadow: 0 0 0 3px rgba(91,140,255,.18);
}
/* make svg always visible inside wp-admin */
.wrap.acb-ui svg.acb-ico{
width:18px;height:18px;
display:block;
flex: 0 0 auto;
}
/* ===== Nav Cards (prev / current / next) ===== */
body .wrap.acb-ui .acb-navCards{
display:flex;
gap:10px;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
}
body .wrap.acb-ui .acb-navCard{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:14px;
border:1px solid var(--acb-border, rgba(255,255,255,.12));
background: rgba(255,255,255,.06);
color: var(--acb-text, rgba(255,255,255,.92));
cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
appearance:none;
-webkit-appearance:none;
}
body .wrap.acb-ui .acb-navCard:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
body .wrap.acb-ui .acb-navCard--active{
background: rgba(91,140,255,.22);
border-color: rgba(91,140,255,.45);
}
body .wrap.acb-ui .acb-navCard__ico{
width:28px;
height:28px;
border-radius:10px;
display:grid;
place-items:center;
background: rgba(255,255,255,.08);
}
body .wrap.acb-ui .acb-ico{
width:18px;
height:18px;
display:block;
}
/* =========================================================
✅ External Dashboard + WP-Admin
نفس الستايل لكن بدون الاعتماد على .wrap
عشان يشتغل في صفحات الـ external (اللي مفيهاش wrap)
========================================================= */
.acb-ui .acb-navCards{
display:flex;
gap:10px;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
}
.acb-ui .acb-navCard{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:14px;
border:1px solid var(--acb-border, rgba(255,255,255,.12));
background: rgba(255,255,255,.06);
color: var(--acb-text, rgba(255,255,255,.92));
cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
appearance:none;
-webkit-appearance:none;
}
.acb-ui .acb-navCard:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
.acb-ui .acb-navCard--active{
background: rgba(91,140,255,.22);
border-color: rgba(91,140,255,.45);
}
.acb-ui .acb-navCard__ico{
width:28px;
height:28px;
border-radius:10px;
display:grid;
place-items:center;
background: rgba(255,255,255,.08);
}
.acb-ui .acb-ico{
width:18px;
height:18px;
display:block;
}
/* ===== Day Buttons in right sidebar (class from JS: .acb-day__btn) ===== */
.acb-ui .acb-day__btn{
width:100%;
display:flex;
flex-direction:column;
gap:8px;
text-align:right;
padding:12px 12px;
border-radius:14px;
border:1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
color: var(--acb-text, rgba(255,255,255,.92));
cursor:pointer;
position:relative;
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
.acb-ui .acb-day__btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.07);
border-color: rgba(255,255,255,.16);
}
.acb-ui .acb-day__btn.is-active{
background: rgba(91,140,255,.18);
border-color: rgba(91,140,255,.40);
}
.acb-ui .acb-day__row{ display:flex; align-items:center; gap:8px; justify-content:space-between; }
.acb-ui .acb-day__label{ font-weight:700; }
.acb-ui .acb-day__date{ opacity:.7; font-size:12px; }
.acb-ui .acb-day__cap{ opacity:.7; font-size:12px; }
.acb-ui .acb-day__bar i{ display:block; height:100%; background: rgba(91,140,255,.75); }
/* ===== acb-day-btn as CARD ===== */
body .wrap.acb-ui .acb-day-btn{
box-sizing: border-box;
display:flex;
align-items:center;
gap:12px;
padding:12px 14px;
border-radius:14px;
border:1px solid var(--acb-border, rgba(255,255,255,.12));
background: rgba(255,255,255,.06);
color: var(--acb-text, rgba(255,255,255,.92));
cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
}
/* Hover */
body .wrap.acb-ui .acb-day-btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
/* Active (اليوم / المختار) */
body .wrap.acb-ui .acb-day-btn.is-active{
background: rgba(91,140,255,.22);
border-color: rgba(91,140,255,.45);
}
/* محتوى الزر */
body .wrap.acb-ui .acb-day-btn .acb-day__row{
display:flex;
align-items:center;
gap:8px;
flex:1;
}
body .wrap.acb-ui .acb-day-btn .acb-day__label{
font-weight:700;
}
body .wrap.acb-ui .acb-day-btn .acb-day__date{
opacity:.7;
font-size:12px;
}
/* النقطة */
body .wrap.acb-ui .acb-day-btn .acb-day__dot{
width:8px;
height:8px;
border-radius:50%;
margin-inline-start:6px;
}
/* ألوان الضغط */
body .wrap.acb-ui .acb-day__dot.is-hot{ background:#ff5b6a; }
body .wrap.acb-ui .acb-day__dot.is-mid{ background:#ffcc66; }
body .wrap.acb-ui .acb-day__dot.is-cool{ background:#2ee59d; }
/* السعة */
body .wrap.acb-ui .acb-day-btn .acb-day__cap{
font-size:12px;
opacity:.75;
}
/* البار */
/* ===== Week Summary Cards ===== */
.wrap.acb-ui .acb-summary{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:12px;
margin:14px 0;
}
/* Card */
.wrap.acb-ui .acb-sumCard{
display:flex;
align-items:center;
gap:12px;
padding:14px;
border-radius:14px;
background: rgba(255,255,255,.06);
border:1px solid var(--acb-border, rgba(255,255,255,.12));
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.wrap.acb-ui .acb-sumCard__icon{
width:42px;
height:42px;
border-radius:12px;
display:grid;
place-items:center;
background: rgba(255,255,255,.08);
font-size:20px;
}
.wrap.acb-ui .acb-sumCard__lbl{
font-size:12px;
opacity:.7;
}
.wrap.acb-ui .acb-sumCard__val{
font-size:18px;
font-weight:700;
}
/* warning card */
.wrap.acb-ui .acb-sumCard--warn{
background: rgba(255,91,106,.12);
border-color: rgba(255,91,106,.35);
}
/* =========================================================
FIX: External dashboard uses بدون .wrap
فبنكرر نفس ستايلات الـ Weekly page بدون تقييد .wrap.acb-ui
========================================================= */
/* ----- Nav Cards (prev / current / next) ----- */
.acb-ui .acb-navCards{
display:flex;
gap:10px;
align-items:center;
justify-content:flex-end;
flex-wrap:wrap;
}
.acb-ui .acb-navCard{
display:inline-flex;
align-items:center;
gap:10px;
padding:10px 14px;
border-radius:14px;
border:1px solid var(--acb-border, rgba(255,255,255,.12));
background: rgba(255,255,255,.06);
color: var(--acb-text, rgba(255,255,255,.92));
cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
appearance:none;
-webkit-appearance:none;
}
.acb-ui .acb-navCard:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
.acb-ui .acb-navCard--active{
background: rgba(91,140,255,.22);
border-color: rgba(91,140,255,.45);
}
.acb-ui .acb-navCard__ico{
width:28px;
height:28px;
border-radius:10px;
display:grid;
place-items:center;
background: rgba(255,255,255,.08);
}
.acb-ui .acb-ico{
width:18px;
height:18px;
display:block;
}
/* ----- Week Summary Cards (external + admin) ----- */
.acb-ui .acb-summary{
display:grid;
grid-template-columns: repeat(4, minmax(0,1fr));
gap:12px;
margin:14px 0;
}
.acb-ui .acb-sumCard{
display:flex;
align-items:center;
gap:12px;
padding:14px;
border-radius:14px;
background: rgba(255,255,255,.06);
border:1px solid var(--acb-border, rgba(255,255,255,.12));
box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.acb-ui .acb-sumCard__icon{
width:42px;
height:42px;
border-radius:12px;
display:grid;
place-items:center;
background: rgba(255,255,255,.08);
font-size:20px;
}
.acb-ui .acb-sumCard__lbl{ font-size:12px; opacity:.7; }
.acb-ui .acb-sumCard__val{ font-size:18px; font-weight:700; }
.acb-ui .acb-sumCard--warn{
background: rgba(255,91,106,.12);
border-color: rgba(255,91,106,.35);
}
/* ----- FIX: كان مكتوب acb-day-btn بينما الـ JS بيطلع acb-day__btn ----- */
.acb-ui .acb-day__btn{
width:100%;
display:flex;
flex-direction:column;
gap:8px;
padding:10px 12px;
border-radius:14px;
border:1px solid var(--acb-border, rgba(255,255,255,.12));
background: rgba(255,255,255,.06);
color: var(--acb-text, rgba(255,255,255,.92));
cursor:pointer;
box-shadow: 0 10px 30px rgba(0,0,0,.25);
transition: transform .15s ease, background .15s ease, border-color .15s ease;
appearance:none;
-webkit-appearance:none;
text-align:right;
}
.acb-ui .acb-day__btn:hover{
transform: translateY(-1px);
background: rgba(255,255,255,.08);
border-color: rgba(255,255,255,.18);
}
.acb-ui .acb-day__btn.is-active{
background: rgba(91,140,255,.22);
border-color: rgba(91,140,255,.45);
}
/* ===== Day pills (right panel) ===== */
.acb-ui .acb-day__btn{
width: 100%;
text-align: right;
padding: 10px 10px;
border-radius: 14px;
}
.acb-ui .acb-day__row{
display:flex;
align-items:center;
gap: 8px;
}
.acb-ui .acb-day__label{ font-weight: 700; }
.acb-ui .acb-day__date{ opacity:.7; font-size: 12px; }
.acb-ui .acb-day__dot{
width: 8px; height: 8px; border-radius: 999px;
margin-inline-start: auto;
background: rgba(255,255,255,.35);
}
.acb-ui .acb-day__dot.is-hot{ background: #ff5b6a; }
.acb-ui .acb-day__dot.is-mid{ background: #ffcc66; }
.acb-ui .acb-day__dot.is-cool{ background: #2ee59d; }
.acb-ui .acb-day__cap{
display:block;
margin-top: 6px;
font-size: 12px;
opacity: .75;
}
.acb-ui .acb-day__bar{
display:block;
height: 6px;
margin-top: 6px;
border-radius: 999px;
background: rgba(255,255,255,.08);
overflow:hidden;
}
.acb-ui .acb-day__bar i{
display:block;
height:100%;
background: rgba(255,255,255,.35);
border-radius: 999px;
}
/* FIX: weekly summary cards visibility in wp-admin */
.wrap.acb-ui #acb_week_summary{
position: relative;
z-index: 5;
overflow: visible;
}
.wrap.acb-ui .acb-sumCard{
background: rgba(255,255,255,.08) !important;
border: 1px solid rgba(255,255,255,.18);
opacity: 1 !important;
filter: none !important;
transform: none !important;
}
/* ===== Day bar (capacity bar) — FIX width=0 ===== */
.wrap.acb-ui .acb-day__row,
.acb-ui .acb-day__row{
display:flex;
align-items:center;
gap:10px;
}
.wrap.acb-ui .acb-day__bar,
.acb-ui .acb-day__bar{
display:block;
flex: 1 1 auto; /* ✅ أهم سطر */
width:100%; /* ✅ احتياطي */
height:6px;
border-radius:999px;
overflow:hidden;
background: rgba(255,255,255,.10);
}
.wrap.acb-ui .acb-day__bar > i,
.acb-ui .acb-day__bar > i{
display:block;
height:100%;
width:0%;
background: rgba(46,229,157,.9); /* أو سيبها بمتغير لو عندك */
}
/* عشان مايتضغطش النص */
.wrap.acb-ui .acb-day__label,
.acb-ui .acb-day__label,
.wrap.acb-ui .acb-day__date,
.acb-ui .acb-day__date{
white-space: nowrap;
}
/* Rotate weekly nav icon 180deg */
#acb_week_prev .acb-navCard__ico,
#acb_week_next .acb-navCard__ico{
transform: rotate(180deg);
}
.acb-week-controls__meta{
display: inline-flex;
align-items: center;
gap: 8px;
margin-inline-start: auto; /* دي الصح مع عربي/إنجليزي */
}
/* Footer actions (Settings + Logout) — FINAL */
.acb-side__footerActions{
margin-top: auto;
padding: 12px;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
border-top: 1px solid rgba(255,255,255,.08);
}
.acb-sideFootBtn{
position: relative;
display: flex;
align-items: center;
justify-content: center; /* النص في النص */
height: 54px;
padding: 0 54px 0 14px; /* ✅ سيب مساحة للأيقونة يمين */
border-radius: 16px;
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.05);
text-decoration: none;
color: rgba(255,255,255,.92);
white-space: nowrap; /* ✅ امنع تكسير النص */
overflow: hidden;
text-overflow: ellipsis;
}
.acb-sideFootBtn:hover{
background: rgba(255,255,255,.08);
}
.acb-sideFootBtn__txt{
font-weight: 800;
font-size: 14px;
letter-spacing: .2px;
}
.acb-sideFootBtn__ico{
position: absolute;
inset-inline-end: 12px;
top: 50%;
transform: translateY(-50%);
width: 36px;
height: 36px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(0,0,0,.22);
border: 1px solid rgba(255,255,255,.10);
}
.acb-sideFootBtn__ico .acb-ico{
width: 18px;
height: 18px;
}
/* Logout danger */
.acb-sideFootBtn--danger{
border-color: rgba(255,91,106,.30);
}
.acb-sideFootBtn--danger:hover{
background: rgba(255,91,106,.12);
}
.acb-sideFootBtn{
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
/* الأيقونة في النص جوه الدايرة */
.acb-sideFootBtn__ico{
display: grid;
place-items: center;
}
/* svg نفسه */
.acb-sideFootBtn__ico svg,
.acb-sideFootBtn__ico .acb-ico{
display: block;
width: 18px;
height: 18px;
}
/* ===== FIX: Center icon (override old absolute rules) ===== */
/* لو الزرار SVG-only وعايز الأيقونة في نص الزر */
.acb-side__footerActions .acb-sideFootBtn{
padding: 0 !important; /* شيل مساحة الأيقونة اليمين */
justify-content: center !important; /* توسيط محتوى الزر */
min-width: 0 !important;
}
/* الغِ الـ absolute اللي كان مثبتها يمين */
.acb-side__footerActions .acb-sideFootBtn__ico{
position: static !important;
inset: auto !important;
top: auto !important;
transform: none !important;
width: 40px; /* اختياري */
height: 40px; /* اختياري */
display: grid !important;
place-items: center !important;
margin: 0 auto !important;
}
/* توسيط الـ svg نفسه */
.acb-side__footerActions .acb-sideFootBtn__ico svg,
.acb-side__footerActions .acb-sideFootBtn__ico .acb-ico{
display: block !important;
width: 20px !important;
height: 20px !important;
}
.acb-tabs{
display:flex;
gap:10px;
align-items:center;
flex-wrap:wrap;
margin-bottom:14px;
}
.acb-tab{
border:1px solid rgba(255,255,255,.12);
background: rgba(255,255,255,.05);
color: rgba(255,255,255,.9);
padding:10px 12px;
border-radius: 14px;
font-weight:800;
}
.acb-tab.is-active{
border-color: rgba(91,140,255,.55);
background: rgba(91,140,255,.16);
}
.acb-tabs__actions{
margin-inline-start:auto;
display:flex;
align-items:center;
gap:10px;
}
.acb-pane{ display:none; }
.acb-pane.is-active{ display:block; }
.acb-grid2{
display:grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.acb-help{
margin-top:6px;
font-size:12px;
opacity:.7;
}
/* Switch (Wi-Fi style) */
.acb-switch{
position: relative;
width: 56px;
height: 32px;
display: inline-block;
vertical-align: middle;
}
.acb-switch input{
position:absolute;
inset:0;
width:100%;
height:100%;
opacity:0;
cursor:pointer;
z-index:3;
}
.acb-switch__track{
position:absolute; inset:0;
border-radius: 999px;
background: rgba(255,255,255,.14);
border: 1px solid rgba(255,255,255,.18);
transition: .2s ease;
}
.acb-switch__thumb{
position:absolute;
top: 4px; left: 4px;
width: 24px; height: 24px;
border-radius: 999px;
background: rgba(255,255,255,.92);
transition: .2s ease;
}
/* =========================
ACB Switch — Unified Style
========================= */
.acb-switch input[type="checkbox"]:checked + .acb-switch__track{
background: rgba(91,140,255,.55);
border-color: rgba(91,140,255,.7);
}
.acb-switch input[type="checkbox"]:checked ~ .acb-switch__thumb{
transform: translateX(24px);
}
/* Stepper */
.acb-stepper{
display:flex;
gap:8px;
align-items:center;
}
.acb-stepper__btn{
min-width: 44px;
height: 44px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.92);
font-size: 20px;
}
.acb-stepper input[type="number"]{
width: 110px;
height: 44px;
text-align: center;
border-radius: 12px;
}
/* Week chips */
.acb-weekchips{
display:flex;
flex-wrap: wrap;
gap:8px;
}
.acb-chipday{
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.85);
border-radius: 999px;
padding: 10px 14px;
line-height: 1;
}
.acb-chipday.is-on{
background: rgba(91,140,255,.35);
border-color: rgba(91,140,255,.7);
color: rgba(255,255,255,.95);
}
/* Time picker — smaller & cleaner */
.acb-page-settings--manager input[type="time"]{
height: 40px; /* كان كبير */
padding: 6px 10px;
font-size: 14px;
line-height: 1.2;
border-radius: 10px;
}
/* لو جوّه acb-field */
.acb-page-settings--manager .acb-field input[type="time"]{
max-width: 160px; /* مايملاش السطر كله */
}
/* 🚫 Disable number input spinners (scroll) */
.acb-page-settings--manager input[type="number"]::-webkit-inner-spin-button,
.acb-page-settings--manager input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
.acb-page-settings--manager input[type="number"] {
-moz-appearance: textfield; /* Firefox */
}
.acb-weekchips, .acb-chipday{
position: relative;
z-index: 50;
pointer-events: auto;
}
/* ===============================
Blocked days chips — ACTIVE
=============================== */
.acb-chipday{
border: 1px solid rgba(255,255,255,.16);
background: rgba(255,255,255,.06);
color: rgba(255,255,255,.85);
border-radius: 999px;
padding: 10px 14px;
line-height: 1;
cursor: pointer;
user-select: none;
}
.acb-chipday.is-on{
background: #5b8cff !important;
border-color: #5b8cff !important;
color: #fff !important;
}
.acb-badge--success{ background: rgba(46,229,157,.18); border-color: rgba(46,229,157,.35); color: rgba(255,255,255,.95); }
.acb-badge--danger { background: rgba(255,91,106,.18); border-color: rgba(255,91,106,.35); color: rgba(255,255,255,.95); }
/* =========================
ACB Switch — Generic
نفس تصميم public booking
========================= */
.acb-switch input:checked + .acb-switch__track{
background: rgba(91,140,255,.55);
border-color: rgba(91,140,255,.7);
}
.acb-switch input:checked ~ .acb-switch__thumb{
transform: translateX(24px);
}
/* =========================
Weekly Schedule - Master View Fix
يمنع قص آخر العناصر ويخلي السكرول يوصل للآخر
========================= */
/* الكونتينر الرئيسي */
.acb-master{
display: flex;
gap: 16px;
min-height: 0; /* مهم جداً مع flex */
}
/* العمود الشمال (القائمة) */
.acb-master__left{
display: flex;
flex-direction: column;
min-height: 0; /* أهم سطر */
}
/* عمود اليمين (الأيام) */
.acb-master__right{
display: flex;
flex-direction: column;
min-height: 0; /* مهم */
}
/* قائمة المواعيد (اللي بتتقص) */
#acb_master_list.acb-master__list,
.acb-master__list{
flex: 1;
min-height: 0; /* أهم سطر */
overflow: auto; /* خليها هي اللي تسكرول */
padding-bottom: 90px; /* يمنع قص آخر كارت */
}
/* قائمة الأيام يمين */
#acb_master_days.acb-days,
.acb-days{
min-height: 0;
overflow: auto;
padding-bottom: 40px;
}
/* حل مشكلة Firefox dropdown */
#acb_doctor {
max-height: 42px;
}
/* Firefox فقط */
@-moz-document url-prefix() {
#acb_doctor {
max-height: 42px;
overflow-y: auto;
}
#acb_doctor option {
max-height: 36px;
}
}
/* =========================
ACB Appointment Card (New)
========================= */
.acb-apCard{
border: 1px solid rgba(255,255,255,.10);
background: rgba(255,255,255,.06);
border-radius: 14px;
padding: 12px 12px 10px;
margin: 0px;
box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.acb-apCard__top{
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
margin-bottom: 8px;
color: rgba(255,255,255,.72);
font-size: 13px;
}
.acb-apCard__time{
display:flex;
align-items:center;
gap:6px;
font-weight: 700;
color: rgba(255,255,255,.88);
}
.acb-apCard__clock{
opacity:.9;
}
.acb-apCard__date{
display:flex;
align-items:center;
gap:6px;
opacity:.85;
white-space: nowrap;
}
.acb-apCard__name{
font-size: 16px;
font-weight: 900;
color: rgba(255,255,255,.94);
margin: 6px 0 10px;
line-height: 1.25;
}
.acb-apCard__meta{
display:grid;
gap:6px;
padding-top: 10px;
border-top: 1px dashed rgba(255,255,255,.12);
}
.acb-apCard__metaRow{
display:flex;
align-items:center;
gap:8px;
color: rgba(255,255,255,.78);
font-size: 13px;
}
.acb-apCard__tag{
width: 22px;
height: 22px;
display:inline-flex;
align-items:center;
justify-content:center;
border-radius: 8px;
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.10);
}
.acb-apCard__metaTxt{
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* =========================
4 Cards Per Row (Responsive)
========================= */
#acb_master_list{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
overflow-y: auto;
max-height: 100%;
padding-right: 6px;
}
.acb-apCard{
padding: 8px 10px;
}
.acb-apCard__name{
font-size: 14px;
}
.acb-apCard__metaRow{
font-size: 12px;
}
/* ===== Master list grid: 4 cards per row ===== */
#acb_master_list{
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
align-items: start;
}
/* منع خروج النص */
.acb-mini{
min-width: 0;
}
.acb-mini__name{
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.acb-mini__meta{
display: grid;
gap: 6px;
}
.acb-mini__meta span{
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Tabs container */
.acb-tabs{
display:flex;
gap:10px;
margin-bottom:16px;
}
/* Tab button */
.acb-tab{
appearance:none;
border:1px solid rgba(0,0,0,.12);
background: rgba(255,255,255,.55);
padding:10px 18px;
border-radius:14px;
font-family: "Cairo", sans-serif;
font-size:14px;
font-weight:800;
color:#374151;
cursor:pointer;
transition: all .25s ease;
}
/* Hover (ينور خفيف) */
.acb-tab:hover{
background: rgba(37,99,235,.10);
border-color: rgba(37,99,235,.35);
color:#1e3a8a;
}
/* Active tab (ينور فعليًا) */
.acb-tab.is-active{
background: linear-gradient(90deg, #2563eb, #0ea5e9);
border-color: transparent;
color:#fff;
box-shadow: 0 10px 24px rgba(37,99,235,.25);
}
/* Active + hover */
.acb-tab.is-active:hover{
filter: brightness(1.05);
}
/* Tabs: keep existing design, just add active glow */
.acb-tabs .acb-tab{
transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease;
}
/* Hover بسيط */
.acb-tabs .acb-tab:hover{
box-shadow: 0 6px 14px rgba(37,99,235,.10);
}
/* Active: نوران بدون تغيير مقاسات/شكل */
.acb-tabs .acb-tab.is-active{
border-color: rgba(37,99,235,.40) !important;
box-shadow: 0 10px 24px rgba(37,99,235,.18) !important;
background: rgba(37,99,235,.10) !important; /* لو عايزه أهدى: .06 */
color: #1e3a8a !important;
}
.acb-colorDot{
display:inline-block;
width:14px; height:14px;
border-radius:50%;
background: var(--c, #5b8cff);
box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
vertical-align: middle;
margin-inline-end: 8px;
}
.acb-ui .acb-row{
display:flex;
gap:12px;
align-items:end;
}
/* Make color input look like a nice button */
.acb-ui #acb_clinic_color{
width: 44px;
height: 44px;
padding: 0;
border: 1px solid rgba(255,255,255,.18);
border-radius: 14px;
background: rgba(255,255,255,.06);
cursor: pointer;
overflow: hidden;
box-shadow: 0 6px 16px rgba(0,0,0,.25);
}
/* Swatch (Chrome/Edge) */
.acb-ui #acb_clinic_color::-webkit-color-swatch-wrapper{ padding: 8px; }
.acb-ui #acb_clinic_color::-webkit-color-swatch{
border: 0;
border-radius: 10px;
}
/* Swatch (Firefox) */
.acb-ui #acb_clinic_color::-moz-color-swatch{
border: 0;
border-radius: 10px;
}
/* Row layout */
.acb-row--clinic{
display: flex;
align-items: end;
gap: 14px;
}
/* لون */
.acb-field--color{
width: 90px;
}
.acb-field--color input[type="color"]{
width: 44px;
height: 44px;
padding: 0;
border-radius: 12px;
border: 1px solid rgba(255,255,255,.18);
background: rgba(255,255,255,.08);
cursor: pointer;
}
/* اسم العيادة */
.acb-field--name{
flex: 1;
}
/* زر الإضافة */
.acb-field--action{
width: 110px;
}
.acb-field--action .acb-btn{
width: 100%;
height: 44px;
}
/* ================================
Day Segmented Bar (works anywhere)
================================ */
.acb-day__bar{
display: flex !important;
width: 100%;
height: 6px;
border-radius: 999px;
overflow: hidden;
background: rgba(255,255,255,.12);
margin-top: 6px;
}
.acb-day__bar .acb-day__seg{
display: block;
height: 100%;
min-width: 2px;
flex: 0 0 auto; /* ✅ مهم عشان الـ width% يتطبق */
background: var(--seg) !important;
}
.acb-day__bar .acb-day__seg + .acb-day__seg{
box-shadow: inset 1px 0 0 rgba(0,0,0,.25);
}
.acb-day__bar .acb-day__seg:hover{
filter: brightness(1.15);
}
/* badges container */
.acb-apCard__badges{
display:flex;
gap:6px;
flex-wrap:wrap;
margin-bottom:6px;
}
/* badge base */
.acb-apBadge{
display:inline-flex;
align-items:center;
gap:4px;
padding:3px 8px;
font-size:11px;
line-height:1;
border-radius:999px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.14);
white-space:nowrap;
}
/* time badge */
.acb-apBadge--time{
background:rgba(91,140,255,.18);
border-color:rgba(91,140,255,.35);
}
/* date badge */
.acb-apBadge--date{
opacity:.85;
}
/* ✅ الشريط فقط */
.acb-ui #acb_master_search.acb-input{
max-width: 750px;
height: 42px;
padding: 0 14px;
font-size: 13px;
}
/* الكونتينر اللي شايل البحث (من غير لمس الجدول) */
.acb-ui .acb-week-toolbar,
.acb-ui .acb-search-row{
max-width: 980px;
margin-inline: auto;
}
/* ✅ Badge عدد المواعيد */
.acb-ui .acb-master__count{
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 10px;
border-radius: 999px;
font-size: 12px;
line-height: 1;
white-space: nowrap;
background: rgba(91,140,255,.14);
border: 1px solid rgba(91,140,255,.28);
}
/* لو جواها span/strong للرقم ظبّطه */
.acb-ui .acb-master__count strong,
.acb-ui .acb-master__count b{
font-size: 13px;
}
/* =========================================================
FIX ONLY: Booking Delete Button (Admin + External)
Place at END of CSS file
========================================================= */
/* الزر نفسه */
#acb-booking-delete,
.acb-ui #acb-booking-delete{
appearance:none;
-webkit-appearance:none;
display:inline-flex;
align-items:center;
justify-content:center;
gap:8px;
height: 32px;
min-width: 32px;
padding: 0 10px;
border-radius: 12px;
border: 1px solid rgba(255,91,106,.35) !important;
background: rgba(255,91,106,.10) !important;
color: rgba(255,182,190,.95) !important;
font-weight: 900;
font-size: 12px;
line-height: 1;
cursor:pointer;
box-shadow: 0 6px 16px rgba(0,0,0,.14);
}
/* Hover */
#acb-booking-delete:hover,
.acb-ui #acb-booking-delete:hover{
background: rgba(255,91,106,.16) !important;
border-color: rgba(255,91,106,.50) !important;
}
/* أيقونة SVG هادية وصغيرة */
#acb-booking-delete svg,
.acb-ui #acb-booking-delete svg{
width: 14px;
height: 14px;
display:block;
opacity: .9;
}
/* لو الزر مفيهوش SVG: نرسم أيقونة بسيطة بالـ CSS */
#acb-booking-delete:not(:has(svg))::before{
content:"";
width:14px;
height:14px;
display:inline-block;
background-repeat:no-repeat;
background-size:14px 14px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffb6be' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M8 6V4h8v2'/%3E%3Cpath d='M19 6l-1 14H6L5 6'/%3E%3Cpath d='M10 11v6'/%3E%3Cpath d='M14 11v6'/%3E%3C/svg%3E");
}
/* Delete booking button (Admin + External) */
.acb-ui .acb-booking-delete{
appearance: none;
-webkit-appearance: none;
border: 1px solid rgba(255,255,255,.14) !important;
background: rgba(255,255,255,.04) !important;
color: rgba(255,255,255,.80) !important;
width: 30px;
height: 30px;
padding: 0 !important;
border-radius: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-shadow: 0 8px 18px rgba(0,0,0,.18);
transition: transform .08s ease, background .15s ease, border-color .15s ease, opacity .15s ease;
}
.acb-ui .acb-booking-delete:hover{
background: rgba(255,91,106,.10) !important;
border-color: rgba(255,91,106,.35) !important;
transform: translateY(-1px);
}
.acb-ui .acb-booking-delete:active{
transform: translateY(0);
}
/* icon */
.acb-ui .acb-booking-delete svg{
width: 16px;
height: 16px;
display: block;
fill: currentColor;
opacity: .9;
}
/* Patients actions bar */
.acb-patients-actions{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
margin-top:10px;
margin-bottom:10px;
}
.acb-patients-actions__left{
display:flex;
gap:10px;
justify-content:flex-start; /* ✅ شمال */
}
.acb-patients-actions__right{
display:flex;
justify-content:flex-end; /* ✅ يمين */
}
/* Patient modal: contact row (email / phone2 / whatsapp) */
#acb_patient_modal .acb-contact-row{
display: grid;
grid-template-columns: 1.2fr 1fr 1fr; /* email أكبر شوية */
gap: 12px;
align-items: end;
width: 100%;
}
/* Make contract wide (safe) */
#acb_patient_modal #acb_edit_contract_wrap{
width: 100%;
}
.acb-actions--row{
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
flex-direction: row-reverse; /* ✅ يثبت: اليمين = أول مجموعة */
}
.acb-actions__right,
.acb-actions__left{
display: flex;
gap: 8px;
align-items: center;
}
.acb-actions__left{ margin-left: auto; }
.acb-pat-controls{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:12px;
flex-wrap:wrap;
}
.acb-pat-controls__filters{
display:grid;
grid-template-columns: 2fr 1fr 1fr;
gap:12px;
align-items:end;
flex:1;
min-width: 520px;
}
.acb-pat-controls__buttons{
display:flex;
gap:10px;
align-items:end;
}
.acb-modal-card{ display:none; }
.acb-modal-card.is-open{ display:block; }
/* ===============================
MASTER FILTER BAR – UNIFIED
=============================== */
.acb-master__top .acb-input,
.acb-master__top input.acb-input,
.acb-master__top select.acb-input,
.acb-master__top button{
height: 42px !important;
min-height: 42px !important;
max-height: 42px !important;
padding: 0 14px !important;
font-size: 14px !important;
line-height: 42px !important;
border-radius: 12px;
box-sizing: border-box;
}
.acb-master__list{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
align-items: stretch; /* ⭐ مهم */
}
.acb-apCard__name{
white-space: nowrap; /* سطر واحد */
overflow: hidden; /* اخفي الزيادة */
text-overflow: ellipsis; /* … */
max-width: 100%;
}
body.acb-ui--external.acb-route-dashboard .acb-dash__grid--tableOnly{
display:grid;
grid-template-columns:1fr;
gap:14px;
}
body.acb-ui--external.acb-route-dashboard .acb-table-scroll{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
body.acb-ui--external.acb-route-dashboard .acb-table{
width:100%;
min-width:560px; /* بدل 720 */
}
body.acb-ui--external.acb-route-dashboard .acb-table th,
body.acb-ui--external.acb-route-dashboard .acb-table td{
white-space:nowrap;
}
/* ===============================
Doctors page – unified grid
=============================== */
body.acb-ui--external.acb-route-doctors .acb-page-doctors .acb-grid{
display: grid;
grid-template-columns: 1.1fr .9fr; /* إضافة | قائمة */
gap: 14px;
align-items: start;
}
/* موبايل */
@media (max-width: 980px){
body.acb-ui--external.acb-route-doctors .acb-page-doctors .acb-grid{
grid-template-columns: 1fr;
}
}
/* منع الجدول من تكسير العرض */
body.acb-ui--external.acb-route-doctors .acb-page-doctors,
body.acb-ui--external.acb-route-doctors .acb-card,
body.acb-ui--external.acb-route-doctors .acb-card__body{
min-width: 0;
}
body.acb-ui--external.acb-route-doctors .acb-table-scroll{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* ===============================
DASHBOARD grid FIX (external)
=============================== */
/* امنع أي عنصر يكبر ويطلع برّه */
body.acb-ui--external.acb-route-dashboard .acb-main,
body.acb-ui--external.acb-route-dashboard .acb-dash,
body.acb-ui--external.acb-route-dashboard .acb-grid{
min-width: 0 !important;
}
/* TOP tiles */
body.acb-ui--external.acb-route-dashboard .acb-dash__top{
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: 12px;
align-items: stretch;
}
@media (max-width: 980px){
body.acb-ui--external.acb-route-dashboard .acb-dash__top{
grid-template-columns: 1fr 1fr;
}
}
/* table-only grid */
body.acb-ui--external.acb-route-dashboard .acb-dash__grid--tableOnly{
display: grid;
grid-template-columns: 1fr;
gap: 14px;
margin-top: 12px;
}
/* table scroll instead of breaking layout */
body.acb-ui--external.acb-route-dashboard .acb-table-scroll{
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* خليه مناسب للموبايل */
body.acb-ui--external.acb-route-dashboard .acb-table{
width: 100%;
min-width: 560px;
}
body.acb-ui--external.acb-route-dashboard .acb-table th,
body.acb-ui--external.acb-route-dashboard .acb-table td{
white-space: nowrap;
}
/* ===== Dashboard (tiles like original) ===== */
.acb-dash{
display: block;
}
/* TOP TILES GRID */
.acb-dash__top{
display: grid;
grid-template-columns: 1.4fr repeat(3, minmax(0,1fr));
gap: 14px;
margin-bottom: 14px;
}
/* TILE */
.acb-tile{
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.10);
border-radius: 18px;
box-shadow: 0 18px 60px rgba(0,0,0,.25);
padding: 14px;
position: relative;
overflow: hidden;
}
/* TEXT */
.acb-tile__title{
color: var(--acb-muted);
font-size: 12px;
font-weight: 700;
}
.acb-tile__value{
font-size: 34px;
font-weight: 900;
margin-top: 6px;
line-height: 1;
}
.acb-tile__hint{
color: var(--acb-muted);
font-size: 12px;
margin-top: 8px;
}
/* WELCOME TILE */
.acb-tile--welcome{
display: flex;
gap: 12px;
align-items: flex-start;
}
.acb-tile__icon{
width: 44px;
height: 44px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(91,140,255,.18);
border: 1px solid rgba(91,140,255,.25);
font-size: 22px;
flex: 0 0 auto;
}
.acb-tile__big{
font-size: 20px;
font-weight: 900;
margin-top: 2px;
}
.acb-tile__sub{
color: var(--acb-muted);
font-size: 12px;
margin-top: 6px;
display: flex;
gap: 8px;
align-items: center;
}
.acb-tile__badge{
margin-inline-start: auto;
}
/* =========================================================
MOBILE CLEAN PATCH (Fix overlay + layout + background)
File: aldelta-ui (3).css
Put at VERY END
========================================================= */
/* 0) FIX: off-canvas overlay لازم يبقى مخفي افتراضيًا (مش يظهر طول الوقت) */
body.acb-ui--external .acb-oc-overlay{
opacity: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
}
body.acb-ui--external.acb-oc-open .acb-oc-overlay{
opacity: 1 !important;
pointer-events: auto !important;
visibility: visible !important;
}
/* 1) الموبايل */
@media (max-width: 900px){
html, body{
overflow-x: hidden !important;
}
/* شيل دوائر/بلاعات الخلفية اللي فوق المحتوى على الموبايل */
.acb-ui .acb-container::before{
display: none !important;
}
/* خليك في Layout طبيعي: main عرض كامل */
body.acb-ui--external .acb-shell2{
display: block !important; /* بدل flex row-reverse */
gap: 0 !important;
}
body.acb-ui--external main{
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
padding: 0 !important;
}
/* grids -> عمود واحد */
.acb-grid,
.acb-dash__top,
.acb-dash__grid,
.acb-row,
.acb-row--2,
.acb-form-grid{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* الكروت */
.acb-card,
.acb-panel,
.acb-tile{
width: 100% !important;
max-width: 100% !important;
}
/* الجداول: سكرول أفقي محترم */
.acb-table-wrap,
.acb-table-scroll{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
/* inputs/buttons full width */
.acb-input,
.acb-select,
.acb-btn{
width: 100% !important;
}
/* زر المنيو */
body.acb-ui--external .acb-oc-toggle{
top: 14px !important;
right: 14px !important;
width: 42px !important;
height: 42px !important;
border-radius: 14px !important;
}
}
/* =========================================================
MOBILE PATCH #2 (Fix overlap + weekly layout + actions)
Put at VERY END (after patch #1)
========================================================= */
@media (max-width: 900px){
/* A) امنع أي زخارف/دوائر pseudo فوق المحتوى (سبب الشبح اللي ظاهر في جدول الأسبوع) */
.acb-ui .acb-card::before,
.acb-ui .acb-card::after,
.acb-ui .acb-panel::before,
.acb-ui .acb-panel::after,
.acb-ui .acb-tile::before,
.acb-ui .acb-tile::after,
.acb-ui .acb-schedule__section::before,
.acb-ui .acb-schedule__section::after{
content: none !important;
display: none !important;
}
/* B) أي عنصر جوه flex لازم يسمح بالانكماش (ده بيمنع “الخروج برّه”) */
.acb-ui *{
min-width: 0;
}
/* C) اكشنز/أزرار (بحث/طباعة/Excel) تبقى مرتبة */
.acb-ui .acb-actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
align-items: stretch !important;
}
.acb-ui .acb-actions .acb-btn{
width: 100% !important;
}
/* زرار أساسي لوحده */
.acb-ui .acb-actions .acb-btn--primary{
grid-column: 1 / -1 !important;
}
/* D) مدخلات + label: خفّض الأحجام شوية عشان الموبايل */
.acb-ui h1{ font-size: 22px !important; }
.acb-ui h2{ font-size: 18px !important; }
.acb-ui .acb-card__head{ padding: 12px !important; }
.acb-ui .acb-card__body{ padding: 12px !important; }
/* E) جدول الأسبوع/المواعيد: غالبًا عندك عمودين (Days + Schedule) */
/* نخلي أي wrapper شبه “week” يشتغل column */
.acb-ui [class*="week"],
.acb-ui [class*="Week"],
.acb-ui [id*="week"],
.acb-ui [id*="Week"]{
max-width: 100% !important;
}
}
/* =========================================
MOBILE: DAYS BAR (clinics schedule) - CLEAN
Replace your current DAYS BAR block with this
========================================= */
@media (max-width: 900px){
/* خلي العمود اليمين يسيب المساحة لشريط الأيام */
body.acb-ui--external .acb-master__right{
width: 100% !important;
max-width: 100% !important;
overflow: visible !important;
min-width: 0 !important;
}
/* الشريط نفسه: سكرول أفقي فقط */
body.acb-ui--external #acb_master_days{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch !important;
gap: 10px !important;
padding: 6px 2px !important;
width: 100% !important;
max-width: 100% !important;
align-items: stretch !important;
/* اختياري */
scroll-snap-type: x proximity !important;
}
/* كل كارت يوم */
body.acb-ui--external #acb_master_days > *{
flex: 0 0 auto !important;
height: 92px !important; /* 👈 هنا تعديل الارتفاع */
min-height: 92px !important;
min-width: 150px !important; /* 👈 هنا عرض الكارت */
white-space: nowrap !important;
display: flex !important;
align-items: stretch !important;
scroll-snap-align: start !important;
}
/* الزر/العنصر داخل الكارت (لو موجود) */
body.acb-ui--external #acb_master_days > * > *{
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 10px 12px !important;
box-sizing: border-box !important;
line-height: 1.15 !important;
gap: 6px !important;
}
/* امنع margin داخلي يعمل اختلاف ارتفاع */
body.acb-ui--external #acb_master_days .acb-day__top,
body.acb-ui--external #acb_master_days .acb-day__bottom{
margin: 0 !important;
}
/* سكرول بار رفيع */
body.acb-ui--external #acb_master_days::-webkit-scrollbar{
height: 6px;
}
}
/* =========================================================
MOBILE PATCH – FINAL (paste at END of aldelta-ui.css)
Targets: external staff pages + admin pages when reused
========================================================= */
/* safer sizing */
.acb-ui, .acb-ui * { box-sizing: border-box; }
.acb-ui img, .acb-ui svg { max-width: 100%; height: auto; }
/* prevent horizontal overflow */
html, body { max-width: 100%; overflow-x: hidden; }
body.acb-ui--external { overflow-x: hidden; }
/* ---------- External Shell: main should be full width on mobile ---------- */
@media (max-width: 900px){
body.acb-ui--external .acb-main{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
overflow: visible !important;
}
/* give content breathing room */
body.acb-ui--external .wrap.acb-ui,
body.acb-ui--external .acb-container,
body.acb-ui--external .acb-card{
width: 100% !important;
max-width: 100% !important;
}
body.acb-ui--external .acb-card{
margin: 0 0 12px 0 !important;
}
/* ---------- Offcanvas Sidebar (fix: was behind / overlapping weird) ---------- */
.acb-oc-toggle{
display: inline-flex !important;
position: fixed !important;
top: 14px !important;
inset-inline-end: 14px !important;
z-index: 99998 !important;
}
.acb-oc-overlay{
position: fixed !important;
inset: 0 !important;
background: rgba(0,0,0,.35) !important;
opacity: 0 !important;
pointer-events: none !important;
z-index: 99996 !important;
transition: opacity .18s ease !important;
}
/* sidebar panel */
body.acb-ui--external .acb-side{
position: fixed !important;
top: 0 !important;
bottom: 0 !important;
inset-inline-end: 0 !important;
width: min(88vw, 320px) !important;
max-width: 320px !important;
z-index: 10000011!important;
transform: translate3d(110%,0,0) !important; /* RTL: hide to the right */
transition: transform .18s ease !important;
overflow: auto !important;
-webkit-overflow-scrolling: touch !important;
}
/* open state (JS toggles body class: acb-oc-open) */
body.acb-oc-open .acb-oc-overlay{
opacity: 1 !important;
pointer-events: auto !important;
}
body.acb-oc-open.acb-ui--external .acb-side{
transform: translate3d(0,0,0) !important;
}
/* ---------- Headers / Badges ---------- */
.acb-header, .acb-hero{
padding: 14px !important;
border-radius: 18px !important;
}
.acb-header__title h1,
.acb-hero__title{
font-size: 22px !important;
line-height: 1.25 !important;
}
.acb-badge, .acb-pill{
max-width: 100% !important;
white-space: nowrap !important;
}
/* ---------- Grids: force 1 column ---------- */
.acb-grid,
.acb-grid--2,
.acb-grid--3,
.acb-grid--4{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* Dashboard */
.acb-dash__top{ grid-template-columns: 1fr !important; gap: 12px !important; }
.acb-dash__grid{ grid-template-columns: 1fr !important; gap: 12px !important; }
.acb-panel--wide{ grid-column: auto !important; }
/* KPI tiles */
.acb-kpis{ grid-template-columns: 1fr !important; gap: 10px !important; }
.acb-tiles{ grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
@media (max-width: 520px){
.acb-tiles{ grid-template-columns: 1fr !important; }
}
/* ---------- Forms / rows ---------- */
.acb-row,
.acb-row--2,
.acb-row--3,
.acb-row--4{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* clinic quick row: color + name + add button */
.acb-row--clinic{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
align-items: stretch !important;
}
.acb-row--clinic .acb-field,
.acb-row--clinic .acb-actions{
width: 100% !important;
}
/* inputs full width */
.acb-input,
.acb-select,
.acb-textarea,
input[type="text"], input[type="number"], input[type="date"], input[type="time"], select, textarea{
width: 100% !important;
max-width: 100% !important;
}
/* buttons: stack nicely */
.acb-actions{ flex-wrap: wrap !important; gap: 10px !important; }
.acb-btn,
button.acb-btn{
min-height: 44px !important;
}
.acb-actions .acb-btn{
flex: 1 1 auto !important;
}
/* Patients controls */
.acb-pat-controls{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
.acb-pat-actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
@media (max-width: 520px){
.acb-pat-actions{ grid-template-columns: 1fr !important; }
}
/* ---------- Tables: make scrollable instead of squeezing ---------- */
.acb-table-scroll,
.acb-table-wrap{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.acb-table,
table.acb-table{
min-width: 680px !important;
}
/* ---------- Weekly schedule (JS-generated layouts) ---------- */
.acb-week__controls{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
align-items: stretch !important;
}
/* if JS creates master split panels */
.acb-master{
flex-direction: column !important;
gap: 12px !important;
}
.acb-master__left,
.acb-master__right{
width: 100% !important;
min-width: 0 !important;
}
/* day chips list */
.acb-days, .acb-navCards{
grid-template-columns: 1fr !important;
}
/* avoid tiny columns: allow horizontal scrolling when needed */
.acb-week,
#acb_week_body{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* =========================================================
ACB MOBILE PATCH V4 (CLEAN - ONE PATCH ONLY)
Paste at VERY END of aldelta-ui.css
Fixes: overlay blur always-on + layout overflow + weekly pages
========================================================= */
/* =========================================================
MOBILE LAYOUT
========================================================= */
@media (max-width: 900px){
/* remove background decorative pseudo layers that overlap content */
.acb-ui .acb-container::before,
.acb-ui .acb-container::after,
.acb-ui .acb-shell2::before,
.acb-ui .acb-shell2::after,
.acb-ui .acb-card::before,
.acb-ui .acb-card::after,
.acb-ui .acb-panel::before,
.acb-ui .acb-panel::after,
.acb-ui .acb-tile::before,
.acb-ui .acb-tile::after{
content: none !important;
display: none !important;
}
/* critical: allow flex children to shrink */
.acb-ui *{ min-width: 0 !important; }
/* shell becomes single column */
body.acb-ui--external .acb-shell2{
display: block !important;
gap: 0 !important;
}
body.acb-ui--external main,
body.acb-ui--external .acb-main{
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
/* cards full width */
.acb-card, .acb-panel, .acb-tile{
width: 100% !important;
max-width: 100% !important;
}
/* grids -> 1 column */
.acb-grid,
.acb-grid--2,
.acb-grid--3,
.acb-grid--4,
.acb-dash__top,
.acb-dash__grid,
.acb-kpis{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
}
/* tiles: 2 columns then 1 on small phones */
.acb-tiles{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
@media (max-width: 520px){
.acb-tiles{ grid-template-columns: 1fr !important; }
}
/* rows/forms -> 1 column */
.acb-row,
.acb-row--2,
.acb-row--3,
.acb-row--4,
.acb-form-grid{
display: grid !important;
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* inputs/buttons full width */
.acb-input,
.acb-select,
.acb-textarea,
input, select, textarea{
width: 100% !important;
max-width: 100% !important;
}
.acb-btn, button.acb-btn{
min-height: 44px !important;
}
/* actions: nicer stacking */
.acb-actions{
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
align-items: stretch !important;
}
.acb-actions .acb-btn{ width: 100% !important; }
.acb-actions .acb-btn--primary{ grid-column: 1 / -1 !important; }
@media (max-width: 520px){
.acb-actions{ grid-template-columns: 1fr !important; }
.acb-actions .acb-btn--primary{ grid-column: auto !important; }
}
/* tables -> horizontal scroll instead of squeezing */
.acb-table-wrap,
.acb-table-scroll{
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
.acb-table, table.acb-table{
min-width: 680px !important;
}
/* weekly schedule controls (admin page schedule editor) */
.acb-page-weekly .acb-week-controls__body{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
/* day buttons wrap */
#acb_days_bar{
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
#acb_days_bar .acb-day-btn{
flex: 0 0 auto !important;
}
/* any “week” blocks: prevent overlap and allow scroll if needed */
.acb-ui [class*="week"],
.acb-ui [id*="week"]{
max-width: 100% !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
}
}
/* =========================================================
WEEKLY SCHEDULE - MOBILE OVERRIDES (KEEP DESKTOP SAME)
Paste at VERY END of aldelta-ui.css
========================================================= */
@media (max-width: 700px){
/* 1) Summary cards: تحت بعض */
#acb_week_summary.acb-summary,
.wrap.acb-ui .acb-summary{
grid-template-columns: 1fr !important;
}
/* 2) Week controls: nav icons row + meta تحتها */
.acb-page-weekly .acb-week-controls__body{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.acb-page-weekly .acb-navCards{
width: 100% !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
}
.acb-page-weekly .acb-navCard{
width: 52px !important;
height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 16px !important;
}
.acb-page-weekly .acb-navCard__txt{
display: none !important; /* icons only */
}
.acb-page-weekly .acb-week-controls__meta{
width: 100% !important;
margin-inline-start: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
.acb-page-weekly #acb_week_range{
width: 100% !important;
}
.acb-page-weekly #acb_week_refresh{
width: 100% !important;
}
/* 3) Master layout: الأيام فوق + الفلاتر تحتها */
.acb-master{
flex-direction: column !important;
gap: 12px !important;
}
.acb-master__right{
order: 1 !important; /* days first */
width: 100% !important;
border-left: 0 !important;
padding-left: 0 !important;
}
.acb-master__left{
order: 2 !important; /* filters + cards after */
width: 100% !important;
}
/* topbar: خليها عمودي */
.acb-master__top--row{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
/* 4) Weekly cards: كرت واحد بالعرض */
#acb_master_list{
grid-template-columns: 1fr !important;
gap: 10px !important;
}
/* اختياري: خلي النصوص تتنفس */
.acb-apCard__metaTxt{
white-space: normal !important;
}
}
/* =========================================================
DESKTOP FIX (REAL): move fixed background away from .acb-container
and ensure sidebar is above everything
========================================================= */
@media (min-width: 901px){
/* 1) stop the container fixed overlay from covering the whole viewport */
body.acb-ui--external .acb-container::before{
content: none !important;
display: none !important;
}
/* 2) recreate the same background safely on BODY (behind everything) */
body.acb-ui--external{
position: relative !important;
background: var(--acb-bg, #0b1220) !important;
}
body.acb-ui--external::before{
content: "" !important;
position: fixed !important;
inset: 0 !important;
pointer-events: none !important;
z-index: 0 !important;
background:
radial-gradient(900px 450px at 85% 10%, var(--acb-col-a181b002), transparent 60%),
radial-gradient(800px 420px at 15% 25%, var(--acb-col-44e3e71e), transparent 55%),
radial-gradient(900px 520px at 50% 110%, var(--acb-col-9a3d2556), transparent 55%),
linear-gradient(180deg, var(--acb-col-0f1ec95c) 0%, var(--acb-col-00b053d6) 100%);
}
/* 3) put the whole app shell above the body background */
body.acb-ui--external .acb-shell2{
position: relative !important;
z-index: 2 !important;
display: flex !important;
flex-direction: row-reverse !important; /* sidebar right */
align-items: stretch !important;
}
/* 4) force sidebar visible & above main */
body.acb-ui--external .acb-side{
position: sticky !important;
top: var(--acb-side-top, 14px) !important;
z-index: 5 !important;
display: flex !important;
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
filter: none !important;
background: var(--acb-card, rgba(255,255,255,.08)) !important;
border: 1px solid var(--acb-border, rgba(255,255,255,.10)) !important;
}
/* 5) main stays normal */
body.acb-ui--external main{
position: relative !important;
z-index: 3 !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
}
/* =========================================================
EXTERNAL DESKTOP — STICKY FIX (Header + Sidebar)
Paste at VERY END of aldelta-ui.css
========================================================= */
@media (min-width: 901px){
/* 0) sticky breakers kill switch */
body.acb-ui--external,
body.acb-ui--external > .acb-container,
body.acb-ui--external .acb-shell2,
body.acb-ui--external main,
body.acb-ui--external .acb-main,
body.acb-ui--external .wrap.acb-ui{
overflow: visible !important;
transform: none !important;
filter: none !important;
perspective: none !important;
}
/* 1) shell must be flex + allow sticky */
body.acb-ui--external .acb-shell2{
display: flex !important;
flex-direction: row-reverse !important; /* sidebar right */
align-items: flex-start !important; /* مهم للـ sticky */
gap: var(--acb-ex-gap, 12px) !important;
}
/* 2) sidebar sticky */
body.acb-ui--external .acb-side{
position: sticky !important;
top: var(--acb-side-top, 14px) !important;
align-self: flex-start !important;
z-index: 10000041 !important;
width: var(--acb-side-w, 260px) !important;
flex: 0 0 var(--acb-side-w, 260px) !important;
max-height: calc(100vh - (var(--acb-side-top, 14px) * 2)) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
body.acb-ui--external .acb-side__menu{
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
/* 4) desktop: overlay/toggle never interfere */
body.acb-ui--external .acb-oc-overlay{
display: none !important;
opacity: 0 !important;
pointer-events: none !important;
}
}
/* =========================================================
FINAL: STICKY (admin vs external) + Weekly Mobile Layout
Paste at VERY END of file
========================================================= */
:root{
--acb-sticky-top-admin: 32px;
--acb-sticky-top-external: 14px;
}
/* -------- Sticky breakers (external only) -------- */
body.acb-ui--external .acb-container,
body.acb-ui--external .acb-shell2,
body.acb-ui--external main,
body.acb-ui--external .acb-main,
body.acb-ui--external .wrap.acb-ui{
overflow: visible !important;
transform: none !important;
filter: none !important;
}
/* -------- WP Admin sticky header -------- */
.wp-admin .acb-ui .acb-header--sticky{
position: sticky !important;
top: var(--acb-sticky-top-admin) !important;
z-index: 999 !important;
margin-bottom: 14px !important;
background: var(--acb-card, rgba(255,255,255,.08)) !important;
}
/* -------- External sticky header -------- */
body.acb-ui--external .acb-header--sticky,
body.acb-ui--external .acb-topbar{
position: sticky !important;
top: var(--acb-sticky-top-external) !important;
z-index: 999 !important;
margin-bottom: 14px !important;
background: var(--acb-card, rgba(255,255,255,.08)) !important;
}
/* -------- External shell + sidebar sticky (desktop) -------- */
@media (min-width: 901px){
body.acb-ui--external .acb-shell2{
display: flex !important;
flex-direction: row-reverse !important; /* sidebar right */
align-items: flex-start !important; /* مهم للـ sticky */
gap: var(--acb-ex-gap, 12px) !important;
}
body.acb-ui--external .acb-side{
top: var(--acb-sticky-top-external) !important;
align-self: flex-start !important;
z-index: 10000041 !important;
width: var(--acb-side-w, 260px) !important;
flex: 0 0 var(--acb-side-w, 260px) !important;
max-height: calc(100vh - (var(--acb-sticky-top-external) * 2)) !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
}
body.acb-ui--external .acb-side__menu{
flex: 1 1 auto !important;
overflow-y: auto !important;
overflow-x: hidden !important;
}
}
/* =========================================================
WEEKLY SCHEDULE MOBILE (EXTERNAL + ADMIN)
بدون الاعتماد على .acb-page-weekly
========================================================= */
@media (max-width: 700px){
/* Summary cards */
#acb_week_summary.acb-summary,
.wrap.acb-ui .acb-summary{
grid-template-columns: 1fr !important;
}
/* Week controls (icons row + range + refresh) */
.acb-week-controls__body{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
.acb-navCards{
width: 100% !important;
justify-content: space-between !important;
flex-wrap: nowrap !important;
}
.acb-navCard{
width: 52px !important;
height: 52px !important;
padding: 0 !important;
justify-content: center !important;
border-radius: 16px !important;
}
.acb-navCard__txt{ display:none !important; }
.acb-week-controls__meta{
width: 100% !important;
margin-inline-start: 0 !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 8px !important;
}
#acb_week_refresh{
width: 100% !important;
}
/* Master layout: days first then filters/list */
.acb-master{ flex-direction: column !important; gap: 12px !important; }
.acb-master__right{
order: 1 !important;
width: 100% !important;
border-left: 0 !important;
padding-left: 0 !important;
}
.acb-master__left{
order: 2 !important;
width: 100% !important;
}
.acb-master__top--row{
flex-direction: column !important;
align-items: stretch !important;
gap: 10px !important;
}
/* Cards 1 per row */
#acb_master_list{
grid-template-columns: 1fr !important;
gap: 10px !important;
}
}
/* =========================================================
MOBILE HEADER (EXTERNAL): fixed header + correct spacing
Replace your broken mobile fixed blocks with this
========================================================= */
@media (max-width: 900px){
/* 0) no horizontal gaps */
html, body{ overflow-x: hidden !important; }
body.acb-ui--external > .acb-container{ padding: 0 !important; }
body.acb-ui--external .wrap.acb-ui{ margin: 0 !important; }
body.acb-ui--external .acb-shell2{ display:block !important; padding:0 !important; margin:0 !important; }
/* 1) menu button stays top-right */
body.acb-ui--external .acb-oc-toggle{
position: fixed !important;
top: calc(14px + env(safe-area-inset-top, 0px)) !important;
right: calc(14px + env(safe-area-inset-right, 0px)) !important;
z-index: 10000010 !important;
}
/* 2) header becomes fixed, full width (like other blocks) */
body.acb-ui--external .acb-header--sticky,
body.acb-ui--external .acb-topbar{
position: fixed !important;
top: calc(10px + env(safe-area-inset-top, 0px)) !important;
left: calc(10px + env(safe-area-inset-left, 0px)) !important;
right:calc(10px + env(safe-area-inset-right, 0px)) !important;
width: auto !important;
z-index: 1000009 !important;
/* make space INSIDE header for menu button (no shrinking width) */
padding-right: 64px !important; /* مساحة زر المنيو */
padding-left: 14px !important;
margin: 0 !important;
box-sizing: border-box !important;
border-radius: 18px !important;
box-shadow: 0 12px 28px rgba(0,0,0,.22) !important;
border: 1px solid rgba(255,255,255,.10) !important;
}
/* 3) content must NOT go under header */
body.acb-ui--external main,
body.acb-ui--external .acb-main{
padding-top: calc(90px + env(safe-area-inset-top, 0px)) !important;
}
/* 4) stop any parent from creating a scroll container that breaks layout */
body.acb-ui--external .acb-main,
body.acb-ui--external main,
body.acb-ui--external .wrap.acb-ui{
overflow: visible !important;
}
}
/* ===============================
FIX: overlay must be ABOVE header to blur it
=============================== */
@media (max-width: 900px){
body.acb-ui--external .acb-oc-overlay{
z-index: 1000010 !important;
}
/* الهيدر كان أعلى من overlay فمش بيتبلّر */
body.acb-ui--external.acb-oc-open .acb-header--sticky,
body.acb-ui--external.acb-oc-open .acb-topbar{
z-index: 1000005 !important; /* أقل من overlay */
}
/* زر المنيو يفضل أعلى الكل */
body.acb-ui--external .acb-oc-toggle{
z-index: 1000020 !important;
}
/* السايدبار أعلى من overlay */
body.acb-ui--external .acb-side{
z-index: 1000030 !important;
}
}
/* =========================================================
MOBILE: DAYS BAR (FINAL CLEAN) - one source of truth
Put at VERY END of aldelta-ui.css
========================================================= */
/* لو لسه مش بيطبق: بدل 900 بـ 1200 مؤقتًا */
@media (max-width: 900px){
/* عنوان الأيام مايدخلش على الزر */
body.acb-ui--external .acb-filter__head{
position: relative !important;
z-index: 2 !important;
margin-bottom: 10px !important;
}
/* شريط الأيام نفسه */
body.acb-ui--external #acb_master_days.acb-days{
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
overflow-x: auto !important;
overflow-y: hidden !important;
gap: 10px !important;
padding: 6px 2px 0 !important; /* 👈 شيلت الـ padding-bottom اللي كان بيبوّظ الشكل */
margin-top: 6px !important;
width: 100% !important;
max-width: 100% !important;
-webkit-overflow-scrolling: touch !important;
/* kill original */
padding-bottom: 0 !important;
}
/* كل يوم (الـ wrapper .acb-day) */
body.acb-ui--external #acb_master_days.acb-days .acb-day{
flex: 0 0 150px !important; /* 👈 عرض الكارت */
height: 80px !important; /* 👈 ارتفاع الكارت (هنا بتظبطه) */
min-height: 80px !important;
display: flex !important;
align-items: stretch !important;
}
/* الزر جوه اليوم */
body.acb-ui--external #acb_master_days.acb-days .acb-day__btn{
width: 100% !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
padding: 10px 12px !important;
line-height: 1.12 !important;
gap: 6px !important;
}
/* امنع أي margins تعمل اختلاف ارتفاع */
body.acb-ui--external #acb_master_days.acb-days .acb-day__top,
body.acb-ui--external #acb_master_days.acb-days .acb-day__bottom{
margin: 0 !important;
}
/* scrollbar */
body.acb-ui--external #acb_master_days::-webkit-scrollbar{ height: 6px; }
}
/* ===== DESKTOP: Sidebar full height ===== */
body.acb-ui--external .acb-shell2{
align-items: stretch !important; /* بدل flex-start */
}
body.acb-ui--external .acb-side{
height: calc(100vh - (var(--acb-sticky-top-external, 14px) * 2)) !important;
max-height: none !important; /* الغي max-height القديمة */
}
body.acb-ui--external .acb-side__menu{
flex: 1 1 auto !important;
overflow-y: auto !important;
}
/* =========================================
FORCE DARK SELECT DROPDOWN (Firefox fix)
Paste at VERY END
========================================= */
/* يخلي المتصفح يعامل الفورم كنظام Dark (مهم لفايرفوكس) */
.acb-ui{
color-scheme: dark !important;
}
.acb-table-foot{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:12px 10px;
margin-top:8px;
border-top:1px solid rgba(255,255,255,.08);
flex-wrap:wrap;
}
.acb-foot-left,.acb-foot-mid,.acb-foot-right{display:flex; align-items:center; gap:10px;}
.acb-pager{display:flex; gap:6px; flex-wrap:wrap; align-items:center;}
.acb-pagebtn{
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.04);
padding:7px 10px;
border-radius:10px;
cursor:pointer;
font-weight:700;
}
.acb-pagebtn.is-active{
background:rgba(91,140,255,.18);
border-color:rgba(91,140,255,.35);
}
.acb-pagebtn:disabled{opacity:.45; cursor:not-allowed;}
.acb-ellipsis{opacity:.6; padding:0 6px;}
/* ===== Timetable ===== */
.acb-tt-block { margin-bottom: 14px; }
.acb-tt-title {
font-weight: 800;
margin: 8px 0 10px;
padding: 10px 12px;
border: 1px solid rgba(0,0,0,.08);
border-radius: 10px;
background: rgba(0,0,0,.03);
}
.acb-tt-tableWrap { overflow:auto; }
.acb-tt-table {
width: 100%;
border-collapse: collapse;
min-width: 720px;
}
.acb-tt-table th,
.acb-tt-table td {
border: 1px solid rgba(0,0,0,.12);
padding: 10px 8px;
vertical-align: top;
text-align: center;
}
.acb-tt-table thead th {
font-weight: 800;
background: rgba(0,0,0,.05);
}
.acb-tt-day { width: 140px; font-weight: 800; }
.acb-tt-cell { line-height: 1.65;}
.acb-ico{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;line-height:1}
.acb-svg{width:1.05em;height:1.05em;display:block}
.acb-svg.is-stroke{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}