/* * Vistaar OMS — light-blue modern AdminLTE 4 theme. * Ported from d.nurserylive.com's design system (same stack: AdminLTE 4 + Bootstrap 5). * Loaded as a static override AFTER the AdminLTE CDN stylesheet in the layout . * Multi-tenant chrome (tenant-card) intentionally omitted — Vistaar is single-tenant. */ /* --- Brand palette (light-blue modern) --- */ :root { --bs-primary: #2c7be5; --bs-primary-rgb: 44, 123, 229; --bs-link-color: #2c7be5; --bs-link-color-rgb: 44, 123, 229; --d-brand-tint: #f0f6ff; --d-brand-dark: #1657b9; --bs-body-font-family: "Source Sans 3", "Source Sans Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } [data-bs-theme="dark"] { --bs-primary: #4d9aff; --bs-primary-rgb: 77, 154, 255; } /* --- Bootstrap button + form recolor --- */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--d-brand-dark); --bs-btn-hover-border-color: var(--d-brand-dark); --bs-btn-active-bg: var(--d-brand-dark); --bs-btn-active-border-color: var(--d-brand-dark); } .form-control:focus, .form-select:focus, .form-check-input:focus { border-color: var(--bs-primary); box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.18); } .form-check-input:checked { background-color: var(--bs-primary); border-color: var(--bs-primary); } /* --- App chrome --- */ body { background-color: #f4f7fb; } .app-header.navbar { background-color: #ffffff !important; border-bottom: 1px solid #e6ecf3; } /* Mobile: tighten spacing around the right-side action icons (bell, user). */ @media (max-width: 991.98px) { .app-header .navbar-actions .nav-link { padding-left: 0.3rem; padding-right: 0.3rem; } } .app-sidebar { background-color: #ffffff !important; border-right: 1px solid #e6ecf3; } .app-sidebar .sidebar-brand { background-color: var(--bs-primary); border-bottom: none; justify-content: flex-start !important; align-items: flex-start !important; text-align: left; height: auto !important; padding-top: 0.5rem; padding-bottom: 0.5rem; } .app-sidebar .sidebar-brand .brand-link { display: block !important; width: 100%; text-align: left; color: #ffffff; font-weight: 600; letter-spacing: 0.02em; } .app-sidebar .sidebar-brand .brand-link .brand-text { color: #ffffff; font-weight: 600; } .app-sidebar .sidebar-brand .brand-link small { color: rgba(255, 255, 255, 0.7) !important; font-weight: 400; letter-spacing: 0; } .app-sidebar .sidebar-brand .brand-link:hover { color: #ffffff; opacity: 0.92; } /* --- Sidebar navigation --- */ .app-sidebar .sidebar-menu > .nav-item > .nav-link, .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link { color: #495667; border-radius: 6px; margin: 0 8px; padding: 0.3rem 0.75rem; display: flex; align-items: center; gap: 0.5rem; } .app-sidebar .sidebar-menu > .nav-item > .nav-link:hover { background-color: var(--d-brand-tint); color: var(--d-brand-dark); } .app-sidebar .sidebar-menu > .nav-item > .nav-link.active { background-color: var(--bs-primary); color: #ffffff; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } /* Treeview (collapsible System submenu) */ .app-sidebar .sidebar-menu .nav-treeview { padding-left: 0.5rem; } .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link.active { background-color: var(--d-brand-tint); color: var(--d-brand-dark); font-weight: 600; } .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link i { font-size: 0.55rem; } .app-sidebar .sidebar-menu .nav-arrow { transition: transform 0.2s ease; } .app-sidebar .sidebar-menu .menu-open > .nav-link .nav-arrow { transform: rotate(90deg); } .app-sidebar .sidebar-menu > .nav-item > .nav-link i, .app-sidebar .sidebar-menu .nav-treeview > .nav-item > .nav-link i { width: 1.25rem; text-align: center; opacity: 0.85; flex-shrink: 0; } /* Section headers between nav groups */ .app-sidebar .sidebar-menu .nav-header { color: #8a97a8; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.72rem; font-weight: 600; padding: 0.75rem 1rem 0.25rem; } /* --- Cards --- */ .card { border: 1px solid #e6ecf3; box-shadow: 0 1px 2px rgba(13, 38, 76, 0.04); } .card-header { background-color: #ffffff; border-bottom: 1px solid #eef2f7; font-weight: 600; color: #1d2939; } /* --- Stat tile (used on dashboards) --- */ .stat-tile { display: flex; align-items: center; gap: 1rem; } .stat-tile .stat-icon { width: 48px; height: 48px; border-radius: 8px; background: var(--d-brand-tint); color: var(--bs-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.4rem; } .stat-tile .stat-label { color: #6b7785; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; } .stat-tile .stat-value { font-size: 1.75rem; font-weight: 600; color: #1d2939; line-height: 1.1; } /* --- Auth pages (login) --- */ .auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--bs-primary-rgb), 0.10), transparent 60%), linear-gradient(180deg, var(--d-brand-tint) 0%, #f4f7fb 100%); } .auth-box { width: 100%; max-width: 420px; } .auth-card { border: 1px solid #e6ecf3; border-radius: 16px; box-shadow: 0 12px 40px rgba(13, 38, 76, 0.10); overflow: hidden; } .auth-card .card-body { padding: 2rem; } .auth-brand { color: var(--bs-primary); font-weight: 700; font-size: 1.6rem; line-height: 1; text-decoration: none; } .auth-brand:hover { color: var(--d-brand-dark); } /* legacy login classes (used by layouts/auth.blade.php) */ .login-page { background: radial-gradient(1200px 600px at 50% -10%, rgba(var(--bs-primary-rgb), 0.10), transparent 60%), linear-gradient(180deg, var(--d-brand-tint) 0%, #f4f7fb 100%) !important; } .login-logo a, .login-logo b { color: var(--bs-primary); font-weight: 700; font-size: 1.75rem; text-decoration: none; } .login-card-body { background-color: #ffffff; border-radius: 8px; } /* --- Status badges --- */ .badge-status { text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.7rem; font-weight: 600; padding: 0.35em 0.6em; } /* --- Footer --- */ .app-footer { background-color: #ffffff; border-top: 1px solid #e6ecf3; color: #6b7785; }