:root { --bs-primary: #0071e3; --bs-primary-rgb: 0, 113, 227; --bs-secondary: #86868b; --bs-secondary-rgb: 134, 134, 139; --bs-success: #34c759; --bs-success-rgb: 52, 199, 89; --bs-danger: #ff3b30; --bs-danger-rgb: 255, 59, 48; --bs-warning: #ff9500; --bs-warning-rgb: 255, 149, 0; --bs-info: #5ac8fa; --bs-info-rgb: 90, 200, 250; --bs-light: #f5f5f7; --bs-body-bg: #f5f5f7; --bs-body-color: #1d1d1f; --bs-secondary-color: #86868b; --bs-border-color: rgba(0, 0, 0, 0.1); --bs-border-color-translucent: rgba(0, 0, 0, 0.08); --bs-link-color: #0066cc; --primary: #0071e3; --primary-light: #0a84ff; --primary-dark: #0062d6; --primary-rgb: 0, 113, 227; --bg-gradient: radial-gradient(circle at 20% 10%, #eef3ff 0%, #f5f5f7 45%, #eceef2 100%); --login-card-bg: rgba(255, 255, 255, 0.72); --sidebar-gradient: linear-gradient(180deg, rgba(250, 250, 252, 0.96) 0%, rgba(241, 242, 246, 0.98) 100%); --sidebar-text: #1d1d1f; --sidebar-text-muted: #6e6e73; --sidebar-hover-bg: rgba(0, 113, 227, 0.09); --sidebar-active-bg: linear-gradient(135deg, #0071e3 0%, #0a84ff 100%); --sidebar-text-picked: #1d1d1f; --sidebar-border: rgba(0, 0, 0, 0.08); --sb-submenu-bg: rgba(0, 113, 227, 0.04); --sb-subhead-color: #0071e3; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 14px rgba(0, 0, 0, 0.05); --card-shadow-hover: 0 12px 30px rgba(0, 0, 0, 0.10), 0 4px 12px rgba(0, 0, 0, 0.06); --radius-sm: 10px; --radius: 14px; --radius-lg: 20px; --radius-xl: 24px; } [data-bs-theme="dark"] { --bs-primary: #0a84ff; --bs-primary-rgb: 10, 132, 255; --bs-secondary: #98989d; --bs-secondary-rgb: 152, 152, 157; --bs-success: #30d158; --bs-success-rgb: 48, 209, 88; --bs-danger: #ff453a; --bs-danger-rgb: 255, 69, 58; --bs-warning: #ff9f0a; --bs-warning-rgb: 255, 159, 10; --bs-info: #64d2ff; --bs-info-rgb: 100, 210, 255; --bs-body-bg: #161617; --bs-body-color: #f5f5f7; --bs-secondary-color: #98989d; --bs-border-color: rgba(255, 255, 255, 0.14); --bs-border-color-translucent: rgba(255, 255, 255, 0.10); --bs-link-color: #2997ff; --primary: #0a84ff; --primary-light: #64d2ff; --primary-dark: #0071e3; --primary-rgb: 10, 132, 255; --bg-gradient: radial-gradient(circle at 20% 10%, #1a1a1c 0%, #161617 45%, #0d0d0f 100%); --login-card-bg: rgba(30, 30, 32, 0.74); --sidebar-gradient: linear-gradient(180deg, #101012 0%, #050506 100%); --sidebar-text: #f5f5f7; --sidebar-text-muted: #98989d; --sidebar-hover-bg: rgba(255, 255, 255, 0.08); --sidebar-active-bg: linear-gradient(135deg, #0a84ff 0%, #2997ff 100%); --sidebar-text-picked: #f5f5f7; --sidebar-border: rgba(255, 255, 255, 0.06); --sb-submenu-bg: rgba(255, 255, 255, 0.03); --sb-subhead-color: #64d2ff; --card-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.35); --card-shadow-hover: 0 14px 34px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4); } [data-bs-theme="dark"] .top-bar { background: linear-gradient(160deg, rgba(10, 80, 170, 0.20) 0%, color-mix(in srgb, var(--bs-body-bg) 76%, transparent) 46%); } [data-bs-theme="dark"] .top-bar .btn-outline-secondary { --bs-btn-color: #8ab4ff; --bs-btn-border-color: rgba(120, 168, 255, 0.35); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(10, 132, 255, 0.25); --bs-btn-hover-border-color: #0a84ff; --bs-btn-active-color: #fff; --bs-btn-active-bg: #0a84ff; --bs-btn-active-border-color: #0a84ff; } [data-bs-theme="dark"] .top-bar .btn-outline-primary { --bs-btn-bg: rgba(10, 132, 255, 0.16); --bs-btn-color: #fff; } [data-bs-theme="dark"] .top-bar .btn:disabled, [data-bs-theme="dark"] .top-bar .btn.disabled { opacity: 0.4; } body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; text-rendering: optimizeLegibility; } .sidebar { background: var(--sidebar-gradient); box-shadow: 4px 0 24px rgba(0, 0, 0, 0.06); border-right: 1px solid var(--sidebar-border); } .sidebar .nav-link { color: var(--sidebar-text); border-radius: 9px; font-weight: 500; letter-spacing: 0.01em; margin: 1px 6px; transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease; } .sidebar .nav-link:hover { background: var(--sidebar-hover-bg); color: var(--sidebar-text); transform: translateX(2px); } .sidebar .nav-link.active { background: var(--sidebar-active-bg); color: #fff !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35); } .sidebar .nav-link:focus-visible { outline: 2px solid var(--sidebar-subhead-color, #0a84ff); outline-offset: 2px; } .sidebar-header h3 { font-weight: 700; } .sidebar-header { border-bottom: 1px solid var(--sidebar-border); } .sidebar-header h3 { color: var(--sidebar-text); } .sidebar-header p { color: var(--sidebar-text-muted); } .sidebar.collapsed .sb-chev { display: none !important; } .sidebar .sb-group.sb-active-group > .sb-trigger { background: var(--sidebar-hover-bg); color: var(--sidebar-text); font-weight: 700; } .sidebar .sb-group.sb-active-group > .sb-trigger::after { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 3px; border-radius: 4px; background: var(--sidebar-subhead-color, #0a84ff); } .sidebar .sb-group.sb-active-group > .sb-trigger { position: relative; } .sidebar.collapsed li.sb-group.sb-active-group > .sb-trigger { background: var(--sidebar-active-bg); color: #fff !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35); } .sidebar.collapsed li.sb-group.sb-active-group > .sb-trigger::after { display: none; } .sidebar.collapsed .flyout-parent.flyout-open > .sb-submenu .nav-link.active { background: var(--sidebar-active-bg); color: #fff !important; box-shadow: 0 4px 14px rgba(0, 113, 227, 0.35); } .sb-float-tip { position: fixed; z-index: 1100; display: none; background: #0f172a; color: #fff; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2px; padding: 6px 12px; border-radius: 8px; white-space: nowrap; max-width: calc(100vw - 24px); overflow: hidden; text-overflow: ellipsis; box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35); pointer-events: none; animation: sbTipIn 0.12s ease; } @keyframes sbTipIn { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } } .sidebar-logo { width: 72px; height: 72px; margin-bottom: 8px; object-fit: contain; border-radius: 12px; } .sidebar-logo--branch { max-width: 80px; max-height: 80px; border: 2px solid var(--sidebar-border); padding: 4px; } [data-bs-theme="dark"] .sidebar-logo:not(.sidebar-logo--branch) { filter: brightness(0) invert(1) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); } [data-bs-theme="dark"] .sidebar-logo--branch { filter: none; background: #fff; border-radius: 12px; } .sidebar .sb-heading { color: var(--sidebar-text-muted); font-size: 0.7rem; letter-spacing: 1px; text-transform: uppercase; font-weight: 700; } .sidebar .sb-group { margin-top: 4px; } .sidebar .sb-trigger .sb-chev { margin-left: auto; transition: transform 0.22s ease; opacity: 0.6; } .sidebar .sb-trigger[aria-expanded="true"] .sb-chev { transform: rotate(180deg); opacity: 1; } .sidebar .sb-submenu { background: var(--sb-submenu-bg); border-radius: 12px; margin: 2px 6px 6px; display: none; } .sidebar .sb-group.sb-open > .sb-submenu { display: block; animation: sbSubIn 0.18s ease; } @keyframes sbSubIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .sidebar .sb-submenu .nav-link { padding-left: 34px; font-size: 0.86rem; font-weight: 450; margin: 1px 4px; } .sidebar .sb-submenu .nav-link .fa-fw { opacity: 0.75; } .sidebar .sb-subhead { display: block; padding: 8px 14px 2px; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.8px; font-weight: 700; color: var(--sb-subhead-color); } [data-bs-theme="dark"] .sidebar .sb-subhead { opacity: 0.92; } @media (min-width: 993px) { .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu { display: block; padding: 4px 6px 8px; margin: 2px 8px 8px; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu > ul.nav { flex-direction: row; flex-wrap: wrap; gap: 4px; justify-content: flex-start; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu > ul.nav > li.nav-item { margin: 0; flex: 0 0 auto; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu li.nav-subhead { flex: 1 1 100%; padding: 6px 8px 2px; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; margin: 0; font-size: 0.74rem; font-weight: 550; border-radius: 999px; white-space: nowrap; line-height: 1.2; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link i.fa-fw { width: auto; font-size: 0.74rem; opacity: 0.8; margin: 0; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link:hover { transform: none; } .sidebar:not(.collapsed) .sb-group.sb-open > .sb-submenu .nav-link.active { box-shadow: none; } } @media (min-width: 993px) { .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 10px; margin: 2px 0; border-radius: 9px; font-size: 0.78rem; font-weight: 600; white-space: nowrap; line-height: 1.2; } .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger i.fa-fw { width: auto; font-size: 0.78rem; opacity: 0.8; margin: 0; } .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger:hover { transform: none; } .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu { margin: 2px 0 6px 10px; padding: 2px 4px; } .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu > ul.nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; } .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link { display: flex; align-items: center; gap: 6px; width: 100%; padding: 5px 10px 5px 26px; margin: 1px 0; border-radius: 8px; font-size: 0.76rem; font-weight: 500; white-space: nowrap; line-height: 1.2; } .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link i.fa-fw { width: auto; font-size: 0.76rem; opacity: 0.75; margin: 0; } .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:hover { transform: none; } .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link.active { box-shadow: none; } } @media (min-width: 993px) { .sidebar:not(.collapsed) #finMenu { padding: 6px 6px 8px; margin: 2px 8px 8px; } .sidebar:not(.collapsed) #finMenu > ul.nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; align-items: stretch; } .sidebar:not(.collapsed) #finMenu > ul.nav > li.nav-item { flex: 1 1 auto; width: 100%; margin: 0; } .sidebar:not(.collapsed) #finMenu li.nav-subhead { flex: 1 1 100%; width: 100%; padding: 6px 8px 2px; } .sidebar:not(.collapsed) #finMenu .nav-link { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 12px; margin: 1px 0; border-radius: 8px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; line-height: 1.2; } .sidebar:not(.collapsed) #finMenu .nav-link i.fa-fw { width: auto; font-size: 0.78rem; opacity: 0.75; margin: 0; } .sidebar:not(.collapsed) #finMenu .nav-link:hover { transform: none; } .sidebar:not(.collapsed) #finMenu .nav-link.active { box-shadow: none; } } @media (min-width: 993px) { .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-subhead .sb-subhead { display: block; } .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 12px; margin: 2px 4px; border-radius: 10px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; line-height: 1.25; } .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger i.fa-fw { width: auto; font-size: 0.8rem; opacity: 0.85; margin: 0; } .sidebar.collapsed #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger:hover { background: var(--sidebar-hover-bg); } .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu { margin: 2px 0 6px 16px; padding: 2px 4px; border-left: 2px solid var(--sb-subhead-color, #0a84ff); border-radius: 0 10px 10px 0; } .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu > ul.nav { flex-direction: column; flex-wrap: nowrap; gap: 2px; } .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px 6px 12px; margin: 1px 0; border-radius: 8px; font-size: 0.78rem; font-weight: 500; white-space: nowrap; line-height: 1.2; } .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link i.fa-fw { width: auto; font-size: 0.78rem; opacity: 0.75; margin: 0; } .sidebar.collapsed #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link.active { background: var(--sidebar-hover-bg); color: var(--sidebar-text); box-shadow: none; } } .top-bar { background: color-mix(in srgb, var(--bs-body-bg) 72%, transparent) !important; backdrop-filter: saturate(180%) blur(18px); -webkit-backdrop-filter: saturate(180%) blur(18px); border: 1px solid var(--bs-border-color); border-radius: 14px !important; box-shadow: var(--card-shadow); } .sidebar-toggle-btn { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; color: #1d1d1f; background: rgba(255, 255, 255, 0.55); background-clip: padding-box; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 999px; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 4px 14px rgba(0, 0, 0, 0.06), inset 0 0 0 0.5px rgba(255, 255, 255, 0.6); transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, color 0.2s ease; } .sidebar-toggle-btn i { font-size: 0.95rem; color: #1d1d1f; transition: color 0.2s ease, transform 0.2s ease; } .sidebar-toggle-btn:hover, .sidebar-toggle-btn:focus-visible { color: #0071e3; background: rgba(255, 255, 255, 0.9); border-color: rgba(0, 113, 227, 0.4); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03), 0 6px 20px rgba(0, 113, 227, 0.16); transform: scale(1.06); } .sidebar-toggle-btn:hover i, .sidebar-toggle-btn:focus-visible i { color: #0071e3; } .sidebar-toggle-btn:active { transform: scale(0.94); } [data-bs-theme="dark"] .sidebar-toggle-btn { color: #f5f5f7; background: rgba(28, 28, 30, 0.6); border-color: rgba(255, 255, 255, 0.14); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.3), inset 0 0 0 0.5px rgba(255, 255, 255, 0.08); } [data-bs-theme="dark"] .sidebar-toggle-btn i { color: #f5f5f7; } [data-bs-theme="dark"] .sidebar-toggle-btn:hover, [data-bs-theme="dark"] .sidebar-toggle-btn:focus-visible { color: #2997ff; background: rgba(60, 60, 63, 0.75); border-color: rgba(41, 151, 255, 0.5); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 6px 20px rgba(41, 151, 255, 0.22); } [data-bs-theme="dark"] .sidebar-toggle-btn:hover i, [data-bs-theme="dark"] .sidebar-toggle-btn:focus-visible i { color: #2997ff; } #closeSidebar { color: #1d1d1f; background: rgba(0, 0, 0, 0.06); } #closeSidebar:hover { background: rgba(0, 0, 0, 0.12); } [data-bs-theme="dark"] #closeSidebar { color: #f5f5f7; background: rgba(255, 255, 255, 0.12); } [data-bs-theme="dark"] #closeSidebar:hover { background: rgba(255, 255, 255, 0.22); } .card, .card-modern { background-color: var(--bs-body-bg); border: 1px solid var(--bs-border-color); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); transition: box-shadow 0.25s ease, transform 0.25s ease; } .card:hover, .card-modern:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .card .card-header, .card-modern .card-header { background: transparent; border-bottom: 1px solid var(--bs-border-color); font-weight: 650; border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .card-modern .card-footer { border-top: 1px solid var(--bs-border-color); background: transparent; } .btn { border-radius: 980px; letter-spacing: 0.01em; } .btn-primary, .btn-login { background: linear-gradient(180deg, #0a84ff 0%, #0071e3 100%); border-color: transparent; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.28); } .btn-primary:hover, .btn-login:hover { background: linear-gradient(180deg, #2997ff 0%, #0a84ff 100%); border-color: transparent; box-shadow: 0 6px 18px rgba(0, 113, 227, 0.35); } .btn-primary:focus, .btn-login:focus { box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.28); } .btn-outline-primary { color: #0071e3; border-color: #0071e3; border-radius: 980px; } .btn-outline-primary:hover { background: #0071e3; border-color: #0071e3; color: #fff; box-shadow: 0 4px 12px rgba(0, 113, 227, 0.3); } .btn-success { background: #34c759; border-color: transparent; border-radius: 980px; } .btn-danger { background: #ff3b30; border-color: transparent; border-radius: 980px; } .btn-warning { background: #ff9500; border-color: transparent; border-radius: 980px; color: #fff; } .btn-info { background: #5ac8fa; border-color: transparent; border-radius: 980px; color: #1d1d1f; } [data-bs-theme="dark"] .btn-success { background: #30d158; } [data-bs-theme="dark"] .btn-danger { background: #ff453a; } [data-bs-theme="dark"] .btn-warning { background: #ff9f0a; } [data-bs-theme="dark"] .btn-info { background: #64d2ff; } .form-control, .form-select { border-radius: 10px; border-color: var(--bs-border-color); } .form-control:focus, .form-select:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 4px rgba(var(--bs-primary-rgb), 0.15); } .input-group-text { border-radius: 10px 0 0 10px; } .input-group > .form-control:not(:first-child) { border-radius: 0 10px 10px 0; } .table { --bs-table-bg: transparent; } .table thead th { background: color-mix(in srgb, var(--bs-body-bg) 82%, var(--bs-primary) 8%); color: var(--bs-secondary-color); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; border-bottom: 1px solid var(--bs-border-color); } .table thead th, .table > :not(caption) > * > * { border-color: var(--bs-border-color); } .table-hover tbody tr { transition: background-color 0.12s ease; } .modal-content { background-color: var(--bs-body-bg); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 20px; box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18); } .modal-header { border-bottom: 1px solid var(--bs-border-color); } .modal-footer { border-top: 1px solid var(--bs-border-color); } .badge { border-radius: 7px; letter-spacing: 0.02em; font-weight: 600; } .dropdown-menu { border: 1px solid var(--bs-border-color); border-radius: 14px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12); } .pagination .page-link { border-radius: 8px; margin: 0 2px; } .stat-card { border-radius: 18px; border: 1px solid var(--bs-border-color); background-color: var(--bs-body-bg); box-shadow: var(--card-shadow); transition: box-shadow 0.2s ease, transform 0.2s ease; } .stat-card:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); } .login-card { background: var(--login-card-bg); backdrop-filter: saturate(180%) blur(22px); -webkit-backdrop-filter: saturate(180%) blur(22px); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 26px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16); } [data-bs-theme="dark"] .login-card { border-color: rgba(255, 255, 255, 0.12); } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { border: 3px solid transparent; background-clip: content-box; border-radius: 8px; } @media (max-width: 1199px) { .card, .card-modern { border-radius: 18px; } .modal-content { border-radius: 18px; } } @media (max-width: 991px) { .card, .card-modern { border-radius: 16px; } .stat-card { border-radius: 16px; } .content { padding-left: 14px !important; padding-right: 14px !important; } } @media (max-width: 767px) { .card, .card-modern { border-radius: 14px; box-shadow: var(--card-shadow); } .card-modern .card-header { font-size: 0.85rem; font-weight: 650; } .top-bar { border-radius: 12px !important; } .btn { padding: 6px 13px; } } @media (max-width: 575px) { .content { padding: 8px !important; } .card-modern .card-body { padding: 12px 10px; } .modal-dialog { margin: 0.5rem; } .modal-content { border-radius: 16px; } .table thead th { font-size: 0.66rem; } } ::selection { background: rgba(var(--bs-primary-rgb), 0.28); color: inherit; } :focus-visible { outline: 2px solid var(--bs-primary); outline-offset: 2px; } ::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--bs-secondary-color) 55%, transparent); } body.login-page { background: radial-gradient(1100px 700px at 8% -10%, rgba(88, 86, 214, 0.55), transparent 60%), radial-gradient(900px 600px at 105% 5%, rgba(10, 132, 255, 0.55), transparent 60%), radial-gradient(800px 700px at 50% 110%, rgba(175, 82, 222, 0.42), transparent 62%), radial-gradient(600px 480px at 0% 100%, rgba(0, 199, 190, 0.35), transparent 60%), linear-gradient(150deg, #6c6cf0 0%, #5b8def 34%, #7f6cf0 68%, #5ce1e6 100%); background-attachment: fixed; overflow-x: hidden; } [data-bs-theme="dark"] body.login-page { background: radial-gradient(1100px 700px at 8% -10%, rgba(88, 86, 214, 0.42), transparent 60%), radial-gradient(900px 600px at 105% 5%, rgba(10, 132, 255, 0.4), transparent 60%), radial-gradient(800px 700px at 50% 110%, rgba(175, 82, 222, 0.34), transparent 62%), linear-gradient(150deg, #101018 0%, #14142a 40%, #101832 100%); } .login-card { border-color: rgba(255, 255, 255, 0.55); } .login-header h3 { background: linear-gradient(135deg, #5b8def 0%, #9d7bf5 55%, #ff6fa5 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } [data-bs-theme="dark"] .login-header h3 { background: linear-gradient(135deg, #64d2ff 0%, #b48bff 60%, #ff9bb4 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } .btn-login { background: linear-gradient(135deg, #5b8def 0%, #4f7de8 45%, #7a5cf0 100%); padding: 10px 16px; font-weight: 600; } .btn-login:hover { background: linear-gradient(135deg, #6f9cff 0%, #5b8def 45%, #8a70ff 100%); transform: translateY(-1px); } .offline-banner { display: none; align-items: center; justify-content: center; gap: 10px; position: fixed; top: 0; left: 0; right: 0; z-index: 2000; padding: 10px 40px 10px 16px; font-size: 13px; font-weight: 600; color: #fff; text-align: center; background: linear-gradient(90deg, #ff9f0a 0%, #ff8a1f 50%, #ff5a2a 100%); border-bottom: 1px solid rgba(255, 255, 255, 0.25); box-shadow: 0 4px 18px rgba(255, 122, 0, 0.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .offline-banner.show { display: flex; animation: fpBannerDown 0.25s ease; } .offline-banner .spinner-border { width: 1rem; height: 1rem; --bs-spinner-border-width: 0.18em; flex-shrink: 0; } .offline-banner .offline-lock { margin-left: auto; opacity: 0.85; } [data-bs-theme="dark"] .offline-banner { background: linear-gradient(90deg, #e8910a 0%, #ff7a2a 50%, #ff4f1a 100%); } @media (max-width: 575.98px) { .offline-banner { font-size: 12px; padding: 9px 34px 9px 12px; gap: 6px; } .offline-banner .offline-lock { display: none; } } @keyframes fpBannerDown { from { transform: translateY(-100%); } to { transform: translateY(0); } } ::-webkit-scrollbar-track { background: transparent; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: var(--sidebar-text-muted); border: 2px solid transparent; background-clip: content-box; border-radius: 8px; } .table-hover tbody tr:hover { --bs-table-accent-bg: color-mix(in srgb, var(--bs-body-bg) 76%, var(--bs-primary) 6%) !important; } .btn-link { color: var(--bs-link-color); } .nav-pills.sf-tabs .nav-link { color: var(--bs-secondary-color); } .nav-pills.sf-tabs .nav-link.active { background: var(--sidebar-active-bg, linear-gradient(135deg,#0071e3,#0a84ff)); color: #fff; box-shadow: 0 4px 14px rgba(0,113,227,0.3); } .theme-transitioning, .theme-transitioning * { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease !important; } body.login-page .login-card { border-radius: 26px; } @media (max-width: 1199.98px) { body.login-page .login-card { border-radius: 24px; } } @media (max-width: 991.98px) { body.login-page { background-attachment: scroll; padding: 40px 16px; } body.login-page .login-card { border-radius: 22px; } } @media (max-width: 767.98px) { body.login-page .login-card { border-radius: 20px; width: 94%; max-width: 420px; } } @media (max-width: 575.98px) { body.login-page { padding: 26px 14px; } body.login-page .login-card { border-radius: 18px; width: 100%; } body.login-page .login-header { padding: 26px 20px 12px; } body.login-page .login-body { padding: 0 20px 26px; } } #cuentas-fab { position: fixed; bottom: 84px; left: 18px; z-index: 1055; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 52px; height: 52px; border: none; border-radius: 50%; background: linear-gradient(180deg, #5ac8fa, #0a84ff); color: #fff; box-shadow: 0 8px 22px rgba(10, 132, 255, .4); font-size: 1.02rem; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease, visibility .15s ease, left .3s cubic-bezier(0.4, 0, 0.2, 1); } #cuentas-fab:hover { transform: scale(1.06); box-shadow: 0 10px 26px rgba(10, 132, 255, .5); } #cuentas-fab:active { transform: scale(.96); } #cuentas-fab .badge { font-size: .65rem; } body.sb-flyout-open #cuentas-fab, body.sb-nav-open #cuentas-fab { opacity: 0; visibility: hidden; transform: translateY(10px) scale(.92); pointer-events: none; } .pos-tab-item .pos-tab-edit { flex: 0 0 auto; } .pos-tab-item .btn:focus { box-shadow: none; } @media (min-width: 992px) { #cuentas-fab { width: auto; height: 46px; bottom: 24px; left: 24px; padding: 0 18px; border-radius: 23px; font-size: .9rem; font-weight: 600; } } @media (min-width: 993px) { #cuentas-fab { left: calc(var(--sidebar-collapsed) + 14px); } body:not(.sb-collapsed) #cuentas-fab { left: calc(var(--sidebar-width) + 18px); } } :root { --apple-blue: #0071e3; --apple-blue-2: #0a84ff; --apple-grad: linear-gradient(135deg, #0071e3, #0a84ff); } .nav-pills .nav-link { border-radius: 10px; font-weight: 500; color: var(--bs-secondary-color); transition: background .15s ease, color .15s ease; } .nav-pills .nav-link:hover { color: var(--apple-blue); background: rgba(0, 113, 227, .08); } .nav-pills .nav-link.active { background: var(--apple-grad); color: #fff; box-shadow: 0 4px 12px rgba(0, 113, 227, .3); } .nav-tabs .nav-link:hover { color: var(--apple-blue); } .card { border-radius: 14px; border-color: rgba(0, 0, 0, .07); } .card .card-header { border-radius: 13px 13px 0 0; } [data-bs-theme="dark"] .card { border-color: rgba(255, 255, 255, .08); } .modal-content { border-radius: 16px; border: none; box-shadow: 0 20px 60px rgba(0, 0, 0, .18); } .modal-header { border-bottom-color: rgba(0, 0, 0, .05); } .btn-primary { background: var(--apple-grad); border: none; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 113, 227, .22); transition: all .15s ease; } .btn-primary:hover, .btn-primary:focus { background: var(--apple-grad); filter: brightness(1.06); box-shadow: 0 6px 16px rgba(0, 113, 227, .3); } .btn-primary:disabled, .btn-primary.disabled { background: #96b8d6; } .btn-outline-primary { color: var(--apple-blue); border-color: rgba(0, 113, 227, .5); font-weight: 500; } .btn-outline-primary:hover, .btn-outline-primary:focus { background: var(--apple-blue); border-color: var(--apple-blue); color: #fff; } [data-bs-theme="dark"] .btn-outline-primary { color: #4aa2ff; border-color: rgba(10, 132, 255, .55); } [data-bs-theme="dark"] .btn-outline-primary:hover, [data-bs-theme="dark"] .btn-outline-primary:focus { background: #0071e3; border-color: #0071e3; color: #fff; } .list-group-item { transition: background .15s ease; } .list-group-item-action:hover { background: rgba(0, 113, 227, .05); } .pagination .page-link { border-radius: 10px; margin: 0 2px; border-color: rgba(0, 0, 0, .08); color: var(--apple-blue); font-weight: 500; transition: all .15s ease; } .pagination .page-item.active .page-link { background: var(--apple-grad); border-color: transparent; color: #fff; box-shadow: 0 4px 12px rgba(0, 113, 227, .3); } .pagination .page-link:hover { color: var(--apple-blue); background: rgba(0, 113, 227, .08); border-color: transparent; } [data-bs-theme="dark"] .pagination .page-link { border-color: rgba(255, 255, 255, .12); }
/* Finanzas y Admin en viewport < 992px (sidebar expandido 265px en PC) */
    .sidebar:not(.collapsed) #finMenu {
        padding: 6px 6px 8px;
        margin: 2px 8px 8px;
    }
    .sidebar:not(.collapsed) #finMenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
        align-items: stretch;
    }
    .sidebar:not(.collapsed) #finMenu > ul.nav > li.nav-item {
        flex: 1 1 auto;
        width: 100%;
        margin: 0;
    }
    .sidebar:not(.collapsed) #finMenu li.nav-subhead {
        flex: 1 1 100%;
        width: 100%;
        padding: 6px 8px 2px;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 6px 12px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.78rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link.active {
        box-shadow: none;
    }
    .sidebar:not(.collapsed) #finMenu .nav-link:active {
        outline: none !important;
        background: var(--sidebar-active-bg) !important;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 6px 10px;
        margin: 2px 0;
        border-radius: 9px;
        font-size: 0.78rem;
        font-weight: 600;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger i.fa-fw {
        width: auto;
        font-size: 0.78rem;
        opacity: 0.8;
        margin: 0;
    }
    .sidebar:not(.collapsed) #adminMenuAll > ul.nav > li.nav-item.sb-group > .sb-trigger:hover {
        transform: none;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu {
        margin: 2px 0 6px 10px;
        padding: 2px 4px;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu > ul.nav {
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 2px;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link {
        display: flex;
        align-items: center;
        gap: 6px;
        width: 100%;
        padding: 5px 10px 5px 26px;
        margin: 1px 0;
        border-radius: 8px;
        font-size: 0.76rem;
        font-weight: 500;
        white-space: nowrap;
        line-height: 1.2;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link i.fa-fw {
        width: auto;
        font-size: 0.76rem;
        opacity: 0.75;
        margin: 0;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:hover {
        transform: none !important;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link.active {
        box-shadow: none;
    }
    .sidebar:not(.collapsed) #adminMenuAll li.sb-group.sb-open > .sb-submenu .nav-link:active {
        display: block !important;
    }