/* Balsam logo palette: leaf green, blossom pink, and sky accents. */
body.balsam-app{--sidebar-width:215px;--primary:#397600;--primary-hover:#2d6000;--text-main:#2b4219;--text-muted:#6b8457;--border-color:#eaf4e3;background:#f4f9f0;color:#2b4219;font-size:12px}body.balsam-app::before{background:linear-gradient(120deg,#f2f8ee,#f9fcf6 65%,#f3f8ef)}.balsam-app a{text-decoration:none;color:inherit}.balsam-app button,.balsam-app input,.balsam-app select{font:inherit}.balsam-app :focus-visible{outline:3px solid #ffa933;outline-offset:3px}.balsam-app .dash-icon{flex-shrink:0;vertical-align:middle}.balsam-app [hidden]{display:none!important}.balsam-app .sidebar{padding:26px 13px 15px;background:#fbfdfab8;border-left:1px solid #eaf4e3;box-shadow:none}.balsam-app .brand-section{margin-bottom:28px}.balsam-app .brand-icon-wrapper{width:64px;height:64px;background:#fff;border:1px solid #eaf4e2;border-radius:18px;box-shadow:none;margin-bottom:9px}.balsam-app .brand-icon-wrapper img{width:56px;height:56px}.balsam-app .brand-title{font-size:23px;color:#2c4419}.balsam-app .brand-subtitle{font-size:11px;color:#6b805c}.balsam-app .nav-menu{gap:8px;flex-grow:0}.balsam-app .nav-item{padding:12px 10px;border-radius:13px;font-size:12px;font-weight:600;gap:9px;color:#6b8457}.balsam-app .nav-item:hover{background:#ebf4e5;transform:none}.balsam-app .nav-item.active{background:#eaf4e3;color:#67a03b;box-shadow:none}.balsam-app .nav-item.active::before,.balsam-app .nav-item.active::after{display:none}.balsam-app .nav-icon{width:21px;display:flex}.balsam-app .badge-count{background:#f0f7ea!important;color:#699249!important;min-width:18px;padding:2px 5px;font-size:10px;border-radius:6px;white-space:nowrap;flex-shrink:0}.balsam-app .sidebar-progress-card{margin-top:35px;padding:16px 10px;background:linear-gradient(125deg,#e8f2e0,#f3f9ef);border:1px solid #e5f1db;border-radius:17px;box-shadow:none}.balsam-app .progress-card-title{font-size:13px;color:#67a03b}.balsam-app .progress-card-desc{font-size:11px;color:#698d4e}.balsam-app .progress-circle-wrap{width:66px;height:66px;margin:12px auto}.balsam-app .progress-circle-bar{stroke:#67a03b}.balsam-app .progress-circle-bg{stroke:#daedcc}.balsam-app .progress-inner-text{font-size:19px;color:#67a03b}.balsam-app .progress-card-badge{background:#67a03b;color:#fff;font-size:11px;border-radius:20px;padding:7px}.balsam-app .sidebar-user-card{background:#fff8;border:0;box-shadow:none;margin-top:auto;padding:16px 7px 0}.balsam-app .sidebar-user-avatar{background:#f1f7ec;color:#67a03b;border-radius:50%;width:34px;height:34px}.balsam-app .sidebar-user-name{font-size:11px}.balsam-app .sidebar-user-role{font-size:10px}.balsam-app .sidebar-logout-btn{font-size:11px;color:#6a8b51;padding:7px;background:#f3f8ef}/* Shared workspace primitives; dashboard retains its approved composition. */
.balsam-app{--radius-lg:18px;--radius-md:14px;--radius-sm:10px;--shadow-sm:0 2px 7px #669f3b05;--shadow-md:0 5px 20px #669f3b0b;--text-light:#6a8754;--bg-card:#ffffff;--active-pill:#eaf4e3;--active-pill-text:#397600;--primary:#397600;--primary-hover:#2d6000}
.balsam-app:not(.balsam-dashboard) .main-wrapper{min-width:0;width:calc(100% - var(--sidebar-width));background:transparent}
.balsam-app:not(.balsam-dashboard) .top-header{margin:23px 27px 0;padding:24px 27px;min-height:116px;border:1px solid #e3f1d8;border-radius:20px;background:linear-gradient(110deg,#e8f3e0,#f2f8ee);align-items:center;box-shadow:none;gap:18px}
.balsam-app:not(.balsam-dashboard) .welcome-text h2{font-size:25px;line-height:1.6;color:#36531f;font-weight:800;letter-spacing:-.5px}
.balsam-app:not(.balsam-dashboard) .welcome-text p{font-size:12px;line-height:1.9;color:#6a8b51;margin-top:5px}
.balsam-app:not(.balsam-dashboard) .user-avatar-img{background:#d8ecc8;box-shadow:none;color:#67a03b;border-radius:15px;width:48px;height:48px;display:grid;place-items:center}
.balsam-app:not(.balsam-dashboard) .page-content{padding:23px 27px!important;width:100%;max-width:1560px;margin:0 auto;gap:21px;min-width:0}
.balsam-app:not(.balsam-dashboard) .header-actions{gap:10px;flex-wrap:wrap}
.balsam-app:not(.balsam-dashboard) :is(.btn-primary,.btn-outline,.btn-success,.btn-card-action){font-family:inherit;border-radius:22px;font-size:12px;font-weight:600;padding:9px 17px;min-height:37px;box-shadow:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;line-height:1.6}
.balsam-app:not(.balsam-dashboard) .btn-primary{background:#397600;color:#fff;border:1px solid #397600}
.balsam-app:not(.balsam-dashboard) .btn-primary:hover{background:#2d6000;transform:translateY(-1px);box-shadow:none}
.balsam-app:not(.balsam-dashboard) .btn-outline,.balsam-app:not(.balsam-dashboard) .btn-card-action{background:#fbfdf9;color:#67a03b;border:1px solid #e5f1dc}
.balsam-app:not(.balsam-dashboard) .btn-success{background:#dff6ec;border:1px solid #bee8d4;color:#2c936b}
.balsam-app:not(.balsam-dashboard) .modern-table-card{border:1px solid #ebf4e4;box-shadow:none;background:#ffffffc9;border-radius:18px;max-width:100%;min-width:0;overflow-x:auto}
.balsam-app:not(.balsam-dashboard) .table-filter-bar{padding:18px 20px;border-bottom:1px solid #eef6e8;background:#ffffff70;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.balsam-app:not(.balsam-dashboard) .table-filter-bar h3{font-size:16px!important;color:#4d762e;font-weight:700!important}
.balsam-app:not(.balsam-dashboard) .table-filter-bar p{font-size:12px;color:#6a8655}
.balsam-app:not(.balsam-dashboard) .modern-table{font-size:12px;min-width:560px;white-space:nowrap;border-collapse:collapse;width:100%}
.balsam-app:not(.balsam-dashboard) .modern-table th{background:#f7fbf4;color:#6a8a52;font-size:12px;font-weight:600;padding:13px 20px;border-bottom:1px solid #ebf4e5}
.balsam-app:not(.balsam-dashboard) .modern-table td{padding:15px 20px;border-bottom:1px solid #f1f7ec;font-size:12px;color:#567d39}
.balsam-app:not(.balsam-dashboard) .modern-table tr:last-child td{border-bottom:0}
.balsam-app:not(.balsam-dashboard) .modern-table tr:hover{background:#fafcf9}
.balsam-app:not(.balsam-dashboard) .modern-table td[colspan]{white-space:normal;padding:38px 20px!important;background:#fbfdfa;color:#6a8754!important;font-size:13px}
.balsam-app:not(.balsam-dashboard) :is(.table-search-input,.admin-search-input){background:#fafcf9;border:1px solid #e6f1dd!important;border-radius:22px!important;min-width:0;max-width:100%;font-size:12px;padding:10px 15px;box-shadow:none;font-family:inherit}
.balsam-app:not(.balsam-dashboard) .tabs-filter{background:#f5faf2;border-radius:24px;padding:4px;display:flex;flex-wrap:wrap;gap:4px}
.balsam-app:not(.balsam-dashboard) .tab-btn{border:0;border-radius:20px;font-size:12px;line-height:1.7;padding:7px 13px;color:#6a8952;white-space:nowrap}
.balsam-app:not(.balsam-dashboard) .tab-btn.active{background:#397600;color:#fff;box-shadow:0 2px 7px #39760018}
.balsam-app:not(.balsam-dashboard) .badge-status{border-radius:7px;font-size:11px;padding:5px 9px;box-shadow:none}
.balsam-app:not(.balsam-dashboard) .badge-status.paid{color:#308c68;background:#e1f5eb}
.balsam-app:not(.balsam-dashboard) .badge-status.unpaid{color:#b18b4d;background:#fff0d9}
.balsam-app:not(.balsam-dashboard) .badge-status.partial{color:#67a03b;background:#f1f7ec}
.balsam-app:not(.balsam-dashboard) .stats-cards-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:0}
.balsam-app:not(.balsam-dashboard) .stat-summary-card{border:1px solid #ffffffb8;border-radius:17px;padding:19px 20px;background:#f2f8ed;box-shadow:none;min-width:0}
.balsam-app:not(.balsam-dashboard) .stat-summary-card:nth-child(2){background:#fff0df}
.balsam-app:not(.balsam-dashboard) .stat-summary-card:nth-child(3){background:#e3f3fb}
.balsam-app:not(.balsam-dashboard) .stat-summary-card:nth-child(4){background:#f0f7ea}
.balsam-app:not(.balsam-dashboard) .stat-card-info h4{font-size:12px;color:#6b8259}
.balsam-app:not(.balsam-dashboard) .stat-summary-card .stat-num{font-size:24px;color:#456a28!important;line-height:1.6;font-weight:700}
.balsam-app:not(.balsam-dashboard) .stat-card-icon{background:#ffffff80!important;color:#69914a!important;box-shadow:none;width:44px;height:44px;border-radius:14px;font-size:23px}
.balsam-app:not(.balsam-dashboard) .kids-grid-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.balsam-app:not(.balsam-dashboard) .kid-card{border:1px solid #e9f3e1;background:#ffffffdb;border-radius:20px;box-shadow:none;padding:19px;overflow:hidden}
.balsam-app:not(.balsam-dashboard) .kid-card:hover{box-shadow:0 7px 20px #67a03b10;transform:translateY(-2px);border-color:#d4eac3}
.balsam-app:not(.balsam-dashboard) .kid-id-badge{background:#f3f9ef;color:#69904b;font-size:11px;border-radius:7px}
.balsam-app:not(.balsam-dashboard) .kid-avatar{border:3px solid #fff;box-shadow:0 0 0 4px #f0f7eb}
.balsam-app:not(.balsam-dashboard) .kid-name-link{color:#4e762f;font-size:18px;font-weight:700}
.balsam-app:not(.balsam-dashboard) .kid-guardian-sub{font-size:12px;color:#6a8655}
.balsam-app:not(.balsam-dashboard) .time-pill-btn{border-radius:12px;font-size:12px;box-shadow:none;min-height:42px}
.balsam-app:not(.balsam-dashboard) .time-pill-btn.checkin{background:#e1f5eb;color:#409972;border-color:#c8e9d9}
.balsam-app:not(.balsam-dashboard) .time-pill-btn.checkout{background:#ffebe4;color:#bb836c;border-color:#f4d9cb}
.balsam-app:not(.balsam-dashboard) .kid-card-actions{gap:7px}
.balsam-app:not(.balsam-dashboard) .kid-card-actions .btn-card-action{font-size:11px;padding:6px 10px}
.balsam-app:not(.balsam-dashboard) .live-clock-banner{background:linear-gradient(100deg,#e4f2d9,#f1f7ec);border:1px solid #deefd1;border-radius:17px;color:#679e3d;box-shadow:none}
.balsam-app:not(.balsam-dashboard) .global-live-clock{color:#67a03b}
.balsam-app:not(.balsam-dashboard) .profile-header-card{background:linear-gradient(115deg,#e4f2d9,#f2f8ed);border:1px solid #e0f0d3;border-radius:20px;box-shadow:none;padding:26px;gap:23px;flex-wrap:wrap}
.balsam-app:not(.balsam-dashboard) .profile-avatar-large{border:5px solid #ffffffb3;box-shadow:none;border-radius:23px}
.balsam-app:not(.balsam-dashboard) .profile-details h2{font-size:27px;color:#476f29}
.balsam-app:not(.balsam-dashboard) .meta-tag{background:#ffffff9c;color:#6a8953;border:1px solid #e9f3e1;border-radius:8px;padding:5px 10px;font-size:11px}
.balsam-app:not(.balsam-dashboard) .profile-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:19px}
.balsam-app:not(.balsam-dashboard) .info-card{border:1px solid #e9f3e1;border-radius:17px;background:#ffffffce;box-shadow:none;padding:22px}
.balsam-app:not(.balsam-dashboard) .info-card-header{border-bottom-color:#f0f7eb}
.balsam-app:not(.balsam-dashboard) .info-card-header h3{font-size:15px;color:#5e8541}
.balsam-app:not(.balsam-dashboard) .info-item .label{font-size:12px;color:#6a8754}
.balsam-app:not(.balsam-dashboard) .info-item .value{font-size:13px;color:#5e8441;overflow-wrap:anywhere}
.balsam-app:not(.balsam-dashboard) .app-builder-grid{display:grid;grid-template-columns:minmax(230px,1fr) minmax(0,2.2fr);gap:21px;align-items:start}
.balsam-app:not(.balsam-dashboard) .app-builder-grid>div{min-width:0}
.balsam-app:not(.balsam-dashboard) .app-share-panel{background:linear-gradient(110deg,#b6da9b,#d0e8be);color:#446927;padding:23px;border:1px solid #c5e3ae;border-radius:18px;margin-bottom:20px;box-shadow:none}
.balsam-app:not(.balsam-dashboard) .app-share-panel h3{color:#436827}
.balsam-app:not(.balsam-dashboard) .app-share-panel .btn-card-action{min-height:35px;font-size:11px;padding:8px 11px}
.balsam-app:not(.balsam-dashboard) .app-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.balsam-app:not(.balsam-dashboard) .admin-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:0}
.balsam-app:not(.balsam-dashboard) .admin-stats-grid .stat-card{padding:18px;border-radius:16px;box-shadow:none;border:1px solid #ffffffb3;gap:9px}
.balsam-app:not(.balsam-dashboard) .stat-purple{background:#f2f8ed;color:#c34779}
.balsam-app:not(.balsam-dashboard) .stat-pink{background:#fce7ef;color:#a34d70}
.balsam-app:not(.balsam-dashboard) .stat-yellow{background:#fff1d9;color:#a59166}
.balsam-app:not(.balsam-dashboard) .stat-blue{background:#e3f3fb;color:#397b9a}
.balsam-app:not(.balsam-dashboard) .stat-title{font-size:12px;font-weight:600}
.balsam-app:not(.balsam-dashboard) .stat-sub{font-size:11px}
.balsam-app:not(.balsam-dashboard) .stat-icon-wrap{font-size:23px}
.balsam-app:not(.balsam-dashboard) .admin-card-container{border-radius:18px;box-shadow:none;border-color:#eaf4e2;background:#ffffffcf;min-width:0}
.balsam-app:not(.balsam-dashboard) .admin-card-header{padding:21px;border-color:#edf5e7}
.balsam-app:not(.balsam-dashboard) .card-title{font-size:17px;color:#547e34}
.balsam-app:not(.balsam-dashboard) .card-subtitle{font-size:12px;color:#6b8556}
.balsam-app:not(.balsam-dashboard) .admin-table{min-width:760px}
.balsam-app:not(.balsam-dashboard) .admin-table th{background:#f7fbf4;border-color:#eaf4e2;color:#6a8853;font-size:12px;padding:13px 20px;font-weight:600}
.balsam-app:not(.balsam-dashboard) .admin-table td{font-size:12px;border-color:#f0f7eb;padding:15px 20px;color:#5c8041}
.balsam-app:not(.balsam-dashboard) .admin-avatar-badge{background:#eff6ea;box-shadow:none;border-radius:50%;color:#67a03c}
.balsam-app:not(.balsam-dashboard) .admin-avatar-badge.avatar-self{background:#397600;color:white}
.balsam-app:not(.balsam-dashboard) .role-pill{border-radius:8px;font-size:11px;font-weight:600}
.balsam-app:not(.balsam-dashboard) .role-admin{background:#f1f7ec;border-color:#e7f2df;color:#ca5c88}
.balsam-app:not(.balsam-dashboard) .role-supervisor{background:#e1f4e9;border-color:#d1e9dc;color:#6b9c83}
.balsam-app:not(.balsam-dashboard) .role-accountant{background:#fff0dd;border-color:#f4e4ce;color:#aa916d}
.balsam-app .modal-overlay{padding:18px;background:#38582066;overflow:auto}
.balsam-app .modal-box{border:1px solid #e8f2e0;border-radius:19px;box-shadow:0 15px 70px #39582130;max-height:calc(100dvh - 36px);max-width:calc(100vw - 36px);overflow:auto}
.balsam-app .modal-header{background:#f7fbf4;border-bottom:1px solid #eaf4e3;padding:18px 23px}
.balsam-app .modal-header h3{color:#557f34;font-size:18px;line-height:1.6}
.balsam-app .modal-close-btn{background:#eff6ea;color:#689744;flex-shrink:0}
.balsam-app .modal-body{padding:22px;min-width:0}
.balsam-app .modal-footer{border-top-color:#ecf5e5;background:#fbfdf9;padding:15px 22px;flex-wrap:wrap;gap:9px}
.balsam-app .form-control{border:1px solid #e5f1dc;border-radius:10px;background:#fdfefc;font-size:13px;min-width:0;max-width:100%;padding:11px 13px;color:#5a823b;box-shadow:none}
.balsam-app .form-control:focus{border-color:#b2d895;box-shadow:0 0 0 3px #eaf4e3;outline:none}
.balsam-app .form-group label{color:#6a8a51;font-size:12px;font-weight:600}
.balsam-app .mobile-menu-toggle{background:#f1f7ec;color:#67a03b;border-color:#e3f1d8}
@media(max-width:1200px){.balsam-app{--sidebar-width:200px}.balsam-app:not(.balsam-dashboard) .admin-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.balsam-app:not(.balsam-dashboard) .app-builder-grid{grid-template-columns:minmax(200px,1fr) minmax(0,1.6fr)}.balsam-app:not(.balsam-dashboard) .stat-summary-card{padding:16px}.balsam-app:not(.balsam-dashboard) .stat-summary-card .stat-num{font-size:20px}}
@media(max-width:900px){.balsam-app .sidebar{position:fixed;width:215px;transform:translateX(105%)}.balsam-app .sidebar.open{transform:translateX(0)}.balsam-app .sidebar-progress-card{display:block}.balsam-app:not(.balsam-dashboard) .main-wrapper{width:100%}.balsam-app:not(.balsam-dashboard) .top-header{margin:17px 20px 0;padding:19px 20px}.balsam-app:not(.balsam-dashboard) .page-content{padding:20px!important}.balsam-app:not(.balsam-dashboard) .welcome-text h2{font-size:22px}.balsam-app:not(.balsam-dashboard) .app-builder-grid{grid-template-columns:1fr}.balsam-app:not(.balsam-dashboard) .stats-cards-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.balsam-app:not(.balsam-dashboard) .top-header{margin:13px 13px 0;padding:19px 16px;gap:16px}.balsam-app:not(.balsam-dashboard) .page-content{padding:18px 13px!important;gap:18px}.balsam-app:not(.balsam-dashboard) .welcome-text h2{font-size:20px}.balsam-app:not(.balsam-dashboard) .welcome-text p{font-size:11px}.balsam-app:not(.balsam-dashboard) .header-actions{width:100%;padding-right:0}.balsam-app:not(.balsam-dashboard) .user-welcome-box{gap:10px;width:100%}.balsam-app:not(.balsam-dashboard) .user-avatar-img{display:none}.balsam-app:not(.balsam-dashboard) .stats-cards-summary,.balsam-app:not(.balsam-dashboard) .profile-info-grid{grid-template-columns:1fr}.balsam-app:not(.balsam-dashboard) .kids-grid-container{grid-template-columns:1fr}.balsam-app:not(.balsam-dashboard) .table-filter-bar{padding:16px;gap:12px}.balsam-app:not(.balsam-dashboard) .tabs-filter{border-radius:13px;gap:3px}.balsam-app:not(.balsam-dashboard) .tab-btn{font-size:11px;padding:7px 9px}.balsam-app:not(.balsam-dashboard) .profile-header-card{padding:20px;gap:19px;flex-direction:column;align-items:center;text-align:center}.balsam-app:not(.balsam-dashboard) .profile-details h2{font-size:23px}.balsam-app:not(.balsam-dashboard) .profile-meta-tags{justify-content:center}.balsam-app:not(.balsam-dashboard) .info-card{padding:19px}.balsam-app:not(.balsam-dashboard) .admin-stats-grid{gap:11px}.balsam-app:not(.balsam-dashboard) .admin-stats-grid .stat-card{padding:14px;min-width:0}.balsam-app:not(.balsam-dashboard) .stat-title{font-size:11px}.balsam-app:not(.balsam-dashboard) .stat-sub{font-size:10px}.balsam-app:not(.balsam-dashboard) .stat-icon-wrap{font-size:19px}.balsam-app:not(.balsam-dashboard) .admin-card-header{padding:17px}.balsam-app:not(.balsam-dashboard) .search-box-wrap{min-width:0;width:100%}.balsam-app:not(.balsam-dashboard) .app-form-grid{grid-template-columns:1fr}.balsam-app:not(.balsam-dashboard) .app-share-panel{padding:19px}.balsam-app:not(.balsam-dashboard) .app-share-panel [style*="display: flex"]{flex-wrap:wrap}.balsam-app .modal-header{padding:16px}.balsam-app .modal-header h3{font-size:16px}.balsam-app .modal-body{padding:17px}.balsam-app .modal-footer{padding:14px 17px}.balsam-app .form-control{font-size:12px}}
@media print{body.balsam-app,body.balsam-app::before{background:white!important}.balsam-app .sidebar,.balsam-app .sidebar-backdrop,.balsam-app .mobile-menu-toggle,.balsam-app .header-actions,.balsam-app .modal-overlay{display:none!important}.balsam-app:not(.balsam-dashboard) .main-wrapper{width:100%!important;overflow:visible!important}.balsam-app .app-container{display:block!important;width:100%!important}.balsam-app:not(.balsam-dashboard) .top-header{margin:0;padding:15px 0;background:white;border:0}.balsam-app:not(.balsam-dashboard) .page-content{padding:0!important;overflow:visible!important}.balsam-app:not(.balsam-dashboard) .modern-table-card{overflow:visible!important;border-color:#ccc}.balsam-app:not(.balsam-dashboard) .modern-table{min-width:0;font-size:10px}.balsam-app:not(.balsam-dashboard) .modern-table :is(td,th){padding:8px;font-size:10px}.balsam-app:not(.balsam-dashboard) .stats-cards-summary{grid-template-columns:repeat(3,minmax(0,1fr))}.balsam-app .reveal-item{opacity:1!important;transform:none!important;animation:none!important}}
@media(prefers-reduced-motion:reduce){.balsam-app *{animation:none!important;transition:none!important}}
/* Children subnavigation, shared by all layouts including the dashboard. */
.balsam-app .nav-group{min-width:0}
.balsam-app .nav-submenu{list-style:none;margin:5px 20px 0 0;padding:0 12px 0 0;border-right:1px solid #d5e5c9}
.balsam-app .nav-subitem{display:flex;align-items:center;gap:9px;padding:9px 10px;min-height:38px;border-radius:10px;color:#61784f;font-size:12px;text-decoration:none}
.balsam-app .nav-subitem::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.balsam-app .nav-subitem:hover{background:#f0f6e9;color:#397600}

/* ==========================================================================
   قائمة التنقل المنحنية في الفوتر للموبايل (Curved Notched Navbar)
   مطابقة تماماً للصورة المرفقة: شريط أبيض عائم مع تجويف أوسط وزر دائري أخضر ونقاط تنشيط
   ========================================================================== */
.balsam-notched-navbar,
.mobile-bottom-navbar {
  display: none;
}

@media (max-width: 900px) {
  body.balsam-app {
    padding-bottom: 100px !important;
  }
  .balsam-app .main-wrapper,
  .balsam-dashboard .main-wrapper {
    padding-bottom: 96px !important;
  }

  .balsam-notched-navbar {
    display: block !important;
    position: fixed !important;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: min(390px, calc(100% - 24px)) !important;
    height: 66px !important;
    z-index: 9990 !important;
    transform: none !important;
    -webkit-transform: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    -webkit-backface-visibility: hidden !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
    -webkit-tap-highlight-color: transparent;
  }

  /* رفع النوافذ المنبثقة فوق شريط التنقل السفلي */
  .modal-overlay,
  .modal-overlay.active,
  .bf-modal-overlay,
  .bf-modal-overlay.active {
    z-index: 100005 !important;
  }

  /* إخفاء شريط التنقل بسلاسة عند فتح القائمة الجانبية أو أي نافذة منبثقة لمنع حجب أزرار الحفظ والإلغاء أو تسجيل الخروج */
  body:has(.modal-overlay.active) .balsam-notched-navbar,
  body:has(.bf-modal-overlay.active) .balsam-notched-navbar,
  body.modal-open .balsam-notched-navbar,
  body.sidebar-open .balsam-notched-navbar,
  body:has(#appSidebar.open) .balsam-notched-navbar,
  body:has(.sidebar.open) .balsam-notched-navbar,
  body:has(.parent-chat-layout) .balsam-notched-navbar,
  body:has(.chat-main-container) .balsam-notched-navbar,
  body:has(.chat-window-section) .balsam-notched-navbar,
  body.chat-active .balsam-notched-navbar,
  .parent-chat-layout ~ .balsam-notched-navbar,
  .chat-page .balsam-notched-navbar {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    display: none !important;
    height: 0 !important;
    transform: translateY(40px) !important;
    -webkit-transform: translateY(40px) !important;
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s !important;
  }

  /* رفع القائمة الجانبية والغطاء فوق أي أشرطة عائمة وضمان مساحة كافية لزر تسجيل الخروج */
  .balsam-app .sidebar,
  .balsam-dashboard .sidebar,
  .sidebar {
    z-index: 100002 !important;
    padding-bottom: calc(65px + env(safe-area-inset-bottom, 20px)) !important;
  }
  .balsam-app .sidebar-backdrop,
  .balsam-dashboard .sidebar-backdrop,
  .sidebar-backdrop {
    z-index: 100001 !important;
  }
  .balsam-app .sidebar-user-card,
  .balsam-dashboard .sidebar-user-card,
  .sidebar-user-card {
    position: relative !important;
    z-index: 10 !important;
    margin-top: auto !important;
    margin-bottom: 10px !important;
  }
  .balsam-app .sidebar-logout-btn,
  .balsam-dashboard .sidebar-logout-btn,
  .sidebar-logout-btn {
    min-height: 36px !important;
    padding: 7px 12px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  /* صورة الهيرو mascot بعرض كامل في تصميم الموبايل */
  .balsam-dashboard .dash-hero {
    display: flex !important;
    flex-direction: column !important;
    padding: 22px 20px 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 20px !important;
  }
  .balsam-dashboard .dash-hero-copy {
    width: 100% !important;
    padding-bottom: 16px !important;
    position: relative !important;
    z-index: 2 !important;
  }
  .balsam-dashboard .dash-hero h2,
  .balsam-dashboard .dash-hero h2 span,
  .balsam-dashboard .dash-hero p,
  .balsam-dashboard .dash-hero-actions {
    max-width: none !important;
  }
  .balsam-dashboard .dash-hero-art {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    bottom: auto !important;
    right: auto !important;
    width: calc(100% + 40px) !important;
    margin: 16px -20px 0 -20px !important;
    height: auto !important;
    min-height: 190px !important;
    max-height: 280px !important;
    align-self: stretch !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
    background: transparent !important;
    display: block !important;
    overflow: hidden !important;
  }
  .balsam-dashboard .dash-hero-art img {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 190px !important;
    max-height: 280px !important;
    object-fit: cover !important;
    object-position: center 25% !important;
    display: block !important;
    border-radius: 0 0 20px 20px !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
}

body.force-mobile-view .balsam-notched-navbar {
  display: block !important;
  position: fixed !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  left: 0 !important;
  right: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: min(390px, calc(100% - 24px)) !important;
  height: 66px !important;
  z-index: 9990 !important;
  transform: none !important;
  -webkit-transform: none !important;
  filter: none !important;
  -webkit-filter: none !important;
  -webkit-backface-visibility: hidden !important;
  backface-visibility: hidden !important;
  will-change: transform, opacity !important;
  -webkit-tap-highlight-color: transparent;
}

body.force-mobile-view .balsam-dashboard .dash-hero {
  display: flex !important;
  flex-direction: column !important;
  padding: 22px 20px 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  border-radius: 20px !important;
}
body.force-mobile-view .balsam-dashboard .dash-hero-copy {
  width: 100% !important;
  padding-bottom: 16px !important;
  position: relative !important;
  z-index: 2 !important;
}
body.force-mobile-view .balsam-dashboard .dash-hero h2,
body.force-mobile-view .balsam-dashboard .dash-hero h2 span,
body.force-mobile-view .balsam-dashboard .dash-hero p,
body.force-mobile-view .balsam-dashboard .dash-hero-actions {
  max-width: none !important;
}
body.force-mobile-view .balsam-dashboard .dash-hero-art {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  bottom: auto !important;
  right: auto !important;
  width: calc(100% + 40px) !important;
  margin: 16px -20px 0 -20px !important;
  height: auto !important;
  min-height: 190px !important;
  max-height: 280px !important;
  align-self: stretch !important;
  opacity: 1 !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  background: transparent !important;
  display: block !important;
  overflow: hidden !important;
}
body.force-mobile-view .balsam-dashboard .dash-hero-art img {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 190px !important;
  max-height: 280px !important;
  object-fit: cover !important;
  object-position: center 25% !important;
  display: block !important;
  border-radius: 0 0 20px 20px !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}

  .notched-bar-svg-wrap {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.05));
    -webkit-filter: drop-shadow(0 10px 25px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.05));
  }

  /* وميض تمييز وتحديد مكان الإشعار عند النقر عليه */
  @keyframes balsamPulseHighlight {
    0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); transform: scale(1); }
    50% { box-shadow: 0 0 0 10px rgba(34, 197, 94, 0); transform: scale(1.01); }
    100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); transform: scale(1); }
  }
  .balsam-section-glow {
    animation: balsamPulseHighlight 1.4s ease 2 !important;
    border-color: #22c55e !important;
    transition: all 0.3s ease !important;
  }

  .notched-bar-svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* الزر الأوسط الأخضر المرتفع المتمركز بالتجويف */
  .notched-fab {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #2e7d32;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(46, 125, 50, 0.38);
    z-index: 3;
    text-decoration: none;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s;
  }

  .notched-fab:active {
    transform: translateX(-50%) scale(0.92);
    box-shadow: 0 3px 8px rgba(46, 125, 50, 0.25);
  }

  .notched-fab.active {
    background: #1b5e20;
    box-shadow: 0 0 0 3px #ffffff, 0 6px 18px rgba(27, 94, 32, 0.45);
  }

  .notched-fab-icon {
    width: 26px;
    height: 26px;
    stroke: #ffffff;
  }

  /* صف الأيقونات الأربعة مع التسميات */
  .notched-nav-row {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    z-index: 2;
  }

  .notched-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #64748b;
    min-width: 56px;
    height: 58px;
    padding-top: 4px;
    gap: 2px;
    transition: color 0.2s, transform 0.15s;
  }

  .notched-item:active {
    transform: scale(0.92);
  }

  .notched-icon-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }

  .notched-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    transition: stroke 0.2s, transform 0.2s;
  }

  /* كتابة أسفل كل أيقونة */
  .notched-label {
    font-family: 'Cairo', system-ui, -apple-system, sans-serif;
    font-size: 10px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.2px;
    color: inherit;
    transition: color 0.2s, font-weight 0.2s;
    white-space: nowrap;
  }

  /* العنصر النشط */
  .notched-item.active {
    color: #2e7d32;
  }

  .notched-item.active .notched-label {
    font-weight: 700;
    color: #2e7d32;
  }

  .notched-item.active .notched-icon {
    stroke: #2e7d32;
    transform: translateY(-1px);
  }

  /* المساحة الوسطى المتروكة للزر الأخضر والتجويف */
  .notched-spacer {
    width: 60px;
    flex-shrink: 0;
    pointer-events: none;
  }
}

.balsam-app .nav-subitem.active{background:#eaf4e1;color:#397600;font-weight:700}

/* Balsam Notifications Keyframes & Enhancements */
@keyframes slideDownToast {
  from {
    opacity: 0;
    transform: translateY(-25px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes popInNotif {
  from {
    opacity: 0;
    transform: scale(0.92) translateY(-15px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.balsam-bell-badge {
  animation: pulseBadge 2s infinite;
}

@keyframes pulseBadge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.15);
  }
}

/* زر تفعيل الإشعارات في الشريط العلوي - أيقونة الجرس فقط */
.balsam-notif-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  border-radius: 50%;
  background: #f0fdf4;
  color: #166534;
  border: 1.5px solid #86efac;
  cursor: pointer;
  transition: all 0.22s ease;
  font-family: inherit;
  box-shadow: 0 2px 6px rgba(22, 101, 52, 0.08);
  flex-shrink: 0;
}
.balsam-notif-action-btn:hover {
  background: #15803d;
  color: #ffffff;
  border-color: #15803d;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(21, 128, 61, 0.25);
}
.balsam-notif-action-btn .bnab-bell {
  font-size: 16px;
  display: inline-block;
  line-height: 1;
}
.balsam-notif-action-btn .bnab-text,
#balsamTopNotifText {
  display: none !important;
}

@media (max-width: 480px) {
  .balsam-notif-action-btn {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-width: 1px;
  }
  .balsam-notif-action-btn .bnab-bell {
    font-size: 14px;
  }
}

.force-mobile-view .balsam-notif-action-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border-width: 1px;
}
.force-mobile-view .balsam-notif-action-btn .bnab-bell {
  font-size: 14px;
}
.force-mobile-view .balsam-notif-action-btn .bnab-text,
.force-mobile-view #balsamTopNotifText {
  display: none !important;
}
.balsam-notif-action-btn.is-prompt .bnab-bell {
  animation: ringBell 2.5s infinite ease-in-out;
}
.balsam-notif-action-btn.is-active {
  background: #dcfce7;
  color: #15803d;
  border-color: #86efac;
}
.balsam-notif-action-btn.is-active:hover {
  background: #16a34a;
  color: #ffffff;
  border-color: #16a34a;
}
.balsam-notif-action-btn.is-denied {
  background: #fef2f2;
  color: #991b1b;
  border-color: #fca5a5;
}
.balsam-notif-action-btn.is-denied:hover {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

@keyframes ringBell {
  0%, 100% { transform: rotate(0); }
  10%, 30% { transform: rotate(-15deg); }
  20%, 40% { transform: rotate(15deg); }
  50% { transform: rotate(0); }
}

/* بطاقة تفعيل الإشعارات في الشريط الجانبي */
.sidebar-notif-widget {
  margin-top: 18px;
  margin-bottom: 6px;
  padding: 13px 12px;
  background: linear-gradient(135deg, #e8f4de, #f4fbf0);
  border: 1px solid #d4eac3;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: all 0.2s ease;
}
.sidebar-notif-widget:hover {
  border-color: #b5dda0;
  box-shadow: 0 4px 14px rgba(78, 137, 36, 0.1);
}
.sidebar-notif-widget .snw-header {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sidebar-notif-widget .snw-bell {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.sidebar-notif-widget .snw-text {
  min-width: 0;
  flex: 1;
}
.sidebar-notif-widget .snw-text strong {
  display: block;
  font-size: 11px;
  color: #2b4219;
  font-weight: 800;
  line-height: 1.3;
}
.sidebar-notif-widget .snw-text small {
  display: block;
  font-size: 9.5px;
  color: #6a8c50;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-notif-widget .snw-action-btn {
  width: 100%;
  padding: 7px 10px;
  border-radius: 10px;
  border: none;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #397600;
  color: #ffffff;
  transition: all 0.2s ease;
}
.sidebar-notif-widget .snw-action-btn:hover {
  background: #2b5900;
  transform: translateY(-1px);
}
.sidebar-notif-widget .snw-action-btn.is-active {
  background: #ffffff;
  color: #2e6600;
  border: 1px solid #cce5b8;
}
.sidebar-notif-widget .snw-action-btn.is-active:hover {
  background: #397600;
  color: #ffffff;
}

/* بنر عائم تشجيعي لتفعيل الإشعارات */
.balsam-floating-notif-banner {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 360px;
  background: #ffffff;
  border-radius: 18px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.16);
  border: 1.5px solid #bbf7d0;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 99998;
  direction: rtl;
  text-align: right;
  font-family: inherit;
  animation: slideDownToast 0.35s ease;
}
@media (max-width: 500px) {
  .balsam-floating-notif-banner {
    left: 14px;
    right: 14px;
    bottom: 85px;
    max-width: none;
  }
}
.balsam-floating-notif-banner .bfnb-icon {
  font-size: 24px;
  flex-shrink: 0;
}
.balsam-floating-notif-banner .bfnb-content {
  flex: 1;
  min-width: 0;
}
.balsam-floating-notif-banner .bfnb-title {
  margin: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: #14532d;
}
.balsam-floating-notif-banner .bfnb-desc {
  margin: 3px 0 0;
  font-size: 0.76rem;
  color: #4b5563;
  line-height: 1.4;
}
.balsam-floating-notif-banner .bfnb-btn {
  background: #15803d;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: background 0.2s;
}
.balsam-floating-notif-banner .bfnb-btn:hover {
  background: #166534;
}
.balsam-floating-notif-banner .bfnb-close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 16px;
  cursor: pointer;
  padding: 2px;
  line-height: 1;
}
.balsam-floating-notif-banner .bfnb-close:hover {
  color: #334155;
}

/* ========================================================================= */
/* 🌟 تصميم بطاقة المستخدم الفاخرة في القائمة الجانبية (Desktop & Modern View) */
/* ========================================================================= */
.balsam-app .sidebar-user-card,
.balsam-dashboard .sidebar-user-card,
.sidebar-user-card {
  margin-top: auto !important;
  margin-bottom: 8px !important;
  background: linear-gradient(180deg, #ffffff 0%, #f6faf3 100%) !important;
  border: 1px solid #d9edd0 !important;
  border-radius: 16px !important;
  padding: 12px 10px 10px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  box-shadow: 0 4px 15px rgba(22, 101, 52, 0.05) !important;
  position: relative !important;
  z-index: 10 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
}

.balsam-app .sidebar-user-card:hover,
.balsam-dashboard .sidebar-user-card:hover,
.sidebar-user-card:hover {
  border-color: #c0e2b4 !important;
  box-shadow: 0 6px 20px rgba(22, 101, 52, 0.09) !important;
}

.balsam-app .sidebar-user-top,
.balsam-dashboard .sidebar-user-top,
.sidebar-user-top {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  width: 100% !important;
}

.balsam-app .sidebar-user-avatar,
.balsam-dashboard .sidebar-user-avatar,
.sidebar-user-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 2px 8px rgba(22, 101, 52, 0.25) !important;
  user-select: none !important;
}

.balsam-app .sidebar-user-meta,
.balsam-dashboard .sidebar-user-meta,
.sidebar-user-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
  flex: 1 !important;
}

.balsam-app .sidebar-user-name,
.balsam-dashboard .sidebar-user-name,
.sidebar-user-name {
  font-size: 0.84rem !important;
  font-weight: 800 !important;
  color: #164e22 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.3 !important;
  display: block !important;
}

.balsam-app .sidebar-user-role,
.balsam-dashboard .sidebar-user-role,
.sidebar-user-role {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  color: #166534 !important;
  background: #eaf4e3 !important;
  border: 1px solid #d0ebd0 !important;
  border-radius: 6px !important;
  padding: 1px 6px !important;
  display: inline-block !important;
  width: fit-content !important;
  line-height: 1.4 !important;
}

.balsam-app .sidebar-logout-btn,
.balsam-dashboard .sidebar-logout-btn,
.sidebar-logout-btn {
  background: #fff5f5 !important;
  color: #dc2626 !important;
  border: 1px solid #fecaca !important;
  border-radius: 10px !important;
  padding: 7px 10px !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  min-height: 34px !important;
  box-sizing: border-box !important;
  transition: all 0.2s ease !important;
  cursor: pointer !important;
}

.balsam-app .sidebar-logout-btn:hover,
.balsam-dashboard .sidebar-logout-btn:hover,
.sidebar-logout-btn:hover {
  background: #fee2e2 !important;
  color: #b91c1c !important;
  border-color: #f87171 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.15) !important;
}

/* ========================================================================= */
/* 📲 تصميم عنصر تثبيت التطبيق PWA ونوافذ التوجيه للأندرويد والآيفون */
/* ========================================================================= */
.balsam-pwa-install-item {
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  position: relative !important;
}

.balsam-pwa-install-item:hover {
  background: #ebf7e8 !important;
  color: #166534 !important;
}

.balsam-pwa-badge {
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 2px 7px !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 6px rgba(22, 101, 52, 0.18) !important;
  letter-spacing: 0.3px !important;
}

/* نافذة التوجيه المنبثقة للتثبيت */
.balsam-pwa-modal-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 999999 !important;
  background: rgba(15, 23, 42, 0.55) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px !important;
  font-family: 'Cairo', system-ui, -apple-system, sans-serif !important;
  direction: rtl !important;
  box-sizing: border-box !important;
}

.balsam-pwa-modal-card {
  background: #ffffff !important;
  width: 100% !important;
  max-width: 440px !important;
  border-radius: 24px !important;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3) !important;
  overflow: hidden !important;
  animation: pwaPopIn 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  border: 1px solid rgba(22, 101, 52, 0.1) !important;
}

@keyframes pwaPopIn {
  from { opacity: 0; transform: scale(0.92) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}

.pwa-card-header {
  padding: 16px 20px !important;
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

.pwa-header-brand {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.pwa-app-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 12px !important;
  border: 2px solid rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
  background: #ffffff !important;
}

.pwa-app-title {
  margin: 0 !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.3 !important;
}

.pwa-app-subtitle {
  font-size: 0.72rem !important;
  color: #dcfce7 !important;
  font-weight: 600 !important;
}

.pwa-close-btn {
  background: rgba(255, 255, 255, 0.15) !important;
  border: none !important;
  color: #ffffff !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 1rem !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  flex-shrink: 0 !important;
}

.pwa-close-btn:hover {
  background: rgba(255, 255, 255, 0.3) !important;
}

.pwa-card-body {
  padding: 18px 20px 14px !important;
  color: #1e293b !important;
}

.pwa-intro-text {
  margin: 0 0 14px !important;
  font-size: 0.86rem !important;
  color: #475569 !important;
  line-height: 1.5 !important;
  font-weight: 600 !important;
}

.pwa-steps-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.pwa-step-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 14px !important;
  padding: 10px 12px !important;
}

.pwa-step-num {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background: #166534 !important;
  color: #ffffff !important;
  font-size: 0.85rem !important;
  font-weight: 800 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  margin-top: 1px !important;
}

.pwa-step-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  font-size: 0.82rem !important;
  line-height: 1.45 !important;
  color: #334155 !important;
}

.pwa-step-content strong {
  font-size: 0.88rem !important;
  color: #0f172a !important;
  font-weight: 800 !important;
}

.pwa-icon-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  background: #e2e8f0 !important;
  color: #0f172a !important;
  padding: 1px 7px !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  font-size: 0.76rem !important;
  margin: 0 2px !important;
}

.pwa-card-footer {
  padding: 10px 20px 18px !important;
  display: flex !important;
}

.pwa-primary-btn {
  width: 100% !important;
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 12px 18px !important;
  font-size: 0.92rem !important;
  font-weight: 800 !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(22, 101, 52, 0.25) !important;
  transition: all 0.2s !important;
}

.pwa-primary-btn:hover {
  filter: brightness(1.06) !important;
  transform: translateY(-1px) !important;
}

/* إشعار التثبيت السفلي السريع Toast */
.balsam-pwa-toast {
  position: fixed !important;
  bottom: 24px !important;
  left: 50% !important;
  transform: translateX(-50%) translateY(30px) !important;
  background: #166534 !important;
  color: #ffffff !important;
  padding: 12px 24px !important;
  border-radius: 30px !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  font-family: 'Cairo', sans-serif !important;
  direction: rtl !important;
  z-index: 9999999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: all 0.28s ease !important;
}

.balsam-pwa-toast.visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
}

/* =========================================================================
   🌟 نظام التمرير وشريط التمرير المخصص لوضع سطح المكتب (Desktop Scroll System)
   ========================================================================= */

/* قواعد التمرير العامة لشاشات سطح المكتب */
@media (min-width: 901px) {
  html {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    scroll-behavior: smooth;
    height: auto !important;
  }

  body,
  body.balsam-app,
  body.balsam-dashboard {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 100vh !important;
    height: auto !important;
    scroll-behavior: smooth;
  }

  .balsam-app .app-container,
  .app-container {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh !important;
    height: auto !important;
  }

  /* السماح للنافذة بالتمرير بسلاسة دون حجز المحتوى داخل حاوية وسيطة */
  .balsam-app:not(.balsam-dashboard) .main-wrapper,
  .balsam-dashboard .main-wrapper,
  .main-wrapper {
    overflow-y: visible !important;
    min-height: 100vh !important;
    height: auto !important;
  }

  /* تثبيت الشريط الجانبي في مكانه الأيمن مع شريط تمرير داخلي خفيف إذا كانت الشاشة قصيرة */
  .balsam-app .sidebar,
  .balsam-dashboard .sidebar,
  .sidebar {
    position: sticky !important;
    top: 0 !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  /* شريط التمرير الفاخر لجميع المتصفحات في وضع سطح المكتب */
  * {
    scrollbar-width: thin;
    scrollbar-color: #8dbd6c #f1f8ed;
  }

  /* متصفحات WebKit و Chromium و Edge و Windows App و Safari */
  ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
  }

  ::-webkit-scrollbar-track {
    background: #f1f8ed;
    border-radius: 8px;
  }

  ::-webkit-scrollbar-thumb {
    background: #8dbd6c;
    border-radius: 8px;
    border: 2px solid #f1f8ed;
    transition: background-color 0.2s ease;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: #397600;
  }

  ::-webkit-scrollbar-thumb:active {
    background: #255200;
  }

  ::-webkit-scrollbar-corner {
    background: #f1f8ed;
  }

  /* شريط التمرير للشريط الجانبي */
  .sidebar::-webkit-scrollbar {
    width: 6px;
  }
  .sidebar::-webkit-scrollbar-track {
    background: transparent;
  }
  .sidebar::-webkit-scrollbar-thumb {
    background: #c0deb1;
    border-radius: 6px;
    border: none;
  }
  .sidebar::-webkit-scrollbar-thumb:hover {
    background: #8dbd6c;
  }

  /* شريط التمرير الأفقي للجداول الطويلة */
  .modern-table-card::-webkit-scrollbar,
  .dash-table-scroll::-webkit-scrollbar,
  .table-responsive::-webkit-scrollbar,
  div[style*="overflow-x:auto"]::-webkit-scrollbar,
  div[style*="overflow-x: auto"]::-webkit-scrollbar {
    height: 8px;
  }
  .modern-table-card::-webkit-scrollbar-track,
  .dash-table-scroll::-webkit-scrollbar-track,
  .table-responsive::-webkit-scrollbar-track {
    background: #f8fafc;
    border-radius: 6px;
  }
  .modern-table-card::-webkit-scrollbar-thumb,
  .dash-table-scroll::-webkit-scrollbar-thumb,
  .table-responsive::-webkit-scrollbar-thumb {
    background: #a3c988;
    border-radius: 6px;
  }
  .modern-table-card::-webkit-scrollbar-thumb:hover,
  .dash-table-scroll::-webkit-scrollbar-thumb:hover,
  .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #397600;
  }

  /* شريط التمرير لصناديق الرسائل والمودال */
  .modal-box::-webkit-scrollbar,
  .chat-messages-container::-webkit-scrollbar,
  #chatChildrenList::-webkit-scrollbar {
    width: 7px;
  }
  .modal-box::-webkit-scrollbar-thumb,
  .chat-messages-container::-webkit-scrollbar-thumb,
  #chatChildrenList::-webkit-scrollbar-thumb {
    background: #a3c988;
    border-radius: 6px;
  }
}

/* زر الصعود للأعلى لتصفح وضع سطح المكتب */
.balsam-desktop-scroll-top {
  position: fixed !important;
  bottom: 28px !important;
  left: 28px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 10px 18px !important;
  background: linear-gradient(135deg, #166534 0%, #15803d 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 30px !important;
  box-shadow: 0 8px 24px rgba(22, 101, 52, 0.3) !important;
  font-family: 'Cairo', sans-serif !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  z-index: 9999 !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(18px) scale(0.95) !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

.balsam-desktop-scroll-top svg {
  width: 17px !important;
  height: 17px !important;
  stroke: #ffffff !important;
  flex-shrink: 0 !important;
  transition: transform 0.2s ease !important;
}

.balsam-desktop-scroll-top.visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

.balsam-desktop-scroll-top:hover {
  background: linear-gradient(135deg, #14532d 0%, #166534 100%) !important;
  box-shadow: 0 12px 30px rgba(22, 101, 52, 0.45) !important;
  transform: translateY(-2px) scale(1.03) !important;
}

.balsam-desktop-scroll-top:hover svg {
  transform: translateY(-2px) !important;
}

.balsam-desktop-scroll-top:active {
  transform: translateY(1px) scale(0.98) !important;
}

@media (max-width: 900px) {
  .balsam-desktop-scroll-top {
    display: none !important;
  }
}