@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap');
:root {
/* Background */
--lv-bg: hsl(230, 35%, 97%);
--lv-bg-mesh:
radial-gradient(at 20% 0%, hsl(248 90% 62% / .14) 0px, transparent 50%),
radial-gradient(at 80% 0%, hsl(190 95% 55% / .10) 0px, transparent 50%),
radial-gradient(at 0% 100%, hsl(262 95% 70% / .08) 0px, transparent 50%),
hsl(230, 35%, 97%);
/* Surface */
--lv-card: hsl(0 0% 100%);
--lv-card-foreground: hsl(232 38% 12%);
/* Brand — Electric Indigo/Violet */
--lv-primary: hsl(248 90% 62%);
--lv-primary-glow: hsl(262 95% 70%);
--lv-primary-soft: hsl(248 100% 96%);
--lv-primary-fg: hsl(0 0% 100%);
/* Accent — Cyan */
--lv-accent: hsl(190 95% 55%);
--lv-accent-soft: hsl(190 95% 95%);
/* Text */
--lv-text: hsl(232 38% 12%);
--lv-muted: hsl(232 15% 45%);
/* Borders */
--lv-border: hsl(232 25% 90%);
--lv-input-border: hsl(232 25% 88%);
/* Status */
--lv-success: hsl(152 75% 42%);
--lv-warning: hsl(38 95% 55%);
--lv-danger: hsl(358 80% 60%);
/* Sidebar — Deep Midnight */
--lv-sb-bg-top: hsl(240 50% 10%);
--lv-sb-bg-bot: hsl(245 55% 8%);
--lv-sb-fg: hsl(230 30% 80%);
--lv-sb-muted: hsl(230 20% 55%);
--lv-sb-accent: hsl(240 40% 16%);
--lv-sb-border: hsl(240 30% 18%);
/* Gradients */
--lv-grad-primary: linear-gradient(135deg, hsl(248 90% 62%), hsl(262 95% 70%));
--lv-grad-accent: linear-gradient(135deg, hsl(248 90% 62%), hsl(190 95% 55%));
--lv-grad-sidebar: linear-gradient(180deg, hsl(240 50% 10%) 0%, hsl(245 55% 8%) 100%);
/* Shadows */
--lv-shadow-sm: 0 1px 3px hsl(232 38% 12% / .06);
--lv-shadow-md: 0 4px 14px hsl(232 38% 12% / .08), 0 1px 3px hsl(232 38% 12% / .05);
--lv-shadow-lg: 0 12px 36px hsl(232 38% 12% / .12), 0 4px 10px hsl(232 38% 12% / .06);
--lv-shadow-glow: 0 0 0 4px hsl(248 90% 62% / .14);
--lv-shadow-primary: 0 8px 24px hsl(248 90% 62% / .40);
--lv-shadow-sidebar: 4px 0 28px hsl(240 60% 5% / .38);
/* Radius */
--lv-radius-sm: 10px;
--lv-radius-md: 14px;
--lv-radius-lg: 18px;
--lv-radius-xl: 24px;
/* Sidebar width */
--lv-sb-width: 268px;
--lv-sb-collapsed: 0px;
/* Motion */
--lv-ease: cubic-bezier(0.22, 1, 0.36, 1);
--lv-transition: all 0.22s var(--lv-ease);
}
/* ─────────────────────────────────────────────────────────────
2. RESET & BASE
───────────────────────────────────────────────────────────── */
.admin-body {
font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background: var(--lv-bg-mesh) !important;
color: var(--lv-text) !important;
min-height: 100vh;
}
.admin-body h1,
.admin-body h2,
.admin-body h3,
.admin-body h4,
.admin-body h5 {
font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
letter-spacing: -0.025em;
}
.lucide-react-icon {
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
color: currentColor;
flex-shrink: 0;
}
.lucide-react-icon svg {
display: block;
}
/* ─────────────────────────────────────────────────────────────
3. SHELL LAYOUT
───────────────────────────────────────────────────────────── */
.admin-shell {
display: flex;
min-height: 100vh;
}
/* ─────────────────────────────────────────────────────────────
4. SIDEBAR
───────────────────────────────────────────────────────────── */
.sidebar {
position: fixed !important;
top: 0 !important;
left: 0 !important;
height: 100vh !important;
width: var(--lv-sb-width) !important;
background:
radial-gradient(circle at top left, hsl(248 90% 62% / .22), transparent 28%),
var(--lv-grad-sidebar) !important;
border-right: 1px solid var(--lv-sb-border) !important;
box-shadow: var(--lv-shadow-sidebar) !important;
display: flex !important;
flex-direction: column !important;
overflow: hidden !important;
z-index: 1050 !important;
transition: transform 0.28s var(--lv-ease), width 0.28s var(--lv-ease) !important;
transform: translateX(0) !important;
}
.sidebar:not(.show) {
transform: translateX(-100%) !important;
}
/* Collapsed state (desktop toggle) */
.sidebar.collapsed {
width: 78px !important;
transform: translateX(0) !important;
}
/* ── Sidebar Shell (inner flex) ── */
.sidebar-shell {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
/* ── Header ── */
.sidebar-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 12px !important;
padding: 20px 16px !important;
border-bottom: 1px solid var(--lv-sb-border) !important;
flex-shrink: 0;
}
.sidebar-header > .d-flex {
min-width: 0;
flex: 1 1 auto;
}
.auth-logo-mark-1 {
width: 52px;
height: 52px;
border-radius: 0;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
}
.auth-logo-mark-1 img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
}
.sidebar-brand-mark {
position: relative !important;
width: 40px !important;
height: 40px !important;
border-radius: 12px !important;
background: var(--lv-grad-primary) !important;
box-shadow: var(--lv-shadow-primary) !important;
display: inline-flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 1.1rem;
flex-shrink: 0;
overflow: hidden !important;
}
.sidebar-branding {
display: flex;
flex-direction: column;
gap: 1px;
overflow: hidden;
flex: 1;
min-width: 0;
}
.sidebar-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 1rem !important;
line-height: 1.2 !important;
color: #ffffff !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.sidebar-subtitle {
font-size: 0.75rem !important;
color: var(--lv-sb-muted) !important;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Collapsed: hide branding + brand mark, center toggle button */
.sidebar.collapsed .sidebar-branding,
.sidebar.collapsed .sidebar-subtitle,
.sidebar.collapsed .sidebar-brand-mark {
display: none !important;
}
.sidebar.collapsed .sidebar-header {
justify-content: center !important;
flex-direction: column !important;
gap: 12px !important;
padding: 16px 10px !important;
}
.sidebar.collapsed .sidebar-header > .d-flex {
width: 100%;
justify-content: center !important;
gap: 0 !important;
flex: 0 0 auto;
}
.sidebar.collapsed .auth-logo-mark-1 {
width: 62px;
height: 62px;
margin: 0 auto;
}
.sidebar.collapsed .sidebar-toggle {
display: none !important;
}
/* Collapsed: show tooltip on nav-item hover */
.sidebar.collapsed .nav-item {
position: relative;
}
.sidebar.collapsed .nav-item::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 10px);
top: 50%;
transform: translateY(-50%);
background: hsl(232 38% 14%);
color: #fff;
font-size: 0.78rem;
font-weight: 600;
white-space: nowrap;
padding: 6px 12px;
border-radius: 8px;
box-shadow: var(--lv-shadow-md);
pointer-events: none;
opacity: 0;
transition: opacity 0.15s ease;
z-index: 2000;
}
.sidebar.collapsed .nav-item:hover::after {
opacity: 1;
}
/* ── Toggle Button ── */
.sidebar-toggle {
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
background: hsl(240 40% 16% / .6) !important;
border: 1px solid hsl(240 30% 28% / .5) !important;
color: hsl(230 30% 75%) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer;
transition: var(--lv-transition) !important;
flex-shrink: 0;
padding: 0 !important;
min-height: unset !important;
font-size: 0.9rem;
}
.sidebar-toggle:hover {
background: hsl(240 40% 20%) !important;
color: #ffffff !important;
}
.sidebar-toggle .lucide-react-icon {
transition: transform 0.28s var(--lv-ease);
display: inline-block;
}
.sidebar.collapsed .sidebar-toggle .lucide-react-icon {
transform: rotate(180deg);
}
/* ── Open sidebar button (removed — topbar-sidebar-toggle handles both) ── */
/* Mobile sidebar toggle in topbar */
.mobile-sidebar-toggle {
background: none !important;
border: none !important;
color: var(--lv-text) !important;
width: 40px !important;
height: 40px !important;
border-radius: 10px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.3rem !important;
cursor: pointer;
transition: var(--lv-transition) !important;
min-height: unset !important;
padding: 0 !important;
}
.mobile-sidebar-toggle:hover {
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
}
/* ── Nav sections ── */
.sidebar-nav {
flex: 1;
overflow-y: auto;
overflow-x: hidden;
padding: 12px 10px !important;
scrollbar-width: thin;
scrollbar-color: hsl(240 30% 28% / 0.75) transparent;
scrollbar-gutter: auto !important;
-ms-overflow-style: auto;
}
.sidebar-nav::-webkit-scrollbar {
width: 4px;
height: 4px;
}
.sidebar-nav::-webkit-scrollbar-track {
background: transparent;
}
.sidebar-nav::-webkit-scrollbar-thumb {
background: hsl(240 30% 28% / 0.75);
border-radius: 999px;
}
.sidebar-nav::-webkit-scrollbar-thumb:hover {
background: hsl(240 30% 40% / 0.9);
}
.nav-section-title {
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.14em !important;
text-transform: uppercase !important;
color: var(--lv-sb-muted) !important;
padding: 0 8px !important;
margin: 18px 0 6px !important;
}
.sidebar.collapsed .nav-section-title {
display: none !important;
}
/* ── Nav Items ── */
.nav-item {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 10px 12px !important;
border-radius: 12px !important;
margin: 2px 0 !important;
color: hsl(230 30% 78%) !important;
font-weight: 500 !important;
font-size: 0.9rem !important;
text-decoration: none !important;
transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease !important;
min-height: unset !important;
white-space: nowrap;
overflow: hidden;
}
.nav-item:hover {
background: hsl(240 40% 18%) !important;
color: #ffffff !important;
text-decoration: none !important;
transform: translateX(2px) !important;
}
.nav-item.active {
background: var(--lv-grad-primary) !important;
color: #ffffff !important;
box-shadow: var(--lv-shadow-primary) !important;
font-weight: 600 !important;
transform: none !important;
}
.nav-icon {
font-size: 1rem !important;
width: 18px !important;
flex-shrink: 0 !important;
margin-right: 0 !important;
text-align: center;
}
.nav-text {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: opacity 0.22s ease, width 0.22s ease;
}
.sidebar.collapsed .nav-text {
opacity: 0;
width: 0;
overflow: hidden;
}
.sidebar.collapsed .nav-item {
width: 48px !important;
height: 48px !important;
justify-content: center !important;
padding: 0 !important;
margin: 4px auto !important;
gap: 0 !important;
border-radius: 14px !important;
}
.sidebar.collapsed .sidebar-nav {
padding: 10px 0 !important;
scrollbar-width: none;
-ms-overflow-style: none;
}
.sidebar.collapsed .sidebar-nav::-webkit-scrollbar {
width: 0;
height: 0;
}
.sidebar.collapsed .nav-icon {
width: 24px !important;
height: 24px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
}
.sidebar.collapsed .nav-icon .lucide-react-icon,
.sidebar.collapsed .nav-icon svg {
width: 22px !important;
height: 22px !important;
}
/* ── Sidebar Footer ── */
.sidebar-footer {
flex-shrink: 0;
padding: 12px 10px !important;
border-top: 1px solid var(--lv-sb-border) !important;
background: transparent !important;
position: relative !important;
bottom: auto !important;
width: auto !important;
}
.sidebar-footer-links {
display: flex !important;
flex-direction: column !important;
gap: 4px !important;
padding: 12px 14px !important;
border-radius: 16px !important;
background: hsl(240 40% 14% / .6) !important;
border: 1px solid var(--lv-sb-border) !important;
}
.sidebar-footer-link {
color: var(--lv-sb-fg) !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
text-decoration: none !important;
padding: 4px 0 !important;
transition: color 0.15s ease !important;
}
.sidebar-footer-link:hover {
color: #ffffff !important;
text-decoration: none !important;
}
.sidebar.collapsed .sidebar-footer-links,
.sidebar.collapsed .sidebar-status-card {
display: none !important;
}
/* ─────────────────────────────────────────────────────────────
5. MAIN CONTENT
───────────────────────────────────────────────────────────── */
.main-content {
margin-left: var(--lv-sb-width) !important;
transition: margin-left 0.28s var(--lv-ease) !important;
flex: 1;
min-width: 0;
position: relative;
background:
radial-gradient(circle at 78% 0%, hsl(190 95% 55% / .10) 0%, transparent 24%),
radial-gradient(circle at 18% 0%, hsl(248 90% 62% / .12) 0%, transparent 26%),
linear-gradient(180deg, hsl(210 60% 99%) 0%, hsl(230 35% 97%) 220px) !important;
}
.sidebar:not(.show) ~ .main-content,
.sidebar:not(.show) ~ * .main-content {
margin-left: 0 !important;
}
.sidebar.collapsed ~ .main-content {
margin-left: 78px !important;
}
.sidebar-backdrop {
position: fixed;
inset: 0;
border: 0;
padding: 0;
margin: 0;
background: hsl(232 38% 12% / 0.42);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
z-index: 1040;
}
/* ─────────────────────────────────────────────────────────────
6. TOP HEADER
───────────────────────────────────────────────────────────── */
.top-header {
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 16px !important;
min-height: 62px !important;
padding: 10px 28px !important;
background:
linear-gradient(180deg, hsl(0 0% 100% / .42) 0%, hsl(0 0% 100% / .14) 100%) !important;
backdrop-filter: blur(14px) saturate(160%) !important;
-webkit-backdrop-filter: blur(14px) saturate(160%) !important;
border-bottom: 1px solid transparent !important;
box-shadow: none !important;
}
.top-header-left {
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
.top-header-logo {
width: 40px !important;
height: 40px !important;
object-fit: cover !important;
border-radius: 12px !important;
box-shadow: var(--lv-shadow-sm) !important;
}
.top-header-brand {
min-width: 0;
}
.top-brand-title {
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.95rem !important;
font-weight: 700 !important;
letter-spacing: -0.02em !important;
color: var(--lv-text) !important;
text-transform: none !important;
line-height: 1.2;
}
.top-brand-subtitle {
font-size: 0.75rem !important;
color: var(--lv-muted) !important;
margin-top: 0 !important;
}
.top-header-right {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
/* Search bar */
.admin-top-search {
position: relative !important;
min-width: min(380px, 36vw) !important;
}
.admin-top-search i,
.admin-top-search .bi-search {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--lv-muted) !important;
font-size: 0.9rem;
pointer-events: none;
}
.admin-top-search-input {
width: 100% !important;
height: 42px !important;
padding: 0 42px 0 40px !important;
border-radius: 14px !important;
border: 1px solid var(--lv-border) !important;
background: var(--lv-card) !important;
color: var(--lv-text) !important;
font-size: 0.88rem !important;
outline: none !important;
transition: var(--lv-transition) !important;
box-shadow: var(--lv-shadow-sm) !important;
}
.admin-top-search-input:focus {
border-color: var(--lv-primary) !important;
box-shadow: var(--lv-shadow-glow) !important;
}
.admin-top-search-input::placeholder {
color: var(--lv-muted) !important;
}
/* Profile chip */
.profile-btn {
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.profile-chip {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 6px 12px 6px 6px !important;
border-radius: 14px !important;
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
box-shadow: var(--lv-shadow-sm) !important;
cursor: pointer;
transition: var(--lv-transition) !important;
}
.profile-chip:hover {
border-color: hsl(248 90% 62% / .4) !important;
box-shadow: var(--lv-shadow-md) !important;
}
.profile-avatar {
width: 36px !important;
height: 36px !important;
border-radius: 10px !important;
background: var(--lv-grad-accent) !important;
color: #ffffff !important;
font-family: 'Plus Jakarta Sans', sans-serif;
font-size: 0.85rem !important;
font-weight: 700 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0;
}
.profile-chip-name {
font-size: 0.82rem !important;
font-weight: 600 !important;
color: var(--lv-text) !important;
line-height: 1.2 !important;
}
.profile-chip-role {
font-size: 0.7rem !important;
color: var(--lv-muted) !important;
line-height: 1.2 !important;
}
/* Profile dropdown */
.profile-dropdown {
position: relative !important;
}
.dropdown-menu {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
box-shadow: var(--lv-shadow-lg) !important;
padding: 6px !important;
min-width: 200px !important;
}
.dropdown-item {
border-radius: 10px !important;
color: var(--lv-text) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
padding: 9px 14px !important;
transition: background 0.15s ease, color 0.15s ease !important;
}
.dropdown-item:hover {
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
}
.dropdown-divider {
border-color: var(--lv-border) !important;
margin: 4px 0 !important;
}
/* ─────────────────────────────────────────────────────────────
7. CONTENT AREA & PAGE HEADER
───────────────────────────────────────────────────────────── */
.content-area {
position: relative;
padding: 0 18px 30px !important;
}
.admin-page-shell {
max-width: 1340px;
margin: 0 auto;
position: relative;
border-radius: 28px;
overflow: hidden;
}
.admin-page-shell::before {
content: "";
position: absolute;
top: -56px;
left: 0;
right: 0;
height: 132px;
pointer-events: none;
background:
radial-gradient(circle at 12% 0%, hsl(248 90% 62% / .10) 0%, transparent 48%),
radial-gradient(circle at 86% 8%, hsl(190 95% 55% / .08) 0%, transparent 40%);
border-radius: inherit;
z-index: 0;
}
.admin-page-shell > * {
position: relative;
z-index: 1;
}
.admin-page-hero {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 20px !important;
padding: 20px 24px !important;
margin-bottom: 14px !important;
border-radius: var(--lv-radius-xl) !important;
background:
radial-gradient(circle at top left, hsl(248 90% 62% / .14), transparent 42%),
radial-gradient(circle at top right, hsl(190 95% 55% / .06), transparent 36%),
linear-gradient(120deg, hsl(0 0% 100% / .80) 0%, hsl(230 50% 98% / .92) 100%) !important;
border: 1px solid hsl(248 90% 62% / .10) !important;
box-shadow: var(--lv-shadow-md) !important;
}
.admin-breadcrumbs {
display: flex !important;
align-items: center !important;
gap: 8px !important;
margin-bottom: 10px !important;
color: var(--lv-muted) !important;
font-size: 0.8rem !important;
font-weight: 500 !important;
}
.admin-breadcrumbs span:last-child {
color: var(--lv-primary) !important;
font-weight: 600;
}
.admin-page-title {
margin: 0 !important;
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: clamp(1.75rem, 2.4vw, 2.5rem) !important;
font-weight: 400 !important;
line-height: 1.1 !important;
letter-spacing: -0.01em !important;
color: var(--lv-text) !important;
}
.admin-page-subtitle {
margin: 8px 0 0 !important;
color: var(--lv-muted) !important;
font-size: 0.9rem !important;
max-width: 640px;
}
.admin-page-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: flex-end !important;
gap: 10px !important;
}
.admin-content-stack {
display: grid;
gap: 16px;
}
.admin-dashboard-page .content-area {
padding-top: 0 !important;
padding-bottom: 34px !important;
}
.admin-dashboard-page .admin-page-hero {
padding: 22px 28px !important;
margin-bottom: 6px !important;
}
.admin-dashboard-page .admin-page-title {
font-size: clamp(1.65rem, 2.1vw, 2.2rem) !important;
}
.admin-dashboard-page .admin-page-subtitle {
margin-top: 6px !important;
}
.admin-dashboard-page .admin-content-stack {
gap: 16px;
}
/* ─────────────────────────────────────────────────────────────
8. CARDS / PANELS
───────────────────────────────────────────────────────────── */
.admin-panel,
.admin-index-panel,
.card {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
box-shadow: var(--lv-shadow-md) !important;
}
.admin-panel {
padding: 20px !important;
}
.admin-panel-header {
display: flex !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 16px !important;
margin-bottom: 16px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid var(--lv-border) !important;
}
.admin-panel-title-row {
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
}
.admin-panel-icon {
width: 44px !important;
height: 44px !important;
border-radius: 14px !important;
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.1rem !important;
flex-shrink: 0;
}
.admin-panel-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 1.2rem !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
color: var(--lv-text) !important;
margin: 0 !important;
}
.admin-panel-copy {
color: var(--lv-muted) !important;
font-size: 0.85rem !important;
margin-top: 4px !important;
}
/* Metric cards */
.metric-card {
background: hsl(248, 100%, 98.5%) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
box-shadow: var(--lv-shadow-md) !important;
padding: 16px 18px !important;
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}
.metric-card:hover {
transform: translateY(-2px) !important;
box-shadow: var(--lv-shadow-lg) !important;
}
.metric-value {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 2.25rem !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
color: var(--lv-text) !important;
line-height: 1;
}
.metric-label {
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
color: var(--lv-muted) !important;
margin-top: 6px;
}
.kpi-icon {
width: 46px !important;
height: 46px !important;
border-radius: 14px !important;
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.25rem !important;
}
.kpi-badge.positive { background: hsl(152 75% 92%); color: hsl(152 75% 28%); }
.kpi-badge.negative { background: hsl(358 80% 93%); color: hsl(358 80% 40%); }
.kpi-badge.neutral { background: var(--lv-border); color: var(--lv-muted); }
/* ─────────────────────────────────────────────────────────────
9. FORMS — Modern SaaS style
───────────────────────────────────────────────────────────── */
/* Full-width form container — removes any outer max-width restriction */
.admin-form-wrapper {
width: 100% !important;
}
/* Section grouping */
.admin-form-shell {
display: grid !important;
gap: 20px !important;
width: 100% !important;
}
.admin-form-footer {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 12px !important;
padding-top: 8px !important;
}
/* Labels */
.form-label {
display: block !important;
margin-bottom: 6px !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
letter-spacing: 0.03em !important;
text-transform: uppercase !important;
color: var(--lv-muted) !important;
}
/* Core input/select */
.form-control,
.form-select,
.form-control-dark {
display: block !important;
width: 100% !important;
min-height: 48px !important;
padding: 12px 16px !important;
font-size: 0.9rem !important;
font-family: 'Inter', sans-serif !important;
color: var(--lv-text) !important;
background: var(--lv-card) !important;
border: 1px solid var(--lv-input-border) !important;
border-radius: var(--lv-radius-md) !important;
box-shadow: var(--lv-shadow-sm) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
outline: none !important;
-webkit-appearance: none;
appearance: none;
}
/* Textarea */
textarea.form-control,
textarea.form-control-dark {
min-height: 110px !important;
resize: vertical;
padding-top: 14px !important;
}
/* Focus state — signature glow ring */
.form-control:focus,
.form-select:focus,
.form-control-dark:focus {
border-color: var(--lv-primary) !important;
box-shadow: var(--lv-shadow-glow), var(--lv-shadow-sm) !important;
background: #fff !important;
color: var(--lv-text) !important;
outline: none !important;
}
/* Placeholder */
.form-control::placeholder,
.form-control-dark::placeholder {
color: var(--lv-muted) !important;
opacity: 0.7;
}
.room-rate-input-group {
display: flex;
flex-wrap: nowrap;
align-items: stretch;
height: 48px;
min-height: 48px;
border: 1px solid var(--lv-input-border) !important;
border-radius: var(--lv-radius-md) !important;
background: var(--lv-card) !important;
box-shadow: var(--lv-shadow-sm) !important;
overflow: hidden;
}
.room-rate-input-group > .input-group-text {
display: inline-flex;
align-items: center;
justify-content: center;
height: 100%;
min-width: 82px;
padding: 12px 18px !important;
font-size: 1.35rem;
font-weight: 700;
line-height: 1;
color: var(--lv-text) !important;
background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%) !important;
border: 0 !important;
border-right: 1px solid var(--lv-input-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.room-rate-input-group > .form-control {
height: 100% !important;
min-height: 0 !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding-left: 1rem !important;
padding-top: 12px !important;
padding-bottom: 12px !important;
line-height: 1.2 !important;
}
.room-rate-input-group > .form-control:focus {
border: 0 !important;
box-shadow: none !important;
}
.room-rate-input-group:focus-within {
border-color: var(--lv-primary) !important;
box-shadow: var(--lv-shadow-glow), var(--lv-shadow-sm) !important;
}
.room-rate-input-group:focus-within > .input-group-text {
border-color: var(--lv-primary) !important;
}
.room-rate-field .form-text {
margin-top: 8px;
line-height: 1.35;
}
.booking-mode-card {
padding: 18px 20px;
border: 1px solid hsl(248 50% 88%) !important;
border-radius: var(--lv-radius-lg) !important;
background:
linear-gradient(135deg, hsl(248 100% 98%) 0%, hsl(190 100% 98%) 100%) !important;
}
.booking-mode-title {
font-size: 1rem;
font-weight: 700;
color: var(--lv-text);
}
.booking-mode-copy {
margin-top: 4px;
font-size: 0.88rem;
color: var(--lv-muted);
line-height: 1.5;
}
.booking-mode-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px 12px;
border-radius: 999px;
background: #ffffff;
border: 1px solid hsl(248 60% 88%);
color: hsl(248 90% 55%);
font-size: 0.8rem;
font-weight: 700;
}
.booking-full-day-info {
margin-top: 14px;
padding: 14px 16px;
border-radius: var(--lv-radius-md);
background: hsl(192 85% 92% / 0.7);
border: 1px solid hsl(190 60% 82%);
}
.booking-full-day-points {
display: flex;
flex-wrap: wrap;
gap: 10px 14px;
color: hsl(196 74% 28%);
font-size: 0.88rem;
font-weight: 600;
}
.booking-full-day-points span {
display: inline-flex;
align-items: center;
}
.booking-custom-amenities {
padding: 16px 18px;
border: 1px dashed hsl(232 25% 84%);
border-radius: var(--lv-radius-md);
background: hsl(220 40% 99%);
}
.custom-amenity-row {
padding: 12px;
border: 1px solid hsl(232 25% 90%);
border-radius: 12px;
background: #fff;
}
/* Custom select arrow */
.form-select {
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%236d7a9f' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: right 14px center !important;
background-size: 14px 10px !important;
padding-right: 40px !important;
}
/* Autofill fix */
.admin-body input:-webkit-autofill,
.admin-body input:-webkit-autofill:hover,
.admin-body input:-webkit-autofill:focus,
.admin-body textarea:-webkit-autofill,
.admin-body select:-webkit-autofill {
-webkit-text-fill-color: var(--lv-text) !important;
-webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;
transition: background-color 5000s ease-in-out 0s !important;
}
/* Form group spacing */
.mb-3.col-md-6,
.mb-3.col-md-4,
.mb-3.col-md-3 {
margin-bottom: 20px !important;
}
/* ── Checkboxes & Radios — Selection Cards ── */
.form-check {
position: relative !important;
padding: 14px 16px 14px 44px !important;
border-radius: var(--lv-radius-md) !important;
border: 1px solid var(--lv-input-border) !important;
background: var(--lv-card) !important;
cursor: pointer;
transition: var(--lv-transition) !important;
box-shadow: var(--lv-shadow-sm) !important;
}
.form-check:hover {
border-color: hsl(248 90% 62% / .4) !important;
background: var(--lv-primary-soft) !important;
}
.form-check-input {
position: absolute !important;
left: 14px !important;
top: 50% !important;
transform: translateY(-50%) !important;
margin: 0 !important;
width: 18px !important;
height: 18px !important;
border: 2px solid hsl(248 90% 62% / .4) !important;
border-radius: 5px !important;
cursor: pointer;
transition: var(--lv-transition) !important;
flex-shrink: 0;
}
.form-check-input[type="radio"] {
border-radius: 50% !important;
}
.form-check-input:focus {
box-shadow: var(--lv-shadow-glow) !important;
border-color: var(--lv-primary) !important;
outline: none !important;
}
.form-check-input:checked {
background-color: var(--lv-primary) !important;
border-color: var(--lv-primary) !important;
box-shadow: 0 0 0 3px hsl(248 90% 62% / .16) !important;
}
.form-check-label {
color: var(--lv-text) !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
cursor: pointer;
text-transform: none !important;
letter-spacing: normal !important;
}
/* Compact inline radio/checkbox — use alongside form-check */
.form-check.form-check-sm {
padding: 7px 14px 7px 36px !important;
min-width: 72px;
display: inline-flex !important;
align-items: center;
}
/* ── Section headings inside forms ── */
.company-only-fields > h5,
.admin-form-shell h5 {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
letter-spacing: 0.15em !important;
text-transform: uppercase !important;
color: var(--lv-muted) !important;
margin: 24px 0 14px !important;
}
/* ── Select2 Modern Override ── */
.select2-container {
width: 100% !important;
}
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
min-height: 48px !important;
border: 1px solid var(--lv-input-border) !important;
border-radius: var(--lv-radius-md) !important;
background: var(--lv-card) !important;
box-shadow: var(--lv-shadow-sm) !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.select2-container--default .select2-selection--single {
padding: 12px 40px 12px 16px !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
line-height: 1.5 !important;
color: var(--lv-text) !important;
padding: 0 !important;
font-size: 0.9rem !important;
}
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: var(--lv-muted) !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100% !important;
right: 12px !important;
top: 0 !important;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
border-color: var(--lv-muted) transparent transparent transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
border-color: transparent transparent var(--lv-primary) transparent !important;
}
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
border-color: var(--lv-primary) !important;
box-shadow: var(--lv-shadow-glow) !important;
outline: none !important;
}
.select2-dropdown {
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
box-shadow: var(--lv-shadow-lg) !important;
overflow: hidden;
background: var(--lv-card) !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-sm) !important;
padding: 10px 14px !important;
font-size: 0.875rem !important;
color: var(--lv-text) !important;
outline: none !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus {
border-color: var(--lv-primary) !important;
box-shadow: var(--lv-shadow-glow) !important;
}
.select2-results__option {
padding: 10px 16px !important;
font-size: 0.875rem !important;
color: var(--lv-text) !important;
border-radius: 8px;
margin: 2px 4px;
}
.select2-container--default .select2-results__option--highlighted[aria-selected] {
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
}
.select2-container--default .select2-results__option[aria-selected="true"] {
background: var(--lv-primary) !important;
color: #fff !important;
}
.select2-container--default .select2-selection--multiple {
padding: 7px 10px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice {
margin: 3px !important;
border-radius: 999px !important;
background: var(--lv-primary-soft) !important;
border: 1px solid hsl(248 90% 62% / .2) !important;
color: var(--lv-primary) !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
padding: 2px 8px !important;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
color: var(--lv-primary) !important;
margin-right: 4px !important;
}
/* ─────────────────────────────────────────────────────────────
10. BUTTONS
───────────────────────────────────────────────────────────── */
.btn {
font-family: 'Inter', sans-serif !important;
font-weight: 600 !important;
font-size: 0.875rem !important;
border-radius: var(--lv-radius-md) !important;
padding: 11px 20px !important;
min-height: 44px !important;
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
cursor: pointer !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease !important;
white-space: nowrap;
letter-spacing: -0.01em;
}
/* Primary */
.btn-primary {
background: var(--lv-grad-primary) !important;
border: none !important;
color: #ffffff !important;
box-shadow: var(--lv-shadow-primary) !important;
}
.btn-primary:hover,
.btn-primary:focus {
opacity: 0.92 !important;
transform: translateY(-1px) !important;
box-shadow: 0 12px 28px hsl(248 90% 62% / .5) !important;
color: #ffffff !important;
}
/* Secondary / outline */
.btn-secondary {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
color: var(--lv-text) !important;
box-shadow: var(--lv-shadow-sm) !important;
}
.btn-secondary:hover,
.btn-secondary:focus {
background: var(--lv-primary-soft) !important;
border-color: hsl(248 90% 62% / .3) !important;
color: var(--lv-primary) !important;
transform: translateY(-1px) !important;
}
/* Outline primary */
.btn-outline-primary {
background: transparent !important;
border: 1px solid var(--lv-primary) !important;
color: var(--lv-primary) !important;
}
.btn-outline-primary:hover {
background: var(--lv-primary-soft) !important;
transform: translateY(-1px) !important;
}
/* Outline light */
.btn-outline-light {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
color: var(--lv-text) !important;
}
.btn-outline-light:hover {
border-color: hsl(248 90% 62% / .3) !important;
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
}
/* Danger */
.btn-danger {
background: var(--lv-danger) !important;
border-color: var(--lv-danger) !important;
color: #ffffff !important;
}
.btn-danger:hover {
background: hsl(358 80% 52%) !important;
border-color: hsl(358 80% 52%) !important;
transform: translateY(-1px) !important;
}
/* Small buttons */
.btn-sm {
font-size: 0.78rem !important;
padding: 7px 14px !important;
min-height: 34px !important;
border-radius: 10px !important;
}
/* Icon-only */
.btn.btn-icon {
padding: 10px !important;
min-height: 40px !important;
width: 40px !important;
}
/* ─────────────────────────────────────────────────────────────
11. TABLES
───────────────────────────────────────────────────────────── */
.table-responsive {
border-radius: var(--lv-radius-lg) !important;
border: 1px solid var(--lv-border) !important;
box-shadow: var(--lv-shadow-md) !important;
overflow: hidden;
}
.table {
margin-bottom: 0 !important;
color: var(--lv-text) !important;
border-collapse: separate !important;
border-spacing: 0 !important;
}
.table th {
background: hsl(230 40% 97%) !important;
color: var(--lv-muted) !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.1em !important;
text-transform: uppercase !important;
border-bottom: 1px solid var(--lv-border) !important;
border-top: none !important;
padding: 14px 16px !important;
white-space: nowrap;
}
.table td {
font-size: 0.875rem !important;
color: var(--lv-text) !important;
border-bottom: 1px solid var(--lv-border) !important;
border-top: none !important;
padding: 14px 16px !important;
vertical-align: middle !important;
background: var(--lv-card) !important;
}
.table tbody tr:last-child td {
border-bottom: none !important;
}
.table-hover tbody tr:hover > td {
background: var(--lv-primary-soft) !important;
color: var(--lv-text) !important;
}
.clickable-row {
cursor: pointer;
}
/* Consistent action column */
td.action-column {
white-space: nowrap !important;
min-width: 160px !important;
}
td.action-column .btn {
vertical-align: middle !important;
}
/* ─────────────────────────────────────────────────────────────
12. BADGES & PILLS
───────────────────────────────────────────────────────────── */
.badge {
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 5px 10px !important;
border-radius: 999px !important;
letter-spacing: 0.04em;
}
.bg-success { background: hsl(152 75% 42%) !important; color: #fff !important; }
.bg-danger { background: var(--lv-danger) !important; color: #fff !important; }
.bg-warning { background: var(--lv-warning) !important; color: hsl(232 38% 12%) !important; }
.bg-secondary { background: var(--lv-border) !important; color: var(--lv-muted) !important; }
.bg-primary { background: var(--lv-primary) !important; color: #fff !important; }
/* ─────────────────────────────────────────────────────────────
13. ALERTS
───────────────────────────────────────────────────────────── */
.alert {
border-radius: var(--lv-radius-lg) !important;
border: 1px solid transparent !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
padding: 14px 18px !important;
}
.alert-success {
background: hsl(152 75% 94%) !important;
border-color: hsl(152 75% 75%) !important;
color: hsl(152 75% 25%) !important;
}
.alert-danger {
background: hsl(358 80% 94%) !important;
border-color: hsl(358 80% 80%) !important;
color: hsl(358 80% 35%) !important;
}
.alert-warning {
background: hsl(38 95% 94%) !important;
border-color: hsl(38 95% 75%) !important;
color: hsl(38 95% 30%) !important;
}
.btn-close {
filter: none !important;
}
/* ─────────────────────────────────────────────────────────────
14. PAGINATION
───────────────────────────────────────────────────────────── */
.pagination {
gap: 4px;
}
.page-link {
border-radius: 10px !important;
padding: 8px 14px !important;
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
color: var(--lv-text) !important;
font-size: 0.875rem !important;
font-weight: 500 !important;
transition: var(--lv-transition) !important;
}
.page-link:hover {
background: var(--lv-primary-soft) !important;
border-color: hsl(248 90% 62% / .3) !important;
color: var(--lv-primary) !important;
}
.page-item.active .page-link {
background: var(--lv-grad-primary) !important;
border-color: transparent !important;
color: #ffffff !important;
box-shadow: var(--lv-shadow-primary) !important;
}
.page-item.disabled .page-link {
opacity: 0.4;
pointer-events: none;
}
/* ─────────────────────────────────────────────────────────────
15. MODALS
───────────────────────────────────────────────────────────── */
.modal-content {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-xl) !important;
box-shadow: var(--lv-shadow-lg) !important;
}
.modal-header {
border-bottom: 1px solid var(--lv-border) !important;
padding: 20px 24px !important;
}
.modal-title {
font-family: 'Plus Jakarta Sans', sans-serif !important;
font-weight: 700 !important;
font-size: 1.1rem !important;
color: var(--lv-text) !important;
}
.modal-footer {
border-top: 1px solid var(--lv-border) !important;
padding: 16px 24px !important;
gap: 10px;
}
.modal-body {
padding: 24px !important;
}
/* ─────────────────────────────────────────────────────────────
16. DASHBOARD SPECIFIC
───────────────────────────────────────────────────────────── */
.dashboard-container {
display: flex;
flex-direction: column;
gap: 24px;
}
.dashboard-kpi-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
}
.chart-container {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
padding: 24px !important;
box-shadow: var(--lv-shadow-md) !important;
height: auto !important;
}
.quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 14px;
margin-top: 0 !important;
}
.quick-action-btn {
background: var(--lv-card) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
box-shadow: var(--lv-shadow-sm) !important;
color: var(--lv-text) !important;
text-decoration: none !important;
padding: 18px 20px !important;
display: flex !important;
align-items: center !important;
gap: 14px !important;
font-weight: 600 !important;
font-size: 0.9rem !important;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease !important;
}
.quick-action-btn:hover {
transform: translateY(-2px) !important;
box-shadow: var(--lv-shadow-md) !important;
border-color: hsl(248 90% 62% / .35) !important;
color: var(--lv-text) !important;
text-decoration: none !important;
}
.quick-action-icon {
width: 44px !important;
height: 44px !important;
border-radius: 12px !important;
background: var(--lv-primary-soft) !important;
color: var(--lv-primary) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.2rem !important;
flex-shrink: 0;
}
.quick-action-text {
color: var(--lv-text) !important;
font-size: 0.9rem !important;
}
.quick-action-arrow {
color: var(--lv-muted);
margin-left: auto;
}
/* ─────────────────────────────────────────────────────────────
17. INDEX FILTER BAR
───────────────────────────────────────────────────────────── */
.admin-index-panel {
padding: 24px 28px !important;
}
.admin-index-filters {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
}
.admin-index-filters .index-search-group {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
}
.admin-index-filters .index-search-input {
flex: 0 1 420px;
max-width: 420px;
min-width: 200px;
}
.admin-index-filters .index-search-group .btn {
flex-shrink: 0;
}
/* ─────────────────────────────────────────────────────────────
18. MISC UTILITIES
───────────────────────────────────────────────────────────── */
.text-muted {
color: var(--lv-muted) !important;
}
.text-primary {
color: var(--lv-primary) !important;
}
.img-thumbnail,
.current-photo img {
border-radius: var(--lv-radius-lg) !important;
border-color: var(--lv-border) !important;
}
/* Form text helper */
.form-text {
color: var(--lv-muted) !important;
font-size: 0.78rem !important;
}
/* Error text */
.invalid-feedback,
.text-danger {
color: var(--lv-danger) !important;
font-size: 0.78rem !important;
font-weight: 500 !important;
}
/* ─────────────────────────────────────────────────────────────
19. WORKSPACE TYPES PAGE
───────────────────────────────────────────────────────────── */
.workspace-types-page .workspace-types-card {
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
overflow: hidden;
box-shadow: var(--lv-shadow-md) !important;
}
.workspace-types-page .workspace-types-header {
background: var(--lv-primary-soft) !important;
border-bottom: 1px solid hsl(248 90% 62% / .15) !important;
color: var(--lv-primary) !important;
padding: 14px 20px;
}
.workspace-types-page .workspace-types-toggle {
font-weight: 700;
color: var(--lv-primary) !important;
border: none !important;
background: transparent !important;
box-shadow: none !important;
min-height: unset !important;
padding: 0 !important;
}
.workspace-types-page .workspace-types-toggle-icon {
width: 26px;
height: 26px;
border-radius: 999px;
background: hsl(248 90% 62% / .15);
color: var(--lv-primary);
display: inline-flex;
align-items: center;
justify-content: center;
}
/* ─────────────────────────────────────────────────────────────
20. RESPONSIVE
───────────────────────────────────────────────────────────── */
@media (max-width: 1199.98px) {
.admin-top-search {
min-width: 260px !important;
}
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
.sidebar.collapsed {
width: 80px !important;
}
.sidebar.collapsed ~ .main-content {
margin-left: 80px !important;
}
.sidebar.collapsed .sidebar-header {
padding: 12px 8px !important;
gap: 8px !important;
}
.sidebar.collapsed .auth-logo-mark-1 {
display: none !important;
}
.sidebar.collapsed .sidebar-toggle {
display: inline-flex !important;
margin: 0 auto !important;
}
.sidebar.collapsed .sidebar-nav {
padding: 10px 0 !important;
}
.sidebar.collapsed .nav-item {
width: 48px !important;
height: 48px !important;
margin: 6px auto !important;
border-radius: 14px !important;
}
.sidebar.collapsed .nav-icon {
width: 24px !important;
height: 24px !important;
}
.sidebar.collapsed .nav-icon .lucide-react-icon,
.sidebar.collapsed .nav-icon svg {
width: 22px !important;
height: 22px !important;
}
}
@media (max-width: 1199.98px) {
.sidebar {
transform: translateX(-100%) !important;
width: var(--lv-sb-width) !important;
}
.sidebar.show {
transform: translateX(0) !important;
}
.sidebar.collapsed {
transform: translateX(-100%) !important;
}
.main-content,
.sidebar.collapsed ~ .main-content {
margin-left: 0 !important;
}
.top-header {
padding: 12px 16px !important;
}
.content-area {
padding: 4px 16px 40px !important;
}
.admin-page-hero {
flex-direction: column !important;
padding: 22px 20px !important;
}
.top-header-brand {
display: none;
}
.admin-top-search {
min-width: 0 !important;
flex: 1 !important;
}
.admin-body.sidebar-open .sidebar-backdrop {
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 767.98px) {
.top-header-right {
flex-wrap: wrap !important;
width: 100%;
justify-content: space-between;
}
.admin-page-title {
font-size: 1.75rem !important;
}
.admin-panel {
padding: 18px 16px !important;
}
.admin-form-footer,
.admin-page-actions {
justify-content: stretch !important;
}
.admin-form-footer .btn,
.admin-page-actions .btn {
width: 100% !important;
justify-content: center !important;
}
.quick-actions {
grid-template-columns: 1fr !important;
}
.dashboard-kpi-row {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 480px) {
.dashboard-kpi-row {
grid-template-columns: 1fr !important;
}
.profile-chip-meta {
display: none;
}
}
/* ─────────────────────────────────────────────────────────────
21. WORKSPACE CARD GRID
───────────────────────────────────────────────────────────── */
.workspace-card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
gap: 20px;
align-items: stretch;
}
.workspace-card {
background: hsl(0, 0%, 100%) !important;
border: 1px solid var(--lv-border) !important;
border-radius: var(--lv-radius-lg) !important;
box-shadow: var(--lv-shadow-md) !important;
padding: 22px 24px 18px !important;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
display: flex;
flex-direction: column;
gap: 12px;
min-height: 292px;
}
.workspace-card:hover {
transform: translateY(-3px) !important;
box-shadow: var(--lv-shadow-lg) !important;
border-color: hsl(248 90% 62% / .30) !important;
}
.workspace-card-top {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
min-height: 56px;
}
.workspace-card-titlewrap {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
flex: 1;
}
.workspace-card-icon {
width: 56px;
height: 56px;
border-radius: 15px;
background: linear-gradient(135deg, hsl(252 88% 66%), hsl(262 88% 58%));
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-shadow: 0 14px 26px hsl(252 88% 58% / .28);
}
.workspace-status-badge {
font-size: 0.68rem !important;
font-weight: 800 !important;
padding: 6px 12px !important;
border-radius: 999px !important;
letter-spacing: 0.08em;
text-transform: uppercase;
flex-shrink: 0;
display: inline-flex;
align-items: center;
gap: 6px;
}
.workspace-status-badge::before {
content: "";
width: 7px;
height: 7px;
border-radius: 999px;
background: currentColor;
}
.workspace-status-badge.open { background: hsl(152 75% 90%); color: hsl(152 75% 28%); }
.workspace-status-badge.closed { background: hsl(358 80% 93%); color: hsl(358 80% 40%); }
.workspace-status-badge.pending { background: hsl(38 95% 90%); color: hsl(38 95% 30%); }
.workspace-status-badge.maintenance { background: hsl(38 95% 90%); color: hsl(38 95% 30%); }
.workspace-card-address {
font-size: 0.88rem;
color: var(--lv-muted);
line-height: 1.5;
min-height: 24px;
max-height: 42px;
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin-top: 2px;
}
.workspace-seat-section {
margin: 2px 0 0 !important;
min-height: 34px;
}
.workspace-seat-row {
margin-bottom: 7px !important;
}
.workspace-seat-label {
color: var(--lv-muted) !important;
}
.workspace-seat-label .lucide-react-icon {
color: var(--lv-primary);
}
.workspace-card-statline {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.workspace-card-meta {
display: flex;
flex-wrap: wrap;
gap: 5px;
align-content: flex-start;
min-height: 26px;
max-height: 58px;
overflow: hidden;
}
.workspace-pill {
display: inline-flex;
align-items: center;
min-height: 25px;
padding: 3px 9px;
border-radius: 999px;
background: var(--lv-primary-soft);
color: var(--lv-primary);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.02em;
line-height: 1.1;
max-width: 100%;
}
.workspace-card-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding-top: 14px;
border-top: 1px solid var(--lv-border);
margin-top: auto;
min-height: 52px;
}
.workspace-manager-icon {
width: 36px;
height: 36px;
border-radius: 10px;
background: var(--lv-primary-soft);
color: var(--lv-primary);
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.workspace-mini-actions {
display: flex;
gap: 6px;
}
.workspace-mini-action {
width: 38px;
height: 38px;
border-radius: 10px;
background: var(--lv-card);
border: 1px solid var(--lv-border);
color: var(--lv-muted);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.9rem;
text-decoration: none;
transition: var(--lv-transition);
}
.workspace-mini-action:hover {
background: var(--lv-primary-soft);
border-color: hsl(248 90% 62% / .3);
color: var(--lv-primary);
text-decoration: none;
}
/* ─────────────────────────────────────────────────────────────
22. FILTER CHIPS (workspace search bar)
───────────────────────────────────────────────────────────── */
.workspace-filters-card {
padding: 18px 18px !important;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
border-radius: 18px !important;
}
.workspace-search-shell {
position: relative;
display: flex;
align-items: center;
flex: 1;
min-width: 220px;
}
.workspace-search-icon {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
color: var(--lv-muted);
pointer-events: none;
z-index: 2;
}
.workspace-search-input {
padding-left: 48px !important;
flex: 1;
height: 56px !important;
border-radius: var(--lv-radius-md) !important;
box-shadow: none !important;
}
.filter-chip-group {
display: flex;
gap: 8px;
flex-wrap: wrap;
padding: 6px;
border-radius: 999px;
background: hsl(232 25% 94%);
}
.filter-chip {
display: inline-flex;
align-items: center;
min-height: 42px;
padding: 0 18px;
border-radius: 999px;
border: 1px solid transparent;
background: var(--lv-card);
color: var(--lv-muted);
font-size: 0.84rem;
font-weight: 700;
text-decoration: none;
transition: var(--lv-transition);
cursor: pointer;
white-space: nowrap;
}
.filter-chip:hover {
background: #ffffff;
border-color: hsl(248 90% 62% / .3);
color: var(--lv-primary);
text-decoration: none;
}
.filter-chip.active {
background: var(--lv-grad-primary);
border-color: transparent;
color: #ffffff;
box-shadow: var(--lv-shadow-primary);
}
/* ─────────────────────────────────────────────────────────────
23. COMPANIES INDEX — TYPE FILTER BUTTON GROUP
───────────────────────────────────────────────────────────── */
.btn-group .btn-primary,
.btn-group .btn-outline-primary {
border-radius: 999px !important;
}
.btn-group {
gap: 6px;
flex-wrap: wrap;
}
.btn-group > .btn + .btn {
margin-left: 0 !important;
border-radius: 999px !important;
}
/* ─────────────────────────────────────────────────────────────
24. EMPTY STATES
───────────────────────────────────────────────────────────── */
.empty-state {
text-align: center;
padding: 60px 24px;
}
.empty-state i {
font-size: 3rem;
color: var(--lv-muted);
opacity: 0.5;
display: block;
margin-bottom: 16px;
}
.empty-state p {
color: var(--lv-muted);
font-size: 0.95rem;
}
/* ─────────────────────────────────────────────────────────────
25. SHOW PAGE DETAIL ROWS
───────────────────────────────────────────────────────────── */
.detail-row {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 12px 0;
border-bottom: 1px solid var(--lv-border);
}
.detail-row:last-child {
border-bottom: none;
}
.detail-label {
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--lv-muted);
min-width: 140px;
}
.detail-value {
font-size: 0.9rem;
font-weight: 500;
color: var(--lv-text);
flex: 1;
}
/* ─────────────────────────────────────────────────────────────
26. FILE INPUT CUSTOM LOOK
───────────────────────────────────────────────────────────── */
input[type="file"].form-control {
padding: 10px 16px !important;
cursor: pointer;
}
input[type="file"].form-control::file-selector-button {
font-family: 'Inter', sans-serif;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.02em;
color: var(--lv-primary);
background: var(--lv-primary-soft);
border: 1px solid hsl(248 90% 62% / .25);
border-radius: 8px;
padding: 5px 12px;
margin-right: 12px;
cursor: pointer;
transition: var(--lv-transition);
}
input[type="file"].form-control::file-selector-button:hover {
background: hsl(248 90% 62% / .2);
}
/* ─────────────────────────────────────────────────────────────
27. SHOW PAGE BREADCRUMB HEADER
───────────────────────────────────────────────────────────── */
.show-page-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 20px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.show-page-header .btn-group-actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
/* ─────────────────────────────────────────────────────────────
28. OFFICE / VISITOR ENQUIRY INDEX
───────────────────────────────────────────────────────────── */
.enquiry-status-new { background: hsl(248 90% 92%); color: var(--lv-primary); }
.enquiry-status-open { background: hsl(38 95% 92%); color: hsl(38 95% 30%); }
.enquiry-status-closed { background: hsl(152 75% 90%); color: hsl(152 75% 28%); }
.enquiry-status-pending { background: hsl(232 25% 90%); color: var(--lv-muted); }
/* ─────────────────────────────────────────────────────────────
29. BOOKING SHOW / EDIT SPECIFIC
───────────────────────────────────────────────────────────── */
.booking-edit-form {
width: 100%;
}
@media (max-width: 767.98px) {
.workspace-card-grid {
grid-template-columns: 1fr !important;
gap: 16px;
}
.workspace-card {
padding: 20px !important;
height: auto;
min-height: 0;
gap: 13px;
}
.workspace-card-icon {
width: 50px;
height: 50px;
border-radius: 14px;
}
.workspace-card-top {
min-height: 50px;
}
.workspace-card-address {
min-height: auto;
max-height: none;
}
.workspace-card-meta {
min-height: 0;
max-height: none;
}
.workspace-card-top,
.workspace-card-footer {
align-items: flex-start;
}
.workspace-card-footer {
flex-direction: column;
}
.workspace-filters-card {
flex-direction: column;
align-items: stretch;
}
.workspace-search-shell {
min-width: 0;
}
.filter-chip-group {
justify-content: flex-start;
width: 100%;
overflow-x: auto;
flex-wrap: nowrap;
scrollbar-width: none;
}
.filter-chip-group::-webkit-scrollbar {
display: none;
}
}
@media (min-width: 768px) and (max-width: 1299.98px) {
.workspace-card-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (min-width: 1300px) {
.workspace-card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
.float-field {
position: relative;
}
/* The actual inputs */
.float-field > .form-control,
.float-field > .form-select {
width: 100% !important;
border-radius: var(--lv-radius-md) !important;
border: 1px solid var(--lv-input-border) !important;
background: var(--lv-card) !important;
padding: 20px 16px 8px 16px !important;
font-size: 0.9rem !important;
color: var(--lv-text) !important;
min-height: 56px !important;
outline: none !important;
transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
box-shadow: var(--lv-shadow-sm) !important;
}
.float-field > textarea.form-control {
padding-top: 24px !important;
padding-bottom: 10px !important;
min-height: 110px !important;
resize: vertical;
}
.float-field > .form-control:focus,
.float-field > .form-select:focus {
border-color: var(--lv-primary) !important;
box-shadow: var(--lv-shadow-glow), var(--lv-shadow-sm) !important;
background: #fff !important;
outline: none !important;
}
/* The floating label */
.float-field > label {
position: absolute;
left: 16px;
top: 50%;
transform: translateY(-50%);
font-size: 0.88rem;
color: var(--lv-muted);
pointer-events: none;
transition: all 0.18s cubic-bezier(0.22, 1, 0.36, 1);
font-weight: 500;
letter-spacing: 0;
text-transform: none;
white-space: nowrap;
margin: 0;
}
/* Textarea label starts at top */
.float-field > textarea ~ label {
top: 18px;
transform: none;
}
/* Label floats up when input is focused OR has value (via :not(:placeholder-shown)) */
.float-field > .form-control:focus ~ label,
.float-field > .form-control:not(:placeholder-shown) ~ label,
.float-field > .form-select:focus ~ label,
.float-field > .form-select:not([value=""]):valid ~ label,
.float-field.has-value > label,
.float-field.is-focused > label {
top: 8px !important;
transform: translateY(0) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--lv-primary) !important;
}
/* Textarea floated label */
.float-field > textarea.form-control:focus ~ label,
.float-field > textarea.form-control:not(:placeholder-shown) ~ label {
top: 8px !important;
transform: translateY(0) !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
color: var(--lv-primary) !important;
}
/* ── Icon inside float-field ── */
.float-field-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--lv-muted);
font-size: 0.95rem;
pointer-events: none;
z-index: 2;
display: flex;
align-items: center;
}
.float-field.has-icon > .form-control,
.float-field.has-icon > .form-select {
padding-left: 44px !important;
}
.float-field.has-icon > label {
left: 44px;
}
/* ── Input group prefix icon (for non-floating inputs) ── */
.input-icon-wrap {
position: relative;
display: flex;
align-items: center;
}
.input-icon-wrap .input-prefix-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: var(--lv-muted);
font-size: 0.95rem;
pointer-events: none;
z-index: 2;
}
.input-icon-wrap .form-control,
.input-icon-wrap .form-select {
padding-left: 42px !important;
}
.office-requirements-row {
align-items: flex-start;
}
.office-requirements-row .form-label {
min-height: 18px;
margin-bottom: 8px !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple {
min-height: 48px !important;
display: flex !important;
align-items: center !important;
padding: 6px 38px 6px 10px !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple .select2-selection__rendered {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 4px !important;
width: 100% !important;
padding: 0 !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple .select2-selection__choice {
margin: 0 !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple .select2-search--inline {
flex: 1 1 160px !important;
min-width: 150px !important;
margin: 0 !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple .select2-search__field {
width: 100% !important;
min-width: 150px !important;
height: 34px !important;
margin: 0 !important;
padding: 0 10px !important;
border: 1px solid var(--lv-input-border) !important;
border-radius: 10px !important;
background: #fff !important;
color: var(--lv-text) !important;
font-size: 0.9rem !important;
line-height: 34px !important;
text-align: left !important;
box-shadow: none !important;
outline: none !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple .select2-search__field:focus {
border-color: #6200EA !important;
box-shadow: 0 0 0 3px rgb(98 0 234 / 0.12) !important;
}
.office-requirements-row .select2-container--default .select2-selection--multiple .select2-search__field::placeholder {
color: var(--lv-muted) !important;
opacity: 0.75;
}
.office-requirements-row .select2-dropdown {
border-color: var(--lv-border) !important;
border-radius: 14px !important;
box-shadow: var(--lv-shadow-lg) !important;
overflow: hidden;
}
.office-requirements-row .select2-results__option {
padding: 10px 14px !important;
font-size: 0.9rem !important;
line-height: 1.35 !important;
}
/* ═══════════════════════════════════════════════════════════════
31. SECTION CARD (form field grouping — from SR Next Lovable)
═══════════════════════════════════════════════════════════════ */
/*
* Usage in ERB:
*
*
*
* ... float-fields
*
*