/** * Japstech POS ? Premium SaaS theme * Final visual layer: light Salezy-style navigation, white surfaces, soft canvas. * Scoped to body.zoho-theme / .japs-auth-body so vendor/legacy CSS stays intact beneath. */ /* ?? Tokens ?? */ body.zoho-theme, .japs-auth-body { --p-ink: #151b2b; --p-copy: #3f4858; --p-muted: #7a8495; --p-line: #e7eaf0; --p-line-strong: #d6dce7; --p-surface: #ffffff; --p-canvas: #eef2f7; --p-sidebar: #ffffff; --p-sidebar-elevated: #f5f7fb; --p-sidebar-active: #eff6ff; --p-sidebar-text: #475569; --p-sidebar-muted: #94a3b8; --p-blue: #3b82f6; --p-blue-dark: #2563eb; --p-blue-soft: #eff6ff; --p-green: #4db39e; --p-green-soft: #ecf8f4; --p-amber: #d5aa35; --p-amber-soft: #fff8e6; --p-rose: #d9597b; --p-rose-soft: #fff0f4; --p-purple: #7c72c9; --p-purple-soft: #f5f0fc; --p-radius-sm: 8px; --p-radius: 12px; --p-radius-lg: 16px; --p-shadow-sm: 0 1px 2px rgba(15, 20, 37, 0.04); --p-shadow: 0 2px 10px rgba(15, 20, 37, 0.045); --p-shadow-md: 0 8px 22px rgba(15, 20, 37, 0.07); --p-shadow-lg: 0 16px 40px rgba(15, 20, 37, 0.12); --p-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --p-font-display: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --p-focus: 0 0 0 3px rgba(59, 130, 246, 0.28); --zoho-blue: var(--p-blue); --zoho-blue-hover: var(--p-blue-dark); --zoho-blue-light: var(--p-blue-soft); --zoho-sidebar-bg: var(--p-sidebar); --zoho-sidebar-border: #e8ecf1; --zoho-content-bg: var(--p-surface); --zoho-page-bg: var(--p-canvas); --zoho-text: var(--p-ink); --zoho-text-muted: var(--p-muted); --zoho-table-border: var(--p-line); --zoho-topbar: #ffffff; --zoho-topbar-border: #e8ecf1; --theme-700: var(--p-blue); --theme-800: var(--p-blue-dark); --theme-900: var(--p-ink); --dashboard-ink: var(--p-ink); --dashboard-copy: var(--p-copy); --dashboard-muted: var(--p-muted); --dashboard-line: var(--p-line); --dashboard-surface: var(--p-surface); --dashboard-canvas: var(--p-canvas); --dashboard-primary: var(--p-blue); --dashboard-primary-dark: var(--p-blue-dark); --dashboard-cyan: var(--p-green); } body.zoho-theme { font-family: var(--p-font); color: var(--p-copy); background: var(--p-canvas) !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; letter-spacing: -0.011em; font-feature-settings: "ss01" on, "cv11" on; } body.zoho-theme:not(.lockscreen) { background: var(--p-canvas) !important; } body.zoho-theme .zoho-main-column, body.zoho-theme #scrollable-container { background: var(--p-canvas); } /* Salezy-style app shell card (non-POS) */ body.zoho-theme:not(.pos-sale-theme):not(.lockscreen) { background: #f7f9fc !important; } body.zoho-theme:not(.pos-sale-theme):not(.lockscreen) .thetop { max-width: none; width: 100%; margin: 0; height: 100vh; min-height: 100vh; background: #fff; border: 0; border-radius: 0; box-shadow: none; overflow: hidden; display: flex; flex-direction: column; } body.zoho-theme:not(.pos-sale-theme):not(.lockscreen) .zoho-app-body { flex: 1 1 auto; min-height: 0; height: 100%; align-items: stretch; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme):not(.lockscreen) .zoho-main-column, body.zoho-theme:not(.pos-sale-theme):not(.lockscreen) #scrollable-container { background: #f7f9fc !important; position: relative; z-index: 1; } /* Modals + backdrop must sit above app shell (sidebar flyouts use ~1080) */ body.zoho-theme:not(.pos-sale-theme) .modal-backdrop { z-index: 1090 !important; background: #0f1425 !important; } body.zoho-theme:not(.pos-sale-theme) .modal-backdrop.in, body.zoho-theme:not(.pos-sale-theme) .modal-backdrop.show { opacity: 0.5 !important; } body.zoho-theme:not(.pos-sale-theme) .modal { z-index: 1100 !important; } /* Keep page footer below content ? never paint through floated form gaps */ body.zoho-theme:not(.pos-sale-theme) #scrollable-container > .content, body.zoho-theme:not(.pos-sale-theme) #scrollable-container > .content-header, body.zoho-theme:not(.pos-sale-theme) #scrollable-container > section { flex: 0 0 auto; width: 100%; display: flow-root; } body.zoho-theme:not(.pos-sale-theme) .japs-page-footer { margin-top: auto; flex-shrink: 0; width: 100%; position: relative; z-index: 2; background: #f7f9fc !important; } /* ?? Focus / a11y ?? */ body.zoho-theme a:focus-visible, body.zoho-theme button:focus-visible, body.zoho-theme input:focus-visible, body.zoho-theme select:focus-visible, body.zoho-theme textarea:focus-visible, body.zoho-theme .btn:focus-visible, body.zoho-theme .zoho-topbar__btn:focus-visible, body.zoho-theme #side-bar a:focus-visible { outline: none; box-shadow: var(--p-focus); } @media (prefers-reduced-motion: reduce) { body.zoho-theme *, body.zoho-theme *::before, body.zoho-theme *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ?????????????????????????????????????? SHELL ? Topbar (Salezy light) ?????????????????????????????????????? */ body.zoho-theme:not(.pos-sale-theme) .zoho-topbar { background: #fff; border-bottom: 1px solid #e8ecf1; min-height: 56px; box-shadow: none; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__inner { min-height: 56px; padding: 0 18px; gap: 14px; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__brand, body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__org { color: var(--p-ink); font-weight: 700; letter-spacing: -0.02em; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__brand-icon { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #3b82f6, #60a5fa); display: inline-flex; align-items: center; justify-content: center; margin-right: 8px; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__org { max-width: 200px; padding: 6px 12px; border-radius: 999px; background: #f1f5f9; border: 1px solid #e2e8f0; color: var(--p-muted); font-size: 12.5px; font-weight: 600; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn { height: 36px; min-width: 36px; border-radius: 10px; font-size: 13px; font-weight: 550; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn--icon { color: #64748b; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn--icon:hover { background: #f1f5f9; color: var(--p-ink); } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn--primary { background: var(--p-blue); color: #fff; padding: 0 14px; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.25); } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn--primary:hover { background: var(--p-blue-dark); color: #fff; transform: translateY(-1px); } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn--ghost { background: #f8fafc; border: 1px solid #e2e8f0; color: var(--p-copy); padding: 0 12px; } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar__btn--ghost:hover { background: #f1f5f9; color: var(--p-ink); } body.zoho-theme:not(.pos-sale-theme) .zoho-topbar details > ul, body.zoho-theme:not(.pos-sale-theme) .zoho-topbar .dropdown-menu { border: 1px solid var(--p-line) !important; border-radius: var(--p-radius) !important; box-shadow: var(--p-shadow-lg) !important; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .zoho-quick-create__panel { border-radius: var(--p-radius-lg); border-color: var(--p-line); box-shadow: var(--p-shadow-lg); } body.zoho-theme:not(.pos-sale-theme) .zoho-quick-create__col-head { color: var(--p-muted); letter-spacing: 0.07em; } body.zoho-theme:not(.pos-sale-theme) .zoho-quick-create__link:hover { background: var(--p-blue-soft); color: var(--p-blue-dark); } /* ?????????????????????????????????????? SHELL ? Sidebar (Salezy light) ?????????????????????????????????????? */ body.zoho-theme:not(.pos-sale-theme) .side-bar { width: 248px !important; min-width: 248px !important; background: #fff !important; border-right: 1px solid #e8ecf1 !important; box-shadow: none; display: flex !important; flex-direction: column !important; align-self: stretch; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; } /* Middle nav: scrolls ONLY when items overflow ? no bar when short */ body.zoho-theme:not(.pos-sale-theme) #side-bar, body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-nav { flex: 1 1 0 !important; min-height: 0 !important; max-height: none !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: 4px 10px 8px !important; scrollbar-width: thin; scrollbar-color: transparent transparent; } body.zoho-theme:not(.pos-sale-theme) #side-bar:hover, body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-nav:hover { scrollbar-color: #cbd5e1 transparent; } body.zoho-theme:not(.pos-sale-theme) #side-bar::-webkit-scrollbar, body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-nav::-webkit-scrollbar { width: 4px; } body.zoho-theme:not(.pos-sale-theme) #side-bar::-webkit-scrollbar-thumb, body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-nav::-webkit-scrollbar-thumb { background: transparent; border-radius: 999px; } body.zoho-theme:not(.pos-sale-theme) #side-bar:hover::-webkit-scrollbar-thumb, body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-nav:hover::-webkit-scrollbar-thumb { background: #cbd5e1; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-search, body.zoho-theme:not(.pos-sale-theme) .side-bar > .tw-px-3 { flex: 0 0 auto !important; } body.zoho-theme:not(.pos-sale-theme) #sidebar-no-results { flex: 0 0 auto; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-brand__icon { width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(135deg, #3b82f6, #60a5fa); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed .zoho-sidebar-brand__name, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .zoho-sidebar-brand__name { display: none !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed .zoho-sidebar-brand, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .zoho-sidebar-brand { justify-content: center; padding-left: 0.75rem; padding-right: 0.75rem; } body.zoho-theme:not(.pos-sale-theme) .side-bar > .tw-px-3 { padding: 14px 14px 10px !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar > .tw-px-3 > div { background: #f5f7fb !important; border: 1px solid #e8ecf1 !important; border-radius: 12px !important; box-shadow: none; } body.zoho-theme:not(.pos-sale-theme) .side-bar #sidebar-search { color: var(--p-ink) !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar #sidebar-search::placeholder { color: #94a3b8 !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar .tw-text-gray-400, body.zoho-theme:not(.pos-sale-theme) .side-bar .tw-text-gray-600 { color: #94a3b8 !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .tw-px-3.tw-pt-4, body.zoho-theme:not(.pos-sale-theme) #side-bar .tw-px-1.tw-pt-3, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-section { color: #94a3b8 !important; font-size: 11px !important; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 16px 12px 8px !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar a.drop_down, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-item > a, body.zoho-theme:not(.pos-sale-theme) #side-bar > a { margin: 2px 0 !important; padding: 9px 12px !important; border-radius: 12px !important; border-left: 0 !important; color: #475569 !important; font-size: 13.5px !important; font-weight: 500 !important; gap: 12px !important; min-height: 42px; transition: background 0.15s ease, color 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) #side-bar a.drop_down:hover, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-item > a:hover, body.zoho-theme:not(.pos-sale-theme) #side-bar > a:hover, body.zoho-theme:not(.pos-sale-theme) #side-bar .theme-sidebar-hover:hover { background: #f5f7fb !important; color: var(--p-ink) !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .theme-sidebar-active, body.zoho-theme:not(.pos-sale-theme) #side-bar a.drop_down.theme-sidebar-active, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-item > a.theme-sidebar-active, body.zoho-theme:not(.pos-sale-theme) #side-bar .theme-sidebar-hover.theme-sidebar-active { background: #eff6ff !important; color: #2563eb !important; font-weight: 650 !important; box-shadow: none; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-menu-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex: 0 0 30px; border-radius: 9px; color: #64748b; background: transparent; transition: color 0.15s ease, background-color 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-menu-icon svg, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-menu-icon i, body.zoho-theme:not(.pos-sale-theme) #side-bar a svg, body.zoho-theme:not(.pos-sale-theme) #side-bar a i { width: 20px !important; height: 20px !important; min-width: 20px; stroke-width: 1.75; font-size: 16px !important; line-height: 20px; opacity: 1 !important; color: inherit !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar a.drop_down:hover .zoho-sidebar-menu-icon, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-item > a:hover .zoho-sidebar-menu-icon { color: #334155; background: #eef2f7; } body.zoho-theme:not(.pos-sale-theme) #side-bar .theme-sidebar-active .zoho-sidebar-menu-icon { color: #2563eb; background: #dbeafe; } body.zoho-theme:not(.pos-sale-theme) #side-bar .sidebar-menu-chevron { color: #94a3b8 !important; opacity: 0.9; } body.zoho-theme:not(.pos-sale-theme) #side-bar .theme-sidebar-active .sidebar-menu-chevron { color: #60a5fa !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .chiled { margin: 4px 0 10px !important; padding: 6px 0 6px 14px !important; background: transparent !important; border-left: 1px solid #e8ecf1; margin-left: 26px !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-flyout__rail { background: #e2e8f0 !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row { margin: 0 4px 2px 0; border-radius: 8px; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-add, body.zoho-theme:not(.pos-sale-theme) #side-bar .chiled a:not(.zoho-sidebar-child-link):not(.zoho-sidebar-child-add) { color: #64748b !important; font-size: 12.75px !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row:hover, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row:focus-within, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row--active { background: #f1f5f9 !important; } body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row:hover .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row:hover .zoho-sidebar-child-add, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row:focus-within .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row:focus-within .zoho-sidebar-child-add, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row--active .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row--active .zoho-sidebar-child-add, body.zoho-theme:not(.pos-sale-theme) #side-bar .zoho-sidebar-child-row--active .theme-sidebar-child-active { color: #2563eb !important; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer { border-top: 1px solid #e8ecf1; padding: 10px 12px 12px; background: #fff; margin-top: auto !important; flex: 0 0 auto !important; position: relative; z-index: 5; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__links { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__link { display: flex; align-items: center; gap: 12px; min-height: 40px; padding: 8px 12px; border-radius: 12px; color: #475569 !important; font-size: 13.5px; font-weight: 500; text-decoration: none !important; transition: background 0.15s ease, color 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__link svg { width: 18px; height: 18px; flex-shrink: 0; color: #64748b; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__link:hover { background: #f5f7fb; color: #0f172a !important; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__link--logout:hover { background: #fff1f2; color: #e11d48 !important; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__link--logout:hover svg { color: #e11d48; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid #e8ecf1; border-radius: 14px; background: #f8fafc; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user__profile { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; text-decoration: none !important; color: inherit; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user__avatar { width: 34px; height: 34px; border-radius: 999px; background: #dbeafe; color: #2563eb; font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user__meta { min-width: 0; display: flex; flex-direction: column; gap: 1px; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user__name { font-size: 13px; font-weight: 700; color: #0f172a; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user__role { font-size: 11px; color: #94a3b8; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user .zoho-sidebar-footer__toggle { width: 34px; height: 34px; min-width: 34px; padding: 0; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; color: #64748b; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-user .zoho-sidebar-footer__toggle:hover { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed .zoho-sidebar-user__meta, body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed .zoho-sidebar-footer__link-label, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .zoho-sidebar-user__meta, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .zoho-sidebar-footer__link-label { display: none !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed .zoho-sidebar-user, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .zoho-sidebar-user { flex-direction: column; padding: 8px 6px; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed .zoho-sidebar-footer__link, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .zoho-sidebar-footer__link { justify-content: center; padding-left: 0; padding-right: 0; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__toggle { width: 100%; height: 40px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f8fafc; color: #64748b; display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s ease, color 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) .zoho-sidebar-footer__toggle:hover { background: #eff6ff; color: #2563eb; border-color: #bfdbfe; } /* Light sidebar AI promo card */ body.zoho-theme:not(.pos-sale-theme) .japs-sidebar-ai-slot .ai-ask-fab, body.zoho-theme:not(.pos-sale-theme) .japs-sidebar-ai-slot > div { border-radius: 14px !important; } /* Collapsed ? icon rail scrolls; flyouts are fixed+scrollable via JS */ body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse .side-bar { width: 76px !important; min-width: 76px !important; max-width: 76px !important; overflow: hidden !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar { overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar > .zoho-sidebar-item, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar > .zoho-sidebar-item { position: relative; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar > .zoho-sidebar-item > .chiled, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar > .zoho-sidebar-item > .chiled { display: none !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar > .zoho-sidebar-item.zoho-sidebar-flyout-open > .chiled, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar > .zoho-sidebar-item.zoho-sidebar-flyout-open > .chiled { display: block !important; position: fixed !important; z-index: 1080 !important; min-width: 240px !important; max-height: calc(100vh - 16px) !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar > .zoho-sidebar-item > .chiled .chiled, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar > .zoho-sidebar-item > .chiled .chiled { position: static !important; left: auto !important; top: auto !important; min-width: 0 !important; max-height: none !important; box-shadow: none !important; border: 0 !important; border-radius: 0 !important; margin-left: 0 !important; padding-left: 12px !important; overflow: visible !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar a.drop_down, body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-item > a, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar a.drop_down, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-item > a { min-height: 62px; border-radius: 12px !important; padding: 10px 6px !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar > .zoho-sidebar-item.zoho-sidebar-flyout-open > .chiled, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar > .zoho-sidebar-item.zoho-sidebar-flyout-open > .chiled { background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: 12px !important; box-shadow: var(--p-shadow-lg) !important; margin-left: 0 !important; padding: 0 !important; border-left: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-flyout__header, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-flyout__header { color: var(--p-muted); background: #f8fafc; border-bottom: 1px solid var(--p-line); } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-child-link { color: var(--p-copy) !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-child-row:hover, body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-child-row--active, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-child-row:hover, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-child-row--active { background: var(--p-blue-soft) !important; } body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-child-row:hover .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme) .side-bar.zoho-sidebar-collapsed #side-bar .zoho-sidebar-child-row--active .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-child-row:hover .zoho-sidebar-child-link, body.zoho-theme:not(.pos-sale-theme).sidebar-collapse #side-bar .zoho-sidebar-child-row--active .zoho-sidebar-child-link { color: #2563eb !important; } /* Mobile drawer */ @media (max-width: 1023px) { body.zoho-theme:not(.pos-sale-theme) .side-bar { position: fixed !important; top: 0; left: 0; bottom: 0; z-index: 1080; transform: translateX(-105%); transition: transform 0.22s ease; width: 280px !important; min-width: 280px !important; max-width: 86vw !important; height: 100% !important; height: 100dvh !important; min-height: 100% !important; max-height: 100dvh !important; box-shadow: var(--p-shadow-lg) !important; display: flex !important; flex-direction: column !important; } body.zoho-theme:not(.pos-sale-theme):not(.lockscreen) .thetop { margin: 0; max-width: none; border-radius: 0; border: 0; height: 100vh; min-height: 100vh; box-shadow: none; } body.zoho-theme .side-bar.small-view-side-active { transform: translateX(0); box-shadow: 12px 0 40px rgba(15, 23, 42, 0.18); } body.zoho-theme .overlay { background: rgba(15, 20, 37, 0.4); backdrop-filter: blur(2px); } } /* ?????????????????????????????????????? SHARED ? Page chrome ?????????????????????????????????????? */ body.zoho-theme:not(.pos-sale-theme) .content-wrapper, body.zoho-theme:not(.pos-sale-theme) .content { background: transparent !important; } body.zoho-theme:not(.pos-sale-theme) .content-header { padding: 18px 20px 8px !important; background: transparent !important; } body.zoho-theme:not(.pos-sale-theme) .content-header > h1, body.zoho-theme:not(.pos-sale-theme) .content-header h1 { color: var(--p-ink) !important; font-size: 22px !important; font-weight: 750 !important; letter-spacing: -0.03em; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .content-header small, body.zoho-theme:not(.pos-sale-theme) .content-header .small { color: var(--p-muted) !important; font-size: 13px !important; font-weight: 500; } body.zoho-theme:not(.pos-sale-theme) section.content { padding: 8px 20px 28px !important; } body.zoho-theme:not(.pos-sale-theme) .breadcrumb { background: transparent !important; padding: 0 !important; margin: 6px 0 0 !important; } body.zoho-theme:not(.pos-sale-theme) .breadcrumb > li + li:before { color: var(--p-muted); } body.zoho-theme:not(.pos-sale-theme) .breadcrumb a { color: var(--p-blue-dark); } /* Cards / boxes */ body.zoho-theme:not(.pos-sale-theme) .box, body.zoho-theme:not(.pos-sale-theme) .box.box-solid, body.zoho-theme:not(.pos-sale-theme) .box.box-primary, body.zoho-theme:not(.pos-sale-theme) .box.box-info, body.zoho-theme:not(.pos-sale-theme) .box.box-success, body.zoho-theme:not(.pos-sale-theme) .box.box-warning, body.zoho-theme:not(.pos-sale-theme) .box.box-danger { background: var(--p-surface) !important; border: 1px solid var(--p-line) !important; border-radius: var(--p-radius) !important; box-shadow: var(--p-shadow) !important; margin-bottom: 18px; } body.zoho-theme:not(.pos-sale-theme) .box.box-primary, body.zoho-theme:not(.pos-sale-theme) .box.box-info, body.zoho-theme:not(.pos-sale-theme) .box.box-success, body.zoho-theme:not(.pos-sale-theme) .box.box-warning, body.zoho-theme:not(.pos-sale-theme) .box.box-danger { border-top: 1px solid var(--p-line) !important; } body.zoho-theme:not(.pos-sale-theme) .box-header { padding: 14px 16px !important; border-bottom: 1px solid var(--p-line); background: transparent !important; color: var(--p-ink) !important; } body.zoho-theme:not(.pos-sale-theme) .box-header.with-border { border-bottom: 1px solid var(--p-line) !important; } body.zoho-theme:not(.pos-sale-theme) .box-title { color: var(--p-ink) !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.015em; } body.zoho-theme:not(.pos-sale-theme) .box-body { padding: 16px !important; color: var(--p-copy); border-radius: 0 0 var(--p-radius) var(--p-radius); } body.zoho-theme:not(.pos-sale-theme) .box-footer { background: #fafbfd !important; border-top: 1px solid var(--p-line) !important; border-radius: 0 0 var(--p-radius) var(--p-radius); padding: 12px 16px !important; } body.zoho-theme:not(.pos-sale-theme) .box-tools .btn { border-radius: 8px !important; } /* Forms */ body.zoho-theme:not(.pos-sale-theme) .form-control, body.zoho-theme:not(.pos-sale-theme) input.form-control, body.zoho-theme:not(.pos-sale-theme) select.form-control, body.zoho-theme:not(.pos-sale-theme) textarea.form-control { height: 38px; border: 1px solid var(--p-line-strong) !important; border-radius: 10px !important; box-shadow: var(--p-shadow-sm) !important; color: var(--p-ink) !important; background: #fff !important; font-size: 13.5px; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) textarea.form-control { height: auto; min-height: 88px; } body.zoho-theme:not(.pos-sale-theme) .form-control:focus { border-color: #a8c7e6 !important; box-shadow: var(--p-focus) !important; } body.zoho-theme:not(.pos-sale-theme) .form-control::placeholder { color: #9aa3b5; } body.zoho-theme:not(.pos-sale-theme) .form-group label, body.zoho-theme:not(.pos-sale-theme) label { color: #475569; font-size: 12.5px; font-weight: 650; margin-bottom: 6px; } body.zoho-theme:not(.pos-sale-theme) .input-group-addon { background: #f8fafc !important; border: 1px solid var(--p-line-strong) !important; border-radius: 10px 0 0 10px !important; color: var(--p-muted) !important; } body.zoho-theme:not(.pos-sale-theme) .input-group .form-control:first-child { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .input-group .form-control:last-child { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .help-block, body.zoho-theme:not(.pos-sale-theme) .text-muted { color: var(--p-muted) !important; } /* Buttons */ body.zoho-theme:not(.pos-sale-theme) .btn { border-radius: 10px !important; font-weight: 600; font-size: 13px; min-height: 36px; padding: 7px 14px; box-shadow: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) .btn-flat { border-radius: 10px !important; box-shadow: none !important; } body.zoho-theme:not(.pos-sale-theme) .btn-primary, body.zoho-theme:not(.pos-sale-theme) .btn-info, body.zoho-theme:not(.pos-sale-theme) .tw-dw-btn-primary { background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(79, 143, 206, 0.22); } body.zoho-theme:not(.pos-sale-theme) .btn-primary:hover, body.zoho-theme:not(.pos-sale-theme) .btn-info:hover, body.zoho-theme:not(.pos-sale-theme) .tw-dw-btn-primary:hover { background: var(--p-blue-dark) !important; border-color: var(--p-blue-dark) !important; color: #fff !important; transform: translateY(-1px); } body.zoho-theme:not(.pos-sale-theme) .btn-success { background: var(--p-green) !important; border-color: var(--p-green) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .btn-warning { background: var(--p-amber) !important; border-color: var(--p-amber) !important; color: #1f2937 !important; } body.zoho-theme:not(.pos-sale-theme) .btn-danger { background: var(--p-rose) !important; border-color: var(--p-rose) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .btn-default, body.zoho-theme:not(.pos-sale-theme) .btn-secondary { background: #fff !important; border: 1px solid var(--p-line-strong) !important; color: var(--p-copy) !important; } body.zoho-theme:not(.pos-sale-theme) .btn-default:hover, body.zoho-theme:not(.pos-sale-theme) .btn-secondary:hover { background: #f8fafc !important; border-color: #c5d0e0 !important; color: var(--p-ink) !important; } body.zoho-theme:not(.pos-sale-theme) .btn-xs, body.zoho-theme:not(.pos-sale-theme) .btn-sm { min-height: 30px; border-radius: 8px !important; } /* Alerts / badges */ body.zoho-theme:not(.pos-sale-theme) .alert { border-radius: 12px !important; border: 1px solid transparent; box-shadow: var(--p-shadow-sm); font-size: 13.5px; } body.zoho-theme:not(.pos-sale-theme) .alert-success { background: var(--p-green-soft) !important; border-color: #c7ebe0 !important; color: #1f6f5c !important; } body.zoho-theme:not(.pos-sale-theme) .alert-info { background: var(--p-blue-soft) !important; border-color: #d4e6f6 !important; color: #2f5f8a !important; } body.zoho-theme:not(.pos-sale-theme) .alert-warning { background: var(--p-amber-soft) !important; border-color: #f1e2b0 !important; color: #8a6a12 !important; } body.zoho-theme:not(.pos-sale-theme) .alert-danger { background: var(--p-rose-soft) !important; border-color: #f4d0db !important; color: #9d3150 !important; } body.zoho-theme:not(.pos-sale-theme) .label, body.zoho-theme:not(.pos-sale-theme) .badge { border-radius: 999px !important; font-weight: 650; letter-spacing: 0.01em; padding: 0.4em 0.75em; font-size: 11.5px; display: inline-block; line-height: 1.25; border: 1px solid transparent; box-shadow: none; } body.zoho-theme:not(.pos-sale-theme) .label-primary, body.zoho-theme:not(.pos-sale-theme) .badge-primary { background: var(--p-blue) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label-success, body.zoho-theme:not(.pos-sale-theme) .badge-success { background: var(--p-green) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label-warning, body.zoho-theme:not(.pos-sale-theme) .badge-warning { background: var(--p-amber) !important; color: #1f2937 !important; } body.zoho-theme:not(.pos-sale-theme) .label-danger, body.zoho-theme:not(.pos-sale-theme) .badge-danger { background: var(--p-rose) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label-info, body.zoho-theme:not(.pos-sale-theme) .badge-info { background: #5ba3c9 !important; color: #fff !important; } /* AdminLTE status chips used in list columns (shipping, payment, etc.) */ body.zoho-theme:not(.pos-sale-theme) .label.bg-yellow, body.zoho-theme:not(.pos-sale-theme) .badge.bg-yellow, body.zoho-theme:not(.pos-sale-theme) small.label.bg-yellow { background: var(--p-amber) !important; color: #1f2937 !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-green, body.zoho-theme:not(.pos-sale-theme) .badge.bg-green, body.zoho-theme:not(.pos-sale-theme) small.label.bg-green, body.zoho-theme:not(.pos-sale-theme) .label.bg-light-green, body.zoho-theme:not(.pos-sale-theme) small.label.bg-light-green { background: var(--p-green) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-red, body.zoho-theme:not(.pos-sale-theme) .badge.bg-red, body.zoho-theme:not(.pos-sale-theme) small.label.bg-red { background: var(--p-rose) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-info, body.zoho-theme:not(.pos-sale-theme) .badge.bg-info, body.zoho-theme:not(.pos-sale-theme) small.label.bg-info, body.zoho-theme:not(.pos-sale-theme) .label.bg-primary, body.zoho-theme:not(.pos-sale-theme) small.label.bg-primary { background: #5ba3c9 !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-navy, body.zoho-theme:not(.pos-sale-theme) .badge.bg-navy, body.zoho-theme:not(.pos-sale-theme) small.label.bg-navy { background: #3d4f73 !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-gray, body.zoho-theme:not(.pos-sale-theme) .badge.bg-gray, body.zoho-theme:not(.pos-sale-theme) small.label.bg-gray { background: #e8ecf2 !important; color: #4b5563 !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-aqua, body.zoho-theme:not(.pos-sale-theme) .badge.bg-aqua, body.zoho-theme:not(.pos-sale-theme) small.label.bg-aqua { background: #5eb9c9 !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-purple, body.zoho-theme:not(.pos-sale-theme) .badge.bg-purple, body.zoho-theme:not(.pos-sale-theme) small.label.bg-purple { background: var(--p-purple) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-orange, body.zoho-theme:not(.pos-sale-theme) .badge.bg-orange, body.zoho-theme:not(.pos-sale-theme) small.label.bg-orange { background: #e89a4a !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .label.bg-yellow, body.zoho-theme:not(.pos-sale-theme) .label.bg-green, body.zoho-theme:not(.pos-sale-theme) .label.bg-light-green, body.zoho-theme:not(.pos-sale-theme) .label.bg-red, body.zoho-theme:not(.pos-sale-theme) .label.bg-info, body.zoho-theme:not(.pos-sale-theme) .label.bg-primary, body.zoho-theme:not(.pos-sale-theme) .label.bg-navy, body.zoho-theme:not(.pos-sale-theme) .label.bg-gray, body.zoho-theme:not(.pos-sale-theme) .label.bg-aqua, body.zoho-theme:not(.pos-sale-theme) .label.bg-purple, body.zoho-theme:not(.pos-sale-theme) .label.bg-orange, body.zoho-theme:not(.pos-sale-theme) .badge.bg-yellow, body.zoho-theme:not(.pos-sale-theme) .badge.bg-green, body.zoho-theme:not(.pos-sale-theme) .badge.bg-red, body.zoho-theme:not(.pos-sale-theme) .badge.bg-info, body.zoho-theme:not(.pos-sale-theme) .badge.bg-navy, body.zoho-theme:not(.pos-sale-theme) .badge.bg-gray, body.zoho-theme:not(.pos-sale-theme) .badge.bg-aqua, body.zoho-theme:not(.pos-sale-theme) .badge.bg-purple, body.zoho-theme:not(.pos-sale-theme) .badge.bg-orange, body.zoho-theme:not(.pos-sale-theme) small.label.bg-yellow, body.zoho-theme:not(.pos-sale-theme) small.label.bg-green, body.zoho-theme:not(.pos-sale-theme) small.label.bg-light-green, body.zoho-theme:not(.pos-sale-theme) small.label.bg-red, body.zoho-theme:not(.pos-sale-theme) small.label.bg-info, body.zoho-theme:not(.pos-sale-theme) small.label.bg-primary, body.zoho-theme:not(.pos-sale-theme) small.label.bg-navy, body.zoho-theme:not(.pos-sale-theme) small.label.bg-gray, body.zoho-theme:not(.pos-sale-theme) small.label.bg-aqua, body.zoho-theme:not(.pos-sale-theme) small.label.bg-purple, body.zoho-theme:not(.pos-sale-theme) small.label.bg-orange { border-radius: 999px !important; padding: 0.4em 0.75em; font-weight: 650; font-size: 11.5px; display: inline-block; line-height: 1.25; } /* Tabs */ body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom { background: var(--p-surface); border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); overflow: hidden; } /* Allow action menus to escape the card while open */ body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom:has(.btn-group.open), body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom:has(.dataTables_scrollBody.of-visible) { overflow: visible; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom > .nav-tabs { background: #fafbfd; border-bottom: 1px solid var(--p-line); margin: 0; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom > .nav-tabs > li > a { color: var(--p-muted); border-radius: 0 !important; margin: 0; font-weight: 600; font-size: 13px; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom > .nav-tabs > li.active > a, body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom > .nav-tabs > li.active > a:hover { color: var(--p-blue-dark) !important; border-top-color: transparent !important; border-left-color: transparent !important; border-right-color: transparent !important; border-bottom: 2px solid var(--p-blue) !important; background: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs > li > a { color: var(--p-muted); font-weight: 600; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs > li.active > a, body.zoho-theme:not(.pos-sale-theme) .nav-tabs > li.active > a:focus, body.zoho-theme:not(.pos-sale-theme) .nav-tabs > li.active > a:hover { color: var(--p-blue-dark); border-color: var(--p-line) var(--p-line) #fff; } /* Modals */ body.zoho-theme:not(.pos-sale-theme) .modal-content { border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow-lg) !important; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .modal-header { background: #fff; border-bottom: 1px solid var(--p-line) !important; padding: 16px 20px !important; } body.zoho-theme:not(.pos-sale-theme) .modal-title { color: var(--p-ink); font-size: 16px; font-weight: 720; letter-spacing: -0.02em; } body.zoho-theme:not(.pos-sale-theme) .modal-title:hover, body.zoho-theme:not(.pos-sale-theme) .modal-title:focus, body.zoho-theme:not(.pos-sale-theme) .modal-header:hover .modal-title { color: var(--p-ink) !important; } /* Product view modal: keep green price-header titles readable on hover */ body.zoho-theme:not(.pos-sale-theme) .modal table tbody tr.bg-green:hover, body.zoho-theme:not(.pos-sale-theme) .modal table tr.bg-green:hover { background-color: #00a65a !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .modal table tbody tr.bg-green:hover > th, body.zoho-theme:not(.pos-sale-theme) .modal table tr.bg-green:hover > th { color: #fff !important; background-color: transparent !important; } body.zoho-theme:not(.pos-sale-theme) .modal-body { padding: 18px 20px !important; color: var(--p-copy); } body.zoho-theme:not(.pos-sale-theme) .modal-footer { background: #fafbfd; border-top: 1px solid var(--p-line) !important; padding: 12px 20px !important; } body.zoho-theme:not(.pos-sale-theme) .modal-backdrop.in { opacity: 0.45; background: #0f1425; } /* Tables / DataTables ? modern list skin (app-wide) Excludes: .table-pdf, #pos_table, .direct-sell-product-table */ /* Prevent layout shift during initial DataTable load ? fade in after first draw */ body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll { opacity: 0; transition: opacity 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll.dt-loaded { opacity: 1; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper { margin-top: 4px; } body.zoho-theme:not(.pos-sale-theme) .box .dataTables_wrapper, body.zoho-theme:not(.pos-sale-theme) .box-body > .table-responsive, body.zoho-theme:not(.pos-sale-theme) .box-body > .dataTables_wrapper { background: transparent; } body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table), body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) { background: #fff; border-collapse: separate !important; border-spacing: 0; border: 1px solid var(--p-line) !important; border-radius: 14px; overflow: visible; width: 100% !important; margin-bottom: 0 !important; box-shadow: var(--p-shadow-sm); } body.zoho-theme:not(.pos-sale-theme) .table-bordered:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) { border: 1px solid var(--p-line) !important; border-radius: 14px; overflow: visible; } /* Prefer horizontal hairlines; drop harsh vertical grid */ body.zoho-theme:not(.pos-sale-theme) .table-bordered:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > thead > tr > th, body.zoho-theme:not(.pos-sale-theme) .table-bordered:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > tbody > tr > td, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) thead th, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) tbody td { border-left: 0 !important; border-right: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table):not(#purchase_entry_table) > thead > tr > th, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) thead th, body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table):not(#purchase_entry_table) > thead > tr > td { background: #f7f9fc !important; color: #64748b !important; border-bottom: 1px solid var(--p-line) !important; border-top: 0 !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; padding: 13px 16px !important; } body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > thead > tr > th:first-child, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) thead th:first-child { border-top-left-radius: 13px; } body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > thead > tr > th:last-child, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) thead th:last-child { border-top-right-radius: 13px; } body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > tbody > tr > td, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) tbody td { color: var(--p-copy) !important; border-top: 0 !important; border-bottom: 1px solid #eef1f6 !important; font-size: 13.5px !important; padding: 14px 16px !important; vertical-align: middle !important; background: #fff; } body.zoho-theme:not(.pos-sale-theme) .table:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > tbody > tr:last-child > td, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) tbody tr:last-child td { border-bottom: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .table-striped:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > tbody > tr:nth-of-type(odd) > td, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table).stripe tbody tr.odd > td, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) tbody tr.odd > td { background: #fbfcfe !important; } body.zoho-theme:not(.pos-sale-theme) .table-hover:not(.table-pdf):not(.direct-sell-product-table):not(#pos_table) > tbody > tr:hover:not([class*="bg-"]) > td, body.zoho-theme:not(.pos-sale-theme) table.dataTable:not(.table-pdf):not(#pos_table) tbody tr:hover:not([class*="bg-"]) > td { background: #f3f8fd !important; } /* DataTables scroll head/body alignment */ body.zoho-theme:not(.pos-sale-theme) .dataTables_scrollHeadInner, body.zoho-theme:not(.pos-sale-theme) .dataTables_scrollHead table, body.zoho-theme:not(.pos-sale-theme) .dataTables_scrollBody table { border-radius: 0 !important; box-shadow: none !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll { border: 1px solid var(--p-line); border-radius: 14px; box-shadow: var(--p-shadow-sm); overflow: hidden; background: #fff; } body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll:has(.btn-group.open), body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll:has(.of-visible) { overflow: visible; } body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll .table, body.zoho-theme:not(.pos-sale-theme) .dataTables_scroll table.dataTable { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* DataTables toolbar: length / search / export / info / pagination */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_info, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate { color: var(--p-muted); font-size: 13px; margin-bottom: 10px; } /* Top toolbar row: no bottom margin so search aligns with export buttons */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dataTables_filter, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dataTables_filter { margin-bottom: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length select { border: 1px solid var(--p-line-strong) !important; border-radius: 10px !important; height: 38px; min-width: 64px; padding: 4px 12px; background: #fff; color: var(--p-ink); box-shadow: var(--p-shadow-sm); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { min-width: 200px; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input:focus, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length select:focus { border-color: #a8c7e6 !important; box-shadow: var(--p-focus); } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons { margin-bottom: 0; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn { border-radius: 10px !important; border: 1px solid var(--p-line-strong) !important; background: #fff !important; color: var(--p-copy) !important; font-weight: 600; font-size: clamp(11px, 0.78vw, 12.5px); padding: 0 clamp(8px, 0.7vw, 12px) !important; min-height: 36px; height: 36px; box-shadow: var(--p-shadow-sm); margin: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; line-height: 1 !important; white-space: nowrap; width: auto !important; max-width: none !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn:hover, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn:hover { background: var(--p-blue-soft) !important; border-color: #c5d8ec !important; color: var(--p-blue-dark) !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate { padding-top: 4px; } /* Bootstrap DataTables uses
  • ?
    • . Styling the
  • as a pill left empty circle shells beside real page links. Keep
  • layout-only; put pill chrome on the clickable child (or on the button itself when DataTables renders bare ). */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; margin: 0 !important; float: none !important; list-style: none !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button { float: none !important; display: inline-flex !important; margin: 0 !important; padding: 0 !important; min-width: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; opacity: 1 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > .paginate_button, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > span > .paginate_button { float: none !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; border-radius: 999px !important; border: 1px solid transparent !important; margin: 0 !important; padding: 5px 12px !important; min-width: 34px; min-height: 32px; text-align: center; background: transparent !important; color: var(--p-copy) !important; font-weight: 600; font-size: 13px; box-shadow: none !important; line-height: 1.2 !important; text-decoration: none !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > .paginate_button.current, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > span > .paginate_button.current, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current > a:hover, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a:hover { background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(79, 143, 206, 0.35) !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button:not(.current):not(.disabled):not(.active) > a:hover, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li:not(.active):not(.disabled) > a:hover, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > .paginate_button:hover:not(.current):not(.disabled), body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > span > .paginate_button:hover:not(.current):not(.disabled) { background: var(--p-blue-soft) !important; border-color: #d4e6f6 !important; color: var(--p-blue-dark) !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.disabled > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.disabled > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > .paginate_button.disabled, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > span > .paginate_button.disabled { opacity: 0.45; background: transparent !important; color: var(--p-muted) !important; cursor: default; pointer-events: none; } /* Neutralize legacy rules that painted the
  • itself as a pill */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.current, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.disabled, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button:hover { background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit !important; opacity: 1 !important; } /* In-table Actions dropdown triggers */ body.zoho-theme:not(.pos-sale-theme) table tbody .btn-group > .btn, body.zoho-theme:not(.pos-sale-theme) table tbody .tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-info.dropdown-toggle, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-xs.dropdown-toggle { border-radius: 999px !important; font-weight: 650 !important; font-size: 12px !important; letter-spacing: 0.01em; min-height: 30px; padding: 5px 12px !important; box-shadow: none !important; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } body.zoho-theme:not(.pos-sale-theme) table tbody .tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-info.dropdown-toggle, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-group > .btn-info { color: var(--p-blue-dark) !important; border: 1px solid #b7d2eb !important; background: var(--p-blue-soft) !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info:hover, body.zoho-theme:not(.pos-sale-theme) table tbody .tw-dw-btn.tw-dw-btn-xs.tw-dw-btn-outline.tw-dw-btn-info:focus, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-info.dropdown-toggle:hover, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-info.dropdown-toggle:focus, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-group.open > .btn-info, body.zoho-theme:not(.pos-sale-theme) table tbody .btn-group.open > .tw-dw-btn-info { background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important; box-shadow: 0 2px 8px rgba(79, 143, 206, 0.28) !important; } /* Action column: Edit / Delete / Default aligned on one row */ body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns { display: inline-flex !important; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; vertical-align: middle; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns > .tw-dw-btn, body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns > a.tw-dw-btn, body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns > .table-action-default { margin: 0 !important; flex: 0 0 auto; width: auto !important; min-width: 0 !important; max-width: none !important; height: 30px !important; min-height: 30px !important; font-size: 12px !important; line-height: 1 !important; white-space: nowrap !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 0 10px !important; border-radius: 999px !important; box-sizing: border-box !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns > .tw-dw-btn[disabled], body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns > .tw-dw-btn:disabled { opacity: 0.55 !important; cursor: not-allowed !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-default { background: #ecfdf5 !important; border: 1px solid #86efac !important; color: #047857 !important; font-weight: 700 !important; letter-spacing: 0.01em; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns .tw-dw-btn-info { color: var(--p-blue-dark) !important; border: 1px solid #b7d2eb !important; background: var(--p-blue-soft) !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns .tw-dw-btn-info:hover { background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns .tw-dw-btn-primary { color: var(--p-blue-dark) !important; border: 1px solid #b7d2eb !important; background: #fff !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns .tw-dw-btn-primary:hover { background: var(--p-blue-soft) !important; color: var(--p-blue-dark) !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns .tw-dw-btn-error { color: #b91c1c !important; border: 1px solid #fecaca !important; background: #fff !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .table-action-btns .tw-dw-btn-error:hover:not(:disabled) { background: #fef2f2 !important; color: #991b1b !important; } body.zoho-theme:not(.pos-sale-theme) table tbody .dropdown-menu { border: 1px solid var(--p-line) !important; border-radius: 12px !important; box-shadow: var(--p-shadow-md) !important; padding: 6px !important; margin-top: 6px !important; min-width: 180px; } body.zoho-theme:not(.pos-sale-theme) table tbody .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; font-size: 13px; color: var(--p-copy); } body.zoho-theme:not(.pos-sale-theme) table tbody .dropdown-menu > li > a:hover { background: var(--p-blue-soft) !important; color: var(--p-blue-dark) !important; } /* Keep Actions menus unclipped inside common list shells */ body.zoho-theme:not(.pos-sale-theme) .box:has(.btn-group.open), body.zoho-theme:not(.pos-sale-theme) .box-body:has(.btn-group.open), body.zoho-theme:not(.pos-sale-theme) .table-responsive:has(.btn-group.open), body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper:has(.btn-group.open), body.zoho-theme:not(.pos-sale-theme) .dataTables_scrollBody.of-visible { overflow: visible !important; } /* Processing indicator ? reset vendor margin-top:-26px that crops the text */ body.zoho-theme:not(.pos-sale-theme) .dataTables_processing { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; margin: 0 !important; width: auto !important; min-width: 140px; max-width: calc(100% - 24px); height: auto !important; line-height: 1.4 !important; overflow: visible !important; background: rgba(255, 255, 255, 0.96) !important; border: 1px solid var(--p-line) !important; border-radius: 12px !important; box-shadow: var(--p-shadow-md); color: var(--p-ink) !important; font-size: 13px !important; font-weight: 600 !important; padding: 12px 20px !important; text-align: center !important; z-index: 30 !important; box-sizing: border-box !important; white-space: nowrap; } /* Select2 */ body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--single, body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--multiple { border: 1px solid var(--p-line-strong) !important; border-radius: 10px !important; min-height: 40px !important; height: 40px !important; background: #fff !important; box-shadow: var(--p-shadow-sm); } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--multiple { height: auto !important; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--p-ink) !important; line-height: 38px !important; padding-left: 12px !important; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default.select2-container--focus .select2-selection--single, body.zoho-theme:not(.pos-sale-theme) .select2-container--default.select2-container--open .select2-selection--single, body.zoho-theme:not(.pos-sale-theme) .select2-container--default.select2-container--focus .select2-selection--multiple { border-color: #a8c7e6 !important; box-shadow: var(--p-focus); } body.zoho-theme:not(.pos-sale-theme) .select2-dropdown { border: 1px solid var(--p-line) !important; border-radius: 12px !important; box-shadow: var(--p-shadow-lg); overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-results__option--highlighted[aria-selected] { background: var(--p-blue) !important; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-results__option[aria-selected=true] { background: var(--p-blue-soft) !important; color: var(--p-blue-dark) !important; } /* Dropdowns / pagination / panels */ body.zoho-theme:not(.pos-sale-theme) .dropdown-menu { border: 1px solid var(--p-line) !important; border-radius: 12px !important; box-shadow: var(--p-shadow-lg) !important; padding: 6px !important; } body.zoho-theme:not(.pos-sale-theme) .dropdown-menu > li > a { border-radius: 8px; padding: 8px 12px; color: var(--p-copy); font-size: 13px; } body.zoho-theme:not(.pos-sale-theme) .dropdown-menu > li > a:hover { background: var(--p-blue-soft); color: var(--p-blue-dark); } body.zoho-theme:not(.pos-sale-theme) .pagination { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 4px !important; float: none !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .pagination > li { float: none !important; display: inline-flex !important; } body.zoho-theme:not(.pos-sale-theme) .pagination > li > a, body.zoho-theme:not(.pos-sale-theme) .pagination > li > span { float: none !important; border-radius: 999px !important; margin: 0 !important; border-color: var(--p-line) !important; color: var(--p-copy); } body.zoho-theme:not(.pos-sale-theme) .pagination > .active > a, body.zoho-theme:not(.pos-sale-theme) .pagination > .active > span { background: var(--p-blue) !important; border-color: var(--p-blue) !important; } body.zoho-theme:not(.pos-sale-theme) .panel, body.zoho-theme:not(.pos-sale-theme) .well { border: 1px solid var(--p-line); border-radius: var(--p-radius); box-shadow: var(--p-shadow); background: #fff; } /* Widget / filters components */ body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-rounded-xl.tw-ring-1, body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-shadow-sm.tw-rounded-xl { border-color: var(--p-line) !important; box-shadow: var(--p-shadow) !important; border-radius: var(--p-radius) !important; } body.zoho-theme:not(.pos-sale-theme) .pf-btn::before { background: var(--p-blue); } /* Empty / loading */ body.zoho-theme:not(.pos-sale-theme) .empty-state, body.zoho-theme:not(.pos-sale-theme) .no-data, body.zoho-theme:not(.pos-sale-theme) .text-center.text-muted { color: var(--p-muted) !important; } body.zoho-theme:not(.pos-sale-theme) .overlay, body.zoho-theme:not(.pos-sale-theme) .loading-overlay { backdrop-filter: blur(1px); } /* Footer */ body.zoho-theme:not(.pos-sale-theme) .main-footer, body.zoho-theme:not(.pos-sale-theme) footer { background: transparent !important; border-top: 1px solid var(--p-line) !important; color: var(--p-muted) !important; font-size: 12.5px; } body.zoho-theme:not(.pos-sale-theme) .scrolltop .scroll { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; padding: 0 !important; background: #111827 !important; border: 1px solid rgba(255, 255, 255, 0.12) !important; border-radius: 999px !important; box-shadow: 0 10px 25px rgba(15, 23, 42, 0.25) !important; color: #fff !important; line-height: 1 !important; } body.zoho-theme:not(.pos-sale-theme) .scrolltop .scroll .fas, body.zoho-theme:not(.pos-sale-theme) .scrolltop .scroll i { color: #fff !important; font-size: 18px !important; margin: 0 !important; line-height: 1 !important; } body.zoho-theme:not(.pos-sale-theme) .scrolltop .scroll:hover { background: #1f2937 !important; transform: translateY(-2px); } /* ?????????????????????????????????????? DASHBOARD ? SaaS card UI (visual only) ?????????????????????????????????????? */ body.zoho-theme .content-wrapper:has(.zoho-dashboard), body.zoho-theme .content:has(.zoho-dashboard) { background: var(--p-canvas) !important; } body.zoho-theme .zoho-dashboard, body.zoho-theme .zoho-dashboard__layout, body.zoho-theme .zoho-dashboard__body, body.zoho-theme .japs-dashboard-content.zoho-dashboard__body { background: transparent !important; font-family: var(--p-font); } body.zoho-theme .zoho-dashboard__layout { gap: 24px !important; padding: 0 20px 28px !important; align-items: stretch !important; } body.japs-dashboard-home .zoho-dashboard__layout { padding-left: var(--dash-page-x) !important; padding-right: var(--dash-page-x) !important; } body.japs-dashboard-home .japs-dashboard-page .japs-dashboard-content.zoho-dashboard__body, body.japs-dashboard-home .japs-dashboard-page .japs-dashboard-content { padding-left: 0 !important; padding-right: 0 !important; padding-top: 8px !important; padding-bottom: 0 !important; } body.zoho-theme .zoho-dashboard__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; flex: 1 1 auto; } body.zoho-theme .zoho-dashboard__main .zoho-dashboard { flex: 0 0 auto; } body.zoho-theme .zoho-dashboard__main-chart { flex: 1 1 auto; min-height: 320px; border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow-sm) !important; overflow: hidden; } body.zoho-theme .zoho-dashboard__main-chart-canvas { min-height: 260px; padding: 8px; } body.zoho-theme .zoho-dashboard__main-chart-canvas canvas, body.zoho-theme .zoho-dashboard__main-chart-canvas > div { max-width: 100%; } body.zoho-theme .zoho-dashboard__aside { margin-top: 0 !important; flex-basis: 360px !important; width: 360px !important; top: 20px !important; display: flex; flex-direction: column; gap: 14px; } body.zoho-theme .zoho-dashboard__header, body.zoho-theme .japs-dashboard-hero, body.zoho-theme .theme-header-bg.japs-dashboard-hero { background: transparent !important; border-bottom: none !important; border-radius: 0 !important; box-shadow: none !important; margin: 0 !important; } body.zoho-theme .zoho-dashboard__header::before, body.zoho-theme .zoho-dashboard__header::after, body.zoho-theme .japs-dashboard-hero::after { display: none !important; } body.zoho-theme .zoho-dashboard__header-inner { padding: 8px 4px 0 !important; max-width: 100%; } body.zoho-theme .zoho-dashboard__title-row { gap: 18px; margin-bottom: 4px; } body.zoho-theme .zoho-dashboard__greeting { gap: 16px; } body.zoho-theme .zoho-dashboard__welcome, body.zoho-theme .japs-dashboard-welcome { color: var(--p-ink) !important; font-size: clamp(24px, 2.2vw, 30px) !important; font-weight: 750 !important; letter-spacing: -0.04em; line-height: 1.2 !important; } body.zoho-theme .zoho-dashboard__subtitle, body.zoho-theme .japs-dashboard-welcome-sub { color: var(--p-muted) !important; font-size: 13.5px !important; font-weight: 500; margin-top: 6px !important; } body.zoho-theme .zoho-dashboard__avatar { width: 52px !important; height: 52px !important; border-radius: 16px !important; background: linear-gradient(145deg, #ecebff, #e8f1fc) !important; border: 1px solid #e0e4f8 !important; color: #5b5fcf !important; box-shadow: var(--p-shadow-sm) !important; font-weight: 750 !important; font-size: 20px !important; } body.zoho-theme .zoho-dashboard__select, body.zoho-theme .zoho-dashboard__filter-btn, body.zoho-theme .japs-dashboard-filter-btn, body.zoho-theme .zoho-dashboard__toolbar-item .select2-selection--single { background: #fff !important; border: 1px solid var(--p-line) !important; color: var(--p-copy) !important; border-radius: 12px !important; min-height: 42px !important; box-shadow: var(--p-shadow-sm) !important; backdrop-filter: none !important; font-weight: 550 !important; } body.zoho-theme .zoho-dashboard__filter-btn:hover, body.zoho-theme .japs-dashboard-filter-btn:hover { border-color: var(--p-line-strong) !important; box-shadow: var(--p-shadow) !important; } body.zoho-theme .zoho-dashboard__tabs { display: none !important; /* redundant single "Home" tab */ } body.zoho-theme .zoho-dashboard__stats, body.zoho-theme .japs-dashboard-stats.zoho-dashboard__stats { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 14px !important; margin-top: 18px !important; padding-bottom: 8px !important; } @media (max-width: 899px) { body.zoho-theme .zoho-dashboard__stats, body.zoho-theme .japs-dashboard-stats.zoho-dashboard__stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 479px) { body.zoho-theme .zoho-dashboard__stats, body.zoho-theme .japs-dashboard-stats.zoho-dashboard__stats { grid-template-columns: 1fr !important; } } body.zoho-theme .zoho-stat-card, body.zoho-theme .japs-dashboard-stats > .zoho-stat-card { position: relative; overflow: hidden; display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 14px; min-height: 112px; padding: 22px 20px 18px !important; background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: 18px !important; box-shadow: var(--p-shadow) !important; transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } body.zoho-theme .zoho-stat-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; border-radius: 18px 18px 0 0; background: var(--p-blue); } body.zoho-theme .zoho-stat-card:nth-child(1)::before, body.zoho-theme .zoho-stat-card:nth-child(4)::before, body.zoho-theme .zoho-stat-card:nth-child(7)::before { background: var(--p-blue); } body.zoho-theme .zoho-stat-card:nth-child(2)::before, body.zoho-theme .zoho-stat-card:nth-child(5)::before, body.zoho-theme .zoho-stat-card:nth-child(8)::before { background: var(--p-green); } body.zoho-theme .zoho-stat-card:nth-child(3)::before, body.zoho-theme .zoho-stat-card:nth-child(6)::before { background: var(--p-amber); } body.zoho-theme .zoho-stat-card:nth-child(9)::before { background: var(--p-purple); } body.zoho-theme .zoho-stat-card::after { display: none; } body.zoho-theme .zoho-stat-card__body { order: 1; flex: 1; min-width: 0; padding-top: 2px; overflow: visible; } body.zoho-theme .zoho-stat-card__icon { order: 2; width: 48px !important; height: 48px !important; border-radius: 14px !important; box-shadow: none !important; display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0; } body.zoho-theme .zoho-stat-card__icon svg { width: 22px; height: 22px; } body.zoho-theme .zoho-stat-card__icon--sky { background: var(--p-blue-soft) !important; color: #367db9 !important; } body.zoho-theme .zoho-stat-card__icon--green { background: var(--p-green-soft) !important; color: #2d927b !important; } body.zoho-theme .zoho-stat-card__icon--amber { background: var(--p-amber-soft) !important; color: #b78616 !important; } body.zoho-theme .zoho-stat-card__icon--red, body.zoho-theme .zoho-stat-card__icon--rose { background: var(--p-rose-soft) !important; color: #c83e64 !important; } body.zoho-theme .zoho-stat-card__label { color: var(--p-muted) !important; font-size: 14px !important; font-weight: 500 !important; letter-spacing: 0.01em; margin: 0 0 10px !important; line-height: 1.35 !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; word-break: break-word; max-width: none !important; display: block !important; padding-right: 4px; } body.zoho-theme .zoho-stat-card__value { color: var(--p-ink) !important; font-family: var(--p-font) !important; font-size: 26px !important; font-weight: 700 !important; letter-spacing: -0.03em; line-height: 1.15 !important; margin: 0 !important; white-space: nowrap; overflow: visible !important; text-overflow: unset !important; } body.zoho-theme .zoho-stat-card:hover { transform: translateY(-2px); border-color: var(--p-line-strong) !important; box-shadow: var(--p-shadow-md) !important; } body.zoho-theme a.zoho-stat-card--link { text-decoration: none !important; color: inherit; cursor: pointer; } body.zoho-theme a.zoho-stat-card--link:hover { border-color: var(--p-blue) !important; } body.zoho-theme a.zoho-stat-card--link:focus-visible { outline: none; box-shadow: var(--p-focus), var(--p-shadow-md) !important; } /* Attendance clock as SaaS card */ body.zoho-theme .zoho-dashboard__aside-attendance { margin-bottom: 0; } body.zoho-theme .zoho-dashboard__aside .att-clock-card, body.zoho-theme .zoho-dashboard__aside-attendance .att-clock-card { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; margin: 0 !important; width: 100%; } body.zoho-theme .zoho-dashboard__aside .att-clock-card__left, body.zoho-theme .zoho-dashboard__aside-attendance .att-clock-card__left { min-width: 0 !important; flex: 0 0 auto !important; } body.zoho-theme .zoho-dashboard__aside .att-clock-card__timers, body.zoho-theme .zoho-dashboard__aside-attendance .att-clock-card__timers { width: 100%; justify-content: space-between; } body.zoho-theme .zoho-dashboard__aside .att-clock-card__actions, body.zoho-theme .zoho-dashboard__aside-attendance .att-clock-card__actions { margin-left: 0 !important; width: 100%; } body.zoho-theme .zoho-dashboard__aside .att-clock-card__actions .att-btn, body.zoho-theme .zoho-dashboard__aside-attendance .att-clock-card__actions .att-btn { flex: 1 1 auto; justify-content: center; } body.zoho-theme .att-clock-card { margin: 16px 0 4px !important; border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow-sm) !important; background: #fff !important; padding: 16px 18px !important; } body.zoho-theme .zoho-dashboard__aside .att-clock-card { margin: 0 !important; } body.zoho-theme .att-clock-card__icon { border-radius: 12px !important; } body.zoho-theme .att-btn { border-radius: 10px !important; font-weight: 600 !important; } /* Side panel */ body.zoho-theme .zoho-side-panel { border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow) !important; overflow: hidden; background: #fff !important; } body.zoho-theme .zoho-side-panel__tabs { background: #fafbfd !important; border-bottom: 1px solid var(--p-line) !important; padding: 12px 12px 0 !important; gap: 6px !important; } body.zoho-theme .zoho-side-panel__tab { border-radius: 10px 10px 0 0 !important; font-size: 13px !important; font-weight: 650 !important; padding: 10px 14px !important; color: var(--p-muted) !important; } body.zoho-theme .zoho-side-panel__tab--active { color: var(--p-ink) !important; background: #fff !important; border-color: var(--p-line) !important; box-shadow: 0 -1px 0 #fff; } body.zoho-theme .zoho-side-panel__group-head { padding: 14px 16px 8px !important; } body.zoho-theme .zoho-side-panel__group-title { font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--p-muted) !important; } body.zoho-theme .zoho-side-panel__group-icon { width: 28px !important; height: 28px !important; border-radius: 8px !important; } body.zoho-theme .zoho-side-panel__row { padding: 11px 16px !important; border-radius: 0; transition: background 0.12s ease; } body.zoho-theme .zoho-side-panel__row:hover { background: #f7f9fc !important; } body.zoho-theme .zoho-side-panel__row-label { font-size: 13.5px !important; font-weight: 550 !important; color: var(--p-copy) !important; } body.zoho-theme .zoho-side-panel__row-count { min-width: 28px; height: 24px; padding: 0 8px; border-radius: 999px !important; background: #eef1f6 !important; color: var(--p-muted) !important; font-size: 12px !important; font-weight: 700 !important; display: inline-flex; align-items: center; justify-content: center; } body.zoho-theme .zoho-side-panel__row-count--active { background: var(--p-blue-soft) !important; color: var(--p-blue-dark) !important; } body.zoho-theme .zoho-side-panel__activity { padding: 12px 16px !important; gap: 12px !important; } body.zoho-theme .zoho-side-panel__activity-dot { width: 10px !important; height: 10px !important; margin-top: 5px; } body.zoho-theme .zoho-side-panel__activity-text { font-size: 13.5px !important; color: var(--p-ink) !important; } body.zoho-theme .zoho-side-panel__activity-meta { font-size: 12px !important; color: var(--p-muted) !important; } /* Chart / widget cards */ body.zoho-theme .zoho-dashboard__body { padding: 8px 20px 32px !important; } body.zoho-theme .zoho-dashboard__body .tw-bg-white.tw-rounded-xl, body.zoho-theme .japs-dashboard-content .tw-bg-white.tw-rounded-xl { border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow-sm) !important; overflow: hidden; transition: box-shadow 0.15s ease, transform 0.15s ease; } body.zoho-theme .zoho-dashboard__body .tw-bg-white.tw-rounded-xl:hover, body.zoho-theme .japs-dashboard-content .tw-bg-white.tw-rounded-xl:hover { box-shadow: var(--p-shadow-md) !important; transform: none !important; } body.zoho-theme .zoho-dashboard__body .tw-border-2.tw-rounded-full { width: 40px !important; height: 40px !important; border: 1px solid #e4e9f2 !important; border-radius: 12px !important; background: linear-gradient(145deg, #f8faff, #eef3ff) !important; } body.zoho-theme .zoho-dashboard__body h3, body.zoho-theme .japs-dashboard-content h3 { color: var(--p-ink) !important; font-weight: 700 !important; letter-spacing: -0.02em; } body.zoho-theme .zoho-so-summary-toggle--active { background: var(--p-blue) !important; } body.zoho-theme .zoho-dashboard__body .tw-border-dashed { border-color: #e6ebf3 !important; background: linear-gradient(180deg, #fff 0%, #f8fafc 100%) !important; border-radius: 14px !important; } @media (max-width: 1199px) { body.zoho-theme .zoho-dashboard__layout { padding: 0 16px 20px !important; } body.zoho-theme .zoho-dashboard__body { padding: 4px 16px 28px !important; } body.zoho-theme .zoho-dashboard__aside { width: 100% !important; flex-basis: auto !important; padding: 0 !important; } } /* ?????????????????????????????????????? POS ?????????????????????????????????????? */ body.zoho-theme.lockscreen { background: var(--p-canvas) !important; } body.zoho-theme.lockscreen .zoho-topbar, body.zoho-theme .pos-header.zoho-topbar { background: linear-gradient(180deg, #101627 0%, #0c101c 100%); } body.zoho-theme.lockscreen .box, body.zoho-theme.lockscreen .pos_product_div, body.zoho-theme.lockscreen .product_list_body, body.zoho-theme.lockscreen #product_list_body { border-radius: 12px !important; } body.zoho-theme.lockscreen .product_box, body.zoho-theme.lockscreen .product_list .product_box { border: 1px solid var(--p-line) !important; border-radius: 12px !important; box-shadow: var(--p-shadow-sm); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; } body.zoho-theme.lockscreen .product_box:hover { border-color: #c7daf0 !important; box-shadow: var(--p-shadow); transform: translateY(-1px); } body.zoho-theme.lockscreen .product_price, body.zoho-theme .product_price { color: var(--p-blue-dark) !important; font-weight: 720; } body.zoho-theme.lockscreen .btn-success, body.zoho-theme.lockscreen .pos-express-btn, body.zoho-theme.lockscreen #pos-save { border-radius: 10px !important; } body.zoho-theme.lockscreen .table > thead > tr > th { background: #f8fafc !important; } body.zoho-theme.lockscreen .pos-total, body.zoho-theme.lockscreen .payment_rows_div, body.zoho-theme.lockscreen .pos_form_totals { border-radius: 12px; } body.zoho-theme .pos-header.zoho-topbar > div { background: transparent !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; } body.zoho-theme .pos-header .tw-bg-\[\#646EE4\] { background: var(--p-blue) !important; } body.zoho-theme .pos-header p, body.zoho-theme .pos-header strong, body.zoho-theme .pos-header .curr_datetime { color: #e2e8f0 !important; } body.zoho-theme .pos-header .hamburger { color: #c5cde0 !important; } body.zoho-theme.lockscreen #scrollable-container { background: var(--p-canvas) !important; } body.zoho-theme.lockscreen .content { padding: 10px 12px 16px !important; } /* ?????????????????????????????????????? AUTH ?????????????????????????????????????? */ .japs-auth-body, body.login-page, body.register-page { font-family: var(--p-font); min-height: 100vh; background: #f4f6fb !important; } .japs-auth-page { min-height: 100vh; display: flex; flex-direction: row; align-items: stretch; padding: 0; background: #f4f6fb; } .japs-auth-brand { position: relative; flex: 0 0 44%; min-height: 100vh; padding: clamp(80px, 10vw, 150px) clamp(44px, 7vw, 110px); align-items: center; background: radial-gradient(circle at 18% 88%, rgba(79, 143, 206, 0.25), transparent 32%), radial-gradient(circle at 84% 10%, rgba(124, 114, 201, 0.22), transparent 28%), linear-gradient(145deg, #0c1120 0%, #15213b 48%, #223b5c 100%); } .japs-auth-brand::before { background: linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(135deg, #000, transparent 78%); } .japs-auth-brand-inner { width: 100%; max-width: 500px; } .japs-auth-brand h2 { max-width: 460px; margin-bottom: 16px; font-size: clamp(34px, 4vw, 52px); font-weight: 780; line-height: 1.06; letter-spacing: -0.045em; } .japs-auth-brand p { max-width: 420px; color: rgba(226, 232, 240, 0.78); font-size: 16px; } .japs-auth-brand-features { max-width: 420px; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .japs-auth-brand-features li { min-height: 112px; padding: 18px 14px; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 16px; border: 1px solid rgba(255, 255, 255, 0.11); border-radius: 14px; background: rgba(255, 255, 255, 0.065); color: #e5eaf4; font-size: 12.5px; font-weight: 600; backdrop-filter: blur(8px); } .japs-auth-brand-features svg { width: 22px; height: 22px; color: #8fc2ed; } .japs-auth-main { position: relative; flex: 1 1 56%; min-width: 0; min-height: 100vh; padding: 96px clamp(28px, 6vw, 92px) 54px; align-items: center; justify-content: center; background: radial-gradient(circle at 84% 8%, rgba(124, 114, 201, 0.11), transparent 27%), radial-gradient(circle at 12% 92%, rgba(79, 143, 206, 0.1), transparent 30%), #f7f8fb; } .japs-auth-card { width: 100%; max-width: 430px; background: #fff; border: 1px solid var(--p-line, #e7eaf0); border-radius: 20px; box-shadow: 0 1px 2px rgba(15, 20, 37, 0.03), 0 22px 55px rgba(15, 20, 37, 0.09); padding: 34px 34px 30px; } .japs-auth-card--wide { max-width: 720px; } .japs-auth-card h1 { color: #151b2b !important; font-size: 27px; font-weight: 760; letter-spacing: -0.03em; margin: 0; text-align: left; } .japs-auth-subtitle { color: #7a8495; font-size: 14px; margin: 7px 0 28px; text-align: left; } .japs-auth-card-logo { display: none; } .japs-auth-card .form-group { margin-bottom: 18px; } .japs-auth-card .tw-dw-label { min-height: 26px; padding: 0; } .japs-auth-input, .japs-auth-card input[type="text"], .japs-auth-card input[type="password"] { height: 46px; border: 1px solid #d8dee8; border-radius: 11px; padding: 0 13px; color: #151b2b; background: #fff; box-shadow: 0 1px 2px rgba(15, 20, 37, 0.025); } .japs-auth-input:focus, .japs-auth-card input[type="text"]:focus, .japs-auth-card input[type="password"]:focus { border-color: #8db9df !important; box-shadow: 0 0 0 3px rgba(79, 143, 206, 0.18) !important; } .japs-auth-toggle-pw { right: 14px !important; bottom: 13px !important; } .japs-auth-card .tw-dw-checkbox { width: 18px; height: 18px; border-radius: 5px; border-color: #cbd3df; } .japs-auth-card .form-control { height: 46px; border-radius: 11px !important; border: 1px solid #d6dce7 !important; } .japs-auth-card .btn-primary, .japs-auth-card .btn-login, .japs-auth-card button[type="submit"] { height: 46px; border-radius: 11px !important; background: #4f8fce !important; border-color: #4f8fce !important; font-weight: 700; box-shadow: 0 8px 18px rgba(79, 143, 206, 0.25); } .japs-auth-btn { height: 46px; border-radius: 11px; background: linear-gradient(135deg, #4f8fce, #386fa8); box-shadow: 0 8px 20px rgba(79, 143, 206, 0.25); } .japs-auth-topbar { padding: 18px 22px; } .japs-auth-topbar .japs-auth-logo { padding: 7px 11px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 12px; box-shadow: 0 10px 28px rgba(8, 12, 24, 0.18); } .japs-auth-topbar .japs-auth-logo img { height: 38px; max-width: 150px; } .japs-auth-topbar .tw-dw-dropdown summary { min-height: 38px; padding: 0 13px; border-radius: 10px; border: 1px solid #dce2eb; background: rgba(255, 255, 255, 0.88) !important; color: #3f4858 !important; box-shadow: 0 4px 14px rgba(15, 20, 37, 0.06); display: inline-flex; align-items: center; } .japs-auth-topbar > .tw-flex > a { border-color: #dce2eb !important; background: rgba(255, 255, 255, 0.88); color: #3f4858 !important; box-shadow: 0 4px 14px rgba(15, 20, 37, 0.06); } .japs-auth-topbar .tw-dw-dropdown-content { border: 1px solid #e7eaf0; box-shadow: 0 16px 38px rgba(15, 20, 37, 0.12); } .japs-auth-footer { margin-top: 18px; color: #7a8495; font-size: 13px; } .japs-auth-footer a { color: #386fa8; font-weight: 650; } @media (max-width: 991px) { .japs-auth-page { display: block; min-height: 100vh; padding: 88px 16px 34px; background: radial-gradient(circle at 12% 15%, rgba(79, 143, 206, 0.15), transparent 30%), radial-gradient(circle at 88% 8%, rgba(124, 114, 201, 0.13), transparent 25%), #f4f6fb; } .japs-auth-brand { display: none !important; } .japs-auth-main { min-height: calc(100vh - 122px); padding: 0; background: transparent; } .japs-auth-card { max-width: 430px; margin: 0 auto; padding: 28px 24px 26px; } .japs-auth-topbar { padding: 14px 16px; } .japs-auth-topbar .japs-auth-logo img { height: 34px; max-width: 130px; } .japs-auth-card h1, .japs-auth-subtitle { text-align: center; } } /* ?????????????????????????????????????? APP SURFACES ? tables, forms, modals, views (non-POS only; single source of truth) ?????????????????????????????????????? */ /* List pages: fluid width that fits 10" ? large desktop without breaking */ body.zoho-theme:not(.pos-sale-theme) .content-wrapper > .content:not(.ecom-dash):not(.inv-dash):not(.crm-dash):not(.japs-dashboard-page), body.zoho-theme:not(.pos-sale-theme) .zoho-app-body > .content:not(.ecom-dash):not(.inv-dash):not(.crm-dash):not(.japs-dashboard-page) { max-width: min(1320px, 100%); width: 100%; margin-left: auto; margin-right: auto; padding-left: clamp(12px, 2vw, 28px) !important; padding-right: clamp(12px, 2vw, 28px) !important; box-sizing: border-box; } body.zoho-theme:not(.pos-sale-theme) .content-header { padding: 24px clamp(12px, 2vw, 28px) 10px !important; max-width: min(1320px, 100%); width: 100%; margin-left: auto; margin-right: auto; box-sizing: border-box; } body.zoho-theme:not(.pos-sale-theme) .content-header > h1, body.zoho-theme:not(.pos-sale-theme) .content-header h1, body.zoho-theme:not(.pos-sale-theme) .content-header .tw-text-xl, body.zoho-theme:not(.pos-sale-theme) .content-header .tw-text-3xl, body.zoho-theme:not(.pos-sale-theme) .content-header .tw-font-bold { color: var(--p-ink) !important; font-weight: 800 !important; letter-spacing: -0.03em !important; } body.zoho-theme:not(.pos-sale-theme) .content-header .tw-text-gray-600, body.zoho-theme:not(.pos-sale-theme) .content-header p { color: var(--p-muted) !important; } /* Widget cards (components/widget.blade.php) */ body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-rounded-xl.tw-ring-1, body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-shadow-sm.tw-rounded-xl { background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow) !important; --tw-ring-color: transparent !important; --tw-ring-shadow: 0 0 #0000 !important; overflow: visible; transition: box-shadow 0.18s ease, transform 0.18s ease; } body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-rounded-xl.tw-ring-1:hover, body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-shadow-sm.tw-rounded-xl:hover { box-shadow: var(--p-shadow-md) !important; } body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-rounded-xl .box-header, body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-shadow-sm.tw-rounded-xl .box-header { padding: 4px 4px 12px !important; border-bottom: 1px solid #eef2f7 !important; margin-bottom: 8px; } body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-rounded-xl .box-title, body.zoho-theme:not(.pos-sale-theme) .tw-bg-white.tw-shadow-sm.tw-rounded-xl .box-title { font-size: 15px !important; font-weight: 700 !important; letter-spacing: -0.02em !important; color: var(--p-ink) !important; } /* Filters card */ body.zoho-theme:not(.pos-sale-theme) .pf-btn { border-radius: 16px 16px 0 0 !important; } body.zoho-theme:not(.pos-sale-theme) .pf-open { border-radius: 16px !important; box-shadow: var(--p-shadow) !important; } /* Classic boxes ? align with widgets */ body.zoho-theme:not(.pos-sale-theme) .box, body.zoho-theme:not(.pos-sale-theme) .box.box-solid, body.zoho-theme:not(.pos-sale-theme) .box.box-primary, body.zoho-theme:not(.pos-sale-theme) .box.box-info, body.zoho-theme:not(.pos-sale-theme) .box.box-success, body.zoho-theme:not(.pos-sale-theme) .box.box-warning, body.zoho-theme:not(.pos-sale-theme) .box.box-danger { border-radius: 16px !important; box-shadow: var(--p-shadow) !important; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .box-header, body.zoho-theme:not(.pos-sale-theme) .box-header.with-border { padding: 16px 20px !important; border-bottom: 1px solid #eef2f7 !important; } body.zoho-theme:not(.pos-sale-theme) .box-body { padding: 18px 20px !important; } body.zoho-theme:not(.pos-sale-theme) .box-footer { background: #f8fafc !important; border-top: 1px solid #eef2f7 !important; padding: 14px 20px !important; } /* Forms ? denser premium fields */ body.zoho-theme:not(.pos-sale-theme) .form-group { margin-bottom: 16px; } body.zoho-theme:not(.pos-sale-theme) .form-control, body.zoho-theme:not(.pos-sale-theme) input.form-control, body.zoho-theme:not(.pos-sale-theme) select.form-control, body.zoho-theme:not(.pos-sale-theme) textarea.form-control { height: 40px; padding: 8px 12px; border-radius: 10px !important; border-color: var(--p-line) !important; font-size: 13.5px; } body.zoho-theme:not(.pos-sale-theme) textarea.form-control { height: auto; min-height: 96px; padding-top: 10px; } body.zoho-theme:not(.pos-sale-theme) .form-control:focus { border-color: #93c5fd !important; box-shadow: var(--p-focus) !important; } /* Labels stay inline so @show_tooltip icons sit on the same row (not between label & field) */ body.zoho-theme:not(.pos-sale-theme) .form-group > label:not(.radio-inline):not(.checkbox-inline), body.zoho-theme:not(.pos-sale-theme) .control-label { display: inline-flex !important; align-items: center; color: #475569 !important; font-size: 12.5px !important; font-weight: 650 !important; margin-bottom: 6px !important; letter-spacing: 0.01em; line-height: 1.25; min-height: 16px; } body.zoho-theme:not(.pos-sale-theme) .form-group > label + .fa-info-circle, body.zoho-theme:not(.pos-sale-theme) .form-group > label + i.hover-q, body.zoho-theme:not(.pos-sale-theme) .form-group > label + .text-info { display: inline-block; margin-left: 6px; margin-bottom: 6px; vertical-align: middle; line-height: 1; } /* Controls always start on a full-width row under the label line. Do NOT force display on textareas ? TinyMCE must be able to hide its source field. */ body.zoho-theme:not(.pos-sale-theme) .form-group > input.form-control, body.zoho-theme:not(.pos-sale-theme) .form-group > select.form-control, body.zoho-theme:not(.pos-sale-theme) .form-group > .select2-container, body.zoho-theme:not(.pos-sale-theme) .form-group > select + .select2-container { display: block !important; width: 100% !important; clear: both; } body.zoho-theme:not(.pos-sale-theme) .form-group > textarea.form-control { width: 100% !important; clear: both; } /* TinyMCE: hide source textarea + keep editor opaque so page/sidebar text cannot bleed through */ body.zoho-theme:not(.pos-sale-theme) .form-group > textarea.form-control:has(+ .tox-tinymce), body.zoho-theme:not(.pos-sale-theme) textarea.form-control:has(+ .tox-tinymce) { display: none !important; visibility: hidden !important; position: absolute !important; height: 0 !important; min-height: 0 !important; width: 0 !important; max-width: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0 !important; pointer-events: none !important; overflow: hidden !important; } body.zoho-theme:not(.pos-sale-theme) .tox-tinymce { border: 1px solid var(--p-line) !important; border-radius: 10px !important; overflow: hidden !important; background: #fff !important; box-shadow: var(--p-shadow-sm); } body.zoho-theme:not(.pos-sale-theme) .tox .tox-edit-area, body.zoho-theme:not(.pos-sale-theme) .tox .tox-edit-area__iframe, body.zoho-theme:not(.pos-sale-theme) .tox .tox-sidebar-wrap { background: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .tox .tox-editor-header, body.zoho-theme:not(.pos-sale-theme) .tox .tox-menubar, body.zoho-theme:not(.pos-sale-theme) .tox .tox-toolbar, body.zoho-theme:not(.pos-sale-theme) .tox .tox-toolbar__primary { background: #fff !important; } body.zoho-theme:not(.pos-sale-theme) .form-group > .input-group { display: table !important; width: 100% !important; clear: both; } body.zoho-theme:not(.pos-sale-theme) .form-group > select.select2 { width: 100% !important; } /* Checkbox-only groups: skip spacer
    , align with sibling field controls */ body.zoho-theme:not(.pos-sale-theme) .form-group > br { display: none; } body.zoho-theme:not(.pos-sale-theme) .form-group:has(> label .input-icheck), body.zoho-theme:not(.pos-sale-theme) .form-group:has(> label input[type="checkbox"]) { padding-top: 22px; } body.zoho-theme:not(.pos-sale-theme) .form-group:has(> label .input-icheck) > label, body.zoho-theme:not(.pos-sale-theme) .form-group:has(> label input[type="checkbox"]) > label { display: inline-flex !important; align-items: center; min-height: 40px; margin-bottom: 0 !important; font-weight: 650 !important; } body.zoho-theme:not(.pos-sale-theme) .input-group { display: table; width: 100%; } body.zoho-theme:not(.pos-sale-theme) .input-group .form-control { border-radius: 10px 0 0 10px !important; } body.zoho-theme:not(.pos-sale-theme) .input-group .select2-container { display: table-cell !important; vertical-align: middle; width: 100% !important; float: none !important; } body.zoho-theme:not(.pos-sale-theme) .input-group .select2-container--default .select2-selection--single { border-radius: 10px 0 0 10px !important; height: 40px !important; min-height: 40px !important; } body.zoho-theme:not(.pos-sale-theme) .input-group-addon { background: #f8fafc !important; border-color: var(--p-line) !important; color: var(--p-muted) !important; min-width: 40px; height: 40px; vertical-align: middle; } body.zoho-theme:not(.pos-sale-theme) .input-group-btn { width: 1%; vertical-align: middle; white-space: nowrap; } body.zoho-theme:not(.pos-sale-theme) .input-group-btn .btn { height: 40px; line-height: 1; padding: 0 12px; border-radius: 0 10px 10px 0 !important; border-color: var(--p-line) !important; box-sizing: border-box; } body.zoho-theme:not(.pos-sale-theme) .input-group-btn:first-child .btn { border-radius: 10px 0 0 10px !important; } /* File browse (bootstrap-fileinput) ? center Browse label */ body.zoho-theme:not(.pos-sale-theme) .btn-file, body.zoho-theme:not(.pos-sale-theme) .input-group-btn .btn-file, body.zoho-theme:not(.pos-sale-theme) .file-input .btn { display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; height: 40px; min-height: 40px; line-height: 1.25 !important; padding: 0 14px !important; box-sizing: border-box; vertical-align: middle; } body.zoho-theme:not(.pos-sale-theme) .btn-file input[type='file'] { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; } /* Validation */ body.zoho-theme:not(.pos-sale-theme) .has-error .form-control, body.zoho-theme:not(.pos-sale-theme) .has-error .select2-container--default .select2-selection--single, body.zoho-theme:not(.pos-sale-theme) .has-error .select2-container--default .select2-selection--multiple { border-color: #f1a8bb !important; box-shadow: 0 0 0 3px rgba(217, 89, 123, 0.15) !important; } body.zoho-theme:not(.pos-sale-theme) .has-error .help-block, body.zoho-theme:not(.pos-sale-theme) .has-error .control-label, body.zoho-theme:not(.pos-sale-theme) .has-error .input-group-addon { color: #9d3150 !important; } body.zoho-theme:not(.pos-sale-theme) .has-success .form-control { border-color: #9bd9c8 !important; } body.zoho-theme:not(.pos-sale-theme) .radio-inline, body.zoho-theme:not(.pos-sale-theme) .checkbox-inline, body.zoho-theme:not(.pos-sale-theme) label.radio-inline, body.zoho-theme:not(.pos-sale-theme) label.checkbox-inline { font-weight: 500 !important; color: var(--p-copy) !important; margin-right: 14px; padding-left: 4px; } body.zoho-theme:not(.pos-sale-theme) .icheckbox_square-blue, body.zoho-theme:not(.pos-sale-theme) .iradio_square-blue { margin-right: 4px; } /* Select2 multi / clear */ body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--multiple { min-height: 40px !important; padding: 4px 6px !important; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--p-blue-soft) !important; border: 1px solid #c7daf0 !important; border-radius: 8px !important; color: var(--p-blue-dark) !important; font-weight: 600; font-size: 12px; padding: 2px 8px; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection--multiple .select2-selection__choice__remove { color: var(--p-blue-dark) !important; margin-right: 4px; } body.zoho-theme:not(.pos-sale-theme) .select2-container--default .select2-selection__clear { color: var(--p-muted) !important; margin-right: 24px !important; font-weight: 700; } /* Datepicker / daterangepicker popovers */ body.zoho-theme:not(.pos-sale-theme) .daterangepicker, body.zoho-theme:not(.pos-sale-theme) .datepicker.dropdown-menu { border: 1px solid var(--p-line) !important; border-radius: 14px !important; box-shadow: var(--p-shadow-lg) !important; padding: 8px !important; } body.zoho-theme:not(.pos-sale-theme) .daterangepicker .ranges li.active, body.zoho-theme:not(.pos-sale-theme) .datepicker table tr td.active, body.zoho-theme:not(.pos-sale-theme) .datepicker table tr td.active:hover { background: var(--p-blue) !important; border-color: var(--p-blue) !important; border-radius: 8px; } /* Modals */ body.zoho-theme:not(.pos-sale-theme) .modal-dialog { margin: 40px auto !important; } body.zoho-theme:not(.pos-sale-theme) .modal-dialog.modal-lg, body.zoho-theme:not(.pos-sale-theme) .modal-dialog.modal-xl { margin-top: 28px !important; } /* Contact modal: reserve select height so select2 init doesn't shift layout */ body.zoho-theme:not(.pos-sale-theme) .contact_modal .form-control.select2, body.zoho-theme:not(.pos-sale-theme) .contact_modal select.select2 { min-height: 40px; } body.zoho-theme:not(.pos-sale-theme) .contact_modal .select2-container { width: 100% !important; } body.zoho-theme:not(.pos-sale-theme) .contact_modal .select2-container .select2-selection--single, body.zoho-theme:not(.pos-sale-theme) .contact_modal .select2-container .select2-selection--multiple { min-height: 40px !important; } /* Contact modal: sticky Save footer; scroll body when More Info expands */ body.zoho-theme:not(.pos-sale-theme) .contact_modal .modal-dialog, body.zoho-theme:not(.pos-sale-theme) #global_contact_modal .modal-dialog { margin: 20px auto !important; max-height: calc(100vh - 40px); height: calc(100vh - 40px); display: flex; flex-direction: column; } body.zoho-theme:not(.pos-sale-theme) .contact_modal .modal-content, body.zoho-theme:not(.pos-sale-theme) #global_contact_modal .modal-content { display: flex; flex-direction: column; flex: 1 1 auto; height: 100%; max-height: 100%; overflow: hidden !important; } body.zoho-theme:not(.pos-sale-theme) .contact_modal .modal-content > form, body.zoho-theme:not(.pos-sale-theme) #global_contact_modal .modal-content > form { display: flex !important; flex-direction: column !important; flex: 1 1 auto !important; height: 100% !important; max-height: 100% !important; min-height: 0 !important; overflow: hidden !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .contact_modal .modal-header, body.zoho-theme:not(.pos-sale-theme) #global_contact_modal .modal-header, body.zoho-theme:not(.pos-sale-theme) .contact_modal .modal-footer, body.zoho-theme:not(.pos-sale-theme) #global_contact_modal .modal-footer { flex: 0 0 auto !important; } body.zoho-theme:not(.pos-sale-theme) .contact_modal .modal-body, body.zoho-theme:not(.pos-sale-theme) #global_contact_modal .modal-body { flex: 1 1 auto !important; overflow-y: scroll !important; overflow-x: hidden; -webkit-overflow-scrolling: touch; min-height: 0 !important; } /* Customer list: hide raw amounts until currency JS converts */ body.zoho-theme:not(.pos-sale-theme) .customers-page .display_currency, body.zoho-theme:not(.pos-sale-theme) .cust-stat-card .display_currency { visibility: hidden; opacity: 0; } body.zoho-theme:not(.pos-sale-theme) .customers-page .display_currency.currency-converted, body.zoho-theme:not(.pos-sale-theme) .cust-stat-card .display_currency.currency-converted { visibility: visible; opacity: 1; } body.zoho-theme:not(.pos-sale-theme) .modal-content { border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow-lg) !important; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .modal-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: #fff !important; border-bottom: 1px solid #eef2f7 !important; padding: 16px 20px !important; } body.zoho-theme:not(.pos-sale-theme) .modal-title { font-size: 16px !important; font-weight: 720 !important; letter-spacing: -0.02em; color: var(--p-ink) !important; flex: 1; } body.zoho-theme:not(.pos-sale-theme) .modal-header .close { opacity: 1; width: 32px; height: 32px; margin: 0 !important; padding: 0 !important; border-radius: 8px; background: #f1f5f9; color: var(--p-muted) !important; font-weight: 400; font-size: 22px; line-height: 28px; text-shadow: none; float: none; } body.zoho-theme:not(.pos-sale-theme) .modal-header .close:hover { background: #e2e8f0; color: var(--p-ink) !important; } body.zoho-theme:not(.pos-sale-theme) .modal-body { padding: 20px 22px !important; background: #fff; } body.zoho-theme:not(.pos-sale-theme) .modal-footer { background: #f8fafc !important; border-top: 1px solid #eef2f7 !important; padding: 14px 20px !important; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; } body.zoho-theme:not(.pos-sale-theme) .modal-footer .btn { margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .modal-backdrop.in { opacity: 0.5; background: #0f1425; } /* View / detail blocks inside modals & pages */ body.zoho-theme:not(.pos-sale-theme) .modal .invoice-col, body.zoho-theme:not(.pos-sale-theme) .view_modal .invoice-col { font-size: 13px; color: var(--p-copy); } body.zoho-theme:not(.pos-sale-theme) dl.dl-horizontal dt, body.zoho-theme:not(.pos-sale-theme) .modal dl dt { color: var(--p-muted); font-weight: 600; font-size: 12.5px; } body.zoho-theme:not(.pos-sale-theme) dl.dl-horizontal dd, body.zoho-theme:not(.pos-sale-theme) .modal dl dd { color: var(--p-ink); font-weight: 600; margin-bottom: 8px; } body.zoho-theme:not(.pos-sale-theme) .callout, body.zoho-theme:not(.pos-sale-theme) .info-box { border-radius: 12px !important; box-shadow: var(--p-shadow-sm); border: 1px solid var(--p-line); } /* ??????????????????????????????????????????????????????????? DataTables toolbar ? fits 10" laptop ? large desktop Same design everywhere: [Show entries] [exports?] [Search] Search stays top-right; export buttons wrap inside middle cell ??????????????????????????????????????????????????????????? */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper { position: relative; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar { display: grid !important; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start !important; justify-content: stretch; column-gap: 10px; row-gap: 10px; margin: 0 0 14px !important; text-align: left !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child::before, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child::after, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20::before, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20::after, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar::before, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar::after { display: none !important; } /* Flatten wrappers so length / buttons / filter are direct grid items */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar__left, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar__right, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child > [class*="col-"], body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 > [class*="col-"] { display: contents !important; width: auto !important; max-width: none !important; float: none !important; padding: 0 !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dataTables_length { grid-column: 1; grid-row: 1; align-self: center; margin: 0 !important; float: none !important; display: flex !important; align-items: center !important; min-height: 36px; white-space: nowrap; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar .dt-buttons, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dt-buttons, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dt-buttons, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons { grid-column: 2; grid-row: 1; align-self: center; margin: 0 !important; float: none !important; display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 6px; min-width: 0; max-width: 100%; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar .dataTables_filter, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dataTables_filter, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dataTables_filter { grid-column: 3; grid-row: 1; align-self: center; justify-self: end; margin: 0 !important; float: none !important; display: flex !important; align-items: center !important; min-height: 36px; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter label { display: inline-flex !important; align-items: center !important; margin: 0 !important; gap: 0 !important; line-height: 1 !important; white-space: nowrap !important; font-weight: 500 !important; width: 100%; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-my-2 { margin: 0 !important; vertical-align: middle !important; flex: 0 0 auto; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { width: clamp(140px, 18vw, 220px) !important; min-width: 0 !important; max-width: 220px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; border-radius: 10px !important; vertical-align: middle !important; box-sizing: border-box !important; } /* Processing sits centered over the table ? never cropped by box overflow */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar > .dataTables_processing, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 > .dataTables_processing, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .dataTables_processing { position: absolute !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; z-index: 30 !important; grid-column: unset !important; grid-row: unset !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length { margin-bottom: 0 !important; float: none !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length label { display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; white-space: nowrap !important; margin: 0 !important; font-size: 13px !important; font-weight: 500 !important; color: var(--p-muted) !important; line-height: 1.2 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length select, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length .form-control { display: inline-block !important; width: auto !important; min-width: 64px !important; max-width: 84px !important; height: 36px !important; min-height: 36px !important; margin: 0 !important; padding: 4px 26px 4px 10px !important; float: none !important; position: static !important; vertical-align: middle !important; flex: 0 0 auto !important; box-sizing: border-box !important; } /* 14"+ (?1280px+): always show icon + text; text size shrinks with screen */ @media (min-width: 1280px) { body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn { font-size: clamp(11px, 0.72vw + 0.2rem, 12.5px) !important; line-height: 1 !important; width: auto !important; min-width: 0 !important; max-width: none !important; height: 36px !important; min-height: 36px !important; padding: 0 clamp(8px, 0.65vw, 12px) !important; gap: 5px !important; justify-content: center !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn i, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn i, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn .fa, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn .fa { font-size: clamp(12px, 0.7vw, 14px) !important; line-height: 1 !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length label { font-size: clamp(12px, 0.7vw, 13px) !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { width: clamp(140px, 14vw, 220px) !important; font-size: clamp(12px, 0.7vw, 13.5px) !important; } } /* 14?15" band: slightly tighter labels so the row never overflows */ @media (min-width: 1280px) and (max-width: 1440px) { body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn { font-size: 11px !important; padding: 0 8px !important; gap: 4px !important; height: 34px !important; min-height: 34px !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons { gap: 4px; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { width: clamp(130px, 12vw, 170px) !important; height: 34px !important; min-height: 34px !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length select, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_length .form-control { height: 34px !important; min-height: 34px !important; } } /* Below 14" / small laptop: icons only */ @media (max-width: 1279px) { body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn { font-size: 0 !important; line-height: 0 !important; width: 34px !important; min-width: 34px !important; max-width: 34px !important; height: 34px !important; min-height: 34px !important; padding: 0 !important; justify-content: center !important; gap: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn i, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn i, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn .fa, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn .fa, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .btn svg, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons .tw-dw-btn svg { font-size: 13px !important; line-height: 1 !important; width: 13px; height: 13px; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { width: clamp(120px, 16vw, 170px) !important; } } /* Tablet / small laptop: keep same 3-col grid, slightly tighter */ @media (max-width: 1199px) { body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar { column-gap: 8px; row-gap: 8px; } body.zoho-theme:not(.pos-sale-theme) .content-wrapper > .content:not(.ecom-dash):not(.inv-dash):not(.crm-dash):not(.japs-dashboard-page), body.zoho-theme:not(.pos-sale-theme) .zoho-app-body > .content:not(.ecom-dash):not(.inv-dash):not(.crm-dash):not(.japs-dashboard-page), body.zoho-theme:not(.pos-sale-theme) .content-header { padding-left: 16px !important; padding-right: 16px !important; } } /* Phone: stack cleanly ? length+search row, then buttons */ @media (max-width: 767px) { body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar { grid-template-columns: 1fr auto !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dataTables_length, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dataTables_length { grid-column: 1 !important; grid-row: 1 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar .dataTables_filter, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dataTables_filter, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dataTables_filter { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; width: auto; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-toolbar .dt-buttons, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .row.margin-bottom-20 .dt-buttons, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper > .row:first-child .dt-buttons, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dt-buttons { grid-column: 1 / -1 !important; grid-row: 2 !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { width: min(160px, 42vw) !important; max-width: 180px !important; } } /* Active page ? style the clickable child, never the wrapping
  • */ body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate .paginate_button.current > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > a, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.active > span, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > .paginate_button.current, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate > span > .paginate_button.current { background: var(--p-blue) !important; border-color: var(--p-blue) !important; color: #fff !important; border-radius: 999px !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.current, body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_paginate ul.pagination > li.paginate_button.current:hover { background: transparent !important; border: 0 !important; box-shadow: none !important; color: inherit !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_empty, body.zoho-theme:not(.pos-sale-theme) td.dataTables_empty { padding: 36px 16px !important; color: var(--p-muted) !important; font-size: 13px !important; text-align: center !important; } body.zoho-theme:not(.pos-sale-theme) .bg-gray.footer-total, body.zoho-theme:not(.pos-sale-theme) tr.bg-gray.footer-total, body.zoho-theme:not(.pos-sale-theme) .footer-total { background: #f8fafc !important; color: var(--p-ink) !important; font-weight: 700; } body.zoho-theme:not(.pos-sale-theme) .bg-gray.footer-total td, body.zoho-theme:not(.pos-sale-theme) tr.footer-total td { border-top: 1px solid #e2e8f0 !important; padding-top: 12px !important; padding-bottom: 12px !important; } /* Status pills already styled; soft variants for muted labels */ body.zoho-theme:not(.pos-sale-theme) .label.label-default, body.zoho-theme:not(.pos-sale-theme) .badge.badge-default { background: #f1f5f9 !important; color: #475569 !important; border-color: #e2e8f0; } /* Daisy / tw-dw buttons on list pages */ body.zoho-theme:not(.pos-sale-theme) .tw-dw-btn { border-radius: 10px !important; font-weight: 600 !important; min-height: 36px; } body.zoho-theme:not(.pos-sale-theme) .tw-dw-btn-xs { min-height: 30px; border-radius: 8px !important; font-size: 12px !important; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom { background: #fff !important; border: 1px solid var(--p-line) !important; border-radius: 16px !important; box-shadow: var(--p-shadow) !important; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom > .nav-tabs { background: #f8fafc !important; border-bottom: 1px solid #eef2f7 !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .nav-tabs-custom > .tab-content { background: #fff !important; padding: 16px 18px !important; } @media (max-width: 767px) { body.zoho-theme:not(.pos-sale-theme) .content-wrapper > .content:not(.ecom-dash):not(.inv-dash):not(.crm-dash), body.zoho-theme:not(.pos-sale-theme) .content-header { padding-left: 16px !important; padding-right: 16px !important; } body.zoho-theme:not(.pos-sale-theme) .modal-dialog { margin: 16px auto !important; width: calc(100% - 24px) !important; } body.zoho-theme:not(.pos-sale-theme) .dataTables_wrapper .dataTables_filter input { min-width: 0; width: min(160px, 42vw) !important; max-width: 180px !important; } } /* ?????????????????????????????????????? RTL / PRINT / RESPONSIVE ?????????????????????????????????????? */ html[dir="rtl"] body.zoho-theme .side-bar { border-right: 0 !important; border-left: 1px solid #1c2338 !important; } html[dir="rtl"] body.zoho-theme #side-bar .theme-sidebar-active { box-shadow: inset -3px 0 0 #6d70f7; } html[dir="rtl"] body.zoho-theme .zoho-stat-card::before { left: 0; right: 0; } @media (max-width: 767px) { body.zoho-theme .content-header, body.zoho-theme section.content { padding-left: 14px !important; padding-right: 14px !important; } body.zoho-theme .zoho-topbar__org { display: none; } body.zoho-theme .box-header, body.zoho-theme .box-body { padding-left: 14px !important; padding-right: 14px !important; } } @media print { body.zoho-theme .zoho-topbar, body.zoho-theme .side-bar, body.zoho-theme .zoho-sidebar-footer, body.zoho-theme .scrolltop, body.zoho-theme .no-print { display: none !important; } body.zoho-theme .zoho-main-column, body.zoho-theme #scrollable-container, body.zoho-theme .content-wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #fff !important; box-shadow: none !important; } body.zoho-theme .box, body.zoho-theme .table { box-shadow: none !important; border-color: #ccc !important; } } /* -------------------------------------- Business Settings ? all tabs screen-wise -------------------------------------- */ body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-container { overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-container::before, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-container::after { display: table; content: " "; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-container::after { clear: both; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab { min-width: 0; max-width: 100%; box-sizing: border-box; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content { padding-left: 16px; padding-right: 16px; padding-bottom: 16px; overflow-x: hidden; max-width: 100%; box-sizing: border-box; } /* Every row in every settings tab */ body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row { margin-left: -8px; margin-right: -8px; display: flex; flex-wrap: wrap; width: auto; max-width: none; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > [class*="col-"], body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content > [class*="col-"] { float: none !important; min-width: 0; max-width: 100%; padding-left: 8px; padding-right: 8px; box-sizing: border-box; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .clearfix, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content > .clearfix { display: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-sm-12, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-md-12, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-xs-12, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-lg-12 { width: 100% !important; flex: 0 0 100%; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .form-group { max-width: 100%; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .form-group > label { white-space: normal; word-break: break-word; line-height: 1.35; max-width: 100%; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .input-group, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .form-control, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .select2-container, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .bootstrap-timepicker, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .well { max-width: 100% !important; box-sizing: border-box; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .input-group, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .form-control, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .select2-container, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input { width: 100% !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .input-group .select2-container { display: table-cell !important; width: 100% !important; max-width: 100% !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .select2-container .select2-selection--single, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .select2-container .select2-selection--single .select2-selection__rendered { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input { overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .input-group { display: flex !important; flex-wrap: wrap; width: 100% !important; gap: 6px; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .form-control, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .file-caption { flex: 1 1 140px; min-width: 0; width: auto !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .input-group-btn { display: flex !important; flex-wrap: wrap; gap: 6px; width: auto !important; white-space: normal; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .btn, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .btn-file { flex: 0 0 auto; border-radius: 10px !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .table-responsive, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .table-responsive { width: 100%; max-width: 100%; overflow-x: auto; } /* Laptop / 14" ? max 2 fields per row across ALL tabs */ @media (max-width: 1399px) { body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-xs-3, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-sm-3, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-md-3, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-lg-3, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-xs-4, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-sm-4, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-md-4, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-lg-4, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-sm-6, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-md-6, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-sm-8, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-md-8 { width: 50% !important; flex: 0 0 50%; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-sm-12, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-md-12, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-xs-12, body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > .col-lg-12 { width: 100% !important; flex: 0 0 100%; } } /* Tablet ? horizontal tab strip + single column fields */ @media (max-width: 991px) { body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-menu { margin-bottom: 12px; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-menu .list-group { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 6px; padding: 8px; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-menu .list-group > a { flex: 0 0 auto; white-space: nowrap; border-radius: 10px !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-menu .list-group > a.active:after { display: none; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content { padding-left: 12px; padding-right: 12px; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > [class*="col-"], body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content > [class*="col-"] { width: 100% !important; flex: 0 0 100%; } } @media (max-width: 767px) { body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content .row > [class*="col-"], body.zoho-theme:not(.pos-sale-theme) .business-settings-page .pos-tab-content > [class*="col-"] { width: 100% !important; flex: 0 0 100%; } } /* Match final control heights before plugins transform them */ body.zoho-theme:not(.pos-sale-theme) .business-settings-page select.select2, body.zoho-theme:not(.pos-sale-theme) .business-settings-page select.form-control { height: 40px !important; min-height: 40px !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .select2-container .select2-selection--single { height: 40px !important; min-height: 40px !important; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page input[type="file"] { min-height: 40px; } body.zoho-theme:not(.pos-sale-theme) .business-settings-page .file-input .input-group { min-height: 40px; } /* Purchase Attach Document ? compact, hide Cancel, keep Browse inside box */ body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document { max-width: 100%; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input { width: 100% !important; max-width: 100% !important; overflow: hidden; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .input-group { display: flex !important; flex-wrap: nowrap !important; align-items: stretch; width: 100% !important; max-width: 100% !important; min-height: 0 !important; margin: 0; gap: 0; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .form-control, body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .file-caption { flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; height: 30px !important; min-height: 30px !important; padding: 4px 8px !important; font-size: 12px !important; overflow: hidden; text-overflow: ellipsis; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .input-group-btn { display: flex !important; flex: 0 0 auto !important; width: auto !important; white-space: nowrap; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .btn, body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .btn-file, body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .btn-file { height: 30px !important; min-height: 30px !important; padding: 0 8px !important; font-size: 11px !important; line-height: 1 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; box-sizing: border-box !important; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .fileinput-cancel-button, body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .file-input .fileinput-upload-button { display: none !important; } body.zoho-theme:not(.pos-sale-theme) .purchase-attach-document .help-block, body.zoho-theme:not(.pos-sale-theme) .purchase-attach-help { font-size: 10px !important; line-height: 1.35 !important; margin-top: 4px !important; margin-bottom: 0 !important; color: #64748b !important; word-break: break-word; } /* Purchase entry headers ? match reference wrap: full words, natural wrap, smaller on small screens */ body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table.table > thead > tr > th, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table thead th { background: #f7f9fc !important; color: #334155 !important; font-size: 13px !important; font-weight: 700 !important; padding: 8px 4px !important; line-height: 1.25 !important; letter-spacing: 0 !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; text-transform: none !important; text-align: center !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table thead th .th-2line { display: block !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; hyphens: none !important; font-size: inherit !important; max-width: 100%; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table td.purchase-product-name-cell, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table > tbody > tr > td:nth-child(2) { width: 16% !important; min-width: 120px; text-align: left !important; white-space: normal !important; word-break: normal !important; overflow-wrap: normal !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .purchase-product-name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; white-space: normal !important; word-break: normal !important; line-height: 1.3; font-size: 12px !important; font-weight: 600; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .purchase-product-stock { display: block; white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; font-size: 11px !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table td.purchase-line-tax-cell { min-width: 88px; width: 9% !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .purchase-line-tax-wrap { display: flex; flex-direction: column; gap: 4px; width: 100%; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .purchase-line-tax-wrap .select2-container { width: 100% !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .purchase-line-tax-wrap .purchase_product_unit_tax_text { display: block; text-align: center; font-size: 11px !important; font-weight: 600; border: 0; background: transparent; padding: 0; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table > thead > tr > th:last-child, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table > tbody > tr > td:last-child, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table td.purchase-row-remove-cell { width: 30px !important; min-width: 30px !important; max-width: 34px !important; text-align: left !important; vertical-align: middle !important; padding: 2px 4px 2px 6px !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .remove_purchase_entry_row { font-size: 12px !important; width: auto; height: auto; display: inline-block !important; margin: 0 !important; padding: 0 !important; float: none !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .form-control { padding: 4px 5px !important; font-size: 13px !important; height: 32px !important; min-height: 32px !important; } @media (max-width: 1400px) { body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table.table > thead > tr > th, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table thead th { font-size: 11px !important; padding: 6px 3px !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .form-control { font-size: 12px !important; height: 30px !important; min-height: 30px !important; } } @media (max-width: 1200px) { body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table.table > thead > tr > th, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table thead th { font-size: 10px !important; padding: 5px 2px !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table td { padding: 2px 1px !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .form-control { font-size: 11px !important; height: 28px !important; min-height: 28px !important; padding: 2px 3px !important; } } @media (max-width: 992px) { body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table.table > thead > tr > th, body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table thead th { font-size: 9px !important; padding: 4px 1px !important; } body.zoho-theme:not(.pos-sale-theme) #purchase_entry_table .form-control { font-size: 10px !important; height: 26px !important; min-height: 26px !important; } } /* Product create/edit image upload — full image fill + aligned buttons */ body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input { width: 100% !important; max-width: 100%; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview { border: 1px solid #e2e8f0 !important; border-radius: 8px !important; padding: 10px !important; background: #f8fafc !important; text-align: left !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview .close, body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-drop-zone .close { display: none !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview-frame, body.zoho-theme:not(.pos-sale-theme) .product-image-upload .krajee-default.file-preview-frame { float: none !important; display: inline-block !important; width: 140px !important; height: auto !important; max-width: 140px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 8px !important; border: 1px solid #e2e8f0 !important; box-shadow: none !important; background: #fff !important; position: relative !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview-frame .kv-file-content, body.zoho-theme:not(.pos-sale-theme) .product-image-upload .krajee-default.file-preview-frame .kv-file-content { width: 140px !important; height: 140px !important; max-height: 140px !important; overflow: hidden !important; padding: 0 !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview-frame img.file-preview-image, body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview-image { width: 140px !important; height: 140px !important; max-width: 140px !important; max-height: 140px !important; min-width: 140px !important; min-height: 140px !important; object-fit: cover !important; object-position: center center !important; display: block !important; margin: 0 !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-preview-frame .file-thumbnail-footer { position: static !important; height: auto !important; background: #fff !important; padding: 4px 6px !important; border-top: 1px solid #eef2f7 !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .fileinput-cancel-button { display: none !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input > .input-group { display: flex !important; align-items: stretch !important; width: 100% !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input > .input-group .form-control, body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input > .input-group .file-caption { flex: 1 1 auto; min-width: 0 !important; height: 34px !important; min-height: 34px !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input > .input-group .input-group-btn { display: flex !important; width: auto !important; } body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input .btn, body.zoho-theme:not(.pos-sale-theme) .product-image-upload .file-input .btn-file { height: 34px !important; min-height: 34px !important; padding: 0 12px !important; font-size: 12px !important; line-height: 32px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }