/* ============================================================ ENTO THEME — Sprinto-inspired Activated when: ============================================================ */ /* --- CSS Variables --- */ [data-theme="ento"] { /* Primary — corporate blue */ --ento-primary: #2563eb; --ento-primary-dark: #1d4ed8; --ento-primary-light: #3b82f6; --ento-primary-bg: #eff6ff; /* Sidebar */ --ento-sidebar-bg: #0d1117; --ento-sidebar-hover: rgba(255, 255, 255, 0.06); --ento-sidebar-active: #2563eb; /* Content */ --ento-body-bg: #f4f6f8; --ento-card-bg: #ffffff; /* Borders & shadows */ --ento-border: #e2e8f0; --ento-shadow-sm: 0 1px 3px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .04); --ento-shadow-md: 0 4px 12px rgba(0, 0, 0, .1); --ento-shadow-lg: 0 8px 24px rgba(0, 0, 0, .12); --ento-shadow-xl: 0 20px 40px rgba(0, 0, 0, .15); /* Text */ --ento-text-primary: #0f172a; --ento-text-secondary: #475569; --ento-text-tertiary: #94a3b8; } /* ── Body & layout ── */ [data-theme="ento"] body { background-color: var(--ento-body-bg) !important; font-family: 'Inter', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important; color: var(--ento-text-primary) !important; } /* ── Spacing — restore natural Tailwind spacing ── */ [data-theme="ento"] .p-4 { padding: 1rem !important; } [data-theme="ento"] .p-5 { padding: 1.25rem !important; } [data-theme="ento"] .p-6 { padding: 1.5rem !important; } [data-theme="ento"] .p-8 { padding: 2rem !important; } [data-theme="ento"] .px-4 { padding-left: 1rem !important; padding-right: 1rem !important; } [data-theme="ento"] .px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } [data-theme="ento"] .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; } [data-theme="ento"] .py-3 { padding-top: .75rem !important; padding-bottom: .75rem !important; } [data-theme="ento"] .py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; } [data-theme="ento"] .py-6 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; } [data-theme="ento"] .pt-4 { padding-top: 1rem !important; } [data-theme="ento"] .pt-6 { padding-top: 1.5rem !important; } [data-theme="ento"] .pb-4 { padding-bottom: 1rem !important; } [data-theme="ento"] .pb-6 { padding-bottom: 1.5rem !important; } [data-theme="ento"] .gap-2 { gap: 0.5rem !important; } [data-theme="ento"] .gap-3 { gap: 0.75rem !important; } [data-theme="ento"] .gap-4 { gap: 1rem !important; } [data-theme="ento"] .gap-6 { gap: 1.5rem !important; } [data-theme="ento"] .gap-8 { gap: 2rem !important; } [data-theme="ento"] .space-y-2>*+* { margin-top: 0.5rem !important; } [data-theme="ento"] .space-y-3>*+* { margin-top: 0.75rem !important; } [data-theme="ento"] .space-y-4>*+* { margin-top: 1rem !important; } [data-theme="ento"] .space-y-6>*+* { margin-top: 1.5rem !important; } /* ── Border Radius — clean but not too round ── */ [data-theme="ento"] .rounded { border-radius: 0.25rem !important; } [data-theme="ento"] .rounded-md { border-radius: 0.375rem !important; } [data-theme="ento"] .rounded-lg { border-radius: 0.5rem !important; } [data-theme="ento"] .rounded-xl { border-radius: 0.75rem !important; } [data-theme="ento"] .rounded-2xl { border-radius: 1rem !important; } [data-theme="ento"] .rounded-3xl { border-radius: 1.5rem !important; } [data-theme="ento"] .rounded-full { border-radius: 9999px !important; } /* ── Cards ── */ [data-theme="ento"] .bg-white { border-radius: 0.625rem !important; border: 1px solid var(--ento-border) !important; } /* ── Shadows ── */ [data-theme="ento"] .shadow-sm { box-shadow: var(--ento-shadow-sm) !important; } [data-theme="ento"] .shadow { box-shadow: var(--ento-shadow-sm) !important; } [data-theme="ento"] .shadow-md { box-shadow: var(--ento-shadow-md) !important; } [data-theme="ento"] .shadow-lg { box-shadow: var(--ento-shadow-lg) !important; } [data-theme="ento"] .shadow-xl { box-shadow: var(--ento-shadow-xl) !important; } [data-theme="ento"] .shadow-2xl { box-shadow: var(--ento-shadow-xl) !important; } [data-theme="ento"] .shadow-sm:hover, [data-theme="ento"] .shadow:hover { box-shadow: var(--ento-shadow-md) !important; } /* ── Gradients — re-enable in Ento mode ── */ /* Gradient stop variables */ [data-theme="ento"] .from-blue-600 { --tw-gradient-from: #2563eb !important; } [data-theme="ento"] .from-blue-700 { --tw-gradient-from: #1d4ed8 !important; } [data-theme="ento"] .via-blue-700 { --tw-gradient-via: #1d4ed8 !important; } [data-theme="ento"] .to-indigo-700 { --tw-gradient-to: #4338ca !important; } [data-theme="ento"] .from-indigo-600 { --tw-gradient-from: #4f46e5 !important; } [data-theme="ento"] .to-blue-700 { --tw-gradient-to: #1d4ed8 !important; } [data-theme="ento"] .to-blue-800 { --tw-gradient-to: #1e40af !important; } [data-theme="ento"] .from-green-500 { --tw-gradient-from: #22c55e !important; } [data-theme="ento"] .to-emerald-600 { --tw-gradient-to: #059669 !important; } [data-theme="ento"] div.bg-gradient-to-r { background-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="ento"] div.bg-gradient-to-br { background-image: linear-gradient(to bottom right, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="ento"] div.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="ento"] div.bg-gradient-to-l { background-image: linear-gradient(to left, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } [data-theme="ento"] div.bg-gradient-to-t { background-image: linear-gradient(to top, var(--tw-gradient-from), var(--tw-gradient-via, var(--tw-gradient-from)), var(--tw-gradient-to)) !important; } /* ── Primary Colour — emerald green ── */ [data-theme="ento"] .bg-blue-600, [data-theme="ento"] .bg-blue-500 { background-color: var(--ento-primary) !important; } [data-theme="ento"] .bg-blue-600:hover, [data-theme="ento"] .bg-blue-500:hover { background-color: var(--ento-primary-dark) !important; } [data-theme="ento"] .text-blue-600, [data-theme="ento"] .text-blue-700, [data-theme="ento"] .text-blue-800 { color: var(--ento-primary) !important; } [data-theme="ento"] .border-blue-600, [data-theme="ento"] .border-blue-500 { border-color: var(--ento-primary) !important; } [data-theme="ento"] .bg-blue-50, [data-theme="ento"] .bg-blue-100 { background-color: var(--ento-primary-bg) !important; } [data-theme="ento"] .ring-blue-500, [data-theme="ento"] .focus\:ring-blue-500:focus { --tw-ring-color: var(--ento-primary) !important; } /* ── Buttons ── */ [data-theme="ento"] button, [data-theme="ento"] .btn, [data-theme="ento"] [role="button"] { border-radius: 0.375rem !important; font-size: 14px !important; font-weight: 500 !important; } /* ── Inputs / Forms ── */ [data-theme="ento"] input[type="text"], [data-theme="ento"] input[type="email"], [data-theme="ento"] input[type="password"], [data-theme="ento"] input[type="number"], [data-theme="ento"] input[type="date"], [data-theme="ento"] input[type="search"], [data-theme="ento"] input[type="url"], [data-theme="ento"] input[type="tel"], [data-theme="ento"] textarea, [data-theme="ento"] select { border-radius: 0.375rem !important; font-size: 14px !important; padding: 8px 12px !important; min-height: 38px !important; border: 1px solid var(--ento-border) !important; background-color: #ffffff !important; } [data-theme="ento"] input:focus, [data-theme="ento"] textarea:focus, [data-theme="ento"] select:focus { border-color: var(--ento-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .15) !important; } /* Preserve icon-padding for search/icon inputs */ [data-theme="ento"] input.pl-8, [data-theme="ento"] .pl-8 input { padding-left: 2rem !important; } [data-theme="ento"] input.pl-9, [data-theme="ento"] .pl-9 input { padding-left: 2.25rem !important; } [data-theme="ento"] input.pl-10, [data-theme="ento"] .pl-10 input { padding-left: 2.5rem !important; } [data-theme="ento"] input.pl-11, [data-theme="ento"] .pl-11 input { padding-left: 2.75rem !important; } [data-theme="ento"] input.pl-12, [data-theme="ento"] .pl-12 input { padding-left: 3rem !important; } [data-theme="ento"] input.pr-8, [data-theme="ento"] .pr-8 input { padding-right: 2rem !important; } [data-theme="ento"] input.pr-10, [data-theme="ento"] .pr-10 input { padding-right: 2.5rem !important; } [data-theme="ento"] input.pr-12, [data-theme="ento"] .pr-12 input { padding-right: 3rem !important; } /* ── Labels ── */ [data-theme="ento"] label { font-size: 14px !important; font-weight: 500 !important; color: var(--ento-text-primary) !important; margin-bottom: 4px !important; } /* ── Sidebar — near-black Ento style ── */ [data-theme="ento"] .o365-sidebar { background-color: var(--ento-sidebar-bg) !important; width: 220px !important; border-right: none !important; box-shadow: 2px 0 8px rgba(0, 0, 0, .25) !important; } [data-theme="ento"] .o365-main { margin-left: 220px !important; width: calc(100% - 220px) !important; background-color: var(--ento-body-bg) !important; } [data-theme="ento"] .o365-content { padding: 20px 24px !important; } [data-theme="ento"] .o365-logo-area { padding: 16px 14px 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; } [data-theme="ento"] .o365-nav-item { border-radius: 6px !important; padding: 6px 10px !important; font-size: 13px !important; min-height: 34px !important; margin-bottom: 2px !important; color: rgba(255, 255, 255, 0.7) !important; font-weight: 500 !important; } [data-theme="ento"] .o365-nav-item.active { background-color: var(--ento-sidebar-active) !important; color: #ffffff !important; font-weight: 600 !important; box-shadow: 0 2px 8px rgba(37, 99, 235, .4) !important; } [data-theme="ento"] .o365-nav-item:hover:not(.active) { background-color: var(--ento-sidebar-hover) !important; color: rgba(255, 255, 255, 0.9) !important; } [data-theme="ento"] .o365-nav-section-title { padding: 12px 10px 4px !important; font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgba(255, 255, 255, 0.3) !important; } [data-theme="ento"] .o365-user-profile { padding: 12px !important; border-top: 1px solid rgba(255, 255, 255, 0.06) !important; } [data-theme="ento"] .o365-user-avatar { border-color: var(--ento-primary) !important; } /* ── Header ── */ [data-theme="ento"] .o365-header { height: 52px !important; background: #ffffff !important; border-bottom: 1px solid var(--ento-border) !important; box-shadow: 0 1px 4px rgba(0, 0, 0, .06) !important; } [data-theme="ento"] .o365-header h2 { font-size: 15px !important; font-weight: 600 !important; color: var(--ento-text-primary) !important; } [data-theme="ento"] .o365-search { border-radius: 6px !important; height: 34px !important; border-color: var(--ento-border) !important; background: #f8fafc !important; width: 260px !important; } [data-theme="ento"] .o365-search:focus-within { border-color: var(--ento-primary) !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, .1) !important; background: #fff !important; } [data-theme="ento"] .o365-bell { border-radius: 6px !important; } [data-theme="ento"] .o365-bell:hover { background-color: var(--ento-primary-bg) !important; } [data-theme="ento"] .o365-week-badge { background: var(--ento-primary-bg) !important; color: var(--ento-primary) !important; border-color: #bfdbfe !important; border-radius: 4px !important; } [data-theme="ento"] .o365-logout { border-radius: 4px !important; } /* ── Tables ── */ [data-theme="ento"] th { font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.07em !important; background-color: #f8fafc !important; border-bottom: 1px solid var(--ento-border) !important; color: var(--ento-text-secondary) !important; padding: 10px 14px !important; } [data-theme="ento"] td { padding: 10px 14px !important; border-bottom: 1px solid #f1f5f9 !important; color: var(--ento-text-primary) !important; font-size: 14px !important; } [data-theme="ento"] tr:hover td { background-color: #f8fafc !important; } /* ── Modals ── */ [data-theme="ento"] .fixed.inset-0>div, [data-theme="ento"] .fixed.inset-0 .bg-white { border-radius: 0.75rem !important; box-shadow: var(--ento-shadow-xl) !important; } [data-theme="ento"] .fixed.inset-0 { backdrop-filter: blur(4px) !important; } /* ── Card padding overrides ── */ [data-theme="ento"] .bg-white.p-5, [data-theme="ento"] .bg-white.p-6 { padding: 1.25rem !important; } /* ── Scrollbar ── */ [data-theme="ento"] ::-webkit-scrollbar-thumb { background: #cbd5e1 !important; border-radius: 3px !important; } [data-theme="ento"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8 !important; } /* ── Status colours — keep blue for success ── */ [data-theme="ento"] .text-green-600, [data-theme="ento"] .text-green-700 { color: #059669 !important; } [data-theme="ento"] .bg-green-600 { background-color: #059669 !important; } [data-theme="ento"] .bg-green-50, [data-theme="ento"] .bg-green-100 { background-color: #ecfdf5 !important; } /* ── Sidebar section collapse ── */ [data-theme="ento"] .o365-section-content.expanded { max-height: 2500px !important; } /* ── App Switcher ── */ [data-theme="ento"] .app-switcher-button { border-radius: 6px !important; } [data-theme="ento"] .app-switcher-button:hover { background-color: var(--ento-primary-bg) !important; } [data-theme="ento"] .app-switcher-panel { border-radius: 10px !important; box-shadow: var(--ento-shadow-xl) !important; } /* ── Transitions ── */ [data-theme="ento"] .transition-all { transition-duration: 150ms !important; }