:root { --admin-bg: #f8fafc; --admin-ink: #0f172a; --admin-ink-soft: #475569; --admin-line: #e2e8f0; --admin-brand-900: #0c4a6e; --admin-brand-700: #0369a1; --admin-brand-500: #0ea5e9; --admin-brand-400: #38bdf8; --admin-accent: #f59e0b; --admin-danger: #ef4444; --admin-success: #10b981; --admin-purple: #8b5cf6; --admin-radius-sm: 10px; --admin-radius: 16px; --admin-radius-lg: 24px; --admin-shadow-xs: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1); --admin-shadow-sm: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --admin-shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --admin-shadow-lg: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); } body.admin-v2 { margin: 0; min-height: 100vh; font-family: 'Manrope', sans-serif; color: var(--admin-ink); background: radial-gradient(760px 260px at -8% -12%, rgba(20, 184, 166, 0.18), transparent 68%), radial-gradient(760px 300px at 108% -2%, rgba(245, 158, 11, 0.14), transparent 65%), linear-gradient(180deg, #f5f9fc 0%, var(--admin-bg) 100%); } .admin-v2-backdrop { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .admin-v2-backdrop span { position: absolute; border-radius: 999px; filter: blur(8px); } .admin-v2-backdrop .blob-a { width: 360px; height: 360px; left: -140px; top: -100px; background: radial-gradient(circle, rgba(20, 184, 166, 0.26), rgba(20, 184, 166, 0)); } .admin-v2-backdrop .blob-b { width: 420px; height: 420px; right: -170px; top: 24%; background: radial-gradient(circle, rgba(14, 165, 160, 0.2), rgba(14, 165, 160, 0)); } .admin-v2-backdrop .blob-c { width: 340px; height: 340px; left: 38%; bottom: -170px; background: radial-gradient(circle, rgba(245, 158, 11, 0.18), rgba(245, 158, 11, 0)); } .admin-v2 > *:not(.admin-v2-backdrop) { position: relative; z-index: 1; } .admin-v2-sidebar { position: fixed; inset: 1rem auto 1rem 1rem; width: 286px; border-radius: 24px; background: linear-gradient(180deg, #072a38 0%, #0a3f50 50%, #0f766e 100%); border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: var(--admin-shadow-md); color: #f2feff; display: flex; flex-direction: column; z-index: 1300; transition: width 0.24s ease, transform 0.24s ease; } .admin-v2-sidebar__brand { padding: 1rem; border-bottom: 1px solid rgba(255, 255, 255, 0.14); } .admin-v2-brand-link { display: flex; align-items: center; gap: 0.7rem; } .admin-v2-brand-mark { width: 44px; height: 44px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.22); background: linear-gradient(135deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.06)); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; } .admin-v2-brand-copy { display: flex; flex-direction: column; line-height: 1.1; } .admin-v2-brand-copy strong { color: #fff; font-size: 1.02rem; font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; } .admin-v2-brand-copy small { margin-top: 0.2rem; color: rgba(237, 253, 255, 0.72); font-size: 0.67rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; } .admin-v2-sidebar__close { width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, 0.24); border-radius: 9px; color: #fff; background: rgba(255, 255, 255, 0.08); display: inline-flex; align-items: center; justify-content: center; } .admin-v2-nav { flex: 1; overflow-y: auto; padding: 0.7rem; } .admin-v2-nav::-webkit-scrollbar { width: 8px; } .admin-v2-nav::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.26); } .admin-v2-nav__section { margin-top: 0.2rem; margin-bottom: 0.3rem; padding: 0.64rem 0.78rem 0.24rem; color: rgba(236, 252, 255, 0.64); font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; } .admin-v2-nav__item { position: relative; display: flex; align-items: center; gap: 0.66rem; border-radius: 13px; border: 1px solid transparent; color: rgba(236, 252, 255, 0.92); font-weight: 700; padding: 0.66rem 0.74rem; margin-bottom: 0.24rem; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .admin-v2-nav__item:hover { color: #fff; border-color: rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.1); transform: translateX(1px); } .admin-v2-nav__icon { width: 34px; height: 34px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; justify-content: center; font-size: 0.92rem; color: #fff; flex-shrink: 0; } .admin-v2-nav__item.active { color: #fff; border-color: rgba(125, 227, 213, 0.62); background: linear-gradient(135deg, rgba(20, 184, 166, 0.35), rgba(20, 184, 166, 0.16)); } .admin-v2-nav__item.active::after { content: ''; position: absolute; right: 10px; width: 8px; height: 8px; border-radius: 999px; background: #9ef4e7; box-shadow: 0 0 0 6px rgba(158, 244, 231, 0.2); } .admin-v2-sidebar__footer { border-top: 1px solid rgba(255, 255, 255, 0.14); padding: 0.88rem 1rem 0.98rem; background: rgba(0, 0, 0, 0.12); } .admin-v2-status { display: flex; align-items: center; gap: 0.72rem; } .admin-v2-status__dot { width: 10px; height: 10px; border-radius: 999px; background: #4ade80; box-shadow: 0 0 0 7px rgba(74, 222, 128, 0.2); } .admin-v2-status__text small { display: block; color: rgba(236, 252, 255, 0.68); font-size: 0.66rem; letter-spacing: 0.08em; text-transform: uppercase; } .admin-v2-status__text strong { color: #f2feff; font-size: 0.82rem; } .admin-v2-main { margin-left: 312px; min-height: 100vh; padding: 1rem 1rem 1rem 0; transition: margin-left 0.24s ease; } .admin-v2-topbar { position: sticky; top: 1rem; z-index: 1200; min-height: 74px; border-radius: 18px; border: 1px solid rgba(16, 38, 50, 0.1); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); box-shadow: var(--admin-shadow-xs); display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; } .admin-v2-topbar__left { display: flex; align-items: center; gap: 0.66rem; } .admin-v2-icon-btn { width: 40px; height: 40px; border-radius: 11px; border: 1px solid rgba(16, 38, 50, 0.14); background: #fff; color: var(--admin-ink-soft); display: inline-flex; align-items: center; justify-content: center; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .admin-v2-icon-btn:hover { color: var(--admin-brand-700); border-color: rgba(15, 118, 110, 0.34); background: rgba(20, 184, 166, 0.08); } .admin-v2-topbar__title small { display: block; color: #6c8596; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 800; } .admin-v2-topbar__title h1 { margin: 0.04rem 0 0; font-family: 'Space Grotesk', sans-serif; font-size: 1.08rem; color: var(--admin-ink); letter-spacing: -0.02em; } .admin-v2-topbar__right { display: flex; align-items: center; gap: 0.58rem; } .admin-v2-quick-link { border-radius: 11px; } .admin-v2-meta { display: flex; align-items: center; gap: 0.48rem; border-radius: 999px; border: 1px solid rgba(16, 38, 50, 0.1); background: rgba(255, 255, 255, 0.96); padding: 0.26rem 0.62rem 0.26rem 0.26rem; } .admin-v2-meta__avatar { width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--admin-brand-900), var(--admin-brand-500)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 800; } .admin-v2-meta__copy strong { display: block; color: var(--admin-ink); font-size: 0.84rem; line-height: 1.1; } .admin-v2-meta__copy small { color: #6f8898; font-size: 0.72rem; } .admin-v2-content { padding: 1rem 0 0; } .admin-v2-content .container-fluid { max-width: 1400px; padding: 0; } .admin-page-shell { display: flex; flex-direction: column; gap: 1rem; } .admin-page-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid rgba(16, 38, 50, 0.1); border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f4f9fd); padding: 1rem 1.1rem; box-shadow: var(--admin-shadow-xs); } .admin-page-head h4 { margin-bottom: 0.22rem; } .admin-page-head p { margin-bottom: 0; color: #5f798b; } .admin-v2 .card { border: 1px solid rgba(16, 38, 50, 0.11); border-radius: 18px; box-shadow: var(--admin-shadow-xs); background: linear-gradient(180deg, #ffffff, #f9fcff); } .admin-v2 .card.border-0.bg-gradient-primary { border-radius: 16px; border: 0; box-shadow: 0 14px 26px rgba(8, 29, 41, 0.16); } .admin-v2 .card-header { border-bottom: 1px solid rgba(16, 38, 50, 0.08); border-radius: 18px 18px 0 0 !important; background: linear-gradient(180deg, #fcfeff, #eff6fb); } .admin-v2 .card-body { padding: 1.2rem; } .admin-v2 .page-hero { border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.2); background: linear-gradient(130deg, #083546 0%, #0f766e 60%, #14b8a6 100%); box-shadow: var(--admin-shadow-sm); } .admin-v2 .page-hero h3, .admin-v2 .page-hero p, .admin-v2 .page-hero strong, .admin-v2 .page-hero small { color: #f3fdff !important; } .admin-v2 .form-control, .admin-v2 .form-select, .admin-v2 .input-group-text { border: 1px solid #d5e3eb; border-radius: 11px; min-height: 44px; } .admin-v2 .form-control:focus, .admin-v2 .form-select:focus { border-color: rgba(20, 184, 166, 0.75); box-shadow: 0 0 0 0.2rem rgba(20, 184, 166, 0.14); } .admin-v2 .table thead th { font-size: 0.71rem; letter-spacing: 0.08em; text-transform: uppercase; color: #4f6777; border: 0; background: linear-gradient(180deg, #eff6fb, #e5f0f7); } .admin-v2 .table tbody td { border-color: rgba(16, 38, 50, 0.08); } .admin-v2 .table tbody tr:hover { background: rgba(14, 165, 160, 0.06); } .admin-v2 .btn-group .btn { border-radius: 10px !important; } .admin-v2 .breadcrumb { border: 1px solid rgba(16, 38, 50, 0.11); border-radius: 999px; background: rgba(255, 255, 255, 0.85); padding: 0.54rem 0.9rem; box-shadow: var(--admin-shadow-xs); } .admin-v2 .breadcrumb-item, .admin-v2 .breadcrumb-item a { color: #6f8797; font-weight: 700; } .admin-v2 .breadcrumb-item.active { color: #0b3d4a; } .admin-v2 .stat-card { height: 100%; border: 1px solid rgba(15, 118, 110, 0.2); border-radius: 18px; background: linear-gradient(180deg, #ffffff, #f3fbfd); box-shadow: var(--admin-shadow-xs); } .admin-v2 .stat-icon { box-shadow: 0 12px 20px rgba(15, 118, 110, 0.2); } .admin-v2 .badge { border-radius: 999px; font-weight: 700; } .admin-v2 .dataTables_wrapper .dataTables_filter input, .admin-v2 .dataTables_wrapper .dataTables_length select { border: 1px solid #d5e3eb; border-radius: 10px; min-height: 38px; } .admin-v2 .dataTables_wrapper .dataTables_paginate .paginate_button { border-radius: 999px !important; border: 1px solid rgba(16, 38, 50, 0.12) !important; background: #fff !important; } .admin-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.current, .admin-v2 .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { border-color: transparent !important; color: #fff !important; background: linear-gradient(135deg, var(--admin-brand-900), var(--admin-brand-500)) !important; } .admin-v2-overlay { position: fixed; inset: 0; background: rgba(7, 27, 38, 0.52); z-index: 1250; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, visibility 0.2s ease; } .admin-v2-overlay.show { opacity: 1; visibility: visible; } body.admin-v2.admin-v2-collapsed .admin-v2-sidebar { width: 94px; } body.admin-v2.admin-v2-collapsed .admin-v2-main { margin-left: 120px; } body.admin-v2.admin-v2-collapsed .admin-v2-brand-copy, body.admin-v2.admin-v2-collapsed .admin-v2-nav__section, body.admin-v2.admin-v2-collapsed .admin-v2-nav__label, body.admin-v2.admin-v2-collapsed .admin-v2-status__text, body.admin-v2.admin-v2-collapsed .admin-v2-nav__item.active::after { display: none; } body.admin-v2.admin-v2-collapsed .admin-v2-nav__item { justify-content: center; padding: 0.66rem; } body.admin-v2.admin-v2-collapsed .admin-v2-status { justify-content: center; } @media (max-width: 991.98px) { .admin-v2-sidebar { inset: 0 auto 0 0; width: 286px; border-radius: 0; transform: translateX(-100%); } .admin-v2-sidebar.show { transform: translateX(0); } .admin-v2-main, body.admin-v2.admin-v2-collapsed .admin-v2-main { margin-left: 0; padding: 0.76rem; } .admin-v2-topbar { top: 0; border-radius: 14px; } .admin-v2-content { padding-top: 0.8rem; } .admin-v2-content .container-fluid { padding: 0; } .admin-page-head { flex-direction: column; align-items: flex-start; } } @media (max-width: 767.98px) { .admin-v2-topbar { padding: 0.68rem 0.75rem; } .admin-v2-topbar__right .admin-v2-quick-link { display: none !important; } .admin-v2-meta__copy { display: none; } }