:root{--primary-color: #007bff;--secondary-color: #6c757d;--success-color: #28a745;--danger-color: #dc3545;--warning-color: #ffc107;--info-color: #17a2b8;--pending-color: #6f42c1;--light-color: #f8f9fa;--dark-color: #343a40;--background-color: #f4f7f9;--font-family: "Tajawal", sans-serif;--border-radius: 8px;--box-shadow: 0 4px 8px rgba(0, 0, 0, .05);--success-color-light: #e9f7ef;--danger-color-light: #fdeeee;--warning-color-light: #fff8e1;--info-color-light: #e8f7f9;--secondary-color-light: #f1f3f5}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--dark-color);line-height:1.6}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.app-container{max-width:1200px;margin:0 auto;padding:0 1rem}main{padding-top:80px}.screen-content{animation:fadeIn .4s ease-out;padding:1rem 0}.app-header{background-color:#fff;color:var(--dark-color);padding:1rem;position:fixed;top:0;left:0;right:0;z-index:1000;box-shadow:0 2px 4px #0000001a;display:flex;align-items:center;justify-content:space-between}.app-header h1{font-size:1.4rem;margin:0;font-weight:700;color:var(--dark-color)}.header-logo{height:40px;width:auto;vertical-align:middle}.header-content-right,.header-content-left{display:flex;align-items:center;gap:1rem}.user-info{text-align:right;line-height:1.2}.user-info span{font-weight:500}.user-info small{display:block;color:var(--secondary-color);font-size:.8rem}.logout-button{background:transparent;color:var(--danger-color);border:none;padding:.6rem 1rem;cursor:pointer;font-size:.9rem;font-family:var(--font-family);width:100%;text-align:right;border-radius:4px}.logout-button:hover{background:var(--danger-color-light)}.user-menu{position:relative}.user-menu-trigger{background:none;border:none;cursor:pointer;display:flex;align-items:center;gap:.5rem;padding:.5rem;border-radius:var(--border-radius);transition:background-color .2s}.user-menu-trigger:hover{background-color:var(--light-color)}.user-menu-caret{font-size:.7rem;color:var(--secondary-color);transition:transform .2s}.user-menu-caret.open{transform:rotate(180deg)}.user-menu-dropdown{position:absolute;top:calc(100% + 5px);left:0;background-color:#fff;border-radius:var(--border-radius);box-shadow:0 5px 15px #0000001a;width:200px;z-index:1100;overflow:hidden;animation:fadeIn .2s ease-out;border:1px solid #eee}.user-menu-dropdown button{display:block;width:100%;padding:.75rem 1rem;background:none;border:none;text-align:right;font-family:var(--font-family);font-size:.95rem;cursor:pointer}.user-menu-dropdown button:hover{background-color:var(--light-color)}.user-menu-dropdown .logout-button{font-weight:500}.back-button{background:none;border:none;font-size:1rem;color:var(--primary-color);cursor:pointer;display:flex;align-items:center;gap:5px;font-family:var(--font-family);flex-direction:row-reverse}.back-button span{font-size:1.5rem;transition:transform .2s}.back-button:hover span{transform:translate(5px)}.connection-status{padding:.2rem .6rem;border-radius:12px;font-size:.8rem;font-weight:700;margin-right:1rem;border:1px solid transparent}.connection-status.online{background-color:var(--success-color-light);color:var(--success-color);border-color:var(--success-color)}.connection-status.offline{background-color:var(--secondary-color-light);color:var(--secondary-color);border-color:var(--secondary-color)}.connection-status.syncing{background-color:var(--info-color-light);color:var(--info-color);border-color:var(--info-color);animation:pulse 1.5s infinite}@keyframes pulse{0%{box-shadow:0 0 #17a2b866}70%{box-shadow:0 0 0 10px #17a2b800}to{box-shadow:0 0 #17a2b800}}.btn{padding:.75rem 1.5rem;border:none;border-radius:var(--border-radius);cursor:pointer;font-family:var(--font-family);font-size:1rem;font-weight:500;transition:background-color .2s,box-shadow .2s,transform .1s ease-out;display:inline-flex;align-items:center;justify-content:center;gap:8px}.btn:disabled{background-color:var(--secondary-color);opacity:.6;cursor:not-allowed}.btn:active{transform:scale(.97)}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#0056b3;box-shadow:0 2px 5px #0056b34d}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-secondary:hover{background-color:#5a6268}.btn-danger{background-color:var(--danger-color);color:#fff}.btn-success{background-color:var(--success-color);color:#fff}.btn-info{background-color:var(--info-color);color:#fff}.btn-info:hover{background-color:#138496}.btn-warning{background-color:var(--warning-color);color:var(--dark-color)}.btn-warning:hover{background-color:#e0a800}.btn-dark{background-color:var(--dark-color);color:#fff}.btn-dark:hover{background-color:#23272b}.btn-full{width:100%;margin-top:1rem}.btn-small{padding:.5rem 1rem;font-size:.9rem}.login-container{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 80px);text-align:center;padding:1rem}.login-box{background:#fff;padding:2.5rem 2rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);max-width:400px;width:100%;border-top:4px solid var(--primary-color)}.login-icon{display:block;margin:0 auto 1.5rem;width:250px;height:auto}.login-box h2{margin-bottom:.5rem}.login-box p{color:var(--secondary-color);margin-bottom:2rem}.login-error{color:var(--danger-color);background-color:var(--danger-color-light);border:1px solid var(--danger-color);padding:.75rem;border-radius:var(--border-radius);margin-bottom:1rem;text-align:center}.success-message{color:var(--success-color);background-color:var(--success-color-light);border:1px solid var(--success-color);padding:.75rem;border-radius:var(--border-radius);margin-bottom:1rem;text-align:center}.card{background:#fff;border-radius:var(--border-radius);box-shadow:var(--box-shadow);margin-bottom:1.5rem;border:1px solid #e9ecef}.card-header{padding:1rem 1.5rem;border-bottom:1px solid #eee;background-color:var(--light-color)}.card-header h3{margin:0;font-size:1.2rem}.card-body{padding:1.5rem}.form-group{display:flex;flex-direction:column;gap:.5rem;margin-bottom:1.25rem}.form-group label{font-weight:500;font-size:.9rem;color:var(--dark-color)}.form-control,.form-group input,.form-group select,.form-group textarea{width:100%;padding:.75rem;border:1px solid #ced4da;border-radius:var(--border-radius);font-size:1rem;font-family:var(--font-family);background-color:#fff;transition:border-color .2s,box-shadow .2s}.form-group input:disabled{background-color:#e9ecef;cursor:not-allowed}.form-control:focus,.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 2px #007bff40}.form-group p{padding:.75rem;background-color:var(--light-color);border-radius:var(--border-radius);border:1px solid #e9ecef;min-height:calc(1.6em + 1.5rem + 2px);margin:0}.form-actions{display:flex;justify-content:flex-end;margin-top:1.5rem}.checkbox-group{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;padding:.5rem;border:1px solid #ddd;border-radius:var(--border-radius);max-height:150px;overflow-y:auto}.checkbox-label{display:flex;align-items:center;gap:.5rem;padding:.25rem}.filters-container{padding:0}.filters-header{display:flex;justify-content:space-between;align-items:center;cursor:pointer;padding:1.25rem;-webkit-user-select:none;user-select:none}.filters-header h3{margin:0;font-size:1.2rem;display:flex;align-items:center;gap:.75rem}.filters-toggle-icon{transition:transform .3s ease;font-size:.8rem;color:var(--secondary-color)}.filters-toggle-icon.expanded{transform:rotate(180deg)}.filters-body{padding:0 1.25rem 1.25rem;border-top:1px solid #e9ecef;animation:fadeIn .3s ease-out}.filters-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem;padding-top:1.25rem}.filters-actions{display:flex;justify-content:flex-end;margin-top:1.5rem;padding-top:1rem;border-top:1px solid #eee}.order-list-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.5rem}.order-card{background:#fff;border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:1px solid #e9ecef;cursor:pointer;transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}.order-card:hover{transform:translateY(-5px);box-shadow:0 8px 15px #00000014}.order-card.expiring-soon{border-color:var(--warning-color);background-color:var(--warning-color-light);border-left:4px solid var(--warning-color)}.expiry-info.expiring-text{color:#856404;font-weight:700}.order-card.fulfilled-order-card{border-left:4px solid var(--success-color);background-color:#f8fcf9}.order-card.fulfilled-order-card:hover{background-color:#f0f8f2}.order-card-header{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;border-bottom:1px solid #eee}.order-card-header>div{display:flex;align-items:baseline;gap:.5rem;flex-direction:row-reverse}.order-id-badge{color:var(--secondary-color);font-size:.9rem;font-weight:400}.order-card-body{padding:1rem;flex-grow:1}.order-card-body p{margin:0 0 .5rem;font-size:.9rem}.order-card-footer{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background-color:var(--light-color);font-size:.85rem;color:var(--secondary-color);border-top:1px solid #eee;border-bottom-left-radius:var(--border-radius);border-bottom-right-radius:var(--border-radius)}.status-badge{padding:.35rem .85rem;border-radius:16px;font-size:.85rem;font-weight:700;color:#fff;text-transform:uppercase;letter-spacing:.5px;box-shadow:0 1px 3px #0000001a;display:inline-flex;align-items:center;gap:4px}.status-pending{background-color:var(--pending-color)}.status-scanned{background-color:var(--info-color)}.status-fulfilled,.status-confirmed{background-color:var(--success-color)}.status-rejected{background-color:var(--danger-color)}.status-expired{background-color:var(--warning-color);color:var(--dark-color)}.status-awaiting-confirmation{background-color:#fd7e14}.status-active,.status-free_tier{background-color:var(--success-color)}.status-suspended{background-color:var(--warning-color);color:var(--dark-color)}.status-expired{background-color:var(--danger-color)}.empty-state{grid-column:1 / -1;text-align:center;padding:3rem;background-color:#fff;border-radius:var(--border-radius);border:1px solid #eee}.info-banner{background-color:var(--info-color-light);color:#0c5460;padding:1rem 1.5rem;border-radius:var(--border-radius);margin-bottom:1.5rem;border:1px solid var(--info-color)}.info-banner.warning{background-color:var(--warning-color-light);color:#856404;border-color:var(--warning-color)}.dashboard-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap;gap:1rem;border-bottom:1px solid #eee;padding-bottom:1rem}.dashboard-header .back-button{margin-bottom:0}.dashboard-header p{color:var(--secondary-color);margin:0}.dashboard-header-left{flex-grow:1}.dashboard-header-right{display:flex;gap:1rem;flex-wrap:wrap}.dashboard-action-item{text-align:center}.action-description{margin-top:8px;font-size:.8rem;color:var(--secondary-color)}.scan-button{font-size:1.1rem;padding:.8rem 1.5rem}.scan-button:before{content:"📷";margin-right:8px;font-size:1.2rem}.summary-cards-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.5rem;margin-bottom:1.5rem}.summary-card{background-color:#fff;padding:1.5rem;border-radius:var(--border-radius);box-shadow:var(--box-shadow);border:1px solid #e9ecef}.summary-card h4{margin-top:0;margin-bottom:1rem;font-size:1rem;font-weight:500;color:var(--secondary-color)}.summary-card .summary-value{font-size:2.5rem;font-weight:700;color:var(--primary-color);margin:0}.summary-card .summary-value span{font-size:1rem;font-weight:500;color:var(--secondary-color);margin-right:.5rem}.company-list{list-style:none;padding:0;margin:0;max-height:200px;overflow-y:auto}.company-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem 0;border-bottom:1px solid #f1f1f1}.company-list li:last-child{border-bottom:none}.company-list li .company-name{font-weight:700;font-size:1rem}.no-data-msg{color:var(--secondary-color);font-style:italic;padding:1rem;text-align:center}.carousel-container{width:100%;aspect-ratio:1024 / 366;margin:0 auto 1.5rem;border-radius:var(--border-radius);overflow:hidden;position:relative;box-shadow:var(--box-shadow);background-color:#eee}.carousel-slider{display:flex;height:100%;transition:transform .7s ease-in-out}.carousel-slide{flex:0 0 100%;width:100%;height:100%}.carousel-slide img{width:100%;height:100%;object-fit:cover}.carousel-dots{position:absolute;bottom:15px;left:50%;transform:translate(-50%);display:flex;gap:8px;z-index:10}.carousel-dot{width:10px;height:10px;border-radius:50%;background-color:#fff9;cursor:pointer;transition:background-color .3s,transform .3s;border:none;padding:0}.carousel-dot:hover{background-color:#ffffffe6}.carousel-dot.active{background-color:#fff;transform:scale(1.2)}.scanner-container{display:flex;justify-content:center;align-items:flex-start;padding-top:2rem}.scanner-card{max-width:500px;width:100%;text-align:center;padding:2rem}.scanner-viewport{width:100%;max-width:400px;margin:1.5rem auto;border:5px solid var(--primary-color);border-radius:var(--border-radius);overflow:hidden;position:relative}#qr-reader video{width:100%!important;height:auto!important}.scanner-actions{margin-top:1.5rem;display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%}.scanner-actions .separator{margin:0;display:flex;align-items:center;width:100%;color:var(--secondary-color)}.scanner-actions .separator:before,.scanner-actions .separator:after{content:"";flex:1;border-bottom:1px solid #ddd}.scanner-actions .separator:not(:empty):before{margin-right:.5em}.scanner-actions .separator:not(:empty):after{margin-left:.5em}.verification-container,.order-details-container{max-width:800px;margin:0 auto}.verification-header,.order-details-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #eee}.verification-header h2,.order-details-header h2{font-size:1.3rem;margin:0}.verification-body,.order-details-info{padding:1.5rem}.verification-body p,.order-details-info p{margin-bottom:.75rem;font-size:1.1rem}.verification-actions{display:flex;gap:1rem;padding:1.5rem;border-top:1px solid #eee;background-color:var(--light-color)}.verification-actions .btn{flex:1;font-size:1.1rem;justify-content:center}.verification-notice{padding:1.5rem;text-align:center;background-color:var(--warning-color-light);color:#856404;border-top:1px solid #eee}.order-details-grid{display:grid;grid-template-columns:2fr 1fr;gap:1rem;padding:1.5rem}.order-details-qr{text-align:center;border-right:1px solid #eee;padding-right:1.5rem}.qr-code-container{display:flex;justify-content:center;align-items:center;margin-top:1rem;margin-bottom:1rem;padding:10px;background:#fff;border:1px solid #ddd;border-radius:var(--border-radius)}.order-details-qr small{color:var(--secondary-color);font-size:.9rem}.order-details-history{padding:1.5rem;border-top:1px solid #eee}.order-details-history h3{margin-bottom:1rem}.order-details-history ul{list-style-type:none;padding:0}.order-details-history li{display:flex;align-items:flex-start;gap:1rem;padding:.75rem 0;border-bottom:1px solid #f1f1f1}.order-details-history li:last-child{border-bottom:none}.status-dot{width:14px;height:14px;border-radius:50%;margin-top:5px;flex-shrink:0}.history-date{color:var(--secondary-color);font-size:.9rem;margin-right:.5rem}.order-details-history p{margin-top:.25rem;color:#555;font-size:.9rem}.super-admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1.5rem}.admin-card{padding:1.5rem;cursor:pointer;transition:transform .2s,box-shadow .2s;border-left:4px solid var(--primary-color)}.admin-card:hover{transform:translateY(-5px);box-shadow:0 8px 15px #00000014}.admin-card h4{margin-top:0;margin-bottom:.5rem;font-size:1.2rem}.admin-card p{margin:0;color:var(--secondary-color);font-size:.9rem}.profile-container{max-width:900px;margin:0 auto}.profile-header{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #eee}.profile-header h2{font-size:1.3rem;margin:0}.profile-header .back-button{margin:0}.profile-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:2rem;padding:1.5rem}.profile-info h3,.profile-qr h4{margin-bottom:1.5rem;border-bottom:2px solid var(--primary-color);padding-bottom:.5rem;display:inline-block}.profile-info p{margin-bottom:1rem;font-size:1.1rem}.profile-qr{text-align:center;padding-right:1.5rem}.profile-actions{display:flex;justify-content:flex-end;gap:1rem;padding:1.5rem;border-top:1px solid #eee;background-color:var(--light-color)}.table-header-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid #eee}.table-header-actions p{margin:0;font-weight:500}.table-responsive{overflow-x:auto}table{width:100%;border-collapse:collapse;text-align:right}th,td{padding:1rem;border-bottom:1px solid #eee;vertical-align:middle}th{background-color:var(--light-color);font-weight:500;font-size:.9rem;color:var(--secondary-color)}tbody tr:hover{background-color:#f8f9fa}.serial-number{font-family:monospace;font-size:.9rem;direction:ltr;text-align:right;color:var(--secondary-color)}.table-actions{display:flex;gap:.5rem}.reports-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1.5rem;margin-top:1.5rem}.status-distribution-container{display:flex;flex-direction:column;gap:1.5rem}.status-distribution-item{display:flex;flex-direction:column;gap:.5rem}.status-info{display:flex;justify-content:space-between;align-items:center;font-size:.9rem}.progress-bar-container{width:100%;background-color:#e9ecef;border-radius:10px;height:10px;overflow:hidden}.progress-bar-fill{height:100%;border-radius:10px;transition:width .5s ease-in-out}.progress-bar-fill.status-pending{background-color:var(--pending-color)}.progress-bar-fill.status-scanned{background-color:var(--info-color)}.progress-bar-fill.status-fulfilled{background-color:var(--success-color)}.progress-bar-fill.status-rejected{background-color:var(--danger-color)}.progress-bar-fill.status-expired{background-color:var(--warning-color)}.chart-container{width:100%;height:auto;padding:1rem 0}.chart-container svg{width:100%;height:auto}.chart-container .grid-line line{stroke:#e9ecef;stroke-dasharray:2,2}.chart-container .grid-line text{font-size:.75rem;fill:var(--secondary-color)}