:root { --primary: #ff2b2b; --primary-rgb: 255, 43, 43; --primary-hover: #ff4444; --primary-active: #d90000; --primary-dark: #9b0000; --primary-soft: rgba(255, 43, 43, 0.12); --primary-soft-2: rgba(255, 43, 43, 0.18); --primary-glow: 0 0 24px rgba(255, 43, 43, 0.28); --secondary: #111318; --dark: #07090d; --dark-2: #0b0e14; --dark-3: #10141c; --dark-light: #161a22; --dark-card: #141821; --dark-card-2: #111722; --light: #9ca3af; --muted: #6b7280; --white: #f5f7fa; --success: #22c55e; --success-soft: rgba(34, 197, 94, 0.12); --warning: #f59e0b; --warning-soft: rgba(245, 158, 11, 0.14); --danger: #ef4444; --danger-soft: rgba(239, 68, 68, 0.14); --info: #38bdf8; --info-soft: rgba(56, 189, 248, 0.12); --border: rgba(255, 255, 255, 0.07); --border-strong: rgba(255, 255, 255, 0.12); --border-red: rgba(255, 43, 43, 0.18); --surface: rgba(17, 19, 24, 0.88); --surface-strong: rgba(20, 24, 33, 0.96); --surface-soft: rgba(255, 255, 255, 0.035); --shadow: 0 18px 45px rgba(0, 0, 0, 0.38); --shadow-lg: 0 28px 90px rgba(0, 0, 0, 0.55); --shadow-red: 0 16px 36px rgba(255, 0, 0, 0.18); --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --radius-xl: 34px; --transition: 0.25s ease; --transition-fast: 0.16s ease; --transition-slow: 0.38s ease; --sidebar-width: 300px; --top-navbar-height: 76px; --z-sidebar: 997; --z-navbar: 998; --z-back-to-top: 9999; --z-spinner: 999999; } @media (prefers-reduced-motion: reduce) { :root { --transition: 0.01ms linear; --transition-fast: 0.01ms linear; --transition-slow: 0.01ms linear; } } html { min-height: 100%; scroll-behavior: smooth; } body { min-height: 100vh; background: radial-gradient(circle at 12% 10%, rgba(var(--primary-rgb), 0.13), transparent 34%), linear-gradient(rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.92)), none; background-size: cover; background-position: center; background-attachment: fixed; color: var(--white); font-family: Vazirmatn, sans-serif; overflow-x: hidden; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body::selection, ::selection { background: rgba(var(--primary-rgb), 0.36); color: #fff; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: 0.01ms !important; } } * { scrollbar-width: thin; scrollbar-color: rgba(var(--primary-rgb), 0.4) #090909; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: #090909; } ::-webkit-scrollbar-thumb { background: linear-gradient( 180deg, rgba(var(--primary-rgb), 0.42), rgba(120, 0, 0, 0.38) ); border: 2px solid #090909; border-radius: 20px; } ::-webkit-scrollbar-thumb:hover { background: linear-gradient( 180deg, rgba(var(--primary-rgb), 0.72), rgba(160, 0, 0, 0.56) ); } h1, h2, h3, h4, h5, h6 { color: var(--white); font-weight: 800; line-height: 1.65; } p { line-height: 2; } p, span, small, label, li, td, th { color: inherit; } a { color: inherit; text-decoration: none; transition: color var(--transition), opacity var(--transition), background var(--transition), border-color var(--transition), transform var(--transition); } a:hover { color: var(--primary-hover); } img, svg, video, canvas { max-width: 100%; } img { vertical-align: middle; } :focus-visible { outline: 3px solid rgba(var(--primary-rgb), 0.28); outline-offset: 3px; } .text-primary { color: var(--primary) !important; } .link-light:hover { color: var(--primary-hover) !important; } pre { white-space: pre-wrap; word-break: break-word; } .content { width: calc(100% - var(--sidebar-width)); min-height: 100vh; margin-right: var(--sidebar-width); background: transparent; transition: width var(--transition), margin-right var(--transition), transform var(--transition); } .container-fluid { position: relative; } .content > .container-fluid { position: relative; z-index: 1; } .content .container-fluid.p-4, .content .container-fluid.px-4, .content .container-fluid.pb-4 { max-width: 1920px; margin-right: auto; margin-left: auto; } .row { min-width: 0; } [class*="col-"] { min-width: 0; } @media (max-width: 991.98px) { .content { width: 100%; margin-right: 0; } .content.open { transform: none; } } @media (min-width: 992px) { .content.open { width: 100%; margin-right: 0; } } @media (max-width: 575.98px) { .content .container-fluid.p-4 { padding: 1rem !important; } .content .container-fluid.px-4 { padding-right: 1rem !important; padding-left: 1rem !important; } } .content .navbar, .top-navbar { position: sticky; top: 0; min-height: var(--top-navbar-height); z-index: var(--z-navbar); background: linear-gradient( 180deg, rgba(13, 15, 21, 0.9), rgba(9, 10, 14, 0.78) ) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); z-index: var(--z-navbar); } .content .navbar .nav-link, .top-navbar .nav-link { color: rgba(255, 255, 255, 0.75); transition: var(--transition); } .content .navbar .nav-link:hover, .content .navbar .nav-link:focus, .top-navbar .nav-link:hover, .top-navbar .nav-link:focus { color: var(--white); } .sidebar-toggler { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border-radius: 16px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.025) ); border: 1px solid rgba(255, 255, 255, 0.08); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 10px 24px rgba(0, 0, 0, 0.22); cursor: pointer; outline: none; text-decoration: none; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition); } .sidebar-toggler i { line-height: 1; pointer-events: none; } .sidebar-toggler:hover, .sidebar-toggler:focus { background: linear-gradient( 180deg, rgba(var(--primary-rgb), 0.16), rgba(var(--primary-rgb), 0.06) ); border-color: rgba(var(--primary-rgb), 0.22); color: #fff; box-shadow: 0 14px 28px rgba(255, 0, 0, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: translateY(-2px); } .sidebar-toggler:active { transform: translateY(0) scale(0.98); } .mobile-brand { min-width: 48px; } @media (max-width: 575.98px) { .content .navbar, .top-navbar { min-height: 68px; } .sidebar-toggler { width: 44px; height: 44px; border-radius: 14px; } } .sidebar { position: fixed; top: 0; right: 0; bottom: 0; width: var(--sidebar-width); height: 100vh; overflow-x: hidden; overflow-y: auto; z-index: var(--z-sidebar); background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.13), transparent 36%), linear-gradient( 180deg, rgba(15, 16, 22, 0.98), rgba(7, 8, 12, 0.99) ); border-left: 1px solid var(--border); box-shadow: -14px 0 46px rgba(0, 0, 0, 0.42), inset 1px 0 0 rgba(255, 255, 255, 0.03); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: margin-right var(--transition), transform var(--transition), box-shadow var(--transition); } .sidebar::before { content: ""; position: sticky; top: 0; display: block; height: 1px; background: linear-gradient( 90deg, transparent, rgba(var(--primary-rgb), 0.45), transparent ); } .sidebar .navbar{ padding-top: 0; padding-bottom: 0; } .armanjafari_brand_row { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 12px; color: var(--primary) !important; font-weight: 900; text-align: center; transition: color var(--transition), filter var(--transition), transform var(--transition); } .armanjafari_brand_row img { height: 50px; filter: drop-shadow(0 0 8px rgba(var(--primary-rgb), 0.9)) drop-shadow(0 0 18px rgba(var(--primary-rgb), 0.18)); } .armanjafari_brand_row:hover { color: var(--primary-hover) !important; transform: scale(1.04); filter: drop-shadow(0 0 15px rgba(var(--primary-rgb), 0.62)) drop-shadow(0 0 35px rgba(var(--primary-rgb), 0.28)); } .sidebar .d-flex.align-items-center { width: 100%; margin-top: 10px; padding: 14px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.026) ); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 26px rgba(0, 0, 0, 0.16); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .sidebar .rounded-circle { border: 2px solid rgba(var(--primary-rgb), 0.28); object-fit: cover; } .sidebar h6 { color: var(--white); font-size: 14px; font-weight: 800; } .sidebar span { color: var(--light); font-size: 12px; } .sidebar .navbar { align-items: flex-start; } .sidebar .navbar-nav { gap: 8px; padding-bottom: 24px; } .sidebar .navbar .navbar-nav .nav-link { position: relative; display: flex; align-items: center; gap: 14px; min-height: 50px; margin: 0 12px; padding: 13px 18px; overflow: hidden; border: 1px solid transparent; border-radius: 16px; color: rgba(255, 255, 255, 0.72); font-size: 14px; font-weight: 650; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .sidebar .navbar .navbar-nav .nav-link::before { content: ""; position: absolute; inset: 0 0 0 auto; width: 3px; background: var(--primary); opacity: 0; box-shadow: var(--primary-glow); transition: opacity var(--transition); } .sidebar .navbar .navbar-nav .nav-link i { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 15px; flex-shrink: 0; } .sidebar .navbar .navbar-nav .nav-link:hover, .sidebar .navbar .navbar-nav .nav-link:focus { background: rgba(255, 255, 255, 0.055); color: var(--white); transform: translateX(-4px); } .sidebar .navbar .navbar-nav .nav-link.active { background: linear-gradient( 90deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.045) ); border-color: rgba(var(--primary-rgb), 0.16); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 24px rgba(0, 0, 0, 0.12); } .sidebar .navbar .navbar-nav .nav-link.active::before { opacity: 1; } .sidebar .dropdown-menu { margin: 6px 14px 8px !important; padding: 8px !important; } .sidebar .dropdown-item { margin-bottom: 4px; padding: 10px 14px; } .sidebar .dropdown-item:last-child { margin-bottom: 0; } @media (max-width: 991.98px) { .sidebar { top: 0; right: 0; bottom: 0; width: var(--sidebar-width); height: auto !important; min-height: 0; margin-right: calc(var(--sidebar-width) * -1); padding-top: var(--top-navbar-height); padding-bottom: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; z-index: var(--z-sidebar); background-color: #07080c; } .sidebar.open { margin-right: 0; box-shadow: -18px 0 60px rgba(0, 0, 0, 0.55), 0 0 0 100vmax rgba(0, 0, 0, 0.34); } .content { width: 100%; margin-right: 0; } .content.open { transform: none; } .content .navbar { padding-right: 12px !important; padding-left: 12px !important; } body.sidebar-mobile-open { overflow: hidden; } body.sidebar-mobile-open .sidebar { overflow-y: auto; } } @media (min-width: 992px) { .sidebar { top: 0; right: 0; bottom: 0; width: var(--sidebar-width); height: 100vh; margin-right: 0; padding-top: 0; z-index: var(--z-sidebar); } .sidebar.open { margin-right: calc(var(--sidebar-width) * -1); } .content { width: calc(100% - var(--sidebar-width)); margin-right: var(--sidebar-width); } .content.open { width: 100%; margin-right: 0; } body.sidebar-mobile-open { overflow: auto; } } @media (max-width: 575.98px) { .sidebar { width: min(var(--sidebar-width), 86vw); margin-right: calc(min(var(--sidebar-width), 86vw) * -1); } .sidebar.open { margin-right: 0; } } .bg-secondary { position: relative; background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.06), transparent 34%), linear-gradient( 180deg, rgba(20, 24, 33, 0.94), rgba(10, 12, 17, 0.96) ) !important; border: 1px solid var(--border); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .bg-secondary::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient( 135deg, rgba(255, 255, 255, 0.055), transparent 38%, rgba(var(--primary-rgb), 0.035) ); opacity: 0.75; } .bg-secondary > * { position: relative; z-index: 1; } .rounded { border-radius: var(--radius) !important; } .bg-secondary a { position: relative; } .bg-secondary a:hover { color: var(--primary-hover) !important; } .bg-secondary .fa-3x, .bg-secondary .fas.fa-3x, .bg-secondary .fa.fa-3x { filter: drop-shadow(0 0 16px rgba(var(--primary-rgb), 0.25)); } @media (max-width: 575.98px) { .bg-secondary { border-radius: 16px !important; } .bg-secondary.p-4 { padding: 1rem !important; } .bg-secondary.p-sm-5 { padding: 1.25rem !important; } } .bg-secondary form { margin-top: 22px; } .bg-secondary form .row { text-align: right; } .bg-secondary h6 { position: relative; display: flex; align-items: center; width: 100%; gap: 10px; margin-bottom: 20px; color: #ffffff; font-size: 15px; font-weight: 850; } .bg-secondary form .row > h6 { flex: 0 0 100%; max-width: 100%; width: 100%; margin-top: 26px; margin-bottom: 10px; padding-right: 4px; padding-left: 4px; } .bg-secondary form .row > h6:first-child { margin-top: 0; } .bg-secondary h6::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 18px rgba(var(--primary-rgb), 0.7); flex-shrink: 0; } .mb-3 { margin-bottom: 20px !important; } form .col-xl-3, form .col-xl-4, form .col-xl-6, form .col-xl-12, form .col-lg-3, form .col-lg-4, form .col-lg-6, form .col-md-6, form .col-12 { position: relative; } .form-label { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 9px; color: rgba(255, 255, 255, 0.82); font-size: 13px; font-weight: 750; } .form-label::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: rgba(var(--primary-rgb), 0.6); box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.42); } .form-control, .form-select, textarea, input, select { width: 100%; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025) ) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--white) !important; border-radius: 16px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 24px rgba(0, 0, 0, 0.12) !important; outline: none !important; transition: border-color var(--transition), background var(--transition), box-shadow var(--transition), transform var(--transition); } .form-control, .form-select { padding: 12px 16px; font-size: 14px; font-weight: 550; } textarea.form-control, textarea { min-height: 130px; resize: vertical; line-height: 2; } .form-control:hover, .form-select:hover, textarea:hover, input:hover, select:hover { border-color: rgba(255, 255, 255, 0.14) !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.032) ) !important; } .form-control:focus, .form-select:focus, textarea:focus, input:focus, select:focus { border-color: rgba(var(--primary-rgb), 0.45) !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035) ) !important; color: #ffffff !important; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.09), 0 14px 30px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important; transform: translateY(-1px); } .form-control::placeholder, input::placeholder, textarea::placeholder { color: rgba(255, 255, 255, 0.3); font-size: 13px; } .form-control:disabled, .form-select:disabled, textarea:disabled, input:disabled, select:disabled, .form-control[readonly], input[readonly], textarea[readonly] { background: rgba(255, 255, 255, 0.025) !important; color: rgba(255, 255, 255, 0.45) !important; border-color: rgba(255, 255, 255, 0.045) !important; cursor: not-allowed; opacity: 1; } select, .form-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 16px; padding-left: 46px; background-color: #151820 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%23f5f7fa' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"), linear-gradient( 180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025) ) !important; background-position: left 17px center, center !important; background-size: 14px 14px, 100% 100% !important; background-repeat: no-repeat !important; color: #f5f7fa !important; cursor: pointer; } select option, .form-select option { background: #151820 !important; background-color: #151820 !important; color: #f5f7fa !important; } select option:checked, select option:hover { background: #242b38 !important; color: #ffffff !important; } @-moz-document url-prefix() { select, .form-select, select option, .form-select option { background-color: #151820 !important; color: #f5f7fa !important; } } input[type="file"].form-control, .form-control[type="file"] { padding: 10px; cursor: pointer; padding-inline-start: 10px; padding-inline-end: 10px; } input[type="file"].form-control::file-selector-button, .form-control[type="file"]::file-selector-button { margin-inline-start: -5px; margin-inline-end: 12px; border-radius: 12px; margin-left: 14px; padding: 10px 16px; border: none; border-radius: 12px; background: linear-gradient( 135deg, var(--primary-hover), var(--primary-dark) ); color: #ffffff; font-size: 13px; font-weight: 750; cursor: pointer; transition: var(--transition); } input[type="file"].form-control:hover::file-selector-button, .form-control[type="file"]:hover::file-selector-button { background: linear-gradient( 135deg, #ff5656, #c90000 ); transform: translateY(-1px); } input[data-jdp] { cursor: pointer; background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.025) ) !important; } .form-text { display: block; margin-top: 8px; color: #ff7777 !important; font-size: 12px; font-weight: 700; line-height: 1.9; } .form-text ul { margin: 0; padding-right: 18px; } .form-text li { color: #ff7777 !important; } .form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid, .was-validated .form-select:invalid { border-color: rgba(255, 77, 77, 0.62) !important; box-shadow: 0 0 0 4px rgba(255, 77, 77, 0.11), 0 12px 26px rgba(0, 0, 0, 0.2) !important; } .invalid-feedback { margin-top: 8px; color: #ff7777; font-size: 12px; font-weight: 700; } form p[x-data], form .profile-status, form .form-success-message { display: inline-flex; align-items: center; min-height: 42px; margin: 0; padding: 9px 15px; border-radius: 14px; background: var(--success-soft); border: 1px solid rgba(34, 197, 94, 0.2); color: #86efac !important; font-size: 13px; font-weight: 750; } form .flex.items-center.gap-4 { display: flex !important; align-items: center; flex-wrap: wrap; gap: 12px !important; margin-top: 8px; } .form-check { display: flex; align-items: center; gap: 10px; min-height: 36px; padding-right: 0; } .form-check-label { color: rgba(255, 255, 255, 0.8); font-size: 13px; font-weight: 650; cursor: pointer; } .form-check-input { position: relative; width: 1.25em; height: 1.25em; min-width: 1.25em; min-height: 1.25em; margin: 0; background: rgba(255, 255, 255, 0.08) !important; border: 2px solid rgba(255, 255, 255, 0.22) !important; border-radius: 0.4em; box-shadow: none !important; cursor: pointer; appearance: none; -webkit-appearance: none; transition: background var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .form-check-input:hover { border-color: rgba(var(--primary-rgb), 0.56) !important; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.08) !important; } .form-check-input:focus { border-color: rgba(var(--primary-rgb), 0.72) !important; outline: none; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.13) !important; } .form-check-input:checked { background: linear-gradient( 135deg, var(--primary-hover), var(--primary-dark) ) !important; border-color: rgba(var(--primary-rgb), 0.96) !important; box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.1), 0 8px 18px rgba(255, 0, 0, 0.18) !important; background-image: none !important; } .form-check-input:checked::after { content: ""; position: absolute; top: 50%; left: 50%; width: 5px; height: 9px; border: solid #ffffff; border-width: 0 2px 2px 0; transform: translate(-50%, -58%) rotate(45deg); opacity: 1; pointer-events: none; } .form-check-input[type="radio"] { border-radius: 50%; } .form-check-input[type="radio"]:checked::after { width: 8px; height: 8px; border: none; border-radius: 50%; background: #ffffff; transform: translate(-50%, -50%); } .input-group { border-radius: 16px; overflow: hidden; } .input-group-text { background: rgba(255, 255, 255, 0.05) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.72) !important; font-size: 13px; font-weight: 750; } @media (max-width: 1199.98px) { form .col-xl-3 { margin-bottom: 2px; } } @media (max-width: 768px) { .bg-secondary form { margin-top: 18px; } .form-control, .form-select { font-size: 13px; } .form-label { font-size: 12px; } form .flex.items-center.gap-4 { align-items: stretch; flex-direction: column; } form .flex.items-center.gap-4 .btn { width: 100%; } form p[x-data], form .profile-status, form .form-success-message { justify-content: center; width: 100%; } } .btn { padding: 10px 22px; border: none; border-radius: 14px; font-weight: 750; transition: background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition), transform var(--transition), opacity var(--transition); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(0) scale(0.98); } .btn:focus, .btn:focus-visible { box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.13) !important; } .btn-primary { background: linear-gradient( 135deg, var(--primary-hover), var(--primary-active) ) !important; color: #fff !important; box-shadow: 0 12px 24px rgba(255, 0, 0, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .btn-primary:hover, .btn-primary:focus { background: linear-gradient( 135deg, #ff5a5a, #b80000 ) !important; color: #fff !important; box-shadow: 0 16px 32px rgba(255, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.16); } .btn-outline-primary { border: 1px solid rgba(var(--primary-rgb), 0.55) !important; color: var(--primary-hover) !important; background: rgba(var(--primary-rgb), 0.06) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus { border-color: rgba(var(--primary-rgb), 0.8) !important; background: rgba(var(--primary-rgb), 0.16) !important; color: #fff !important; } .btn-danger { background: linear-gradient( 135deg, #ff4b4b, #9f0000 ) !important; color: #fff !important; } .btn:disabled, .btn.disabled { cursor: not-allowed; opacity: 0.55; transform: none !important; box-shadow: none !important; } @media (max-width: 575.98px) { .btn { padding: 9px 16px; font-size: 13px; } } .btn-outline-success { border: 1px solid rgba(34, 197, 94, 0.65) !important; color: #22c55e !important; background: rgba(34, 197, 94, 0.08) !important; } .btn-outline-success:hover, .btn-outline-success:focus { border-color: rgba(34, 197, 94, 0.9) !important; background: rgba(34, 197, 94, 0.18) !important; color: #ffffff !important; box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.12), 0 12px 24px rgba(34, 197, 94, 0.16) !important; } .alert { border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px; box-shadow: var(--shadow); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .alert-success { background: rgba(34, 197, 94, 0.12) !important; border-color: rgba(34, 197, 94, 0.22) !important; color: #bbf7d0 !important; } .alert-danger { background: rgba(239, 68, 68, 0.14) !important; border-color: rgba(239, 68, 68, 0.24) !important; color: #fecaca !important; } .alert-warning { background: rgba(245, 158, 11, 0.14) !important; border-color: rgba(245, 158, 11, 0.24) !important; color: #fde68a !important; } .alert-info { background: rgba(56, 189, 248, 0.12) !important; border-color: rgba(56, 189, 248, 0.22) !important; color: #bae6fd !important; } .alert-dismissible{ padding-right: 3rem; padding-left: 1rem; } .alert-dismissible .btn-close{ right: 0; } .notification-wrapper { position: fixed; top: calc(var(--top-navbar-height) + 5px); display: flex; flex-direction: column; gap: 14px; width: fit-content; max-width: min(420px, calc(100vw - 24px)); pointer-events: none; z-index: 999999 !important; } .notification-alert { min-width: min(320px, calc(100vw - 24px)); overflow: hidden; border-radius: 18px; border: 1px solid rgba(255, 255, 255, 0.09); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 20px rgba(var(--primary-rgb), 0.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); pointer-events: auto; } .notification-alert .btn-close { filter: invert(1) brightness(2); opacity: 0.8; transition: opacity var(--transition); } .notification-alert .btn-close:hover { opacity: 1; } @media (max-width: 575.98px) { .notification-wrapper { top: calc(var(--top-navbar-height) + 8px); right: 12px; left: 12px; width: auto; max-width: none; } .notification-alert { min-width: 0; width: 100%; } } .menu-item { display: flex !important; align-items: center; gap: 14px; min-height: 52px; border-radius: 16px !important; transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition); } .menu-item:hover { background: rgba(255, 255, 255, 0.055); } .menu-icon { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(var(--primary-rgb), 0.2); border-radius: 12px; background: rgba(var(--primary-rgb), 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035); flex-shrink: 0; } .menu-icon i { color: #ff3b3b; font-size: 15px; } .dropdown-menu, .user-menu, .sidebar .dropdown-menu { overflow: hidden; padding: 10px; background: linear-gradient( 180deg, rgba(24, 25, 31, 0.99), rgba(13, 15, 21, 0.99) ) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 18px !important; box-shadow: var(--shadow); } .dropdown-item, .user-menu .dropdown-item, .sidebar .dropdown-item { color: rgba(255, 255, 255, 0.78) !important; border-radius: 12px; text-align: right; transition: background var(--transition), color var(--transition), transform var(--transition); } .dropdown-item.active, .dropdown-item:active{ background: linear-gradient( 90deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.045) ); border-color: rgba(var(--primary-rgb), 0.16); color: var(--white); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035), 0 12px 24px rgba(0, 0, 0, 0.12); } .dropdown-item:hover, .dropdown-item:focus, .user-menu .dropdown-item:hover, .sidebar .dropdown-item:hover { background: linear-gradient( 90deg, rgba(var(--primary-rgb), 0.11), rgba(255, 255, 255, 0.035) ) !important; color: #fff !important; } .user-menu .dropdown-item i, .logout-btn i { width: 20px; min-width: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--primary); font-size: 15px; text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.45); transition: color var(--transition), transform var(--transition), text-shadow var(--transition); } .user-menu .dropdown-item:hover i, .logout-btn:hover i { color: #ff4d4d; transform: scale(1.08); text-shadow: 0 0 16px rgba(var(--primary-rgb), 0.75); } .user-menu .dropdown-item, .logout-btn { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; min-height: 52px; border: 1px solid transparent; border-radius: 16px; transition: background var(--transition), transform var(--transition), border-color var(--transition); } .user-menu .dropdown-item:hover, .logout-btn:hover { background: linear-gradient( 90deg, rgba(var(--primary-rgb), 0.11), rgba(var(--primary-rgb), 0.03) ); border-color: rgba(var(--primary-rgb), 0.13); transform: translateX(-3px); } .user-menu .dropdown-item span, .logout-btn span { color: rgba(255, 255, 255, 0.84); font-size: 14px; font-weight: 700; transition: color var(--transition); } .user-menu .dropdown-item:hover span, .logout-btn:hover span { color: #ffffff; } .user-menu .dropdown-divider, .dropdown-divider { border-top-color: rgba(255, 255, 255, 0.07); margin: 10px 0; } .user-dropdown { display: flex; align-items: center; gap: 12px; padding: 8px 14px !important; border: 1px solid rgba(255, 255, 255, 0.07); border-radius: 18px; background: rgba(255, 255, 255, 0.035); transition: background var(--transition), border-color var(--transition), transform var(--transition); } .user-dropdown:hover, .user-dropdown:focus { background: rgba(255, 255, 255, 0.06); border-color: rgba(var(--primary-rgb), 0.18); transform: translateY(-1px); } .user-avatar { width: 44px; height: 44px; border: 2px solid rgba(var(--primary-rgb), 0.2); border-radius: 50%; object-fit: cover; } .user-meta { flex-direction: column; text-align: right; } .user-name { color: #fff; font-size: 14px; font-weight: 750; } .user-status { color: rgba(255, 255, 255, 0.48); font-size: 11px; } .logout-btn { width: 100%; border: none; background: transparent; text-align: right; } .table { margin-bottom: 0; color: rgba(255, 255, 255, 0.84); vertical-align: middle; } .table > :not(caption) > * > * { padding: 0.9rem 0.85rem; background-color: transparent; border-bottom-color: rgba(255, 255, 255, 0.055); } .table th { background: linear-gradient( 180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) ); border-color: rgba(255, 255, 255, 0.07); color: rgba(255, 255, 255, 0.92); font-size: 13px; font-weight: 850; white-space: nowrap; } .table td { border-color: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.78); font-size: 13px; } .table tbody tr { transition: background var(--transition), color var(--transition); } .table tbody tr:hover { background: rgba(var(--primary-rgb), 0.045); } .table-bordered { border-color: rgba(255, 255, 255, 0.075); } .table a { color: #ff7070; font-weight: 750; } .table a:hover { color: #ff9a9a; } .table-responsive { border: 1px solid rgba(255, 255, 255, 0.06); border-radius: var(--radius); overflow: auto; } @media (max-width: 575.98px) { .table > :not(caption) > * > * { padding: 0.75rem 0.65rem; } .table th, .table td { font-size: 12px; } } .modal { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .modal-backdrop.show { opacity: 0.72; } .modal-content { overflow: hidden; background: radial-gradient(circle at top right, rgba(var(--primary-rgb), 0.08), transparent 34%), linear-gradient( 180deg, rgba(20, 24, 33, 0.99), rgba(10, 12, 18, 0.99) ); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 22px; color: #fff; box-shadow: var(--shadow-lg); } .modal-header, .modal-footer { border-color: rgba(255, 255, 255, 0.07); } .modal-title { color: #ffffff; font-weight: 850; } .modal-body { color: rgba(255, 255, 255, 0.78); line-height: 2; } .modal .btn-close { filter: invert(1) brightness(2); opacity: 0.8; transition: opacity var(--transition); } .modal .btn-close:hover { opacity: 1; } .back-to-top { position: fixed; right: 28px; bottom: 28px; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba(255, 255, 255, 0.09); border-radius: 18px; background: linear-gradient( 145deg, rgba(255, 52, 52, 0.96), rgba(155, 0, 0, 0.94) ); color: #fff !important; font-size: 28px; text-decoration: none; cursor: pointer; outline: none; z-index: var(--z-back-to-top); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(20px); box-shadow: 0 10px 30px rgba(255, 0, 0, 0.22), inset 0 1px 1px rgba(255, 255, 255, 0.14); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: opacity var(--transition), visibility var(--transition), transform var(--transition), background var(--transition), box-shadow var(--transition); } .back-to-top.show { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .back-to-top:hover, .back-to-top:focus { color: #fff; transform: translateY(-4px); box-shadow: 0 18px 40px rgba(255, 0, 0, 0.35), inset 0 1px 1px rgba(255, 255, 255, 0.14); } .back-to-top:active { transform: translateY(-1px) scale(0.98); } .back-to-top i { line-height: 1; pointer-events: none; } @media (max-width: 768px) { .back-to-top { right: 18px; bottom: 18px; width: 50px; height: 50px; border-radius: 16px; font-size: 24px; } } #spinner { position: fixed !important; inset: 0; width: 100vw; height: 100vh; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; z-index: var(--z-spinner) !important; background: radial-gradient(circle at top, rgba(var(--primary-rgb), 0.14), transparent 40%), radial-gradient(circle at bottom, rgba(255, 255, 255, 0.035), transparent 40%), #06070b; transition: opacity 0.45s ease, visibility 0s linear 0.45s; } #spinner.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.45s ease, visibility 0s linear 0s; } .loading-box { position: relative; width: 180px; height: 180px; display: flex; align-items: center; justify-content: center; } .loading-ring { position: absolute; width: 180px; height: 180px; border: 2px solid rgba(255, 255, 255, 0.045); border-top: 2px solid var(--primary); border-radius: 50%; box-shadow: 0 0 35px rgba(var(--primary-rgb), 0.13), inset 0 0 20px rgba(255, 255, 255, 0.02); animation: spin 2.4s linear infinite; } .loading-ring::before { content: ""; position: absolute; inset: 18px; border: 2px solid rgba(255, 255, 255, 0.035); border-bottom: 2px solid #ff5b78; border-radius: 50%; animation: spinReverse 1.6s linear infinite; } .loading-core { position: relative; width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 24px; background: linear-gradient( 145deg, rgba(25, 27, 35, 0.95), rgba(10, 10, 15, 0.98) ); box-shadow: 0 0 30px rgba(var(--primary-rgb), 0.16), inset 0 0 20px rgba(255, 255, 255, 0.03); } .loading-core::before { content: ""; position: absolute; inset: -40%; background: linear-gradient( 45deg, transparent, rgba(255, 255, 255, 0.08), transparent ); animation: shine 3s linear infinite; } .loading-dot { position: relative; width: 14px; height: 14px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 12px var(--primary), 0 0 30px rgba(var(--primary-rgb), 0.62); animation: pulse 1.2s ease-in-out infinite; } .loading-text { position: absolute; bottom: -40px; width: 100%; color: rgba(255, 255, 255, 0.58); font-size: 13px; font-weight: 750; letter-spacing: 1px; line-height: 1.8; text-align: center; animation: textFade 2s ease-in-out infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes spinReverse { from { transform: rotate(360deg); } to { transform: rotate(0deg); } } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.7; } } @keyframes shine { from { transform: translateX(-120%) rotate(45deg); } to { transform: translateX(120%) rotate(45deg); } } @keyframes textFade { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } } @media (max-width: 768px) { .loading-box { width: 140px; height: 140px; } .loading-ring { width: 140px; height: 140px; } .loading-core { width: 58px; height: 58px; border-radius: 18px; } .loading-text { bottom: -34px; font-size: 11px; } } #spinner { z-index: 999999; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.35s ease, visibility 0.35s ease; } #spinner.show { opacity: 1; visibility: visible; pointer-events: auto; } #spinner.spinner-hidden { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; } .site-chart { width: 100%; min-height: 420px; } .site-chart-card { overflow: hidden; } @media (max-width: 576px) { .site-chart { min-height: 340px; } } .site-pagination { width: 100%; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 18px; margin-top: 28px; padding: 18px; direction: rtl; border: 1px solid rgba(var(--primary-rgb), 0.12); border-radius: 22px; background: radial-gradient( circle at top right, rgba(var(--primary-rgb), 0.08), transparent 36% ), linear-gradient( 180deg, rgba(20, 24, 33, 0.94), rgba(10, 12, 17, 0.96) ); box-shadow: var(--shadow), inset 0 1px 0 rgba(255, 255, 255, 0.035); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .site-pagination-info { display: flex; align-items: center; gap: 12px; min-width: 260px; } .site-pagination-info-icon { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 16px; background: linear-gradient( 135deg, var(--primary-hover), var(--primary-active) ); color: #ffffff; font-size: 16px; font-weight: 900; box-shadow: 0 12px 24px rgba(255, 0, 0, 0.20), inset 0 1px 0 rgba(255, 255, 255, 0.14); flex-shrink: 0; } .site-pagination-info-icon span { color: #ffffff; } .site-pagination-info-text { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: rgba(255, 255, 255, 0.64); font-size: 13px; font-weight: 650; line-height: 2; } .site-pagination-info-text strong { color: #ffffff; font-size: 14px; font-weight: 900; } .site-pagination-actions { min-width: 0; flex: 1; } .site-pagination .pagination { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin: 0; padding: 5px 0 0 0; direction: rtl; } .site-pagination .page-item { margin: 0; } .site-pagination .page-link { min-width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid rgba(var(--primary-rgb), 0.18) !important; border-radius: 14px !important; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.025) ) !important; color: rgba(255, 255, 255, 0.78) !important; font-size: 13px; font-weight: 850; line-height: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 10px 22px rgba(0, 0, 0, 0.16); transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition), opacity var(--transition); } .site-pagination .page-link:hover, .site-pagination .page-link:focus { border-color: rgba(var(--primary-rgb), 0.50) !important; background: linear-gradient( 135deg, rgba(var(--primary-rgb), 0.20), rgba(var(--primary-rgb), 0.08) ) !important; color: #ffffff !important; box-shadow: 0 12px 28px rgba(255, 0, 0, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.06); transform: translateY(-2px); } .site-pagination .page-link:active { transform: translateY(0) scale(0.98); } .site-pagination .page-item.active .page-link { border-color: rgba(var(--primary-rgb), 0.85) !important; background: linear-gradient( 135deg, var(--primary-hover), var(--primary-active) ) !important; color: #ffffff !important; box-shadow: 0 14px 30px rgba(255, 0, 0, 0.26), inset 0 1px 0 rgba(255, 255, 255, 0.14); } .site-pagination .page-item.disabled .page-link { opacity: 0.42; cursor: not-allowed; transform: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); } .site-pagination .site-pagination-arrow { color: inherit; font-size: 20px; font-weight: 900; line-height: 1; } .site-pagination .site-pagination-label { color: inherit; font-size: 12px; font-weight: 850; line-height: 1; } .site-pagination .site-pagination-dots .page-link { min-width: 38px; color: rgba(255, 255, 255, 0.42) !important; background: rgba(255, 255, 255, 0.025) !important; } @media (max-width: 991.98px) { .site-pagination { align-items: stretch; flex-direction: column; gap: 16px; } .site-pagination-info { width: 100%; } .site-pagination-actions { width: 100%; } .site-pagination .pagination { justify-content: center; } } @media (max-width: 575.98px) { .site-pagination { margin-top: 22px; padding: 14px; border-radius: 18px; } .site-pagination-info { align-items: flex-start; min-width: 0; } .site-pagination-info-icon { width: 44px; height: 44px; border-radius: 14px; font-size: 14px; } .site-pagination-info-text { font-size: 12px; } .site-pagination-info-text strong { font-size: 13px; } .site-pagination .pagination { gap: 6px; } .site-pagination .page-link { min-width: 38px; height: 38px; padding: 7px 11px; border-radius: 12px !important; font-size: 12px; } .site-pagination .site-pagination-label { display: none; } .site-pagination .site-pagination-arrow { font-size: 19px; } }