:root{ --primary: #FF4D00; --primary-hover: color-mix(in srgb, var(--primary) 88%, black); --primary-light: color-mix(in srgb, var(--primary) 15%, transparent); --accent: #FFC107; --accent-hover: color-mix(in srgb, var(--accent) 88%, black); --success: #00D68F; --warning: #FFAA00; --danger: #FF6B6B; --bg-body: #F0F2F5; --bg-card: rgba(255, 255, 255, 0.70); --bg-card-solid: #FFFFFF; --bg-input: #F5F6FA; --bg-input-focus: #FFFFFF; --text-primary: #1A1D29; --text-secondary: #4A4D64; --text-muted: #646A7A; --text-on-primary: #FFFFFF; --border-color: rgba(0, 0, 0, 0.06); --glass-border: rgba(255, 255, 255, 0.30); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04); --shadow-md: 0 8px 32px rgba(31, 38, 135, 0.07); --shadow-lg: 0 16px 48px rgba(31, 38, 135, 0.08); --shadow-glow: 0 0 40px color-mix(in srgb, var(--primary) 15%, transparent); --hero-glow-inner: rgba(255, 255, 255, 0.6); --glass-blur: 24px; --glass-bg: rgba(255, 255, 255, 0.40); --glass-bg-strong: rgba(255, 255, 255, 0.60); --gradient-primary:linear-gradient(135deg, var(--primary), var(--accent)); --gradient-blue: linear-gradient(135deg, #3B82F6, #2563EB); --gradient-green: linear-gradient(135deg, #10B981, #059669); --gradient-purple: linear-gradient(135deg, #8B5CF6, #6D28D9); --radius: 16px; --radius-sm: 10px; --radius-xs: 6px; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } [data-theme="dark"], [data-bs-theme="dark"], .dark-mode{ --bg-body: #0C0C0E; --bg-card: rgba(22, 22, 24, 0.65); --bg-card-solid: #131315; --bg-input: #1C1C1F; --bg-input-focus: #252527; --text-primary: #EDEEF2; --text-secondary: #B8BCCD; --text-muted: #9EA2B0; --border-color: rgba(255, 255, 255, 0.06); --glass-border: rgba(255, 255, 255, 0.08); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.25); --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.35); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.40); --shadow-glow: 0 0 50px color-mix(in srgb, var(--primary) 22%, transparent); --hero-glow-inner: #000000; --glass-bg: rgba(28, 28, 32, 0.50); --glass-bg-strong: rgba(22, 22, 26, 0.75); } *, *::before, *::after{ margin:0; padding:0; box-sizing:border-box; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active{ -webkit-box-shadow:0 0 0 5000px var(--bg-input) inset !important; transition:background-color 5000s ease-in-out 0s !important; -webkit-text-fill-color:var(--text-primary) !important; } html, body{ scroll-behavior:smooth; overflow-x:hidden; } body{ font-family:var(--font-family); background:var(--bg-body); color:var(--text-primary); line-height:1.6; min-height:100vh; transition:var(--transition); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } a{ color:var(--primary); text-decoration:none; transition:var(--transition); } a:hover{ color:var(--primary-hover); } .login-wrapper{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem; position:relative; overflow:hidden; background-image:url('../img/logistics_bg_clean.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; } .login-wrapper::before{ content:''; position:absolute; width:600px; height:600px; background:radial-gradient(circle, var(--primary) 0%, transparent 70%); opacity:0.12; top:-200px; right:-100px; border-radius:50%; animation:float 8s ease-in-out infinite; pointer-events:none; } .login-wrapper::after{ content:''; position:absolute; width:500px; height:500px; background:radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity:0.10; bottom:-150px; left:-100px; border-radius:50%; animation:float 10s ease-in-out infinite reverse; pointer-events:none; } @keyframes float{ 0%, 100%{transform:translate(0, 0) scale(1);} 33% {transform:translate(30px, -30px) scale(1.05);} 66% {transform:translate(-20px, 20px) scale(0.95);} } .glass-card{ background:var(--glass-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px); border:1px solid var(--glass-border); border-radius:var(--radius); box-shadow:0 8px 32px 0 rgba(31, 38, 135, 0.07); transition:var(--transition); transform:translateZ(0); will-change:transform, backdrop-filter; } .glass-card:hover{ box-shadow:0 12px 40px 0 rgba(31, 38, 135, 0.10); } .login-wrapper .glass-card{ background:var(--glass-bg-strong); backdrop-filter:blur(32px); -webkit-backdrop-filter:blur(32px); } .login-card{ width:100%; max-width:460px; padding:3rem 2.5rem; position:relative; z-index:1; animation:slideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes slideUp{ from{ opacity:0; transform:translateY(40px) scale(0.96); } to{ opacity:1; transform:translateY(0) scale(1); } } .auth-step-container{ animation:fadeInAuthStep 0.35s cubic-bezier(0.16, 1, 0.3, 1) both; } @keyframes fadeInAuthStep{ from{ opacity:0; transform:translateY(12px) scale(0.98); } to{ opacity:1; transform:translateY(0) scale(1); } } .otp-input-group{ display:flex; justify-content:center; align-items:center; gap:0.55rem; margin:1.25rem 0; } .otp-digit{ width:48px; height:56px; font-size:1.5rem; font-weight:800; text-align:center; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; background:var(--bg-input, #1c1c1f); color:var(--text-primary, #ffffff); border:1.5px solid var(--border-color, rgba(255, 255, 255, 0.12)); border-radius:12px; outline:none; transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1); box-shadow:var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, 0.04)); -webkit-appearance:none; -moz-appearance:textfield; } .otp-digit::-webkit-outer-spin-button, .otp-digit::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; } .otp-digit:hover{ border-color:rgba(255, 77, 0, 0.4); } .otp-digit:focus{ background:var(--bg-input-focus, #252527); border-color:var(--primary, #FF4D00); box-shadow:0 0 0 4px var(--primary-light, rgba(255, 77, 0, 0.18)), 0 6px 16px rgba(255, 77, 0, 0.15); transform:translateY(-2px) scale(1.04); } .otp-digit.filled{ border-color:var(--primary, #FF4D00); background:var(--bg-input-focus, #252527); color:var(--primary, #FF4D00); } .otp-digit.is-invalid{ border-color:var(--danger, #ef4444) !important; background:rgba(239, 68, 68, 0.08) !important; animation:shake 0.4s ease-in-out; } @media (max-width:480px){ .otp-input-group{ gap:0.35rem; } .otp-digit{ width:40px; height:48px; font-size:1.25rem; border-radius:10px; } } @media (max-width:360px){ .otp-input-group{ gap:0.25rem; } .otp-digit{ width:34px; height:42px; font-size:1.1rem; border-radius:8px; } } .brand-section{ text-align:center; margin-bottom:2rem; } .brand-icon{ width:64px; height:64px; background:linear-gradient(135deg, var(--primary), var(--accent)); border-radius:18px; display:inline-flex; align-items:center; justify-content:center; margin-bottom:1rem; box-shadow:0 8px 24px rgba(255, 77, 0, 0.35); animation:pulse-glow 3s ease-in-out infinite; } @keyframes pulse-glow{ 0%, 100%{box-shadow:0 8px 24px rgba(255, 77, 0, 0.35);} 50% {box-shadow:0 8px 36px rgba(255, 77, 0, 0.55);} } .brand-icon i{ font-size:1.75rem; color:#FFFFFF; } .brand-title{ font-size:1.75rem; font-weight:800; color:var(--text-primary); letter-spacing:-0.03em; margin-bottom:0.25rem; } .brand-subtitle{ font-size:0.9rem; color:var(--text-secondary); font-weight:400; } .form-floating{ margin-bottom:1.25rem; } .sl-input{ background:var(--bg-input) !important; border:1.5px solid var(--border-color) !important; border-radius:var(--radius-sm) !important; color:var(--text-primary) !important; font-size:0.95rem; padding:1rem 1rem 0.5rem 1rem; height:3.5rem; transition:var(--transition); } .sl-input:focus{ background:var(--bg-input-focus) !important; border-color:var(--primary) !important; box-shadow:0 0 0 4px var(--primary-light) !important; outline:none; } .sl-input::placeholder{ color:var(--text-muted); } .form-floating label{ color:var(--text-primary); opacity:0.75; font-size:0.95rem; font-weight:500; } .form-floating > .form-control:focus ~ label, .form-floating > .form-control:not(:placeholder-shown) ~ label{ color:var(--primary) !important; opacity:1; font-weight:600; } .password-wrapper{ position:relative; } .password-toggle{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none; border:none; color:var(--text-muted); cursor:pointer; font-size:1.1rem; z-index:5; transition:var(--transition); padding:4px; } .password-toggle:hover{ color:var(--primary); } .btn-sl-primary{ display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; width:100%; padding:0.95rem 1.4rem; border:none; border-radius:var(--radius-sm); background:linear-gradient(135deg, var(--primary), var(--accent)); color:var(--text-on-primary); font-size:1rem; font-weight:700; letter-spacing:0.01em; cursor:pointer; transition:var(--transition); position:relative; overflow:hidden; box-shadow:0 10px 28px rgba(255, 77, 0, 0.24), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.25); } .btn-sl-primary:hover{ color:var(--text-on-primary); } [data-theme="dark"] .btn-sl-primary{ box-shadow:0 12px 30px rgba(255, 77, 0, 0.28), inset 0 -3px 0 rgba(0, 0, 0, 0.25), inset 0 2px 0 rgba(255, 255, 255, 0.15); } .btn-sl-sm{ display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; padding:0.52rem 1.15rem; font-size:0.84rem; font-weight:600; line-height:1.4; border-radius:var(--radius-sm, 10px); border:1px solid transparent; cursor:pointer; text-decoration:none !important; transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1); white-space:nowrap; user-select:none; box-sizing:border-box; } .btn-sl-sm:hover{ transform:translateY(-1.5px); } .btn-sl-sm:active{ transform:translateY(0); } .btn-sl-sm i{ font-size:0.95em; line-height:1; } .btn-sl-sm-primary{ background:linear-gradient(135deg, var(--primary, #FF4D00), #ff7a00); color:#ffffff !important; border-color:transparent; box-shadow:0 4px 14px rgba(255, 77, 0, 0.28); } .btn-sl-sm-primary:hover{ background:linear-gradient(135deg, #e04400, #ff6a00); color:#ffffff !important; box-shadow:0 6px 20px rgba(255, 77, 0, 0.4); } .btn-sl-sm-danger{ background:rgba(239, 68, 68, 0.12) !important; color:#ef4444 !important; border:1px solid rgba(239, 68, 68, 0.35) !important; box-shadow:0 2px 8px rgba(239, 68, 68, 0.12); } .btn-sl-sm-danger:hover{ background:#ef4444 !important; color:#ffffff !important; border-color:#ef4444 !important; box-shadow:0 6px 18px rgba(239, 68, 68, 0.4) !important; } [data-theme="dark"] .btn-sl-sm-danger, [data-bs-theme="dark"] .btn-sl-sm-danger, body.dark-mode .btn-sl-sm-danger{ background:rgba(239, 68, 68, 0.18) !important; color:#f87171 !important; border-color:rgba(239, 68, 68, 0.45) !important; } [data-theme="dark"] .btn-sl-sm-danger:hover, [data-bs-theme="dark"] .btn-sl-sm-danger:hover, body.dark-mode .btn-sl-sm-danger:hover{ background:#ef4444 !important; color:#ffffff !important; border-color:#ef4444 !important; } .btn-sl-sm-outline{ background:transparent !important; color:var(--text-primary, #1a1d29) !important; border:1px solid var(--border-color, rgba(0, 0, 0, 0.15)) !important; } .btn-sl-sm-outline:hover{ background:var(--primary-light, rgba(255, 77, 0, 0.08)) !important; border-color:var(--primary, #FF4D00) !important; color:var(--primary, #FF4D00) !important; } [data-theme="dark"] .btn-sl-sm-outline, [data-bs-theme="dark"] .btn-sl-sm-outline, body.dark-mode .btn-sl-sm-outline{ color:var(--text-primary, #ffffff) !important; border-color:rgba(255, 255, 255, 0.15) !important; } [data-theme="dark"] .btn-sl-sm-outline:hover, [data-bs-theme="dark"] .btn-sl-sm-outline:hover, body.dark-mode .btn-sl-sm-outline:hover{ background:rgba(255, 77, 0, 0.15) !important; border-color:var(--primary, #FF4D00) !important; color:var(--primary, #FF4D00) !important; } .btn-sl-sm-secondary{ background:rgba(148, 163, 184, 0.15) !important; color:var(--text-secondary, #64748b) !important; border:1px solid rgba(148, 163, 184, 0.25) !important; } .btn-sl-sm-secondary:hover{ background:rgba(148, 163, 184, 0.25) !important; color:var(--text-primary, #1a1d29) !important; } .cta-btn{ display:inline-flex; align-items:center; justify-content:center; padding:0.85rem 2rem; border-radius:var(--radius-sm); background:var(--gradient-primary); color:var(--text-on-primary); font-weight:600; font-size:1rem; text-decoration:none; transition:var(--transition); box-shadow:var(--shadow-sm); border:none; cursor:pointer; } .cta-btn:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); } .cta-btn:active{ transform:translateY(0); } .cta-btn[style*="background:transparent"]{ background:transparent !important; color:var(--primary) !important; border:2px solid var(--text-primary) !important; } .cta-btn i{ margin-right:0.5rem; font-size:1.2rem; line-height:0; } [data-theme="dark"] .cta-btn{ background:var(--gradient-primary); color:var(--text-on-primary); } [data-theme="dark"] .cta-btn[style*="background:transparent"]{ border-color:var(--text-primary) !important; color:var(--primary) !important; } .btn-sl-primary::before{ content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg, transparent, rgba(255,255,255,0.15), transparent); transition:left 0.5s ease; } .btn-sl-primary:hover{ transform:translateY(-2px); box-shadow:0 12px 35px rgba(255, 77, 0, 0.40), inset 0 -3px 0 rgba(0, 0, 0, 0.15), inset 0 2px 0 rgba(255, 255, 255, 0.25); } .btn-sl-primary:hover::before{ left:100%; } .btn-sl-primary:active{ transform:translateY(0); } .alert-sl{ border:none; border-radius:var(--radius-sm); padding:0.85rem 1.25rem; font-size:0.875rem; font-weight:500; display:flex; align-items:center; gap:0.5rem; animation:shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; } .alert-sl-danger{ background:rgba(255, 107, 107, 0.12); color:var(--danger); border-left:3px solid var(--danger); } .alert-sl-success{ background:rgba(0, 214, 143, 0.12); color:var(--success); border-left:3px solid var(--success); } @keyframes shake{ 10%, 90% {transform:translateX(-1px);} 20%, 80% {transform:translateX(2px);} 30%, 50%, 70%{transform:translateX(-3px);} 40%, 60% {transform:translateX(3px);} } .social-login-divider{ display:flex; align-items:center; margin:1.5rem 0 1.25rem; gap:1rem; } .social-login-divider::before, .social-login-divider::after{ content:''; flex:1; height:1px; background:var(--border-color); } .social-login-divider span{ font-size:0.8rem; color:var(--text-muted); font-weight:500; text-transform:uppercase; letter-spacing:0.05em; white-space:nowrap; } .social-login-buttons{ display:flex; gap:0.65rem; justify-content:center; width:100%; } .btn-social{ display:inline-flex; align-items:center; justify-content:center; gap:0.45rem; padding:0.65rem 0.75rem; border-radius:var(--radius-sm); font-size:0.85rem; font-weight:600; text-decoration:none; transition:var(--transition); border:1px solid var(--border-color); background:var(--bg-card-solid); color:var(--text-primary); flex:1 1 0; min-width:0; height:42px; white-space:nowrap; box-shadow:var(--shadow-sm); } .btn-social span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .btn-social:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); color:var(--text-primary); text-decoration:none; } .btn-social:active{ transform:translateY(0); } .btn-social svg{ flex-shrink:0; } .btn-social-google:hover{ border-color:#4285F4; background:rgba(66, 133, 244, 0.06); } .btn-social-facebook:hover{ border-color:#1877F2; background:rgba(24, 119, 242, 0.06); } .btn-social-apple svg{ color:var(--text-primary); } .btn-social-apple:hover{ border-color:var(--text-primary); background:rgba(0, 0, 0, 0.05); } [data-theme="dark"] .btn-social{ background:rgba(255, 255, 255, 0.05); border-color:rgba(255, 255, 255, 0.12); } [data-theme="dark"] .btn-social:hover{ background:rgba(255, 255, 255, 0.09); } [data-theme="dark"] .btn-social-apple:hover{ border-color:rgba(255, 255, 255, 0.35); background:rgba(255, 255, 255, 0.12); } .theme-toggle{ position:fixed; top:1.5rem; right:1.5rem; z-index:9999; background:var(--glass-bg); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--glass-border); border-radius:50px; padding:0.5rem; cursor:pointer; display:flex; align-items:center; justify-content:center; width:48px; height:48px; box-shadow:var(--shadow-sm); transition:var(--transition); color:var(--text-primary); font-size:1.25rem; transform:translateZ(0); will-change:transform, backdrop-filter; } .theme-toggle:hover{ transform:scale(1.1) rotate(15deg); box-shadow:var(--shadow-md); } .theme-toggle .icon-sun, .theme-toggle .icon-moon{ transition:var(--transition); } [data-theme="dark"] .theme-toggle .icon-sun {display:inline;} [data-theme="dark"] .theme-toggle .icon-moon{display:none;} [data-theme="light"] .theme-toggle .icon-sun {display:none;} [data-theme="light"] .theme-toggle .icon-moon{display:inline;} .btn-spinner{ display:none; width:20px; height:20px; border:2.5px solid rgba(255, 255, 255, 0.3); border-top-color:#fff; border-radius:50%; animation:spin 0.6s linear infinite; margin-right:0.5rem; } @keyframes spin{ to{transform:rotate(360deg);} } .btn-sl-primary.loading .btn-spinner{ display:inline-block; } .btn-sl-primary.loading .btn-text{ opacity:0.7; } .login-footer{ text-align:center; margin-top:1.5rem; font-size:0.825rem; color:var(--text-muted); } .divider{ display:flex; align-items:center; gap:1rem; margin:1.5rem 0; color:var(--text-muted); font-size:0.8rem; font-weight:500; text-transform:uppercase; letter-spacing:0.08em; } .divider::before, .divider::after{ content:''; flex:1; height:1px; background:var(--border-color); } .table-glass{ width:100%; border-collapse:separate; border-spacing:0; font-size:0.9rem; } .table-glass thead th{ background:var(--bg-input); color:var(--text-secondary); font-weight:600; font-size:0.78rem; text-transform:uppercase; letter-spacing:0.06em; padding:1rem 1.25rem; border-bottom:1px solid var(--border-color); border-top:none; white-space:nowrap; } .table-glass tbody td{ padding:1rem 1.25rem; vertical-align:middle; color:var(--text-primary); border-bottom:1px solid var(--border-color); border-top:none; } .table-glass tbody tr{ transition:var(--transition); } .table-glass tbody tr:hover{ background:var(--primary-light); } .table-glass tbody tr:last-child td{ border-bottom:none; } .badge-status{ display:inline-flex; align-items:center; gap:0.35rem; padding:0.3rem 0.85rem; border-radius:50px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; white-space:nowrap; } .badge-status-pending{ background:rgba(255, 170, 0, 0.12); color:#CC8800; } [data-theme="dark"] .badge-status-pending{ background:rgba(255, 170, 0, 0.15); color:#FFBB33; } .badge-status-transit{ background:rgba(59, 130, 246, 0.10); color:#2563EB; } [data-theme="dark"] .badge-status-transit{ background:rgba(59, 130, 246, 0.15); color:#60A5FA; } .badge-status-delivered{ background:rgba(0, 214, 143, 0.10); color:#00A86B; } [data-theme="dark"] .badge-status-delivered{ background:rgba(0, 214, 143, 0.15); color:#00D68F; } .badge-status-cancelled{ background:rgba(255, 107, 107, 0.10); color:#DC2626; } [data-theme="dark"] .badge-status-cancelled{ background:rgba(255, 107, 107, 0.15); color:#FF6B6B; } .admin-content .glass-card{ padding:2.5rem; } @media (max-width:576px){ .login-wrapper{ padding:1.25rem 0.85rem; } .login-page{ padding-block:1rem; } .login-card{ padding:2rem 1.25rem; border-radius:var(--radius-sm); } .brand-title{ font-size:1.5rem; } .social-login-divider{ margin:1.25rem 0 1rem; } .social-login-buttons{ gap:0.5rem; } .btn-social{ padding:0.55rem 0.35rem; font-size:0.78rem; gap:0.35rem; height:40px; border-radius:8px; } .btn-social svg{ width:16px; height:16px; } .theme-toggle{ width:44px; height:44px; top:1rem; right:1rem; } .admin-content .glass-card{ padding:1.5rem; } } @media (max-width:380px){ .login-wrapper{ padding:1rem 0.5rem; } .login-card{ padding:1.75rem 1rem; } .social-login-buttons{ gap:0.35rem; } .btn-social{ padding:0.5rem 0.2rem; font-size:0.72rem; gap:0.25rem; height:38px; } .btn-social svg{ width:14px; height:14px; } } .logo-light{display:inline-block;} .logo-dark{display:none;} body.dark-mode .logo-light, [data-theme="dark"] .logo-light{display:none !important;} body.dark-mode .logo-dark, [data-theme="dark"] .logo-dark{display:inline-block !important;} .text-muted{color:var(--text-muted) !important;} .text-secondary{color:var(--text-secondary) !important;} .text-primary{color:var(--text-primary) !important;} .bg-light, .bg-white{background-color:var(--bg-card-solid) !important;} .bg-dark{background-color:rgba(20, 20, 20, 0.95) !important;} body.is-scrolling .glass-card, body.is-scrolling .theme-toggle, body.is-scrolling .public-header-nav{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:none !important; } @media (hover:none) and (pointer:coarse){ .theme-toggle:hover, .btn-sl-primary:hover, .table-glass tbody tr:hover{ transform:none; box-shadow:var(--shadow-sm); } } @media (prefers-reduced-motion:reduce){ html:focus-within{ scroll-behavior:auto; } *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } .theme-toggle:hover{ transform:none; } } html[dir="rtl"], body[dir="rtl"]{ text-align:right; } [dir="rtl"] .dropdown-menu-end{ right:auto !important; left:0 !important; } [dir="rtl"] .dropdown-menu{ text-align:right !important; } .input-group{ position:relative; display:flex; flex-wrap:wrap; align-items:stretch; width:100%; } .input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text, .input-group > .btn{ position:relative; flex:1 1 auto; width:1%; min-width:0; border-radius:12px; transition:all 0.25s ease; } .input-group-text{ display:flex; align-items:center; padding:0.55rem 0.95rem; font-size:0.9rem; font-weight:500; line-height:1.5; text-align:center; white-space:nowrap; background:var(--bg-card, rgba(255, 255, 255, 0.05)) !important; border:1px solid var(--border-color, rgba(255, 255, 255, 0.12)) !important; color:var(--text-secondary, rgba(255, 255, 255, 0.6)) !important; flex:0 0 auto !important; width:auto !important; } .input-group > :not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){ margin-left:-1px; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; } .input-group > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating){ border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } .input-group > .form-control:focus, .input-group > .form-select:focus, .input-group > .btn:focus{ z-index:5 !important; } .password-wrapper, .sl-password-wrapper{ position:relative; display:block; width:100%; } .password-wrapper .form-control, .sl-password-wrapper .form-control{ padding-right:44px !important; } .password-wrapper .password-toggle, .sl-password-wrapper .password-toggle{ position:absolute; right:14px; top:50%; transform:translateY(-50%); background:none !important; border:none !important; color:var(--text-muted, #94a3b8) !important; cursor:pointer; font-size:1.15rem; z-index:5; padding:4px 6px; display:inline-flex; align-items:center; justify-content:center; transition:color 0.2s ease; box-shadow:none !important; } .password-wrapper .password-toggle:hover, .sl-password-wrapper .password-toggle:hover{ color:var(--primary, #FF4D00) !important; } .badge-sl{ display:inline-flex !important; align-items:center !important; gap:0.35rem !important; padding:0.35rem 0.75rem !important; border-radius:50px !important; font-size:0.75rem !important; font-weight:700 !important; letter-spacing:0.02em !important; line-height:1.2 !important; white-space:nowrap !important; text-transform:capitalize !important; box-shadow:0 2px 6px rgba(0, 0, 0, 0.04); } .badge-sl i{ font-size:0.88em; margin-right:0.35rem; display:inline-block; } .badge-sl-primary{ background:rgba(255, 77, 0, 0.12) !important; color:#FF4D00 !important; border:1px solid rgba(255, 77, 0, 0.28) !important; } .badge-sl-success{ background:rgba(16, 185, 129, 0.14) !important; color:#10B981 !important; border:1px solid rgba(16, 185, 129, 0.32) !important; } .badge-sl-warning{ background:rgba(245, 158, 11, 0.14) !important; color:#F59E0B !important; border:1px solid rgba(245, 158, 11, 0.32) !important; } .badge-sl-danger{ background:rgba(239, 68, 68, 0.14) !important; color:#EF4444 !important; border:1px solid rgba(239, 68, 68, 0.32) !important; } .badge-sl-info{ background:rgba(59, 130, 246, 0.14) !important; color:#3B82F6 !important; border:1px solid rgba(59, 130, 246, 0.32) !important; } .badge-sl-secondary{ background:rgba(148, 163, 184, 0.14) !important; color:#94A3B8 !important; border:1px solid rgba(148, 163, 184, 0.28) !important; } .badge-returned{ background:rgba(239, 68, 68, 0.14) !important; color:#EF4444 !important; border:1px solid rgba(239, 68, 68, 0.32) !important; } .badge-in-transit{ background:rgba(59, 130, 246, 0.14) !important; color:#3B82F6 !important; border:1px solid rgba(59, 130, 246, 0.32) !important; } .badge-delivered{ background:rgba(16, 185, 129, 0.14) !important; color:#10B981 !important; border:1px solid rgba(16, 185, 129, 0.32) !important; } .badge-pending{ background:rgba(245, 158, 11, 0.14) !important; color:#F59E0B !important; border:1px solid rgba(245, 158, 11, 0.32) !important; } .badge-inactive{ background:rgba(148, 163, 184, 0.14) !important; color:#94A3B8 !important; border:1px solid rgba(148, 163, 184, 0.28) !important; } [data-theme="light"] .badge-sl-primary, [data-bs-theme="light"] .badge-sl-primary{ background:#FFF0E8 !important; color:#C2410C !important; border-color:#FED7AA !important; } [data-theme="light"] .badge-sl-success, [data-bs-theme="light"] .badge-sl-success, [data-theme="light"] .badge-delivered, [data-bs-theme="light"] .badge-delivered{ background:#ECFDF5 !important; color:#047857 !important; border-color:#A7F3D0 !important; } [data-theme="light"] .badge-sl-warning, [data-bs-theme="light"] .badge-sl-warning, [data-theme="light"] .badge-pending, [data-bs-theme="light"] .badge-pending{ background:#FFFBEB !important; color:#B45309 !important; border-color:#FDE68A !important; } [data-theme="light"] .badge-sl-danger, [data-bs-theme="light"] .badge-sl-danger, [data-theme="light"] .badge-returned, [data-bs-theme="light"] .badge-returned{ background:#FEF2F2 !important; color:#B91C1C !important; border-color:#FECACA !important; } [data-theme="light"] .badge-sl-info, [data-bs-theme="light"] .badge-sl-info, [data-theme="light"] .badge-in-transit, [data-bs-theme="light"] .badge-in-transit{ background:#EFF6FF !important; color:#1D4ED8 !important; border-color:#BFDBFE !important; } [data-theme="light"] .badge-sl-secondary, [data-bs-theme="light"] .badge-sl-secondary, [data-theme="light"] .badge-inactive, [data-bs-theme="light"] .badge-inactive{ background:#F8FAFC !important; color:#475569 !important; border-color:#E2E8F0 !important; } .ticket-desk-header{ display:flex; flex-direction:column; gap:0.35rem; width:100%; } .ticket-meta-strip{ display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; font-size:0.82rem; color:var(--text-secondary, #94A3B8); } .ticket-meta-strip span{ display:inline-flex; align-items:center; gap:0.35rem; } .ticket-bubble{ padding:1.1rem 1.25rem; border-radius:14px; position:relative; transition:all 0.2s ease; } .ticket-bubble-customer{ background:var(--bg-card, rgba(255, 255, 255, 0.03)); border:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); } .ticket-bubble-staff{ background:rgba(255, 77, 0, 0.04); border:1px solid rgba(255, 77, 0, 0.18); } .ticket-bubble-internal{ background:rgba(245, 158, 11, 0.06); border:1px solid rgba(245, 158, 11, 0.25); } [data-theme="light"] .ticket-bubble-customer, [data-bs-theme="light"] .ticket-bubble-customer{ background:#F8FAFC; border-color:#E2E8F0; } [data-theme="light"] .ticket-bubble-staff, [data-bs-theme="light"] .ticket-bubble-staff{ background:#FFF7ED; border-color:#FFEDD5; } [data-theme="light"] .ticket-bubble-internal, [data-bs-theme="light"] .ticket-bubble-internal{ background:#FFFBEB; border-color:#FEF3C7; } .ticket-desk-card{ background:var(--bg-card, rgba(22, 22, 26, 0.6)); border:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); border-radius:16px; padding:1.25rem; } [data-theme="light"] .ticket-desk-card, [data-bs-theme="light"] .ticket-desk-card{ background:#FFFFFF; border-color:#E2E8F0; box-shadow:0 4px 16px rgba(0, 0, 0, 0.03); } .ticket-composer{ background:var(--bg-card, rgba(22, 22, 26, 0.6)); border:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); border-radius:16px; overflow:hidden; } [data-theme="light"] .ticket-composer, [data-bs-theme="light"] .ticket-composer{ background:#FFFFFF; border-color:#E2E8F0; box-shadow:0 4px 16px rgba(0, 0, 0, 0.03); } .ticket-composer-header{ padding:0.75rem 1.15rem; background:rgba(0, 0, 0, 0.15); border-bottom:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); display:flex; align-items:center; justify-content:space-between; } [data-theme="light"] .ticket-composer-header, [data-bs-theme="light"] .ticket-composer-header{ background:#F8FAFC; border-bottom-color:#E2E8F0; } .ticket-composer-body{ padding:0.75rem 1.15rem; } .ticket-composer-body textarea{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; color:var(--text-primary) !important; font-size:0.92rem; line-height:1.6; } .ticket-composer-footer{ padding:0.75rem 1.15rem; background:rgba(0, 0, 0, 0.15); border-top:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.75rem; } [data-theme="light"] .ticket-composer-footer, [data-bs-theme="light"] .ticket-composer-footer{ background:#F8FAFC; border-top-color:#E2E8F0; } .ticket-sla-row{ display:flex; align-items:center; justify-content:space-between; padding:0.65rem 0.85rem; border-radius:10px; background:rgba(255, 255, 255, 0.02); border:1px solid var(--border-color, rgba(255, 255, 255, 0.05)); gap:0.75rem; } [data-theme="light"] .ticket-sla-row, [data-bs-theme="light"] .ticket-sla-row{ background:#F8FAFC; border-color:#E2E8F0; } .ticket-replies-stream::-webkit-scrollbar{ width:5px; } .ticket-replies-stream::-webkit-scrollbar-track{ background:transparent; } .ticket-replies-stream::-webkit-scrollbar-thumb{ background:rgba(148, 163, 184, 0.2); border-radius:10px; } .ticket-replies-stream::-webkit-scrollbar-thumb:hover{ background:rgba(148, 163, 184, 0.4); } .settings-sidebar{ background:var(--bg-card, rgba(22, 22, 26, 0.6)); border:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); border-radius:20px; padding:1.25rem; box-shadow:0 8px 24px rgba(0, 0, 0, 0.04); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); position:sticky; top:104px; } [data-theme="light"] .settings-sidebar, [data-bs-theme="light"] .settings-sidebar{ background:#FFFFFF; border-color:rgba(0, 0, 0, 0.08); box-shadow:0 8px 30px rgba(0, 0, 0, 0.04); } .settings-pills .nav-link{ display:flex; align-items:center; gap:0.75rem; padding:0.78rem 1rem; border-radius:12px; font-size:0.88rem; font-weight:600; color:var(--text-secondary, #94A3B8); text-decoration:none; transition:all 0.25s cubic-bezier(0.16, 1, 0.3, 1); margin-bottom:0.35rem; border:1px solid transparent; text-align:left; background:transparent; width:100%; } .settings-pills .nav-link i{ font-size:1.1rem; width:22px; text-align:center; flex-shrink:0; transition:transform 0.25s ease; } .settings-pills .nav-link:hover{ background:var(--primary-light, rgba(255, 77, 0, 0.08)); color:var(--primary, #FF4D00); transform:translateX(3px); } .settings-pills .nav-link:hover i{ transform:scale(1.15); } .settings-pills .nav-link.active{ background:linear-gradient(135deg, var(--primary, #FF4D00), var(--accent, #FFC107)) !important; color:#FFFFFF !important; font-weight:700; box-shadow:0 4px 18px rgba(255, 77, 0, 0.3); border-color:transparent; } .settings-pills .nav-link.active i{ color:#FFFFFF !important; } .settings-card{ background:var(--bg-card, rgba(22, 22, 26, 0.6)); border:1px solid var(--border-color, rgba(255, 255, 255, 0.08)); border-radius:20px; padding:2rem; margin-bottom:1.75rem; box-shadow:0 8px 24px rgba(0, 0, 0, 0.04); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); position:relative; } [data-theme="light"] .settings-card, [data-bs-theme="light"] .settings-card{ background:#FFFFFF; border-color:rgba(0, 0, 0, 0.08); box-shadow:0 8px 30px rgba(0, 0, 0, 0.04); } .settings-card h5{ font-size:1.2rem; font-weight:800; color:var(--text-primary); margin-bottom:0.35rem; letter-spacing:-0.02em; display:flex; align-items:center; gap:0.5rem; } .settings-card p.text-muted{ font-size:0.88rem; color:var(--text-secondary) !important; line-height:1.5; margin-bottom:1.5rem; } .settings-card .form-label{ font-size:0.85rem; font-weight:600; color:var(--text-primary); margin-bottom:0.45rem; display:flex; align-items:center; gap:0.35rem; } .settings-card small.text-muted{ font-size:0.78rem; color:var(--text-muted) !important; margin-top:0.35rem; display:block; } .settings-card .form-control, .settings-card .form-select{ padding:0.65rem 1rem; border-radius:12px; font-size:0.9rem; font-weight:500; } .settings-card .form-check-input{ cursor:pointer; } .settings-card .form-check-label{ cursor:pointer; font-size:0.88rem; color:var(--text-primary); } .settings-card hr{ border-color:var(--border-color); opacity:0.4; margin:1.75rem 0; } .gap-0\.5, .gap-0-5{gap:0.125rem !important;} .gap-1\.5, .gap-1-5{gap:0.375rem !important;} .gap-2\.5, .gap-2-5{gap:0.625rem !important;} .gap-3\.5, .gap-3-5{gap:0.875rem !important;} .m-0\.5, .m-0-5{margin:0.125rem !important;} .m-1\.5, .m-1-5{margin:0.375rem !important;} .m-2\.5, .m-2-5{margin:0.625rem !important;} .m-3\.5, .m-3-5{margin:0.875rem !important;} .me-0\.5, .me-0-5{margin-right:0.125rem !important;} .me-1\.5, .me-1-5{margin-right:0.375rem !important;} .me-2\.5, .me-2-5{margin-right:0.625rem !important;} .me-3\.5, .me-3-5{margin-right:0.875rem !important;} .ms-0\.5, .ms-0-5{margin-left:0.125rem !important;} .ms-1\.5, .ms-1-5{margin-left:0.375rem !important;} .ms-2\.5, .ms-2-5{margin-left:0.625rem !important;} .ms-3\.5, .ms-3-5{margin-left:0.875rem !important;} .mt-0\.5, .mt-0-5{margin-top:0.125rem !important;} .mt-1\.5, .mt-1-5{margin-top:0.375rem !important;} .mt-2\.5, .mt-2-5{margin-top:0.625rem !important;} .mt-3\.5, .mt-3-5{margin-top:0.875rem !important;} .mb-0\.5, .mb-0-5{margin-bottom:0.125rem !important;} .mb-1\.5, .mb-1-5{margin-bottom:0.375rem !important;} .mb-2\.5, .mb-2-5{margin-bottom:0.625rem !important;} .mb-3\.5, .mb-3-5{margin-bottom:0.875rem !important;} .my-0\.5, .my-0-5{margin-top:0.125rem !important;margin-bottom:0.125rem !important;} .my-1\.5, .my-1-5{margin-top:0.375rem !important;margin-bottom:0.375rem !important;} .my-2\.5, .my-2-5{margin-top:0.625rem !important;margin-bottom:0.625rem !important;} .my-3\.5, .my-3-5{margin-top:0.875rem !important;margin-bottom:0.875rem !important;} .mx-0\.5, .mx-0-5{margin-left:0.125rem !important;margin-right:0.125rem !important;} .mx-1\.5, .mx-1-5{margin-left:0.375rem !important;margin-right:0.375rem !important;} .mx-2\.5, .mx-2-5{margin-left:0.625rem !important;margin-right:0.625rem !important;} .mx-3\.5, .mx-3-5{margin-left:0.875rem !important;margin-right:0.875rem !important;} .p-0\.5, .p-0-5{padding:0.125rem !important;} .p-1\.5, .p-1-5{padding:0.375rem !important;} .p-2\.5, .p-2-5{padding:0.625rem !important;} .p-3\.5, .p-3-5{padding:0.875rem !important;} .py-0\.5, .py-0-5{padding-top:0.125rem !important;padding-bottom:0.125rem !important;} .py-1\.5, .py-1-5{padding-top:0.375rem !important;padding-bottom:0.375rem !important;} .py-2\.5, .py-2-5{padding-top:0.625rem !important;padding-bottom:0.625rem !important;} .py-3\.5, .py-3-5{padding-top:0.875rem !important;padding-bottom:0.875rem !important;} .px-0\.5, .px-0-5{padding-left:0.125rem !important;padding-right:0.125rem !important;} .px-1\.5, .px-1-5{padding-left:0.375rem !important;padding-right:0.375rem !important;} .px-2\.5, .px-2-5{padding-left:0.625rem !important;padding-right:0.625rem !important;} .px-3\.5, .px-3-5{padding-left:0.875rem !important;padding-right:0.875rem !important;} .sl-copy-input-group{ position:relative; display:flex; align-items:center; background:var(--bg-input, rgba(255, 255, 255, 0.04)); border:1.5px solid var(--border-color, rgba(255, 255, 255, 0.1)); border-radius:var(--radius-sm, 12px); transition:all 0.25s ease; padding:0.25rem 0.35rem 0.25rem 0.85rem; gap:0.5rem; } [data-theme="dark"] .sl-copy-input-group, body.dark-mode .sl-copy-input-group{ background:rgba(18, 18, 22, 0.7); border-color:rgba(255, 255, 255, 0.08); } .sl-copy-input-group:focus-within{ border-color:var(--primary, #FF4D00); box-shadow:0 0 0 3.5px var(--primary-light, rgba(255, 77, 0, 0.15)); background:var(--bg-input-focus, rgba(28, 28, 34, 0.95)); } .sl-copy-input-group .sl-copy-icon{ font-size:1rem; color:var(--text-muted, #94a3b8); flex-shrink:0; transition:color 0.2s ease; } .sl-copy-input-group:focus-within .sl-copy-icon{ color:var(--primary, #FF4D00); } .sl-copy-input-group input.sl-copy-field{ flex:1; min-width:0; background:transparent !important; border:none !important; box-shadow:none !important; outline:none !important; padding:0.5rem 0.25rem !important; font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important; font-size:0.84rem !important; color:var(--text-primary, #ffffff) !important; line-height:1.4; } .sl-copy-input-group .btn-copy-action{ display:inline-flex; align-items:center; justify-content:center; gap:0.35rem; padding:0.42rem 0.9rem; font-size:0.78rem; font-weight:700; letter-spacing:0.02em; border-radius:8px; border:1px solid var(--border-color, rgba(255, 255, 255, 0.12)); background:rgba(255, 255, 255, 0.06); color:var(--text-primary, #ffffff); cursor:pointer; white-space:nowrap; flex-shrink:0; transition:all 0.2s cubic-bezier(0.16, 1, 0.3, 1); } .sl-copy-input-group .btn-copy-action:hover{ background:var(--primary, #FF4D00); color:#ffffff; border-color:var(--primary, #FF4D00); box-shadow:0 4px 14px rgba(255, 77, 0, 0.3); transform:translateY(-1px); } .sl-copy-input-group .btn-copy-action:active{ transform:translateY(0); } .sl-copy-input-group .btn-copy-action.copied{ background:#10B981 !important; border-color:#10B981 !important; color:#ffffff !important; box-shadow:0 4px 14px rgba(16, 185, 129, 0.35) !important; }