@import "tailwindcss"; @theme { --color-erp-bg: #f2f0ec; --color-erp-surface: #fafaf9; --color-erp-surface-soft: #f5f4f1; --color-erp-surface-raised: #ffffff; --color-erp-border: #e4e2dc; --color-erp-border-strong: #d6d3cc; --color-erp-text: #1c1917; --color-erp-text-soft: #44403c; --color-erp-muted: #78716c; --color-erp-muted-2: #a8a29e; --color-erp-input: #fafaf9; --color-erp-input-text: #1c1917; --color-erp-input-placeholder: #a8a29e; --color-erp-blue: #2563eb; --color-erp-link: #0b65b9; --color-brand-primary: #D4A853; --color-brand-primary-hover: #C8953F; --color-brand-primary-active: #B8842D; --color-success-bg: #DCFCE7; --color-success-text: #15803D; --color-warning-bg: #FEF3C7; --color-warning-text: #B45309; --color-danger-bg: #FEE2E2; --color-danger-text: #DC2626; --color-info-bg: #DBEAFE; --color-info-text: #2563EB; } @layer base { select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } input[type="number"] { appearance: textfield; -moz-appearance: textfield; } input[type="number"]::-webkit-inner-spin-button, input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } } :root { --theme-input-bg: #fafaf9; --theme-input-border: #d6d3cc; --theme-text-primary: #1c1917; --theme-text-secondary: #475569; --theme-text-muted: #64748b; --theme-text-placeholder: #a8a29e; --theme-input-hover-bg: #f5f4f1; --theme-input-border-hover: #a8a29e; --theme-input-border-focus: #d4a853; --theme-input-disabled-bg: #e7e5e0; --theme-input-active-bg: #f5f2eb; --theme-bg-card: #fafaf9; --theme-dropdown-selected: #f5f2eb; --theme-focus-ring: #d4a853; --global-dd-bg: #fafaf9; --global-dd-border: #d6d3cc; --global-dd-text: #44403c; --global-dd-focus-border: #d4a853; --global-dd-focus-shadow: 0 0 0 3px rgba(212, 168, 83, 0.15); --global-dd-menu-bg: #fafaf9; --global-dd-menu-border: #e4e2dc; --global-dd-hover-bg: #f5f4f1; --global-dd-hover-text: #1c1917; } html.dark { --theme-input-bg: #0f1d35; --theme-input-border: #334155; --theme-text-primary: #f8fafc; --theme-text-secondary: #cbd5e1; --theme-text-muted: #94a3b8; --theme-text-placeholder: #64748b; --theme-input-hover-bg: #1a2d45; --theme-input-border-hover: #475569; --theme-input-border-focus: #60a5fa; --theme-input-disabled-bg: #1a2d45; --theme-input-active-bg: #1a2d45; --theme-bg-card: #1e293b; --theme-dropdown-selected: #24324a; --theme-focus-ring: #60a5fa; --global-dd-bg: #1e293b; --global-dd-border: #334155; --global-dd-text: #e2e8f0; --global-dd-focus-border: #60a5fa; --global-dd-focus-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15); --global-dd-menu-bg: #1e293b; --global-dd-menu-border: #334155; --global-dd-hover-bg: #24324a; --global-dd-hover-text: #f8fafc; } @layer components { /* ===== GLOBAL UTILITIES & BASE START ===== */ *{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}body{margin:0;min-height:100vh;background:#f1f5f9;color:#0f172a}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}table{border-collapse:collapse}input,select,textarea{border:1px solid var(--theme-input-border,#cbd5e1);padding:.55rem .75rem;background:var(--theme-input-bg,#fff);color:var(--theme-text-primary,#0f172a);border-radius:.4rem}select{appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer}select::-ms-expand{display:none}input:focus,select:focus,textarea:focus{outline:2px solid var(--theme-input-border-focus,#bae6fd);border-color:var(--theme-input-border-focus,#0284c7);box-shadow:0 0 0 3px rgba(56,189,248,.12)}.min-h-screen{min-height:100vh}.grid{display:grid}.flex{display:flex}.block{display:block}.inline{display:inline}.hidden{display:none}.min-w-0{min-width:0}.w-full{width:100%}.max-w-md{max-width:28rem}.max-w-2xl{max-width:42rem}.min-w-full{min-width:100%}.h-full{height:100%}.sticky{position:sticky}.top-0{top:0}.z-10{z-index:10}.place-items-center{place-items:center}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.text-left{text-align:left}.text-right{text-align:right}.overflow-x-auto{overflow-x:auto}.mt-auto{margin-top:auto}.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mb-4{margin-bottom:1rem}.mb-5{margin-bottom:1.25rem}.mb-6{margin-bottom:1.5rem}.p-3{padding:.75rem}.p-4{padding:1rem}.p-5{padding:1.25rem}.p-6{padding:1.5rem}.px-3{padding-left:.75rem;padding-right:.75rem}.px-4{padding-left:1rem;padding-right:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.py-2{padding-top:.5rem;padding-bottom:.5rem}.py-3{padding-top:.75rem;padding-bottom:.75rem}.py-4{padding-top:1rem;padding-bottom:1rem}.gap-1{gap:.25rem}.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-5{gap:1.25rem}.rounded-md{border-radius:.375rem}.rounded-lg{border-radius:.5rem}.border{border-width:1px;border-style:solid}.border-t{border-top:1px solid}.border-b{border-bottom:1px solid}.border-slate-200{border-color:#e2e8f0}.border-slate-300{border-color:#cbd5e1}.border-white\/10{border-color:rgba(255,255,255,.1)}.bg-white{background:#fff}.bg-white\/95{background:rgba(255,255,255,.95)}.bg-white\/5{background:rgba(255,255,255,.05)}.bg-slate-100{background:#f1f5f9}.bg-slate-950{background:#020617}.bg-amber-500{background:#f59e0b}.bg-emerald-50{background:#ecfdf5}.border-emerald-200{border-color:#a7f3d0}.text-white{color:#fff}.text-slate-950{color:#020617}.text-slate-900{color:#0f172a}.text-slate-600{color:#475569}.text-slate-500{color:#64748b}.text-slate-300{color:#cbd5e1}.text-slate-200{color:#e2e8f0}.text-sky-700{color:#0369a1}.text-red-600{color:#dc2626}.text-emerald-700{color:#047857}.text-emerald-800{color:#065f46}.text-xs{font-size:.75rem;line-height:1rem}.text-sm{font-size:.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-lg{font-size:1.125rem;line-height:1.75rem}.text-xl{font-size:1.25rem;line-height:1.75rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-medium{font-weight:500}.font-semibold{font-weight:600}.font-bold{font-weight:700}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.tracking-wide{letter-spacing:.025em}.shadow-sm{box-shadow:0 1px 2px rgba(15,23,42,.08)}.divide-y>*+*{border-top:1px solid}.divide-slate-100>*+*{border-color:#f1f5f9}.divide-slate-200>*+*{border-color:#e2e8f0}.hover\:bg-white\/10:hover{background:rgba(255,255,255,.1)}.w-fit{width:fit-content} @media (min-width:768px){.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.md\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.md\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}} @media (min-width:1024px){.lg\:grid{display:grid}.lg\:grid-cols-\[17rem_1fr\]{grid-template-columns:17rem 1fr}.lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.lg\:col-span-2{grid-column:span 2/span 2}} @media (min-width:1280px){.xl\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.xl\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.xl\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.xl\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}.xl\:grid-cols-\[24rem_1fr\]{grid-template-columns:24rem 1fr}} .grid-cols-1{grid-template-columns:repeat(1,minmax(0,1fr))} .grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))} /* Dashboard stats grid (8 cards: 4 per row on desktop, 2 on tablet, 1 on mobile) */ .dash-stats-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:1rem!important;width:100%!important;min-width:0!important} .dash-stats-grid>.stat-card{width:auto!important;max-width:100%!important;min-width:0!important;align-self:stretch!important} @media (max-width:1279px){.dash-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}} @media (max-width:639px){.dash-stats-grid{grid-template-columns:minmax(0,1fr)!important}} .metric-red{background:#fee2e2;color:#dc2626}.metric-orange{background:#ffedd5;color:#ea580c}.metric-teal{background:#ccfbf1;color:#0d9488}.metric-indigo{background:#e0e7ff;color:#4f46e5}.dark .metric-red{background:rgba(220,38,38,.18)!important;color:#fca5a5!important}.dark .metric-orange{background:rgba(234,88,12,.18)!important;color:#fdba74!important}.dark .metric-teal{background:rgba(13,148,136,.18)!important;color:#5eead4!important}.dark .metric-indigo{background:rgba(79,70,229,.18)!important;color:#a5b4fc!important} .stat-card{background:var(--erp-surface,#fff);border:1px solid var(--erp-border,#e5e7eb);border-radius:.55rem;box-shadow:0 3px 12px rgba(15,23,42,.08);padding:1rem;display:flex;align-items:center;gap:1rem;min-width:0;min-height:6.6rem}.stat-card .metric-icon{width:3.4rem;height:3.4rem;border-radius:.55rem}.stat-card .stat-body{flex:1;min-width:0;display:grid;gap:.2rem}.stat-card .stat-label{font-size:.72rem;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:0}.stat-card .stat-value{font-size:1.5rem;font-weight:800;color:#0f172a;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stat-card .stat-sub{font-size:.72rem;font-weight:600;color:#64748b}.dark .stat-card{background:#1e293b!important;border-color:#24324a!important;box-shadow:0 4px 6px -1px rgba(0,0,0,.5)!important}.dark .stat-card .stat-value{color:#f8fafc!important}.dark .stat-card .stat-label{color:#cbd5e1!important}.dark .stat-card .stat-sub{color:#94a3b8!important} @media (max-width:767px){.stat-card{padding:.85rem!important}.stat-card .stat-value{font-size:1.25rem!important}} @media (min-width:1024px) and (max-width:1279px){.stat-card .stat-value{font-size:1.3rem!important}} .erp-body aside{min-height:100vh}.erp-body main{min-height:100vh;min-width:0}.erp-body table th,.erp-body table td{padding:.65rem .75rem}.erp-body form label{line-height:1.35}.erp-body .pagination,.erp-body nav[role=navigation]{font-size:.875rem;display:flex;align-items:center} .erp-body svg:not(.fc-sparkline svg):not(.rep-line-chart svg):not(.rep-info-icon svg):not(.occ-ring-svg):not(.cal-nav-sm svg):not(.metric-icon svg):not(.inv-stat-icon svg):not(.inv-item-logo svg):not(.rep-filter-btn svg):not(.rep-export-btn svg){max-width:1.25rem;max-height:1.25rem} /* ===== GLOBAL UTILITIES & BASE END ===== */ /* ===== AUTH PAGE START ===== */ .auth-page{min-height:100vh;background:radial-gradient(circle at 16% 10%,#fafaf9 0,#f5f4f1 34%,#eeebe6 100%);color:#1c1917}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:2.5rem 1.25rem 2rem}.auth-card-split{width:min(100%,62rem);min-height:0;display:grid;grid-template-columns:1fr 1.15fr;background:#fafaf9;border:1px solid #e4e2dc;border-radius:1.15rem;box-shadow:0 24px 65px rgba(28,25,23,.13);overflow:hidden}.auth-art{background:#111c2b;display:grid;place-items:center;position:relative;overflow:hidden;min-height:28rem}.auth-art img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0}.auth-form-panel{display:grid;place-items:center;background:rgba(250,250,249,.96);padding:2.25rem 2.5rem}.auth-form-wrap{width:min(100%,24rem)}.auth-form-wrap h1{margin:0;color:#1c1917;font-size:1.75rem;line-height:1.15;font-weight:800;letter-spacing:-.01em}.auth-lead{margin:.4rem 0 1.65rem;color:#6b7280;font-size:.92rem}.auth-form{display:grid;gap:1.1rem}.auth-field{display:grid;gap:.45rem;color:#374151;font-size:.88rem;font-weight:700}.auth-control{min-height:3.15rem;display:flex;align-items:center;gap:.7rem;border:1px solid #d8dee8;border-radius:.5rem;background:#fff;padding:0 .85rem;box-shadow:0 2px 6px rgba(15,23,42,.03)}.auth-control svg{width:1.15rem;height:1.15rem;flex:0 0 auto;fill:none;stroke:#94a3b8;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;max-width:none!important;max-height:none!important}.auth-control input{width:100%;height:3rem;border:0;padding:0;background:transparent;color:#111827;font-size:.92rem}.auth-control input:focus{outline:0;border:0}.auth-control:focus-within{border-color:#94a3b8;box-shadow:0 0 0 3px rgba(148,163,184,.14)}.auth-password button{width:2.15rem;height:2.15rem;display:grid;place-items:center;border:0;background:transparent;color:#94a3b8;padding:0;cursor:pointer;border-radius:.3rem;transition:color .15s}.auth-password button:hover{color:#475569}.auth-password button svg{width:1.15rem;height:1.15rem}.auth-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:0;color:#667085;font-size:.88rem}.auth-row a,.auth-contact a{color:#0b65b9;font-weight:600}.remember{display:flex;align-items:center;gap:.55rem;font-weight:500}.remember input{width:1.05rem;height:1.05rem;border:1px solid #d1d5db;border-radius:.25rem;padding:0;accent-color:#0d1828}.auth-submit{min-height:3.15rem;margin-top:.35rem;border:0;border-radius:.5rem;background:#2563eb;color:#fff;font-size:.95rem;font-weight:700;cursor:pointer;position:relative;overflow:hidden;z-index:1;transition:transform .2s ease,box-shadow .4s ease;box-shadow:0 4px 16px rgba(37,99,235,.25)}.auth-submit::before{content:'';position:absolute;bottom:-20px;left:-10%;width:120%;height:55%;background:radial-gradient(ellipse at 30% 100%,rgba(255,255,255,.18),transparent 65%);border-radius:45% 55% 50% 50%/55% 45% 55% 45%;z-index:-1;animation:authBlob 8s ease-in-out infinite;transition:all .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none;will-change:transform,border-radius}.auth-submit::after{content:'';position:absolute;bottom:-14px;right:-8%;width:100%;height:40%;background:radial-gradient(ellipse at 70% 100%,rgba(59,130,246,.2),transparent 60%);border-radius:50% 50% 40% 60%/60% 50% 50% 40%;z-index:-1;animation:authBlob2 6s ease-in-out infinite;transition:all .5s cubic-bezier(.34,1.56,.64,1);pointer-events:none;will-change:transform,border-radius}.auth-submit:hover{box-shadow:0 6px 24px rgba(37,99,235,.35)}.auth-submit:hover::before{height:90%;bottom:0;border-radius:40% 60% 50% 50%/60% 60% 40% 40%;opacity:.3}.auth-submit:hover::after{height:75%;bottom:0;border-radius:50% 50% 40% 60%/70% 60% 40% 30%;opacity:.25}.auth-submit:active{transform:scale(.97)}@keyframes authBlob{0%,100%{border-radius:45% 55% 50% 50%/55% 45% 55% 45%;transform:translateX(0) scaleY(1)}20%{border-radius:50% 50% 55% 45%/45% 55% 45% 55%;transform:translateX(5%) scaleY(1.07)}40%{border-radius:55% 45% 45% 55%/50% 50% 60% 40%;transform:translateX(-3%) scaleY(.94)}60%{border-radius:40% 60% 50% 50%/60% 40% 50% 50%;transform:translateX(4%) scaleY(1.03)}80%{border-radius:50% 50% 40% 60%/45% 55% 45% 55%;transform:translateX(-4%) scaleY(.97)}}@keyframes authBlob2{0%,100%{border-radius:50% 50% 40% 60%/60% 50% 50% 40%;transform:translateX(0) scaleY(1)}25%{border-radius:40% 60% 50% 50%/40% 60% 40% 60%;transform:translateX(-5%) scaleY(1.09)}50%{border-radius:55% 45% 60% 40%/55% 40% 60% 45%;transform:translateX(4%) scaleY(.92)}75%{border-radius:45% 55% 50% 50%/50% 45% 55% 50%;transform:translateX(-3%) scaleY(1.04)}}.auth-divider{display:flex;align-items:center;gap:.85rem;margin:1.35rem 0 1.15rem;color:#9ca3af;font-size:.88rem}.auth-divider:before,.auth-divider:after{content:"";height:1px;flex:1;background:#e5e7eb}.auth-contact{text-align:center;color:#6b7280;font-size:.88rem;margin:0}.auth-footer{margin-top:1.75rem;color:#9ca3af;text-align:center;font-size:.85rem}.auth-form-brand{display:none;align-items:center;gap:.6rem;margin-bottom:1rem;padding-bottom:1rem;border-bottom:1px solid #e4e2dc}.auth-form-brand-icon{width:2.2rem;height:1.65rem}.auth-form-brand span{font-size:1.05rem;font-weight:800;color:#111c2b;letter-spacing:.04em;text-transform:uppercase}@media(max-width:900px){.auth-form-brand{display:flex}}.error{color:#dc2626;font-size:.78rem;font-weight:500}.auth-page .text-red-600{color:#dc2626} /* ===== AUTH PAGE END ===== */ /* ===== CORE ERP LAYOUT & DASHBOARD START ===== */ .flex-wrap{flex-wrap:wrap}.flex-col{flex-direction:column}.pt-4{padding-top:1rem}.erp-shell{background:#f4f6fa}.erp-sidebar{background:linear-gradient(180deg,#101d2e,#081421);box-shadow:8px 0 26px rgba(15,23,42,.18)}.sidebar-brand{height:7rem;display:grid;place-items:center;overflow:hidden}.sidebar-brand img{width:100%;height:100%;object-fit:contain}.erp-nav a{min-height:2.7rem;display:flex;align-items:center;border:1px solid transparent}.erp-nav a.bg-amber-500{background:linear-gradient(135deg,#e4bd75,#bd8e49);color:#fff;box-shadow:0 12px 24px rgba(189,142,73,.22)}.sidebar-bottom{color:#e2e8f0}.erp-topbar{min-height:4.6rem;box-shadow:0 1px 9px rgba(15,23,42,.08)}.topbar-title,.topbar-right,.today,.topbar-user{display:flex;align-items:center}.topbar-title{gap:1.25rem}.menu-lines{width:1.2rem;height:.9rem;display:inline-block;border-top:2px solid #334155;border-bottom:2px solid #334155;position:relative}.menu-lines:after{content:"";position:absolute;left:0;right:0;top:.33rem;border-top:2px solid #334155}.topbar-right{gap:1.4rem}.today{gap:.65rem;color:#334155;font-size:.9rem}.today svg{width:1.15rem;height:1.15rem;fill:none;stroke:#334155;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.topbar-user{gap:.75rem;padding-left:1.4rem;border-left:1px solid #e5e7eb}.avatar{width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:999px;background:#24344f;color:#fff;font-weight:800}.topbar-user strong{display:block;font-size:.9rem}.topbar-user small{display:block;color:#64748b;font-size:.75rem}.metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.1rem}.metric-card,.dash-panel,.finance-card{background:#fff;border:1px solid #e3e8f0;border-radius:.65rem;box-shadow:0 8px 22px rgba(15,23,42,.08)}.metric-card{min-height:7.75rem;display:flex;align-items:center;gap:1.1rem;padding:1.1rem}.metric-card span,.finance-card span{display:block;color:#334155;font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.02em}.metric-card strong{display:block;margin:.35rem 0;font-size:1.85rem;line-height:1;font-weight:800}.metric-card small,.finance-card small{display:block;color:#64748b}.metric-card a{color:#0b65b9}.metric-icon{width:4.2rem;height:4.2rem;display:grid;place-items:center;border-radius:.65rem;flex:0 0 auto} .metric-icon svg{width:2rem!important;height:2rem!important;max-width:none!important;max-height:none!important;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}.metric-blue{background:#e8f3ff;color:#2d87dd}.metric-green{background:#e8f8ee;color:#22a55f}.metric-gold{background:#fff4d8;color:#c6860a}.metric-purple{background:#f1eaff;color:#7a4bd8}.positive{color:#16a34a!important}.negative{color:#dc2626!important}.warning{color:#c6860a!important}.dashboard-main-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(26rem,1.03fr);gap:1.25rem}.dash-panel{padding:0;overflow:hidden;box-shadow:0 24px 60px rgba(15,23,42,.08);border:1px solid rgba(226,232,240,.9);border-radius:1rem;background:#fff}.panel-title-row{min-height:3.65rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;border-bottom:1px solid #eff3f8}.panel-title-row h2{margin:0;font-size:1.05rem}.panel-title-row a{padding:.45rem .75rem;border:1px solid var(--erp-border-strong);border-radius:.5rem;color:var(--erp-text-soft);font-size:.85rem;background:var(--erp-surface-raised);transition:all .15s}.panel-title-row a:hover{background:var(--erp-surface-soft)}.dash-panel-head{gap:.75rem}.dash-cal-actions button{width:2.4rem;height:2.4rem;border:1px solid #d7dce4;border-radius:.75rem;background:#fff;color:#334155;font-size:1.05rem;display:grid;place-items:center;transition:background .15s,transform .15s}.dash-cal-actions button:hover{background:#f8fafc;transform:translateY(-1px)}.panel-title-row h2{margin:0;font-size:1.05rem}.panel-title-row a{padding:.45rem .75rem;border:1px solid #d7dce4;border-radius:.4rem;color:#334155;font-size:.85rem}.calendar-actions{display:flex;align-items:center;gap:.5rem}.calendar-actions span{min-width:7.2rem;text-align:center;padding:.5rem .75rem;border:1px solid #d7dce4;border-radius:.4rem;font-weight:700;font-size:.85rem}.calendar-actions button{width:2rem;height:2rem;border:1px solid #d7dce4;border-radius:.4rem;background:#fff;color:#334155;font-size:1.25rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);padding:0 1.05rem 0}.calendar-head{padding:.75rem .25rem;text-align:center;color:#475569;font-size:.8rem;font-weight:800;text-transform:uppercase;border-bottom:1px solid #e5e7eb}.calendar-day{min-height:3.55rem;display:grid;place-items:center;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}.calendar-day:nth-child(7n+7){border-right:0}.calendar-day.muted{color:#94a3b8}.calendar-day.today .day-pill{outline:2px solid #2d87dd;outline-offset:2px}.day-pill{min-width:3rem;min-height:2.25rem;display:grid;place-items:center;border-radius:.45rem;font-weight:800;position:relative}.day-pill:after{content:"";width:.28rem;height:.28rem;border-radius:50%;position:absolute;bottom:.28rem;background:currentColor}.day-pill.booked{background:#dc2626;color:#fff}.day-pill.available{background:#16a34a;color:#fff}.day-pill.tentative{background:#eab308;color:#fff}.calendar-day.muted .day-pill{background:transparent;color:#94a3b8}.calendar-day.muted .day-pill:after{display:none}.calendar-legend{display:flex;align-items:center;gap:1.5rem;font-size:.75rem;font-weight:600;color:#64748b} .calendar-legend span{display:flex;align-items:center;gap:.4rem} .calendar-legend i{width:.8rem;height:.8rem;border-radius:2px;display:block} .calendar-legend .booked{background:#dc2626}.calendar-legend .available{background:#16a34a} .calendar-legend .tentative{background:#eab308}.dashboard-table-wrap{overflow-x:auto;padding:0 1.05rem 1.1rem}.dashboard-table{width:100%;font-size:.88rem}.dashboard-table th{color:var(--erp-muted);font-size:.78rem;font-weight:800}.dashboard-table th,.dashboard-table td{padding:.92rem .75rem;border-bottom:1px solid var(--erp-border);text-align:left;white-space:nowrap}.status-badge{display:inline-flex;min-width:4.9rem;justify-content:center;padding:.45rem .65rem;border-radius:.45rem;font-weight:700;font-size:.78rem}.status-badge.confirmed,.status-badge.scheduled,.status-badge.completed{background:#dcf8e6;color:#15834e}.status-badge.pending{background:#ffe0e4;color:#b61220}.status-badge.tentative{background:#fff4d6;color:#a56c00}.status-badge.booked{background:#fee2e2;color:#b91c1c}.status-badge.cancelled,.status-badge.void{background:#fee2e2;color:#b91c1c}.money-due{color:#dc2626;font-weight:800}.money-paid{color:#16a34a;font-weight:800}.empty-cell{text-align:center!important;color:#64748b;padding:2rem!important}.finance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.9rem}.finance-card{min-height:8.2rem;padding:1.2rem;display:grid;gap:.65rem}.finance-card strong{font-size:1.45rem}.occupancy-card{display:flex;align-items:center;justify-content:space-between}.occupancy-ring{width:4.4rem;height:4.4rem;border-radius:50%;background:conic-gradient(#2f86dd calc(var(--value)*1%),#e5e7eb 0);position:relative}.occupancy-ring:after{content:"";position:absolute;inset:.55rem;border-radius:50%;background:#fff}.recent-panel{padding-bottom:.25rem} /* ===== CORE ERP LAYOUT & DASHBOARD END ===== */ /* ===== DASHBOARD v2 START ===== */ .finance-card-v2{padding:1rem 1.25rem;display:flex;flex-direction:column;gap:.2rem;min-height:0} .fc-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:.15rem} .fc-top span{font-size:.82rem;font-weight:500;color:#475569;text-transform:none;letter-spacing:0} .fc-top em{font-style:normal;font-weight:400;color:#94a3b8} .fc-badge{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:999px;font-size:.72rem;font-weight:700} .fc-badge-up{background:#dcfce7;color:#15803d} .fc-badge-down{background:#fee2e2;color:#b91c1c} .finance-card-v2 strong{font-size:1.45rem;font-weight:800;color:#0f172a;line-height:1.15;margin:.1rem 0} .fc-sparkline{width:100%;height:2.75rem;overflow:hidden;margin:.15rem 0} .fc-sparkline svg{display:block;width:100%!important;height:2.75rem!important;max-width:none!important;max-height:none!important} .finance-card-v2 small{font-size:.78rem;font-weight:600;margin-top:.1rem} .occ-body{display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex:1} .occ-ring-wrap{flex:0 0 auto} .occ-ring-svg{width:4rem!important;height:4rem!important;max-width:none!important;max-height:none!important;display:block} /* ===== DASHBOARD v2 — Calendar nav ===== */ .cal-month-picker{display:flex;align-items:center;gap:.4rem} .cal-month-text{font-size:.875rem;font-weight:700;color:#334155;min-width:7rem;text-align:center} .cal-nav-sm{width:1.9rem;height:1.9rem;display:grid;place-items:center;border:1px solid #d7dce4;border-radius:.35rem;background:#fff;cursor:pointer} .cal-nav-sm svg{width:.85rem!important;height:.85rem!important;max-width:none!important;max-height:none!important} /* ===== DASHBOARD v2 END ===== */ /* ===== SIDEBAR LOGO START ===== */ .sidebar-brand{height:5.5rem;display:flex;align-items:center;justify-content:center;padding:.75rem 1rem;overflow:hidden;text-decoration:none} .sidebar-brand img{width:auto;height:100%;max-height:4rem;object-fit:contain;display:block} /* ===== SIDEBAR LOGO END ===== */ /* ===== RESPONSIVE FIXES & FORMS START ===== */ @media (max-width:1180px){.metric-grid,.finance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-main-grid{grid-template-columns:1fr}.topbar-right{display:none}} @media (max-width:760px){.metric-grid,.finance-grid{grid-template-columns:1fr}.calendar-day{min-height:2.7rem}.day-pill{min-width:2.25rem;min-height:1.9rem}.sidebar-brand{height:5.5rem}} .erp-card{background:#fff;border:1px solid rgba(148,163,184,.18);border-radius:.65rem;box-shadow:0 14px 36px rgba(15,23,42,.12)}.form-page{padding:1.55rem}.form-page h2,.form-page h3{margin:.05rem 0 1.25rem}.form-page hr,.calendar-side hr{border:0;border-top:1px solid rgba(148,163,184,.12);margin:1.55rem 0}.form-grid{display:grid;gap:1.35rem 1.55rem}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.inquiry{grid-template-columns:minmax(0,1fr) 24rem}.form-grid label{display:grid;gap:.55rem;font-weight:600;color:#334155}.form-grid b,.form-page b{color:#0b65b9}.form-grid input,.form-grid select,.form-grid textarea,.inline-form input,.inline-form select,.panel-title-row select,.calendar-toolbar select{min-height:2.9rem;border:1px solid var(--theme-input-border,rgba(148,163,184,.16));border-radius:.45rem;background:var(--theme-input-bg,#fff);color:var(--theme-text-primary,#0f172a);width:100%;padding:.75rem}.form-grid textarea{min-height:4.2rem;background:var(--theme-input-bg,#fff);color:var(--theme-text-primary,#0f172a)}.form-grid .wide{grid-column:1/-1}.side-fields{display:grid;gap:1.35rem}.info-line{padding:.85rem 1rem;border:1px solid rgba(56,189,248,.25);border-radius:.45rem;background:rgba(14,165,233,.12);color:#0f172a;font-size:.9rem}.form-actions{display:flex;justify-content:flex-end;align-items:center;gap:1rem;margin-top:1.35rem}.btn-dark,.btn-gold,.btn-outline{min-height:2.8rem;display:inline-flex;align-items:center;justify-content:center;border-radius:.45rem;padding:0 1.35rem;font-weight:700;white-space:nowrap;flex-shrink:0;gap:.5rem;font-size:.875rem;line-height:1;}.btn-dark{border:0;background:#2563eb;color:#fff}.btn-gold{border:0;background:linear-gradient(135deg,#fbbf24,#d97706);color:#0f172a}.btn-outline{border:1px solid rgba(148,163,184,.16);background:rgba(255,255,255,.95);color:#24324a !important;text-decoration:none !important}.btn-outline:hover{background:rgba(248,250,252,.9)}.check{display:flex!important;grid-auto-flow:column;align-items:center;margin-right:auto}.calendar-layout,.billing-layout,.receipt-layout{display:grid;gap:1.25rem}.calendar-layout{grid-template-columns:minmax(0,1fr) 22rem}.billing-layout{grid-template-columns:minmax(0,1fr) 29rem}.receipt-layout{grid-template-columns:minmax(0,1fr) 34rem}.booking-calendar-page{padding:1rem}.calendar-toolbar{display:flex;align-items:center;gap:.65rem;margin:1rem 0 1.4rem}.calendar-toolbar button,.calendar-toolbar select{min-height:2.45rem;border:1px solid rgba(148,163,184,.16);border-radius:.45rem;background:#fff;padding:0 .9rem;color:#334155}.calendar-toolbar strong{font-size:1.45rem}.toolbar-spacer{flex:1}.calendar-grid.large{padding:0;border:1px solid rgba(148,163,184,.12);border-radius:.45rem;overflow:hidden}.large-day{min-height:7rem;justify-items:start;align-content:start;padding:.8rem;gap:.55rem}.large-day b{font-size:.95rem}.calendar-event{width:100%;display:grid;gap:.15rem;border-radius:.4rem;padding:.55rem .6rem;font-size:.8rem;font-weight:800}.calendar-event small{font-weight:600}.calendar-event.available{background:#134e31;color:#e7f5e6}.calendar-event.confirmed,.calendar-event.completed{background:#581c23;color:#ffe4e6}.calendar-event.pending{background:#312e37;color:#f8d7d3}.calendar-side{padding:1.35rem}.legend-list{display:grid;gap:1rem}.legend-list span{display:flex;gap:.75rem;align-items:center}.legend-list i{width:1.05rem;height:1.05rem;border-radius:.25rem}.mini-event{display:grid;grid-template-columns:3rem 1fr auto;gap:.85rem;align-items:center;padding:1rem 0;border-bottom:1px solid rgba(148,163,184,.12)}.mini-event strong{display:grid;place-items:center;border-radius:.4rem;background:#1c273b;padding:.35rem}.mini-event strong small,.mini-event span small{display:block;color:#94a3b8}.mini-event em{font-style:normal;border-radius:.35rem;padding:.35rem .6rem;font-size:.78rem}.mini-event em.confirmed{background:#dcf8e6;color:#15834e}.mini-event em.pending{background:#fff4d6;color:#a56c00}.invoice-panel{overflow:hidden}.invoice-section{padding:1.2rem;border-top:1px solid rgba(148,163,184,.12)}.invoice-section:first-of-type{border-top:0}.details-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem 2rem}.details-grid p{display:grid;grid-template-columns:10rem 1fr;margin:0}.details-grid span{color:#94a3b8}.inline-form{display:grid;grid-template-columns:1fr 10rem auto;gap:.7rem;margin-top:1rem}.bill-summary,.receipt-preview{padding:1.35rem}.bill-summary p{display:flex;justify-content:space-between;border-bottom:1px solid rgba(148,163,184,.12);margin:0;padding:1rem 0}.bill-summary .grand{background:rgba(220,184,54,.15);color:#fcd34d;margin:.7rem -.4rem;padding:1rem .4rem;border-radius:.4rem}.balance-box{display:flex;justify-content:space-between;align-items:center;margin:1rem 0;padding:1.2rem;border-radius:.45rem;background:rgba(220,248,230,.08);color:#a7f3d0}.balance-box strong{font-size:1.35rem}.bill-summary .btn-dark,.bill-summary .btn-outline{width:100%;margin:.45rem 0}.receipt-paper{border:1px dashed rgba(148,163,184,.25);border-radius:.45rem;padding:1.35rem}.receipt-paper em{float:right;background:#0d1828;color:#fff;border-radius:.25rem;padding:.35rem .6rem;font-style:normal;font-size:.75rem}.receipt-paper table{width:100%;margin:1rem 0;border:1px solid rgba(148,163,184,.18)}.receipt-paper th,.receipt-paper td{padding:.7rem;border:1px solid rgba(148,163,184,.18);text-align:left} @media (max-width:1180px){.form-grid.three,.billing-layout,.receipt-layout,.calendar-layout{grid-template-columns:1fr}.form-grid.inquiry{grid-template-columns:1fr}} @media (max-width:720px){.form-grid.two,.form-grid.three,.details-grid,.inline-form{grid-template-columns:1fr}.details-grid p{grid-template-columns:1fr}.large-day{min-height:5rem}.form-actions{flex-wrap:wrap;justify-content:flex-start}} .booking-list-page{overflow:hidden}.table-filters{display:grid;grid-template-columns:minmax(18rem,1fr) 11rem 12rem 12rem auto;gap:1rem;align-items:end;padding:1rem 1.15rem}.table-filters label{display:grid;gap:.45rem;color:#334155;font-size:.82rem;font-weight:800}.table-filters input,.table-filters select{min-height:3rem;border:1px solid var(--erp-border-strong);border-radius:.45rem;background:var(--erp-input)}.table-footer{padding:1rem 1.15rem;color:#64748b;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;font-size:.875rem}.link-blue{color:#0b65b9;font-weight:800}.action-icons{display:flex;gap:.45rem;align-items:center} .action-icons > a,.action-icons > button,.action-icons > .dropdown-wrap > button{display:inline-flex;min-height:2.1rem;align-items:center;justify-content:center;border:1px solid var(--erp-border-strong);border-radius:.4rem;padding:0 .65rem;color:var(--erp-text-soft);font-size:.8rem;background:var(--erp-surface-raised);cursor:pointer;text-decoration:none} .action-icons > a:hover,.action-icons > button:hover,.action-icons > .dropdown-wrap > button:hover{background:var(--erp-surface-soft)} @media (max-width:1100px){.table-filters{grid-template-columns:1fr 1fr}.table-filters .btn-dark{width:fit-content}} @media (max-width:720px){.table-filters{grid-template-columns:1fr}.table-filters .btn-dark{width:100%}} @media (max-width:1024px){.auth-card-split{grid-template-columns:1fr;min-height:0;max-width:100%;width:100%}.auth-art{min-height:18rem}.auth-form-panel{padding:1.9rem 2rem;max-width:100%;width:100%}.auth-shell{padding:1.35rem;overflow-x:hidden}.auth-form-wrap{width:100%}.auth-form-wrap h1{font-size:1.55rem}} @media (max-width:900px){.auth-card-split{grid-template-columns:1fr;min-height:0;max-width:100%;width:100%}.auth-art{display:none}.auth-form-panel{padding:1.75rem 2rem;max-width:100%;width:100%}.auth-shell{padding:1.25rem;overflow-x:hidden}.auth-form-wrap{width:100%}.auth-form-wrap h1{font-size:1.5rem}} @media (max-width:520px){.auth-art{display:none}.auth-card-split{border-radius:.9rem;max-width:100%;width:100%}.auth-form-panel{padding:1.35rem;max-width:100%;width:100%}.auth-shell{padding:.85rem;overflow-x:hidden}.auth-form-wrap{width:100%}.auth-row{align-items:flex-start;flex-direction:column}.auth-control{min-height:2.85rem}.auth-control input{height:2.65rem}.auth-submit{min-height:2.85rem}.auth-footer{font-size:.8rem}} /* ===== RESPONSIVE FIXES & FORMS END ===== */ /* ===== SIDEBAR v2 START ===== */ .nav-link{min-height:2.65rem;display:flex;align-items:center;gap:.7rem;border-radius:.45rem;padding:.5rem .75rem;font-size:.875rem;font-weight:500;color:#cbd5e1;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s;text-decoration:none;background:none;width:100%;text-align:left} .nav-link svg{width:1.1rem;height:1.1rem;flex:0 0 auto;opacity:.75} .nav-link:hover{background:rgba(255,255,255,.08);color:#fff} .nav-link-active{background:linear-gradient(135deg,#e4bd75,#bd8e49)!important;color:#fff!important;box-shadow:0 8px 18px rgba(189,142,73,.25);border-color:transparent} .nav-link-active svg{opacity:1} .nav-logout{color:#f87171} .nav-logout:hover{background:rgba(248,113,113,.12)} .nav-group{display:grid;gap:0;position:relative} .nav-group-toggle{justify-content:flex-start} .nav-chevron{width:.9rem!important;height:.9rem!important;margin-left:auto;transition:transform .2s;flex:0 0 auto} .nav-chevron.open{transform:rotate(180deg)} .nav-sub{display:none;padding-left:2.1rem;gap:.15rem;flex-direction:column} .nav-sub.open{display:flex} .nav-sub-link{display:block;padding:.45rem .75rem;border-radius:.35rem;font-size:.82rem;font-weight:500;color:#94a3b8;text-decoration:none;transition:background .12s,color .12s} .nav-sub-link:hover{background:rgba(255,255,255,.07);color:#e2e8f0} .nav-sub-link.active{background:rgba(30,58,95,.9);color:#fff!important;font-weight:600} .sidebar-user-card{display:flex;align-items:center;gap:.75rem;padding:.6rem .5rem;overflow:hidden;white-space:nowrap} .sidebar-user-card .avatar{width:2.2rem;height:2.2rem;font-size:.85rem} .sidebar-bottom { color: #e2e8f0; margin-top: auto; padding: 1rem 0.75rem; border-top: 1px solid rgba(255,255,255,.07); display: flex; flex-direction: column; gap: 0.25rem; overflow: hidden; white-space: nowrap; } /* ===== SIDEBAR v2 END ===== */ /* ===== PAGE HEADER ROW START ===== */ .page-header-row{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem} .page-title{margin:0;font-size:1.35rem;font-weight:800;color:#0f172a} .page-subtitle{margin:.2rem 0 0;font-size:.875rem;color:#64748b} /* ===== PAGE HEADER ROW END ===== */ /* ===== FILTER BAR START ===== */ .filter-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:1rem 1.15rem} .filter-search{display:flex;align-items:center;gap:.6rem;flex:1;min-width:16rem;border:1px solid rgba(148,163,184,.2);border-radius:14px;background:#fff;padding:0 .95rem;min-height:2.75rem;box-shadow:0 1px 4px rgba(15,23,42,.06)} .filter-search svg{width:1rem;height:1rem;color:#94a3b8;flex:0 0 auto} .filter-search input{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;appearance:none!important;flex:1;width:100%;min-height:2.5rem;font-size:.875rem;color:#0f172a} .filter-search input:focus{outline:0;box-shadow:none} .filter-search input::placeholder{color:#94a3b8} .filter-selects{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem} .filter-selects select,.filter-selects input[type=date]{min-height:2.75rem;border:1px solid var(--erp-border);border-radius:.45rem;background:var(--erp-surface-raised);padding:0 .75rem;font-size:.875rem;color:var(--erp-text)} .date-input-wrap{display:flex;align-items:center;gap:.5rem;border:1px solid var(--erp-border);border-radius:14px;background:var(--erp-surface-raised);padding:0 .85rem;min-height:2.75rem} .date-input-wrap svg{width:.95rem;height:.95rem;color:#000;flex:0 0 auto} .date-input-wrap input{border:0!important;padding:0!important;background:transparent!important;box-shadow:none!important;appearance:none!important;width:100%;min-height:2.5rem;font-size:.875rem;color:#334155} .date-input-wrap input[type="date"]{appearance:auto!important;-webkit-appearance:auto!important;border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important} .date-input-wrap input[type="date"]:hover,.date-input-wrap input[type="date"]:focus{border:0!important;background:transparent!important;box-shadow:none!important} .date-input-wrap input:focus{outline:0;box-shadow:none} .btn-filter{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.1rem;border:1px solid var(--erp-border-strong);border-radius:.45rem;background:var(--erp-surface-raised);color:var(--erp-text-soft);font-size:.875rem;font-weight:600;cursor:pointer} .btn-filter svg{width:.95rem;height:.95rem} .btn-filter:hover{background:var(--erp-surface-soft)} /* ===== FILTER BAR END ===== */ /* ===== MODAL START ===== */ .modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:50;display:grid;place-items:center;padding:1.25rem} .modal-box{background:#fff;border-radius:.75rem;box-shadow:0 24px 60px rgba(15,23,42,.22);width:min(100%,38rem);max-height:90vh;overflow-y:auto} .modal-lg{width:min(100%,52rem)} .modal-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid #e5e7eb} .modal-header h3{margin:0;font-size:1.05rem;font-weight:700} .modal-close{width:2rem;height:2rem;display:grid;place-items:center;border:0;background:transparent;font-size:1.4rem;color:#64748b;cursor:pointer;border-radius:.35rem} .modal-close:hover{background:#f1f5f9} .modal-body{padding:1.5rem} /* ===== MODAL END ===== */ /* ===== ACTION BUTTONS START ===== */ .action-btn{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid #d7dce4;border-radius:.4rem;background:#fff;color:#334155;cursor:pointer} .action-btn svg{width:1rem;height:1rem} .action-btn:hover{background:#f1f5f9} .action-btn-danger{color:#dc2626;border-color:#fecaca} .action-btn-danger:hover{background:#fef2f2} /* ===== ACTION BUTTONS END ===== */ /* ===== TABLE ROW DROPDOWN START ===== */ .dropdown-wrap{position:relative;display:inline-flex} .dropdown-wrap .dropdown-menu{display:none;position:absolute;right:0;top:100%;margin-top:.3rem;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 8px 24px rgba(15,23,42,.12);min-width:11rem;z-index:50;overflow:hidden} .dropdown-wrap:hover .dropdown-menu,.dropdown-wrap:focus-within .dropdown-menu{display:block} .dropdown-item{display:block;width:100%;padding:.65rem 1rem;text-align:left;border:0;background:transparent;font-size:.875rem;color:#334155;cursor:pointer;text-decoration:none;white-space:nowrap} .dropdown-item:hover{background:#f8fafc;color:#0f172a} /* ===== TABLE ROW DROPDOWN END ===== */ /* ===== CATEGORY BADGES START ===== */ .cat-badge{display:inline-flex;align-items:center;padding:.3rem .65rem;border-radius:.35rem;font-size:.78rem;font-weight:700} .cat-event{background:#fce7f3;color:#9d174d} .cat-catering{background:#fef3c7;color:#92400e} .cat-equipment{background:#dbeafe;color:#1e40af} .cat-services{background:#d1fae5;color:#065f46} .cat-utilities{background:#e0e7ff;color:#3730a3} .cat-maintenance{background:#fde8d8;color:#9a3412} .cat-marketing{background:#f3e8ff;color:#6b21a8} .cat-salary{background:#ecfdf5;color:#065f46} .cat-others{background:#f1f5f9;color:#475569} /* ===== CATEGORY BADGES END ===== */ /* ===== INVENTORY START ===== */ .inventory-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,17.5rem);gap:.85rem;align-items:start} .inventory-main{min-width:0} .inventory-sidebar{display:grid;gap:.75rem;min-width:0;max-width:100%;align-content:start} .inv-sidebar-fixed{overflow:visible} .inv-page-compact{margin-top:-.15rem} .inv-stats-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.65rem;margin-bottom:.85rem} .inv-stat-card{background:#fff;border:1px solid #e3e8f0;border-radius:.55rem;box-shadow:0 4px 14px rgba(15,23,42,.06);padding:.7rem .8rem;display:flex;align-items:center;gap:.65rem} .inv-stat-card>div>span{display:block;font-size:.68rem;font-weight:700;text-transform:uppercase;color:#64748b} .inv-stat-card>div>strong{display:block;font-size:1.25rem;font-weight:800;line-height:1.1;margin:.15rem 0} .inv-stat-card>div>small{display:block;font-size:.68rem;color:#94a3b8} .inv-stat-icon{width:2.5rem;height:2.5rem;display:grid;place-items:center;border-radius:.45rem;flex:0 0 auto} .inv-stat-icon svg{width:1.15rem;height:1.15rem} .inv-table-card{padding:0;overflow:hidden} .inv-filter-row{padding:.75rem 1rem!important;border-bottom:1px solid var(--theme-input-border,#e5e7eb);margin:0!important;flex-wrap:wrap} .inv-actions-col{flex:0 0 auto} .inv-action-btns{display:flex;align-items:center;gap:.5rem;flex-wrap:nowrap} .inv-btn-action{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:2.35rem;padding:0 1rem;border:0;border-radius:.45rem;background:#0d1828;color:#fff!important;font-size:.8rem;font-weight:700;text-decoration:none!important;white-space:nowrap;cursor:pointer;transition:background .12s,box-shadow .12s;box-shadow:0 2px 6px rgba(13,24,40,.2)} .inv-btn-action:hover{background:#1a2d45;color:#fff!important;text-decoration:none!important} .inv-btn-action svg{width:.9rem!important;height:.9rem!important;max-width:none!important;max-height:none!important;flex:0 0 auto;stroke:#fff} .inv-table-wrap .dashboard-table{font-size:.82rem} .inv-table-wrap .dashboard-table th,.inv-table-wrap .dashboard-table td{padding:.55rem .65rem} .inv-item-cell{display:flex;align-items:center;gap:.55rem;min-width:0} .inv-items-table td:first-child{white-space:normal!important} .inv-item-logo-wrap{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;vertical-align:middle;overflow:hidden} .inv-item-logo-wrap.inv-item-logo-sm{width:2.15rem;height:2.15rem} .inv-item-logo-wrap.inv-item-logo-md{width:2.4rem;height:2.4rem} .inv-item-logo-wrap.inv-item-logo-lg{width:3.5rem;height:3.5rem} .inv-item-logo{display:flex!important;align-items:center;justify-content:center;flex:0 0 auto;border-radius:8px;font-weight:800;line-height:1;letter-spacing:.02em;border:1px solid rgba(15,23,42,.08);box-sizing:border-box} .inv-item-logo-letter{text-transform:uppercase;user-select:none;flex-shrink:0} .inv-item-logo-photo{object-fit:cover;background:#fff;position:absolute;inset:0;z-index:1} .inv-item-logo-sm{width:2.15rem!important;height:2.15rem!important;min-width:2.15rem!important;min-height:2.15rem!important;font-size:.78rem!important} .inv-item-logo-md{width:2.4rem!important;height:2.4rem!important;min-width:2.4rem!important;min-height:2.4rem!important;font-size:.82rem!important} .inv-item-logo-lg{width:3.5rem!important;height:3.5rem!important;min-width:3.5rem!important;min-height:3.5rem!important;font-size:1.2rem!important} .low-stock-item .inv-item-logo-wrap{flex:0 0 auto} .low-stock-item .inv-item-logo-letter{box-shadow:0 1px 3px rgba(15,23,42,.06)} .inv-stock-qty{font-weight:700} .inv-stock-ok{color:#16a34a} .inv-stock-low{color:#d97706} .inv-stock-out{color:#dc2626} .status-badge.inv-status-low{background:#fff4d6;color:#a56c00} .inv-side-panel{padding:1rem;min-width:0;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.06)} .inv-categories-panel{display:flex;flex-direction:column;gap:0} .inv-categories-panel .inv-side-title{margin-bottom:.6rem} .inv-cat-list-scroll{max-height:11.5rem;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding-right:.15rem;margin:0 -.1rem .75rem} .inv-manage-cat-btn{width:100%;margin-top:auto;min-height:2.25rem;padding:0 .75rem;border:1px solid #d7dce4;border-radius:.4rem;background:#fff;color:#0f172a!important;font-size:.8rem;font-weight:700;cursor:pointer;transition:background .12s,border-color .12s} .inv-manage-cat-btn:hover{background:#f8fafc;border-color:#cbd5e1} .inv-side-title{font-size:.9rem;font-weight:700;margin:0;color:#0f172a;line-height:1.25} .inv-side-title-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.65rem;min-width:0} .inv-side-title-row .inv-side-title{flex:1;min-width:0} .inv-side-link{font-size:.75rem;font-weight:600;color:#0284c7!important;text-decoration:none;white-space:nowrap;flex-shrink:0} .inv-side-link:hover{text-decoration:underline} .inv-side-link-center{display:block;text-align:center;margin-top:.65rem;padding-top:.65rem;border-top:1px solid #f1f5f9;font-size:.75rem;font-weight:600;color:#0284c7!important;text-decoration:none} .inv-alerts-panel{display:flex;flex-direction:column;min-height:0} .inv-alerts-scroll{flex:1;min-height:0;max-height:15rem;overflow-y:auto;overflow-x:hidden;scrollbar-gutter:stable;padding-right:.25rem;margin:0 -.05rem} .inv-alerts-scroll::-webkit-scrollbar,.inv-cat-list-scroll::-webkit-scrollbar{width:5px} .inv-alerts-scroll::-webkit-scrollbar-thumb,.inv-cat-list-scroll::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px} .inv-alerts-empty{color:#64748b;font-size:.75rem;text-align:center;padding:.75rem 0;margin:0} .inv-view-top{display:flex;align-items:center;gap:1rem} .inv-view-image{width:3.5rem;height:3.5rem;border-radius:.45rem;object-fit:cover;border:1px solid #e2e8f0} .inv-view-label{display:block;font-size:.68rem;font-weight:700;color:#64748b;text-transform:uppercase;margin-bottom:.15rem} .inv-add-page{margin:-.15rem 0 0} .inv-add-layout{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;gap:.85rem;align-items:start} .inv-add-main{display:grid;gap:.75rem} .inv-add-card{padding:1rem 1.1rem} .inv-add-side{display:grid;gap:.75rem} .inv-stock-summary{display:grid;gap:.45rem} .inv-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#475569} .inv-summary-row b{color:#0f172a;font-weight:600} .inv-summary-status{margin-top:.25rem;padding-top:.5rem;border-top:1px solid #e5e7eb} .inv-summary-status .status-badge{min-width:auto;font-size:.72rem} .inv-upload-zone{margin-bottom:.5rem} .inv-upload-preview{display:flex;justify-content:center;margin-top:.65rem} .field-hint{font-size:.68rem;color:#94a3b8;font-weight:500;margin-top:.1rem} .inv-notes-label{position:relative} @media (max-width:1100px){.inv-add-layout{grid-template-columns:1fr}} /* ===== INVENTORY END ===== */ /* ===== REPORTS OVERVIEW (compact) START ===== */ .rep-page { margin: -0.15rem 0 0; } /* Reports metric stats grid: shared container for Overview (5 cards), Bookings (2 cards), Billing (2 cards) */ .rep-metrics-grid { display: grid; gap: 1rem; width: 100%; min-width: 0; } .rep-metrics-grid > .rep-metric-card { width: auto; max-width: 100%; min-width: 0; align-self: stretch; } /* Overview: 5 equal columns on desktop, with progressive breakpoints for smaller screens */ .rep-metrics-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1279px) { .rep-metrics-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .rep-metrics-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .rep-metrics-grid-5 { grid-template-columns: minmax(0, 1fr); } } /* Bookings & Billing: 2 equal columns on desktop, with progressive breakpoints for smaller screens */ .rep-metrics-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 639px) { .rep-metrics-grid-2 { grid-template-columns: minmax(0, 1fr); } } /* Overview & Income: 3 equal columns on desktop, with progressive breakpoints for smaller screens */ .rep-metrics-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } @media (max-width: 1279px) { .rep-metrics-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .rep-metrics-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 639px) { .rep-metrics-grid-3 { grid-template-columns: minmax(0, 1fr); } } .rep-metric-card { background: #fff; border: 1px solid #e3e8f0; border-radius: 0.55rem; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.06); padding: 0.85rem 1rem; display: flex; align-items: center; gap: 0.75rem; min-width: 0; } .rep-metric-card > div > span { display: block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--erp-text-soft); } .rep-metric-card > div > strong { display: block; font-size: 1.25rem; font-weight: 800; line-height: 1.15; margin: 0.15rem 0; } .rep-metric-card > div > small { display: block; font-size: 0.7rem; color: var(--erp-muted); line-height: 1.3; } .rep-trend-up { color: #16a34a !important; } .rep-trend-down { color: #dc2626 !important; } .rep-teal { background: #ccfbf1; color: #0f766e; } .rep-chart-card { padding: 1rem 1.1rem; min-width: 0; } .rep-info-icon { display: inline-grid; place-items: center; width: 1rem; height: 1rem; border-radius: 50%; background: var(--erp-surface-soft); color: var(--erp-muted); cursor: help; flex: 0 0 auto; } .rep-info-icon svg { width: 0.65rem !important; height: 0.65rem !important; max-width: none !important; max-height: none !important; } .rep-chart-pill { font-size: 0.75rem; font-weight: 600; color: var(--erp-muted); background: var(--erp-surface-soft); border: 1px solid var(--erp-border); padding: 0.2rem 0.55rem; border-radius: 0.3rem; cursor: pointer; } .rep-chart-plot { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: 0.35rem; } .rep-y-axis { display: flex; flex-direction: column; justify-content: space-between; font-size: 0.7rem; color: var(--erp-muted); text-align: right; padding: 0.15rem 0 1.35rem; line-height: 1; } .rep-y-axis-count span { min-width: 1ch; } .rep-plot-area { min-width: 0; display: flex; flex-direction: column; } .rep-line-chart { position: relative; height: 10rem; overflow: visible; } .rep-line-chart svg { display: block; width: 100% !important; height: 100% !important; max-width: none !important; max-height: none !important; } .rep-chart-tooltip { position: absolute; transform: translate(-50%, -100%); background: #1e293b; color: #f1f5f9; padding: 0.45rem 0.65rem; border-radius: 0.4rem; font-size: 0.75rem; line-height: 1.4; white-space: nowrap; pointer-events: none; z-index: 20; box-shadow: 0 4px 16px rgba(15, 23, 42, 0.25); border: 1px solid rgba(255,255,255,0.08); } .rep-chart-tooltip strong { display: block; font-weight: 700; color: #f8fafc; } .rep-chart-tooltip span { display: block; color: #cbd5e1; font-weight: 500; margin-top: 0.1rem; } .rep-x-axis { display: flex; justify-content: space-between; margin-top: 0.25rem; font-size: 0.7rem; color: var(--erp-muted); gap: 0.15rem; } .rep-donut-wrap { position: relative; width: 9rem; height: 9rem; flex: 0 0 auto; } .rep-donut { width: 100%; height: 100%; border-radius: 50%; } .rep-donut-center { position: absolute; inset: 1.5rem; background: var(--erp-surface); border-radius: 50%; display: grid; place-items: center; text-align: center; box-shadow: 0 0 0 1px var(--erp-border); } .rep-donut-center strong { font-size: 1.5rem; font-weight: 800; color: var(--erp-text); line-height: 1; } .rep-donut-center span { font-size: 0.7rem; color: var(--erp-muted); font-weight: 600; } .rep-donut-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; font-size: 0.8rem; flex: 1; min-width: 0; } .rep-donut-legend-side li { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 0.4rem 0.55rem; color: var(--erp-text-soft); } .rep-donut-legend i { width: 0.6rem; height: 0.6rem; border-radius: 50%; flex: 0 0 auto; } .rep-legend-label { font-weight: 600; color: var(--erp-text-soft); } .rep-legend-meta { color: var(--erp-muted); white-space: nowrap; } .rep-legend-meta b { color: var(--erp-text); font-weight: 700; } .rep-bar-group-chart { display: flex; align-items: flex-end; gap: 0.2rem; height: 10rem; padding-top: 0.15rem; } .rep-bar-group-chart-axis { height: 10rem; } .rep-bar-group { flex: 1; display: flex; justify-content: center; min-width: 0; } .rep-bar-pair { display: flex; align-items: flex-end; gap: 2px; height: 100%; width: 100%; max-width: 1.25rem; } .rep-bar { flex: 1; border-radius: 2px 2px 0 0; min-height: 4px; } .rep-bar-rev { background: #16a34a; } .rep-bar-exp { background: #dc2626; } .rep-bar-legend { display: flex; align-items: center; gap: 0.75rem; font-size: 0.75rem; color: var(--erp-muted); } .rep-bar-legend-top { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; } .rep-bar-legend i { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 2px; margin-right: 0.25rem; vertical-align: middle; } .rep-legend-rev { background: #16a34a; } .rep-legend-exp { background: #dc2626; } .rep-mini-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rep-mini-table { width: 100%; font-size: 0.8rem; border-collapse: collapse; min-width: 30rem; } .rep-mini-table th, .rep-mini-table td { padding: 0.55rem 0.45rem; border-bottom: 1px solid var(--erp-border); text-align: left; white-space: nowrap; } .rep-mini-table th { font-size: 0.7rem; font-weight: 700; color: var(--erp-text-soft); text-transform: uppercase; } .rep-view-all { display: block; text-align: center; margin-top: 0.75rem; font-size: 0.8rem; font-weight: 600; } /* ===== RESPONSIVE BREAKPOINTS ===== */ /* Print Styles */ @media print { body { background: #fff !important; } .erp-sidebar, .erp-topbar, .rep-header, .rep-filter-panel { display: none !important; } .rep-page { margin: 0 !important; padding: 1rem !important; } .erp-card, .rep-metric-card, .rep-chart-card { box-shadow: none !important; border: 1px solid #e2e8f0 !important; page-break-inside: avoid; } } /* ===== REPORTS OVERVIEW END ===== */ /* ===== GLOBAL SELECT DROPDOWN OVERRIDES TO MATCH CUSTOM SELECT BTN ===== */ body select, .form-grid select, .inline-form select, .panel-title-row select, .calendar-toolbar select, .table-filters select { width: 100%; text-align: left; background-color: var(--theme-input-bg) !important; border: 1px solid var(--theme-input-border) !important; color: var(--theme-text-primary) !important; padding: 0 36px 0 16px !important; height: 48px !important; border-radius: 12px !important; cursor: pointer; font-size: 0.875rem !important; font-weight: 500 !important; font-family: inherit; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important; transition: all 0.2s ease !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 16px !important; } body select:hover, .form-grid select:hover, .table-filters select:hover { background-color: var(--theme-input-hover-bg) !important; border-color: var(--theme-input-border-hover) !important; } body select:focus, .form-grid select:focus, .table-filters select:focus { outline: none !important; border-color: var(--theme-input-border-focus) !important; box-shadow: 0 0 0 3px rgba(61, 183, 233, 0.15) !important; } html.dark body select, html.dark .form-grid select, html.dark .table-filters select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; } html.dark body select:focus, html.dark .form-grid select:focus, html.dark .table-filters select:focus { box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15) !important; } /* ===== REPORTS OVERVIEW (compact) END ===== */ /* ===== INVENTORY FORMS & CAT LIST START ===== */ .inv-form-page{max-width:56rem} .inv-cat-pill{display:inline-flex;align-items:center;padding:.2rem .6rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:1rem;font-size:.75rem;font-weight:600;color:#475569} .dark .inv-cat-pill{background:#1e293b;border-color:#334155;color:#94a3b8} /* ===== GLOBAL ALPINE CUSTOM SELECT COMPONENT ===== */ .erp-custom-select-btn { text-align: left; display: flex; justify-content: space-between; align-items: center; cursor: pointer; } .erp-custom-select-btn svg { width: 16px; height: 16px; opacity: 0.7; transition: transform 0.2s ease; } .erp-custom-select-menu { position: absolute; z-index: 50; top: 100%; right: 0; left: 0; min-width: 11.5rem; background: var(--global-dd-menu-bg) !important; border: 1px solid var(--global-dd-menu-border) !important; border-radius: 12px !important; margin-top: 0.35rem; box-shadow: 0 10px 30px rgba(0,0,0,0.45) !important; overflow: hidden !important; } .erp-custom-select-scroll { max-height: 260px; overflow-y: auto; padding: 0; } .erp-custom-select-scroll::-webkit-scrollbar { width: 6px; } .erp-custom-select-scroll::-webkit-scrollbar-track { background: transparent; } .erp-custom-select-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); border-radius: 20px; } .dark .erp-custom-select-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.25); } .erp-custom-select-item { display: block; width: 100%; text-align: left; padding: 14px 18px !important; cursor: pointer; border: none; background: transparent; font-size: 16px !important; color: var(--global-dd-text) !important; border-radius: 0 !important; font-family: inherit; font-weight: 500 !important; transition: all 0.2s ease !important; } .erp-custom-select-item:hover, .dark .erp-custom-select-item:hover { background: var(--global-dd-hover-bg) !important; color: var(--global-dd-hover-text) !important; } .erp-custom-select-item.active, .dark .erp-custom-select-item.active { background: var(--global-dd-hover-bg) !important; color: var(--global-dd-hover-text) !important; font-weight: 600 !important; } .inv-form-card{padding:1rem 1.1rem} .inv-logo-preview-row{display:flex;align-items:center;gap:1rem;margin-top:.35rem} .inv-logo-hint{margin:.35rem 0 0;font-size:.72rem;color:#64748b;line-height:1.45} .inv-item-name{line-height:1.3} .cat-list-item{padding:.5rem .65rem;font-size:.8rem;min-width:0} .cat-count{flex-shrink:0;margin-left:.35rem} .cat-count{font-size:.72rem} .low-stock-item{padding:.55rem 0} .inv-blue{background:#e8f3ff;color:#2d87dd} .inv-green{background:#e8f8ee;color:#18824f} .inv-gold{background:#fff4d8;color:#c6860a} .inv-red{background:#ffe4e6;color:#be123c} .inv-purple{background:#f1eaff;color:#7a4bd8} .cat-list{display:grid;gap:.2rem} .cat-list-item{display:flex;align-items:center;justify-content:space-between;padding:.55rem .75rem;border-radius:.4rem;cursor:pointer;font-size:.875rem;color:#334155;transition:background .12s} .cat-list-item:hover{background:#f8fafc} .cat-list-item.active{background:#eff6ff;color:#1d4ed8;font-weight:700} .cat-count{background:#f1f5f9;color:#64748b;border-radius:999px;padding:.15rem .55rem;font-size:.75rem;font-weight:700} .low-stock-item{display:grid;grid-template-columns:2.4rem minmax(0,1fr);grid-template-rows:auto auto;column-gap:.55rem;row-gap:.15rem;padding:.65rem 0;border-bottom:1px solid #f1f5f9;align-items:start;min-width:0} .low-stock-item:last-child{border-bottom:0} .low-stock-item .inv-item-logo-wrap{grid-row:1/span 2;align-self:center} .low-stock-info{grid-column:2;grid-row:1;min-width:0;overflow:hidden} .low-stock-info strong{display:block;font-size:.82rem;font-weight:700;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .low-stock-info small{display:block;font-size:.72rem;color:#94a3b8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .low-stock-qty{grid-column:2;grid-row:2;font-size:.72rem;font-weight:700;color:#dc2626;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%} .stock-in-qty{color:#16a34a;font-weight:800} .stock-out-qty{color:#dc2626;font-weight:800} .stock-transfer-qty{color:#7c3aed;font-weight:800} /* ===== INVENTORY FORMS & CAT LIST END ===== */ /* ===== FOOTER START ===== */ .erp-footer{text-align:center;padding:1.25rem;font-size:.8rem;color:#94a3b8;border-top:1px solid #e5e7eb;margin-top:1rem} @media (max-width:1280px){.inv-stats-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.inventory-layout{grid-template-columns:1fr}.inventory-sidebar{grid-template-columns:repeat(2,minmax(0,1fr))}.inv-cat-list-scroll,.inv-alerts-scroll{max-height:12rem}} @media (max-width:900px){.inv-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filter-bar{flex-direction:column;align-items:stretch}.filter-selects{flex-wrap:wrap}} @media (max-width:640px){.inv-stats-grid{grid-template-columns:1fr}.inventory-sidebar{grid-template-columns:1fr}.page-header-row{flex-direction:column}} /* ===== FOOTER END ===== */ /* ===== SORT BUTTON START ===== */ .sort-btn{display:inline-flex;align-items:center;gap:.3rem;background:none;border:0;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer;white-space:nowrap} .sort-btn svg{width:.8rem;height:.8rem;opacity:.5} /* ===== SORT BUTTON END ===== */ /* ===== CALENDAR v2 START ===== */ .cal-page-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,19.5rem);gap:.85rem;align-items:start} .cal-page-compact{margin:-.15rem 0 0} .cal-main-card{overflow-x:auto;box-shadow:0 1px 3px rgba(15,23,42,.06);min-width:0} .cal-grid-v2{display:grid;grid-template-columns:repeat(7,1fr);overflow:hidden;min-width:40rem;border:1px solid var(--cal-border);border-radius:.6rem} .cal-header{padding:.9rem 1.25rem .0rem;border-bottom:0} .cal-page-title{margin:0;font-size:1.1rem;font-weight:800;color:#0f172a} .cal-month-picker{position:relative;display:inline-flex;align-items:center;border:1px solid var(--cal-border);border-radius:18px;background:var(--erp-surface);padding:0 .9rem;box-shadow:0 8px 30px rgba(28,25,23,.06)} .cal-month-select{appearance:none;min-height:2.75rem;padding:.55rem 2.35rem .55rem .85rem;border:0;background:transparent;font-size:1.05rem;font-weight:800;color:#0f172a;cursor:pointer;line-height:1.1} .cal-month-picker .cal-month-chevron{position:absolute;right:1rem;pointer-events:none;width:1rem!important;height:1rem!important;color:#64748b} .cal-month-select:focus{outline:none;box-shadow:0 0 0 6px rgba(59,130,246,.12);border-color:#3b82f6} .cal-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.75rem 1.25rem;flex-wrap:wrap} .cal-toolbar-left{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap} .cal-toolbar-right{display:flex;align-items:center;gap:.6rem;flex-wrap:nowrap} .cal-today-btn{min-height:2.2rem;padding:0 .85rem;font-size:.82rem;border-radius:.4rem;background:var(--erp-surface-raised);color:var(--erp-text-soft);font-weight:600;cursor:pointer} .cal-today-btn:hover{background:var(--erp-surface-soft)} .cal-nav-btn{width:2rem;height:2rem;display:grid;place-items:center;border-radius:.4rem;background:#fff;cursor:pointer} .cal-nav-btn svg{width:.85rem!important;height:.85rem!important;max-width:none!important;max-height:none!important} .cal-month-label{display:inline-flex;align-items:center;gap:.3rem;font-size:1.05rem;font-weight:800;color:#0f172a;padding:0 .2rem;cursor:default} .cal-month-chevron{width:.8rem!important;height:.8rem!important;max-width:none!important;max-height:none!important;color:#64748b} .cal-view-tabs{display:flex;align-items:stretch;border-radius:.4rem;overflow:hidden;height:2.2rem;flex-shrink:0} .cal-view-tab{min-height:0;height:100%;padding:0 .85rem;border:0;background:var(--erp-surface-raised);font-size:.82rem;font-weight:600;color:var(--erp-muted);cursor:pointer;border-right:1px solid var(--cal-border);display:inline-flex;align-items:center;justify-content:center;flex:1 1 auto;white-space:nowrap} .cal-view-tab:last-child{border-right:0} .cal-view-tab.active{background:#0d1828;color:#fff} .cal-hall-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;min-height:2.6rem;border:1px solid var(--cal-border);border-radius:999px;background:var(--erp-surface-raised);padding:0 .95rem;font-size:.85rem;color:var(--erp-text-soft);max-width:100%;cursor:pointer;grid-template-columns:repeat(7,1fr)} .cal-head-v2{padding:.5rem .4rem;text-align:center;font-size:.75rem;font-weight:700;text-transform:uppercase;color:#64748b;border-bottom:1px solid var(--cal-border)} .cal-cell{min-height:5.5rem;padding:.45rem .4rem;border-right:1px solid var(--cal-border);border-bottom:1px solid var(--cal-border);cursor:pointer;display:flex;flex-direction:column;gap:.2rem;transition:background .1s;min-width:0} .cal-cell:hover{background:#f8fafc} .cal-cell.muted{background:#fafafa} .cal-cell.today .cal-day-num{background:var(--erp-blue);color:#fff;border-radius:999px} .cal-cell.selected{background:#eff6ff;box-shadow:inset 0 0 0 2px var(--erp-blue);border-radius:.4rem;position:relative;z-index:1} .cal-day-num{font-size:.8rem;font-weight:700;color:#334155;width:1.5rem;height:1.5rem;display:grid;place-items:center;margin-bottom:.05rem} .cal-cell.muted .cal-day-num{color:var(--erp-muted-2)} .cal-event-pill{display:block;border-radius:.25rem;padding:.18rem .4rem;font-size:.7rem;font-weight:700;max-width:100%;overflow:hidden;line-height:1.35} .cal-event-pill .cal-pill-line,.cal-event-pill .cal-pill-sub{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal-event-pill.confirmed,.cal-event-pill.completed,.cal-event-pill.booked{background:#dc2626;color:#fff;border:1px solid #b91c1c} .cal-event-pill.pending{background:#eab308;color:#fff;border:1px solid #ca8a04} .cal-event-pill.tentative{background:#eab308;color:#fff;border:1px solid #ca8a04} .cal-pill-line{display:block;font-weight:700;line-height:1.25} .cal-pill-sub{display:block;font-size:.62rem;font-weight:600;opacity:.9;line-height:1.2;margin-top:.05rem} .cal-event-pill.cancelled{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca} .cal-event-pill.available{background:#16a34a;color:#fff;border:1px solid #15803d} .cal-more{font-size:.68rem;color:#64748b;font-weight:600;padding-left:.2rem} .cal-legend-v2{display:flex;justify-content:center;gap:1.75rem;padding:.7rem;border-top:1px solid var(--cal-border);font-size:.8rem;color:#64748b} .cal-legend-v2 span{display:flex;align-items:center;gap:.4rem} .cal-legend-v2 i{width:.9rem;height:.65rem;border-radius:.2rem;display:inline-block} .leg-booked{background:#dc2626}.leg-available{background:#16a34a} .leg-tentative{background:#eab308} .cal-sidebar-v2{display:grid;gap:.85rem;min-width:0;max-width:100%;align-content:start} .cal-sidebar-card{padding:1rem 1rem;min-width:0;overflow:hidden;box-shadow:0 1px 3px rgba(15,23,42,.06)} .cal-legend-list{display:grid;gap:.55rem} .cal-legend-item{display:flex;align-items:flex-start;gap:.6rem;font-size:.82rem;color:#334155;line-height:1.35;word-break:break-word} .cal-leg-swatch{width:.9rem;height:.9rem;border-radius:.2rem;flex:0 0 auto;display:inline-block} .leg-dot{width:.9rem;height:.9rem;border-radius:.2rem;flex:0 0 auto} .cal-no-events{display:grid;place-items:center;text-align:center;padding:1.25rem;background:#f0fdf4;border-radius:.45rem;gap:.3rem;color:#15803d} .cal-no-events svg{width:1.4rem!important;height:1.4rem!important;max-width:none!important;max-height:none!important} .cal-no-events strong{font-size:.875rem} .cal-no-events small{color:#64748b;font-size:.78rem} .cal-book-btn{display:flex;align-items:center;justify-content:center;width:100%;margin-top:.75rem;font-size:.8rem;padding:.5rem .9rem;text-decoration:none;border-radius:.4rem;box-sizing:border-box} .cal-day-event{padding:.65rem .7rem;background:#f8fafc;border-radius:.4rem;margin-bottom:.5rem;border:1px solid var(--cal-border);min-width:0;overflow:hidden} .cal-day-event:last-child{margin-bottom:0} .cal-day-event-top{margin-bottom:.35rem} .cal-day-event-name{font-size:.875rem;font-weight:700;color:#0f172a;margin-bottom:.15rem;word-break:break-word;line-height:1.3} .cal-day-event-meta{font-size:.78rem;color:#64748b;word-break:break-word;line-height:1.35} .cal-day-event-time{font-size:.78rem;color:#64748b;margin-top:.1rem} .cal-day-event-link{font-size:.75rem;display:inline-block;margin-top:.4rem} .cal-sidebar-heading{margin:0 0 .65rem;font-size:.88rem;font-weight:700;color:#0f172a;line-height:1.25;word-break:break-word} .cal-sidebar-heading-row{display:flex;justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.65rem;min-width:0} .cal-sidebar-heading-row .cal-sidebar-heading{min-width:0} .cal-upcoming-list{max-height:17.5rem;overflow-y:auto;overflow-x:hidden;margin:0 -.15rem;padding:0 .15rem;-webkit-overflow-scrolling:touch} .cal-upcoming-list::-webkit-scrollbar{width:5px} .cal-upcoming-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px} .cal-upcoming-item{display:grid;grid-template-columns:2.65rem minmax(0,1fr);gap:.55rem .5rem;padding:.65rem 0;border-bottom:1px solid var(--cal-border-soft);text-decoration:none;color:inherit;min-width:0;transition:background .12s} .cal-upcoming-item:last-child{border-bottom:0;padding-bottom:0} .cal-upcoming-item:hover{background:#f8fafc;border-radius:.35rem} .cal-upcoming-date{width:2.65rem;text-align:center;flex:0 0 auto;grid-row:1/span 2;align-self:start;padding-top:.1rem} .cal-upcoming-date strong{display:block;font-size:1.05rem;font-weight:800;line-height:1;color:#0f172a} .cal-upcoming-date small{display:block;font-size:.6rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.03em;margin-top:.1rem} .cal-upcoming-body{min-width:0;overflow:hidden} .cal-upcoming-top{display:flex;align-items:flex-start;justify-content:space-between;gap:.35rem;min-width:0;flex-wrap:wrap} .cal-week-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--cal-border);border-radius:.6rem;overflow:hidden;width:100%;min-width:40rem} .cal-week-col{border-right:1px solid var(--cal-border);min-height:12rem;display:flex;flex-direction:column;overflow:hidden} .cal-week-col:last-child{border-right:none} .cal-week-col.today{background:#f8fafc} .cal-week-col.selected{background:transparent;position:relative;z-index:1} .cal-week-col.selected .cal-week-head{background:var(--erp-surface);} .cal-upcoming-badge{font-size:.62rem!important;white-space:nowrap;flex:0 0 auto;max-width:5.25rem;overflow:hidden;text-overflow:ellipsis;padding:.22rem .42rem!important;line-height:1.2;min-width:auto!important} .cal-view-all{font-size:.75rem;font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0} .cal-sidebar-card .status-badge{max-width:100%} .cal-sidebar-empty{margin:0;font-size:.78rem;color:#94a3b8} @media (max-width:1280px){.cal-page-layout{grid-template-columns:1fr}.cal-sidebar-v2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:768px){.cal-sidebar-v2{grid-template-columns:1fr}.cal-toolbar{flex-direction:column;align-items:stretch}} .cal-week-head{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;padding:.95rem .55rem .75rem;border-bottom:1px solid var(--cal-border);background:var(--erp-surface);width:100%} .cal-week-head-label{font-size:.72rem;font-weight:700;text-transform:uppercase;color:#94a3b8;letter-spacing:.14em;line-height:1} .cal-week-head-date{font-size:1.2rem;font-weight:800;color:var(--erp-text);line-height:1} .cal-week-body{padding:.6rem .55rem .85rem;flex:1;display:grid;gap:.45rem} .cal-week-head strong{display:block;font-size:1.05rem;font-weight:800} .cal-upcoming-name{font-size:.8rem;font-weight:700;color:#0f172a;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.3} .cal-upcoming-type{font-size:.74rem;color:#64748b;margin-top:.12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cal-upcoming-time{font-size:.7rem;color:#94a3b8;margin-top:.08rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cal-list-wrap{padding:.5rem 1rem .85rem} .cal-list-row{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1.25rem;padding:1.15rem 1.25rem;border:1px solid var(--cal-border);border-radius:.6rem;margin-bottom:.85rem;background:var(--erp-surface);transition:border .2s,box-shadow .2s} .cal-list-row:hover{border-color:var(--erp-blue);box-shadow:0 6px 16px rgba(15,23,42,.04)} .cal-list-row:last-child{margin-bottom:0} .cal-list-date{width:3.2rem;text-align:center;border-right:1px solid var(--cal-border-soft);padding-right:1.25rem} .cal-list-date strong{display:block;font-size:1.25rem;font-weight:800;line-height:1} .cal-list-date small{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;margin-top:.15rem} .cal-list-info{min-width:0} .cal-list-info .font-medium{font-size:.95rem;font-weight:700;margin-bottom:.2rem} .cal-list-info small{font-size:.8rem;display:flex;align-items:center;gap:.35rem;flex-wrap:wrap} @media (max-width:640px){.cal-list-row{grid-template-columns:auto 1fr;gap:.85rem;padding:.85rem}.cal-list-row .status-badge{grid-column:2;justify-self:start;margin-top:.25rem}.cal-list-date{padding-right:.85rem}} .cal-week-nav{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.1rem .2rem;border-bottom:1px solid var(--cal-border-soft)} .cal-week-range{font-size:.85rem;font-weight:600;color:#334155} .cal-week-grid{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--cal-border);border-radius:.6rem;overflow:hidden;width:100%;min-width:40rem} .cal-week-col{border-right:1px solid var(--cal-border);min-height:12rem} .cal-week-col.today{background:#f8fafc} .cal-week-col.selected{background:#eff6ff;position:relative;z-index:1} .cal-upcoming-badge{font-size:.62rem!important;white-space:nowrap;flex:0 0 auto;max-width:5.25rem;overflow:hidden;text-overflow:ellipsis;padding:.22rem .42rem!important;line-height:1.2;min-width:auto!important} .cal-view-all{font-size:.75rem;font-weight:600;text-decoration:none;white-space:nowrap;flex-shrink:0} .cal-sidebar-card .status-badge{max-width:100%} .cal-sidebar-empty{margin:0;font-size:.78rem;color:#94a3b8} @media (max-width:1280px){.cal-page-layout{grid-template-columns:1fr}.cal-sidebar-v2{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:768px){.cal-sidebar-v2{grid-template-columns:1fr}.cal-toolbar{flex-direction:column;align-items:stretch}} .cal-week-head{padding:.5rem .4rem;text-align:center;border-bottom:1px solid var(--cal-border)} .cal-week-head span{display:block;font-size:.7rem;font-weight:700;text-transform:uppercase;color:#64748b} .cal-week-head strong{display:block;font-size:.95rem;font-weight:800} .cal-week-body{padding:.4rem} /* ===== CALENDAR v2 END ===== */ /* ===== BOOKING DETAIL (SHOW) START ===== */ .bk-topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:1.25rem;flex-wrap:wrap} .bk-topbar-left{display:flex;align-items:center;gap:.85rem} .bk-title{margin:0;font-size:1.25rem;font-weight:800} .bk-subtitle{margin:.15rem 0 0;font-size:.875rem;color:#64748b} .bk-topbar-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;overflow:visible} .bk-action-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.6rem;padding:0 1rem;font-size:.875rem;font-weight:600;border-radius:.45rem;cursor:pointer} .bk-action-btn svg{width:1rem;height:1rem} .bk-more-dropdown{position:relative;overflow:visible} .bk-more-dropdown:hover .bk-dropdown-menu{display:block} .bk-more-dropdown-click:hover .bk-dropdown-menu{display:none} .bk-more-dropdown-click .bk-dropdown-menu{z-index:10050} .bk-more-dropdown-click.is-open .bk-dropdown-menu{display:block!important} .bk-dropdown-menu{display:none;position:absolute;right:0;top:100%;margin-top:.35rem;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem;box-shadow:0 8px 24px rgba(15,23,42,.12);min-width:11rem;z-index:10050;overflow:hidden} .bk-dropdown-item{display:block;width:100%;padding:.7rem 1rem;text-align:left;border:0;background:transparent;font-size:.875rem;color:#334155;cursor:pointer} .bk-dropdown-item:hover{background:#f8fafc} .bk-dropdown-danger{color:#dc2626} .bk-dropdown-danger:hover{background:#fef2f2} .bk-tabs{display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:1.25rem;overflow-x:auto} .bk-tab{padding:.7rem 1.25rem;border:0;background:transparent;font-size:.875rem;font-weight:600;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap} .bk-tab:hover{color:#334155} .bk-tab.active{color:#0d1828;border-bottom-color:#0d1828} .bk-body-layout{display:grid;grid-template-columns:minmax(0,1fr) 19rem;gap:1.25rem;align-items:start} .bk-main-col{display:grid;gap:1.25rem} .bk-sidebar-col{display:grid;gap:1.25rem} .bk-section-title{margin:0 0 .1rem;font-size:1rem;font-weight:700} .bk-details-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.85rem 1.5rem;margin-top:.85rem} .bk-details-grid>div{display:grid;gap:.2rem} .bk-details-grid span{font-size:.78rem;color:#64748b;font-weight:600;text-transform:uppercase} .bk-details-grid strong{font-size:.9rem;color:#0f172a} .bk-inv-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem 1.5rem} .bk-inv-meta>div{display:grid;gap:.2rem} .bk-inv-meta span{font-size:.78rem;color:#64748b;font-weight:600;text-transform:uppercase} .bk-inv-meta strong{font-size:.9rem;color:#0f172a} .bk-bill-summary{border:1px solid var(--erp-border);border-radius:.5rem;overflow:hidden} .bk-bill-row{display:flex;justify-content:space-between;align-items:center;padding:.7rem 1rem;border-bottom:1px solid var(--erp-border);font-size:.875rem} .bk-bill-row:last-child{border-bottom:0} .bk-bill-total{background:var(--erp-surface-soft);font-weight:800;font-size:.95rem} .bk-bill-balance{background:#fef2f2;color:#dc2626;font-weight:800;font-size:.95rem} .bk-sidebar-card{padding:0;overflow:hidden} .bk-sidebar-card-header{display:flex;align-items:center;gap:.6rem;padding:.9rem 1.1rem;border-bottom:1px solid var(--erp-border);font-size:.875rem;font-weight:700;color:var(--erp-text-soft)} .bk-sidebar-card-header svg{width:1rem;height:1rem;color:var(--erp-muted)} .bk-bill-to{padding:.9rem 1.1rem;display:grid;gap:.2rem;font-size:.875rem;color:var(--erp-text-soft)} .bk-bill-to strong{font-size:.95rem;font-weight:800} .bk-bill-to span{color:var(--erp-muted)} .bk-summary-rows{padding:.5rem 0} .bk-summary-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem 1.1rem;font-size:.875rem} .bk-summary-row strong{font-weight:800} .bk-balance-due{color:#dc2626} .bk-action-list{border-top:1px solid var(--erp-border)} .bk-action-row{display:flex;align-items:center;gap:.65rem;width:100%;padding:.8rem 1.1rem;border:0;background:transparent;font-size:.875rem;color:var(--erp-text-soft);cursor:pointer;border-bottom:1px solid var(--erp-border);text-align:left} .bk-action-row:hover{background:var(--erp-surface-soft)} .bk-action-row svg{width:1rem;height:1rem;color:var(--erp-muted);flex:0 0 auto} .bk-action-chevron{margin-left:auto;width:.85rem!important;height:.85rem!important;color:var(--erp-border)!important} .bk-action-hint{display:flex;align-items:flex-start;gap:.6rem;padding:.85rem 1.1rem;background:#f5f2eb;font-size:.78rem;color:#8b6914;line-height:1.5} .bk-action-hint svg{width:1rem;height:1rem;flex:0 0 auto;margin-top:.1rem} .bk-balance-banner{display:flex;justify-content:space-between;align-items:center;padding:1rem;background:#fef2f2;border-radius:.45rem;color:#dc2626} .bk-balance-banner span{font-size:.875rem;font-weight:600} .bk-balance-banner strong{font-size:1.25rem;font-weight:800} .bk-timeline{display:grid;gap:0} .bk-timeline-item{display:flex;gap:.85rem;padding:.85rem 0;border-bottom:1px solid var(--erp-border);position:relative} .bk-timeline-item:last-child{border-bottom:0} .bk-timeline-dot{width:.85rem;height:.85rem;border-radius:50%;flex:0 0 auto;margin-top:.25rem} .bk-timeline-dot.confirmed{background:#16a34a} .bk-timeline-dot.tentative{background:#d97706} .bk-timeline-dot.cancelled{background:#dc2626} .bk-timeline-content strong{display:block;font-size:.875rem;font-weight:700} .bk-timeline-content small{display:block;font-size:.78rem;color:var(--erp-muted);margin-top:.15rem} /* Booking show — overview & billing */ .bk-show-page .bk-tab.active{color:#2176ff;border-bottom-color:#2176ff} .bk-card-title{margin:0;font-size:1rem;font-weight:700;color:var(--erp-text)} .bk-card-head-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-bottom:.85rem;flex-wrap:wrap} .bk-panel-card{padding:1.25rem} .bk-info-card{padding:1.25rem} .bk-dl{display:grid;gap:.75rem;margin:.5rem 0 0} .bk-dl>div{display:grid;gap:.15rem} .bk-dl dt{font-size:.72rem;font-weight:700;color:var(--erp-text-soft);text-transform:uppercase;letter-spacing:.03em} .bk-dl dd{margin:0;font-size:.9rem;font-weight:700;color:var(--erp-text)} .bk-text-paid{color:#16a34a!important} .bk-text-due{color:#dc2626!important} .bk-text-paid-row strong,.bk-text-due-row strong{font-weight:800} .bk-overview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem} .bk-overview-grid .bk-span-wide{grid-column:1/-1} .bk-pill-contact{font-size:.72rem;font-weight:700;color:#1d4ed8;background:#eff6ff;padding:.25rem .6rem;border-radius:999px} .bk-client-row{display:flex;gap:1rem;align-items:flex-start;margin-top:.5rem} .bk-client-avatar{width:2.75rem;height:2.75rem;border-radius:50%;background:#0d1828;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.1rem;flex:0 0 auto} .bk-client-details{display:grid;gap:.35rem} .bk-client-details strong{font-size:1rem} .bk-client-details span{display:flex;align-items:center;gap:.45rem;font-size:.875rem;color:#475569} .bk-client-details svg{width:.95rem;height:.95rem;color:#94a3b8;flex:0 0 auto} .bk-link-btn{border:0;background:transparent;color:#2176ff;font-size:.82rem;font-weight:700;cursor:pointer;padding:0} .bk-link-btn:hover{text-decoration:underline} .bk-th-right{text-align:right!important} .bk-cat-badge{display:inline-block;padding:.2rem .55rem;border-radius:.35rem;font-size:.72rem;font-weight:700} .bk-cat-venue{background:#dbeafe;color:#1d4ed8} .bk-cat-catering{background:#e0f2fe;color:#0369a1} .bk-cat-decoration{background:#ffedd5;color:#c2410c} .bk-cat-equipment{background:#f3e8ff;color:#7e22ce} .bk-cat-services{background:#ecfdf5;color:#15803d} .bk-tfoot-total td{background:#f8fafc;font-weight:700} .bk-services-table{margin-top:0} .bk-empty-msg{margin:.5rem 0 0;font-size:.875rem;color:#64748b} .bk-notes-box{margin-top:.75rem;padding:1rem;background:#f8fafc;border-radius:.45rem;font-size:.875rem;line-height:1.6;color:#334155;white-space:pre-wrap} .bk-sidebar-title{margin:0;padding:.9rem 1.1rem;border-bottom:1px solid #e5e7eb;font-size:.875rem;font-weight:700;color:#334155} .bk-record-pay-btn{display:block;width:calc(100% - 2.2rem);margin:0 1.1rem 1rem;text-align:center} .bk-schedule-list{list-style:none;margin:0;padding:.75rem 1.1rem;display:grid;gap:.85rem} .bk-schedule-list li{display:flex;gap:.65rem;align-items:flex-start;font-size:.875rem} .bk-schedule-icon{width:1.25rem;height:1.25rem;border-radius:50%;background:#e2e8f0;color:#64748b;display:grid;place-items:center;font-size:.7rem;font-weight:800;flex:0 0 auto} .bk-schedule-done .bk-schedule-icon{background:#dcfce7;color:#16a34a} .bk-schedule-list strong{display:block;font-weight:700} .bk-schedule-list small{display:block;color:#64748b;margin-top:.1rem} .bk-activity-list{padding:.5rem 1.1rem 1rem;display:grid;gap:.75rem} .bk-activity-item{display:flex;gap:.65rem;align-items:flex-start} .bk-activity-dot{width:.65rem;height:.65rem;border-radius:50%;margin-top:.35rem;flex:0 0 auto} .bk-activity-dot.confirmed{background:#16a34a} .bk-activity-dot.tentative{background:#d97706} .bk-activity-item strong{display:block;font-size:.82rem;font-weight:700} .bk-activity-item small{display:block;font-size:.75rem;color:#64748b;margin-top:.1rem} .bk-billing-layout{display:grid;gap:1.25rem} .bk-inv-info-card .bk-dl-inv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem 1.5rem} .bk-billing-row-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,20rem);gap:1.25rem;align-items:start} .bk-billing-items{min-width:0;overflow:hidden} .bk-invoice-summary{display:flex;flex-direction:column;gap:0;margin-top:.5rem} .bk-sum-row{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 0;border-bottom:1px solid #f1f5f9;font-size:.875rem;flex-wrap:nowrap} .bk-sum-row span,.bk-sum-row strong{white-space:nowrap} .bk-sum-row:last-child{border-bottom:0} .bk-sum-tax-group{padding:.35rem 0;border-bottom:1px solid #f1f5f9;margin-bottom:.15rem} .bk-sum-tax-group .bk-sum-row{border-bottom-color:#f8fafc;padding:.45rem 0} .bk-sum-tax-label{display:block;font-size:.72rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.03em;margin-bottom:.25rem} .bk-sum-total{font-weight:700;font-size:.95rem;padding-top:.35rem;border-top:1px solid #e5e7eb;margin-top:.15rem} .bk-sum-paid strong{color:#16a34a} .bk-sum-balance{background:#fef2f2;margin-top:.35rem;padding:.75rem .5rem!important;border-radius:.4rem;border-bottom:0!important} .bk-sum-balance span,.bk-sum-balance strong{color:#dc2626;font-weight:800} .bk-invoice-summary-card{align-self:start;min-width:0;overflow:hidden} .bk-invoice-notes-block{margin-top:.5rem;padding:1rem;background:#f8fafc;border-radius:.45rem;font-size:.875rem;color:#475569;line-height:1.55} .bk-bill-to-sidebar{padding:.25rem 1.1rem 1rem;display:grid;gap:.25rem;font-size:.875rem;color:#334155} .bk-bill-to-sidebar strong{font-size:.95rem;font-weight:700} .bk-bill-to-sidebar span{color:#64748b} .bk-cat-equipment{background:#fce7f3;color:#be185d} .bk-bill-to-block{display:grid;gap:.25rem;margin-top:.5rem;font-size:.875rem;color:#334155} .bk-bill-to-block strong{font-size:.95rem} .bk-bill-to-block span{color:#64748b} .bk-terms-details{margin-top:1rem;border-top:1px solid #f1f5f9;padding-top:.75rem} .bk-terms-details summary{font-size:.82rem;font-weight:600;color:#2176ff;cursor:pointer} .bk-invoice-notes{margin-top:.65rem;font-size:.875rem;color:#475569;line-height:1.55} .bk-mini-btn{padding:.35rem .75rem;font-size:.78rem} .bk-client-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:.75rem;align-items:start} .bk-client-left{display:grid;gap:.75rem} .bk-client-name-row{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap} .bk-client-name-row strong{font-size:1rem} .bk-dl-side{gap:.65rem} .bk-btn-view-services{display:inline-flex;align-items:center;padding:.45rem .85rem;border:1px solid #d7dce4;border-radius:.45rem;background:#fff;color:#334155;font-size:.82rem;font-weight:600;cursor:pointer} .bk-btn-view-services:hover{background:#f8fafc} .bk-sidebar-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.9rem 1.1rem;border-bottom:1px solid #e5e7eb} .bk-sidebar-title-inline{margin:0;padding:0;border:0} .bk-record-pay-btn{display:inline-flex!important;align-items:center;justify-content:center;gap:.5rem} .bk-record-pay-btn svg{width:1rem;height:1rem} .bk-schedule-due{color:#dc2626;font-weight:700} .bk-activity-timeline{padding:.75rem 1.1rem 1rem;display:grid;gap:0;position:relative} .bk-activity-timeline::before{content:'';position:absolute;left:calc(1.1rem + .9rem);top:1.5rem;bottom:1rem;width:2px;background:#e2e8f0;z-index:0} .bk-activity-timeline .bk-activity-item{display:flex;gap:.75rem;align-items:flex-start;padding:.65rem 0;position:relative;z-index:1} .bk-activity-icon{width:1.85rem;height:1.85rem;border-radius:50%;display:grid;place-items:center;flex:0 0 auto} .bk-activity-icon svg{width:.95rem;height:.95rem} .bk-activity-icon.payment{background:#dcfce7;color:#16a34a} .bk-activity-icon.confirmed{background:#dbeafe;color:#2563eb} .bk-activity-icon.created{background:#dbeafe;color:#2563eb} .bk-activity-timeline .bk-activity-item strong{display:block;font-size:.82rem;font-weight:700;color:#0f172a} .bk-activity-timeline .bk-activity-item small{display:block;font-size:.75rem;color:#64748b;margin-top:.15rem;line-height:1.4} @media (max-width:1100px){ .bk-overview-grid{grid-template-columns:1fr} .bk-billing-row-main{grid-template-columns:1fr} .bk-inv-info-card .bk-dl-inv-grid{grid-template-columns:repeat(2,1fr)} .bk-client-grid{grid-template-columns:1fr} } @media (max-width:720px){ .bk-inv-info-card .bk-dl-inv-grid{grid-template-columns:1fr} } @media (max-width:1100px){.bk-body-layout{grid-template-columns:1fr}.bk-inv-meta{grid-template-columns:repeat(2,1fr)}} @media (max-width:720px){.bk-topbar{flex-direction:column}.bk-details-grid{grid-template-columns:1fr}.bk-inv-meta{grid-template-columns:1fr}} /* ===== BOOKING DETAIL (SHOW) END ===== */ /* ===== WALK-IN CSS START ===== */ :root { /* Color Palette */ --wi-color-primary: #0b1528; /* Dark Slate/Navy */ --wi-color-accent: #c09e6c; /* Muted Gold */ --wi-color-accent-hover: #b08f5d; /* Darker Gold */ --wi-color-text-main: #1c1917; /* Warm Dark Text */ --wi-color-text-muted: #44403c; /* Warm Muted Text */ --wi-color-text-light: #a8a29e; /* Icon/Placeholder Gray */ --wi-color-bg-card: #fafaf9; /* Card Background */ --wi-color-border: #d6d3cc; /* Light Input Border */ --wi-color-border-focus: #a8a29e; /* Focused Input Border */ /* Status & Notification Colors */ --wi-color-error: #dc2626; /* Red Validation */ --wi-color-info-bg: #eff6ff; /* Light Blue Banner */ --wi-color-info-border: #bfdbfe; /* Blue Banner Border */ --wi-color-info-text: #1e3a8a; /* Dark Blue Text */ --wi-color-success-bg: #f0fdf4; /* Light Green Flash */ --wi-color-success-border: #bbf7d0;/* Green Flash Border */ --wi-color-success-text: #166534; /* Dark Green Text */ /* Typography & Sizing */ --wi-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --wi-radius-lg: 8px; --wi-radius-md: 6px; --wi-input-height: 42px; --wi-btn-height: 40px; } /* Container & Base Card */ .erp-card.wi-form-card { background: var(--wi-color-bg-card); border-radius: var(--wi-radius-lg); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); padding: 24px; font-family: var(--wi-font-family); color: var(--wi-color-text-main); } /* Headings */ .wi-section-title { font-size: 16px; font-weight: 600; color: var(--wi-color-text-main); margin: 0 0 24px 0; } .wi-section-subtitle { font-size: 15px; font-weight: 600; color: var(--wi-color-text-main); margin: 0 0 16px 0; } /* Grid Layout Alignment */ .form-grid { display: grid; gap: 16px; margin-bottom: 20px; } .form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); } /* Custom 2-Column layouts for Note + Sidebar Stack */ .form-grid.inquiry { grid-template-columns: 2fr 1fr; } .side-fields { display: flex; flex-direction: column; gap: 16px; } /* Labels */ .wi-form-body label { display: block; font-size: 13px; font-weight: 500; color: var(--wi-color-text-muted); margin-bottom: 6px; } .wi-form-body label b { color: var(--wi-color-error); margin-left: 2px; } /* Inputs, Selects & Textareas Styling */ .wi-input-wrap { position: relative; display: flex; align-items: center; } .wi-input-wrap input, .wi-input-wrap select, .wi-input-wrap textarea { width: 100%; height: var(--wi-input-height); padding: 8px 12px; font-size: 14px; color: var(--theme-text-primary, var(--wi-color-text-main)); background-color: var(--theme-input-bg, var(--wi-color-bg-card)); border: 1px solid var(--theme-input-border, var(--wi-color-border)); border-radius: var(--wi-radius-md); outline: none; transition: border-color 0.15s ease-in-out; } /* Padding modifier for inputs with prefix icons */ .wi-input-wrap svg + input, .wi-input-wrap svg + textarea { padding-left: 38px; } /* Icon Positionings */ .wi-input-wrap > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: var(--wi-color-text-light); pointer-events: none; } /* Dropdown custom down arrow element injection */ .wi-input-wrap select { appearance: none; padding-right: 32px; } /* Textarea modifications */ .wi-input-wrap.wi-textarea-wrap { align-items: flex-start; } .wi-input-wrap.wi-textarea-wrap > svg { top: 13px; } .wi-textarea { min-height: 104px; resize: vertical; } /* Active Focus Highlight states */ .wi-input-wrap input:focus, .wi-input-wrap select:focus, .wi-input-wrap textarea:focus { border-color: var(--theme-input-border-focus, var(--wi-color-border-focus)); } /* Placeholder font styling */ ::placeholder { color: var(--wi-color-text-light); opacity: 1; } /* Decorative Section Divider line */ .wi-divider { height: 1px; background-color: var(--erp-border); margin: 24px 0; } /* Quick Actions Alert Box Banner */ .info-line { display: flex; align-items: center; gap: 10px; background-color: var(--wi-color-info-bg); border: 1px solid var(--wi-color-info-border); border-radius: var(--wi-radius-md); padding: 12px 16px; font-size: 13px; color: var(--wi-color-info-text); margin-bottom: 24px; } .info-line svg { width: 16px; height: 16px; color: #2563eb; flex-shrink: 0; } /* Actions Button Row Alignment */ .form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; } /* Custom Base Button definitions */ .form-actions button { height: var(--wi-btn-height); padding: 0 20px; font-size: 14px; font-weight: 500; border-radius: var(--wi-radius-md); cursor: pointer; transition: all 0.15s ease-in-out; border: none; } /* Reset Button Style */ .btn-outline { background-color: var(--wi-color-bg-card); color: var(--wi-color-text-muted); border: 1px solid var(--wi-color-border) !important; } .btn-outline:hover { background-color: #f8fafc; } /* Save Walk-in Button Style */ .btn-dark { background-color: var(--wi-color-primary); color: #ffffff; } .btn-dark:hover { background-color: #16243d; } /* Convert to Reservation Button Style */ .btn-gold { background-color: var(--wi-color-accent); color: #ffffff; } .btn-gold:hover { background-color: var(--wi-color-accent-hover); } /* Error Validations Messaging */ .error { display: block; color: var(--wi-color-error); font-size: 12px; margin-top: 4px; } /* Top Banner Success Flash Alert notification popup rules */ .wi-flash-success { display: flex; align-items: center; gap: 8px; background-color: var(--wi-color-success-bg); border: 1px solid var(--wi-color-success-border); color: var(--wi-color-success-text); padding: 12px 16px; border-radius: var(--wi-radius-md); margin-bottom: 16px; font-size: 14px; } .wi-flash-success svg { width: 16px; height: 16px; color: var(--wi-color-success-text); } /* ===== WALK-IN CSS END ===== */ /* ===== BOOKINGS INDEX — FILTER BAR START ===== */ .bk-filter-card{margin-bottom:1.25rem;padding:1.25rem 1.5rem} .bk-filter-row{display:flex;align-items:flex-end;gap:1rem;flex-wrap:wrap} .bk-filter-search-col{flex:1;min-width:16rem} .bk-filter-labeled-col{display:flex;flex-direction:column;gap:.4rem;min-width:10rem} .bk-filter-btn-col{display:flex;flex-direction:column;gap:.4rem} .bk-filter-label{font-size:.78rem;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap} .bk-filter-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;min-height:2.75rem;border:1px solid var(--erp-border-strong);border-radius:.55rem;background:var(--erp-surface-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%2378716c' stroke-width='1.8'%3E%3Cpolyline points='6 8 10 12 14 8'/%3E%3C/svg%3E") no-repeat right .9rem center;padding:0 .95rem 0 .75rem;font-size:.875rem;color:var(--erp-text-soft);cursor:pointer} .bk-filter-select::-ms-expand{display:none} .bk-filter-actions{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap} .bk-filter-btn{display:inline-flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:0 1.35rem;font-size:.875rem;font-weight:700;white-space:nowrap} .bk-filter-btn svg{width:.9rem;height:.9rem;max-width:none!important;max-height:none!important} .bk-clear-btn{border-color:#cbd5e1;color:#334155;background:#fff;white-space:nowrap} .bk-clear-btn:hover{border-color:#94a3b8;background:#f8fafc} .bk-new-btn{display:inline-flex;align-items:center;gap:.5rem} .bk-new-btn svg{width:1rem;height:1rem;max-width:none!important;max-height:none!important} /* Responsive — filter bar + walk-in + calendar */ @media (max-width:1100px){.cal-page-layout{grid-template-columns:1fr}.bk-filter-row{flex-wrap:wrap}.bk-filter-labeled-col{min-width:calc(50% - .5rem)}} @media (max-width:720px){ .bk-filter-row{flex-direction:column;align-items:stretch} .bk-filter-search-col,.bk-filter-labeled-col,.bk-filter-btn-col{width:100%} .wi-form-body{padding:1rem} .wi-section-header{padding:1rem 1rem 0} .form-grid.three{grid-template-columns:1fr} .cal-grid-v2{min-width:auto} .cal-grid-v2 .cal-cell{min-height:4.5rem;padding:0.25rem} .cal-grid-v2 .cal-head-v2{font-size:.7rem;padding:.35rem .2rem} .cal-event-pill{display:block;padding:0.15rem 0.25rem;font-size:0.65rem} .cal-event-pill .cal-pill-sub{display:none} .cal-day-num{font-size:.75rem;width:1.25rem;height:1.25rem;margin-bottom:0.1rem} } @media (max-width:480px){ .cal-toolbar-left{flex-direction:column;align-items:stretch;width:100%} .cal-toolbar-right{flex-direction:row;flex-wrap:nowrap;align-items:stretch;width:100%;gap:.5rem} .cal-month-picker{justify-content:center;width:100%} .cal-today-btn{width:100%;justify-content:center} .cal-view-tabs{flex:1;min-width:0} .cal-hall-select{flex:1;min-width:0;font-size:.75rem;padding-left:.4rem;padding-right:1.75rem!important} .cal-view-tab{flex:1;text-align:center;padding:0 .15rem;font-size:.7rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .cal-grid-v2{min-width:auto} .cal-grid-v2 .cal-cell{min-height:4rem;padding:0.15rem;gap:0.15rem} .cal-event-pill{font-size:0.6rem;padding:0.1rem 0.2rem;border-radius:0.15rem} } /* ===== BOOKINGS INDEX — FILTER BAR END ===== */ /* ===== ROOM RESERVATIONS INDEX START ===== */ .room-reservations-page{display:grid;gap:1.25rem} .room-reservations-flash{margin:0} .room-reservations-flash svg{width:1rem;height:1rem;max-width:none!important;max-height:none!important} .room-reservations-header{margin-bottom:0} .room-reservations-header .page-title{margin:0} .room-reservations-header .page-subtitle{margin:.25rem 0 0} .room-reservations-filter{margin-bottom:0} .room-reservations-status-filter{min-width:15rem} .room-reservations-list{overflow:hidden} .room-reservations-table-wrap{overflow-x:auto} .room-reservations-table{min-width:64rem} .room-reservations-table th,.room-reservations-table td{vertical-align:middle} .room-reservations-table th:last-child,.room-reservations-table td:last-child{min-width:16rem} .room-reservation-number{font-weight:800;white-space:nowrap} .room-reservation-customer{display:block;font-weight:700;color:#0f172a} .room-reservation-secondary{display:block;margin-top:.2rem;color:#64748b;font-size:.78rem;line-height:1.3} .room-reservation-dates{display:grid;gap:.35rem} .room-reservation-dates>span{display:flex;align-items:center;gap:.45rem;white-space:nowrap;font-weight:600;color:#334155} .room-reservation-dates small{min-width:3.7rem;color:#94a3b8;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.025em} .room-reservation-room-tags{display:flex;align-items:center;flex-wrap:wrap;gap:.35rem} .room-reservation-room-tag{display:inline-flex;align-items:center;justify-content:center;min-width:2.2rem;height:1.75rem;padding:0 .55rem;border:1px solid var(--erp-border);border-radius:.4rem;background:var(--erp-surface-soft);color:var(--erp-text-soft);font-size:.78rem;font-weight:800} .room-reservation-status{display:inline-flex;align-items:center;justify-content:center;min-height:1.8rem;padding:.3rem .7rem;border-radius:999px;font-size:.72rem;font-weight:800;white-space:nowrap} .room-reservation-status.status-pending{background:#fff7db;color:#9a6700} .room-reservation-status.status-confirmed{background:#dbeafe;color:#1d4ed8} .room-reservation-status.status-checkedin{background:#dcfce7;color:#15803d} .room-reservation-status.status-checkedout{background:#e2e8f0;color:#475569} .room-reservation-status.status-cancelled{background:#fee2e2;color:#b91c1c} .room-reservation-status.status-available{background:#dcfce7;color:#15803d} .room-reservation-status.status-reserved{background:#dbeafe;color:#1d4ed8} .room-reservation-status.status-occupied{background:#fee2e2;color:#b91c1c} .room-reservation-status.status-maintenance{background:#e2e8f0;color:#475569} .room-reservation-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.45rem} .room-reservation-action{display:inline-flex;align-items:center;justify-content:center;min-height:2rem;padding:0 .65rem;border:1px solid transparent;border-radius:.4rem;font-size:.75rem;font-weight:800;text-decoration:none!important;white-space:nowrap;transition:background .15s,border-color .15s,color .15s,transform .15s} .room-reservation-action:hover{transform:translateY(-1px)} .room-reservation-action.action-checkin{background:#ecfdf5;border-color:#bbf7d0;color:#047857} .room-reservation-action.action-checkin:hover{background:#d1fae5} .room-reservation-action.action-checkout{background:#fff7ed;border-color:#fed7aa;color:#c2410c} .room-reservation-action.action-checkout:hover{background:#ffedd5} .room-reservation-action.action-billing{background:#eff6ff;border-color:#bfdbfe;color:#1d4ed8} .room-reservation-action.action-billing:hover{background:#dbeafe} .room-reservation-actions .action-btn{width:2rem;height:2rem;min-width:2rem;min-height:2rem;padding:0} .room-reservation-actions .action-btn svg{width:.9rem!important;height:.9rem!important;max-width:none!important;max-height:none!important} .room-reservation-delete{color:#dc2626} .room-reservation-delete:hover{background:#fef2f2!important;border-color:#fecaca!important;color:#b91c1c!important} .room-reservations-footer{min-height:4rem} .room-reservation-edit-modal{max-width:48rem} .room-reservation-modal-heading{margin:1.5rem 0 1rem;color:#0f172a;font-size:1rem} .room-reservation-room-error{margin-bottom:1rem} .room-reservation-room-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(11rem,1fr));gap:.75rem} .room-reservation-room-option{display:flex!important;grid-auto-flow:column;align-items:flex-start;gap:.75rem;padding:.85rem;border:1px solid var(--erp-border);border-radius:.55rem;background:var(--erp-surface-soft);color:var(--erp-text-soft);cursor:pointer;transition:background .15s,border-color .15s,box-shadow .15s} .room-reservation-room-option:hover{background:var(--erp-surface-raised);border-color:#93c5fd;box-shadow:0 4px 12px rgba(28,25,23,.06)} .room-reservation-room-option:has(input:checked){background:#eff6ff;border-color:#60a5fa;box-shadow:0 0 0 2px rgba(59,130,246,.1)} .room-reservation-room-option input{width:1rem;height:1rem;margin:.15rem 0 0;accent-color:#2563eb;flex:0 0 auto} .room-reservation-room-option strong{display:block;color:#1d4ed8;font-size:1rem} .room-reservation-room-option span{display:block;margin-top:.1rem;color:#64748b;font-size:.8rem;font-weight:500} .room-reservation-no-rooms{grid-column:1/-1;padding:1rem;border:1px dashed #cbd5e1;border-radius:.55rem;color:#64748b;font-size:.85rem;text-align:center} .room-reservation-modal-actions{margin-top:2rem} .room-reservation-delete-modal{max-width:24rem;text-align:center} .room-reservation-delete-content{margin:1rem 0 2rem} .room-reservation-delete-content svg{width:3rem;height:3rem;margin:0 auto;color:#ef4444} .room-reservation-delete-content h3{margin-top:1rem;color:#dc2626} .room-reservation-delete-content p{margin-top:.5rem;color:#64748b;font-size:.9rem;line-height:1.55} .room-reservation-delete-actions{display:flex;justify-content:center;gap:.75rem;padding-bottom:1rem} .room-reservation-confirm-delete{background:#dc2626!important;border-color:#dc2626!important} .room-reservation-confirm-delete:hover{background:#b91c1c!important} .dark .room-reservation-customer{color:#f8fafc} .dark .room-reservation-secondary{color:#94a3b8} .dark .room-reservation-dates>span{color:#e2e8f0} .dark .room-reservation-dates small{color:#94a3b8} .dark .room-reservation-room-tag{background:#081225;border-color:#334155;color:#cbd5e1} .dark .room-reservation-status.status-pending{background:rgba(245,158,11,.2);color:#fcd34d} .dark .room-reservation-status.status-confirmed{background:rgba(59,130,246,.2);color:#93c5fd} .dark .room-reservation-status.status-checkedin{background:rgba(34,197,94,.2);color:#86efac} .dark .room-reservation-status.status-checkedout{background:rgba(148,163,184,.2);color:#cbd5e1} .dark .room-reservation-status.status-cancelled{background:rgba(239,68,68,.2);color:#fca5a5} .dark .room-reservation-status.status-available{background:rgba(34,197,94,.2);color:#86efac} .dark .room-reservation-status.status-reserved{background:rgba(59,130,246,.2);color:#93c5fd} .dark .room-reservation-status.status-occupied{background:rgba(239,68,68,.2);color:#fca5a5} .dark .room-reservation-status.status-maintenance{background:rgba(148,163,184,.2);color:#cbd5e1} .dark .room-reservation-action.action-checkin{background:rgba(16,185,129,.13);border-color:rgba(52,211,153,.25);color:#6ee7b7} .dark .room-reservation-action.action-checkout{background:rgba(245,158,11,.13);border-color:rgba(251,191,36,.25);color:#fcd34d} .dark .room-reservation-action.action-billing{background:rgba(59,130,246,.13);border-color:rgba(96,165,250,.25);color:#93c5fd} .dark .room-reservation-delete:hover{background:rgba(239,68,68,.13)!important;border-color:rgba(248,113,113,.25)!important;color:#fca5a5!important} .dark .room-reservation-modal-heading{color:#f8fafc} .dark .room-reservation-room-option{background:#081225;border-color:#334155;color:#e2e8f0} .dark .room-reservation-room-option:hover{background:#0f1d35;border-color:#60a5fa} .dark .room-reservation-room-option:has(input:checked){background:rgba(37,99,235,.16);border-color:#60a5fa} .dark .room-reservation-room-option strong{color:#93c5fd} .dark .room-reservation-room-option span,.dark .room-reservation-no-rooms,.dark .room-reservation-delete-content p{color:#94a3b8} .dark .room-reservation-no-rooms{border-color:#475569} @media (max-width:900px){ .room-reservations-header{align-items:flex-start} .room-reservations-status-filter{min-width:12rem} } @media (max-width:720px){ .room-reservations-header{align-items:stretch} .room-reservations-header .bk-new-btn{width:100%;justify-content:center} .room-reservations-status-filter{min-width:0} .room-reservations-footer{align-items:flex-start;gap:.75rem} .room-reservation-delete-actions{flex-direction:column} .room-reservation-delete-actions .btn-outline,.room-reservation-delete-actions .btn-dark{width:100%} } /* ===== ROOM RESERVATIONS INDEX END ===== */ /* ===== ERP PAGINATION START ===== */ .erp-pagination{display:flex;align-items:center;justify-content:flex-end} .erp-pg-mobile{display:flex;gap:.5rem} .erp-pg-full{display:flex;align-items:center;gap:.3rem} @media (min-width:640px){.erp-pg-mobile{display:none}.erp-pg-full{display:flex}} @media (max-width:639px){.erp-pg-mobile{display:flex}.erp-pg-full{display:none}} .erp-pg-btn{display:inline-flex;align-items:center;justify-content:center;min-width:2.1rem;height:2.1rem;padding:0 .5rem;border:1px solid var(--erp-border-strong);border-radius:.4rem;background:var(--erp-surface-raised);color:var(--erp-muted);font-size:.82rem;font-weight:600;cursor:pointer;transition:background .12s,border-color .12s,color .12s;text-decoration:none;line-height:1;white-space:nowrap} .erp-pg-btn:hover:not(.erp-pg-disabled):not(.erp-pg-active){background:var(--erp-surface-soft);border-color:var(--erp-border-strong);color:var(--erp-text)} .erp-pg-active{background:#0d1828!important;border-color:#0d1828!important;color:#fff!important;font-weight:700} .erp-pg-disabled{opacity:.45;cursor:default;pointer-events:none} .erp-pg-dots{border:0;background:transparent;cursor:default;color:#94a3b8;padding:0 .25rem} .erp-pg-arrow{min-width:2.1rem;padding:0} .erp-pg-arrow svg{width:.85rem!important;height:.85rem!important;max-width:none!important;max-height:none!important} /* ===== ERP PAGINATION END ===== */ /* ===== HALLS PAGE START ===== */ .halls-new-btn{display:inline-flex;align-items:center;gap:.45rem} .halls-new-btn svg{width:.95rem!important;height:.95rem!important;max-width:none!important;max-height:none!important} /* Stats row */ .halls-stats-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.25rem} .halls-stat-card{background:var(--erp-surface);border:1px solid var(--erp-border);border-radius:.65rem;box-shadow:var(--erp-shadow);padding:1rem 1.15rem;display:flex;align-items:center;gap:.85rem} .halls-stat-card>div>span{display:block;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--erp-muted)} .halls-stat-card>div>strong{display:block;font-size:1.55rem;font-weight:800;line-height:1.1;color:var(--erp-text);margin-top:.15rem} .halls-stat-icon{width:3rem;height:3rem;display:grid;place-items:center;border-radius:.55rem;flex:0 0 auto} .halls-stat-icon svg{width:1.3rem!important;height:1.3rem!important;max-width:none!important;max-height:none!important} .halls-icon-blue{background:#e8f3ff;color:#2d87dd} .halls-icon-green{background:#e8f8ee;color:#18824f} .halls-icon-red{background:#ffe4e6;color:#be123c} .halls-icon-gold{background:#fff4d8;color:#c6860a} /* Amenity tags in table */ .halls-amenity-tags{display:flex;flex-wrap:wrap;gap:.25rem;max-width:14rem} .halls-amenity-tag{display:inline-flex;align-items:center;padding:.15rem .45rem;background:var(--erp-surface-soft);color:var(--erp-muted);border-radius:.25rem;font-size:.7rem;font-weight:600;white-space:nowrap} .halls-amenity-more{display:inline-flex;align-items:center;padding:.15rem .45rem;background:#e0e7ff;color:#3730a3;border-radius:.25rem;font-size:.7rem;font-weight:700} /* Booking count badge */ .halls-booking-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.6rem;height:1.6rem;background:var(--erp-surface-soft);color:var(--erp-text-soft);border-radius:.35rem;font-size:.8rem;font-weight:700;padding:0 .35rem} /* Status toggle button */ .halls-status-toggle{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .7rem;border-radius:999px;font-size:.75rem;font-weight:700;border:0;cursor:pointer;transition:background .15s} .halls-status-toggle.active{background:#dcfce7;color:#15803d} .halls-status-toggle.active:hover{background:#bbf7d0} .halls-status-toggle.inactive{background:#fee2e2;color:#b91c1c} .halls-status-toggle.inactive:hover{background:#fecaca} .halls-status-dot{width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:0 0 auto} /* Amenities grid in modal */ .halls-amenities-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem} .halls-amenity-check{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;border:1px solid #e2e8f0;border-radius:.4rem;cursor:pointer;font-size:.82rem;font-weight:500;color:#334155;transition:background .12s,border-color .12s;line-height:1.3} .halls-amenity-check:hover{background:#f8fafc;border-color:#cbd5e1} .halls-amenity-check input{width:.9rem;height:.9rem;flex:0 0 auto;cursor:pointer;margin:0;accent-color:#0d1828} .halls-amenity-check:has(input:checked){background:#eff6ff;border-color:#93c5fd;color:#1e40af;font-weight:700} .halls-active-row{display:flex!important;flex-direction:row!important;align-items:center;gap:.65rem;padding:.65rem .85rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:.45rem;cursor:pointer} .halls-active-row input{width:1.05rem;height:1.05rem;flex:0 0 auto;cursor:pointer;margin:0;accent-color:#0d1828} .halls-active-label{font-weight:700;color:#0f172a;font-size:.875rem} .halls-active-hint{color:#64748b;font-size:.78rem;font-weight:400} @media (max-width:1100px){.halls-stats-row{grid-template-columns:repeat(2,1fr)}} @media (max-width:640px){.halls-stats-row{grid-template-columns:1fr}.halls-amenities-grid{grid-template-columns:repeat(2,1fr)}} /* ===== HALLS PAGE END ===== */ /* ===== GST BILLING PAGE START ===== */ .gst-layout{display:grid;grid-template-columns:minmax(0,1fr) 22rem;gap:1.25rem;align-items:start} /* Main panel */ .gst-main{overflow:hidden} .gst-header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.35rem;border-bottom:1px solid var(--erp-border);flex-wrap:wrap} .gst-title{margin:0;font-size:1.05rem;font-weight:800;color:var(--erp-text)} .gst-invoice-select{min-height:2.3rem;border:1px solid var(--erp-border-strong);border-radius:.4rem;background:var(--erp-surface-raised);padding:0 .75rem;font-size:.82rem;color:var(--erp-text-soft);max-width:18rem} .gst-header-right{display:flex;align-items:center;gap:.75rem} /* Sections */ .gst-section{padding:1.1rem 1.35rem;border-bottom:1px solid var(--erp-border)} .gst-section:last-child{border-bottom:0} .gst-section-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem} .gst-section-title{margin:0 0 .85rem;font-size:.9rem;font-weight:700;color:var(--erp-text)} .gst-view-booking-btn{display:inline-flex;align-items:center;gap:.35rem;font-size:.78rem;font-weight:700;color:#1d4ed8;border:1px solid #bfdbfe;border-radius:.35rem;padding:.3rem .65rem;background:#eff6ff;text-decoration:none;transition:background .12s} .gst-view-booking-btn:hover{background:#dbeafe} .gst-view-booking-btn svg{width:.75rem!important;height:.75rem!important;max-width:none!important;max-height:none!important} /* Details grid — 2 columns of label:value pairs */ .gst-details-grid{display:grid;grid-template-columns:1fr 1fr;gap:.45rem .5rem} .gst-detail-row{display:grid;grid-template-columns:9rem 1fr;gap:.25rem;font-size:.82rem;align-items:baseline} .gst-detail-row span{color:var(--erp-text-soft);font-weight:500} .gst-detail-row b{color:var(--erp-text);font-weight:700} /* Items table */ .gst-items-table{margin-bottom:0} .gst-remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.6rem;height:1.6rem;border:0;background:transparent;color:var(--erp-muted);cursor:pointer;border-radius:.3rem} .gst-remove-btn:hover{background:#fee2e2;color:#dc2626} .gst-remove-btn svg{width:.8rem!important;height:.8rem!important;max-width:none!important;max-height:none!important} /* Add charge row */ .gst-add-row{display:flex;align-items:center;gap:.6rem;margin-top:.85rem;flex-wrap:wrap} .gst-add-input{flex:1;min-width:12rem;min-height:2.4rem;border:1px solid var(--erp-border-strong);border-radius:.4rem;background:var(--erp-surface-raised);padding:0 .75rem;font-size:.82rem;color:var(--erp-text-soft)} .gst-add-amount{width:8rem;min-height:2.4rem;border:1px solid var(--erp-border-strong);border-radius:.4rem;background:var(--erp-surface-raised);padding:0 .75rem;font-size:.82rem;color:var(--erp-text-soft)} .gst-add-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:2.4rem;padding:0 1rem;border:1px solid var(--erp-border-strong);border-radius:.4rem;background:var(--erp-surface-raised);color:var(--erp-text-soft);font-size:.82rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s} .gst-add-btn:hover{background:#f8fafc;border-color:#94a3b8} .gst-add-btn svg{width:.8rem!important;height:.8rem!important;max-width:none!important;max-height:none!important} /* Empty state */ .gst-empty{display:grid;place-items:center;text-align:center;padding:3rem 1.5rem;gap:.5rem;color:var(--erp-muted)} .gst-empty svg{width:2.5rem!important;height:2.5rem!important;max-width:none!important;max-height:none!important;color:var(--erp-border);margin-bottom:.25rem} .gst-empty strong{font-size:.95rem;color:var(--erp-text-soft)} .gst-empty small{font-size:.82rem} /* Sidebar */ .gst-sidebar{display:grid;gap:1rem} .gst-summary-card{padding:1.25rem} .gst-actions-card{padding:1.25rem} .gst-summary-title{margin:0 0 1rem;font-size:.9rem;font-weight:700;color:var(--erp-text)} /* Summary rows */ .gst-summary-rows{display:grid;gap:0} .gst-sum-row{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0;font-size:.82rem;border-bottom:1px solid var(--erp-border)} .gst-sum-row:last-child{border-bottom:0} .gst-sum-row span{color:var(--erp-text-soft)} .gst-sum-row b{font-weight:700;color:var(--erp-text)} .gst-sum-bold{font-weight:700} .gst-sum-bold span{color:var(--erp-text);font-weight:700} .gst-sum-bold b{font-weight:800} .gst-sum-muted span{color:var(--erp-muted)} .gst-sum-muted b{color:var(--erp-muted);font-weight:600} .gst-sum-grand{background:#fef3c7;margin:0 -.25rem;padding:.6rem .25rem;border-radius:.35rem;border-bottom:0!important} .gst-sum-grand span{color:#78350f;font-weight:700;font-size:.875rem} .gst-sum-grand b{color:#78350f;font-weight:800;font-size:.95rem} .gst-sum-divider{height:1px;background:var(--erp-border);margin:.35rem 0} /* Balance box */ .gst-balance-box{display:flex;align-items:center;justify-content:space-between;margin-top:1rem;padding:.9rem 1rem;background:#dcfce7;border:1px solid #86efac;border-radius:.5rem} .gst-balance-label{font-size:.82rem;font-weight:700;color:#14532d} .gst-balance-hint{font-size:.72rem;font-weight:600;color:#166534;margin-top:.1rem} .gst-balance-amount{font-size:1.2rem;font-weight:800;color:#14532d} /* Action buttons */ .gst-action-btns{display:grid;gap:.5rem} .gst-action-btn{display:flex;align-items:center;gap:.65rem;width:100%;min-height:2.6rem;padding:0 1rem;border:1px solid var(--erp-border);border-radius:.45rem;background:var(--erp-surface-raised);color:var(--erp-text-soft);font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s} .gst-action-btn:hover{background:#f8fafc;border-color:#cbd5e1} .gst-action-btn svg{width:1rem!important;height:1rem!important;max-width:none!important;max-height:none!important;color:#64748b;flex:0 0 auto} .gst-action-primary{background:#0d1828;color:#fff;border-color:#0d1828} .gst-action-primary:hover{background:#1e293b;border-color:#1e293b} .gst-action-primary svg{color:#fff;flex:0 0 auto} @media (max-width:1100px){.gst-layout{grid-template-columns:1fr}} @media (max-width:720px){ .gst-layout{grid-template-columns:1fr} .gst-header{flex-direction:column;align-items:flex-start;gap:.75rem} .gst-header-right{width:100%} .gst-invoice-select{width:100%;max-width:100%} .gst-details-grid{grid-template-columns:1fr} .gst-detail-row{grid-template-columns:1fr} .gst-add-row{flex-direction:column;align-items:stretch;gap:.75rem} .gst-add-input,.gst-add-amount{width:100%} .gst-section{padding:1rem} .gst-sidebar{order:-1} .gst-action-btns{gap:.65rem} .gst-action-btn{width:100%;justify-content:center} .gst-balance-box{flex-direction:column;align-items:flex-start;gap:.6rem} .gst-section .dashboard-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.5) transparent} .gst-section .dashboard-table-wrap::-webkit-scrollbar{height:.45rem;width:.45rem} .gst-section .dashboard-table-wrap::-webkit-scrollbar-track{background:transparent} .gst-section .dashboard-table-wrap::-webkit-scrollbar-thumb{background:rgba(148,163,184,.5);border-radius:.35rem} .gst-section .dashboard-table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.8)} .gst-items-table, .gst-section .dashboard-table{min-width:620px;table-layout:auto} .gst-section .dashboard-table{width:auto} .gst-items-table th,.gst-items-table td, .gst-section .dashboard-table th,.gst-section .dashboard-table td{white-space:nowrap} .gst-section table{width:auto;min-width:620px} .gst-section table thead tr{display:table-row} } @media (max-width:520px){ .gst-header{gap:.6rem} .gst-section{padding:.9rem} .gst-add-row{gap:.6rem} .gst-section .dashboard-table-wrap{padding-bottom:1rem} .gst-items-table th,.gst-items-table td, .gst-section .dashboard-table th,.gst-section .dashboard-table td{font-size:.75rem} } /* ===== GST BILLING PAGE END ===== */ /* ===== INVOICE ITEM & BILL SUMMARY STYLES ===== */ /* Summary Cards */ .inv-summary-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:0.6rem;margin-bottom:1.25rem} .inv-sum-card{display:flex;flex-direction:column;padding:0.7rem 0.85rem;border-radius:0.5rem;border:1px solid;transition:all .2s ease} .inv-sum-card .inv-sum-label{font-size:0.68rem;font-weight:600;text-transform:uppercase;letter-spacing:0.03em;margin-bottom:0.25rem} .inv-sum-card .inv-sum-value{font-size:1rem;font-weight:800} .inv-sum-card-blue{background:#eff6ff;border-color:#bfdbfe;color:#1e40af} .inv-sum-card-blue .inv-sum-label{color:#3b82f6} .inv-sum-card-blue .inv-sum-value{color:#1e3a8a} .inv-sum-card-gray{background:#f8fafc;border-color:#e2e8f0;color:#475569} .inv-sum-card-gray .inv-sum-label{color:#64748b} .inv-sum-card-gray .inv-sum-value{color:#334155} .inv-sum-card-amber{background:#fffbeb;border-color:#fde68a;color:#b45309} .inv-sum-card-amber .inv-sum-label{color:#f59e0b} .inv-sum-card-amber .inv-sum-value{color:#92400e} .inv-sum-card-indigo{background:#eef2ff;border-color:#c7d2fe;color:#4338ca} .inv-sum-card-indigo .inv-sum-label{color:#6366f1} .inv-sum-card-indigo .inv-sum-value{color:#3730a3} .inv-sum-card-green{background:#f0fdf4;border-color:#bbf7d0;color:#166534} .inv-sum-card-green .inv-sum-label{color:#22c55e} .inv-sum-card-green .inv-sum-value{color:#14532d} .inv-sum-card-purple{background:#faf5ff;border-color:#e9d5ff;color:#7e22ce} .inv-sum-card-purple .inv-sum-label{color:#a855f7} .inv-sum-card-purple .inv-sum-value{color:#6b21a8} .inv-sum-card-rose{background:#fff1f2;border-color:#fecdd3;color:#be123c} .inv-sum-card-rose .inv-sum-label{color:#f43f5e} .inv-sum-card-rose .inv-sum-value{color:#9f1239} /* Summary Card animation */ .inv-sum-card{animation:invFadeIn .3s ease} @keyframes invFadeIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}} /* Category badge */ .inv-cat-badge{font-size:0.75rem;padding:0.15rem 0.5rem;background:#f1f5f9;border-radius:999px;color:#475569;white-space:nowrap} /* Item actions */ .inv-item-actions{display:flex;gap:0.3rem;justify-content:flex-end} .inv-edit-btn,.gst-remove-btn{display:inline-flex;align-items:center;justify-content:center;width:1.75rem;height:1.75rem;border:none;border-radius:0.35rem;cursor:pointer;transition:all .12s} .inv-edit-btn{background:#f1f5f9;color:#64748b} .inv-edit-btn:hover{background:#e2e8f0;color:#334155} .inv-edit-btn svg,.gst-remove-btn svg{width:0.9rem!important;height:0.9rem!important} /* Field label */ .inv-field-label{font-size:0.7rem;font-weight:700;color:#64748b;display:block;margin-bottom:0.2rem} /* Live Preview */ .inv-preview{display:flex;align-items:center;gap:1rem;padding:0.6rem 1rem;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:0.5rem;margin-top:0.6rem;flex-wrap:wrap} .inv-preview-label{font-size:0.72rem;font-weight:700;color:#166534;text-transform:uppercase;letter-spacing:0.04em} .inv-preview-items{display:flex;gap:1rem;flex-wrap:wrap} .inv-preview-items span{font-size:0.82rem;color:#374151} .inv-preview-items b{color:#14532d} .inv-preview-total{font-weight:700} .inv-preview-total b{font-size:0.95rem;color:#15803d!important} /* Item row animation */ .inv-item-row{transition:background .15s} .inv-item-row:hover{background:#f8fafc} /* Dark mode adjustments */ .dark .inv-sum-card-blue{background:#1e3a5f;border-color:#1e40af} .dark .inv-sum-card-blue .inv-sum-label{color:#60a5fa} .dark .inv-sum-card-blue .inv-sum-value{color:#93c5fd} .dark .inv-sum-card-gray{background:#1e293b;border-color:#334155} .dark .inv-sum-card-gray .inv-sum-label{color:#94a3b8} .dark .inv-sum-card-gray .inv-sum-value{color:#cbd5e1} .dark .inv-sum-card-amber{background:#451a03;border-color:#92400e} .dark .inv-sum-card-amber .inv-sum-label{color:#fbbf24} .dark .inv-sum-card-amber .inv-sum-value{color:#fcd34d} .dark .inv-sum-card-indigo{background:#1e1b4b;border-color:#3730a3} .dark .inv-sum-card-indigo .inv-sum-label{color:#818cf8} .dark .inv-sum-card-indigo .inv-sum-value{color:#a5b4fc} .dark .inv-sum-card-green{background:#052e16;border-color:#166534} .dark .inv-sum-card-green .inv-sum-label{color:#4ade80} .dark .inv-sum-card-green .inv-sum-value{color:#86efac} .dark .inv-sum-card-purple{background:#3b0764;border-color:#6b21a8} .dark .inv-sum-card-purple .inv-sum-label{color:#c084fc} .dark .inv-sum-card-purple .inv-sum-value{color:#d8b4fe} .dark .inv-sum-card-rose{background:#4c0519;border-color:#9f1239} .dark .inv-sum-card-rose .inv-sum-label{color:#fb7185} .dark .inv-sum-card-rose .inv-sum-value{color:#fda4af} .dark .inv-preview{background:#052e16;border-color:#166534} .dark .inv-preview-label{color:#4ade80} .dark .inv-preview-items span{color:#cbd5e1} .dark .inv-preview-items b{color:#86efac} .dark .inv-preview-total b{color:#4ade80!important} .dark .inv-cat-badge{background:#1e293b;color:#94a3b8} /* ===== INVOICE ITEM & BILL SUMMARY STYLES END ===== */ /* ===== ADVANCE RECEIPT PAGE START ===== */ .ar-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(16rem,22rem);gap:1.25rem;align-items:start;min-width:0} .ar-form-card{padding:1.35rem} .ar-preview-col{display:grid;gap:0} .ar-preview-card{padding:1.25rem} .ar-section-title{margin:0 0 1.1rem;font-size:.95rem;font-weight:700;color:var(--erp-text)} /* Readonly inputs */ .ar-readonly{opacity:1!important;cursor:default!important} .ar-total{font-weight:700;font-size:1rem;color:var(--erp-text)!important;background:#f5faf5!important} /* Form actions row */ .ar-form-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.35rem;flex-wrap:wrap;padding-top:1rem;border-top:1px solid #e5e7eb} .ar-print-check{display:flex;align-items:center;gap:.55rem;font-size:.875rem;font-weight:500;color:var(--erp-text-soft);cursor:pointer} .ar-print-check input{width:1rem;height:1rem;cursor:pointer;accent-color:#0d1828} /* ── Receipt Paper ── */ .ar-paper{border:1px solid var(--erp-border);border-radius:.55rem;padding:1.1rem;background:var(--erp-surface);font-size:.78rem} .ar-paper-header{display:grid;grid-template-columns:minmax(0,1fr) minmax(9.5rem,auto);align-items:center;gap:1rem;margin-bottom:1rem} .ar-paper-brand{display:flex;align-items:center;gap:.8rem;min-width:0} .ar-paper-logo{width:2.75rem;height:2.75rem;display:grid;place-items:center;background:#0d1828;border-radius:.4rem;flex:0 0 auto} .ar-paper-logo svg{width:1.5rem!important;height:1.5rem!important;max-width:none!important;max-height:none!important;stroke:#e4bd75} .ar-paper-biz-name{font-size:.9rem;font-weight:900;color:var(--erp-text);line-height:1.2;letter-spacing:.03em} .ar-paper-biz-sub{font-size:.72rem;color:var(--erp-muted);font-weight:600;margin-top:.12rem} .ar-paper-biz-contact{font-size:.72rem;color:var(--erp-muted);margin-top:.18rem;line-height:1.35} .ar-paper-badge-col{text-align:right;flex:0 0 auto} .ar-paper-badge{display:inline-block;background:#0d1828;color:#fff;font-size:.66rem;font-weight:800;padding:.32rem .65rem;border-radius:.25rem;letter-spacing:.06em;margin-bottom:.5rem} .ar-paper-receipt-meta{display:grid;grid-template-columns:auto auto;gap:.18rem .75rem;align-items:center;text-align:right} .ar-paper-meta-label{font-size:.66rem;color:var(--erp-muted);font-weight:800;text-transform:uppercase;letter-spacing:.04em;text-align:left} .ar-paper-meta-val{font-size:.82rem;font-weight:800;color:var(--erp-text);text-align:right;white-space:nowrap} .ar-paper-divider{height:1px;background:var(--erp-border);margin:.65rem 0} .ar-paper-info{display:grid;gap:.3rem;margin-bottom:.75rem} .ar-paper-info-row{display:flex;gap:.5rem;font-size:.75rem} .ar-paper-info-row span{color:var(--erp-text-soft);min-width:6.5rem;flex:0 0 auto} .ar-paper-info-row b{color:var(--erp-text);font-weight:700} .ar-paper-table{width:100%;border-collapse:collapse;margin-bottom:.65rem;font-size:.75rem} .ar-paper-table th,.ar-paper-table td{padding:.4rem .55rem;border:1px solid var(--erp-border-strong);text-align:left} .ar-paper-table thead th{background:var(--erp-surface-soft);font-weight:800;color:var(--erp-text-soft);font-size:.7rem;text-transform:uppercase} .ar-paper-table tfoot th{background:var(--erp-surface-soft);font-weight:800;color:var(--erp-text)} .ar-paper-table td:last-child,.ar-paper-table th:last-child{text-align:right} .ar-paper-words{margin-bottom:.65rem;padding:.5rem .6rem;background:var(--erp-surface-soft);border-radius:.35rem} .ar-paper-words-label{font-size:.65rem;font-weight:800;color:var(--erp-text-soft);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.15rem} .ar-paper-words-val{font-size:.75rem;font-weight:700;color:var(--erp-text)} .ar-paper-sig-row{display:flex;justify-content:space-between;align-items:flex-end;margin-top:.65rem;padding-top:.65rem;border-top:1px solid var(--erp-border)} .ar-paper-sig-label{font-size:.65rem;color:var(--erp-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em} .ar-paper-sig-name{font-size:.78rem;font-weight:700;color:var(--erp-text);margin-top:.15rem} .ar-paper-sig-line{width:6rem;height:1px;background:var(--erp-text-soft);margin-bottom:.25rem;margin-left:auto} /* Preview action buttons */ .ar-preview-actions{display:flex;gap:.5rem;margin-top:.85rem} .ar-preview-btn{display:inline-flex;align-items:center;gap:.65rem;flex:1;justify-content:center;min-height:2.6rem;padding:0 1rem;border:1px solid var(--erp-border);border-radius:.45rem;background:var(--erp-surface-raised);color:var(--erp-text-soft);font-size:.82rem;font-weight:600;cursor:pointer;text-decoration:none;transition:background .12s,border-color .12s} .ar-preview-btn:hover{background:#f8fafc;border-color:#cbd5e1} .ar-preview-btn svg{width:1rem!important;height:1rem!important;max-width:none!important;max-height:none!important;color:#64748b;flex:0 0 auto} /* Disclaimer */ .ar-disclaimer{display:flex;align-items:flex-start;gap:.5rem;margin-top:.75rem;padding:.6rem .75rem;background:#fef3c7;border-radius:.4rem;font-size:.72rem;color:#78350f;font-weight:600;line-height:1.5} .ar-disclaimer svg{width:.85rem!important;height:.85rem!important;max-width:none!important;max-height:none!important;flex:0 0 auto;margin-top:.05rem;color:#92400e} @media (max-width:1200px){ .ar-layout{grid-template-columns:1fr;max-width:100%} .ar-preview-col{max-width:42rem;margin:0 auto;width:100%} } @media (max-width:768px){ .form-grid.two{grid-template-columns:1fr} } @media (max-width:720px){ .ar-layout{gap:1rem;max-width:100%} .ar-form-card, .ar-preview-card{padding:1rem} .ar-section-title{font-size:.9rem} .ar-paper{padding:.9rem} .ar-paper-header{flex-direction:column;align-items:flex-start;gap:.85rem} .ar-paper-badge-col{text-align:left;width:100%} .ar-paper-receipt-meta{text-align:left} .ar-paper-info-row{flex-direction:column;align-items:flex-start;gap:.35rem} .ar-paper-info-row span{min-width:auto;flex:0 0 auto} .ar-paper-table th,.ar-paper-table td{padding:.45rem .55rem;font-size:.72rem} .ar-paper-table thead th{font-size:.7rem} .ar-paper-words{padding:.55rem .6rem} .ar-paper-sig-row{flex-direction:column;align-items:flex-start;gap:.75rem} .ar-paper-sig-line{margin-left:0} .ar-preview-actions{flex-direction:column} .ar-preview-btn{width:100%} .ar-form-actions{flex-direction:column;align-items:stretch;gap:.75rem} .ar-form-actions > div{display:flex;flex-direction:column;gap:.75rem;width:100%} .ar-print-check{width:100%;justify-content:flex-start} } @media (max-width:520px){ .page-header-row{margin-bottom:.85rem} .page-title{font-size:1.35rem} .page-subtitle{font-size:.95rem} .ar-form-card{padding:.95rem} .ar-preview-card{padding:.95rem} .ar-paper{font-size:.72rem} .ar-paper-logo{width:2rem;height:2rem} .ar-paper-biz-name{font-size:.72rem} .ar-paper-biz-sub, .ar-paper-biz-contact, .ar-paper-meta-val{font-size:.7rem} } /* ===== ADVANCE RECEIPT PAGE END ===== */ /* ===== EMAIL TEMPLATES LIST RESPONSIVE START ===== */ @media (max-width: 1180px){ .et-list-layout{grid-template-columns:1fr!important} .et-list-layout .erp-card:last-child{position:static!important;max-width:100%} } /* ===== EMAIL TEMPLATES LIST RESPONSIVE END ===== */ /* ===== EXPENSE CATEGORY BADGES START ===== */ .exp-cat-badge{display:inline-flex;align-items:center;padding:.25rem .6rem;border-radius:.3rem;font-size:.72rem;font-weight:700;white-space:nowrap} .exp-cat-event{background:#fce7f3;color:#9d174d} .exp-cat-catering{background:#fef3c7;color:#92400e} .exp-cat-equipment{background:#dbeafe;color:#1e40af} .exp-cat-services{background:#d1fae5;color:#065f46} .exp-cat-utilities{background:#e0e7ff;color:#3730a3} .exp-cat-maintenance{background:#fde8d8;color:#9a3412} .exp-cat-marketing{background:#f3e8ff;color:#6b21a8} .exp-cat-salary{background:#ecfdf5;color:#065f46} .exp-cat-others{background:#f1f5f9;color:#475569} .status-badge.draft{background:#f1f5f9;color:#475569} /* ===== EXPENSE CATEGORY BADGES END ===== */ /* ===== ADD EXPENSE PAGE (compact) START ===== */ .exp-create-page{margin:-.25rem 0 0} .exp-create-header{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;margin-bottom:.85rem} .exp-create-header .page-title{font-size:1.15rem} .exp-create-header .page-subtitle{font-size:.8rem;color:#64748b} .exp-back-btn{min-height:2.25rem;padding:0 .85rem;font-size:.8rem} .exp-create-layout{display:grid;grid-template-columns:minmax(0,1fr) 17.5rem;gap:.85rem;align-items:start} .exp-form-card{padding:1rem 1.1rem} .exp-section-title{margin:0 0 .75rem;font-size:.88rem;font-weight:700;color:#0f172a} .exp-compact-grid{gap:.65rem .85rem!important} .exp-compact-grid label{font-size:.78rem;gap:.35rem!important} .exp-compact-grid input,.exp-compact-grid select,.exp-compact-grid textarea{min-height:2.35rem!important;font-size:.82rem!important;padding:.4rem .65rem!important;background:var(--theme-input-bg,#fff)!important;border-color:var(--theme-input-border,#d7dce4)!important;color:var(--theme-text-primary,#0f172a)!important} .exp-compact-grid textarea{min-height:3.2rem!important} .exp-compact-grid .wi-input-wrap{min-height:2.35rem!important;padding:0 .65rem!important} .exp-compact-grid .wi-input-wrap input{min-height:2rem!important;font-size:.82rem!important} .exp-readonly{background:#f8fafc!important;color:#64748b!important;cursor:not-allowed} .exp-total-field{font-weight:700;color:#0f172a!important} .exp-gst-label .exp-radio-row{display:flex;align-items:center;gap:1rem;min-height:2.35rem;padding-top:.15rem} .exp-radio{display:inline-flex;align-items:center;gap:.4rem;font-weight:500!important;color:#334155!important;cursor:pointer} .exp-radio input{width:.95rem;height:.95rem;accent-color:#0d1828;margin:0} .exp-notes-label{position:relative} .exp-char-count{position:absolute;right:.5rem;bottom:.45rem;font-size:.68rem;color:#94a3b8;font-weight:500} .exp-divider{border:0;border-top:1px solid #e5e7eb;margin:1rem 0} .exp-form-actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:1rem;padding-top:.85rem;border-top:1px solid #e5e7eb;flex-wrap:wrap} .exp-form-actions-right{display:flex;gap:.55rem;flex-wrap:wrap} .exp-form-actions .btn-outline,.exp-form-actions .btn-dark,.exp-form-actions .btn-gold{min-height:2.25rem;padding:0 .9rem;font-size:.8rem} .exp-create-side{display:grid;gap:.75rem} .exp-side-card{padding:.85rem .95rem} .exp-summary-rows{display:grid;gap:.45rem;margin-bottom:.65rem} .exp-summary-row{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:#475569} .exp-summary-row b{color:#0f172a;font-weight:600} .exp-summary-total span,.exp-summary-total b{font-weight:700;color:#0f172a;font-size:.85rem} .exp-summary-words{padding-top:.55rem;border-top:1px solid #e5e7eb} .exp-summary-words span{display:block;font-size:.68rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.2rem} .exp-summary-words strong{font-size:.78rem;color:#0f172a;line-height:1.4} .exp-upload-zone{display:grid;place-items:center;text-align:center;gap:.35rem;padding:1rem .75rem;border:2px dashed #cbd5e1;border-radius:.45rem;cursor:pointer;background:#fafbfc;transition:border-color .15s,background .15s} .exp-upload-zone:hover{border-color:#94a3b8;background:#f8fafc} .exp-upload-zone svg{width:1.75rem;height:1.75rem;color:#94a3b8} .exp-upload-zone p{margin:0;font-size:.75rem;color:#64748b} .exp-upload-zone .exp-browse{color:#0284c7;font-weight:600} .exp-upload-zone small{font-size:.68rem;color:#94a3b8} .exp-upload-input{display:none} .exp-upload-list{margin:.55rem 0 0;padding:0;list-style:none;font-size:.72rem;color:#475569} .exp-upload-list li{padding:.2rem 0} .exp-upload-list a{color:#0284c7;text-decoration:none} .exp-upload-loading{font-size:.72rem;color:#64748b;margin-top:.35rem} .exp-tips-card{background:#eff6ff!important;border-color:#bfdbfe!important;padding:.85rem .95rem} .exp-tips-title{display:flex;align-items:center;gap:.4rem} .exp-tips-title svg{width:1rem;height:1rem;color:#2563eb} .exp-tips-list{margin:0;padding:0;list-style:none;display:grid;gap:.45rem} .exp-tips-list li{display:flex;align-items:flex-start;gap:.45rem;font-size:.72rem;color:#1e40af;line-height:1.45} .exp-tips-list svg{width:.75rem;height:.75rem;flex:0 0 auto;margin-top:.1rem;color:#2563eb} @media (max-width:1100px){.exp-create-layout{grid-template-columns:1fr}.exp-create-header{flex-direction:column}} /* ===== ADD EXPENSE PAGE (compact) END ===== */ /* ===== USERS & ROLES START ===== */ .ur-page{margin:-.15rem 0 0} .ur-page-compact .page-title{font-size:1.15rem} .ur-page-compact .page-subtitle{font-size:.8rem} .ur-layout{display:grid;grid-template-columns:minmax(0,1fr) 17rem;gap:.85rem;align-items:start} .ur-main{min-width:0} .ur-stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem;margin-bottom:.75rem} .ur-stat-card{display:flex;align-items:center;gap:.65rem;padding:.7rem .85rem;background:#fff;border:1px solid #e5e7eb;border-radius:.5rem} .ur-stat-card span{display:block;font-size:.7rem;color:#64748b;font-weight:600} .ur-stat-card strong{font-size:1.1rem;color:#0f172a;line-height:1.2} .ur-stat-icon{width:2.35rem;height:2.35rem;border-radius:.45rem;display:grid;place-items:center;flex:0 0 auto} .ur-stat-icon svg{width:1.1rem;height:1.1rem} .ur-stat-icon.ur-blue{background:#dbeafe;color:#1d4ed8} .ur-stat-icon.ur-green{background:#d1fae5;color:#047857} .ur-stat-icon.ur-orange{background:#ffedd5;color:#c2410c} .ur-stat-icon.ur-red{background:#fee2e2;color:#b91c1c} .ur-stat-icon.ur-purple{background:#ede9fe;color:#6d28d9} .ur-table-card{padding:0;overflow:hidden} .ur-filter-row{padding:.75rem .85rem;border-bottom:1px solid #e5e7eb;margin:0!important} .ur-table-footer{padding:.65rem .85rem;border-top:1px solid #e5e7eb} .ur-row-selected{background:#f0f9ff!important} .ur-name-cell{display:flex;align-items:center;gap:.55rem} .ur-avatar{width:2rem;height:2rem;border-radius:50%;background:#0d1828;color:#fff;font-size:.68rem;font-weight:700;display:grid;place-items:center;flex:0 0 auto} .ur-avatar-lg{width:2.75rem;height:2.75rem;font-size:.85rem} .ur-muted{color:#94a3b8;font-size:.72rem} .ur-role-badge{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:.3rem;font-size:.68rem;font-weight:700;white-space:nowrap} .ur-role-super{background:#ede9fe;color:#5b21b6} .ur-role-manager{background:#dbeafe;color:#1e40af} .ur-role-sales{background:#d1fae5;color:#065f46} .ur-role-booking{background:#ffedd5;color:#9a3412} .ur-role-custom{background:#e0f2fe;color:#0369a1} .ur-status-text{font-size:.78rem;font-weight:700} .ur-status-text.ur-active{color:#059669} .ur-status-text.ur-inactive{color:#d97706} .ur-status-text.ur-locked{color:#dc2626} .ur-type-badge{display:inline-flex;margin-left:.35rem;padding:.15rem .45rem;border-radius:.25rem;font-size:.65rem;font-weight:700} .ur-type-badge.ur-system{background:#ede9fe;color:#6d28d9} .ur-type-badge.ur-custom{background:#e0f2fe;color:#0369a1} .ur-desc-cell{font-size:.78rem;color:#64748b;max-width:16rem} .ur-sidebar{display:grid;gap:.65rem;align-content:start} .ur-side-card{padding:.8rem .9rem} .ur-side-title{margin:0 0 .65rem;font-size:.88rem;font-weight:700;color:#0f172a} .ur-side-label{margin:0;font-size:.68rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.03em} .ur-detail-head{display:flex;gap:.65rem;align-items:flex-start;margin-bottom:.75rem} .ur-detail-head strong{display:block;font-size:.92rem;color:#0f172a} .ur-detail-head .ur-role-badge,.ur-detail-head .ur-status-pill{margin-top:.25rem;margin-right:.25rem} .ur-status-pill{display:inline-flex;padding:.15rem .45rem;border-radius:.25rem;font-size:.65rem;font-weight:700} .ur-pill-active{background:#d1fae5;color:#065f46} .ur-pill-inactive{background:#f1f5f9;color:#64748b} .ur-detail-list{margin:0;display:grid;gap:.45rem} .ur-detail-list div{display:grid;grid-template-columns:6.5rem 1fr;gap:.35rem;font-size:.78rem} .ur-detail-list dt{margin:0;color:#64748b;font-weight:600} .ur-detail-list dd{margin:0;color:#0f172a} .ur-perm-summary{margin:.35rem 0;font-size:.78rem;color:#334155} .ur-perm-bar-wrap{height:.35rem;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:.35rem 0} .ur-perm-bar{height:100%;background:#059669;border-radius:999px} .ur-side-btn{width:100%;justify-content:center;font-size:.75rem;min-height:2.1rem} .ur-quick-links{margin:0;padding:0;list-style:none;display:grid;gap:.4rem} .ur-quick-links a,.ur-quick-links button{font-size:.78rem;color:#0284c7;text-decoration:none;background:none;border:0;padding:0;cursor:pointer;text-align:left} .ur-quick-links a:hover,.ur-quick-links button:hover{text-decoration:underline} .ur-info-alert{display:flex;align-items:flex-start;gap:.5rem;padding:.65rem .75rem;background:#eff6ff;border:1px solid #bfdbfe;border-radius:.45rem;font-size:.72rem;color:#1e40af;line-height:1.45} .ur-info-alert svg{width:.9rem;height:.9rem;flex:0 0 auto;margin-top:.05rem} .ur-role-detail-head{display:flex;gap:.55rem;align-items:flex-start;margin-bottom:.5rem} .ur-shield-icon{width:2.25rem;height:2.25rem;border-radius:.4rem;background:#ede9fe;color:#6d28d9;display:grid;place-items:center;flex:0 0 auto} .ur-shield-icon svg{width:1.1rem;height:1.1rem} .ur-role-desc{font-size:.78rem;color:#475569;margin:0 0 .75rem;line-height:1.45} .ur-perm-page .ur-perm-header{align-items:flex-start} .ur-perm-header-actions{display:flex;gap:.5rem;flex-wrap:wrap} .ur-role-summary-card{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1rem 1.1rem;margin-bottom:.85rem} .ur-role-summary-main h3{margin:0 .5rem .35rem 0;display:inline;font-size:1rem} .ur-role-summary-main p{margin:.5rem 0 0;font-size:.8rem;color:#64748b;flex:1 1 100%} .ur-role-summary-stats{display:flex;flex-wrap:wrap;gap:1.25rem} .ur-role-summary-stats div span{display:block;font-size:.68rem;color:#64748b;font-weight:600} .ur-role-summary-stats div strong{font-size:.85rem;color:#0f172a} .ur-perm-layout{display:grid;grid-template-columns:minmax(0,1fr) 16.5rem;gap:.85rem;align-items:start} .ur-tabs{display:flex;gap:0;border-bottom:2px solid #e5e7eb;margin-bottom:.75rem;position:relative;z-index:2} .ur-tab{background:none;border:0;padding:.55rem 1rem;font-size:.8rem;font-weight:600;color:#64748b;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;position:relative;z-index:2} .ur-tab.active{color:#0284c7;border-bottom-color:#0284c7} .ur-perm-table-card{padding:0;overflow:hidden;position:relative;z-index:0} .ur-perm-table-wrap{border-top:1px solid #e5e7eb;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(148,163,184,.5) transparent;position:relative;z-index:0;pointer-events:auto} .ur-perm-table-wrap::-webkit-scrollbar{height:.45rem} .ur-perm-table-wrap::-webkit-scrollbar-track{background:transparent} .ur-perm-table-wrap::-webkit-scrollbar-thumb{background:rgba(148,163,184,.5);border-radius:.35rem} .ur-perm-table-wrap::-webkit-scrollbar-thumb:hover{background:rgba(148,163,184,.8)} .ur-module-search{margin:.75rem .85rem;max-width:18rem} .ur-perm-matrix{margin:0;min-width:45rem} .ur-perm-matrix thead th{background:#f8fafc;font-size:.72rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.03em;padding:.65rem .5rem;border-bottom:1px solid #e5e7eb} .ur-perm-matrix tbody td{padding:.85rem .5rem;border-bottom:1px solid #f1f5f9;vertical-align:middle} .ur-perm-matrix tbody tr:last-child td{border-bottom:0} .ur-perm-matrix th.ur-col-module,.ur-perm-matrix td.ur-col-module{text-align:left;padding-left:.85rem;min-width:14rem} .ur-perm-matrix th.ur-col-check,.ur-perm-matrix td.ur-col-check{text-align:center;width:4.25rem} .ur-perm-matrix th.ur-col-toggle,.ur-perm-matrix td.ur-col-toggle{text-align:center;width:5.5rem;padding-right:.85rem} .ur-mod-cell{display:flex;align-items:center;gap:.7rem} .ur-mod-icon{width:2.35rem;height:2.35rem;border-radius:.45rem;display:grid;place-items:center;flex:0 0 auto} .ur-mod-icon svg{width:1.15rem;height:1.15rem} .ur-mod-blue{background:#dbeafe;color:#2563eb} .ur-mod-green{background:#d1fae5;color:#059669} .ur-mod-purple{background:#ede9fe;color:#7c3aed} .ur-mod-orange{background:#ffedd5;color:#ea580c} .ur-mod-cyan{background:#cffafe;color:#0891b2} .ur-mod-pink{background:#fce7f3;color:#db2777} .ur-mod-gold{background:#fef3c7;color:#ca8a04} .ur-mod-slate{background:#f1f5f9;color:#475569} .ur-mod-cell strong{display:block;font-size:.85rem;color:#0f172a;font-weight:700} .ur-mod-cell small{display:block;font-size:.75rem;color:#94a3b8;margin-top:.12rem;line-height:1.35} .ur-check-wrap{display:inline-flex;align-items:center;justify-content:center;margin:0} .ur-check{width:1.05rem;height:1.05rem;accent-color:#2563eb;cursor:pointer;margin:0} .ur-check:disabled{opacity:1;cursor:default} .ur-na{color:#64748b;font-size:.9rem;font-weight:600} .dark .ur-na{color:#94a3b8} .ur-perm-empty-tab{padding:2rem;text-align:center;color:#64748b;font-size:.85rem} .ur-link-btn{background:none;border:0;padding:0;font-size:.78rem;color:#0284c7;cursor:pointer;text-align:left} .ur-link-btn:hover{text-decoration:underline} .ur-toggle{display:inline-flex;align-items:center;cursor:pointer} .ur-toggle input{display:none} .ur-toggle span{width:2.1rem;height:1.15rem;background:#cbd5e1;border-radius:999px;position:relative;transition:background .15s} .ur-toggle span::after{content:'';position:absolute;top:.12rem;left:.12rem;width:.9rem;height:.9rem;background:#fff;border-radius:50%;transition:transform .15s} .ur-toggle input:checked+span{background:#0284c7} .ur-toggle input:checked+span::after{transform:translateX(.95rem)} .ur-perm-footer-alert{margin-top:.75rem} .ur-perm-form-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:.85rem;padding-top:.75rem} .ur-donut-wrap{display:grid;place-items:center;margin:.5rem 0} .ur-donut{width:5.5rem;height:5.5rem;border-radius:50%;background:conic-gradient(#059669 calc(var(--pct) * 1%), #e2e8f0 0);display:grid;place-items:center;position:relative} .ur-donut::before{content:'';position:absolute;inset:.85rem;background:#fff;border-radius:50%} .ur-donut span{position:relative;text-align:center;font-size:.7rem;color:#64748b;line-height:1.2} .ur-donut span strong{display:block;font-size:1rem;color:#0f172a} .ur-donut-legend{margin:0;padding:0;list-style:none;display:grid;gap:.35rem;font-size:.72rem;color:#475569} .ur-dot{display:inline-block;width:.5rem;height:.5rem;border-radius:50%;margin-right:.35rem} .ur-dot-granted{background:#059669} .ur-dot-partial{background:#f59e0b} .ur-dot-none{background:#e2e8f0} .ur-perm-sidebar{display:grid;gap:.65rem} @media (max-width:1280px){.ur-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ur-layout,.ur-perm-layout{grid-template-columns:1fr}} @media (max-width:720px){ .ur-perm-layout{grid-template-columns:1fr} .ur-perm-sidebar{order:-1} .ur-perm-table-card{overflow:visible} .ur-perm-main, .ur-perm-sidebar{min-width:0} .ur-module-search{max-width:100%;padding:.75rem .85rem} .ur-module-search input{width:100%} .ur-tabs{flex-wrap:wrap;gap:.55rem} .ur-tab{flex:1 1 auto;min-width:0;width:100%;justify-content:center} .ur-perm-matrix{min-width:calc(100vw - 2rem)} .ur-perm-matrix thead th{padding:.5rem .45rem} .ur-perm-matrix tbody td{padding:.65rem .45rem} .ur-perm-matrix th.ur-col-module,.ur-perm-matrix td.ur-col-module{min-width:9rem} .ur-perm-matrix th.ur-col-check,.ur-perm-matrix td.ur-col-check{width:3.5rem} .ur-perm-matrix th.ur-col-toggle,.ur-perm-matrix td.ur-col-toggle{width:4.5rem} .ur-perm-table-wrap{padding-bottom:1rem;overflow-x:auto;-webkit-overflow-scrolling:touch;max-height:none} .ur-perm-table-wrap .ur-perm-matrix{min-width:calc(100vw - 2rem);width:auto} .ur-perm-matrix th,.ur-perm-matrix td{white-space:nowrap} .ur-role-summary-card{flex-direction:column;align-items:stretch} .ur-role-summary-stats{flex-direction:column;gap:.85rem} .ur-perm-header-actions{flex-direction:column;align-items:stretch;width:100%;gap:.65rem} .ur-perm-header-actions .btn-dark{flex:1} .ur-info-alert{flex-direction:column;align-items:flex-start} .ur-perm-form-actions{flex-direction:column;align-items:stretch} .ur-perm-form-actions > *{width:100%} } /* ===== USERS & ROLES END ===== */ /* ===== DASHBOARD V2 (mockup alignment) START ===== */ .dashboard-page.dash-page-v2{display:grid;gap:1rem;min-width:0;background:#f8fafc;padding:1.2rem;border-radius:1rem} .dash-metric-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem} .dash-metric-card{display:flex;align-items:center;gap:1rem;padding:1rem!important;background:#fff;border:1px solid #e5e7eb;border-radius:.55rem;box-shadow:0 3px 12px rgba(15,23,42,.08);min-height:6.6rem;min-width:0} .dash-metric-body{flex:1;min-width:0;display:grid;gap:.2rem} .dash-metric-label{font-size:.72rem;font-weight:800;color:#475569;text-transform:uppercase;letter-spacing:0} .dash-metric-card strong{font-size:1.68rem;font-weight:800;color:#0f172a;line-height:1.05} .dash-metric-card small{font-size:.76rem;font-weight:600} .dash-metric-link{font-weight:600!important} .dash-purple-text{color:#6d45c7!important} .dash-main-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);gap:1rem;align-items:stretch} .dash-panel-head{min-height:3rem;padding:1rem 1.1rem!important;border-bottom:1px solid #eff3f8;background:#f8fafc} .dash-panel-head h2{font-size:.98rem!important;font-weight:800!important;color:#0f172a} .dash-panel-link{font-size:.78rem;font-weight:600;color:#0284c7!important;text-decoration:none;padding:0!important;border:0!important;background:transparent!important;white-space:nowrap} .dash-panel-link:hover{text-decoration:underline} .dash-cal-actions{display:flex;align-items:center;gap:.65rem} .dash-month-dropdown{position:relative;min-width:14rem} .dash-month-dropdown summary::-webkit-details-marker{display:none} .dash-month-dropdown[open] .dash-month-trigger{border-color:#6478b9;box-shadow:0 0 0 5px rgba(59,130,246,.16),0 12px 30px rgba(15,23,42,.08)} .dash-month-dropdown[open] .dash-month-chevron{transform:rotate(180deg)} .dash-month-trigger{min-height:3.2rem} .dash-month-menu{max-height:22rem;overflow-y:auto} .dash-month-option{border:0;background:transparent;cursor:pointer} .dash-month-option.selected{box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)} .dash-month-select{min-height:3.2rem;padding:.6rem 2.25rem .6rem .95rem;border:1px solid #d7dce4;border-radius:14px;background:#fff;color:#0f172a;font-weight:800;font-size:1.05rem;line-height:1.1;-webkit-appearance:none;-moz-appearance:none;appearance:none;box-shadow:0 8px 30px rgba(15,23,42,.06);transition:border-color .15s,box-shadow .15s} .dash-month-select:focus{border-color:#3b82f6;box-shadow:0 0 0 6px rgba(59,130,246,.12);outline:none} .dash-cal-grid{padding:0 !important; border: 1px solid var(--erp-border) !important; border-radius: 0.65rem; margin-bottom: 1rem;} .dash-cal-grid .calendar-day:nth-child(7n+7) { border-right: none !important; } .dash-cal-grid .calendar-day:nth-last-child(-n+7) { border-bottom: none !important; } .dash-cal-grid .calendar-head:first-child { border-top-left-radius: inherit; } .dash-cal-grid .calendar-head:nth-child(7) { border-top-right-radius: inherit; } .dash-cal-grid .calendar-day:nth-last-child(-n+7):nth-child(7n+8) { border-bottom-left-radius: inherit; } .dash-cal-grid .calendar-day:last-child { border-bottom-right-radius: inherit; } .dash-cal-grid .calendar-head{padding:.62rem .25rem;font-size:.72rem} .dash-cal-grid .calendar-day{min-height:3.05rem; border-color: var(--erp-border) !important;} .dash-cal-grid .day-pill{min-width:2.65rem;min-height:2.05rem;font-size:.82rem} .dash-cal-grid .calendar-day.today .day-pill{outline:2px solid #2d87dd;outline-offset:1px} .dash-cal-legend{padding:.55rem 1rem .75rem;border-top:0;font-size:.78rem} .dash-cal-legend i{width:.9rem!important;height:.62rem!important} .dash-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch} .dash-table{min-width:100%;font-size:.8rem;border-collapse:separate;border-spacing:0} .dash-table th,.dash-table td{padding:.95rem 1rem;border-bottom:1px solid #eef4fb;text-align:left;white-space:nowrap} .dash-table th{font-size:.75rem;font-weight:700;color:#475569;background:#f8fbff} .dash-table tbody tr:hover td{background:#f8fbff} .dash-table th{font-size:.75rem;font-weight:700;color:#475569;background:#f8fbff;text-transform:none;letter-spacing:0;padding:.95rem 1rem!important;white-space:nowrap} .dash-table td{padding:.95rem 1rem!important;vertical-align:middle} .dash-finance-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem} .dash-finance-grid .finance-card-v2{background:#fff;border:1px solid #e5e7eb;border-radius:.55rem;box-shadow:0 3px 12px rgba(15,23,42,.08);min-height:6.9rem;min-width:0;padding:1rem} .fc-value-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-width:0;margin-top:.08rem} .fc-top span{font-size:.82rem!important;font-weight:800!important;color:#0f172a!important} .fc-value-row strong{flex:1;min-width:0;font-size:1.32rem!important;color:#0f172a!important} .fc-value-row .fc-sparkline{flex:0 0 6.9rem;width:6.9rem;height:2.1rem;margin:0} .fc-value-row .fc-sparkline svg{height:2.1rem!important} .finance-card-v2 small{font-size:.76rem!important;margin-top:.25rem!important} .dash-occ-body{align-items:center;margin-top:.25rem} .dash-occ-pct{font-size:1.35rem!important;font-weight:800;display:block;line-height:1.1;color:#0f172a!important} .dash-occ-card .occ-ring-svg{width:3.9rem!important;height:3.9rem!important} .dash-table-scroll .dash-recent-table{min-width:52rem} .recent-panel{margin-bottom:.25rem} .dash-recent-panel{overflow:hidden;border-radius:.55rem;border:1px solid #e5e7eb;box-shadow:0 3px 12px rgba(15,23,42,.08)} .dash-recent-panel .dash-panel-head{min-height:3rem;padding:.8rem 1rem!important} .dash-recent-panel .dashboard-table-wrap{padding:0} .dash-recent-table{width:100%;min-width:64rem!important;font-size:.8rem} .dash-recent-table th{background:#fafbfc;color:#475569;font-size:.7rem!important;font-weight:800!important;text-transform:none!important;letter-spacing:0!important;padding:.68rem 1rem!important;border-bottom:1px solid #e5e7eb} .dash-recent-table td{padding:.72rem 1rem!important;color:#1f2937;border-bottom:1px solid #f1f5f9} .dash-recent-table tbody tr:last-child td{border-bottom:0} .dash-recent-table th:last-child,.dash-recent-table td:last-child{text-align:center} .dash-action-icons{justify-content:center;gap:.42rem} .dash-action-icons a{width:1.85rem!important;height:1.85rem!important;min-height:1.85rem!important;padding:0!important;border-radius:.35rem!important} .dash-action-icons svg{width:.95rem!important;height:.95rem!important;max-width:.95rem!important;max-height:.95rem!important} /* Upcoming Events table (dashboard mockup) */ .dash-upcoming-panel{display:flex;flex-direction:column;min-width:0} .dash-upcoming-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;min-height:3rem;padding:.8rem 1rem;border-bottom:1px solid #e5e7eb} .dash-upcoming-head h2{margin:0;font-size:.98rem;font-weight:800;color:#0f172a} .dash-btn-view-all{display:inline-flex;align-items:center;justify-content:center;min-height:1.85rem;padding:0 .75rem;border:1px solid #d7dce4;border-radius:.35rem;background:#fff;color:#334155!important;font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s} .dash-btn-view-all:hover{background:#f8fafc;border-color:#cbd5e1;text-decoration:none} .dash-upcoming-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;padding:0} .dash-upcoming-table{width:100%;border-collapse:collapse;font-size:.8rem;min-width:36rem} .dash-upcoming-table thead th{padding:.65rem 1rem;text-align:left;font-size:.7rem;font-weight:800;color:#475569;background:#fafbfc;border-bottom:1px solid #e5e7eb;white-space:nowrap} .dash-upcoming-table tbody td{padding:.74rem 1rem;text-align:left;color:#1f2937;border-bottom:1px solid #f1f5f9;vertical-align:middle} .dash-upcoming-table tbody tr:last-child td{border-bottom:0} .dash-upcoming-table tbody tr:hover td{background:#fafbfc} .dash-upcoming-client{font-weight:600;color:#0f172a} .dash-status-badge{display:inline-flex;align-items:center;padding:.28rem .6rem;border-radius:999px;font-size:.72rem;font-weight:700;line-height:1;white-space:nowrap} .dash-status-badge.confirmed{background:#dcfce7;color:#166534} .dash-status-badge.tentative{background:#fef3c7;color:#92400e} .dash-status-badge.pending{background:#ffe2e5;color:#9f1239} .dash-balance{font-weight:600;white-space:nowrap} .dash-balance-due{color:#dc2626!important} .dash-balance-paid{color:#16a34a!important} .dash-upcoming-empty{padding:1.5rem 1rem!important;text-align:center;color:#94a3b8;font-size:.85rem} .dash-upcoming-panel .dash-upcoming-table-wrap{flex:1} @media (max-width:1280px){ .dash-metric-grid,.dash-finance-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dash-main-grid{grid-template-columns:1fr} } @media (max-width:768px){ .dash-metric-grid,.dash-finance-grid{grid-template-columns:1fr} } /* ===== DASHBOARD V2 (mockup alignment) END ===== */ /* ===== SETTINGS PAGES — inputs, labels, buttons START ===== */ /* Fix btn-dark/btn-outline text wrapping */ .btn-dark,.btn-gold,.btn-outline{ white-space:nowrap; gap:.5rem; font-size:.875rem; min-height:2.65rem; padding:0 1.25rem; border-radius:.5rem; line-height:1; } .btn-dark:hover{background:#1a2d45} .btn-outline:hover{background:#f8fafc} /* Settings form labels — consistent size, weight, spacing */ .settings-label{ display:grid; gap:.45rem; font-size:.82rem; font-weight:600; color:#374151; line-height:1.4; } .settings-label span.hint{ font-size:.75rem; color:#64748b; font-weight:400; margin-top:-.1rem; } /* Settings inputs & selects — taller, more padding, cleaner border */ .settings-input, .settings-select, .settings-textarea{ min-height:2.85rem; border:1px solid var(--theme-input-border, #d7dce4); border-radius:.5rem; background:var(--theme-input-bg, #fff); color:var(--theme-text-primary, #334155); font-size:.875rem; padding:.6rem .85rem; width:100%; transition:border-color .15s,box-shadow .15s; line-height:1.5; } .settings-input:focus, .settings-select:focus, .settings-textarea:focus{ outline:none; border-color:var(--theme-input-border-focus, #1d4ed8); box-shadow:0 0 0 3px rgba(29,78,216,.1); } .settings-textarea{ min-height:5rem; resize:vertical; } .settings-select{ appearance:auto; cursor:pointer; } /* Override form-grid inputs inside settings cards to use the new style */ .settings-card .form-grid input, .settings-card .form-grid select, .settings-card .form-grid textarea, .settings-card label input[type=text], .settings-card label input[type=number], .settings-card label input[type=email], .settings-card label input[type=url], .settings-card label input[type=password], .settings-card label input[type=time], .settings-card label select, .settings-card label textarea{ min-height:2.85rem; border:1px solid var(--theme-input-border, #d7dce4); border-radius:.5rem; background:var(--theme-input-bg, #fff); color:var(--theme-text-primary, #334155); font-size:.875rem; padding:.6rem .85rem; width:100%; transition:border-color .15s,box-shadow .15s; } .settings-card label input:focus, .settings-card label select:focus, .settings-card label textarea:focus, .settings-card .form-grid input:focus, .settings-card .form-grid select:focus, .settings-card .form-grid textarea:focus{ outline:none; border-color:var(--theme-input-border-focus, #1d4ed8); box-shadow:0 0 0 3px rgba(29,78,216,.1); } .settings-card label{ font-size:.82rem; font-weight:600; color:#374151; display:grid; gap:.45rem; line-height:1.4; } .settings-card label b{color:#dc2626} /* Prevent settings-card label styles from affecting flex/checkbox labels */ .settings-card label[style*="flex"], .settings-card label[style*="display:flex"]{ display:flex !important; font-size:.875rem; font-weight:500; gap:.5rem; } /* Settings section title */ .settings-section-title{ margin:0 0 1.25rem; font-size:.95rem; font-weight:700; color:#0f172a; padding-bottom:.75rem; border-bottom:1px solid #f1f5f9; } /* Settings toggle button */ .settings-toggle{ width:2.85rem; height:1.6rem; border-radius:999px; border:0; cursor:pointer; position:relative; flex:0 0 auto; transition:background .2s; } .settings-toggle-on{background:#1e40af} .settings-toggle-off{background:#d1d5db} .settings-toggle-knob{ position:absolute; top:.2rem; width:1.2rem; height:1.2rem; border-radius:50%; background:#fff; display:block; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:all .2s; } .settings-toggle-on .settings-toggle-knob{right:.2rem} .settings-toggle-off .settings-toggle-knob{left:.2rem} /* Settings page layouts */ .settings-page-layout{ display:grid; grid-template-columns:15rem minmax(0,1fr); gap:1.25rem; align-items:start; } .settings-content-stack{ display:grid; gap:1.1rem; min-width:0; } .settings-sidebar-card{ overflow:hidden; position:sticky; top:5.5rem; min-width:0; } .settings-card-grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) 16rem; gap:1rem 1.5rem; align-items:start; } .settings-3col{ display:grid; grid-template-columns:1fr 1fr 16rem; gap:1rem 1.5rem; align-items:start; } @media (max-width: 1024px) { .settings-page-layout{grid-template-columns:1fr} .settings-sidebar-card{position:static} .settings-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .settings-3col {grid-template-columns: 1fr} .settings-toggle-col { border-left: 0; border-top: 1px solid #f1f5f9; padding-left: 0; padding-top: 1.25rem; grid-column:1/-1; } } @media (max-width: 760px) { .settings-card-grid{grid-template-columns:1fr} .settings-card{padding:1rem!important} .settings-toggle-row{align-items:center} } .settings-toggle-col{ border-left:1px solid #f1f5f9; padding-left:1.25rem; display:grid; gap:0; } .settings-toggle-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:.75rem; padding:.6rem 0; border-bottom:1px solid #f8fafc; } .settings-toggle-row:last-child{border-bottom:0} .settings-toggle-row-label{font-size:.82rem;font-weight:600;color:#0f172a;line-height:1.3} .settings-toggle-row-desc{font-size:.75rem;color:#64748b;margin-top:.1rem} /* Settings page header Save button — ensure it never wraps */ .settings-save-btn{ display:inline-flex; align-items:center; gap:.5rem; min-height:2.65rem; padding:0 1.25rem; border:0; border-radius:.5rem; background:#0d1828; color:#fff; font-size:.875rem; font-weight:700; white-space:nowrap; cursor:pointer; transition:background .15s; line-height:1; } .settings-save-btn:hover{background:#1a2d45} .settings-save-btn svg{width:1rem;height:1rem;flex:0 0 auto;max-width:none;max-height:none} /* ===== SETTINGS PAGES — inputs, labels, buttons END ===== */ /* ===== SETTINGS ACTIVITY LAYOUTS START ===== */ .settings-activity-layout{ display:grid; grid-template-columns:minmax(0,1fr) 18rem; gap:1.25rem; align-items:start; } .settings-detail-layout{ display:grid; grid-template-columns:minmax(0,1fr) 17.5rem; gap:1.25rem; align-items:start; } .settings-detail-layout > * { min-width:0; } .settings-page-actions{ display:flex; align-items:center; justify-content:flex-end; gap:.65rem; flex-wrap:wrap; } .settings-page-actions a, .settings-page-actions button{ min-width:0; } .settings-filter-row{ display:flex; flex-wrap:wrap; align-items:center; gap:.65rem; padding:.9rem 1.15rem; border-bottom:1px solid #e5e7eb; } .settings-filter-row > *{ min-width:0; } .settings-filter-row select, .settings-filter-row button{ min-width:0; } .settings-sticky-stack{ display:grid; gap:1rem; position:sticky; top:5.5rem; min-width:0; } .activity-overview-grid{ display:grid; grid-template-columns:1.35fr 1fr 1fr 1.15fr .8fr; gap:1.25rem; align-items:center; } .activity-overview-grid>div+div{ border-left:1px solid #e5e7eb; padding-left:1.25rem; } .activity-overview-item{ display:grid; gap:.35rem; min-width:0; } .activity-overview-item span{ font-size:.76rem; color:#475569; font-weight:600; } .activity-overview-item strong{ font-size:.88rem; color:#0f172a; line-height:1.3; } .activity-overview-item small{ font-size:.75rem; color:#475569; line-height:1.35; } .activity-detail-table{ width:100%; border:1px solid #e5e7eb; border-radius:.45rem; overflow:hidden; font-size:.875rem; } .activity-detail-table th, .activity-detail-table td{ padding:.82rem .9rem!important; border-bottom:1px solid #e5e7eb; text-align:left; vertical-align:middle; } .activity-detail-table tr:last-child th, .activity-detail-table tr:last-child td{border-bottom:0} .activity-detail-table th{ width:12.5rem; background:#fbfdff; color:#0f172a; font-weight:800; } .activity-detail-table td{ color:#0f172a; font-weight:500; } @media (max-width: 1180px) { .settings-activity-layout, .settings-detail-layout{grid-template-columns:1fr} .settings-sticky-stack{position:static} .activity-overview-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .activity-overview-grid>div+div{border-left:0;padding-left:0} } @media (max-width: 720px) { .settings-page-actions, .settings-filter-row { flex-direction:column; align-items:stretch; } .settings-page-actions a, .settings-page-actions button, .settings-filter-row > * { width:100%; } .settings-filter-row { padding:.85rem 1rem; } .settings-filter-row input, .settings-filter-row select { width:100%; } .dashboard-table { table-layout:auto; } .dashboard-table th, .dashboard-table td { white-space:normal; } } .activity-filter-row{ display:grid; grid-template-columns: minmax(18rem,1fr) repeat(auto-fit,minmax(12rem,14rem)); gap:.65rem; padding:.9rem 1.15rem; border-bottom:1px solid #e5e7eb; align-items:center; } .activity-filter-row .filter-search{ min-width:0; width:100%; } .activity-filter-row .filter-search input{ width:100%; min-width:0; } .activity-filter-row .activity-filter-select, .activity-filter-row .activity-filter-button{ width:100%; min-width:0; } .activity-filter-row .activity-filter-select{ min-height:2.65rem; border:1px solid var(--theme-input-border, #d7dce4); border-radius:.45rem; background:#fff; padding:0 .75rem; font-size:.875rem; color:#334155; } .activity-filter-row .activity-filter-button{ display:inline-flex; align-items:center; gap:.4rem; min-height:2.65rem; padding:0 1rem; border:1px solid #d7dce4; border-radius:.45rem; background:var(--theme-input-bg, #fff); color:var(--theme-text-primary, #334155); font-size:.875rem; font-weight:600; cursor:pointer; } @media (max-width: 980px) { .activity-filter-row{grid-template-columns:1fr;} } @media (max-width: 760px) { .settings-detail-actions, .settings-card-head{flex-direction:column;align-items:stretch!important} .activity-overview-grid{grid-template-columns:1fr} .activity-detail-table th, .activity-detail-table td{display:block;width:100%} .activity-detail-table th{border-bottom:0;padding-bottom:.25rem!important} .activity-detail-table td{padding-top:.25rem!important} } /* ===== SETTINGS ACTIVITY LAYOUTS END ===== */ /* ===== PAGE HEADER ACTION BUTTONS START ===== */ .page-header-row .btn-dark, .page-header-row .btn-outline, .page-header-row .settings-save-btn, .page-header-row a[style*="inline-flex"], .page-header-row button[style*="inline-flex"]{ white-space:nowrap !important; flex-shrink:0 !important; word-break:keep-all !important; } /* ===== PAGE HEADER ACTION BUTTONS END ===== */ /* ===== SIDEBAR COLLAPSE FUNCTIONALITY START ===== */ /* Base transition for smooth collapse/expand */ .erp-shell { transition: grid-template-columns .3s ease-in-out; } @media (min-width: 1024px) { .erp-shell:not(.collapsed) { grid-template-columns: 17rem minmax(0, 1fr) !important; } } .erp-sidebar { transition: width .3s ease-in-out; width: 17rem; } .erp-sidebar:not(.collapsed) { width: 17rem !important; /* Force explicit width when expanded to show text */ } /* Main layout adjustment for collapsed sidebar */ .erp-shell.collapsed { /* Override the default grid template columns for large screens */ grid-template-columns: 5rem minmax(0, 1fr) !important; /* Adjust sidebar width to 5rem when collapsed and prevent table overflows */ } /* Sidebar adjustments when collapsed */ .erp-sidebar.collapsed { width: 5rem; /* Explicit width for collapsed state */ } /* Hide text smoothly when collapsing */ .erp-sidebar.collapsed .nav-link span, .erp-sidebar.collapsed .sidebar-toggle-btn span, .erp-sidebar.collapsed #sidebar-collapse-btn span { position: static; max-width: 0; opacity: 0; padding: 0; margin: 0; overflow: hidden; display: inline-block; transition: max-width .3s ease-in-out, opacity .2s ease-in-out; pointer-events: none; vertical-align: middle; border: none; } /* Show tooltip on hover when collapsed */ .erp-sidebar.collapsed .nav-link:hover span, .erp-sidebar.collapsed .sidebar-toggle-btn:hover span, .erp-sidebar.collapsed #sidebar-collapse-btn:hover span { position: absolute; left: calc(100% + 0.65rem); top: 50%; transform: translateY(-50%); background: #0f1c2e; color: #fff; padding: 0.4rem 0.75rem; border-radius: 0.4rem; font-size: 0.8rem; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 50; opacity: 1; max-width: none; overflow: visible; pointer-events: auto; transition: opacity 0.2s ease-in-out 0.1s; } /* Tooltip Arrow */ .erp-sidebar.collapsed .nav-link:hover span::before, .erp-sidebar.collapsed .sidebar-toggle-btn:hover span::before, .erp-sidebar.collapsed #sidebar-collapse-btn:hover span::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #0f1c2e; display: block; } /* Adjust nav link padding and alignment when collapsed */ .erp-sidebar.collapsed .nav-link, .erp-sidebar.collapsed .sidebar-toggle-btn, .erp-sidebar.collapsed #sidebar-collapse-btn { justify-content: flex-start; padding: .5rem 1.15rem; /* Visually center 1.1rem icon inside 3.5rem button container */ gap: 0; position: relative; overflow: visible; } /* Hide chevron in nav groups when collapsed */ .erp-sidebar.collapsed .nav-chevron { display: none; } /* Adjust sidebar brand when collapsed */ .erp-sidebar.collapsed .sidebar-brand { padding: 1.25rem 0.5rem 1rem !important; /* Adjust padding */ gap: 0 !important; } /* Assuming brand text is wrapped in a span or div with class 'brand-text' */ .erp-sidebar.collapsed .sidebar-brand .brand-text { display: none; } /* Adjust sub-menu when collapsed to appear as a pop-out */ .erp-sidebar.collapsed .nav-sub { position: absolute; /* Allow sub-menu to overlay content */ left: 100%; /* Position next to collapsed sidebar */ top: 0; /* Reset top to align with nav group */ margin-left: 0.5rem; background: linear-gradient(180deg,#0f1c2e 0%,#0a1422 100%); /* Same background as sidebar */ border-radius: .45rem; box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 40; /* Ensure it's above main content */ min-width: 10rem; /* Give some width to the pop-out menu */ padding: .5rem; display: none; /* Hidden by default, shown on hover/focus */ } /* Ensure sub-menu is visible on hover/focus when collapsed */ .erp-sidebar.collapsed .nav-group:hover .nav-sub, .erp-sidebar.collapsed .nav-group:focus-within .nav-sub { display: flex; /* Show sub-menu on hover/focus */ } /* Sidebar toggle button styling */ .sidebar-toggle-btn, #sidebar-collapse-btn { display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: 2.65rem; padding: .5rem .75rem; font-size: .875rem; font-weight: 500; color: #c8d3e0; background: none; border: 1px solid transparent; margin: 0; cursor: pointer; transition: background .15s, color .15s, padding .3s ease-in-out, gap .3s ease-in-out; gap: .7rem; border-radius: .45rem; white-space: nowrap; text-align: left; overflow: visible; /* Changed from hidden to ensure tooltips show */ } .sidebar-toggle-btn:hover, #sidebar-collapse-btn:hover { background: rgba(255,255,255,.07); color: #fff !important; } .sidebar-toggle-btn svg, #sidebar-collapse-btn svg { width: 1.1rem !important; height: 1.1rem !important; max-width: 1.1rem !important; max-height: 1.1rem !important; flex: 0 0 auto; opacity: .8; transition: transform .2s; } /* Rotate icon when sidebar is collapsed */ .erp-sidebar.collapsed .sidebar-toggle-btn svg, .erp-sidebar.collapsed #sidebar-collapse-btn svg { transform: rotate(180deg); } /* Adjust toggle button alignment and convert text to tooltip */ .erp-sidebar.collapsed .sidebar-toggle-btn, .erp-sidebar.collapsed #sidebar-collapse-btn { justify-content: center; padding: .5rem 0; position: relative; overflow: visible; } .erp-sidebar.collapsed .sidebar-toggle-btn span, .erp-sidebar.collapsed #sidebar-collapse-btn span { position: absolute; left: calc(100% + 0.65rem); top: 50%; transform: translateY(-50%); background: #0f1c2e; color: #fff; padding: 0.4rem 0.75rem; border-radius: 0.4rem; font-size: 0.8rem; white-space: nowrap; box-shadow: 0 4px 14px rgba(0,0,0,0.3); z-index: 50; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out; display: block; } /* Tooltip Arrow for collapse button */ .erp-sidebar.collapsed .sidebar-toggle-btn span::before, .erp-sidebar.collapsed #sidebar-collapse-btn span::before { content: ''; position: absolute; right: 100%; top: 50%; transform: translateY(-50%); border: 5px solid transparent; border-right-color: #0f1c2e; } .erp-sidebar.collapsed .sidebar-toggle-btn:hover span, .erp-sidebar.collapsed #sidebar-collapse-btn:hover span { opacity: 1; visibility: visible; } /* ENFORCE text visibility and layout in expanded state */ .erp-sidebar:not(.collapsed) .nav-link, .erp-sidebar:not(.collapsed) .sidebar-toggle-btn, .erp-sidebar:not(.collapsed) #sidebar-collapse-btn { overflow: hidden; } .erp-sidebar:not(.collapsed) .nav-link span, .erp-sidebar:not(.collapsed) .sidebar-toggle-btn span, .erp-sidebar:not(.collapsed) #sidebar-collapse-btn span { position: static; opacity: 1; visibility: visible; display: inline-block; background: transparent; color: inherit; padding: 0; box-shadow: none; transform: none; pointer-events: auto; max-width: 12rem; overflow: hidden; transition: max-width .3s ease-in-out, opacity .3s ease-in-out; vertical-align: middle; } .erp-sidebar:not(.collapsed) .nav-link span::before, .erp-sidebar:not(.collapsed) .sidebar-toggle-btn span::before, .erp-sidebar:not(.collapsed) #sidebar-collapse-btn span::before { display: none; } /* Adjust sidebar-bottom for collapsed state */ .erp-sidebar.collapsed .sidebar-bottom { padding: 1rem 0.5rem; /* Adjust padding */ } /* Fix SVG size inside header buttons */ .page-header-row a svg, .page-header-row button svg{ width:.85rem !important; height:.85rem !important; max-width:.85rem !important; max-height:.85rem !important; flex:0 0 auto; } /* ===== SIDEBAR COLLAPSE FUNCTIONALITY END ===== */ /* ===== SETTINGS PAGES — comprehensive fixes START ===== */ /* Catch ALL input types inside settings-card labels */ .settings-card label input, .settings-card label select, .settings-card label textarea, .settings-card .form-grid label input, .settings-card .form-grid label select, .settings-card .form-grid label textarea{ min-height:2.85rem; border:1px solid var(--theme-input-border, #d7dce4); border-radius:.5rem; background:var(--theme-input-bg, #fff); color:var(--theme-text-primary, #334155); font-size:.875rem; padding:.6rem .85rem; width:100%; transition:border-color .15s,box-shadow .15s; line-height:1.5; } .settings-card label input:focus, .settings-card label select:focus, .settings-card label textarea:focus{ outline:none; border-color:var(--theme-input-border-focus, #1d4ed8); box-shadow:0 0 0 3px rgba(29,78,216,.1); } /* Textarea taller */ .settings-card label textarea, .settings-card .form-grid label textarea{ min-height:5rem; resize:vertical; } /* Don't override checkbox/radio inputs */ .settings-card label input[type=checkbox], .settings-card label input[type=radio]{ min-height:auto; width:auto; padding:0; border-radius:.25rem; } /* Settings form-grid gap */ .settings-card .form-grid{ gap:1.1rem 1.35rem; } .settings-card .form-grid label{ font-size:.82rem; font-weight:600; color:#374151; display:grid; gap:.45rem; line-height:1.4; } /* Settings sidebar — consistent 15rem width */ .settings-sidebar-wrap{ display:grid; grid-template-columns:15rem 1fr; gap:1.25rem; align-items:start; } /* Settings 3-col grid inputs — no width:100% override needed, grid handles it */ .settings-card [style*="grid-template-columns"] label input, .settings-card [style*="grid-template-columns"] label select{ width:100%; } /* Numbering page — inline label inputs */ .settings-card label > input[style*="text-transform"], .settings-card label > select[style*="text-transform"]{ text-transform:uppercase; } /* Fix btn-dark/btn-outline inside settings cards */ .settings-card .btn-dark, .settings-card .btn-outline{ white-space:nowrap; flex-shrink:0; display:inline-flex; align-items:center; gap:.5rem; } .settings-card .btn-dark svg, .settings-card .btn-outline svg{ width:.85rem !important; height:.85rem !important; max-width:.85rem !important; max-height:.85rem !important; flex:0 0 auto; } /* Settings save button — always single line */ .settings-save-btn{ white-space:nowrap !important; flex-shrink:0 !important; display:inline-flex !important; align-items:center !important; gap:.5rem !important; min-height:2.65rem !important; padding:0 1.25rem !important; border:0 !important; border-radius:.5rem !important; background:#0d1828 !important; color:#fff !important; font-size:.875rem !important; font-weight:700 !important; cursor:pointer !important; line-height:1 !important; } .settings-save-btn:hover{background:#1a2d45 !important} .settings-save-btn svg{ width:.85rem !important; height:.85rem !important; max-width:.85rem !important; max-height:.85rem !important; flex:0 0 auto !important; } /* ===== SETTINGS PAGES — comprehensive fixes END ===== */ /* ===== SIDEBAR v3 — matches screenshot START ===== */ /* Sidebar container */ .erp-sidebar{ background:linear-gradient(180deg,#0f1c2e 0%,#0a1422 100%); box-shadow:4px 0 20px rgba(0,0,0,.35); display:flex; flex-direction:column; } .erp-sidebar > div{ display:flex; flex-direction:column; height:100%; min-height:100vh; width: 100%; } /* Brand area */ .sidebar-brand{ min-height:6.75rem !important; height:auto !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; padding:.85rem .75rem 1rem !important; gap:.45rem !important; border-bottom:0 !important; text-decoration:none !important; overflow:hidden; background:transparent !important; } .sidebar-brand img, .sidebar-brand svg { width:min(100%,11.8rem) !important; height: auto !important; min-width: 18.8rem !important; max-height:9.5rem !important; object-fit: contain; display:block; transform:none; mix-blend-mode:normal; background:transparent !important; box-shadow:none !important; transition:max-width .3s ease,max-height .3s ease; } .sidebar-brand span, .sidebar-brand .brand-text, .sidebar-brand strong { color: #fff; font-size: 1.15rem; font-weight: 800; text-align: center; line-height: 1.3; letter-spacing: 0.03em; white-space: normal; } /* Nav links */ .nav-link{ min-height:2.75rem; display:flex; align-items:center; gap:.7rem; border-radius:.45rem; padding:.55rem .85rem; font-size:.875rem; font-weight:500; color:#d9e2ef; border:1px solid transparent; cursor:pointer; transition:background .15s,color .15s,padding .3s ease-in-out,gap .3s ease-in-out; text-decoration:none; background:none; width:100%; text-align:left; white-space:nowrap; overflow: hidden; } .nav-link svg{ width:1.1rem !important; height:1.1rem !important; max-width:1.1rem !important; max-height:1.1rem !important; flex:0 0 auto; opacity:.8; } .nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; } .nav-link:hover svg{ opacity:1; } /* Active nav link — amber/gold gradient matching screenshot */ .nav-link-active{ background:linear-gradient(135deg,#d7b56f,#bd9048) !important; color:#fff !important; font-weight:600 !important; box-shadow:0 8px 18px rgba(189,142,73,.28); border-color:transparent !important; } .nav-link-active svg{ opacity:1 !important; } /* Logout link */ .nav-logout{ color:#f87171 !important; } .nav-logout:hover{ background:rgba(248,113,113,.1) !important; color:#fca5a5 !important; } /* Sub-menu */ .nav-sub{ display:none; padding-left:2.35rem; gap:.1rem; flex-direction:column; padding-bottom:.25rem; } .nav-sub.open{ display:flex; } .nav-sub-link{ display:block; padding:.42rem .75rem; border-radius:.35rem; font-size:.82rem; font-weight:500; color:#8899b0; text-decoration:none; transition:background .12s,color .12s; white-space:nowrap; } .nav-sub-link:hover{ background:rgba(255,255,255,.06); color:#e2e8f0; } .nav-sub-link.active{ background:rgba(20,40,70,.95); color:#fff !important; font-weight:600; } /* Chevron */ .nav-chevron{ width:.85rem !important; height:.85rem !important; max-width:.85rem !important; max-height:.85rem !important; margin-left:auto; transition:transform .2s; flex:0 0 auto; opacity:.7; } .nav-chevron.open{ transform:rotate(180deg); } /* ===== RESPONSIVE APP SHELL FIX START ===== */ html,body{max-width:100%;overflow-x:hidden} .topbar-menu-btn{ width:2.25rem; height:2.25rem; display:inline-grid; place-items:center; border:0; border-radius:.45rem; background:transparent; color:#334155; padding:0; } .topbar-menu-btn:hover{background:#f1f5f9} .sidebar-backdrop{display:none} @media (max-width:1023px){ .erp-shell, .erp-shell.collapsed{ display:block !important; grid-template-columns:1fr !important; min-width:0; } .erp-body main{ width:100%; min-width:0; } .erp-sidebar, .erp-sidebar:not(.collapsed), .erp-sidebar.collapsed{ position:fixed; inset:0 auto 0 0; z-index:60; width:min(17rem, calc(100vw - 3rem)) !important; max-width:17rem; min-height:100dvh; transform:translateX(-105%); transition:transform .22s ease; overflow-y:auto; overscroll-behavior:contain; box-shadow:14px 0 32px rgba(0,0,0,.35); } .erp-shell.sidebar-open .erp-sidebar{ transform:translateX(0); } .sidebar-backdrop{ position:fixed; inset:0; z-index:55; display:block; border:0; padding:0; background:rgba(2,6,23,.5); opacity:0; pointer-events:none; transition:opacity .2s ease; } .erp-shell.sidebar-open .sidebar-backdrop{ opacity:1; pointer-events:auto; } body.sidebar-open{overflow:hidden} .erp-sidebar.collapsed .nav-link span, .erp-sidebar.collapsed .sidebar-toggle-btn span, .erp-sidebar.collapsed #sidebar-collapse-btn span{ position:static !important; max-width:none !important; opacity:1 !important; visibility:visible !important; display:inline-block !important; transform:none !important; background:transparent !important; box-shadow:none !important; padding:0 !important; pointer-events:auto !important; } .erp-sidebar.collapsed .nav-chevron{display:block} .erp-sidebar.collapsed .nav-link, .erp-sidebar.collapsed .sidebar-toggle-btn, .erp-sidebar.collapsed #sidebar-collapse-btn{ justify-content:flex-start; gap:.7rem; padding:.55rem .85rem; } #sidebar-collapse-btn{display:none} .erp-topbar{ position:sticky; top:0; z-index:30; min-height:4rem; padding:.85rem 1rem !important; } .erp-topbar .flex{min-width:0} .topbar-title{gap:.75rem;min-width:0} .topbar-title h1{ font-size:1.05rem !important; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:calc(100vw - 5.5rem); } main > section.p-5{padding:1rem} .sidebar-brand{ min-height:6.4rem !important; padding:.8rem .75rem .9rem !important; } .sidebar-brand img,.sidebar-brand svg{ width:min(100%,11.4rem) !important; max-width:11.4rem !important; } } @media (min-width:1024px){ .topbar-menu-btn{display:none !important} } @media (max-width:480px){ .erp-sidebar, .erp-sidebar:not(.collapsed), .erp-sidebar.collapsed{ width:min(16rem, calc(100vw - 2rem)) !important; } main > section.p-5{padding:.75rem} .erp-card,.dash-panel,.metric-card,.finance-card{border-radius:.5rem} .table-filters, .bk-filter-row{ gap:.75rem; } } @media (max-width:360px){ .erp-sidebar, .erp-sidebar:not(.collapsed), .erp-sidebar.collapsed{ width:100vw !important; max-width:100vw; } .sidebar-brand img,.sidebar-brand svg{ width:min(100%,10.75rem) !important; max-width:10.75rem !important; } .nav-link{ min-height:2.55rem; font-size:.84rem; } .page-title { font-size: 1.15rem !important; } .topbar-title h1 { font-size: 0.95rem !important; } .topbar-user { padding-left: 0.5rem; gap: 0.4rem; border-left: 0; } .topbar-user strong, .topbar-user small { display: none !important; } .avatar { width: 2rem; height: 2rem; font-size: 0.8rem; } .metric-card, .finance-card, .dash-metric-card, .finance-card-v2 { padding: 0.85rem !important; } .filter-search, .bk-filter-search-col { min-width: 100% !important; } .table-filters, .filter-bar, .bk-filter-row { padding: 0.75rem !important; gap: 0.65rem; } .auth-form-panel { padding: 1rem !important; } .auth-shell { padding: 0.5rem !important; } .form-page, .ar-form-card, .settings-card, .exp-form-card, .wi-form-card { padding: 0.85rem !important; } .form-actions { flex-direction: column; align-items: stretch; gap: 0.65rem; } .form-actions button, .form-actions a, .btn-dark, .btn-outline, .btn-gold { width: 100%; justify-content: center; } .page-header-row { flex-direction: column; align-items: stretch; gap: 0.75rem; } .page-header-row .btn-dark, .page-header-row .btn-outline, .page-header-row .settings-save-btn, .page-header-row a[style*="inline-flex"], .page-header-row button[style*="inline-flex"] { width: 100% !important; justify-content: center; } .calendar-toolbar { flex-direction: column; align-items: stretch; } .calendar-toolbar button, .calendar-toolbar select { width: 100%; } .bk-topbar-actions { flex-direction: column; width: 100%; } .bk-action-btn { width: 100%; justify-content: center; } .modal-body, .modal-header { padding: 1rem !important; } .settings-toggle-row { flex-direction: column; align-items: flex-start; gap: 0.5rem; } } /* ===== RESPONSIVE APP SHELL FIX END ===== */ /* (Collapse button hover merged above) */ /* ===== SIDEBAR v3 — matches screenshot END ===== */ /* ===== ADDITIONAL MOBILE RESPONSIVENESS FIXES (320px) START ===== */ @media (max-width: 768px) { /* General Settings & Forms Tablet Layout */ .settings-card .form-grid { grid-template-columns: 1fr !important; } .settings-card .form-actions { flex-direction: column; align-items: stretch; } .settings-card .form-actions button { width: 100%; justify-content: center; } /* Activity Log Details 768px fixes */ .log-detail-layout, .al-detail-layout, .activity-detail-layout, .log-layout, .al-layout { grid-template-columns: 1fr !important; gap: 1rem !important; } .log-header, .al-header, .activity-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.85rem; } .log-properties pre, .activity-details pre, pre { white-space: pre-wrap !important; word-break: break-all !important; overflow-x: auto !important; max-width: 100%; } .log-meta-grid, .al-meta-grid, .activity-meta-row { grid-template-columns: 1fr !important; gap: 0.85rem !important; } .log-timeline-wrap { padding-left: 0 !important; } .log-nav-row, .al-nav-actions { flex-direction: column; width: 100%; } .log-nav-row a, .al-nav-actions a { width: 100%; justify-content: center; } .log-card, .al-card, .activity-card { padding: 1rem !important; } /* Activity Logs List 768px fixes */ .al-table-wrap, .log-table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; width: 100%; } .al-table, .log-table { min-width: 45rem; /* Prevents columns from squishing, forcing horizontal scroll */ } .al-filter-row, .log-filter-row, .al-topbar { flex-direction: column !important; align-items: stretch !important; gap: 0.75rem; } } @media (max-width: 640px) { /* Reports Overview */ .rep-metrics-grid { grid-template-columns: 1fr; } .rep-hbar-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.4rem; } .rep-hbar-name { width: 100%; margin-bottom: -0.25rem; font-size: 0.78rem; } .rep-hbar-track { flex: 1; min-width: 0; } .rep-date-range { width: 100%; justify-content: space-between; } .rep-filter-panel { flex-direction: column; align-items: stretch; } .rep-toolbar { flex-direction: column; align-items: stretch; width: 100%; } .rep-export-btn, .rep-filter-btn { width: 100%; justify-content: center; } .rep-donut-layout { gap: 1.5rem; } /* Users & Roles (Super Admin) */ .ur-stats-grid { grid-template-columns: 1fr; } .ur-role-summary-stats { flex-direction: column; gap: 0.85rem; } .ur-detail-head { flex-direction: column; align-items: stretch; gap: 0.75rem; } .ur-role-summary-card { flex-direction: column; align-items: stretch; } .ur-perm-header-actions { flex-direction: column; align-items: stretch; width: 100%; } .ur-perm-header-actions .btn-dark, .ur-perm-header-actions .btn-outline { width: 100%; justify-content: center; } .ur-mod-cell { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .ur-perm-matrix th.ur-col-module, .ur-perm-matrix td.ur-col-module { min-width: 8rem; padding-left: 0.5rem; } .ur-perm-matrix th, .ur-perm-matrix td { padding: 0.5rem 0.25rem; font-size: 0.65rem; } /* Advance Receipt */ .ar-paper-header { flex-direction: column; align-items: center; text-align: center; gap: 1rem; } .ar-paper-brand { flex-direction: column; align-items: center; width: 100%; } .ar-paper-badge-col, .ar-paper-receipt-meta { text-align: center; width: 100%; } .ar-paper-info-row { flex-direction: column; gap: 0.25rem; margin-bottom: 0.85rem; text-align: center; } .ar-paper-info-row span { min-width: auto; } .ar-paper-sig-row { flex-direction: column; align-items: center; gap: 1.25rem; text-align: center; } .ar-paper-sig-line { margin: 0 auto 0.35rem; } .ar-form-actions { flex-direction: column; align-items: stretch; } .ar-preview-actions { flex-direction: column; align-items: stretch; width: 100%; } .ar-preview-btn { width: 100%; } .ar-paper { padding: 0.85rem; } .ar-disclaimer { flex-direction: column; text-align: center; align-items: center; } /* New Booking & Bookings Layout */ .bk-overview-grid { grid-template-columns: 1fr; } .bk-client-grid { grid-template-columns: 1fr; } .bk-inv-info-card .bk-dl-inv-grid { grid-template-columns: 1fr; } .bk-details-grid { grid-template-columns: 1fr; } .bk-inv-meta { grid-template-columns: 1fr; } .bk-topbar { flex-direction: column; align-items: stretch; gap: 0.75rem; } .bk-topbar-actions { flex-direction: column; align-items: stretch; width: 100%; } .bk-action-btn { width: 100%; justify-content: center; } .bk-tabs { padding-bottom: 0.25rem; } .bk-client-row { flex-direction: column; align-items: center; text-align: center; } .form-grid.three, .form-grid.inquiry { grid-template-columns: 1fr; } } @media (max-width: 480px) { /* More aggressive stacking for extremely narrow screens like 320px */ .filter-selects { flex-direction: column; align-items: stretch; } .filter-selects select, .filter-selects input { width: 100%; } .btn-filter { width: 100%; justify-content: center; } .ar-paper-table th, .ar-paper-table td { padding: 0.4rem; font-size: 0.65rem; } .ur-tabs{gap:.35rem} .ur-tab{width:100%;padding:.65rem .8rem} .ur-module-search{margin:.75rem .85rem} .ur-module-search input{width:100%} .ur-perm-matrix { min-width: calc(100vw - 2rem); } .ur-perm-table-wrap { padding-bottom: 1rem; overflow-x:auto; max-height:none; } .ur-perm-table-wrap .ur-perm-matrix { min-width: calc(100vw - 2rem); width: auto; } .ur-perm-matrix th, .ur-perm-matrix td { padding: 0.45rem 0.35rem; font-size: 0.62rem; } .ur-perm-matrix th.ur-col-toggle, .ur-perm-matrix td.ur-col-toggle { width: 4.5rem; padding-right: 0.25rem; } .ur-perm-header-actions{flex-direction:column;align-items:stretch;width:100%;gap:.65rem} .ur-perm-header-actions .btn-dark, .ur-perm-header-actions .btn-outline{width:100%;justify-content:center} .ur-perm-form-actions{flex-direction:column;align-items:stretch} .ur-perm-form-actions > *{width:100%} .ur-role-summary-card{flex-direction:column;align-items:stretch} .ur-role-summary-stats{flex-direction:column;gap:.65rem} /* Reports Overview 320px deep fixes */ .rep-header { flex-direction: column; align-items: stretch; gap: 0.75rem; } .rep-date-range { flex-direction: column; align-items: stretch; height: auto; padding: 0.65rem; gap: 0.5rem; } .rep-date-range input { width: 100%; min-height: 2.5rem; text-align: center; } .rep-date-range span { display: none; } /* Hide the 'to' separator when stacking */ .rep-presets { flex-direction: column; width: 100%; } .rep-presets .btn-outline { width: 100%; justify-content: center; } .rep-chart-card { padding: 0.75rem !important; } .rep-chart-plot { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem; } .rep-donut-wrap { width: 7.5rem; height: 7.5rem; margin: 0 auto; } .rep-donut-center { inset: 1.15rem; } .rep-donut-center strong { font-size: 1.15rem; } .rep-donut-legend-side li { grid-template-columns: auto 1fr; align-items: start; } .rep-legend-meta { grid-column: 1 / -1; padding-left: 0.95rem; white-space: normal; margin-top: -0.25rem; font-size: 0.68rem; } /* Settings 320px deep fixes */ .settings-card { padding: 0.75rem !important; } .settings-3col { gap: 1rem; } .settings-section-title { font-size: 0.85rem; padding-bottom: 0.5rem; margin-bottom: 0.85rem; } .settings-toggle-col { padding-top: 1rem; } .settings-toggle-row { padding: 0.5rem 0; flex-direction: column; align-items: flex-start; gap: 0.5rem; } .settings-label { font-size: 0.78rem; } .settings-card label input, .settings-card label select, .settings-card label textarea, .settings-card .form-grid label input, .settings-card .form-grid label select, .settings-card .form-grid label textarea { min-height: 2.6rem; padding: 0.45rem 0.65rem; font-size: 0.82rem; } .settings-save-btn { width: 100%; justify-content: center; } } /* ===== ADDITIONAL MOBILE RESPONSIVENESS FIXES (320px) END ===== */ /* ===== MODERN FORM CONTROLS START ===== */ .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .erp-body select, .erp-body textarea{ min-height:2.75rem; width:100%; border:1px solid var(--erp-border-strong, rgba(148,163,184,.2)) !important; border-radius:.55rem !important; background-color:var(--erp-input, #fff) !important; color:var(--erp-input-text, #0f172a) !important; box-shadow:0 1px 2px rgba(15,23,42,.08); transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):hover, .erp-body select:hover, .erp-body textarea:hover{ border-color:var(--erp-input-hover-border, #60a5fa) !important; background-color:var(--erp-input-hover, #f8fafc) !important; } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, .erp-body select:focus, .erp-body textarea:focus{ outline:0 !important; border-color:var(--erp-input-focus-border, #38bdf8) !important; box-shadow:0 0 0 3px var(--erp-input-focus-ring, rgba(56,189,248,.18)),0 1px 2px rgba(15,23,42,.08) !important; background-color:var(--erp-input-focus, #fff) !important; } .erp-body select:not([multiple]):not(.cal-month-select), .erp-body .dash-month-select, .erp-body .cal-hall-select, .erp-body .bk-filter-select, .erp-body .gst-invoice-select, .erp-body .settings-select{ appearance:none; -webkit-appearance:none; padding-right:2.55rem!important; } .erp-body select option{ color:#0f172a; background:#fff; font-size:.92rem; } .erp-body select option:checked{ background:#2563eb; color:#fff; } .erp-body input[type="date"], .erp-body input[type="datetime-local"], .erp-body input[type="time"], .erp-body input[type="month"]{ color-scheme:light; } .erp-body input::placeholder, .erp-body textarea::placeholder{ color:var(--erp-input-placeholder, #94a3b8); } .filter-search, .date-input-wrap, .wi-input-wrap{ border-color:var(--theme-input-border, #cbd5e1)!important; border-radius:.55rem!important; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .15s ease,box-shadow .15s ease; } .filter-search:focus-within, .date-input-wrap:focus-within, .wi-input-wrap:focus-within{ border-color:#38bdf8!important; box-shadow:0 0 0 3px rgba(14,165,233,.18),0 1px 2px rgba(15,23,42,.04)!important; } .filter-search input, .date-input-wrap input, .wi-input-wrap input, .wi-input-wrap select, .wi-input-wrap textarea{ box-shadow:none!important; } .cal-month-picker{ gap:.45rem; } .cal-month-select{ min-height:2.75rem!important; border:1px solid #cbd5e1!important; border-radius:.55rem!important; background:#fff!important; color:#0f172a!important; padding:0 2.25rem 0 1rem!important; box-shadow:0 1px 2px rgba(15,23,42,.08); appearance:none; -webkit-appearance:none; } .cal-month-select option{ background:#fff; color:#0f172a; } .cal-month-select option:checked{ background:#2563eb; color:#fff; } .cal-month-picker .cal-month-chevron{ right:.8rem!important; } .settings-card label input, .settings-card label select, .settings-card label textarea, .settings-card .form-grid label input, .settings-card .form-grid label select, .settings-card .form-grid label textarea{ border-color:var(--theme-input-border, #cbd5e1)!important; border-radius:.55rem!important; box-shadow:0 1px 2px rgba(15,23,42,.04)!important; } /* ===== MODERN FORM CONTROLS END ===== */ /* ===== STICKY TABLE HEADERS GLOBALLY ===== */ .dashboard-table-wrap, .dash-upcoming-table-wrap, .dash-table-wrap, .ur-perm-table-wrap, .inv-table-wrap { overflow: auto !important; max-height: calc(100vh - 13rem); } .dashboard-table thead th, .dash-upcoming-table thead th, .dash-table thead th, .dash-recent-table thead th, .ur-perm-matrix thead th, .activity-detail-table thead th, .inv-table-wrap .dashboard-table thead th { position: sticky; top: 0; z-index: 45; box-shadow: 0 2px 4px rgba(0,0,0,0.06); } .dashboard-table thead th, .ur-perm-matrix thead th { background: #f8fafc; } .dash-table thead th { background: #f8fbff; } .dash-recent-table thead th, .dash-upcoming-table thead th { background: #fafbfc; } .activity-detail-table thead th { background: #fbfdff; } /* ===== STICKY TABLE HEADERS GLOBALLY END ===== */ /* ===== THEME TOGGLE START ===== */ .topbar-actions{display:flex;align-items:center;gap:1rem;margin-left:auto} .theme-toggle-btn{width:2.35rem!important;height:2.35rem!important;min-width:2.35rem!important;min-height:2.35rem!important;border-radius:.55rem!important;background:var(--erp-surface-raised)!important;color:var(--erp-text-soft)!important;border-color:var(--erp-border-strong)!important;transition:background .15s,color .15s,border-color .15s,transform .15s} .theme-toggle-btn:hover{background:#f8fafc!important;transform:translateY(-1px)} .theme-toggle-icon{width:1.05rem!important;height:1.05rem!important;max-width:none!important;max-height:none!important;stroke-linecap:round;stroke-linejoin:round} @media (max-width:1180px){.topbar-actions{gap:.75rem}.topbar-right{display:none}} /* ===== THEME TOGGLE END ===== */ /* ===== DARK MODE OVERRIDES START ===== */ .dark body { background: #0f172a; color: #e2e8f0; } .dark .erp-shell, .dark .erp-body main { background: #081225 !important; } .dark .bg-white { background: #1e293b !important; } .dark .bg-slate-100 { background: #081225 !important; } .dark .bg-slate-950 { background: #020617 !important; } .dark .text-slate-900, .dark .text-slate-950, .dark .text-slate-800 { color: #f8fafc !important; } .dark .text-slate-600, .dark .text-slate-500 { color: #cbd5e1 !important; } .dark .border-slate-200, .dark .border-slate-300 { border-color: #24324a !important; } .dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { border-color: #24324a !important; } /* Cards & Panels */ .dark .erp-card, .dark .dash-panel, .dark .finance-card, .dark .metric-card, .dark .finance-card-v2, .dark .dash-metric-card, .dark .inv-stat-card, .dark .ur-stat-card, .dark .settings-card, .dark .bk-sidebar-card, .dark .bk-panel-card, .dark .auth-card-split, .dark .auth-form-panel { background: #1e293b !important; border-color: #24324a !important; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; } /* Dashboard V2 */ .dark .dashboard-page.dash-page-v2 { background: #0f172a; } .dark .dash-panel-head { background: #081225 !important; border-bottom-color: #24324a !important; } .dark .dash-panel-head h2 { color: #f8fafc !important; } .dark .dash-metric-card strong, .dark .fc-value-row strong, .dark .dash-occ-pct { color: #f8fafc !important; } .dark .dash-metric-label, .dark .fc-top span { color: #cbd5e1 !important; } /* Tables */ .dark .dashboard-table th, .dark .dash-table th, .dark .dash-recent-table th, .dark .dash-upcoming-table thead th, .dark .ur-perm-matrix thead th, .dark .activity-detail-table th { background: #081225 !important; color: #cbd5e1 !important; border-bottom-color: #24324a !important; } .dark .dashboard-table td, .dark .dash-table td, .dark .dash-recent-table td, .dark .dash-upcoming-table tbody td, .dark .ur-perm-matrix tbody td, .dark .activity-detail-table td { border-bottom-color: #24324a !important; color: #e2e8f0 !important; } .dark .dashboard-table tbody tr:hover td, .dark .dash-table tbody tr:hover td, .dark .dash-upcoming-table tbody tr:hover td { background: #24324a !important; } .dark .empty-cell { color: #94a3b8 !important; } /* Inputs & Forms */ /* Buttons */ .dark .btn-outline { background: #1e293b !important; border-color: #24324a !important; color: #e2e8f0 !important; } .dark .btn-outline:hover { background: #24324a !important; } .dark .action-btn, .dark .cal-nav-sm, .dark .cal-nav-btn { background: #081225 !important; border-color: #475569 !important; color: #cbd5e1 !important; } .dark .action-btn:hover, .dark .cal-nav-sm:hover, .dark .cal-nav-btn:hover { background: #24324a !important; color: #f8fafc !important; } .dark .theme-toggle-btn { background: #081225 !important; border-color: #475569 !important; color: #fbbf24 !important; } .dark .theme-toggle-btn:hover { background: #1e293b !important; color: #fde68a !important; } .dark .dash-btn-view-all { background: #081225 !important; border-color: #24324a !important; color: #e2e8f0 !important; } .dark .dash-btn-view-all:hover { background: #24324a !important; } .dark .bk-clear-btn { background: #081225 !important; border-color: #24324a !important; color: #e2e8f0 !important; } .dark .bk-clear-btn:hover { background: #24324a !important; } /* Dropdowns & Menus */ .dark .dropdown-menu { background: #1e293b !important; border-color: #24324a !important; } .dark .dropdown-item { color: #e2e8f0 !important; } .dark .dropdown-item:hover { background: #24324a !important; color: #f8fafc !important; } /* Calendar & Sidebar elements */ .dark .calendar-day { border-color: #24324a !important; } .dark .cal-head-v2 { border-color: #24324a !important; color: #cbd5e1 !important; } .dark .cal-cell { border-color: #24324a !important; } .dark .cal-cell:hover { background: #24324a !important; } .dark .calendar-legend { color: #cbd5e1 !important; } .dark .cal-sidebar-heading { color: #f8fafc !important; } .dark .cal-legend-item { color: #cbd5e1 !important; } .dark .cal-day-event { background: #081225 !important; border-color: #24324a !important; } .dark .cal-day-event-name, .dark .cal-upcoming-name, .dark .cal-upcoming-date strong { color: #f8fafc !important; } .dark .cal-upcoming-item { border-bottom-color: #24324a !important; } .dark .cal-upcoming-item:hover { background: #24324a !important; } .dark .cal-toolbar { border-bottom-color: #24324a !important; } .dark .cal-view-tabs { border-color: #24324a !important; } .dark .cal-view-tab { background: #1e293b !important; border-color: #24324a !important; color: #cbd5e1 !important; } .dark .cal-view-tab.active { background: #24324a !important; color: #f8fafc !important; } /* Status Badges */ .dark .status-badge.pending { background: rgba(245, 158, 11, 0.2) !important; color: #fcd34d !important; } .dark .status-badge.confirmed { background: rgba(34, 197, 94, 0.2) !important; color: #86efac !important; } .dark .status-badge.booked { background: rgba(244, 63, 94, 0.2) !important; color: #fda4af !important; }.dark .status-badge.cancelled { background: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; } .dark .status-badge.tentative { background: rgba(59, 130, 246, 0.2) !important; color: #93c5fd !important; } .dark .metric-blue { background: rgba(59, 130, 246, 0.2) !important; } /* Event Status badges (booking show page) */ .status-badge.event-status-upcoming{background:#dbeafe;color:#1e40af} .status-badge.event-status-today{background:#dcfce7;color:#166534} .status-badge.event-status-completed{background:#e5e7eb;color:#475569} .status-badge.cancelled{background:#fee2e2;color:#991b1b} .dark .status-badge.event-status-upcoming{background:rgba(59,130,246,.2)!important;color:#93c5fd!important} .dark .status-badge.event-status-today{background:rgba(34,197,94,.2)!important;color:#86efac!important} .dark .status-badge.event-status-completed{background:rgba(148,163,184,.2)!important;color:#cbd5e1!important} .dark .status-badge.cancelled{background:rgba(244,63,94,.2)!important;color:#fda4af!important} .dark .metric-green { background: rgba(34, 197, 94, 0.2) !important; } .dark .metric-gold { background: rgba(245, 158, 11, 0.2) !important; } .dark .metric-purple { background: rgba(168, 85, 247, 0.2) !important; } /* Modals */ .dark .modal-box { background: #1e293b !important; border: 1px solid #24324a !important; } .dark .modal-header { border-bottom-color: #24324a !important; } /* Misc */ .dark .settings-section-title { color: #f8fafc !important; border-bottom-color: #24324a !important; } .dark .page-title { color: #f8fafc !important; } .dark .page-subtitle { color: #cbd5e1 !important; } .dark .panel-title-row { background: #1e293b !important; border-bottom-color: #24324a !important; } .dark .panel-title-row h2, .dark .form-page h2, .dark .form-page h3, .dark .bk-card-title, .dark .bk-sidebar-title { color: #f8fafc !important; } .dark .form-grid label, .dark .table-filters label, .dark .today, .dark .topbar-user strong { color: #e2e8f0 !important; } .dark .topbar-user small { color: #94a3b8 !important; } .dark .today svg { stroke: #cbd5e1 !important; } .dark .topbar-user { border-left-color: #24324a !important; } .dark .menu-lines, .dark .menu-lines:after { border-color: #cbd5e1 !important; } .dark .bk-filter-card { background: #1e293b !important; border-color: #24324a !important; } .dark .bk-filter-label { color: #cbd5e1 !important; } .dark .erp-topbar { background: #1e293b !important; border-bottom: 1px solid #24324a !important; box-shadow: none !important; } .dark .erp-sidebar { background: linear-gradient(180deg,#020617,#0f172a) !important; box-shadow: 8px 0 26px rgba(0,0,0,.36) !important; } .dark .erp-footer { background: #081225 !important; border-top-color: #24324a !important; color: #94a3b8 !important; } .dark .table-footer { color: #94a3b8 !important; border-top-color: #24324a !important; } .dark .settings-toggle-row { border-bottom-color: #24324a !important; } .dark .settings-toggle-row-label { color: #e2e8f0 !important; } .dark .settings-label { color: #cbd5e1 !important; } /* ===== DARK MODE OVERRIDES END ===== */ /* ===== PROJECT THEME CONSISTENCY START ===== */ :root{ color-scheme:light; --erp-bg:#f2f0ec; --erp-surface:#fafaf9; --erp-surface-soft:#f5f4f1; --erp-surface-raised:#ffffff; --erp-border:#e4e2dc; --erp-border-strong:#d6d3cc; --erp-text:#1c1917; --erp-text-soft:#44403c; --erp-muted:#78716c; --erp-muted-2:#a8a29e; --erp-input:#fafaf9; --erp-input-text:#1c1917; --erp-input-placeholder:#a8a29e; --erp-blue:#2563eb; --erp-link:#0b65b9; --erp-shadow:0 12px 30px rgba(28,25,23,.09); --cal-border:#d6d3cc; --cal-border-soft:#e4e2dc; } .dark{ color-scheme:dark; --erp-bg:#0f172a; --erp-surface:#1e293b; --erp-surface-soft:#111827; --erp-surface-raised:#172033; --erp-border:#334155; --erp-border-strong:#475569; --erp-text:#f8fafc; --erp-text-soft:#e2e8f0; --erp-muted:#cbd5e1; --erp-muted-2:#94a3b8; --erp-input:#0f172a; --erp-input-text:#f8fafc; --erp-input-placeholder:#9fb0c8; --erp-blue:#60a5fa; --erp-link:#93c5fd; --erp-shadow:0 16px 36px rgba(0,0,0,.35); --cal-border:var(--erp-border-strong); --cal-border-soft:var(--erp-border); } body,.erp-shell,.dashboard-page,.form-page,.booking-calendar-page,.rep-page,.inv-page-compact,.inv-add-page,.settings-page-layout{ background:var(--erp-bg); color:var(--erp-text); } .erp-card,.dash-panel,.metric-card,.finance-card,.finance-card-v2,.dash-metric-card,.inv-stat-card,.inv-side-panel,.inv-table-card,.inv-add-card,.rep-metric-card,.rep-chart-card,.rep-filter-panel,.ur-stat-card,.ur-role-card,.ur-perm-card,.ur-role-summary-card,.settings-card,.settings-sidebar-card,.bk-panel-card,.bk-sidebar-card,.bk-info-card,.bk-inv-info-card,.bk-invoice-summary-card,.wi-form-card,.exp-form-card,.gst-card,.gst-panel,.ar-form-card,.ar-preview-card,.modal-box{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; box-shadow:var(--erp-shadow)!important; } .dash-panel-head,.panel-title-row,.inv-filter-row,.modal-header,.settings-card-head,.bk-topbar,.bk-tabs,.bk-action-list,.invoice-section,.table-footer,.ur-detail-head,.ur-perm-header,.rep-header,.rep-section-head{ border-color:var(--erp-border)!important; } h1,h2,h3,h4,h5,h6, .page-title,.bk-title,.bk-card-title,.bk-sidebar-title,.inv-side-title,.rep-card-title,.settings-section-title,.settings-toggle-row-label,.ur-mod-cell strong,.ur-donut span strong,.rep-donut-center strong,.metric-card strong,.finance-card strong,.finance-card-v2 strong,.dash-metric-card strong,.panel-title-row h2,.form-page h2,.form-page h3,.topbar-user strong{ color:var(--erp-text)!important; } p,dt,dd,label,.form-grid label,.table-filters label,.settings-label,.bk-dl dt,.bk-dl dd,.bk-summary-row,.bk-action-row,.rep-donut-legend,.ur-donut-legend,.inv-summary-row,.today,.topbar-user small,.page-subtitle,.settings-toggle-row-desc,.inv-view-label,.rep-metric-card>div>span,.rep-metric-card>div>small,.inv-stat-card>div>span,.inv-stat-card>div>small,.metric-card span,.metric-card small,.finance-card span,.finance-card small,.empty-cell{ color:var(--erp-muted)!important; } a,.link-blue,.inv-side-link,.ur-link-btn{ color:var(--erp-link)!important; } .dark .text-amber-600{color:#fbbf24!important} .dark .positive,.dark .money-paid,.dark .bk-text-paid{color:#22c55e!important} .dark .negative,.dark .money-due,.dark .bk-text-due{color:#f87171!important} .dark .warning{color:#f59e0b!important} .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .erp-body select, .erp-body textarea, .settings-input, .settings-select, .settings-textarea, .filter-search, .wi-input-wrap, .auth-control, .rep-date-range, .calendar-actions span, .calendar-actions button, .calendar-toolbar button, .calendar-toolbar select, .cal-month-select, .dash-month-select{ background:var(--erp-input)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-input-text)!important; } .erp-body input::placeholder, .erp-body textarea::placeholder, .wi-input-wrap input::placeholder, .wi-input-wrap textarea::placeholder{ color:var(--erp-input-placeholder)!important; opacity:1; } .erp-body input:focus, .erp-body select:focus, .erp-body textarea:focus, .settings-input:focus, .settings-select:focus, .settings-textarea:focus, .wi-input-wrap:focus-within, .auth-control:focus-within{ border-color:var(--erp-blue)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--erp-blue) 24%,transparent)!important; outline:0!important; } .dark input[type="date"], .dark input[type="datetime-local"], .dark input[type="time"], .dark input[type="month"]{ color-scheme:dark; } .dark select{ } .dashboard-table,.dash-table,.dash-recent-table,.dash-upcoming-table,.ur-perm-matrix,.activity-detail-table{ color:var(--erp-text)!important; } .dashboard-table th,.dash-table th,.dash-recent-table th,.dash-upcoming-table thead th,.ur-perm-matrix thead th,.activity-detail-table th{ background:var(--erp-surface-soft)!important; border-color:var(--erp-border)!important; color:var(--erp-muted)!important; } .dashboard-table td,.dash-table td,.dash-recent-table td,.dash-upcoming-table tbody td,.ur-perm-matrix tbody td,.activity-detail-table td{ border-color:var(--erp-border)!important; color:var(--erp-text-soft)!important; } .dashboard-table tbody tr:hover td,.dash-table tbody tr:hover td,.dash-upcoming-table tbody tr:hover td,.ur-perm-matrix tbody tr:hover td{ background:var(--erp-surface-soft)!important; } .btn-outline,.action-btn,.dash-btn-view-all,.cal-nav-sm,.cal-nav-btn,.bk-clear-btn,.rep-chart-pill,.rep-filter-btn,.rep-export-btn,.inv-manage-cat-btn,.ar-preview-btn{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; } .btn-outline:hover,.action-btn:hover,.dash-btn-view-all:hover,.cal-nav-sm:hover,.cal-nav-btn:hover,.bk-clear-btn:hover,.rep-chart-pill:hover,.rep-filter-btn:hover,.rep-export-btn:hover,.inv-manage-cat-btn:hover,.ar-preview-btn:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .filter-search input,.wi-input-wrap input,.wi-input-wrap select,.wi-input-wrap textarea,.auth-control input{ background:transparent!important; border-color:transparent!important; box-shadow:none!important; } .calendar-day,.cal-cell,.calendar-head,.cal-head-v2,.large-day,.bk-action-row,.bk-summary-row,.bk-sum-row,.bk-invoice-notes-block,.bk-invoice-notes,.bk-notes-box,.settings-toggle-row,.inv-summary-status,.inv-side-link-center,.ur-mod-cell,.rep-hbar-row{ border-color:var(--erp-border)!important; } .calendar-grid.large,.cal-view-tabs,.bk-filter-card,.table-filters,.rep-donut-center,.ur-donut::before{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; } .dark .occupancy-ring:after, .dark .ur-donut::before, .dark .rep-donut-center{ background:var(--erp-surface)!important; box-shadow:0 0 0 1px var(--erp-border)!important; } .dark .calendar-day.muted, .dark .cal-cell.muted, .dark .large-day.muted{ color:#64748b!important; } .dark .day-pill.available, .dark .calendar-event.available, .dark .status-badge.confirmed, .dark .status-badge.completed, .dark .status-badge.scheduled{ background:rgba(34,197,94,.16)!important; color:#86efac!important; } .dark .day-pill.booked, .dark .calendar-event.confirmed, .dark .calendar-event.completed, .dark .status-badge.pending{ background:rgba(244,63,94,.16)!important; color:#fda4af!important; } .dark .day-pill.tentative, .dark .calendar-event.pending, .dark .status-badge.tentative, .dark .status-badge.inv-status-low{ background:rgba(245,158,11,.18)!important; color:#fcd34d!important; } .dark .metric-blue,.dark .inv-blue,.dark .ur-mod-blue{background:rgba(59,130,246,.18)!important;color:#93c5fd!important} .dark .metric-green,.dark .inv-green,.dark .ur-mod-green{background:rgba(34,197,94,.18)!important;color:#86efac!important} .dark .metric-gold,.dark .inv-amber,.dark .ur-mod-gold,.dark .ur-mod-orange{background:rgba(245,158,11,.18)!important;color:#fcd34d!important} .dark .metric-purple,.dark .inv-purple,.dark .ur-mod-purple{background:rgba(168,85,247,.18)!important;color:#c4b5fd!important} .dark .rep-teal,.dark .ur-mod-cyan{background:rgba(20,184,166,.18)!important;color:#5eead4!important} .dark .ur-mod-pink{background:rgba(236,72,153,.18)!important;color:#f9a8d4!important} .dark .ur-mod-slate{background:rgba(148,163,184,.16)!important;color:#cbd5e1!important} .dropdown-menu,.bk-dropdown-menu{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; box-shadow:var(--erp-shadow)!important; } .dropdown-item,.bk-dropdown-item{ color:var(--erp-text-soft)!important; } .dropdown-item:hover,.bk-dropdown-item:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .wi-flash-success,.mb-4.rounded-md.border-emerald-200{ background:#ecfdf5!important; border-color:#a7f3d0!important; color:#047857!important; } .wi-flash-error,.mb-4.rounded-md.border-rose-200{ background:#fff1f2!important; border-color:#fecdd3!important; color:#be123c!important; } .dark .wi-flash-success,.dark .mb-4.rounded-md.border-emerald-200{ background:rgba(6,78,59,.55)!important; border-color:rgba(52,211,153,.35)!important; color:#a7f3d0!important; } .dark .wi-flash-error,.dark .mb-4.rounded-md.border-rose-200{ background:rgba(127,29,29,.55)!important; border-color:rgba(251,113,133,.35)!important; color:#fecdd3!important; } .dark .auth-page{ background:radial-gradient(circle at 16% 10%,#1e293b 0,#111827 38%,#020617 100%)!important; } .dark .auth-form-wrap h1, .dark .auth-field{ color:var(--erp-text)!important; } .dark .auth-lead, .dark .auth-contact, .dark .auth-footer{ color:var(--erp-muted)!important; } .dark .auth-form-panel { background: rgba(30, 41, 59, 0.96) !important; } .dark .auth-control { background: #0f172a !important; border-color: rgba(71, 85, 105, 0.3) !important; } .dark .auth-control:focus-within { background: #111827 !important; border-color: #38bdf8 !important; box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.15) !important; } .dark .auth-control svg { stroke: #64748b !important; } .dark .auth-control:focus-within svg { stroke: #38bdf8 !important; } .dark .auth-form .error, .dark .auth-form p.error, .dark .auth-field .error, .dark .auth-shell .error { color: #f87171 !important; } /* ===== PROJECT THEME CONSISTENCY END ===== */ /* ===== GLOBAL INPUT HOVER EFFECT START ===== */ :root{ --erp-input-hover:#f5f4f1; --erp-input-focus:#fafaf9; --erp-input-hover-border:#d6d3cc; --erp-input-focus-border:#d4a853; --erp-input-focus-ring:rgba(212,168,83,.16); } .dark{ --erp-input-hover:#111827; --erp-input-focus:#0f172a; --erp-input-hover-border:#64748b; --erp-input-focus-border:#38bdf8; --erp-input-focus-ring:rgba(56,189,248,.22); } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, .erp-body select:focus, .erp-body textarea:focus, .settings-input:focus, .settings-select:focus, .settings-textarea:focus{ background-color:var(--erp-input-focus)!important; border-color:var(--erp-input-focus-border)!important; color:var(--erp-input-text)!important; box-shadow:0 0 0 3px var(--erp-input-focus-ring)!important; outline:0!important; } .filter-search:focus-within, .date-input-wrap:focus-within, .wi-input-wrap:focus-within, .auth-control:focus-within, .rep-date-range:focus-within{ background-color:var(--erp-input-focus)!important; border-color:var(--erp-input-focus-border)!important; box-shadow:0 0 0 3px var(--erp-input-focus-ring)!important; } .erp-body input:disabled, .erp-body select:disabled, .erp-body textarea:disabled, .erp-body input[readonly], .erp-body textarea[readonly]{ opacity:.75; cursor:not-allowed; } .dark .erp-body input:disabled, .dark .erp-body select:disabled, .dark .erp-body textarea:disabled, .dark .erp-body input[readonly], .dark .erp-body textarea[readonly]{ background-color:#172033!important; color:#94a3b8!important; border-color:#334155!important; } /* ===== GLOBAL INPUT HOVER EFFECT END ===== */ /* ===== GLOBAL SELECT DROPDOWN THEME START ===== */ .erp-body select, .dash-month-select, .cal-month-select, .bk-filter-select, .gst-invoice-select, .settings-select, .cal-hall-select{ color-scheme:light; } .dark .erp-body select, .dark .dash-month-select, .dark .cal-month-select, .dark .bk-filter-select, .dark .gst-invoice-select, .dark .settings-select, .dark .cal-hall-select{ color-scheme:dark; background-color:var(--erp-input)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-input-text)!important; } .erp-body select option, .dash-month-select option, .cal-month-select option, .bk-filter-select option, .gst-invoice-select option, .settings-select option, .cal-hall-select option{ background-color:#ffffff!important; color:#0f172a!important; } .erp-body select option:hover, .dash-month-select option:hover, .cal-month-select option:hover, .bk-filter-select option:hover, .gst-invoice-select option:hover, .settings-select option:hover, .cal-hall-select option:hover{ background-color:#dbeafe!important; color:#0f172a!important; } .erp-body select option:checked, .dash-month-select option:checked, .cal-month-select option:checked, .bk-filter-select option:checked, .gst-invoice-select option:checked, .settings-select option:checked, .cal-hall-select option:checked{ background-color:#2563eb!important; color:#ffffff!important; } .dark .erp-body select option, .dark .dash-month-select option, .dark .cal-month-select option, .dark .bk-filter-select option, .dark .gst-invoice-select option, .dark .settings-select option, .dark .cal-hall-select option{ background-color:#0f172a!important; color:#e2e8f0!important; } .dark .erp-body select option:hover, .dark .dash-month-select option:hover, .dark .cal-month-select option:hover, .dark .bk-filter-select option:hover, .dark .gst-invoice-select option:hover, .dark .settings-select option:hover, .dark .cal-hall-select option:hover{ background-color:#1e293b!important; color:#f8fafc!important; } .dark .erp-body select option:checked, .dark .dash-month-select option:checked, .dark .cal-month-select option:checked, .dark .bk-filter-select option:checked, .dark .gst-invoice-select option:checked, .dark .settings-select option:checked, .dark .cal-hall-select option:checked{ background-color:#2563eb!important; color:#ffffff!important; } /* ===== GLOBAL SELECT WRAPPER & ARROW STANDARDIZATION ===== */ .select-wrapper { position: relative; } .dash-mbc-sel, .form-select, .form-control-select, .erp-body select, .dash-month-select, .cal-month-select, .bk-filter-select, .gst-invoice-select, .settings-select, .cal-hall-select { height: 48px; padding-right: 42px!important; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none!important; } .select-wrapper .dropdown-arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; width: 16px; height: 16px; opacity: 0.7; } .dark .select-wrapper .dropdown-arrow { opacity: 0.8; } .dark .dash-month-select, .dark .cal-month-select{ box-shadow:0 8px 30px rgba(0,0,0,.22)!important; } /* ===== GLOBAL SELECT DROPDOWN THEME END ===== */ /* ===== DARK FORM CONTROL HARDENING START ===== */ .dark .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .dark .erp-body select, .dark .erp-body textarea, .dark .settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .dark .settings-card select, .dark .settings-card textarea, .dark .settings-input, .dark .settings-select, .dark .settings-textarea, .dark .filter-search, .dark .date-input-wrap, .dark .wi-input-wrap, .dark .auth-control, .dark .rep-date-range, .dark .gst-add-input, .dark .gst-add-amount, .dark .ar-readonly, .dark .calendar-toolbar button, .dark .calendar-toolbar select, .dark .calendar-actions span, .dark .calendar-actions button, .dark .cal-month-select, .dark .dash-month-select, .dark .cal-hall-select, .dark .bk-filter-select, .dark .gst-invoice-select{ background-color:var(--theme-input-bg)!important; border-color:var(--theme-input-border)!important; color:var(--theme-text-primary)!important; color-scheme:dark; } .dark .filter-search input, .dark .date-input-wrap input, .dark .wi-input-wrap input, .dark .wi-input-wrap select, .dark .wi-input-wrap textarea, .dark .auth-control input, .dark .rep-date-range input{ background-color:transparent!important; border-color:transparent!important; color:var(--erp-input-text)!important; box-shadow:none!important; } .dark .erp-body input::placeholder, .dark .erp-body textarea::placeholder, .dark .settings-card input::placeholder, .dark .settings-card textarea::placeholder, .dark .filter-search input::placeholder, .dark .date-input-wrap input::placeholder, .dark .wi-input-wrap input::placeholder, .dark .wi-input-wrap textarea::placeholder, .dark .auth-control input::placeholder, .dark .rep-date-range input::placeholder, .dark .gst-add-input::placeholder, .dark .gst-add-amount::placeholder{ color:var(--erp-input-placeholder)!important; opacity:1!important; } .dark .erp-body input:focus, .dark .erp-body select:focus, .dark .erp-body textarea:focus, .dark .settings-card input:focus, .dark .settings-card select:focus, .dark .settings-card textarea:focus, .dark .filter-search:focus-within, .dark .date-input-wrap:focus-within, .dark .wi-input-wrap:focus-within, .dark .auth-control:focus-within, .dark .rep-date-range:focus-within, .dark .gst-add-input:focus, .dark .gst-add-amount:focus{ background-color:var(--erp-input-focus)!important; border-color:var(--erp-input-focus-border)!important; color:var(--erp-input-text)!important; box-shadow:0 0 0 3px var(--erp-input-focus-ring)!important; outline:0!important; } .dark .erp-body input[type="date"], .dark .erp-body input[type="datetime-local"], .dark .erp-body input[type="time"], .dark .erp-body input[type="month"], .dark .settings-card input[type="date"], .dark .settings-card input[type="datetime-local"], .dark .settings-card input[type="time"], .dark .settings-card input[type="month"]{ color-scheme:dark; } .dark .erp-body select, .dark .settings-card select, .dark .wi-input-wrap select, .dark .cal-month-select, .dark .dash-month-select, .dark .cal-hall-select, .dark .bk-filter-select, .dark .gst-invoice-select{ } .dark .erp-body select option, .dark .settings-card select option, .dark .wi-input-wrap select option, .dark .cal-month-select option, .dark .dash-month-select option, .dark .cal-hall-select option, .dark .bk-filter-select option, .dark .gst-invoice-select option{ background-color:var(--erp-input)!important; color:var(--erp-input-text)!important; } .dark .erp-body select option:checked, .dark .settings-card select option:checked, .dark .wi-input-wrap select option:checked, .dark .cal-month-select option:checked, .dark .dash-month-select option:checked, .dark .cal-hall-select option:checked, .dark .bk-filter-select option:checked, .dark .gst-invoice-select option:checked{ background-color:#2563eb!important; color:#ffffff!important; } .dark .dropdown-menu, .dark .bk-dropdown-menu, .dark .custom-select-container .dropdown-menu, .dark #shareMenu{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; box-shadow:var(--erp-shadow)!important; } .dark .custom-select-container > div[class*="bg-white"]{ background-color:var(--erp-input)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-input-text)!important; } .dark .custom-select-container > div[class*="bg-white"]:hover, .dark .custom-select-container.open > div[class*="bg-white"]{ background-color:var(--erp-input-hover)!important; border-color:var(--erp-input-hover-border)!important; } .dark .custom-select-container > div[class*="bg-white"] span, .dark .custom-select-container > div[class*="bg-white"] svg{ color:var(--erp-input-text)!important; } .dark .dropdown-menu [class*="text-slate"], .dark .bk-dropdown-menu [class*="text-slate"]{ background-color:transparent!important; border-color:var(--erp-border)!important; color:var(--erp-text-soft)!important; } .dark .dropdown-item, .dark .bk-dropdown-item, .dark .dropdown-menu li, .dark .custom-select-container li{ color:var(--erp-text-soft)!important; } .dark .dropdown-item:hover, .dark .bk-dropdown-item:hover, .dark .dropdown-menu li:hover, .dark .custom-select-container li:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .dark .info-line{ background:rgba(37,99,235,.14)!important; border-color:rgba(96,165,250,.35)!important; color:#bfdbfe!important; } .dark .wi-divider{ background-color:var(--erp-border)!important; } .dark .wi-input-wrap > svg, .dark .date-input-wrap svg, .dark .filter-search svg, .dark .rep-date-range svg{ color:var(--erp-muted-2)!important; stroke:currentColor!important; } .dark .date-input-wrap svg, .dark .rep-date-range svg{ color:#fff!important; } html:not(.dark) .date-input-wrap svg, html:not(.dark) .rep-date-range svg{ color:#000!important; } /* ===== DARK FORM CONTROL HARDENING END ===== */ /* ===== WRAPPED FILTER & ROW ACTION FIXES START ===== */ .filter-search, .date-input-wrap, .rep-date-range{ display:flex; align-items:center; min-width:0; } .filter-search input, .date-input-wrap input, .rep-date-range input{ flex:1 1 auto; min-width:0; width:100%; min-height:2.5rem; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--erp-input-text)!important; box-shadow:none!important; outline:0!important; appearance:auto!important; -webkit-appearance:auto!important; } .date-input-wrap input[type="date"], .rep-date-range input[type="date"]{ color-scheme:inherit; } .action-icons{ position:relative; flex-wrap:nowrap; } .action-icons > .dropdown-wrap{ position:relative; display:inline-flex; flex:0 0 auto; } .action-icons .dropdown-menu{ width:max-content!important; min-width:11rem!important; max-width:min(18rem, calc(100vw - 2rem)); padding:.35rem!important; border-radius:.55rem!important; overflow:visible!important; } .action-icons .dropdown-item{ display:flex!important; align-items:center; width:100%!important; min-height:2.25rem!important; padding:.55rem .75rem!important; border:0!important; border-radius:.35rem!important; background:transparent!important; box-shadow:none!important; color:var(--erp-text-soft)!important; font-size:.84rem!important; line-height:1.25!important; text-align:left!important; justify-content:flex-start!important; white-space:nowrap!important; } .action-icons .dropdown-item:hover, .action-icons .dropdown-item:focus{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .booking-list-page .dashboard-table-wrap{ overflow-x:auto; overflow-y:visible; } /* ===== WRAPPED FILTER & ROW ACTION FIXES END ===== */ /* ===== PROJECT-WIDE DARK MODE NORMALIZATION START ===== */ .dark .erp-body{ background:var(--erp-bg)!important; color:var(--erp-text)!important; } .dark .erp-body .bg-white, .dark .erp-body .bg-white\/95, .dark .erp-body .bg-slate-50, .dark .erp-body .bg-slate-100, .dark .erp-body .bg-slate-200{ background-color:var(--erp-surface)!important; } .dark .erp-body .hover\:bg-white\/10:hover, .dark .erp-body .hover\:bg-slate-50:hover, .dark .erp-body .hover\:bg-slate-100:hover{ background-color:var(--erp-surface-soft)!important; } .dark .erp-body .border-slate-100, .dark .erp-body .border-slate-200, .dark .erp-body .border-slate-300, .dark .erp-body .divide-slate-100 > * + *, .dark .erp-body .divide-slate-200 > * + *{ border-color:var(--erp-border)!important; } .dark .erp-body .text-slate-950, .dark .erp-body .text-slate-900, .dark .erp-body .text-slate-800, .dark .erp-body .text-slate-700{ color:var(--erp-text)!important; } .dark .erp-body .text-slate-600, .dark .erp-body .text-slate-500, .dark .erp-body .text-slate-400, .dark .erp-body .text-gray-600, .dark .erp-body .text-gray-500{ color:var(--erp-muted)!important; } .dark .erp-body [style*="background:#fff"], .dark .erp-body [style*="background: #fff"], .dark .erp-body [style*="background:#ffffff"], .dark .erp-body [style*="background: #ffffff"], .dark .erp-body [style*="background:#f8fafc"], .dark .erp-body [style*="background: #f8fafc"], .dark .erp-body [style*="background:#f1f5f9"], .dark .erp-body [style*="background: #f1f5f9"]{ background:var(--erp-surface)!important; } .dark .erp-body [style*="background:#eff6ff"], .dark .erp-body [style*="background: #eff6ff"], .dark .erp-body [style*="background:#dbeafe"], .dark .erp-body [style*="background: #dbeafe"], .dark .erp-body [style*="background:#f0f9ff"], .dark .erp-body [style*="background: #f0f9ff"]{ background:rgba(37,99,235,.16)!important; } .dark .erp-body [style*="background:#ecfdf5"], .dark .erp-body [style*="background: #ecfdf5"], .dark .erp-body [style*="background:#f0fdf4"], .dark .erp-body [style*="background: #f0fdf4"]{ background:rgba(6,78,59,.55)!important; } .dark .erp-body [style*="background:#fff4e5"], .dark .erp-body [style*="background: #fff4e5"], .dark .erp-body [style*="background:#fff7ed"], .dark .erp-body [style*="background: #fff7ed"], .dark .erp-body [style*="background:#fef3c7"], .dark .erp-body [style*="background: #fef3c7"]{ background:rgba(245,158,11,.18)!important; } .dark .erp-body [style*="border:1px solid #e5e7eb"], .dark .erp-body [style*="border: 1px solid #e5e7eb"], .dark .erp-body [style*="border:1px solid #e2e8f0"], .dark .erp-body [style*="border: 1px solid #e2e8f0"], .dark .erp-body [style*="border:1px solid #d7dce4"], .dark .erp-body [style*="border: 1px solid #d7dce4"], .dark .erp-body [style*="border:1px solid #cbd5e1"], .dark .erp-body [style*="border: 1px solid #cbd5e1"]{ border-color:var(--erp-border)!important; } .dark .erp-body [style*="border-bottom:1px solid #f8fafc"], .dark .erp-body [style*="border-bottom: 1px solid #f8fafc"], .dark .erp-body [style*="border-bottom:1px solid #e5e7eb"], .dark .erp-body [style*="border-bottom: 1px solid #e5e7eb"], .dark .erp-body [style*="border-bottom:1px solid #e2e8f0"], .dark .erp-body [style*="border-bottom: 1px solid #e2e8f0"]{ border-bottom-color:var(--erp-border)!important; } .dark .erp-body [style*="border-top:1px solid #e5e7eb"], .dark .erp-body [style*="border-top: 1px solid #e5e7eb"], .dark .erp-body [style*="border-top:1px solid #e2e8f0"], .dark .erp-body [style*="border-top: 1px solid #e2e8f0"]{ border-top-color:var(--erp-border)!important; } .dark .erp-body [style*="color:#0f172a"], .dark .erp-body [style*="color: #0f172a"], .dark .erp-body [style*="color:#111827"], .dark .erp-body [style*="color: #111827"], .dark .erp-body [style*="color:#1e293b"], .dark .erp-body [style*="color: #1e293b"], .dark .erp-body [style*="color:#334155"], .dark .erp-body [style*="color: #334155"]{ color:var(--erp-text)!important; } .dark .erp-body [style*="color:#475569"], .dark .erp-body [style*="color: #475569"], .dark .erp-body [style*="color:#64748b"], .dark .erp-body [style*="color: #64748b"], .dark .erp-body [style*="color:#6b7280"], .dark .erp-body [style*="color: #6b7280"], .dark .erp-body [style*="color:#94a3b8"], .dark .erp-body [style*="color: #94a3b8"]{ color:var(--erp-muted)!important; } html:not(.dark) .erp-body .modal-backdrop [style*="background:var(--theme-bg-card, #1e293b)"], html:not(.dark) .erp-body .calendar-modal-backdrop [style*="background:var(--theme-bg-card, #1e293b)"], html:not(.dark) .erp-body .rooms-calendar-modal-backdrop [style*="background:var(--theme-bg-card, #1e293b)"]{ background:var(--erp-surface-raised)!important; color:var(--erp-text)!important; } html:not(.dark) .erp-body .modal-backdrop [style*="background:rgba(30,41,59"], html:not(.dark) .erp-body .calendar-modal-backdrop [style*="background:rgba(30,41,59"], html:not(.dark) .erp-body .rooms-calendar-modal-backdrop [style*="background:rgba(30,41,59"]{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } html:not(.dark) .erp-body .modal-backdrop [style*="color:var(--theme-text, #f8fafc)"], html:not(.dark) .erp-body .calendar-modal-backdrop [style*="color:var(--theme-text, #f8fafc)"], html:not(.dark) .erp-body .rooms-calendar-modal-backdrop [style*="color:var(--theme-text, #f8fafc)"]{ color:var(--erp-text)!important; } .dark .erp-body .modal-backdrop [style*="background:#fff"], .dark .erp-body .modal-backdrop [style*="background: #fff"], .dark .erp-body .modal-backdrop [style*="background:#ffffff"], .dark .erp-body .modal-backdrop [style*="background: #ffffff"], .dark .erp-body .settings-card [style*="background:#fff"], .dark .erp-body .settings-card [style*="background: #fff"], .dark .erp-body .settings-sidebar-card [style*="background:#fff"], .dark .erp-body .settings-sidebar-card [style*="background: #fff"], .dark .erp-body .gst-card [style*="background:#fff"], .dark .erp-body .gst-card [style*="background: #fff"], .dark .erp-body .ar-form-card [style*="background:#fff"], .dark .erp-body .ar-form-card [style*="background: #fff"], .dark .erp-body .ar-preview-card [style*="background:#fff"], .dark .erp-body .ar-preview-card [style*="background: #fff"]{ background:var(--erp-surface-raised)!important; } .dark .erp-body .settings-card input[type="checkbox"], .dark .erp-body .settings-card input[type="radio"], .dark .erp-body input[type="checkbox"], .dark .erp-body input[type="radio"]{ accent-color:var(--erp-blue); } .dark .erp-body .modal-close, .dark .erp-body .topbar-menu-btn, .dark .erp-body .sidebar-toggle-btn, .dark .erp-body .gst-action-btn, .dark .erp-body .inv-manage-cat-btn, .dark .erp-body .ar-preview-btn, .dark .erp-body .bk-clear-btn{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; } .dark .erp-body .modal-close:hover, .dark .erp-body .topbar-menu-btn:hover, .dark .erp-body .sidebar-toggle-btn:hover, .dark .erp-body .gst-action-btn:hover, .dark .erp-body .inv-manage-cat-btn:hover, .dark .erp-body .ar-preview-btn:hover, .dark .erp-body .bk-clear-btn:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .dark .erp-body .dashboard-table-wrap, .dark .erp-body .dash-upcoming-table-wrap, .dark .erp-body .dash-table-wrap, .dark .erp-body .ur-perm-table-wrap, .dark .erp-body .inv-table-wrap{ scrollbar-color:#64748b var(--erp-surface-soft); } .dark .erp-body ::-webkit-scrollbar-track{ background:var(--erp-surface-soft); } .dark .erp-body ::-webkit-scrollbar-thumb{ background:#64748b; border-color:var(--erp-surface-soft); } /* ===== PROJECT-WIDE DARK MODE NORMALIZATION END ===== */ /* ===== FINAL WRAPPED INPUT DEDUPLICATION START ===== */ .erp-body .filter-search > input, .erp-body .date-input-wrap > input, .erp-body .rep-date-range > input, .erp-body .auth-control > input, .erp-body .wi-input-wrap > input, .erp-body .wi-input-wrap > select, .erp-body .wi-input-wrap > textarea{ min-width:0!important; width:100%!important; min-height:2.5rem!important; padding:0!important; border:0!important; border-radius:0!important; background:transparent!important; background-color:transparent!important; color:var(--erp-input-text)!important; box-shadow:none!important; outline:0!important; } .dark .erp-body .filter-search > input, .dark .erp-body .date-input-wrap > input, .dark .erp-body .rep-date-range > input, .dark .erp-body .auth-control > input, .dark .erp-body .wi-input-wrap > input, .dark .erp-body .wi-input-wrap > select, .dark .erp-body .wi-input-wrap > textarea{ border:0!important; background:transparent!important; background-color:transparent!important; color:var(--erp-input-text)!important; box-shadow:none!important; outline:0!important; } .erp-body .filter-search, .erp-body .date-input-wrap, .erp-body .rep-date-range, .erp-body .auth-control, .erp-body .wi-input-wrap{ overflow:hidden; } .erp-body .date-input-wrap > input[type="date"], .erp-body .rep-date-range > input[type="date"]{ color-scheme:inherit!important; } /* ===== FINAL WRAPPED INPUT DEDUPLICATION END ===== */ /* ===== BOOKING MODULE DARK COMPLETION START ===== */ .bk-create-stepper{ overflow:hidden; } .bk-step-item{ min-width:0; } .bk-step-dot{ flex:0 0 auto; transition:background-color .15s,color .15s,border-color .15s; } .bk-step-dot.complete{ background:#16a34a!important; color:#fff!important; } .bk-step-dot.active{ background:var(--erp-surface-raised)!important; color:var(--erp-text)!important; border:1px solid var(--erp-border-strong)!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--erp-blue) 18%,transparent)!important; } .bk-step-dot.pending{ background:var(--erp-surface-soft)!important; color:var(--erp-muted)!important; border:1px solid var(--erp-border)!important; } .bk-step-label{ color:var(--erp-muted)!important; } .bk-step-label.active{ color:var(--erp-text)!important; } .bk-step-line{ background:var(--erp-border)!important; } .bk-step-line.complete{ background:#16a34a!important; } .bk-customer-search-card{ background:var(--erp-surface-soft)!important; border-color:var(--erp-border)!important; } .bk-customer-search-label{ color:var(--erp-muted)!important; } .bk-customer-suggestions{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; box-shadow:var(--erp-shadow)!important; } .bk-customer-suggestion{ color:var(--erp-text)!important; border-bottom-color:var(--erp-border)!important; } .bk-customer-suggestion:hover, .bk-customer-suggestion:focus{ background:var(--erp-surface-soft)!important; outline:0!important; } .bk-clear-customer-btn{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; } .bk-clear-customer-btn:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .bk-create-summary-layout{ grid-template-columns:minmax(0,1fr) minmax(18rem,22rem)!important; } .cal-month-picker, .cal-view-tabs, .cal-today-btn, .cal-nav-btn, .cal-hall-select{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; } .cal-month-select{ color:var(--erp-text)!important; } .cal-month-picker:hover, .cal-today-btn:hover, .cal-nav-btn:hover, .cal-hall-select:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .cal-view-tab{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border)!important; color:var(--erp-muted)!important; } .cal-view-tab:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .cal-view-tab.active{ background:var(--erp-blue)!important; color:#fff!important; } .cal-grid-v2, .cal-week-grid, .cal-list-wrap{ background:var(--erp-surface)!important; } .cal-head-v2, .cal-week-head{ background:var(--erp-surface-soft)!important; color:var(--erp-muted)!important; } .cal-cell{ background:var(--erp-surface)!important; } .cal-cell:hover, .cal-week-col:hover{ background:var(--erp-surface-soft)!important; box-shadow:inset 0 0 0 1px rgba(59,130,246,.3)!important; } .cal-list-row:hover, .cal-upcoming-item:hover{ background:var(--erp-surface-soft)!important; } .cal-cell.muted{ background:color-mix(in srgb,var(--erp-surface) 78%,var(--erp-bg))!important; } .cal-cell.selected{ background:color-mix(in srgb,var(--erp-blue) 14%,var(--erp-surface))!important; } .cal-week-col.selected{ background:color-mix(in srgb,var(--erp-blue) 14%,var(--erp-surface))!important; } .cal-week-col.today{ background:color-mix(in srgb,var(--erp-text) 4%,var(--erp-surface))!important; } .cal-day-num, .cal-month-label, .cal-list-date strong, .cal-week-head strong, .cal-upcoming-date strong, .cal-upcoming-name, .cal-day-event-name{ color:var(--erp-text)!important; } .cal-cell.muted .cal-day-num, .cal-more, .cal-legend-v2, .cal-legend-item, .cal-day-event-meta, .cal-day-event-time, .cal-upcoming-type, .cal-upcoming-time, .cal-list-date small, .cal-list-info small, .cal-sidebar-empty{ color:var(--erp-muted)!important; } .cal-day-event, .cal-no-events{ background:var(--erp-surface-soft)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; } .cal-no-events small{ color:var(--erp-muted)!important; } .cal-event-pill.available{ background:rgba(34,197,94,.14)!important; border:1px solid rgba(34,197,94,.24)!important; color:#22c55e!important; } .cal-event-pill.confirmed, .cal-event-pill.completed, .cal-event-pill.booked{ background:rgba(244,63,94,.16)!important; border-color:rgba(244,63,94,.25)!important; color:#fda4af!important; } .cal-event-pill.pending, .cal-event-pill.tentative{ background:rgba(245,158,11,.18)!important; border-color:rgba(245,158,11,.3)!important; color:#fcd34d!important; } .dark .cal-event-pill.cancelled{ background:rgba(239,68,68,.2)!important; color:#fca5a5!important; border-color:rgba(239,68,68,.3)!important; } .halls-stat-card{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; box-shadow:var(--erp-shadow)!important; } .halls-stat-card>div>span{ color:var(--erp-muted)!important; } .halls-stat-card>div>strong, .halls-active-label{ color:var(--erp-text)!important; } .halls-icon-blue{background:rgba(59,130,246,.16)!important;color:#60a5fa!important} .halls-icon-green{background:rgba(34,197,94,.16)!important;color:#22c55e!important} .halls-icon-red{background:rgba(244,63,94,.16)!important;color:#fb7185!important} .halls-icon-gold{background:rgba(245,158,11,.18)!important;color:#f59e0b!important} .halls-amenity-tag, .halls-booking-count{ background:var(--erp-surface-soft)!important; color:var(--erp-text-soft)!important; border:1px solid var(--erp-border)!important; } .halls-amenity-more{ background:rgba(99,102,241,.18)!important; color:#a5b4fc!important; } .halls-amenity-check, .halls-active-row{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border)!important; color:var(--erp-text-soft)!important; } .halls-amenity-check:hover, .halls-active-row:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .halls-amenity-check:has(input:checked){ background:color-mix(in srgb,var(--erp-blue) 16%,var(--erp-surface))!important; border-color:var(--erp-blue)!important; color:var(--erp-text)!important; } .halls-active-hint{ color:var(--erp-muted)!important; } @media (max-width:1100px){ .bk-create-summary-layout{ grid-template-columns:1fr!important; } } @media (max-width:760px){ .bk-create-stepper > div{ flex-direction:column; align-items:stretch!important; gap:.75rem!important; } .bk-step-item{ flex:0 0 auto!important; } .bk-step-line{ display:none; } .cal-toolbar-right{ flex-wrap:wrap; } .cal-view-tabs, .cal-hall-select{ width:100%; } } /* ===== BOOKING MODULE DARK COMPLETION END ===== */ /* ===== BOOKING DETAIL DARK COMPLETION START ===== */ .bk-show-page{ color:var(--erp-text)!important; } .bk-show-page .bk-tabs{ border-bottom-color:var(--erp-border)!important; } .bk-show-page .bk-tab{ background:transparent!important; color:var(--erp-muted)!important; } .bk-show-page .bk-tab:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .bk-show-page .bk-tab.active{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; border-bottom-color:var(--erp-blue)!important; color:var(--erp-blue)!important; box-shadow:inset 0 0 0 1px var(--erp-border)!important; } .bk-show-page .bk-info-card, .bk-show-page .bk-panel-card, .bk-show-page .bk-sidebar-card, .bk-show-page .bk-invoice-summary-card, .bk-show-page .bk-inv-info-card, .bk-show-page .bk-billing-items{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; box-shadow:var(--erp-shadow)!important; } .bk-show-page .bk-card-title, .bk-show-page .bk-sidebar-title, .bk-show-page .bk-dl dd, .bk-show-page .bk-client-name-row strong, .bk-show-page .bk-summary-row strong, .bk-show-page .bk-schedule-list strong, .bk-show-page .bk-activity-item strong, .bk-show-page .bk-sum-row strong, .bk-show-page .bk-bill-to-sidebar strong, .bk-show-page .bk-empty-msg strong{ color:var(--erp-text)!important; } .bk-show-page .bk-dl dt, .bk-show-page .bk-client-details, .bk-show-page .bk-client-details span, .bk-show-page .bk-client-details svg, .bk-show-page .bk-summary-row span, .bk-show-page .bk-schedule-list small, .bk-show-page .bk-activity-item small, .bk-show-page .bk-sum-row span, .bk-show-page .bk-bill-to-sidebar, .bk-show-page .bk-bill-to-sidebar span, .bk-show-page .bk-empty-msg{ color:var(--erp-muted)!important; } .bk-show-page .bk-notes-box, .bk-show-page .bk-invoice-notes-block, .bk-show-page .bk-invoice-notes{ background:var(--erp-input)!important; border:1px solid var(--erp-border-strong)!important; color:var(--erp-input-text)!important; } .bk-show-page .bk-invoice-notes p{ color:var(--erp-input-text)!important; } .bk-show-page .bk-sidebar-title, .bk-show-page .bk-sidebar-head, .bk-show-page .bk-action-list, .bk-show-page .bk-action-row, .bk-show-page .bk-summary-row, .bk-show-page .bk-sum-row, .bk-show-page .bk-sum-tax-group, .bk-show-page .bk-sum-total, .bk-show-page .bk-bill-row, .bk-show-page .bk-terms-details, .bk-show-page .bk-timeline-item{ border-color:var(--erp-border)!important; } .bk-show-page .bk-action-row{ background:transparent!important; color:var(--erp-text-soft)!important; } .bk-show-page .bk-action-row:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .bk-show-page .bk-action-row svg, .bk-show-page .bk-action-chevron{ color:var(--erp-muted-2)!important; stroke:currentColor!important; } .bk-show-page .bk-action-hint{ background:var(--erp-surface-soft)!important; border-top:1px solid var(--erp-border)!important; color:var(--erp-text)!important; font-weight:600!important; } .bk-show-page .bk-action-hint svg{ color:var(--erp-link)!important; stroke:currentColor!important; } .bk-show-page .bk-sum-balance{ background:rgba(239,68,68,.12)!important; border:1px solid rgba(248,113,113,.28)!important; } .bk-show-page .bk-sum-balance span, .bk-show-page .bk-sum-balance strong, .bk-show-page .bk-text-due{ color:#f87171!important; } .bk-show-page .bk-text-paid{ color:#22c55e!important; } .bk-show-page .bk-pill-contact{ background:rgba(37,99,235,.16)!important; color:#93c5fd!important; } .bk-show-page .bk-client-avatar{ background:var(--erp-surface-soft)!important; border:1px solid var(--erp-border)!important; color:var(--erp-text)!important; } .bk-show-page .bk-btn-view-services, .bk-show-page .bk-mini-btn{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; } .bk-show-page .bk-btn-view-services:hover, .bk-show-page .bk-mini-btn:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .bk-show-page .bk-services-table, .bk-show-page .bk-invoice-table, .bk-show-page .bk-payment-history-table{ scrollbar-color:#64748b var(--erp-surface-soft)!important; } .bk-show-page .dashboard-table thead th, .bk-show-page .bk-services-table thead th, .bk-show-page .bk-invoice-table thead th, .bk-show-page .bk-payment-history-table thead th{ background:var(--erp-surface-soft)!important; color:var(--erp-muted)!important; border-color:var(--erp-border)!important; } .bk-show-page .dashboard-table tbody td, .bk-show-page .bk-services-table tbody td, .bk-show-page .bk-invoice-table tbody td, .bk-show-page .bk-payment-history-table tbody td{ background:transparent!important; color:var(--erp-text-soft)!important; border-color:var(--erp-border)!important; } .bk-show-page .dashboard-table tfoot .bk-tfoot-total td, .bk-show-page .bk-services-table tfoot .bk-tfoot-total td, .bk-show-page .bk-invoice-table tfoot .bk-tfoot-total td, .bk-show-page .bk-payment-history-table tfoot .bk-tfoot-total td{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; border-top:1px solid var(--erp-border)!important; border-bottom:0!important; font-weight:800!important; } .bk-show-page .dashboard-table tfoot .bk-tfoot-total strong, .bk-show-page .bk-services-table tfoot .bk-tfoot-total strong, .bk-show-page .bk-invoice-table tfoot .bk-tfoot-total strong, .bk-show-page .bk-payment-history-table tfoot .bk-tfoot-total strong{ color:var(--erp-text)!important; font-weight:800!important; } .bk-show-page .bk-status-pill, .bk-show-page .bk-payment-badge{ border:1px solid rgba(255,255,255,.08)!important; } @media (max-width:1100px){ .bk-show-page .bk-body-layout, .bk-show-page .bk-overview-grid, .bk-show-page .bk-billing-layout, .bk-show-page .bk-billing-row-main{ grid-template-columns:1fr!important; } } /* ===== BOOKING DETAIL DARK COMPLETION END ===== */ /* ===== BILLING MODULE DARK COMPLETION START ===== */ .gst-layout, .ar-layout{ color:var(--erp-text)!important; } .gst-main, .gst-summary-card, .gst-actions-card, .ar-form-card, .ar-preview-card{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; box-shadow:var(--erp-shadow)!important; } .gst-header, .gst-section, .ar-form-actions{ border-color:var(--erp-border)!important; } .gst-title, .gst-section-title, .gst-summary-title, .ar-section-title, .gst-detail-row b, .gst-sum-row b, .ar-print-check{ color:var(--erp-text)!important; } .gst-detail-row span, .gst-sum-row span, .gst-empty, .ar-layout .page-subtitle{ color:var(--erp-muted)!important; } .gst-invoice-select, .gst-add-input, .gst-add-amount, .ar-form-card .form-grid input, .ar-form-card .form-grid select, .ar-form-card .form-grid textarea, .ar-readonly{ background:var(--theme-input-bg, var(--erp-input))!important; border-color:var(--theme-input-border, var(--erp-border-strong))!important; color:var(--theme-text-primary, var(--erp-input-text))!important; color-scheme:dark; } .ar-form-card .form-grid input:focus, .ar-form-card .form-grid select:focus, .ar-form-card .form-grid textarea:focus{ background:var(--erp-input-focus)!important; border-color:var(--erp-blue)!important; box-shadow:0 0 0 3px rgba(59,130,246,.18)!important; outline:0!important; } .gst-invoice-select::placeholder, .gst-add-input::placeholder, .gst-add-amount::placeholder, .ar-form-card .form-grid input::placeholder, .ar-form-card .form-grid textarea::placeholder{ color:var(--erp-input-placeholder)!important; } .gst-invoice-select option, .ar-form-card .form-grid select option{ background:var(--erp-input)!important; color:var(--erp-input-text)!important; } .ar-form-card .form-grid input[readonly], .ar-form-card .form-grid input[style*="background:transparent"], .ar-readonly{ background:var(--erp-surface-raised)!important; border:1px solid var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; padding:.75rem!important; } .ar-total{ background:rgba(34,197,94,.12)!important; border-color:rgba(34,197,94,.28)!important; color:#86efac!important; } .gst-add-btn, .gst-action-btn, .ar-preview-btn, .gst-view-booking-btn{ background:var(--erp-surface-raised)!important; border-color:var(--erp-border-strong)!important; color:var(--erp-text-soft)!important; } .gst-add-btn:hover, .gst-action-btn:hover, .ar-preview-btn:hover, .gst-view-booking-btn:hover{ background:var(--erp-surface-soft)!important; color:var(--erp-text)!important; } .gst-action-primary{ background:var(--erp-blue)!important; border-color:var(--erp-blue)!important; color:#fff!important; } .gst-action-primary:hover{ background:#1d4ed8!important; border-color:#1d4ed8!important; } .gst-action-btn svg, .gst-add-btn svg, .ar-preview-btn svg, .gst-view-booking-btn svg{ color:currentColor!important; stroke:currentColor!important; } .gst-sum-row, .gst-sum-divider{ border-color:var(--erp-border)!important; } .gst-sum-divider{ background:var(--erp-border)!important; } .gst-sum-muted span, .gst-sum-muted b{ color:var(--erp-muted)!important; } .dark .gst-sum-grand{ background:rgba(37,99,235,.14)!important; border:1px solid rgba(96,165,250,.25)!important; } .dark .gst-sum-grand span, .dark .gst-sum-grand b{ color:#93c5fd!important; } .dark .gst-balance-box{ background:rgba(34,197,94,.13)!important; border-color:rgba(34,197,94,.3)!important; } .dark .gst-balance-label, .dark .gst-balance-amount{ color:#86efac!important; } .dark .gst-balance-hint{ color:#4ade80!important; } .gst-remove-btn{ color:var(--erp-muted)!important; } .gst-remove-btn:hover{ background:rgba(239,68,68,.14)!important; color:#f87171!important; } .gst-empty strong{ color:var(--erp-text)!important; } .gst-empty svg{ color:var(--erp-muted-2)!important; } .gst-layout .dashboard-table th, .gst-layout .dashboard-table thead th{ background:var(--erp-surface-soft)!important; color:var(--erp-muted)!important; border-color:var(--erp-border)!important; } .gst-layout .dashboard-table td{ background:transparent!important; color:var(--erp-text-soft)!important; border-color:var(--erp-border)!important; } .dark .ar-preview-card .ar-paper{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; } .dark .ar-preview-card .ar-paper-biz-name, .dark .ar-preview-card .ar-paper-meta-val, .dark .ar-preview-card .ar-paper-info-row b, .dark .ar-preview-card .ar-paper-table tfoot th, .dark .ar-preview-card .ar-paper-words-val, .dark .ar-preview-card .ar-paper-sig-name, .dark .ar-preview-card .ar-paper-table td{ color:var(--erp-text)!important; } .dark .ar-preview-card .ar-paper-biz-sub, .dark .ar-preview-card .ar-paper-biz-contact, .dark .ar-preview-card .ar-paper-meta-label, .dark .ar-preview-card .ar-paper-info-row span, .dark .ar-preview-card .ar-paper-words-label, .dark .ar-preview-card .ar-paper-sig-label{ color:var(--erp-muted)!important; } .dark .ar-preview-card .ar-paper-table th, .dark .ar-preview-card .ar-paper-table td{ border-color:var(--erp-border)!important; } .dark .ar-preview-card .ar-paper-table thead th{ background:var(--erp-surface-soft)!important; color:var(--erp-muted)!important; } .dark .ar-preview-card .ar-paper-table tfoot th{ background:var(--erp-surface-raised)!important; color:var(--erp-text)!important; } .dark .ar-preview-card .ar-paper-words{ background:var(--erp-surface-soft)!important; } .dark .ar-preview-card .ar-paper-divider, .dark .ar-preview-card .ar-paper-sig-row{ border-color:var(--erp-border)!important; } .dark .ar-preview-card .ar-paper-logo{ background:var(--erp-surface-raised)!important; } .dark .ar-preview-card .ar-paper-logo svg{ stroke:var(--erp-text)!important; } .dark .ar-preview-card .ar-paper-badge{ background:var(--erp-surface-raised)!important; color:var(--erp-text)!important; border:1px solid var(--erp-border)!important; } .dark .ar-preview-card .ar-paper-sig-line{ background:var(--erp-border-strong)!important; } .dark .ar-disclaimer{ background:rgba(37,99,235,.14)!important; border:1px solid rgba(96,165,250,.22)!important; color:#bfdbfe!important; } .dark .ar-disclaimer svg{ color:#93c5fd!important; stroke:currentColor!important; } #shareMenu{ background:var(--erp-surface)!important; border-color:var(--erp-border-strong)!important; box-shadow:var(--erp-shadow)!important; } #shareMenu .ar-preview-btn{ justify-content:flex-start!important; } .ar-layout{ grid-template-columns:minmax(0,1fr) minmax(24rem,27rem)!important; } .ar-preview-col, .ar-preview-card{ min-width:0!important; } /* ===== EXPENSE MODULE DARK COMPLETION START ===== */ .exp-form-card, .exp-side-card{ background:var(--erp-surface)!important; border-color:var(--erp-border)!important; color:var(--erp-text)!important; box-shadow:var(--erp-shadow)!important; } .exp-section-title, .exp-total-field, .exp-summary-total span, .exp-summary-total b, .exp-summary-row b, .exp-summary-words strong, .exp-create-header .page-title, .exp-compact-grid label { color:var(--erp-text)!important; } .exp-summary-row, .exp-summary-words span, .exp-upload-zone p, .exp-upload-zone small, .exp-upload-loading, .exp-upload-list li, .exp-create-header .page-subtitle, .exp-char-count { color:var(--erp-muted)!important; } .exp-radio { color:var(--erp-text-soft)!important; } .exp-divider, .exp-form-actions, .exp-summary-words{ border-color:var(--erp-border)!important; } .exp-readonly{ background:var(--erp-surface-raised)!important; color:var(--erp-muted)!important; border-color:var(--erp-border-strong)!important; } .dark .exp-readonly{ background:var(--erp-surface-soft)!important; } .exp-upload-zone{ background:var(--erp-surface-soft)!important; border-color:var(--erp-border-strong)!important; } .exp-upload-zone:hover{ background:var(--erp-surface-raised)!important; border-color:var(--erp-blue)!important; } .exp-tips-card{ background:rgba(37,99,235,.08)!important; border-color:rgba(59,130,246,.2)!important; } .exp-tips-title svg, .exp-tips-list svg{ color:var(--erp-blue)!important; } .exp-tips-list li{ color:var(--erp-text-soft)!important; } .dark .exp-tips-card{ background:rgba(37,99,235,.12)!important; border-color:rgba(59,130,246,.25)!important; } .dark .exp-tips-list li{ color:#bfdbfe!important; } .dark .exp-cat-event{background:rgba(236,72,153,.16)!important;color:#f472b6!important;border:1px solid rgba(244,114,182,.25)!important;} .dark .exp-cat-catering{background:rgba(245,158,11,.16)!important;color:#fbbf24!important;border:1px solid rgba(251,191,36,.25)!important;} .dark .exp-cat-equipment{background:rgba(59,130,246,.16)!important;color:#60a5fa!important;border:1px solid rgba(96,165,250,.25)!important;} .dark .exp-cat-services{background:rgba(16,185,129,.16)!important;color:#34d399!important;border:1px solid rgba(52,211,153,.25)!important;} .dark .exp-cat-utilities{background:rgba(99,102,241,.16)!important;color:#818cf8!important;border:1px solid rgba(129,140,248,.25)!important;} .dark .exp-cat-maintenance{background:rgba(249,115,22,.16)!important;color:#fb923c!important;border:1px solid rgba(251,146,60,.25)!important;} .dark .exp-cat-marketing{background:rgba(168,85,247,.16)!important;color:#c084fc!important;border:1px solid rgba(192,132,252,.25)!important;} .dark .exp-cat-salary{background:rgba(16,185,129,.16)!important;color:#34d399!important;border:1px solid rgba(52,211,153,.25)!important;} .dark .exp-cat-others{background:rgba(148,163,184,.16)!important;color:#94a3b8!important;border:1px solid rgba(148,163,184,.25)!important;} .dark .status-badge.draft{background:rgba(148,163,184,.16)!important;color:#94a3b8!important;border:1px solid rgba(148,163,184,.25)!important;} /* ===== EXPENSE MODULE DARK COMPLETION END ===== */ /* ===== INVENTORY MODULE DARK COMPLETION START ===== */ .inv-side-title, .inv-summary-row b, .inv-view-label, .inv-item-name, .low-stock-info strong, .inv-stock-qty { color: var(--erp-text) !important; } .inv-manage-cat-btn { color: var(--erp-text-soft) !important; background: var(--erp-surface-raised) !important; border-color: var(--erp-border-strong) !important; } .inv-manage-cat-btn:hover { background: var(--erp-surface-soft) !important; color: var(--erp-text) !important; } .inv-alerts-empty, .low-stock-info small, .inv-summary-row span, .inv-upload-zone p, .field-hint, .inv-logo-hint { color: var(--erp-muted) !important; } .inv-upload-zone { background: var(--erp-surface-soft) !important; border-color: var(--erp-border-strong) !important; } .inv-upload-zone:hover { background: var(--erp-surface-raised) !important; border-color: var(--erp-blue) !important; } .low-stock-item, .inv-summary-status { border-color: var(--erp-border) !important; } .cat-list-item { color: var(--erp-text-soft) !important; } .cat-list-item:hover { background: var(--erp-surface-soft) !important; color: var(--erp-text) !important; } .cat-list-item.active { background: rgba(37, 99, 235, 0.16) !important; color: var(--erp-blue) !important; } .cat-count { background: var(--erp-surface-raised) !important; color: var(--erp-muted) !important; border: 1px solid var(--erp-border-strong) !important; } .dark .inv-btn-action { background: var(--erp-blue) !important; color: #ffffff !important; } .dark .inv-btn-action:hover { background: #1d4ed8 !important; } .dark .inv-btn-action svg { stroke: #ffffff !important; } .dark .inv-item-logo-wrap { border-color: var(--erp-border-strong) !important; background: var(--erp-surface-soft) !important; } .dark .inv-item-logo-photo { background: var(--erp-surface-soft) !important; } .dark .inv-side-link-center { border-color: var(--erp-border) !important; } .dark .inv-red { background: rgba(244, 63, 94, 0.16) !important; color: #fda4af !important; } /* ===== INVENTORY MODULE DARK COMPLETION END ===== */ /* ===== REPORTS MODULE DARK COMPLETION START ===== */ .rep-y-axis, .rep-x-axis, .rep-bar-legend, .rep-legend-meta { color: var(--erp-muted) !important; } .rep-legend-label, .rep-mini-table td { color: var(--erp-text-soft) !important; } .rep-legend-meta b { color: var(--erp-text) !important; } .dark .rep-chart-tooltip span { color: var(--erp-muted) !important; } .dark .rep-chart-tooltip strong { color: var(--erp-text) !important; } .rep-mini-table th { color: var(--erp-muted) !important; border-bottom-color: var(--erp-border) !important; } .rep-mini-table td { border-bottom-color: var(--erp-border) !important; } .rep-info-icon { background: var(--erp-surface-soft) !important; color: var(--erp-muted) !important; } .rep-info-icon:hover { background: var(--erp-surface-raised) !important; color: var(--erp-text) !important; } .dark .rep-chart-tooltip { background: var(--erp-surface-raised) !important; border: 1px solid var(--erp-border-strong) !important; color: var(--erp-text) !important; box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important; } .rep-view-all { color: var(--erp-blue) !important; } .dark .rep-chart-pill { background: var(--erp-surface-soft) !important; border-color: var(--erp-border) !important; color: var(--erp-muted) !important; } .dark .rep-chart-pill:hover, .dark .rep-chart-pill.active { background: var(--erp-surface-raised) !important; border-color: var(--erp-border-strong) !important; color: var(--erp-text) !important; } /* ===== REPORTS MODULE DARK COMPLETION END ===== */ /* ===== USERS & ROLES MODULE DARK COMPLETION START ===== */ .ur-side-title, .ur-detail-head strong, .ur-detail-list dd, .ur-mod-cell strong, .ur-donut span strong, .ur-role-summary-main h3, .ur-role-summary-stats div strong { color: var(--erp-text) !important; } .ur-side-label, .ur-detail-list dt, .ur-perm-summary, .ur-mod-cell small, .ur-donut span, .ur-role-summary-main p, .ur-role-summary-stats div span, .ur-role-desc, .ur-perm-empty-tab, .ur-na, .ur-desc-cell, .ur-muted { color: var(--erp-muted) !important; } .ur-tab { color: var(--erp-muted) !important; } .ur-tab:hover { color: var(--erp-text) !important; } .ur-tab.active { color: var(--erp-blue) !important; border-bottom-color: var(--erp-blue) !important; } .dark .ur-info-alert { background: rgba(37, 99, 235, 0.14) !important; border-color: rgba(59, 130, 246, 0.25) !important; color: #bfdbfe !important; } .dark .ur-info-alert svg { color: #93c5fd !important; } .ur-perm-bar-wrap { background: var(--erp-surface-soft) !important; } .ur-avatar { background: var(--erp-surface-soft) !important; border: 1px solid var(--erp-border-strong) !important; color: var(--erp-text) !important; } .dark .ur-row-selected { background: rgba(37, 99, 235, 0.12) !important; } .dark .ur-shield-icon { background: rgba(139, 92, 246, 0.16) !important; color: #c4b5fd !important; } .dark .ur-role-super { background: rgba(139, 92, 246, 0.16) !important; color: #c4b5fd !important; } .dark .ur-role-manager { background: rgba(59, 130, 246, 0.16) !important; color: #93c5fd !important; } .dark .ur-role-sales { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; } .dark .ur-role-booking { background: rgba(249, 115, 22, 0.16) !important; color: #fdba74 !important; } .dark .ur-role-custom { background: rgba(14, 165, 233, 0.16) !important; color: #67e8f9 !important; } .dark .ur-type-badge.ur-system { background: rgba(139, 92, 246, 0.16) !important; color: #c4b5fd !important; } .dark .ur-type-badge.ur-custom { background: rgba(14, 165, 233, 0.16) !important; color: #67e8f9 !important; } .dark .ur-pill-active { background: rgba(16, 185, 129, 0.16) !important; color: #6ee7b7 !important; } .dark .ur-pill-inactive { background: rgba(148, 163, 184, 0.16) !important; color: #cbd5e1 !important; } .dark .ur-toggle span { background: var(--erp-border-strong) !important; } .dark .ur-toggle input:checked + span { background: var(--erp-blue) !important; } /* Missing borders and status colors for Dark Theme */ .dark .ur-filter-row, .dark .ur-tabs { border-bottom-color: var(--erp-border) !important; } .dark .ur-table-footer, .dark .ur-perm-table-wrap, .dark .ur-perm-matrix { border-top-color: var(--erp-border) !important; } .dark .ur-stat-card strong { color: var(--erp-text) !important; } .dark .ur-status-text.ur-active { color: #34d399 !important; } .dark .ur-status-text.ur-inactive { color: #fbbf24 !important; } .dark .ur-status-text.ur-locked { color: #f87171 !important; } /* ===== USERS & ROLES MODULE DARK COMPLETION END ===== */ .dark .activity-filter-button { background: #1e293b !important; border-color: #24324a !important; color: var(--erp-text) !important; } /* Dark Mode fixes for Activity Logs Details */ .dark .activity-overview-item strong { color: var(--erp-text) !important; } .dark .activity-detail-table { border-color: #24324a !important; } .dark .erp-body [style*="color:#1e40af"], .dark .erp-body [style*="color: #1e40af"] { color: #60a5fa !important; } .dark .erp-body [style*="color:#15803d"], .dark .erp-body [style*="color: #15803d"] { color: #4ade80 !important; } .dark .erp-body [style*="color:#166534"], .dark .erp-body [style*="color: #166534"] { color: #4ade80 !important; } .dark .erp-body [style*="color:#b91c1c"], .dark .erp-body [style*="color: #b91c1c"] { color: #f87171 !important; } .dark .erp-body [style*="color:#3730a3"], .dark .erp-body [style*="color: #3730a3"] { color: #818cf8 !important; } .dark .erp-body [style*="color:#92400e"], .dark .erp-body [style*="color: #92400e"] { color: #fbbf24 !important; } .dark .erp-body [style*="border:1px solid #bbf7d0"], .dark .erp-body [style*="border: 1px solid #bbf7d0"] { border-color: rgba(74, 222, 128, 0.3) !important; } .dark .activity-overview-item span { color: #94a3b8 !important; } /* Dark Mode Pagination */ .dark .erp-pg-btn { background: #1e293b !important; border-color: #24324a !important; color: #cbd5e1 !important; } .dark .erp-pg-btn:hover:not(.erp-pg-disabled):not(.erp-pg-active) { background: #24324a !important; border-color: #475569 !important; color: #f8fafc !important; } .dark .erp-pg-active { background: #2563eb !important; border-color: #2563eb !important; color: #ffffff !important; } .dark .erp-pg-disabled { opacity: 0.5 !important; color: #64748b !important; } /* ===== GLOBAL MOBILE VIEW (<=640px) START ===== */ @media (max-width: 640px) { /* Page-level layout grids -> single column */ .activity-overview-grid, .bk-details-grid, .bk-dl-inv-grid, .bk-inv-meta, .bk-overview-grid, .bk-client-grid, .bk-billing-row-main, .bk-body-layout, .cal-sidebar-v2, .cal-page-layout, .calendar-layout, .dash-finance-grid, .dash-metric-grid, .dash-main-grid, .dashboard-main-grid, .details-grid, .finance-grid, .metric-grid, .halls-amenities-grid, .halls-stats-row, .inv-stats-grid, .inventory-sidebar, .inventory-layout, .inv-add-layout, .settings-card-grid, .ur-stats-grid, .ur-layout, .ur-perm-layout, .ar-layout, .billing-layout, .receipt-layout, .exp-create-layout, .gst-layout, .gst-detail-row, .gst-details-grid, .inline-form, .table-filters, .form-grid.two, .form-grid.three, .form-grid.inquiry { grid-template-columns: 1fr !important; } /* Toolbars / headers / action rows -> stack vertically */ .bk-topbar, .bk-topbar-left, .bk-topbar-actions, .bk-filter-row, .bk-filter-actions, .cal-toolbar, .cal-toolbar-left, .cal-toolbar-right, .calendar-toolbar, .calendar-actions, .dash-cal-actions, .filter-bar, .filter-selects, .page-header-row, .panel-title-row, .gst-section-title-row, .inv-side-title-row, .form-actions, .ar-form-actions, .ar-preview-actions, .exp-form-actions, .exp-form-actions-right, .ur-perm-form-actions, .ur-perm-header-actions, .topbar-actions { flex-direction: column !important; align-items: stretch !important; gap: .6rem !important; } /* Full-width primary buttons inside stacked action rows */ .form-actions .btn-dark, .form-actions .btn-gold, .form-actions .btn-outline, .bk-topbar-actions .btn-dark, .bk-topbar-actions .btn-outline, .ar-form-actions .btn-dark, .ar-form-actions .btn-outline, .exp-form-actions .btn-dark, .exp-form-actions .btn-outline, .ur-perm-form-actions .btn-dark, .ur-perm-form-actions .btn-outline, .ur-perm-header-actions .btn-dark, .ur-perm-header-actions .btn-outline, .page-header-row .btn-dark, .page-header-row .btn-outline { width: 100% !important; justify-content: center !important; } /* Tighter spacing so cards/forms fit small screens */ .form-page { padding: 1rem !important; } .erp-card { border-radius: .55rem; } .form-grid { gap: 1rem 0 !important; } /* Keep wide tables usable by scrolling instead of squeezing */ .dashboard-table-wrap, .dash-upcoming-table-wrap, .dash-table-wrap, .ur-perm-table-wrap, .inv-table-wrap, .activity-detail-table-wrap, .overflow-x-auto { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } } /* ===== GLOBAL MOBILE VIEW (<=640px) END ===== */ /* ===== CALENDAR STANDARDIZATION: Tooltip, Badge, Hover Effects ===== */ .cal-cell[data-tooltip]{position:relative} .cal-cell[data-tooltip]::after{content:attr(data-tooltip);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%);background:#0f172a;color:#f8fafc;padding:.4rem .65rem;border-radius:.4rem;font-size:.72rem;font-weight:600;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .15s;z-index:100;box-shadow:0 4px 12px rgba(0,0,0,.15)} .cal-cell[data-tooltip]:hover::after{opacity:1} .cal-cell{transition:transform .15s ease,box-shadow .15s ease,background .1s} .cal-cell:hover{transform:scale(1.02);box-shadow:0 0 0 2px rgba(59,130,246,.3);z-index:2;position:relative} .cal-event-count{display:inline-flex;align-items:center;justify-content:center;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:999px;font-size:.6rem;font-weight:700;color:#fff;background:rgba(255,255,255,.3);line-height:1;position:relative;top:-1px} .day-pill{position:relative;overflow:visible} .day-pill .cal-event-count{position:absolute;top:-4px;right:-6px;min-width:1rem;height:1rem;font-size:.55rem;padding:0 .2rem;background:rgba(255,255,255,.4);border:1px solid rgba(255,255,255,.3)} .dark .day-pill .cal-event-count{background:rgba(0,0,0,.3);border-color:rgba(255,255,255,.15)} .dark .cal-cell[data-tooltip]::after{background:#1e293b;border:1px solid rgba(255,255,255,.1)} .dark .cal-cell:hover{box-shadow:0 0 0 2px rgba(96,165,250,.3)} /* ===== ROLE MANAGEMENT MATRIX v2 (7 actions × 12 modules) START ===== */ .ur-perm-matrix-v2{min-width:64rem;width:100%} .ur-perm-table-wrap-v2{border-top:1px solid #e5e7eb} .ur-perm-matrix-v2 thead th.ur-col-action{width:4.2rem;padding:.65rem .25rem;font-size:.72rem;letter-spacing:.04em;text-align:center} .ur-perm-matrix-v2 tbody td.ur-col-action{padding:.85rem .25rem;text-align:center;vertical-align:middle} .ur-perm-matrix-v2 tbody td.ur-col-action .ur-check, .ur-perm-matrix-v2 tbody td.ur-col-action .ur-check-input{width:1.1rem!important;height:1.1rem!important;min-width:1.1rem;min-height:1.1rem;cursor:pointer;margin:0;display:inline-block;vertical-align:middle;accent-color:#2563eb;appearance:auto;-webkit-appearance:auto;background-color:#fff;border:1.5px solid #cbd5e1;border-radius:3px} .ur-perm-matrix-v2 tbody td.ur-col-action .ur-check:disabled, .ur-perm-matrix-v2 tbody td.ur-col-action .ur-check-input:disabled{opacity:.6;cursor:default} .ur-perm-matrix-v2 th.ur-col-module,.ur-perm-matrix-v2 td.ur-col-module{min-width:17rem;padding-left:.85rem} .ur-perm-matrix-v2 th.ur-col-toggle,.ur-perm-matrix-v2 td.ur-col-toggle{width:5.5rem;padding-right:.85rem} .ur-perm-matrix-v2 .ur-check-wrap{display:inline-flex;align-items:center;justify-content:center;margin:0;padding:0;min-height:1.1rem;cursor:pointer} .ur-perm-matrix-v2 .ur-check-wrap .ur-check-input:focus{outline:2px solid #93c5fd;outline-offset:1px} .ur-role-accountant{background:#fef3c7;color:#92400e} .ur-table-card .ur-roles-table{ table-layout:fixed; min-width:54rem; } .ur-table-card .ur-roles-table .ur-col-index{width:3.25rem} .ur-table-card .ur-roles-table .ur-col-name{width:17rem} .ur-table-card .ur-roles-table .ur-col-description{width:auto} .ur-table-card .ur-roles-table .ur-col-users{width:5rem} .ur-table-card .ur-roles-table .ur-col-status{width:5.75rem} .ur-table-card .ur-roles-table .ur-col-created{width:8.25rem} .ur-table-card .ur-roles-table .ur-col-actions{width:7rem} .ur-table-card .ur-roles-table th, .ur-table-card .ur-roles-table td{ vertical-align:top; } .ur-table-card .ur-roles-table th:nth-child(3), .ur-table-card .ur-roles-table td.ur-desc-cell{ white-space:normal!important; max-width:24rem; overflow-wrap:anywhere; word-break:break-word; line-height:1.45; } .ur-table-card .ur-roles-table th:nth-child(4), .ur-table-card .ur-roles-table td:nth-child(4), .ur-table-card .ur-roles-table th:nth-child(5), .ur-table-card .ur-roles-table td:nth-child(5), .ur-table-card .ur-roles-table th:nth-child(6), .ur-table-card .ur-roles-table td:nth-child(6), .ur-table-card .ur-roles-table th:nth-child(7), .ur-table-card .ur-roles-table td:nth-child(7){ white-space:nowrap; } @media (max-width:900px){ .ur-table-card .ur-roles-table{ min-width:48rem; } .ur-table-card .ur-roles-table .ur-col-name{width:13rem} .ur-table-card .ur-roles-table .ur-col-description{width:18rem} } .ur-perm-matrix-v2 .ur-col-action-view .ur-check-input{accent-color:#2563eb} .ur-perm-matrix-v2 .ur-col-action-create .ur-check-input{accent-color:#16a34a} .ur-perm-matrix-v2 .ur-col-action-edit .ur-check-input{accent-color:#0891b2} .ur-perm-matrix-v2 .ur-col-action-delete .ur-check-input{accent-color:#dc2626} .ur-perm-matrix-v2 .ur-col-action-export .ur-check-input{accent-color:#7c3aed} .ur-perm-matrix-v2 .ur-col-action-approve .ur-check-input{accent-color:#ea580c} .ur-perm-matrix-v2 .ur-col-action-cancel .ur-check-input{accent-color:#475569} .ur-perm-matrix-v2 .ur-na{color:#64748b;font-size:1rem;font-weight:600;user-select:none} .dark .ur-perm-matrix-v2 .ur-na{color:#94a3b8} .dark .ur-perm-matrix-v2 .ur-check-input{background-color:#0f172a;border-color:#475569} @media (max-width:1280px){ .ur-perm-matrix-v2{min-width:56rem} .ur-perm-matrix-v2 thead th.ur-col-action{padding:.5rem .2rem;font-size:.68rem;width:3.8rem} .ur-perm-matrix-v2 tbody td.ur-col-action{padding:.65rem .2rem} } @media (max-width:720px){ .ur-perm-matrix-v2{min-width:calc(100vw - 2rem)} .ur-perm-matrix-v2 th.ur-col-module,.ur-perm-matrix-v2 td.ur-col-module{min-width:9rem;padding-left:.5rem} .ur-perm-matrix-v2 th.ur-col-action,.ur-perm-matrix-v2 td.ur-col-action{width:2.8rem;padding:.5rem .15rem} .ur-perm-matrix-v2 th.ur-col-toggle,.ur-perm-matrix-v2 td.ur-col-toggle{width:4.5rem} } /* ===== ROLE MANAGEMENT MATRIX v2 END ===== */ /* ===== PROJECT-WIDE OVERFLOW CONTAINMENT START ===== */ .erp-shell, .erp-body main, .erp-body main > section, .erp-body main > section > *, .erp-body .erp-card, .erp-body [class*="-layout"], .erp-body [class*="-grid"], .erp-body [class*="-row"]{ min-width:0; max-width:100%; } .erp-body main{ width:100%; overflow-x:clip; } .erp-body main > section{ width:100%; overflow:visible; } .erp-body .erp-card, .erp-body .booking-list-page{ width:100%; } .erp-body .dashboard-table-wrap, .erp-body .dash-upcoming-table-wrap, .erp-body .dash-table-wrap, .erp-body .ur-perm-table-wrap, .erp-body .inv-table-wrap, .erp-body .activity-detail-table-wrap, .erp-body .overflow-x-auto{ width:100%; max-width:100%; min-width:0; overflow-x:auto!important; -webkit-overflow-scrolling:touch; overscroll-behavior-inline:contain; } .erp-body .booking-list-page .dashboard-table-wrap{ max-height:none; overflow-y:visible; padding-inline:0; } .erp-body .booking-list-page .dashboard-table{ width:max(100%,76rem); min-width:76rem; } .erp-body .booking-list-page .dashboard-table th:first-child, .erp-body .booking-list-page .dashboard-table td:first-child{ padding-left:1.15rem; } .erp-body .booking-list-page .dashboard-table th:last-child, .erp-body .booking-list-page .dashboard-table td:last-child{ padding-right:1.15rem; } .erp-body .table-footer{ min-width:0; max-width:100%; } .erp-body .action-icons{ width:max-content; max-width:100%; } @media (max-width:720px){ .erp-body main > section{ padding-inline:1rem!important; } .erp-body .booking-list-page .dashboard-table{ width:max(100%,68rem); min-width:68rem; } .erp-body .table-footer{ align-items:stretch; } } /* ===== PROJECT-WIDE OVERFLOW CONTAINMENT END ===== */ /* ===== BOOKING CREATE AND EDIT ALIGNMENT START ===== */ .bk-create-page{ display:grid; gap:1.5rem; } .bk-create-page .bk-create-header, .bk-create-page .bk-create-stepper{ margin-bottom:0!important; } .bk-create-page .bk-create-form-card{ padding:1.75rem!important; } .bk-create-page .bk-create-form-card > h3{ margin-bottom:1.5rem!important; } .bk-create-page .form-grid{ gap:1.25rem 1.5rem!important; margin-bottom:0!important; } .bk-create-page .form-grid > label, .bk-create-page form > .erp-card label{ min-width:0; } .bk-step2-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem 1.5rem; align-items:start; } .bk-step2-col{ display:grid; gap:1.5rem; min-width:0; align-content:start; } .bk-step2-col > label, .bk-step2-col > .bk-create-rooms-field{ display:grid; gap:.55rem; min-width:0; margin:0; } .bk-step2-col input, .bk-step2-col select, .bk-step2-col textarea, .bk-step2-col .form-dropdown-btn, .bk-step2-col .erp-custom-select-wrapper, .bk-step2-col .select-wrapper{ width:100%!important; min-width:0; } .bk-step2-col input, .bk-step2-col select, .bk-step2-col .form-dropdown-btn{ min-height:3rem; } .bk-create-page .bk-create-rooms-field{ display:grid; gap:.55rem; align-self:start; min-width:0; } .bk-booking-field-label{ display:block; color:var(--erp-text-soft,#e2e8f0); font-size:.875rem; font-weight:600; line-height:1.25; } .bk-create-rooms-field .erp-custom-select-wrapper, .modal-edit-booking .bk-edit-rooms-field .erp-custom-select-wrapper{ position:relative; width:100%!important; min-width:0; } .bk-create-rooms-field .form-dropdown-menu, .modal-edit-booking .bk-edit-rooms-field .form-dropdown-menu{ width:100%; min-width:100%; max-width:min(32rem,calc(100vw - 2rem)); } .bk-create-rooms-field .form-dropdown-scroll, .modal-edit-booking .bk-edit-rooms-field .form-dropdown-scroll{ max-height:15rem; } .bk-create-rooms-field .form-dropdown-item, .modal-edit-booking .bk-edit-rooms-field .form-dropdown-item{ gap:.75rem; white-space:normal!important; } .bk-room-dropdown{ min-height:48px; } .bk-room-selector, .modal-edit-booking .bk-edit-rooms{ display:grid; gap:.5rem; min-height:3rem; max-height:12rem; overflow-y:auto; overflow-x:hidden; padding:.65rem; border:1px solid rgba(96,124,172,.45); border-radius:.55rem; background:#08142D; scrollbar-width:thin; } .bk-room-selector-empty{ padding:.6rem; color:var(--erp-muted-2,#94a3b8); font-size:.85rem; } .bk-room-option{ display:flex!important; flex-direction:row!important; align-items:center; gap:.65rem!important; min-width:0; min-height:3.25rem; padding:.65rem .7rem; border:1px solid rgba(96,124,172,.22); border-radius:.45rem; background:rgba(15,23,42,.28); cursor:pointer; transition:background-color .15s,border-color .15s,box-shadow .15s; } .bk-room-option:hover{ border-color:var(--erp-blue,#60a5fa); } .bk-room-option:has(input:checked){ background:color-mix(in srgb,var(--erp-blue,#60a5fa) 14%,#08142D); border-color:var(--erp-blue,#60a5fa); box-shadow:0 0 0 2px color-mix(in srgb,var(--erp-blue,#60a5fa) 16%,transparent); } .bk-room-option input[type="checkbox"], .bk-edit-room-item input[type="checkbox"]{ width:1.05rem!important; height:1.05rem!important; min-width:1.05rem; margin:0!important; accent-color:var(--erp-blue,#60a5fa); cursor:pointer; } .bk-room-option-name{ flex:1 1 auto; min-width:0; color:var(--erp-text-soft,#e2e8f0); font-size:.875rem; line-height:1.35; } .bk-room-selected-badge{ display:none; align-items:center; gap:.3rem; flex:0 0 auto; padding:.25rem .5rem; border-radius:999px; background:rgba(16,185,129,.16); color:#34d399; font-size:.72rem; font-weight:800; white-space:nowrap; } .bk-room-option:has(input:checked) .bk-room-selected-badge{ display:inline-flex; } .modal-edit-booking .form-section{ padding:1.25rem; border:1px solid var(--erp-border,#e5e7eb); border-radius:.65rem; background:color-mix(in srgb,var(--erp-surface,#fff) 94%,var(--erp-surface-soft,#f8fafc)); } @media (max-width:1024px){ .bk-step2-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .bk-create-page .form-grid.three{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .bk-create-page .bk-create-rooms-field{ grid-column:1/-1; } } @media (max-width:760px){ .bk-create-page{ gap:1rem; } .bk-create-page .bk-create-form-card, .bk-create-page .bk-create-stepper{ padding:1rem!important; } .bk-create-page .bk-create-stepper-grid{ grid-template-columns:1fr!important; } .bk-step2-grid{ grid-template-columns:1fr; gap:1rem; } .bk-step2-col{ gap:1rem; } .bk-create-page .form-grid.three{ grid-template-columns:1fr!important; } .bk-create-page .bk-create-rooms-field{ grid-column:auto; } .bk-room-option, .modal-edit-booking .bk-edit-room-item{ align-items:flex-start; flex-wrap:wrap; } .bk-room-selected-badge{ margin-left:1.7rem; } .modal-edit-booking .form-section{ padding:1rem; } } /* ===== BOOKING CREATE AND EDIT ALIGNMENT END ===== */ } /* ===== ERP CSS 3001-4500 START ===== */ @layer components { /* ===== STICKY TABLE HEADERS GLOBALLY ===== */ .dashboard-table-wrap, .dash-upcoming-table-wrap, .dash-table-wrap, .ur-perm-table-wrap, .inv-table-wrap { @apply overflow-auto!; max-height: calc(100vh - 13rem); } .dashboard-table thead th, .dash-upcoming-table thead th, .dash-table thead th, .dash-recent-table thead th, .ur-perm-matrix thead th, .activity-detail-table thead th, .inv-table-wrap .dashboard-table thead th { @apply sticky top-0; z-index: 45; box-shadow: 0 2px 4px rgba(0,0,0,0.06); } .dashboard-table thead th, .ur-perm-matrix thead th { @apply bg-[#f8fafc]; } .dash-table thead th { @apply bg-[#f8fbff]; } .dash-recent-table thead th, .dash-upcoming-table thead th { @apply bg-[#fafbfc]; } .activity-detail-table thead th { @apply bg-[#fbfdff]; } /* ===== THEME TOGGLE ===== */ .topbar-actions { @apply flex items-center gap-4 ms-auto; } .theme-toggle-btn { @apply w-[2.35rem]! h-[2.35rem]! min-w-[2.35rem]! min-h-[2.35rem]! rounded-[.55rem]! bg-white! text-slate-700! border-[#d7dce4]!; transition: background .15s, color .15s, border-color .15s, transform .15s; } .theme-toggle-btn:hover { @apply bg-[#f8fafc]!; transform: translateY(-1px); } .theme-toggle-icon { @apply w-[1.05rem]! h-[1.05rem]! max-w-none! max-h-none!; stroke-linecap: round; stroke-linejoin: round; } @media (max-width: 1180px) { .topbar-actions { @apply gap-3; } .topbar-right { @apply hidden; } } /* ===== DARK MODE OVERRIDES ===== */ .dark body { @apply bg-[#0f172a] text-slate-200; } .dark .erp-shell, .dark .erp-body main { @apply bg-[#081225]!; } .dark .bg-white { @apply bg-slate-900!; } .dark .bg-slate-100 { @apply bg-[#081225]!; } .dark .bg-slate-950 { @apply bg-[#020617]!; } .dark .text-slate-900, .dark .text-slate-950, .dark .text-slate-800 { @apply text-slate-50!; } .dark .text-slate-600, .dark .text-slate-500 { @apply text-slate-300!; } .dark .border-slate-200, .dark .border-slate-300 { @apply border-[#24324a]!; } .dark .divide-slate-100 > * + *, .dark .divide-slate-200 > * + * { @apply border-[#24324a]!; } .dark .erp-card, .dark .dash-panel, .dark .finance-card, .dark .metric-card, .dark .finance-card-v2, .dark .dash-metric-card, .dark .inv-stat-card, .dark .ur-stat-card, .dark .settings-card, .dark .bk-sidebar-card, .dark .bk-panel-card, .dark .auth-card-split, .dark .auth-form-panel { @apply bg-slate-900! border-[#24324a]!; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important; } .dark .dashboard-page.dash-page-v2 { @apply bg-[#0f172a]; } .dark .dash-panel-head { @apply bg-[#081225]!; border-bottom-color: #24324a !important; } .dark .dash-panel-head h2 { @apply text-slate-50!; } .dark .dash-metric-card strong, .dark .fc-value-row strong, .dark .dash-occ-pct { @apply text-slate-50!; } .dark .dash-metric-label, .dark .fc-top span { @apply text-slate-300!; } .dark .dashboard-table th, .dark .dash-table th, .dark .dash-recent-table th, .dark .dash-upcoming-table thead th, .dark .ur-perm-matrix thead th, .dark .activity-detail-table th { @apply bg-[#081225]! text-slate-300!; border-bottom-color: #24324a !important; } .dark .dashboard-table td, .dark .dash-table td, .dark .dash-recent-table td, .dark .dash-upcoming-table tbody td, .dark .ur-perm-matrix tbody td, .dark .activity-detail-table td { @apply text-slate-200!; border-bottom-color: #24324a !important; } .dark .dashboard-table tbody tr:hover td, .dark .dash-table tbody tr:hover td, .dark .dash-upcoming-table tbody tr:hover td { @apply bg-[#24324a]!; } .dark .empty-cell { @apply text-slate-400!; } .dark .btn-outline { @apply bg-slate-900! border-[#24324a]! text-slate-200!; } .dark .btn-outline:hover { @apply bg-[#24324a]!; } .dark .action-btn, .dark .cal-nav-sm, .dark .cal-nav-btn { @apply bg-[#081225]! border-[#475569]! text-slate-300!; } .dark .action-btn:hover, .dark .cal-nav-sm:hover, .dark .cal-nav-btn:hover { @apply bg-[#24324a]! text-slate-50!; } .dark .theme-toggle-btn { @apply bg-[#081225]! border-slate-600! text-amber-400!; } .dark .theme-toggle-btn:hover { @apply bg-slate-900! text-amber-200!; } .dark .dash-btn-view-all { @apply bg-[#081225]! border-[#24324a]! text-slate-200!; } .dark .dash-btn-view-all:hover { @apply bg-[#24324a]!; } .dark .bk-clear-btn { @apply bg-[#081225]! border-[#24324a]! text-slate-200!; } .dark .bk-clear-btn:hover { @apply bg-[#24324a]!; } .dark .dropdown-menu { @apply bg-slate-900! border-[#24324a]!; } .dark .dropdown-item { @apply text-slate-200!; } .dark .dropdown-item:hover { @apply bg-[#24324a]! text-slate-50!; } .dark .calendar-day { @apply border-[#24324a]!; } .dark .cal-head-v2 { @apply text-slate-300!; border-color: #24324a !important; } .dark .cal-cell { @apply border-[#24324a]!; } .dark .cal-cell:hover { @apply bg-[#24324a]!; } .dark .calendar-legend { @apply text-slate-300!; } .dark .cal-sidebar-heading { @apply text-slate-50!; } .dark .cal-legend-item { @apply text-slate-300!; } .dark .cal-day-event { @apply bg-[#081225]! border-[#24324a]!; } .dark .cal-day-event-name, .dark .cal-upcoming-name, .dark .cal-upcoming-date strong { @apply text-slate-50!; } .dark .cal-upcoming-item { @apply border-b-[#24324a]!; } .dark .cal-upcoming-item:hover { @apply bg-[#24324a]!; } .dark .cal-toolbar { @apply border-b-[#24324a]!; } .dark .cal-view-tabs { @apply border-[#24324a]!; } .dark .cal-view-tab { @apply bg-slate-900! border-[#24324a]! text-slate-300!; } .dark .cal-view-tab.active { @apply bg-[#24324a]! text-slate-50!; } .dark .status-badge.pending { background: rgba(245, 158, 11, 0.2) !important; @apply text-amber-300!; } .dark .status-badge.confirmed { background: rgba(34, 197, 94, 0.2) !important; @apply text-green-300!; } .dark .status-badge.booked { background: rgba(244, 63, 94, 0.2) !important; @apply text-rose-300!; } .dark .status-badge.cancelled { background: rgba(239, 68, 68, 0.2) !important; @apply text-red-300!; } .dark .status-badge.tentative { background: rgba(59, 130, 246, 0.2) !important; @apply text-blue-300!; } .dark .metric-blue { background: rgba(59, 130, 246, 0.2) !important; } .status-badge.event-status-upcoming { @apply bg-blue-100 text-blue-800; } .status-badge.event-status-today { @apply bg-green-100 text-green-800; } .status-badge.event-status-completed { @apply bg-gray-200 text-slate-600; } .status-badge.cancelled { @apply bg-red-100 text-red-800; } .dark .status-badge.event-status-upcoming { background: rgba(59,130,246,.2) !important; @apply text-blue-300!; } .dark .status-badge.event-status-today { background: rgba(34,197,94,.2) !important; @apply text-green-300!; } .dark .status-badge.event-status-completed { background: rgba(148,163,184,.2) !important; @apply text-slate-300!; } .dark .status-badge.cancelled { background: rgba(244,63,94,.2) !important; @apply text-rose-300!; } .dark .metric-green { background: rgba(34, 197, 94, 0.2) !important; } .dark .metric-gold { background: rgba(245, 158, 11, 0.2) !important; } .dark .metric-purple { background: rgba(168, 85, 247, 0.2) !important; } .dark .modal-box { @apply bg-slate-900!; border: 1px solid #24324a !important; } .dark .modal-header { @apply border-b-[#24324a]!; } .dark .settings-section-title { @apply text-slate-50!; border-bottom-color: #24324a !important; } .dark .page-title { @apply text-slate-50!; } .dark .page-subtitle { @apply text-slate-300!; } .dark .panel-title-row { @apply bg-slate-900!; border-bottom-color: #24324a !important; } .dark .panel-title-row h2, .dark .form-page h2, .dark .form-page h3, .dark .bk-card-title, .dark .bk-sidebar-title { @apply text-slate-50!; } .dark .form-grid label, .dark .table-filters label, .dark .today, .dark .topbar-user strong { @apply text-slate-200!; } .dark .topbar-user small { @apply text-slate-400!; } .dark .today svg { @apply stroke-slate-300!; } .dark .topbar-user { @apply border-s-[#24324a]!; } .dark .menu-lines, .dark .menu-lines:after { @apply border-slate-300!; } .dark .bk-filter-card { @apply bg-slate-900! border-[#24324a]!; } .dark .bk-filter-label { @apply text-slate-300!; } .dark .erp-topbar { @apply bg-slate-900!; border-bottom: 1px solid #24324a !important; box-shadow: none !important; } .dark .erp-sidebar { background: linear-gradient(180deg,#020617,#0f172a) !important; box-shadow: 8px 0 26px rgba(0,0,0,.36) !important; } .dark .erp-footer { @apply bg-[#081225]! text-slate-400!; border-top-color: #24324a !important; } .dark .table-footer { @apply text-slate-400!; border-top-color: #24324a !important; } .dark .settings-toggle-row { @apply border-b-[#24324a]!; } .dark .settings-toggle-row-label { @apply text-slate-200!; } .dark .settings-label { @apply text-slate-300!; } /* ===== PROJECT THEME CONSISTENCY ===== */ :root { color-scheme: light; --erp-bg: #f2f0ec; --erp-surface: #fafaf9; --erp-surface-soft: #f5f4f1; --erp-surface-raised: #ffffff; --erp-border: #e4e2dc; --erp-border-strong: #d6d3cc; --erp-text: #1c1917; --erp-text-soft: #44403c; --erp-muted: #78716c; --erp-muted-2: #a8a29e; --erp-input: #fafaf9; --erp-input-text: #1c1917; --erp-input-placeholder: #a8a29e; --erp-blue: #2563eb; --erp-link: #0b65b9; --erp-shadow: 0 12px 30px rgba(28,25,23,.09); --cal-border: #d6d3cc; --cal-border-soft: #e4e2dc; } .dark { color-scheme: dark; --erp-bg: #0f172a; --erp-surface: #1e293b; --erp-surface-soft: #111827; --erp-surface-raised: #172033; --erp-border: #334155; --erp-border-strong: #475569; --erp-text: #f8fafc; --erp-text-soft: #e2e8f0; --erp-muted: #cbd5e1; --erp-muted-2: #94a3b8; --erp-input: #0f172a; --erp-input-text: #f8fafc; --erp-input-placeholder: #9fb0c8; --erp-blue: #60a5fa; --erp-link: #93c5fd; --erp-shadow: 0 16px 36px rgba(0,0,0,.35); --cal-border: var(--erp-border-strong); --cal-border-soft: var(--erp-border); } body, .erp-shell, .dashboard-page, .form-page, .booking-calendar-page, .rep-page, .inv-page-compact, .inv-add-page, .settings-page-layout { @apply bg-[var(--erp-bg)] text-[var(--erp-text)]; } .erp-card, .dash-panel, .metric-card, .finance-card, .finance-card-v2, .dash-metric-card, .inv-stat-card, .inv-side-panel, .inv-table-card, .inv-add-card, .rep-metric-card, .rep-chart-card, .rep-filter-panel, .ur-stat-card, .ur-role-card, .ur-perm-card, .ur-role-summary-card, .settings-card, .settings-sidebar-card, .bk-panel-card, .bk-sidebar-card, .bk-info-card, .bk-inv-info-card, .bk-invoice-summary-card, .wi-form-card, .exp-form-card, .gst-card, .gst-panel, .ar-form-card, .ar-preview-card, .modal-box { @apply bg-[var(--erp-surface)]! border-[var(--erp-border)]! text-[var(--erp-text)]!; box-shadow: var(--erp-shadow) !important; } .dash-panel-head, .panel-title-row, .inv-filter-row, .modal-header, .settings-card-head, .bk-topbar, .bk-tabs, .bk-action-list, .invoice-section, .table-footer, .ur-detail-head, .ur-perm-header, .rep-header, .rep-section-head { @apply border-[var(--erp-border)]!; } h1, h2, h3, h4, h5, h6, .page-title, .bk-title, .bk-card-title, .bk-sidebar-title, .inv-side-title, .rep-card-title, .settings-section-title, .settings-toggle-row-label, .ur-mod-cell strong, .ur-donut span strong, .rep-donut-center strong, .metric-card strong, .finance-card strong, .finance-card-v2 strong, .dash-metric-card strong, .panel-title-row h2, .form-page h2, .form-page h3, .topbar-user strong { @apply text-[var(--erp-text)]!; } p, dt, dd, label, .form-grid label, .table-filters label, .settings-label, .bk-dl dt, .bk-dl dd, .bk-summary-row, .bk-action-row, .rep-donut-legend, .ur-donut-legend, .inv-summary-row, .today, .topbar-user small, .page-subtitle, .settings-toggle-row-desc, .inv-view-label, .rep-metric-card>div>span, .rep-metric-card>div>small, .inv-stat-card>div>span, .inv-stat-card>div>small, .metric-card span, .metric-card small, .finance-card span, .finance-card small, .empty-cell { @apply text-[var(--erp-muted)]!; } a, .link-blue, .inv-side-link, .ur-link-btn { @apply text-[var(--erp-link)]!; } .dark .text-amber-600 { @apply text-amber-400!; } .dark .positive, .dark .money-paid, .dark .bk-text-paid { @apply text-green-500!; } .dark .negative, .dark .money-due, .dark .bk-text-due { @apply text-red-400!; } .dark .warning { @apply text-amber-500!; } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .erp-body select, .erp-body textarea, .settings-input, .settings-select, .settings-textarea, .filter-search, .wi-input-wrap, .auth-control, .rep-date-range, .calendar-actions span, .calendar-actions button, .calendar-toolbar button, .calendar-toolbar select, .cal-month-select, .dash-month-select { @apply bg-[var(--erp-input)]! border-[var(--erp-border-strong)]! text-[var(--erp-input-text)]!; } .erp-body input::placeholder, .erp-body textarea::placeholder, .wi-input-wrap input::placeholder, .wi-input-wrap textarea::placeholder { @apply text-[var(--erp-input-placeholder)]!; opacity: 1; } .erp-body input:focus, .erp-body select:focus, .erp-body textarea:focus, .settings-input:focus, .settings-select:focus, .settings-textarea:focus, .wi-input-wrap:focus-within, .auth-control:focus-within { @apply outline-0!; border-color: var(--erp-blue) !important; box-shadow: 0 0 0 3px color-mix(in srgb,var(--erp-blue) 24%,transparent) !important; } .dark input[type="date"], .dark input[type="datetime-local"], .dark input[type="time"], .dark input[type="month"] { color-scheme: dark; } .dark select { } .dashboard-table, .dash-table, .dash-recent-table, .dash-upcoming-table, .ur-perm-matrix, .activity-detail-table { @apply text-[var(--erp-text)]!; } .dashboard-table th, .dash-table th, .dash-recent-table th, .dash-upcoming-table thead th, .ur-perm-matrix thead th, .activity-detail-table th { @apply bg-[var(--erp-surface-soft)]! border-[var(--erp-border)]! text-[var(--erp-muted)]!; } .dashboard-table td, .dash-table td, .dash-recent-table td, .dash-upcoming-table tbody td, .ur-perm-matrix tbody td, .activity-detail-table td { @apply border-[var(--erp-border)]! text-[var(--erp-text-soft)]!; } .dashboard-table tbody tr:hover td, .dash-table tbody tr:hover td, .dash-upcoming-table tbody tr:hover td, .ur-perm-matrix tbody tr:hover td { @apply bg-[var(--erp-surface-soft)]!; } .btn-outline, .action-btn, .dash-btn-view-all, .cal-nav-sm, .cal-nav-btn, .bk-clear-btn, .rep-chart-pill, .rep-filter-btn, .rep-export-btn, .inv-manage-cat-btn, .ar-preview-btn { @apply bg-[var(--erp-surface-raised)]! border-[var(--erp-border-strong)]! text-[var(--erp-text-soft)]!; } .btn-outline:hover, .action-btn:hover, .dash-btn-view-all:hover, .cal-nav-sm:hover, .cal-nav-btn:hover, .bk-clear-btn:hover, .rep-chart-pill:hover, .rep-filter-btn:hover, .rep-export-btn:hover, .inv-manage-cat-btn:hover, .ar-preview-btn:hover { @apply bg-[var(--erp-surface-soft)]! text-[var(--erp-text)]!; } .filter-search input, .wi-input-wrap input, .wi-input-wrap select, .wi-input-wrap textarea, .auth-control input { @apply bg-transparent! border-transparent! shadow-none!; } .calendar-day, .cal-cell, .calendar-head, .cal-head-v2, .large-day, .bk-action-row, .bk-summary-row, .bk-sum-row, .bk-invoice-notes-block, .bk-invoice-notes, .bk-notes-box, .settings-toggle-row, .inv-summary-status, .inv-side-link-center, .ur-mod-cell, .rep-hbar-row { @apply border-[var(--erp-border)]!; } .calendar-grid.large, .cal-view-tabs, .bk-filter-card, .table-filters, .rep-donut-center, .ur-donut::before { @apply bg-[var(--erp-surface)]! border-[var(--erp-border)]!; } .dark .occupancy-ring:after, .dark .ur-donut::before, .dark .rep-donut-center { @apply bg-[var(--erp-surface)]!; box-shadow: 0 0 0 1px var(--erp-border) !important; } .dark .calendar-day.muted, .dark .cal-cell.muted, .dark .large-day.muted { @apply text-slate-500!; } .dark .day-pill.available, .dark .calendar-event.available, .dark .status-badge.confirmed, .dark .status-badge.completed, .dark .status-badge.scheduled { background: rgba(34,197,94,.16) !important; @apply text-green-300!; } .dark .day-pill.booked, .dark .calendar-event.confirmed, .dark .calendar-event.completed, .dark .status-badge.pending { background: rgba(244,63,94,.16) !important; @apply text-rose-300!; } .dark .day-pill.tentative, .dark .calendar-event.pending, .dark .status-badge.tentative, .dark .status-badge.inv-status-low { background: rgba(245,158,11,.18) !important; @apply text-amber-300!; } .dark .metric-blue, .dark .inv-blue, .dark .ur-mod-blue { background: rgba(59,130,246,.18) !important; @apply text-blue-300!; } .dark .metric-green, .dark .inv-green, .dark .ur-mod-green { background: rgba(34,197,94,.18) !important; @apply text-green-300!; } .dark .metric-gold, .dark .inv-amber, .dark .ur-mod-gold, .dark .ur-mod-orange { background: rgba(245,158,11,.18) !important; @apply text-amber-300!; } .dark .metric-purple, .dark .inv-purple, .dark .ur-mod-purple { background: rgba(168,85,247,.18) !important; @apply text-[#c4b5fd]!; } .dark .rep-teal, .dark .ur-mod-cyan { background: rgba(20,184,166,.18) !important; @apply text-teal-300!; } .dark .ur-mod-pink { background: rgba(236,72,153,.18) !important; @apply text-pink-300!; } .dark .ur-mod-slate { background: rgba(148,163,184,.16) !important; @apply text-slate-300!; } .dropdown-menu, .bk-dropdown-menu { @apply bg-[var(--erp-surface)]! border-[var(--erp-border)]!; box-shadow: var(--erp-shadow) !important; } .dropdown-item, .bk-dropdown-item { @apply text-[var(--erp-text-soft)]!; } .dropdown-item:hover, .bk-dropdown-item:hover { @apply bg-[var(--erp-surface-soft)]! text-[var(--erp-text)]!; } .wi-flash-success, .mb-4.rounded-md.border-emerald-200 { @apply bg-emerald-50! border-emerald-200! text-emerald-700!; } .wi-flash-error, .mb-4.rounded-md.border-rose-200 { @apply bg-rose-50! border-rose-200! text-rose-700!; } .dark .wi-flash-success, .dark .mb-4.rounded-md.border-emerald-200 { background: rgba(6,78,59,.55) !important; border-color: rgba(52,211,153,.35) !important; @apply text-emerald-200!; } .dark .wi-flash-error, .dark .mb-4.rounded-md.border-rose-200 { background: rgba(127,29,29,.55) !important; border-color: rgba(251,113,133,.35) !important; @apply text-rose-200!; } .dark .auth-page { background: radial-gradient(circle at 16% 10%,#1e293b 0,#111827 38%,#020617 100%) !important; } .dark .auth-form-wrap h1, .dark .auth-field { @apply text-[var(--erp-text)]!; } .dark .auth-lead, .dark .auth-contact, .dark .auth-footer { @apply text-[var(--erp-muted)]!; } /* ===== GLOBAL INPUT HOVER EFFECT ===== */ :root { --erp-input-hover: #f8fafc; --erp-input-focus: #ffffff; --erp-input-hover-border: #60a5fa; --erp-input-focus-border: #2563eb; --erp-input-focus-ring: rgba(37,99,235,.16); } .dark { --erp-input-hover: #111827; --erp-input-focus: #0f172a; --erp-input-hover-border: #64748b; --erp-input-focus-border: #38bdf8; --erp-input-focus-ring: rgba(56,189,248,.22); } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, .erp-body select:focus, .erp-body textarea:focus, .settings-input:focus, .settings-select:focus, .settings-textarea:focus { @apply bg-[var(--erp-input-focus)]! text-[var(--erp-input-text)]! outline-0!; border-color: var(--erp-input-focus-border) !important; box-shadow: 0 0 0 3px var(--erp-input-focus-ring) !important; } .filter-search:focus-within, .date-input-wrap:focus-within, .wi-input-wrap:focus-within, .auth-control:focus-within, .rep-date-range:focus-within { @apply bg-[var(--erp-input-focus)]!; border-color: var(--erp-input-focus-border) !important; box-shadow: 0 0 0 3px var(--erp-input-focus-ring) !important; } .erp-body input:disabled, .erp-body select:disabled, .erp-body textarea:disabled, .erp-body input[readonly], .erp-body textarea[readonly] { @apply opacity-75; cursor: not-allowed; } .dark .erp-body input:disabled, .dark .erp-body select:disabled, .dark .erp-body textarea:disabled, .dark .erp-body input[readonly], .dark .erp-body textarea[readonly] { @apply bg-[#172033]! text-slate-400! border-slate-700!; } /* ===== GLOBAL SELECT DROPDOWN THEME ===== */ .erp-body select, .dash-month-select, .cal-month-select, .bk-filter-select, .gst-invoice-select, .settings-select, .cal-hall-select { color-scheme: light; } .dark .erp-body select, .dark .dash-month-select, .dark .cal-month-select, .dark .bk-filter-select, .dark .gst-invoice-select, .dark .settings-select, .dark .cal-hall-select { color-scheme: dark; @apply bg-[var(--erp-input)]! border-[var(--erp-border-strong)]! text-[var(--erp-input-text)]!; } .erp-body select option, .dash-month-select option, .cal-month-select option, .bk-filter-select option, .gst-invoice-select option, .settings-select option, .cal-hall-select option { @apply bg-white! text-slate-950!; } .erp-body select option:hover, .dash-month-select option:hover, .cal-month-select option:hover, .bk-filter-select option:hover, .gst-invoice-select option:hover, .settings-select option:hover, .cal-hall-select option:hover { @apply bg-blue-100! text-slate-950!; } .erp-body select option:checked, .dash-month-select option:checked, .cal-month-select option:checked, .bk-filter-select option:checked, .gst-invoice-select option:checked, .settings-select option:checked, .cal-hall-select option:checked { @apply bg-blue-600! text-white!; } .dark .erp-body select option, .dark .dash-month-select option, .dark .cal-month-select option, .dark .bk-filter-select option, .dark .gst-invoice-select option, .dark .settings-select option, .dark .cal-hall-select option { @apply bg-slate-950! text-slate-200!; } .dark .erp-body select option:hover, .dark .dash-month-select option:hover, .dark .cal-month-select option:hover, .dark .bk-filter-select option:hover, .dark .gst-invoice-select option:hover, .dark .settings-select option:hover, .dark .cal-hall-select option:hover { @apply bg-slate-900! text-slate-50!; } .dark .erp-body select option:checked, .dark .dash-month-select option:checked, .dark .cal-month-select option:checked, .dark .bk-filter-select option:checked, .dark .gst-invoice-select option:checked, .dark .settings-select option:checked, .dark .cal-hall-select option:checked { @apply bg-blue-600! text-white!; } .select-wrapper { @apply relative; } .form-select, .form-control-select, .erp-body select, .dash-month-select, .cal-month-select, .bk-filter-select, .gst-invoice-select, .settings-select, .cal-hall-select { height: 48px; @apply pe-[42px]! appearance-none!; -webkit-appearance: none; -moz-appearance: none; background-image: none !important; } .select-wrapper .dropdown-arrow { @apply absolute pointer-events-none; right: 14px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; opacity: 0.7; } .dark .select-wrapper .dropdown-arrow { opacity: 0.8; } .dark .dash-month-select, .dark .cal-month-select { box-shadow: 0 8px 30px rgba(0,0,0,.22) !important; } /* ===== DARK FORM CONTROL HARDENING ===== */ .dark .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .dark .erp-body select, .dark .erp-body textarea, .dark .settings-card input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .dark .settings-card select, .dark .settings-card textarea, .dark .settings-input, .dark .settings-select, .dark .settings-textarea, .dark .filter-search, .dark .date-input-wrap, .dark .wi-input-wrap, .dark .auth-control, .dark .rep-date-range, .dark .gst-add-input, .dark .gst-add-amount, .dark .ar-readonly, .dark .calendar-toolbar button, .dark .calendar-toolbar select, .dark .calendar-actions span, .dark .calendar-actions button, .dark .cal-month-select, .dark .dash-month-select, .dark .cal-hall-select, .dark .bk-filter-select, .dark .gst-invoice-select { @apply bg-[var(--theme-input-bg)]! border-[var(--theme-input-border)]! text-[var(--theme-text-primary)]!; color-scheme: dark; } .dark .filter-search input, .dark .date-input-wrap input, .dark .wi-input-wrap input, .dark .wi-input-wrap select, .dark .wi-input-wrap textarea, .dark .auth-control input, .dark .rep-date-range input { @apply bg-transparent! border-transparent! text-[var(--erp-input-text)]! shadow-none!; } .dark .erp-body input::placeholder, .dark .erp-body textarea::placeholder, .dark .settings-card input::placeholder, .dark .settings-card textarea::placeholder, .dark .filter-search input::placeholder, .dark .date-input-wrap input::placeholder, .dark .wi-input-wrap input::placeholder, .dark .wi-input-wrap textarea::placeholder, .dark .auth-control input::placeholder, .dark .rep-date-range input::placeholder, .dark .gst-add-input::placeholder, .dark .gst-add-amount::placeholder { @apply text-[var(--erp-input-placeholder)]!; opacity: 1 !important; } .dark .erp-body input:focus, .dark .erp-body select:focus, .dark .erp-body textarea:focus, .dark .settings-card input:focus, .dark .settings-card select:focus, .dark .settings-card textarea:focus, .dark .filter-search:focus-within, .dark .date-input-wrap:focus-within, .dark .wi-input-wrap:focus-within, .dark .auth-control:focus-within, .dark .rep-date-range:focus-within, .dark .gst-add-input:focus, .dark .gst-add-amount:focus { @apply bg-[var(--erp-input-focus)]! text-[var(--erp-input-text)]! outline-0!; border-color: var(--erp-input-focus-border) !important; box-shadow: 0 0 0 3px var(--erp-input-focus-ring) !important; } .dark .erp-body input[type="date"], .dark .erp-body input[type="datetime-local"], .dark .erp-body input[type="time"], .dark .erp-body input[type="month"], .dark .settings-card input[type="date"], .dark .settings-card input[type="datetime-local"], .dark .settings-card input[type="time"], .dark .settings-card input[type="month"] { color-scheme: dark; } .dark .erp-body select, .dark .settings-card select, .dark .wi-input-wrap select, .dark .cal-month-select, .dark .dash-month-select, .dark .cal-hall-select, .dark .bk-filter-select, .dark .gst-invoice-select { } .dark .erp-body select option, .dark .settings-card select option, .dark .wi-input-wrap select option, .dark .cal-month-select option, .dark .dash-month-select option, .dark .cal-hall-select option, .dark .bk-filter-select option, .dark .gst-invoice-select option { @apply bg-[var(--erp-input)]! text-[var(--erp-input-text)]!; } .dark .erp-body select option:checked, .dark .settings-card select option:checked, .dark .wi-input-wrap select option:checked, .dark .cal-month-select option:checked, .dark .dash-month-select option:checked, .dark .cal-hall-select option:checked, .dark .bk-filter-select option:checked, .dark .gst-invoice-select option:checked { @apply bg-blue-600! text-white!; } .dark .dropdown-menu, .dark .bk-dropdown-menu, .dark .custom-select-container .dropdown-menu, .dark #shareMenu { @apply bg-[var(--erp-surface)]! border-[var(--erp-border)]! text-[var(--erp-text)]!; box-shadow: var(--erp-shadow) !important; } .dark .custom-select-container > div[class*="bg-white"] { @apply bg-[var(--erp-input)]! border-[var(--erp-border-strong)]! text-[var(--erp-input-text)]!; } .dark .custom-select-container > div[class*="bg-white"]:hover, .dark .custom-select-container.open > div[class*="bg-white"] { @apply bg-[var(--erp-input-hover)]!; border-color: var(--erp-input-hover-border) !important; } .dark .custom-select-container > div[class*="bg-white"] span, .dark .custom-select-container > div[class*="bg-white"] svg { @apply text-[var(--erp-input-text)]!; } .dark .dropdown-menu [class*="text-slate"], .dark .bk-dropdown-menu [class*="text-slate"] { @apply bg-transparent! border-[var(--erp-border)]! text-[var(--erp-text-soft)]!; } .dark .dropdown-item, .dark .bk-dropdown-item, .dark .dropdown-menu li, .dark .custom-select-container li { @apply text-[var(--erp-text-soft)]!; } .dark .dropdown-item:hover, .dark .bk-dropdown-item:hover, .dark .dropdown-menu li:hover, .dark .custom-select-container li:hover { @apply bg-[var(--erp-surface-soft)]! text-[var(--erp-text)]!; } .dark .info-line { background: rgba(37,99,235,.14) !important; border-color: rgba(96,165,250,.35) !important; @apply text-blue-200!; } .dark .wi-divider { @apply bg-[var(--erp-border)]!; } .dark .wi-input-wrap > svg, .dark .date-input-wrap svg, .dark .filter-search svg, .dark .rep-date-range svg { @apply text-[var(--erp-muted-2)]!; stroke: currentColor !important; } .dark .date-input-wrap svg, .dark .rep-date-range svg { @apply text-white!; } html:not(.dark) .date-input-wrap svg, html:not(.dark) .rep-date-range svg { @apply text-black!; } /* ===== WRAPPED FILTER & ROW ACTION FIXES ===== */ .filter-search, .date-input-wrap, .rep-date-range { @apply flex items-center; min-width: 0; } .filter-search input, .date-input-wrap input, .rep-date-range input { flex: 1 1 auto; @apply min-w-0 w-full min-h-[2.5rem] p-0! border-0! rounded-none! bg-transparent! text-[var(--erp-input-text)]! shadow-none! outline-0!; appearance: auto !important; -webkit-appearance: auto !important; } .date-input-wrap input[type="date"], .rep-date-range input[type="date"] { color-scheme: inherit; } .action-icons { @apply relative; flex-wrap: nowrap; } .action-icons > .dropdown-wrap { @apply relative inline-flex; flex: 0 0 auto; } .action-icons .dropdown-menu { @apply w-max! min-w-[11rem]! overflow-visible! p-[.35rem]! rounded-[.55rem]!; max-width: min(18rem, calc(100vw - 2rem)); } .action-icons .dropdown-item { @apply flex! items-center w-full! min-h-[2.25rem]! p-[.55rem_.75rem]! border-0! rounded-[.35rem]! bg-transparent! shadow-none! text-[var(--erp-text-soft)]! text-[.84rem]! text-left! justify-start! whitespace-nowrap!; line-height: 1.25 !important; } .action-icons .dropdown-item:hover, .action-icons .dropdown-item:focus { @apply bg-[var(--erp-surface-soft)]! text-[var(--erp-text)]!; } .booking-list-page .dashboard-table-wrap { overflow-x: auto; overflow-y: visible; } /* ===== PROJECT-WIDE DARK MODE NORMALIZATION ===== */ .dark .erp-body { @apply bg-[var(--erp-bg)]! text-[var(--erp-text)]!; } .dark .erp-body .bg-white, .dark .erp-body .bg-white\/95, .dark .erp-body .bg-slate-50, .dark .erp-body .bg-slate-100, .dark .erp-body .bg-slate-200 { @apply bg-[var(--erp-surface)]!; } .dark .erp-body .hover\:bg-white\/10:hover, .dark .erp-body .hover\:bg-slate-50:hover, .dark .erp-body .hover\:bg-slate-100:hover { @apply bg-[var(--erp-surface-soft)]!; } .dark .erp-body .border-slate-100, .dark .erp-body .border-slate-200, .dark .erp-body .border-slate-300, .dark .erp-body .divide-slate-100 > * + *, .dark .erp-body .divide-slate-200 > * + * { @apply border-[var(--erp-border)]!; } .dark .erp-body .text-slate-950, .dark .erp-body .text-slate-900, .dark .erp-body .text-slate-800, .dark .erp-body .text-slate-700 { @apply text-[var(--erp-text)]!; } .dark .erp-body .text-slate-600, .dark .erp-body .text-slate-500, .dark .erp-body .text-slate-400, .dark .erp-body .text-gray-600, .dark .erp-body .text-gray-500 { @apply text-[var(--erp-muted)]!; } .dark .erp-body [style*="background:#fff"], .dark .erp-body [style*="background: #fff"], .dark .erp-body [style*="background:#ffffff"], .dark .erp-body [style*="background: #ffffff"], .dark .erp-body [style*="background:#f8fafc"], .dark .erp-body [style*="background: #f8fafc"], .dark .erp-body [style*="background:#f1f5f9"], .dark .erp-body [style*="background: #f1f5f9"] { @apply bg-[var(--erp-surface)]!; } .dark .erp-body [style*="background:#eff6ff"], .dark .erp-body [style*="background: #eff6ff"], .dark .erp-body [style*="background:#dbeafe"], .dark .erp-body [style*="background: #dbeafe"], .dark .erp-body [style*="background:#f0f9ff"], .dark .erp-body [style*="background: #f0f9ff"] { background: rgba(37,99,235,.16) !important; } .dark .erp-body [style*="background:#ecfdf5"], .dark .erp-body [style*="background: #ecfdf5"], .dark .erp-body [style*="background:#f0fdf4"], .dark .erp-body [style*="background: #f0fdf4"] { background: rgba(6,78,59,.55) !important; } .dark .erp-body [style*="background:#fff4e5"], .dark .erp-body [style*="background: #fff4e5"], .dark .erp-body [style*="background:#fff7ed"], .dark .erp-body [style*="background: #fff7ed"], .dark .erp-body [style*="background:#fef3c7"], .dark .erp-body [style*="background: #fef3c7"] { background: rgba(245,158,11,.18) !important; } .dark .erp-body [style*="border:1px solid #e5e7eb"], .dark .erp-body [style*="border: 1px solid #e5e7eb"], .dark .erp-body [style*="border:1px solid #e2e8f0"], .dark .erp-body [style*="border: 1px solid #e2e8f0"], .dark .erp-body [style*="border:1px solid #d7dce4"], .dark .erp-body [style*="border: 1px solid #d7dce4"], .dark .erp-body [style*="border:1px solid #cbd5e1"], .dark .erp-body [style*="border: 1px solid #cbd5e1"] { @apply border-[var(--erp-border)]!; } .dark .erp-body [style*="border-bottom:1px solid #f8fafc"], .dark .erp-body [style*="border-bottom: 1px solid #f8fafc"], .dark .erp-body [style*="border-bottom:1px solid #e5e7eb"], .dark .erp-body [style*="border-bottom: 1px solid #e5e7eb"], .dark .erp-body [style*="border-bottom:1px solid #e2e8f0"], .dark .erp-body [style*="border-bottom: 1px solid #e2e8f0"] { @apply border-b-[var(--erp-border)]!; } .dark .erp-body [style*="border-top:1px solid #e5e7eb"], .dark .erp-body [style*="border-top: 1px solid #e5e7eb"], .dark .erp-body [style*="border-top:1px solid #e2e8f0"], .dark .erp-body [style*="border-top: 1px solid #e2e8f0"] { @apply border-t-[var(--erp-border)]!; } .dark .erp-body [style*="color:#0f172a"], .dark .erp-body [style*="color: #0f172a"], .dark .erp-body [style*="color:#111827"], .dark .erp-body [style*="color: #111827"], .dark .erp-body [style*="color:#1e293b"], .dark .erp-body [style*="color: #1e293b"], .dark .erp-body [style*="color:#334155"], .dark .erp-body [style*="color: #334155"] { @apply text-[var(--erp-text)]!; } .dark .erp-body [style*="color:#475569"], .dark .erp-body [style*="color: #475569"], .dark .erp-body [style*="color:#64748b"], .dark .erp-body [style*="color: #64748b"], .dark .erp-body [style*="color:#6b7280"], .dark .erp-body [style*="color: #6b7280"], .dark .erp-body [style*="color:#94a3b8"], .dark .erp-body [style*="color: #94a3b8"] { @apply text-[var(--erp-muted)]!; } .dark .erp-body .modal-backdrop [style*="background:#fff"], .dark .erp-body .modal-backdrop [style*="background: #fff"], .dark .erp-body .modal-backdrop [style*="background:#ffffff"], .dark .erp-body .modal-backdrop [style*="background: #ffffff"], .dark .erp-body .settings-card [style*="background:#fff"], .dark .erp-body .settings-card [style*="background: #fff"], .dark .erp-body .settings-sidebar-card [style*="background:#fff"], .dark .erp-body .settings-sidebar-card [style*="background: #fff"], .dark .erp-body .gst-card [style*="background:#fff"], .dark .erp-body .gst-card [style*="background: #fff"], .dark .erp-body .ar-form-card [style*="background:#fff"], .dark .erp-body .ar-form-card [style*="background: #fff"], .dark .erp-body .ar-preview-card [style*="background:#fff"], .dark .erp-body .ar-preview-card [style*="background: #fff"] { @apply bg-[var(--erp-surface-raised)]!; } .dark .erp-body .settings-card input[type="checkbox"], .dark .erp-body .settings-card input[type="radio"], .dark .erp-body input[type="checkbox"], .dark .erp-body input[type="radio"] { accent-color: var(--erp-blue); } .dark .erp-body .modal-close, .dark .erp-body .topbar-menu-btn, .dark .erp-body .sidebar-toggle-btn, .dark .erp-body .gst-action-btn, .dark .erp-body .inv-manage-cat-btn, .dark .erp-body .ar-preview-btn, .dark .erp-body .bk-clear-btn { @apply bg-[var(--erp-surface-raised)]! border-[var(--erp-border-strong)]! text-[var(--erp-text-soft)]!; } .dark .erp-body .modal-close:hover, .dark .erp-body .topbar-menu-btn:hover, .dark .erp-body .sidebar-toggle-btn:hover, .dark .erp-body .gst-action-btn:hover, .dark .erp-body .inv-manage-cat-btn:hover, .dark .erp-body .ar-preview-btn:hover, .dark .erp-body .bk-clear-btn:hover { @apply bg-[var(--erp-surface-soft)]! text-[var(--erp-text)]!; } .dark .erp-body .dashboard-table-wrap, .dark .erp-body .dash-upcoming-table-wrap, .dark .erp-body .dash-table-wrap, .dark .erp-body .ur-perm-table-wrap, .dark .erp-body .inv-table-wrap { scrollbar-color: #64748b var(--erp-surface-soft); } .dark .erp-body ::-webkit-scrollbar-track { @apply bg-[var(--erp-surface-soft)]; } .dark .erp-body ::-webkit-scrollbar-thumb { @apply bg-slate-500; border-color: var(--erp-surface-soft); } /* ===== FINAL WRAPPED INPUT DEDUPLICATION ===== */ .erp-body .filter-search > input, .erp-body .date-input-wrap > input, .erp-body .rep-date-range > input, .erp-body .auth-control > input, .erp-body .wi-input-wrap > input, .erp-body .wi-input-wrap > select, .erp-body .wi-input-wrap > textarea { @apply min-w-0! w-full! min-h-[2.5rem]! p-0! border-0! rounded-none! bg-transparent! bg-transparent! text-[var(--erp-input-text)]! shadow-none! outline-0!; } .dark .erp-body .filter-search > input, .dark .erp-body .date-input-wrap > input, .dark .erp-body .rep-date-range > input, .dark .erp-body .auth-control > input, .dark .erp-body .wi-input-wrap > input, .dark .erp-body .wi-input-wrap > select, .dark .erp-body .wi-input-wrap > textarea { @apply border-0! bg-transparent! bg-transparent! text-[var(--erp-input-text)]! shadow-none! outline-0!; } .erp-body .filter-search, .erp-body .date-input-wrap, .erp-body .rep-date-range, .erp-body .auth-control, .erp-body .wi-input-wrap { @apply overflow-hidden; } .erp-body .date-input-wrap > input[type="date"], .erp-body .rep-date-range > input[type="date"] { color-scheme: inherit !important; } /* ===== BOOKING MODULE DARK COMPLETION ===== */ .bk-create-stepper { @apply overflow-hidden; } .bk-step-item { @apply min-w-0; } .bk-step-dot { flex: 0 0 auto; transition: background-color .15s, color .15s, border-color .15s; } .bk-step-dot.complete { @apply bg-green-600! text-white!; } .bk-step-dot.active { @apply bg-[var(--erp-surface-raised)]! text-[var(--erp-text)]!; border: 1px solid var(--erp-border-strong) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--erp-blue) 18%, transparent) !important; } .bk-step-dot.pending { @apply bg-[var(--erp-surface-soft)]! text-[var(--erp-muted)]!; border: 1px solid var(--erp-border) !important; } .bk-step-label { @apply text-[var(--erp-muted)]!; } .bk-step-label.active { @apply text-[var(--erp-text)]!; } .bk-step-line { @apply bg-[var(--erp-border)]!; } .bk-step-line.complete { @apply bg-green-600!; } .bk-customer-search-card { @apply bg-[var(--erp-surface-soft)]! border-[var(--erp-border)]!; } .bk-customer-search-label { @apply text-[var(--erp-muted)]!; } .bk-customer-suggestions { @apply bg-[var(--erp-surface)]! border-[var(--erp-border)]!; box-shadow: var(--erp-shadow) !important; } .bk-customer-suggestion { @apply text-[var(--erp-text)]!; border-bottom-color: var(--erp-border) !important; } /* ===== RESPONSIVE MEDIA QUERIES ===== */ /* --- 768px --- */ @media (max-width: 768px) { .log-detail-layout, .al-detail-layout, .activity-detail-layout, .log-layout, .al-layout { grid-template-columns: 1fr !important; gap: 1rem !important; } .log-header, .al-header, .activity-header { @apply flex-col! items-start!; gap: 0.85rem; } .log-properties pre, .activity-details pre, pre { @apply whitespace-pre-wrap! break-all! overflow-x-auto!; max-width: 100%; } .log-meta-grid, .al-meta-grid, .activity-meta-row { grid-template-columns: 1fr !important; gap: 0.85rem !important; } .log-timeline-wrap { @apply ps-0!; } .log-nav-row, .al-nav-actions { @apply flex-col w-full; } .log-nav-row a, .al-nav-actions a { @apply w-full justify-center; } .log-card, .al-card, .activity-card { @apply p-4!; } .al-table-wrap, .log-table-wrap { @apply overflow-x-auto! w-full; -webkit-overflow-scrolling: touch; } .al-table, .log-table { min-width: 45rem; } .al-filter-row, .log-filter-row, .al-topbar { @apply flex-col! items-stretch!; gap: 0.75rem; } } /* --- 640px --- */ @media (max-width: 640px) { .rep-metrics-grid { grid-template-columns: 1fr; } .rep-hbar-row { @apply flex flex-wrap justify-between; gap: 0.4rem; } .rep-hbar-name { @apply w-full; margin-bottom: -0.25rem; font-size: 0.78rem; } .rep-hbar-track { flex: 1; @apply min-w-0; } .rep-date-range { @apply w-full justify-between; } .rep-filter-panel { @apply flex-col items-stretch; } .rep-toolbar { @apply flex-col items-stretch w-full; } .rep-export-btn, .rep-filter-btn { @apply w-full justify-center; } .rep-donut-layout { gap: 1.5rem; } .ur-stats-grid { grid-template-columns: 1fr; } .ur-role-summary-stats { @apply flex-col; gap: 0.85rem; } .ur-detail-head { @apply flex-col items-stretch; gap: 0.75rem; } .ur-role-summary-card { @apply flex-col items-stretch; } .ur-perm-header-actions { @apply flex-col items-stretch w-full; } .ur-perm-header-actions .btn-dark, .ur-perm-header-actions .btn-outline { @apply w-full justify-center; } .ur-mod-cell { @apply flex-col items-start; gap: 0.5rem; } .ur-perm-matrix th.ur-col-module, .ur-perm-matrix td.ur-col-module { @apply ps-2; min-width: 8rem; } .ur-perm-matrix th, .ur-perm-matrix td { @apply p-2; font-size: 0.65rem; } .ar-paper-header { @apply flex-col items-center text-center; gap: 1rem; } .ar-paper-brand { @apply flex-col items-center w-full; } .ar-paper-badge-col, .ar-paper-receipt-meta { @apply text-center w-full; } .ar-paper-info-row { @apply flex-col; gap: 0.25rem; margin-bottom: 0.85rem; text-align: center; } .ar-paper-info-row span { @apply min-w-0; } .ar-paper-sig-row { @apply flex-col items-center; gap: 1.25rem; text-align: center; } .ar-paper-sig-line { @apply mx-auto; margin-bottom: 0.35rem; } .ar-form-actions { @apply flex-col items-stretch; } .ar-preview-actions { @apply flex-col items-stretch w-full; } .ar-preview-btn { @apply w-full; } .ar-paper { @apply p-[0.85rem]; } .ar-disclaimer { @apply flex-col text-center items-center; } .bk-overview-grid { grid-template-columns: 1fr; } .bk-client-grid { grid-template-columns: 1fr; } .bk-inv-info-card .bk-dl-inv-grid { grid-template-columns: 1fr; } .bk-details-grid { grid-template-columns: 1fr; } .bk-inv-meta { grid-template-columns: 1fr; } .bk-topbar { @apply flex-col items-stretch; gap: 0.75rem; } .bk-topbar-actions { @apply flex-col items-stretch w-full; } .bk-action-btn { @apply w-full justify-center; } .bk-tabs { @apply pb-1; } .bk-client-row { @apply flex-col items-center text-center; } .form-grid.three, .form-grid.inquiry { grid-template-columns: 1fr; } } /* --- 480px --- */ @media (max-width: 480px) { .filter-selects { @apply flex-col items-stretch; } .filter-selects select, .filter-selects input { @apply w-full; } .btn-filter { @apply w-full justify-center; } .ar-paper-table th, .ar-paper-table td { @apply p-[0.4rem]; font-size: 0.65rem; } .ur-tabs { gap: .35rem; } .ur-tab { @apply w-full; padding: .65rem .8rem; } .ur-module-search { margin: .75rem .85rem; } .ur-module-search input { @apply w-full; } .ur-perm-matrix { min-width: calc(100vw - 2rem); } .ur-perm-table-wrap { @apply pb-4 overflow-x-auto; max-height: none; } .ur-perm-table-wrap .ur-perm-matrix { min-width: calc(100vw - 2rem); @apply w-auto; } .ur-perm-matrix th, .ur-perm-matrix td { @apply p-[0.45rem_0.35rem]; font-size: 0.62rem; } .ur-perm-matrix th.ur-col-toggle, .ur-perm-matrix td.ur-col-toggle { @apply w-[4.5rem]; padding-right: 0.25rem; } .ur-perm-header-actions { @apply flex-col items-stretch w-full; gap: .65rem; } .ur-perm-header-actions .btn-dark, .ur-perm-header-actions .btn-outline { @apply w-full justify-center; } .ur-perm-form-actions { @apply flex-col items-stretch; } .ur-perm-form-actions > * { @apply w-full; } .ur-role-summary-card { @apply flex-col items-stretch; } .ur-role-summary-stats { @apply flex-col; gap: .65rem; } .rep-header { @apply flex-col items-stretch; gap: 0.75rem; } .rep-date-range { @apply flex-col items-stretch; height: auto; padding: 0.65rem; gap: 0.5rem; } .rep-date-range input { @apply w-full text-center; min-height: 2.5rem; } .rep-date-range span { @apply hidden; } .rep-presets { @apply flex-col w-full; } .rep-presets .btn-outline { @apply w-full justify-center; } .rep-chart-card { @apply p-3!; } .rep-chart-plot { grid-template-columns: 2rem minmax(0, 1fr); gap: 0.25rem; } .rep-donut-wrap { @apply w-[7.5rem] h-[7.5rem] mx-auto; } .rep-donut-center { inset: 1.15rem; } .rep-donut-center strong { font-size: 1.15rem; } .rep-donut-legend-side li { grid-template-columns: auto 1fr; @apply items-start; } .rep-legend-meta { grid-column: 1 / -1; @apply ps-[0.95rem] whitespace-normal; margin-top: -0.25rem; font-size: 0.68rem; } .settings-card { @apply p-3!; } .settings-3col { gap: 1rem; } .settings-section-title { font-size: 0.85rem; @apply pb-2; margin-bottom: 0.85rem; } .settings-toggle-col { @apply pt-4; } .settings-toggle-row { @apply py-2 flex-col items-start; gap: 0.5rem; } .settings-label { font-size: 0.78rem; } .settings-card label input, .settings-card label select, .settings-card label textarea, .settings-card .form-grid label input, .settings-card .form-grid label select, .settings-card .form-grid label textarea { @apply min-h-[2.6rem] p-[0.45rem_0.65rem]; font-size: 0.82rem; } .settings-save-btn { @apply w-full justify-center; } } /* ===== MODERN FORM CONTROLS ===== */ .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]), .erp-body select, .erp-body textarea { @apply min-h-[2.75rem] w-full; border: 1px solid var(--erp-border-strong, rgba(148,163,184,.2)) !important; border-radius: .55rem !important; background-color: var(--erp-input, #fff) !important; color: var(--erp-input-text, #0f172a) !important; box-shadow: 0 1px 2px rgba(15,23,42,.08); transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease; } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):hover, .erp-body select:hover, .erp-body textarea:hover { border-color: var(--erp-input-hover-border, #60a5fa) !important; background-color: var(--erp-input-hover, #f8fafc) !important; } .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus, .erp-body select:focus, .erp-body textarea:focus { @apply outline-0!; border-color: var(--erp-input-focus-border, #38bdf8) !important; box-shadow: 0 0 0 3px var(--erp-input-focus-ring, rgba(56,189,248,.18)), 0 1px 2px rgba(15,23,42,.08) !important; background-color: var(--erp-input-focus, #fff) !important; } .erp-body select:not([multiple]):not(.cal-month-select), .erp-body .dash-month-select, .erp-body .cal-hall-select, .erp-body .bk-filter-select, .erp-body .gst-invoice-select, .erp-body .settings-select { @apply appearance-none; -webkit-appearance: none; @apply pe-[2.55rem]!; } .erp-body select option { @apply text-slate-950 bg-white; font-size: .92rem; } .erp-body select option:checked { @apply bg-blue-600 text-white; } .erp-body input[type="date"], .erp-body input[type="datetime-local"], .erp-body input[type="time"], .erp-body input[type="month"] { color-scheme: light; } .erp-body input::placeholder, .erp-body textarea::placeholder { color: var(--erp-input-placeholder, #94a3b8); } .filter-search, .date-input-wrap, .wi-input-wrap { @apply border-[#cbd5e1]! rounded-[.55rem]!; box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: border-color .15s ease, box-shadow .15s ease; } .filter-search:focus-within, .date-input-wrap:focus-within, .wi-input-wrap:focus-within { @apply border-sky-400!; box-shadow: 0 0 0 3px rgba(14,165,233,.18), 0 1px 2px rgba(15,23,42,.04) !important; } .filter-search input, .date-input-wrap input, .wi-input-wrap input, .wi-input-wrap select, .wi-input-wrap textarea { @apply shadow-none!; } .cal-month-picker { gap: .45rem; } .cal-month-select { @apply min-h-[2.75rem]! border-[#cbd5e1]! rounded-[.55rem]! bg-white! text-slate-950! appearance-none; -webkit-appearance: none; padding: 0 2.25rem 0 1rem !important; box-shadow: 0 1px 2px rgba(15,23,42,.08); } .cal-month-select option { @apply bg-white text-slate-950; } .cal-month-select option:checked { @apply bg-blue-600 text-white; } .cal-month-picker .cal-month-chevron { @apply end-[.8rem]!; } .settings-card label input, .settings-card label select, .settings-card label textarea, .settings-card .form-grid label input, .settings-card .form-grid label select, .settings-card .form-grid label textarea { @apply border-[#cbd5e1]! rounded-[.55rem]!; box-shadow: 0 1px 2px rgba(15,23,42,.04) !important; } } /* ===== ERP CSS 3001-4500 END ===== */ @layer components { /* ===== GLOBAL FORM CONTROLS (Walk-in Theme Standard) ===== */ /* Base resets are limited to authenticated ERP screens. */ .erp-body select { appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; } /* Numeric values must change only through explicit typing. */ .erp-body input[type="number"] { appearance: textfield; -moz-appearance: textfield; } .erp-body input[type="number"]::-webkit-inner-spin-button, .erp-body input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } /* Global Form Control Map */ .erp-body .form-input, .erp-body .form-textarea, .erp-body .form-dropdown-btn, .erp-body .erp-custom-select-btn, .erp-body .form-control, .erp-body .form-select, .erp-body .select2-selection, .erp-body .flatpickr-input, .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]), .erp-body textarea, .erp-body select { width: 100% !important; background-color: var(--theme-input-bg) !important; border: 1px solid var(--theme-input-border) !important; color: var(--theme-text-primary, var(--erp-input-text)) !important; border-radius: 12px !important; padding: 12px 16px !important; font-size: 0.875rem !important; font-family: inherit !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important; cursor: text; } /* Height Enforcement */ .erp-body .form-input, .erp-body .form-control, .erp-body .form-select, .erp-body .select2-selection, .erp-body .flatpickr-input, .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]), .erp-body select { height: 48px !important; } /* Textarea Enforcement */ .erp-body .form-textarea, .erp-body textarea { min-height: 120px !important; resize: vertical; } /* Pointer specific elements */ .erp-body .form-dropdown-btn, .erp-body .erp-custom-select-btn, .erp-body .form-select, .erp-body select { cursor: pointer !important; display: flex; justify-content: space-between; align-items: center; } /* Hover States */ .erp-body .form-input:hover, .erp-body .form-textarea:hover, .erp-body .form-dropdown-btn:hover, .erp-body .erp-custom-select-btn:hover, .erp-body .form-control:hover, .erp-body .form-select:hover, .erp-body .select2-selection:hover, .erp-body .flatpickr-input:hover, .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]):hover, .erp-body textarea:hover, .erp-body select:hover { background-color: var(--theme-input-hover-bg) !important; border-color: var(--theme-input-border-hover) !important; } /* Focus States */ .erp-body .form-input:focus, .erp-body .form-textarea:focus, .erp-body .form-control:focus, .erp-body .form-select:focus, .erp-body .flatpickr-input:focus, .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]):focus, .erp-body textarea:focus, .erp-body select:focus, .erp-body .form-input:focus-within, .erp-body .form-dropdown-btn.is-open { outline: none !important; border-color: var(--theme-input-border-focus) !important; box-shadow: 0 0 0 3px rgba(61, 183, 233, 0.15) !important; } /* Readonly and Disabled States */ .erp-body .form-input:read-only, .erp-body .form-textarea:read-only, .erp-body .form-control:read-only, .erp-body .ar-readonly, .erp-body .exp-readonly, .erp-body input:read-only, .erp-body textarea:read-only { cursor: default !important; } /* Readonly amount/total fields — match Total Amount (₹) styling */ .erp-body .exp-readonly { font-weight: 600 !important; } .erp-body .exp-total-field { font-weight: 600 !important; } .erp-body .form-input:disabled, .erp-body .form-textarea:disabled, .erp-body .form-dropdown-btn:disabled, .erp-body .form-control:disabled, .erp-body .form-select:disabled, .erp-body input:disabled, .erp-body textarea:disabled, .erp-body select:disabled { cursor: not-allowed !important; opacity: 0.6 !important; background-color: var(--theme-input-disabled-bg, var(--erp-input-hover)) !important; } /* Placeholders */ .erp-body ::placeholder { color: var(--theme-text-placeholder) !important; opacity: 0.8 !important; } .erp-body .form-dropdown-btn.is-placeholder { color: var(--theme-text-placeholder) !important; } /* Native Popups (Date Pickers) */ .erp-body input[type="date"]::-webkit-calendar-picker-indicator, .erp-body input[type="datetime-local"]::-webkit-calendar-picker-indicator, .erp-body .form-input::-webkit-calendar-picker-indicator, .erp-body .flatpickr-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 1; filter: brightness(0); } html.dark .erp-body input[type="date"]::-webkit-calendar-picker-indicator, html.dark .erp-body input[type="datetime-local"]::-webkit-calendar-picker-indicator, html.dark .erp-body .form-input::-webkit-calendar-picker-indicator, html.dark .erp-body .flatpickr-input::-webkit-calendar-picker-indicator { filter: brightness(0) invert(1); } /* Reports use the same project-wide visual states for filters and date triggers. */ .rep-page .report-filter-control, .expense-report-page .report-filter-control { background-color: var(--theme-input-bg) !important; border: 1px solid var(--theme-input-border) !important; color: var(--theme-text-primary) !important; border-radius: 12px !important; box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05) !important; transition: all 0.2s ease-in-out !important; } .rep-page .report-filter-control:hover, .expense-report-page .report-filter-control:hover { background-color: var(--theme-input-hover-bg) !important; border-color: var(--theme-input-border-hover) !important; color: var(--theme-text-primary) !important; } .rep-page .report-filter-control:focus, .rep-page .report-filter-control:focus-visible, .rep-page .report-filter-control.is-open, .expense-report-page .report-filter-control:focus, .expense-report-page .report-filter-control:focus-visible, .expense-report-page .report-filter-control.is-open { outline: none !important; background-color: var(--theme-input-active-bg) !important; border-color: var(--theme-input-border-focus) !important; box-shadow: 0 0 0 3px rgba(61, 183, 233, 0.15) !important; } /* Custom Dropdown / Select Components */ .erp-body .form-dropdown-btn svg { width: 16px; height: 16px; opacity: 0.7; transition: transform 0.2s ease; } .erp-body .erp-custom-select-wrapper { min-width: 0; isolation: isolate; } .erp-body .erp-custom-select-wrapper.is-open { z-index: 2147483199 !important; } .erp-body .erp-custom-select-wrapper.is-open .form-dropdown-menu { z-index: 2147483200 !important; } .erp-body .form-dropdown-menu { position: absolute; z-index: 999; left: 0; right: auto; top: 100%; min-width: 0; width: 100%; margin-top: 4px; background-color: var(--global-dd-menu-bg) !important; border: 1px solid var(--global-dd-menu-border) !important; border-radius: 12px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important; overflow: hidden !important; } .erp-body .erp-custom-select-wrapper.is-open .form-dropdown-menu { pointer-events: auto !important; } .erp-body [data-ui-select-menu][style*="position: fixed"], .erp-body .form-dropdown-menu[style*="position: fixed"] { position: fixed !important; right: auto !important; pointer-events: auto !important; z-index: 2147483200 !important; } html:not(.dark) .erp-body .form-dropdown-menu { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15) !important; } .erp-body .form-dropdown-scroll { max-height: 280px; overflow-y: auto; padding: 0; } .erp-body .form-dropdown-scroll::-webkit-scrollbar { width: 6px; } .erp-body .form-dropdown-scroll::-webkit-scrollbar-track { background: transparent; } .erp-body .form-dropdown-scroll::-webkit-scrollbar-thumb { background: var(--theme-input-border); border-radius: 20px; } .erp-body .form-dropdown-item { display: block; width: 100%; text-align: left; padding: 14px 18px !important; cursor: pointer !important; border: none; background: transparent; min-height: 44px; font-size: 0.875rem !important; font-weight: 500 !important; color: var(--global-dd-text) !important; border-radius: 0 !important; font-family: inherit; transition: all 0.2s ease !important; margin-bottom: 0; white-space: normal !important; overflow-wrap: anywhere; } .erp-body .form-dropdown-item:last-child { margin-bottom: 0; } .erp-body .form-dropdown-item:hover, .erp-body .form-dropdown-item:focus-visible { background-color: var(--global-dd-hover-bg) !important; color: var(--global-dd-hover-text) !important; } .erp-body .form-dropdown-item.active { background-color: var(--global-dd-hover-bg) !important; color: var(--global-dd-hover-text) !important; font-weight: 600 !important; } .erp-body .multiselect-selected-summary { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; } .erp-body .multiselect-selected-chip { display: inline-flex; align-items: center; gap: 0.3rem; max-width: 100%; padding: 0.35rem 0.55rem; border: 1px solid var(--theme-input-border); border-radius: 999px; background: var(--theme-input-hover-bg); color: var(--theme-text-primary); font-size: 0.75rem; font-weight: 600; line-height: 1.25; } .erp-body .multiselect-selected-chip svg { width: 0.85rem; height: 0.85rem; max-width: none !important; max-height: none !important; flex: 0 0 auto; color: #10b981; } .erp-body .multiselect-selected-prefix { color: #10b981; font-weight: 800; } /* Responsive Grid Overrides */ @media (max-width: 1024px) { .erp-body .form-input, .erp-body .form-dropdown-btn, .erp-body .form-control, .erp-body .form-select, .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), .erp-body select { height: 44px !important; } } @media (max-width: 640px) { .erp-body .form-input, .erp-body .form-dropdown-btn, .erp-body .form-control, .erp-body .form-select, .erp-body input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]), .erp-body select { height: 42px !important; } } /* Events modal select fix: prevent the global select SVG from repeating. */ .erp-body .events-modal-select-wrap { position: relative !important; display: block !important; width: 100% !important; } .erp-body .events-modal-select-wrap::after { content: "" !important; position: absolute !important; right: 1rem !important; top: 50% !important; width: .58rem !important; height: .58rem !important; border-right: 2px solid #94a3b8 !important; border-bottom: 2px solid #94a3b8 !important; transform: translateY(-65%) rotate(45deg) !important; pointer-events: none !important; z-index: 2 !important; } .erp-body .events-modal-select-wrap:focus-within::after { border-color: #60a5fa !important; } .erp-body select.events-modal-select, .erp-body .form-grid select.events-modal-select, html.dark .erp-body select.events-modal-select, html.dark .erp-body .form-grid select.events-modal-select { display: block !important; width: 100% !important; min-width: 0 !important; padding-right: 2.75rem !important; appearance: none !important; -webkit-appearance: none !important; -moz-appearance: none !important; background-image: none !important; background-repeat: no-repeat !important; background-position: initial !important; background-size: auto !important; } .erp-body select.events-modal-select:focus, .erp-body .form-grid select.events-modal-select:focus, html.dark .erp-body select.events-modal-select:focus, html.dark .erp-body .form-grid select.events-modal-select:focus { background-image: none !important; background-repeat: no-repeat !important; background-position: initial !important; background-size: auto !important; } /* ===== PROJECT-WIDE ARROW ALIGNMENT ===== */ .erp-body .form-dropdown-btn, .erp-body .erp-custom-select-btn { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 0 !important; padding-left: 16px !important; padding-right: 14px !important; text-align: left !important; } .erp-body .form-dropdown-btn > .truncate, .erp-body .erp-custom-select-btn > .truncate, .erp-body .form-dropdown-btn > div:first-child { flex: 1 1 auto; min-width: 0; padding-right: 12px; text-align: left; } .erp-body .form-dropdown-btn .dropdown-arrow, .erp-body .form-dropdown-btn .select-chevron, .erp-body .erp-custom-select-btn .dropdown-arrow, .erp-body .erp-custom-select-btn .select-chevron { display: block !important; width: 1rem !important; height: 1rem !important; min-width: 1rem !important; max-width: 1rem !important; max-height: 1rem !important; margin: 0 !important; padding: 0 !important; flex: 0 0 1rem !important; align-self: center; transform-origin: center; pointer-events: none; } .erp-body .nav-group-toggle { display: flex !important; align-items: center !important; gap: .7rem !important; padding-right: .8rem !important; } .erp-body .nav-group-toggle > span { flex: 1 1 auto; min-width: 0; } .erp-body .nav-group-toggle .nav-chevron { display: block; width: .9rem !important; height: .9rem !important; min-width: .9rem !important; max-width: .9rem !important; max-height: .9rem !important; margin: 0 0 0 .35rem !important; padding: 0 !important; flex: 0 0 .9rem !important; align-self: center; transform-origin: center; } .erp-body .sort-btn { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: .45rem !important; line-height: 1.2; } .erp-body .sort-btn svg { width: .8rem !important; height: .8rem !important; min-width: .8rem; margin: 0 !important; flex: 0 0 .8rem; align-self: center; } .erp-body .cal-nav-btn, .erp-body .cal-nav-sm, .erp-body .erp-pg-arrow { display: inline-grid !important; place-items: center !important; padding: 0 !important; line-height: 1 !important; } .erp-body .cal-nav-btn svg, .erp-body .cal-nav-sm svg, .erp-body .erp-pg-arrow svg { display: block !important; margin: 0 !important; flex: 0 0 auto; } .erp-body .erp-pg-mobile .erp-pg-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: .45rem; padding-inline: .75rem !important; } .erp-body .btn-dark, .erp-body .btn-gold, .erp-body .btn-outline, .erp-body .btn-primary, .erp-body .btn-secondary { align-items: center; gap: .5rem; } .erp-body .btn-dark > svg, .erp-body .btn-gold > svg, .erp-body .btn-outline > svg, .erp-body .btn-primary > svg, .erp-body .btn-secondary > svg { margin: 0 !important; flex: 0 0 auto; align-self: center; } /* ===== PROJECT-WIDE ARROW ALIGNMENT END ===== */ /* ===== PROJECT-WIDE TEXTAREA INPUT CONSISTENCY START ===== */ .erp-body textarea, .erp-body .form-textarea, .erp-body .wi-textarea, .erp-body .settings-textarea { width: 100% !important; min-height: 5.25rem !important; padding: 0.75rem 1rem !important; border: 1px solid var(--theme-input-border) !important; border-radius: 12px !important; background: var(--theme-input-bg) !important; background-color: var(--theme-input-bg) !important; color: var(--theme-text-primary, var(--erp-input-text)) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important; font-family: inherit !important; font-size: 0.875rem !important; line-height: 1.45 !important; resize: vertical; vertical-align: top !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important; } .erp-body textarea:hover, .erp-body .form-textarea:hover, .erp-body .wi-textarea:hover, .erp-body .settings-textarea:hover { background: var(--theme-input-hover-bg) !important; background-color: var(--theme-input-hover-bg) !important; border-color: var(--theme-input-border-hover) !important; } .erp-body textarea:focus, .erp-body .form-textarea:focus, .erp-body .wi-textarea:focus, .erp-body .settings-textarea:focus { outline: none !important; background: var(--theme-input-bg) !important; background-color: var(--theme-input-bg) !important; border-color: var(--theme-input-border-focus) !important; box-shadow: 0 0 0 3px rgba(61, 183, 233, 0.15) !important; } .erp-body textarea::placeholder, .erp-body .form-textarea::placeholder, .erp-body .wi-textarea::placeholder, .erp-body .settings-textarea::placeholder { color: var(--theme-text-placeholder) !important; opacity: 0.8 !important; } .erp-body textarea:disabled, .erp-body .form-textarea:disabled, .erp-body .wi-textarea:disabled, .erp-body .settings-textarea:disabled, .erp-body textarea[readonly], .erp-body .form-textarea[readonly], .erp-body .wi-textarea[readonly], .erp-body .settings-textarea[readonly] { background: var(--theme-input-disabled-bg, var(--theme-input-bg)) !important; background-color: var(--theme-input-disabled-bg, var(--theme-input-bg)) !important; cursor: not-allowed !important; opacity: 0.6 !important; } /* ===== PROJECT-WIDE TEXTAREA INPUT CONSISTENCY END ===== */ /* ===== INVENTORY INPUT STYLE NORMALIZATION START ===== */ .erp-body .inventory-layout .form-input, .erp-body .inventory-layout .form-dropdown-btn, .erp-body .inventory-layout .filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]), .erp-body .inventory-layout .bk-filter-search-col input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]), .erp-body .inv-add-page .form-input, .erp-body .inv-add-page .form-dropdown-btn, .erp-body .inv-add-page .form-textarea, .erp-body .inventory-movement-page .form-input, .erp-body .inventory-movement-page .form-dropdown-btn, .erp-body .inventory-movement-page .form-textarea, .erp-body .inventory-movement-page .filter-bar input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]):not([type="color"]):not([type="file"]) { width: 100% !important; height: 48px !important; min-height: 48px !important; padding: 12px 16px !important; border: 1px solid var(--theme-input-border) !important; border-radius: 12px !important; background: var(--theme-input-bg) !important; background-color: var(--theme-input-bg) !important; color: var(--theme-text-primary) !important; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important; font-size: 0.875rem !important; font-family: inherit !important; line-height: 1.25 !important; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease !important; } .erp-body .inventory-layout .form-dropdown-btn, .erp-body .inv-add-page .form-dropdown-btn, .erp-body .inventory-movement-page .form-dropdown-btn { display: flex !important; align-items: center !important; justify-content: flex-start !important; padding-right: 14px !important; } .erp-body .inventory-layout .form-textarea, .erp-body .inv-add-page .form-textarea, .erp-body .inventory-movement-page .form-textarea { height: auto !important; min-height: 5.25rem !important; line-height: 1.45 !important; resize: vertical; } .erp-body .inventory-layout .form-input:hover, .erp-body .inventory-layout .form-dropdown-btn:hover, .erp-body .inventory-layout .filter-bar input:hover, .erp-body .inventory-layout .bk-filter-search-col input:hover, .erp-body .inv-add-page .form-input:hover, .erp-body .inv-add-page .form-dropdown-btn:hover, .erp-body .inv-add-page .form-textarea:hover, .erp-body .inventory-movement-page .form-input:hover, .erp-body .inventory-movement-page .form-dropdown-btn:hover, .erp-body .inventory-movement-page .form-textarea:hover, .erp-body .inventory-movement-page .filter-bar input:hover { background: var(--theme-input-hover-bg) !important; background-color: var(--theme-input-hover-bg) !important; border-color: var(--theme-input-border-hover) !important; } .erp-body .inventory-layout .form-input:focus, .erp-body .inventory-layout .filter-bar input:focus, .erp-body .inventory-layout .bk-filter-search-col input:focus, .erp-body .inv-add-page .form-input:focus, .erp-body .inv-add-page .form-textarea:focus, .erp-body .inventory-movement-page .form-input:focus, .erp-body .inventory-movement-page .form-textarea:focus, .erp-body .inventory-movement-page .filter-bar input:focus, .erp-body .inventory-layout .form-dropdown-btn.is-open, .erp-body .inv-add-page .form-dropdown-btn.is-open, .erp-body .inventory-movement-page .form-dropdown-btn.is-open { outline: none !important; background: var(--theme-input-bg) !important; background-color: var(--theme-input-bg) !important; border-color: var(--theme-input-border-focus) !important; box-shadow: 0 0 0 3px rgba(61, 183, 233, 0.15) !important; } .erp-body .inventory-layout .form-input::placeholder, .erp-body .inventory-layout .filter-bar input::placeholder, .erp-body .inventory-layout .bk-filter-search-col input::placeholder, .erp-body .inv-add-page .form-input::placeholder, .erp-body .inv-add-page .form-textarea::placeholder, .erp-body .inventory-movement-page .form-input::placeholder, .erp-body .inventory-movement-page .form-textarea::placeholder, .erp-body .inventory-movement-page .filter-bar input::placeholder { color: var(--theme-text-placeholder) !important; opacity: 0.8 !important; } /* ===== INVENTORY INPUT STYLE NORMALIZATION END ===== */ /* ===== REPORTS DASHBOARD STRUCTURE REFRESH START ===== */ .rep-page { display: grid; gap: 1rem; } .rep-page .rep-header { align-items: flex-start !important; gap: 1rem !important; margin-bottom: 0 !important; } .rep-page .rep-header h2 { font-size: 1.15rem !important; line-height: 1.25 !important; } .rep-page .rep-header p { line-height: 1.45 !important; } .rep-page .report-filter-control, .rep-page .rep-chart-pill { min-height: 2.45rem !important; border-radius: .45rem !important; } .rep-page .rep-metrics-grid { gap: .75rem !important; margin-bottom: 0 !important; } .rep-page .rep-metric-card { min-height: 5.6rem; padding: .95rem 1rem !important; border-radius: .45rem !important; gap: .8rem !important; } .rep-page .rep-metric-card .metric-icon { width: 2.7rem; height: 2.7rem; border-radius: 50%; } .rep-page .rep-metric-card > div > strong { font-size: 1.35rem !important; line-height: 1.1 !important; } .rep-dashboard-grid { display: grid !important; gap: .85rem !important; margin-bottom: 0 !important; } .rep-page-overview .rep-dashboard-grid { grid-template-columns: repeat(12, minmax(0, 1fr)) !important; } .rep-page-overview .rep-dashboard-grid > .rep-chart-card:nth-child(1) { grid-column: span 5; } .rep-page-overview .rep-dashboard-grid > .rep-chart-card:nth-child(2) { grid-column: span 3; } .rep-page-overview .rep-dashboard-grid > .rep-chart-card:nth-child(3) { grid-column: span 4; } .rep-page-overview .rep-dashboard-grid > .rep-chart-card:nth-child(n+4) { grid-column: span 4; } .rep-page-bookings .rep-dashboard-grid, .rep-page-billing .rep-dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .rep-page-bookings .rep-dashboard-grid > .rep-chart-card, .rep-page-billing .rep-dashboard-grid > .rep-chart-card { grid-column: span 1; } .rep-page .rep-chart-card { padding: 1.15rem 1.25rem !important; border-radius: .55rem !important; min-width: 0; } .rep-page .rep-chart-card h3 { font-size: .98rem !important; line-height: 1.3 !important; } .rep-page .rep-chart-plot { grid-template-columns: 3rem minmax(0, 1fr) !important; gap: .6rem !important; align-items: stretch; } .rep-page .rep-line-chart, .rep-page .rep-bar-group-chart, .rep-page .rep-bar-group-chart-axis { height: 12rem !important; } .rep-page .rep-x-axis { margin-top: .55rem !important; font-size: .72rem !important; } .rep-page .rep-y-axis { font-size: .72rem !important; padding-bottom: 1.8rem !important; } .rep-page .rep-donut-wrap { width: 9.5rem !important; height: 9.5rem !important; } .rep-page .rep-donut-center { background: var(--erp-surface, var(--theme-bg-card, #fff)) !important; } .rep-page .rep-donut-legend-side li { grid-template-columns: auto minmax(0, 1fr) auto !important; gap: .45rem .65rem !important; } .rep-service-card .grid { grid-template-columns: minmax(5.8rem, .9fr) minmax(0, 1.45fr) auto auto !important; gap: .65rem !important; } .rep-service-card .h-2 { height: .34rem !important; background: color-mix(in srgb, var(--erp-muted-2, #94a3b8) 22%, transparent) !important; } .rep-table-card { display: flex; flex-direction: column; } .rep-table-card .rep-mini-table-wrap { flex: 1 1 auto; } .rep-page .rep-mini-table { min-width: 32rem; } .rep-page .rep-mini-table th, .rep-page .rep-mini-table td { padding: .7rem .6rem !important; } .rep-page .rep-view-all { text-align: left !important; margin-top: .9rem !important; } .rep-page-overview .rep-legacy-bottom-grid, .rep-page-bookings .rep-legacy-bottom-grid, .rep-page-billing .rep-legacy-bottom-grid { display: none !important; } @media (max-width: 1279px) { .rep-page-overview .rep-dashboard-grid, .rep-page-bookings .rep-dashboard-grid, .rep-page-billing .rep-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .rep-page-overview .rep-dashboard-grid > .rep-chart-card, .rep-page-bookings .rep-dashboard-grid > .rep-chart-card, .rep-page-billing .rep-dashboard-grid > .rep-chart-card { grid-column: span 1 !important; } } @media (max-width: 760px) { .rep-page .rep-header { flex-direction: column !important; align-items: stretch !important; } .rep-page .rep-header > div:last-child { width: 100% !important; } .rep-page .rep-header .btn-outline, .rep-page .rep-header .btn-dark, .rep-page .rep-header .dropdown-wrap { width: 100% !important; } .rep-page-overview .rep-dashboard-grid, .rep-page-bookings .rep-dashboard-grid, .rep-page-billing .rep-dashboard-grid { grid-template-columns: minmax(0, 1fr) !important; } .rep-page .rep-chart-card { padding: .95rem !important; } .rep-page .rep-chart-plot { grid-template-columns: 2.35rem minmax(0, 1fr) !important; } .rep-page .rep-line-chart, .rep-page .rep-bar-group-chart, .rep-page .rep-bar-group-chart-axis { height: 10rem !important; } .rep-service-card .grid { grid-template-columns: minmax(0, 1fr) auto !important; } .rep-service-card .h-2 { grid-column: 1 / -1; order: 3; } } /* ===== REPORTS DASHBOARD STRUCTURE REFRESH END ===== */ /* ===== REPORTS SVG ICON STYLE START ===== */ .rep-page .rep-svg-icon, .rep-page .metric-icon svg, .rep-page .report-filter-control svg, .rep-page .rep-info-icon svg { stroke-width: 1.85 !important; vector-effect: non-scaling-stroke; } .erp-sidebar .nav-link-active .rep-nav-icon, .erp-sidebar .nav-group-toggle .rep-nav-icon { stroke-width: 1.85 !important; vector-effect: non-scaling-stroke; } /* ===== REPORTS SVG ICON STYLE END ===== */ /* ===== REPORT WIDGET TEXT OVERFLOW FIXES START ===== */ .rep-page .rep-donut-wrap { max-width: 100%; } .rep-page .rep-donut-legend { min-width: 0 !important; max-width: 100% !important; overflow: hidden; } .rep-page .rep-donut-legend-side { width: 100% !important; } .rep-page .rep-donut-legend-side li { grid-template-columns: .7rem minmax(0, 1fr) auto !important; column-gap: .55rem !important; row-gap: .12rem !important; min-width: 0 !important; max-width: 100% !important; } .rep-page .rep-donut-legend i { align-self: center !important; margin: 0 !important; } .rep-page .rep-legend-label { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .rep-page .rep-legend-meta { justify-self: end !important; max-width: 7.5rem !important; overflow: hidden !important; text-align: right !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .rep-page .rep-service-card .grid { grid-template-columns: minmax(5rem, .8fr) minmax(4rem, 1fr) minmax(5.8rem, auto) minmax(2.6rem, auto) !important; min-width: 0 !important; width: 100% !important; } .rep-page .rep-service-card .grid > span { min-width: 0 !important; } .rep-page .rep-service-card .grid > span:first-child { overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .rep-page .rep-service-card .grid > span:nth-child(3) { justify-self: end !important; max-width: 7.25rem !important; overflow: hidden !important; text-align: right !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .rep-page .rep-service-card .grid > span:nth-child(4) { justify-self: end !important; max-width: 3.75rem !important; overflow: hidden !important; text-align: right !important; text-overflow: ellipsis !important; white-space: nowrap !important; } .rep-page .rep-service-card .h-2 { min-width: 0 !important; } @media (max-width: 1320px) { .rep-page .rep-donut-legend-side li { grid-template-columns: .7rem minmax(0, 1fr) !important; } .rep-page .rep-legend-meta { grid-column: 2; justify-self: start !important; max-width: 100% !important; text-align: left !important; } .rep-page .rep-service-card .grid { grid-template-columns: minmax(0, 1fr) auto !important; gap: .35rem .75rem !important; } .rep-page .rep-service-card .grid > .h-2 { grid-column: 1 / -1; order: 3; } .rep-page .rep-service-card .grid > span:nth-child(3) { max-width: 8.5rem !important; } .rep-page .rep-service-card .grid > span:nth-child(4) { grid-column: 2; justify-self: end !important; } } @media (max-width: 760px) { .rep-page .rep-donut-legend-side li { grid-template-columns: .7rem minmax(0, 1fr) auto !important; } .rep-page .rep-legend-meta { grid-column: 3; justify-self: end !important; max-width: 7rem !important; text-align: right !important; } } @media (max-width: 420px) { .rep-page .rep-donut-legend-side li { grid-template-columns: .7rem minmax(0, 1fr) !important; } .rep-page .rep-legend-meta { grid-column: 2; justify-self: start !important; max-width: 100% !important; text-align: left !important; } } /* ===== REPORT WIDGET TEXT OVERFLOW FIXES END ===== */ /* ===== RESPONSIVE OVERRIDES START ===== */ /* Table min-width overrides — let wrappers scroll instead of breaking layout */ @media (max-width: 1024px) { .room-reservations-table-wrap { overflow-x: auto !important; } .room-reservations-table { min-width: auto !important; width: 100% !important; } .room-reservations-table th:last-child, .room-reservations-table td:last-child { min-width: auto !important; } .dash-table-scroll .dash-recent-table { min-width: auto !important; } .dash-recent-table { min-width: auto !important; } .dash-upcoming-table-wrap { overflow-x: auto !important; } .dash-upcoming-table { min-width: auto !important; width: 100% !important; } .ur-perm-table-wrap { overflow-x: auto !important; } .ur-perm-matrix { min-width: auto !important; width: 100% !important; } .bk-grid-content { min-width: auto !important; } .bk-sidebar { min-width: auto !important; } .activity-detail-props-table { min-width: auto !important; width: 100% !important; } .cal-grid-v2 { min-width: auto !important; } .cal-week-grid { min-width: auto !important; } .cal-time-labels { min-width: auto !important; } } /* Page header row — wrap on smaller screens */ @media (max-width: 768px) { .page-header-row { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } .page-header-row .btn-dark, .page-header-row .btn-outline, .page-header-row .btn-gold, .page-header-row a[style*="inline-flex"], .page-header-row button[style*="inline-flex"] { flex-shrink: 0 !important; width: auto !important; } } @media (max-width: 480px) { .page-header-row { margin-bottom: 0.75rem !important; } .page-title { font-size: 1.15rem !important; } } /* Booking filter row — stack columns */ @media (max-width: 1024px) { .bk-filter-search-col { width: 100% !important; } } @media (max-width: 768px) { .bk-filter-row { flex-direction: column !important; align-items: stretch !important; } .bk-filter-search-col, .bk-filter-labeled-col, .bk-filter-btn-col { width: 100% !important; min-width: 100% !important; } } /* Action menu wrap — prevent overflow */ .bk-action-menu-wrap { flex-wrap: wrap !important; overflow: hidden !important; } /* Dashboard grids */ @media (max-width: 768px) { .dash-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .dash-main-grid { grid-template-columns: minmax(0, 1fr) !important; } .dash-main-grid > .dash-sidebar { margin-left: 0 !important; } .dash-headline { flex-direction: column !important; align-items: flex-start !important; } .dash-headline p { margin-top: 0.25rem !important; } .dash-stat-row { flex-direction: column !important; gap: 0.75rem !important; } } @media (max-width: 480px) { .dash-metric-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 640px) { .dash-widget-row { flex-direction: column !important; } .dash-widget-row .erp-card { min-width: 0 !important; width: 100% !important; } .dash-quick-actions { flex-wrap: wrap !important; gap: 0.5rem !important; } } /* Card padding — consistent across all cards */ @media (max-width: 768px) { .erp-card { padding: 1.25rem !important; } } @media (max-width: 480px) { .erp-card { padding: 1rem !important; } } /* Modal base styles */ .modal-backdrop { position: fixed !important; inset: 0 !important; background: rgba(0,0,0,.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; z-index: 50 !important; overflow-y: auto !important; padding: 1rem !important; } .modal-content { width: 100% !important; max-width: 44rem !important; padding: 1.5rem !important; margin: auto !important; } .modal-header { margin-bottom: 1.25rem !important; } .modal-header h3 { margin: 0 !important; font-size: 1.15rem !important; } .modal-body { display: flex !important; flex-direction: column !important; gap: 1rem !important; margin-bottom: 1.5rem !important; } .modal-footer { display: flex !important; justify-content: flex-end !important; gap: 1rem !important; } .modal-footer .btn-dark, .modal-footer .btn-outline { flex-shrink: 0 !important; } /* Checkbox label inside form grids */ .checkbox-label { display: flex !important; align-items: center !important; gap: .5rem !important; cursor: pointer !important; } .room-active-checkbox { align-self: end !important; min-height: 2.75rem !important; line-height: 1.2 !important; font-size: .86rem !important; font-weight: 600 !important; color: var(--erp-text) !important; } .room-active-checkbox input[type="checkbox"] { appearance: auto !important; -webkit-appearance: checkbox !important; flex: 0 0 auto !important; width: 1rem !important; height: 1rem !important; min-width: 1rem !important; max-width: 1rem !important; padding: 0 !important; margin: 0 !important; border-radius: .2rem !important; } .room-active-checkbox span { display: inline-flex !important; align-items: center !important; min-height: 1rem !important; } /* Modal responsive sizing */ @media (max-width: 768px) { .modal-content { max-width: 92vw !important; padding: 1.25rem !important; } .modal-header { flex-wrap: wrap !important; gap: 0.5rem !important; } .modal-header .close, .modal-header button[data-dismiss="modal"] { position: absolute !important; top: 0.75rem !important; right: 0.75rem !important; } .modal-body { max-height: 60vh !important; overflow-y: auto !important; } .modal-footer { flex-wrap: wrap !important; gap: 0.5rem !important; } .modal-footer .btn-dark, .modal-footer .btn-outline { flex: 1 1 auto !important; } } /* Form grids */ @media (max-width: 1024px) { .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { .form-grid.two { grid-template-columns: minmax(0, 1fr) !important; } .form-grid.two > [style*="grid-column: span 2"], .form-grid.two > [style*="grid-column:span 2"] { grid-column: span 1 !important; } } @media (max-width: 640px) { .form-grid.three { grid-template-columns: minmax(0, 1fr) !important; } .form-grid.three > [style*="grid-column: span"] { grid-column: span 1 !important; } } /* Sidebar grid column — use minmax(0,1fr) for consistent main content width */ .erp-shell .erp-sidebar-col { min-width: 0 !important; } .erp-shell main, .erp-shell > div:not(.erp-sidebar) { min-width: 0 !important; } /* Booking detail responsive */ @media (max-width: 768px) { .bk-detail-hero { flex-direction: column !important; gap: 0.75rem !important; } .bk-detail-toolbar { flex-direction: column !important; align-items: stretch !important; gap: 0.5rem !important; } .bk-detail-tabs-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } .bk-detail-tabs-content { padding: 1rem !important; } .bk-with-lg-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 480px) { .bk-filter-card { padding: 0.75rem !important; } } /* Booking card table wrapper overflow */ .bk-card-table { overflow-x: auto !important; } /* Halls stats & amenities */ @media (max-width: 480px) { .halls-stats-row { grid-template-columns: minmax(0, 1fr) !important; } .halls-amenities-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Inventory responsive */ @media (max-width: 480px) { .inv-stats-grid { grid-template-columns: minmax(0, 1fr) !important; } .inv-sidebar-inner { flex-direction: column !important; } .low-stock-item { min-width: 0 !important; } } /* Dropdown / select / calendar overflow */ .erp-custom-select-wrapper { max-width: 100% !important; } .dropdown-menu, .bk-dropdown-menu { right: 0 !important; left: auto !important; max-width: calc(100vw - 1rem) !important; } .flatpickr-calendar { font-size: 0.82rem !important; } @media (max-width: 480px) { .flatpickr-calendar { width: 100% !important; max-width: 18rem !important; font-size: 0.75rem !important; } } /* Multi-select chip tags — wrap */ .mcb-selected { flex-wrap: wrap !important; } /* Form rows */ @media (max-width: 640px) { .form-row-eq2 { flex-direction: column !important; } } /* Room reservations header */ @media (max-width: 768px) { .room-reservations-header { flex-direction: column !important; align-items: flex-start !important; gap: 0.75rem !important; } } /* Users & Roles layout */ @media (max-width: 1024px) { .ur-layout { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 768px) { .ur-page-section { flex-direction: column !important; } .permission-panel-wrap { overflow-x: auto !important; } } /* Wizard / stepper */ .wr-stepper-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; } @media (max-width: 768px) { .wr-room-list { flex-direction: column !important; } } @media (max-width: 640px) { .wr-summary-cards { flex-direction: column !important; } } /* Calendar agenda */ @media (max-width: 768px) { .ca-toolbar { flex-wrap: wrap !important; gap: 0.5rem !important; } .ca-toolbar .ca-filters { flex-direction: column !important; width: 100% !important; } .ca-weekHeaderGrid { overflow-x: auto !important; } } /* Expenses & advance receipt layouts */ @media (max-width: 1024px) { .expenses-creation-layout { grid-template-columns: minmax(0, 1fr) !important; } .expenses-creation-form-sidebar { width: 100% !important; } .adv-receipt-layout { grid-template-columns: minmax(0, 1fr) !important; } } /* Settings */ .settings-content-inner { min-width: 0 !important; overflow-x: auto !important; } /* Global misc overrides */ @media (max-width: 768px) { .erp-footer { font-size: 0.72rem !important; padding: 0.85rem !important; } .topbar-right { display: none !important; } .topbar-mid { flex: 1 !important; min-width: 0 !important; } .sidebar-toggle { flex: 0 0 auto !important; } .profile-dropdown { right: 0 !important; left: auto !important; min-width: 14rem !important; } .topbar-search input { max-width: 12rem !important; } .back-link { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; max-width: 8rem !important; } .erp-flash-messages { flex-direction: column !important; gap: 0.5rem !important; } .erp-flash-messages .flash-item { width: 100% !important; } .btn-dark, .btn-outline, .btn-gold { min-height: 2.4rem !important; padding: 0 1rem !important; font-size: 0.8rem !important; } .pagination, nav[role="navigation"] { flex-wrap: wrap !important; gap: 0.35rem !important; } .pagination a, .pagination span, nav[role="navigation"] a, nav[role="navigation"] span { min-width: 2rem !important; padding: 0.3rem 0.5rem !important; font-size: 0.78rem !important; } .cell-actions { flex-wrap: wrap !important; gap: 0.35rem !important; } .stat-value { font-size: 1.25rem !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } } @media (max-width: 480px) { .topbar-search input { max-width: 8rem !important; font-size: 0.8rem !important; } } @media (max-width: 640px) { svg:not([class*="max-w-none"]):not([class*="max-h-none"]):not(.fc-sparkline svg):not(.rep-line-chart svg):not(.rep-info-icon svg):not(.occ-ring-svg) { max-width: 1rem !important; max-height: 1rem !important; } } /* ===== TOAST SUCCESS START ===== */ .erp-toast-success { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 9999; display: flex; align-items: center; justify-content: center; gap: 0.9rem; min-width: min(34rem, calc(100vw - 2rem)); min-height: 5rem; padding: 1.1rem 1.6rem; background: var(--erp-surface, #fff); border: 1px solid rgba(34, 197, 94, .25); border-radius: 0.8rem; box-shadow: 0 18px 52px rgba(15, 23, 42, .2); color: var(--erp-text, #0f172a); font-size: 1rem; font-weight: 700; line-height: 1.35; text-align: center; pointer-events: none; animation: erpToastFade 3.5s ease-in-out both; max-width: calc(100vw - 2rem); } .erp-toast-success-icon { width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border-radius: 999px; background: linear-gradient(135deg, #22c55e, #16a34a); color: #fff; flex: 0 0 auto; } .erp-toast-success-icon svg { width: 1.35rem; height: 1.35rem; max-width: none !important; max-height: none !important; } html.dark .erp-toast-success { background: var(--erp-surface, var(--theme-bg-card, #1e293b)); border-color: rgba(34, 197, 94, .25); box-shadow: 0 12px 40px rgba(2, 6, 23, .28); color: var(--erp-text, var(--theme-text-primary, #f8fafc)); } @keyframes erpToastFade { 0% { opacity: 0; transform: translate(-50%, calc(-50% - 0.5rem)) scale(0.96); } 10% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, calc(-50% - 0.4rem)) scale(0.96); } } /* ===== TOAST SUCCESS END ===== */ /* ===== COLLAPSED SIDEBAR COMPACT FIX START ===== */ @media (min-width: 1024px) { .erp-shell.collapsed { grid-template-columns: 5rem minmax(0, 1fr) !important; } .erp-sidebar.collapsed { width: 5rem !important; min-width: 5rem !important; max-width: 5rem !important; overflow-x: visible !important; } .erp-sidebar.collapsed > div { width: 5rem !important; padding-left: .65rem !important; padding-right: .65rem !important; overflow: visible !important; } .erp-sidebar.collapsed .sidebar-brand { width: 100% !important; min-height: 5.25rem !important; height: 5.25rem !important; padding: .75rem 0 !important; overflow: hidden !important; } .erp-sidebar.collapsed .sidebar-brand img, .erp-sidebar.collapsed .sidebar-brand svg { width: 3rem !important; min-width: 0 !important; max-width: 3rem !important; height: auto !important; max-height: 3rem !important; object-fit: contain !important; } .erp-sidebar.collapsed .erp-nav { width: 100% !important; overflow: visible !important; } .erp-sidebar.collapsed .nav-group, .erp-sidebar.collapsed form { width: 100% !important; overflow: visible !important; position: relative !important; } .erp-sidebar.collapsed .nav-link, .erp-sidebar.collapsed .nav-group-toggle, .erp-sidebar.collapsed .sidebar-toggle-btn, .erp-sidebar.collapsed #sidebar-collapse-btn { width: 100% !important; min-width: 0 !important; max-width: 100% !important; min-height: 2.75rem !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; padding: 0 !important; margin-left: 0 !important; margin-right: 0 !important; overflow: visible !important; position: relative !important; text-align: center !important; } .erp-sidebar.collapsed .nav-link > svg, .erp-sidebar.collapsed .nav-group-toggle > svg, .erp-sidebar.collapsed .sidebar-toggle-btn > svg, .erp-sidebar.collapsed #sidebar-collapse-btn > svg { width: 1.15rem !important; height: 1.15rem !important; max-width: 1.15rem !important; max-height: 1.15rem !important; margin: 0 !important; flex: 0 0 auto !important; transform: none !important; } .erp-sidebar.collapsed .nav-chevron { display: none !important; } .erp-sidebar.collapsed .nav-sub, .erp-sidebar.collapsed .nav-sub.open, .erp-sidebar.collapsed .nav-group:hover .nav-sub, .erp-sidebar.collapsed .nav-group:focus-within .nav-sub { display: none !important; visibility: hidden !important; opacity: 0 !important; pointer-events: none !important; } .erp-sidebar.collapsed .nav-link > span, .erp-sidebar.collapsed .nav-group-toggle > span, .erp-sidebar.collapsed .sidebar-toggle-btn > span { position: absolute !important; left: calc(100% + .65rem) !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 90 !important; display: block !important; width: max-content !important; max-width: 16rem !important; padding: .42rem .7rem !important; border-radius: .42rem !important; background: #0f1c2e !important; color: #fff !important; box-shadow: 0 8px 22px rgba(0,0,0,.32) !important; font-size: .8rem !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; overflow: visible !important; transition: opacity .15s ease, visibility .15s ease !important; } .erp-sidebar.collapsed .nav-link > span::before, .erp-sidebar.collapsed .nav-group-toggle > span::before, .erp-sidebar.collapsed .sidebar-toggle-btn > span::before { content: '' !important; position: absolute !important; right: 100% !important; top: 50% !important; transform: translateY(-50%) !important; border: 5px solid transparent !important; border-right-color: #0f1c2e !important; display: block !important; } .erp-sidebar.collapsed .nav-link:hover > span, .erp-sidebar.collapsed .nav-link:focus-visible > span, .erp-sidebar.collapsed .nav-group-toggle:hover > span, .erp-sidebar.collapsed .nav-group-toggle:focus-visible > span, .erp-sidebar.collapsed .sidebar-toggle-btn:hover > span, .erp-sidebar.collapsed .sidebar-toggle-btn:focus-visible > span { opacity: 1 !important; visibility: visible !important; } .erp-sidebar.collapsed #sidebar-collapse-btn { border-color: rgba(255,255,255,.75) !important; overflow: hidden !important; } .erp-sidebar.collapsed #sidebar-collapse-btn > span, .erp-sidebar.collapsed #sidebar-collapse-btn > span::before { display: none !important; } } /* ===== COLLAPSED SIDEBAR COMPACT FIX END ===== */ /* ===== MONTHLY EXPENSE TRACKING SELECT FIX START ===== */ .monthly-expense-period-controls { align-items: center; flex: 0 0 auto; } .expense-report-page .monthly-expense-period-controls .erp-custom-select-wrapper { width: auto !important; flex: 0 0 auto !important; } .expense-report-page .monthly-expense-month-select, .expense-report-page .monthly-expense-year-select { min-height: 3rem !important; height: 3rem !important; display: inline-flex !important; align-items: center !important; justify-content: space-between !important; padding-top: 0 !important; padding-bottom: 0 !important; line-height: 1.2 !important; overflow: visible !important; } .expense-report-page .monthly-expense-month-select { min-width: 5.4rem !important; width: 5.4rem !important; } .expense-report-page .monthly-expense-year-select { min-width: 5.8rem !important; width: 5.8rem !important; } .expense-report-page .monthly-expense-month-select > div, .expense-report-page .monthly-expense-year-select > div { min-width: 0 !important; overflow: visible !important; text-overflow: clip !important; white-space: nowrap !important; line-height: 1.2 !important; } /* ===== MONTHLY EXPENSE TRACKING SELECT FIX END ===== */ /* ===== ROOM RESERVATION WIZARD MOBILE FIX START ===== */ .room-wizard-page { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } .room-wizard-page form { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } .room-wizard-page *, .room-wizard-page *::before, .room-wizard-page *::after { max-width: 100%; box-sizing: border-box; } .room-wizard-card { width: 100%; min-width: 0; overflow: hidden; } .room-wizard-stepper-card { width: 100%; max-width: 100%; min-width: 0; overflow: hidden; } @media (max-width: 640px) { .erp-body main:has(.room-wizard-page), .erp-body main:has(.room-wizard-page) > section.p-5 { width: 100% !important; max-width: 100vw !important; min-width: 0 !important; overflow-x: hidden !important; } .erp-body main:has(.room-wizard-page) > section.p-5 { padding-left: .75rem !important; padding-right: .75rem !important; } .room-wizard-stepper-card { padding: .75rem !important; margin-bottom: 1rem !important; } .room-wizard-stepper-grid { display: flex !important; grid-template-columns: none !important; gap: .75rem !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; overflow-x: auto; overflow-y: hidden; padding: .1rem .15rem .45rem; scroll-snap-type: x proximity; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .room-wizard-stepper-grid::-webkit-scrollbar { height: .35rem; } .room-wizard-stepper-grid::-webkit-scrollbar-thumb { background: var(--theme-input-border); border-radius: 999px; } .room-wizard-step { flex: 0 0 auto; min-width: 7.25rem; gap: .55rem !important; scroll-snap-align: start; } .room-wizard-step-number { width: 2.2rem !important; height: 2.2rem !important; min-width: 2.2rem !important; font-size: .9rem; } .room-wizard-step-label { font-size: .9rem; line-height: 1.25; white-space: normal; } .room-wizard-step-line { display: none !important; } .room-wizard-card { width: 100%; min-width: 0; padding: 1rem !important; overflow: hidden; } .room-wizard-card h3 { margin-top: 0; font-size: 1rem; line-height: 1.3; } .room-wizard-search, .room-wizard-summary { padding: .85rem !important; margin-bottom: 1rem !important; overflow: hidden; } .room-wizard-page .form-grid, .room-wizard-page .form-grid.two { grid-template-columns: minmax(0, 1fr) !important; gap: 1rem !important; } .room-wizard-page label { min-width: 0; } .room-wizard-page input, .room-wizard-page select, .room-wizard-page textarea, .room-wizard-page .form-input, .room-wizard-page .form-dropdown-btn, .room-wizard-page .erp-custom-select-wrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .room-wizard-room-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: .75rem !important; } .room-wizard-room-option { width: 100%; min-width: 0; padding: .85rem !important; gap: .75rem !important; } .room-wizard-actions { display: flex !important; flex-wrap: wrap; gap: .75rem; justify-content: stretch !important; text-align: left !important; margin-top: 1.25rem !important; } .room-wizard-actions .btn-outline, .room-wizard-actions .btn-dark, .room-wizard-actions button { flex: 1 1 100%; width: 100%; justify-content: center; } } /* ===== ROOM RESERVATION WIZARD MOBILE FIX END ===== */ /* ===== ADVANCE RECEIPT RESPONSIVE FIX START ===== */ /* ===== ADVANCE RECEIPT RESPONSIVE FIX START ===== */ .erp-body main:has(.advance-receipt-page), .erp-body main:has(.advance-receipt-page) > section.p-5 { min-width: 0 !important; max-width: 100% !important; overflow-x: hidden !important; } .advance-receipt-page, .advance-receipt-page *, .advance-receipt-page *::before, .advance-receipt-page *::after { box-sizing: border-box; } .advance-receipt-page { width: 100%; max-width: 100%; min-width: 0; overflow-x: hidden; } .advance-receipt-page .ar-layout { width: 100% !important; max-width: 100% !important; min-width: 0 !important; display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(21rem, 28rem) !important; gap: 1.25rem !important; align-items: start !important; overflow: visible !important; } .advance-receipt-page .ar-form-card, .advance-receipt-page .ar-preview-card, .advance-receipt-page .ar-preview-col, .advance-receipt-page form, .advance-receipt-page .form-grid, .advance-receipt-page .form-grid label { min-width: 0 !important; max-width: 100% !important; } .advance-receipt-page .ar-form-card input, .advance-receipt-page .ar-form-card select, .advance-receipt-page .ar-form-card textarea, .advance-receipt-page .ar-form-card .form-input, .advance-receipt-page .ar-form-card .form-dropdown-btn, .advance-receipt-page .ar-form-card .erp-custom-select-wrapper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .advance-receipt-page .ar-preview-card { width: 100% !important; overflow: hidden !important; } .advance-receipt-page .ar-paper { width: 100% !important; min-width: 0 !important; max-width: 100% !important; overflow: hidden !important; } .advance-receipt-page .ar-paper-table { table-layout: fixed; } .advance-receipt-page .ar-paper-table th, .advance-receipt-page .ar-paper-table td, .advance-receipt-page .ar-paper-info-row b, .advance-receipt-page .ar-paper-words-val { overflow-wrap: anywhere; } .advance-receipt-page .ar-preview-actions, .advance-receipt-page .ar-form-actions > div { min-width: 0 !important; max-width: 100% !important; flex-wrap: wrap !important; } .advance-receipt-page .ar-preview-actions > *, .advance-receipt-page .ar-form-actions > div > * { min-width: 0 !important; } @media (max-width: 1320px) { .advance-receipt-page .ar-layout { grid-template-columns: minmax(0, 1fr) !important; } .advance-receipt-page .ar-preview-col { width: 100% !important; max-width: 46rem !important; margin-inline: auto !important; } } @media (max-width: 900px) { .erp-body main:has(.advance-receipt-page) > section.p-5 { padding-left: 1rem !important; padding-right: 1rem !important; } .advance-receipt-page .ar-form-card, .advance-receipt-page .ar-preview-card { padding: 1rem !important; } .advance-receipt-page .form-grid.two { grid-template-columns: minmax(0, 1fr) !important; } .advance-receipt-page .ar-form-actions { align-items: stretch !important; } .advance-receipt-page .ar-form-actions > div { width: 100% !important; } .advance-receipt-page .ar-form-actions > div > button { flex: 1 1 10rem; } } @media (max-width: 640px) { .erp-body main:has(.advance-receipt-page) > section.p-5 { padding-left: .75rem !important; padding-right: .75rem !important; } .advance-receipt-page .ar-layout { gap: 1rem !important; } .advance-receipt-page .ar-form-actions > div, .advance-receipt-page .ar-preview-actions { flex-direction: column !important; align-items: stretch !important; } .advance-receipt-page .ar-form-actions > div > button, .advance-receipt-page .ar-preview-btn, .advance-receipt-page .ar-preview-actions > div { width: 100% !important; flex: 1 1 auto !important; } } /* ===== ADVANCE RECEIPT RESPONSIVE FIX END ===== */ } /* ===== THEME TEXT CONTRAST NORMALIZATION START ===== */ .erp-body { color: var(--theme-text-primary, var(--erp-text, #0f172a)); } .erp-body .erp-card, .erp-body .dash-panel, .erp-body .settings-card, .erp-body .bk-sidebar-card, .erp-body .bk-panel-card, .erp-body .bk-info-card, .erp-body .bk-inv-info-card, .erp-body .modal-box, .erp-body .bk-dropdown-menu, .erp-body .form-dropdown-menu, .erp-body .dropdown-menu { color: var(--theme-text-primary, var(--erp-text, #0f172a)) !important; } .erp-body .bk-tabs, .erp-body .modal-tabs, .erp-body .ur-tabs, .erp-body .cal-view-tabs { border-color: var(--theme-input-border, var(--erp-border, #d6d3cc)) !important; } .erp-body .bk-tab, .erp-body .modal-tabs button, .erp-body .ur-tab, .erp-body .cal-view-tab:not(.active) { color: var(--theme-text-secondary, var(--erp-text-soft, #475569)) !important; } .erp-body .bk-tab:hover, .erp-body .bk-tab:focus-visible, .erp-body .modal-tabs button:hover, .erp-body .modal-tabs button:focus-visible, .erp-body .ur-tab:hover, .erp-body .ur-tab:focus-visible, .erp-body .cal-view-tab:not(.active):hover, .erp-body .cal-view-tab:not(.active):focus-visible { background: var(--theme-input-hover-bg, var(--erp-surface-soft, #f5f4f1)) !important; color: var(--theme-text-primary, var(--erp-text, #0f172a)) !important; } .erp-body .bk-tab.active, .erp-body .modal-tabs button.active, .erp-body .ur-tab.active { background: var(--theme-dropdown-selected, rgba(37, 99, 235, .12)) !important; border-color: var(--theme-input-border-focus, #2563eb) !important; color: var(--theme-input-border-focus, #2563eb) !important; } .erp-body .bk-card-title, .erp-body .bk-sidebar-title, .erp-body .bk-bill-title, .erp-body .bk-bill-card-title, .erp-body .panel-title-row h2, .erp-body .settings-section-title, .erp-body .dashboard-table td, .erp-body .bk-bill-table td, .erp-body .rep-mini-table td, .erp-body .form-grid label, .erp-body .table-filters label { color: var(--theme-text-primary, var(--erp-text, #0f172a)) !important; } .erp-body .page-subtitle, .erp-body .bk-subtitle, .erp-body .bk-dl dt, .erp-body .bk-summary-row span, .erp-body .bk-action-row span, .erp-body .bk-action-hint, .erp-body .dashboard-table th, .erp-body .bk-bill-table th, .erp-body .rep-mini-table th, .erp-body .table-footer, .erp-body .empty-cell { color: var(--theme-text-secondary, var(--erp-muted, #64748b)) !important; } .erp-body .bk-dl dd:not(.bk-text-paid):not(.bk-text-due):not(.bk-text-discount), .erp-body .bk-summary-row strong:not(.bk-text-paid):not(.bk-text-due):not(.bk-text-discount), .erp-body .bk-action-row strong { color: var(--theme-text-primary, var(--erp-text, #0f172a)) !important; } .erp-body .bk-dropdown-item, .erp-body .form-dropdown-item, .erp-body .action-icons .dropdown-item, .erp-body .bk-action-row, .erp-body .panel-title-row a, .erp-body .btn-outline, .erp-body .btn-filter { color: var(--theme-text-secondary, var(--erp-text-soft, #475569)) !important; } .erp-body .bk-dropdown-item:hover, .erp-body .bk-dropdown-item:focus, .erp-body .form-dropdown-item:hover, .erp-body .form-dropdown-item:focus, .erp-body .action-icons .dropdown-item:hover, .erp-body .action-icons .dropdown-item:focus, .erp-body .bk-action-row:hover, .erp-body .panel-title-row a:hover, .erp-body .btn-outline:hover, .erp-body .btn-filter:hover { color: var(--theme-text-primary, var(--erp-text, #0f172a)) !important; } .erp-body .erp-nav a:not(.bg-amber-500), .erp-body .sidebar-bottom { color: #e2e8f0 !important; } html.dark .erp-body .bk-tab.active, html.dark .erp-body .modal-tabs button.active, html.dark .erp-body .ur-tab.active { color: #93c5fd !important; } html:not(.dark) .erp-body .bk-show-page .bk-action-hint { background: rgba(37, 99, 235, .10) !important; border-top-color: rgba(37, 99, 235, .22) !important; color: #1e3a8a !important; } html:not(.dark) .erp-body .bk-show-page .bk-action-hint svg { color: #2563eb !important; stroke: currentColor !important; } .dark .erp-body .bk-show-page .bk-action-hint, .erp-body.dark .bk-show-page .bk-action-hint, .dark .bk-show-page .bk-action-hint.bk-action-hint, html.dark .erp-body .bk-show-page .bk-action-hint, html.dark .erp-body .bk-action-hint { background: rgba(37, 99, 235, .24) !important; border-top-color: rgba(96, 165, 250, .35) !important; color: #f8fafc !important; font-weight: 600 !important; } .dark .erp-body .bk-show-page .bk-action-hint svg, .erp-body.dark .bk-show-page .bk-action-hint svg, .dark .bk-show-page .bk-action-hint.bk-action-hint svg, html.dark .erp-body .bk-show-page .bk-action-hint svg { color: #60a5fa !important; stroke: currentColor !important; } /* ===== THEME TEXT CONTRAST NORMALIZATION END ===== */ /* ===== BOOKING VIEW ACCESSIBILITY NORMALIZATION START ===== */ .bk-show-page, .bk-show-page .bk-main-col, .bk-show-page .bk-sidebar { color: var(--erp-text) !important; } .bk-show-page .bk-tabs { border-bottom-color: var(--erp-border) !important; } .bk-show-page .bk-tab { color: var(--erp-text-soft) !important; } .bk-show-page .bk-tab:hover, .bk-show-page .bk-tab:focus-visible { background: var(--erp-surface-soft) !important; color: var(--erp-text) !important; } .bk-show-page .bk-tab.active { background: var(--erp-surface-raised) !important; border-color: var(--erp-border-strong) !important; border-bottom-color: var(--erp-blue) !important; color: var(--erp-link) !important; } .bk-show-page .erp-card, .bk-show-page .bk-info-card, .bk-show-page .bk-panel-card, .bk-show-page .bk-sidebar-card, .bk-show-page .bk-inv-info-card, .bk-show-page .bk-invoice-summary-card, .bk-show-page .bk-billing-items, .bk-show-page .bk-notes-box, .bk-show-page .bk-invoice-notes, .bk-show-page .bk-invoice-notes-block { background: var(--erp-surface) !important; border-color: var(--erp-border) !important; color: var(--erp-text) !important; } .bk-show-page .bk-card-title, .bk-show-page .bk-sidebar-title, .bk-show-page .bk-bill-title, .bk-show-page .bk-bill-card-title, .bk-show-page .bk-dl dd, .bk-show-page .bk-summary-row strong, .bk-show-page .bk-sum-row strong, .bk-show-page .bk-bill-to-sidebar strong, .bk-show-page table td { color: var(--erp-text) !important; } .bk-show-page .bk-subtitle, .bk-show-page .bk-dl dt, .bk-show-page .bk-client-details, .bk-show-page .bk-summary-row span, .bk-show-page .bk-sum-row span, .bk-show-page .bk-bill-to-sidebar, .bk-show-page .bk-bill-to-sidebar span, .bk-show-page .bk-empty-msg, .bk-show-page table th { color: var(--erp-text-soft) !important; } .bk-show-page .dashboard-table th, .bk-show-page .bk-services-table th, .bk-show-page .bk-invoice-table th, .bk-show-page .bk-payment-history-table th { background: var(--erp-surface-soft) !important; border-color: var(--erp-border) !important; color: var(--erp-text-soft) !important; } .bk-show-page .dashboard-table td, .bk-show-page .bk-services-table td, .bk-show-page .bk-invoice-table td, .bk-show-page .bk-payment-history-table td { border-color: var(--erp-border) !important; color: var(--erp-text) !important; } .bk-show-page .bk-action-row { color: var(--erp-text) !important; } .bk-show-page .bk-action-row svg, .bk-show-page .bk-action-chevron { color: var(--erp-text-soft) !important; stroke: currentColor !important; } .bk-show-page .bk-action-hint { background: var(--erp-surface-soft) !important; border-top-color: var(--erp-border) !important; color: var(--erp-text) !important; font-weight: 600 !important; } .bk-show-page .bk-action-hint svg { color: var(--erp-link) !important; stroke: currentColor !important; } .bk-show-page .bk-text-paid { color: #22c55e !important; } .bk-show-page .bk-text-due { color: #ef4444 !important; } /* ===== BOOKING VIEW ACCESSIBILITY NORMALIZATION END ===== */