:root{--bg:#ffeaea;--card:#ffffffc5;--ink:#5b1031;--muted:#a34b68;--accent:#cf1f69;--pill:#8b1d4d;--ok:#1aa36e;--shadow:0 10px 30px rgba(207,31,105,.12);--dayh:36px;--dayfs:.85rem;--radius:16px;--appbar-h:56px;--sticky-h:54px}
html,body{background:var(--bg);color:var(--ink);font-family:"Tajawal","Segoe UI",Tahoma,Arial,sans-serif;height:100%;margin:0;display:flex;flex-direction:column;overflow:hidden}
#loadingOverlay{position:fixed;inset:0;background:rgba(0,0,0,.8);display:none;align-items:center;justify-content:center;z-index:9999}
#loadingOverlay .box{background:#fff;padding:20px;border-radius:14px;box-shadow:var(--shadow);display:flex;align-items:center;gap:10px;font-weight:800}
.spinner{width:22px;height:22px;border-radius:50%;border:3px solid #eee;border-top-color:var(--accent);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.skeleton{position:relative;overflow:hidden;background:#fff;border-radius:12px}
.skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.65),transparent);animation:shimmer .6s infinite}
@keyframes shimmer{100%{transform:translateX(100%)}}
.sk-card{height:80px;border-radius:14px;background:#ffe3ea;margin-bottom:8px}
.appbar{position:sticky;top:0;z-index:1020;background:var(--bg);display:flex;align-items:center;gap:11px;padding:14px 18px;height:var(--appbar-h)}
.btn-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:#fff;color:var(--accent);border:0;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);cursor:pointer}
.app-title{flex:1;text-align:center;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.left-tools,.right-tools{display:flex;gap:8px}
.cal-wrap{padding:0 10px;user-select:none;margin:4px auto}
.cal-head{display:flex;justify-content:space-between;align-items:center;margin:6px 0;padding:0 20px}
.arrow-btn{width:34px;height:34px;border-radius:50%;border:0;background:#fff;color:var(--accent);display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);cursor:pointer}
.week-row,.days-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.week-row{color:var(--muted);font-weight:700;margin:6px 2px;text-align:center;font-size:.8rem}
.cal-fixed{height:calc(24px + 6px + (var(--dayh) * 6 + 5*6px))}
.days-grid{grid-template-rows:repeat(6,var(--dayh));height:calc(var(--dayh) * 6 + 5*6px);margin:8px;margin-bottom:0}
.day{background:#fff;border-radius:12px;height:var(--dayh);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted);cursor:pointer;position:relative;font-size:var(--dayfs);box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);transition:all .2s;will-change:transform,opacity;backface-visibility:hidden}
.day.muted{opacity:.45}
.day.today{background:#ffd9e7;color:#7b1642;outline:1px solid rgba(207,31,105,.25)}
.day.selected{outline:2px solid var(--accent)}
.day.has-booking::after{content:"";position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.day.double::before,.day.double::after{content:"";position:absolute;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.day.double::before{left:calc(50% - 7px)}
.day.double::after{left:calc(50% + 7px)}
.day.triple::before,.day.triple::after{content:"";position:absolute;bottom:4px;width:6px;height:6px;border-radius:50%;background:var(--accent)}
.day.triple::before{left:calc(50% - 12px)}
.day.triple::after{left:calc(50% + 12px)}
.day.triple .dot-center{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:6px;height:6px;border-radius:50%;background:var(--accent)}
.day.selected.has-booking::after,.day.selected.double::before,.day.selected.double::after,.day.selected.triple::before,.day.selected.triple::after,.day.selected.triple .dot-center{background:#7b1642}
.sticky-bar{position:sticky;top:var(--appbar-h);z-index:1019;background:var(--bg);padding:8px;box-shadow:0 4px 12px rgba(0,0,0,.03);display:flex;align-items:center;gap:10px;height:var(--sticky-h)}
.square{width:32px;height:32px;border-radius:8px;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--accent);box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);cursor:pointer}
.stats{display:flex;gap:14px;align-items:center;color:var(--muted);white-space:nowrap}
.stats .dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-inline-end:6px}
.dot.booked{background:var(--accent)}
.dot.free{background:var(--ok)}
.toolbar{margin-inline-start:auto;display:flex;gap:8px;align-items:center}
.chip-mini{display:inline-flex;align-items:center;gap:6px;background:#fff;border-radius:10px;padding:6px 10px;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);font-weight:700}
.status-chip{display:none}
#availabilitySpot{position:relative}
.availability-center{margin:10px auto;max-width:600px;text-align:center;background:#fff;border:2px dashed var(--ok);border-radius:18px;padding:16px;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);font-size:0.9rem;font-weight:800}
.availability-center.unavailable{border-color:var(--accent);color:var(--accent)}
.content-scroll{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
.cards-scroll{flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:16px;contain:content;will-change:transform}
.sk-wrap{padding:8px 14px 0}
.booking-card{background:var(--card);border-radius:14px;margin:8px 14px;overflow:hidden;position:relative;height:90px;display:flex;flex-direction:column;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);cursor:pointer;transition:transform .2s;will-change:transform,opacity;backface-visibility:hidden}
.booking-card:hover{transform:translateY(-2px)}
.booking-card.tentative{background:#ffffff}
.booking-card .edge{position:absolute;inset-inline-end:0;top:0;width:6px;height:100%;background:var(--accent);border-start-start-radius:10px;border-end-start-radius:10px}
.booking-card .date-line{flex:0 0 24px;padding:4px 8px;color:var(--muted);font-weight:700;font-size:.8rem;display:flex;justify-content:space-between;align-items:center}
.booking-card .body{flex:1 1 auto;display:grid;grid-template-columns:1.2fr .8fr 1.2fr;gap:6px;padding:1px 8px;align-items:center}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.b-right{display:flex;flex-direction:column;align-items:flex-start}
.b-right .name{font-size:1rem;font-weight:800;max-width:100%;direction:rtl;text-align:right}
.b-right .occ{color:var(--muted);font-weight:700;margin-top:2px;font-size:1rem}
.b-center{display:flex;justify-content:center;align-items:center;font-weight:900;font-size:1rem;color:#7b1642}
.b-left{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.remain{display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:1rem;color:#7b1642;background:#fff;border-radius:8px;padding:2px 4px}
.status{color:#fff;background:var(--accent);border-radius:8px;padding:2px 9px;font-size:.75rem;font-weight:800}
.ico{background:#fff;width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;color:var(--accent);flex:0 0 24px;font-size:1rem;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow)}
.badge-soft{background:#fff;color:var(--muted);border-radius:8px;padding:2px 6px;font-weight:800;font-size:.95rem;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow)}
.center-badge{display:inline-block}
.fab{position:fixed;bottom:16px;inset-inline-start:16px;width:56px;height:56px;background:var(--pill);color:#fff;border-radius:30px;display:flex;align-items:center;justify-content:center;font-size:30px;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 16px 28px rgba(139,29,77,.22);z-index:1031;cursor:pointer;animation:pulse 2s infinite}
@keyframes pulse{0%{transform:scale(1);box-shadow:0 0 0 0 rgba(207,31,105,0.6)}70%{transform:scale(1.05);box-shadow:0 0 0 15px rgba(207,31,105,0)}100%{transform:scale(1);box-shadow:0 0 0 0 rgba(207,31,105,0)}}
.details-collapsed{display:none}
.inline-icon-btn{position:absolute;inset-inline-end:8px;top:32px;background:#fff;border:0;width:30px;height:30px;border-radius:8px;box-shadow:0 0 0 1px rgba(0,0,0,.06),var(--shadow);color:var(--accent);cursor:pointer}
#bookingModal .modal-content{border-radius:20px;border:0;background:linear-gradient(180deg,#fff 0%,#fff6f8 100%);box-shadow:0 20px 60px rgba(207,31,105,.15)}
#bookingModal .modal-header{border:0;background:linear-gradient(90deg,#ffe4ee,#ffd9e7);border-top-left-radius:20px;border-top-right-radius:20px}
#bookingModal .modal-title{font-weight:900;color:#7b1642}
#bookingModal .form-label{font-weight:800;color:#7b1642;font-size:.95rem;display:flex;align-items:center;gap:8px}
#bookingModal .form-label .mini-ico{width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;border-radius:6px;background:#fff;color:#cf1f69;font-size:.8rem;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
#bookingModal .form-control,#bookingModal .form-select{border-radius:12px;border:1px solid #f2c2d7;box-shadow:0 1px 0 rgba(0,0,0,.02) inset}
#bookingModal .form-control:focus,#bookingModal .form-select:focus{outline:none;border-color:#cf1f69;box-shadow:0 0 0 4px rgba(207,31,105,.12)}
#bkOccasionChips{gap:10px !important}
#bkOccasionChips .chip-mini.oc-chip{padding:10px 14px;border-radius:14px;background:#fff;color:#7b1642;border:2px solid transparent;transition:all .15s ease;box-shadow:0 0 0 1px rgba(0,0,0,.04),var(--shadow);cursor:pointer}
#bkOccasionChips .chip-mini.oc-chip:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(207,31,105,.12)}
#bkOccasionChips .chip-mini.oc-chip.active{background:#ffd9e7;border-color:#cf1f69;color:#5b1031}
#bkOccasionChips .chip-mini.oc-chip input[type="radio"]{display:none}
#extrasWrap .chip-mini{padding:8px 12px}
#adjustBox{border-color:#f2c2d7;background:#fff7fa;border-radius:12px;display:grid !important;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;padding:12px;margin-top:8px}
#adjustBox .form-control{height:42px;border-radius:12px;font-weight:700;border:1px solid #f2c2d7}
#adjustBox .form-control::placeholder{color:#a34b68;opacity:.65;font-weight:700}
#btnReminder{border-width:2px;border-radius:12px}
#saveBooking{border-radius:12px;font-weight:800}
#bookingModal .row-name-phone .col-name{flex:0 0 auto;width:58.3333%}
#bookingModal .row-name-phone .col-phone{flex:0 0 auto;width:41.6667%}
#extrasWrap .chip-mini.ex-chip{padding:10px 14px;border-radius:14px;background:#fff;color:#7b1642;border:2px solid transparent;transition:all .15s ease;box-shadow:0 0 0 1px rgba(0,0,0,.04),var(--shadow);cursor:pointer}
#extrasWrap .chip-mini.ex-chip:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(207,31,105,.12)}
#extrasWrap .chip-mini.ex-chip.active{background:#ffd9e7;border-color:#cf1f69;color:#5b1031}
#extrasWrap .chip-mini.ex-chip small.price{display:none}
#btnAddExtra{margin-inline-start:8px;border-radius:10px;padding:6px 10px}
#adjustInlineRow{margin-top:6px}
#adjustInlineRow .form-label{font-weight:800;color:#7b1642}
#adjustInlineRow .form-control{border-radius:12px}
@media (max-width:480px){#adjustBox{grid-template-columns:1fr}}
@media (max-width:576px){#previewModal .modal-dialog{width:100vw;max-width:100vw;height:100vh;margin:0}#previewModal .modal-content{height:100vh;border-radius:20px 20px 0 0}#previewModal .modal-body{overflow:auto;font-size:1.06rem}#previewModal #previewBody b{font-size:1.08rem}#previewModal #previewBody .row>[class^="col-"]{line-height:1.9}}
#previewModal .modal-dialog{height:100%;position:fixed;bottom:0;left:0;right:0;margin:0;width:100%;max-width:100%;transform:translateY(100%);transition:transform .3s ease-out}
#previewModal .modal-content{height:100%;border-radius:20px 20px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,0.3)}
#previewModal.show .modal-dialog{transform:translateY(30%) !important}
.modal-backdrop.show,.offcanvas-backdrop.show{background-color:rgba(0,0,0,0.35) !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;border:none !important}
.offcanvas-70{width:70vw}
@media (max-width:576px){.offcanvas-70{width:92vw}}
.offcanvas .list-title{font-weight:900;color:#7b1642;margin:8px 0 4px;opacity:.9}
.offcanvas .menu-hint{font-size:.85rem;color:#a34b68;margin-bottom:8px}
.offcanvas .menu-search{position:sticky;top:0;z-index:2;background:#fff;padding-bottom:8px;margin-bottom:6px}
.offcanvas .menu-section{margin-top:6px}
.offcanvas .menu-footer{font-size:.85rem;color:#a34b68;border-top:1px solid #eee;padding-top:8px;margin-top:12px}
::-webkit-scrollbar{width:0;height:0}
body{-ms-overflow-style:none;scrollbar-width:none}
#sideMenu .list-group-item{font-size:1.15rem;padding-top:.75rem;padding-bottom:.75rem}
#sideMenu .list-title{font-size:1.25rem}
.offcanvas-body .list-group-item{display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(0,0,0,.05);border-radius:10px;margin-bottom:6px}
.offcanvas-body .list-group-item i.ms-2{color:var(--accent)}
.notif-badge{position:absolute;top:-6px;inset-inline-end:-6px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:#e91e63;color:#fff;font-size:11px;line-height:18px;font-weight:800;box-shadow:0 2px 6px rgba(0,0,0,.2);pointer-events:none}
#notifBody .notif-item{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border:1px solid rgba(0,0,0,.06);border-radius:10px;margin-bottom:8px;background:#fff}
#notifBody .notif-item.unread{border-color:#ffd6e5;background:#fff6f8}
#notifBody .notif-dot{width:10px;height:10px;border-radius:50%;margin-top:6px;background:#e91e63}
#notifBody .notif-content{flex:1}
#notifBody .notif-title{font-weight:900;color:#7b1642}
#notifBody .notif-time{font-size:12px;color:#a34b68}
#notifBody .notif-mark{cursor:pointer;font-size:12px;color:#cf1f69}
.add-chip{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:14px;background:#fff;color:#7b1642;border:2px dashed #cf1f69;cursor:pointer;font-weight:800;box-shadow:0 0 0 1px rgba(0,0,0,.04),var(--shadow);transition:all .15s ease}
.add-chip:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(207,31,105,.12)}
.add-chip i{font-size:.95rem}
.sticky-bar{position:sticky;top:calc(var(--appbar-h) + 0px);z-index:1010;background:var(--bg);padding:8px 10px;box-shadow:0 4px 12px rgba(0,0,0,.03);display:flex;align-items:center;gap:10px;height:var(--sticky-h);min-height:var(--sticky-h)}
.offcanvas-70{width:70vw !important;border-radius:20px 0 0 20px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.18)}
.offcanvas-backdrop.show{backdrop-filter:blur(6px);background-color:rgba(0,0,0,0.35)}
.sync-row{font-size:11px;line-height:1.2;padding:4px 6px;color:var(--muted);opacity:.9;border-top:1px solid rgba(0,0,0,.05)}
.offcanvas,.offcanvas.show{z-index:1300}
.offcanvas-backdrop.show{z-index:1290}
.b-right .name{font-size:1.06rem;font-weight:800}
.stats-panel{padding:15px;background:#fff;border-radius:16px;margin:10px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.stats-panel .stat-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #f0f0f0}
.stats-panel .stat-item:last-child{border-bottom:none}
.stat-value{font-weight:900;font-size:1.3rem;color:var(--accent)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:#ffe4ee;color:var(--accent)}
.login-modal{max-width:400px;margin:50px auto;padding:30px;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.1)}
.login-header{text-align:center;margin-bottom:30px}
.login-header h3{color:var(--accent);font-weight:900}
.form-group{margin-bottom:20px}
.form-group label{display:block;margin-bottom:8px;font-weight:700;color:#5b1031}
.form-control{border-radius:12px;border:2px solid #f2c2d7;padding:12px 15px;width:100%;transition:all .3s}
.form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(207,31,105,.1)}
.btn-login{width:100%;padding:14px;background:var(--accent);color:#fff;border:none;border-radius:12px;font-weight:800;font-size:1.1rem;cursor:pointer;transition:all .3s}
.btn-login:hover{background:#b11a5a;transform:translateY(-2px)}
.print-header{text-align:center;margin-bottom:30px;border-bottom:2px solid #f0f0f0;padding-bottom:20px}
.print-header h2{color:var(--accent);font-weight:900}
.print-table{width:100%;border-collapse:collapse;margin:20px 0}
.print-table th{background:#ffe4ee;padding:12px;text-align:right;font-weight:800;color:#5b1031}
.print-table td{padding:12px;border-bottom:1px solid #f0f0f0}
.print-total{background:#f8f9fa;padding:15px;border-radius:10px;margin-top:20px}
.print-total .total-row{display:flex;justify-content:space-between;padding:8px 0}
.print-total .grand-total{font-weight:900;font-size:1.2rem;color:var(--accent);border-top:2px solid #f0f0f0;margin-top:10px;padding-top:10px}
.receipt-card{background:#fff;border-radius:16px;padding:20px;margin:10px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.receipt-header{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #f0f0f0;padding-bottom:15px;margin-bottom:15px}
.receipt-header .receipt-title{font-weight:900;color:var(--accent);font-size:1.3rem}
.receipt-body .receipt-row{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid #f8f8f8}
.receipt-body .receipt-row:last-child{border-bottom:none}
.receipt-footer{background:#f8f9fa;padding:15px;border-radius:10px;margin-top:15px}
.occasion-card{transition:transform .3s}
.occasion-card:hover{transform:translateY(-5px)}
#advancedStatsModal .chart-container{height:300px;width:100%}
.payment-receipt-modal .modal-content{border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fff9fb 100%);box-shadow:0 20px 60px rgba(207,31,105,.2)}
.payment-receipt-modal .modal-header{background:linear-gradient(90deg,#d4f7e2,#c2f0d1);border-bottom:2px solid #1aa36e}
.payment-receipt-modal .receipt-number{font-size:1.8rem;font-weight:900;color:#1aa36e;text-align:center;margin:15px 0}
.payment-receipt-modal .receipt-amount{font-size:2.5rem;font-weight:900;color:#1aa36e;text-align:center;margin:20px 0;direction:ltr}
.payment-receipt-modal .receipt-details .detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0}
.payment-receipt-modal .receipt-details .detail-row:last-child{border-bottom:none}
.payment-receipt-modal .receipt-details .detail-label{color:#5b1031;font-weight:700}
.payment-receipt-modal .receipt-details .detail-value{color:#1aa36e;font-weight:800}
.payment-receipt-modal .receipt-footer{background:#f8f9fa;border-radius:12px;padding:20px;margin-top:20px;text-align:center}
.settings-tabs .nav-tabs{border-bottom:2px solid #f2c2d7}
.settings-tabs .nav-tabs .nav-link{color:#a34b68;font-weight:700;border:none;padding:12px 20px}
.settings-tabs .nav-tabs .nav-link.active{color:#cf1f69;background:#fff;border-bottom:3px solid #cf1f69}
.settings-tabs .tab-content{padding:20px 0}
.settings-section{background:#fff;border-radius:12px;padding:20px;margin-bottom:20px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.settings-section h5{color:#5b1031;margin-bottom:15px;padding-bottom:10px;border-bottom:2px solid #ffe4ee}
.default-reminders .reminder-item{background:#fff7fa;border-radius:10px;padding:12px;margin-bottom:10px;border:1px solid #ffd6e5}
.default-reminders .reminder-item .reminder-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.default-reminders .reminder-item .reminder-title{font-weight:800;color:#7b1642}
.default-reminders .reminder-item .reminder-time{font-size:.85rem;color:#a34b68}
.booking-table-container{background:#fff;border-radius:12px;padding:15px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.booking-table-container table{width:100%;border-collapse:collapse}
.booking-table-container th{background:#ffe4ee;color:#5b1031;padding:12px;text-align:right;font-weight:800;border-bottom:2px solid #f2c2d7}
.booking-table-container td{padding:12px;border-bottom:1px solid #f0f0f0}
.booking-table-container tr:hover{background:#fff7fa}
.payments-table-container{background:#fff;border-radius:12px;padding:15px;box-shadow:0 5px 15px rgba(0,0,0,.05)}
.payments-table-container table{width:100%;border-collapse:collapse}
.payments-table-container th{background:#c2f0d1;color:#0d7a4f;padding:12px;text-align:right;font-weight:800;border-bottom:2px solid #a8e6c3}
.payments-table-container td{padding:12px;border-bottom:1px solid #e8f5ee}
.payments-table-container tr:hover{background:#f0faf5}
.action-buttons{display:flex;gap:8px}
.action-buttons .btn{font-size:.85rem;padding:6px 12px}
.welcome-setup-modal .modal-content{border-radius:20px;background:linear-gradient(180deg,#fff 0%,#fff6f8 100%)}
.welcome-setup-modal .modal-header{background:linear-gradient(90deg,#ffe4ee,#ffd9e7);border-bottom:2px solid #cf1f69}
.welcome-setup-modal .setup-steps{display:flex;justify-content:space-between;margin:30px 0;position:relative}
.welcome-setup-modal .setup-steps:before{content:'';position:absolute;top:50%;left:0;right:0;height:2px;background:#f2c2d7;z-index:1}
.welcome-setup-modal .setup-step{position:relative;z-index:2;text-align:center;flex:1}
.welcome-setup-modal .step-number{width:40px;height:40px;background:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-weight:900;color:#cf1f69;border:2px solid #f2c2d7}
.welcome-setup-modal .setup-step.active .step-number{background:#cf1f69;color:#fff;border-color:#cf1f69}
.welcome-setup-modal .step-title{font-size:.9rem;color:#5b1031;font-weight:700}
.welcome-setup-modal .setup-content{padding:20px 0;min-height:300px}
.welcome-setup-modal .setup-actions{display:flex;justify-content:space-between;margin-top:30px}
.import-export-section{background:#f8f9fa;border-radius:12px;padding:20px;margin-top:20px}
.import-export-section h6{color:#5b1031;margin-bottom:15px}
.data-management-card{background:#fff;border-radius:10px;padding:15px;margin-bottom:15px;border:1px solid #f0f0f0}
.data-management-card .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.data-management-card .card-title{font-weight:800;color:#5b1031;margin:0}
.data-management-card .card-description{color:#a34b68;font-size:.9rem}
.modal{z-index:1060}
.modal-backdrop{z-index:1050}
.modal.fade{z-index:1060}.modal-backdrop.fade{z-index:1050}
#occModal.modal,#extraAddModal.modal,#remModal.modal,#afterSaveModal.modal,#paymentReceiptModal.modal,#showReceiptModal.modal,#welcomeSetupModal.modal{z-index:1070 !important}
#occModal.modal + .modal-backdrop,#extraAddModal.modal + .modal-backdrop,#remModal.modal + .modal-backdrop,#afterSaveModal.modal + .modal-backdrop,#paymentReceiptModal.modal + .modal-backdrop,#showReceiptModal.modal + .modal-backdrop,#welcomeSetupModal.modal + .modal-backdrop{z-index:1065 !important}
#advancedStatsModal .modal-dialog{transform:none !important;margin:1.75rem auto}
#advancedStatsModal.show .modal-dialog{transform:none !important}
.modal-backdrop.fade.show{opacity:.35}.modal.fade.show{opacity:1}
#authTabs .nav-link{padding:10px 15px;font-weight:600;color:var(--muted);border:none;border-bottom:3px solid transparent}
#authTabs .nav-link.active{color:var(--accent);background:none;border-bottom-color:var(--accent)}
#authTabs .nav-link:hover{color:var(--accent)}
@media (max-width:576px){.modal-dialog{margin:10px;max-width:calc(100% - 20px)}.login-modal{width:95% !important;padding:20px !important}#authTabs .nav-item{flex:1;text-align:center}}
/* تحسينات جديدة */
#monthLabel{font-size:1rem;font-weight:900;color:#7b1642;padding:0 10px;text-align:center}
.contract-modal .modal-content{border-radius:20px;border:2px solid var(--accent)}
.contract-header{background:linear-gradient(90deg,#ffe4ee,#ffd9e7);padding:25px;border-radius:18px 18px 0 0;text-align:center;border-bottom:3px solid var(--accent)}
.contract-logo{max-height:80px;margin-bottom:15px}
.contract-title{font-size:1.8rem;font-weight:900;color:#5b1031;margin:10px 0}
.contract-subtitle{color:#a34b68;font-weight:700;font-size:1.1rem}
.contract-body{padding:30px;font-size:1.05rem;line-height:1.8}
.contract-section{margin-bottom:25px;padding-bottom:20px;border-bottom:1px dashed #f2c2d7}
.contract-section h5{color:#7b1642;font-weight:800;margin-bottom:15px;display:flex;align-items:center;gap:10px}
.contract-section h5 i{color:var(--accent)}
.contract-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid #f8f8f8}
.contract-row .label{color:#5b1031;font-weight:700;min-width:150px}
.contract-row .value{color:#7b1642;font-weight:800;text-align:left;flex:1}
.contract-signatures{display:flex;justify-content:space-between;margin-top:40px;padding-top:30px;border-top:2px solid #f2c2d7}
.signature-box{text-align:center;width:45%}
.signature-line{border-bottom:1px solid #5b1031;height:30px;margin:20px 0}
.contract-footer{background:#f8f9fa;padding:20px;border-radius:0 0 18px 18px;text-align:center;color:#a34b68;font-size:.9rem;border-top:1px solid #eee}
#statusBar{position:fixed;bottom:0;left:0;right:0;background:rgba(255,255,255,.95);border-top:1px solid #f2c2d7;padding:5px 15px;display:flex;justify-content:space-between;align-items:center;font-size:12px;z-index:1000;box-shadow:0 -2px 10px rgba(0,0,0,.05)}
.status-indicator{display:flex;align-items:center;gap:8px}
.status-dot{width:8px;height:8px;border-radius:50%;background:#1aa36e;animation:pulse 2s infinite}
.status-dot.offline{background:#ff6b6b}
.status-dot.syncing{background:#ffa726;animation:spin 1s linear infinite}
.connection-status{color:#5b1031;font-weight:700}
.messages-tab textarea{min-height:150px;font-family:"Tajawal",sans-serif}
.variable-tag{display:inline-block;background:#ffe4ee;color:#7b1642;padding:2px 8px;border-radius:6px;font-size:.85rem;margin:0 3px;cursor:pointer;border:1px dashed #cf1f69}
.variable-tag:hover{background:#ffd9e7}
.session-timeout{position:fixed;top:10px;right:10px;background:rgba(207,31,105,.9);color:white;padding:10px 15px;border-radius:10px;font-size:12px;z-index:9999;box-shadow:0 4px 15px rgba(0,0,0,.2);display:none}
.logo-preview{max-width:150px;max-height:80px;object-fit:contain;border:2px dashed #f2c2d7;border-radius:10px;padding:10px;margin-top:10px}
.logo-upload-btn{background:#fff;border:2px solid var(--accent);color:var(--accent);border-radius:10px;padding:8px 15px;cursor:pointer;transition:all .3s;font-weight:700}
.logo-upload-btn:hover{background:var(--accent);color:#fff}
.phone-prefix{background:#f8f9fa;border:1px solid #f2c2d7;border-radius:10px 0 0 10px;padding:10px 15px;font-weight:700;color:#5b1031;min-width:90px;text-align:center}
.phone-input-group{display:flex;align-items:stretch}
.phone-input-group .form-control{border-radius:0 10px 10px 0;border-right:none}
.alert-floating{position:fixed;top:20px;right:20px;z-index:9999;min-width:300px;box-shadow:0 10px 30px rgba(0,0,0,.2);animation:slideIn .3s ease}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}
.bg-transparent{background:transparent}
.receipt-header-design{background:linear-gradient(135deg,#cf1f69 0%,#8b1d4d 100%);color:white;padding:25px;border-radius:15px 15px 0 0;position:relative;overflow:hidden}
.receipt-header-design::before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(255,255,255,0.1) 1px,transparent 1px);background-size:20px 20px;opacity:.3}
.receipt-watermark{position:absolute;font-size:120px;color:rgba(255,255,255,0.1);font-weight:900;transform:rotate(-45deg);top:30%;left:10%;pointer-events:none}
.company-info-header{display:flex;align-items:center;gap:15px;margin-bottom:15px}
.company-info-header .logo-header{max-height:60px}
.company-details{flex:1}
.company-details h3{color:white;margin:0;font-weight:900}
.company-details p{color:rgba(255,255,255,.9);margin:5px 0;font-size:.9rem}
.receipt-detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f0f0f0}
.receipt-detail-row.total{background:#f8f9fa;font-weight:900;color:#5b1031;border-radius:8px;margin:10px -15px;padding:15px}
.receipt-footer-design{background:#f8f9fa;padding:20px;border-radius:0 0 15px 15px;text-align:center;border-top:2px solid #f2c2d7}
.terms-box{background:#fff7fa;border:1px solid #ffd6e5;border-radius:12px;padding:15px;margin:15px 0;max-height:200px;overflow-y:auto;font-size:.9rem;line-height:1.6}
.policy-badge{background:#ffe4ee;color:#7b1642;padding:4px 12px;border-radius:20px;font-size:.8rem;font-weight:700;display:inline-block;margin:0 5px}
/* تحسين شارة الإشعارات */
.notif-badge {
    position: absolute;
    top: 2px; /* تعديل الموضع */
    right: 2px; /* استخدام right بدلاً من inset-inline-end */
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: #e91e63;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
    font-weight: 800;
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    pointer-events: none;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* عندما تكون القيمة مزدوجة الأرقام */
.notif-badge[style*="display: inline-block"] {
    right: -2px;
    min-width: 22px;
}

/* تحسين زر الأيقونة */
.btn-icon {
    position: relative; /* ضروري لعمل position: absolute داخلية */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: var(--accent);
    border: 0;
    box-shadow: 0 0 0 1px rgba(0,0,0,.06), var(--shadow);
    cursor: pointer;
    overflow: visible; /* يسمح برؤية المحتوى خارج الحدود */
}

/* تأثير عند وجود إشعارات */
.btn-icon.has-notif::after {
    content: '';
    position: absolute;
    top: 5px;
    right: 5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e91e63;
    animation: pulse 1.5s infinite;
}

/* شارة الإشعارات في القائمة الجانبية */
#liveNotifBadge {
    top: 5px;
    right: 5px;
    left: auto; /* إلغاء أي تعيين لـ left */
    transform: none;
}