/* Tailwind source imports are resolved at build time, never requested by the browser. */ @theme { --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --color-brand-50: #f4f3fb; --color-brand-100: #e8e6f6; --color-brand-200: #d3d0ed; --color-brand-300: #b5b0df; --color-brand-400: #8f88c8; --color-brand-500: #6b65ad; --color-brand-600: #4f4c8f; --color-brand-700: #403d75; --color-brand-800: #34325f; --color-brand-900: #2c2a50; --color-brand-950: #19182f; --shadow-soft: 0 18px 48px -26px var(--ok-shadow-0f172a_a220,rgb(15 23 42 / 0.22)); --shadow-card: 0 12px 32px -24px var(--ok-shadow-0f172a_a300,rgb(15 23 42 / 0.3)); --shadow-brand: 0 14px 28px -18px var(--ok-shadow-4f4c8f_a720,rgb(79 76 143 / 0.72)); } /* * Design System — Typographic floor (UI 1.0.1) * No interface text may use a font size below 0.65rem. * Keep source and compiled assets aligned when generating future builds. */ :root { --ok-font-size-min: .65rem; } @layer base { html { scroll-behavior: smooth; } body { min-width: 320px; } button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; } :focus-visible { outline: 3px solid var(--ok-line-2563eb_a280,rgb(37 99 235 / 0.28)); outline-offset: 2px; } dialog::backdrop { backdrop-filter: blur(4px); } .material-symbols-rounded { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; line-height: 1; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } } /* Identity module — Phase 0.2 */ @layer components { .identity-guest-body{min-width:320px;min-height:100vh;background:var(--ok-surface-f5f7fb,#f5f7fb);color:var(--ok-ink-172033,#172033)}.identity-guest-shell{min-height:100vh;display:grid;grid-template-columns:minmax(18rem,38rem) minmax(0,1fr)}.identity-brand-panel{position:relative;overflow:hidden;display:flex;flex-direction:column;padding:clamp(2rem,5vw,5rem);color:var(--ok-ink-ffffff,#fff);background:linear-gradient(145deg,var(--ok-surface-4f4c8f,#4f4c8f) 0%,var(--ok-surface-34325f,#34325f) 58%,var(--ok-surface-2563eb,#2563eb) 140%)}.identity-brand-panel:after{content:"";position:absolute;width:28rem;height:28rem;border-radius:999px;right:-12rem;bottom:-12rem;background:var(--ok-surface-ffffff_a80,rgba(255,255,255,.08))}.identity-brand-mark{display:grid;place-items:center;width:4rem;height:4rem;border-radius:1.35rem;background:var(--ok-surface-ffffff_a160,rgba(255,255,255,.16));font-size:1.7rem;font-weight:900;box-shadow:0 20px 45px var(--ok-shadow-000000_a180,rgba(0,0,0,.18))}.identity-brand-panel h1{margin:.6rem 0 0;font-size:clamp(2.3rem,5vw,4.5rem);line-height:1;font-weight:900;letter-spacing:-.05em}.identity-brand-copy{position:relative;z-index:1;margin-top:auto;display:flex;gap:.8rem;align-items:flex-start;max-width:25rem;color:var(--ok-ink-ffffff_a820,rgba(255,255,255,.82));line-height:1.7}.identity-brand-copy .material-symbols-rounded{margin-top:.2rem}.identity-auth-panel{display:grid;place-items:center;padding:1.25rem}.identity-auth-card{width:min(100%,31rem);padding:clamp(1.5rem,4vw,2.75rem);border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.75rem;background:var(--ok-surface-ffffff_a960,rgba(255,255,255,.96));box-shadow:0 24px 65px -35px var(--ok-shadow-0f172a_a350,rgba(15,23,42,.35))}.identity-auth-icon,.identity-role-icon{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:1rem;background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-4f4c8f,#4f4c8f)}.identity-auth-icon .material-symbols-rounded,.identity-role-icon .material-symbols-rounded{font-size:1.65rem}.identity-eyebrow{margin:.9rem 0 .45rem;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.72rem;font-weight:850;letter-spacing:.14em;text-transform:uppercase}.identity-auth-card h2,.identity-page h1{margin:0;color:var(--ok-ink-0f172a,#0f172a);font-size:clamp(1.75rem,4vw,2.5rem);line-height:1.12;font-weight:900;letter-spacing:-.035em}.identity-auth-description,.identity-page-header p,.identity-panel-header p{margin:.8rem 0 0;color:var(--ok-ink-64748b,#64748b);line-height:1.65}.identity-form{display:grid;gap:.75rem;margin-top:1.5rem}.identity-form label,.identity-form-layout label{color:var(--ok-ink-334155,#334155);font-size:.86rem;font-weight:800}.identity-form input,.identity-form textarea,.identity-form select,.identity-form-layout input,.identity-form-layout textarea,.identity-filters select{width:100%;min-height:3rem;padding:.75rem .9rem;border:1px solid var(--ok-line-cbd5e1,#cbd5e1);border-radius:.8rem;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-0f172a,#0f172a)}.identity-input-wrap{display:flex;align-items:center;gap:.65rem;min-height:3rem;padding:0 .85rem;border:1px solid var(--ok-line-cbd5e1,#cbd5e1);border-radius:.8rem;background:var(--ok-surface-ffffff,#fff)}.identity-input-wrap input{min-width:0;width:100%;border:0;outline:0;background:transparent}.identity-input-wrap .material-symbols-rounded{color:var(--ok-ink-94a3b8,#94a3b8)}.identity-otp-input{font-size:2rem!important;font-weight:900;text-align:center;letter-spacing:.45em;font-variant-numeric:tabular-nums}.identity-primary-button,.identity-secondary-button,.identity-primary-action,.identity-danger-action{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:3rem;padding:.7rem 1rem;border-radius:.8rem;font-size:.88rem;font-weight:850;text-decoration:none}.identity-primary-button,.identity-primary-action{border:1px solid var(--ok-line-4f4c8f,#4f4c8f);background:linear-gradient(135deg,var(--ok-surface-58578f,#58578f),var(--ok-surface-2a2468,#2a2468));color:var(--ok-ink-ffffff,#fff);box-shadow:0 14px 28px -18px var(--ok-shadow-4f4c8f_a720,rgba(79,76,143,.72))}.identity-secondary-button{border:1px solid var(--ok-line-cbd5e1,#cbd5e1);background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-334155,#334155)}.identity-danger-action{border:1px solid var(--ok-line-fecaca,#fecaca);background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-b91c1c,#b91c1c)}.identity-field-error{margin:0;color:var(--ok-ink-b91c1c,#b91c1c);font-size:.8rem;font-weight:700}.identity-security-note,.identity-message{display:flex;gap:.55rem;align-items:flex-start;margin:1rem 0 0;padding:.8rem;border-radius:.8rem;background:var(--ok-surface-f8fafc,#f8fafc);color:var(--ok-ink-64748b,#64748b);font-size:.8rem;line-height:1.5}.identity-back-link{display:inline-flex;align-items:center;gap:.3rem;margin-bottom:1rem;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.8rem;font-weight:800;text-decoration:none}.identity-page{max-width:92rem;margin:0 auto;display:grid;gap:1.25rem}.identity-page-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1.25rem;padding:1.5rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.5rem;background:linear-gradient(135deg,var(--ok-surface-ffffff,#fff),var(--ok-surface-f8f7fd,#f8f7fd));box-shadow:0 12px 32px -24px var(--ok-shadow-0f172a_a300,rgba(15,23,42,.3))}.identity-page-header .identity-eyebrow{margin:0 0 .45rem}.identity-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.identity-metric-card{display:flex;align-items:center;gap:1rem;padding:1.25rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.15rem;background:var(--ok-surface-ffffff,#fff);box-shadow:0 12px 32px -24px var(--ok-shadow-0f172a_a300,rgba(15,23,42,.3))}.identity-metric-card>.material-symbols-rounded{display:grid;place-items:center;width:3rem;height:3rem;border-radius:.9rem;background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-4f4c8f,#4f4c8f)}.identity-metric-card p{margin:0;color:var(--ok-ink-64748b,#64748b);font-size:.78rem}.identity-metric-card strong{display:block;margin-top:.25rem;font-size:1.55rem;color:var(--ok-ink-0f172a,#0f172a)}.identity-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.identity-panel{padding:1.25rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.25rem;background:var(--ok-surface-ffffff,#fff);box-shadow:0 12px 32px -24px var(--ok-shadow-0f172a_a300,rgba(15,23,42,.3))}.identity-panel h2{margin:0;color:var(--ok-ink-0f172a,#0f172a);font-size:1.15rem;font-weight:900}.identity-action-list,.identity-card-list{display:grid;gap:.65rem;margin-top:1rem}.identity-action-list a,.identity-card-list>div{display:flex;align-items:center;gap:.8rem;padding:.85rem;border:1px solid var(--ok-line-eef2f7,#eef2f7);border-radius:.9rem;color:var(--ok-ink-334155,#334155);text-decoration:none}.identity-action-list a:hover{border-color:var(--ok-line-d3d0ed,#d3d0ed);background:var(--ok-surface-faf9fe,#faf9fe)}.identity-action-list .material-symbols-rounded,.identity-card-list .material-symbols-rounded{color:var(--ok-ink-4f4c8f,#4f4c8f)}.identity-action-list p,.identity-card-list p{margin:0}.identity-action-list strong,.identity-card-list strong{display:block;color:var(--ok-ink-0f172a,#0f172a);font-size:.86rem}.identity-action-list small,.identity-card-list small{display:block;margin-top:.18rem;color:var(--ok-ink-64748b,#64748b)}.identity-card-list .identity-status{margin-left:auto}.identity-card-list em{margin-left:.35rem;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.68rem;font-style:normal}.identity-timeline{display:grid;gap:.9rem;margin-top:1rem}.identity-timeline>div{display:flex;gap:.75rem}.identity-timeline>div>span{width:.55rem;height:.55rem;margin-top:.35rem;border-radius:999px;background:var(--ok-surface-4f4c8f,#4f4c8f)}.identity-timeline p{margin:0}.identity-timeline strong{display:block;color:var(--ok-ink-334155,#334155);font-size:.84rem}.identity-timeline small{display:block;margin-top:.2rem;color:var(--ok-ink-94a3b8,#94a3b8)}.identity-nav-link{display:flex;align-items:center;gap:.75rem;padding:.72rem .75rem;border-radius:.75rem;color:var(--ok-ink-64748b,#64748b);font-size:.86rem;font-weight:700;text-decoration:none}.identity-nav-link:hover{background:var(--ok-surface-f8fafc,#f8fafc);color:var(--ok-ink-334155,#334155)}.identity-nav-link-active{background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-403d75,#403d75)}.identity-nav-link .material-symbols-rounded{font-size:1.25rem}.identity-flash{display:flex;align-items:center;gap:.55rem;max-width:92rem;margin:0 auto 1rem;padding:.8rem 1rem;border:1px solid var(--ok-line-bbf7d0,#bbf7d0);border-radius:.8rem;background:var(--ok-surface-f0fdf4,#f0fdf4);color:var(--ok-ink-166534,#166534);font-size:.85rem;font-weight:750}.identity-filters{display:grid;grid-template-columns:minmax(15rem,1fr) 13rem;gap:.8rem;margin-bottom:1rem}.identity-responsive-table{overflow-x:auto}.identity-responsive-table table{width:100%;border-collapse:collapse}.identity-responsive-table th,.identity-responsive-table td{padding:.85rem;border-bottom:1px solid var(--ok-line-eef2f7,#eef2f7);text-align:left;vertical-align:middle;font-size:.82rem}.identity-responsive-table th{color:var(--ok-ink-64748b,#64748b);font-size:.72rem;text-transform:uppercase;letter-spacing:.06em}.identity-responsive-table td strong,.identity-responsive-table td small{display:block}.identity-responsive-table td small{margin-top:.2rem;color:var(--ok-ink-64748b,#64748b)}.identity-status{display:inline-flex;align-items:center;padding:.3rem .55rem;border-radius:999px;font-size:.7rem;font-weight:850}.identity-status-active{background:var(--ok-surface-ecfdf5,#ecfdf5);color:var(--ok-ink-047857,#047857)}.identity-status-suspended{background:var(--ok-surface-fff7ed,#fff7ed);color:var(--ok-ink-c2410c,#c2410c)}.identity-status-inactive{background:var(--ok-surface-f1f5f9,#f1f5f9);color:var(--ok-ink-64748b,#64748b)}.identity-row-action{border:0;background:transparent;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.75rem;font-weight:850;cursor:pointer}.identity-pagination{margin-top:1rem}.identity-form-layout{display:grid;gap:1.5rem}.identity-form-layout>section{display:grid;gap:.8rem;padding-bottom:1.25rem;border-bottom:1px solid var(--ok-line-eef2f7,#eef2f7)}.identity-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}.identity-form-grid>div{display:grid;gap:.4rem}.identity-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.identity-check-grid label{display:flex;gap:.65rem;align-items:flex-start;padding:.8rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:.8rem;cursor:pointer}.identity-check-grid input{width:1rem!important;min-height:auto!important;margin-top:.2rem}.identity-check-grid strong,.identity-check-grid small{display:block}.identity-check-grid small{margin-top:.2rem;color:var(--ok-ink-64748b,#64748b);font-weight:500}.identity-form-actions{display:flex;justify-content:flex-end;gap:.75rem}.identity-card-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}.identity-card-grid .identity-panel{display:flex;flex-direction:column;gap:.8rem}.identity-card-grid p{margin:0;color:var(--ok-ink-64748b,#64748b);line-height:1.55}.identity-card-grid dl{display:flex;gap:1.5rem;margin:0}.identity-card-grid dl div{display:grid}.identity-card-grid dt{color:var(--ok-ink-94a3b8,#94a3b8);font-size:.7rem}.identity-card-grid dd{margin:.2rem 0 0;font-weight:900}.identity-protected-badge{display:inline-flex;align-self:flex-start;padding:.35rem .6rem;border-radius:999px;background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.72rem;font-weight:850}.identity-empty{padding:1.5rem;text-align:center;color:var(--ok-ink-94a3b8,#94a3b8)}.identity-panel textarea{resize:vertical} } @media(max-width:960px){.identity-guest-shell{grid-template-columns:1fr}.identity-brand-panel{min-height:15rem}.identity-brand-copy{margin-top:2.5rem}.identity-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.identity-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:680px){.identity-brand-panel{padding:1.5rem}.identity-auth-panel{padding:.75rem}.identity-page-header{align-items:flex-start;flex-direction:column}.identity-metrics,.identity-grid-2,.identity-form-grid,.identity-check-grid,.identity-card-grid,.identity-filters{grid-template-columns:1fr}.identity-primary-action,.identity-danger-action{width:100%}.identity-responsive-table thead{display:none}.identity-responsive-table table,.identity-responsive-table tbody,.identity-responsive-table tr,.identity-responsive-table td{display:block;width:100%}.identity-responsive-table tr{padding:.8rem 0;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0)}.identity-responsive-table td{display:grid;grid-template-columns:7rem minmax(0,1fr);gap:.75rem;padding:.35rem 0;border:0}.identity-responsive-table td:before{content:attr(data-label);color:var(--ok-ink-94a3b8,#94a3b8);font-size:.7rem;font-weight:800;text-transform:uppercase}.identity-form-actions{flex-direction:column-reverse}.identity-form-actions>*{width:100%}} /* Identity UI stabilization — Hotfix 0.2.12 */ @layer components { .identity-guest-shell { grid-template-columns: minmax(20rem, 42%) minmax(0, 1fr); } .identity-brand-panel { min-height: 100vh; isolation: isolate; } .identity-brand-panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 15%, var(--ok-surface-ffffff_a170,rgba(255,255,255,.17)), transparent 15rem), radial-gradient(circle at 85% 75%, var(--ok-surface-2563eb_a300,rgba(37,99,235,.30)), transparent 20rem); } .identity-auth-panel { min-width: 0; background: radial-gradient(circle at 95% 5%, var(--ok-surface-4f4c8f_a90,rgba(79,76,143,.09)), transparent 22rem), var(--ok-surface-f6f8fc,#f6f8fc); } .identity-auth-card { position: relative; overflow: hidden; } .identity-auth-card::before { content: ""; position: absolute; inset: 0 0 auto; height: .25rem; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); } .identity-primary-button { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; } .identity-primary-button:hover { transform: translateY(-1px); box-shadow: 0 18px 34px -18px var(--ok-shadow-4f4c8f_a820,rgba(79,76,143,.82)); } .identity-primary-button:disabled { cursor: wait; opacity: .68; transform: none; } } @media (max-width: 760px) { .identity-guest-shell { grid-template-columns: 1fr; } .identity-brand-panel { min-height: auto; padding: 1.4rem; } .identity-brand-panel h1 { font-size: 2.2rem; } .identity-brand-copy { margin-top: 2rem; } .identity-auth-panel { padding: 1rem; } } /* -------------------------------------------------------------------------- Fase 0.3 — AppShell e Design System administrativo -------------------------------------------------------------------------- */ @layer base { :root { --app-sidebar-width: 17.5rem; --app-sidebar-compact-width: 5.5rem; --app-topbar-height: 4.75rem; --app-surface: var(--ok-surface-ffffff,#ffffff); --app-surface-subtle: var(--ok-surface-f8fafc,#f8fafc); --app-border: var(--ok-line-e2e8f0,#e2e8f0); --app-text: var(--ok-ink-0f172a,#0f172a); --app-muted: var(--ok-ink-64748b,#64748b); --app-primary: var(--ok-ink-4f4c8f,#4f4c8f); --app-secondary: var(--ok-ink-2563eb,#2563eb); } [hidden] { display: none !important; } body.app-body { min-height: 100vh; margin: 0; overflow-x: hidden; background: radial-gradient(circle at 95% 0%, var(--ok-surface-4f4c8f_a80,rgba(79, 76, 143, .08)), transparent 26rem), var(--ok-surface-f6f8fc,#f6f8fc); color: var(--ok-ink-0f172a,var(--app-text)); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; text-rendering: optimizeLegibility; } button, summary { font: inherit; } summary::-webkit-details-marker { display: none; } } @layer components { .app-skip-link { position: fixed; top: .75rem; left: .75rem; z-index: 100; translate: 0 -150%; border-radius: .75rem; background: var(--ok-surface-ffffff,#fff); padding: .75rem 1rem; color: var(--ok-ink-0f172a,#0f172a); font-size: .875rem; font-weight: 800; box-shadow: 0 18px 50px var(--ok-shadow-0f172a_a200,rgba(15, 23, 42, .2)); } .app-skip-link:focus { translate: 0; } .app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--app-sidebar-width) minmax(0, 1fr); transition: grid-template-columns .22s ease; } .app-shell--compact { grid-template-columns: var(--app-sidebar-compact-width) minmax(0, 1fr); } .app-sidebar { position: sticky; top: 0; z-index: 40; display: flex; min-width: 0; height: 100vh; flex-direction: column; border-right: 1px solid var(--ok-line-e2e8f0_a950,rgba(226, 232, 240, .95)); background: var(--ok-surface-ffffff_a940,rgba(255, 255, 255, .94)); box-shadow: 10px 0 35px -34px var(--ok-shadow-0f172a_a420,rgba(15, 23, 42, .42)); backdrop-filter: blur(18px); } .app-sidebar__brand { display: flex; min-height: var(--app-topbar-height); align-items: center; gap: .75rem; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .75rem 1rem; } .app-brand { display: flex; min-width: 0; flex: 1; align-items: center; gap: .75rem; color: inherit; text-decoration: none; } .app-brand__mark { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 2.75rem; place-items: center; border-radius: 1rem; background: linear-gradient(145deg, var(--ok-surface-5d58a3,#5d58a3), var(--ok-surface-403d75,#403d75)); color: var(--ok-ink-ffffff,#fff); font-size: 1rem; font-weight: 950; box-shadow: 0 14px 28px -17px var(--ok-shadow-4f4c8f_a900,rgba(79, 76, 143, .9)); } .app-brand__copy, .app-user-card__copy, .app-nav-item__copy, .app-profile-trigger__copy { min-width: 0; } .app-brand__copy strong, .app-brand__copy small, .app-user-card__copy strong, .app-user-card__copy small, .app-profile-trigger__copy strong, .app-profile-trigger__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-brand__copy strong { color: var(--ok-ink-111827,#111827); font-size: .86rem; font-weight: 900; } .app-brand__copy small { margin-top: .1rem; color: var(--ok-ink-64748b,#64748b); font-size: .7rem; } .app-icon-button { position: relative; display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; place-items: center; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-475569,#475569); cursor: pointer; transition: border-color .18s ease, background .18s ease, color .18s ease, translate .18s ease; } .app-icon-button:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-f8f7fd,#f8f7fd); color: var(--ok-ink-403d75,#403d75); translate: 0 -1px; } .app-sidebar__mobile-close, .app-topbar__menu { display: none; } .app-navigation { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 1rem .75rem 1.5rem; scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } .app-nav-section + .app-nav-section { margin-top: 1.35rem; } .app-nav-section__label { margin: 0 0 .38rem; padding: 0 .65rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; } .app-nav-section__items { display: grid; gap: .2rem; } .app-nav-item { position: relative; display: flex; min-width: 0; min-height: 3rem; align-items: center; gap: .68rem; border: 1px solid transparent; border-radius: .85rem; padding: .58rem .65rem; color: var(--ok-ink-64748b,#64748b); text-decoration: none; transition: border-color .16s ease, background .16s ease, color .16s ease; } a.app-nav-item:hover { border-color: var(--ok-line-e8e6f6,#e8e6f6); background: var(--ok-surface-faf9fe,#faf9fe); color: var(--ok-ink-403d75,#403d75); } .app-nav-item--active { border-color: var(--ok-line-e0ddf2,#e0ddf2); background: linear-gradient(135deg, var(--ok-surface-f4f3fb,#f4f3fb), var(--ok-surface-eef4ff,#eef4ff)); color: var(--ok-ink-403d75,#403d75); box-shadow: 0 10px 24px -24px var(--ok-shadow-4f4c8f_a750,rgba(79, 76, 143, .75)); } .app-nav-item--active::before { position: absolute; top: .65rem; bottom: .65rem; left: -.77rem; width: .22rem; border-radius: 999px; background: var(--ok-surface-4f4c8f,#4f4c8f); content: ""; } .app-nav-item--disabled { cursor: default; opacity: .62; } .app-nav-item__icon { display: grid; width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; place-items: center; color: currentColor; font-size: 1.24rem; } .app-nav-item__copy { flex: 1; } .app-nav-item__copy strong, .app-nav-item__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav-item__copy strong { font-size: .8rem; font-weight: 800; } .app-nav-item__copy small { margin-top: .08rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; line-height: 1.25; } .app-nav-item__badge { flex: 0 0 auto; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); padding: .22rem .4rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; letter-spacing: .02em; } .app-sidebar__footer { display: grid; gap: .55rem; border-top: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .75rem; } .app-sidebar__compact { display: flex; min-height: 2.5rem; align-items: center; gap: .65rem; border: 0; border-radius: .8rem; background: transparent; padding: .45rem .65rem; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; font-weight: 750; cursor: pointer; } .app-sidebar__compact:hover { background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-334155,#334155); } .app-sidebar__compact .material-symbols-rounded { font-size: 1.2rem; transition: rotate .2s ease; } .app-user-card { display: flex; min-width: 0; align-items: center; gap: .65rem; border: 1px solid var(--ok-line-eef2f7,#eef2f7); border-radius: 1rem; background: var(--ok-surface-f8fafc,#f8fafc); padding: .58rem; color: inherit; text-decoration: none; } .app-user-card:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-f6f5fc,#f6f5fc); } .app-user-card__avatar, .app-profile-trigger__avatar { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: .75rem; background: var(--ok-surface-e8e6f6,#e8e6f6); color: var(--ok-ink-403d75,#403d75); font-size: .8rem; font-weight: 950; } .app-user-card__copy { flex: 1; } .app-user-card__copy strong { font-size: .72rem; font-weight: 850; } .app-user-card__copy small { margin-top: .08rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .app-user-card__action { color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1.15rem; } .app-shell--compact .app-brand__copy, .app-shell--compact .app-nav-section__label, .app-shell--compact .app-nav-item__copy, .app-shell--compact .app-nav-item__badge, .app-shell--compact .app-sidebar__compact span:not(.material-symbols-rounded), .app-shell--compact .app-user-card__copy, .app-shell--compact .app-user-card__action { display: none; } .app-shell--compact .app-sidebar__brand, .app-shell--compact .app-sidebar__footer { justify-items: center; padding-right: .65rem; padding-left: .65rem; } .app-shell--compact .app-brand { justify-content: center; } .app-shell--compact .app-nav-section + .app-nav-section { margin-top: .7rem; padding-top: .7rem; border-top: 1px solid var(--ok-line-eef2f7,#eef2f7); } .app-shell--compact .app-nav-item { justify-content: center; padding-right: .5rem; padding-left: .5rem; } .app-shell--compact .app-nav-item--active::before { left: -.77rem; } .app-shell--compact .app-sidebar__compact .material-symbols-rounded { rotate: 180deg; } .app-shell--compact .app-user-card { justify-content: center; width: 3.05rem; padding: .38rem; } .app-workspace { min-width: 0; } .app-topbar { position: sticky; top: 0; z-index: 30; min-width: 0; border-bottom: 1px solid var(--ok-line-e2e8f0_a820,rgba(226, 232, 240, .82)); background: var(--ok-surface-ffffff_a860,rgba(255, 255, 255, .86)); backdrop-filter: blur(18px); } .app-topbar__inner { display: flex; min-height: var(--app-topbar-height); align-items: center; gap: 1rem; padding: .6rem clamp(1rem, 2.1vw, 2rem); } .app-topbar__heading { min-width: 0; } .app-topbar__heading p { display: flex; margin: 0 0 .12rem; gap: .35rem; color: var(--ok-ink-7c3aed,#7c3aed); font-size: .65rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; } .app-topbar__heading p span:first-child { color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-topbar__heading strong, .app-topbar__heading small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-topbar__heading strong { color: var(--ok-ink-0f172a,#0f172a); font-size: .96rem; font-weight: 900; } .app-topbar__heading small { margin-top: .08rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .app-topbar__actions { display: flex; min-width: 0; margin-left: auto; align-items: center; gap: .5rem; } .app-search-trigger { display: flex; min-width: min(20rem, 26vw); min-height: 2.65rem; align-items: center; gap: .65rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: 0 .8rem; color: var(--ok-ink-64748b,#64748b); font-size: .75rem; cursor: pointer; box-shadow: 0 8px 22px -20px var(--ok-shadow-0f172a_a450,rgba(15, 23, 42, .45)); } .app-search-trigger:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); color: var(--ok-ink-403d75,#403d75); } .app-search-trigger .material-symbols-rounded { font-size: 1.15rem; } .app-search-trigger kbd { margin-left: auto; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .42rem; background: var(--ok-surface-f8fafc,#f8fafc); padding: .2rem .38rem; color: var(--ok-ink-94a3b8,#94a3b8); font-family: inherit; font-size: .65rem; font-weight: 850; } .app-connectivity { display: inline-flex; min-height: 2.65rem; align-items: center; gap: .42rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: 0 .7rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; } .app-connectivity > span:first-child { width: .48rem; height: .48rem; border-radius: 999px; background: var(--ok-surface-10b981,#10b981); box-shadow: 0 0 0 .2rem var(--ok-shadow-10b981_a120,rgba(16, 185, 129, .12)); } .app-connectivity--offline > span:first-child { background: var(--ok-surface-ef4444,#ef4444); box-shadow: 0 0 0 .2rem var(--ok-shadow-ef4444_a120,rgba(239, 68, 68, .12)); } .app-popover { position: relative; } .app-popover > summary { list-style: none; } .app-popover[open] > summary { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-f8f7fd,#f8f7fd); color: var(--ok-ink-403d75,#403d75); } .app-notification-count { position: absolute; top: -.35rem; right: -.35rem; display: grid; min-width: 1.05rem; height: 1.05rem; place-items: center; border: 2px solid var(--ok-line-ffffff,#fff); border-radius: 999px; background: var(--ok-surface-dc2626,#dc2626); padding: 0 .18rem; color: var(--ok-ink-ffffff,#fff); font-size: .65rem; font-weight: 900; } .app-popover__panel { position: absolute; top: calc(100% + .65rem); right: 0; z-index: 60; width: min(24rem, calc(100vw - 1.5rem)); overflow: hidden; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 1rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 24px 70px -28px var(--ok-shadow-0f172a_a450,rgba(15, 23, 42, .45)); } .app-notifications-panel > header { display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: 1rem; } .app-notifications-panel > header strong, .app-notifications-panel > header small { display: block; } .app-notifications-panel > header strong { font-size: .82rem; font-weight: 900; } .app-notifications-panel > header small { margin-top: .15rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .app-notifications-panel > header .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-notification-item { display: flex; gap: .7rem; border-bottom: 1px solid var(--ok-line-f1f5f9,#f1f5f9); padding: .85rem 1rem; color: inherit; text-decoration: none; } a.app-notification-item:hover { background: var(--ok-surface-faf9fe,#faf9fe); } .app-notification-item__dot { width: .46rem; height: .46rem; flex: 0 0 .46rem; margin-top: .3rem; border-radius: 999px; background: var(--ok-surface-2563eb,#2563eb); } .app-notification-item strong, .app-notification-item small { display: block; } .app-notification-item strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; font-weight: 850; } .app-notification-item small { display: -webkit-box; margin-top: .2rem; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .app-popover__empty { display: grid; justify-items: center; padding: 2rem 1rem; text-align: center; } .app-popover__empty .material-symbols-rounded { color: var(--ok-ink-b5b0df,#b5b0df); font-size: 2rem; } .app-popover__empty strong { margin-top: .5rem; font-size: .78rem; } .app-popover__empty small { margin-top: .2rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .app-profile-trigger { display: flex; min-height: 2.65rem; align-items: center; gap: .55rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .25rem .45rem; color: var(--ok-ink-334155,#334155); cursor: pointer; } .app-profile-trigger__avatar { width: 2rem; height: 2rem; flex-basis: 2rem; border-radius: .65rem; font-size: .7rem; } .app-profile-trigger__copy strong { max-width: 7.5rem; font-size: .67rem; font-weight: 850; } .app-profile-trigger__copy small { margin-top: .02rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .app-profile-trigger > .material-symbols-rounded { color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1rem; } .app-profile-menu { width: 18rem; padding: .55rem; } .app-profile-menu__identity { display: flex; min-width: 0; align-items: center; gap: .65rem; margin-bottom: .45rem; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .55rem .55rem .9rem; } .app-profile-menu__identity > span:last-child { min-width: 0; } .app-profile-menu__identity strong, .app-profile-menu__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-profile-menu__identity strong { font-size: .75rem; } .app-profile-menu__identity small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .app-profile-menu a, .app-profile-menu button { display: flex; width: 100%; min-height: 2.55rem; align-items: center; gap: .65rem; border: 0; border-radius: .7rem; background: transparent; padding: .55rem .65rem; color: var(--ok-ink-475569,#475569); font-size: .7rem; font-weight: 750; text-align: left; text-decoration: none; cursor: pointer; } .app-profile-menu a:hover, .app-profile-menu button:hover { background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-403d75,#403d75); } .app-profile-menu .material-symbols-rounded { font-size: 1.12rem; } .app-profile-menu form { margin: 0; } .app-main { min-width: 0; padding: clamp(1rem, 2vw, 2rem); } .app-flash { display: flex; width: min(100%, 92rem); margin: 0 auto 1rem; align-items: center; gap: .6rem; border: 1px solid; border-radius: .85rem; padding: .8rem 1rem; font-size: .75rem; font-weight: 750; } .app-flash--success { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .app-sidebar-backdrop { position: fixed; inset: 0; z-index: 35; border: 0; background: var(--ok-surface-0f172a_a440,rgba(15, 23, 42, .44)); backdrop-filter: blur(3px); } .app-command { width: min(44rem, calc(100% - 1.5rem)); max-height: min(43rem, calc(100vh - 2rem)); overflow: hidden; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: 1.25rem; background: var(--ok-surface-ffffff,#fff); padding: 0; color: var(--ok-ink-0f172a,#0f172a); box-shadow: 0 35px 100px -32px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .app-command::backdrop { background: var(--ok-surface-0f172a_a500,rgba(15, 23, 42, .5)); backdrop-filter: blur(5px); } .app-command__search { display: flex; min-height: 4.2rem; align-items: center; gap: .75rem; border-bottom: 1px solid var(--ok-line-e2e8f0,#e2e8f0); padding: .65rem 1rem; } .app-command__search > .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-command__search input { min-width: 0; min-height: 2.8rem; flex: 1; border: 0; background: transparent; padding: 0; color: var(--ok-ink-0f172a,#0f172a); font-size: .88rem; outline: none; } .app-command__search button { border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .45rem; background: var(--ok-surface-f8fafc,#f8fafc); padding: .3rem .48rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 900; cursor: pointer; } .app-command__body { max-height: min(33rem, calc(100vh - 9rem)); overflow-y: auto; padding: 1rem; } .app-command__eyebrow { margin: 0 0 .6rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; } .app-command__results { display: grid; gap: .28rem; } .app-command__results a { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) 1.5rem; min-height: 3.65rem; align-items: center; gap: .65rem; border: 1px solid transparent; border-radius: .85rem; padding: .55rem .65rem; color: inherit; text-decoration: none; } .app-command__results a:hover, .app-command__results a.is-selected { border-color: var(--ok-line-e0ddf2,#e0ddf2); background: var(--ok-surface-f8f7fd,#f8f7fd); } .app-command__results a > .material-symbols-rounded:first-child { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .75rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.2rem; } .app-command__results a > .material-symbols-rounded:last-child { color: var(--ok-ink-cbd5e1,#cbd5e1); font-size: 1rem; } .app-command__results strong, .app-command__results small { display: block; } .app-command__results strong { font-size: .76rem; font-weight: 850; } .app-command__results small { margin-top: .15rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .app-command__empty { display: grid; justify-items: center; padding: 2.8rem 1rem; text-align: center; } .app-command__empty .material-symbols-rounded { color: var(--ok-ink-b5b0df,#b5b0df); font-size: 2.4rem; } .app-command__empty strong { margin-top: .65rem; font-size: .8rem; } .app-command__empty small { margin-top: .25rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .66rem; } .app-command__footer { display: flex; min-height: 2.5rem; align-items: center; gap: 1rem; border-top: 1px solid var(--ok-line-e2e8f0,#e2e8f0); background: var(--ok-surface-f8fafc,#f8fafc); padding: .45rem 1rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 750; } .ds-dashboard { display: grid; width: min(100%, 92rem); margin: 0 auto; gap: 1.1rem; } .ds-page-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1.2rem; overflow: hidden; border: 1px solid var(--ok-line-e0e5ed,#e0e5ed); border-radius: 1.35rem; background: radial-gradient(circle at 92% 15%, var(--ok-surface-2563eb_a110,rgba(37, 99, 235, .11)), transparent 14rem), linear-gradient(135deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-faf9fe,#faf9fe)); padding: clamp(1.15rem, 2vw, 1.65rem); box-shadow: 0 18px 48px -34px var(--ok-shadow-0f172a_a420,rgba(15, 23, 42, .42)); } .ds-page-header__content { display: flex; min-width: 0; align-items: center; gap: .9rem; } .ds-page-header__icon { display: grid; width: 3.1rem; height: 3.1rem; flex: 0 0 3.1rem; place-items: center; border-radius: 1rem; background: linear-gradient(145deg, var(--ok-surface-f4f3fb,#f4f3fb), var(--ok-surface-eaf1ff,#eaf1ff)); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.55rem; } .ds-eyebrow { margin: 0 0 .25rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; } .ds-page-header h1 { margin: 0; color: var(--ok-ink-0f172a,#0f172a); font-size: clamp(1.35rem, 2vw, 1.85rem); font-weight: 950; letter-spacing: -.025em; } .ds-page-header__description { max-width: 50rem; margin: .35rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .78rem; line-height: 1.55; } .ds-page-header__actions { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: .55rem; } .ds-button { display: inline-flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: .5rem; border: 1px solid transparent; border-radius: .82rem; padding: .55rem .9rem; font-size: .7rem; font-weight: 850; text-decoration: none; cursor: pointer; transition: translate .18s ease, box-shadow .18s ease, background .18s ease; } .ds-button:hover { translate: 0 -1px; } .ds-button .material-symbols-rounded { font-size: 1.15rem; } .ds-button--primary { background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 14px 28px -18px var(--ok-shadow-4f4c8f_a820,rgba(79, 76, 143, .82)); } .ds-button--primary:hover { background: var(--ok-surface-403d75,#403d75); } .ds-button--secondary { border-color: var(--ok-line-d9d6ef,#d9d6ef); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-403d75,#403d75); } .ds-button--secondary:hover { background: var(--ok-surface-f8f7fd,#f8f7fd); } .ds-button--ghost { background: transparent; color: var(--ok-ink-475569,#475569); } .ds-metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .ds-metric-card { display: flex; min-width: 0; align-items: center; gap: .85rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 1rem; background: var(--ok-surface-ffffff_a920,rgba(255, 255, 255, .92)); padding: 1rem; box-shadow: 0 14px 34px -30px var(--ok-shadow-0f172a_a500,rgba(15, 23, 42, .5)); } .ds-metric-card__icon { display: grid; width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; place-items: center; border-radius: .85rem; font-size: 1.3rem; } .ds-metric-card--brand .ds-metric-card__icon { background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-metric-card--blue .ds-metric-card__icon { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .ds-metric-card--amber .ds-metric-card__icon { background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-b45309,#b45309); } .ds-metric-card--emerald .ds-metric-card__icon { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .ds-metric-card--neutral .ds-metric-card__icon { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .ds-metric-card__label, .ds-metric-card__helper { margin: 0; } .ds-metric-card__label { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; } .ds-metric-card__value { display: block; margin-top: .18rem; overflow: hidden; color: var(--ok-ink-0f172a,#0f172a); font-size: clamp(1rem, 1.4vw, 1.35rem); font-weight: 950; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; } .ds-metric-card__helper { margin-top: .18rem; overflow: hidden; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .ds-dashboard-grid { display: grid; gap: 1rem; } .ds-dashboard-grid--priority { grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); } .ds-dashboard-grid--operations, .ds-dashboard-grid--activity { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-panel { min-width: 0; overflow: hidden; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 1.1rem; background: var(--ok-surface-ffffff_a940,rgba(255, 255, 255, .94)); box-shadow: 0 15px 38px -32px var(--ok-shadow-0f172a_a480,rgba(15, 23, 42, .48)); } .ds-panel__header { display: flex; min-height: 4.3rem; align-items: center; justify-content: space-between; gap: .75rem; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .85rem 1rem; } .ds-panel__title-wrap { display: flex; min-width: 0; align-items: center; gap: .68rem; } .ds-panel__icon { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.15rem; } .ds-panel__header h2, .ds-panel__header p { margin: 0; } .ds-panel__header h2 { color: var(--ok-ink-0f172a,#0f172a); font-size: .82rem; font-weight: 900; } .ds-panel__header p { margin-top: .15rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-panel__body { padding: 1rem; } .ds-attention-list, .ds-agenda-list, .ds-activity-list { display: grid; gap: .55rem; } .ds-attention-item { display: flex; min-width: 0; align-items: flex-start; gap: .7rem; border: 1px solid var(--ok-line-eef2f7,#eef2f7); border-radius: .85rem; background: var(--ok-surface-fafcff,#fafcff); padding: .72rem; } .ds-attention-item__icon { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: .7rem; font-size: 1.1rem; } .ds-attention-item--critical .ds-attention-item__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-dc2626,#dc2626); } .ds-attention-item--warning .ds-attention-item__icon { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .ds-attention-item--success .ds-attention-item__icon { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .ds-attention-item__title { display: flex; align-items: center; gap: .5rem; } .ds-attention-item__title strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; font-weight: 850; } .ds-attention-item__title span { display: inline-grid; min-width: 1.25rem; height: 1.25rem; place-items: center; border-radius: 999px; background: var(--ok-surface-e2e8f0,#e2e8f0); padding: 0 .25rem; color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 900; } .ds-attention-item p { margin: .18rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.45; } .ds-agenda-item { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); min-width: 0; align-items: center; gap: .7rem; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .38rem 0 .72rem; } .ds-agenda-item:last-child { border-bottom: 0; padding-bottom: .38rem; } .ds-agenda-item__date { display: grid; min-height: 3rem; align-content: center; justify-items: center; border-radius: .78rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-403d75,#403d75); } .ds-agenda-item__date strong { font-size: .72rem; font-weight: 900; text-transform: uppercase; } .ds-agenda-item__date span { margin-top: .12rem; font-size: .65rem; } .ds-agenda-item__title { margin: 0; overflow: hidden; color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .ds-agenda-item__meta { display: flex; margin-top: .25rem; flex-wrap: wrap; gap: .35rem .7rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; text-transform: capitalize; } .ds-health-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .ds-health-item { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: .55rem; border: 1px solid var(--ok-line-eef2f7,#eef2f7); border-radius: .8rem; padding: .65rem; } .ds-health-item > .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.1rem; } .ds-health-item p, .ds-health-item strong { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-health-item p { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-health-item strong { margin-top: .12rem; color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 850; } .ds-health-dot { width: .5rem; height: .5rem; border-radius: 999px; } .ds-health-dot--ready { background: var(--ok-surface-10b981,#10b981); box-shadow: 0 0 0 .2rem var(--ok-shadow-10b981_a100,rgba(16, 185, 129, .1)); } .ds-health-dot--warning { background: var(--ok-surface-f59e0b,#f59e0b); box-shadow: 0 0 0 .2rem var(--ok-shadow-f59e0b_a100,rgba(245, 158, 11, .1)); } .ds-health-dot--error { background: var(--ok-surface-ef4444,#ef4444); box-shadow: 0 0 0 .2rem var(--ok-shadow-ef4444_a100,rgba(239, 68, 68, .1)); } .ds-quick-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; } .ds-quick-actions a { display: grid; min-width: 0; min-height: 5.2rem; align-content: center; border: 1px solid var(--ok-line-eef2f7,#eef2f7); border-radius: .85rem; padding: .7rem; color: inherit; text-decoration: none; transition: border-color .17s ease, background .17s ease, translate .17s ease; } .ds-quick-actions a:hover { translate: 0 -1px; border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-faf9fe,#faf9fe); } .ds-quick-actions .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.25rem; } .ds-quick-actions strong, .ds-quick-actions small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-quick-actions strong { margin-top: .4rem; color: var(--ok-ink-1e293b,#1e293b); font-size: .67rem; font-weight: 850; } .ds-quick-actions small { margin-top: .12rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-activity-item { display: flex; min-width: 0; gap: .65rem; padding: .3rem 0; } .ds-activity-item__dot { width: .5rem; height: .5rem; flex: 0 0 .5rem; margin-top: .3rem; border: 2px solid var(--ok-line-d3d0ed,#d3d0ed); border-radius: 999px; background: var(--ok-surface-ffffff,#fff); } .ds-activity-item p, .ds-activity-item small { display: block; margin: 0; } .ds-activity-item p { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 750; line-height: 1.4; } .ds-activity-item small { margin-top: .18rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-module-progress__summary { display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .ds-module-progress__summary strong, .ds-module-progress__summary span { display: block; } .ds-module-progress__summary strong { color: var(--ok-ink-0f172a,#0f172a); font-size: 1.1rem; font-weight: 950; } .ds-module-progress__summary span { margin-top: .1rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-progress-track { height: .48rem; margin-top: .75rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f6,#edf1f6); } .ds-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); } .ds-module-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem .7rem; max-height: 14rem; margin-top: .8rem; overflow-y: auto; padding-right: .25rem; } .ds-module-list > div { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: .45rem; border-radius: .7rem; padding: .4rem; } .ds-module-list > div:hover { background: var(--ok-surface-f8fafc,#f8fafc); } .ds-module-list .material-symbols-rounded { color: var(--ok-ink-64748b,#64748b); font-size: 1rem; } .ds-module-list p, .ds-module-list strong, .ds-module-list small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-module-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 800; } .ds-module-list small { margin-top: .08rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-module-state { width: .45rem; height: .45rem; border-radius: 999px; } .ds-module-state--ready { background: var(--ok-surface-10b981,#10b981); } .ds-module-state--planned { background: var(--ok-surface-cbd5e1,#cbd5e1); } .ds-status-badge { display: inline-flex; min-height: 1.55rem; align-items: center; gap: .3rem; border-radius: 999px; padding: .22rem .55rem; font-size: .65rem; font-weight: 900; } .ds-status-badge--brand { background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-403d75,#403d75); } .ds-status-badge--neutral { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .ds-status-badge--success { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .ds-status-badge--warning { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .ds-status-badge--danger { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .ds-empty-state { display: grid; min-height: 9rem; align-content: center; justify-items: center; padding: 1.5rem; text-align: center; } .ds-empty-state > .material-symbols-rounded { color: var(--ok-ink-b5b0df,#b5b0df); font-size: 2rem; } .ds-empty-state strong { margin-top: .5rem; color: var(--ok-ink-334155,#334155); font-size: .72rem; } .ds-empty-state p { max-width: 25rem; margin: .25rem 0 0; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; line-height: 1.5; } } @media (max-width: 1279px) { .app-search-trigger { min-width: 2.65rem; width: 2.65rem; justify-content: center; padding: 0; } .app-search-trigger > span:not(.material-symbols-rounded), .app-search-trigger kbd, .app-connectivity__label, .app-profile-trigger__copy { display: none; } .app-connectivity { width: 2.65rem; justify-content: center; padding: 0; } .ds-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-dashboard-grid--priority { grid-template-columns: minmax(0, 1fr) minmax(18rem, .8fr); } .ds-quick-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 1023px) { .app-shell, .app-shell--compact { display: block; } .app-sidebar { position: fixed; inset: 0 auto 0 0; width: min(19rem, calc(100vw - 2.5rem)); transform: translateX(-105%); transition: transform .22s ease; } .app-sidebar.app-sidebar--open { transform: translateX(0); } .app-sidebar__mobile-close, .app-topbar__menu { display: grid; } .app-shell--compact .app-brand__copy, .app-shell--compact .app-nav-section__label, .app-shell--compact .app-nav-item__copy, .app-shell--compact .app-nav-item__badge, .app-shell--compact .app-sidebar__compact span:not(.material-symbols-rounded), .app-shell--compact .app-user-card__copy, .app-shell--compact .app-user-card__action { display: block; } .app-shell--compact .app-sidebar__brand, .app-shell--compact .app-sidebar__footer { justify-items: stretch; padding-right: .75rem; padding-left: .75rem; } .app-shell--compact .app-brand, .app-shell--compact .app-nav-item, .app-shell--compact .app-user-card { justify-content: flex-start; } .app-shell--compact .app-user-card { width: auto; padding: .58rem; } .app-sidebar__compact { display: none; } .ds-dashboard-grid--priority, .ds-dashboard-grid--operations, .ds-dashboard-grid--activity { grid-template-columns: 1fr; } } @media (max-width: 767px) { :root { --app-topbar-height: 4.25rem; } .app-topbar__inner { gap: .55rem; padding: .5rem .75rem; } .app-topbar__heading p, .app-topbar__heading small, .app-connectivity, .app-profile-popover { display: none; } .app-topbar__heading strong { font-size: .82rem; } .app-topbar__actions { gap: .35rem; } .app-main { padding: .8rem; } .ds-page-header { align-items: flex-start; flex-direction: column; border-radius: 1rem; padding: 1rem; } .ds-page-header__icon { width: 2.65rem; height: 2.65rem; flex-basis: 2.65rem; border-radius: .8rem; font-size: 1.3rem; } .ds-page-header__actions, .ds-page-header__actions > * { width: 100%; } .ds-metric-grid, .ds-health-grid, .ds-quick-actions, .ds-module-list { grid-template-columns: 1fr; } .ds-metric-card { padding: .85rem; } .ds-panel__header { align-items: flex-start; } .app-popover__panel { position: fixed; top: calc(var(--app-topbar-height) + .4rem); right: .6rem; left: .6rem; width: auto; } .app-command__footer { display: none; } } @media (prefers-reduced-motion: reduce) { .app-shell, .app-sidebar, .app-sidebar__compact .material-symbols-rounded, .app-icon-button, .ds-button, .ds-quick-actions a { transition: none !important; } } /* -------------------------------------------------------------------------- Fase 0.4 — Governança, RBAC, auditoria e saúde operacional -------------------------------------------------------------------------- */ @layer components { .governance-page { display: grid; gap: 1.15rem; } .governance-two-column { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.15rem; } .governance-alert { display: flex; align-items: flex-start; gap: .7rem; border: 1px solid; border-radius: .9rem; padding: .82rem 1rem; font-size: .82rem; font-weight: 700; } .governance-alert p { margin: .08rem 0 0; } .governance-alert .material-symbols-rounded { font-size: 1.25rem; } .governance-alert--success { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .governance-alert--warning { border-color: var(--ok-line-fde68a,#fde68a); background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-92400e,#92400e); } .governance-alert--danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-991b1b,#991b1b); } .governance-filter-grid { display: grid; grid-template-columns: minmax(14rem, 1.8fr) repeat(3, minmax(10rem, 1fr)); gap: .8rem; align-items: end; } .governance-field { display: grid; min-width: 0; gap: .36rem; color: var(--ok-ink-475569,#475569); font-size: .72rem; font-weight: 800; } .governance-field--wide { grid-column: span 1; } .governance-field input, .governance-field select { width: 100%; min-height: 2.7rem; border: 1px solid var(--ok-line-dbe3ee,#dbe3ee); border-radius: .78rem; background: var(--ok-surface-ffffff,#fff); padding: .62rem .75rem; color: var(--ok-ink-0f172a,#0f172a); font-size: .8rem; outline: none; transition: border-color .16s ease, box-shadow .16s ease; } .governance-field input:focus, .governance-field select:focus { border-color: var(--ok-line-817db7,#817db7); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a130,rgba(79, 76, 143, .13)); } .governance-input-with-icon { position: relative; } .governance-input-with-icon > .material-symbols-rounded { position: absolute; top: 50%; left: .72rem; z-index: 1; translate: 0 -50%; color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1.15rem; pointer-events: none; } .governance-input-with-icon input { padding-left: 2.35rem; } .governance-filter-actions { display: flex; align-items: end; justify-content: flex-end; } .governance-table-wrap { width: 100%; overflow-x: auto; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .9rem; } .governance-table { width: 100%; min-width: 62rem; border-collapse: collapse; font-size: .76rem; } .governance-table th { border-bottom: 1px solid var(--ok-line-e5eaf1,#e5eaf1); background: var(--ok-surface-f8fafc,#f8fafc); padding: .72rem .78rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 900; letter-spacing: .055em; text-align: left; text-transform: uppercase; } .governance-table td { border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .78rem; color: var(--ok-ink-334155,#334155); vertical-align: middle; } .governance-table tr:last-child td { border-bottom: 0; } .governance-table tbody tr:hover { background: var(--ok-surface-fbfbfe,#fbfbfe); } .governance-table strong, .governance-table small { display: block; } .governance-table strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .78rem; font-weight: 800; } .governance-table small { max-width: 20rem; margin-top: .17rem; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; } .governance-detail-button { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--ok-line-dddaf0,#dddaf0); border-radius: .65rem; background: var(--ok-surface-ffffff,#fff); padding: .48rem .62rem; color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; font-size: .7rem; font-weight: 850; } .governance-detail-button:hover { background: var(--ok-surface-f6f5fb,#f6f5fb); } .governance-detail-button .material-symbols-rounded { font-size: 1rem; } .governance-pagination { margin-top: 1rem; } .governance-drawer-backdrop { position: fixed; inset: 0; z-index: 80; display: flex; justify-content: flex-end; background: var(--ok-surface-0f172a_a380,rgba(15, 23, 42, .38)); backdrop-filter: blur(3px); } .governance-drawer { display: flex; width: min(39rem, 94vw); height: 100%; flex-direction: column; border-left: 1px solid var(--ok-line-e2e8f0,#e2e8f0); background: var(--ok-surface-ffffff,#fff); box-shadow: -24px 0 70px -45px var(--ok-shadow-0f172a_a700,rgba(15, 23, 42, .7)); } .governance-drawer__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--ok-line-e9edf3,#e9edf3); padding: 1.15rem 1.2rem; } .governance-drawer__header h2 { margin: .15rem 0 0; color: var(--ok-ink-0f172a,#0f172a); font-size: 1.05rem; } .governance-drawer__body { display: grid; gap: 1rem; overflow-y: auto; padding: 1.1rem 1.2rem 2rem; } .governance-detail-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin: 0; } .governance-detail-list > div { min-width: 0; border: 1px solid var(--ok-line-e8edf4,#e8edf4); border-radius: .78rem; background: var(--ok-surface-fafbfd,#fafbfd); padding: .68rem .75rem; } .governance-detail-list dt { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 850; letter-spacing: .05em; text-transform: uppercase; } .governance-detail-list dd { margin: .25rem 0 0; overflow-wrap: anywhere; color: var(--ok-ink-1e293b,#1e293b); font-size: .76rem; font-weight: 750; } .governance-detail-list dd small { display: block; margin-top: .16rem; color: var(--ok-ink-64748b,#64748b); font-size: .66rem; font-weight: 500; } .governance-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .governance-diff { min-width: 0; } .governance-diff h3 { margin: 0 0 .42rem; color: var(--ok-ink-334155,#334155); font-size: .76rem; } .governance-diff pre { max-height: 18rem; margin: 0; overflow: auto; border: 1px solid var(--ok-line-dce4ee,#dce4ee); border-radius: .8rem; background: var(--ok-surface-0f172a,#0f172a); padding: .85rem; color: var(--ok-ink-dbeafe,#dbeafe); font: 500 .69rem/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-word; } .governance-check-list, .governance-timeline, .governance-security-list, .governance-session-list { display: grid; gap: .62rem; } .governance-check { display: flex; align-items: flex-start; gap: .66rem; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .8rem; padding: .72rem; } .governance-check > .material-symbols-rounded { font-size: 1.2rem; } .governance-check strong { display: block; color: var(--ok-ink-1e293b,#1e293b); font-size: .76rem; } .governance-check p { margin: .16rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .67rem; line-height: 1.45; } .governance-check--ok { background: var(--ok-surface-f7fef9,#f7fef9); } .governance-check--ok > .material-symbols-rounded { color: var(--ok-ink-16a34a,#16a34a); } .governance-check--warning { background: var(--ok-surface-fffcf3,#fffcf3); } .governance-check--warning > .material-symbols-rounded { color: var(--ok-ink-d97706,#d97706); } .governance-check--error { background: var(--ok-surface-fff8f8,#fff8f8); } .governance-check--error > .material-symbols-rounded { color: var(--ok-ink-dc2626,#dc2626); } .governance-timeline article { position: relative; display: grid; grid-template-columns: .7rem minmax(0, 1fr); gap: .7rem; padding-bottom: .62rem; } .governance-timeline article:not(:last-child)::before { position: absolute; top: .8rem; bottom: -.25rem; left: .29rem; width: 1px; background: var(--ok-surface-e2e8f0,#e2e8f0); content: ""; } .governance-timeline__dot { z-index: 1; width: .62rem; height: .62rem; margin-top: .2rem; border: 2px solid var(--ok-line-ffffff,#fff); border-radius: 50%; box-shadow: 0 0 0 1px var(--ok-shadow-cbd5e1,#cbd5e1); } .governance-timeline__dot--success { background: var(--ok-surface-22c55e,#22c55e); } .governance-timeline__dot--danger { background: var(--ok-surface-ef4444,#ef4444); } .governance-timeline strong { display: block; color: var(--ok-ink-1e293b,#1e293b); font-size: .74rem; } .governance-timeline p { margin: .12rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .66rem; } .governance-timeline small { display: block; margin-top: .16rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .governance-security-list article, .governance-session-list article { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .86rem; background: var(--ok-surface-ffffff,#fff); padding: .78rem; } .governance-security-list__icon, .governance-session-list article > .material-symbols-rounded { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.2rem; } .governance-security-list__content, .governance-session-list article > div { min-width: 0; flex: 1; } .governance-security-list__title { display: flex; align-items: center; justify-content: space-between; gap: .65rem; } .governance-security-list strong, .governance-session-list strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .77rem; } .governance-security-list p, .governance-session-list p { margin: .18rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .69rem; line-height: 1.45; } .governance-security-list small, .governance-session-list small { display: block; margin-top: .25rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .governance-health-summary { display: flex; align-items: center; gap: .8rem; border: 1px solid; border-radius: 1rem; padding: 1rem 1.1rem; } .governance-health-summary > .material-symbols-rounded { font-size: 1.8rem; } .governance-health-summary > div { min-width: 0; flex: 1; } .governance-health-summary p, .governance-health-summary strong, .governance-health-summary small { display: block; } .governance-health-summary p { margin: 0; font-size: .68rem; font-weight: 800; text-transform: uppercase; } .governance-health-summary strong { margin-top: .08rem; font-size: 1.05rem; } .governance-health-summary small { margin-top: .13rem; font-size: .65rem; opacity: .75; } .governance-health-summary--ok { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .governance-health-summary--warning { border-color: var(--ok-line-fde68a,#fde68a); background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-92400e,#92400e); } .governance-health-summary--error { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-991b1b,#991b1b); } .governance-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; } .governance-health-card { min-width: 0; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); padding: .9rem; box-shadow: 0 15px 35px -32px var(--ok-shadow-0f172a_a500,rgba(15, 23, 42, .5)); } .governance-health-card__header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .governance-health-card__header > .material-symbols-rounded { font-size: 1.25rem; } .governance-health-card--ok .governance-health-card__header > .material-symbols-rounded { color: var(--ok-ink-16a34a,#16a34a); } .governance-health-card--warning .governance-health-card__header > .material-symbols-rounded { color: var(--ok-ink-d97706,#d97706); } .governance-health-card--error .governance-health-card__header > .material-symbols-rounded { color: var(--ok-ink-dc2626,#dc2626); } .governance-health-card h2 { margin: .72rem 0 .25rem; color: var(--ok-ink-1e293b,#1e293b); font-size: .8rem; } .governance-health-card p { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .67rem; line-height: 1.48; } .governance-runtime-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .72rem; margin: 0; } .governance-runtime-grid > div { border: 1px solid var(--ok-line-e8edf4,#e8edf4); border-radius: .8rem; background: var(--ok-surface-fafbfd,#fafbfd); padding: .72rem; } .governance-runtime-grid dt { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 850; text-transform: uppercase; } .governance-runtime-grid dd { margin: .25rem 0 0; color: var(--ok-ink-1e293b,#1e293b); font-size: .77rem; font-weight: 800; overflow-wrap: anywhere; } } @media (max-width: 1100px) { .governance-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .governance-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .governance-runtime-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 760px) { .governance-two-column, .governance-filter-grid, .governance-health-grid, .governance-runtime-grid, .governance-detail-list { grid-template-columns: 1fr; } .governance-filter-actions { justify-content: stretch; } .governance-filter-actions > * { width: 100%; } .governance-table-wrap { overflow: visible; border: 0; } .governance-table { min-width: 0; } .governance-table thead { display: none; } .governance-table, .governance-table tbody, .governance-table tr, .governance-table td { display: block; width: 100%; } .governance-table tr { margin-bottom: .72rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .86rem; background: var(--ok-surface-ffffff,#fff); padding: .48rem .72rem; } .governance-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .55rem; border: 0; padding: .38rem 0; } .governance-table td::before { color: var(--ok-ink-94a3b8,#94a3b8); content: attr(data-label); font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .governance-table tbody tr:hover { background: var(--ok-surface-ffffff,#fff); } .governance-security-list article, .governance-session-list article { align-items: flex-start; flex-wrap: wrap; } .governance-security-list article > .ds-button, .governance-session-list article > .ds-button { width: 100%; } .governance-health-summary { align-items: flex-start; flex-wrap: wrap; } .governance-health-summary > .ds-status-badge { margin-left: 2.6rem; } } @media (prefers-reduced-motion: reduce) { .governance-drawer-backdrop, .governance-drawer { scroll-behavior: auto; } } @layer components { .identity-row-actions { display: flex; align-items: center; justify-content: flex-end; gap: .4rem; flex-wrap: wrap; } .identity-section-help { margin: -.2rem 0 .8rem; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; } } /* CRM and Calendar — Phase 1 */ @layer components { .crm-page, .calendar-page { display: grid; gap: 1rem; width: 100%; max-width: 96rem; margin: 0 auto; } .crm-alert { display: flex; align-items: center; gap: .7rem; min-height: 3.1rem; border: 1px solid; border-radius: .9rem; padding: .72rem .9rem; font-size: .78rem; } .crm-alert > .material-symbols-rounded { flex: 0 0 auto; font-size: 1.25rem; } .crm-alert p { min-width: 0; flex: 1; margin: 0; line-height: 1.45; } .crm-alert strong { display: block; font-size: .82rem; } .crm-alert a { margin-left: auto; font-weight: 850; text-decoration: none; } .crm-alert--success { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .crm-alert--warning { border-color: var(--ok-line-fde68a,#fde68a); background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-92400e,#92400e); } .crm-alert--danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-991b1b,#991b1b); } .crm-dashboard-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .crm-dashboard-grid--pipeline { grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); } .crm-dashboard-grid--client { grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); } .crm-text-link { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .72rem; font-weight: 850; text-decoration: none; } .crm-text-link:hover { text-decoration: underline; } .crm-pipeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; } .crm-pipeline__item { display: grid; grid-template-columns: .42rem minmax(0, 1fr) auto; align-items: center; gap: .62rem; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); padding: .72rem; color: inherit; text-decoration: none; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; } .crm-pipeline__item:hover { transform: translateY(-1px); border-color: var(--ok-line-d3d0ed,#d3d0ed); box-shadow: 0 12px 28px -25px var(--ok-shadow-0f172a_a550,rgba(15,23,42,.55)); } .crm-pipeline__marker { display: block; width: .35rem; height: 2.2rem; border-radius: 999px; background: var(--ok-surface-cbd5e1,#cbd5e1); } .crm-pipeline__marker--brand { background: var(--ok-surface-4f4c8f,#4f4c8f); } .crm-pipeline__marker--warning { background: var(--ok-surface-f59e0b,#f59e0b); } .crm-pipeline__marker--success { background: var(--ok-surface-16a34a,#16a34a); } .crm-pipeline__marker--danger { background: var(--ok-surface-dc2626,#dc2626); } .crm-pipeline__item strong { display: block; color: var(--ok-ink-1e293b,#1e293b); font-size: .74rem; } .crm-pipeline__item small { display: block; margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-pipeline__item b { color: var(--ok-ink-0f172a,#0f172a); font-size: 1.05rem; } .crm-followup, .crm-compact-row { display: flex; align-items: center; gap: .7rem; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); padding: .68rem 0; color: inherit; text-decoration: none; } .crm-followup:first-child, .crm-compact-row:first-child { padding-top: 0; } .crm-followup:last-child, .crm-compact-row:last-child { border-bottom: 0; padding-bottom: 0; } .crm-followup:hover strong, .crm-compact-row:hover strong { color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-followup__date { display: grid; width: 3.1rem; height: 3rem; flex: 0 0 3.1rem; place-content: center; border-radius: .76rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); text-align: center; } .crm-followup__date strong { font-size: .78rem; } .crm-followup__date small { font-size: .65rem; } .crm-followup--overdue .crm-followup__date { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .crm-followup__copy, .crm-compact-row > span:nth-child(2) { min-width: 0; flex: 1; } .crm-followup__copy strong, .crm-compact-row strong { display: block; overflow: hidden; color: var(--ok-ink-1e293b,#1e293b); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; } .crm-followup__copy small, .crm-compact-row small { display: block; margin-top: .16rem; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .crm-followup > .material-symbols-rounded { color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1rem; } .crm-avatar, .crm-record-icon { display: grid; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; place-items: center; border-radius: .75rem; background: linear-gradient(145deg, var(--ok-surface-f4f3fb,#f4f3fb), var(--ok-surface-e8e6f6,#e8e6f6)); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .86rem; font-weight: 900; } .crm-avatar--blue { background: linear-gradient(145deg, var(--ok-surface-eff6ff,#eff6ff), var(--ok-surface-dbeafe,#dbeafe)); color: var(--ok-ink-2563eb,#2563eb); } .crm-record-icon .material-symbols-rounded { font-size: 1.25rem; } .crm-tag-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; } .crm-tag-row > span { display: inline-flex; align-items: center; min-height: 1.35rem; border: 1px solid color-mix(in srgb, var(--tag-color) 25%, var(--ok-line-ffffff,white)); border-radius: 999px; background: color-mix(in srgb, var(--tag-color) 8%, var(--ok-surface-ffffff,white)); padding: .18rem .42rem; color: color-mix(in srgb, var(--tag-color) 82%, var(--ok-ink-0f172a,#0f172a)); font-size: .65rem; font-weight: 800; } .crm-tag-row--large { margin-top: .9rem; } .crm-tag-row--large > span { min-height: 1.65rem; padding: .22rem .55rem; font-size: .65rem; } .crm-filter-grid { display: grid; grid-template-columns: minmax(16rem, 1.7fr) repeat(3, minmax(9rem, .75fr)); gap: .7rem; margin-bottom: 1rem; } .crm-filter-grid--leads { grid-template-columns: minmax(16rem, 1.6fr) repeat(4, minmax(8.5rem, .7fr)); } .crm-field { display: grid; align-content: start; gap: .34rem; min-width: 0; } .crm-field > span, .crm-tag-selector > span, .calendar-attendees > span { color: var(--ok-ink-475569,#475569); font-size: .68rem; font-weight: 820; } .crm-field > span b { color: var(--ok-ink-dc2626,#dc2626); } .crm-field input, .crm-field select, .crm-field textarea { width: 100%; min-height: 2.7rem; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); padding: .62rem .75rem; color: var(--ok-ink-0f172a,#0f172a); font-size: .76rem; outline: none; } .crm-field textarea { min-height: 6rem; resize: vertical; line-height: 1.5; } .crm-field input:hover, .crm-field select:hover, .crm-field textarea:hover { border-color: var(--ok-line-aab4c4,#aab4c4); } .crm-field input:focus, .crm-field select:focus, .crm-field textarea:focus { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a110,rgba(79,76,143,.11)); } .crm-field input:disabled, .crm-field select:disabled { cursor: not-allowed; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-94a3b8,#94a3b8); } .crm-field--search > div { display: flex; align-items: center; gap: .5rem; min-height: 2.7rem; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); padding: 0 .7rem; } .crm-field--search > div:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a110,rgba(79,76,143,.11)); } .crm-field--search > div .material-symbols-rounded { color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1.08rem; } .crm-field--search input { min-height: 2.55rem; border: 0; padding: 0; box-shadow: none !important; } .crm-field--wide { grid-column: span 2; } .crm-field--full { grid-column: 1 / -1; } .crm-field-error { color: var(--ok-ink-b91c1c,#b91c1c); font-size: .65rem; font-weight: 720; line-height: 1.35; } .crm-money-input { display: flex; align-items: center; min-height: 2.7rem; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); } .crm-money-input > span { padding-left: .72rem; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; font-weight: 800; } .crm-money-input input { min-height: 2.55rem; border: 0; box-shadow: none !important; } .crm-table-wrap { overflow-x: auto; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .88rem; } .crm-table { width: 100%; min-width: 56rem; border-collapse: collapse; } .crm-table th, .crm-table td { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); padding: .72rem .78rem; text-align: left; vertical-align: middle; } .crm-table th { background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; letter-spacing: .045em; text-transform: uppercase; } .crm-table td { color: var(--ok-ink-475569,#475569); font-size: .7rem; } .crm-table tbody tr:last-child td { border-bottom: 0; } .crm-table tbody tr:hover { background: var(--ok-surface-fcfcfe,#fcfcfe); } .crm-table td > strong, .crm-table td > small { display: block; } .crm-table td > strong { color: var(--ok-ink-1e293b,#1e293b); } .crm-table td > small { margin-top: .15rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-table-subline { display: block; margin-top: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-entity-cell { display: flex; align-items: center; gap: .62rem; min-width: 13rem; color: inherit; text-decoration: none; } .crm-entity-cell > span:last-child { min-width: 0; } .crm-entity-cell strong, .crm-entity-cell small { display: block; max-width: 19rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-entity-cell strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .73rem; } .crm-entity-cell small { margin-top: .13rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-entity-cell:hover strong { color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-row-actions { display: flex; justify-content: flex-end; gap: .28rem; } .crm-row-actions a, .crm-row-actions button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .58rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; text-decoration: none; } .crm-row-actions a:hover, .crm-row-actions button:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-f7f6fc,#f7f6fc); } .crm-row-actions .material-symbols-rounded { font-size: .98rem; } .crm-pagination { margin-top: .9rem; } .crm-text-danger { color: var(--ok-ink-b91c1c,#b91c1c) !important; } .crm-pipeline-board { display: grid; grid-template-columns: repeat(9, minmax(7rem, 1fr)); gap: .55rem; overflow-x: auto; padding-bottom: .18rem; } .crm-pipeline-card { display: grid; grid-template-columns: .35rem minmax(0, 1fr); gap: .55rem; min-width: 7.5rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .65rem; cursor: pointer; text-align: left; } .crm-pipeline-card:hover, .crm-pipeline-card--active { border-color: var(--ok-line-b5b0df,#b5b0df); background: var(--ok-surface-fbfaff,#fbfaff); box-shadow: 0 10px 24px -24px var(--ok-shadow-4f4c8f_a900,rgba(79,76,143,.9)); } .crm-pipeline-card .crm-pipeline__marker { height: 3.1rem; } .crm-pipeline-card small, .crm-pipeline-card strong, .crm-pipeline-card b { display: block; } .crm-pipeline-card small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .crm-pipeline-card strong { margin-top: .14rem; color: var(--ok-ink-0f172a,#0f172a); font-size: 1rem; } .crm-pipeline-card b { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 700; } .crm-form { display: grid; gap: 1rem; } .crm-form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .78rem; } .crm-form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-tag-selector { display: grid; gap: .45rem; margin-top: .8rem; } .crm-tag-selector > div { display: flex; flex-wrap: wrap; gap: .4rem; } .crm-tag-selector label { cursor: pointer; } .crm-tag-selector input { position: absolute; opacity: 0; pointer-events: none; } .crm-tag-selector label span { display: inline-flex; min-height: 1.8rem; align-items: center; border: 1px solid color-mix(in srgb, var(--tag-color) 24%, var(--ok-line-ffffff,white)); border-radius: 999px; background: var(--ok-surface-ffffff,#fff); padding: .28rem .62rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .crm-tag-selector input:checked + span { background: color-mix(in srgb, var(--tag-color) 12%, var(--ok-surface-ffffff,white)); color: color-mix(in srgb, var(--tag-color) 82%, var(--ok-ink-0f172a,#0f172a)); box-shadow: inset 0 0 0 1px var(--tag-color); } .crm-form-actions { display: flex; justify-content: flex-end; gap: .65rem; position: sticky; bottom: .7rem; z-index: 20; border: 1px solid var(--ok-line-e2e8f0_a900,rgba(226,232,240,.9)); border-radius: .9rem; background: var(--ok-surface-ffffff_a920,rgba(255,255,255,.92)); padding: .7rem; box-shadow: 0 18px 40px -30px var(--ok-shadow-0f172a_a650,rgba(15,23,42,.65)); backdrop-filter: blur(10px); } .crm-client-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; } .crm-client-summary article { display: flex; align-items: center; gap: .6rem; min-width: 0; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .7rem; } .crm-client-summary article > .material-symbols-rounded { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 2.25rem; place-items: center; border-radius: .65rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.12rem; } .crm-client-summary article div { min-width: 0; } .crm-client-summary small, .crm-client-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-client-summary small { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 800; text-transform: uppercase; } .crm-client-summary strong { margin-top: .13rem; color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; } .crm-detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin: 0; } .crm-detail-grid > div { min-width: 0; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .72rem; background: var(--ok-surface-fafbfd,#fafbfd); padding: .62rem .68rem; } .crm-detail-grid__wide { grid-column: 1 / -1; } .crm-detail-grid dt { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .crm-detail-grid dd { margin: .2rem 0 0; overflow-wrap: anywhere; color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 720; } .crm-prose { color: var(--ok-ink-475569,#475569); font-size: .72rem; line-height: 1.65; overflow-wrap: anywhere; } .crm-management-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(19rem, .85fr); gap: 1rem; align-items: start; } .crm-record-list { display: grid; gap: .55rem; } .crm-record-list > article { display: flex; align-items: flex-start; gap: .65rem; border: 1px solid var(--ok-line-e6ebf1,#e6ebf1); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); padding: .68rem; } .crm-record-list > article > div:nth-child(2) { min-width: 0; flex: 1; } .crm-record-list__title { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; } .crm-record-list__title strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .73rem; } .crm-record-list p { margin: .15rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-record-list small { display: block; margin-top: .16rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.4; } .crm-mini-badges { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .crm-mini-badges span { border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); padding: .16rem .4rem; color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 800; } .crm-inline-form { display: grid; gap: .7rem; border: 1px solid var(--ok-line-dddaf0,#dddaf0); border-radius: .9rem; background: linear-gradient(145deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-fbfaff,#fbfaff)); padding: .85rem; } .crm-inline-form > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; } .crm-inline-form > header strong, .crm-inline-form > header small { display: block; } .crm-inline-form > header strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .77rem; } .crm-inline-form > header small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-inline-form > header button { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .55rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-64748b,#64748b); cursor: pointer; } .crm-inline-form > header button .material-symbols-rounded { font-size: .95rem; } .crm-check-row { display: flex; flex-wrap: wrap; gap: .4rem; } .crm-check-row label { display: flex; align-items: center; gap: .35rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .65rem; background: var(--ok-surface-ffffff,#fff); padding: .4rem .55rem; color: var(--ok-ink-475569,#475569); cursor: pointer; font-size: .65rem; font-weight: 750; } .crm-check-row input { accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-conversion-card { display: flex; align-items: center; gap: .65rem; margin-top: .85rem; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .8rem; background: var(--ok-surface-f0fdf4,#f0fdf4); padding: .7rem; color: var(--ok-ink-166534,#166534); } .crm-conversion-card > .material-symbols-rounded { font-size: 1.3rem; } .crm-conversion-card strong, .crm-conversion-card a { display: block; } .crm-conversion-card strong { font-size: .7rem; } .crm-conversion-card a { margin-top: .12rem; color: var(--ok-ink-166534,#166534); font-size: .65rem; font-weight: 800; } .crm-timeline { display: grid; gap: .55rem; } .crm-timeline article { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .65rem; position: relative; border: 1px solid var(--ok-line-e6ebf1,#e6ebf1); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); padding: .68rem; } .crm-timeline__marker { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; border-radius: .65rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-timeline__marker .material-symbols-rounded { font-size: 1rem; } .crm-timeline article > div:nth-child(2) { min-width: 0; } .crm-timeline p { margin: .2rem 0 0; color: var(--ok-ink-475569,#475569); font-size: .66rem; line-height: 1.5; } .crm-timeline small { display: block; margin-top: .25rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .crm-timeline__completed { opacity: .78; } .crm-timeline__complete { align-self: center; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .55rem; background: var(--ok-surface-f0fdf4,#f0fdf4); padding: .35rem .5rem; color: var(--ok-ink-166534,#166534); cursor: pointer; font-size: .65rem; font-weight: 850; } .crm-switch { display: flex; align-items: flex-start; gap: .55rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .78rem; background: var(--ok-surface-fafbfd,#fafbfd); padding: .65rem; cursor: pointer; } .crm-switch input { margin-top: .15rem; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-switch b, .crm-switch small { display: block; } .crm-switch b { color: var(--ok-ink-334155,#334155); font-size: .69rem; } .crm-switch small { margin-top: .14rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); padding: .65rem; } .calendar-toolbar__navigation, .calendar-toolbar__views { display: flex; align-items: center; gap: .35rem; } .calendar-toolbar button { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; gap: .3rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .62rem; background: var(--ok-surface-ffffff,#fff); padding: .38rem .58rem; color: var(--ok-ink-475569,#475569); cursor: pointer; font-size: .65rem; font-weight: 800; } .calendar-toolbar button:hover, .calendar-toolbar button.is-active { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .calendar-toolbar button .material-symbols-rounded { font-size: 1rem; } .calendar-toolbar__navigation > strong { margin-left: .4rem; color: var(--ok-ink-1e293b,#1e293b); font-size: .82rem; text-transform: capitalize; } .calendar-filters { border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); } .calendar-filters summary { display: flex; align-items: center; gap: .4rem; padding: .65rem .75rem; color: var(--ok-ink-475569,#475569); cursor: pointer; font-size: .69rem; font-weight: 850; list-style: none; } .calendar-filters summary::-webkit-details-marker { display: none; } .calendar-filters summary .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .calendar-filters[open] summary { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .calendar-filters .crm-filter-grid { padding: .75rem; margin: 0; } .calendar-month { overflow: hidden; border: 1px solid var(--ok-line-dfe5ec,#dfe5ec); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border-bottom: 1px solid var(--ok-line-e2e8f0,#e2e8f0); background: var(--ok-surface-f8fafc,#f8fafc); } .calendar-weekdays span { padding: .5rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-align: center; text-transform: uppercase; } .calendar-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); } .calendar-day { min-width: 0; min-height: 8.1rem; border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); background: var(--ok-surface-ffffff,#fff); padding: .38rem; } .calendar-day:nth-child(7n) { border-right: 0; } .calendar-day:nth-last-child(-n+7) { border-bottom: 0; } .calendar-day--outside { background: var(--ok-surface-fafbfd,#fafbfd); } .calendar-day--outside .calendar-day__number { color: var(--ok-ink-a8b2c0,#a8b2c0); } .calendar-day--today { background: linear-gradient(145deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-f9f8fe,#f9f8fe)); box-shadow: inset 0 0 0 1px var(--ok-shadow-b5b0df,#b5b0df); } .calendar-day__number { display: grid; width: 1.65rem; height: 1.65rem; place-items: center; border: 0; border-radius: .5rem; background: transparent; color: var(--ok-ink-475569,#475569); cursor: pointer; font-size: .65rem; font-weight: 850; } .calendar-day--today .calendar-day__number { background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .calendar-day__events { display: grid; gap: .22rem; margin-top: .25rem; } .calendar-event-pill { display: flex; align-items: center; gap: .28rem; min-width: 0; border-left: 3px solid var(--event-color); border-radius: .35rem; background: color-mix(in srgb, var(--event-color) 8%, var(--ok-surface-ffffff,white)); padding: .25rem .32rem; color: var(--ok-ink-334155,#334155); text-decoration: none; } .calendar-event-pill span { flex: 0 0 auto; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .calendar-event-pill strong { min-width: 0; overflow: hidden; font-size: .65rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .calendar-event-pill--critical { background: var(--ok-surface-fef2f2,#fef2f2); border-left-color: var(--ok-line-dc2626,#dc2626); } .calendar-event-pill--high { background: var(--ok-surface-fffbeb,#fffbeb); border-left-color: var(--ok-line-f59e0b,#f59e0b); } .calendar-day__more { border: 0; background: transparent; padding: .18rem .2rem; color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; font-size: .65rem; font-weight: 850; text-align: left; } .calendar-day-view { display: grid; gap: .6rem; } .calendar-event-card { display: grid; grid-template-columns: 4.4rem 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-left: 4px solid var(--event-color); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); padding: .75rem; } .calendar-event-card__time { text-align: center; } .calendar-event-card__time strong, .calendar-event-card__time small { display: block; } .calendar-event-card__time strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .75rem; } .calendar-event-card__time small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .calendar-event-card__icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; background: color-mix(in srgb, var(--event-color) 10%, var(--ok-surface-ffffff,white)); color: var(--event-color); font-size: 1.15rem; } .calendar-event-card__copy { min-width: 0; } .calendar-event-card__copy > div { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; } .calendar-event-card__copy strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .77rem; } .calendar-event-card__copy p { margin: .18rem 0 0; color: var(--ok-ink-475569,#475569); font-size: .66rem; line-height: 1.45; } .calendar-event-card__copy small { display: block; margin-top: .22rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .calendar-event-card__actions { display: flex; gap: .28rem; } .calendar-event-card__actions a, .calendar-event-card__actions button { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .58rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; text-decoration: none; } .calendar-event-card__actions .material-symbols-rounded { font-size: .98rem; } .calendar-list-title { display: flex; align-items: center; gap: .55rem; } .calendar-list-title > .material-symbols-rounded { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; place-items: center; border-radius: .62rem; background: color-mix(in srgb, var(--event-color) 10%, var(--ok-surface-ffffff,white)); color: var(--event-color); font-size: 1rem; } .calendar-list-title strong, .calendar-list-title small { display: block; } .calendar-list-title strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .7rem; } .calendar-list-title small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .calendar-color-input { min-height: 2.7rem !important; padding: .3rem !important; cursor: pointer; } .calendar-attendees { display: grid; gap: .45rem; margin-top: .8rem; } .calendar-attendees > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; } .calendar-attendees label { display: flex; align-items: flex-start; gap: .45rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .7rem; background: var(--ok-surface-ffffff,#fff); padding: .52rem; cursor: pointer; } .calendar-attendees input { margin-top: .12rem; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .calendar-attendees strong, .calendar-attendees small { display: block; } .calendar-attendees strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .calendar-attendees small { margin-top: .1rem; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 1180px) { .crm-filter-grid, .crm-filter-grid--leads { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-field--search { grid-column: span 2; } .crm-client-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .calendar-attendees > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .crm-dashboard-grid, .crm-dashboard-grid--pipeline, .crm-dashboard-grid--client, .crm-management-grid { grid-template-columns: 1fr; } .crm-pipeline { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-client-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .calendar-toolbar { align-items: flex-start; flex-direction: column; } .calendar-toolbar__navigation, .calendar-toolbar__views { width: 100%; flex-wrap: wrap; } .calendar-toolbar__navigation > strong { flex: 1; text-align: right; } .calendar-day { min-height: 7rem; } } @media (max-width: 700px) { .crm-alert { align-items: flex-start; flex-wrap: wrap; } .crm-alert a { width: 100%; margin-left: 1.95rem; } .crm-filter-grid, .crm-filter-grid--leads, .crm-form-grid, .crm-form-grid--compact, .crm-detail-grid, .calendar-attendees > div { grid-template-columns: 1fr; } .crm-field--search, .crm-field--wide, .crm-field--full, .crm-detail-grid__wide { grid-column: auto; } .crm-client-summary { grid-template-columns: 1fr 1fr; } .crm-form-actions { flex-direction: column-reverse; } .crm-form-actions > * { width: 100%; } .crm-table-wrap { overflow: visible; border: 0; } .crm-table { min-width: 0; } .crm-table thead { display: none; } .crm-table, .crm-table tbody, .crm-table tr, .crm-table td { display: block; width: 100%; } .crm-table tr { margin-bottom: .65rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .48rem .68rem; } .crm-table td { display: grid; grid-template-columns: 6.3rem minmax(0, 1fr); gap: .5rem; border: 0; padding: .38rem 0; } .crm-table td::before { color: var(--ok-ink-94a3b8,#94a3b8); content: attr(data-label); font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .crm-table td > * { min-width: 0; } .crm-table td:first-child { grid-template-columns: 1fr; } .crm-table td:first-child::before { display: none; } .crm-row-actions { justify-content: flex-start; } .calendar-weekdays { display: none; } .calendar-month { overflow: visible; border: 0; background: transparent; } .calendar-month__grid { grid-template-columns: 1fr; gap: .55rem; } .calendar-day { min-height: auto; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0) !important; border-radius: .78rem; padding: .55rem; } .calendar-day--outside { display: none; } .calendar-day__number { width: auto; min-width: 2rem; padding: 0 .4rem; } .calendar-day__number::after { margin-left: .28rem; content: attr(aria-label); font-size: .65rem; font-weight: 700; } .calendar-event-pill { min-height: 2rem; } .calendar-event-pill strong { font-size: .65rem; } .calendar-event-card { grid-template-columns: 3.8rem 2.25rem minmax(0, 1fr); align-items: start; } .calendar-event-card__actions { grid-column: 1 / -1; justify-content: flex-end; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); padding-top: .55rem; } } @media (max-width: 430px) { .crm-client-summary { grid-template-columns: 1fr; } .crm-pipeline { grid-template-columns: 1fr; } .calendar-toolbar__navigation > strong { width: 100%; flex-basis: 100%; margin: .25rem 0 0; text-align: left; } .calendar-toolbar__views button { flex: 1; } .calendar-event-card { grid-template-columns: 3.6rem minmax(0, 1fr); } .calendar-event-card__icon { display: none; } } /* Phase 1 calendar refinements */ .calendar-month--week .calendar-day { min-height: 17rem; } .calendar-event-pill strong { display: inline-flex; align-items: center; gap: .2rem; min-width: 0; } .calendar-event-pill strong .material-symbols-rounded { flex: 0 0 auto; font-size: .8rem; } .calendar-event-card__copy .ui-status-badge .material-symbols-rounded { font-size: .9rem; } @media (max-width: 900px) { .calendar-month--week .calendar-day { min-height: 11rem; } } /* Support module — Phase 2 */ @layer components { .support-page { max-width: 92rem; margin: 0 auto; display: grid; gap: 1rem; } .support-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .support-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(20rem, .75fr); gap: 1rem; align-items: start; } .support-dashboard-grid--bottom { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-stack, .support-form { display: grid; gap: 1rem; } .support-link { display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; font-size: .68rem; font-weight: 850; text-decoration: none; } .support-muted { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .68rem; } .support-text-danger { color: var(--ok-ink-b91c1c,#b91c1c) !important; } .support-ticket-list, .support-alert-list, .support-admin-list { display: grid; gap: .45rem; } .support-ticket-item, .support-alert-item { display: flex; align-items: center; gap: .65rem; min-width: 0; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .75rem; background: var(--ok-surface-ffffff,#fff); padding: .65rem; color: var(--ok-ink-334155,#334155); text-decoration: none; transition: border-color .15s ease, background .15s ease; } .support-ticket-item:hover, .support-alert-item:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-faf9fe,#faf9fe); } .support-ticket-item > span:nth-child(2), .support-alert-item > span:nth-child(2) { min-width: 0; flex: 1; } .support-ticket-item strong, .support-ticket-item small, .support-alert-item strong, .support-alert-item small { display: block; } .support-ticket-item strong, .support-alert-item strong { overflow: hidden; color: var(--ok-ink-1e293b,#1e293b); font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; } .support-ticket-item small, .support-alert-item small { margin-top: .15rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-alert-item > .material-symbols-rounded { display: grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .58rem; background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); font-size: 1rem; } .support-priority-dot { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 999px; background: var(--ok-surface-94a3b8,#94a3b8); } .support-priority-dot--normal { background: var(--ok-surface-2563eb,#2563eb); } .support-priority-dot--high { background: var(--ok-surface-f59e0b,#f59e0b); } .support-priority-dot--critical { background: var(--ok-surface-dc2626,#dc2626); box-shadow: 0 0 0 4px var(--ok-shadow-fee2e2,#fee2e2); } .support-bars { display: grid; gap: .8rem; } .support-bars > div { display: grid; gap: .35rem; } .support-bars span { display: flex; justify-content: space-between; gap: .8rem; } .support-bars strong, .support-bars small { font-size: .65rem; } .support-bars strong { color: var(--ok-ink-334155,#334155); } .support-bars small { color: var(--ok-ink-64748b,#64748b); } .support-bars i { position: relative; overflow: hidden; height: .38rem; border-radius: 999px; background: var(--ok-surface-eef2f7,#eef2f7); } .support-bars i::after { position: absolute; inset: 0 auto 0 0; width: var(--bar); border-radius: inherit; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); content: ''; } .support-actions-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .support-actions-grid a { display: grid; gap: .18rem; border: 1px solid var(--ok-line-e6eaf0,#e6eaf0); border-radius: .8rem; background: linear-gradient(145deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-faf9fe,#faf9fe)); padding: .72rem; color: var(--ok-ink-334155,#334155); text-decoration: none; } .support-actions-grid a:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); } .support-actions-grid .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.15rem; } .support-actions-grid strong { font-size: .68rem; } .support-actions-grid small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-filter-grid { display: grid; grid-template-columns: minmax(16rem, 1.6fr) repeat(5, minmax(8rem, .7fr)); gap: .6rem; margin-bottom: .8rem; } .support-filter-grid--kb { grid-template-columns: minmax(18rem, 1.6fr) repeat(3, minmax(9rem, .7fr)); } .support-filter-grid--noc { grid-template-columns: minmax(18rem, 1.6fr) repeat(2, minmax(10rem, .7fr)); } .support-field--search { min-width: 0; } .support-ticket-table { min-width: 68rem; } .support-ticket-title { display: block; color: inherit; text-decoration: none; } .support-ticket-title strong, .support-ticket-title span, .support-ticket-title small { display: block; } .support-ticket-title strong { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; } .support-ticket-title span { margin-top: .12rem; color: var(--ok-ink-1e293b,#1e293b); font-size: .68rem; font-weight: 800; } .support-ticket-title small { margin-top: .14rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .support-ticket-summary { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .6rem; } .support-ticket-summary > div { min-width: 0; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .8rem; background: var(--ok-surface-ffffff,#fff); padding: .72rem; box-shadow: 0 10px 26px -24px var(--ok-shadow-0f172a_a350,rgb(15 23 42 / .35)); } .support-ticket-summary span:first-child { display: block; margin-bottom: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; letter-spacing: .04em; text-transform: uppercase; } .support-ticket-summary strong { display: block; overflow: hidden; color: var(--ok-ink-1e293b,#1e293b); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; } .support-ticket-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(18rem, .55fr); gap: 1rem; align-items: start; } .support-ticket-main, .support-ticket-sidebar { min-width: 0; } .support-ticket-sidebar { display: grid; gap: 1rem; } .support-thread { display: grid; gap: .65rem; } .support-message { border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .8rem; } .support-message--internal { border-color: var(--ok-line-fde68a,#fde68a); background: var(--ok-surface-fffbeb,#fffbeb); } .support-message--request { border-left: 4px solid var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-faf9fe,#faf9fe); } .support-message header { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; } .support-message header strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .68rem; } .support-message header span { border-radius: 999px; background: var(--ok-surface-eef2ff,#eef2ff); padding: .18rem .4rem; color: var(--ok-ink-4338ca,#4338ca); font-size: .65rem; font-weight: 800; } .support-message--internal header span { background: var(--ok-surface-fef3c7,#fef3c7); color: var(--ok-ink-92400e,#92400e); } .support-message header time { margin-left: auto; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .support-message p { margin: .55rem 0 0; color: var(--ok-ink-475569,#475569); font-size: .68rem; line-height: 1.65; white-space: pre-wrap; } .support-reply-box { display: grid; gap: .65rem; margin-top: .85rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); padding-top: .85rem; } .support-reply-tabs { display: flex; flex-wrap: wrap; gap: .45rem; } .support-reply-tabs label { cursor: pointer; } .support-reply-tabs input { position: absolute; opacity: 0; pointer-events: none; } .support-reply-tabs span { vertical-align: middle; font-size: .9rem; } .support-reply-tabs label { border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .65rem; background: var(--ok-surface-ffffff,#fff); padding: .45rem .58rem; color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 800; } .support-reply-tabs label:has(input:checked) { border-color: var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-403d75,#403d75); } .support-reply-box textarea, .support-compact-form textarea, .support-editor { width: 100%; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .75rem; background: var(--ok-surface-ffffff,#fff); padding: .75rem; color: var(--ok-ink-0f172a,#0f172a); font-size: .72rem; line-height: 1.55; } .support-reply-box > div:last-child { display: flex; justify-content: flex-end; } .support-history { display: grid; gap: .65rem; } .support-history > div { display: flex; gap: .55rem; } .support-history > div > span { width: .45rem; height: .45rem; flex: 0 0 .45rem; margin-top: .3rem; border-radius: 999px; background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-history p, .support-history strong, .support-history small, .support-history em { display: block; margin: 0; } .support-history strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .support-history small { margin-top: .12rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .support-history em { margin-top: .18rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-style: normal; line-height: 1.4; } .support-admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; } .support-compact-form { display: grid; gap: .65rem; } .support-form-box { margin-bottom: .8rem; border: 1px solid var(--ok-line-e8ecf2,#e8ecf2); border-radius: .85rem; background: var(--ok-surface-fafbfd,#fafbfd); padding: .75rem; } .support-inline-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .65rem; } .support-admin-list button { display: flex; align-items: center; gap: .65rem; width: 100%; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .75rem; background: var(--ok-surface-ffffff,#fff); padding: .65rem; color: var(--ok-ink-334155,#334155); cursor: pointer; text-align: left; } .support-admin-list button:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-faf9fe,#faf9fe); } .support-admin-list button > .material-symbols-rounded { display: grid; width: 2.1rem; height: 2.1rem; flex: 0 0 2.1rem; place-items: center; border-radius: .62rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .support-admin-list button > span:nth-child(2) { min-width: 0; flex: 1; } .support-admin-list strong, .support-admin-list small { display: block; } .support-admin-list strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .66rem; } .support-admin-list small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-checkbox { display: flex; align-items: flex-start; gap: .5rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); padding: .58rem; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 800; } .support-checkbox input { margin-top: .12rem; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .support-checkbox small { display: block; margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 500; } .support-article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .support-article-grid > article { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; gap: .65rem; border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .75rem; } .support-article-icon { display: grid; width: 2.4rem; height: 2.4rem; place-items: center; border-radius: .7rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .support-article-icon .material-symbols-rounded { font-size: 1.15rem; } .support-article-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; } .support-article-meta > span:not(.ds-status-badge) { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-article-grid h3 { margin: .42rem 0 0; color: var(--ok-ink-1e293b,#1e293b); font-size: .75rem; } .support-article-grid p { margin: .3rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.5; } .support-article-grid small { display: block; margin-top: .42rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .support-article-grid article > a { display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .58rem; color: var(--ok-ink-4f4c8f,#4f4c8f); text-decoration: none; } .support-editor { min-height: 28rem; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; } .support-alert-table { display: grid; gap: .65rem; } .support-alert-table article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) minmax(9rem, .35fr) auto; gap: .75rem; align-items: start; border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .75rem; } .support-alert-severity { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .support-alert-severity--critical { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-dc2626,#dc2626); } .support-alert-severity--info { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .support-alert-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; } .support-alert-meta > span:not(.ds-status-badge) { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-alert-table h3 { margin: .42rem 0 0; color: var(--ok-ink-1e293b,#1e293b); font-size: .75rem; } .support-alert-table p { margin: .28rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.45; } .support-alert-table small { display: block; margin-top: .35rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .support-alert-context strong, .support-alert-context a { display: block; } .support-alert-context strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .support-alert-context a { margin-top: .2rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 800; text-decoration: none; } .support-alert-actions { display: flex; flex-direction: column; gap: .28rem; } .support-alert-actions button { border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .5rem; background: var(--ok-surface-ffffff,#fff); padding: .35rem .48rem; color: var(--ok-ink-475569,#475569); cursor: pointer; font-size: .65rem; font-weight: 800; } .support-token-alert { display: flex; gap: .7rem; border: 1px solid var(--ok-line-bae6fd,#bae6fd); border-radius: .9rem; background: var(--ok-surface-f0f9ff,#f0f9ff); padding: .85rem; color: var(--ok-ink-075985,#075985); } .support-token-alert > .material-symbols-rounded { font-size: 1.3rem; } .support-token-alert strong, .support-token-alert code, .support-token-alert p { display: block; } .support-token-alert strong { font-size: .68rem; } .support-token-alert code { margin-top: .35rem; overflow-wrap: anywhere; border-radius: .45rem; background: var(--ok-surface-ffffff,#fff); padding: .45rem; color: var(--ok-ink-0f172a,#0f172a); font-size: .65rem; } .support-token-alert p { margin: .35rem 0 0; font-size: .65rem; } } @media (max-width: 1180px) { .support-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .support-field--search { grid-column: span 2; } .support-ticket-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .support-dashboard-grid, .support-dashboard-grid--bottom, .support-ticket-layout, .support-admin-grid { grid-template-columns: 1fr; } .support-article-grid { grid-template-columns: 1fr; } .support-alert-table article { grid-template-columns: 2.5rem minmax(0, 1fr); } .support-alert-context, .support-alert-actions { grid-column: 2; } .support-alert-actions { flex-direction: row; flex-wrap: wrap; } } @media (max-width: 700px) { .support-metrics, .support-filter-grid, .support-filter-grid--kb, .support-filter-grid--noc, .support-ticket-summary { grid-template-columns: 1fr; } .support-field--search { grid-column: auto; } .support-actions-grid { grid-template-columns: 1fr; } .support-ticket-table { min-width: 0; } .support-message header time { width: 100%; margin-left: 0; } .support-article-grid > article { grid-template-columns: 2.2rem minmax(0, 1fr); } .support-article-grid article > a { grid-column: 2; } } @layer components { .support-attachments { display: grid; gap: .42rem; } .support-attachments > a { display: flex; align-items: center; gap: .5rem; border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .68rem; background: var(--ok-surface-ffffff,#fff); padding: .55rem; color: var(--ok-ink-334155,#334155); text-decoration: none; } .support-attachments > a:hover { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-faf9fe,#faf9fe); } .support-attachments > a > span:nth-child(2) { min-width: 0; flex: 1; } .support-attachments strong, .support-attachments small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-attachments strong { font-size: .65rem; } .support-attachments small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-attachments .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .support-upload-form { display: grid; gap: .5rem; margin-top: .7rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); padding-top: .7rem; } .support-upload-form > label { display: flex; align-items: center; gap: .55rem; border: 1px dashed var(--ok-line-b5b0df,#b5b0df); border-radius: .72rem; background: var(--ok-surface-faf9fe,#faf9fe); padding: .65rem; color: var(--ok-ink-403d75,#403d75); cursor: pointer; } .support-upload-form > label input { position: absolute; width: 1px; height: 1px; opacity: 0; } .support-upload-form > label strong, .support-upload-form > label small, .support-upload-form > label span:nth-child(2) { display: block; } .support-upload-form > label span:nth-child(2) { font-size: .65rem; font-weight: 850; } .support-upload-form > label small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 500; } } /* Finance and Contracts — Phase 3 */ @layer components { .finance-page, .contracts-page { display: grid; gap: .8rem; } .finance-items { display: grid; gap: .55rem; } .finance-item { display: grid; grid-template-columns: minmax(0, 1.6fr) .55fr .7fr auto; gap: .55rem; align-items: end; border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); padding: .7rem; } .finance-item-description { min-width: 0; } .finance-inline-actions { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .finance-inline-actions button, .finance-reconcile-controls button, .crm-table td > button { border: 1px solid var(--ok-line-d8dce5,#d8dce5); border-radius: .48rem; background: var(--ok-surface-ffffff,#fff); padding: .3rem .46rem; color: var(--ok-ink-403d75,#403d75); cursor: pointer; font-size: .65rem; font-weight: 850; } .finance-reconcile-controls { display: grid; grid-template-columns: 6.5rem minmax(12rem, 1fr) auto auto; gap: .35rem; align-items: center; min-width: 24rem; } .finance-reconcile-controls select { min-height: 2rem; border: 1px solid var(--ok-line-d8dce5,#d8dce5); border-radius: .48rem; background: var(--ok-surface-ffffff,#fff); padding: .25rem .4rem; font-size: .65rem; } .finance-status-filter { width: min(100%, 18rem); margin-bottom: .6rem; } .finance-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .finance-chip-list { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .65rem; } .finance-chip-list span { border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 999px; background: var(--ok-surface-f8fafc,#f8fafc); padding: .3rem .48rem; color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 750; } .finance-signature-link { display: grid; gap: .35rem; border: 1px solid var(--ok-line-bae6fd,#bae6fd); border-radius: .85rem; background: var(--ok-surface-f0f9ff,#f0f9ff); padding: .75rem; color: var(--ok-ink-075985,#075985); } .finance-signature-link strong, .finance-signature-link small { display: block; } .finance-signature-link input { width: 100%; border: 1px solid var(--ok-line-bae6fd,#bae6fd); border-radius: .55rem; background: var(--ok-surface-ffffff,#fff); padding: .55rem; color: var(--ok-ink-0f172a,#0f172a); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .65rem; } .contract-document { max-height: 40rem; overflow: auto; border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .8rem; background: var(--ok-surface-ffffff,#fff); padding: 1rem; color: var(--ok-ink-334155,#334155); font-size: .66rem; line-height: 1.75; white-space: normal; } .contract-signature-card { display: grid; gap: .25rem; border: 1px solid var(--ok-line-d1fae5,#d1fae5); border-radius: .75rem; background: var(--ok-surface-f0fdf4,#f0fdf4); padding: .7rem; } .contract-signature-card strong { color: var(--ok-ink-166534,#166534); font-size: .68rem; } .contract-signature-card small { color: var(--ok-ink-4b5563,#4b5563); font-size: .65rem; } .contract-signature-card code { overflow-wrap: anywhere; color: var(--ok-ink-475569,#475569); font-size: .65rem; } .public-contract-shell { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: radial-gradient(circle at top right, var(--ok-surface-4f4c8f_a120,rgba(79,76,143,.12)), transparent 30rem), var(--ok-surface-f5f7fb,#f5f7fb); } .public-contract-card, .public-contract-success { width: min(100%, 54rem); border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 1.25rem; background: var(--ok-surface-ffffff_a980,rgba(255,255,255,.98)); padding: clamp(1rem, 3vw, 2rem); box-shadow: 0 24px 65px -35px var(--ok-shadow-0f172a_a350,rgba(15,23,42,.35)); } .public-contract-card > header { display: flex; gap: .8rem; align-items: flex-start; margin-bottom: 1rem; } .public-contract-card > header > .material-symbols-rounded { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .85rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.5rem; } .public-contract-card h1 { margin: .15rem 0 0; color: var(--ok-ink-0f172a,#0f172a); font-size: 1.35rem; font-weight: 900; } .public-contract-card header p, .public-contract-card header small { margin: .2rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .public-contract-card form { margin-top: 1rem; } .public-contract-consent { display: flex; align-items: flex-start; gap: .55rem; border: 1px solid var(--ok-line-dbe4ee,#dbe4ee); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); padding: .65rem; color: var(--ok-ink-334155,#334155); font-size: .65rem; line-height: 1.5; } .public-contract-consent input { width: 1rem; height: 1rem; margin-top: .12rem; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .public-contract-success { text-align: center; } .public-contract-success > .material-symbols-rounded { color: var(--ok-ink-16a34a,#16a34a); font-size: 3.4rem; } .public-contract-success h1 { margin: .5rem 0 0; color: var(--ok-ink-0f172a,#0f172a); font-size: 1.7rem; } .public-contract-success p { color: var(--ok-ink-64748b,#64748b); line-height: 1.65; } } @media (max-width: 1050px) { .finance-settings-grid { grid-template-columns: 1fr 1fr; } .finance-settings-grid > :last-child { grid-column: 1 / -1; } } @media (max-width: 760px) { .finance-item { grid-template-columns: 1fr 1fr; } .finance-item-description { grid-column: 1 / -1; } .finance-settings-grid { grid-template-columns: 1fr; } .finance-settings-grid > :last-child { grid-column: auto; } .finance-reconcile-controls { grid-template-columns: 1fr; min-width: 13rem; } .public-contract-card > header { flex-direction: column; } } @layer components { .ds-form-section { display: grid; gap: .65rem; } .ds-form-section .ds-panel-body { display: grid; gap: .7rem; } } /* Finance and Contracts layout stabilization — Hotfix 3.0.1 */ @layer components { .finance-page, .contracts-page { width: 100%; max-width: 96rem; margin: 0 auto; gap: 1rem; } .crm-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: .85rem; align-items: stretch; } .crm-metrics-grid .ds-metric-card { min-height: 5.25rem; } .ds-metric-card--primary .ds-metric-card__icon, .ds-metric-card--brand .ds-metric-card__icon { background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-metric-card--info .ds-metric-card__icon, .ds-metric-card--blue .ds-metric-card__icon { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .ds-metric-card--warning .ds-metric-card__icon, .ds-metric-card--amber .ds-metric-card__icon { background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-b45309,#b45309); } .ds-metric-card--success .ds-metric-card__icon, .ds-metric-card--emerald .ds-metric-card__icon { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .ds-metric-card--danger .ds-metric-card__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-dc2626,#dc2626); } .crm-dashboard-grid { align-items: start; } .crm-form-stack { display: grid; gap: 1rem; min-width: 0; } .finance-page > .crm-form-stack, .contracts-page > .crm-form-stack { padding-bottom: 4.85rem; } .crm-field--span-2 { grid-column: span 2; } .crm-error { display: block; color: var(--ok-ink-b91c1c,#b91c1c); font-size: .65rem; font-weight: 750; line-height: 1.35; } .crm-input-icon { display: flex; min-width: 0; min-height: 2.7rem; align-items: center; gap: .5rem; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); padding: 0 .7rem; } .crm-input-icon:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a110,rgba(79, 76, 143, .11)); } .crm-input-icon > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1.08rem; } .crm-input-icon > input { min-width: 0; min-height: 2.55rem; flex: 1; border: 0; padding: 0; box-shadow: none !important; } .crm-activity-list { display: grid; gap: .55rem; } .crm-activity-item { display: grid; width: 100%; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; border: 1px solid var(--ok-line-e8ecf2,#e8ecf2); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); padding: .68rem; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease; } .crm-activity-item:hover { transform: translateY(-1px); border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-fcfbff,#fcfbff); box-shadow: 0 12px 28px -26px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .crm-activity-item > span:nth-child(2) { min-width: 0; } .crm-activity-item strong, .crm-activity-item small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-activity-item strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; font-weight: 850; } .crm-activity-item small { margin-top: .16rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.4; } .crm-activity-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-activity-icon .material-symbols-rounded { font-size: 1.15rem; } .crm-action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); gap: .65rem; } .crm-action-grid > a { display: grid; min-width: 0; grid-template-columns: 2.5rem minmax(0, 1fr); grid-template-rows: auto auto; align-items: center; column-gap: .7rem; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); padding: .72rem; color: inherit; text-decoration: none; transition: border-color .18s ease, background .18s ease, transform .18s ease; } .crm-action-grid > a:hover { transform: translateY(-1px); border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-faf9fe,#faf9fe); } .crm-action-grid > a > .material-symbols-rounded { grid-row: 1 / 3; display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .75rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.2rem; } .crm-action-grid > a > strong, .crm-action-grid > a > small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .crm-action-grid > a > strong { align-self: end; color: var(--ok-ink-1e293b,#1e293b); font-size: .7rem; font-weight: 850; } .crm-action-grid > a > small { align-self: start; margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .crm-icon-button { display: grid; width: 2.7rem; height: 2.7rem; place-items: center; border: 1px solid var(--ok-line-fecaca,#fecaca); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-b91c1c,#b91c1c); cursor: pointer; } .crm-icon-button:hover { background: var(--ok-surface-fef2f2,#fef2f2); } .crm-icon-button .material-symbols-rounded { font-size: 1.1rem; } .crm-checkbox-field { display: flex; min-width: 0; min-height: 2.7rem; align-items: center; gap: .65rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); padding: .55rem .7rem; cursor: pointer; } .crm-checkbox-field:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a110,rgba(79, 76, 143, .11)); } .crm-checkbox-field input[type="checkbox"] { width: 1.15rem; height: 1.15rem; min-height: 0; flex: 0 0 1.15rem; margin: 0; padding: 0; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .crm-checkbox-field > span { min-width: 0; } .crm-checkbox-field strong, .crm-checkbox-field small { display: block; } .crm-checkbox-field strong { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 850; } .crm-checkbox-field small { margin-top: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .ds-form-section { display: block; } .ds-form-section > .ds-panel__body { display: grid; gap: .8rem; } .ds-form-section > .ds-panel__body > .ds-button { justify-self: start; } .finance-item { grid-template-columns: minmax(15rem, 1.6fr) minmax(7rem, .55fr) minmax(9rem, .7fr) 2.7rem; } .contract-document { min-height: 7rem; overflow-wrap: anywhere; } .finance-signature-link { padding: .85rem 1rem; } .finance-signature-link input { font-size: .66rem; } } @media (max-width: 1180px) { .crm-metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .crm-action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 900px) { .crm-metrics-grid, .crm-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .finance-item { grid-template-columns: 1fr 1fr; } .finance-item-description { grid-column: 1 / -1; } .finance-item > .crm-icon-button { justify-self: end; } } @media (max-width: 700px) { .crm-metrics-grid, .crm-action-grid { grid-template-columns: 1fr; } .crm-field--span-2 { grid-column: auto; } .finance-page > .crm-form-stack, .contracts-page > .crm-form-stack { padding-bottom: 6.5rem; } .crm-activity-item { grid-template-columns: 2.35rem minmax(0, 1fr); } .finance-item { grid-template-columns: 1fr; } .finance-item-description { grid-column: auto; } .finance-item > .crm-icon-button { justify-self: start; } } /* Phase 4 — Hosting and Store */ @layer components { .phase4-page { display:grid; gap:.85rem; width:min(100%,100rem); margin:0 auto; } .phase4-notice { padding:.75rem 1rem; border:1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius:.85rem; background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-166534,#166534); font-size:.75rem; font-weight:800; } .phase4-split { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(20rem,.85fr); gap:.85rem; align-items:start; } .phase4-dns-layout { display:grid; grid-template-columns:minmax(19rem,.82fr) minmax(0,1.35fr); gap:.85rem; align-items:start; } .phase4-inline-form { margin-top:.85rem; padding-top:.85rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); } .phase4-zone-button { width:100%; border:1px solid var(--ok-line-e5eaf1,#e5eaf1); font:inherit; text-align:left; cursor:pointer; } .phase4-zone-button.is-selected { border-color:var(--ok-line-a9a3d4,#a9a3d4); background:var(--ok-surface-f6f5fc,#f6f5fc); box-shadow:0 12px 28px -24px var(--ok-shadow-4f4c8f_a800,rgba(79,76,143,.8)); } .phase4-form-actions { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; } .phase4-card-list { display:grid; gap:.58rem; } .phase4-resource-card { display:grid; grid-template-columns:2.65rem minmax(0,1fr) auto; align-items:center; gap:.75rem; min-width:0; padding:.75rem; border:1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius:.9rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; } .phase4-resource-card:hover { border-color:var(--ok-line-d3d0ed,#d3d0ed); background:var(--ok-surface-faf9fe,#faf9fe); } .phase4-resource-card>span:nth-child(2) { min-width:0; } .phase4-resource-card strong,.phase4-resource-card small { display:block; } .phase4-resource-card strong { color:var(--ok-ink-172033,#172033); font-size:.74rem; font-weight:900; } .phase4-resource-card small { margin-top:.18rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.4; overflow:hidden; text-overflow:ellipsis; } .phase4-resource-card>div:last-child { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; justify-content:flex-end; } .phase4-resource-icon { display:grid; width:2.65rem; height:2.65rem; place-items:center; border-radius:.78rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.22rem; } .phase4-link-button { display:inline-flex; align-items:center; min-height:2rem; border:0; background:transparent; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:900; text-decoration:none; cursor:pointer; } .phase4-link-button:hover { color:var(--ok-ink-2563eb,#2563eb); } .phase4-edit { border-color:var(--ok-line-dbe2ea,#dbe2ea); color:var(--ok-ink-4f4c8f,#4f4c8f); } .phase4-usage { width:7rem; max-width:100%; height:.38rem; overflow:hidden; border-radius:999px; background:var(--ok-surface-e8edf4,#e8edf4); } .phase4-usage span { display:block; width:min(var(--usage),100%); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); } .phase4-details { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; margin:0; } .phase4-details>div { min-width:0; padding:.7rem; border:1px solid var(--ok-line-edf1f5,#edf1f5); border-radius:.75rem; background:var(--ok-surface-fafbfc,#fafbfc); } .phase4-details dt { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .phase4-details dd { margin:.25rem 0 0; color:var(--ok-ink-172033,#172033); font-size:.72rem; font-weight:850; overflow-wrap:anywhere; } .phase4-plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(12.5rem,1fr)); gap:.7rem; } .phase4-plan-card { position:relative; display:grid; gap:.7rem; padding:.9rem; border:1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); } .phase4-plan-card.is-featured { border-color:var(--ok-line-b5b0df,#b5b0df); box-shadow:0 15px 35px -28px var(--ok-shadow-4f4c8f_a650,rgba(79,76,143,.65)); } .phase4-plan-card>div:first-child { display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:.15rem .65rem; align-items:center; } .phase4-plan-card>div:first-child>.material-symbols-rounded { grid-row:1/3; display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.7rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .phase4-plan-card strong,.phase4-plan-card small { display:block; } .phase4-plan-card>div:first-child>strong { color:var(--ok-ink-172033,#172033); font-size:.76rem; font-weight:900; } .phase4-plan-card>div:first-child>small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.35; } .phase4-plan-card>b { color:var(--ok-ink-172033,#172033); font-size:1.1rem; } .phase4-plan-card>b small { display:inline; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; } .phase4-plan-card ul { display:grid; gap:.32rem; margin:0; padding:0; list-style:none; color:var(--ok-ink-475569,#475569); font-size:.65rem; } .phase4-plan-card li::before { content:'check'; margin-right:.35rem; color:var(--ok-ink-16a34a,#16a34a); font-family:'Material Symbols Rounded'; vertical-align:middle; } .phase4-tabs { display:flex; align-items:center; gap:.3rem; overflow-x:auto; padding:.32rem; border:1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); } .phase4-tabs a { flex:0 0 auto; padding:.5rem .75rem; border-radius:.62rem; color:var(--ok-ink-64748b,#64748b); font-size:.66rem; font-weight:850; text-decoration:none; } .phase4-tabs a:hover,.phase4-tabs a.is-active { background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-403d75,#403d75); } .phase4-timeline { display:grid; gap:.55rem; } .phase4-timeline>div { display:grid; grid-template-columns:1.4rem minmax(0,1fr); gap:.5rem; } .phase4-timeline .material-symbols-rounded { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.9rem; } .phase4-timeline p,.phase4-timeline strong,.phase4-timeline small { display:block; margin:0; } .phase4-timeline strong { color:var(--ok-ink-334155,#334155); font-size:.68rem; } .phase4-timeline small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .phase4-billing-card { display:grid; grid-template-columns:minmax(10rem,1.2fr) minmax(10rem,1fr) auto; align-items:center; gap:.75rem; padding:.8rem; border:1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); } .phase4-billing-card strong,.phase4-billing-card small,.phase4-billing-card span { display:block; } .phase4-billing-card strong { color:var(--ok-ink-172033,#172033); font-size:.72rem; font-weight:900; } .phase4-billing-card small,.phase4-billing-card span { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .phase4-review-actions { grid-column:1/-1; display:grid; grid-template-columns:minmax(12rem,1fr) auto auto; gap:.5rem; } .phase4-review-actions input { min-height:2.45rem; padding:.55rem .7rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.7rem; } .phase4-review-actions button { min-height:2.45rem; padding:.5rem .8rem; border:1px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius:.7rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.65rem; font-weight:850; cursor:pointer; } .phase4-review-actions button.is-danger { border-color:var(--ok-line-fecaca,#fecaca); background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-b91c1c,#b91c1c); } .phase4-large-text { min-height:12rem!important; } .phase4-sticky-actions { position:sticky; bottom:.7rem; z-index:4; display:flex; justify-content:flex-end; gap:.55rem; padding:.65rem; border:1px solid var(--ok-line-dbe2ea_a900,rgba(219,226,234,.9)); border-radius:.9rem; background:var(--ok-surface-ffffff_a920,rgba(255,255,255,.92)); box-shadow:0 18px 40px -28px var(--ok-shadow-0f172a_a500,rgba(15,23,42,.5)); backdrop-filter:blur(12px); } .store-public { min-height:100vh; background:radial-gradient(circle at 88% 5%,var(--ok-surface-4f4c8f_a120,rgba(79,76,143,.12)),transparent 27rem),var(--ok-surface-f5f7fb,#f5f7fb); color:var(--ok-ink-172033,#172033); } .store-public__header { display:flex; min-height:4.5rem; align-items:center; justify-content:space-between; gap:1rem; max-width:78rem; margin:0 auto; padding:.8rem 1.2rem; } .store-public__brand { display:flex; align-items:center; gap:.7rem; color:inherit; text-decoration:none; } .store-public__brand>span { display:grid; width:2.7rem; height:2.7rem; place-items:center; border-radius:.85rem; background:linear-gradient(145deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-34325f,#34325f)); color:var(--ok-ink-ffffff,#fff); font-weight:900; } .store-public__brand strong,.store-public__brand small { display:block; } .store-public__brand strong { font-size:.78rem; font-weight:900; } .store-public__brand small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .store-public__trust { display:flex; align-items:center; gap:.35rem; color:var(--ok-ink-166534,#166534); font-size:.65rem; font-weight:800; } .store-public__trust .material-symbols-rounded { font-size:1rem; } .store-public__cta { padding:.62rem .85rem; border-radius:.72rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.66rem; font-weight:850; text-decoration:none; } .store-hero { max-width:78rem; margin:0 auto; padding:3rem 1.2rem 2rem; text-align:center; } .store-hero>span { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:950; letter-spacing:.13em; } .store-hero h1 { max-width:50rem; margin:.6rem auto 0; color:var(--ok-ink-0f172a,#0f172a); font-size:clamp(2rem,5vw,4rem); line-height:1.02; font-weight:950; letter-spacing:-.05em; } .store-hero p { max-width:42rem; margin:.85rem auto 0; color:var(--ok-ink-64748b,#64748b); font-size:.86rem; line-height:1.65; } .store-checkout-layout { display:grid; grid-template-columns:minmax(16rem,23rem) minmax(0,1fr); gap:1rem; max-width:78rem; margin:0 auto; padding:0 1.2rem 3rem; align-items:start; } .store-plan-list,.store-checkout-form { display:grid; gap:.7rem; } .store-plan-list>h2 { margin:0 0 .2rem; font-size:.85rem; font-weight:900; } .store-plan-option { display:grid; gap:.65rem; width:100%; padding:1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); text-align:left; cursor:pointer; transition:.18s ease; } .store-plan-option:hover,.store-plan-option.is-selected { border-color:var(--ok-line-8f88c8,#8f88c8); box-shadow:0 15px 38px -30px var(--ok-shadow-4f4c8f_a800,rgba(79,76,143,.8)); transform:translateY(-1px); } .store-plan-option>div { display:flex; align-items:center; gap:.55rem; } .store-plan-option>div>.material-symbols-rounded { display:grid; width:2.2rem; height:2.2rem; place-items:center; border-radius:.65rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-plan-option strong { font-size:.75rem; font-weight:900; } .store-plan-option em { margin-left:auto; padding:.25rem .45rem; border-radius:999px; background:var(--ok-surface-eef2ff,#eef2ff); color:var(--ok-ink-4338ca,#4338ca); font-size:.65rem; font-style:normal; font-weight:850; } .store-plan-option p { margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.45; } .store-plan-option>b { color:var(--ok-ink-0f172a,#0f172a); font-size:1.25rem; } .store-plan-option>b small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .store-plan-option ul { display:grid; gap:.25rem; margin:0; padding:0; color:var(--ok-ink-475569,#475569); font-size:.65rem; list-style:none; } .store-plan-option li::before { content:'check'; margin-right:.3rem; color:var(--ok-ink-16a34a,#16a34a); font-family:'Material Symbols Rounded'; } .store-checkout-form { gap:.8rem; } .store-form-section { display:grid; gap:.8rem; padding:1.1rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:1.1rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 18px 45px -35px var(--ok-shadow-0f172a_a400,rgba(15,23,42,.4)); } .store-form-section>div:first-child { display:flex; align-items:center; gap:.6rem; } .store-form-section>div:first-child>span { display:grid; width:1.8rem; height:1.8rem; place-items:center; border-radius:.55rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:900; } .store-form-section h2 { margin:0; font-size:.85rem; font-weight:900; } .store-form-section label { display:grid; gap:.32rem; color:var(--ok-ink-334155,#334155); font-size:.65rem; font-weight:850; } .store-form-section input,.store-form-section select { width:100%; min-height:2.8rem; padding:.65rem .75rem; border:1px solid var(--ok-line-cfd8e3,#cfd8e3); border-radius:.72rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-172033,#172033); font-size:.72rem; } .store-form-section label>small,.store-error { color:var(--ok-ink-b91c1c,#b91c1c); font-size:.65rem; } .store-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; } .store-type-toggle { display:grid!important; grid-template-columns:1fr 1fr; gap:.4rem!important; } .store-type-toggle button { min-height:2.5rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.68rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:850; cursor:pointer; } .store-type-toggle button.is-active { border-color:var(--ok-line-4f4c8f,#4f4c8f); background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-403d75,#403d75); } .store-summary dl { display:grid; gap:.4rem; margin:0; } .store-summary dl>div { display:flex; justify-content:space-between; gap:1rem; padding:.45rem 0; border-bottom:1px solid var(--ok-line-eef2f7,#eef2f7); font-size:.65rem; } .store-summary dt { color:var(--ok-ink-64748b,#64748b); } .store-summary dd { margin:0; color:var(--ok-ink-172033,#172033); font-weight:850; text-align:right; } .store-consent { display:flex!important; grid-template-columns:none!important; align-items:flex-start; gap:.55rem!important; padding:.7rem; border-radius:.72rem; background:var(--ok-surface-f8fafc,#f8fafc); line-height:1.45; } .store-consent input { width:1rem!important; min-height:1rem!important; flex:0 0 1rem; margin:.1rem 0 0; accent-color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-submit { display:flex; min-height:3rem; align-items:center; justify-content:center; gap:.45rem; border:0; border-radius:.78rem; background:linear-gradient(135deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-403d75,#403d75)); color:var(--ok-ink-ffffff,#fff); font-size:.72rem; font-weight:900; cursor:pointer; box-shadow:0 14px 28px -18px var(--ok-shadow-4f4c8f_a800,rgba(79,76,143,.8)); } .store-submit:disabled { opacity:.55; cursor:not-allowed; } .store-success { display:grid; max-width:34rem; margin:5rem auto; justify-items:center; gap:.75rem; padding:2rem; border:1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius:1.3rem; background:var(--ok-surface-ffffff,#fff); text-align:center; box-shadow:0 20px 55px -38px var(--ok-shadow-0f172a_a500,rgba(15,23,42,.5)); } .store-success>.material-symbols-rounded { display:grid; width:4rem; height:4rem; place-items:center; border-radius:1.2rem; background:var(--ok-surface-ecfdf5,#ecfdf5); color:var(--ok-ink-047857,#047857); font-size:2.2rem; } .store-success h1,.store-success p { margin:0; } .store-success p { color:var(--ok-ink-64748b,#64748b); line-height:1.6; } .store-success a { color:var(--ok-ink-4f4c8f,#4f4c8f); font-weight:850; } .store-showcase-tools { display:grid; gap:.8rem; max-width:78rem; margin:0 auto; padding:0 1.2rem 1.2rem; } .store-showcase-tools>label { display:flex; max-width:36rem; align-items:center; gap:.5rem; margin:0 auto; width:100%; min-height:3rem; padding:0 .85rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); } .store-showcase-tools input { min-width:0; width:100%; border:0; outline:0; background:transparent; } .store-showcase-tools nav { display:flex; justify-content:center; gap:.35rem; flex-wrap:wrap; } .store-showcase-tools nav a,.store-showcase-tools nav button { padding:.5rem .7rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:999px; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:850; text-decoration:none; cursor:pointer; } .store-showcase-tools nav .is-active { border-color:var(--ok-line-4f4c8f,#4f4c8f); background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-403d75,#403d75); } .store-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.9rem; max-width:78rem; margin:0 auto; padding:0 1.2rem 3rem; } .store-product-card { overflow:hidden; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:1.1rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 18px 45px -38px var(--ok-shadow-0f172a_a450,rgba(15,23,42,.45)); } .store-product-card__visual { position:relative; display:grid; min-height:9rem; place-items:center; background:linear-gradient(145deg,var(--ok-surface-f4f3fb,#f4f3fb),var(--ok-surface-eef4ff,#eef4ff)); color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-product-card__visual>.material-symbols-rounded { font-size:3rem; } .store-product-card__visual em { position:absolute; top:.65rem; right:.65rem; padding:.3rem .5rem; border-radius:999px; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.65rem; font-style:normal; font-weight:850; } .store-product-card>div:last-child { display:grid; gap:.45rem; padding:1rem; } .store-product-card small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:850; text-transform:uppercase; } .store-product-card h2,.store-product-card p { margin:0; } .store-product-card h2 { color:var(--ok-ink-172033,#172033); font-size:.88rem; font-weight:900; } .store-product-card p { min-height:2.8rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; } .store-product-card strong { color:var(--ok-ink-172033,#172033); font-size:.82rem; } .store-product-card>div:last-child>span { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .store-product-card button { display:flex; min-height:2.6rem; align-items:center; justify-content:center; gap:.35rem; margin-top:.25rem; border:0; border-radius:.72rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.65rem; font-weight:850; cursor:pointer; } .store-product-card button .material-symbols-rounded { font-size:.9rem; } .store-empty { grid-column:1/-1; padding:3rem; text-align:center; color:var(--ok-ink-64748b,#64748b); } .store-public__footer { padding:1.5rem; border-top:1px solid var(--ok-line-e2e8f0,#e2e8f0); color:var(--ok-ink-64748b,#64748b); font-size:.65rem; text-align:center; } } @media(max-width:1050px){ .phase4-split,.phase4-dns-layout { grid-template-columns:1fr; } .store-product-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:800px){ .phase4-details { grid-template-columns:repeat(2,minmax(0,1fr)); } .phase4-billing-card { grid-template-columns:1fr 1fr; } .phase4-billing-card>div:nth-child(3) { justify-self:end; } .store-checkout-layout { grid-template-columns:1fr; } .store-plan-list { grid-template-columns:repeat(3,minmax(13rem,1fr)); overflow-x:auto; padding-bottom:.3rem; } .store-plan-list>h2 { grid-column:1/-1; } } @media(max-width:650px){ .phase4-resource-card { grid-template-columns:2.4rem minmax(0,1fr); } .phase4-resource-card>div:last-child,.phase4-resource-card>.ds-status-badge { grid-column:2; justify-self:start; } .phase4-details { grid-template-columns:1fr; } .phase4-billing-card,.phase4-review-actions { grid-template-columns:1fr; } .phase4-billing-card>div:nth-child(3) { justify-self:start; } .phase4-sticky-actions { flex-direction:column-reverse; } .phase4-sticky-actions>* { width:100%; } .store-public__header { padding:.7rem .85rem; } .store-public__trust { display:none; } .store-hero { padding:2rem .9rem 1.5rem; } .store-checkout-layout,.store-showcase-tools,.store-product-grid { padding-left:.85rem; padding-right:.85rem; } .store-form-grid { grid-template-columns:1fr; } .store-product-grid { grid-template-columns:1fr; } .store-plan-list { grid-template-columns:repeat(3,minmax(15rem,1fr)); } } /* Phase 5 — Infrastructure, CMDB and network operations */ @layer components { .infra-page { --infra-border:var(--ok-line-e3e9f1,#e3e9f1); --infra-muted:var(--ok-ink-64748b,#64748b); } .infra-metrics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.72rem; } .infra-metric { display:grid; grid-template-columns:2.55rem minmax(0,1fr); align-items:center; gap:.68rem; min-width:0; padding:.82rem; border:1px solid var(--ok-line-e3e9f1,var(--infra-border)); border-radius:.95rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; box-shadow:0 14px 34px -30px var(--ok-shadow-0f172a_a500,rgba(15,23,42,.5)); } .infra-metric:hover { border-color:var(--ok-line-c8c4e5,#c8c4e5); background:var(--ok-surface-fbfaff,#fbfaff); transform:translateY(-1px); } .infra-metric>.material-symbols-rounded { display:grid; width:2.55rem; height:2.55rem; place-items:center; border-radius:.75rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.25rem; } .infra-metric small,.infra-metric strong,.infra-metric em { display:block; min-width:0; } .infra-metric small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:800; text-transform:uppercase; letter-spacing:.045em; } .infra-metric strong { margin-top:.12rem; color:var(--ok-ink-0f172a,#0f172a); font-size:1.18rem; line-height:1; font-weight:950; } .infra-metric em { margin-top:.25rem; overflow:hidden; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; } .infra-metric.is-warning>.material-symbols-rounded { background:var(--ok-surface-fff7ed,#fff7ed); color:var(--ok-ink-c2410c,#c2410c); } .infra-metric.is-danger>.material-symbols-rounded { background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-b91c1c,#b91c1c); } .infra-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.85rem; align-items:start; } .infra-action-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; } .infra-action { display:grid; grid-template-columns:2.3rem minmax(0,1fr); align-items:center; gap:.62rem; min-width:0; padding:.75rem; border:1px solid var(--ok-line-e3e9f1,var(--infra-border)); border-radius:.85rem; color:inherit; text-decoration:none; } .infra-action:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); background:var(--ok-surface-faf9fe,#faf9fe); } .infra-action>.material-symbols-rounded { display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:.68rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-action strong,.infra-action small { display:block; } .infra-action strong { color:var(--ok-ink-172033,#172033); font-size:.68rem; font-weight:900; } .infra-action small { margin-top:.15rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.35; } .infra-list { display:grid; gap:.55rem; } .infra-list-spaced { margin-top:.75rem; } .infra-list-item { display:grid; grid-template-columns:2.45rem minmax(0,1fr) auto; align-items:center; gap:.68rem; min-width:0; padding:.72rem; border:1px solid var(--ok-line-e8edf3,#e8edf3); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-align:left; text-decoration:none; } .infra-list-button { width:100%; font:inherit; cursor:pointer; } .infra-list-item:hover { border-color:var(--ok-line-d1cee8,#d1cee8); background:var(--ok-surface-fbfaff,#fbfaff); } .infra-list-item>div { min-width:0; } .infra-list-item strong,.infra-list-item small,.infra-list-item p,.infra-list-item em { display:block; margin:0; } .infra-list-item strong { color:var(--ok-ink-172033,#172033); font-size:.68rem; font-weight:900; } .infra-list-item small { margin-top:.15rem; overflow:hidden; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.4; text-overflow:ellipsis; } .infra-list-item p { margin-top:.35rem; color:var(--ok-ink-475569,#475569); font-size:.65rem; line-height:1.45; } .infra-list-item em { margin-top:.3rem; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-style:normal; line-height:1.4; } .infra-list-icon { display:grid; width:2.45rem; height:2.45rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.12rem; } .infra-list-meta { display:grid; justify-items:end; gap:.22rem; text-align:right; } .infra-list-meta small { max-width:10rem; } .infra-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:.3rem; } .infra-table { min-width:76rem; } .infra-table-link { display:grid; grid-template-columns:2.25rem minmax(0,1fr); align-items:center; gap:.58rem; color:inherit; text-decoration:none; } .infra-table-link>.material-symbols-rounded { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.66rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-filter-grid { display:grid; grid-template-columns:minmax(18rem,2fr) repeat(3,minmax(10rem,1fr)); gap:.65rem; align-items:end; } .infra-filter-search { min-width:0; } .infra-form-stack { display:grid; gap:.85rem; } .infra-form-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } .infra-inline-form { margin-top:.8rem; padding-top:.8rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); } .infra-check { display:flex; min-height:3rem; align-items:flex-start; gap:.6rem; padding:.65rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.72rem; background:var(--ok-surface-fafbfc,#fafbfc); color:var(--ok-ink-334155,#334155); cursor:pointer; } .infra-check input { flex:0 0 auto; width:1rem!important; min-height:1rem!important; margin:.14rem 0 0; accent-color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-check strong,.infra-check small { display:block; } .infra-check strong { font-size:.65rem; font-weight:900; } .infra-check small { margin-top:.18rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.35; } .infra-summary-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:.65rem; } .infra-summary-card { display:grid; grid-template-columns:2.35rem minmax(0,1fr); align-items:center; gap:.62rem; min-width:0; padding:.72rem; border:1px solid var(--ok-line-e3e9f1,var(--infra-border)); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); } .infra-summary-card>.material-symbols-rounded { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:.68rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-summary-card small,.infra-summary-card strong,.infra-summary-card em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .infra-summary-card small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:800; text-transform:uppercase; } .infra-summary-card strong { margin-top:.12rem; color:var(--ok-ink-172033,#172033); font-size:.7rem; font-weight:900; } .infra-summary-card em { margin-top:.13rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-style:normal; } .infra-details { grid-template-columns:repeat(3,minmax(0,1fr)); } .infra-note { margin-top:.7rem; padding:.72rem; border:1px solid var(--ok-line-edf1f5,#edf1f5); border-radius:.75rem; background:var(--ok-surface-fafbfc,#fafbfc); color:var(--ok-ink-475569,#475569); font-size:.65rem; line-height:1.55; white-space:pre-line; } .infra-upload { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem; align-items:end; margin-bottom:.7rem; } .infra-upload input { width:100%; min-height:2.65rem; padding:.55rem; border:1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius:.72rem; background:var(--ok-surface-fafbfc,#fafbfc); font-size:.65rem; } .infra-error { margin:.4rem 0; color:var(--ok-ink-b91c1c,#b91c1c); font-size:.65rem; font-weight:750; } .infra-timeline { max-height:25rem; overflow:auto; padding-right:.3rem; } .infra-card-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); gap:.6rem; } .infra-type-card,.infra-block-card { display:grid; grid-template-columns:2.3rem minmax(0,1fr) auto; align-items:center; gap:.58rem; width:100%; min-width:0; padding:.72rem; border:1px solid var(--ok-line-e3e9f1,var(--infra-border)); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); color:inherit; font:inherit; text-align:left; cursor:pointer; } .infra-type-card:hover,.infra-block-card:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); background:var(--ok-surface-faf9fe,#faf9fe); } .infra-type-card>.material-symbols-rounded { display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:.65rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-type-card strong,.infra-type-card small,.infra-block-card strong,.infra-block-card small { display:block; } .infra-type-card strong,.infra-block-card strong { color:var(--ok-ink-172033,#172033); font-size:.66rem; font-weight:900; } .infra-type-card small,.infra-block-card small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .infra-block-card { grid-template-columns:minmax(0,1fr) auto auto; } .infra-block-stats { display:grid; justify-items:end; gap:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .infra-map-card { position:relative; display:grid; gap:.55rem; padding:.75rem; border:1px solid var(--ok-line-e3e9f1,var(--infra-border)); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); } .infra-map-card>a { display:grid; grid-template-columns:2.35rem minmax(0,1fr); align-items:center; gap:.58rem; color:inherit; text-decoration:none; } .infra-map-card>a>.material-symbols-rounded { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:.68rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-map-card strong,.infra-map-card small { display:block; } .infra-map-card strong { color:var(--ok-ink-172033,#172033); font-size:.67rem; font-weight:900; } .infra-map-card small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .infra-map-card>div { display:flex; gap:.45rem; flex-wrap:wrap; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .infra-map-card>.crm-icon-button { position:absolute; top:.5rem; right:.5rem; } .infra-topology-canvas { position:relative; min-height:34rem; overflow:auto; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.9rem; background-color:var(--ok-surface-f9fbfd,#f9fbfd); background-image:linear-gradient(var(--ok-surface-e9eef5,#e9eef5) 1px,transparent 1px),linear-gradient(90deg,var(--ok-surface-e9eef5,#e9eef5) 1px,transparent 1px); background-size:24px 24px; touch-action:none; } .infra-topology-links { position:absolute; inset:0; width:1900px; height:1100px; pointer-events:none; } .infra-topology-links line { stroke:var(--ok-ink-94a3b8,#94a3b8); stroke-width:3; stroke-linecap:round; } .infra-topology-links line.is-online { stroke:var(--ok-ink-22c55e,#22c55e); } .infra-topology-links line.is-warning { stroke:var(--ok-ink-f59e0b,#f59e0b); stroke-dasharray:8 5; } .infra-topology-links line.is-offline { stroke:var(--ok-ink-ef4444,#ef4444); stroke-dasharray:5 5; } .infra-topology-node { position:absolute; z-index:2; display:grid; grid-template-columns:2rem minmax(0,1fr) 1.3rem; align-items:center; gap:.45rem; width:9rem; min-height:4.75rem; padding:.55rem; border:1px solid var(--ok-line-cfd8e3,#cfd8e3); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 12px 28px -22px var(--ok-shadow-0f172a_a600,rgba(15,23,42,.6)); cursor:grab; user-select:none; } .infra-topology-node:active { cursor:grabbing; box-shadow:0 18px 35px -20px var(--ok-shadow-4f4c8f_a750,rgba(79,76,143,.75)); } .infra-topology-node>.material-symbols-rounded { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.58rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .infra-topology-node strong,.infra-topology-node small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .infra-topology-node strong { color:var(--ok-ink-172033,#172033); font-size:.65rem; font-weight:900; } .infra-topology-node small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .infra-topology-node>button { display:grid; width:1.25rem; height:1.25rem; place-items:center; border:0; border-radius:.35rem; background:transparent; color:var(--ok-ink-94a3b8,#94a3b8); cursor:pointer; } .infra-topology-node>button:hover { background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-b91c1c,#b91c1c); } .infra-topology-node>button .material-symbols-rounded { font-size:.8rem; } .infra-topology-node.is-warning { border-color:var(--ok-line-f6c76b,#f6c76b); } .infra-topology-node.is-offline { border-color:var(--ok-line-fca5a5,#fca5a5); opacity:.8; } .infra-link-legend { display:flex; justify-content:flex-end; gap:.8rem; margin-top:.45rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .infra-link-legend span { display:flex; align-items:center; gap:.28rem; } .infra-link-legend i { width:1.2rem; height:.18rem; border-radius:999px; background:var(--ok-surface-94a3b8,#94a3b8); } .infra-link-legend i.is-online { background:var(--ok-surface-22c55e,#22c55e); }.infra-link-legend i.is-warning { background:var(--ok-surface-f59e0b,#f59e0b); }.infra-link-legend i.is-offline { background:var(--ok-surface-ef4444,#ef4444); } .infra-test-form { display:grid; grid-template-columns:minmax(13rem,1fr) minmax(9rem,.5fr) minmax(14rem,1.4fr) auto; gap:.65rem; align-items:end; } .infra-reveal-panel { display:grid; gap:.72rem; padding:1rem; border:1px solid var(--ok-line-fdba74,#fdba74); border-radius:1rem; background:var(--ok-surface-fff7ed,#fff7ed); box-shadow:0 18px 40px -32px var(--ok-shadow-c2410c_a450,rgba(194,65,12,.45)); } .infra-reveal-panel>div:first-child { display:flex; align-items:center; gap:.6rem; } .infra-reveal-panel>div:first-child>.material-symbols-rounded { display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:.65rem; background:var(--ok-surface-ffedd5,#ffedd5); color:var(--ok-ink-c2410c,#c2410c); } .infra-reveal-panel strong,.infra-reveal-panel small { display:block; } .infra-reveal-panel strong { font-size:.7rem; font-weight:900; }.infra-reveal-panel small { margin-top:.15rem; color:var(--ok-ink-9a3412,#9a3412); font-size:.65rem; } .infra-secret { display:grid; gap:.4rem; padding:.75rem; border:1px solid var(--ok-line-f59e0b,#f59e0b); border-radius:.75rem; background:var(--ok-surface-ffffff,#fff); } .infra-secret>span { color:var(--ok-ink-9a3412,#9a3412); font-size:.65rem; font-weight:900; text-transform:uppercase; } .infra-secret code { overflow:auto; padding:.65rem; border-radius:.55rem; background:var(--ok-surface-0f172a,#0f172a); color:var(--ok-ink-e2e8f0,#e2e8f0); font-size:.7rem; white-space:pre-wrap; overflow-wrap:anywhere; } } @media(max-width:1250px){.infra-metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.infra-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.infra-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.infra-filter-search{grid-column:1/-1}.infra-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.infra-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}} @media(max-width:900px){.infra-dashboard-grid{grid-template-columns:1fr}.infra-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.infra-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.infra-test-form{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.infra-metrics-grid,.infra-action-grid,.infra-filter-grid,.infra-form-grid,.infra-summary-grid,.infra-test-form{grid-template-columns:1fr}.infra-filter-search{grid-column:auto}.infra-list-item{grid-template-columns:2.35rem minmax(0,1fr)}.infra-list-item>.ds-status-badge,.infra-list-item>.infra-list-meta,.infra-list-item>.infra-row-actions{grid-column:2;justify-self:start;text-align:left}.infra-list-meta{justify-items:start}.infra-upload{grid-template-columns:1fr}.infra-details{grid-template-columns:1fr}.infra-topology-canvas{min-height:27rem}.infra-topology-node{width:8.4rem}} /* Phase 6 — Maintenance and Procurement */ @layer components { .maintenance-page,.procurement-page { --maint-border:var(--ok-line-dbe2ea,#dbe2ea); --maint-brand:var(--ok-ink-4f4c8f,#4f4c8f); display:grid; gap:.8rem; } .maint-metrics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.65rem; } .maint-metrics-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); } .maint-metric-card { display:grid; grid-template-columns:2.55rem minmax(0,1fr); align-items:center; gap:.65rem; min-width:0; padding:.78rem; border:1px solid var(--ok-line-dbe2ea,var(--maint-border)); border-radius:.9rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; box-shadow:0 14px 32px -30px var(--ok-shadow-0f172a_a500,rgba(15,23,42,.5)); } .maint-metric-card>.material-symbols-rounded { display:grid; width:2.55rem; height:2.55rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,var(--maint-brand)); } .maint-metric-card small,.maint-metric-card strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .maint-metric-card small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:850; text-transform:uppercase; } .maint-metric-card strong { margin-top:.12rem; color:var(--ok-ink-172033,#172033); font-size:.92rem; font-weight:950; } .maint-metric-card.is-danger>.material-symbols-rounded { background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-b91c1c,#b91c1c); }.maint-metric-card.is-warning>.material-symbols-rounded { background:var(--ok-surface-fffbeb,#fffbeb); color:var(--ok-ink-b45309,#b45309); }.maint-metric-card.is-success>.material-symbols-rounded { background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-15803d,#15803d); }.maint-metric-card.is-info>.material-symbols-rounded { background:var(--ok-surface-eff6ff,#eff6ff); color:var(--ok-ink-1d4ed8,#1d4ed8); } .maint-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; align-items:start; } .maint-dashboard-grid--inventory { grid-template-columns:minmax(0,1.65fr) minmax(18rem,.75fr); }.maint-dashboard-grid--providers { grid-template-columns:minmax(0,1.7fr) minmax(18rem,.7fr); } .maint-side-stack { display:grid; gap:.75rem; } .maint-list { display:grid; gap:.48rem; } .maint-list-item { display:grid; grid-template-columns:2.35rem minmax(0,1fr) auto; align-items:center; gap:.62rem; min-width:0; padding:.65rem; border:1px solid var(--ok-line-edf1f5,#edf1f5); border-radius:.78rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; } a.maint-list-item:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); background:var(--ok-surface-faf9fe,#faf9fe); } .maint-list-icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:.67rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .maint-list-item strong,.maint-list-item small { display:block; min-width:0; }.maint-list-item strong { color:var(--ok-ink-172033,#172033); font-size:.65rem; font-weight:900; }.maint-list-item small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.35; } .maint-list-meta { display:grid; justify-items:end; gap:.17rem; text-align:right; } .maint-action-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.6rem; } .maint-action-card { display:grid; grid-template-columns:2.35rem minmax(0,1fr) 1.2rem; align-items:center; gap:.58rem; min-width:0; padding:.72rem; border:1px solid var(--ok-line-dbe2ea,var(--maint-border)); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; } .maint-action-card:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); background:var(--ok-surface-faf9fe,#faf9fe); }.maint-action-card>.material-symbols-rounded:first-child { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:.65rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.maint-action-card>.material-symbols-rounded:last-child { color:var(--ok-ink-94a3b8,#94a3b8); font-size:.85rem; } .maint-action-card strong,.maint-action-card small { display:block; }.maint-action-card strong { font-size:.65rem; font-weight:900; }.maint-action-card small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .maint-filter-grid { display:grid; grid-template-columns:minmax(18rem,2fr) repeat(3,minmax(10rem,1fr)); gap:.65rem; align-items:end; }.maint-filter-grid--three { grid-template-columns:minmax(18rem,2fr) repeat(2,minmax(10rem,1fr)); }.maint-filter-search { min-width:0; } .maint-table { min-width:72rem; }.maint-table-link { display:grid; grid-template-columns:2.2rem minmax(0,1fr); align-items:center; gap:.55rem; color:inherit; text-decoration:none; }.maint-table-link>.material-symbols-rounded { display:grid; width:2.2rem; height:2.2rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.maint-table .is-danger { color:var(--ok-ink-b91c1c,#b91c1c); }.maint-table tr.is-attention { background:var(--ok-surface-fffbeb,#fffbeb); } .maint-summary-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.65rem; }.maint-summary-grid--compact { grid-template-columns:repeat(3,minmax(0,1fr)); } .maint-checklist { display:grid; gap:.45rem; }.maint-check-item { display:grid; grid-template-columns:1.8rem minmax(0,1fr); align-items:center; gap:.5rem; width:100%; padding:.62rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.7rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-334155,#334155); text-align:left; cursor:pointer; }.maint-check-item:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); }.maint-check-item>.material-symbols-rounded { color:var(--ok-ink-94a3b8,#94a3b8); }.maint-check-item.is-done { border-color:var(--ok-line-bbf7d0,#bbf7d0); background:var(--ok-surface-f0fdf4,#f0fdf4); }.maint-check-item.is-done>.material-symbols-rounded { color:var(--ok-ink-15803d,#15803d); }.maint-check-item strong,.maint-check-item small { display:block; }.maint-check-item strong { font-size:.65rem; font-weight:850; }.maint-check-item small { margin-top:.08rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .maint-status-form,.maint-compact-form { display:grid; gap:.58rem; }.maint-part-form { display:grid; grid-template-columns:minmax(12rem,1.5fr) 6rem minmax(10rem,1fr) auto; gap:.55rem; align-items:end; margin-bottom:.65rem; }.maint-panel-action { display:flex; justify-content:flex-end; margin-top:.65rem; } .maint-text-block { display:grid; gap:.35rem; color:var(--ok-ink-475569,#475569); font-size:.65rem; line-height:1.55; }.maint-text-block strong { color:var(--ok-ink-172033,#172033); font-size:.65rem; text-transform:uppercase; }.maint-text-block p { margin:0 0 .45rem; white-space:pre-line; } .maint-timeline { display:grid; gap:.55rem; }.maint-timeline-item { display:grid; grid-template-columns:2rem minmax(0,1fr); gap:.55rem; padding:.62rem 0; border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); }.maint-timeline-item:last-child { border-bottom:0; }.maint-timeline-item>.material-symbols-rounded { display:grid; width:2rem; height:2rem; place-items:center; border-radius:.58rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.maint-timeline-item strong,.maint-timeline-item small { display:block; }.maint-timeline-item strong { font-size:.65rem; }.maint-timeline-item small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.maint-timeline-item p { margin:.3rem 0 0; color:var(--ok-ink-475569,#475569); font-size:.65rem; } .maint-search { margin-bottom:.58rem; }.maint-inline-fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.5rem; } .maint-provider-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.6rem; }.maint-provider-card { display:grid; gap:.65rem; padding:.75rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); }.maint-provider-head { display:grid; grid-template-columns:2.25rem minmax(0,1fr); gap:.55rem; align-items:center; }.maint-provider-head>.material-symbols-rounded { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.maint-provider-head strong,.maint-provider-head small { display:block; }.maint-provider-head strong { font-size:.66rem; font-weight:900; }.maint-provider-head small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.maint-provider-card dl { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem; margin:0; }.maint-provider-card dl div { padding:.45rem; border-radius:.55rem; background:var(--ok-surface-f8fafc,#f8fafc); }.maint-provider-card dt { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:800; text-transform:uppercase; }.maint-provider-card dd { margin:.12rem 0 0; color:var(--ok-ink-172033,#172033); font-size:.65rem; font-weight:850; } .maint-checklist-editor { display:grid; gap:.45rem; }.maint-checklist-editor>div { display:grid; grid-template-columns:minmax(0,1fr) 2.4rem; gap:.4rem; }.maint-checklist-editor input { min-height:2.7rem; padding:.58rem .65rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.66rem; }.maint-checklist-editor button { border:1px solid var(--ok-line-fecaca,#fecaca); border-radius:.66rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-b91c1c,#b91c1c); cursor:pointer; }.maint-period { min-width:9rem; } .proc-card-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }.proc-card { display:grid; gap:.65rem; padding:.78rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.86rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; }.proc-card:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); background:var(--ok-surface-faf9fe,#faf9fe); }.proc-card-head { display:grid; grid-template-columns:2.3rem minmax(0,1fr) auto; align-items:center; gap:.55rem; }.proc-card-head>.material-symbols-rounded { display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:.65rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.proc-card strong,.proc-card small { display:block; }.proc-card strong { font-size:.65rem; font-weight:900; }.proc-card small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.proc-card-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.4rem; }.proc-card-stats span { padding:.42rem; border-radius:.55rem; background:var(--ok-surface-f8fafc,#f8fafc); }.proc-card p { margin:0; color:var(--ok-ink-475569,#475569); font-size:.65rem; line-height:1.5; }.proc-card footer { display:flex; justify-content:space-between; align-items:center; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .proc-items-editor { display:grid; gap:.7rem; }.proc-item-editor { padding:.72rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); }.proc-item-editor>header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.65rem; }.proc-item-editor>header strong { font-size:.66rem; }.proc-item-editor>header button { display:grid; width:2rem; height:2rem; place-items:center; border:1px solid var(--ok-line-fecaca,#fecaca); border-radius:.55rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-b91c1c,#b91c1c); cursor:pointer; } .proc-public-link { display:grid; grid-template-columns:minmax(12rem,.55fr) minmax(0,1.5fr); gap:.7rem; align-items:center; padding:.75rem; border:1px solid var(--ok-line-93c5fd,#93c5fd); border-radius:.85rem; background:var(--ok-surface-eff6ff,#eff6ff); }.proc-public-link strong,.proc-public-link small { display:block; }.proc-public-link strong { font-size:.65rem; }.proc-public-link small { margin-top:.1rem; color:var(--ok-ink-1e40af,#1e40af); font-size:.65rem; }.proc-public-link input { width:100%; min-height:2.4rem; padding:.5rem .65rem; border:1px solid var(--ok-line-bfdbfe,#bfdbfe); border-radius:.6rem; background:var(--ok-surface-ffffff,#fff); font-size:.65rem; } .proc-items-list { display:grid; gap:.65rem; }.proc-item-card { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.72rem; padding:.7rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.82rem; }.proc-item-card>img,.proc-item-placeholder { width:7rem; height:7rem; object-fit:cover; border-radius:.66rem; background:var(--ok-surface-f4f3fb,#f4f3fb); }.proc-item-placeholder { display:grid; place-items:center; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:2rem; }.proc-item-content { min-width:0; }.proc-item-content header { display:flex; justify-content:space-between; gap:.6rem; }.proc-item-content strong,.proc-item-content small { display:block; }.proc-item-content strong { font-size:.67rem; }.proc-item-content small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.proc-item-content p { color:var(--ok-ink-475569,#475569); font-size:.65rem; line-height:1.5; }.proc-item-content>a { display:inline-flex; align-items:center; gap:.25rem; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:850; }.proc-item-content>a .material-symbols-rounded { font-size:.75rem; }.proc-item-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.4rem; }.proc-item-stats span { padding:.42rem; border-radius:.55rem; background:var(--ok-surface-f8fafc,#f8fafc); }.proc-item-stats small,.proc-item-stats strong { display:block; }.proc-item-stats small { font-size:.65rem; text-transform:uppercase; }.proc-item-stats strong { margin-top:.1rem; font-size:.65rem; } .proc-totals { display:grid; gap:.45rem; margin:0; }.proc-totals div { display:flex; justify-content:space-between; gap:1rem; padding:.55rem; border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); }.proc-totals dt,.proc-totals dd { margin:0; font-size:.65rem; }.proc-totals dd { font-weight:900; }.proc-totals .is-total { border:0; border-radius:.65rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-37306f,#37306f); }.proc-totals .is-total dt,.proc-totals .is-total dd { font-size:.7rem; } .proc-public-body { margin:0; background:var(--ok-surface-f4f6fa,#f4f6fa); color:var(--ok-ink-172033,#172033); font-family:Inter,ui-sans-serif,system-ui,sans-serif; }.proc-public-shell { width:min(100% - 1rem,72rem); margin:.5rem auto 2rem; }.proc-public-page { display:grid; gap:.8rem; }.proc-public-header { display:flex; justify-content:space-between; align-items:center; padding:.75rem 1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.9rem; background:var(--ok-surface-ffffff,#fff); }.proc-public-brand { display:flex; align-items:center; gap:.55rem; }.proc-public-brand>span { display:grid; width:2.4rem; height:2.4rem; place-items:center; border-radius:.7rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-weight:900; }.proc-public-header strong,.proc-public-header small { display:block; }.proc-public-header strong { font-size:.72rem; }.proc-public-header small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .proc-public-hero { display:grid; grid-template-columns:3rem minmax(0,1fr) auto; align-items:center; gap:.8rem; padding:1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; background:linear-gradient(120deg,var(--ok-surface-ffffff,#fff) 55%,var(--ok-surface-eef2ff,#eef2ff)); }.proc-public-hero>.material-symbols-rounded { display:grid; width:3rem; height:3rem; place-items:center; border-radius:.8rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.proc-public-hero h1 { margin:.18rem 0; font-size:1.45rem; }.proc-public-hero p { margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.75rem; line-height:1.5; }.proc-public-hero small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:900; letter-spacing:.09em; }.proc-public-validity { text-align:right; }.proc-public-validity strong { display:block; margin-top:.15rem; } .proc-public-items { display:grid; gap:.7rem; }.proc-public-item { display:grid; grid-template-columns:11rem minmax(0,1fr); gap:1rem; padding:1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); }.proc-public-item>img,.proc-public-item>.proc-item-placeholder { width:11rem; height:11rem; object-fit:cover; }.proc-public-item-content header { display:flex; justify-content:space-between; gap:.7rem; }.proc-public-item-content h2 { margin:0; font-size:1rem; }.proc-public-item-content header small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.proc-public-item-content>p { color:var(--ok-ink-475569,#475569); font-size:.72rem; line-height:1.55; }.proc-public-status { align-self:start; padding:.35rem .55rem; border-radius:999px; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-475569,#475569); font-size:.65rem; font-weight:850; }.proc-public-status.is-approved { background:var(--ok-surface-dcfce7,#dcfce7); color:var(--ok-ink-166534,#166534); }.proc-public-status.is-rejected { background:var(--ok-surface-fee2e2,#fee2e2); color:var(--ok-ink-991b1b,#991b1b); }.proc-public-status.is-considering { background:var(--ok-surface-fef3c7,#fef3c7); color:var(--ok-ink-92400e,#92400e); } .proc-public-values { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem; }.proc-public-values span { padding:.6rem; border-radius:.65rem; background:var(--ok-surface-f8fafc,#f8fafc); }.proc-public-values small,.proc-public-values strong { display:block; }.proc-public-values small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.proc-public-values strong { margin-top:.12rem; font-size:.72rem; }.proc-public-lead { display:flex; align-items:center; gap:.3rem; }.proc-public-lead .material-symbols-rounded { font-size:.9rem; }.proc-public-actions { display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.7rem; }.proc-public-actions button,.proc-public-actions a,.proc-public-feedback button { display:inline-flex; align-items:center; gap:.3rem; min-height:2.35rem; padding:.52rem .72rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.65rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-334155,#334155); font:inherit; font-size:.65rem; font-weight:850; text-decoration:none; cursor:pointer; }.proc-public-actions .is-approve { border-color:var(--ok-line-86efac,#86efac); background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-166534,#166534); }.proc-public-actions .is-reject { border-color:var(--ok-line-fca5a5,#fca5a5); background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-991b1b,#991b1b); }.proc-public-actions .material-symbols-rounded,.proc-public-feedback .material-symbols-rounded { font-size:.85rem; } .proc-public-summary,.proc-public-feedback { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,.65fr); gap:1rem; padding:1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); }.proc-public-summary h2,.proc-public-feedback h2 { margin:0; font-size:.95rem; }.proc-public-summary p,.proc-public-feedback p { color:var(--ok-ink-64748b,#64748b); font-size:.68rem; }.proc-public-summary dl { margin:0; }.proc-public-summary dl div { display:flex; justify-content:space-between; padding:.4rem 0; border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); font-size:.66rem; }.proc-public-summary dl .is-total { margin-top:.25rem; border:0; color:var(--ok-ink-37306f,#37306f); font-size:.78rem; font-weight:900; }.proc-public-feedback { grid-template-columns:minmax(14rem,.65fr) minmax(0,1fr) auto; align-items:end; }.proc-public-feedback textarea { width:100%; padding:.65rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.7rem; resize:vertical; }.proc-public-feedback button { border:0; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); }.proc-public-footer { padding:.8rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; text-align:center; } } @media(max-width:1250px){.maint-metrics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.maint-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.proc-card-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.maint-dashboard-grid,.maint-dashboard-grid--inventory,.maint-dashboard-grid--providers{grid-template-columns:1fr}.maint-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.maint-filter-grid,.maint-filter-grid--three{grid-template-columns:repeat(2,minmax(0,1fr))}.maint-filter-search{grid-column:1/-1}.maint-part-form{grid-template-columns:repeat(2,minmax(0,1fr))}.maint-provider-grid{grid-template-columns:1fr}.proc-public-item{grid-template-columns:8rem minmax(0,1fr)}.proc-public-item>img,.proc-public-item>.proc-item-placeholder{width:8rem;height:8rem}.proc-public-summary,.proc-public-feedback{grid-template-columns:1fr}.proc-public-feedback button{justify-self:start}} @media(max-width:650px){.maint-metrics-grid,.maint-metrics-grid--four,.maint-summary-grid,.maint-summary-grid--compact,.maint-action-grid,.maint-filter-grid,.maint-filter-grid--three,.maint-part-form,.maint-inline-fields,.proc-card-grid,.proc-item-stats,.proc-public-values{grid-template-columns:1fr}.maint-filter-search{grid-column:auto}.maint-list-item{grid-template-columns:2.35rem minmax(0,1fr)}.maint-list-item>.maint-list-meta,.maint-list-item>strong{grid-column:2;justify-self:start;text-align:left}.maint-provider-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}.proc-public-link{grid-template-columns:1fr}.proc-item-card,.proc-public-item{grid-template-columns:1fr}.proc-item-card>img,.proc-item-placeholder,.proc-public-item>img,.proc-public-item>.proc-item-placeholder{width:100%;height:12rem}.proc-public-hero{grid-template-columns:2.6rem minmax(0,1fr)}.proc-public-validity{grid-column:2;text-align:left}.proc-public-item-content header{display:grid}.proc-public-header{align-items:flex-start}.proc-public-header>div:last-child{text-align:right}.proc-public-shell{width:min(100% - .7rem,72rem);margin:.35rem auto}.proc-public-feedback{grid-template-columns:1fr}} /* Phase 7 — BI, LGPD, Integrations and Automation */ @layer components { .phase7-page { display:grid; gap:.8rem; } .p7-metrics-grid { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.65rem; } .p7-metrics-grid--five { grid-template-columns:repeat(5,minmax(0,1fr)); } .p7-metrics-grid--four { grid-template-columns:repeat(4,minmax(0,1fr)); } .p7-metric { display:grid; grid-template-columns:2.5rem minmax(0,1fr); align-items:center; gap:.65rem; min-width:0; padding:.78rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.9rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; box-shadow:0 14px 32px -30px var(--ok-shadow-0f172a_a500,rgba(15,23,42,.5)); } .p7-metric>.material-symbols-rounded { display:grid; width:2.5rem; height:2.5rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .p7-metric small,.p7-metric strong,.p7-metric em { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .p7-metric small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:850; text-transform:uppercase; } .p7-metric strong { margin-top:.12rem; color:var(--ok-ink-172033,#172033); font-size:.88rem; font-weight:950; } .p7-metric em { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-style:normal; } .p7-metric.is-success>.material-symbols-rounded { background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-15803d,#15803d); }.p7-metric.is-warning>.material-symbols-rounded { background:var(--ok-surface-fffbeb,#fffbeb); color:var(--ok-ink-b45309,#b45309); }.p7-metric.is-danger>.material-symbols-rounded { background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-b91c1c,#b91c1c); } .p7-dashboard-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; align-items:start; } .p7-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.58rem; }.p7-action-grid--single { grid-template-columns:1fr; } .p7-action { display:grid; grid-template-columns:2.3rem minmax(0,1fr) 1rem; align-items:center; gap:.55rem; padding:.7rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; } .p7-action:hover { border-color:var(--ok-line-c9c5e5,#c9c5e5); background:var(--ok-surface-faf9fe,#faf9fe); }.p7-action>.material-symbols-rounded:first-child { display:grid; width:2.3rem; height:2.3rem; place-items:center; border-radius:.65rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.p7-action>.material-symbols-rounded:last-child { color:var(--ok-ink-94a3b8,#94a3b8); font-size:.85rem; } .p7-action strong,.p7-action small { display:block; }.p7-action strong { font-size:.65rem; font-weight:900; }.p7-action small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .p7-list { display:grid; gap:.48rem; }.p7-list-item { display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; align-items:center; gap:.58rem; min-width:0; padding:.62rem; border:1px solid var(--ok-line-edf1f5,#edf1f5); border-radius:.75rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; }.p7-list-item.is-danger { border-color:var(--ok-line-fecaca,#fecaca); background:var(--ok-surface-fff7f7,#fff7f7); } a.p7-list-item:hover { border-color:var(--ok-line-cbc7e5,#cbc7e5); background:var(--ok-surface-faf9fe,#faf9fe); }.p7-list-icon { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .p7-list-item strong,.p7-list-item small { display:block; min-width:0; }.p7-list-item strong { color:var(--ok-ink-172033,#172033); font-size:.65rem; font-weight:900; }.p7-list-item small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.35; } .p7-row-actions { display:flex; align-items:center; justify-content:flex-end; gap:.35rem; } .p7-filter-grid,.p7-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; align-items:end; }.p7-filter-grid { grid-template-columns:minmax(16rem,1.5fr) minmax(10rem,.7fr); }.p7-span-2 { grid-column:span 2; } .p7-filter-grid label,.p7-form-grid>label,.p7-field { display:grid; gap:.3rem; color:var(--ok-ink-475569,#475569); font-size:.65rem; font-weight:850; }.p7-filter-grid input,.p7-filter-grid select,.p7-form-grid input,.p7-form-grid select,.p7-form-grid textarea,.p7-field textarea,.p7-note-form textarea { width:100%; min-width:0; padding:.62rem .68rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.68rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-172033,#172033); font:inherit; font-size:.65rem; } .p7-form-grid textarea,.p7-field textarea,.p7-note-form textarea { resize:vertical; }.p7-form-grid input:focus,.p7-form-grid select:focus,.p7-form-grid textarea:focus,.p7-filter-grid input:focus,.p7-filter-grid select:focus { outline:3px solid var(--ok-line-4f4c8f_a130,rgba(79,76,143,.13)); border-color:var(--ok-line-8882bd,#8882bd); } .p7-form-actions { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; margin-top:.2rem; }.p7-check { display:flex!important; grid-template-columns:auto 1fr!important; align-items:center; gap:.45rem!important; align-self:center; }.p7-check input { width:auto!important; } .p7-notice { padding:.7rem .8rem; border:1px solid var(--ok-line-bfdbfe,#bfdbfe); border-radius:.75rem; background:var(--ok-surface-eff6ff,#eff6ff); color:var(--ok-ink-1d4ed8,#1d4ed8); font-size:.65rem; font-weight:700; }.p7-notice.is-success { border-color:var(--ok-line-bbf7d0,#bbf7d0); background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-166534,#166534); }.p7-notice.is-danger { border-color:var(--ok-line-fecaca,#fecaca); background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-991b1b,#991b1b); } .p7-summary-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.62rem; }.p7-summary-grid>div { padding:.72rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.78rem; background:var(--ok-surface-ffffff,#fff); }.p7-summary-grid small,.p7-summary-grid strong { display:block; }.p7-summary-grid small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; text-transform:uppercase; font-weight:850; }.p7-summary-grid strong { margin-top:.12rem; color:var(--ok-ink-172033,#172033); font-size:.68rem; font-weight:900; } .p7-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; margin:0 0 .75rem; }.p7-details div { padding:.6rem; border-radius:.65rem; background:var(--ok-surface-f8fafc,#f8fafc); }.p7-details dt { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:850; text-transform:uppercase; }.p7-details dd { margin:.15rem 0 0; color:var(--ok-ink-172033,#172033); font-size:.65rem; line-height:1.45; } .p7-note-form { display:grid; gap:.45rem; margin-top:.7rem; padding-top:.7rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); }.p7-muted { margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.p7-pagination { margin-top:.7rem; } .p7-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.p7-card { display:grid; gap:.58rem; padding:.75rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.82rem; background:var(--ok-surface-ffffff,#fff); }.p7-card header { display:grid; grid-template-columns:2.2rem minmax(0,1fr) auto; align-items:center; gap:.55rem; }.p7-card header>.material-symbols-rounded { display:grid; width:2.2rem; height:2.2rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); }.p7-card strong,.p7-card small { display:block; }.p7-card strong { font-size:.65rem; font-weight:900; }.p7-card small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.p7-card p { margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; }.p7-card footer { display:flex; gap:.45rem; padding-top:.48rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); } .p7-text-button,.p7-icon-button { border:0; border-radius:.55rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); cursor:pointer; font-size:.65rem; font-weight:850; }.p7-text-button { padding:.42rem .58rem; }.p7-icon-button { display:grid; width:2rem; height:2rem; place-items:center; }.p7-icon-button .material-symbols-rounded { font-size:.82rem; } .p7-secret { display:grid; gap:.45rem; padding:.8rem; border:1px solid var(--ok-line-f6c76b,#f6c76b); border-radius:.8rem; background:var(--ok-surface-fffbeb,#fffbeb); }.p7-secret strong { color:var(--ok-ink-92400e,#92400e); font-size:.65rem; }.p7-secret code { overflow:auto; padding:.62rem; border-radius:.58rem; background:var(--ok-surface-0f172a,#0f172a); color:var(--ok-ink-e2e8f0,#e2e8f0); font-size:.65rem; white-space:pre-wrap; overflow-wrap:anywhere; }.p7-secret small { color:var(--ok-ink-92400e,#92400e); font-size:.65rem; } .p7-token-list { display:grid; gap:.4rem; }.p7-token-list>div { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:.4rem; padding:.48rem; border-radius:.6rem; background:var(--ok-surface-f8fafc,#f8fafc); } .p7-scope-field { display:flex; flex-wrap:wrap; gap:.55rem; padding:.6rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.68rem; }.p7-scope-field legend { padding:0 .2rem; color:var(--ok-ink-475569,#475569); font-size:.65rem; font-weight:850; }.p7-scope-field label { display:flex; align-items:center; gap:.3rem; color:var(--ok-ink-334155,#334155); font-size:.65rem; } .p7-ranking { display:grid; gap:.4rem; }.p7-ranking>div { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.55rem .62rem; border-radius:.62rem; background:var(--ok-surface-f8fafc,#f8fafc); }.p7-ranking span { color:var(--ok-ink-475569,#475569); font-size:.65rem; }.p7-ranking strong { color:var(--ok-ink-172033,#172033); font-size:.65rem; } .p7-bars { display:grid; gap:.48rem; }.p7-bars>div { display:grid; grid-template-columns:3rem minmax(0,1fr) 7rem; align-items:center; gap:.55rem; }.p7-bars span,.p7-bars strong { font-size:.65rem; }.p7-bars strong { text-align:right; }.p7-bars i { position:relative; height:.55rem; border-radius:999px; background:var(--ok-surface-eef2f7,#eef2f7); overflow:hidden; }.p7-bars i:after { content:""; display:block; width:var(--value); height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); } } @media(max-width:1250px){.p7-metrics-grid,.p7-metrics-grid--five{grid-template-columns:repeat(3,minmax(0,1fr))}.p7-metrics-grid--four{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:900px){.p7-dashboard-grid,.p7-card-grid{grid-template-columns:1fr}.p7-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:650px){.p7-metrics-grid,.p7-metrics-grid--five,.p7-metrics-grid--four,.p7-action-grid,.p7-filter-grid,.p7-form-grid,.p7-summary-grid,.p7-details{grid-template-columns:1fr}.p7-span-2{grid-column:auto}.p7-list-item{grid-template-columns:2.25rem minmax(0,1fr)}.p7-list-item>.ds-status-badge,.p7-list-item>.p7-row-actions,.p7-list-item>strong,.p7-list-item>.p7-text-button{grid-column:2;justify-self:start}.p7-card header{grid-template-columns:2.2rem minmax(0,1fr)}.p7-card header>.ds-status-badge{grid-column:2;justify-self:start}.p7-bars>div{grid-template-columns:2.6rem minmax(0,1fr);}.p7-bars strong{grid-column:2;text-align:left}} /* Phase 8 — Customer Portal */ @layer components { .portal-body { min-height:100vh; margin:0; background:linear-gradient(145deg,var(--ok-surface-f6f7fb,#f6f7fb) 0%,var(--ok-surface-eef3fb,#eef3fb) 58%,var(--ok-surface-f9fbff,#f9fbff) 100%); color:var(--ok-ink-172033,#172033); } .portal-shell { min-height:100vh; display:grid; grid-template-columns:16.5rem minmax(0,1fr); } .portal-sidebar { position:sticky; top:0; height:100vh; display:grid; grid-template-rows:auto 1fr auto; gap:1rem; padding:1rem .8rem; border-right:1px solid var(--ok-line-dbe2ea,#dbe2ea); background:var(--ok-surface-ffffff_a900,rgba(255,255,255,.9)); backdrop-filter:blur(18px); z-index:20; } .portal-brand { display:grid; grid-template-columns:2.5rem 1fr; align-items:center; gap:.65rem; color:inherit; text-decoration:none; padding:.45rem; } .portal-brand>span,.portal-brand-mark { display:grid; width:2.5rem; height:2.5rem; place-items:center; border-radius:.78rem; background:linear-gradient(135deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); color:var(--ok-ink-ffffff,#fff); font-weight:700; box-shadow:0 12px 28px -18px var(--ok-shadow-4f4c8f,#4f4c8f); } .portal-brand strong,.portal-brand small { display:block; }.portal-brand strong { font-size:.72rem; font-weight:700; }.portal-brand small { margin-top:.08rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .portal-sidebar nav { display:grid; align-content:start; gap:.28rem; overflow:auto; } .portal-sidebar nav a { display:grid; grid-template-columns:2.05rem 1fr; align-items:center; gap:.55rem; min-height:2.65rem; padding:.45rem .55rem; border-radius:.72rem; color:var(--ok-ink-475569,#475569); text-decoration:none; font-size:.65rem; font-weight:700; } .portal-sidebar nav a:hover { background:var(--ok-surface-f5f3ff,#f5f3ff); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-sidebar nav a.is-active { background:linear-gradient(135deg,var(--ok-surface-efeff9,#efeff9),var(--ok-surface-edf4ff,#edf4ff)); color:var(--ok-ink-3f3b7e,#3f3b7e); box-shadow:inset 0 0 0 1px var(--ok-shadow-d8d5ec,#d8d5ec); } .portal-sidebar nav .material-symbols-rounded { font-size:1.05rem; } .portal-sidebar-footer { display:grid; gap:.55rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); padding-top:.75rem; } .portal-sidebar-footer>a { display:grid; grid-template-columns:2.1rem 1fr; align-items:center; gap:.52rem; color:inherit; text-decoration:none; }.portal-sidebar-footer>a strong,.portal-sidebar-footer>a small { display:block; }.portal-sidebar-footer>a strong { font-size:.65rem; }.portal-sidebar-footer>a small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .portal-sidebar-footer form button { width:100%; display:flex; align-items:center; justify-content:center; gap:.4rem; padding:.55rem; border:0; border-radius:.65rem; background:var(--ok-surface-f8fafc,#f8fafc); color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; cursor:pointer; } .portal-avatar { display:grid; width:2.1rem; height:2.1rem; place-items:center; border-radius:.66rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.7rem; font-weight:700; } .portal-workspace { min-width:0; }.portal-topbar { position:sticky; top:0; z-index:15; display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:4.6rem; padding:.7rem 1.15rem; border-bottom:1px solid var(--ok-line-dbe2ea_a850,rgba(219,226,234,.85)); background:var(--ok-surface-f8fafc_a860,rgba(248,250,252,.86)); backdrop-filter:blur(18px); } .portal-topbar>div:first-child small,.portal-topbar>div:first-child strong,.portal-topbar>div:first-child span { display:block; }.portal-topbar>div:first-child small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; text-transform:uppercase; }.portal-topbar>div:first-child strong { margin-top:.06rem; font-size:.82rem; font-weight:700; }.portal-topbar>div:first-child span { margin-top:.08rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .portal-topbar-actions { display:flex; align-items:center; gap:.55rem; }.portal-topbar-actions>a { position:relative; display:grid; width:2.25rem; height:2.25rem; place-items:center; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.68rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-4f4c8f,#4f4c8f); text-decoration:none; }.portal-topbar-actions>a>b { position:absolute; top:-.25rem; right:-.25rem; display:grid; min-width:1.05rem; height:1.05rem; place-items:center; padding:0 .2rem; border:2px solid var(--ok-line-ffffff,#fff); border-radius:999px; background:var(--ok-surface-dc2626,#dc2626); color:var(--ok-ink-ffffff,#fff); font-size:.65rem; } .portal-online { display:flex; align-items:center; gap:.32rem; color:var(--ok-ink-15803d,#15803d); font-size:.65rem; font-weight:700; }.portal-online i { width:.42rem; height:.42rem; border-radius:50%; background:var(--ok-surface-22c55e,#22c55e); box-shadow:0 0 0 .2rem var(--ok-shadow-dcfce7,#dcfce7); } .portal-main { width:min(100%,95rem); margin:0 auto; padding:1rem 1.15rem 5rem; }.portal-page { display:grid; gap:.8rem; }.portal-flash { display:flex; align-items:center; gap:.5rem; margin-bottom:.8rem; padding:.68rem .78rem; border:1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius:.75rem; background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-166534,#166534); font-size:.65rem; font-weight:700; } .portal-welcome,.portal-referral-hero { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.15rem 1.25rem; border:1px solid var(--ok-line-d9d7eb,#d9d7eb); border-radius:1rem; background:linear-gradient(135deg,var(--ok-surface-4f4c8f_a960,rgba(79,76,143,.96)),var(--ok-surface-2563eb_a900,rgba(37,99,235,.9))); color:var(--ok-ink-ffffff,#fff); box-shadow:0 24px 54px -40px var(--ok-shadow-1e3a8a,#1e3a8a); }.portal-welcome small,.portal-referral-hero small { font-size:.65rem; font-weight:700; text-transform:uppercase; opacity:.8; }.portal-welcome h1,.portal-referral-hero h1 { margin:.12rem 0; font-size:1.25rem; font-weight:700; }.portal-welcome p,.portal-referral-hero p { max-width:44rem; margin:0; font-size:.65rem; line-height:1.55; opacity:.86; }.portal-welcome>.material-symbols-rounded,.portal-referral-hero>.material-symbols-rounded { font-size:3.3rem; opacity:.82; } .portal-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }.portal-metrics--three { grid-template-columns:repeat(3,minmax(0,1fr)); }.portal-metrics>a,.portal-metrics>div { display:grid; grid-template-columns:2.55rem minmax(0,1fr); align-items:center; gap:.62rem; padding:.78rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.88rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; box-shadow:0 15px 34px -30px var(--ok-shadow-0f172a_a550,rgba(15,23,42,.55)); }.portal-metrics>a>.material-symbols-rounded,.portal-metrics>div>.material-symbols-rounded { display:grid; width:2.55rem; height:2.55rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f2f0fa,#f2f0fa); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-metrics .is-warning>.material-symbols-rounded { background:var(--ok-surface-fffbeb,#fffbeb); color:var(--ok-ink-b45309,#b45309); }.portal-metrics small,.portal-metrics strong,.portal-metrics em { display:block; }.portal-metrics small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; text-transform:uppercase; }.portal-metrics strong { margin-top:.08rem; font-size:.88rem; font-weight:700; }.portal-metrics em { margin-top:.05rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-style:normal; } .portal-grid-2,.portal-grid-main { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; align-items:start; }.portal-grid-main { grid-template-columns:minmax(0,1.7fr) minmax(18rem,.7fr); }.portal-side-stack { display:grid; gap:.75rem; } .portal-page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.22rem 0; }.portal-page-head>div:first-child { display:grid; grid-template-columns:2.6rem minmax(0,1fr); align-items:center; gap:.65rem; }.portal-page-head>div:first-child>.material-symbols-rounded { display:grid; width:2.6rem; height:2.6rem; place-items:center; border-radius:.75rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-page-head small,.portal-page-head h1,.portal-page-head p { display:block; margin:0; }.portal-page-head small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; text-transform:uppercase; }.portal-page-head h1 { margin-top:.08rem; font-size:1rem; font-weight:700; }.portal-page-head p { margin-top:.08rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-total { font-size:1rem; font-weight:700; color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-list { display:grid; gap:.45rem; }.portal-list>a,.portal-list>div { display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; align-items:center; gap:.58rem; min-width:0; padding:.62rem; border:1px solid var(--ok-line-edf1f5,#edf1f5); border-radius:.72rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; }.portal-list>a:hover { border-color:var(--ok-line-c9c5e5,#c9c5e5); background:var(--ok-surface-faf9fe,#faf9fe); }.portal-list>a>.material-symbols-rounded,.portal-list>div>.material-symbols-rounded { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f2f0fa,#f2f0fa); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-list strong,.portal-list small { display:block; }.portal-list strong { font-size:.65rem; font-weight:700; }.portal-list small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-list b { font-size:.65rem; }.portal-list-value { display:grid; justify-items:end; gap:.18rem; }.portal-list--table { margin-top:.65rem; } .portal-filter-grid,.portal-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.62rem; align-items:end; }.portal-filter-grid label,.portal-form-grid label,.portal-compact-form label,.portal-reply label { display:grid; gap:.28rem; color:var(--ok-ink-475569,#475569); font-size:.65rem; font-weight:700; }.portal-filter-grid input,.portal-filter-grid select,.portal-form-grid input,.portal-form-grid select,.portal-form-grid textarea,.portal-compact-form input,.portal-compact-form select,.portal-compact-form textarea,.portal-reply textarea,.portal-rating select { width:100%; min-width:0; padding:.62rem .68rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.67rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-172033,#172033); font:inherit; font-size:.65rem; }.portal-form-grid textarea,.portal-reply textarea,.portal-compact-form textarea { resize:vertical; }.portal-form-grid label>small,.portal-auth-form label>small { color:var(--ok-ink-b91c1c,#b91c1c); font-size:.65rem; }.portal-span-2 { grid-column:span 2; }.portal-form-actions { display:flex; justify-content:flex-end; gap:.5rem; margin-top:.7rem; } .portal-primary-button,.portal-secondary-button,.portal-danger-button { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.25rem; padding:.55rem .78rem; border-radius:.65rem; font-size:.65rem; font-weight:700; text-decoration:none; cursor:pointer; }.portal-primary-button { border:1px solid var(--ok-line-4f4c8f,#4f4c8f); background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); }.portal-primary-button:hover { background:var(--ok-surface-403d79,#403d79); }.portal-secondary-button { border:1px solid var(--ok-line-d5d2e8,#d5d2e8); background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-danger-button { width:100%; margin-top:.65rem; border:1px solid var(--ok-line-fecaca,#fecaca); background:var(--ok-surface-fff7f7,#fff7f7); color:var(--ok-ink-b91c1c,#b91c1c); } .portal-conversation { display:grid; gap:.62rem; max-height:34rem; overflow:auto; padding-right:.2rem; }.portal-conversation article { max-width:88%; padding:.72rem; border-radius:.8rem; }.portal-conversation article.is-team { justify-self:start; background:var(--ok-surface-f4f3fb,#f4f3fb); border:1px solid var(--ok-line-dedbea,#dedbea); }.portal-conversation article.is-customer { justify-self:end; background:var(--ok-surface-eff6ff,#eff6ff); border:1px solid var(--ok-line-bfdbfe,#bfdbfe); }.portal-conversation header { display:flex; justify-content:space-between; gap:.7rem; margin-bottom:.3rem; }.portal-conversation strong { font-size:.65rem; }.portal-conversation small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-conversation p { margin:0; color:var(--ok-ink-334155,#334155); font-size:.65rem; line-height:1.55; white-space:pre-line; }.portal-reply { display:grid; gap:.5rem; margin-top:.75rem; padding-top:.75rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-details { display:grid; gap:.4rem; margin:0; }.portal-details>div { padding:.55rem; border-radius:.62rem; background:var(--ok-surface-f8fafc,#f8fafc); }.portal-details dt { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; text-transform:uppercase; }.portal-details dd { margin:.12rem 0 0; color:var(--ok-ink-172033,#172033); font-size:.65rem; line-height:1.45; }.portal-details code { font-size:.65rem; overflow-wrap:anywhere; } .portal-tabs { display:flex; gap:.35rem; flex-wrap:wrap; }.portal-tabs button { padding:.45rem .65rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.58rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; cursor:pointer; }.portal-tabs button.is-active { border-color:var(--ok-line-4f4c8f,#4f4c8f); background:var(--ok-surface-f0eff8,#f0eff8); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoice-items { display:grid; gap:.45rem; }.portal-invoice-items>div { display:flex; justify-content:space-between; gap:1rem; padding:.58rem; border-radius:.62rem; background:var(--ok-surface-f8fafc,#f8fafc); }.portal-invoice-items strong,.portal-invoice-items small { display:block; }.portal-invoice-items strong { font-size:.65rem; }.portal-invoice-items small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-invoice-items b { font-size:.65rem; }.portal-invoice-items .is-total { border-top:1px solid var(--ok-line-dbe2ea,#dbe2ea); background:var(--ok-surface-f2f0fa,#f2f0fa); color:var(--ok-ink-4f4c8f,#4f4c8f); font-weight:700; }.portal-payment-code { display:grid; gap:.35rem; margin:.7rem 0; padding:.68rem; border:1px dashed var(--ok-line-a8a2cf,#a8a2cf); border-radius:.68rem; background:var(--ok-surface-faf9fe,#faf9fe); }.portal-payment-code strong { font-size:.65rem; }.portal-payment-code code { overflow:auto; font-size:.65rem; white-space:pre-wrap; overflow-wrap:anywhere; } .portal-compact-form { display:grid; gap:.5rem; margin-top:.65rem; }.portal-muted { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; }.portal-rating { display:grid; gap:.45rem; } .portal-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }.portal-service-card { display:grid; gap:.7rem; padding:.78rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; box-shadow:0 15px 34px -31px var(--ok-shadow-0f172a_a550,rgba(15,23,42,.55)); }.portal-service-card header { display:grid; grid-template-columns:2.25rem minmax(0,1fr) auto; align-items:center; gap:.55rem; }.portal-service-card header>.material-symbols-rounded { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f2f0fa,#f2f0fa); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-service-card header strong,.portal-service-card header small { display:block; }.portal-service-card header strong { font-size:.65rem; font-weight:700; }.portal-service-card header small { margin-top:.08rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-service-card dl { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin:0; }.portal-service-card dl>div { padding:.48rem; border-radius:.58rem; background:var(--ok-surface-f8fafc,#f8fafc); }.portal-service-card dt { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; text-transform:uppercase; }.portal-service-card dd { margin:.1rem 0 0; font-size:.65rem; font-weight:700; }.portal-service-card footer { border-top:1px solid var(--ok-line-edf1f5,#edf1f5); padding-top:.5rem; }.portal-service-card footer a { display:inline-flex; align-items:center; gap:.35rem; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; text-decoration:none; } .portal-document { max-height:44rem; overflow:auto; color:var(--ok-ink-334155,#334155); font-size:.65rem; line-height:1.72; white-space:normal; }.portal-consent { display:grid!important; grid-template-columns:auto 1fr!important; align-items:start; gap:.45rem!important; padding:.58rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.62rem; background:var(--ok-surface-f8fafc,#f8fafc); }.portal-consent input { width:auto!important; margin-top:.08rem; }.portal-signed { display:grid; justify-items:center; gap:.25rem; padding:1rem; color:var(--ok-ink-166534,#166534); text-align:center; }.portal-signed>.material-symbols-rounded { font-size:2.5rem; }.portal-signed strong,.portal-signed small { display:block; } .portal-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }.portal-product-card { display:grid; grid-template-rows:10rem 1fr auto; overflow:hidden; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); }.portal-product-card>img,.portal-product-placeholder { width:100%; height:10rem; object-fit:contain; background:var(--ok-surface-f8fafc,#f8fafc); }.portal-product-placeholder { display:grid; place-items:center; color:var(--ok-ink-94a3b8,#94a3b8); font-size:3rem; }.portal-product-card>div { padding:.7rem; }.portal-product-card strong { display:block; font-size:.65rem; font-weight:700; }.portal-product-card p { margin:.3rem 0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.45; }.portal-product-card small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; }.portal-product-card footer { display:grid; grid-template-columns:1fr auto; gap:.3rem; padding:.65rem .7rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); }.portal-product-card footer span,.portal-product-card footer b { font-size:.65rem; }.portal-product-card footer a { grid-column:1/-1; color:var(--ok-ink-2563eb,#2563eb); font-size:.65rem; font-weight:700; text-decoration:none; } .portal-mini-list { display:grid; gap:.4rem; }.portal-mini-list>div { display:grid; grid-template-columns:2rem 1fr; gap:.45rem; align-items:center; padding:.48rem; border-radius:.58rem; background:var(--ok-surface-f8fafc,#f8fafc); }.portal-mini-list>.material-symbols-rounded,.portal-mini-list>div>.material-symbols-rounded { color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-mini-list strong,.portal-mini-list small { display:block; }.portal-mini-list strong { font-size:.65rem; }.portal-mini-list small { margin-top:.08rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .portal-notification { grid-template-columns:2.25rem minmax(0,1fr) auto!important; }.portal-notification.is-unread { border-color:var(--ok-line-c7d2fe,#c7d2fe); background:var(--ok-surface-f5f7ff,#f5f7ff); }.portal-notification p { margin:.15rem 0; color:var(--ok-ink-475569,#475569); font-size:.65rem; }.portal-notification button { border:0; background:transparent; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; cursor:pointer; } .portal-referral-link { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.55rem; align-items:center; }.portal-referral-link code { overflow:auto; padding:.65rem; border-radius:.62rem; background:var(--ok-surface-0f172a,#0f172a); color:var(--ok-ink-e2e8f0,#e2e8f0); font-size:.65rem; white-space:nowrap; }.portal-referral-link a { padding:.58rem .7rem; border-radius:.62rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.65rem; font-weight:700; text-decoration:none; } .portal-pagination { margin-top:.7rem; }.portal-bottom-nav { display:none; } .portal-auth-body { min-height:100vh; margin:0; display:grid; place-items:center; padding:1rem; background:radial-gradient(circle at 20% 10%,var(--ok-surface-e9e7f7,#e9e7f7) 0,transparent 38%),radial-gradient(circle at 85% 90%,var(--ok-surface-dbeafe,#dbeafe) 0,transparent 38%),var(--ok-surface-f6f8fc,#f6f8fc); color:var(--ok-ink-172033,#172033); }.portal-auth-shell { width:min(100%,28rem); display:grid; gap:.8rem; }.portal-auth-brand { display:flex; align-items:center; justify-content:center; gap:.6rem; }.portal-auth-brand strong,.portal-auth-brand small { display:block; }.portal-auth-brand strong { font-size:.78rem; font-weight:700; }.portal-auth-brand small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-auth-card { padding:1.15rem; border:1px solid var(--ok-line-dbe2ea_a950,rgba(219,226,234,.95)); border-radius:1rem; background:var(--ok-surface-ffffff_a940,rgba(255,255,255,.94)); box-shadow:0 28px 70px -48px var(--ok-shadow-334155,#334155); backdrop-filter:blur(18px); }.portal-auth-heading { display:grid; grid-template-columns:2.8rem 1fr; gap:.65rem; align-items:center; margin-bottom:.85rem; }.portal-auth-heading>.material-symbols-rounded { display:grid; width:2.8rem; height:2.8rem; place-items:center; border-radius:.8rem; background:var(--ok-surface-f0eff8,#f0eff8); color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-auth-heading h1 { margin:0; font-size:1rem; font-weight:700; }.portal-auth-heading p { margin:.15rem 0 0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; }.portal-auth-form { display:grid; gap:.68rem; }.portal-auth-form label { display:grid; gap:.28rem; color:var(--ok-ink-475569,#475569); font-size:.65rem; font-weight:700; }.portal-auth-form label>div { display:grid; grid-template-columns:2.2rem 1fr; align-items:center; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.7rem; overflow:hidden; background:var(--ok-surface-ffffff,#fff); }.portal-auth-form label>div>.material-symbols-rounded { display:grid; place-items:center; color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-auth-form input { width:100%; min-width:0; border:0; padding:.68rem .65rem .68rem 0; outline:0; font-size:.65rem; }.portal-auth-form>button { display:flex; align-items:center; justify-content:center; gap:.4rem; min-height:2.55rem; border:0; border-radius:.72rem; background:linear-gradient(135deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); color:var(--ok-ink-ffffff,#fff); font-size:.65rem; font-weight:700; cursor:pointer; }.portal-auth-note,.portal-auth-help { margin:.75rem 0 0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; text-align:center; }.portal-auth-help { margin:0; }.portal-auth-admin { display:block; margin-top:.65rem; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; text-align:center; text-decoration:none; }.portal-auth-message { margin-bottom:.65rem; padding:.58rem; border-radius:.62rem; background:var(--ok-surface-eff6ff,#eff6ff); color:var(--ok-ink-1d4ed8,#1d4ed8); font-size:.65rem; }.portal-auth-resend { text-align:center; }.portal-auth-resend button { border:0; background:transparent; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; cursor:pointer; }.portal-otp-input { letter-spacing:.38rem; font-size:.85rem!important; font-weight:700; text-align:center; }.portal-auth-invalid { display:grid; justify-items:center; gap:.35rem; padding:.8rem; text-align:center; }.portal-auth-invalid>.material-symbols-rounded { font-size:2.6rem; color:var(--ok-ink-b45309,#b45309); }.portal-auth-invalid strong { font-size:.68rem; }.portal-auth-invalid p { margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; }.portal-auth-invalid a { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.65rem; font-weight:700; } } @media(max-width:1100px){.portal-shell{grid-template-columns:13.5rem minmax(0,1fr)}.portal-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-grid-main{grid-template-columns:minmax(0,1.3fr) minmax(16rem,.7fr)}} @media(max-width:760px){.portal-shell{display:block}.portal-sidebar{display:none}.portal-topbar{min-height:4.1rem;padding:.62rem .75rem}.portal-topbar>div:first-child span{display:none}.portal-main{padding:.75rem .7rem 5.4rem}.portal-bottom-nav{position:fixed;left:.55rem;right:.55rem;bottom:.5rem;z-index:30;display:grid;grid-template-columns:repeat(5,1fr);gap:.2rem;padding:.35rem;border:1px solid var(--ok-line-dbe2ea,#dbe2ea);border-radius:.9rem;background:var(--ok-surface-ffffff_a950,rgba(255,255,255,.95));box-shadow:0 20px 55px -28px var(--ok-shadow-334155,#334155);backdrop-filter:blur(18px)}.portal-bottom-nav a{display:grid;justify-items:center;gap:.1rem;padding:.35rem .15rem;border-radius:.58rem;color:var(--ok-ink-64748b,#64748b);text-decoration:none}.portal-bottom-nav a.is-active{background:var(--ok-surface-f0eff8,#f0eff8);color:var(--ok-ink-4f4c8f,#4f4c8f)}.portal-bottom-nav .material-symbols-rounded{font-size:1.05rem}.portal-bottom-nav small{font-size:.65rem;font-weight:700}.portal-grid-2,.portal-grid-main,.portal-card-grid{grid-template-columns:1fr}.portal-page-head{align-items:flex-start}.portal-product-grid{grid-template-columns:1fr 1fr}.portal-welcome h1,.portal-referral-hero h1{font-size:1rem}} @media(max-width:520px){.portal-metrics,.portal-metrics--three,.portal-filter-grid,.portal-form-grid,.portal-product-grid{grid-template-columns:1fr}.portal-span-2{grid-column:auto}.portal-page-head{display:grid}.portal-page-head>div:first-child{grid-template-columns:2.4rem minmax(0,1fr)}.portal-page-head>div:first-child>.material-symbols-rounded{width:2.4rem;height:2.4rem}.portal-list>a,.portal-list>div{grid-template-columns:2.15rem minmax(0,1fr)}.portal-list>a>.ds-status-badge,.portal-list>a>b,.portal-list>div>b,.portal-list-value,.portal-notification>button{grid-column:2;justify-self:start}.portal-service-card header{grid-template-columns:2.25rem minmax(0,1fr)}.portal-service-card header>.ds-status-badge{grid-column:2;justify-self:start}.portal-service-card dl{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-referral-link{grid-template-columns:1fr}.portal-topbar-actions .portal-online{display:none}.portal-welcome>.material-symbols-rounded,.portal-referral-hero>.material-symbols-rounded{display:none}} /* Phase 8 accessibility stabilization — readable Portal typography */ @layer components { .portal-body,.portal-auth-body { font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:16px; line-height:1.5; } .portal-brand strong { font-size:.95rem; }.portal-brand small { font-size:.75rem; } .portal-sidebar nav a { min-height:3rem; font-size:.88rem; }.portal-sidebar nav .material-symbols-rounded { font-size:1.25rem; } .portal-sidebar-footer>a strong { font-size:.82rem; }.portal-sidebar-footer>a small,.portal-sidebar-footer form button { font-size:.72rem; } .portal-topbar>div:first-child small { font-size:.72rem; }.portal-topbar>div:first-child strong { font-size:1.1rem; }.portal-topbar>div:first-child span { font-size:.78rem; } .portal-online { font-size:.72rem; }.portal-topbar-actions>a>b { font-size:.65rem; } .portal-main { padding:1.25rem 1.35rem 5rem; }.portal-page { gap:1rem; }.portal-flash { font-size:.88rem; } .portal-welcome small,.portal-referral-hero small { font-size:.72rem; }.portal-welcome h1,.portal-referral-hero h1 { font-size:1.65rem; }.portal-welcome p,.portal-referral-hero p { font-size:.92rem; } .portal-metrics small { font-size:.7rem; }.portal-metrics strong { font-size:1.35rem; }.portal-metrics em { font-size:.75rem; } .portal-page-head small { font-size:.7rem; }.portal-page-head h1 { font-size:1.4rem; }.portal-page-head p { font-size:.84rem; }.portal-total { font-size:1.25rem; } .portal-list strong { font-size:.9rem; }.portal-list small { font-size:.76rem; }.portal-list b,.portal-list-value { font-size:.82rem; } .portal-primary-button,.portal-secondary-button,.portal-danger-button { min-height:2.75rem; font-size:.85rem; } .portal-filter-grid label,.portal-form-grid label,.portal-compact-form label,.portal-reply label { font-size:.8rem; } .portal-filter-grid input,.portal-filter-grid select,.portal-form-grid input,.portal-form-grid select,.portal-form-grid textarea,.portal-compact-form input,.portal-compact-form select,.portal-compact-form textarea,.portal-reply textarea,.portal-reply input[type=file] { min-height:2.8rem; font-size:.88rem; } .portal-muted,.portal-details dt,.portal-details dd,.portal-invoice-items,.portal-payment-code,.portal-conversation,.portal-service-card,.portal-document,.portal-product-card,.portal-mini-list,.portal-notification,.portal-referral-link { font-size:.85rem; } .portal-service-card header strong,.portal-product-card strong { font-size:.9rem; }.portal-service-card header small,.portal-product-card p,.portal-product-card small { font-size:.76rem; } .portal-service-card dt { font-size:.67rem; }.portal-service-card dd,.portal-service-card footer a { font-size:.78rem; } .portal-document { font-size:.92rem; line-height:1.75; } .portal-product-card footer span,.portal-product-card footer b,.portal-product-card footer a { font-size:.78rem; } .portal-auth-brand strong { font-size:1rem; }.portal-auth-brand small { font-size:.78rem; }.portal-auth-card { padding:1.5rem; } .portal-auth-heading h1 { font-size:1.45rem; }.portal-auth-heading p { font-size:.86rem; }.portal-auth-form label { font-size:.82rem; }.portal-auth-form input { font-size:1rem; }.portal-auth-form>button { min-height:3rem; font-size:.9rem; } .portal-auth-note,.portal-auth-help,.portal-auth-admin,.portal-auth-resend button,.portal-auth-message,.portal-auth-invalid p,.portal-auth-invalid a { font-size:.78rem; } .portal-otp-input { font-size:1.35rem!important; }.portal-auth-invalid strong { font-size:1rem; } .portal-attachments { display:grid; gap:.45rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--ok-line-e2e8f0,#e2e8f0); } .portal-attachments>strong { font-size:.82rem; color:var(--ok-ink-334155,#334155); } .portal-attachments>a { display:grid; grid-template-columns:1.5rem minmax(0,1fr) auto; align-items:center; gap:.5rem; padding:.65rem .75rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.7rem; color:var(--ok-ink-334155,#334155); text-decoration:none; background:var(--ok-surface-f8fafc,#f8fafc); font-size:.8rem; } .portal-attachments>a:hover { border-color:var(--ok-line-c8c4e5,#c8c4e5); background:var(--ok-surface-f5f3ff,#f5f3ff); }.portal-attachments>a small { color:var(--ok-ink-64748b,#64748b); font-size:.72rem; } } @media(max-width:760px){.portal-bottom-nav small{font-size:.68rem}.portal-bottom-nav a{min-height:3.2rem}.portal-main{padding:.9rem .8rem 6rem}} /* Design System icon alignment — Hotfix 8.0.2 */ @layer components { .ds-icon-surface > .material-symbols-rounded { display: block; width: 1em; height: 1em; font-size: inherit; line-height: 1; text-align: center; transform: translateY(.08em); } } /* Global Material Symbols surface normalization — Hotfix 8.0.3 */ @layer components { :is( .identity-metric-card > .material-symbols-rounded, .app-command__results a > .material-symbols-rounded:first-child, .governance-security-list__icon, .governance-session-list article > .material-symbols-rounded, .crm-client-summary article > .material-symbols-rounded, .calendar-list-title > .material-symbols-rounded, .support-alert-item > .material-symbols-rounded, .support-admin-list button > .material-symbols-rounded, .public-contract-card > header > .material-symbols-rounded, .crm-action-grid > a > .material-symbols-rounded, .phase4-plan-card > div:first-child > .material-symbols-rounded, .store-plan-option > div > .material-symbols-rounded, .store-success > .material-symbols-rounded, .infra-metric > .material-symbols-rounded, .infra-action > .material-symbols-rounded, .infra-table-link > .material-symbols-rounded, .infra-summary-card > .material-symbols-rounded, .infra-type-card > .material-symbols-rounded, .infra-map-card > a > .material-symbols-rounded, .infra-topology-node > .material-symbols-rounded, .infra-reveal-panel > div:first-child > .material-symbols-rounded, .maint-metric-card > .material-symbols-rounded, .maint-action-card > .material-symbols-rounded:first-child, .maint-table-link > .material-symbols-rounded, .maint-timeline-item > .material-symbols-rounded, .maint-provider-head > .material-symbols-rounded, .proc-card-head > .material-symbols-rounded, .proc-public-hero > .material-symbols-rounded, .p7-metric > .material-symbols-rounded, .p7-action > .material-symbols-rounded:first-child, .p7-card header > .material-symbols-rounded, .portal-metrics > a > .material-symbols-rounded, .portal-metrics > div > .material-symbols-rounded, .portal-page-head > div:first-child > .material-symbols-rounded, .portal-list > a > .material-symbols-rounded, .portal-list > div > .material-symbols-rounded, .portal-service-card header > .material-symbols-rounded, .portal-auth-heading > .material-symbols-rounded, .material-symbols-rounded.p7-list-icon, .material-symbols-rounded.infra-list-icon, .material-symbols-rounded.phase4-resource-icon, .material-symbols-rounded.proc-item-placeholder, .material-symbols-rounded.portal-product-placeholder, .material-symbols-rounded.calendar-event-card__icon, .material-symbols-rounded.ds-attention-item__icon, .material-symbols-rounded.support-alert-severity ) { display: flex; align-items: center; justify-content: center; text-align: center; line-height: 1; flex-shrink: 0; } :is( .ds-icon-surface, .crm-activity-icon, .maint-list-icon, .crm-timeline__marker, .crm-record-icon, .identity-auth-icon, .identity-role-icon ) > .material-symbols-rounded { display: block; width: 1em; height: 1em; line-height: 1; text-align: center; transform: translateY(.08em); } } @media (max-width: 640px) { .material-symbols-rounded.calendar-event-card__icon { display: none; } } /* Material Symbols optical vertical centering — Hotfix 8.0.4 */ @layer components { :is( .identity-metric-card > .material-symbols-rounded, .app-command__results a > .material-symbols-rounded:first-child, .governance-security-list__icon, .governance-session-list article > .material-symbols-rounded, .crm-client-summary article > .material-symbols-rounded, .calendar-list-title > .material-symbols-rounded, .support-alert-item > .material-symbols-rounded, .support-admin-list button > .material-symbols-rounded, .public-contract-card > header > .material-symbols-rounded, .crm-action-grid > a > .material-symbols-rounded, .phase4-plan-card > div:first-child > .material-symbols-rounded, .store-plan-option > div > .material-symbols-rounded, .store-success > .material-symbols-rounded, .infra-metric > .material-symbols-rounded, .infra-action > .material-symbols-rounded, .infra-table-link > .material-symbols-rounded, .infra-summary-card > .material-symbols-rounded, .infra-type-card > .material-symbols-rounded, .infra-map-card > a > .material-symbols-rounded, .infra-topology-node > .material-symbols-rounded, .infra-reveal-panel > div:first-child > .material-symbols-rounded, .maint-metric-card > .material-symbols-rounded, .maint-action-card > .material-symbols-rounded:first-child, .maint-table-link > .material-symbols-rounded, .maint-timeline-item > .material-symbols-rounded, .maint-provider-head > .material-symbols-rounded, .proc-card-head > .material-symbols-rounded, .proc-public-hero > .material-symbols-rounded, .p7-metric > .material-symbols-rounded, .p7-action > .material-symbols-rounded:first-child, .p7-card header > .material-symbols-rounded, .portal-metrics > a > .material-symbols-rounded, .portal-metrics > div > .material-symbols-rounded, .portal-page-head > div:first-child > .material-symbols-rounded, .portal-list > a > .material-symbols-rounded, .portal-list > div > .material-symbols-rounded, .portal-service-card header > .material-symbols-rounded, .portal-auth-heading > .material-symbols-rounded, .material-symbols-rounded.p7-list-icon, .material-symbols-rounded.infra-list-icon, .material-symbols-rounded.phase4-resource-icon, .material-symbols-rounded.proc-item-placeholder, .material-symbols-rounded.portal-product-placeholder, .material-symbols-rounded.calendar-event-card__icon, .material-symbols-rounded.ds-attention-item__icon, .material-symbols-rounded.support-alert-severity ) { box-sizing: border-box; padding-block-start: .14em; } :is( .ds-icon-surface, .crm-activity-icon, .maint-list-icon, .crm-timeline__marker, .crm-record-icon, .identity-auth-icon, .identity-role-icon ) > .material-symbols-rounded { transform: translateY(.1em); } } /* Material Symbols structural flex centering — Hotfix 8.0.5 Intentionally unlayered so it overrides legacy @layer component rules. */ :is( .identity-metric-card > .material-symbols-rounded, .app-command__results a > .material-symbols-rounded:first-child, .governance-security-list__icon, .governance-session-list article > .material-symbols-rounded, .crm-client-summary article > .material-symbols-rounded, .calendar-list-title > .material-symbols-rounded, .support-alert-item > .material-symbols-rounded, .support-admin-list button > .material-symbols-rounded, .public-contract-card > header > .material-symbols-rounded, .crm-action-grid > a > .material-symbols-rounded, .phase4-plan-card > div:first-child > .material-symbols-rounded, .store-plan-option > div > .material-symbols-rounded, .store-success > .material-symbols-rounded, .infra-metric > .material-symbols-rounded, .infra-action > .material-symbols-rounded, .infra-table-link > .material-symbols-rounded, .infra-summary-card > .material-symbols-rounded, .infra-type-card > .material-symbols-rounded, .infra-map-card > a > .material-symbols-rounded, .infra-topology-node > .material-symbols-rounded, .infra-reveal-panel > div:first-child > .material-symbols-rounded, .maint-metric-card > .material-symbols-rounded, .maint-action-card > .material-symbols-rounded:first-child, .maint-table-link > .material-symbols-rounded, .maint-timeline-item > .material-symbols-rounded, .maint-provider-head > .material-symbols-rounded, .proc-card-head > .material-symbols-rounded, .proc-public-hero > .material-symbols-rounded, .p7-metric > .material-symbols-rounded, .p7-action > .material-symbols-rounded:first-child, .p7-card header > .material-symbols-rounded, .portal-metrics > a > .material-symbols-rounded, .portal-metrics > div > .material-symbols-rounded, .portal-page-head > div:first-child > .material-symbols-rounded, .portal-list > a > .material-symbols-rounded, .portal-list > div > .material-symbols-rounded, .portal-service-card header > .material-symbols-rounded, .portal-auth-heading > .material-symbols-rounded, .material-symbols-rounded.p7-list-icon, .material-symbols-rounded.infra-list-icon, .material-symbols-rounded.phase4-resource-icon, .material-symbols-rounded.proc-item-placeholder, .material-symbols-rounded.portal-product-placeholder, .material-symbols-rounded.calendar-event-card__icon, .material-symbols-rounded.ds-attention-item__icon, .material-symbols-rounded.support-alert-severity ) { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; box-sizing: border-box; margin: 0; padding-block: 0 !important; line-height: 1 !important; text-align: center; vertical-align: middle; } :is( .ds-icon-surface, .crm-activity-icon, .maint-list-icon, .crm-timeline__marker, .crm-record-icon, .identity-auth-icon, .identity-role-icon ) { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; } :is( .ds-icon-surface, .crm-activity-icon, .maint-list-icon, .crm-timeline__marker, .crm-record-icon, .identity-auth-icon, .identity-role-icon ) > :is(.material-symbols-rounded, .material-symbols-outlined, .material-symbols-sharp) { display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; transform: none !important; text-align: center; } @media (max-width: 640px) { .material-symbols-rounded.calendar-event-card__icon { display: none !important; } } /* Fase 8.1 — administração segura do Portal do Cliente */ .portal-impersonation-banner, .portal-readonly-banner { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; margin: .8rem clamp(.8rem, 2vw, 1.4rem) 0; padding: .75rem .85rem; border: 1px solid var(--ok-line-f0c96d,#f0c96d); border-radius: .9rem; background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-7c4a03,#7c4a03); box-shadow: 0 16px 34px -30px var(--ok-shadow-78350f_a450,rgba(120, 53, 15, .45)); } .portal-readonly-banner { grid-template-columns: 2.75rem minmax(0, 1fr); border-color: var(--ok-line-cbd5e1,#cbd5e1); background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-334155,#334155); } .portal-impersonation-banner > .material-symbols-rounded, .portal-readonly-banner > .material-symbols-rounded { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.75rem; height: 2.75rem; border-radius: .75rem; background: var(--ok-surface-f59e0b_a130,rgba(245, 158, 11, .13)); color: var(--ok-ink-b45309,#b45309); line-height: 1 !important; } .portal-readonly-banner > .material-symbols-rounded { background: var(--ok-surface-eef2ff,#eef2ff); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-impersonation-banner strong, .portal-impersonation-banner small, .portal-readonly-banner strong, .portal-readonly-banner small { display: block; } .portal-impersonation-banner strong, .portal-readonly-banner strong { font-size: .72rem; font-weight: 700; } .portal-impersonation-banner small, .portal-readonly-banner small { margin-top: .14rem; font-size: .65rem; line-height: 1.45; } .portal-impersonation-banner button { padding: .52rem .7rem; border: 0; border-radius: .62rem; background: var(--ok-surface-92400e,#92400e); color: var(--ok-ink-ffffff,#fff); cursor: pointer; font-size: .65rem; font-weight: 700; } .portal-flash--warning { border-color: var(--ok-line-f0c96d,#f0c96d) !important; background: var(--ok-surface-fffbeb,#fffbeb) !important; color: var(--ok-ink-92400e,#92400e) !important; } .portal-admin-grid { grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr); } .p7-list-item.is-selected { border-color: var(--ok-line-aaa5d3,#aaa5d3); background: var(--ok-surface-faf9ff,#faf9ff); box-shadow: inset 3px 0 0 var(--ok-shadow-4f4c8f,#4f4c8f); } .portal-access-summary { margin-bottom: .65rem; } .portal-access-form, .portal-impersonation-form { gap: .62rem; } .portal-permission-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; padding: .62rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-permission-grid .p7-check { min-width: 0; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 700; } .portal-permission-grid input:disabled + span { opacity: .65; } .portal-admin-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; } .portal-impersonation-form { display: grid; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid var(--ok-line-e2e8f0,#e2e8f0); } .portal-inline-alert { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .62rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-334155,#334155); } .portal-inline-alert > .material-symbols-rounded { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 2.25rem; height: 2.25rem; border-radius: .62rem; background: var(--ok-surface-eef2ff,#eef2ff); color: var(--ok-ink-4f4c8f,#4f4c8f); line-height: 1 !important; } .portal-inline-alert.is-warning { border-color: var(--ok-line-f0c96d,#f0c96d); background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-92400e,#92400e); } .portal-inline-alert.is-warning > .material-symbols-rounded { background: var(--ok-surface-f59e0b_a130,rgba(245, 158, 11, .13)); color: var(--ok-ink-b45309,#b45309); } .portal-inline-alert.is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fff7f7,#fff7f7); color: var(--ok-ink-991b1b,#991b1b); } .portal-inline-alert strong, .portal-inline-alert small { display: block; } .portal-inline-alert strong { font-size: .65rem; font-weight: 700; } .portal-inline-alert small { margin-top: .12rem; font-size: .65rem; line-height: 1.4; } .portal-field-error { color: var(--ok-ink-b91c1c,#b91c1c) !important; font-size: .65rem !important; font-weight: 700; } .portal-close-selection { margin-top: .7rem; } @media (max-width: 980px) { .portal-admin-grid { grid-template-columns: 1fr; } } @media (max-width: 700px) { .portal-impersonation-banner, .portal-readonly-banner { grid-template-columns: 2.5rem minmax(0, 1fr); } .portal-impersonation-banner form { grid-column: 2; } .portal-permission-grid { grid-template-columns: 1fr; } } /* Phase 4.1 — Public hosting wizard, DNS intelligence and anti-abuse */ @layer components { .store-wizard-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; max-width:78rem; margin:0 auto 1rem; padding:0 1.2rem; } .store-wizard-step { display:flex; align-items:center; gap:.65rem; min-width:0; padding:.78rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.9rem; background:var(--ok-surface-ffffff_a820,rgba(255,255,255,.82)); color:var(--ok-ink-64748b,#64748b); text-align:left; cursor:pointer; backdrop-filter:blur(10px); } .store-wizard-step:disabled { cursor:not-allowed; opacity:.62; } .store-wizard-step>.material-symbols-rounded { display:flex!important; align-items:center; justify-content:center; flex:0 0 2.65rem; width:2.65rem; height:2.65rem; padding:0; border-radius:.76rem; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-64748b,#64748b); font-size:1.25rem; line-height:1; vertical-align:middle; } .store-wizard-step__copy { display:flex; flex:1 1 auto; min-width:0; flex-direction:column; justify-content:center; gap:.08rem; } .store-wizard-step small,.store-wizard-step strong { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .store-wizard-step small { font-size:.68rem; font-weight:750; } .store-wizard-step strong { color:var(--ok-ink-334155,#334155); font-size:.82rem; font-weight:900; } .store-wizard-step.is-current { border-color:var(--ok-line-8d87c2,#8d87c2); background:var(--ok-surface-ffffff,#fff); box-shadow:0 14px 32px -27px var(--ok-shadow-4f4c8f_a800,rgba(79,76,143,.8)); } .store-wizard-step.is-current>.material-symbols-rounded { background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); } .store-wizard-step.is-current strong { color:var(--ok-ink-403d75,#403d75); } .store-wizard-step.is-complete>.material-symbols-rounded { background:var(--ok-surface-ecfdf5,#ecfdf5); color:var(--ok-ink-047857,#047857); } .store-wizard { display:grid; grid-template-columns:minmax(0,1fr) minmax(17rem,23rem); gap:1rem; align-items:start; max-width:78rem; margin:0 auto; padding:0 1.2rem 3rem; } .store-wizard__main { display:grid; gap:.8rem; min-width:0; } .store-wizard__summary { position:sticky; top:1rem; min-width:0; } .store-wizard-panel,.store-summary-card { border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:1.15rem; background:var(--ok-surface-ffffff_a960,rgba(255,255,255,.96)); box-shadow:0 20px 50px -40px var(--ok-shadow-0f172a_a550,rgba(15,23,42,.55)); } .store-wizard-panel { display:grid; gap:1rem; padding:1.2rem; } .store-wizard-panel__heading { display:flex; align-items:center; gap:.8rem; padding-bottom:.9rem; border-bottom:1px solid var(--ok-line-edf1f6,#edf1f6); } .store-wizard-panel__heading>.material-symbols-rounded { display:flex!important; align-items:center; justify-content:center; flex:0 0 3rem; width:3rem; height:3rem; padding:0; border-radius:.85rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.45rem; line-height:1; vertical-align:middle; } .store-wizard-panel__heading small,.store-wizard-panel__heading h2,.store-wizard-panel__heading p { display:block; margin:0; } .store-wizard-panel__heading small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.68rem; font-weight:900; text-transform:uppercase; letter-spacing:.055em; } .store-wizard-panel__heading h2 { margin-top:.12rem; color:var(--ok-ink-0f172a,#0f172a); font-size:1.18rem; line-height:1.2; font-weight:950; } .store-wizard-panel__heading p { margin-top:.25rem; color:var(--ok-ink-64748b,#64748b); font-size:.79rem; line-height:1.45; } .store-field { display:grid; gap:.38rem; min-width:0; color:var(--ok-ink-334155,#334155); font-size:.76rem; font-weight:850; } .store-field>span b { color:var(--ok-ink-dc2626,#dc2626); } .store-field input,.store-field select { width:100%; min-height:2.9rem; padding:.68rem .78rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.75rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-0f172a,#0f172a); font-size:.84rem; outline:none; transition:border-color .15s ease,box-shadow .15s ease; } .store-field input:focus,.store-field select:focus { border-color:var(--ok-line-6d68a8,#6d68a8); box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a130,rgba(79,76,143,.13)); } .store-field>small { color:var(--ok-ink-64748b,#64748b); font-size:.68rem; font-weight:600; line-height:1.45; } .store-field>em,.store-form-error { margin:0; color:var(--ok-ink-b91c1c,#b91c1c); font-size:.7rem; font-style:normal; font-weight:750; line-height:1.4; } .store-field--large input { min-height:3.15rem; font-size:.9rem; } .store-field--span-2 { grid-column:1/-1; } .store-input-action { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.5rem; } .store-input-action button { display:flex; align-items:center; justify-content:center; gap:.38rem; min-width:8.8rem; min-height:3.15rem; padding:.65rem .85rem; border:0; border-radius:.75rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.76rem; font-weight:900; cursor:pointer; } .store-input-action button:disabled { opacity:.65; cursor:progress; } .store-input-action .material-symbols-rounded { font-size:1.05rem; } .store-network-summary { display:grid; gap:.75rem; padding:.95rem; border:1px solid var(--ok-line-dce4ef,#dce4ef); border-radius:.9rem; background:var(--ok-surface-f8fafc,#f8fafc); } .store-network-summary__header { display:grid; grid-template-columns:2.55rem minmax(0,1fr) auto; align-items:center; gap:.65rem; } .store-network-summary__header>.material-symbols-rounded { display:flex; align-items:center; justify-content:center; width:2.55rem; height:2.55rem; border-radius:.72rem; background:var(--ok-surface-eef2ff,#eef2ff); color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-network-summary__header strong,.store-network-summary__header small { display:block; } .store-network-summary__header strong { color:var(--ok-ink-172033,#172033); font-size:.8rem; font-weight:900; } .store-network-summary__header small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.68rem; } .store-network-badge { padding:.34rem .55rem; border-radius:999px; background:var(--ok-surface-fff7ed,#fff7ed); color:var(--ok-ink-9a3412,#9a3412); font-size:.65rem; font-weight:900; white-space:nowrap; } .store-network-badge.is-success { background:var(--ok-surface-ecfdf5,#ecfdf5); color:var(--ok-ink-047857,#047857); } .store-network-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; margin:0; } .store-network-facts>div { min-width:0; padding:.65rem; border:1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius:.72rem; background:var(--ok-surface-ffffff,#fff); } .store-network-facts dt { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:800; } .store-network-facts dd { margin:.18rem 0 0; overflow-wrap:anywhere; color:var(--ok-ink-1e293b,#1e293b); font-size:.73rem; font-weight:850; line-height:1.4; } .store-network-message { display:grid; grid-template-columns:2.4rem minmax(0,1fr); gap:.65rem; align-items:start; padding:.72rem; border:1px solid var(--ok-line-bfdbfe,#bfdbfe); border-radius:.75rem; background:var(--ok-surface-eff6ff,#eff6ff); color:var(--ok-ink-1e40af,#1e40af); } .store-network-message>.material-symbols-rounded { display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:.66rem; background:var(--ok-surface-ffffff_a720,rgba(255,255,255,.72)); line-height:1; } .store-network-message strong,.store-network-message p { display:block; margin:0; } .store-network-message strong { font-size:.74rem; font-weight:900; } .store-network-message p { margin-top:.16rem; font-size:.69rem; line-height:1.45; } .store-network-message.is-warning { border-color:var(--ok-line-fde68a,#fde68a); background:var(--ok-surface-fffbeb,#fffbeb); color:var(--ok-ink-92400e,#92400e); } .store-network-message.is-success { border-color:var(--ok-line-bbf7d0,#bbf7d0); background:var(--ok-surface-ecfdf5,#ecfdf5); color:var(--ok-ink-166534,#166534); } .store-locked-plan { display:grid; grid-template-columns:2.55rem minmax(0,1fr); align-items:center; gap:.65rem; padding:.75rem; border:1px solid var(--ok-line-c7d2fe,#c7d2fe); border-radius:.8rem; background:var(--ok-surface-eef2ff,#eef2ff); color:var(--ok-ink-3730a3,#3730a3); } .store-locked-plan>.material-symbols-rounded { display:flex; align-items:center; justify-content:center; width:2.55rem; height:2.55rem; border-radius:.68rem; background:var(--ok-surface-ffffff,#fff); } .store-locked-plan strong,.store-locked-plan small { display:block; } .store-locked-plan strong { font-size:.77rem; font-weight:900; } .store-locked-plan small { margin-top:.15rem; font-size:.68rem; line-height:1.4; } .store-plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.7rem; } .store-plan-card { display:grid; gap:.55rem; min-width:0; padding:.9rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.9rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-align:left; cursor:pointer; transition:.15s ease; } .store-plan-card:hover,.store-plan-card.is-selected { border-color:var(--ok-line-7771b1,#7771b1); box-shadow:0 13px 30px -25px var(--ok-shadow-4f4c8f_a800,rgba(79,76,143,.8)); transform:translateY(-1px); } .store-plan-card:disabled:not(.is-selected) { opacity:.48; cursor:not-allowed; transform:none; } .store-plan-card__top { display:flex; align-items:center; justify-content:space-between; gap:.5rem; } .store-plan-card__top>.material-symbols-rounded { display:flex; align-items:center; justify-content:center; width:2.4rem; height:2.4rem; border-radius:.67rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-plan-card__top em { padding:.28rem .46rem; border-radius:999px; background:var(--ok-surface-eef2ff,#eef2ff); color:var(--ok-ink-4338ca,#4338ca); font-size:.65rem; font-style:normal; font-weight:900; } .store-plan-card>strong { color:var(--ok-ink-0f172a,#0f172a); font-size:.88rem; font-weight:950; } .store-plan-card>p { min-height:2.6rem; margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.7rem; line-height:1.45; } .store-plan-card>b { color:var(--ok-ink-0f172a,#0f172a); font-size:1.22rem; font-weight:950; } .store-plan-card>b small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:700; } .store-plan-card ul { display:grid; gap:.28rem; margin:0; padding:0; list-style:none; color:var(--ok-ink-475569,#475569); font-size:.67rem; } .store-plan-card li { display:flex; align-items:center; gap:.28rem; } .store-plan-card li>.material-symbols-rounded { color:var(--ok-ink-16a34a,#16a34a); font-size:.9rem; } .store-empty-plans { grid-column:1/-1; padding:2rem; border:1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius:.8rem; color:var(--ok-ink-64748b,#64748b); text-align:center; } .store-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.75rem; } .store-type-toggle { display:grid!important; grid-template-columns:1fr 1fr; gap:.4rem!important; margin:0; padding:.28rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.78rem; background:var(--ok-surface-f8fafc,#f8fafc); } .store-type-toggle legend { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); } .store-type-toggle button { min-height:2.55rem; border:0; border-radius:.6rem; background:transparent; color:var(--ok-ink-64748b,#64748b); font-size:.76rem; font-weight:900; cursor:pointer; } .store-type-toggle button.is-active { background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-403d75,#403d75); box-shadow:0 4px 14px -10px var(--ok-shadow-0f172a_a600,rgba(15,23,42,.6)); } .store-review-grid { display:grid; gap:.65rem; } .store-review-grid article { display:grid; grid-template-columns:2.6rem minmax(0,1fr) auto; align-items:center; gap:.65rem; padding:.75rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.78rem; background:var(--ok-surface-ffffff,#fff); } .store-review-grid article>.material-symbols-rounded { display:flex; align-items:center; justify-content:center; width:2.6rem; height:2.6rem; border-radius:.7rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-review-grid small,.store-review-grid strong,.store-review-grid p { display:block; margin:0; } .store-review-grid small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:800; } .store-review-grid strong { margin-top:.08rem; color:var(--ok-ink-172033,#172033); font-size:.8rem; font-weight:900; } .store-review-grid p { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.68rem; line-height:1.4; } .store-review-grid button { border:0; background:transparent; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.68rem; font-weight:900; cursor:pointer; } .store-consent { display:flex!important; align-items:flex-start; gap:.65rem!important; padding:.8rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.8rem; background:var(--ok-surface-f8fafc,#f8fafc); color:var(--ok-ink-334155,#334155); } .store-consent input { width:1.05rem!important; min-height:1.05rem!important; flex:0 0 1.05rem; margin:.12rem 0 0; accent-color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-consent strong,.store-consent small { display:block; } .store-consent strong { font-size:.75rem; font-weight:900; } .store-consent small { margin-top:.15rem; color:var(--ok-ink-64748b,#64748b); font-size:.68rem; line-height:1.45; } .store-honeypot { position:absolute!important; left:-10000px!important; top:auto!important; width:1px!important; height:1px!important; overflow:hidden!important; } .store-wizard-actions { display:flex; align-items:center; justify-content:space-between; gap:.65rem; padding:.72rem; border:1px solid var(--ok-line-dbe2ea_a920,rgba(219,226,234,.92)); border-radius:.9rem; background:var(--ok-surface-ffffff_a940,rgba(255,255,255,.94)); box-shadow:0 16px 40px -32px var(--ok-shadow-0f172a_a550,rgba(15,23,42,.55)); backdrop-filter:blur(12px); } .store-button-primary,.store-button-secondary { display:flex; align-items:center; justify-content:center; gap:.38rem; min-height:2.8rem; padding:.62rem .9rem; border-radius:.72rem; font-size:.75rem; font-weight:900; cursor:pointer; } .store-button-primary { border:1px solid var(--ok-line-4f4c8f,#4f4c8f); background:linear-gradient(135deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-403d75,#403d75)); color:var(--ok-ink-ffffff,#fff); } .store-button-secondary { border:1px solid var(--ok-line-dbe2ea,#dbe2ea); background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-475569,#475569); } .store-button-primary:disabled,.store-button-secondary:disabled { opacity:.58; cursor:progress; } .store-button-primary .material-symbols-rounded,.store-button-secondary .material-symbols-rounded { font-size:1rem; } .store-summary-card { overflow:hidden; } .store-summary-card__heading { display:flex; align-items:center; gap:.65rem; padding:.9rem; border-bottom:1px solid var(--ok-line-edf1f6,#edf1f6); } .store-summary-card__heading>.material-symbols-rounded { display:flex!important; align-items:center; justify-content:center; flex:0 0 2.65rem; width:2.65rem; height:2.65rem; padding:0; border-radius:.72rem; background:var(--ok-surface-f4f3fb,#f4f3fb); color:var(--ok-ink-4f4c8f,#4f4c8f); line-height:1; vertical-align:middle; } .store-summary-card__heading strong,.store-summary-card__heading small { display:block; } .store-summary-card__heading strong { color:var(--ok-ink-172033,#172033); font-size:.84rem; font-weight:950; } .store-summary-card__heading small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .store-summary-card dl { display:grid; gap:0; margin:0; padding:.45rem .9rem; } .store-summary-card dl>div { display:flex; justify-content:space-between; gap:1rem; padding:.5rem 0; border-bottom:1px solid var(--ok-line-f0f3f7,#f0f3f7); font-size:.7rem; } .store-summary-card dt { color:var(--ok-ink-64748b,#64748b); } .store-summary-card dd { margin:0; color:var(--ok-ink-172033,#172033); font-weight:850; text-align:right; } .store-summary-card .is-discount dd { color:var(--ok-ink-047857,#047857); } .store-summary-card .is-coupon dd { color:var(--ok-ink-4f4c8f,#4f4c8f); } .store-summary-total { display:grid; gap:.12rem; padding:.85rem .9rem; background:linear-gradient(145deg,var(--ok-surface-f7f6fc,#f7f6fc),var(--ok-surface-f2f6ff,#f2f6ff)); } .store-summary-total small { color:var(--ok-ink-64748b,#64748b); font-size:.65rem; } .store-summary-total strong { color:var(--ok-ink-0f172a,#0f172a); font-size:1.38rem; font-weight:950; } .store-summary-total span { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.67rem; font-weight:850; } .store-summary-empty { display:grid; justify-items:center; gap:.4rem; padding:1.5rem; color:var(--ok-ink-64748b,#64748b); text-align:center; } .store-summary-empty>.material-symbols-rounded { font-size:2rem; color:var(--ok-ink-a5b4c6,#a5b4c6); } .store-summary-empty p { margin:0; font-size:.72rem; line-height:1.45; } .store-summary-trust { display:grid; gap:.38rem; margin:0; padding:.8rem .9rem; border-top:1px solid var(--ok-line-edf1f6,#edf1f6); list-style:none; color:var(--ok-ink-475569,#475569); font-size:.67rem; } .store-summary-trust li { display:flex; align-items:center; gap:.35rem; } .store-summary-trust .material-symbols-rounded { color:var(--ok-ink-16a34a,#16a34a); font-size:.94rem; } .store-product-card__visual img { display:block; width:100%; height:11rem; object-fit:cover; } .store-product-card>div:last-child>a { display:flex; min-height:2.65rem; align-items:center; justify-content:center; gap:.35rem; margin-top:.25rem; border-radius:.72rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.7rem; font-weight:900; text-decoration:none; } } @media (max-width: 1000px) { .store-wizard { grid-template-columns:1fr; } .store-wizard__summary { position:static; order:-1; } .store-summary-card dl { grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 .8rem; } .store-summary-card dl>div { min-width:0; } } @media (max-width: 760px) { .store-wizard-steps { gap:.4rem; padding:0 .85rem; } .store-wizard-step { flex-direction:column; justify-content:center; align-items:center; gap:.25rem; padding:.55rem .3rem; text-align:center; } .store-wizard-step>.material-symbols-rounded { flex-basis:2.35rem; width:2.35rem; height:2.35rem; } .store-wizard-step__copy { width:100%; align-items:center; } .store-wizard-step small { display:none; } .store-wizard-step strong { max-width:100%; font-size:.7rem; } .store-wizard { padding-left:.85rem; padding-right:.85rem; } .store-plan-grid { grid-template-columns:1fr; } .store-form-grid,.store-network-facts { grid-template-columns:1fr; } .store-field--span-2 { grid-column:auto; } .store-summary-card dl { grid-template-columns:1fr; } } @media (max-width: 520px) { .store-wizard-panel { padding:.85rem; } .store-wizard-panel__heading { gap:.6rem; } .store-wizard-panel__heading>.material-symbols-rounded { width:2.65rem; height:2.65rem; } .store-input-action { grid-template-columns:1fr; } .store-input-action button { width:100%; } .store-network-summary__header { grid-template-columns:2.45rem minmax(0,1fr); } .store-network-badge { grid-column:2; justify-self:start; } .store-review-grid article { grid-template-columns:2.5rem minmax(0,1fr); } .store-review-grid article button { grid-column:2; justify-self:start; padding:0; } .store-wizard-actions { position:sticky; bottom:.45rem; z-index:5; } .store-button-primary,.store-button-secondary { min-width:0; } } @layer components { .store-form-notice { display: flex; align-items: flex-start; gap: .5rem; margin: 0; padding: .7rem .8rem; border: 1px solid var(--ok-line-bfdbfe,#bfdbfe); border-radius: .75rem; background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-1e40af,#1e40af); font-size: .76rem; font-weight: 650; line-height: 1.45; } .store-form-notice .material-symbols-rounded { flex: 0 0 auto; font-size: 1.05rem; line-height: 1.15; } } /* Store Wizard icon centering — Hotfix 4.1.5 Unlayered and !important by design: the external Material Symbols stylesheet is unlayered and may override Tailwind/component display declarations. */ .store-public .material-symbols-rounded.store-icon-flex { display: flex !important; align-items: center !important; justify-content: center !important; place-items: center !important; flex-shrink: 0; box-sizing: border-box; margin: 0; padding: 0 !important; line-height: 1 !important; text-align: center; vertical-align: middle; } /* Customer Portal authentication UX — Hotfix 8.1.2 Large, readable controls and mobile-first spacing for passwordless access. */ .portal-auth-body { min-height: 100vh; min-height: 100dvh; margin: 0; display: grid; place-items: center; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow-x: hidden; background: radial-gradient(circle at 12% 8%, var(--ok-surface-4f4c8f_a150,rgba(79, 76, 143, .15)), transparent 32rem), radial-gradient(circle at 92% 92%, var(--ok-surface-2563eb_a130,rgba(37, 99, 235, .13)), transparent 34rem), linear-gradient(145deg, var(--ok-surface-f8f9fd,#f8f9fd) 0%, var(--ok-surface-f3f6fb,#f3f6fb) 48%, var(--ok-surface-f8fafc,#f8fafc) 100%); color: var(--ok-ink-172033,#172033); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .portal-auth-shell { width: min(100%, 37rem); display: grid; gap: 1rem; } .portal-auth-brand { display: flex; align-items: center; justify-content: center; gap: .75rem; min-height: 3.25rem; } .portal-auth-brand .portal-brand-mark { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; flex: 0 0 3rem; border-radius: .95rem; background: linear-gradient(135deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); color: var(--ok-ink-ffffff,#fff); font-size: 1.15rem; font-weight: 700; line-height: 1; box-shadow: 0 16px 34px -22px var(--ok-shadow-4f4c8f_a900,rgba(79, 76, 143, .9)); } .portal-auth-brand strong, .portal-auth-brand small { display: block; } .portal-auth-brand strong { color: var(--ok-ink-172033,#172033); font-size: 1.05rem; font-weight: 700; letter-spacing: -.015em; } .portal-auth-brand small { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .85rem; font-weight: 650; } .portal-auth-card { padding: clamp(1.4rem, 4vw, 2.15rem); border: 1px solid var(--ok-line-d1dae6_a960,rgba(209, 218, 230, .96)); border-radius: 1.35rem; background: var(--ok-surface-ffffff_a970,rgba(255, 255, 255, .97)); box-shadow: 0 34px 80px -48px var(--ok-shadow-0f172a_a600,rgba(15, 23, 42, .6)), 0 12px 30px -24px var(--ok-shadow-4f4c8f_a420,rgba(79, 76, 143, .42)); backdrop-filter: blur(18px); } .portal-auth-heading { display: grid; grid-template-columns: 4rem minmax(0, 1fr); align-items: center; gap: 1rem; margin: 0 0 1.35rem; } .portal-auth-heading > .portal-auth-icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 4rem; height: 4rem; flex: 0 0 4rem; margin: 0; padding: 0 !important; border-radius: 1.1rem; background: linear-gradient(145deg, var(--ok-surface-f1effa,#f1effa), var(--ok-surface-f7f7fc,#f7f7fc)); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.8rem; line-height: 1 !important; box-shadow: inset 0 0 0 1px var(--ok-shadow-4f4c8f_a60,rgba(79, 76, 143, .06)); } .portal-auth-eyebrow { display: block; margin-bottom: .2rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .78rem; font-weight: 700; letter-spacing: .075em; text-transform: uppercase; } .portal-auth-heading h1 { margin: 0; color: var(--ok-ink-111827,#111827); font-size: clamp(1.55rem, 4.7vw, 1.9rem); font-weight: 700; line-height: 1.15; letter-spacing: -.035em; } .portal-auth-heading p { max-width: 31rem; margin: .42rem 0 0; color: var(--ok-ink-56657a,#56657a); font-size: 1rem; line-height: 1.58; } .portal-auth-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: 0 0 1.35rem; } .portal-auth-step { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: start; gap: .55rem; min-width: 0; padding: .75rem; border: 1px solid var(--ok-line-e3e8f0,#e3e8f0); border-radius: .85rem; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-auth-step > span { display: flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: .58rem; background: var(--ok-surface-eef1f6,#eef1f6); color: var(--ok-ink-64748b,#64748b); font-size: .78rem; font-weight: 700; line-height: 1; } .portal-auth-step.is-current { border-color: var(--ok-line-d5d2e8,#d5d2e8); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-auth-step.is-current > span { background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .portal-auth-step strong, .portal-auth-step small { display: block; } .portal-auth-step strong { color: var(--ok-ink-263247,#263247); font-size: .78rem; font-weight: 700; line-height: 1.3; } .portal-auth-step small { margin-top: .15rem; color: var(--ok-ink-64748b,#64748b); font-size: .7rem; line-height: 1.4; } .portal-auth-message { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1rem; padding: .85rem .95rem; border: 1px solid var(--ok-line-bfdbfe,#bfdbfe); border-radius: .85rem; background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-1e40af,#1e40af); font-size: .92rem; font-weight: 700; line-height: 1.5; } .portal-auth-message__icon, .portal-auth-control__icon, .portal-auth-error__icon, .portal-auth-submit__icon, .portal-auth-security-note__icon, .portal-auth-secondary__icon, .portal-auth-code-help__icon, .portal-auth-resend__icon, .portal-auth-back__icon, .portal-auth-invalid__icon, .portal-auth-invalid__button-icon, .portal-auth-help__icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto; margin: 0; padding: 0 !important; line-height: 1 !important; } .portal-auth-message__icon { width: 1.35rem; height: 1.35rem; margin-top: .05rem; font-size: 1.2rem; } .portal-auth-form { display: grid; gap: 1.05rem; } .portal-auth-field { display: grid; gap: .48rem; } .portal-auth-field > label { color: var(--ok-ink-263247,#263247); font-size: 1rem; font-weight: 700; line-height: 1.35; } .portal-auth-control { display: grid; grid-template-columns: 3.45rem minmax(0, 1fr); align-items: center; min-height: 3.85rem; overflow: hidden; border: 1.5px solid var(--ok-line-cfd8e5,#cfd8e5); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 1px 2px var(--ok-shadow-0f172a_a30,rgba(15, 23, 42, .03)); transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease; } .portal-auth-control:hover { border-color: var(--ok-line-aebbd0,#aebbd0); } .portal-auth-control:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 .26rem var(--ok-shadow-4f4c8f_a130,rgba(79, 76, 143, .13)); } .portal-auth-control.is-invalid { border-color: var(--ok-line-dc2626,#dc2626); background: var(--ok-surface-fffafa,#fffafa); } .portal-auth-control.is-invalid:focus-within { box-shadow: 0 0 0 .26rem var(--ok-shadow-dc2626_a110,rgba(220, 38, 38, .11)); } .portal-auth-control__icon { width: 3.45rem; height: 100%; border-right: 1px solid var(--ok-line-e8edf3,#e8edf3); background: var(--ok-surface-f7f8fc,#f7f8fc); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.4rem; } .portal-auth-control input { width: 100%; min-width: 0; height: 100%; min-height: 3.7rem; margin: 0; padding: .85rem 1rem; border: 0; outline: 0; background: transparent; color: var(--ok-ink-172033,#172033); font: inherit; font-size: 1.05rem; font-weight: 650; line-height: 1.35; } .portal-auth-control input::placeholder { color: var(--ok-ink-8a98aa,#8a98aa); opacity: 1; } .portal-auth-field-help { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .86rem; line-height: 1.5; } .portal-auth-error { display: flex; align-items: flex-start; gap: .45rem; margin: 0; color: var(--ok-ink-b91c1c,#b91c1c); font-size: .9rem; font-weight: 700; line-height: 1.45; } .portal-auth-error__icon { width: 1.2rem; height: 1.2rem; margin-top: .05rem; font-size: 1.05rem; } .portal-auth-submit { display: flex !important; align-items: center; justify-content: center; gap: .65rem; width: 100%; min-height: 3.7rem; padding: .9rem 1.15rem; border: 0; border-radius: .95rem; background: linear-gradient(135deg, var(--ok-surface-4f4c8f,#4f4c8f) 0%, var(--ok-surface-464795,#464795) 46%, var(--ok-surface-2563eb,#2563eb) 100%); color: var(--ok-ink-ffffff,#fff); font: inherit; font-size: 1rem; font-weight: 700; line-height: 1.25; cursor: pointer; box-shadow: 0 18px 34px -22px var(--ok-shadow-2563eb_a950,rgba(37, 99, 235, .95)); transition: transform .16s ease, filter .16s ease, box-shadow .16s ease; } .portal-auth-submit:hover { filter: brightness(1.045); box-shadow: 0 22px 38px -22px var(--ok-shadow-2563eb_a950,rgba(37, 99, 235, .95)); transform: translateY(-1px); } .portal-auth-submit:active { transform: translateY(0); } .portal-auth-submit:focus-visible, .portal-auth-resend button:focus-visible, .portal-auth-secondary a:focus-visible, .portal-auth-back:focus-visible, .portal-auth-invalid a:focus-visible { outline: 3px solid var(--ok-line-2563eb_a340,rgba(37, 99, 235, .34)); outline-offset: 3px; } .portal-auth-submit__icon { width: 1.35rem; height: 1.35rem; font-size: 1.3rem; } .portal-auth-security-note, .portal-auth-code-help { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); align-items: start; gap: .75rem; margin-top: 1.2rem; padding: .9rem; border: 1px solid var(--ok-line-dfe5ee,#dfe5ee); border-radius: .9rem; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-auth-security-note__icon, .portal-auth-code-help__icon { width: 2.7rem; height: 2.7rem; border-radius: .78rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.35rem; } .portal-auth-security-note p, .portal-auth-code-help p { margin: 0; color: var(--ok-ink-5b687b,#5b687b); font-size: .86rem; line-height: 1.52; } .portal-auth-security-note strong, .portal-auth-code-help strong { display: block; margin-bottom: .12rem; color: var(--ok-ink-263247,#263247); font-size: .9rem; font-weight: 700; } .portal-auth-code-help { margin: 0 0 1.15rem; border-color: var(--ok-line-d7e6fb,#d7e6fb); background: var(--ok-surface-f5f9ff,#f5f9ff); } .portal-auth-code-help__icon { background: var(--ok-surface-eaf2ff,#eaf2ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-auth-secondary { display: grid; justify-items: center; gap: .5rem; margin-top: 1.25rem; padding-top: 1.05rem; border-top: 1px solid var(--ok-line-e9edf3,#e9edf3); text-align: center; } .portal-auth-secondary > span { color: var(--ok-ink-64748b,#64748b); font-size: .82rem; } .portal-auth-secondary a, .portal-auth-back, .portal-auth-invalid a { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 2.75rem; padding: .65rem .85rem; border: 1px solid var(--ok-line-d7d4e9,#d7d4e9); border-radius: .78rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .88rem; font-weight: 700; line-height: 1.3; text-decoration: none; transition: border-color .16s ease, background-color .16s ease; } .portal-auth-secondary a:hover, .portal-auth-back:hover { border-color: var(--ok-line-aaa5cf,#aaa5cf); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-auth-secondary__icon, .portal-auth-back__icon, .portal-auth-invalid__button-icon { width: 1.2rem; height: 1.2rem; font-size: 1.15rem; } .portal-auth-help { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: 0; padding: 0 .75rem; color: var(--ok-ink-64748b,#64748b); font-size: .82rem; line-height: 1.45; text-align: center; } .portal-auth-help__icon { width: 1.15rem; height: 1.15rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.05rem; } .portal-auth-control--otp input, .portal-auth-control .portal-otp-input { min-height: 4.15rem; padding-inline: .7rem; color: var(--ok-ink-111827,#111827); font-size: clamp(1.55rem, 8vw, 2rem) !important; font-weight: 700; letter-spacing: .34em; text-align: center; font-variant-numeric: tabular-nums; } .portal-auth-control--otp input::placeholder, .portal-auth-control .portal-otp-input::placeholder { color: var(--ok-ink-c4ccd7,#c4ccd7); letter-spacing: .34em; } .portal-auth-resend-block { display: flex; align-items: center; justify-content: center; gap: .35rem .55rem; flex-wrap: wrap; margin-top: 1.05rem; color: var(--ok-ink-64748b,#64748b); font-size: .88rem; } .portal-auth-resend-block > p { margin: 0; } .portal-auth-resend { margin: 0; } .portal-auth-resend button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.55rem; padding: .55rem .7rem; border: 0; border-radius: .7rem; background: transparent; color: var(--ok-ink-4f4c8f,#4f4c8f); font: inherit; font-size: .88rem; font-weight: 700; cursor: pointer; } .portal-auth-resend button:hover { background: var(--ok-surface-f4f2fa,#f4f2fa); } .portal-auth-resend__icon { width: 1.15rem; height: 1.15rem; font-size: 1.1rem; } .portal-auth-back { width: fit-content; margin: .65rem auto 0; border-color: transparent; background: transparent; color: var(--ok-ink-5d6a7c,#5d6a7c); } .portal-auth-back:hover { border-color: transparent; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-auth-invalid { display: grid; justify-items: center; gap: .65rem; padding: .45rem 0 .2rem; text-align: center; } .portal-auth-invalid > .portal-auth-invalid__icon { width: 4.5rem; height: 4.5rem; border-radius: 1.2rem; background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-b45309,#b45309); font-size: 2.2rem; } .portal-auth-invalid strong { color: var(--ok-ink-263247,#263247); font-size: 1.2rem; font-weight: 700; line-height: 1.3; } .portal-auth-invalid p { max-width: 28rem; margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .95rem; line-height: 1.55; } .portal-auth-invalid a { min-height: 3rem; margin-top: .25rem; border-color: var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .portal-auth-invalid a:hover { background: var(--ok-surface-403d79,#403d79); } @media (max-width: 700px) { .portal-auth-body { place-items: start center; padding-top: max(.85rem, env(safe-area-inset-top)); padding-right: max(.75rem, env(safe-area-inset-right)); padding-bottom: max(1rem, env(safe-area-inset-bottom)); padding-left: max(.75rem, env(safe-area-inset-left)); } .portal-auth-shell { gap: .75rem; } .portal-auth-card { padding: 1.25rem; border-radius: 1.1rem; } .portal-auth-heading { grid-template-columns: 3.4rem minmax(0, 1fr); gap: .8rem; margin-bottom: 1.1rem; } .portal-auth-heading > .portal-auth-icon { width: 3.4rem; height: 3.4rem; flex-basis: 3.4rem; border-radius: .95rem; font-size: 1.55rem; } .portal-auth-heading p { font-size: .95rem; } .portal-auth-steps { grid-template-columns: 1fr; gap: .45rem; margin-bottom: 1.15rem; } .portal-auth-step { grid-template-columns: 2rem minmax(0, 1fr); align-items: center; padding: .65rem .75rem; } .portal-auth-step small { margin-top: .08rem; } .portal-auth-control { grid-template-columns: 3.25rem minmax(0, 1fr); min-height: 3.75rem; } .portal-auth-control__icon { width: 3.25rem; } .portal-auth-control input { font-size: 1rem; } .portal-auth-security-note, .portal-auth-code-help { grid-template-columns: 2.5rem minmax(0, 1fr); gap: .65rem; padding: .8rem; } .portal-auth-security-note__icon, .portal-auth-code-help__icon { width: 2.5rem; height: 2.5rem; } } @media (max-width: 390px) { .portal-auth-brand { justify-content: flex-start; padding-inline: .25rem; } .portal-auth-card { padding: 1.05rem; } .portal-auth-heading { grid-template-columns: 3.1rem minmax(0, 1fr); gap: .7rem; } .portal-auth-heading > .portal-auth-icon { width: 3.1rem; height: 3.1rem; flex-basis: 3.1rem; } .portal-auth-heading h1 { font-size: 1.45rem; } .portal-auth-eyebrow { font-size: .7rem; } .portal-auth-control--otp input, .portal-auth-control .portal-otp-input { letter-spacing: .25em; } .portal-auth-help { align-items: flex-start; text-align: left; } } @media (prefers-reduced-motion: reduce) { .portal-auth-control, .portal-auth-submit, .portal-auth-secondary a, .portal-auth-back { transition: none; } .portal-auth-submit:hover { transform: none; } } /* Customer Portal · Central de ajuda */ .portal-icon-flex { display: flex !important; align-items: center !important; justify-content: center !important; line-height: 1 !important; } .portal-help-spotlight { display: grid; grid-template-columns:minmax(18rem,.85fr) minmax(20rem,1.15fr); gap:1rem; padding:1.15rem; border:1px solid var(--ok-line-d9d6ea,#d9d6ea); border-radius:1.1rem; background:linear-gradient(135deg,var(--ok-surface-f5f3ff,#f5f3ff) 0%,var(--ok-surface-ffffff,#fff) 52%,var(--ok-surface-eff6ff,#eff6ff) 100%); box-shadow:0 18px 45px -36px var(--ok-shadow-4f4c8f_a750,rgba(79,76,143,.75)); } .portal-help-spotlight__intro { display:grid; grid-template-columns:3.25rem minmax(0,1fr); align-items:center; gap:.85rem; } .portal-help-spotlight__intro>.material-symbols-rounded { width:3.25rem; height:3.25rem; border-radius:.9rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:1.6rem; } .portal-help-spotlight__intro small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; } .portal-help-spotlight__intro h2 { margin:.18rem 0 0; color:var(--ok-ink-1e293b,#1e293b); font-size:1.12rem; font-weight:700; line-height:1.3; } .portal-help-spotlight__intro p { margin:.32rem 0 0; color:var(--ok-ink-64748b,#64748b); font-size:.84rem; line-height:1.55; } .portal-help-spotlight__search { align-self:center; } .portal-help-spotlight__search>label { display:block; margin-bottom:.38rem; color:var(--ok-ink-334155,#334155); font-size:.8rem; font-weight:700; } .portal-help-spotlight__search>div { display:grid; grid-template-columns:2.8rem minmax(0,1fr) auto; align-items:center; min-height:3.35rem; overflow:hidden; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 10px 28px -24px var(--ok-shadow-334155,#334155); } .portal-help-spotlight__search .material-symbols-rounded { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.25rem; } .portal-help-spotlight__search input { min-width:0; min-height:3.25rem; padding:.75rem .2rem; outline:0; color:var(--ok-ink-172033,#172033); font-size:.94rem; } .portal-help-spotlight__search input::placeholder { color:var(--ok-ink-8491a3,#8491a3); } .portal-help-spotlight__search button { min-height:2.65rem; margin-right:.32rem; padding:.62rem .95rem; border:0; border-radius:.68rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:.82rem; font-weight:700; cursor:pointer; } .portal-help-spotlight__search>div:focus-within { border-color:var(--ok-line-4f4c8f,#4f4c8f); box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a140,rgba(79,76,143,.14)); } .portal-help-spotlight__articles { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; padding-top:.9rem; border-top:1px solid var(--ok-line-4f4c8f_a140,rgba(79,76,143,.14)); } .portal-help-spotlight__articles>a { display:grid; grid-template-columns:2.35rem minmax(0,1fr) 1.5rem; align-items:center; gap:.55rem; min-width:0; padding:.72rem; border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.78rem; background:var(--ok-surface-ffffff_a840,rgba(255,255,255,.84)); color:inherit; text-decoration:none; } .portal-help-spotlight__articles>a:hover { border-color:var(--ok-line-b8b3d9,#b8b3d9); background:var(--ok-surface-ffffff,#fff); } .portal-help-spotlight__articles>a>.material-symbols-rounded:first-child { width:2.35rem; height:2.35rem; border-radius:.65rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-help-spotlight__articles strong,.portal-help-spotlight__articles small { display:block; } .portal-help-spotlight__articles strong { overflow:hidden; color:var(--ok-ink-263247,#263247); font-size:.83rem; font-weight:700; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; } .portal-help-spotlight__articles small { margin-top:.12rem; color:var(--ok-ink-64748b,#64748b); font-size:.7rem; } .portal-help-spotlight__articles>a>.material-symbols-rounded:last-child { color:var(--ok-ink-64748b,#64748b); } .portal-help-spotlight__browse { align-self:center; color:var(--ok-ink-4f4c8f,#4f4c8f); font-weight:700; } .portal-kb { gap:1rem; } .portal-kb-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(22rem,.9fr); align-items:center; gap:1.25rem; padding:1.35rem; border:1px solid var(--ok-line-d9d6ea,#d9d6ea); border-radius:1.15rem; background:linear-gradient(135deg,var(--ok-surface-f4f2fb,#f4f2fb),var(--ok-surface-ffffff,#fff) 55%,var(--ok-surface-eef6ff,#eef6ff)); } .portal-kb-hero__copy { display:grid; grid-template-columns:3.6rem minmax(0,1fr); align-items:center; gap:.9rem; } .portal-kb-hero__copy>.material-symbols-rounded { width:3.6rem; height:3.6rem; border-radius:1rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-size:1.8rem; } .portal-kb-hero small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.74rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; } .portal-kb-hero h1 { margin:.16rem 0 0; color:var(--ok-ink-172033,#172033); font-size:clamp(1.35rem,2vw,1.8rem); font-weight:700; line-height:1.2; } .portal-kb-hero p { margin:.35rem 0 0; color:var(--ok-ink-5d6a7c,#5d6a7c); font-size:.92rem; line-height:1.6; } .portal-kb-search { display:grid; grid-template-columns:3rem minmax(0,1fr) auto; align-items:center; min-height:3.65rem; overflow:hidden; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.95rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 16px 34px -28px var(--ok-shadow-334155,#334155); } .portal-kb-search:focus-within { border-color:var(--ok-line-4f4c8f,#4f4c8f); box-shadow:0 0 0 4px var(--ok-shadow-4f4c8f_a130,rgba(79,76,143,.13)); } .portal-kb-search>.material-symbols-rounded { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.35rem; } .portal-kb-search input { min-width:0; min-height:3.55rem; padding:.8rem .25rem; outline:0; color:var(--ok-ink-172033,#172033); font-size:.96rem; } .portal-kb-search input::placeholder { color:var(--ok-ink-8491a3,#8491a3); } .portal-kb-search button { display:flex; align-items:center; justify-content:center; width:2.65rem; height:2.65rem; margin-right:.35rem; border:0; border-radius:.7rem; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-475569,#475569); cursor:pointer; } .portal-kb-categories { display:flex; gap:.48rem; padding:.15rem 0 .25rem; overflow-x:auto; scrollbar-width:thin; } .portal-kb-categories button { display:inline-flex; align-items:center; gap:.42rem; flex:0 0 auto; min-height:2.75rem; padding:.58rem .8rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.75rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-475569,#475569); font-size:.8rem; font-weight:700; cursor:pointer; } .portal-kb-categories button span { display:grid; min-width:1.35rem; height:1.35rem; place-items:center; border-radius:999px; background:var(--ok-surface-f1f5f9,#f1f5f9); font-size:.67rem; } .portal-kb-categories button.is-active { border-color:var(--ok-line-4f4c8f,#4f4c8f); background:var(--ok-surface-f2f0fa,#f2f0fa); color:var(--ok-ink-403d75,#403d75); } .portal-kb-results-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; } .portal-kb-results-head strong { color:var(--ok-ink-263247,#263247); font-size:.92rem; font-weight:700; } .portal-kb-results-head span { margin-left:.25rem; color:var(--ok-ink-64748b,#64748b); font-size:.82rem; } .portal-kb-results-head button { display:inline-flex; align-items:center; gap:.35rem; min-height:2.65rem; padding:.55rem .75rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.72rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.78rem; font-weight:700; cursor:pointer; } .portal-kb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.75rem; } .portal-kb-grid.is-loading { opacity:.65; } .portal-kb-card { display:flex; flex-direction:column; min-height:15rem; padding:1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); color:inherit; text-decoration:none; box-shadow:0 18px 38px -34px var(--ok-shadow-334155,#334155); transition:border-color .15s ease,transform .15s ease,box-shadow .15s ease; } .portal-kb-card:hover { transform:translateY(-2px); border-color:var(--ok-line-b8b3d9,#b8b3d9); box-shadow:0 22px 44px -32px var(--ok-shadow-4f4c8f_a650,rgba(79,76,143,.65)); } .portal-kb-card__icon { width:2.8rem; height:2.8rem; border-radius:.78rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1.35rem; } .portal-kb-card__body { flex:1; padding-top:.85rem; } .portal-kb-card__body small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.69rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; } .portal-kb-card h2 { margin:.28rem 0 0; color:var(--ok-ink-202b3d,#202b3d); font-size:1rem; font-weight:700; line-height:1.38; } .portal-kb-card p { margin:.48rem 0 0; color:var(--ok-ink-64748b,#64748b); font-size:.82rem; line-height:1.58; } .portal-kb-card__action { display:flex; align-items:center; justify-content:space-between; gap:.5rem; margin-top:.85rem; padding-top:.72rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.79rem; font-weight:700; } .portal-kb-card__action .material-symbols-rounded { font-size:1.05rem; } .portal-kb-empty { grid-column:1/-1; display:grid; justify-items:center; gap:.45rem; padding:3rem 1.2rem; border:1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); text-align:center; } .portal-kb-empty>.material-symbols-rounded { width:3.7rem; height:3.7rem; border-radius:1rem; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-64748b,#64748b); font-size:1.8rem; } .portal-kb-empty h2 { margin:.35rem 0 0; color:var(--ok-ink-263247,#263247); font-size:1.12rem; font-weight:700; } .portal-kb-empty p { margin:0; color:var(--ok-ink-64748b,#64748b); font-size:.88rem; } .portal-kb-empty button { min-height:2.85rem; margin-top:.55rem; padding:.65rem 1rem; border:0; border-radius:.75rem; background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); font-weight:700; cursor:pointer; } .portal-kb-pagination { padding-top:.25rem; } .portal-kb-breadcrumb { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; color:var(--ok-ink-64748b,#64748b); font-size:.82rem; } .portal-kb-breadcrumb a { display:inline-flex; align-items:center; gap:.35rem; min-height:2.55rem; color:var(--ok-ink-4f4c8f,#4f4c8f); font-weight:700; text-decoration:none; } .portal-kb-breadcrumb .material-symbols-rounded { font-size:1.05rem; } .portal-kb-article-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(16rem,21rem); gap:1rem; align-items:start; } .portal-kb-article { overflow:hidden; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1.05rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 18px 42px -36px var(--ok-shadow-334155,#334155); } .portal-kb-article>header { padding:clamp(1.2rem,3vw,2rem); border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); background:linear-gradient(135deg,var(--ok-surface-faf9fe,#faf9fe),var(--ok-surface-ffffff,#fff)); } .portal-kb-article__category { display:inline-flex; padding:.35rem .58rem; border-radius:999px; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.7rem; font-weight:700; text-transform:uppercase; } .portal-kb-article h1 { max-width:25ch; margin:.65rem 0 0; color:var(--ok-ink-172033,#172033); font-size:clamp(1.55rem,3vw,2.25rem); font-weight:700; line-height:1.18; letter-spacing:-.025em; } .portal-kb-article>header>p { max-width:65ch; margin:.65rem 0 0; color:var(--ok-ink-5d6a7c,#5d6a7c); font-size:1rem; line-height:1.65; } .portal-kb-article__meta { display:flex; align-items:center; gap:.4rem; margin-top:.85rem; color:var(--ok-ink-718096,#718096); font-size:.78rem; } .portal-kb-article__meta .material-symbols-rounded { font-size:1.05rem; } .portal-kb-content { max-width:78ch; padding:clamp(1.2rem,3vw,2rem); color:var(--ok-ink-2f3b4e,#2f3b4e); font-size:1rem; line-height:1.78; } .portal-kb-content h2,.portal-kb-content h3,.portal-kb-content h4 { color:var(--ok-ink-172033,#172033); font-weight:700; line-height:1.3; } .portal-kb-content h2 { margin:1.8rem 0 .7rem; font-size:1.4rem; } .portal-kb-content h3 { margin:1.5rem 0 .6rem; font-size:1.16rem; } .portal-kb-content p { margin:.8rem 0; } .portal-kb-content ul,.portal-kb-content ol { margin:.8rem 0; padding-left:1.4rem; } .portal-kb-content ul { list-style:disc; }.portal-kb-content ol { list-style:decimal; } .portal-kb-content li { margin:.38rem 0; padding-left:.18rem; } .portal-kb-content a { color:var(--ok-ink-2563eb,#2563eb); font-weight:700; text-decoration:underline; text-underline-offset:2px; } .portal-kb-content blockquote { margin:1rem 0; padding:.85rem 1rem; border-left:4px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius:0 .65rem .65rem 0; background:var(--ok-surface-f7f6fc,#f7f6fc); color:var(--ok-ink-475569,#475569); } .portal-kb-content code { padding:.14rem .3rem; border-radius:.35rem; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-334155,#334155); font-size:.9em; } .portal-kb-content pre { max-width:100%; margin:1rem 0; overflow:auto; padding:1rem; border-radius:.75rem; background:var(--ok-surface-172033,#172033); color:var(--ok-ink-e2e8f0,#e2e8f0); } .portal-kb-content pre code { padding:0; background:transparent; color:inherit; } .portal-kb-content img { max-width:100%; height:auto; margin:1rem auto; border-radius:.75rem; } .portal-kb-feedback { margin:0 clamp(1.2rem,3vw,2rem) clamp(1.2rem,3vw,2rem); padding:1rem; border:1px solid var(--ok-line-d9d6ea,#d9d6ea); border-radius:.9rem; background:var(--ok-surface-faf9fe,#faf9fe); } .portal-kb-feedback>div:first-child { display:grid; grid-template-columns:2.7rem minmax(0,1fr); align-items:center; gap:.7rem; } .portal-kb-feedback>div:first-child>.material-symbols-rounded { width:2.7rem; height:2.7rem; border-radius:.72rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-kb-feedback h2 { margin:0; color:var(--ok-ink-263247,#263247); font-size:1rem; font-weight:700; } .portal-kb-feedback p { margin:.15rem 0 0; color:var(--ok-ink-64748b,#64748b); font-size:.8rem; } .portal-kb-feedback__actions { display:flex; gap:.55rem; flex-wrap:wrap; margin-top:.85rem; } .portal-kb-feedback__actions button { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:3rem; padding:.65rem .9rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.75rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-475569,#475569); font-size:.82rem; font-weight:700; cursor:pointer; } .portal-kb-feedback__actions button:hover { border-color:var(--ok-line-4f4c8f,#4f4c8f); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-kb-feedback__actions button.is-selected { border-color:var(--ok-line-15803d,#15803d); background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-166534,#166534); box-shadow:0 0 0 2px var(--ok-shadow-15803d_a100,rgba(21,128,61,.1)); } .portal-kb-feedback__actions button.is-selected.is-negative { border-color:var(--ok-line-b45309,#b45309); background:var(--ok-surface-fffbeb,#fffbeb); color:var(--ok-ink-92400e,#92400e); box-shadow:0 0 0 2px var(--ok-shadow-b45309_a100,rgba(180,83,9,.1)); } .portal-kb-feedback__actions .material-symbols-rounded { font-size:1.1rem; } .portal-kb-feedback__message { margin-top:.7rem !important; color:var(--ok-ink-166534,#166534) !important; font-weight:700; } .portal-kb-feedback__message.is-error { color:var(--ok-ink-b91c1c,#b91c1c) !important; } .portal-kb-related { overflow:hidden; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); } .portal-kb-related__head { display:grid; grid-template-columns:2.5rem minmax(0,1fr); align-items:center; gap:.6rem; padding:.85rem; border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); background:var(--ok-surface-faf9fe,#faf9fe); } .portal-kb-related__head>.material-symbols-rounded { width:2.5rem; height:2.5rem; border-radius:.68rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-kb-related__head strong,.portal-kb-related__head small { display:block; } .portal-kb-related__head strong { color:var(--ok-ink-263247,#263247); font-size:.88rem; font-weight:700; } .portal-kb-related__head small { margin-top:.1rem; color:var(--ok-ink-64748b,#64748b); font-size:.72rem; } .portal-kb-related>a { display:grid; grid-template-columns:1.9rem minmax(0,1fr) 1.2rem; align-items:center; gap:.45rem; padding:.82rem; border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); color:var(--ok-ink-334155,#334155); font-size:.8rem; font-weight:700; line-height:1.4; text-decoration:none; } .portal-kb-related>a:hover { background:var(--ok-surface-faf9fe,#faf9fe); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-kb-related>a>.material-symbols-rounded:first-child { width:1.9rem; height:1.9rem; border-radius:.5rem; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1rem; } .portal-kb-related>a>.material-symbols-rounded:last-child { color:var(--ok-ink-94a3b8,#94a3b8); font-size:1rem; } .portal-kb-related>p { margin:0; padding:1rem; color:var(--ok-ink-64748b,#64748b); font-size:.8rem; line-height:1.55; } @media(max-width:1050px){.portal-kb-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.portal-kb-article-layout{grid-template-columns:minmax(0,1fr) 17rem}.portal-help-spotlight__articles{grid-template-columns:1fr 1fr}.portal-help-spotlight__articles>a:last-child{display:none}} @media(max-width:760px){.portal-help-spotlight,.portal-kb-hero,.portal-kb-article-layout{grid-template-columns:1fr}.portal-help-spotlight__articles{grid-template-columns:1fr}.portal-help-spotlight__articles>a:last-child{display:grid}.portal-kb-grid{grid-template-columns:1fr 1fr}.portal-kb-related{order:2}.portal-kb-article h1{max-width:none}} @media(max-width:540px){.portal-help-spotlight{padding:1rem}.portal-help-spotlight__intro{grid-template-columns:2.8rem minmax(0,1fr)}.portal-help-spotlight__intro>.material-symbols-rounded{width:2.8rem;height:2.8rem}.portal-help-spotlight__search>div{grid-template-columns:2.7rem minmax(0,1fr)}.portal-help-spotlight__search button{grid-column:1/-1;width:calc(100% - .65rem);margin:0 .32rem .32rem;min-height:2.8rem}.portal-kb-hero{padding:1rem}.portal-kb-hero__copy{grid-template-columns:3rem minmax(0,1fr)}.portal-kb-hero__copy>.material-symbols-rounded{width:3rem;height:3rem}.portal-kb-grid{grid-template-columns:1fr}.portal-kb-card{min-height:auto}.portal-kb-results-head{align-items:flex-start}.portal-kb-results-head button{flex:0 0 auto}.portal-kb-feedback__actions{display:grid}.portal-kb-feedback__actions button{width:100%}.portal-kb-content{font-size:.96rem;line-height:1.72}} @media(prefers-reduced-motion:reduce){.portal-kb-card{transition:none}.portal-kb-card:hover{transform:none}} .portal-kb-feedback__message.is-pending { color:var(--ok-ink-92400e,#92400e) !important; } .portal-kb-feedback__actions button:disabled { opacity:.65; cursor:wait; } /* AppShell — hierarchical sidebar navigation */ .app-nav-group { min-width: 0; } .app-nav-group__primary { min-width: 0; } .app-nav-group__primary--expandable { display: grid; grid-template-columns: minmax(0, 1fr) 2.25rem; align-items: center; gap: .18rem; } .app-nav-group__primary--expandable .app-nav-item { width: 100%; } .app-nav-group__toggle { display: flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .72rem; background: transparent; color: var(--ok-ink-94a3b8,#94a3b8); cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; } .app-nav-group__toggle:hover { border-color: var(--ok-line-e8e6f6,#e8e6f6); background: var(--ok-surface-f7f6fc,#f7f6fc); color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-nav-group__toggle:focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgb(37 99 235 / .22)); outline-offset: 1px; } .app-nav-group__toggle .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: 1.15rem; transition: rotate .18s ease; } .app-nav-group__toggle[aria-expanded="true"] .material-symbols-rounded { rotate: 180deg; } .app-nav-submenu { position: relative; display: grid; gap: .12rem; margin: .18rem 0 .42rem 1.05rem; padding: .12rem 0 .12rem 1.12rem; } .app-nav-submenu[hidden] { display: none; } .app-nav-submenu::before { position: absolute; top: .28rem; bottom: .28rem; left: .18rem; width: 1px; border-radius: 999px; background: var(--ok-surface-e2e8f0,#e2e8f0); content: ""; } .app-nav-subitem { position: relative; display: flex; min-width: 0; min-height: 2.45rem; align-items: center; gap: .52rem; border: 1px solid transparent; border-radius: .72rem; padding: .46rem .55rem; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; font-weight: 760; line-height: 1.25; text-decoration: none; transition: border-color .15s ease, background .15s ease, color .15s ease; } .app-nav-subitem::before { position: absolute; top: 50%; left: -1rem; width: .78rem; height: 1px; background: var(--ok-surface-e2e8f0,#e2e8f0); content: ""; } .app-nav-subitem:hover { border-color: var(--ok-line-ebe9f7,#ebe9f7); background: var(--ok-surface-faf9fe,#faf9fe); color: var(--ok-ink-403d75,#403d75); } .app-nav-subitem--active { border-color: var(--ok-line-dfdcf1,#dfdcf1); background: linear-gradient(135deg, var(--ok-surface-f5f4fb,#f5f4fb), var(--ok-surface-f0f6ff,#f0f6ff)); color: var(--ok-ink-403d75,#403d75); font-weight: 850; } .app-nav-subitem--active::after { position: absolute; top: .56rem; bottom: .56rem; right: -.76rem; width: .18rem; border-radius: 999px; background: var(--ok-surface-4f4c8f,#4f4c8f); content: ""; } .app-nav-subitem__icon { display: flex; width: 1.35rem; height: 1.35rem; flex: 0 0 1.35rem; align-items: center; justify-content: center; color: currentColor; font-size: 1rem; } .app-nav-subitem > span:nth-child(2) { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav-subitem > small { flex: 0 0 auto; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); padding: .15rem .32rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; } .app-shell--compact .app-nav-group__primary--expandable { display: block; } .app-shell--compact .app-nav-group__toggle, .app-shell--compact .app-nav-submenu { display: none; } @media (max-width: 1023px) { .app-shell--compact .app-nav-group__primary--expandable { display: grid; } .app-shell--compact .app-nav-group__toggle { display: flex; } .app-shell--compact .app-nav-submenu:not([hidden]) { display: grid; } } @media (max-width: 420px) { .app-nav-submenu { margin-left: .85rem; padding-left: 1rem; } .app-nav-subitem { min-height: 2.65rem; font-size: .75rem; } } @media (prefers-reduced-motion: reduce) { .app-nav-group__toggle .material-symbols-rounded { transition: none; } } /* AppShell navigation context: breadcrumbs, favorites and recent pages. */ .app-navigation__personal { display: grid; gap: .78rem; margin: 0 0 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--ok-line-eef2f7,#eef2f7); } .app-personal-section { min-width: 0; } .app-personal-section__header { display: flex; min-height: 1.75rem; align-items: center; justify-content: space-between; gap: .5rem; padding: 0 .55rem .28rem; } .app-personal-section__header h2 { display: flex; min-width: 0; margin: 0; align-items: center; gap: .38rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; } .app-personal-section__header h2 .material-symbols-rounded { display: flex; width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .app-personal-section__count { display: flex; min-width: 1.35rem; height: 1.35rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; } .app-personal-section__header button { border: 0; background: transparent; padding: .2rem .25rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 800; cursor: pointer; } .app-personal-section__header button:hover, .app-personal-section__header button:focus-visible { color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-personal-section__items { display: grid; gap: .18rem; } .app-personal-page { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) 2rem; align-items: center; border: 1px solid transparent; border-radius: .78rem; transition: border-color .16s ease, background .16s ease; } .app-personal-page:hover, .app-personal-page:focus-within { border-color: var(--ok-line-e8e6f6,#e8e6f6); background: var(--ok-surface-faf9fe,#faf9fe); } .app-personal-page > a { display: flex; min-width: 0; min-height: 2.65rem; align-items: center; gap: .58rem; padding: .48rem .18rem .48rem .58rem; color: var(--ok-ink-64748b,#64748b); text-decoration: none; } .app-personal-page > a:hover { color: var(--ok-ink-403d75,#403d75); } .app-personal-page__icon { display: flex; width: 1.55rem; height: 1.55rem; flex: 0 0 1.55rem; align-items: center; justify-content: center; border-radius: .5rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .app-personal-page__copy { min-width: 0; flex: 1; } .app-personal-page__copy strong, .app-personal-page__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-personal-page__copy strong { color: var(--ok-ink-475569,#475569); font-size: .72rem; font-weight: 800; } .app-personal-page__copy small { margin-top: .06rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; line-height: 1.2; } .app-personal-page__action { display: flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border: 0; border-radius: .55rem; background: transparent; color: var(--ok-ink-a8a5ca,#a8a5ca); cursor: pointer; } .app-personal-page__action:hover, .app-personal-page__action:focus-visible { background: var(--ok-surface-efedf9,#efedf9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-personal-page__action .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; } .app-personal-empty { display: flex; min-height: 2.8rem; align-items: center; gap: .55rem; border: 1px dashed var(--ok-line-e2e8f0,#e2e8f0); border-radius: .78rem; padding: .55rem .65rem; color: var(--ok-ink-94a3b8,#94a3b8); } .app-personal-empty[hidden] { display: none; } .app-personal-empty > .material-symbols-rounded { display: flex; width: 1.45rem; height: 1.45rem; flex: 0 0 1.45rem; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } .app-personal-empty strong, .app-personal-empty small { display: block; } .app-personal-empty strong { color: var(--ok-ink-64748b,#64748b); font-size: .67rem; font-weight: 800; } .app-personal-empty small { margin-top: .04rem; font-size: .65rem; line-height: 1.25; } .app-breadcrumbs { min-width: 0; margin-bottom: .12rem; } .app-breadcrumbs ol { display: flex; min-width: 0; margin: 0; padding: 0; align-items: center; gap: .18rem; list-style: none; } .app-breadcrumbs li { display: flex; min-width: 0; align-items: center; gap: .18rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 760; line-height: 1.2; } .app-breadcrumbs a, .app-breadcrumbs li > span:not(.app-breadcrumbs__separator) { display: flex; min-width: 0; align-items: center; gap: .22rem; overflow: hidden; color: inherit; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .app-breadcrumbs a:hover, .app-breadcrumbs a:focus-visible { color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-breadcrumbs a .material-symbols-rounded { display: flex; width: .95rem; height: .95rem; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; } .app-breadcrumbs li:last-child > span { color: var(--ok-ink-64748b,#64748b); font-weight: 820; } .app-breadcrumbs__separator { display: flex; width: .85rem; height: .85rem; flex: 0 0 .85rem; align-items: center; justify-content: center; color: var(--ok-ink-cbd5e1,#cbd5e1); font-size: .82rem; line-height: 1; } .app-topbar__title-row { display: flex; min-width: 0; align-items: center; gap: .45rem; } .app-topbar__title-row > strong { min-width: 0; } .app-favorite-toggle { display: flex; min-height: 1.85rem; flex: 0 0 auto; align-items: center; gap: .28rem; border: 1px solid transparent; border-radius: .6rem; background: transparent; padding: .22rem .42rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 800; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease; } .app-favorite-toggle:hover, .app-favorite-toggle:focus-visible, .app-favorite-toggle--active { border-color: var(--ok-line-e0ddf2,#e0ddf2); background: var(--ok-surface-f5f4fb,#f5f4fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-favorite-toggle:disabled { cursor: wait; opacity: .65; } .app-favorite-toggle .material-symbols-rounded { display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } .app-shell--compact .app-navigation__personal { display: none; } @media (max-width: 1023px) { .app-shell--compact .app-navigation__personal { display: grid; } } @media (max-width: 767px) { :root { --app-topbar-height: 4.65rem; } .app-topbar__heading { flex: 1; } .app-breadcrumbs { max-width: min(48vw, 18rem); } .app-breadcrumbs li:not(:first-child):not(:nth-last-child(-n + 2)) { display: none; } .app-breadcrumbs li:first-child > a > span:last-child { display: none; } .app-favorite-toggle { width: 1.95rem; height: 1.95rem; min-height: 1.95rem; padding: 0; justify-content: center; } .app-favorite-toggle > span:last-child { display: none; } } @media (max-width: 420px) { .app-breadcrumbs { max-width: 42vw; } .app-personal-page > a { min-height: 2.85rem; } .app-personal-page__copy strong { font-size: .75rem; } } @media (prefers-reduced-motion: reduce) { .app-personal-page, .app-favorite-toggle { transition: none; } } .app-personal-page--recent { grid-template-columns: minmax(0, 1fr); } /* AppShell UX 0.3.8: persistent filters, safe forms and entity-oriented search. */ .app-unsaved-indicator { display: inline-flex; min-height: 2.65rem; align-items: center; gap: .4rem; border: 1px solid var(--ok-line-fed7aa,#fed7aa); border-radius: .85rem; background: var(--ok-surface-fff7ed,#fff7ed); padding: 0 .72rem; color: var(--ok-ink-9a3412,#9a3412); font-size: .65rem; font-weight: 850; cursor: pointer; } .app-unsaved-indicator[hidden] { display: none; } .app-unsaved-indicator:hover, .app-unsaved-indicator:focus-visible { border-color: var(--ok-line-fdba74,#fdba74); background: var(--ok-surface-ffedd5,#ffedd5); } .app-unsaved-indicator .material-symbols-rounded { display: flex; width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; font-size: 1.05rem; line-height: 1; } .app-command { width: min(54rem, calc(100% - 1.5rem)); } .app-command__body { display: grid; gap: 1rem; } .app-command__section { display: grid; gap: .5rem; } .app-command__section[hidden], .app-command__loading[hidden], .app-command__hint[hidden] { display: none; } .app-command__section-header { display: flex; min-height: 1.65rem; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .2rem; } .app-command__section-header > span, .app-command__entity-group > header > span { display: inline-flex; min-width: 0; align-items: center; gap: .38rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 880; letter-spacing: .055em; text-transform: uppercase; } .app-command__section-header .material-symbols-rounded, .app-command__entity-group > header .material-symbols-rounded { display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .app-command__section-header > small, .app-command__entity-group > header > small { display: flex; min-width: 1.4rem; height: 1.4rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; } .app-command__results--actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } .app-command__results a { grid-template-columns: 2.4rem minmax(0, 1fr) auto; } .app-command__kind { display: inline-flex; min-height: 1.45rem; align-items: center; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); padding: 0 .45rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; white-space: nowrap; } .app-command__results--actions a { min-height: 4.2rem; border-color: var(--ok-line-eef2f7,#eef2f7); background: var(--ok-surface-ffffff,#fff); } .app-command__results--actions a:hover, .app-command__results--actions a.is-selected { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-f8f7fd,#f8f7fd); box-shadow: 0 12px 28px -24px var(--ok-shadow-4f4c8f_a650,rgba(79, 76, 143, .65)); } .app-command__section--entities { border-top: 1px solid var(--ok-line-eef2f7,#eef2f7); padding-top: .9rem; } .app-command__entity-group { display: grid; gap: .35rem; } .app-command__entity-group + .app-command__entity-group { margin-top: .85rem; } .app-command__entity-group > header { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 0 .2rem; } .app-command__results--entities a { min-height: 4rem; } .app-command__entity-meta { max-width: 13rem; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 760; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .app-command__loading, .app-command__hint { display: flex; min-height: 3.4rem; align-items: center; gap: .7rem; border: 1px solid var(--ok-line-e8e6f6,#e8e6f6); border-radius: .9rem; background: var(--ok-surface-faf9fe,#faf9fe); padding: .75rem .85rem; color: var(--ok-ink-64748b,#64748b); font-size: .66rem; } .app-command__loading { justify-content: center; } .app-command__hint > .material-symbols-rounded { display: flex; width: 2rem; height: 2rem; flex: 0 0 2rem; align-items: center; justify-content: center; border-radius: .65rem; background: var(--ok-surface-eeeefa,#eeeefa); color: var(--ok-ink-4f4c8f,#4f4c8f); line-height: 1; } .app-command__hint strong, .app-command__hint small { display: block; } .app-command__hint strong { color: var(--ok-ink-475569,#475569); font-size: .7rem; font-weight: 850; } .app-command__hint small { margin-top: .1rem; line-height: 1.45; } .app-command__spinner { width: 1rem; height: 1rem; border: 2px solid var(--ok-line-d3d0ed,#d3d0ed); border-top-color: var(--ok-line-4f4c8f,#4f4c8f); border-radius: 999px; animation: app-command-spin .7s linear infinite; } @keyframes app-command-spin { to { transform: rotate(360deg); } } .app-command__footer { justify-content: flex-end; } .app-command__footer span { display: inline-flex; align-items: center; gap: .25rem; } .app-command__footer kbd { display: inline-flex; min-width: 1.2rem; height: 1.2rem; align-items: center; justify-content: center; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .35rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-64748b,#64748b); font-family: inherit; font-size: .65rem; font-weight: 850; } .app-filter-memory { display: inline-flex; align-items: center; gap: .35rem; } .app-filter-memory__status, .app-filter-memory__clear { display: inline-flex; min-height: 2rem; align-items: center; gap: .32rem; border-radius: .62rem; font-size: .65rem; font-weight: 820; } .app-filter-memory__status { border: 1px solid var(--ok-line-e0ddf2,#e0ddf2); background: var(--ok-surface-f8f7fd,#f8f7fd); padding: 0 .55rem; color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-filter-memory__status .material-symbols-rounded, .app-filter-memory__clear .material-symbols-rounded { display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } .app-filter-memory__status small { display: flex; min-width: 1.1rem; height: 1.1rem; align-items: center; justify-content: center; border-radius: 999px; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .65rem; } .app-filter-memory__clear { border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); background: var(--ok-surface-ffffff,#fff); padding: 0 .52rem; color: var(--ok-ink-64748b,#64748b); cursor: pointer; } .app-filter-memory__clear:hover, .app-filter-memory__clear:focus-visible { border-color: var(--ok-line-d3d0ed,#d3d0ed); background: var(--ok-surface-faf9fe,#faf9fe); color: var(--ok-ink-403d75,#403d75); } .app-unsaved-dialog { width: min(30rem, calc(100% - 1.5rem)); border: 1px solid var(--ok-line-fed7aa,#fed7aa); border-radius: 1.2rem; background: var(--ok-surface-ffffff,#fff); padding: 1.15rem; color: var(--ok-ink-0f172a,#0f172a); box-shadow: 0 35px 100px -32px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .app-unsaved-dialog::backdrop { background: var(--ok-surface-0f172a_a520,rgba(15, 23, 42, .52)); backdrop-filter: blur(5px); } .app-unsaved-dialog__icon { display: flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; border-radius: .95rem; background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .app-unsaved-dialog__icon .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: 1.65rem; line-height: 1; } .app-unsaved-dialog__copy { margin-top: .9rem; } .app-unsaved-dialog__copy small { color: var(--ok-ink-c2410c,#c2410c); font-size: .65rem; font-weight: 880; letter-spacing: .07em; text-transform: uppercase; } .app-unsaved-dialog__copy h2 { margin: .22rem 0 0; font-size: 1.15rem; font-weight: 900; } .app-unsaved-dialog__copy p { margin: .55rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .76rem; line-height: 1.65; } .app-unsaved-dialog__actions { display: flex; margin-top: 1rem; justify-content: flex-end; gap: .55rem; } .app-unsaved-dialog__actions button { min-height: 2.75rem; border-radius: .75rem; padding: 0 .9rem; font-size: .72rem; font-weight: 850; cursor: pointer; } .app-unsaved-dialog__stay { border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-475569,#475569); } .app-unsaved-dialog__leave { border: 1px solid var(--ok-line-c2410c,#c2410c); background: var(--ok-surface-c2410c,#c2410c); color: var(--ok-ink-ffffff,#fff); } @media (max-width: 900px) { .app-command__results--actions { grid-template-columns: minmax(0, 1fr); } .app-unsaved-indicator > span:last-child { display: none; } .app-unsaved-indicator { width: 2.65rem; justify-content: center; padding: 0; } } @media (max-width: 640px) { .app-command { width: calc(100% - .75rem); max-height: calc(100dvh - .75rem); border-radius: 1rem; } .app-command__body { max-height: calc(100dvh - 8.5rem); padding: .75rem; } .app-command__search { min-height: 3.8rem; padding: .5rem .7rem; } .app-command__search input { font-size: .82rem; } .app-command__results a, .app-command__results--entities a { grid-template-columns: 2.25rem minmax(0, 1fr); min-height: 4.25rem; } .app-command__kind, .app-command__entity-meta { grid-column: 2; max-width: 100%; justify-self: start; text-align: left; } .app-command__footer { justify-content: center; } .app-command__footer span:first-child { display: none; } .app-filter-memory__status > span:nth-child(2) { display: none; } .app-filter-memory__clear { min-width: 2rem; justify-content: center; padding: 0 .4rem; font-size: 0; } .app-filter-memory__clear .material-symbols-rounded { font-size: 1rem; } .app-unsaved-dialog__actions { display: grid; grid-template-columns: 1fr; } .app-unsaved-dialog__actions button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .app-command__spinner { animation: none; } } /* AppShell UX 0.3.9 — viewport-centered dialogs and alerts. Tailwind Preflight resets dialog margins, so modal centering must be explicit. */ :is( dialog.app-command, dialog.app-unsaved-dialog, dialog.app-modal, dialog.ds-modal, dialog[data-app-modal] )[open] { position: fixed !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 50% !important; margin: 0 !important; transform: translate(-50%, -50%) !important; overscroll-behavior: contain; } .app-command[open] { max-height: min(43rem, calc(100dvh - 2rem)); } .app-unsaved-dialog[open] { max-height: calc(100dvh - 2rem); overflow-y: auto; } @media (max-width: 640px) { :is( dialog.app-command, dialog.app-unsaved-dialog, dialog.app-modal, dialog.ds-modal, dialog[data-app-modal] )[open] { max-width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); } .app-command[open] { width: calc(100vw - 1rem); } .app-unsaved-dialog[open] { width: min(30rem, calc(100vw - 1rem)); } } /* Dashboard operacional 0.4.0 — contexto, gráfico financeiro e prioridades acionáveis. */ .ds-dashboard-header { align-items: flex-start; } .ds-dashboard-header .ds-page-header__actions { align-items: center; gap: .65rem; } .ds-dashboard-period { display: inline-flex; align-items: center; gap: .2rem; border: 1px solid var(--ok-line-dfe4ec,#dfe4ec); border-radius: .82rem; background: var(--ok-surface-f8fafc_a900,rgba(248, 250, 252, .9)); padding: .2rem; } .ds-dashboard-period__button { display: inline-flex; min-height: 2.25rem; align-items: center; justify-content: center; border: 0; border-radius: .64rem; background: transparent; padding: .42rem .68rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; line-height: 1; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; } .ds-dashboard-period__button:hover { background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-403d75,#403d75); } .ds-dashboard-period__button.is-active { background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-403d75,#403d75); box-shadow: 0 8px 20px -14px var(--ok-shadow-0f172a_a600,rgba(15, 23, 42, .6)); } .ds-dashboard-period__button:focus-visible { outline: 3px solid var(--ok-line-2563eb_a200,rgba(37, 99, 235, .2)); outline-offset: 2px; } .ds-dashboard-period__button:disabled { cursor: wait; opacity: .65; } .ds-dashboard-updated { display: inline-flex; min-height: 2.65rem; align-items: center; gap: .4rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; white-space: nowrap; } .ds-dashboard-updated .material-symbols-rounded { display: flex; align-items: center; justify-content: center; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .ds-dashboard-updated strong { color: var(--ok-ink-334155,#334155); font-weight: 900; } .ds-metric-grid--contextual { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ds-metric-card { position: relative; } .ds-metric-card--linked { padding-right: 2.65rem; transition: border-color .17s ease, box-shadow .17s ease, translate .17s ease; } .ds-metric-card--linked:hover { translate: 0 -1px; border-color: var(--ok-line-d6d3eb,#d6d3eb); box-shadow: 0 20px 38px -30px var(--ok-shadow-4f4c8f_a450,rgba(79, 76, 143, .45)); } .ds-metric-card__link { position: absolute; z-index: 2; inset: 0; border-radius: inherit; } .ds-metric-card__link:focus-visible { outline: 3px solid var(--ok-line-2563eb_a240,rgba(37, 99, 235, .24)); outline-offset: 3px; } .ds-metric-card__content { position: relative; z-index: 1; } .ds-metric-card__trend { display: flex; min-width: 0; margin: .34rem 0 0; align-items: center; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; line-height: 1.25; } .ds-metric-card__trend--success { color: var(--ok-ink-047857,#047857); } .ds-metric-card__trend--warning { color: var(--ok-ink-b45309,#b45309); } .ds-metric-card__trend--danger { color: var(--ok-ink-b91c1c,#b91c1c); } .ds-metric-card__trend--neutral { color: var(--ok-ink-64748b,#64748b); } .ds-metric-card__arrow { position: absolute; top: .8rem; right: .8rem; display: flex; width: 1.65rem; height: 1.65rem; align-items: center; justify-content: center; border-radius: .52rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-94a3b8,#94a3b8); font-size: .9rem; line-height: 1; transition: background .17s ease, color .17s ease; } .ds-metric-card--linked:hover .ds-metric-card__arrow { background: var(--ok-surface-f1effa,#f1effa); color: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-dashboard-grid--overview { grid-template-columns: minmax(0, 1.72fr) minmax(19rem, .78fr); align-items: stretch; } .ds-dashboard-grid--overview > .ds-panel { height: 100%; } .ds-financial-panel .ds-panel__body, .ds-attention-panel .ds-panel__body { min-height: 25rem; } .ds-chart-legend { display: flex; align-items: center; gap: .8rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .ds-chart-legend > span { display: inline-flex; align-items: center; gap: .32rem; } .ds-chart-legend__dot { width: .52rem; height: .52rem; border-radius: 999px; } .ds-chart-legend__dot--billed { background: var(--ok-surface-4f4c8f,#4f4c8f); } .ds-chart-legend__dot--received { background: var(--ok-surface-2563eb,#2563eb); } .ds-financial-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; } .ds-financial-summary > div { min-width: 0; border: 1px solid var(--ok-line-edf1f6,#edf1f6); border-radius: .78rem; background: var(--ok-surface-fbfcfe,#fbfcfe); padding: .65rem .72rem; } .ds-financial-summary span, .ds-financial-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-financial-summary span { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 750; } .ds-financial-summary strong { margin-top: .2rem; color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; font-weight: 900; } .ds-financial-summary .is-warning { border-color: var(--ok-line-fed7aa,#fed7aa); background: var(--ok-surface-fffaf2,#fffaf2); } .ds-financial-summary .is-warning strong { color: var(--ok-ink-c2410c,#c2410c); } .ds-financial-chart { width: 100%; min-height: 15rem; margin-top: .7rem; overflow: hidden; border: 1px solid var(--ok-line-edf1f6,#edf1f6); border-radius: .9rem; background: linear-gradient(180deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-fbfcff,#fbfcff)); padding: .45rem .3rem .15rem; } .ds-financial-chart svg { display: block; width: 100%; height: 14.2rem; overflow: visible; } .ds-financial-chart__grid line { stroke: var(--ok-ink-e8edf4,#e8edf4); stroke-width: 1; stroke-dasharray: 4 5; } .ds-financial-chart__axis-labels text, .ds-financial-chart__month { fill: var(--ok-ink-94a3b8,#94a3b8); font-family: inherit; font-size: .65rem; font-weight: 700; } .ds-financial-chart__area { fill: url(#receivedArea); } .ds-financial-chart__line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .ds-financial-chart__line--billed { stroke: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-financial-chart__line--received { stroke: var(--ok-ink-2563eb,#2563eb); } .ds-financial-chart__point { stroke: var(--ok-ink-ffffff,#fff); stroke-width: 2.5; vector-effect: non-scaling-stroke; } .ds-financial-chart__point--billed { fill: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-financial-chart__point--received { fill: var(--ok-ink-2563eb,#2563eb); } .ds-financial-chart__point-group:hover .ds-financial-chart__point { r: 5.5; } .ds-financial-insight { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .65rem; margin-top: .7rem; border-radius: .8rem; background: var(--ok-surface-f6f7fc,#f6f7fc); padding: .6rem .7rem; } .ds-financial-insight > .material-symbols-rounded { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: .62rem; background: var(--ok-surface-eceaf7,#eceaf7); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .ds-financial-insight p { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.45; } .ds-financial-insight a { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok-ink-403d75,#403d75); font-size: .65rem; font-weight: 900; text-decoration: none; white-space: nowrap; } .ds-financial-insight a .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; } .ds-attention-list--actionable { gap: .62rem; } .ds-attention-item--linked { position: relative; padding: .78rem; transition: border-color .17s ease, background .17s ease, translate .17s ease; } .ds-attention-item--linked:hover { translate: 0 -1px; border-color: var(--ok-line-dce2eb,#dce2eb); background: var(--ok-surface-ffffff,#fff); } .ds-attention-item__link { position: absolute; z-index: 2; inset: 0; border-radius: inherit; } .ds-attention-item__link:focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 3px; } .ds-attention-item__content { flex: 1 1 auto; } .ds-attention-item__footer { display: flex; min-width: 0; margin-top: .48rem; align-items: center; justify-content: space-between; gap: .6rem; } .ds-attention-item__footer small { overflow: hidden; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .ds-attention-item__footer > span { display: inline-flex; align-items: center; gap: .22rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 900; white-space: nowrap; } .ds-attention-item__footer i { display: flex; align-items: center; justify-content: center; font-size: .85rem; font-style: normal; line-height: 1; } .ds-activity-list--columns { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem 1.4rem; } @media (max-width: 1279px) { .ds-dashboard-header { align-items: stretch; flex-direction: column; } .ds-dashboard-header .ds-page-header__actions { justify-content: flex-start; } .ds-dashboard-grid--overview { grid-template-columns: minmax(0, 1.45fr) minmax(18rem, .85fr); } } @media (max-width: 1099px) { .ds-dashboard-grid--overview { grid-template-columns: 1fr; } .ds-financial-panel .ds-panel__body, .ds-attention-panel .ds-panel__body { min-height: auto; } } @media (max-width: 899px) { .ds-metric-grid--contextual { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-financial-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-activity-list--columns { grid-template-columns: 1fr; } } @media (max-width: 767px) { .ds-dashboard-header .ds-page-header__actions, .ds-dashboard-period { width: 100%; } .ds-dashboard-period { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } .ds-dashboard-period__button { min-width: 0; padding-inline: .35rem; } .ds-dashboard-updated { width: 100%; min-height: 1.8rem; } .ds-chart-legend { gap: .5rem; } .ds-financial-chart { min-height: 13rem; margin-inline: -.2rem; width: calc(100% + .4rem); } .ds-financial-chart svg { height: 12.4rem; } .ds-financial-insight { grid-template-columns: 2rem minmax(0, 1fr); } .ds-financial-insight a { grid-column: 2; justify-self: start; } } @media (max-width: 520px) { .ds-metric-grid--contextual { grid-template-columns: 1fr; } .ds-dashboard-period { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-financial-summary { grid-template-columns: 1fr 1fr; } .ds-attention-item__footer { align-items: flex-start; flex-direction: column; } } @media (prefers-reduced-motion: reduce) { .ds-dashboard-period__button, .ds-metric-card--linked, .ds-metric-card__arrow, .ds-attention-item--linked { transition: none; } } /* Dashboard operacional 0.4.1 — tickets, agenda, CRM, capacidade e clientes */ .ds-dashboard-grid--service { grid-template-columns: minmax(0, 1.45fr) minmax(20rem, .8fr); } .ds-dashboard-grid--growth { grid-template-columns: minmax(19rem, .72fr) minmax(0, 1.28fr); } .ds-dashboard-grid--relationships { grid-template-columns: minmax(0, 1.14fr) minmax(20rem, .86fr); } .ds-panel-text-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 900; text-decoration: none; white-space: nowrap; } .ds-panel-text-link .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; } .ds-panel-text-link:hover { color: var(--ok-ink-2563eb,#2563eb); } .ds-ticket-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; margin-bottom: .8rem; } .ds-ticket-kpis > div { min-width: 0; border: 1px solid var(--ok-line-e8edf4,#e8edf4); border-radius: .82rem; background: var(--ok-surface-fbfcff,#fbfcff); padding: .68rem .72rem; } .ds-ticket-kpis span, .ds-ticket-kpis small, .ds-ticket-kpis strong { display: block; } .ds-ticket-kpis span { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .ds-ticket-kpis strong { margin-top: .14rem; color: var(--ok-ink-172033,#172033); font-size: 1rem; font-weight: 950; letter-spacing: -.025em; } .ds-ticket-kpis small { margin-top: .14rem; overflow: hidden; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .ds-ticket-kpis > .is-warning { border-color: var(--ok-line-fed7aa,#fed7aa); background: var(--ok-surface-fffaf4,#fffaf4); } .ds-ticket-kpis > .is-warning strong { color: var(--ok-ink-c2410c,#c2410c); } .ds-ticket-chart-wrap { border: 1px solid var(--ok-line-edf1f6,#edf1f6); border-radius: .9rem; background: linear-gradient(180deg, var(--ok-surface-fcfdff,#fcfdff) 0%, var(--ok-surface-f8faff,#f8faff) 100%); padding: .7rem .75rem .55rem; } .ds-ticket-chart-legend { display: flex; align-items: center; justify-content: flex-end; gap: .75rem; margin-bottom: .35rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .ds-ticket-chart-legend span { display: inline-flex; align-items: center; gap: .3rem; } .ds-ticket-chart-legend i { width: .48rem; height: .48rem; border-radius: .18rem; } .ds-ticket-chart-legend .is-opened { background: var(--ok-surface-4f4c8f,#4f4c8f); } .ds-ticket-chart-legend .is-resolved { background: var(--ok-surface-2563eb,#2563eb); } .ds-ticket-chart { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.5rem, 1fr)); min-height: 9.5rem; align-items: end; gap: .45rem; border-bottom: 1px solid var(--ok-line-dfe6ef,#dfe6ef); background-image: linear-gradient(to bottom, transparent calc(50% - .5px), var(--ok-surface-edf1f6,#edf1f6) 50%, transparent calc(50% + .5px)); } .ds-ticket-chart__bucket { display: grid; min-width: 0; height: 9.5rem; grid-template-rows: minmax(0, 1fr) 1.25rem; gap: .25rem; align-items: end; } .ds-ticket-chart__bars { display: flex; height: 7.8rem; align-items: flex-end; justify-content: center; gap: .24rem; } .ds-ticket-chart__bar { width: min(1rem, 35%); min-height: 0; border-radius: .28rem .28rem .08rem .08rem; transition: height .25s ease, opacity .2s ease; } .ds-ticket-chart__bar--opened { background: var(--ok-surface-4f4c8f,#4f4c8f); } .ds-ticket-chart__bar--resolved { background: var(--ok-surface-2563eb,#2563eb); } .ds-ticket-chart__bucket:hover .ds-ticket-chart__bar { opacity: .82; } .ds-ticket-chart__bucket > small { overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; text-align: center; text-overflow: ellipsis; white-space: nowrap; } .ds-agenda-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; margin-bottom: .7rem; } .ds-agenda-summary span { display: flex; min-width: 0; min-height: 2.05rem; align-items: center; justify-content: center; gap: .25rem; border: 1px solid var(--ok-line-e7ebf2,#e7ebf2); border-radius: .7rem; background: var(--ok-surface-fafbfe,#fafbfe); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; text-align: center; } .ds-agenda-summary strong { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .72rem; font-weight: 950; } .ds-agenda-timeline { display: grid; gap: .28rem; } .ds-agenda-timeline__day { margin-top: .3rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; font-weight: 900; letter-spacing: .055em; text-transform: uppercase; } .ds-agenda-timeline__day:first-child { margin-top: 0; } .ds-agenda-timeline__item { display: grid; grid-template-columns: 2.25rem 2rem minmax(0, 1fr) 1rem; min-width: 0; align-items: center; gap: .48rem; border: 1px solid transparent; border-radius: .75rem; color: inherit; padding: .48rem .42rem; text-decoration: none; transition: border-color .18s ease, background .18s ease, translate .18s ease; } .ds-agenda-timeline__item:hover { translate: 2px 0; border-color: var(--ok-line-e2e8f0,#e2e8f0); background: var(--ok-surface-fafbfe,#fafbfe); } .ds-agenda-timeline__time { color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 900; text-align: right; } .ds-agenda-timeline__icon { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: .65rem; background: var(--ok-surface-f2f1f9,#f2f1f9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .ds-agenda-timeline__item--warning .ds-agenda-timeline__icon { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .ds-agenda-timeline__item--danger .ds-agenda-timeline__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-dc2626,#dc2626); } .ds-agenda-timeline__item--neutral .ds-agenda-timeline__icon { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .ds-agenda-timeline__copy { min-width: 0; } .ds-agenda-timeline__copy strong, .ds-agenda-timeline__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-agenda-timeline__copy strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .65rem; font-weight: 900; } .ds-agenda-timeline__copy small { margin-top: .11rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-agenda-timeline__item > .material-symbols-rounded:last-child { display: flex; align-items: center; justify-content: center; color: var(--ok-ink-cbd5e1,#cbd5e1); font-size: .95rem; } .ds-funnel-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; margin-bottom: .72rem; } .ds-funnel-summary > div { min-width: 0; border: 1px solid var(--ok-line-e8edf4,#e8edf4); border-radius: .75rem; background: var(--ok-surface-fbfcff,#fbfcff); padding: .55rem .6rem; } .ds-funnel-summary span, .ds-funnel-summary strong { display: block; } .ds-funnel-summary span { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .ds-funnel-summary strong { margin-top: .14rem; overflow: hidden; color: var(--ok-ink-172033,#172033); font-size: .74rem; font-weight: 950; text-overflow: ellipsis; white-space: nowrap; } .ds-funnel-summary .is-warning { border-color: var(--ok-line-fed7aa,#fed7aa); background: var(--ok-surface-fffaf4,#fffaf4); } .ds-funnel-summary .is-warning strong { color: var(--ok-ink-c2410c,#c2410c); } .ds-funnel-list { display: grid; gap: .3rem; } .ds-funnel-row { display: grid; grid-template-columns: 2rem minmax(6.5rem, .85fr) minmax(4rem, 1fr) 1.7rem; min-width: 0; align-items: center; gap: .5rem; border-radius: .72rem; color: inherit; padding: .43rem .45rem; text-decoration: none; } .ds-funnel-row:hover { background: var(--ok-surface-f8f9fc,#f8f9fc); } .ds-funnel-row__icon { display: flex; width: 2rem; height: 2rem; align-items: center; justify-content: center; border-radius: .62rem; background: var(--ok-surface-f2f1f9,#f2f1f9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .95rem; line-height: 1; } .ds-funnel-row__copy { min-width: 0; } .ds-funnel-row__copy strong, .ds-funnel-row__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-funnel-row__copy strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .65rem; font-weight: 900; } .ds-funnel-row__copy small { margin-top: .1rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-funnel-row__track { height: .38rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f6,#edf1f6); } .ds-funnel-row__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-7773ba,#7773ba)); } .ds-funnel-row b { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 950; text-align: right; } .ds-capacity-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .ds-capacity-section { min-width: 0; border: 1px solid var(--ok-line-e7ebf2,#e7ebf2); border-radius: .92rem; background: var(--ok-surface-fbfcff,#fbfcff); padding: .72rem; } .ds-capacity-section__header { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding-bottom: .58rem; border-bottom: 1px solid var(--ok-line-edf1f6,#edf1f6); } .ds-capacity-section__header > .material-symbols-rounded { display: flex; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; border-radius: .68rem; background: var(--ok-surface-f0eff8,#f0eff8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.05rem; line-height: 1; } .ds-capacity-section__header strong, .ds-capacity-section__header small { display: block; } .ds-capacity-section__header strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 950; } .ds-capacity-section__header small { margin-top: .08rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-capacity-section__header a { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 900; text-decoration: none; } .ds-capacity-meter { margin-top: .68rem; } .ds-capacity-meter > div:first-child { display: flex; justify-content: space-between; gap: .5rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .ds-capacity-meter > div:first-child strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .65rem; font-weight: 950; } .ds-capacity-meter__track { height: .44rem; overflow: hidden; margin-top: .3rem; border-radius: 999px; background: var(--ok-surface-e9edf4,#e9edf4); } .ds-capacity-meter__track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); } .ds-capacity-meter > small { display: block; margin-top: .25rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-capacity-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; margin-top: .7rem; } .ds-capacity-stats > div { min-width: 0; border: 1px solid var(--ok-line-edf1f6,#edf1f6); border-radius: .68rem; background: var(--ok-surface-ffffff,#fff); padding: .5rem; } .ds-capacity-stats strong, .ds-capacity-stats span, .ds-capacity-stats small { display: block; } .ds-capacity-stats strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .74rem; font-weight: 950; } .ds-capacity-stats span { margin-top: .08rem; color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 850; } .ds-capacity-stats small { margin-top: .08rem; overflow: hidden; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .ds-capacity-stats .is-warning { border-color: var(--ok-line-fed7aa,#fed7aa); background: var(--ok-surface-fffaf4,#fffaf4); } .ds-capacity-stats .is-warning strong { color: var(--ok-ink-c2410c,#c2410c); } .ds-capacity-health { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .42rem; margin-top: .68rem; } .ds-capacity-health > div { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); min-width: 0; align-items: center; gap: .42rem; border: 1px solid var(--ok-line-edf1f6,#edf1f6); border-radius: .7rem; background: var(--ok-surface-ffffff,#fff); padding: .52rem; } .ds-capacity-health .material-symbols-rounded { display: flex; width: 1.8rem; height: 1.8rem; grid-row: span 2; align-items: center; justify-content: center; border-radius: .58rem; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .9rem; line-height: 1; } .ds-capacity-health strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; font-weight: 950; } .ds-capacity-health small { overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .ds-capacity-health .is-warning { border-color: var(--ok-line-fed7aa,#fed7aa); background: var(--ok-surface-fffaf4,#fffaf4); } .ds-capacity-health .is-warning .material-symbols-rounded { background: var(--ok-surface-ffedd5,#ffedd5); color: var(--ok-ink-c2410c,#c2410c); } .ds-capacity-health .is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fff7f7,#fff7f7); } .ds-capacity-health .is-danger .material-symbols-rounded { background: var(--ok-surface-fee2e2,#fee2e2); color: var(--ok-ink-dc2626,#dc2626); } .ds-client-attention-list, .ds-useful-activity-list { display: grid; gap: .48rem; } .ds-client-attention-item { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr) auto; min-width: 0; align-items: center; gap: .62rem; border: 1px solid var(--ok-line-e8edf4,#e8edf4); border-left-width: 3px; border-radius: .82rem; background: var(--ok-surface-fcfdff,#fcfdff); padding: .62rem .65rem; } .ds-client-attention-item--danger { border-left-color: var(--ok-line-dc2626,#dc2626); } .ds-client-attention-item--warning { border-left-color: var(--ok-line-f59e0b,#f59e0b); } .ds-client-attention-item--neutral { border-left-color: var(--ok-line-94a3b8,#94a3b8); } .ds-client-attention-item__avatar { display: flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: .76rem; background: var(--ok-surface-eeedf8,#eeedf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .72rem; font-weight: 950; text-decoration: none; } .ds-client-attention-item__title { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .55rem; } .ds-client-attention-item__title a { overflow: hidden; color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 950; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .ds-client-attention-item__title span { flex: 0 0 auto; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); padding: .18rem .4rem; font-size: .65rem; font-weight: 900; } .ds-client-attention-item--danger .ds-client-attention-item__title span { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .ds-client-attention-item--warning .ds-client-attention-item__title span { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .ds-client-attention-item__reasons { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem; margin-top: .27rem; } .ds-client-attention-item__reasons span { display: inline-flex; max-width: 100%; align-items: center; gap: .2rem; border-radius: .42rem; background: var(--ok-surface-f5f7fa,#f5f7fa); color: var(--ok-ink-64748b,#64748b); padding: .17rem .34rem; font-size: .65rem; font-weight: 750; } .ds-client-attention-item__reasons i { display: flex; align-items: center; justify-content: center; font-size: .68rem; font-style: normal; line-height: 1; } .ds-client-attention-item__reasons .is-danger { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .ds-client-attention-item__reasons .is-warning { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .ds-client-attention-item__action { display: inline-flex; align-items: center; gap: .22rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 900; text-decoration: none; white-space: nowrap; } .ds-client-attention-item__action .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: .82rem; line-height: 1; } .ds-useful-activity-item { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) 1.2rem; min-width: 0; align-items: center; gap: .55rem; border: 1px solid var(--ok-line-e8edf4,#e8edf4); border-radius: .8rem; background: var(--ok-surface-fcfdff,#fcfdff); padding: .58rem .6rem; } .ds-useful-activity-item__icon { display: flex; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; border-radius: .68rem; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: 1rem; line-height: 1; } .ds-useful-activity-item--success .ds-useful-activity-item__icon { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .ds-useful-activity-item--danger .ds-useful-activity-item__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-dc2626,#dc2626); } .ds-useful-activity-item--warning .ds-useful-activity-item__icon { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .ds-useful-activity-item--brand .ds-useful-activity-item__icon { background: var(--ok-surface-f2f1f9,#f2f1f9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-useful-activity-item strong, .ds-useful-activity-item p, .ds-useful-activity-item small { display: block; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-useful-activity-item strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 950; } .ds-useful-activity-item p { margin-top: .1rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .ds-useful-activity-item small { margin-top: .15rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .ds-useful-activity-item > a { display: flex; width: 1.2rem; height: 1.8rem; align-items: center; justify-content: center; border-radius: .45rem; color: var(--ok-ink-94a3b8,#94a3b8); text-decoration: none; } .ds-useful-activity-item > a:hover { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .ds-useful-activity-item > a .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: .95rem; } @media (max-width: 1199px) { .ds-dashboard-grid--service, .ds-dashboard-grid--growth, .ds-dashboard-grid--relationships { grid-template-columns: 1fr; } .ds-capacity-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 899px) { .ds-ticket-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-capacity-columns { grid-template-columns: 1fr; } } @media (max-width: 639px) { .ds-ticket-kpis, .ds-funnel-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ds-funnel-summary > div:first-child { grid-column: 1 / -1; } .ds-ticket-chart { gap: .2rem; } .ds-ticket-chart__bars { gap: .14rem; } .ds-agenda-summary { grid-template-columns: 1fr; } .ds-agenda-summary span { justify-content: flex-start; padding-inline: .6rem; } .ds-agenda-timeline__item { grid-template-columns: 2rem 1.9rem minmax(0, 1fr); } .ds-agenda-timeline__item > .material-symbols-rounded:last-child { display: none; } .ds-agenda-timeline__time { font-size: .65rem; } .ds-funnel-row { grid-template-columns: 1.9rem minmax(0, 1fr) 1.5rem; } .ds-funnel-row__track { display: none; } .ds-capacity-stats { grid-template-columns: 1fr; } .ds-capacity-health { grid-template-columns: 1fr; } .ds-client-attention-item { grid-template-columns: 2.2rem minmax(0, 1fr); } .ds-client-attention-item__action { grid-column: 2; justify-self: flex-start; margin-top: .1rem; } .ds-client-attention-item__title { align-items: flex-start; flex-direction: column; gap: .22rem; } } @media (prefers-reduced-motion: reduce) { .ds-ticket-chart__bar, .ds-agenda-timeline__item { transition: none; } } /* Trusted devices — passwordless OTP */ .identity-trusted-device-option { display: grid !important; grid-template-columns: 1.25rem minmax(0, 1fr); align-items: start; gap: .7rem; padding: .9rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .9rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-334155,#334155); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } .identity-trusted-device-option:hover, .identity-trusted-device-option:focus-within { border-color: var(--ok-line-aaa5cf,#aaa5cf); background: var(--ok-surface-faf9fe,#faf9fe); box-shadow: 0 0 0 .22rem var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .1)); } .identity-trusted-device-option input { width: 1.2rem !important; height: 1.2rem; min-height: 0 !important; margin: .1rem 0 0; padding: 0 !important; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .identity-trusted-device-option strong, .identity-trusted-device-option small { display: block; } .identity-trusted-device-option strong { color: var(--ok-ink-172033,#172033); font-size: .9rem; font-weight: 900; } .identity-trusted-device-option small { margin-top: .2rem; color: var(--ok-ink-64748b,#64748b); font-size: .78rem; font-weight: 550; line-height: 1.5; } .identity-trusted-device-summary { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: start; gap: .7rem; margin: 1rem 0 0; padding: .85rem; border: 1px solid var(--ok-line-d7d4e9,#d7d4e9); border-radius: .9rem; background: var(--ok-surface-faf9fe,#faf9fe); color: var(--ok-ink-5d567f,#5d567f); } .identity-trusted-device-summary > .material-symbols-rounded { display: flex; align-items: center; justify-content: center; width: 2.6rem; height: 2.6rem; border-radius: .75rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); } .identity-trusted-device-summary p { margin: 0; font-size: .8rem; line-height: 1.5; } .identity-trusted-device-summary strong { display: block; margin-bottom: .1rem; color: var(--ok-ink-312e61,#312e61); font-size: .86rem; } .portal-auth-trusted-option { position: relative; display: grid !important; grid-template-columns: 1.3rem 2.35rem minmax(0, 1fr); align-items: start; gap: .65rem; min-height: 4.3rem; padding: .85rem; border: 1.5px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .95rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-334155,#334155); cursor: pointer; transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease; } .portal-auth-trusted-option:hover, .portal-auth-trusted-option:focus-within, .portal-auth-trusted-option:has(input:checked) { border-color: var(--ok-line-aaa5cf,#aaa5cf); background: var(--ok-surface-faf9fe,#faf9fe); box-shadow: 0 0 0 .24rem var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .1)); } .portal-auth-trusted-option > input { position: absolute; width: 1px !important; height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .portal-auth-trusted-option__check { display: flex; align-items: center; justify-content: center; width: 1.3rem; height: 1.3rem; margin-top: .5rem; border: 1.5px solid var(--ok-line-aeb9c9,#aeb9c9); border-radius: .38rem; background: var(--ok-surface-ffffff,#fff); color: transparent; transition: border-color .16s ease, background-color .16s ease, color .16s ease; } .portal-auth-trusted-option__check .material-symbols-rounded { display: flex !important; align-items: center !important; justify-content: center !important; font-size: 1rem; line-height: 1 !important; } .portal-auth-trusted-option > input:checked + .portal-auth-trusted-option__check { border-color: var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .portal-auth-trusted-option > input:focus-visible + .portal-auth-trusted-option__check { outline: 3px solid var(--ok-line-2563eb_a300,rgba(37, 99, 235, .3)); outline-offset: 3px; } .portal-auth-trusted-option__content { display: block; min-width: 0; } .portal-auth-trusted-option__icon { display: flex !important; align-items: center !important; justify-content: center !important; width: 2.35rem; height: 2.35rem; border-radius: .72rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.25rem; line-height: 1 !important; } .portal-auth-trusted-option strong, .portal-auth-trusted-option small { display: block; } .portal-auth-trusted-option strong { color: var(--ok-ink-263247,#263247); font-size: .96rem; font-weight: 700; line-height: 1.35; } .portal-auth-trusted-option small { margin-top: .16rem; color: var(--ok-ink-64748b,#64748b); font-size: .82rem; font-weight: 550; line-height: 1.48; } .portal-auth-trusted-summary { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); align-items: start; gap: .75rem; margin: 0 0 1.05rem; padding: .9rem; border: 1px solid var(--ok-line-d7d4e9,#d7d4e9); border-radius: .9rem; background: var(--ok-surface-faf9fe,#faf9fe); } .portal-auth-trusted-summary > .material-symbols-rounded { display: flex !important; align-items: center !important; justify-content: center !important; width: 2.7rem; height: 2.7rem; border-radius: .78rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.35rem; line-height: 1 !important; } .portal-auth-trusted-summary p { margin: 0; color: var(--ok-ink-5b687b,#5b687b); font-size: .86rem; line-height: 1.52; } .portal-auth-trusted-summary strong { display: block; margin-bottom: .12rem; color: var(--ok-ink-263247,#263247); font-size: .9rem; font-weight: 700; } @media (max-width: 390px) { .portal-auth-trusted-option { grid-template-columns: 1.25rem 2.15rem minmax(0, 1fr); gap: .55rem; padding: .75rem; } .portal-auth-trusted-option__icon { width: 2.15rem; height: 2.15rem; } .portal-auth-trusted-option small { font-size: .78rem; } } /* Customer Portal authentication split layout — Hotfix 8.1.3 Desktop follows a calm two-panel composition; mobile prioritizes the form. */ .portal-auth-body { display: block; min-height: 100vh; min-height: 100dvh; padding: 0; background: var(--ok-surface-ffffff,#ffffff); } .portal-auth-shell { width: 100%; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(31rem, 1fr); gap: 0; } .portal-auth-main { min-width: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; padding: max(2rem, env(safe-area-inset-top)) clamp(2rem, 6vw, 6rem) max(1.5rem, env(safe-area-inset-bottom)); background: var(--ok-surface-ffffff,#ffffff); } .portal-auth-main__content { width: min(100%, 34rem); margin: auto; padding-block: clamp(2.2rem, 7vh, 5rem); } .portal-auth-brand { width: min(100%, 34rem); min-height: 3rem; justify-content: flex-start; margin: 0 auto; } .portal-auth-brand .portal-brand-mark { width: 2.65rem; height: 2.65rem; flex-basis: 2.65rem; border-radius: .85rem; box-shadow: 0 14px 28px -20px var(--ok-shadow-4f4c8f_a900,rgba(79, 76, 143, .9)); } .portal-auth-brand strong { font-size: 1.02rem; } .portal-auth-brand small { font-size: .8rem; } .portal-auth-card { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; } .portal-auth-heading { grid-template-columns: 3.35rem minmax(0, 1fr); gap: .9rem; margin-bottom: 1.6rem; } .portal-auth-heading > .portal-auth-icon { width: 3.35rem; height: 3.35rem; flex-basis: 3.35rem; border-radius: 1rem; font-size: 1.55rem; } .portal-auth-heading h1 { font-size: clamp(1.85rem, 3.4vw, 2.35rem); line-height: 1.08; } .portal-auth-heading p { max-width: 30rem; margin-top: .55rem; color: var(--ok-ink-64748b,#64748b); font-size: 1rem; line-height: 1.6; } .portal-auth-form { gap: 1.1rem; } .portal-auth-control { min-height: 3.7rem; border-radius: .85rem; } .portal-auth-control input { min-height: 3.55rem; } .portal-auth-trusted-option { border-radius: .85rem; background: var(--ok-surface-fbfcfe,#fbfcfe); } .portal-auth-submit { border-radius: .85rem; } .portal-auth-security-note, .portal-auth-code-help, .portal-auth-trusted-summary { border-radius: .85rem; } .portal-auth-secondary { margin-top: 1.1rem; } .portal-auth-footer { width: min(100%, 34rem); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: .75rem 1.25rem; color: var(--ok-ink-778397,#778397); font-size: .78rem; line-height: 1.4; } .portal-auth-footer a { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.5rem; padding: .45rem .6rem; border-radius: .65rem; color: var(--ok-ink-5c6680,#5c6680); font-weight: 700; text-decoration: none; } .portal-auth-footer a:hover { background: var(--ok-surface-f5f6fa,#f5f6fa); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-auth-footer a:focus-visible { outline: 3px solid var(--ok-line-2563eb_a280,rgba(37, 99, 235, .28)); outline-offset: 2px; } .portal-auth-footer .material-symbols-rounded { display: flex !important; align-items: center !important; justify-content: center !important; width: 1.15rem; height: 1.15rem; padding: 0 !important; font-size: 1.05rem; line-height: 1 !important; } .portal-auth-aside { position: relative; isolation: isolate; min-width: 0; min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; padding: clamp(3rem, 7vw, 7rem); background: radial-gradient(circle at 16% 18%, var(--ok-surface-6966c2_a380,rgba(105, 102, 194, .38)), transparent 24rem), radial-gradient(circle at 88% 84%, var(--ok-surface-2563eb_a260,rgba(37, 99, 235, .26)), transparent 28rem), linear-gradient(145deg, var(--ok-surface-111a2d,#111a2d) 0%, var(--ok-surface-1b2940,#1b2940) 52%, var(--ok-surface-29394f,#29394f) 100%); color: var(--ok-ink-ffffff,#ffffff); } .portal-auth-aside::after { position: absolute; right: -8rem; bottom: -10rem; z-index: -1; width: 30rem; height: 30rem; border: 1px solid var(--ok-line-ffffff_a80,rgba(255, 255, 255, .08)); border-radius: 50%; content: ""; } .portal-auth-aside__grid { position: absolute; inset: 0; z-index: -2; opacity: .16; background-image: linear-gradient(var(--ok-surface-ffffff_a80,rgba(255, 255, 255, .08)) 1px, transparent 1px), linear-gradient(90deg, var(--ok-surface-ffffff_a80,rgba(255, 255, 255, .08)) 1px, transparent 1px); background-size: 52px 52px; mask-image: linear-gradient(to bottom right, transparent 8%, #000 48%, transparent 95%); } .portal-auth-aside__orb { position: absolute; z-index: -1; border-radius: 999px; filter: blur(2px); pointer-events: none; } .portal-auth-aside__orb--one { top: 12%; right: 9%; width: 12rem; height: 12rem; border: 1px solid var(--ok-line-ffffff_a120,rgba(255, 255, 255, .12)); } .portal-auth-aside__orb--two { left: 10%; bottom: 8%; width: 7rem; height: 7rem; background: var(--ok-surface-4f4c8f_a200,rgba(79, 76, 143, .2)); } .portal-auth-aside__content { width: min(100%, 39rem); margin: auto; } .portal-auth-aside__symbol { display: flex; align-items: center; justify-content: center; width: 4.2rem; height: 4.2rem; margin-bottom: 2rem; border: 1px solid var(--ok-line-ffffff_a140,rgba(255, 255, 255, .14)); border-radius: 1.25rem; background: var(--ok-surface-ffffff_a80,rgba(255, 255, 255, .08)); box-shadow: inset 0 1px 0 var(--ok-shadow-ffffff_a100,rgba(255, 255, 255, .1)); backdrop-filter: blur(12px); } .portal-auth-aside__symbol .material-symbols-rounded { display: flex !important; align-items: center !important; justify-content: center !important; width: 2rem; height: 2rem; padding: 0 !important; color: var(--ok-ink-f5d46f,#f5d46f); font-size: 2rem; line-height: 1 !important; } .portal-auth-aside__eyebrow { display: block; margin-bottom: .8rem; color: var(--ok-ink-c9d5e6,#c9d5e6); font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; } .portal-auth-aside h2 { max-width: 37rem; margin: 0; color: var(--ok-ink-ffffff,#ffffff); font-size: clamp(2.25rem, 4.2vw, 4rem); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; } .portal-auth-aside__content > p { max-width: 35rem; margin: 1.4rem 0 0; color: var(--ok-ink-d5dfec,#d5dfec); font-size: clamp(1rem, 1.35vw, 1.16rem); line-height: 1.7; } .portal-auth-aside__features { display: grid; gap: .75rem; margin-top: 2rem; } .portal-auth-aside__feature { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .85rem; padding: .85rem .95rem; border: 1px solid var(--ok-line-ffffff_a110,rgba(255, 255, 255, .11)); border-radius: 1rem; background: var(--ok-surface-ffffff_a55,rgba(255, 255, 255, .055)); backdrop-filter: blur(10px); } .portal-auth-aside__feature > .material-symbols-rounded { display: flex !important; align-items: center !important; justify-content: center !important; width: 3rem; height: 3rem; padding: 0 !important; border-radius: .85rem; background: var(--ok-surface-938feb_a170,rgba(147, 143, 235, .17)); color: var(--ok-ink-dddafe,#dddafe); font-size: 1.4rem; line-height: 1 !important; } .portal-auth-aside__feature strong, .portal-auth-aside__feature small { display: block; } .portal-auth-aside__feature strong { color: var(--ok-ink-ffffff,#ffffff); font-size: .95rem; font-weight: 700; line-height: 1.35; } .portal-auth-aside__feature small { margin-top: .12rem; color: var(--ok-ink-b9c7d8,#b9c7d8); font-size: .82rem; line-height: 1.48; } .portal-auth-aside__security { display: inline-flex; align-items: center; gap: .55rem; margin-top: 1.45rem; padding: .65rem .8rem; border-radius: .8rem; background: var(--ok-surface-030a19_a200,rgba(3, 10, 25, .2)); color: var(--ok-ink-c9d5e6,#c9d5e6); font-size: .8rem; font-weight: 700; line-height: 1.45; } .portal-auth-aside__security .material-symbols-rounded { display: flex !important; align-items: center !important; justify-content: center !important; width: 1.25rem; height: 1.25rem; padding: 0 !important; color: var(--ok-ink-9dd5bd,#9dd5bd); font-size: 1.15rem; line-height: 1 !important; } @media (max-width: 1180px) { .portal-auth-shell { grid-template-columns: minmax(0, 1.08fr) minmax(28rem, .92fr); } .portal-auth-main { padding-inline: clamp(2rem, 4.5vw, 4rem); } .portal-auth-aside { padding-inline: clamp(2.3rem, 4.5vw, 4rem); } .portal-auth-aside h2 { font-size: clamp(2.1rem, 4vw, 3.15rem); } } @media (max-width: 920px) { .portal-auth-shell { display: block; } .portal-auth-main { min-height: 100vh; min-height: 100dvh; padding: max(1.15rem, env(safe-area-inset-top)) max(1.15rem, env(safe-area-inset-right)) max(1.1rem, env(safe-area-inset-bottom)) max(1.15rem, env(safe-area-inset-left)); } .portal-auth-main__content { padding-block: clamp(1.75rem, 6vh, 3.5rem); } .portal-auth-aside { display: none; } } @media (max-width: 700px) { .portal-auth-brand { justify-content: flex-start; padding: 0; } .portal-auth-card { padding: 0; } .portal-auth-heading { grid-template-columns: 3.15rem minmax(0, 1fr); gap: .75rem; margin-bottom: 1.35rem; } .portal-auth-heading > .portal-auth-icon { width: 3.15rem; height: 3.15rem; flex-basis: 3.15rem; } .portal-auth-heading h1 { font-size: clamp(1.65rem, 8vw, 2rem); } .portal-auth-footer { align-items: flex-start; flex-direction: column; gap: .2rem; } .portal-auth-footer a { justify-content: flex-start; margin-left: -.6rem; } } @media (max-width: 390px) { .portal-auth-main { padding-right: max(.9rem, env(safe-area-inset-right)); padding-left: max(.9rem, env(safe-area-inset-left)); } .portal-auth-main__content { padding-block: 1.4rem 2rem; } .portal-auth-heading { grid-template-columns: 2.9rem minmax(0, 1fr); } .portal-auth-heading > .portal-auth-icon { width: 2.9rem; height: 2.9rem; flex-basis: 2.9rem; border-radius: .85rem; font-size: 1.35rem; } } @media (prefers-reduced-motion: reduce) { .portal-auth-aside__orb { filter: none; } } /* ======================================================================== Financial BI 1.1.0 — /reports/financial ======================================================================== */ .financial-bi-page { display: grid; gap: .9rem; min-width: 0; } .financial-bi-page .ds-panel { min-width: 0; } .financial-bi-period { display: grid; grid-template-columns: minmax(15rem, 1fr) auto auto auto; align-items: center; gap: .8rem; padding: .82rem .9rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: 1rem; background: var(--ok-surface-ffffff_a960,rgba(255, 255, 255, .96)); box-shadow: 0 16px 36px -34px var(--ok-shadow-0f172a_a650,rgba(15, 23, 42, .65)); } .financial-bi-period__intro { display: flex; align-items: center; gap: .65rem; min-width: 0; } .financial-bi-period__icon { display: flex !important; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; align-items: center; justify-content: center; border-radius: .78rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.2rem; line-height: 1; } .financial-bi-period__intro h2, .financial-bi-period__intro p { margin: 0; } .financial-bi-period__intro h2 { color: var(--ok-ink-172033,#172033); font-size: .78rem; font-weight: 900; } .financial-bi-period__intro p { margin-top: .14rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.4; } .financial-bi-presets { display: flex; align-items: center; flex-wrap: wrap; gap: .28rem; padding: .24rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); } .financial-bi-presets button { min-height: 2rem; padding: .4rem .58rem; border: 0; border-radius: .55rem; background: transparent; color: var(--ok-ink-64748b,#64748b); cursor: pointer; font-size: .65rem; font-weight: 850; white-space: nowrap; } .financial-bi-presets button:hover, .financial-bi-presets button:focus-visible { background: var(--ok-surface-eeedf8,#eeedf8); color: var(--ok-ink-4f4c8f,#4f4c8f); outline: none; } .financial-bi-presets button.is-active { background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 5px 14px -9px var(--ok-shadow-4f4c8f_a800,rgba(79, 76, 143, .8)); } .financial-bi-dates { display: flex; align-items: end; gap: .35rem; } .financial-bi-dates label { display: grid; gap: .2rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-transform: uppercase; } .financial-bi-dates input { width: 8.4rem; min-height: 2.25rem; padding: .42rem .52rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .62rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-172033,#172033); font-size: .65rem; } .financial-bi-dates input:focus { border-color: var(--ok-line-8882bd,#8882bd); outline: 3px solid var(--ok-line-4f4c8f_a120,rgba(79, 76, 143, .12)); } .financial-bi-updated { display: flex; align-items: center; gap: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; white-space: nowrap; } .financial-bi-updated .material-symbols-rounded { display: flex; align-items: center; justify-content: center; font-size: .9rem; line-height: 1; } .financial-bi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; } .financial-bi-kpi { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); align-items: center; gap: .68rem; min-width: 0; padding: .78rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 15px 34px -32px var(--ok-shadow-0f172a_a650,rgba(15, 23, 42, .65)); } .financial-bi-kpi.is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: linear-gradient(135deg, var(--ok-surface-ffffff,#fff) 0%, var(--ok-surface-fff8f8,#fff8f8) 100%); } .financial-bi-kpi__icon { display: flex !important; width: 2.7rem; height: 2.7rem; align-items: center; justify-content: center; border-radius: .8rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.15rem; line-height: 1; } .financial-bi-kpi.is-danger .financial-bi-kpi__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .financial-bi-kpi__content { min-width: 0; } .financial-bi-kpi__label, .financial-bi-kpi__content strong, .financial-bi-kpi__change { display: block; min-width: 0; } .financial-bi-kpi__label { overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .financial-bi-kpi__content > strong { margin-top: .12rem; overflow: hidden; color: var(--ok-ink-172033,#172033); font-size: clamp(.84rem, 1.15vw, 1.08rem); font-weight: 950; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; } .financial-bi-kpi__change { display: flex; align-items: center; gap: .18rem; margin-top: .18rem; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .financial-bi-kpi__change .material-symbols-rounded { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: .72rem; line-height: 1; } .financial-bi-kpi__change.is-positive { color: var(--ok-ink-15803d,#15803d); } .financial-bi-kpi__change.is-negative { color: var(--ok-ink-b91c1c,#b91c1c); } .financial-bi-kpi__change.is-neutral { color: var(--ok-ink-64748b,#64748b); } .financial-bi-context-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); } .financial-bi-context-item { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: .46rem; min-width: 0; padding: .62rem .68rem; border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .financial-bi-context-item:last-child { border-right: 0; } .financial-bi-context-item > .material-symbols-rounded { display: flex; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: .56rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .9rem; line-height: 1; } .financial-bi-context-item small, .financial-bi-context-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .financial-bi-context-item small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; text-transform: uppercase; } .financial-bi-context-item strong { margin-top: .08rem; color: var(--ok-ink-172033,#172033); font-size: .67rem; font-weight: 900; } .financial-bi-primary-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(18rem, .8fr); gap: .75rem; align-items: stretch; } .financial-bi-primary-grid > .ds-panel { height: 100%; } .financial-bi-trend-panel .ds-panel__body { display: grid; gap: .62rem; } .financial-bi-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .55rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; } .financial-bi-legend span { display: flex; align-items: center; gap: .25rem; } .financial-bi-legend i { width: .72rem; height: .18rem; border-radius: 999px; } .financial-bi-legend i.is-invoiced { background: var(--ok-surface-4f4c8f,#4f4c8f); } .financial-bi-legend i.is-received { background: var(--ok-surface-2563eb,#2563eb); } .financial-bi-legend i.is-expense { background: var(--ok-surface-e11d48,#e11d48); } .financial-bi-line-chart { overflow-x: auto; min-height: 17rem; padding: .2rem 0 0; } .financial-bi-line-chart svg { display: block; width: 100%; min-width: 40rem; height: auto; } .financial-bi-chart-grid { stroke: var(--ok-ink-e9eef4,#e9eef4); stroke-width: 1; } .financial-bi-chart-y-label, .financial-bi-chart-x-label { fill: var(--ok-ink-64748b,#64748b); font-family: inherit; font-size: 11px; font-weight: 700; } .financial-bi-chart-area { pointer-events: none; } .financial-bi-chart-line { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; vector-effect: non-scaling-stroke; } .financial-bi-chart-line.is-invoiced { stroke: var(--ok-ink-4f4c8f,#4f4c8f); } .financial-bi-chart-line.is-received { stroke: var(--ok-ink-2563eb,#2563eb); } .financial-bi-chart-line.is-expense { stroke: var(--ok-ink-e11d48,#e11d48); stroke-dasharray: 8 6; } .financial-bi-trend-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; } .financial-bi-trend-summary > div { padding: .58rem .62rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .68rem; background: var(--ok-surface-f8fafc,#f8fafc); } .financial-bi-trend-summary small, .financial-bi-trend-summary strong { display: block; } .financial-bi-trend-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-transform: uppercase; } .financial-bi-trend-summary strong { margin-top: .12rem; color: var(--ok-ink-172033,#172033); font-size: .67rem; font-weight: 900; } .financial-bi-trend-summary .is-positive strong, .is-positive { color: var(--ok-ink-15803d,#15803d) !important; } .financial-bi-trend-summary .is-negative strong, .is-negative { color: var(--ok-ink-b91c1c,#b91c1c) !important; } .financial-bi-alerts { display: grid; gap: .45rem; } .financial-bi-alert { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto 1rem; align-items: center; gap: .48rem; padding: .62rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); color: inherit; text-decoration: none; transition: border-color .16s ease, transform .16s ease, box-shadow .16s ease; } .financial-bi-alert:hover, .financial-bi-alert:focus-visible { transform: translateY(-1px); border-color: var(--ok-line-c9c5e5,#c9c5e5); outline: none; box-shadow: 0 12px 24px -22px var(--ok-shadow-0f172a_a800,rgba(15, 23, 42, .8)); } .financial-bi-alert__icon { display: flex !important; width: 2.2rem; height: 2.2rem; align-items: center; justify-content: center; border-radius: .64rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .financial-bi-alert.is-danger .financial-bi-alert__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .financial-bi-alert.is-warning .financial-bi-alert__icon { background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-b45309,#b45309); } .financial-bi-alert.is-info .financial-bi-alert__icon { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-1d4ed8,#1d4ed8); } .financial-bi-alert__content strong, .financial-bi-alert__content small { display: block; } .financial-bi-alert__content strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; } .financial-bi-alert__content small { margin-top: .1rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .financial-bi-alert__value { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; white-space: nowrap; } .financial-bi-alert__arrow { display: flex; align-items: center; justify-content: center; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .85rem; } .financial-bi-analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; align-items: stretch; } .financial-bi-analytics-grid > .ds-panel, .financial-bi-insight-grid > .ds-panel, .financial-bi-bottom-grid > .ds-panel, .financial-bi-secondary-grid > .ds-panel { height: 100%; } .financial-bi-donut-layout { display: grid; grid-template-columns: minmax(8.5rem, .8fr) minmax(0, 1.35fr); align-items: center; gap: .75rem; } .financial-bi-donut-layout.is-compact { grid-template-columns: 7.5rem minmax(0, 1fr); } .financial-bi-donut { position: relative; display: grid; width: min(10rem, 100%); aspect-ratio: 1; place-items: center; justify-self: center; border-radius: 50%; background: var(--donut-gradient); } .financial-bi-donut::after { content: ""; position: absolute; inset: 22%; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 0 0 1px var(--ok-shadow-edf1f5,#edf1f5); } .financial-bi-donut.is-small { width: 7.4rem; } .financial-bi-donut > div { position: relative; z-index: 1; max-width: 68%; text-align: center; } .financial-bi-donut strong, .financial-bi-donut span { display: block; } .financial-bi-donut strong { color: var(--ok-ink-172033,#172033); font-size: .72rem; font-weight: 950; } .financial-bi-donut span { margin-top: .08rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.3; } .financial-bi-donut-legend { display: grid; gap: .32rem; min-width: 0; } .financial-bi-donut-legend > div { display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; align-items: center; gap: .35rem; min-width: 0; padding: .3rem 0; border-bottom: 1px solid var(--ok-line-f1f5f9,#f1f5f9); } .financial-bi-donut-legend > div:last-child { border-bottom: 0; } .financial-bi-donut-legend i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--segment-color); } .financial-bi-donut-legend strong, .financial-bi-donut-legend small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .financial-bi-donut-legend strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; } .financial-bi-donut-legend small { margin-top: .04rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-donut-legend b { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; white-space: nowrap; } .financial-bi-aging { display: grid; grid-template-columns: repeat(7, minmax(2.8rem, 1fr)); align-items: end; gap: .35rem; min-height: 13.5rem; overflow-x: auto; padding: .3rem 0 .15rem; } .financial-bi-aging__column { display: grid; grid-template-rows: auto 8.5rem auto auto; align-items: end; gap: .2rem; min-width: 3.1rem; text-align: center; } .financial-bi-aging__value { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .financial-bi-aging__track { position: relative; display: flex; height: 8.5rem; align-items: end; justify-content: center; overflow: hidden; border-radius: .45rem .45rem .22rem .22rem; background: var(--ok-surface-f1f5f9,#f1f5f9); } .financial-bi-aging__track i { display: block; width: 68%; height: var(--height); min-height: .25rem; border-radius: .38rem .38rem .15rem .15rem; background: var(--ok-surface-2563eb,#2563eb); } .financial-bi-aging__column.is-warning .financial-bi-aging__track i { background: var(--ok-surface-f59e0b,#f59e0b); } .financial-bi-aging__column.is-danger .financial-bi-aging__track i { background: var(--ok-surface-ef4444,#ef4444); } .financial-bi-aging__column.is-critical .financial-bi-aging__track i { background: var(--ok-surface-9f1239,#9f1239); } .financial-bi-aging__column strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; line-height: 1.2; } .financial-bi-aging__column small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-cash-bars { display: grid; gap: .62rem; } .financial-bi-cash-bars > div { display: grid; gap: .24rem; } .financial-bi-cash-bars span { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .financial-bi-cash-bars strong, .financial-bi-cash-bars small { font-size: .65rem; } .financial-bi-cash-bars strong { color: var(--ok-ink-334155,#334155); } .financial-bi-cash-bars small { color: var(--ok-ink-64748b,#64748b); font-weight: 800; } .financial-bi-cash-bars > div > i { height: .66rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-eef2f7,#eef2f7); } .financial-bi-cash-bars b { display: block; width: var(--width); height: 100%; min-width: .18rem; border-radius: inherit; } .financial-bi-cash-bars b.is-projected-income { background: var(--ok-surface-93c5fd,#93c5fd); } .financial-bi-cash-bars b.is-realized-income { background: var(--ok-surface-2563eb,#2563eb); } .financial-bi-cash-bars b.is-projected-expense { background: var(--ok-surface-fda4af,#fda4af); } .financial-bi-cash-bars b.is-realized-expense { background: var(--ok-surface-e11d48,#e11d48); } .financial-bi-dual-result { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin-top: .8rem; padding-top: .7rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .financial-bi-dual-result > div { padding: .58rem; border-radius: .65rem; background: var(--ok-surface-f8fafc,#f8fafc); } .financial-bi-dual-result small, .financial-bi-dual-result strong { display: block; } .financial-bi-dual-result small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; text-transform: uppercase; } .financial-bi-dual-result strong { margin-top: .1rem; color: var(--ok-ink-172033,#172033); font-size: .66rem; font-weight: 900; } .financial-bi-secondary-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: .75rem; } .financial-bi-dre { display: grid; gap: .48rem; } .financial-bi-dre__row { display: grid; grid-template-columns: minmax(8rem, .9fr) minmax(7rem, 1fr) 7rem; align-items: center; gap: .55rem; min-width: 0; padding: .42rem .5rem; border-radius: .58rem; } .financial-bi-dre__row.is-subtotal, .financial-bi-dre__row.is-result { background: var(--ok-surface-f8fafc,#f8fafc); font-weight: 900; } .financial-bi-dre__row.is-result { border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); } .financial-bi-dre__row > span { color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 800; } .financial-bi-dre__row > i { height: .48rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-eef2f7,#eef2f7); } .financial-bi-dre__row > i b { display: block; width: var(--width); height: 100%; min-width: .15rem; border-radius: inherit; background: var(--ok-surface-4f4c8f,#4f4c8f); } .financial-bi-dre__row.is-deduction > i b, .financial-bi-dre__row.is-expense > i b { background: var(--ok-surface-e11d48,#e11d48); } .financial-bi-dre__row.is-subtotal > i b { background: var(--ok-surface-2563eb,#2563eb); } .financial-bi-dre__row.is-result > i b { background: var(--ok-surface-16a34a,#16a34a); } .financial-bi-dre__row.is-result:has(strong.is-negative) > i b { background: var(--ok-surface-b91c1c,#b91c1c); } .financial-bi-dre__row > strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; text-align: right; white-space: nowrap; } .financial-bi-margin { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-top: .65rem; padding: .62rem .72rem; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .68rem; background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .financial-bi-margin.is-negative { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fef2f2,#fef2f2); } .financial-bi-margin span { font-size: .65rem; font-weight: 850; } .financial-bi-margin strong { font-size: .72rem; font-weight: 950; } .financial-bi-ranking { display: grid; gap: .34rem; } .financial-bi-ranking__row { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .48rem; min-width: 0; padding: .46rem; border: 1px solid transparent; border-radius: .62rem; color: inherit; text-decoration: none; } .financial-bi-ranking__row:hover { border-color: var(--ok-line-dbe2ea,#dbe2ea); background: var(--ok-surface-faf9fe,#faf9fe); } .financial-bi-ranking__position { display: flex; width: 1.8rem; height: 1.8rem; align-items: center; justify-content: center; border-radius: .52rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 950; } .financial-bi-ranking__content { display: grid; gap: .18rem; min-width: 0; } .financial-bi-ranking__content strong, .financial-bi-ranking__content small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .financial-bi-ranking__content strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .financial-bi-ranking__content small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-ranking__content i { height: .35rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-eef2f7,#eef2f7); } .financial-bi-ranking__content i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); } .financial-bi-ranking__row > b { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; white-space: nowrap; } .financial-bi-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; } .financial-bi-category-grid > section { min-width: 0; padding: .72rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .8rem; background: var(--ok-surface-ffffff,#fff); } .financial-bi-category-grid header { display: flex; align-items: center; gap: .5rem; margin-bottom: .65rem; } .financial-bi-category-grid header > .material-symbols-rounded { display: flex; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; border-radius: .62rem; background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-15803d,#15803d); font-size: .98rem; } .financial-bi-category-grid > section:last-child header > .material-symbols-rounded { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .financial-bi-category-grid h3, .financial-bi-category-grid p { margin: 0; } .financial-bi-category-grid h3 { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; } .financial-bi-category-grid p { margin-top: .08rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-category-bars { display: grid; gap: .52rem; } .financial-bi-category-bars > div { display: grid; gap: .2rem; } .financial-bi-category-bars span { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .financial-bi-category-bars strong, .financial-bi-category-bars small { font-size: .65rem; } .financial-bi-category-bars strong { overflow: hidden; color: var(--ok-ink-475569,#475569); text-overflow: ellipsis; white-space: nowrap; } .financial-bi-category-bars small { color: var(--ok-ink-64748b,#64748b); font-weight: 850; white-space: nowrap; } .financial-bi-category-bars > div > i { height: .5rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-eef2f7,#eef2f7); } .financial-bi-category-bars > div > i b { display: block; width: var(--width); height: 100%; border-radius: inherit; } .financial-bi-category-bars b.is-income { background: linear-gradient(90deg, var(--ok-surface-16a34a,#16a34a), var(--ok-surface-22c55e,#22c55e)); } .financial-bi-category-bars b.is-expense { background: linear-gradient(90deg, var(--ok-surface-e11d48,#e11d48), var(--ok-surface-fb7185,#fb7185)); } .financial-bi-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; } .financial-bi-recurring-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .42rem; margin-bottom: .6rem; } .financial-bi-recurring-summary > div { padding: .55rem; border-radius: .62rem; background: var(--ok-surface-f8fafc,#f8fafc); } .financial-bi-recurring-summary small, .financial-bi-recurring-summary strong { display: block; } .financial-bi-recurring-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-transform: uppercase; } .financial-bi-recurring-summary strong { margin-top: .08rem; color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; } .financial-bi-cycle-list, .financial-bi-quality-list { display: grid; gap: .3rem; } .financial-bi-cycle-list > div, .financial-bi-quality-list > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .42rem .5rem; border-bottom: 1px solid var(--ok-line-f1f5f9,#f1f5f9); } .financial-bi-cycle-list > div:last-child, .financial-bi-quality-list > div:last-child { border-bottom: 0; } .financial-bi-cycle-list strong, .financial-bi-cycle-list small { display: block; } .financial-bi-cycle-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .financial-bi-cycle-list small { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-cycle-list b, .financial-bi-quality-list strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; white-space: nowrap; } .financial-bi-quality-list span { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-radial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-bottom: .55rem; } .financial-bi-radial { position: relative; display: grid; width: 6.4rem; max-width: 100%; aspect-ratio: 1; place-items: center; justify-self: center; border-radius: 50%; background: conic-gradient(var(--ring-color) 0 var(--progress), var(--ok-surface-e9eef4,#e9eef4) var(--progress) 360deg); } .financial-bi-radial::after { content: ""; position: absolute; inset: 18%; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); } .financial-bi-radial > div { position: relative; z-index: 1; text-align: center; } .financial-bi-radial strong, .financial-bi-radial span { display: block; } .financial-bi-radial strong { color: var(--ok-ink-172033,#172033); font-size: .78rem; font-weight: 950; } .financial-bi-radial span { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; } .financial-bi-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .financial-bi-bank-list, .financial-bi-overdue-list { display: grid; gap: .38rem; } .financial-bi-bank-list > div { display: grid; grid-template-columns: minmax(7rem, 1fr) minmax(5rem, 1fr) auto; align-items: center; gap: .55rem; padding: .45rem .5rem; border-radius: .62rem; background: var(--ok-surface-f8fafc,#f8fafc); } .financial-bi-bank-list span strong, .financial-bi-bank-list span small { display: block; } .financial-bi-bank-list span strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .financial-bi-bank-list span small { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-bank-list i { height: .42rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-e9eef4,#e9eef4); } .financial-bi-bank-list i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--ok-surface-4f4c8f,#4f4c8f); } .financial-bi-bank-list > div.is-negative i b { background: var(--ok-surface-b91c1c,#b91c1c); } .financial-bi-bank-list > div > strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; white-space: nowrap; } .financial-bi-overdue-list > a, .financial-bi-overdue-list > div { display: grid; grid-template-columns: 2.1rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .65rem; color: inherit; text-decoration: none; } .financial-bi-overdue-list > a:hover { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fff8f8,#fff8f8); } .financial-bi-overdue-list__icon { display: flex !important; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border-radius: .6rem; background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); font-size: .95rem; line-height: 1; } .financial-bi-overdue-list span strong, .financial-bi-overdue-list span small { display: block; } .financial-bi-overdue-list span strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .financial-bi-overdue-list span small { margin-top: .08rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .financial-bi-overdue-list b { color: var(--ok-ink-b91c1c,#b91c1c); font-size: .65rem; font-weight: 900; white-space: nowrap; } .financial-bi-muted { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.45; } @media (max-width: 1350px) { .financial-bi-period { grid-template-columns: minmax(14rem, 1fr) auto auto; } .financial-bi-updated { grid-column: 1 / -1; justify-self: end; } .financial-bi-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .financial-bi-context-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .financial-bi-context-item:nth-child(3) { border-right: 0; } .financial-bi-context-item:nth-child(-n+3) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } } @media (max-width: 1100px) { .financial-bi-period { grid-template-columns: 1fr auto; } .financial-bi-presets { justify-self: end; } .financial-bi-dates { grid-column: 1 / -1; } .financial-bi-updated { grid-column: auto; align-self: end; } .financial-bi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-primary-grid, .financial-bi-secondary-grid { grid-template-columns: 1fr; } .financial-bi-analytics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-analytics-grid > .ds-panel:last-child { grid-column: 1 / -1; } .financial-bi-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-insight-grid > .ds-panel:last-child { grid-column: 1 / -1; } } @media (max-width: 780px) { .financial-bi-period { grid-template-columns: 1fr; } .financial-bi-presets { justify-self: stretch; } .financial-bi-presets button { flex: 1 1 auto; } .financial-bi-dates { grid-column: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-dates input { width: 100%; min-height: 2.75rem; font-size: .72rem; } .financial-bi-updated { justify-self: start; } .financial-bi-kpis, .financial-bi-analytics-grid, .financial-bi-category-grid, .financial-bi-insight-grid, .financial-bi-bottom-grid { grid-template-columns: 1fr; } .financial-bi-analytics-grid > .ds-panel:last-child, .financial-bi-insight-grid > .ds-panel:last-child { grid-column: auto; } .financial-bi-context-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-context-item:nth-child(3) { border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .financial-bi-context-item:nth-child(even) { border-right: 0; } .financial-bi-context-item:nth-child(-n+4) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .financial-bi-trend-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-donut-layout, .financial-bi-donut-layout.is-compact { grid-template-columns: 1fr; } .financial-bi-dre__row { grid-template-columns: minmax(7rem, 1fr) auto; } .financial-bi-dre__row > i { grid-column: 1 / -1; grid-row: 2; } .financial-bi-dre__row > strong { grid-column: 2; grid-row: 1; } } @media (max-width: 520px) { .financial-bi-page { gap: .7rem; } .financial-bi-period { padding: .72rem; } .financial-bi-period__intro { align-items: flex-start; } .financial-bi-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .financial-bi-presets button:last-child { grid-column: 1 / -1; } .financial-bi-dates { grid-template-columns: 1fr; } .financial-bi-kpis { grid-template-columns: 1fr; } .financial-bi-kpi { min-height: 4.7rem; padding: .82rem; } .financial-bi-kpi__label { font-size: .65rem; } .financial-bi-kpi__content > strong { font-size: 1.1rem; } .financial-bi-kpi__change { font-size: .65rem; } .financial-bi-context-strip { grid-template-columns: 1fr; } .financial-bi-context-item, .financial-bi-context-item:nth-child(3), .financial-bi-context-item:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .financial-bi-context-item:last-child { border-bottom: 0; } .financial-bi-line-chart { min-height: 14rem; } .financial-bi-trend-summary, .financial-bi-dual-result, .financial-bi-recurring-summary, .financial-bi-radial-grid { grid-template-columns: 1fr; } .financial-bi-alert { grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; } .financial-bi-alert__value { grid-column: 2; justify-self: start; } .financial-bi-alert__arrow { grid-column: 3; grid-row: 1 / span 2; } .financial-bi-aging { grid-template-columns: repeat(7, 3.6rem); } .financial-bi-bank-list > div { grid-template-columns: minmax(0, 1fr) auto; } .financial-bi-bank-list i { grid-column: 1 / -1; grid-row: 2; } .financial-bi-bank-list > div > strong { grid-column: 2; grid-row: 1; } .financial-bi-overdue-list > a, .financial-bi-overdue-list > div { grid-template-columns: 2.15rem minmax(0, 1fr); } .financial-bi-overdue-list b { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .financial-bi-alert { transition: none; } .financial-bi-alert:hover { transform: none; } } /* Reports — Support & Customer Service BI 1.2.0 */ .support-bi-page { --support-bi-brand: var(--ok-ink-4f4c8f,#4f4c8f); --support-bi-blue: var(--ok-ink-2563eb,#2563eb); --support-bi-green: var(--ok-ink-15803d,#15803d); --support-bi-amber: var(--ok-ink-d97706,#d97706); --support-bi-red: var(--ok-ink-b91c1c,#b91c1c); --support-bi-border: var(--ok-line-e2e8f0,#e2e8f0); --support-bi-muted: var(--ok-ink-64748b,#64748b); display: grid; gap: .9rem; min-width: 0; } .support-bi-page .ds-panel { min-width: 0; } .support-bi-period { display: grid; grid-template-columns: minmax(14rem, 1fr) auto auto auto; align-items: end; gap: .8rem; padding: .82rem .9rem; border: 1px solid var(--ok-line-e2e8f0,var(--support-bi-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 38px -34px var(--ok-shadow-0f172a_a520,rgba(15, 23, 42, .52)); } .support-bi-period__intro { display: flex; align-items: center; gap: .65rem; min-width: 0; } .support-bi-period__icon { display: flex !important; width: 2.5rem; height: 2.5rem; flex: 0 0 2.5rem; align-items: center; justify-content: center; border-radius: .75rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,var(--support-bi-brand)); font-size: 1.18rem; line-height: 1; } .support-bi-period__intro h2 { color: var(--ok-ink-172033,#172033); font-size: .72rem; font-weight: 900; } .support-bi-period__intro p { margin-top: .12rem; color: var(--ok-ink-64748b,var(--support-bi-muted)); font-size: .65rem; line-height: 1.45; } .support-bi-presets { display: flex; align-items: center; gap: .3rem; padding: .25rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); } .support-bi-presets button { min-height: 2rem; padding: .35rem .58rem; border-radius: .52rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; white-space: nowrap; cursor: pointer; } .support-bi-presets button:hover { color: var(--ok-ink-4f4c8f,var(--support-bi-brand)); background: var(--ok-surface-ffffff,#fff); } .support-bi-presets button.is-active { color: var(--ok-ink-ffffff,#fff); background: var(--ok-surface-4f4c8f,var(--support-bi-brand)); box-shadow: 0 8px 18px -12px var(--ok-shadow-4f4c8f_a700,rgba(79, 76, 143, .7)); } .support-bi-dates { display: flex; align-items: center; gap: .45rem; } .support-bi-dates label { display: grid; gap: .18rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-transform: uppercase; letter-spacing: .035em; } .support-bi-dates input { width: 8.2rem; min-height: 2.35rem; padding: .45rem .6rem; border: 1px solid var(--ok-line-dce3eb,#dce3eb); border-radius: .62rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-253047,#253047); font-size: .65rem; font-weight: 700; } .support-bi-dates input:focus { outline: 3px solid var(--ok-line-4f4c8f_a140,rgba(79, 76, 143, .14)); border-color: var(--ok-line-8983bd,#8983bd); } .support-bi-updated { display: flex; align-items: center; gap: .3rem; justify-self: end; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; white-space: nowrap; } .support-bi-updated .material-symbols-rounded { display: flex !important; align-items: center; justify-content: center; color: var(--ok-ink-4f4c8f,var(--support-bi-brand)); font-size: .82rem; line-height: 1; } .support-bi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .68rem; } .support-bi-kpi { display: grid; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 5.1rem; padding: .78rem; border: 1px solid var(--ok-line-e2e8f0,var(--support-bi-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 14px 34px -31px var(--ok-shadow-0f172a_a500,rgba(15, 23, 42, .5)); } .support-bi-kpi__icon { display: flex !important; width: 2.45rem; height: 2.45rem; align-items: center; justify-content: center; border-radius: .72rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,var(--support-bi-brand)); font-size: 1.14rem; line-height: 1; } .support-bi-kpi.is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: linear-gradient(135deg, var(--ok-surface-ffffff,#fff) 55%, var(--ok-surface-fff7f7,#fff7f7)); } .support-bi-kpi.is-danger .support-bi-kpi__icon { color: var(--ok-ink-b91c1c,var(--support-bi-red)); background: var(--ok-surface-fef2f2,#fef2f2); } .support-bi-kpi.is-warning { border-color: var(--ok-line-fde68a,#fde68a); background: linear-gradient(135deg, var(--ok-surface-ffffff,#fff) 55%, var(--ok-surface-fffbeb,#fffbeb)); } .support-bi-kpi.is-warning .support-bi-kpi__icon { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fffbeb,#fffbeb); } .support-bi-kpi__content { min-width: 0; } .support-bi-kpi__label { display: block; overflow: hidden; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; } .support-bi-kpi__content > strong { display: block; margin-top: .13rem; color: var(--ok-ink-111827,#111827); font-size: 1.12rem; line-height: 1.05; font-weight: 950; letter-spacing: -.025em; } .support-bi-kpi__change { display: flex; align-items: center; gap: .16rem; margin-top: .28rem; overflow: hidden; font-size: .65rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; } .support-bi-kpi__change .material-symbols-rounded { display: flex !important; align-items: center; justify-content: center; font-size: .67rem; line-height: 1; } .support-bi-kpi__change.is-positive { color: var(--ok-ink-15803d,#15803d); } .support-bi-kpi__change.is-negative { color: var(--ok-ink-b91c1c,#b91c1c); } .support-bi-kpi__change.is-neutral { color: var(--ok-ink-64748b,#64748b); } .support-bi-context-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); overflow: hidden; border: 1px solid var(--ok-line-e2e8f0,var(--support-bi-border)); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); } .support-bi-context-item { display: grid; grid-template-columns: 1.9rem minmax(0, 1fr); align-items: center; gap: .48rem; min-width: 0; padding: .66rem .72rem; border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-context-item:last-child { border-right: 0; } .support-bi-context-item > .material-symbols-rounded { display: flex !important; width: 1.9rem; height: 1.9rem; align-items: center; justify-content: center; border-radius: .58rem; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-4f4c8f,var(--support-bi-brand)); font-size: .93rem; line-height: 1; } .support-bi-context-item small, .support-bi-context-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-bi-context-item small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .support-bi-context-item strong { margin-top: .06rem; color: var(--ok-ink-1f2937,#1f2937); font-size: .66rem; font-weight: 950; } .support-bi-primary-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(18rem, .75fr); gap: .85rem; align-items: stretch; } .support-bi-analytics-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; align-items: stretch; } .support-bi-secondary-grid, .support-bi-experience-grid, .support-bi-bottom-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: stretch; } .support-bi-insight-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; align-items: stretch; } .support-bi-legend { display: flex; align-items: center; flex-wrap: wrap; gap: .48rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .support-bi-legend span { display: inline-flex; align-items: center; gap: .23rem; white-space: nowrap; } .support-bi-legend i { width: .72rem; height: .18rem; border-radius: 999px; } .support-bi-legend i.is-opened { background: var(--ok-surface-2563eb,#2563eb); } .support-bi-legend i.is-resolved { background: var(--ok-surface-16a34a,#16a34a); } .support-bi-legend i.is-backlog { background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-bi-line-chart { min-height: 15rem; overflow-x: auto; } .support-bi-line-chart svg { width: 100%; min-width: 36rem; height: auto; } .support-bi-chart-grid { stroke: var(--ok-ink-e8edf3,#e8edf3); stroke-width: 1; stroke-dasharray: 4 5; } .support-bi-chart-y-label, .support-bi-chart-x-label { fill: var(--ok-ink-64748b,#64748b); font-family: inherit; font-size: 12px; font-weight: 700; } .support-bi-chart-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; } .support-bi-chart-line.is-opened { stroke: var(--ok-ink-2563eb,#2563eb); } .support-bi-chart-line.is-resolved { stroke: var(--ok-ink-16a34a,#16a34a); } .support-bi-chart-line.is-backlog { stroke: var(--ok-ink-4f4c8f,#4f4c8f); } .support-bi-chart-area { opacity: .85; } .support-bi-trend-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .42rem; padding-top: .55rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-trend-summary > div { padding: .48rem .55rem; border-radius: .65rem; background: var(--ok-surface-f8fafc,#f8fafc); } .support-bi-trend-summary small, .support-bi-trend-summary strong { display: block; } .support-bi-trend-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .support-bi-trend-summary strong { margin-top: .08rem; color: var(--ok-ink-1f2937,#1f2937); font-size: .68rem; font-weight: 950; } .support-bi-trend-summary .is-positive strong { color: var(--ok-ink-15803d,#15803d); } .support-bi-trend-summary .is-warning strong { color: var(--ok-ink-b45309,#b45309); } .support-bi-alerts { display: grid; gap: .48rem; } .support-bi-alert { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr) auto 1rem; align-items: center; gap: .55rem; padding: .58rem; border: 1px solid var(--ok-line-e6ebf1,#e6ebf1); border-radius: .75rem; color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .support-bi-alert:hover { transform: translateY(-1px); border-color: var(--ok-line-cfcbe7,#cfcbe7); background: var(--ok-surface-fbfaff,#fbfaff); } .support-bi-alert__icon { display: flex !important; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border-radius: .65rem; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-4f4c8f,var(--support-bi-brand)); font-size: 1rem; line-height: 1; } .support-bi-alert__content { min-width: 0; } .support-bi-alert__content strong, .support-bi-alert__content small { display: block; } .support-bi-alert__content strong { color: var(--ok-ink-253047,#253047); font-size: .65rem; font-weight: 900; } .support-bi-alert__content small { margin-top: .08rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.42; } .support-bi-alert__value { min-width: 1.7rem; padding: .22rem .38rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 950; text-align: center; } .support-bi-alert__arrow { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .82rem; } .support-bi-alert.is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fffafa,#fffafa); } .support-bi-alert.is-danger .support-bi-alert__icon, .support-bi-alert.is-danger .support-bi-alert__value { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .support-bi-alert.is-warning { border-color: var(--ok-line-fde7b0,#fde7b0); background: var(--ok-surface-fffdf7,#fffdf7); } .support-bi-alert.is-warning .support-bi-alert__icon, .support-bi-alert.is-warning .support-bi-alert__value { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7ed,#fff7ed); } .support-bi-alert.is-info .support-bi-alert__icon, .support-bi-alert.is-info .support-bi-alert__value { color: var(--ok-ink-1d4ed8,#1d4ed8); background: var(--ok-surface-eff6ff,#eff6ff); } .support-bi-donut-layout { display: grid; grid-template-columns: minmax(7.5rem, .8fr) minmax(0, 1.25fr); align-items: center; gap: .8rem; } .support-bi-donut-layout.is-compact { grid-template-columns: minmax(6rem, .7fr) minmax(0, 1.3fr); } .support-bi-donut { position: relative; display: grid; width: min(100%, 9.4rem); aspect-ratio: 1; place-items: center; justify-self: center; border-radius: 50%; background: var(--donut-gradient); } .support-bi-donut::after { position: absolute; inset: 20%; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); content: ''; box-shadow: inset 0 0 0 1px var(--ok-shadow-edf1f5,#edf1f5); } .support-bi-donut.is-small { width: min(100%, 7.4rem); } .support-bi-donut > div { position: relative; z-index: 1; text-align: center; } .support-bi-donut strong, .support-bi-donut span { display: block; } .support-bi-donut strong { color: var(--ok-ink-172033,#172033); font-size: 1rem; font-weight: 950; } .support-bi-donut span { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; } .support-bi-donut-legend { display: grid; gap: .38rem; min-width: 0; } .support-bi-donut-legend > div { display: grid; grid-template-columns: .55rem minmax(0, 1fr) auto; align-items: center; gap: .42rem; min-width: 0; } .support-bi-donut-legend > div > i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--segment-color); } .support-bi-donut-legend span { min-width: 0; } .support-bi-donut-legend strong, .support-bi-donut-legend small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-bi-donut-legend strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .support-bi-donut-legend small { margin-top: .03rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-donut-legend b { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; } .support-bi-radial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; margin-bottom: .65rem; } .support-bi-radial { position: relative; display: grid; width: min(100%, 7.4rem); aspect-ratio: 1; place-items: center; justify-self: center; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--progress), var(--ok-surface-e8edf3,#e8edf3) 0); } .support-bi-radial::after { position: absolute; inset: 17%; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); content: ''; } .support-bi-radial > div { position: relative; z-index: 1; text-align: center; } .support-bi-radial strong, .support-bi-radial span { display: block; } .support-bi-radial strong { color: var(--ok-ink-172033,#172033); font-size: .9rem; font-weight: 950; } .support-bi-radial span { margin-top: .04rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .support-bi-quality-list { display: grid; gap: 0; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-quality-list > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .38rem 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-quality-list > div:last-child { border-bottom: 0; } .support-bi-quality-list span { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-quality-list strong { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 900; } .support-bi-priority-list { display: grid; gap: .62rem; } .support-bi-priority-list > div { display: grid; grid-template-columns: minmax(6rem, .75fr) minmax(5rem, 1.3fr) auto; align-items: center; gap: .55rem; } .support-bi-priority-list > div > span { display: flex; align-items: center; gap: .35rem; min-width: 0; } .support-bi-priority-list > div > span > i { width: .55rem; height: .55rem; flex: 0 0 .55rem; border-radius: 50%; background: var(--priority-color); } .support-bi-priority-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .support-bi-priority-list small { margin-left: auto; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-priority-list > div > b { height: .48rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f5,#edf1f5); } .support-bi-priority-list > div > b > i { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--priority-color); } .support-bi-priority-list em { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-style: normal; font-weight: 950; } .support-bi-aging { display: grid; grid-template-columns: repeat(6, minmax(3.6rem, 1fr)); gap: .45rem; min-height: 13rem; align-items: end; overflow-x: auto; padding-bottom: .2rem; } .support-bi-aging__column { display: grid; grid-template-rows: auto minmax(6.5rem, 1fr) auto; gap: .3rem; min-width: 3.6rem; text-align: center; } .support-bi-aging__value { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 950; } .support-bi-aging__track { display: flex; min-height: 6.5rem; align-items: end; justify-content: center; overflow: hidden; border-radius: .5rem .5rem .25rem .25rem; background: linear-gradient(to top, var(--ok-surface-f1f5f9,#f1f5f9), var(--ok-surface-fafcff,#fafcff)); } .support-bi-aging__track i { display: block; width: 58%; height: var(--height); min-height: .22rem; border-radius: .42rem .42rem .15rem .15rem; background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-bi-aging__column.is-good i { background: var(--ok-surface-16a34a,#16a34a); } .support-bi-aging__column.is-info i { background: var(--ok-surface-2563eb,#2563eb); } .support-bi-aging__column.is-warning i { background: var(--ok-surface-d97706,#d97706); } .support-bi-aging__column.is-danger i { background: var(--ok-surface-dc2626,#dc2626); } .support-bi-aging__column.is-critical i { background: var(--ok-surface-881337,#881337); } .support-bi-aging__column strong { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.25; } .support-bi-response-bands { display: grid; gap: .47rem; } .support-bi-response-bands > div { display: grid; grid-template-columns: minmax(6.5rem, .8fr) minmax(6rem, 1.3fr) 2rem; align-items: center; gap: .5rem; } .support-bi-response-bands span { display: flex; align-items: center; justify-content: space-between; gap: .35rem; } .support-bi-response-bands strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .support-bi-response-bands small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-response-bands > div > i { height: .48rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f5,#edf1f5); } .support-bi-response-bands > div > i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--ok-surface-2563eb,#2563eb); } .support-bi-response-bands .is-excellent > i b { background: var(--ok-surface-15803d,#15803d); } .support-bi-response-bands .is-good > i b { background: var(--ok-surface-16a34a,#16a34a); } .support-bi-response-bands .is-info > i b { background: var(--ok-surface-2563eb,#2563eb); } .support-bi-response-bands .is-warning > i b { background: var(--ok-surface-d97706,#d97706); } .support-bi-response-bands .is-danger > i b { background: var(--ok-surface-dc2626,#dc2626); } .support-bi-response-bands .is-critical > i b { background: var(--ok-surface-881337,#881337); } .support-bi-response-bands .is-neutral > i b { background: var(--ok-surface-94a3b8,#94a3b8); } .support-bi-response-bands em { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-style: normal; font-weight: 900; text-align: right; } .support-bi-queue-list { display: grid; gap: .52rem; } .support-bi-queue-row { display: grid; grid-template-columns: minmax(10rem, .72fr) minmax(16rem, 1.4fr); align-items: center; gap: .75rem; padding: .58rem .62rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); } .support-bi-queue-row__name strong, .support-bi-queue-row__name small { display: block; } .support-bi-queue-row__name strong { color: var(--ok-ink-253047,#253047); font-size: .65rem; font-weight: 900; } .support-bi-queue-row__name small { margin-top: .09rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.4; } .support-bi-queue-row__bars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .38rem; } .support-bi-queue-row__bars span { display: grid; grid-template-columns: minmax(0, 1fr) 1.4rem; align-items: center; gap: .28rem; } .support-bi-queue-row__bars span > i { display: block; width: var(--width); min-width: 2px; height: .52rem; border-radius: 999px; } .support-bi-queue-row__bars .is-opened { background: var(--ok-surface-2563eb,#2563eb); } .support-bi-queue-row__bars .is-resolved { background: var(--ok-surface-16a34a,#16a34a); } .support-bi-queue-row__bars .is-backlog { background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-bi-queue-row__bars b { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; text-align: right; } .support-bi-table-wrap { overflow-x: auto; } .support-bi-table { width: 100%; min-width: 52rem; border-collapse: separate; border-spacing: 0; } .support-bi-table th { padding: .5rem .55rem; border-bottom: 1px solid var(--ok-line-dfe6ee,#dfe6ee); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 900; text-align: left; text-transform: uppercase; letter-spacing: .035em; } .support-bi-table td { padding: .55rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 700; } .support-bi-table tbody tr:last-child td { border-bottom: 0; } .support-bi-table tbody tr:hover td { background: var(--ok-surface-fafbfe,#fafbfe); } .support-bi-table td:first-child { display: flex; align-items: center; gap: .42rem; min-width: 10rem; } .support-bi-avatar { display: flex; width: 1.85rem; height: 1.85rem; flex: 0 0 1.85rem; align-items: center; justify-content: center; border-radius: .58rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 950; } .support-bi-pill { display: inline-flex; min-width: 2.8rem; justify-content: center; padding: .23rem .4rem; border-radius: 999px; font-size: .65rem; font-weight: 900; } .support-bi-pill.is-success { color: var(--ok-ink-166534,#166534); background: var(--ok-surface-ecfdf3,#ecfdf3); } .support-bi-pill.is-warning { color: var(--ok-ink-9a3412,#9a3412); background: var(--ok-surface-fff7ed,#fff7ed); } .support-bi-rating { display: inline-flex; align-items: center; gap: .18rem; } .support-bi-rating .material-symbols-rounded { display: flex !important; align-items: center; justify-content: center; color: var(--ok-ink-d97706,#d97706); font-size: .73rem; line-height: 1; } .support-bi-ranking { display: grid; gap: .42rem; } .support-bi-ranking__row { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .42rem 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-ranking__row:last-child { border-bottom: 0; } .support-bi-ranking__position { display: flex; width: 1.45rem; height: 1.45rem; align-items: center; justify-content: center; border-radius: .45rem; background: var(--ok-surface-f4f3fb,#f4f3fb); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 950; } .support-bi-ranking__content { display: grid; grid-template-columns: minmax(5rem, 1fr) minmax(4rem, .8fr); align-items: center; gap: .35rem; min-width: 0; } .support-bi-ranking__content strong { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .support-bi-ranking__content i { height: .42rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f5,#edf1f5); } .support-bi-ranking__content i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-bi-ranking__content small { grid-column: 1 / -1; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-ranking__row > b { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 950; } .support-bi-message-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .38rem; margin-bottom: .58rem; } .support-bi-message-summary > div { padding: .47rem; border: 1px solid var(--ok-line-e8edf3,#e8edf3); border-radius: .62rem; background: var(--ok-surface-f8fafc,#f8fafc); } .support-bi-message-summary small, .support-bi-message-summary strong { display: block; } .support-bi-message-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .support-bi-message-summary strong { margin-top: .07rem; color: var(--ok-ink-172033,#172033); font-size: .68rem; font-weight: 950; } .support-bi-message-bars { display: grid; gap: .42rem; } .support-bi-message-bars > div { display: grid; grid-template-columns: minmax(7rem, .85fr) minmax(5rem, 1.15fr); align-items: center; gap: .5rem; } .support-bi-message-bars span { display: flex; align-items: center; justify-content: space-between; gap: .35rem; } .support-bi-message-bars strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; } .support-bi-message-bars small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-message-bars i { height: .45rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f5,#edf1f5); } .support-bi-message-bars i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-bi-message-bars .is-public i b { background: var(--ok-surface-2563eb,#2563eb); } .support-bi-message-bars .is-internal i b { background: var(--ok-surface-7c3aed,#7c3aed); } .support-bi-message-bars .is-staff i b { background: var(--ok-surface-4f4c8f,#4f4c8f); } .support-bi-message-bars .is-customer i b { background: var(--ok-surface-0f766e,#0f766e); } .support-bi-satisfaction-summary { display: grid; grid-template-columns: 1.05fr 1fr 1fr; gap: .5rem; margin-bottom: .65rem; } .support-bi-satisfaction-summary > div { padding: .55rem; border: 1px solid var(--ok-line-e8edf3,#e8edf3); border-radius: .7rem; background: var(--ok-surface-fafbfe,#fafbfe); } .support-bi-satisfaction-summary small, .support-bi-satisfaction-summary strong, .support-bi-satisfaction-summary span { display: block; } .support-bi-satisfaction-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .support-bi-satisfaction-summary strong { margin-top: .06rem; color: var(--ok-ink-172033,#172033); font-size: .76rem; font-weight: 950; } .support-bi-satisfaction-summary span { margin-top: .06rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-score { display: grid !important; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: .22rem; background: var(--ok-surface-fffbeb,#fffbeb) !important; } .support-bi-score > .material-symbols-rounded { display: flex !important; grid-row: 1 / span 2; align-items: center; justify-content: center; color: var(--ok-ink-d97706,#d97706); font-size: 1.2rem; line-height: 1; } .support-bi-score strong { font-size: 1rem; } .support-bi-score small { grid-column: 2; } .support-bi-rating-bars { display: grid; gap: .34rem; } .support-bi-rating-bars > div { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 1.5rem; align-items: center; gap: .4rem; } .support-bi-rating-bars > div > span { display: flex; align-items: center; gap: .12rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; } .support-bi-rating-bars .material-symbols-rounded { display: flex !important; align-items: center; justify-content: center; color: var(--ok-ink-d97706,#d97706); font-size: .65rem; line-height: 1; } .support-bi-rating-bars i { height: .43rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f5,#edf1f5); } .support-bi-rating-bars i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--ok-surface-d97706,#d97706); } .support-bi-rating-bars strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; text-align: right; } .support-bi-heatmap { display: grid; grid-template-columns: 2.1rem repeat(4, minmax(2.6rem, 1fr)); gap: .3rem; align-items: center; } .support-bi-heatmap > strong { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 850; text-align: center; } .support-bi-heatmap > span { display: flex; min-height: 2rem; align-items: center; justify-content: center; border: 1px solid rgba(79, 76, 143, calc(var(--intensity) / 240)); border-radius: .48rem; background: var(--ok-surface-f4f3fb,#f4f3fb); background: color-mix(in srgb, var(--ok-surface-4f4c8f,#4f4c8f) var(--intensity), var(--ok-surface-f8fafc,#f8fafc)); color: color-mix(in srgb, var(--ok-ink-172033,#172033) calc(100% - var(--intensity)), var(--ok-ink-ffffff,#fff)); cursor: default; } .support-bi-heatmap > span b { font-size: .65rem; font-weight: 950; } .support-bi-heatmap-note { margin-top: .5rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.4; } .support-bi-client-list, .support-bi-critical-list { display: grid; gap: .38rem; } .support-bi-client-list > a { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .42rem .25rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); color: inherit; text-decoration: none; } .support-bi-client-list > a:last-child { border-bottom: 0; } .support-bi-client-list > a:hover { background: var(--ok-surface-fafbfe,#fafbfe); } .support-bi-client-list > a > span:nth-child(2) { display: grid; grid-template-columns: minmax(6rem, 1fr) minmax(4rem, .75fr); align-items: center; gap: .36rem; min-width: 0; } .support-bi-client-list strong { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; } .support-bi-client-list i { height: .42rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-edf1f5,#edf1f5); } .support-bi-client-list i b { display: block; width: var(--width); height: 100%; border-radius: inherit; background: var(--ok-surface-2563eb,#2563eb); } .support-bi-client-list small { grid-column: 1 / -1; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-client-list > a > b { color: var(--ok-ink-172033,#172033); font-size: .65rem; font-weight: 950; } .support-bi-critical-list > a { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr) 1rem; align-items: center; gap: .5rem; padding: .52rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .7rem; color: inherit; text-decoration: none; } .support-bi-critical-list > a:hover { border-color: var(--ok-line-cfcbe7,#cfcbe7); background: var(--ok-surface-fbfaff,#fbfaff); } .support-bi-critical-list__icon { display: flex !important; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; border-radius: .62rem; background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); font-size: .95rem; line-height: 1; } .support-bi-critical-list > a.is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fffafa,#fffafa); } .support-bi-critical-list > a.is-danger .support-bi-critical-list__icon { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .support-bi-critical-list > a.is-warning { border-color: var(--ok-line-fde7b0,#fde7b0); } .support-bi-critical-list span:nth-child(2) { min-width: 0; } .support-bi-critical-list strong, .support-bi-critical-list small, .support-bi-critical-list em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .support-bi-critical-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .support-bi-critical-list small { margin-top: .06rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .support-bi-critical-list em { margin-top: .08rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-style: normal; font-weight: 800; } .support-bi-critical-list > a > .material-symbols-rounded:last-child { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .8rem; } .support-bi-muted { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.5; } @media (max-width: 1260px) { .support-bi-period { grid-template-columns: minmax(14rem, 1fr) auto auto; } .support-bi-updated { grid-column: 1 / -1; justify-self: start; } .support-bi-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } .support-bi-context-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } .support-bi-context-item:nth-child(3n) { border-right: 0; } .support-bi-context-item:nth-child(-n+3) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } } @media (max-width: 1020px) { .support-bi-period { grid-template-columns: 1fr auto; } .support-bi-presets { justify-self: end; } .support-bi-dates { grid-column: 1 / -1; } .support-bi-updated { grid-column: auto; justify-self: end; } .support-bi-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-bi-primary-grid, .support-bi-secondary-grid, .support-bi-experience-grid, .support-bi-bottom-grid { grid-template-columns: 1fr; } .support-bi-analytics-grid, .support-bi-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-bi-analytics-grid > .ds-panel:last-child, .support-bi-insight-grid > .ds-panel:last-child { grid-column: 1 / -1; } .support-bi-queue-row { grid-template-columns: 1fr; } } @media (max-width: 720px) { .support-bi-period { grid-template-columns: 1fr; align-items: stretch; } .support-bi-presets { justify-self: stretch; overflow-x: auto; } .support-bi-presets button { flex: 1 0 auto; } .support-bi-dates { grid-column: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-bi-dates input { width: 100%; min-height: 2.75rem; font-size: .72rem; } .support-bi-updated { justify-self: start; } .support-bi-kpis, .support-bi-analytics-grid, .support-bi-insight-grid { grid-template-columns: 1fr; } .support-bi-analytics-grid > .ds-panel:last-child, .support-bi-insight-grid > .ds-panel:last-child { grid-column: auto; } .support-bi-context-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-bi-context-item:nth-child(3n) { border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-context-item:nth-child(even) { border-right: 0; } .support-bi-context-item:nth-child(-n+4) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-trend-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .support-bi-donut-layout, .support-bi-donut-layout.is-compact { grid-template-columns: 1fr; } .support-bi-priority-list > div, .support-bi-response-bands > div { grid-template-columns: minmax(6rem, 1fr) minmax(5rem, 1fr) 2rem; } .support-bi-queue-row__bars { grid-template-columns: 1fr; } .support-bi-ranking__content, .support-bi-client-list > a > span:nth-child(2) { grid-template-columns: 1fr; } .support-bi-ranking__content small, .support-bi-client-list small { grid-column: auto; } } @media (max-width: 480px) { .support-bi-page { gap: .7rem; } .support-bi-period { padding: .72rem; } .support-bi-presets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .support-bi-presets button:last-child { grid-column: 1 / -1; } .support-bi-dates { grid-template-columns: 1fr; } .support-bi-kpis { grid-template-columns: 1fr; } .support-bi-kpi { min-height: 4.8rem; padding: .82rem; } .support-bi-kpi__label { font-size: .65rem; } .support-bi-kpi__content > strong { font-size: 1.16rem; } .support-bi-kpi__change { font-size: .65rem; } .support-bi-context-strip { grid-template-columns: 1fr; } .support-bi-context-item, .support-bi-context-item:nth-child(3n), .support-bi-context-item:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .support-bi-context-item:last-child { border-bottom: 0; } .support-bi-line-chart { min-height: 14rem; } .support-bi-alert { grid-template-columns: 2.25rem minmax(0, 1fr) 1rem; } .support-bi-alert__value { grid-column: 2; justify-self: start; } .support-bi-alert__arrow { grid-column: 3; grid-row: 1 / span 2; } .support-bi-radial-grid, .support-bi-message-summary, .support-bi-satisfaction-summary { grid-template-columns: 1fr; } .support-bi-aging { grid-template-columns: repeat(6, 3.7rem); } .support-bi-priority-list > div, .support-bi-response-bands > div { grid-template-columns: 1fr auto; } .support-bi-priority-list > div > b, .support-bi-response-bands > div > i { grid-column: 1 / -1; grid-row: 2; } .support-bi-priority-list em, .support-bi-response-bands em { grid-column: 2; grid-row: 1; } .support-bi-heatmap { grid-template-columns: 1.85rem repeat(4, minmax(2.3rem, 1fr)); gap: .23rem; } .support-bi-critical-list > a { grid-template-columns: 2.15rem minmax(0, 1fr); } .support-bi-critical-list > a > .material-symbols-rounded:last-child { display: none; } } @media (prefers-reduced-motion: reduce) { .support-bi-alert { transition: none; } .support-bi-alert:hover { transform: none; } } /* ========================================================================== Reports · Operations BI 1.3.0 ========================================================================== */ .operations-bi-page { display: grid; gap: .88rem; } .operations-bi-page .material-symbols-rounded { display: flex; align-items: center; justify-content: center; line-height: 1; } .operations-bi-period { display: grid; grid-template-columns: minmax(15rem, 1fr) auto auto auto; gap: .72rem; align-items: center; padding: .82rem .9rem; border: 1px solid var(--ok-line-e6eaf0,#e6eaf0); border-radius: 1rem; background: var(--ok-surface-ffffff_a920,rgba(255,255,255,.92)); box-shadow: 0 10px 28px var(--ok-shadow-0f172a_a45,rgba(15,23,42,.045)); } .operations-bi-period__intro { display: flex; align-items: center; gap: .62rem; min-width: 0; } .operations-bi-period__icon { width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; border-radius: .72rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f0effa,#f0effa); font-size: 1.18rem; } .operations-bi-period__intro h2 { margin: 0; color: var(--ok-ink-1e293b,#1e293b); font-size: .73rem; font-weight: 900; } .operations-bi-period__intro p { margin: .12rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.45; } .operations-bi-presets { display: flex; align-items: center; gap: .22rem; padding: .22rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); } .operations-bi-presets button { min-height: 1.95rem; padding: 0 .58rem; border: 0; border-radius: .52rem; color: var(--ok-ink-64748b,#64748b); background: transparent; font-size: .65rem; font-weight: 800; white-space: nowrap; cursor: pointer; } .operations-bi-presets button:hover { color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-ffffff,#fff); } .operations-bi-presets button.is-active { color: var(--ok-ink-ffffff,#fff); background: var(--ok-surface-4f4c8f,#4f4c8f); box-shadow: 0 5px 12px var(--ok-shadow-4f4c8f_a180,rgba(79,76,143,.18)); } .operations-bi-dates { display: flex; gap: .38rem; } .operations-bi-dates label { display: grid; gap: .13rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .operations-bi-dates input { width: 7.6rem; min-height: 2rem; padding: 0 .5rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .55rem; color: var(--ok-ink-334155,#334155); background: var(--ok-surface-ffffff,#fff); font-size: .65rem; font-weight: 700; } .operations-bi-dates input:focus { outline: 2px solid var(--ok-line-2563eb_a180,rgba(37,99,235,.18)); border-color: var(--ok-line-2563eb,#2563eb); } .operations-bi-updated { display: flex; align-items: center; gap: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 700; white-space: nowrap; } .operations-bi-updated .material-symbols-rounded { color: var(--ok-ink-2563eb,#2563eb); font-size: .82rem; } .operations-bi-kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: .65rem; } .operations-bi-kpi { display: grid; grid-template-columns: 2.45rem minmax(0,1fr); gap: .64rem; align-items: center; min-height: 5.25rem; padding: .78rem; border: 1px solid var(--ok-line-e7eaf0,#e7eaf0); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 8px 24px var(--ok-shadow-0f172a_a40,rgba(15,23,42,.04)); } .operations-bi-kpi__icon { width: 2.45rem; height: 2.45rem; border-radius: .74rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f0effa,#f0effa); font-size: 1.16rem; } .operations-bi-kpi__content { min-width: 0; } .operations-bi-kpi__label { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; letter-spacing: .012em; } .operations-bi-kpi__content > strong { display: block; margin-top: .12rem; color: var(--ok-ink-172033,#172033); font-size: 1.12rem; font-weight: 950; line-height: 1.08; } .operations-bi-kpi__content > small { display: block; margin-top: .2rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .operations-bi-kpi.is-positive .operations-bi-kpi__icon { color: var(--ok-ink-15803d,#15803d); background: var(--ok-surface-ecfdf3,#ecfdf3); } .operations-bi-kpi.is-warning { border-color: var(--ok-line-fde4a7,#fde4a7); } .operations-bi-kpi.is-warning .operations-bi-kpi__icon { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7df,#fff7df); } .operations-bi-kpi.is-danger { border-color: var(--ok-line-fecaca,#fecaca); } .operations-bi-kpi.is-danger .operations-bi-kpi__icon { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-context-strip { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border: 1px solid var(--ok-line-e7eaf0,#e7eaf0); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); overflow: hidden; } .operations-bi-context-item { display: flex; align-items: center; gap: .48rem; min-width: 0; padding: .65rem .72rem; border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-context-item:last-child { border-right: 0; } .operations-bi-context-item > .material-symbols-rounded { width: 1.75rem; height: 1.75rem; flex: 0 0 1.75rem; border-radius: .55rem; color: var(--ok-ink-2563eb,#2563eb); background: var(--ok-surface-eff6ff,#eff6ff); font-size: .9rem; } .operations-bi-context-item div { min-width: 0; } .operations-bi-context-item small, .operations-bi-context-item strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operations-bi-context-item small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 700; } .operations-bi-context-item strong { margin-top: .06rem; color: var(--ok-ink-334155,#334155); font-size: .66rem; font-weight: 900; } .operations-bi-context-item.is-warning > .material-symbols-rounded { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7df,#fff7df); } .operations-bi-context-item.is-danger > .material-symbols-rounded { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-primary-grid { display: grid; grid-template-columns: minmax(0,1.75fr) minmax(18rem,.85fr); gap: .75rem; } .operations-bi-line-chart { min-height: 16rem; overflow-x: auto; } .operations-bi-line-chart svg { display: block; width: 100%; min-width: 38rem; height: auto; } .operations-bi-chart-grid { stroke: var(--ok-ink-e7edf3,#e7edf3); stroke-width: 1; } .operations-bi-chart-y-label, .operations-bi-chart-x-label { fill: var(--ok-ink-748195,#748195); font-size: 16px; font-weight: 700; } .operations-bi-chart-line { fill: none; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; } .operations-bi-chart-line.is-alerts { stroke: var(--ok-ink-dc2626,#dc2626); } .operations-bi-chart-line.is-maintenance { stroke: var(--ok-ink-4f4c8f,#4f4c8f); } .operations-bi-chart-line.is-completed { stroke: var(--ok-ink-16a34a,#16a34a); } .operations-bi-legend { display: flex; flex-wrap: wrap; gap: .55rem; align-items: center; } .operations-bi-legend span { display: inline-flex; align-items: center; gap: .24rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; } .operations-bi-legend i { width: .48rem; height: .48rem; border-radius: 50%; } .operations-bi-legend i.is-alerts { background: var(--ok-surface-dc2626,#dc2626); } .operations-bi-legend i.is-maintenance { background: var(--ok-surface-4f4c8f,#4f4c8f); } .operations-bi-legend i.is-completed { background: var(--ok-surface-16a34a,#16a34a); } .operations-bi-trend-summary { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin-top: .45rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .75rem; overflow: hidden; } .operations-bi-trend-summary > div { padding: .58rem .68rem; border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-trend-summary > div:last-child { border-right: 0; } .operations-bi-trend-summary small, .operations-bi-trend-summary strong { display: block; } .operations-bi-trend-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-trend-summary strong { margin-top: .08rem; color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 900; } .operations-bi-trend-summary .is-positive strong { color: var(--ok-ink-15803d,#15803d); } .operations-bi-trend-summary .is-warning strong { color: var(--ok-ink-b45309,#b45309); } .operations-bi-alerts { display: grid; gap: .42rem; } .operations-bi-alert { display: grid; grid-template-columns: 2.15rem minmax(0,1fr) auto 1rem; gap: .48rem; align-items: center; min-height: 3.35rem; padding: .52rem .58rem; border: 1px solid var(--ok-line-e7eaf0,#e7eaf0); border-radius: .7rem; background: var(--ok-surface-ffffff,#fff); text-decoration: none; transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; } .operations-bi-alert:hover { transform: translateY(-1px); box-shadow: 0 8px 18px var(--ok-shadow-0f172a_a70,rgba(15,23,42,.07)); } .operations-bi-alert__icon { width: 2.15rem; height: 2.15rem; border-radius: .65rem; color: var(--ok-ink-2563eb,#2563eb); background: var(--ok-surface-eff6ff,#eff6ff); font-size: 1rem; } .operations-bi-alert__content { min-width: 0; } .operations-bi-alert__content strong, .operations-bi-alert__content small { display: block; } .operations-bi-alert__content strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-alert__content small { margin-top: .1rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .operations-bi-alert__value { min-width: 1.65rem; padding: .18rem .36rem; border-radius: 999px; color: var(--ok-ink-334155,#334155); background: var(--ok-surface-f1f5f9,#f1f5f9); font-size: .65rem; font-weight: 900; text-align: center; } .operations-bi-alert__arrow { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .8rem; } .operations-bi-alert.is-warning { border-color: var(--ok-line-fde7b0,#fde7b0); } .operations-bi-alert.is-warning .operations-bi-alert__icon { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7df,#fff7df); } .operations-bi-alert.is-danger { border-color: var(--ok-line-fecaca,#fecaca); } .operations-bi-alert.is-danger .operations-bi-alert__icon { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-alert.is-danger .operations-bi-alert__value { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .1rem; padding: .2rem .08rem; } .operations-bi-section-heading > div { display: flex; align-items: center; gap: .52rem; min-width: 0; } .operations-bi-section-heading > div > .material-symbols-rounded { width: 2rem; height: 2rem; flex: 0 0 2rem; border-radius: .62rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f0effa,#f0effa); font-size: 1rem; } .operations-bi-section-heading h2 { margin: 0; color: var(--ok-ink-263248,#263248); font-size: .72rem; font-weight: 950; } .operations-bi-section-heading p { margin: .08rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-section-heading > a { display: inline-flex; align-items: center; gap: .22rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 900; text-decoration: none; white-space: nowrap; } .operations-bi-section-heading > a .material-symbols-rounded { font-size: .75rem; } .operations-bi-hosting-grid { display: grid; grid-template-columns: minmax(0,1.55fr) minmax(18rem,.8fr); gap: .75rem; } .operations-bi-stack { display: grid; gap: .75rem; } .operations-bi-server-list { display: grid; gap: .48rem; } .operations-bi-server { display: grid; grid-template-columns: minmax(13rem,.82fr) minmax(16rem,1.18fr); gap: .75rem; align-items: center; padding: .62rem .68rem; border: 1px solid var(--ok-line-e9edf2,#e9edf2); border-radius: .72rem; background: var(--ok-surface-fbfcfe,#fbfcfe); } .operations-bi-server.is-risk { border-color: var(--ok-line-fde0a3,#fde0a3); background: var(--ok-surface-fffcf5,#fffcf5); } .operations-bi-server__identity { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; gap: .48rem; align-items: center; min-width: 0; } .operations-bi-server__identity > .material-symbols-rounded { width: 2rem; height: 2rem; border-radius: .58rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f0effa,#f0effa); font-size: .95rem; } .operations-bi-server__identity div { min-width: 0; } .operations-bi-server__identity strong, .operations-bi-server__identity small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operations-bi-server__identity strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-server__identity small { margin-top: .08rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-server__identity em { padding: .16rem .34rem; border-radius: 999px; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-eeecfb,#eeecfb); font-size: .65rem; font-style: normal; font-weight: 900; text-transform: uppercase; } .operations-bi-resource-bars { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; } .operations-bi-resource-bars > div { display: grid; gap: .18rem; } .operations-bi-resource-bars span { display: flex; align-items: center; justify-content: space-between; gap: .3rem; } .operations-bi-resource-bars small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 700; } .operations-bi-resource-bars strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-resource-bars i, .operations-bi-ranking i, .operations-bi-provider-list i, .operations-bi-progress-card > i { position: relative; display: block; height: .34rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-e9eef4,#e9eef4); } .operations-bi-resource-bars i b, .operations-bi-ranking i b, .operations-bi-provider-list i b, .operations-bi-progress-card > i b { display: block; width: var(--width,0%); height: 100%; border-radius: inherit; background: var(--ok-surface-2563eb,#2563eb); } .operations-bi-resource-bars .is-warning i b { background: var(--ok-surface-d97706,#d97706); } .operations-bi-resource-bars .is-danger i b { background: var(--ok-surface-dc2626,#dc2626); } .operations-bi-donut-layout { display: grid; grid-template-columns: 8rem minmax(0,1fr); gap: .8rem; align-items: center; } .operations-bi-donut-layout.is-compact { grid-template-columns: 6.8rem minmax(0,1fr); } .operations-bi-donut { display: grid; place-items: center; width: 7.6rem; aspect-ratio: 1; margin: auto; border-radius: 50%; background: var(--donut-gradient); } .operations-bi-donut::before { content: ''; grid-area: 1/1; width: 65%; aspect-ratio: 1; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); box-shadow: inset 0 0 0 1px var(--ok-shadow-edf1f5,#edf1f5); } .operations-bi-donut > div { z-index: 1; grid-area: 1/1; text-align: center; } .operations-bi-donut strong, .operations-bi-donut span { display: block; } .operations-bi-donut strong { color: var(--ok-ink-243047,#243047); font-size: 1rem; font-weight: 950; } .operations-bi-donut span { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 700; } .operations-bi-donut-layout.is-compact .operations-bi-donut { width: 6.3rem; } .operations-bi-donut-legend { display: grid; gap: .34rem; min-width: 0; } .operations-bi-donut-legend > div { display: grid; grid-template-columns: .55rem minmax(0,1fr) auto; gap: .4rem; align-items: center; } .operations-bi-donut-legend > div > i { width: .48rem; height: .48rem; border-radius: 50%; background: var(--segment-color); } .operations-bi-donut-legend span { min-width: 0; } .operations-bi-donut-legend strong, .operations-bi-donut-legend small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operations-bi-donut-legend strong { color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 850; } .operations-bi-donut-legend small { margin-top: .02rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .operations-bi-donut-legend b { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-quality-list { display: grid; gap: .08rem; } .operations-bi-quality-list > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 2.1rem; padding: .36rem .18rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-quality-list > div:last-child { border-bottom: 0; } .operations-bi-quality-list span { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-quality-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-analytics-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; } .operations-bi-ranking { display: grid; gap: .5rem; } .operations-bi-ranking > div { display: grid; gap: .24rem; } .operations-bi-ranking span { display: flex; justify-content: space-between; gap: .5rem; } .operations-bi-ranking strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; } .operations-bi-ranking small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-ranking i b { background: linear-gradient(90deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); } .operations-bi-ranking.is-cost i b { background: linear-gradient(90deg,var(--ok-surface-2563eb,#2563eb),var(--ok-surface-06b6d4,#06b6d4)); } .operations-bi-radial-grid, .operations-bi-backup-radials { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; margin-bottom: .55rem; } .operations-bi-radial { display: grid; place-items: center; width: 7rem; max-width: 100%; aspect-ratio: 1; margin: auto; border-radius: 50%; background: conic-gradient(var(--ring-color) var(--progress),var(--ok-surface-e8edf3,#e8edf3) 0); } .operations-bi-radial::before { content: ''; grid-area: 1/1; width: 72%; aspect-ratio: 1; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); } .operations-bi-radial > div { z-index: 1; grid-area: 1/1; text-align: center; } .operations-bi-radial strong, .operations-bi-radial span { display: block; } .operations-bi-radial strong { color: var(--ok-ink-243047,#243047); font-size: .85rem; font-weight: 950; } .operations-bi-radial span { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 750; } .operations-bi-radial.is-small { width: 5.4rem; } .operations-bi-connectivity-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; } .operations-bi-mini-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; margin-top: .65rem; } .operations-bi-mini-stats > div { padding: .48rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .62rem; background: var(--ok-surface-fafbfd,#fafbfd); } .operations-bi-mini-stats small, .operations-bi-mini-stats strong { display: block; } .operations-bi-mini-stats small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-mini-stats strong { margin-top: .08rem; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-network-cards { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; } .operations-bi-network-cards > div { min-width: 0; padding: .55rem; border: 1px solid var(--ok-line-e8edf3,#e8edf3); border-radius: .68rem; background: var(--ok-surface-fafbfd,#fafbfd); } .operations-bi-network-cards .material-symbols-rounded { width: 1.55rem; height: 1.55rem; border-radius: .48rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f0effa,#f0effa); font-size: .82rem; } .operations-bi-network-cards small, .operations-bi-network-cards strong { display: block; } .operations-bi-network-cards small { margin-top: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-network-cards strong { margin-top: .08rem; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-network-cards .is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fffafa,#fffafa); } .operations-bi-network-cards .is-danger .material-symbols-rounded { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-progress-card { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .4rem; align-items: center; margin-top: .6rem; padding: .58rem; border: 1px solid var(--ok-line-e8edf3,#e8edf3); border-radius: .68rem; } .operations-bi-progress-card span strong, .operations-bi-progress-card span small { display: block; } .operations-bi-progress-card span strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-progress-card span small { margin-top: .06rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-progress-card em { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-style: normal; font-weight: 950; } .operations-bi-progress-card > i { grid-column: 1/-1; } .operations-bi-progress-card > i b { background: linear-gradient(90deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); } .operations-bi-provider-list { display: grid; gap: .35rem; margin-top: .55rem; } .operations-bi-provider-list > div { display: grid; grid-template-columns: minmax(8rem,.75fr) minmax(8rem,1fr); gap: .55rem; align-items: center; } .operations-bi-provider-list strong, .operations-bi-provider-list small { display: block; } .operations-bi-provider-list strong { color: var(--ok-ink-475569,#475569); font-size: .65rem; font-weight: 850; } .operations-bi-provider-list small { margin-top: .03rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; } .operations-bi-maintenance-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); border: 1px solid var(--ok-line-e7eaf0,#e7eaf0); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); overflow: hidden; } .operations-bi-maintenance-summary > div { display: grid; grid-template-columns: 1.75rem minmax(0,1fr); gap: .42rem; align-items: center; padding: .64rem; border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-maintenance-summary > div:last-child { border-right: 0; } .operations-bi-maintenance-summary .material-symbols-rounded { width: 1.75rem; height: 1.75rem; grid-row: 1/3; border-radius: .52rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f0effa,#f0effa); font-size: .86rem; } .operations-bi-maintenance-summary small, .operations-bi-maintenance-summary strong { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .operations-bi-maintenance-summary small { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-maintenance-summary strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 900; } .operations-bi-maintenance-summary .is-danger .material-symbols-rounded { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-maintenance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; } .operations-bi-technicians { display: grid; gap: .15rem; } .operations-bi-technicians > div { display: grid; grid-template-columns: 1.8rem minmax(0,1fr) auto; gap: .42rem; align-items: center; min-height: 2.75rem; padding: .38rem .1rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-technicians > div:last-child { border-bottom: 0; } .operations-bi-avatar { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; color: var(--ok-ink-ffffff,#fff); background: linear-gradient(135deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb)); font-size: .65rem; font-weight: 900; } .operations-bi-technicians strong, .operations-bi-technicians small { display: block; } .operations-bi-technicians strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; } .operations-bi-technicians small { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .operations-bi-technicians em { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-style: normal; font-weight: 900; } .operations-bi-risk-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .75rem; } .operations-bi-stock-list, .operations-bi-stale-list, .operations-bi-critical-list { display: grid; gap: .34rem; } .operations-bi-stock-list > a, .operations-bi-stale-list > a, .operations-bi-critical-list > a { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; gap: .45rem; align-items: center; min-height: 2.85rem; padding: .42rem .48rem; border: 1px solid var(--ok-line-e9edf2,#e9edf2); border-radius: .64rem; background: var(--ok-surface-fbfcfe,#fbfcfe); text-decoration: none; } .operations-bi-stock-list .material-symbols-rounded, .operations-bi-stale-list .material-symbols-rounded, .operations-bi-critical-list > a > .material-symbols-rounded:first-child { width: 2rem; height: 2rem; border-radius: .58rem; color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7df,#fff7df); font-size: .92rem; } .operations-bi-stock-list strong, .operations-bi-stock-list small, .operations-bi-stale-list strong, .operations-bi-stale-list small, .operations-bi-critical-list strong, .operations-bi-critical-list small { display: block; } .operations-bi-stock-list strong, .operations-bi-stale-list strong, .operations-bi-critical-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; } .operations-bi-stock-list small, .operations-bi-stale-list small, .operations-bi-critical-list small { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .operations-bi-stock-list em { color: var(--ok-ink-b45309,#b45309); font-size: .65rem; font-style: normal; font-weight: 900; } .operations-bi-security-layout { display: grid; grid-template-columns: 7rem minmax(0,1fr); gap: .65rem; align-items: center; margin-bottom: .55rem; } .operations-bi-security-summary { display: grid; grid-template-columns: 5.4rem minmax(0,1fr); gap: .5rem; align-items: center; } .operations-bi-security-summary p { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.5; } .operations-bi-critical-list > a.is-danger { border-color: var(--ok-line-fecaca,#fecaca); } .operations-bi-critical-list > a.is-danger > .material-symbols-rounded:first-child { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-critical-list > a > .material-symbols-rounded:last-child { width: auto; height: auto; color: var(--ok-ink-94a3b8,#94a3b8); background: transparent; font-size: .75rem; } .operations-bi-backup-radials { margin-bottom: .35rem; } .operations-bi-stale-list { margin-top: .45rem; } .operations-bi-stale-list > a { grid-template-columns: 2rem minmax(0,1fr); } .operations-bi-bottom-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .75rem; } .operations-bi-client-list, .operations-bi-activity-list { display: grid; gap: .34rem; } .operations-bi-client-list > a { display: grid; grid-template-columns: 2rem minmax(0,1fr) 1rem; gap: .45rem; align-items: center; min-height: 3rem; padding: .45rem .5rem; border: 1px solid var(--ok-line-e9edf2,#e9edf2); border-radius: .65rem; background: var(--ok-surface-fbfcfe,#fbfcfe); text-decoration: none; } .operations-bi-score { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: .58rem; color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7df,#fff7df); font-size: .65rem; font-weight: 950; } .operations-bi-client-list > a.is-danger { border-color: var(--ok-line-fecaca,#fecaca); } .operations-bi-client-list > a.is-danger .operations-bi-score { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-client-list strong, .operations-bi-client-list small { display: block; } .operations-bi-client-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; } .operations-bi-client-list small { margin-top: .06rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .operations-bi-client-list > a > .material-symbols-rounded { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .75rem; } .operations-bi-activity-list > a { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; gap: .45rem; align-items: center; min-height: 3rem; padding: .45rem .5rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); text-decoration: none; } .operations-bi-activity-list > a:last-child { border-bottom: 0; } .operations-bi-activity-list > a > .material-symbols-rounded { width: 2rem; height: 2rem; border-radius: .58rem; color: var(--ok-ink-2563eb,#2563eb); background: var(--ok-surface-eff6ff,#eff6ff); font-size: .9rem; } .operations-bi-activity-list > a.is-warning > .material-symbols-rounded { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7df,#fff7df); } .operations-bi-activity-list > a.is-danger > .material-symbols-rounded { color: var(--ok-ink-b91c1c,#b91c1c); background: var(--ok-surface-fef2f2,#fef2f2); } .operations-bi-activity-list strong, .operations-bi-activity-list small { display: block; } .operations-bi-activity-list strong { color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 850; } .operations-bi-activity-list small { margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .operations-bi-activity-list time { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .65rem; white-space: nowrap; } .operations-bi-muted { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.5; } @media (max-width: 1280px) { .operations-bi-period { grid-template-columns: minmax(14rem,1fr) auto auto; } .operations-bi-updated { grid-column: 1/-1; justify-self: start; } .operations-bi-kpis { grid-template-columns: repeat(4,minmax(0,1fr)); } .operations-bi-context-strip { grid-template-columns: repeat(3,minmax(0,1fr)); } .operations-bi-context-item:nth-child(3n) { border-right: 0; } .operations-bi-context-item:nth-child(-n+3) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-maintenance-summary { grid-template-columns: repeat(3,minmax(0,1fr)); } .operations-bi-maintenance-summary > div:nth-child(3n) { border-right: 0; } .operations-bi-maintenance-summary > div:nth-child(-n+3) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } } @media (max-width: 1050px) { .operations-bi-period { grid-template-columns: 1fr auto; } .operations-bi-presets { justify-self: end; } .operations-bi-dates { grid-column: 1/-1; } .operations-bi-updated { grid-column: auto; justify-self: end; } .operations-bi-kpis { grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-primary-grid, .operations-bi-hosting-grid, .operations-bi-connectivity-grid, .operations-bi-bottom-grid { grid-template-columns: 1fr; } .operations-bi-analytics-grid, .operations-bi-maintenance-grid, .operations-bi-risk-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-analytics-grid > .ds-panel:last-child, .operations-bi-maintenance-grid > .ds-panel:last-child, .operations-bi-risk-grid > .ds-panel:last-child { grid-column: 1/-1; } } @media (max-width: 760px) { .operations-bi-period { grid-template-columns: 1fr; } .operations-bi-presets { justify-self: stretch; overflow-x: auto; } .operations-bi-presets button { flex: 1 0 auto; } .operations-bi-dates { grid-column: auto; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-dates input { width: 100%; min-height: 2.65rem; font-size: .7rem; } .operations-bi-updated { justify-self: start; } .operations-bi-context-strip { grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-context-item:nth-child(3n) { border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-context-item:nth-child(even) { border-right: 0; } .operations-bi-context-item:nth-child(-n+4) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-analytics-grid, .operations-bi-maintenance-grid, .operations-bi-risk-grid { grid-template-columns: 1fr; } .operations-bi-analytics-grid > .ds-panel:last-child, .operations-bi-maintenance-grid > .ds-panel:last-child, .operations-bi-risk-grid > .ds-panel:last-child { grid-column: auto; } .operations-bi-server { grid-template-columns: 1fr; } .operations-bi-mini-stats, .operations-bi-network-cards { grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-maintenance-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-maintenance-summary > div:nth-child(3n) { border-right: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-maintenance-summary > div:nth-child(even) { border-right: 0; } .operations-bi-maintenance-summary > div:nth-child(-n+4) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-provider-list > div { grid-template-columns: 1fr; } } @media (max-width: 500px) { .operations-bi-page { gap: .72rem; } .operations-bi-period { padding: .72rem; } .operations-bi-presets { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow: visible; } .operations-bi-presets button:last-child { grid-column: 1/-1; } .operations-bi-dates { grid-template-columns: 1fr; } .operations-bi-kpis { grid-template-columns: 1fr; } .operations-bi-kpi { min-height: 5.1rem; padding: .82rem; } .operations-bi-kpi__label { font-size: .65rem; } .operations-bi-kpi__content > strong { font-size: 1.2rem; } .operations-bi-kpi__content > small { font-size: .65rem; } .operations-bi-context-strip { grid-template-columns: 1fr; } .operations-bi-context-item, .operations-bi-context-item:nth-child(3n), .operations-bi-context-item:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-context-item:last-child { border-bottom: 0; } .operations-bi-trend-summary { grid-template-columns: repeat(2,minmax(0,1fr)); } .operations-bi-trend-summary > div:nth-child(2) { border-right: 0; } .operations-bi-trend-summary > div:nth-child(-n+2) { border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-alert { grid-template-columns: 2.15rem minmax(0,1fr) 1rem; } .operations-bi-alert__value { grid-column: 2; justify-self: start; } .operations-bi-alert__arrow { grid-column: 3; grid-row: 1/span 2; } .operations-bi-section-heading { align-items: flex-start; } .operations-bi-section-heading > a { font-size: 0; } .operations-bi-section-heading > a .material-symbols-rounded { font-size: .9rem; } .operations-bi-resource-bars { grid-template-columns: 1fr; } .operations-bi-donut-layout, .operations-bi-donut-layout.is-compact, .operations-bi-security-layout, .operations-bi-security-summary { grid-template-columns: 1fr; } .operations-bi-mini-stats, .operations-bi-network-cards { grid-template-columns: 1fr; } .operations-bi-maintenance-summary { grid-template-columns: 1fr; } .operations-bi-maintenance-summary > div, .operations-bi-maintenance-summary > div:nth-child(3n), .operations-bi-maintenance-summary > div:nth-child(even) { border-right: 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .operations-bi-maintenance-summary > div:last-child { border-bottom: 0; } .operations-bi-stock-list > a, .operations-bi-critical-list > a { grid-template-columns: 2rem minmax(0,1fr); } .operations-bi-stock-list em, .operations-bi-critical-list > a > .material-symbols-rounded:last-child { grid-column: 2; justify-self: start; } .operations-bi-activity-list > a { grid-template-columns: 2rem minmax(0,1fr); } .operations-bi-activity-list time { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .operations-bi-alert { transition: none; } .operations-bi-alert:hover { transform: none; } } /* Reports · General BI 1.4.0 */ .general-bi-page{display:grid;gap:1rem;min-width:0}.general-bi-page .material-symbols-rounded{display:flex;align-items:center;justify-content:center;line-height:1}.general-bi-period{display:grid;grid-template-columns:minmax(15rem,1fr) auto auto auto;align-items:center;gap:.9rem;padding:.9rem 1rem;border:1px solid var(--ok-line-e6eaf0,#e6eaf0);border-radius:1rem;background:linear-gradient(135deg,var(--ok-surface-4f4c8f_a55,rgba(79,76,143,.055)),var(--ok-surface-2563eb_a35,rgba(37,99,235,.035))),var(--ok-surface-ffffff,#fff);box-shadow:0 8px 24px var(--ok-shadow-0f172a_a35,rgba(15,23,42,.035))}.general-bi-period__intro{display:flex;align-items:center;gap:.75rem;min-width:0}.general-bi-period__icon{width:2.55rem;height:2.55rem;flex:0 0 2.55rem;border-radius:.8rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.25rem}.general-bi-period__intro h2{margin:0;color:var(--ok-ink-172033,#172033);font-size:.84rem;font-weight:800}.general-bi-period__intro p{margin:.18rem 0 0;color:var(--ok-ink-687386,#687386);font-size:.65rem}.general-bi-presets{display:flex;align-items:center;gap:.32rem;padding:.25rem;border:1px solid var(--ok-line-e6eaf0,#e6eaf0);border-radius:.7rem;background:var(--ok-surface-f7f8fb,#f7f8fb)}.general-bi-presets button{min-height:2rem;padding:.4rem .65rem;border:0;border-radius:.5rem;background:transparent;color:var(--ok-ink-667085,#667085);font-size:.65rem;font-weight:800;white-space:nowrap;cursor:pointer}.general-bi-presets button:hover{background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-343169,#343169)}.general-bi-presets button.is-active{background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-4f4c8f,#4f4c8f);box-shadow:0 3px 10px var(--ok-shadow-0f172a_a80,rgba(15,23,42,.08))}.general-bi-dates{display:flex;align-items:center;gap:.45rem}.general-bi-dates label{display:grid;gap:.17rem;color:var(--ok-ink-667085,#667085);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em}.general-bi-dates input{width:8.25rem;min-height:2.25rem;padding:.35rem .5rem;border:1px solid var(--ok-line-dce2ea,#dce2ea);border-radius:.55rem;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-1f2937,#1f2937);font-size:.65rem}.general-bi-updated{display:flex;align-items:center;gap:.35rem;color:var(--ok-ink-6b7280,#6b7280);font-size:.65rem;white-space:nowrap}.general-bi-updated .material-symbols-rounded{font-size:.9rem}.general-bi-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.general-bi-kpi{position:relative;display:grid;grid-template-columns:2.6rem minmax(0,1fr) 1rem;align-items:center;gap:.72rem;min-height:6rem;padding:.85rem .9rem;border:1px solid var(--ok-line-e6eaf0,#e6eaf0);border-radius:1rem;background:var(--ok-surface-ffffff,#fff);color:inherit;text-decoration:none;box-shadow:0 8px 20px var(--ok-shadow-0f172a_a35,rgba(15,23,42,.035));transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease}.general-bi-kpi:hover{transform:translateY(-2px);border-color:var(--ok-line-c9c8e6,#c9c8e6);box-shadow:0 12px 26px var(--ok-shadow-0f172a_a70,rgba(15,23,42,.07))}.general-bi-kpi__icon{width:2.6rem;height:2.6rem;border-radius:.78rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.25rem}.general-bi-kpi.is-positive .general-bi-kpi__icon{background:var(--ok-surface-eaf8ef,#eaf8ef);color:var(--ok-ink-15803d,#15803d)}.general-bi-kpi.is-warning .general-bi-kpi__icon{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309)}.general-bi-kpi.is-danger .general-bi-kpi__icon{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.general-bi-kpi__content{display:grid;min-width:0;gap:.14rem}.general-bi-kpi__content>span{overflow:hidden;color:var(--ok-ink-6b7280,#6b7280);font-size:.65rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.general-bi-kpi__content>strong{color:var(--ok-ink-172033,#172033);font-size:1.17rem;line-height:1.15}.general-bi-kpi__content>small{overflow:hidden;color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.general-bi-kpi__arrow{color:var(--ok-ink-a5adba,#a5adba);font-size:.9rem}.general-bi-primary-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(18rem,.8fr);gap:1rem;align-items:stretch}.general-bi-financial-panel,.general-bi-priorities-panel,.general-bi-activity-panel,.general-bi-funnel-panel,.general-bi-clients-panel,.general-bi-agenda-panel{min-width:0}.general-bi-panel-link{display:flex;align-items:center;gap:.25rem;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.65rem;font-weight:800;text-decoration:none}.general-bi-panel-link .material-symbols-rounded{font-size:.85rem}.general-bi-chart-legend{display:flex;align-items:center;justify-content:flex-end;gap:.8rem;flex-wrap:wrap;margin-bottom:.45rem;color:var(--ok-ink-667085,#667085);font-size:.65rem;font-weight:700}.general-bi-chart-legend span{display:flex;align-items:center;gap:.3rem}.general-bi-chart-legend i{width:.55rem;height:.55rem;border-radius:50%;background:var(--ok-surface-64748b,#64748b)}.general-bi-chart-legend .is-invoiced{background:var(--ok-surface-4f4c8f,#4f4c8f)}.general-bi-chart-legend .is-received{background:var(--ok-surface-2563eb,#2563eb)}.general-bi-chart-legend .is-expense{background:var(--ok-surface-d97706,#d97706)}.general-bi-chart-legend .is-demand{background:var(--ok-surface-4f4c8f,#4f4c8f)}.general-bi-chart-legend .is-delivered{background:var(--ok-surface-16a34a,#16a34a)}.general-bi-chart-legend .is-risk{background:var(--ok-surface-dc2626,#dc2626)}.general-bi-line-chart{width:100%;min-height:15rem}.general-bi-line-chart svg{display:block;width:100%;height:auto;overflow:visible}.general-bi-chart-grid{stroke:var(--ok-ink-e8edf3,#e8edf3);stroke-width:1}.general-bi-chart-y-label,.general-bi-chart-x-label{fill:var(--ok-ink-8791a3,#8791a3);font-size:11px}.general-bi-chart-line{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.general-bi-chart-line.is-invoiced{stroke:var(--ok-ink-4f4c8f,#4f4c8f)}.general-bi-chart-line.is-received{stroke:var(--ok-ink-2563eb,#2563eb)}.general-bi-chart-line.is-expense{stroke:var(--ok-ink-d97706,#d97706)}.general-bi-chart-line.is-demand{stroke:var(--ok-ink-4f4c8f,#4f4c8f)}.general-bi-chart-line.is-delivered{stroke:var(--ok-ink-16a34a,#16a34a)}.general-bi-chart-line.is-risk{stroke:var(--ok-ink-dc2626,#dc2626);stroke-dasharray:8 6}.general-bi-chart-area{opacity:.95}.general-bi-chart-summary{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:.35rem;border:1px solid var(--ok-line-edf0f4,#edf0f4);border-radius:.75rem;overflow:hidden;background:var(--ok-surface-fafbfc,#fafbfc)}.general-bi-chart-summary.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}.general-bi-chart-summary>div{display:grid;gap:.12rem;padding:.62rem .72rem;border-right:1px solid var(--ok-line-edf0f4,#edf0f4)}.general-bi-chart-summary>div:last-child{border-right:0}.general-bi-chart-summary small{color:var(--ok-ink-7b8493,#7b8493);font-size:.65rem}.general-bi-chart-summary strong{color:var(--ok-ink-1f2937,#1f2937);font-size:.73rem}.general-bi-chart-summary .is-positive strong{color:var(--ok-ink-15803d,#15803d)}.general-bi-chart-summary .is-negative strong{color:var(--ok-ink-c93636,#c93636)}.general-bi-priority-list{display:grid;gap:.48rem}.general-bi-priority{display:grid;grid-template-columns:2.35rem minmax(0,1fr) auto 1rem;align-items:center;gap:.55rem;padding:.62rem;border:1px solid var(--ok-line-ebeff4,#ebeff4);border-radius:.75rem;background:var(--ok-surface-ffffff,#fff);color:inherit;text-decoration:none;transition:border-color .18s ease,background .18s ease}.general-bi-priority:hover{border-color:var(--ok-line-cbc9e6,#cbc9e6);background:var(--ok-surface-fbfbfe,#fbfbfe)}.general-bi-priority__icon{width:2.35rem;height:2.35rem;border-radius:.68rem;background:var(--ok-surface-f4f5f7,#f4f5f7);color:var(--ok-ink-64748b,#64748b);font-size:1.05rem}.general-bi-priority.is-danger .general-bi-priority__icon{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.general-bi-priority.is-warning .general-bi-priority__icon{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309)}.general-bi-priority.is-info .general-bi-priority__icon{background:var(--ok-surface-eef6ff,#eef6ff);color:var(--ok-ink-2563eb,#2563eb)}.general-bi-priority__content{display:grid;min-width:0;gap:.08rem}.general-bi-priority__content small{color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.general-bi-priority__content strong{overflow:hidden;color:var(--ok-ink-273043,#273043);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.general-bi-priority__content em{overflow:hidden;color:var(--ok-ink-778194,#778194);font-size:.65rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.general-bi-priority>b{color:var(--ok-ink-273043,#273043);font-size:.65rem;white-space:nowrap}.general-bi-priority>.material-symbols-rounded:last-child{color:var(--ok-ink-a4adbb,#a4adbb);font-size:.85rem}.general-bi-section-heading{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.15rem .1rem}.general-bi-section-heading>div{display:flex;align-items:center;gap:.65rem}.general-bi-section-heading>div>.material-symbols-rounded{width:2rem;height:2rem;border-radius:.6rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1rem}.general-bi-section-heading h2{margin:0;color:var(--ok-ink-20293a,#20293a);font-size:.82rem}.general-bi-section-heading p{margin:.15rem 0 0;color:var(--ok-ink-7b8494,#7b8494);font-size:.65rem}.general-bi-health-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.general-bi-health-card{display:grid;gap:.65rem;padding:.82rem;border:1px solid var(--ok-line-e6eaf0,#e6eaf0);border-radius:.9rem;background:var(--ok-surface-ffffff,#fff);color:inherit;text-decoration:none;box-shadow:0 7px 18px var(--ok-shadow-0f172a_a30,rgba(15,23,42,.03))}.general-bi-health-card__header{display:grid;grid-template-columns:2rem minmax(0,1fr) auto;align-items:center;gap:.5rem}.general-bi-health-card__header>.material-symbols-rounded{width:2rem;height:2rem;border-radius:.58rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1rem}.general-bi-health-card__header strong{color:var(--ok-ink-2b3445,#2b3445);font-size:.66rem}.general-bi-health-card__header b{color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.76rem}.general-bi-health-bar{height:.42rem;border-radius:999px;background:var(--ok-surface-edf0f4,#edf0f4);overflow:hidden}.general-bi-health-bar i{display:block;width:var(--width);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-2563eb,#2563eb))}.general-bi-health-card__footer{display:grid;gap:.1rem}.general-bi-health-card__footer span{color:var(--ok-ink-384255,#384255);font-size:.65rem;font-weight:800}.general-bi-health-card__footer small{color:var(--ok-ink-7e8797,#7e8797);font-size:.65rem}.general-bi-secondary-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(18rem,.85fr);gap:1rem}.general-bi-funnel-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:.72rem;border:1px solid var(--ok-line-edf0f4,#edf0f4);border-radius:.72rem;background:var(--ok-surface-fafbfc,#fafbfc);overflow:hidden}.general-bi-funnel-summary>div{display:grid;gap:.1rem;padding:.58rem;border-right:1px solid var(--ok-line-edf0f4,#edf0f4)}.general-bi-funnel-summary>div:last-child{border-right:0}.general-bi-funnel-summary small{color:var(--ok-ink-7d8795,#7d8795);font-size:.65rem}.general-bi-funnel-summary strong{color:var(--ok-ink-273043,#273043);font-size:.68rem}.general-bi-funnel{display:grid;gap:.48rem}.general-bi-funnel>a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.25rem;color:inherit;text-decoration:none}.general-bi-funnel>a>span{display:grid;gap:.08rem}.general-bi-funnel strong{color:var(--ok-ink-344054,#344054);font-size:.65rem}.general-bi-funnel small{color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem}.general-bi-funnel b{color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.66rem}.general-bi-funnel i{grid-column:1/-1;height:.36rem;border-radius:999px;background:var(--ok-surface-edf0f4,#edf0f4);overflow:hidden}.general-bi-funnel em{display:block;width:var(--width);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--ok-surface-4f4c8f,#4f4c8f),var(--ok-surface-6f6cac,#6f6cac))}.general-bi-tertiary-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(20rem,.85fr);gap:1rem}.general-bi-risk-list,.general-bi-agenda,.general-bi-activity-list{display:grid;gap:.5rem}.general-bi-risk-list>a{display:grid;grid-template-columns:2.3rem minmax(0,1fr) auto 1rem;align-items:center;gap:.58rem;padding:.58rem;border:1px solid var(--ok-line-ebeff4,#ebeff4);border-radius:.75rem;color:inherit;text-decoration:none}.general-bi-risk-list>a:hover{border-color:var(--ok-line-cbc9e6,#cbc9e6);background:var(--ok-surface-fbfbfe,#fbfbfe)}.general-bi-risk-avatar{display:flex;align-items:center;justify-content:center;width:2.3rem;height:2.3rem;border-radius:.7rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.8rem;font-weight:900}.general-bi-risk-list>a.is-danger .general-bi-risk-avatar{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.general-bi-risk-content{display:grid;min-width:0;gap:.08rem}.general-bi-risk-content strong{overflow:hidden;color:var(--ok-ink-2b3445,#2b3445);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.general-bi-risk-content small{overflow:hidden;color:var(--ok-ink-7f8999,#7f8999);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.general-bi-risk-list>a>b{padding:.26rem .45rem;border-radius:999px;background:var(--ok-surface-f3f4f6,#f3f4f6);color:var(--ok-ink-5b6472,#5b6472);font-size:.65rem;white-space:nowrap}.general-bi-risk-list>a>.material-symbols-rounded{color:var(--ok-ink-a5adba,#a5adba);font-size:.85rem}.general-bi-agenda>a{display:grid;grid-template-columns:2.65rem minmax(0,1fr) 1rem;align-items:center;gap:.6rem;padding:.56rem;border:1px solid var(--ok-line-ebeff4,#ebeff4);border-radius:.75rem;color:inherit;text-decoration:none}.general-bi-agenda>a:hover{border-color:var(--ok-line-cbc9e6,#cbc9e6);background:var(--ok-surface-fbfbfe,#fbfbfe)}.general-bi-agenda-date{display:grid;place-items:center;width:2.65rem;height:2.75rem;border-radius:.7rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f)}.general-bi-agenda-date b{font-size:.85rem;line-height:1}.general-bi-agenda-date small{font-size:.65rem;font-weight:900}.general-bi-agenda>a.is-high .general-bi-agenda-date,.general-bi-agenda>a.is-critical .general-bi-agenda-date{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.general-bi-agenda-content{display:grid;min-width:0;gap:.07rem}.general-bi-agenda-content>small{color:var(--ok-ink-7e8797,#7e8797);font-size:.65rem}.general-bi-agenda-content>strong{overflow:hidden;color:var(--ok-ink-2a3344,#2a3344);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.general-bi-agenda-content>em{overflow:hidden;color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.general-bi-agenda>a>.material-symbols-rounded{color:var(--ok-ink-a5adba,#a5adba);font-size:.85rem}.general-bi-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.general-bi-module-grid>a{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:.65rem;position:relative;padding:.8rem;border:1px solid var(--ok-line-e6eaf0,#e6eaf0);border-radius:.9rem;background:var(--ok-surface-ffffff,#fff);color:inherit;text-decoration:none}.general-bi-module-grid>a>.material-symbols-rounded{width:2.6rem;height:2.6rem;border-radius:.72rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.2rem}.general-bi-module-grid>a>div{display:grid;min-width:0;gap:.14rem}.general-bi-module-grid strong{color:var(--ok-ink-2b3445,#2b3445);font-size:.65rem}.general-bi-module-grid small{color:var(--ok-ink-818b9b,#818b9b);font-size:.65rem;line-height:1.35}.general-bi-module-grid>a>b{grid-column:2;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.65rem}.general-bi-bottom-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(20rem,.8fr);gap:1rem}.general-bi-activity-list>a{display:grid;grid-template-columns:2.25rem minmax(0,1fr) auto;align-items:center;gap:.55rem;padding:.5rem;border-bottom:1px solid var(--ok-line-edf0f4,#edf0f4);color:inherit;text-decoration:none}.general-bi-activity-list>a:last-child{border-bottom:0}.general-bi-activity-icon{width:2.25rem;height:2.25rem;border-radius:.65rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1rem}.general-bi-activity-icon.is-positive{background:var(--ok-surface-eaf8ef,#eaf8ef);color:var(--ok-ink-15803d,#15803d)}.general-bi-activity-icon.is-danger{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.general-bi-activity-icon.is-warning{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309)}.general-bi-activity-list>a>span:nth-child(2){display:grid;min-width:0;gap:.04rem}.general-bi-activity-list small{color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem;font-weight:800;text-transform:uppercase}.general-bi-activity-list strong{overflow:hidden;color:var(--ok-ink-2b3445,#2b3445);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.general-bi-activity-list em{overflow:hidden;color:var(--ok-ink-818b9b,#818b9b);font-size:.65rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.general-bi-activity-list time{color:var(--ok-ink-929baa,#929baa);font-size:.65rem;white-space:nowrap}.general-bi-governance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}.general-bi-governance-grid>a{display:grid;grid-template-columns:2rem minmax(0,1fr);gap:.25rem .5rem;padding:.65rem;border:1px solid var(--ok-line-ebeff4,#ebeff4);border-radius:.75rem;background:var(--ok-surface-fafbfc,#fafbfc);color:inherit;text-decoration:none}.general-bi-governance-grid>a>.material-symbols-rounded{grid-row:1/4;width:2rem;height:2rem;border-radius:.58rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1rem}.general-bi-governance-grid small{color:var(--ok-ink-7e8797,#7e8797);font-size:.65rem}.general-bi-governance-grid strong{color:var(--ok-ink-253044,#253044);font-size:.8rem}.general-bi-governance-grid em{color:var(--ok-ink-8992a1,#8992a1);font-size:.65rem;font-style:normal} @media(max-width:1280px){.general-bi-period{grid-template-columns:minmax(14rem,1fr) auto auto}.general-bi-updated{grid-column:1/-1;justify-self:start}.general-bi-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}.general-bi-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:1050px){.general-bi-period{grid-template-columns:1fr auto}.general-bi-presets{justify-self:end}.general-bi-dates{grid-column:1/-1}.general-bi-updated{grid-column:auto;justify-self:end}.general-bi-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.general-bi-primary-grid,.general-bi-secondary-grid,.general-bi-tertiary-grid,.general-bi-bottom-grid{grid-template-columns:1fr}.general-bi-health-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:760px){.general-bi-period{grid-template-columns:1fr}.general-bi-presets{justify-self:stretch;overflow-x:auto}.general-bi-presets button{flex:1 0 auto}.general-bi-dates{grid-column:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}.general-bi-dates input{width:100%;min-height:2.65rem}.general-bi-updated{justify-self:start}.general-bi-module-grid{grid-template-columns:1fr}.general-bi-governance-grid{grid-template-columns:1fr}.general-bi-line-chart{min-height:12rem}} @media(max-width:520px){.general-bi-page{gap:.72rem}.general-bi-period{padding:.72rem}.general-bi-presets{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}.general-bi-presets button:last-child{grid-column:1/-1}.general-bi-dates{grid-template-columns:1fr}.general-bi-kpis,.general-bi-health-grid{grid-template-columns:1fr}.general-bi-kpi{min-height:5.2rem;padding:.75rem}.general-bi-chart-summary,.general-bi-chart-summary.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}.general-bi-chart-summary>div:nth-child(even){border-right:0}.general-bi-priority{grid-template-columns:2.25rem minmax(0,1fr) 1rem}.general-bi-priority>b{grid-column:2;justify-self:start}.general-bi-priority>.material-symbols-rounded:last-child{grid-column:3;grid-row:1/3}.general-bi-funnel-summary{grid-template-columns:1fr}.general-bi-funnel-summary>div{border-right:0;border-bottom:1px solid var(--ok-line-edf0f4,#edf0f4)}.general-bi-funnel-summary>div:last-child{border-bottom:0}.general-bi-risk-list>a{grid-template-columns:2.25rem minmax(0,1fr) 1rem}.general-bi-risk-list>a>b{grid-column:2;justify-self:start}.general-bi-risk-list>a>.material-symbols-rounded{grid-column:3;grid-row:1/3}.general-bi-activity-list>a{grid-template-columns:2.15rem minmax(0,1fr)}.general-bi-activity-list time{grid-column:2}.general-bi-section-heading p{display:none}} @media(prefers-reduced-motion:reduce){.general-bi-kpi,.general-bi-priority{transition:none}.general-bi-kpi:hover{transform:none}} /* CRM · Mapa de clientes 1.0.0 */ .crm-map-page{display:grid;gap:1rem;min-width:0}.crm-map-page .material-symbols-rounded{display:flex;align-items:center;justify-content:center;line-height:1}.crm-map-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.crm-map-metric{display:grid;grid-template-columns:2.7rem minmax(0,1fr);align-items:center;gap:.75rem;min-height:5.6rem;padding:.85rem .95rem;border:1px solid var(--ok-line-e6eaf0,#e6eaf0);border-radius:1rem;background:var(--ok-surface-ffffff,#fff);box-shadow:0 8px 22px var(--ok-shadow-0f172a_a35,rgba(15,23,42,.035))}.crm-map-metric__icon{width:2.7rem;height:2.7rem;border-radius:.78rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.25rem}.crm-map-metric.is-success .crm-map-metric__icon{background:var(--ok-surface-eaf8ef,#eaf8ef);color:var(--ok-ink-15803d,#15803d)}.crm-map-metric.is-warning .crm-map-metric__icon{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309)}.crm-map-metric.is-danger .crm-map-metric__icon{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.crm-map-metric>span:last-child{display:grid;min-width:0;gap:.08rem}.crm-map-metric small{overflow:hidden;color:var(--ok-ink-717b8d,#717b8d);font-size:.65rem;font-weight:800;text-overflow:ellipsis;white-space:nowrap}.crm-map-metric strong{color:var(--ok-ink-172033,#172033);font-size:1.18rem;line-height:1.12}.crm-map-metric em{overflow:hidden;color:var(--ok-ink-939baa,#939baa);font-size:.65rem;font-style:normal;text-overflow:ellipsis;white-space:nowrap}.crm-map-filter-panel{display:grid;grid-template-columns:minmax(12rem,.7fr) minmax(0,2fr);align-items:end;gap:1rem;padding:.85rem 1rem;border:1px solid var(--ok-line-e5e9ef,#e5e9ef);border-radius:1rem;background:linear-gradient(135deg,var(--ok-surface-4f4c8f_a45,rgba(79,76,143,.045)),var(--ok-surface-2563eb_a25,rgba(37,99,235,.025))),var(--ok-surface-ffffff,#fff)}.crm-map-filter-panel__intro{display:flex;align-items:center;gap:.7rem;min-width:0}.crm-map-filter-panel__intro>.material-symbols-rounded{width:2.4rem;height:2.4rem;flex:0 0 2.4rem;border-radius:.7rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.1rem}.crm-map-filter-panel__intro h2{margin:0;color:var(--ok-ink-20293a,#20293a);font-size:.75rem;font-weight:850}.crm-map-filter-panel__intro p{margin:.14rem 0 0;color:var(--ok-ink-7b8595,#7b8595);font-size:.65rem;line-height:1.35}.crm-map-filters{display:grid;grid-template-columns:minmax(13rem,1.3fr) minmax(9rem,.7fr) minmax(10rem,.8fr) minmax(12rem,1fr) auto;align-items:end;gap:.6rem}.crm-map-field{display:grid;gap:.25rem;min-width:0}.crm-map-field>span:first-child{color:var(--ok-ink-5f6979,#5f6979);font-size:.65rem;font-weight:800}.crm-map-field input,.crm-map-field select{width:100%;min-height:2.6rem;padding:.55rem .65rem;border:1px solid var(--ok-line-dbe1e9,#dbe1e9);border-radius:.68rem;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-253044,#253044);font-size:.65rem;outline:0}.crm-map-field input:hover,.crm-map-field select:hover{border-color:var(--ok-line-c5c9dc,#c5c9dc)}.crm-map-field input:focus,.crm-map-field select:focus{border-color:var(--ok-line-7771b7,#7771b7);box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a120,rgba(79,76,143,.12))}.crm-map-input-wrap{position:relative;display:block}.crm-map-input-wrap>.material-symbols-rounded{position:absolute;top:50%;left:.65rem;z-index:1;transform:translateY(-50%);color:var(--ok-ink-8a94a5,#8a94a5);font-size:1rem;pointer-events:none}.crm-map-input-wrap input{padding-left:2.15rem}.crm-map-attention-toggle{display:grid;grid-template-columns:auto 1.8rem minmax(0,1fr);align-items:center;gap:.42rem;min-height:2.6rem;padding:.38rem .55rem;border:1px solid var(--ok-line-dbe1e9,#dbe1e9);border-radius:.68rem;background:var(--ok-surface-ffffff,#fff);cursor:pointer}.crm-map-attention-toggle:hover{border-color:var(--ok-line-d7ad61,#d7ad61);background:var(--ok-surface-fffdf8,#fffdf8)}.crm-map-attention-toggle input{width:1rem;height:1rem;accent-color:var(--ok-ink-4f4c8f,#4f4c8f)}.crm-map-attention-toggle>.material-symbols-rounded{width:1.8rem;height:1.8rem;border-radius:.5rem;background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309);font-size:.9rem}.crm-map-attention-toggle>span:last-child{display:grid;min-width:0;gap:.03rem}.crm-map-attention-toggle strong{color:var(--ok-ink-434b59,#434b59);font-size:.65rem}.crm-map-attention-toggle small{overflow:hidden;color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-clear{display:flex;align-items:center;justify-content:center;gap:.3rem;min-height:2.6rem;padding:.55rem .68rem;border:1px solid var(--ok-line-dbe1e9,#dbe1e9);border-radius:.68rem;background:var(--ok-surface-f8f9fb,#f8f9fb);color:var(--ok-ink-5f6877,#5f6877);font-size:.65rem;font-weight:800;cursor:pointer}.crm-map-clear:hover{border-color:var(--ok-line-c9c8e6,#c9c8e6);background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-4f4c8f,#4f4c8f)}.crm-map-clear .material-symbols-rounded{font-size:.95rem}.crm-map-workspace{display:grid;grid-template-columns:minmax(0,1fr) minmax(17rem,22rem);gap:1rem;align-items:stretch;min-width:0}.crm-map-card,.crm-map-list-card{min-width:0;border:1px solid var(--ok-line-e4e8ee,#e4e8ee);border-radius:1rem;background:var(--ok-surface-ffffff,#fff);box-shadow:0 8px 25px var(--ok-shadow-0f172a_a40,rgba(15,23,42,.04));overflow:hidden}.crm-map-card{display:grid;grid-template-rows:auto minmax(30rem,1fr) auto}.crm-map-card__header{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem .8rem;border-bottom:1px solid var(--ok-line-e9edf2,#e9edf2)}.crm-map-card__header>div:first-child{display:flex;align-items:center;gap:.55rem;min-width:0}.crm-map-card__icon{width:2.15rem;height:2.15rem;flex:0 0 2.15rem;border-radius:.64rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.05rem}.crm-map-card__header>div:first-child>span:last-child{display:grid;min-width:0;gap:.05rem}.crm-map-card__header strong{color:var(--ok-ink-253044,#253044);font-size:.65rem}.crm-map-card__header small{overflow:hidden;color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-card__tools{display:flex;align-items:center;gap:.35rem}.crm-map-result-count{padding:.28rem .5rem;border-radius:999px;background:var(--ok-surface-f2f3f8,#f2f3f8);color:var(--ok-ink-5d6575,#5d6575);font-size:.65rem;font-weight:800;white-space:nowrap}.crm-map-card__tools button{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;border:1px solid var(--ok-line-dfe4eb,#dfe4eb);border-radius:.58rem;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-667085,#667085);cursor:pointer}.crm-map-card__tools button:hover{border-color:var(--ok-line-c8c6e3,#c8c6e3);background:var(--ok-surface-f5f4fb,#f5f4fb);color:var(--ok-ink-4f4c8f,#4f4c8f)}.crm-map-card__tools .material-symbols-rounded{font-size:.95rem}.crm-map-canvas-wrap{position:relative;min-height:30rem;background:var(--ok-surface-eef2f6,#eef2f6)}.crm-map-canvas{width:100%;height:100%;min-height:clamp(31rem,65vh,48rem);z-index:1}.crm-map-loading,.crm-map-empty{position:absolute;inset:0;z-index:500;display:grid;place-content:center;justify-items:center;gap:.35rem;padding:2rem;background:var(--ok-surface-f8fafc_a900,rgba(248,250,252,.9));text-align:center;backdrop-filter:blur(3px)}.crm-map-loading[hidden],.crm-map-empty[hidden]{display:none}.crm-map-loading strong,.crm-map-empty strong{color:var(--ok-ink-2a3445,#2a3445);font-size:.72rem}.crm-map-loading small,.crm-map-empty small{max-width:20rem;color:var(--ok-ink-778194,#778194);font-size:.65rem;line-height:1.5}.crm-map-empty>.material-symbols-rounded{width:3.2rem;height:3.2rem;border-radius:.9rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.45rem}.crm-map-spinner,.crm-map-button-spinner{display:block;width:1.35rem;height:1.35rem;border:2px solid var(--ok-line-dedcf0,#dedcf0);border-top-color:var(--ok-line-4f4c8f,#4f4c8f);border-radius:50%;animation:crm-map-spin .8s linear infinite}.crm-map-button-spinner{width:.9rem;height:.9rem;border-width:2px}.crm-map-legend{display:flex;align-items:center;gap:.85rem;flex-wrap:wrap;padding:.58rem .8rem;border-top:1px solid var(--ok-line-e9edf2,#e9edf2);color:var(--ok-ink-6e7787,#6e7787);font-size:.65rem}.crm-map-legend>span{display:flex;align-items:center;gap:.28rem}.crm-map-legend i{width:.55rem;height:.55rem;border:2px solid var(--ok-line-ffffff,#fff);border-radius:50%;box-shadow:0 0 0 1px var(--ok-shadow-d8dde5,#d8dde5);background:var(--ok-surface-22a06b,#22a06b)}.crm-map-legend i.is-warning{background:var(--ok-surface-d97706,#d97706)}.crm-map-legend i.is-danger{background:var(--ok-surface-dc3f4f,#dc3f4f)}.crm-map-legend small{margin-left:auto;color:var(--ok-ink-9199a7,#9199a7);font-size:.65rem}.crm-map-list-card{display:grid;grid-template-rows:auto minmax(0,1fr);max-height:calc(clamp(31rem,65vh,48rem) + 7rem)}.crm-map-list-card>header{display:flex;align-items:center;justify-content:space-between;gap:.65rem;padding:.72rem .75rem;border-bottom:1px solid var(--ok-line-e9edf2,#e9edf2)}.crm-map-list-card>header>div{display:flex;align-items:center;gap:.5rem;min-width:0}.crm-map-list-card>header .material-symbols-rounded{width:2rem;height:2rem;border-radius:.58rem;background:var(--ok-surface-eef2ff,#eef2ff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.95rem}.crm-map-list-card>header>div>span:last-child{display:grid;min-width:0;gap:.05rem}.crm-map-list-card>header strong{color:var(--ok-ink-253044,#253044);font-size:.65rem}.crm-map-list-card>header small{color:var(--ok-ink-8a94a5,#8a94a5);font-size:.65rem}.crm-map-list-card>header>b{display:grid;place-items:center;min-width:1.7rem;height:1.7rem;padding:0 .38rem;border-radius:999px;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.65rem}.crm-map-client-list{display:grid;align-content:start;gap:.42rem;padding:.6rem;overflow:auto}.crm-map-client{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 1rem;align-items:center;gap:.5rem;width:100%;padding:.55rem;border:1px solid var(--ok-line-e8ecf1,#e8ecf1);border-radius:.75rem;background:var(--ok-surface-ffffff,#fff);color:inherit;text-align:left;cursor:pointer}.crm-map-client:hover{border-color:var(--ok-line-c9c8e6,#c9c8e6);background:var(--ok-surface-fbfbfe,#fbfbfe)}.crm-map-client:focus-visible{outline:3px solid var(--ok-line-2563eb_a240,rgba(37,99,235,.24));outline-offset:1px}.crm-map-client__avatar{display:flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:.65rem;background:var(--ok-surface-eaf8ef,#eaf8ef);color:var(--ok-ink-15803d,#15803d);font-size:.7rem;font-weight:900}.crm-map-client.is-warning .crm-map-client__avatar{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309)}.crm-map-client.is-danger .crm-map-client__avatar{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.crm-map-client__copy{display:grid;min-width:0;gap:.06rem}.crm-map-client__copy>strong{overflow:hidden;color:var(--ok-ink-2d3748,#2d3748);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-client__copy>small{overflow:hidden;color:var(--ok-ink-818b9b,#818b9b);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-client__badges{display:flex;align-items:center;gap:.25rem;margin-top:.18rem;min-width:0}.crm-map-client__badges i{padding:.18rem .32rem;border-radius:999px;background:var(--ok-surface-f1f3f6,#f1f3f6);color:var(--ok-ink-687181,#687181);font-size:.65rem;font-style:normal;font-weight:800;white-space:nowrap}.crm-map-client__badges i.is-danger{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-b4232f,#b4232f)}.crm-map-client>.material-symbols-rounded{color:var(--ok-ink-9ba3b0,#9ba3b0);font-size:.85rem}.crm-map-list-empty{display:grid;place-content:center;justify-items:center;gap:.4rem;padding:2rem;color:var(--ok-ink-7c8696,#7c8696);text-align:center}.crm-map-list-empty[hidden]{display:none}.crm-map-list-empty>.material-symbols-rounded{font-size:1.5rem}.crm-map-list-empty p{margin:0;font-size:.65rem}.crm-map-notice{display:flex;align-items:flex-start;gap:.55rem;padding:.7rem .8rem;border:1px solid var(--ok-line-dce7f7,#dce7f7);border-radius:.8rem;background:var(--ok-surface-f6faff,#f6faff);color:var(--ok-ink-5a6677,#5a6677)}.crm-map-notice>.material-symbols-rounded{width:1.75rem;height:1.75rem;flex:0 0 1.75rem;border-radius:.5rem;background:var(--ok-surface-eaf3ff,#eaf3ff);color:var(--ok-ink-2563eb,#2563eb);font-size:.9rem}.crm-map-notice p{margin:.13rem 0 0;font-size:.65rem;line-height:1.5}.crm-map-notice strong{color:var(--ok-ink-334155,#334155)}.crm-map-page .leaflet-container{font-family:inherit;background:var(--ok-surface-e8edf2,#e8edf2)}.crm-map-page .leaflet-control-zoom,.crm-map-page .leaflet-control-layers,.crm-map-page .leaflet-control-scale-line{border-color:var(--ok-line-4f4c8f_a180,rgba(79,76,143,.18));box-shadow:0 5px 18px var(--ok-shadow-0f172a_a120,rgba(15,23,42,.12))}.crm-map-page .leaflet-control-zoom a{display:flex;align-items:center;justify-content:center;color:var(--ok-ink-4f4c8f,#4f4c8f)}.crm-map-page .leaflet-control-attribution{padding:.2rem .4rem;background:var(--ok-surface-ffffff_a880,rgba(255,255,255,.88));color:var(--ok-ink-657084,#657084);font-size:.65rem}.crm-map-page .leaflet-control-attribution a{color:var(--ok-ink-4f4c8f,#4f4c8f)}.crm-map-page .leaflet-tooltip{padding:.35rem .48rem;border:0;border-radius:.5rem;box-shadow:0 8px 22px var(--ok-shadow-0f172a_a160,rgba(15,23,42,.16));color:var(--ok-ink-273043,#273043);font-size:.65rem;font-weight:800}.crm-map-page .leaflet-popup-content-wrapper{border-radius:.9rem;box-shadow:0 18px 45px var(--ok-shadow-0f172a_a200,rgba(15,23,42,.2))}.crm-map-page .leaflet-popup-content{width:auto!important;margin:.7rem}.crm-map-popup{display:grid;gap:.55rem;min-width:17rem;color:var(--ok-ink-273043,#273043)}.crm-map-popup__header{display:grid;grid-template-columns:2.4rem minmax(0,1fr) auto;align-items:center;gap:.55rem;padding-bottom:.5rem;border-bottom:1px solid var(--ok-line-edf0f4,#edf0f4)}.crm-map-popup__avatar{display:flex;align-items:center;justify-content:center;width:2.4rem;height:2.4rem;border-radius:.7rem;background:var(--ok-surface-eaf8ef,#eaf8ef);color:var(--ok-ink-15803d,#15803d);font-size:.76rem;font-weight:900}.crm-map-popup__avatar.is-warning{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-b45309,#b45309)}.crm-map-popup__avatar.is-danger{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.crm-map-popup__header>div{display:grid;min-width:0;gap:.05rem}.crm-map-popup__header strong{overflow:hidden;font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-popup__header small{overflow:hidden;color:var(--ok-ink-8992a1,#8992a1);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-popup__status{padding:.22rem .38rem;border-radius:999px;background:var(--ok-surface-eaf8ef,#eaf8ef);color:var(--ok-ink-15803d,#15803d);font-size:.65rem;font-weight:850;white-space:nowrap}.crm-map-popup__status.is-warning{background:var(--ok-surface-fff7e6,#fff7e6);color:var(--ok-ink-a85a08,#a85a08)}.crm-map-popup__status.is-danger{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-b4232f,#b4232f)}.crm-map-popup__context{display:grid;gap:.28rem}.crm-map-popup__context p{display:grid;grid-template-columns:1rem minmax(0,1fr);align-items:start;gap:.3rem;margin:0;color:var(--ok-ink-687385,#687385);font-size:.65rem;line-height:1.4}.crm-map-popup__context .material-symbols-rounded{font-size:.8rem;color:var(--ok-ink-7d78b3,#7d78b3)}.crm-map-popup__metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem}.crm-map-popup__metric{display:grid;grid-template-columns:1.6rem minmax(0,1fr);align-items:center;gap:.35rem;padding:.4rem;border:1px solid var(--ok-line-e9edf2,#e9edf2);border-radius:.58rem;background:var(--ok-surface-fafbfc,#fafbfc)}.crm-map-popup__metric>.material-symbols-rounded{width:1.6rem;height:1.6rem;border-radius:.45rem;background:var(--ok-surface-eeedf8,#eeedf8);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.78rem}.crm-map-popup__metric.is-danger>.material-symbols-rounded{background:var(--ok-surface-fff0f0,#fff0f0);color:var(--ok-ink-c93636,#c93636)}.crm-map-popup__metric>span:last-child{display:grid;min-width:0;gap:.02rem}.crm-map-popup__metric small{color:var(--ok-ink-818b9b,#818b9b);font-size:.65rem}.crm-map-popup__metric strong{overflow:hidden;color:var(--ok-ink-30394a,#30394a);font-size:.65rem;text-overflow:ellipsis;white-space:nowrap}.crm-map-popup__attention{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:.4rem;padding:.45rem;border:1px solid var(--ok-line-f3d7a6,#f3d7a6);border-radius:.58rem;background:var(--ok-surface-fffbf2,#fffbf2)}.crm-map-popup__attention>.material-symbols-rounded{width:1.75rem;height:1.75rem;border-radius:.48rem;background:var(--ok-surface-fff2d9,#fff2d9);color:var(--ok-ink-b45309,#b45309);font-size:.85rem}.crm-map-popup__attention>span{display:grid;gap:.15rem}.crm-map-popup__attention strong{font-size:.65rem;color:var(--ok-ink-804006,#804006)}.crm-map-popup__attention ul{display:grid;gap:.08rem;margin:0;padding-left:.85rem;color:var(--ok-ink-8d5b20,#8d5b20);font-size:.65rem}.crm-map-popup__actions{display:flex;gap:.35rem;flex-wrap:wrap}.crm-map-popup__actions a{display:flex;align-items:center;justify-content:center;min-height:2rem;padding:.4rem .55rem;border:1px solid var(--ok-line-dfe4eb,#dfe4eb);border-radius:.55rem;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.65rem;font-weight:850;text-decoration:none}.crm-map-popup__actions a:hover{background:var(--ok-surface-f4f3fb,#f4f3fb)}.crm-map-popup__actions a.is-primary{border-color:var(--ok-line-4f4c8f,#4f4c8f);background:var(--ok-surface-4f4c8f,#4f4c8f);color:var(--ok-ink-ffffff,#fff)}.crm-map-popup__actions a.is-primary:hover{background:var(--ok-surface-403d75,#403d75)}.ds-button .crm-map-button-spinner{margin-right:.2rem}@keyframes crm-map-spin{to{transform:rotate(360deg)}} @media(max-width:1200px){.crm-map-filter-panel{grid-template-columns:1fr}.crm-map-filters{grid-template-columns:minmax(12rem,1.4fr) repeat(2,minmax(9rem,1fr)) minmax(12rem,1fr) auto}.crm-map-workspace{grid-template-columns:minmax(0,1fr) minmax(16rem,19rem)}} @media(max-width:980px){.crm-map-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-map-filters{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-map-field--search{grid-column:1/-1}.crm-map-attention-toggle{grid-column:1/2}.crm-map-clear{grid-column:2/3}.crm-map-workspace{grid-template-columns:1fr}.crm-map-list-card{max-height:24rem}.crm-map-client-list{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-map-canvas{min-height:32rem}} @media(max-width:640px){.crm-map-page{gap:.75rem}.crm-map-metrics{grid-template-columns:1fr}.crm-map-metric{min-height:4.8rem;padding:.72rem}.crm-map-filter-panel{padding:.72rem}.crm-map-filters{grid-template-columns:1fr}.crm-map-field--search,.crm-map-attention-toggle,.crm-map-clear{grid-column:auto}.crm-map-field input,.crm-map-field select,.crm-map-attention-toggle,.crm-map-clear{min-height:3rem;font-size:.72rem}.crm-map-attention-toggle strong{font-size:.65rem}.crm-map-attention-toggle small{font-size:.65rem}.crm-map-card__header{align-items:flex-start}.crm-map-card__header>div:first-child small{white-space:normal}.crm-map-card__tools{flex-wrap:wrap;justify-content:flex-end}.crm-map-result-count{order:3;width:100%;text-align:right}.crm-map-canvas-wrap,.crm-map-canvas{min-height:62vh}.crm-map-legend{gap:.55rem}.crm-map-legend small{width:100%;margin-left:0}.crm-map-list-card{max-height:28rem}.crm-map-client-list{grid-template-columns:1fr}.crm-map-popup{min-width:15.5rem}.crm-map-popup__header{grid-template-columns:2.25rem minmax(0,1fr)}.crm-map-popup__status{grid-column:2;justify-self:start}.crm-map-popup__metrics{grid-template-columns:1fr 1fr}} @media(max-width:390px){.crm-map-popup{min-width:14rem}.crm-map-popup__metrics{grid-template-columns:1fr}.crm-map-popup__actions a{flex:1 1 auto}.crm-map-card__tools button{width:2.35rem;height:2.35rem}} @media(prefers-reduced-motion:reduce){.crm-map-spinner,.crm-map-button-spinner{animation-duration:1.6s}.leaflet-fade-anim .leaflet-popup,.leaflet-zoom-anim .leaflet-zoom-animated{transition:none!important}} /* Superadministrador — exclusão administrativa segura */ .superadmin-delete-form { display: inline-flex; align-items: center; margin: 0; } .superadmin-delete-button { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 2.35rem; padding: .56rem .78rem; border: 1px solid var(--ok-line-fecaca,#fecaca); border-radius: .72rem; background: var(--ok-surface-fff7f7,#fff7f7); color: var(--ok-ink-b91c1c,#b91c1c); font-size: max(var(--ok-font-size-min, .65rem), .72rem); font-weight: 850; line-height: 1; cursor: pointer; transition: border-color .16s ease, background .16s ease, color .16s ease, transform .16s ease; } .superadmin-delete-button:hover { border-color: var(--ok-line-fca5a5,#fca5a5); background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-991b1b,#991b1b); } .superadmin-delete-button:focus-visible { outline: 3px solid var(--ok-line-dc2626_a180,rgba(220, 38, 38, .18)); outline-offset: 2px; } .superadmin-delete-button:active { transform: translateY(1px); } .superadmin-delete-button .material-symbols-rounded { display: flex; align-items: center; justify-content: center; width: 1.08rem; height: 1.08rem; font-size: 1.08rem; } .superadmin-delete-button--compact { width: 2.35rem; min-width: 2.35rem; padding: 0; } .superadmin-delete-form--compact { flex: 0 0 auto; } .app-flash--danger { border: 1px solid var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-991b1b,#991b1b); } @media (max-width: 640px) { .superadmin-delete-button:not(.superadmin-delete-button--compact) { min-height: 2.75rem; } } /* Superadministrador — encaixe das ações de exclusão nos módulos */ .superadmin-record-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .55rem; min-width: 0; } .superadmin-record-row > :first-child { width: 100%; min-width: 0; } .superadmin-action-cluster { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: .42rem; min-width: 0; } .superadmin-chip-record { display: inline-flex; align-items: center; gap: .4rem; max-width: 100%; padding: .28rem .32rem .28rem .58rem; border: 1px solid var(--ok-line-e5e7eb,#e5e7eb); border-radius: 999px; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-475569,#475569); font-size: max(var(--ok-font-size-min, .65rem), .65rem); line-height: 1.25; } .superadmin-chip-record > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .superadmin-chip-record .superadmin-delete-button--compact { width: 1.9rem; min-width: 1.9rem; min-height: 1.9rem; border-radius: 999px; } @media (max-width: 640px) { .superadmin-record-row { grid-template-columns: minmax(0, 1fr) auto; gap: .42rem; } .superadmin-action-cluster { justify-content: flex-start; } } /* ========================================================== Finance invoices · Pix, public document and responsive UI ========================================================== */ .invoice-pix-card { overflow: hidden; margin: 1rem 0; border: 1px solid var(--ok-line-dfe2f5,#dfe2f5); border-radius: 1.25rem; background: radial-gradient(circle at 90% 0%, var(--ok-surface-4f4c8f_a140,rgba(79, 76, 143, .14)), transparent 32%), linear-gradient(145deg, var(--ok-surface-ffffff,#ffffff) 0%, var(--ok-surface-f8f8ff,#f8f8ff) 100%); box-shadow: 0 18px 48px var(--ok-shadow-252b48_a80,rgba(37, 43, 72, .08)); } .invoice-pix-card__header { display: flex; align-items: center; gap: .9rem; padding: 1.1rem 1.2rem; border-bottom: 1px solid var(--ok-line-e6e8f5,#e6e8f5); } .invoice-pix-card__icon { display: flex; flex: 0 0 3rem; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: .95rem; background: linear-gradient(145deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-6f6bb0,#6f6bb0)); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 10px 24px var(--ok-shadow-4f4c8f_a200,rgba(79, 76, 143, .2)); } .invoice-pix-card__icon .material-symbols-rounded { font-size: 1.55rem; } .invoice-pix-card__header small, .invoice-pix-card__amount span, .invoice-copy-field > span, .invoice-public-link small { display: block; color: var(--ok-ink-737d91,#737d91); font-size: .65rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .invoice-pix-card__header h2 { margin: .12rem 0 .18rem; color: var(--ok-ink-272449,#272449); font-size: 1.08rem; line-height: 1.25; } .invoice-pix-card__header p { margin: 0; color: var(--ok-ink-68748a,#68748a); font-size: .78rem; } .invoice-pix-card__content { display: grid; grid-template-columns: minmax(13rem, 17rem) minmax(0, 1fr); gap: 1.4rem; align-items: center; padding: 1.25rem; } .invoice-pix-card__qr { display: flex; align-items: center; justify-content: center; min-height: 16rem; padding: .75rem; border: 1px solid var(--ok-line-e1e5ee,#e1e5ee); border-radius: 1rem; background: var(--ok-surface-ffffff,#fff); } .invoice-pix-card__qr img { display: block; width: min(100%, 15.5rem); height: auto; aspect-ratio: 1; } .invoice-pix-card__qr-unavailable { display: flex; min-height: 13rem; flex-direction: column; align-items: center; justify-content: center; gap: .4rem; color: var(--ok-ink-68748a,#68748a); text-align: center; } .invoice-pix-card__qr-unavailable .material-symbols-rounded { font-size: 3.2rem; color: var(--ok-ink-8985bd,#8985bd); } .invoice-pix-card__qr-unavailable strong { color: var(--ok-ink-34315f,#34315f); } .invoice-pix-card__qr-unavailable small { font-size: .7rem; } .invoice-pix-card__details { min-width: 0; } .invoice-pix-card__amount { margin-bottom: .9rem; } .invoice-pix-card__amount strong { display: block; margin: .12rem 0; color: var(--ok-ink-29264f,#29264f); font-size: 1.55rem; letter-spacing: -.035em; } .invoice-pix-card__amount small { color: var(--ok-ink-6d788c,#6d788c); font-size: .72rem; } .invoice-copy-field { display: block; } .invoice-copy-field textarea { width: 100%; min-height: 6.7rem; margin-top: .38rem; padding: .8rem; resize: vertical; border: 1px solid var(--ok-line-d9deea,#d9deea); border-radius: .8rem; outline: none; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-263044,#263044); font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: .68rem; line-height: 1.5; overflow-wrap: anywhere; transition: border-color .18s ease, box-shadow .18s ease; } .invoice-copy-field textarea:focus { border-color: var(--ok-line-7773ae,#7773ae); box-shadow: 0 0 0 .22rem var(--ok-shadow-4f4c8f_a130,rgba(79, 76, 143, .13)); } .invoice-copy-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; margin-top: .72rem; padding: .7rem 1rem; border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius: .78rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; } .invoice-copy-button:hover { transform: translateY(-1px); background: var(--ok-surface-403d78,#403d78); box-shadow: 0 10px 22px var(--ok-shadow-4f4c8f_a180,rgba(79, 76, 143, .18)); } .invoice-copy-button.is-copied { border-color: var(--ok-line-16865b,#16865b); background: var(--ok-surface-16865b,#16865b); } .invoice-copy-button .material-symbols-rounded { font-size: 1.08rem; } .invoice-copy-feedback { min-height: 1rem; margin: .45rem 0 0; color: var(--ok-ink-68748a,#68748a); font-size: .68rem; } .invoice-copy-feedback.is-success { color: var(--ok-ink-12734d,#12734d); } .invoice-copy-feedback.is-error { color: var(--ok-ink-b42332,#b42332); } .invoice-pix-card__settled { display: flex; align-items: center; gap: .75rem; padding: 1.2rem; color: var(--ok-ink-166a49,#166a49); background: var(--ok-surface-effaf5,#effaf5); } .invoice-pix-card__settled > .material-symbols-rounded { font-size: 1.7rem; } .invoice-pix-card__settled strong, .invoice-pix-card__settled small { display: block; } .invoice-pix-card__settled small { margin-top: .15rem; color: var(--ok-ink-4f7667,#4f7667); font-size: .7rem; } .invoice-public-link { display: grid; grid-template-columns: minmax(12rem, auto) minmax(15rem, 1fr); gap: 1rem; align-items: center; padding: .9rem 1.2rem; border-top: 1px solid var(--ok-line-e5e7f2,#e5e7f2); background: var(--ok-surface-f6f7fd_a860,rgba(246, 247, 253, .86)); } .invoice-public-link > div:first-child { display: flex; align-items: center; gap: .65rem; min-width: 0; } .invoice-public-link > div:first-child > .material-symbols-rounded { display: flex; flex: 0 0 2.2rem; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .7rem; background: var(--ok-surface-e8e9f7,#e8e9f7); color: var(--ok-ink-4f4c8f,#4f4c8f); } .invoice-public-link strong { display: block; color: var(--ok-ink-34315f,#34315f); font-size: .76rem; } .invoice-public-link__field { display: grid; grid-template-columns: minmax(0, 1fr) 2.45rem 2.45rem; overflow: hidden; border: 1px solid var(--ok-line-d9deea,#d9deea); border-radius: .75rem; background: var(--ok-surface-ffffff,#fff); } .invoice-public-link__field input { min-width: 0; height: 2.55rem; padding: 0 .72rem; border: 0; outline: 0; color: var(--ok-ink-556176,#556176); background: transparent; font-size: .68rem; } .invoice-public-link__field button, .invoice-public-link__field a { display: flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid var(--ok-line-e2e5ec,#e2e5ec); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; text-decoration: none; } .invoice-public-link__field .material-symbols-rounded { font-size: 1.05rem; } .invoice-admin-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17rem, .75fr); gap: 1rem; align-items: start; } .invoice-admin-side { display: grid; gap: 1rem; } .portal-invoice-page-head { gap: 1rem; } .portal-invoice-head-actions { display: flex; align-items: center; justify-content: flex-end; gap: .55rem; flex-wrap: wrap; } .portal-invoice-head-actions .portal-secondary-button { margin: 0; text-decoration: none; } .invoice-public-body { min-height: 100vh; margin: 0; background: radial-gradient(circle at 12% 0%, var(--ok-surface-4f4c8f_a150,rgba(79, 76, 143, .15)), transparent 27rem), radial-gradient(circle at 95% 8%, var(--ok-surface-2563eb_a100,rgba(37, 99, 235, .10)), transparent 25rem), var(--ok-surface-f4f6fa,#f4f6fa); color: var(--ok-ink-20283a,#20283a); } .invoice-public-shell { width: min(74rem, calc(100% - 2rem)); margin: 0 auto; padding: 1.1rem 0 2rem; } .invoice-public-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .9rem 0 1.25rem; } .invoice-public-brand { display: inline-flex; align-items: center; gap: .7rem; color: inherit; text-decoration: none; } .invoice-public-brand__mark { display: flex; flex: 0 0 2.75rem; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border-radius: .9rem; background: linear-gradient(145deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-6c68ae,#6c68ae)); color: var(--ok-ink-ffffff,#fff); font-size: 1.25rem; font-weight: 900; box-shadow: 0 12px 24px var(--ok-shadow-4f4c8f_a220,rgba(79, 76, 143, .22)); } .invoice-public-brand strong, .invoice-public-brand small { display: block; } .invoice-public-brand strong { color: var(--ok-ink-28264c,#28264c); font-size: .94rem; } .invoice-public-brand small { margin-top: .06rem; color: var(--ok-ink-6c778b,#6c778b); font-size: .65rem; } .invoice-public-header__actions { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; } .invoice-public-button { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 2.65rem; padding: .62rem .9rem; border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius: .75rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .75rem; font-weight: 800; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; } .invoice-public-button:hover { transform: translateY(-1px); box-shadow: 0 10px 22px var(--ok-shadow-4f4c8f_a180,rgba(79, 76, 143, .18)); } .invoice-public-button--secondary { border-color: var(--ok-line-d8dce7,#d8dce7); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-413e75,#413e75); } .invoice-public-button .material-symbols-rounded { font-size: 1.08rem; } .invoice-public-hero { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.35rem 1.45rem; border: 1px solid var(--ok-line-d7dbeb_a900,rgba(215, 219, 235, .9)); border-radius: 1.2rem; background: linear-gradient(110deg, var(--ok-surface-ffffff_a980,rgba(255, 255, 255, .98)), var(--ok-surface-f7f7ff_a960,rgba(247, 247, 255, .96))); box-shadow: 0 18px 45px var(--ok-shadow-252b48_a80,rgba(37, 43, 72, .08)); } .invoice-public-hero small { color: var(--ok-ink-777f91,#777f91); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .invoice-public-hero h1 { margin: .13rem 0 .2rem; color: var(--ok-ink-252247,#252247); font-size: clamp(1.55rem, 4vw, 2.15rem); letter-spacing: -.04em; } .invoice-public-hero p { margin: 0; color: var(--ok-ink-68748a,#68748a); font-size: .78rem; } .invoice-public-status { display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: .42rem .75rem; border-radius: 999px; background: var(--ok-surface-ececf8,#ececf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .68rem; font-weight: 900; white-space: nowrap; } .invoice-public-status--success { background: var(--ok-surface-e7f8ef,#e7f8ef); color: var(--ok-ink-137449,#137449); } .invoice-public-status--danger { background: var(--ok-surface-fdebec,#fdebec); color: var(--ok-ink-b42332,#b42332); } .invoice-public-status--warning { background: var(--ok-surface-fff3d6,#fff3d6); color: var(--ok-ink-8b6200,#8b6200); } .invoice-public-status--neutral { background: var(--ok-surface-edf1f5,#edf1f5); color: var(--ok-ink-576272,#576272); } .invoice-public-status--info { background: var(--ok-surface-e7f2ff,#e7f2ff); color: var(--ok-ink-1a67aa,#1a67aa); } .invoice-public-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; margin: .9rem 0; } .invoice-public-metrics article { min-width: 0; padding: .9rem 1rem; border: 1px solid var(--ok-line-e1e4ec,#e1e4ec); border-radius: .95rem; background: var(--ok-surface-ffffff_a920,rgba(255, 255, 255, .92)); } .invoice-public-metrics span { display: block; margin-bottom: .3rem; color: var(--ok-ink-737e91,#737e91); font-size: .65rem; font-weight: 700; } .invoice-public-metrics strong { display: block; color: var(--ok-ink-29264e,#29264e); font-size: .9rem; overflow-wrap: anywhere; } .invoice-public-metrics .is-overdue { border-color: var(--ok-line-f1c8cd,#f1c8cd); background: var(--ok-surface-fff8f8,#fff8f8); } .invoice-public-metrics .is-overdue strong { color: var(--ok-ink-ae2433,#ae2433); } .invoice-public-content-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(17rem, .75fr); gap: 1rem; align-items: start; margin-top: 1rem; } .invoice-public-side { display: grid; gap: 1rem; } .invoice-public-card { overflow: hidden; padding: 1.1rem; border: 1px solid var(--ok-line-e1e4ec,#e1e4ec); border-radius: 1rem; background: var(--ok-surface-ffffff_a960,rgba(255, 255, 255, .96)); box-shadow: 0 14px 34px var(--ok-shadow-262c44_a55,rgba(38, 44, 68, .055)); } .invoice-public-card__heading { display: flex; align-items: center; gap: .65rem; margin-bottom: .85rem; } .invoice-public-card__heading > .material-symbols-rounded { display: flex; flex: 0 0 2.25rem; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; border-radius: .72rem; background: var(--ok-surface-ededfa,#ededfa); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.14rem; } .invoice-public-card__heading h2 { margin: 0; color: var(--ok-ink-2d2a55,#2d2a55); font-size: .9rem; } .invoice-public-card__heading p { margin: .12rem 0 0; color: var(--ok-ink-707b8f,#707b8f); font-size: .68rem; } .invoice-public-table-wrap { overflow-x: auto; } .invoice-public-table { width: 100%; border-collapse: collapse; } .invoice-public-table th, .invoice-public-table td { padding: .72rem .65rem; border-bottom: 1px solid var(--ok-line-e7e9ef,#e7e9ef); text-align: left; font-size: .72rem; } .invoice-public-table th { color: var(--ok-ink-68748a,#68748a); background: var(--ok-surface-f7f8fb,#f7f8fb); font-size: .65rem; font-weight: 800; } .invoice-public-table th:nth-child(n+2), .invoice-public-table td:nth-child(n+2) { text-align: right; } .invoice-public-table tfoot th, .invoice-public-table tfoot td { background: var(--ok-surface-fafbfc,#fafbfc); font-weight: 700; } .invoice-public-table tfoot .is-total th, .invoice-public-table tfoot .is-total td { border-bottom: 0; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .78rem; } .invoice-public-details { display: grid; gap: .68rem; margin: 0; } .invoice-public-details div { min-width: 0; } .invoice-public-details dt { color: var(--ok-ink-737e91,#737e91); font-size: .65rem; } .invoice-public-details dd { margin: .13rem 0 0; color: var(--ok-ink-283147,#283147); font-size: .72rem; font-weight: 700; overflow-wrap: anywhere; } .invoice-public-security-copy, .invoice-public-notes > p { margin: 0; color: var(--ok-ink-5f6b80,#5f6b80); font-size: .72rem; line-height: 1.6; white-space: pre-wrap; } .invoice-public-notes { margin-top: 1rem; } .invoice-public-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.1rem; padding: 1rem .2rem 0; border-top: 1px solid var(--ok-line-dde1ea,#dde1ea); color: var(--ok-ink-748094,#748094); font-size: .65rem; } @media (max-width: 980px) { .invoice-admin-grid, .invoice-public-content-grid { grid-template-columns: 1fr; } .invoice-public-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 760px) { .invoice-pix-card__content { grid-template-columns: 1fr; } .invoice-pix-card__qr { min-height: auto; } .invoice-pix-card__qr img { width: min(100%, 14rem); } .invoice-public-link { grid-template-columns: 1fr; } .invoice-public-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .invoice-public-header, .invoice-public-hero, .portal-invoice-page-head { align-items: flex-start; flex-direction: column; } .invoice-public-header__actions, .portal-invoice-head-actions { width: 100%; justify-content: flex-start; } .invoice-public-button, .portal-invoice-head-actions .portal-secondary-button { flex: 1 1 auto; } .invoice-public-side { grid-template-columns: 1fr; } .invoice-public-table thead { display: none; } .invoice-public-table tbody tr { display: block; padding: .65rem 0; border-bottom: 1px solid var(--ok-line-e7e9ef,#e7e9ef); } .invoice-public-table tbody td { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem .2rem; border: 0; text-align: right !important; } .invoice-public-table tbody td::before { content: attr(data-label); color: var(--ok-ink-727d90,#727d90); font-size: .65rem; text-align: left; } .invoice-public-table tfoot th, .invoice-public-table tfoot td { padding: .6rem .45rem; } } @media (max-width: 520px) { .invoice-public-shell { width: min(100% - 1rem, 74rem); padding-top: .45rem; } .invoice-public-header__actions, .portal-invoice-head-actions { display: grid; grid-template-columns: 1fr 1fr; } .invoice-public-header__actions .invoice-public-button:last-child:nth-child(odd) { grid-column: 1 / -1; } .invoice-public-metrics { gap: .5rem; } .invoice-public-metrics article, .invoice-public-card, .invoice-pix-card__content, .invoice-pix-card__header, .invoice-public-link { padding: .85rem; } .invoice-pix-card__header { align-items: flex-start; } .invoice-pix-card__icon { flex-basis: 2.65rem; width: 2.65rem; height: 2.65rem; } .invoice-public-link__field { grid-template-columns: minmax(0, 1fr) 2.5rem 2.5rem; } .invoice-public-footer { align-items: flex-start; flex-direction: column; gap: .25rem; } } @media print { .invoice-public-header__actions, .invoice-public-link { display: none !important; } .invoice-public-body { background: var(--ok-surface-ffffff,#fff); } .invoice-public-shell { width: 100%; padding: 0; } .invoice-public-card, .invoice-pix-card, .invoice-public-hero { box-shadow: none; break-inside: avoid; } } /* CRM · Importação de leads CSV 1.0.0 */ .crm-import-page { --crm-import-border: var(--ok-line-dce3ee,#dce3ee); --crm-import-muted: var(--ok-ink-64748b,#64748b); --crm-import-surface: var(--ok-surface-ffffff,#ffffff); --crm-import-soft: var(--ok-surface-f8fafc,#f8fafc); } .crm-import-alert { display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; padding: .85rem 1rem; border: 1px solid; border-radius: .9rem; font-size: .78rem; font-weight: 650; } .crm-import-alert .material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1.25rem; } .crm-import-alert--success { color: var(--ok-ink-166534,#166534); background: var(--ok-surface-f0fdf4,#f0fdf4); border-color: var(--ok-line-bbf7d0,#bbf7d0); } .crm-import-alert--danger { color: var(--ok-ink-991b1b,#991b1b); background: var(--ok-surface-fef2f2,#fef2f2); border-color: var(--ok-line-fecaca,#fecaca); } .crm-import-upload { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(15rem, .6fr); gap: 1rem; align-items: start; } .crm-import-dropzone { grid-row: span 2; min-height: 13rem; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem; padding: 1.5rem; border: 1.5px dashed var(--ok-line-b9c4d6,#b9c4d6); border-radius: 1rem; background: linear-gradient(145deg, var(--ok-surface-fafaff,#fafaff), var(--ok-surface-f5f7ff,#f5f7ff)); text-align: center; cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; } .crm-import-dropzone:hover, .crm-import-dropzone:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 4px var(--ok-shadow-4f4c8f_a90,rgba(79, 76, 143, .09)); transform: translateY(-1px); } .crm-import-dropzone > .material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; width: 3.2rem; height: 3.2rem; border-radius: .95rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f_a100,rgba(79, 76, 143, .1)); font-size: 1.75rem; } .crm-import-dropzone strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .88rem; } .crm-import-dropzone small, .crm-import-dropzone em { color: var(--ok-ink-64748b,var(--crm-import-muted)); font-size: .7rem; font-style: normal; } .crm-import-dropzone em { max-width: 100%; margin-top: .35rem; padding: .4rem .7rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-ffffff,#fff); box-shadow: inset 0 0 0 1px var(--ok-shadow-dce3ee,var(--crm-import-border)); color: var(--ok-ink-3730a3,#3730a3); text-overflow: ellipsis; white-space: nowrap; } .crm-import-dropzone input { position: absolute; width: 1px; height: 1px; overflow: hidden; opacity: 0; } .crm-import-guidance { padding: .85rem 1rem; border: 1px solid var(--ok-line-dce3ee,var(--crm-import-border)); border-radius: .85rem; background: var(--ok-surface-f8fafc,var(--crm-import-soft)); } .crm-import-guidance strong { display: block; margin-bottom: .45rem; color: var(--ok-ink-334155,#334155); font-size: .75rem; } .crm-import-guidance ol { margin: 0; padding-left: 1.1rem; color: var(--ok-ink-64748b,var(--crm-import-muted)); font-size: .7rem; line-height: 1.6; } .crm-import-upload .crm-form-actions { grid-column: 1 / -1; margin-top: 0; } .crm-import-summary { display: grid; grid-template-columns: repeat(5, minmax(8rem, 1fr)); gap: .75rem; } .crm-import-summary article { display: flex; min-height: 7.1rem; flex-direction: column; justify-content: center; gap: .18rem; padding: .85rem; border: 1px solid var(--ok-line-dce3ee,var(--crm-import-border)); border-radius: .9rem; background: var(--ok-surface-ffffff,var(--crm-import-surface)); } .crm-import-summary article span, .crm-import-summary article small { color: var(--ok-ink-64748b,var(--crm-import-muted)); font-size: .68rem; } .crm-import-summary article strong { color: var(--ok-ink-1e293b,#1e293b); font-size: 1.35rem; line-height: 1; } .crm-import-summary article.is-success { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f7fef9,#f7fef9); } .crm-import-summary article.is-warning { border-color: var(--ok-line-fde68a,#fde68a); background: var(--ok-surface-fffbeb,#fffbeb); } .crm-import-summary article.is-danger { border-color: var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fff8f8,#fff8f8); } .crm-import-summary article.is-brand { border-color: var(--ok-line-c7d2fe,#c7d2fe); background: var(--ok-surface-f7f7ff,#f7f7ff); } .crm-import-meta { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin-top: 1rem; color: var(--ok-ink-64748b,var(--crm-import-muted)); font-size: .7rem; } .crm-import-meta > span { display: inline-flex; align-items: center; gap: .35rem; } .crm-import-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--ok-line-edf1f6,#edf1f6); } .crm-import-link { display: inline-flex; align-items: center; gap: .4rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .72rem; font-weight: 750; text-decoration: none; } .crm-import-link .material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; } .crm-import-toolbar { display: flex; justify-content: flex-end; margin-bottom: .75rem; } .crm-import-toolbar label { display: flex; align-items: center; gap: .55rem; color: var(--ok-ink-475569,#475569); font-size: .7rem; font-weight: 700; } .crm-import-toolbar select { min-width: 11rem; padding: .55rem .75rem; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .65rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; } .crm-import-table-wrap { overflow-x: auto; border: 1px solid var(--ok-line-dce3ee,var(--crm-import-border)); border-radius: .9rem; } .crm-import-table { width: 100%; min-width: 70rem; border-collapse: collapse; } .crm-import-table th { padding: .72rem .8rem; border-bottom: 1px solid var(--ok-line-dce3ee,var(--crm-import-border)); background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; letter-spacing: .035em; text-align: left; text-transform: uppercase; } .crm-import-table td { padding: .8rem; border-bottom: 1px solid var(--ok-line-edf1f6,#edf1f6); color: var(--ok-ink-334155,#334155); font-size: .72rem; vertical-align: top; } .crm-import-table tbody tr:last-child td { border-bottom: 0; } .crm-import-table td strong, .crm-import-table td span, .crm-import-table td small { display: block; } .crm-import-table td strong { color: var(--ok-ink-1e293b,#1e293b); font-size: .75rem; } .crm-import-table td small { margin-top: .18rem; color: var(--ok-ink-64748b,var(--crm-import-muted)); font-size: .66rem; } .crm-import-validation { margin-bottom: .25rem; padding-left: .55rem; border-left: 2px solid; font-size: .67rem; line-height: 1.45; } .crm-import-validation.is-success { color: var(--ok-ink-166534,#166534); border-color: var(--ok-line-22c55e,#22c55e); } .crm-import-validation.is-warning { color: var(--ok-ink-92400e,#92400e); border-color: var(--ok-line-f59e0b,#f59e0b); } .crm-import-validation.is-danger { color: var(--ok-ink-991b1b,#991b1b); border-color: var(--ok-line-ef4444,#ef4444); } .crm-import-pagination { margin-top: 1rem; } .crm-import-history { display: grid; gap: .55rem; } .crm-import-history > button { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: .75rem; padding: .72rem .8rem; border: 1px solid var(--ok-line-dce3ee,var(--crm-import-border)); border-radius: .8rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-334155,#334155); text-align: left; cursor: pointer; transition: border-color .18s ease, background .18s ease; } .crm-import-history > button:hover, .crm-import-history > button.is-active { border-color: var(--ok-line-9b99c7,#9b99c7); background: var(--ok-surface-fafaff,#fafaff); } .crm-import-history > button > .material-symbols-rounded { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; border-radius: .65rem; color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f_a90,rgba(79, 76, 143, .09)); font-size: 1.2rem; } .crm-import-history strong, .crm-import-history small { display: block; } .crm-import-history strong { overflow: hidden; color: var(--ok-ink-1e293b,#1e293b); font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; } .crm-import-history small { margin-top: .15rem; color: var(--ok-ink-64748b,var(--crm-import-muted)); font-size: .65rem; } .crm-import-history b { display: block; color: var(--ok-ink-1e293b,#1e293b); font-size: .78rem; text-align: right; } @media (max-width: 1080px) { .crm-import-summary { grid-template-columns: repeat(3, minmax(8rem, 1fr)); } } @media (max-width: 760px) { .crm-import-upload { grid-template-columns: 1fr; } .crm-import-dropzone { grid-row: auto; min-height: 11rem; } .crm-import-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-import-summary article { min-height: 6rem; } .crm-import-actions { align-items: stretch; flex-direction: column; } .crm-import-actions .ui-button { width: 100%; justify-content: center; } .crm-import-toolbar { justify-content: stretch; } .crm-import-toolbar label { width: 100%; justify-content: space-between; } .crm-import-toolbar select { flex: 1; min-width: 0; } .crm-import-table-wrap { overflow: visible; border: 0; } .crm-import-table { min-width: 0; } .crm-import-table thead { display: none; } .crm-import-table, .crm-import-table tbody, .crm-import-table tr, .crm-import-table td { display: block; width: 100%; } .crm-import-table tr { margin-bottom: .75rem; overflow: hidden; border: 1px solid var(--ok-line-dce3ee,var(--crm-import-border)); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); } .crm-import-table td { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: .6rem; border-bottom: 1px solid var(--ok-line-edf1f6,#edf1f6); } .crm-import-table td::before { content: attr(data-label); color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 800; text-transform: uppercase; } .crm-import-history > button { grid-template-columns: auto minmax(0, 1fr) auto; } .crm-import-history > button > :last-child { grid-column: 2 / -1; justify-self: start; } } @media (max-width: 430px) { .crm-import-summary { grid-template-columns: 1fr; } .crm-import-table td { grid-template-columns: 1fr; } } /* -------------------------------------------------------------------------- UI stabilization — CRM forms, pagination and accessibility (1.0.0) -------------------------------------------------------------------------- */ @layer utilities { .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .not-sr-only { position: static !important; width: auto !important; height: auto !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; } } @layer components { .ok-pagination { width: 100%; margin-top: 1rem; } .ok-pagination__nav { display: flex; align-items: center; justify-content: space-between; gap: .85rem 1rem; width: 100%; flex-wrap: wrap; } .ok-pagination__summary { margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; line-height: 1.45; } .ok-pagination__summary strong { color: var(--ok-ink-334155,#334155); font-weight: 850; font-variant-numeric: tabular-nums; } .ok-pagination__controls, .ok-pagination__pages { display: flex; align-items: center; } .ok-pagination__controls { gap: .38rem; margin-left: auto; } .ok-pagination__controls--simple { width: 100%; justify-content: space-between; } .ok-pagination__pages { gap: .24rem; } .ok-pagination__button, .ok-pagination__page, .ok-pagination__ellipsis { display: inline-flex; min-width: 2.25rem; min-height: 2.25rem; align-items: center; justify-content: center; border: 1px solid var(--ok-line-dfe5ec,#dfe5ec); border-radius: .62rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-475569,#475569); font-size: .7rem; font-weight: 800; line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; } .ok-pagination__button { gap: .25rem; min-width: auto; padding: .55rem .7rem; cursor: pointer; } .ok-pagination__button .material-symbols-rounded { font-size: 1rem; } .ok-pagination__page { padding: 0 .35rem; cursor: pointer; } .ok-pagination__button:hover, .ok-pagination__page:hover { border-color: var(--ok-line-b5b0df,#b5b0df); background: var(--ok-surface-f7f6fc,#f7f6fc); color: var(--ok-ink-403d75,#403d75); } .ok-pagination__button:focus-visible, .ok-pagination__page:focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } .ok-pagination__page.is-current { border-color: var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 8px 18px -12px var(--ok-shadow-4f4c8f_a800,rgba(79, 76, 143, .8)); cursor: default; } .ok-pagination__button.is-disabled { border-color: var(--ok-line-e8edf3,#e8edf3); background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-a0aabc,#a0aabc); cursor: not-allowed; box-shadow: none; } .ok-pagination__ellipsis { border-color: transparent; background: transparent; color: var(--ok-ink-94a3b8,#94a3b8); } .ok-pagination button[wire\:loading][disabled], .ok-pagination button:disabled { opacity: .62; cursor: wait; } .crm-form { width: 100%; max-width: none; margin-inline: 0; padding-bottom: .5rem; } .crm-page > .crm-form, .crm-page > form.crm-form { justify-self: stretch; align-self: stretch; } .crm-form-grid, .crm-form-grid--compact { align-items: start; grid-auto-flow: row; grid-auto-rows: max-content; } .crm-form-grid.crm-form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } .crm-form-grid--compact > .crm-field--wide, .crm-form-grid--compact > .crm-field--full { grid-column: 1 / -1; } .crm-field { align-self: start; } .crm-field input:not([type="checkbox"]):not([type="radio"]):not([type="color"]), .crm-field select { height: 2.75rem; min-height: 2.75rem; max-height: 2.75rem; box-sizing: border-box; padding-top: .55rem; padding-bottom: .55rem; line-height: 1.25; } .crm-field textarea { height: auto; min-height: 7rem; max-height: none; box-sizing: border-box; } .crm-field input::placeholder, .crm-field textarea::placeholder { color: var(--ok-ink-8b96a8,#8b96a8); opacity: 1; } .crm-money-input { height: 2.75rem; min-height: 2.75rem; box-sizing: border-box; overflow: hidden; } .crm-money-input input { height: 2.65rem !important; min-height: 2.65rem !important; max-height: 2.65rem !important; } .crm-inline-form { align-self: start; min-width: 0; } .crm-inline-form .crm-form-grid { margin: 0; } .crm-inline-form > .ds-button, .crm-inline-form > .ui-button { width: 100%; justify-content: center; } .crm-form-actions { position: static; inset: auto; z-index: auto; margin-top: .15rem; border-color: var(--ok-line-e2e8f0,#e2e8f0); background: var(--ok-surface-ffffff,#fff); box-shadow: 0 12px 28px -26px var(--ok-shadow-0f172a_a450,rgba(15, 23, 42, .45)); backdrop-filter: none; } .crm-table td, .crm-record-list p, .crm-record-list small, .crm-detail-grid dd { overflow-wrap: anywhere; } } @media (max-width: 1180px) { .crm-form-grid.crm-form-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 700px) { .ok-pagination__nav { align-items: stretch; flex-direction: column; } .ok-pagination__summary { width: 100%; text-align: center; } .ok-pagination__controls { width: 100%; margin-left: 0; justify-content: space-between; } .ok-pagination__pages { max-width: 100%; overflow-x: auto; padding: .1rem; scrollbar-width: thin; } .ok-pagination__button-label { display: none; } .ok-pagination__button { min-width: 2.5rem; padding-inline: .55rem; } .crm-form-grid.crm-form-grid--compact { grid-template-columns: 1fr; } .crm-form-grid--compact > .crm-field--wide, .crm-form-grid--compact > .crm-field--full { grid-column: auto; } .crm-form-actions { position: static; padding: .7rem; } } @layer components { .crm-pagination > .ok-pagination, .identity-pagination > .ok-pagination, .governance-pagination > .ok-pagination, .p7-pagination > .ok-pagination, .portal-pagination > .ok-pagination, .crm-import-pagination > .ok-pagination { margin-top: 0; } } /* -------------------------------------------------------------------------- UI Public Typography 1.0.1 — Inter Inter is the canonical product typeface; system fonts are contingency fallbacks. Material Symbols keeps its own font-family through the existing icon rules. -------------------------------------------------------------------------- */ :root { --ok-font-family-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", sans-serif; } .public-body, .invoice-public-body { font-family: var(--ok-font-family-sans); font-size: 16px; line-height: 1.5; font-synthesis: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } .public-body :where(button, input, select, textarea), .invoice-public-body :where(button, input, select, textarea) { font-family: inherit; } .public-body :where(.store-public, .proc-public-page, .public-contract-card), .invoice-public-body :where(.invoice-public-shell, .invoice-pix-card) { font-family: inherit; } /* Explicit fallback for standalone/public views rendered outside x-layouts.public. */ .store-public, .proc-public-body, .invoice-public-body, .public-contract-card { font-family: var(--ok-font-family-sans); } /* -------------------------------------------------------------------------- Global typography contract — Inter -------------------------------------------------------------------------- */ :where(body.app-body, body.identity-guest-body, body.portal-body, body.portal-auth-body, body.public-body, body.invoice-public-body) { font-family: var(--ok-font-family-sans); } /* -------------------------------------------------------------------------- UI Form Geometry 1.0.0 Stable form sizing for Store administration and public checkout. Prevents content-box overflow, native fieldset leakage and oversized checks. -------------------------------------------------------------------------- */ @layer components { .phase4-coupon-form { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .75rem; } .phase4-coupon-form > .crm-field, .phase4-coupon-form > .phase4-form-actions { min-width: 0; } .phase4-coupon-form > .phase4-check-group, .phase4-coupon-form > .phase4-form-actions { grid-column: 1 / -1; } .phase4-check-group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; min-width: 0; min-inline-size: 0; margin: 0; padding: .72rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .8rem; background: var(--ok-surface-fafbfe,#fafbfe); } .phase4-check-group--cycles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .phase4-check-group legend { float: none; width: auto; max-width: 100%; margin: 0; padding: 0 .3rem; color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 850; line-height: 1.35; } .phase4-check-group > small, .phase4-check-group > .portal-field-error { grid-column: 1 / -1; margin: 0; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; font-weight: 600; line-height: 1.4; } .phase4-check-group > label { display: flex; min-width: 0; min-height: 2.55rem; align-items: center; gap: .55rem; margin: 0; padding: .52rem .62rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .68rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 760; line-height: 1.35; cursor: pointer; overflow-wrap: anywhere; } .phase4-check-group > label:hover, .phase4-check-group > label:focus-within { border-color: var(--ok-line-b9b5dc,#b9b5dc); background: var(--ok-surface-fbfaff,#fbfaff); } .phase4-check-group > label:has(input:checked) { border-color: var(--ok-line-8f89c4,#8f89c4); background: var(--ok-surface-f5f4fb,#f5f4fb); color: var(--ok-ink-403d75,#403d75); } .phase4-check-group input[type="checkbox"] { appearance: auto; width: 1.05rem; height: 1.05rem; min-width: 1.05rem; min-height: 1.05rem; max-width: 1.05rem; max-height: 1.05rem; flex: 0 0 1.05rem; margin: 0; padding: 0; border: 0; border-radius: .25rem; background: transparent; box-shadow: none; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .phase4-check-group input[type="checkbox"]:focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } .store-wizard, .store-wizard__main, .store-wizard-panel, .store-form-grid, .store-field, .store-input-action, .store-type-toggle { min-width: 0; min-inline-size: 0; } .store-form-grid > *, .store-type-toggle > * { min-width: 0; } .store-field input, .store-field select, .store-input-action input { box-sizing: border-box; min-width: 0; max-width: 100%; } .store-type-toggle { width: 100%; box-sizing: border-box; } .store-input-action { width: 100%; box-sizing: border-box; } .store-input-action > input { width: 100%; } } @media (max-width: 700px) { .phase4-coupon-form { grid-template-columns: 1fr; } .phase4-coupon-form > .phase4-check-group, .phase4-coupon-form > .phase4-form-actions { grid-column: auto; } .phase4-check-group, .phase4-check-group--cycles { grid-template-columns: 1fr; } } /* Customer Portal topbar controls — Hotfix 8.1.1 */ @layer components { .portal-topbar-heading { min-width: 0; } .portal-topbar-actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .55rem; } .portal-topbar-actions > .portal-online, .portal-topbar-actions > .portal-topbar-ticket, .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile { box-sizing: border-box; min-height: 2.75rem; height: 2.75rem; margin: 0; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .82rem; line-height: 1; vertical-align: middle; } .portal-topbar-actions > .portal-online { display: inline-flex; align-items: center; justify-content: center; gap: .48rem; padding: 0 .9rem; border-color: var(--ok-line-c9f1d6,#c9f1d6); background: var(--ok-surface-effcf4,#effcf4); color: var(--ok-ink-087a34,#087a34); font-size: .76rem; font-weight: 700; white-space: nowrap; } .portal-topbar-actions > .portal-online i { display: block; width: .46rem; height: .46rem; flex: 0 0 .46rem; margin: 0; border-radius: 999px; background: var(--ok-surface-22c55e,#22c55e); box-shadow: 0 0 0 .2rem var(--ok-shadow-dcfce7,#dcfce7); } .portal-topbar-actions > .portal-topbar-ticket { display: inline-flex; width: auto; min-width: 7.85rem; align-items: center; justify-content: center; gap: .48rem; padding: 0 .9rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .portal-topbar-actions > .portal-topbar-ticket .material-symbols-rounded { display: block; width: 1.15rem; height: 1.15rem; flex: 0 0 1.15rem; font-size: 1.15rem; line-height: 1; } .portal-topbar-actions > .portal-topbar-icon-button { position: relative; display: inline-flex; width: 2.75rem; min-width: 2.75rem; align-items: center; justify-content: center; padding: 0; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); text-decoration: none; } .portal-topbar-actions > .portal-topbar-icon-button > .material-symbols-rounded { display: block; width: 1.25rem; height: 1.25rem; font-size: 1.25rem; line-height: 1; } .portal-topbar-actions > .portal-topbar-icon-button > b { position: absolute; top: -.28rem; right: -.28rem; display: grid; min-width: 1.1rem; height: 1.1rem; place-items: center; padding: 0 .2rem; border: 2px solid var(--ok-line-ffffff,#fff); border-radius: 999px; background: var(--ok-surface-dc2626,#dc2626); color: var(--ok-ink-ffffff,#fff); font-size: .62rem; line-height: 1; } .portal-topbar-actions > .portal-topbar-profile { display: grid; width: auto; min-width: 11.1rem; max-width: 15rem; grid-template-columns: 2rem minmax(0, 1fr) 1rem; align-items: center; gap: .62rem; padding: .28rem .68rem .28rem .38rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-172033,#172033); text-decoration: none; } .portal-topbar-profile > .portal-avatar { display: inline-flex; width: 2rem; height: 2rem; min-width: 2rem; align-items: center; justify-content: center; margin: 0; border-radius: .68rem; background: var(--ok-surface-f0eff8,#f0eff8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .8rem; font-weight: 700; line-height: 1; } .portal-topbar-profile-copy { display: grid; min-width: 0; align-content: center; gap: .12rem; line-height: 1.1; } .portal-topbar-profile-copy strong, .portal-topbar-profile-copy small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-topbar-profile-copy strong { color: var(--ok-ink-172033,#172033); font-size: .78rem; font-weight: 700; } .portal-topbar-profile-copy small { color: var(--ok-ink-64748b,#64748b); font-size: .68rem; font-weight: 600; } .portal-topbar-profile-chevron { display: block; width: 1rem; height: 1rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: 1rem; line-height: 1; } .portal-topbar-actions > a:hover { border-color: var(--ok-line-c4c0df,#c4c0df); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-topbar-actions > a:focus-visible { outline: 3px solid var(--ok-line-2563eb_a200,rgba(37, 99, 235, .2)); outline-offset: 2px; } } @media (max-width: 980px) { .portal-topbar-actions > .portal-topbar-ticket { width: 2.75rem; min-width: 2.75rem; padding: 0; } .portal-topbar-ticket > span:last-child { display: none; } .portal-topbar-actions > .portal-topbar-profile { width: 2.75rem; min-width: 2.75rem; grid-template-columns: 2rem; justify-content: center; gap: 0; padding: .28rem; } .portal-topbar-profile-copy, .portal-topbar-profile-chevron { display: none; } } @media (max-width: 520px) { .portal-topbar-actions { gap: .38rem; } .portal-topbar-actions > .portal-online { display: none; } } /* Customer Portal dashboard composition — Hotfix 8.1.2 */ @layer components { .portal-dashboard { width: min(100%, 82rem); margin-inline: auto; gap: 1.1rem; } .portal-dashboard :is(a, button, input) { -webkit-tap-highlight-color: transparent; } .portal-dashboard-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); align-items: center; gap: 1.4rem; min-height: 9.25rem; overflow: hidden; padding: 1.35rem 1.45rem; border: 1px solid var(--ok-line-ffffff_a240,rgba(255, 255, 255, .24)); border-radius: 1.15rem; background: radial-gradient(circle at 82% 12%, var(--ok-surface-ffffff_a160,rgba(255, 255, 255, .16)), transparent 24%), linear-gradient(125deg, var(--ok-surface-4f4c8f,#4f4c8f) 0%, var(--ok-surface-4f5fc4,#4f5fc4) 50%, var(--ok-surface-2563eb,#2563eb) 100%); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 24px 55px -36px var(--ok-shadow-1e3a8a_a720,rgba(30, 58, 138, .72)); } .portal-dashboard-hero::after { content: ""; position: absolute; right: -5rem; bottom: -7rem; width: 18rem; height: 18rem; border: 1px solid var(--ok-line-ffffff_a130,rgba(255, 255, 255, .13)); border-radius: 999px; pointer-events: none; } .portal-dashboard-hero__content, .portal-dashboard-hero__status { position: relative; z-index: 1; min-width: 0; } .portal-dashboard-eyebrow { display: block; color: var(--ok-ink-ffffff_a820,rgba(255, 255, 255, .82)); font-size: .72rem; font-weight: 700; letter-spacing: .02em; } .portal-dashboard-hero h1 { margin: .16rem 0 0; font-size: clamp(1.45rem, 2.2vw, 2rem); font-weight: 700; line-height: 1.15; letter-spacing: -.025em; } .portal-dashboard-hero p { max-width: 47rem; margin: .38rem 0 0; color: var(--ok-ink-ffffff_a840,rgba(255, 255, 255, .84)); font-size: .88rem; line-height: 1.55; } .portal-dashboard-hero__actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .9rem; } .portal-dashboard-button { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: .45rem; padding: .58rem .86rem; border: 1px solid transparent; border-radius: .75rem; font-size: .8rem; font-weight: 700; line-height: 1; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .portal-dashboard-button > .material-symbols-rounded { display: block; width: 1.15rem; height: 1.15rem; font-size: 1.15rem; line-height: 1; } .portal-dashboard-button:hover { transform: translateY(-1px); } .portal-dashboard-button--primary { background: var(--ok-surface-2d256c_a680,rgba(45, 37, 108, .68)); color: var(--ok-ink-ffffff,#fff); box-shadow: inset 0 0 0 1px var(--ok-shadow-ffffff_a80,rgba(255, 255, 255, .08)); } .portal-dashboard-button--primary:hover { background: var(--ok-surface-2a2070_a860,rgba(42, 32, 112, .86)); } .portal-dashboard-button--secondary { border-color: var(--ok-line-ffffff_a520,rgba(255, 255, 255, .52)); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-443f83,#443f83); } .portal-dashboard-button--secondary:hover { background: var(--ok-surface-f8fafc,#f8fafc); } .portal-dashboard-hero__status { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: .85rem; border: 1px solid var(--ok-line-ffffff_a180,rgba(255, 255, 255, .18)); border-radius: .9rem; background: var(--ok-surface-1b2669_a200,rgba(27, 38, 105, .2)); backdrop-filter: blur(10px); } .portal-dashboard-hero__status-icon { display: inline-flex; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; border-radius: .75rem; background: var(--ok-surface-ffffff_a150,rgba(255, 255, 255, .15)); font-size: 1.35rem; line-height: 1; } .portal-dashboard-hero__status :is(small, strong, span) { display: block; min-width: 0; } .portal-dashboard-hero__status small { color: var(--ok-ink-ffffff_a700,rgba(255, 255, 255, .7)); font-size: .66rem; font-weight: 700; text-transform: uppercase; } .portal-dashboard-hero__status strong { margin-top: .1rem; overflow: hidden; font-size: .84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-hero__status span:not(.material-symbols-rounded) { margin-top: .12rem; color: var(--ok-ink-ffffff_a720,rgba(255, 255, 255, .72)); font-size: .68rem; } .portal-dashboard-section { display: grid; gap: .72rem; } .portal-dashboard-section__header { display: flex; min-width: 0; align-items: end; justify-content: space-between; gap: 1rem; } .portal-dashboard-section__header :is(small, h2) { display: block; margin: 0; } .portal-dashboard-section__header small { color: var(--ok-ink-64748b,#64748b); font-size: .7rem; font-weight: 700; } .portal-dashboard-section__header h2 { margin-top: .14rem; color: var(--ok-ink-172033,#172033); font-size: 1.08rem; font-weight: 700; letter-spacing: -.012em; } .portal-dashboard-section__header > span { color: var(--ok-ink-7b8798,#7b8798); font-size: .72rem; } .portal-dashboard-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; } .portal-dashboard-metric { display: grid; min-width: 0; grid-template-columns: 2.55rem minmax(0, 1fr) 1.65rem; align-items: center; gap: .68rem; min-height: 6.15rem; padding: .8rem; border: 1px solid var(--ok-line-dfe5ed,#dfe5ed); border-radius: .95rem; background: var(--ok-surface-ffffff_a960,rgba(255, 255, 255, .96)); color: inherit; text-decoration: none; box-shadow: 0 16px 38px -34px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease; } .portal-dashboard-metric:hover { transform: translateY(-2px); border-color: var(--ok-line-c5c1e2,#c5c1e2); box-shadow: 0 20px 44px -34px var(--ok-shadow-4f4c8f_a650,rgba(79, 76, 143, .65)); } .portal-dashboard-metric__icon, .portal-dashboard-metric__arrow { display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .portal-dashboard-metric__icon { width: 2.55rem; height: 2.55rem; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.25rem; } .portal-dashboard-metric.is-warning .portal-dashboard-metric__icon { background: var(--ok-surface-fff7e6,#fff7e6); color: var(--ok-ink-c56a00,#c56a00); } .portal-dashboard-metric__content { display: block; min-width: 0; } .portal-dashboard-metric__content :is(small, strong, span) { display: block; min-width: 0; } .portal-dashboard-metric__content small { color: var(--ok-ink-657287,#657287); font-size: .66rem; font-weight: 700; letter-spacing: .025em; text-transform: uppercase; } .portal-dashboard-metric__content strong { margin-top: .12rem; color: var(--ok-ink-172033,#172033); font-size: 1.28rem; font-weight: 700; line-height: 1.1; } .portal-dashboard-metric__content span { margin-top: .2rem; overflow: hidden; color: var(--ok-ink-7b8798,#7b8798); font-size: .68rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-metric__arrow { width: 1.65rem; height: 1.65rem; border-radius: .55rem; background: var(--ok-surface-f5f3fb,#f5f3fb); color: var(--ok-ink-5b56a2,#5b56a2); font-size: 1rem; } .portal-dashboard-metric.is-warning .portal-dashboard-metric__arrow { background: var(--ok-surface-fff7e6,#fff7e6); color: var(--ok-ink-c56a00,#c56a00); } .portal-dashboard-activity { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(19rem, .8fr); gap: .8rem; align-items: start; } .portal-dashboard-panel .ds-panel__header { min-height: 4rem; padding: .75rem .88rem; } .portal-dashboard-panel .ds-panel__body { padding: .68rem; } .portal-dashboard-panel__link { display: inline-flex; min-height: 2.15rem; align-items: center; gap: .28rem; padding: .38rem .55rem; border-radius: .58rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .72rem; font-weight: 700; text-decoration: none; } .portal-dashboard-panel__link:hover { background: var(--ok-surface-f3f1fa,#f3f1fa); } .portal-dashboard-panel__link > .material-symbols-rounded { display: block; width: 1rem; height: 1rem; font-size: 1rem; line-height: 1; } .portal-dashboard-list { display: grid; gap: .48rem; } .portal-dashboard-list > a, .portal-dashboard-empty { display: grid; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr) auto; align-items: center; gap: .62rem; min-height: 4rem; padding: .62rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .78rem; background: var(--ok-surface-ffffff,#fff); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .portal-dashboard-list > a:hover { border-color: var(--ok-line-c9c5e5,#c9c5e5); background: var(--ok-surface-fbfaff,#fbfaff); } .portal-dashboard-list__icon, .portal-dashboard-empty > .material-symbols-rounded { display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: .65rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.12rem; line-height: 1; } .portal-dashboard-list__content { display: block; min-width: 0; } .portal-dashboard-list__content :is(strong, small), .portal-dashboard-empty :is(strong, small), .portal-dashboard-list__value :is(strong, small) { display: block; min-width: 0; } .portal-dashboard-list__content strong, .portal-dashboard-empty strong { overflow: hidden; color: var(--ok-ink-263247,#263247); font-size: .82rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-list__content small, .portal-dashboard-empty small { margin-top: .14rem; overflow: hidden; color: var(--ok-ink-7b8798,#7b8798); font-size: .68rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-list__value { display: grid; justify-items: end; gap: .12rem; text-align: right; } .portal-dashboard-list__value strong { color: var(--ok-ink-263247,#263247); font-size: .78rem; font-weight: 700; } .portal-dashboard-list__value small { color: var(--ok-ink-64748b,#64748b); font-size: .64rem; font-weight: 700; } .portal-dashboard-empty { grid-template-columns: 2.35rem minmax(0, 1fr); background: var(--ok-surface-fbfcfe,#fbfcfe); } .portal-dashboard-section--quick { gap: .65rem; } .portal-dashboard-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; } .portal-dashboard-actions > a { display: grid; min-width: 0; grid-template-columns: 2.45rem minmax(0, 1fr) 1.15rem; align-items: center; gap: .62rem; min-height: 4.85rem; padding: .72rem; border: 1px solid var(--ok-line-dfe5ed,#dfe5ed); border-radius: .9rem; background: var(--ok-surface-ffffff_a940,rgba(255, 255, 255, .94)); color: inherit; text-decoration: none; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .portal-dashboard-actions > a:hover { transform: translateY(-1px); border-color: var(--ok-line-c5c1e2,#c5c1e2); background: var(--ok-surface-ffffff,#fff); } .portal-dashboard-actions > a > .material-symbols-rounded:first-child { display: inline-flex; width: 2.45rem; height: 2.45rem; align-items: center; justify-content: center; border-radius: .7rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.18rem; line-height: 1; } .portal-dashboard-actions > a > span:nth-child(2) { display: block; min-width: 0; } .portal-dashboard-actions :is(strong, small) { display: block; min-width: 0; } .portal-dashboard-actions strong { overflow: hidden; color: var(--ok-ink-263247,#263247); font-size: .8rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-actions small { margin-top: .14rem; color: var(--ok-ink-7b8798,#7b8798); font-size: .66rem; line-height: 1.35; } .portal-dashboard-actions > a > .material-symbols-rounded:last-child { display: block; width: 1.15rem; height: 1.15rem; color: var(--ok-ink-8f99a8,#8f99a8); font-size: 1.15rem; line-height: 1; } .portal-dashboard-help { display: grid; grid-template-columns: minmax(0, .95fr) minmax(22rem, 1.05fr); align-items: center; gap: 1rem 1.25rem; padding: 1rem; border: 1px solid var(--ok-line-d9d6ea,#d9d6ea); border-radius: 1rem; background: linear-gradient(135deg, var(--ok-surface-f5f3fb,#f5f3fb) 0%, var(--ok-surface-ffffff,#fff) 55%, var(--ok-surface-eef6ff,#eef6ff) 100%); } .portal-dashboard-help__intro { display: grid; min-width: 0; grid-template-columns: 2.8rem minmax(0, 1fr); align-items: center; gap: .72rem; } .portal-dashboard-help__icon { display: inline-flex; width: 2.8rem; height: 2.8rem; align-items: center; justify-content: center; border-radius: .8rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: 1.35rem; line-height: 1; } .portal-dashboard-help__intro :is(small, h2, p) { display: block; margin: 0; } .portal-dashboard-help__intro small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .68rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .portal-dashboard-help__intro h2 { margin-top: .12rem; color: var(--ok-ink-172033,#172033); font-size: 1rem; font-weight: 700; } .portal-dashboard-help__intro p { margin-top: .26rem; color: var(--ok-ink-69768a,#69768a); font-size: .72rem; line-height: 1.45; } .portal-dashboard-help__search { display: grid; gap: .32rem; } .portal-dashboard-help__search > label { color: var(--ok-ink-465267,#465267); font-size: .7rem; font-weight: 700; } .portal-dashboard-help__search > div { display: grid; min-width: 0; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; min-height: 3.15rem; overflow: hidden; border: 1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 12px 30px -26px var(--ok-shadow-334155,#334155); } .portal-dashboard-help__search > div:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a140,rgba(79, 76, 143, .14)); } .portal-dashboard-help__search .material-symbols-rounded { display: inline-flex; width: 2.6rem; height: 100%; align-items: center; justify-content: center; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.15rem; line-height: 1; } .portal-dashboard-help__search input { width: 100%; min-width: 0; min-height: 3.05rem; border: 0; outline: 0; color: var(--ok-ink-172033,#172033); font-size: .82rem; } .portal-dashboard-help__search input::placeholder { color: var(--ok-ink-8a96a6,#8a96a6); } .portal-dashboard-help__search button { min-height: 2.45rem; margin-right: .3rem; padding: .5rem .78rem; border: 0; border-radius: .65rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .72rem; font-weight: 700; cursor: pointer; } .portal-dashboard-help__articles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; padding-top: .78rem; border-top: 1px solid var(--ok-line-4f4c8f_a130,rgba(79, 76, 143, .13)); } .portal-dashboard-help__articles > a { display: grid; min-width: 0; grid-template-columns: 2.1rem minmax(0, 1fr) 1rem; align-items: center; gap: .52rem; padding: .62rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: .72rem; background: var(--ok-surface-ffffff_a820,rgba(255, 255, 255, .82)); color: inherit; text-decoration: none; } .portal-dashboard-help__articles > a:hover { border-color: var(--ok-line-c5c1e2,#c5c1e2); background: var(--ok-surface-ffffff,#fff); } .portal-dashboard-help__articles > a > .material-symbols-rounded:first-child { display: inline-flex; width: 2.1rem; height: 2.1rem; align-items: center; justify-content: center; border-radius: .58rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; line-height: 1; } .portal-dashboard-help__articles > a > span:nth-child(2) { display: block; min-width: 0; } .portal-dashboard-help__articles :is(strong, small) { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-help__articles strong { color: var(--ok-ink-263247,#263247); font-size: .75rem; font-weight: 700; } .portal-dashboard-help__articles small { margin-top: .1rem; color: var(--ok-ink-7b8798,#7b8798); font-size: .64rem; } .portal-dashboard-help__articles > a > .material-symbols-rounded:last-child { display: block; width: 1rem; height: 1rem; color: var(--ok-ink-8f99a8,#8f99a8); font-size: 1rem; line-height: 1; } .portal-dashboard-help__browse { display: inline-flex; width: max-content; align-items: center; gap: .35rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .78rem; font-weight: 700; text-decoration: none; } .portal-dashboard-help__browse > .material-symbols-rounded { font-size: 1rem; } .portal-dashboard :is(a, button, input):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } } @media (max-width: 1180px) { .portal-dashboard-metrics, .portal-dashboard-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 920px) { .portal-dashboard-hero, .portal-dashboard-help { grid-template-columns: 1fr; } .portal-dashboard-hero__status { width: min(100%, 27rem); } .portal-dashboard-activity { grid-template-columns: 1fr; } } @media (max-width: 680px) { .portal-dashboard { gap: .85rem; } .portal-dashboard-hero { min-height: 0; padding: 1.05rem; border-radius: 1rem; } .portal-dashboard-hero h1 { font-size: 1.45rem; } .portal-dashboard-section__header { align-items: start; } .portal-dashboard-section__header > span { display: none; } .portal-dashboard-metrics, .portal-dashboard-actions, .portal-dashboard-help__articles { grid-template-columns: 1fr; } .portal-dashboard-metric { min-height: 5.6rem; } .portal-dashboard-actions > a { min-height: 4.55rem; } .portal-dashboard-help { padding: .85rem; } } @media (max-width: 460px) { .portal-dashboard-hero__actions { display: grid; grid-template-columns: 1fr; } .portal-dashboard-button { width: 100%; } .portal-dashboard-hero__status { grid-template-columns: 2.45rem minmax(0, 1fr); padding: .72rem; } .portal-dashboard-hero__status-icon { width: 2.45rem; height: 2.45rem; } .portal-dashboard-list > a { grid-template-columns: 2.2rem minmax(0, 1fr); } .portal-dashboard-list > a > :is(.ds-status-badge, .portal-dashboard-list__value) { grid-column: 2; justify-self: start; text-align: left; } .portal-dashboard-list__value { justify-items: start; } .portal-dashboard-help__search > div { grid-template-columns: 2.5rem minmax(0, 1fr); } .portal-dashboard-help__search button { grid-column: 1 / -1; width: calc(100% - .6rem); margin: 0 .3rem .3rem; } } @media (prefers-reduced-motion: reduce) { .portal-dashboard :is(a, button) { transition: none !important; } } /* Customer Portal dashboard alignment and mobile polish — Hotfix 8.1.3 */ .portal-dashboard-hero__status-icon, .portal-dashboard-metric__icon, .portal-dashboard-metric__arrow, .portal-dashboard-list__icon, .portal-dashboard-empty > .material-symbols-rounded, .portal-dashboard-actions > a > .material-symbols-rounded:first-child, .portal-dashboard-actions > a > .material-symbols-rounded:last-child, .portal-dashboard-help__icon, .portal-dashboard-help__search .material-symbols-rounded, .portal-dashboard-help__articles > a > .material-symbols-rounded:first-child, .portal-dashboard-help__articles > a > .material-symbols-rounded:last-child, .portal-dashboard-panel__link > .material-symbols-rounded, .portal-dashboard-button > .material-symbols-rounded, .portal-topbar-ticket > .material-symbols-rounded, .portal-topbar-icon-button > .material-symbols-rounded, .portal-topbar-profile-chevron, .portal-bottom-nav .material-symbols-rounded { display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box; flex: 0 0 auto; margin: 0; padding: 0 !important; line-height: 1 !important; text-align: center; vertical-align: middle; } .portal-dashboard-hero__status-icon, .portal-dashboard-metric__icon, .portal-dashboard-metric__arrow, .portal-dashboard-list__icon, .portal-dashboard-empty > .material-symbols-rounded, .portal-dashboard-actions > a > .material-symbols-rounded:first-child, .portal-dashboard-help__icon, .portal-dashboard-help__articles > a > .material-symbols-rounded:first-child, .portal-dashboard-button > .material-symbols-rounded, .portal-topbar-ticket > .material-symbols-rounded, .portal-topbar-icon-button > .material-symbols-rounded, .portal-topbar-profile-chevron, .portal-bottom-nav .material-symbols-rounded { padding-inline-start: .035rem !important; padding-block-start: .04rem !important; } .portal-dashboard-list__icon, .portal-dashboard-metric__icon, .portal-dashboard-actions > a > .material-symbols-rounded:first-child, .portal-dashboard-help__articles > a > .material-symbols-rounded:first-child { box-shadow: inset 0 0 0 1px var(--ok-shadow-ffffff_a10,rgba(255,255,255,.01)); } @media (max-width: 760px) { .portal-topbar { align-items: flex-start; gap: .65rem; padding: .68rem .82rem; } .portal-topbar-actions { width: 100%; justify-content: flex-end; flex-wrap: wrap; } .portal-main { padding: .9rem .8rem calc(6.35rem + env(safe-area-inset-bottom)); } .portal-bottom-nav { left: .65rem; right: .65rem; bottom: max(.55rem, env(safe-area-inset-bottom)); gap: .25rem; padding: .4rem; } .portal-bottom-nav a { min-height: 3.15rem; padding: .42rem .18rem; } .portal-bottom-nav small { line-height: 1.1; text-align: center; white-space: normal; } .portal-dashboard { gap: 1rem; } .portal-dashboard-section, .portal-dashboard-section--quick { gap: .8rem; } .portal-dashboard-hero { gap: .95rem; padding: 1.05rem 1rem 1rem; border-radius: 1rem; } .portal-dashboard-hero p { font-size: .84rem; } .portal-dashboard-hero__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .55rem; } .portal-dashboard-button { width: 100%; min-height: 2.85rem; padding: .65rem .8rem; } .portal-dashboard-hero__status { width: 100%; max-width: none; grid-template-columns: 2.7rem minmax(0, 1fr); } .portal-dashboard-metric { grid-template-columns: 2.7rem minmax(0, 1fr) 1.7rem; min-height: 5.9rem; padding: .9rem; } .portal-dashboard-metric__content span { overflow: visible; text-overflow: initial; white-space: normal; } .portal-dashboard-list > a, .portal-dashboard-empty { grid-template-columns: 2.35rem minmax(0, 1fr); align-items: start; } .portal-dashboard-list > a > :is(.ds-status-badge, .portal-dashboard-list__value) { grid-column: 2; justify-self: start; margin-top: .18rem; text-align: left; } .portal-dashboard-list__value { justify-items: start; } .portal-dashboard-actions > a { min-height: 4.6rem; padding: .8rem; grid-template-columns: 2.5rem minmax(0, 1fr) 1rem; } .portal-dashboard-actions strong { overflow: visible; line-height: 1.2; text-overflow: initial; white-space: normal; } .portal-dashboard-help { gap: .8rem; padding: .9rem; } .portal-dashboard-help__search > div { grid-template-columns: 2.55rem minmax(0, 1fr); } .portal-dashboard-help__search button { grid-column: 1 / -1; width: calc(100% - .6rem); margin: 0 .3rem .3rem; } } @media (max-width: 560px) { .portal-topbar { flex-direction: column; align-items: stretch; } .portal-topbar-actions { justify-content: flex-start; } .portal-topbar-actions > .portal-topbar-profile { margin-left: auto; } .portal-dashboard-hero__actions { grid-template-columns: 1fr; } .portal-dashboard-section__header { gap: .35rem; } .portal-dashboard-help__intro { grid-template-columns: 2.65rem minmax(0, 1fr); align-items: start; } .portal-dashboard-help__articles > a { grid-template-columns: 2.15rem minmax(0, 1fr); } .portal-dashboard-help__articles > a > .material-symbols-rounded:last-child { grid-column: 2; justify-self: start; margin-top: .2rem; } } /* Customer Portal mobile viewport fit — Hotfix 8.1.4 */ @media (max-width: 760px) { .portal-main { padding: .85rem .78rem calc(8.2rem + env(safe-area-inset-bottom)); overflow-x: clip; } .portal-page, .portal-dashboard { width: 100%; max-width: 100%; min-width: 0; } .portal-dashboard-metrics { gap: .75rem; } .portal-dashboard-metric { min-height: 5.35rem; padding: .82rem; } .portal-dashboard-metric__content small { font-size: .64rem; } .portal-dashboard-metric__content strong { font-size: 1.18rem; } .portal-dashboard-metric__content span { margin-top: .16rem; font-size: .66rem; line-height: 1.3; } .portal-dashboard-panel .ds-panel__body { padding: .6rem; } .portal-dashboard-list > a, .portal-dashboard-empty { min-height: 4.2rem; padding: .68rem; } .portal-bottom-nav { left: .55rem; right: .55rem; bottom: max(.5rem, env(safe-area-inset-bottom)); max-width: calc(100vw - 1.1rem); gap: .18rem; padding: .35rem; overflow: hidden; } .portal-bottom-nav a { min-width: 0; min-height: 3.1rem; padding: .4rem .14rem; } .portal-bottom-nav small { display: block; max-width: 100%; overflow: hidden; line-height: 1.04; text-align: center; text-overflow: ellipsis; white-space: nowrap; } } @media (max-width: 560px) { .portal-topbar { padding: .62rem .72rem; } .portal-topbar-heading strong { font-size: 1rem; } .portal-main { padding: .8rem .72rem calc(8.55rem + env(safe-area-inset-bottom)); } .portal-dashboard-hero { padding: .95rem .92rem .92rem; } .portal-dashboard-hero h1 { font-size: 1.36rem; line-height: 1.12; } .portal-dashboard-hero p { font-size: .8rem; line-height: 1.45; } .portal-dashboard-button { min-height: 2.7rem; font-size: .78rem; } .portal-dashboard-hero__status { padding: .68rem; grid-template-columns: 2.5rem minmax(0, 1fr); gap: .62rem; } .portal-dashboard-hero__status-icon { width: 2.5rem; height: 2.5rem; font-size: 1.2rem; } .portal-dashboard-hero__status strong { font-size: .8rem; white-space: normal; line-height: 1.2; } .portal-dashboard-section__header h2 { font-size: 1rem; line-height: 1.15; } .portal-dashboard-metric { grid-template-columns: 2.55rem minmax(0, 1fr) 1.55rem; min-height: 5.1rem; padding: .78rem; } .portal-dashboard-metric__icon { width: 2.55rem; height: 2.55rem; border-radius: .7rem; } .portal-dashboard-metric__arrow { width: 1.55rem; height: 1.55rem; } .portal-dashboard-actions > a { min-height: 4.35rem; padding: .72rem; } .portal-dashboard-help { padding: .82rem; } .portal-dashboard-help__search > div { min-height: 2.95rem; } .portal-dashboard-help__search input { min-height: 2.9rem; font-size: .8rem; } .portal-dashboard-help__search button { min-height: 2.35rem; font-size: .7rem; } .portal-bottom-nav { left: .45rem; right: .45rem; max-width: calc(100vw - .9rem); padding: .32rem; } .portal-bottom-nav a { min-height: 3rem; padding: .36rem .12rem; } .portal-bottom-nav .material-symbols-rounded { font-size: 1rem; } .portal-bottom-nav small { font-size: .62rem; } } @media (max-width: 420px) { .portal-main { padding: .76rem .64rem calc(8.8rem + env(safe-area-inset-bottom)); } .portal-dashboard-metric__content span { font-size: .64rem; } .portal-dashboard-list > a, .portal-dashboard-empty { padding: .62rem; } .portal-bottom-nav { left: .4rem; right: .4rem; max-width: calc(100vw - .8rem); gap: .14rem; } .portal-bottom-nav a { padding-inline: .08rem; } .portal-bottom-nav small { font-size: .6rem; letter-spacing: -.01em; } } /* Customer Portal viewport width containment — Hotfix 8.1.5 */ html, body.portal-body { max-width: 100%; overflow-x: hidden; } .portal-shell, .portal-sidebar, .portal-workspace, .portal-topbar, .portal-main, .portal-page, .portal-dashboard, .portal-grid-2, .portal-grid-main, .portal-card-grid, .portal-dashboard-section, .portal-dashboard-activity, .portal-dashboard-help, .portal-dashboard-metrics, .portal-dashboard-actions, .portal-dashboard-list, .portal-filter-grid, .portal-form-grid, .portal-list, .portal-pagination, .ds-panel, .ds-panel__header, .ds-panel__body, .ds-panel__title-wrap { box-sizing: border-box; min-width: 0; max-width: 100%; } .portal-main { width: min(100%, 95rem); max-width: 100%; overflow-x: clip; } .portal-page, .portal-dashboard { width: 100%; max-width: 100%; } .portal-topbar, .portal-dashboard-hero, .portal-dashboard-help, .ds-panel { overflow-x: clip; } .ds-panel__header { flex-wrap: wrap; align-items: flex-start; } .ds-panel__header > * { min-width: 0; max-width: 100%; } .ds-panel__header > :last-child { flex: 0 1 auto; } .portal-page-head, .portal-page-head > div:first-child, .portal-topbar-heading, .portal-topbar-actions { min-width: 0; max-width: 100%; } .portal-topbar-actions { flex-wrap: wrap; } .portal-filter-grid input, .portal-filter-grid select, .portal-form-grid input, .portal-form-grid select, .portal-form-grid textarea, .portal-compact-form input, .portal-compact-form select, .portal-compact-form textarea, .portal-reply textarea, .portal-rating select, .portal-auth-form input, .portal-dashboard-help__search input, .portal-dashboard-help__search button { max-width: 100%; box-sizing: border-box; } @media (max-width: 1100px) { .portal-main { width: 100%; } } @media (max-width: 760px) { .portal-workspace, .portal-main, .portal-page, .portal-dashboard, .ds-panel, .ds-panel__header, .ds-panel__body { width: 100%; max-width: 100%; } .portal-bottom-nav { box-sizing: border-box; width: auto; max-width: calc(100vw - 1.1rem); overflow: hidden; } .ds-panel__header { gap: .65rem; padding: .8rem .85rem; } .ds-panel__body { padding: .85rem; } } /* Customer Portal button fit and safe spacing — Hotfix 8.1.6 */ .portal-topbar-actions > .portal-topbar-ticket, .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile, .portal-dashboard-button, .portal-dashboard-metric, .portal-dashboard-metric__arrow, .portal-dashboard-panel__link, .portal-dashboard-actions > a, .portal-bottom-nav a, .portal-bottom-nav a small { box-sizing: border-box; min-width: 0; max-width: 100%; } .portal-dashboard-metric { overflow: hidden; } .portal-dashboard-metric__content, .portal-dashboard-actions > a > span:nth-child(2), .portal-topbar-profile-copy { min-width: 0; max-width: 100%; } .portal-dashboard-button, .portal-dashboard-panel__link, .portal-dashboard-actions > a, .portal-topbar-actions > .portal-topbar-ticket, .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile { overflow: hidden; } @media (max-width: 760px) { .portal-topbar-actions { display: grid; grid-template-columns: repeat(3, minmax(2.75rem, max-content)); justify-content: end; gap: .42rem; width: 100%; } .portal-topbar-actions > .portal-topbar-ticket, .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile { width: 2.75rem; min-width: 2.75rem; max-width: 2.75rem; padding: 0; justify-self: end; } .portal-topbar-ticket > span:last-child, .portal-topbar-profile-copy, .portal-topbar-profile-chevron, .portal-topbar-actions > .portal-online { display: none !important; } .portal-topbar-actions > .portal-topbar-profile { grid-template-columns: 2rem; justify-content: center; } .portal-topbar-profile > .portal-avatar { margin-inline: auto; } .portal-dashboard-hero__actions { width: 100%; grid-template-columns: 1fr; gap: .6rem; } .portal-dashboard-button { display: flex; width: 100%; max-width: 100%; min-height: 2.8rem; padding-inline: .85rem; border-radius: .9rem; white-space: normal; } .portal-dashboard-metric { grid-template-columns: 2.5rem minmax(0, 1fr) 1.4rem; gap: .55rem; padding-right: .72rem; } .portal-dashboard-metric__arrow { width: 1.4rem; min-width: 1.4rem; height: 1.4rem; justify-self: end; } .portal-bottom-nav { padding: .28rem; } .portal-bottom-nav a { min-height: 2.9rem; border-radius: .72rem; padding: .34rem .08rem; } .portal-bottom-nav a small { display: none; } } @media (max-width: 480px) { .portal-topbar { padding: .58rem .66rem; } .portal-main { padding-left: .62rem; padding-right: .62rem; } .portal-dashboard-hero { padding-left: .82rem; padding-right: .82rem; } .portal-dashboard-button { min-height: 2.72rem; padding-inline: .72rem; font-size: .76rem; } .portal-dashboard-metric { padding: .72rem; } .portal-dashboard-actions > a { padding: .68rem; } } /* Customer Portal topbar single-line mobile alignment — Hotfix 8.1.7 */ @media (max-width: 760px) { .portal-topbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .65rem; min-height: 0; padding: .56rem .72rem; } .portal-topbar-heading { min-width: 0; max-width: 100%; } .portal-topbar-heading small, .portal-topbar-heading strong, .portal-topbar-heading span { display: block; min-width: 0; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .portal-topbar-heading small { font-size: .66rem; line-height: 1; } .portal-topbar-heading strong { margin-top: .12rem; font-size: 1rem; line-height: 1.08; white-space: nowrap; } .portal-topbar-heading span { display: none; } .portal-topbar-actions { display: flex; width: auto; max-width: none; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: .38rem; } .portal-topbar-actions > .portal-topbar-ticket, .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile { justify-self: auto; } } @media (max-width: 480px) { .portal-topbar { grid-template-columns: minmax(0, 1fr) auto; gap: .52rem; padding: .52rem .62rem; } .portal-topbar-heading small { font-size: .62rem; } .portal-topbar-heading strong { font-size: .92rem; } .portal-topbar-actions { gap: .32rem; } .portal-topbar-actions > .portal-topbar-ticket, .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile { width: 2.6rem; min-width: 2.6rem; max-width: 2.6rem; height: 2.6rem; min-height: 2.6rem; } .portal-topbar-actions > .portal-topbar-profile { grid-template-columns: 1.85rem; padding: .22rem; } .portal-topbar-profile > .portal-avatar { width: 1.85rem; height: 1.85rem; min-width: 1.85rem; } } /* Procurement public research experience — Hotfix 8.2.0 */ .proc-public-body { margin: 0; min-width: 320px; background: radial-gradient(circle at 8% 0%, var(--ok-surface-4f4c8f_a100,rgba(79, 76, 143, .10)), transparent 24rem), radial-gradient(circle at 100% 16%, var(--ok-surface-2563eb_a80,rgba(37, 99, 235, .08)), transparent 28rem), var(--ok-surface-f4f7fb,#f4f7fb); color: var(--ok-ink-172033,#172033); } .proc-public-page, .proc-public-page * { box-sizing: border-box; } .proc-public-page { min-height: 100vh; padding: 1rem; } .proc-public-shell { display: grid; width: min(100%, 80rem); margin-inline: auto; gap: 1rem; } .proc-public-header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .78rem .9rem; border: 1px solid var(--ok-line-dbe2ea_a950,rgba(219, 226, 234, .95)); border-radius: 1rem; background: var(--ok-surface-ffffff_a900,rgba(255, 255, 255, .90)); box-shadow: 0 16px 42px -36px var(--ok-shadow-0f172a_a620,rgba(15, 23, 42, .62)); backdrop-filter: blur(18px); } .proc-public-brand, .proc-public-header__meta, .proc-public-private-badge, .proc-public-customer { display: flex; min-width: 0; align-items: center; } .proc-public-brand { gap: .68rem; } .proc-public-brand__mark { display: inline-flex; width: 2.65rem; height: 2.65rem; flex: 0 0 2.65rem; align-items: center; justify-content: center; border-radius: .82rem; background: linear-gradient(145deg, var(--ok-surface-5955a3,#5955a3), var(--ok-surface-2563eb,#2563eb)); color: var(--ok-ink-ffffff,#fff); font-size: .9rem; font-weight: 950; box-shadow: 0 14px 28px -18px var(--ok-shadow-4f4c8f_a850,rgba(79, 76, 143, .85)); } .proc-public-brand__copy, .proc-public-customer { display: grid; min-width: 0; gap: .08rem; } .proc-public-brand__copy strong, .proc-public-brand__copy small, .proc-public-customer strong, .proc-public-customer small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .proc-public-brand__copy strong { color: var(--ok-ink-172033,#172033); font-size: .9rem; font-weight: 950; } .proc-public-brand__copy small, .proc-public-customer small { color: var(--ok-ink-718096,#718096); font-size: .7rem; } .proc-public-header__meta { justify-content: flex-end; gap: .8rem; } .proc-public-private-badge { flex: 0 0 auto; justify-content: center; gap: .32rem; min-height: 2rem; padding: .38rem .62rem; border: 1px solid var(--ok-line-d7e0ec,#d7e0ec); border-radius: 999px; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-526077,#526077); font-size: .68rem; font-weight: 850; white-space: nowrap; } .proc-public-private-badge .material-symbols-rounded { font-size: .9rem; } .proc-public-customer { max-width: 16rem; padding-left: .8rem; border-left: 1px solid var(--ok-line-e7ebf1,#e7ebf1); } .proc-public-customer strong { color: var(--ok-ink-263247,#263247); font-size: .8rem; font-weight: 900; } .proc-public-notice { display: flex; align-items: center; gap: .52rem; padding: .72rem .82rem; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .85rem; background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); font-size: .8rem; font-weight: 800; } .proc-public-notice .material-symbols-rounded { font-size: 1.1rem; } .proc-public-hero { position: relative; display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; overflow: hidden; padding: 1.25rem; border: 1px solid var(--ok-line-d8d9ec,#d8d9ec); border-radius: 1.15rem; background: radial-gradient(circle at 88% 15%, var(--ok-surface-ffffff_a650,rgba(255, 255, 255, .65)), transparent 12rem), linear-gradient(135deg, var(--ok-surface-ffffff,#ffffff) 0%, var(--ok-surface-f8f7fd,#f8f7fd) 56%, var(--ok-surface-edf4ff,#edf4ff) 100%); box-shadow: 0 22px 50px -42px var(--ok-shadow-1e3a8a_a550,rgba(30, 58, 138, .55)); } .proc-public-hero::after { content: ""; position: absolute; right: -6rem; bottom: -9rem; width: 20rem; height: 20rem; border: 1px solid var(--ok-line-4f4c8f_a90,rgba(79, 76, 143, .09)); border-radius: 999px; pointer-events: none; } .proc-public-hero__main, .proc-public-hero__meta, .proc-public-hero__meta > div { position: relative; z-index: 1; display: grid; min-width: 0; align-items: center; } .proc-public-hero__main { grid-template-columns: 3.2rem minmax(0, 1fr); gap: .85rem; } .proc-public-hero__icon { display: inline-flex; width: 3.2rem; height: 3.2rem; align-items: center; justify-content: center; border-radius: .92rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.55rem; line-height: 1; } .proc-public-eyebrow { display: block; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .7rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; } .proc-public-hero h1 { margin: .14rem 0 0; color: var(--ok-ink-172033,#172033); font-size: clamp(1.45rem, 3vw, 2rem); font-weight: 950; line-height: 1.12; letter-spacing: -.025em; } .proc-public-hero p { max-width: 46rem; margin: .38rem 0 0; color: var(--ok-ink-66748a,#66748a); font-size: .86rem; line-height: 1.55; } .proc-public-hero__meta { grid-template-columns: repeat(2, minmax(9rem, 1fr)); gap: .6rem; } .proc-public-hero__meta > div { grid-template-columns: 2.15rem minmax(0, 1fr); gap: .55rem; min-height: 3.65rem; padding: .66rem; border: 1px solid var(--ok-line-e0e5ee,#e0e5ee); border-radius: .8rem; background: var(--ok-surface-ffffff_a820,rgba(255, 255, 255, .82)); } .proc-public-hero__meta > div > .material-symbols-rounded { display: inline-flex; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; border-radius: .62rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.05rem; } .proc-public-hero__meta small, .proc-public-hero__meta strong { display: block; } .proc-public-hero__meta small { color: var(--ok-ink-778499,#778499); font-size: .63rem; font-weight: 750; } .proc-public-hero__meta strong { margin-top: .08rem; color: var(--ok-ink-29364b,#29364b); font-size: .72rem; font-weight: 900; } .proc-public-content-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem); gap: 1rem; align-items: start; } .proc-public-main, .proc-public-sidebar, .proc-public-items { display: grid; min-width: 0; gap: .8rem; } .proc-public-section-head { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .15rem .1rem; } .proc-public-section-head > div { min-width: 0; } .proc-public-section-head span, .proc-public-section-head h2, .proc-public-section-head p { display: block; margin: 0; } .proc-public-section-head > div > span { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .68rem; font-weight: 900; } .proc-public-section-head h2 { margin-top: .12rem; color: var(--ok-ink-172033,#172033); font-size: 1.2rem; font-weight: 950; letter-spacing: -.015em; } .proc-public-section-head p { margin-top: .2rem; color: var(--ok-ink-748197,#748197); font-size: .75rem; } .proc-public-progress { flex: 0 0 auto; padding: .38rem .62rem; border-radius: 999px; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .68rem; font-weight: 900; white-space: nowrap; } .proc-public-item { display: grid; min-width: 0; grid-template-columns: 11rem minmax(0, 1fr); gap: 1rem; padding: .9rem; border: 1px solid var(--ok-line-dfe5ed,#dfe5ed); border-radius: 1.05rem; background: var(--ok-surface-ffffff_a960,rgba(255, 255, 255, .96)); box-shadow: 0 16px 40px -36px var(--ok-shadow-0f172a_a620,rgba(15, 23, 42, .62)); } .proc-public-item__media { position: relative; display: grid; width: 100%; min-width: 0; height: 11rem; place-items: center; overflow: hidden; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .88rem; background: var(--ok-surface-f8fafc,#f8fafc); } .proc-public-item__media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: .45rem; } .proc-public-item__placeholder { display: inline-flex; width: 4rem; height: 4rem; align-items: center; justify-content: center; border-radius: 1rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-766fb5,#766fb5); font-size: 2rem; } .proc-public-item__number { position: absolute; top: .55rem; left: .55rem; padding: .28rem .46rem; border: 1px solid var(--ok-line-e2e8f0_a950,rgba(226, 232, 240, .95)); border-radius: 999px; background: var(--ok-surface-ffffff_a920,rgba(255, 255, 255, .92)); color: var(--ok-ink-657287,#657287); font-size: .62rem; font-weight: 850; backdrop-filter: blur(8px); } .proc-public-item__content { display: grid; min-width: 0; align-content: start; gap: .7rem; } .proc-public-item__header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: .75rem; } .proc-public-item__header > div { min-width: 0; } .proc-public-item__header h3, .proc-public-item__header small { display: block; min-width: 0; margin: 0; } .proc-public-item__header h3 { color: var(--ok-ink-172033,#172033); font-size: 1rem; font-weight: 950; line-height: 1.3; } .proc-public-item__header small { margin-top: .15rem; color: var(--ok-ink-748197,#748197); font-size: .7rem; } .proc-public-status { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .3rem; min-height: 1.8rem; padding: .32rem .52rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-526077,#526077); font-size: .65rem; font-weight: 900; white-space: nowrap; } .proc-public-status .material-symbols-rounded { font-size: .9rem; } .proc-public-status.is-approved { background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-166534,#166534); } .proc-public-status.is-rejected { background: var(--ok-surface-fee2e2,#fee2e2); color: var(--ok-ink-991b1b,#991b1b); } .proc-public-status.is-considering { background: var(--ok-surface-fef3c7,#fef3c7); color: var(--ok-ink-92400e,#92400e); } .proc-public-item__description { margin: 0; color: var(--ok-ink-526077,#526077); font-size: .78rem; line-height: 1.55; } .proc-public-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .48rem; margin: 0; } .proc-public-values > div { min-width: 0; padding: .62rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .7rem; background: var(--ok-surface-f8fafc,#f8fafc); } .proc-public-values > div.is-total { border-color: var(--ok-line-ddd9ef,#ddd9ef); background: var(--ok-surface-f4f3fb,#f4f3fb); } .proc-public-values dt, .proc-public-values dd { display: block; min-width: 0; margin: 0; } .proc-public-values dt { color: var(--ok-ink-748197,#748197); font-size: .62rem; font-weight: 750; } .proc-public-values dd { margin-top: .1rem; overflow: hidden; color: var(--ok-ink-263247,#263247); font-size: .74rem; font-weight: 900; text-overflow: ellipsis; white-space: nowrap; } .proc-public-values .is-total dd { color: var(--ok-ink-4f4c8f,#4f4c8f); } .proc-public-lead { display: inline-flex; width: fit-content; align-items: center; gap: .35rem; margin: 0; color: var(--ok-ink-526077,#526077); font-size: .7rem; font-weight: 750; } .proc-public-lead .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .proc-public-actions { display: flex; min-width: 0; flex-wrap: wrap; gap: .45rem; padding-top: .68rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .proc-public-choice, .proc-public-product-link, .proc-public-feedback button { display: inline-flex; min-width: 0; min-height: 2.65rem; align-items: center; justify-content: center; gap: .38rem; padding: .58rem .72rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-445169,#445169); font: inherit; font-size: .72rem; font-weight: 900; line-height: 1; text-decoration: none; cursor: pointer; transition: border-color .15s ease, background .15s ease, color .15s ease, transform .15s ease; } .proc-public-choice:hover, .proc-public-product-link:hover { transform: translateY(-1px); border-color: var(--ok-line-bdb8de,#bdb8de); background: var(--ok-surface-faf9fe,#faf9fe); } .proc-public-choice .material-symbols-rounded, .proc-public-product-link .material-symbols-rounded, .proc-public-feedback button .material-symbols-rounded { display: inline-flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } .proc-public-choice.is-approve { border-color: var(--ok-line-bbf7d0,#bbf7d0); color: var(--ok-ink-166534,#166534); } .proc-public-choice.is-approve.is-selected { border-color: var(--ok-line-4ade80,#4ade80); background: var(--ok-surface-dcfce7,#dcfce7); box-shadow: inset 0 0 0 1px var(--ok-shadow-166534_a80,rgba(22, 101, 52, .08)); } .proc-public-choice.is-considering { border-color: var(--ok-line-fde68a,#fde68a); color: var(--ok-ink-92400e,#92400e); } .proc-public-choice.is-considering.is-selected { border-color: var(--ok-line-fbbf24,#fbbf24); background: var(--ok-surface-fef3c7,#fef3c7); } .proc-public-choice.is-reject { border-color: var(--ok-line-fecaca,#fecaca); color: var(--ok-ink-991b1b,#991b1b); } .proc-public-choice.is-reject.is-selected { border-color: var(--ok-line-f87171,#f87171); background: var(--ok-surface-fee2e2,#fee2e2); } .proc-public-choice:disabled, .proc-public-feedback button:disabled { cursor: wait; opacity: .62; transform: none; } .proc-public-product-link { margin-left: auto; color: var(--ok-ink-4f4c8f,#4f4c8f); } .proc-public-sidebar { position: sticky; top: 1rem; } .proc-public-summary, .proc-public-feedback { display: grid; min-width: 0; gap: .8rem; padding: .9rem; border: 1px solid var(--ok-line-dfe5ed,#dfe5ed); border-radius: 1rem; background: var(--ok-surface-ffffff_a960,rgba(255, 255, 255, .96)); box-shadow: 0 16px 40px -36px var(--ok-shadow-0f172a_a620,rgba(15, 23, 42, .62)); } .proc-public-summary > header, .proc-public-feedback > header { display: grid; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .62rem; } .proc-public-summary > header > .material-symbols-rounded, .proc-public-feedback > header > .material-symbols-rounded { display: inline-flex; width: 2.35rem; height: 2.35rem; align-items: center; justify-content: center; border-radius: .68rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.15rem; } .proc-public-summary header small, .proc-public-summary header h2, .proc-public-feedback header small, .proc-public-feedback header h2 { display: block; margin: 0; } .proc-public-summary header small, .proc-public-feedback header small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .64rem; font-weight: 900; text-transform: uppercase; } .proc-public-summary header h2, .proc-public-feedback header h2 { margin-top: .08rem; color: var(--ok-ink-172033,#172033); font-size: .9rem; font-weight: 950; } .proc-public-summary dl { display: grid; gap: .05rem; margin: 0; } .proc-public-summary dl > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem .1rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .proc-public-summary dt, .proc-public-summary dd { margin: 0; font-size: .74rem; } .proc-public-summary dt { color: var(--ok-ink-657287,#657287); } .proc-public-summary dd { color: var(--ok-ink-29364b,#29364b); font-weight: 900; white-space: nowrap; } .proc-public-summary dl > div.is-total { margin-top: .2rem; padding: .7rem .65rem; border: 0; border-radius: .72rem; background: linear-gradient(135deg, var(--ok-surface-f0eff9,#f0eff9), var(--ok-surface-edf4ff,#edf4ff)); } .proc-public-summary .is-total dt, .proc-public-summary .is-total dd { color: var(--ok-ink-403d75,#403d75); font-size: .82rem; font-weight: 950; } .proc-public-summary__note { display: flex; align-items: flex-start; gap: .4rem; margin: 0; padding: .65rem; border-radius: .7rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-718096,#718096); font-size: .66rem; line-height: 1.45; } .proc-public-summary__note .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .proc-public-feedback label { color: var(--ok-ink-445169,#445169); font-size: .7rem; font-weight: 850; } .proc-public-feedback textarea { display: block; width: 100%; min-width: 0; min-height: 8rem; padding: .72rem; border: 1px solid var(--ok-line-ccd5e2,#ccd5e2); border-radius: .75rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-172033,#172033); font: inherit; font-size: .78rem; line-height: 1.5; resize: vertical; } .proc-public-feedback textarea:focus { border-color: var(--ok-line-4f4c8f,#4f4c8f); outline: 0; box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a130,rgba(79, 76, 143, .13)); } .proc-public-feedback button { width: 100%; border-color: var(--ok-line-4f4c8f,#4f4c8f); background: linear-gradient(135deg, var(--ok-surface-565192,#565192), var(--ok-surface-4f4c8f,#4f4c8f)); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 14px 28px -20px var(--ok-shadow-4f4c8f_a850,rgba(79, 76, 143, .85)); } .proc-public-feedback button:hover { background: var(--ok-surface-403d75,#403d75); } .proc-public-field-error { margin: -.35rem 0 0; color: var(--ok-ink-b91c1c,#b91c1c); font-size: .68rem; font-weight: 750; } .proc-public-empty { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .75rem; padding: 1.25rem; border: 1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius: 1rem; background: var(--ok-surface-ffffff_a760,rgba(255, 255, 255, .76)); } .proc-public-empty > .material-symbols-rounded { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: .85rem; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); } .proc-public-empty strong, .proc-public-empty p { display: block; margin: 0; } .proc-public-empty strong { color: var(--ok-ink-29364b,#29364b); font-size: .86rem; } .proc-public-empty p { margin-top: .18rem; color: var(--ok-ink-748197,#748197); font-size: .72rem; } .proc-public-footer { display: flex; align-items: center; justify-content: center; gap: .35rem; padding: .55rem; color: var(--ok-ink-748197,#748197); font-size: .68rem; text-align: center; } .proc-public-footer .material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .proc-public-page :is(a, button, textarea):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1040px) { .proc-public-hero { grid-template-columns: 1fr; } .proc-public-hero__meta { width: min(100%, 34rem); } .proc-public-content-grid { grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem); } } @media (max-width: 860px) { .proc-public-content-grid { grid-template-columns: 1fr; } .proc-public-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } } @media (max-width: 680px) { .proc-public-page { padding: .65rem; } .proc-public-shell { gap: .8rem; } .proc-public-header { align-items: flex-start; padding: .72rem; } .proc-public-header__meta { gap: .45rem; } .proc-public-private-badge { display: none; } .proc-public-customer { max-width: 10rem; padding-left: 0; border-left: 0; text-align: right; } .proc-public-hero { gap: .9rem; padding: .95rem; } .proc-public-hero__main { grid-template-columns: 2.75rem minmax(0, 1fr); gap: .68rem; } .proc-public-hero__icon { width: 2.75rem; height: 2.75rem; font-size: 1.35rem; } .proc-public-hero h1 { font-size: 1.35rem; } .proc-public-hero p { font-size: .8rem; } .proc-public-hero__meta { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); } .proc-public-section-head { align-items: flex-start; } .proc-public-item { grid-template-columns: 1fr; padding: .78rem; } .proc-public-item__media { height: 13rem; } .proc-public-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } .proc-public-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .proc-public-choice, .proc-public-product-link { width: 100%; padding-inline: .4rem; } .proc-public-product-link { grid-column: 1 / -1; margin-left: 0; } .proc-public-sidebar { grid-template-columns: 1fr; } } @media (max-width: 460px) { .proc-public-page { padding: .5rem; } .proc-public-header { gap: .55rem; } .proc-public-brand__mark { width: 2.35rem; height: 2.35rem; flex-basis: 2.35rem; } .proc-public-brand__copy strong { font-size: .8rem; } .proc-public-brand__copy small, .proc-public-customer small { font-size: .64rem; } .proc-public-customer strong { font-size: .7rem; } .proc-public-hero { padding: .82rem; } .proc-public-hero__main { grid-template-columns: 1fr; } .proc-public-hero__icon { width: 2.55rem; height: 2.55rem; } .proc-public-hero__meta { grid-template-columns: 1fr; } .proc-public-section-head { display: grid; gap: .5rem; } .proc-public-progress { width: fit-content; } .proc-public-item__header { display: grid; } .proc-public-status { width: fit-content; } .proc-public-values { grid-template-columns: 1fr 1fr; } .proc-public-actions { grid-template-columns: 1fr; } .proc-public-product-link { grid-column: auto; } } @media (prefers-reduced-motion: reduce) { .proc-public-page :is(a, button) { transition: none !important; } } /* Procurement public research broken layout fixes — Hotfix 8.2.1 */ .proc-public-header, .proc-public-header__meta, .proc-public-brand, .proc-public-brand > .proc-public-brand__copy, .proc-public-customer, .proc-public-summary, .proc-public-feedback, .proc-public-summary > header, .proc-public-feedback > header, .proc-public-feedback > * { min-width: 0; max-width: 100%; box-sizing: border-box; } /* Neutralize legacy compact rules that were still affecting the new header */ .proc-public-brand > .proc-public-brand__copy, .proc-public-header__meta > .proc-public-customer { display: grid; width: auto; height: auto; flex: 0 1 auto; place-items: initial; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; box-shadow: none; } .proc-public-brand > .proc-public-brand__copy { gap: .08rem; } .proc-public-header__meta > .proc-public-customer { justify-items: start; } /* Force sidebar cards into a true single-column flow */ .proc-public-summary, .proc-public-feedback { grid-template-columns: 1fr; align-items: start; } .proc-public-summary > header, .proc-public-feedback > header { grid-template-columns: 2.35rem minmax(0, 1fr); } .proc-public-summary dl, .proc-public-summary__note, .proc-public-feedback label, .proc-public-feedback textarea, .proc-public-field-error, .proc-public-feedback button { grid-column: 1; } .proc-public-feedback label { display: block; } .proc-public-feedback textarea { max-width: 100%; } .proc-public-feedback button { justify-self: stretch; } @media (max-width: 860px) { .proc-public-sidebar { grid-template-columns: 1fr; } } @media (max-width: 680px) { .proc-public-header { display: grid; grid-template-columns: 1fr; gap: .7rem; } .proc-public-header__meta { justify-content: space-between; } .proc-public-customer { justify-items: end; } } @media (max-width: 460px) { .proc-public-header__meta { display: grid; grid-template-columns: 1fr; justify-content: start; } .proc-public-customer { justify-items: start; max-width: 100%; text-align: left; } } /* AppShell sidebar submenu density — Complete Hotfix 8.3.2 Scoped to the administrative sidebar on desktop to preserve existing layouts. */ @media (min-width: 1024px) { .app-sidebar .app-nav-submenu { gap: .06rem; margin-top: .10rem; margin-bottom: .30rem; padding-top: .06rem; padding-bottom: .08rem; } .app-sidebar .app-nav-submenu::before { top: .22rem; bottom: .22rem; } .app-sidebar .app-nav-subitem { min-height: 2.18rem; gap: .46rem; padding: .34rem .50rem; border-radius: .68rem; line-height: 1.18; } .app-sidebar .app-nav-subitem::before { left: -.94rem; } .app-sidebar .app-nav-subitem__icon { width: 1.24rem; height: 1.24rem; flex-basis: 1.24rem; font-size: .96rem; } .app-sidebar .app-nav-subitem--active::after { top: .42rem; bottom: .42rem; } .app-sidebar .app-nav-subitem > small { padding: .12rem .28rem; font-size: .62rem; } } /* AppShell sidebar compact and sticky behavior — Hotfix 8.3.3 */ @media (min-width: 1024px) { :root { --app-sidebar-width: 16.25rem; --app-sidebar-compact-width: 4.75rem; } .app-sidebar { position: sticky; top: 0; align-self: start; height: 100vh; height: 100dvh; max-height: 100dvh; overflow: hidden; } .app-sidebar__brand { min-height: 4rem; gap: .58rem; padding: .55rem .72rem; } .app-brand { gap: .58rem; } .app-brand__mark { width: 2.35rem; height: 2.35rem; flex-basis: 2.35rem; border-radius: .8rem; font-size: .86rem; } .app-brand__copy strong { font-size: .8rem; } .app-brand__copy small { margin-top: .04rem; font-size: .65rem; } .app-navigation { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: .62rem .55rem .75rem; scrollbar-gutter: stable; } .app-navigation__personal { gap: .5rem; margin-bottom: .68rem; padding-bottom: .68rem; } .app-personal-section__header { min-height: 1.45rem; padding: 0 .42rem .14rem; } .app-personal-section__header h2 { gap: .3rem; font-size: .62rem; letter-spacing: .055em; } .app-personal-section__header h2 .material-symbols-rounded { width: .95rem; height: .95rem; font-size: .9rem; } .app-personal-section__count { min-width: 1.15rem; height: 1.15rem; font-size: .6rem; } .app-personal-section__items { gap: .08rem; } .app-personal-page { grid-template-columns: minmax(0, 1fr) 1.7rem; border-radius: .68rem; } .app-personal-page > a { min-height: 2.25rem; gap: .42rem; padding: .3rem .1rem .3rem .42rem; } .app-personal-page__icon { width: 1.35rem; height: 1.35rem; flex-basis: 1.35rem; border-radius: .42rem; font-size: .88rem; } .app-personal-page__copy strong { font-size: .68rem; } .app-personal-page__copy small { margin-top: .02rem; font-size: .61rem; } .app-personal-page__action { width: 1.65rem; height: 1.65rem; } .app-personal-empty { min-height: 2.35rem; gap: .42rem; padding: .42rem .5rem; border-radius: .68rem; } .app-personal-empty > .material-symbols-rounded { width: 1.2rem; height: 1.2rem; flex-basis: 1.2rem; font-size: .9rem; } .app-personal-empty strong { font-size: .64rem; } .app-personal-empty small { font-size: .6rem; line-height: 1.18; } .app-nav-section + .app-nav-section { margin-top: .78rem; } .app-nav-section__label { margin-bottom: .22rem; padding-inline: .48rem; font-size: .61rem; letter-spacing: .11em; } .app-nav-section__items { gap: .08rem; } .app-nav-item { min-height: 2.5rem; gap: .48rem; border-radius: .72rem; padding: .4rem .48rem; } .app-nav-item__icon { width: 1.48rem; height: 1.48rem; flex-basis: 1.48rem; font-size: 1.08rem; } .app-nav-item__copy strong { font-size: .74rem; } .app-nav-item__copy small { margin-top: .03rem; font-size: .61rem; line-height: 1.15; } .app-nav-item--active::before { top: .52rem; bottom: .52rem; left: -.58rem; width: .18rem; } .app-nav-group__primary--expandable { grid-template-columns: minmax(0, 1fr) 2rem; gap: .1rem; } .app-nav-group__toggle { width: 2rem; height: 2rem; border-radius: .62rem; } .app-nav-group__toggle .material-symbols-rounded { font-size: 1rem; } .app-nav-submenu { gap: .04rem; margin: .08rem 0 .28rem .92rem; padding: .06rem 0 .06rem .9rem; } .app-nav-submenu::before { top: .2rem; bottom: .2rem; left: .14rem; } .app-nav-subitem { min-height: 2.08rem; gap: .4rem; border-radius: .62rem; padding: .3rem .42rem; font-size: .68rem; } .app-nav-subitem::before { left: -.78rem; width: .62rem; } .app-nav-subitem__icon { width: 1.15rem; height: 1.15rem; flex-basis: 1.15rem; font-size: .84rem; } .app-nav-subitem--active::after { top: .42rem; bottom: .42rem; right: -.58rem; width: .15rem; } .app-sidebar__footer { flex: 0 0 auto; gap: .35rem; padding: .5rem .55rem; } .app-sidebar__compact { min-height: 2.15rem; gap: .5rem; border-radius: .68rem; padding: .32rem .48rem; font-size: .68rem; } .app-sidebar__compact .material-symbols-rounded { font-size: 1.05rem; } .app-user-card { gap: .5rem; border-radius: .8rem; padding: .42rem; } .app-user-card__avatar, .app-profile-trigger__avatar { width: 2rem; height: 2rem; flex-basis: 2rem; border-radius: .65rem; font-size: .72rem; } .app-user-card__copy strong { font-size: .68rem; } .app-user-card__copy small { margin-top: .02rem; font-size: .61rem; } .app-user-card__action { font-size: 1rem; } } @media (min-width: 1024px) and (max-width: 1279px) { :root { --app-sidebar-width: 15.5rem; } } /* AppShell sidebar fixed scroll tracking — Hotfix 8.3.4 */ @media (min-width: 1024px) { .app-shell, .app-shell--compact { display: block; min-height: 100vh; min-height: 100dvh; } .app-sidebar { position: fixed; inset: 0 auto 0 0; z-index: 40; width: var(--app-sidebar-width); height: 100vh; height: 100dvh; max-height: none; align-self: auto; overflow: hidden; box-sizing: border-box; } .app-workspace { width: auto; min-width: 0; margin-left: var(--app-sidebar-width); transition: margin-left .22s ease; } .app-shell--compact .app-sidebar { width: var(--app-sidebar-compact-width); } .app-shell--compact .app-workspace { margin-left: var(--app-sidebar-compact-width); } .app-navigation { min-height: 0; overscroll-behavior: contain; overflow-x: hidden; overflow-y: auto; scrollbar-gutter: stable; } } /* AppShell sidebar submenu compactness + integrated parent arrow — Hotfix 8.4.5 */ @media (min-width: 1024px) { /* Keep the disclosure control visually inside the parent navigation card. */ .app-sidebar .app-nav-group__primary--expandable { position: relative; display: block; min-width: 0; } .app-sidebar .app-nav-group__primary--expandable .app-nav-item { width: 100%; padding-right: 2.45rem; } .app-sidebar .app-nav-group__toggle { position: absolute; top: 50%; right: .38rem; z-index: 2; width: 1.62rem; height: 1.62rem; min-width: 1.62rem; min-height: 1.62rem; transform: translateY(-50%); border: 1px solid var(--ok-line-e4e2f2,#e4e2f2); border-radius: .52rem; background: var(--ok-surface-ffffff_a760,rgba(255, 255, 255, .76)); color: var(--ok-ink-716da3,#716da3); box-shadow: 0 3px 10px -8px var(--ok-shadow-4f4c8f_a750,rgba(79, 76, 143, .75)); } .app-sidebar .app-nav-group__toggle:hover { border-color: var(--ok-line-cac6e7,#cac6e7); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-sidebar .app-nav-group__toggle[aria-expanded="true"] { border-color: var(--ok-line-d5d1eb,#d5d1eb); background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-sidebar .app-nav-group__toggle .material-symbols-rounded { display: flex; width: 1rem; height: 1rem; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } /* Denser hierarchy: less vertical travel without sacrificing hit-area clarity. */ .app-sidebar .app-nav-submenu { gap: 0; margin: .04rem 0 .18rem .86rem; padding: .02rem 0 .03rem .80rem; } .app-sidebar .app-nav-submenu::before { top: .12rem; bottom: .12rem; left: .12rem; } .app-sidebar .app-nav-subitem { min-height: 1.78rem; gap: .32rem; padding: .18rem .36rem; border-radius: .52rem; font-size: .66rem; line-height: 1.12; } .app-sidebar .app-nav-subitem::before { left: -.68rem; width: .54rem; } .app-sidebar .app-nav-subitem__icon { width: 1rem; height: 1rem; flex-basis: 1rem; font-size: .78rem; } .app-sidebar .app-nav-subitem--active::after { top: .30rem; bottom: .30rem; right: -.48rem; width: .14rem; } .app-sidebar .app-nav-subitem > small { padding: .08rem .24rem; font-size: .60rem; } /* Compact-shell behavior must stay icon-only. */ .app-shell--compact .app-sidebar .app-nav-group__primary--expandable .app-nav-item { padding-right: .48rem; } .app-shell--compact .app-sidebar .app-nav-group__toggle, .app-shell--compact .app-sidebar .app-nav-submenu { display: none; } } /* AppShell parent navigation: description tooltip + closed-by-default groups — Hotfix 8.4.7 */ @media (min-width: 1024px) { .app-sidebar .app-nav-item__copy { align-content: center; gap: 0; } .app-sidebar .app-nav-item__copy > strong { line-height: 1.18; } /* Parent descriptions are no longer permanently rendered below the label. */ .app-sidebar .app-nav-item__copy > small { display: none !important; } /* Keep the dedicated disclosure control visually separate from parent navigation. */ .app-sidebar .app-nav-group__primary--expandable .app-nav-item { padding-right: 2.55rem; } .app-sidebar .app-nav-group__toggle { right: .4rem; width: 1.85rem; height: 1.85rem; min-width: 1.85rem; min-height: 1.85rem; border-color: var(--ok-line-d8d9ec,#d8d9ec); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-66619b,#66619b); box-shadow: 0 4px 12px var(--ok-shadow-4f4c8f_a80,rgba(79, 76, 143, .08)); } .app-sidebar .app-nav-group__toggle:hover, .app-sidebar .app-nav-group__toggle:focus-visible { border-color: var(--ok-line-bbb8dc,#bbb8dc); background: var(--ok-surface-f6f5fc,#f6f5fc); color: var(--ok-ink-4f4c8f,#4f4c8f); } .app-sidebar .app-nav-group__toggle[aria-expanded="true"] { border-color: var(--ok-line-c9c6e6,#c9c6e6); background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-403d75,#403d75); } } .app-nav-parent-tooltip { position: fixed; z-index: 10000; width: max-content; max-width: min(20rem, calc(100vw - 1.25rem)); padding: .55rem .68rem; border: 1px solid var(--ok-line-cbcfe0_a960,rgba(203, 207, 224, .96)); border-radius: .62rem; background: var(--ok-surface-191f2d_a960,rgba(25, 31, 45, .96)); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 12px 30px -16px var(--ok-shadow-0f172a_a750,rgba(15, 23, 42, .75)); font-size: .68rem; font-weight: 650; line-height: 1.45; pointer-events: none; white-space: normal; backdrop-filter: blur(12px); } .app-nav-parent-tooltip[hidden] { display: none !important; } /* AppShell sidebar icon grid + parent width consistency — Hotfix 8.4.8 */ @media (min-width: 1024px) { /* Every first-level row occupies the exact same available width. */ .app-sidebar .app-nav-section, .app-sidebar .app-nav-section__items, .app-sidebar .app-nav-group, .app-sidebar .app-nav-group__primary, .app-sidebar .app-nav-group__primary--expandable { width: 100%; min-width: 0; box-sizing: border-box; } .app-sidebar .app-nav-group__primary { position: relative; display: block; } .app-sidebar .app-nav-item { width: 100%; min-width: 0; height: 3rem; min-height: 3rem; max-height: 3rem; box-sizing: border-box; align-items: center; border-radius: .76rem; padding-block: 0; } /* Expandable and non-expandable parents retain identical external geometry. */ .app-sidebar .app-nav-group__primary--expandable .app-nav-item { width: 100%; height: 3rem; min-height: 3rem; max-height: 3rem; padding-right: 2.65rem; } .app-sidebar .app-nav-item__icon { display: flex; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex: 0 0 1.5rem; align-items: center; justify-content: center; line-height: 1; text-align: center; } .app-sidebar .app-nav-item__icon.material-symbols-rounded { font-size: 1.08rem; line-height: 1; } .app-sidebar .app-nav-item__copy { display: flex; min-width: 0; height: 100%; flex: 1 1 auto; align-items: center; } .app-sidebar .app-nav-item__copy > strong { width: 100%; } .app-sidebar .app-nav-group__toggle { top: 50%; right: .38rem; width: 1.82rem; height: 1.82rem; min-width: 1.82rem; min-height: 1.82rem; transform: translateY(-50%); } /* Compact mode: one strict square grid for every first-level icon. */ .app-shell--compact .app-navigation { padding-inline: .45rem; } .app-shell--compact .app-nav-section__items { display: grid; justify-items: center; gap: .18rem; } .app-shell--compact .app-nav-group, .app-shell--compact .app-nav-group__primary, .app-shell--compact .app-nav-group__primary--expandable { display: grid; width: 100%; justify-items: center; } .app-shell--compact .app-sidebar .app-nav-item, .app-shell--compact .app-sidebar .app-nav-group__primary--expandable .app-nav-item { display: flex; width: 3rem; min-width: 3rem; max-width: 3rem; height: 3rem; min-height: 3rem; max-height: 3rem; margin-inline: auto; align-items: center; justify-content: center; gap: 0; padding: 0; border-radius: .78rem; } .app-shell--compact .app-sidebar .app-nav-item__icon { display: flex; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex: 0 0 1.5rem; align-items: center; justify-content: center; margin: 0; padding: 0; font-size: 1.12rem; line-height: 1; text-align: center; } .app-shell--compact .app-sidebar .app-nav-item--active::before { top: .58rem; bottom: .58rem; left: -.5rem; width: .16rem; } /* No invisible disclosure geometry may alter icon centering in compact mode. */ .app-shell--compact .app-sidebar .app-nav-group__toggle, .app-shell--compact .app-sidebar .app-nav-submenu { display: none !important; } /* Keep footer controls on the same visual centerline as the navigation icons. */ .app-shell--compact .app-sidebar__compact { display: flex; width: 3rem; min-width: 3rem; height: 3rem; min-height: 3rem; margin-inline: auto; align-items: center; justify-content: center; gap: 0; padding: 0; border-radius: .78rem; } .app-shell--compact .app-sidebar__compact .material-symbols-rounded { display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; margin: 0; font-size: 1.12rem; line-height: 1; } } /* Customer Portal sidebar icon grid + row consistency — Hotfix 8.4.9 */ @media (min-width: 761px) { .portal-sidebar, .portal-sidebar nav, .portal-sidebar nav a, .portal-sidebar-footer, .portal-sidebar-footer > a, .portal-sidebar-footer form, .portal-sidebar-footer form button { box-sizing: border-box; min-width: 0; max-width: 100%; } /* Match the same first-level geometry used by the administrative AppShell. */ .portal-sidebar nav { width: 100%; gap: .18rem; padding-inline: .08rem; align-content: start; } .portal-sidebar nav a { position: relative; display: grid; width: 100%; height: 3rem; min-height: 3rem; max-height: 3rem; grid-template-columns: 1.5rem minmax(0, 1fr); align-items: center; gap: .68rem; margin: 0; padding: 0 .72rem; border-radius: .78rem; line-height: 1.15; } .portal-sidebar nav a > .material-symbols-rounded { display: flex; width: 1.5rem; height: 1.5rem; min-width: 1.5rem; flex: 0 0 1.5rem; align-items: center; justify-content: center; margin: 0; padding: 0; font-size: 1.12rem; line-height: 1; text-align: center; } .portal-sidebar nav a > span:last-child { display: block; min-width: 0; overflow: hidden; color: inherit; font-size: .78rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-sidebar nav a.is-active { box-shadow: inset 0 0 0 1px var(--ok-shadow-d8d5ec,#d8d5ec); } .portal-sidebar nav a.is-active::before { content: ""; position: absolute; top: .58rem; bottom: .58rem; left: -.48rem; width: .16rem; border-radius: 999px; background: var(--ok-surface-4f4c8f,#4f4c8f); } /* Keep profile/logout aligned to the same visual column as the navigation. */ .portal-sidebar-footer { width: 100%; gap: .42rem; padding-top: .62rem; } .portal-sidebar-footer > a { width: 100%; min-height: 3rem; grid-template-columns: 2rem minmax(0, 1fr); gap: .58rem; padding: .38rem .5rem; border-radius: .78rem; } .portal-sidebar-footer > a .portal-avatar { display: flex; width: 2rem; height: 2rem; min-width: 2rem; align-items: center; justify-content: center; margin: 0; line-height: 1; } .portal-sidebar-footer form, .portal-sidebar-footer form button { width: 100%; } .portal-sidebar-footer form button { min-height: 2.65rem; border-radius: .72rem; } .portal-sidebar-footer form button .material-symbols-rounded { display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; margin: 0; font-size: 1.08rem; line-height: 1; } } /* Mobile portal navigation keeps the exact same icon centerline. */ @media (max-width: 760px) { .portal-bottom-nav a { min-width: 0; align-content: center; justify-items: center; } .portal-bottom-nav a > .material-symbols-rounded { display: flex; width: 1.5rem; height: 1.5rem; align-items: center; justify-content: center; margin: 0; font-size: 1.1rem; line-height: 1; text-align: center; } } /* Customer Portal — Referrals dashboard refresh 8.5.0 */ .portal-referrals-page { --portal-referrals-border: var(--ok-line-e3e8f1,#e3e8f1); --portal-referrals-muted: var(--ok-ink-738097,#738097); --portal-referrals-heading: var(--ok-ink-182236,#182236); --portal-referrals-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-referrals-primary-soft: var(--ok-surface-f1f0fb,#f1f0fb); gap: 1rem; } .portal-referrals-heading, .portal-referrals-metrics, .portal-referrals-dashboard-grid, .portal-referrals-main-column, .portal-referrals-side-column, .portal-referrals-card, .portal-referrals-card__head, .portal-referrals-card__head > div, .portal-referrals-link-control, .portal-referrals-share-actions, .portal-referrals-history__row, .portal-referrals-status-list > div, .portal-referrals-steps li { min-width: 0; box-sizing: border-box; } .portal-referrals-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .35rem .1rem .2rem; } .portal-referrals-heading > div:first-child { min-width: 0; } .portal-referrals-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-referrals-primary)); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-referrals-heading h1 { margin: .15rem 0 0; color: var(--ok-ink-182236,var(--portal-referrals-heading)); font-size: clamp(1.45rem, 2.3vw, 1.85rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.15; } .portal-referrals-heading p { max-width: 52rem; margin: .35rem 0 0; color: var(--ok-ink-738097,var(--portal-referrals-muted)); font-size: .82rem; line-height: 1.55; } .portal-referrals-heading__icon { display: inline-flex; width: 3.35rem; height: 3.35rem; flex: 0 0 3.35rem; align-items: center; justify-content: center; border: 1px solid var(--ok-line-dfdcf1,#dfdcf1); border-radius: .9rem; background: linear-gradient(145deg, var(--ok-surface-f8f7fd,#f8f7fd), var(--ok-surface-efeffb,#efeffb)); color: var(--ok-ink-4f4c8f,var(--portal-referrals-primary)); box-shadow: 0 14px 30px -25px var(--ok-shadow-4f4c8f_a800,rgba(79, 76, 143, .8)); } .portal-referrals-heading__icon .material-symbols-rounded { font-size: 1.55rem; } .portal-referrals-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .portal-referrals-metric { display: grid; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .7rem; min-width: 0; min-height: 6.1rem; padding: .85rem; border: 1px solid var(--ok-line-e3e8f1,var(--portal-referrals-border)); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 36px -34px var(--ok-shadow-0f172a_a620,rgba(15, 23, 42, .62)); } .portal-referrals-metric__icon { display: inline-flex; width: 2.65rem; height: 2.65rem; align-items: center; justify-content: center; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.2rem; } .portal-referrals-metric__icon.is-success { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-059669,#059669); } .portal-referrals-metric__icon.is-info { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-referrals-metric__icon.is-credit { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-ea580c,#ea580c); } .portal-referrals-metric small, .portal-referrals-metric strong, .portal-referrals-metric span { display: block; min-width: 0; } .portal-referrals-metric small { color: var(--ok-ink-778399,#778399); font-size: .66rem; font-weight: 700; } .portal-referrals-metric strong { margin-top: .12rem; color: var(--ok-ink-182236,var(--portal-referrals-heading)); font-size: 1.18rem; font-weight: 700; line-height: 1.1; } .portal-referrals-metric span { margin-top: .24rem; overflow: hidden; color: var(--ok-ink-8a96a9,#8a96a9); font-size: .64rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .portal-referrals-dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(17.5rem, .72fr); gap: .85rem; align-items: start; } .portal-referrals-main-column, .portal-referrals-side-column { display: grid; gap: .85rem; } .portal-referrals-card { display: grid; gap: .9rem; padding: 1rem; border: 1px solid var(--ok-line-e3e8f1,var(--portal-referrals-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 18px 40px -36px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-referrals-card__head { display: flex; align-items: center; justify-content: space-between; gap: .8rem; } .portal-referrals-card__head > div { display: grid; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: center; gap: .62rem; } .portal-referrals-card__icon { display: inline-flex; width: 2.45rem; height: 2.45rem; align-items: center; justify-content: center; border-radius: .68rem; background: var(--ok-surface-f1f0fb,var(--portal-referrals-primary-soft)); color: var(--ok-ink-4f4c8f,var(--portal-referrals-primary)); font-size: 1.1rem; } .portal-referrals-card__head small, .portal-referrals-card__head h2 { display: block; margin: 0; } .portal-referrals-card__head small { color: var(--ok-ink-7d899d,#7d899d); font-size: .63rem; font-weight: 700; text-transform: uppercase; } .portal-referrals-card__head h2 { margin-top: .08rem; color: var(--ok-ink-182236,var(--portal-referrals-heading)); font-size: .92rem; font-weight: 700; line-height: 1.2; } .portal-referrals-chip, .portal-referrals-count { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .28rem; min-height: 1.85rem; padding: .34rem .5rem; border: 1px solid var(--ok-line-e5e7eb,#e5e7eb); border-radius: .58rem; background: var(--ok-surface-fafbfc,#fafbfc); color: var(--ok-ink-69758a,#69758a); font-size: .63rem; font-weight: 700; white-space: nowrap; } .portal-referrals-chip .material-symbols-rounded { font-size: .88rem; } .portal-referrals-card__intro { margin: -.1rem 0 0; color: var(--ok-ink-6f7d91,#6f7d91); font-size: .76rem; line-height: 1.55; } .portal-referrals-link-box { display: grid; gap: .38rem; } .portal-referrals-link-box label { color: var(--ok-ink-48556b,#48556b); font-size: .68rem; font-weight: 700; } .portal-referrals-link-control { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .48rem; min-height: 3rem; padding: .36rem .4rem .36rem .72rem; border: 1px solid var(--ok-line-d7deea,#d7deea); border-radius: .75rem; background: var(--ok-surface-fbfcfe,#fbfcfe); transition: border-color .15s ease, box-shadow .15s ease; } .portal-referrals-link-control:focus-within { border-color: var(--ok-line-8f8ac4,#8f8ac4); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .1)); } .portal-referrals-link-control > .material-symbols-rounded { color: var(--ok-ink-7b86a0,#7b86a0); font-size: 1rem; } .portal-referrals-link-control input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ok-ink-3e4a5f,#3e4a5f); font: inherit; font-size: .72rem; } .portal-referrals-copy-button, .portal-referrals-primary-action { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-height: 2.3rem; padding: .5rem .68rem; border-radius: .62rem; font: inherit; font-size: .68rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; } .portal-referrals-copy-button { border: 1px solid var(--ok-line-d9d6ed,#d9d6ed); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-referrals-copy-button:hover, .portal-referrals-copy-button.is-copied { border-color: var(--ok-line-aaa5d3,#aaa5d3); background: var(--ok-surface-f2f0fa,#f2f0fa); } .portal-referrals-copy-button .material-symbols-rounded, .portal-referrals-primary-action .material-symbols-rounded { font-size: .95rem; } .portal-referrals-copy-feedback { min-height: .95rem; color: var(--ok-ink-059669,#059669); font-size: .63rem; font-weight: 700; } .portal-referrals-copy-feedback.is-error { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-referrals-share-actions { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .75rem; border-top: 1px solid var(--ok-line-edf0f5,#edf0f5); } .portal-referrals-primary-action { flex: 0 0 auto; border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 12px 24px -20px var(--ok-shadow-4f4c8f_a900,rgba(79, 76, 143, .9)); } .portal-referrals-primary-action:hover { background: var(--ok-surface-403d75,#403d75); } .portal-referrals-share-hint { display: inline-flex; min-width: 0; align-items: flex-start; gap: .32rem; color: var(--ok-ink-7b8799,#7b8799); font-size: .64rem; line-height: 1.45; } .portal-referrals-share-hint .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .9rem; } .portal-referrals-history { display: grid; gap: .42rem; } .portal-referrals-history__row { display: grid; grid-template-columns: 2.3rem minmax(0, 1fr) auto auto; align-items: center; gap: .6rem; min-height: 3.6rem; padding: .6rem .68rem; border: 1px solid var(--ok-line-edf0f5,#edf0f5); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); } .portal-referrals-avatar { display: inline-flex; width: 2.3rem; height: 2.3rem; align-items: center; justify-content: center; border-radius: .65rem; background: var(--ok-surface-f1f0f9,#f1f0f9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .portal-referrals-history__identity { min-width: 0; } .portal-referrals-history__identity strong, .portal-referrals-history__identity small { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-referrals-history__identity strong { color: var(--ok-ink-354158,#354158); font-size: .72rem; font-weight: 700; } .portal-referrals-history__identity small { margin-top: .1rem; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .63rem; } .portal-referrals-status { display: inline-flex; align-items: center; justify-content: center; gap: .25rem; min-height: 1.65rem; padding: .28rem .45rem; border-radius: 999px; font-size: .61rem; font-weight: 700; white-space: nowrap; } .portal-referrals-status .material-symbols-rounded { font-size: .78rem; } .portal-referrals-status.is-pending { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-b45309,#b45309); } .portal-referrals-status.is-eligible { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-referrals-status.is-applied { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-1d4ed8,#1d4ed8); } .portal-referrals-status.is-cancelled { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-referrals-history__value { color: var(--ok-ink-2f3c52,#2f3c52); font-size: .72rem; font-weight: 700; white-space: nowrap; } .portal-referrals-status-list { display: grid; gap: .45rem; } .portal-referrals-status-list > div { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .6rem; border: 1px solid var(--ok-line-edf0f5,#edf0f5); border-radius: .7rem; background: var(--ok-surface-fbfcfe,#fbfcfe); } .portal-referrals-status-list > div > .material-symbols-rounded { display: inline-flex; width: 2.15rem; height: 2.15rem; align-items: center; justify-content: center; border-radius: .58rem; background: var(--ok-surface-f2f0fa,#f2f0fa); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1rem; } .portal-referrals-status-list > div > .material-symbols-rounded.is-pending { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-b45309,#b45309); } .portal-referrals-status-list > div > .material-symbols-rounded.is-eligible { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-referrals-status-list > div > .material-symbols-rounded.is-applied { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-1d4ed8,#1d4ed8); } .portal-referrals-status-list > div > .material-symbols-rounded.is-cancelled { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-referrals-status-list strong, .portal-referrals-status-list small { display: block; } .portal-referrals-status-list strong { color: var(--ok-ink-2f3b51,#2f3b51); font-size: .9rem; font-weight: 700; } .portal-referrals-status-list small { margin-top: .05rem; color: var(--ok-ink-7b879a,#7b879a); font-size: .63rem; line-height: 1.3; } .portal-referrals-steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; } .portal-referrals-steps li { position: relative; display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); gap: .55rem; padding: .4rem 0 .85rem; } .portal-referrals-steps li:not(:last-child)::after { content: ""; position: absolute; top: 2.05rem; bottom: 0; left: .87rem; width: 1px; background: var(--ok-surface-e4e8ef,#e4e8ef); } .portal-referrals-steps li > span { position: relative; z-index: 1; display: inline-flex; width: 1.8rem; height: 1.8rem; align-items: center; justify-content: center; border: 1px solid var(--ok-line-dcd9ef,#dcd9ef); border-radius: 999px; background: var(--ok-surface-f2f0fa,#f2f0fa); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 700; } .portal-referrals-steps strong, .portal-referrals-steps small { display: block; } .portal-referrals-steps strong { color: var(--ok-ink-37445a,#37445a); font-size: .7rem; font-weight: 700; } .portal-referrals-steps small { margin-top: .16rem; color: var(--ok-ink-7e8a9c,#7e8a9c); font-size: .63rem; line-height: 1.45; } .portal-referrals-empty { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: 1.2rem; border: 1px dashed var(--ok-line-d5dce8,#d5dce8); border-radius: .82rem; background: var(--ok-surface-fbfcfe,#fbfcfe); } .portal-referrals-empty > .material-symbols-rounded { display: inline-flex; width: 3rem; height: 3rem; align-items: center; justify-content: center; border-radius: .8rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.35rem; } .portal-referrals-empty strong, .portal-referrals-empty p { display: block; margin: 0; } .portal-referrals-empty strong { color: var(--ok-ink-354158,#354158); font-size: .74rem; font-weight: 700; } .portal-referrals-empty p { margin-top: .18rem; color: var(--ok-ink-7d899b,#7d899b); font-size: .65rem; line-height: 1.5; } .portal-referrals-page :is(a, button, input):focus-visible { outline: 3px solid var(--ok-line-2563eb_a180,rgba(37, 99, 235, .18)); outline-offset: 2px; } @media (max-width: 1180px) { .portal-referrals-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-referrals-dashboard-grid { grid-template-columns: minmax(0, 1.4fr) minmax(16rem, .7fr); } } @media (max-width: 920px) { .portal-referrals-dashboard-grid { grid-template-columns: 1fr; } .portal-referrals-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .portal-referrals-heading { align-items: flex-start; } .portal-referrals-heading__icon { width: 2.9rem; height: 2.9rem; flex-basis: 2.9rem; } .portal-referrals-metrics, .portal-referrals-side-column { grid-template-columns: 1fr; } .portal-referrals-metric { min-height: 5.5rem; } .portal-referrals-card__head { align-items: flex-start; } .portal-referrals-chip, .portal-referrals-count { display: none; } .portal-referrals-share-actions { display: grid; align-items: stretch; } .portal-referrals-primary-action { width: 100%; } .portal-referrals-history__row { grid-template-columns: 2.3rem minmax(0, 1fr) auto; } .portal-referrals-status { grid-column: 2; justify-self: start; } .portal-referrals-history__value { grid-column: 3; grid-row: 1 / span 2; } } @media (max-width: 480px) { .portal-referrals-heading__icon { display: none; } .portal-referrals-card { padding: .82rem; } .portal-referrals-link-control { grid-template-columns: 1rem minmax(0, 1fr); padding: .55rem .62rem; } .portal-referrals-copy-button { grid-column: 1 / -1; width: 100%; margin-top: .15rem; } .portal-referrals-history__row { grid-template-columns: 2.2rem minmax(0, 1fr); gap: .5rem; } .portal-referrals-status, .portal-referrals-history__value { grid-column: 2; grid-row: auto; justify-self: start; } } /* Portal referrals metric icon consistency — Hotfix 8.5.1 */ .portal-referrals-metric > .portal-referrals-metric__icon { display: inline-flex !important; width: 2.65rem; height: 2.65rem; min-width: 2.65rem; min-height: 2.65rem; flex: 0 0 2.65rem; align-items: center !important; justify-content: center !important; place-items: center; margin: 0 !important; padding: 0 !important; overflow: visible !important; font-size: 1.12rem !important; font-weight: 400; line-height: 1 !important; text-align: center; vertical-align: middle; white-space: normal !important; } .portal-referrals-metric > .portal-referrals-metric__icon::before, .portal-referrals-metric > .portal-referrals-metric__icon::after { line-height: 1; } /* Text styles must not leak into the Material Symbol used as the metric icon. */ .portal-referrals-metric > div > small, .portal-referrals-metric > div > strong, .portal-referrals-metric > div > span { display: block; min-width: 0; } .portal-referrals-metric > div > span { margin-top: .24rem; overflow: hidden; color: var(--ok-ink-8a96a9,#8a96a9); font-size: .64rem; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } /* Portal referrals metric icon structural fix — Hotfix 8.5.2 */ /* * The icon background and the Material Symbol are deliberately separate nodes. * This prevents generic metric text rules from shrinking/repositioning the glyph. */ .portal-referrals-metric > .portal-referrals-metric__icon-box { display: grid !important; width: 2.65rem !important; height: 2.65rem !important; min-width: 2.65rem !important; min-height: 2.65rem !important; flex: 0 0 2.65rem !important; place-items: center !important; align-self: center !important; justify-self: start !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); line-height: 1 !important; } .portal-referrals-metric > .portal-referrals-metric__icon-box.is-success { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-059669,#059669); } .portal-referrals-metric > .portal-referrals-metric__icon-box.is-info { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-referrals-metric > .portal-referrals-metric__icon-box.is-credit { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-ea580c,#ea580c); } .portal-referrals-metric > .portal-referrals-metric__icon-box > .material-symbols-rounded { display: block !important; width: 1.35rem !important; height: 1.35rem !important; min-width: 1.35rem !important; min-height: 1.35rem !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; color: inherit !important; font-family: 'Material Symbols Rounded' !important; font-size: 1.28rem !important; font-style: normal !important; font-weight: 400 !important; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; font-feature-settings: 'liga' !important; letter-spacing: normal !important; line-height: 1.35rem !important; text-align: center !important; text-transform: none !important; white-space: nowrap !important; word-break: normal !important; direction: ltr !important; } /* Scope metric typography exclusively to the textual column. */ .portal-referrals-metric > div:not(.portal-referrals-metric__icon-box) > small, .portal-referrals-metric > div:not(.portal-referrals-metric__icon-box) > strong, .portal-referrals-metric > div:not(.portal-referrals-metric__icon-box) > span { min-width: 0; } /* Portal · Pesquisas de produtos — TailAdmin-inspired consistency — Hotfix 8.5.3 */ .portal-researches-page { --portal-researches-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-researches-primary-soft: var(--ok-surface-f0eff9,#f0eff9); --portal-researches-border: var(--ok-line-dde4ee,#dde4ee); --portal-researches-heading: var(--ok-ink-172033,#172033); --portal-researches-muted: var(--ok-ink-74839a,#74839a); --portal-researches-card: var(--ok-surface-ffffff,#ffffff); display: grid; min-width: 0; gap: 1rem; } .portal-researches-page, .portal-researches-page * { box-sizing: border-box; } .portal-researches-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .1rem .1rem .15rem; } .portal-researches-heading > div:first-child { min-width: 0; } .portal-researches-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-researches-primary)); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-researches-heading h1 { margin: .16rem 0 0; color: var(--ok-ink-172033,var(--portal-researches-heading)); font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; } .portal-researches-heading p { max-width: 54rem; margin: .38rem 0 0; color: var(--ok-ink-74839a,var(--portal-researches-muted)); font-size: .78rem; line-height: 1.55; } .portal-researches-heading__icon { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; place-items: center; border: 1px solid var(--ok-line-dedcf1,#dedcf1); border-radius: 1rem; background: var(--ok-surface-f3f1fb,#f3f1fb); color: var(--ok-ink-4f4c8f,var(--portal-researches-primary)); } .portal-researches-heading__icon > .material-symbols-rounded { display: block; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.42rem; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-researches-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .portal-researches-metric { display: grid; min-width: 0; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .72rem; min-height: 7rem; padding: .9rem; border: 1px solid var(--ok-line-dde4ee,var(--portal-researches-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-researches-card)); box-shadow: 0 14px 34px -32px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-researches-metric__icon-box { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; align-self: center; justify-self: start; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-researches-metric__icon-box.is-success { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-researches-metric__icon-box.is-info { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-researches-metric__icon-box.is-value { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .portal-researches-metric__icon-box > .material-symbols-rounded { display: block; width: auto; height: auto; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.28rem; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-researches-metric > div:not(.portal-researches-metric__icon-box) { display: grid; min-width: 0; align-content: center; gap: .06rem; } .portal-researches-metric small, .portal-researches-metric strong, .portal-researches-metric > div:not(.portal-researches-metric__icon-box) > span { display: block; min-width: 0; margin: 0; } .portal-researches-metric small { color: var(--ok-ink-718096,#718096); font-size: .65rem; font-weight: 700; } .portal-researches-metric strong { margin-top: .05rem; overflow: hidden; color: var(--ok-ink-172033,var(--portal-researches-heading)); font-size: 1.18rem; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .portal-researches-metric > div:not(.portal-researches-metric__icon-box) > span { margin-top: .13rem; overflow: hidden; color: var(--ok-ink-8491a5,#8491a5); font-size: .63rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-researches-dashboard-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 20rem); align-items: start; gap: .9rem; } .portal-researches-side-column { display: grid; min-width: 0; gap: .9rem; } .portal-researches-card { min-width: 0; padding: .95rem; border: 1px solid var(--ok-line-dde4ee,var(--portal-researches-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-researches-card)); box-shadow: 0 14px 34px -32px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-researches-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; } .portal-researches-card__head > div { display: grid; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .62rem; } .portal-researches-card__icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; background: var(--ok-surface-f0eff9,var(--portal-researches-primary-soft)); color: var(--ok-ink-4f4c8f,var(--portal-researches-primary)); } .portal-researches-card__icon.is-calendar { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-researches-card__icon > .material-symbols-rounded { display: block; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.14rem; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-researches-card__head small, .portal-researches-card__head h2 { display: block; min-width: 0; margin: 0; } .portal-researches-card__head small { color: var(--ok-ink-4f4c8f,var(--portal-researches-primary)); font-size: .61rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .portal-researches-card__head h2 { margin-top: .05rem; color: var(--ok-ink-172033,var(--portal-researches-heading)); font-size: .9rem; font-weight: 700; line-height: 1.2; } .portal-researches-count { flex: 0 0 auto; padding: .33rem .52rem; border-radius: 999px; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-657287,#657287); font-size: .63rem; font-weight: 700; white-space: nowrap; } .portal-researches-list { display: grid; min-width: 0; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-researches-row { display: grid; min-width: 0; grid-template-columns: 2.5rem minmax(12rem, 1fr) auto minmax(8.5rem, .75fr) minmax(7.5rem, .65fr) 1.7rem; align-items: center; gap: .72rem; padding: .78rem .15rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); color: inherit; text-decoration: none; transition: background .15s ease, transform .15s ease; } .portal-researches-row:hover { background: var(--ok-surface-fafbfe,#fafbfe); } .portal-researches-row__icon-box { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-researches-row__icon-box > .material-symbols-rounded { display: block; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.12rem; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-researches-row__identity, .portal-researches-row__meta, .portal-researches-row__value { display: grid; min-width: 0; gap: .08rem; } .portal-researches-row__identity strong, .portal-researches-row__identity small, .portal-researches-row__meta small, .portal-researches-row__meta strong, .portal-researches-row__value small, .portal-researches-row__value strong { display: block; min-width: 0; margin: 0; } .portal-researches-row__identity strong { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .75rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-researches-row__identity small, .portal-researches-row__meta small, .portal-researches-row__value small { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .59rem; } .portal-researches-row__meta strong, .portal-researches-row__value strong { overflow: hidden; color: var(--ok-ink-526077,#526077); font-size: .67rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-researches-row__meta strong.is-expired { color: var(--ok-ink-b45309,#b45309); } .portal-researches-row__value { text-align: right; } .portal-researches-row__value strong { color: var(--ok-ink-29364b,#29364b); } .portal-researches-status { display: inline-flex; width: fit-content; min-height: 1.7rem; align-items: center; justify-content: center; gap: .25rem; padding: .28rem .46rem; border-radius: 999px; font-size: .6rem; font-weight: 700; white-space: nowrap; } .portal-researches-status .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .82rem; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-researches-status.is-published { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-researches-status.is-archived { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-526077,#526077); } .portal-researches-row__arrow { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .5rem; color: var(--ok-ink-7c8aa0,#7c8aa0); font-size: .95rem; line-height: 1; transition: border-color .15s ease, color .15s ease, transform .15s ease; } .portal-researches-row:hover .portal-researches-row__arrow { transform: translateX(2px); border-color: var(--ok-line-cbc8e8,#cbc8e8); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-researches-deadline { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: .8rem; border: 1px solid var(--ok-line-e8ebf2,#e8ebf2); border-radius: .82rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-researches-deadline > span { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: .78rem; background: var(--ok-surface-eef4ff,#eef4ff); color: var(--ok-ink-2563eb,#2563eb); font-size: 1.15rem; font-weight: 700; } .portal-researches-deadline > div { display: grid; min-width: 0; gap: .08rem; } .portal-researches-deadline strong, .portal-researches-deadline small { display: block; min-width: 0; margin: 0; } .portal-researches-deadline strong { color: var(--ok-ink-334155,#334155); font-size: .72rem; font-weight: 700; text-transform: capitalize; } .portal-researches-deadline small { overflow: hidden; color: var(--ok-ink-7b889b,#7b889b); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; } .portal-researches-primary-action { display: inline-flex; width: 100%; min-height: 2.55rem; align-items: center; justify-content: center; gap: .35rem; margin-top: .7rem; padding: .55rem .72rem; border-radius: .72rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .67rem; font-weight: 700; text-decoration: none; transition: background .15s ease, transform .15s ease; } .portal-researches-primary-action:hover { transform: translateY(-1px); background: var(--ok-surface-403d75,#403d75); } .portal-researches-primary-action .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-researches-steps { display: grid; gap: .78rem; margin: 0; padding: 0; list-style: none; } .portal-researches-steps li { position: relative; display: grid; grid-template-columns: 1.85rem minmax(0, 1fr); gap: .58rem; align-items: start; } .portal-researches-steps li:not(:last-child)::after { content: ''; position: absolute; top: 1.85rem; bottom: -.8rem; left: .9rem; width: 1px; background: var(--ok-surface-e7ebf2,#e7ebf2); } .portal-researches-steps li > span { position: relative; z-index: 1; display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border: 1px solid var(--ok-line-dedcf1,#dedcf1); border-radius: 999px; background: var(--ok-surface-f6f5fc,#f6f5fc); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .61rem; font-weight: 700; } .portal-researches-steps li > div { display: grid; min-width: 0; gap: .08rem; padding-top: .08rem; } .portal-researches-steps strong, .portal-researches-steps small { display: block; margin: 0; } .portal-researches-steps strong { color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-researches-steps small { color: var(--ok-ink-7b889b,#7b889b); font-size: .61rem; line-height: 1.45; } .portal-researches-empty { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .8rem; min-height: 9rem; padding: 1rem; border: 1px dashed var(--ok-line-d7dee9,#d7dee9); border-radius: .9rem; background: var(--ok-surface-fbfcfe,#fbfcfe); } .portal-researches-empty__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .85rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-researches-empty__icon > .material-symbols-rounded { font-size: 1.3rem; line-height: 1; } .portal-researches-empty strong, .portal-researches-empty p { display: block; margin: 0; } .portal-researches-empty strong { color: var(--ok-ink-334155,#334155); font-size: .78rem; font-weight: 700; } .portal-researches-empty p { margin-top: .18rem; color: var(--ok-ink-7b889b,#7b889b); font-size: .65rem; line-height: 1.5; } .portal-researches-page :is(a, button):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1120px) { .portal-researches-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-researches-dashboard-grid { grid-template-columns: 1fr; } .portal-researches-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { .portal-researches-row { grid-template-columns: 2.5rem minmax(0, 1fr) auto 1.7rem; } .portal-researches-row__meta, .portal-researches-row__value { grid-column: 2; text-align: left; } .portal-researches-row__meta { margin-top: -.35rem; } .portal-researches-row__value { margin-top: -.4rem; } .portal-researches-row__arrow { grid-column: 4; grid-row: 1 / span 3; } } @media (max-width: 680px) { .portal-researches-heading__icon { display: none; } .portal-researches-metrics, .portal-researches-side-column { grid-template-columns: 1fr; } .portal-researches-metric { min-height: 5.4rem; padding: .78rem; } .portal-researches-card { padding: .8rem; } .portal-researches-card__head { align-items: flex-start; } } @media (max-width: 480px) { .portal-researches-heading h1 { font-size: 1.42rem; } .portal-researches-heading p { font-size: .72rem; } .portal-researches-card__head { display: grid; } .portal-researches-count { width: fit-content; } .portal-researches-row { grid-template-columns: 2.35rem minmax(0, 1fr) 1.6rem; gap: .58rem; padding: .72rem 0; } .portal-researches-row__icon-box { width: 2.35rem; height: 2.35rem; } .portal-researches-status { grid-column: 2; margin-top: .08rem; } .portal-researches-row__meta, .portal-researches-row__value { grid-column: 2; margin-top: 0; } .portal-researches-row__arrow { grid-column: 3; grid-row: 1 / span 4; align-self: center; } } /* Portal · Detalhe da pesquisa — TailAdmin-inspired consistency — Hotfix 8.5.4 */ .portal-research-show-page { --portal-research-show-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-research-show-border: var(--ok-line-dde4ee,#dde4ee); --portal-research-show-heading: var(--ok-ink-172033,#172033); --portal-research-show-muted: var(--ok-ink-74839a,#74839a); display: grid; min-width: 0; gap: 1rem; } .portal-research-show-page, .portal-research-show-page * { box-sizing: border-box; } .portal-research-show-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .1rem .1rem .15rem; } .portal-research-show-heading__copy { min-width: 0; } .portal-research-show-back { display: inline-flex; width: fit-content; align-items: center; gap: .3rem; margin-bottom: .55rem; color: var(--ok-ink-657287,#657287); font-size: .64rem; font-weight: 700; text-decoration: none; } .portal-research-show-back:hover { color: var(--ok-ink-4f4c8f,var(--portal-research-show-primary)); } .portal-research-show-back > .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .95rem; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-research-show-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-research-show-primary)); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-research-show-heading h1 { margin: .16rem 0 0; color: var(--ok-ink-172033,var(--portal-research-show-heading)); font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; } .portal-research-show-heading p { max-width: 58rem; margin: .38rem 0 0; color: var(--ok-ink-74839a,var(--portal-research-show-muted)); font-size: .78rem; line-height: 1.55; } .portal-research-show-heading__actions { display: flex; flex: 0 0 auto; align-items: center; gap: .7rem; } .portal-research-show-heading__icon { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; place-items: center; border: 1px solid var(--ok-line-dedcf1,#dedcf1); border-radius: 1rem; background: var(--ok-surface-f3f1fb,#f3f1fb); color: var(--ok-ink-4f4c8f,var(--portal-research-show-primary)); } .portal-research-show-heading__icon > .material-symbols-rounded, .portal-research-show-metric__icon-box > .material-symbols-rounded, .portal-research-show-card__icon > .material-symbols-rounded, .portal-research-show-notice__icon > .material-symbols-rounded, .portal-research-show-item__placeholder > .material-symbols-rounded, .portal-research-show-empty__icon > .material-symbols-rounded { display: block; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-research-show-heading__icon > .material-symbols-rounded { font-size: 1.42rem; } .portal-research-show-status, .portal-research-show-item-status { display: inline-flex; width: fit-content; align-items: center; justify-content: center; gap: .28rem; border-radius: 999px; font-weight: 700; white-space: nowrap; } .portal-research-show-status { min-height: 2rem; padding: .36rem .58rem; font-size: .63rem; } .portal-research-show-status > .material-symbols-rounded, .portal-research-show-item-status > .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .86rem; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-research-show-status.is-published, .portal-research-show-item-status.is-approved { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-research-show-status.is-archived, .portal-research-show-item-status.is-pending { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-526077,#526077); } .portal-research-show-status.is-expired, .portal-research-show-item-status.is-considering { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-b45309,#b45309); } .portal-research-show-item-status.is-rejected { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-research-show-notice { display: flex; align-items: center; gap: .55rem; padding: .68rem .78rem; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .78rem; background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); font-size: .68rem; font-weight: 700; } .portal-research-show-notice__icon { display: grid; width: 1.85rem; height: 1.85rem; flex: 0 0 1.85rem; place-items: center; border-radius: .55rem; background: var(--ok-surface-dcfce7,#dcfce7); } .portal-research-show-notice__icon > .material-symbols-rounded { font-size: 1rem; } .portal-research-show-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .portal-research-show-metric { display: grid; min-width: 0; min-height: 6rem; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: .82rem; border: 1px solid var(--ok-line-dde4ee,var(--portal-research-show-border)); border-radius: .92rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 14px 30px -30px var(--ok-shadow-0f172a_a500,rgba(15, 23, 42, .5)); } .portal-research-show-metric__icon-box { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-research-show-metric__icon-box.is-products { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-059669,#059669); } .portal-research-show-metric__icon-box.is-shipping { background: var(--ok-surface-eef4ff,#eef4ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-research-show-metric__icon-box.is-total { background: var(--ok-surface-fff4e8,#fff4e8); color: var(--ok-ink-ea580c,#ea580c); } .portal-research-show-metric__icon-box > .material-symbols-rounded { font-size: 1.28rem; } .portal-research-show-metric__copy { display: grid; min-width: 0; gap: .06rem; } .portal-research-show-metric__copy small, .portal-research-show-metric__copy strong, .portal-research-show-metric__copy span { display: block; min-width: 0; margin: 0; } .portal-research-show-metric__copy small { color: var(--ok-ink-74839a,#74839a); font-size: .61rem; font-weight: 700; } .portal-research-show-metric__copy strong { overflow: hidden; color: var(--ok-ink-172033,#172033); font-size: 1rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-research-show-metric__copy span { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .58rem; line-height: 1.4; } .portal-research-show-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .72fr); gap: 1rem; align-items: start; } .portal-research-show-main, .portal-research-show-sidebar { display: grid; min-width: 0; gap: 1rem; } .portal-research-show-sidebar { position: sticky; top: 1rem; } .portal-research-show-card { min-width: 0; padding: .9rem; border: 1px solid var(--ok-line-dde4ee,var(--portal-research-show-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 36px -34px var(--ok-shadow-0f172a_a560,rgba(15, 23, 42, .56)); } .portal-research-show-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .82rem; } .portal-research-show-card__head > div { display: flex; min-width: 0; align-items: center; gap: .58rem; } .portal-research-show-card__icon { display: grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; place-items: center; border-radius: .68rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-research-show-card__icon.is-summary { background: var(--ok-surface-eef4ff,#eef4ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-research-show-card__icon.is-calendar { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .portal-research-show-card__icon.is-feedback { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-059669,#059669); } .portal-research-show-card__icon > .material-symbols-rounded { font-size: 1.12rem; } .portal-research-show-card__head small, .portal-research-show-card__head h2 { display: block; min-width: 0; margin: 0; } .portal-research-show-card__head small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .61rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .portal-research-show-card__head h2 { margin-top: .05rem; color: var(--ok-ink-172033,#172033); font-size: .9rem; font-weight: 700; line-height: 1.2; } .portal-research-show-count { flex: 0 0 auto; padding: .33rem .52rem; border-radius: 999px; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-657287,#657287); font-size: .63rem; font-weight: 700; white-space: nowrap; } .portal-research-show-items { display: grid; gap: .72rem; padding-top: .02rem; } .portal-research-show-item { display: grid; min-width: 0; grid-template-columns: 8.2rem minmax(0, 1fr); gap: .82rem; padding: .72rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .85rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease; } .portal-research-show-item:hover { border-color: var(--ok-line-d5d3eb,#d5d3eb); box-shadow: 0 14px 28px -28px var(--ok-shadow-4f4c8f_a550,rgba(79, 76, 143, .55)); } .portal-research-show-item__media { position: relative; display: grid; width: 100%; min-width: 0; height: 8.2rem; place-items: center; overflow: hidden; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .72rem; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-research-show-item__media img { display: block; width: 100%; height: 100%; object-fit: contain; padding: .38rem; } .portal-research-show-item__placeholder { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; border-radius: .9rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-research-show-item__placeholder > .material-symbols-rounded { font-size: 1.45rem; } .portal-research-show-item__number { position: absolute; top: .4rem; left: .4rem; padding: .25rem .4rem; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: 999px; background: var(--ok-surface-ffffff_a920,rgba(255, 255, 255, .92)); color: var(--ok-ink-657287,#657287); font-size: .56rem; font-weight: 700; backdrop-filter: blur(8px); } .portal-research-show-item__body { display: grid; min-width: 0; align-content: start; gap: .58rem; } .portal-research-show-item__head { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: .7rem; } .portal-research-show-item__head > div { min-width: 0; } .portal-research-show-item__head h3, .portal-research-show-item__head small { display: block; min-width: 0; margin: 0; } .portal-research-show-item__head h3 { color: var(--ok-ink-263247,#263247); font-size: .83rem; font-weight: 700; line-height: 1.3; } .portal-research-show-item__head small { margin-top: .12rem; color: var(--ok-ink-8a97aa,#8a97aa); font-size: .59rem; } .portal-research-show-item-status { flex: 0 0 auto; min-height: 1.65rem; padding: .27rem .44rem; font-size: .57rem; } .portal-research-show-item__description { margin: 0; color: var(--ok-ink-657287,#657287); font-size: .67rem; line-height: 1.5; } .portal-research-show-values { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 0; } .portal-research-show-values > div { min-width: 0; padding: .53rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .65rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-research-show-values > div.is-total { border-color: var(--ok-line-dedcf1,#dedcf1); background: var(--ok-surface-f6f5fc,#f6f5fc); } .portal-research-show-values dt, .portal-research-show-values dd { display: block; min-width: 0; margin: 0; } .portal-research-show-values dt { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .55rem; font-weight: 700; } .portal-research-show-values dd { overflow: hidden; margin-top: .09rem; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-research-show-values .is-total dd { color: var(--ok-ink-403d75,#403d75); } .portal-research-show-item__footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .6rem; padding-top: .02rem; } .portal-research-show-delivery { display: inline-flex; min-width: 0; align-items: center; gap: .28rem; color: var(--ok-ink-526077,#526077); font-size: .6rem; font-weight: 700; } .portal-research-show-delivery.is-muted { color: var(--ok-ink-8a97aa,#8a97aa); font-weight: 700; } .portal-research-show-delivery > .material-symbols-rounded, .portal-research-show-product-link > .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .9rem; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-research-show-product-link { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: .28rem; min-height: 2rem; padding: .4rem .55rem; border: 1px solid var(--ok-line-d8d6ec,#d8d6ec); border-radius: .58rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .6rem; font-weight: 700; text-decoration: none; } .portal-research-show-product-link:hover { border-color: var(--ok-line-bdb8de,#bdb8de); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-research-show-summary { display: grid; gap: .02rem; margin: 0; } .portal-research-show-summary > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; padding: .53rem .08rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-research-show-summary dt, .portal-research-show-summary dd { margin: 0; font-size: .67rem; } .portal-research-show-summary dt { color: var(--ok-ink-74839a,#74839a); } .portal-research-show-summary dd { color: var(--ok-ink-29364b,#29364b); font-weight: 700; white-space: nowrap; } .portal-research-show-summary > div.is-total { margin-top: .25rem; padding: .65rem .58rem; border: 0; border-radius: .68rem; background: linear-gradient(135deg, var(--ok-surface-f0eff9,#f0eff9), var(--ok-surface-eef4ff,#eef4ff)); } .portal-research-show-summary .is-total dt, .portal-research-show-summary .is-total dd { color: var(--ok-ink-403d75,#403d75); font-size: .75rem; font-weight: 700; } .portal-research-show-info-list { display: grid; gap: .02rem; } .portal-research-show-info-list > div { display: grid; min-width: 0; grid-template-columns: 1.85rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .52rem .05rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-research-show-info-list > div:last-child { border-bottom: 0; } .portal-research-show-info-list > div > .material-symbols-rounded { display: grid; width: 1.85rem; height: 1.85rem; place-items: center; border-radius: .52rem; background: var(--ok-surface-f6f7fb,#f6f7fb); color: var(--ok-ink-66748a,#66748a); font-family: 'Material Symbols Rounded'; font-size: .92rem; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-research-show-info-list small, .portal-research-show-info-list strong { display: block; min-width: 0; margin: 0; } .portal-research-show-info-list small { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .56rem; } .portal-research-show-info-list strong { margin-top: .06rem; overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-research-show-feedback-form { display: grid; gap: .5rem; } .portal-research-show-feedback-form label { color: var(--ok-ink-526077,#526077); font-size: .61rem; font-weight: 700; } .portal-research-show-feedback-form textarea { display: block; width: 100%; min-width: 0; min-height: 7.5rem; padding: .68rem; border: 1px solid var(--ok-line-d4dce7,#d4dce7); border-radius: .68rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-172033,#172033); font: inherit; font-size: .68rem; line-height: 1.5; resize: vertical; } .portal-research-show-feedback-form textarea:focus { border-color: var(--ok-line-4f4c8f,#4f4c8f); outline: 0; box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a120,rgba(79, 76, 143, .12)); } .portal-research-show-primary-button { display: inline-flex; width: 100%; min-height: 2.45rem; align-items: center; justify-content: center; gap: .35rem; padding: .52rem .7rem; border: 0; border-radius: .68rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font: inherit; font-size: .65rem; font-weight: 700; cursor: pointer; } .portal-research-show-primary-button:hover { background: var(--ok-surface-403d75,#403d75); } .portal-research-show-primary-button:disabled { cursor: wait; opacity: .62; } .portal-research-show-primary-button > .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .95rem; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-research-show-field-error { margin: -.15rem 0 0; color: var(--ok-ink-b91c1c,#b91c1c); font-size: .59rem; font-weight: 700; } .portal-research-show-readonly { display: flex; align-items: flex-start; gap: .45rem; padding: .68rem; border-radius: .68rem; background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-657287,#657287); } .portal-research-show-readonly > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-4f4c8f,#4f4c8f); font-family: 'Material Symbols Rounded'; font-size: 1rem; line-height: 1; } .portal-research-show-readonly p { margin: 0; font-size: .62rem; line-height: 1.5; } .portal-research-show-empty { display: grid; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .75rem; min-height: 8rem; padding: 1rem; border: 1px dashed var(--ok-line-d7dee9,#d7dee9); border-radius: .82rem; background: var(--ok-surface-fbfcfe,#fbfcfe); } .portal-research-show-empty__icon { display: grid; width: 3rem; height: 3rem; place-items: center; border-radius: .82rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-research-show-empty__icon > .material-symbols-rounded { font-size: 1.3rem; } .portal-research-show-empty strong, .portal-research-show-empty p { display: block; margin: 0; } .portal-research-show-empty strong { color: var(--ok-ink-334155,#334155); font-size: .76rem; font-weight: 700; } .portal-research-show-empty p { margin-top: .16rem; color: var(--ok-ink-7b889b,#7b889b); font-size: .63rem; line-height: 1.5; } .portal-research-show-page :is(a, button, textarea):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1120px) { .portal-research-show-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-research-show-grid { grid-template-columns: 1fr; } .portal-research-show-sidebar { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-research-show-feedback-card { grid-column: 1 / -1; } } @media (max-width: 760px) { .portal-research-show-heading { align-items: flex-start; } .portal-research-show-heading__icon { display: none; } .portal-research-show-item { grid-template-columns: 6.5rem minmax(0, 1fr); } .portal-research-show-item__media { height: 6.5rem; } .portal-research-show-values { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .portal-research-show-heading__actions { align-self: flex-start; } .portal-research-show-metrics, .portal-research-show-sidebar { grid-template-columns: 1fr; } .portal-research-show-feedback-card { grid-column: auto; } .portal-research-show-card { padding: .8rem; } .portal-research-show-item { grid-template-columns: 1fr; padding: .65rem; } .portal-research-show-item__media { height: 12rem; } } @media (max-width: 480px) { .portal-research-show-heading { display: grid; gap: .55rem; } .portal-research-show-heading h1 { font-size: 1.42rem; } .portal-research-show-heading p { font-size: .72rem; } .portal-research-show-status { min-height: 1.8rem; } .portal-research-show-metric { min-height: 5.4rem; padding: .78rem; } .portal-research-show-card__head { align-items: flex-start; } .portal-research-show-item__head { display: grid; } .portal-research-show-item-status { width: fit-content; } .portal-research-show-item__footer { align-items: flex-start; flex-direction: column; } .portal-research-show-product-link { width: 100%; } } /* Portal · Serviços contratados — Hotfix 8.5.5 */ .portal-services-page { --portal-services-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-services-primary-soft: var(--ok-surface-f0eff9,#f0eff9); --portal-services-border: var(--ok-line-dde4ee,#dde4ee); --portal-services-heading: var(--ok-ink-172033,#172033); --portal-services-muted: var(--ok-ink-74839a,#74839a); --portal-services-card: var(--ok-surface-ffffff,#ffffff); display: grid; min-width: 0; gap: 1rem; } .portal-services-page, .portal-services-page * { box-sizing: border-box; } .portal-services-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .1rem .1rem .15rem; } .portal-services-heading > div:first-child { min-width: 0; } .portal-services-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-services-primary)); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-services-heading h1 { margin: .16rem 0 0; color: var(--ok-ink-172033,var(--portal-services-heading)); font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; } .portal-services-heading p { max-width: 54rem; margin: .38rem 0 0; color: var(--ok-ink-74839a,var(--portal-services-muted)); font-size: .78rem; line-height: 1.55; } .portal-services-heading__icon { display: grid; width: 3.5rem; height: 3.5rem; flex: 0 0 3.5rem; place-items: center; border: 1px solid var(--ok-line-dedcf1,#dedcf1); border-radius: 1rem; background: var(--ok-surface-f3f1fb,#f3f1fb); color: var(--ok-ink-4f4c8f,var(--portal-services-primary)); } .portal-services-heading__icon > .material-symbols-rounded, .portal-services-metric__icon-box > .material-symbols-rounded, .portal-services-card__icon > .material-symbols-rounded, .portal-services-service__icon > .material-symbols-rounded, .portal-services-empty__icon > .material-symbols-rounded { display: block; width: auto; height: auto; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-services-heading__icon > .material-symbols-rounded { font-size: 1.42rem; } .portal-services-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .portal-services-metric { display: grid; min-width: 0; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .72rem; min-height: 7rem; padding: .9rem; border: 1px solid var(--ok-line-dde4ee,var(--portal-services-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-services-card)); box-shadow: 0 14px 34px -32px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-services-metric__icon-box { display: grid; width: 2.65rem; height: 2.65rem; place-items: center; align-self: center; justify-self: start; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-services-metric__icon-box.is-domain { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-services-metric__icon-box.is-backup { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-services-metric__icon-box.is-storage { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .portal-services-metric__icon-box > .material-symbols-rounded { font-size: 1.28rem; } .portal-services-metric__copy { display: grid; min-width: 0; align-content: center; gap: .06rem; } .portal-services-metric__copy small, .portal-services-metric__copy strong, .portal-services-metric__copy > span { display: block; min-width: 0; margin: 0; } .portal-services-metric__copy small { color: var(--ok-ink-718096,#718096); font-size: .65rem; font-weight: 700; } .portal-services-metric__copy strong { margin-top: .05rem; overflow: hidden; color: var(--ok-ink-172033,var(--portal-services-heading)); font-size: 1.18rem; font-weight: 700; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; } .portal-services-metric__copy > span { margin-top: .13rem; overflow: hidden; color: var(--ok-ink-8491a5,#8491a5); font-size: .63rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-services-dashboard-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(17.5rem, 20rem); align-items: start; gap: .9rem; } .portal-services-main, .portal-services-side-column { display: grid; min-width: 0; gap: .9rem; } .portal-services-card { min-width: 0; padding: .95rem; border: 1px solid var(--ok-line-dde4ee,var(--portal-services-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-services-card)); box-shadow: 0 14px 34px -32px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-services-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; margin-bottom: .85rem; } .portal-services-card__head > div { display: grid; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .62rem; } .portal-services-card__icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; background: var(--ok-surface-f0eff9,var(--portal-services-primary-soft)); color: var(--ok-ink-4f4c8f,var(--portal-services-primary)); } .portal-services-card__icon.is-storage { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .portal-services-card__icon.is-calendar { background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-services-card__icon.is-help { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-services-card__icon > .material-symbols-rounded { font-size: 1.14rem; } .portal-services-card__head small, .portal-services-card__head h2 { display: block; min-width: 0; margin: 0; } .portal-services-card__head small { color: var(--ok-ink-4f4c8f,var(--portal-services-primary)); font-size: .61rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .portal-services-card__head h2 { margin-top: .05rem; color: var(--ok-ink-172033,var(--portal-services-heading)); font-size: .9rem; font-weight: 700; line-height: 1.2; } .portal-services-count { flex: 0 0 auto; padding: .33rem .52rem; border-radius: 999px; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-657287,#657287); font-size: .63rem; font-weight: 700; white-space: nowrap; } .portal-services-list { display: grid; min-width: 0; gap: .75rem; } .portal-services-service { display: grid; min-width: 0; gap: .82rem; padding: .85rem; border: 1px solid var(--ok-line-e5eaf1,#e5eaf1); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .portal-services-service:hover { transform: translateY(-1px); border-color: var(--ok-line-d8d5ec,#d8d5ec); box-shadow: 0 12px 26px -26px var(--ok-shadow-0f172a_a620,rgba(15, 23, 42, .62)); } .portal-services-service__head, .portal-services-service__identity, .portal-services-service__footer, .portal-services-service__backup, .portal-services-service__facts dd, .portal-services-support-action, .portal-services-primary-action { display: flex; min-width: 0; align-items: center; } .portal-services-service__head { justify-content: space-between; gap: .8rem; } .portal-services-service__identity { gap: .62rem; } .portal-services-service__icon { display: grid; width: 2.55rem; height: 2.55rem; flex: 0 0 2.55rem; place-items: center; border-radius: .74rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-services-service__icon > .material-symbols-rounded { font-size: 1.18rem; } .portal-services-service__identity > div { display: grid; min-width: 0; gap: .08rem; } .portal-services-service__identity strong, .portal-services-service__identity small { display: block; min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-services-service__identity strong { color: var(--ok-ink-29364b,#29364b); font-size: .8rem; font-weight: 700; } .portal-services-service__identity small { color: var(--ok-ink-8491a5,#8491a5); font-size: .62rem; } .portal-services-status { display: inline-flex; width: fit-content; min-height: 1.72rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .26rem; padding: .28rem .48rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-526077,#526077); font-size: .6rem; font-weight: 700; white-space: nowrap; } .portal-services-status > .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .82rem; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-services-status.is-active { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-047857,#047857); } .portal-services-status.is-maintenance { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-b45309,#b45309); } .portal-services-status.is-suspended { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-services-service__body { display: grid; min-width: 0; grid-template-columns: minmax(13rem, 1fr) minmax(18rem, 1.25fr); align-items: center; gap: .85rem; } .portal-services-storage { display: grid; min-width: 0; gap: .45rem; padding: .72rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .78rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-services-storage__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .6rem; } .portal-services-storage__head > div { display: grid; min-width: 0; gap: .07rem; } .portal-services-storage__head small, .portal-services-storage__head strong, .portal-services-storage__head > span { display: block; margin: 0; } .portal-services-storage__head small { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .59rem; font-weight: 700; } .portal-services-storage__head strong { color: var(--ok-ink-445169,#445169); font-size: .68rem; font-weight: 700; } .portal-services-storage__head > span { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .7rem; font-weight: 700; } .portal-services-progress { position: relative; display: block; width: 100%; height: .38rem; overflow: hidden; border-radius: 999px; background: var(--ok-surface-e9edf4,#e9edf4); } .portal-services-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); } .portal-services-progress.is-large { height: .48rem; margin-top: .8rem; } .portal-services-service__facts { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; margin: 0; } .portal-services-service__facts > div { min-width: 0; padding: .62rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); } .portal-services-service__facts dt, .portal-services-service__facts dd { margin: 0; } .portal-services-service__facts dt { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .57rem; font-weight: 700; } .portal-services-service__facts dd { gap: .24rem; margin-top: .16rem; overflow: hidden; color: var(--ok-ink-526077,#526077); font-size: .63rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-services-service__facts dd.is-success { color: var(--ok-ink-047857,#047857); } .portal-services-service__facts dd > .material-symbols-rounded { display: block; flex: 0 0 auto; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .86rem; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-services-service__footer { justify-content: space-between; gap: .75rem; padding-top: .7rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-services-service__backup { gap: .42rem; color: var(--ok-ink-718096,#718096); } .portal-services-service__backup > .material-symbols-rounded { display: block; flex: 0 0 auto; margin: 0; font-size: 1rem; line-height: 1; } .portal-services-service__backup > span:last-child { display: grid; min-width: 0; gap: .04rem; } .portal-services-service__backup small, .portal-services-service__backup strong { display: block; margin: 0; } .portal-services-service__backup small { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .57rem; } .portal-services-service__backup strong { color: var(--ok-ink-657287,#657287); font-size: .62rem; font-weight: 700; } .portal-services-support-action { flex: 0 0 auto; justify-content: center; gap: .32rem; min-height: 2.35rem; padding: .5rem .68rem; border: 1px solid var(--ok-line-d8d5ec,#d8d5ec); border-radius: .68rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; font-weight: 700; text-decoration: none; transition: background .15s ease, border-color .15s ease, transform .15s ease; } .portal-services-support-action:hover { transform: translateY(-1px); border-color: var(--ok-line-bbb6df,#bbb6df); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-services-support-action > .material-symbols-rounded, .portal-services-primary-action > .material-symbols-rounded { display: block; margin: 0; font-family: 'Material Symbols Rounded'; font-size: .98rem; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; } .portal-services-capacity { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; padding: .78rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .82rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-services-capacity__value { display: grid; min-width: 0; gap: .1rem; } .portal-services-capacity__value strong, .portal-services-capacity__value small { display: block; margin: 0; } .portal-services-capacity__value strong { color: var(--ok-ink-29364b,#29364b); font-size: 1.08rem; font-weight: 700; } .portal-services-capacity__value small { color: var(--ok-ink-8491a5,#8491a5); font-size: .61rem; } .portal-services-capacity__ring { display: grid; width: 4.2rem; height: 4.2rem; flex: 0 0 4.2rem; place-items: center; border-radius: 50%; background: conic-gradient(var(--ok-surface-4f4c8f,#4f4c8f) calc(var(--portal-services-usage) * 1%), var(--ok-surface-e8ebf2,#e8ebf2) 0); } .portal-services-capacity__ring::before { content: ''; grid-area: 1 / 1; width: 3.22rem; height: 3.22rem; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); } .portal-services-capacity__ring > span { position: relative; z-index: 1; grid-area: 1 / 1; color: var(--ok-ink-403d75,#403d75); font-size: .72rem; font-weight: 700; } .portal-services-capacity__note, .portal-services-help-card > p { margin: .7rem 0 0; color: var(--ok-ink-74839a,#74839a); font-size: .65rem; line-height: 1.5; } .portal-services-expiry { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: .8rem; border: 1px solid var(--ok-line-e8ebf2,#e8ebf2); border-radius: .82rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-services-expiry > span { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: .78rem; background: var(--ok-surface-eef4ff,#eef4ff); color: var(--ok-ink-2563eb,#2563eb); font-size: 1.15rem; font-weight: 700; } .portal-services-expiry > div { display: grid; min-width: 0; gap: .08rem; } .portal-services-expiry strong, .portal-services-expiry small { display: block; min-width: 0; margin: 0; } .portal-services-expiry strong { color: var(--ok-ink-334155,#334155); font-size: .72rem; font-weight: 700; text-transform: capitalize; } .portal-services-expiry small { overflow: hidden; color: var(--ok-ink-7b889b,#7b889b); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; } .portal-services-primary-action { width: 100%; min-height: 2.55rem; justify-content: center; gap: .35rem; margin-top: .7rem; padding: .55rem .72rem; border-radius: .72rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .67rem; font-weight: 700; text-decoration: none; transition: background .15s ease, transform .15s ease; } .portal-services-primary-action:hover { transform: translateY(-1px); background: var(--ok-surface-403d75,#403d75); } .portal-services-empty { display: grid; min-width: 0; grid-template-columns: 3.2rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: 1.2rem; border: 1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius: .9rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-services-empty__icon { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; border-radius: .82rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-services-empty__icon > .material-symbols-rounded { font-size: 1.35rem; } .portal-services-empty strong, .portal-services-empty p { display: block; margin: 0; } .portal-services-empty strong { color: var(--ok-ink-334155,#334155); font-size: .78rem; font-weight: 700; } .portal-services-empty p { margin-top: .18rem; color: var(--ok-ink-8491a5,#8491a5); font-size: .65rem; line-height: 1.45; } .portal-services-page :is(a, button):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1180px) { .portal-services-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-services-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 18.5rem); } .portal-services-service__body { grid-template-columns: 1fr; } } @media (max-width: 900px) { .portal-services-dashboard-grid { grid-template-columns: 1fr; } .portal-services-side-column { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-services-help-card { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-services-heading { align-items: flex-start; } .portal-services-heading__icon { width: 3rem; height: 3rem; flex-basis: 3rem; border-radius: .86rem; } .portal-services-heading h1 { font-size: 1.48rem; } .portal-services-heading p { font-size: .74rem; } .portal-services-metrics, .portal-services-side-column { grid-template-columns: 1fr; } .portal-services-metric { min-height: 5.75rem; } .portal-services-card { padding: .82rem; } .portal-services-service__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-services-service__footer { align-items: stretch; flex-direction: column; } .portal-services-support-action { width: 100%; } .portal-services-help-card { grid-column: auto; } } @media (max-width: 460px) { .portal-services-heading { gap: .65rem; } .portal-services-heading__icon { width: 2.7rem; height: 2.7rem; flex-basis: 2.7rem; } .portal-services-heading__icon > .material-symbols-rounded { font-size: 1.22rem; } .portal-services-card__head, .portal-services-service__head { align-items: flex-start; } .portal-services-card__head { display: grid; } .portal-services-count { width: fit-content; } .portal-services-service__head { display: grid; } .portal-services-status { margin-left: 3.17rem; } .portal-services-service__facts { grid-template-columns: 1fr 1fr; } .portal-services-capacity { align-items: flex-start; } .portal-services-capacity__ring { width: 3.8rem; height: 3.8rem; flex-basis: 3.8rem; } .portal-services-capacity__ring::before { width: 2.92rem; height: 2.92rem; } } /* Portal · Contratos — TailAdmin-inspired dashboard — Hotfix 8.5.6 */ .portal-contracts-page { --portal-contracts-heading: var(--ok-ink-172033,#172033); --portal-contracts-muted: var(--ok-ink-748197,#748197); --portal-contracts-border: var(--ok-line-dfe5ed,#dfe5ed); --portal-contracts-panel: var(--ok-surface-ffffff,#ffffff); --portal-contracts-soft: var(--ok-surface-f7f9fc,#f7f9fc); --portal-contracts-primary: var(--ok-ink-4f4c8f,#4f4c8f); display: grid; min-width: 0; gap: 1rem; } .portal-contracts-page, .portal-contracts-page * { box-sizing: border-box; } .portal-contracts-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .1rem .1rem .2rem; } .portal-contracts-heading > div:first-child { min-width: 0; } .portal-contracts-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-contracts-primary)); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-contracts-heading h1, .portal-contracts-heading p { margin: 0; } .portal-contracts-heading h1 { margin-top: .22rem; color: var(--ok-ink-172033,var(--portal-contracts-heading)); font-size: clamp(1.6rem, 2.8vw, 2.05rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; } .portal-contracts-heading p { max-width: 54rem; margin-top: .38rem; color: var(--ok-ink-748197,var(--portal-contracts-muted)); font-size: .82rem; line-height: 1.55; } .portal-contracts-heading__icon, .portal-contracts-metric__icon-box, .portal-contracts-card__icon, .portal-contracts-item__icon, .portal-contracts-empty__icon { display: inline-grid; flex: 0 0 auto; place-items: center; } .portal-contracts-heading__icon { width: 3.45rem; height: 3.45rem; border: 1px solid var(--ok-line-dcd9f0,#dcd9f0); border-radius: 1rem; background: linear-gradient(145deg, var(--ok-surface-f8f7fd,#f8f7fd), var(--ok-surface-eeecf8,#eeecf8)); color: var(--ok-ink-4f4c8f,var(--portal-contracts-primary)); } .portal-contracts-heading__icon > .material-symbols-rounded { font-size: 1.55rem; line-height: 1; } .portal-contracts-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .portal-contracts-metric { display: grid; min-width: 0; grid-template-columns: 2.7rem minmax(0, 1fr); align-items: center; gap: .75rem; min-height: 7.15rem; padding: 1rem; border: 1px solid var(--ok-line-dfe5ed,var(--portal-contracts-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-contracts-panel)); box-shadow: 0 16px 40px -38px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-contracts-metric__icon-box { width: 2.7rem; height: 2.7rem; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-contracts-metric__icon-box.is-pending { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-contracts-metric__icon-box.is-signed { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-contracts-metric__icon-box.is-value { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-contracts-metric__icon-box > .material-symbols-rounded { margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.22rem; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-contracts-metric__copy { display: grid; min-width: 0; gap: .08rem; } .portal-contracts-metric__copy small, .portal-contracts-metric__copy strong, .portal-contracts-metric__copy span { display: block; min-width: 0; margin: 0; } .portal-contracts-metric__copy small { color: var(--ok-ink-6f7d93,#6f7d93); font-size: .68rem; font-weight: 700; } .portal-contracts-metric__copy strong { overflow: hidden; color: var(--ok-ink-172033,var(--portal-contracts-heading)); font-size: 1.25rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-contracts-metric__copy span { overflow: hidden; color: var(--ok-ink-8794a8,#8794a8); font-size: .65rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-contracts-dashboard-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 1rem; align-items: start; } .portal-contracts-main, .portal-contracts-side-column { display: grid; min-width: 0; gap: 1rem; } .portal-contracts-side-column { position: sticky; top: 1rem; } .portal-contracts-card { display: grid; min-width: 0; gap: .9rem; padding: 1rem; border: 1px solid var(--ok-line-dfe5ed,var(--portal-contracts-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-contracts-panel)); box-shadow: 0 16px 42px -40px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-contracts-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; } .portal-contracts-card__head > div { display: grid; min-width: 0; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: center; gap: .65rem; } .portal-contracts-card__icon { width: 2.45rem; height: 2.45rem; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-contracts-card__icon.is-action { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-contracts-card__icon.is-overview { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-contracts-card__icon.is-security { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-contracts-card__icon > .material-symbols-rounded, .portal-contracts-item__icon > .material-symbols-rounded, .portal-contracts-empty__icon > .material-symbols-rounded { font-size: 1.15rem; line-height: 1; } .portal-contracts-card__head small, .portal-contracts-card__head h2 { display: block; min-width: 0; margin: 0; } .portal-contracts-card__head small { color: var(--ok-ink-4f4c8f,var(--portal-contracts-primary)); font-size: .62rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .portal-contracts-card__head h2 { margin-top: .08rem; color: var(--ok-ink-172033,var(--portal-contracts-heading)); font-size: .92rem; font-weight: 700; } .portal-contracts-count { flex: 0 0 auto; padding: .34rem .55rem; border-radius: 999px; background: var(--ok-surface-f4f5fa,#f4f5fa); color: var(--ok-ink-66748a,#66748a); font-size: .64rem; font-weight: 700; white-space: nowrap; } .portal-contracts-list { display: grid; min-width: 0; gap: .72rem; } .portal-contracts-item { display: grid; min-width: 0; gap: .85rem; padding: .9rem; border: 1px solid var(--ok-line-e3e8ef,#e3e8ef); border-radius: .88rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .portal-contracts-item:hover { transform: translateY(-1px); border-color: var(--ok-line-cbc8e5,#cbc8e5); box-shadow: 0 14px 32px -30px var(--ok-shadow-4f4c8f_a420,rgba(79, 76, 143, .42)); } .portal-contracts-item.requires-action { border-color: var(--ok-line-ead7a9,#ead7a9); background: linear-gradient(145deg, var(--ok-surface-ffffff,#fff) 0%, var(--ok-surface-fffdf7,#fffdf7) 100%); } .portal-contracts-item__head, .portal-contracts-item__identity, .portal-contracts-item__footer, .portal-contracts-item__hint, .portal-contracts-open, .portal-contracts-facts dd, .portal-contracts-status { display: flex; min-width: 0; align-items: center; } .portal-contracts-item__head { justify-content: space-between; gap: .8rem; } .portal-contracts-item__identity { gap: .65rem; } .portal-contracts-item__identity > div { min-width: 0; } .portal-contracts-item__icon { width: 2.55rem; height: 2.55rem; border-radius: .72rem; background: var(--ok-surface-f5f4fb,#f5f4fb); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-contracts-item__identity small, .portal-contracts-item__identity h3 { display: block; min-width: 0; margin: 0; } .portal-contracts-item__identity small { color: var(--ok-ink-8491a5,#8491a5); font-size: .64rem; font-weight: 700; } .portal-contracts-item__identity h3 { margin-top: .12rem; overflow: hidden; color: var(--ok-ink-263247,#263247); font-size: .88rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .portal-contracts-status { flex: 0 0 auto; justify-content: center; gap: .28rem; min-height: 1.8rem; padding: .3rem .5rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-526077,#526077); font-size: .64rem; font-weight: 700; white-space: nowrap; } .portal-contracts-status > .material-symbols-rounded { font-size: .9rem; line-height: 1; } .portal-contracts-status.is-success { background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-166534,#166534); } .portal-contracts-status.is-pending { background: var(--ok-surface-fef3c7,#fef3c7); color: var(--ok-ink-92400e,#92400e); } .portal-contracts-status.is-danger { background: var(--ok-surface-fee2e2,#fee2e2); color: var(--ok-ink-991b1b,#991b1b); } .portal-contracts-status.is-expired { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .portal-contracts-facts { display: grid; min-width: 0; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; } .portal-contracts-facts > div { min-width: 0; padding: .62rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .68rem; background: var(--ok-surface-fafbfc,#fafbfc); } .portal-contracts-facts dt, .portal-contracts-facts dd { margin: 0; } .portal-contracts-facts dt { color: var(--ok-ink-8491a5,#8491a5); font-size: .61rem; font-weight: 700; } .portal-contracts-facts dd { gap: .28rem; margin-top: .17rem; overflow: hidden; color: var(--ok-ink-445169,#445169); font-size: .68rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .portal-contracts-facts dd > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-6f6aa8,#6f6aa8); font-size: .9rem; line-height: 1; } .portal-contracts-facts__separator { color: var(--ok-ink-a1acbc,#a1acbc); } .portal-contracts-item__footer { justify-content: space-between; gap: .75rem; padding-top: .72rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-contracts-item__hint { gap: .38rem; color: var(--ok-ink-7d899c,#7d899c); font-size: .65rem; line-height: 1.4; } .portal-contracts-item__hint > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-6f6aa8,#6f6aa8); font-size: 1rem; line-height: 1; } .portal-contracts-item__hint.is-action, .portal-contracts-item__hint.is-action > .material-symbols-rounded { color: var(--ok-ink-a16207,#a16207); } .portal-contracts-open, .portal-contracts-primary-action { justify-content: center; gap: .35rem; min-height: 2.45rem; padding: .55rem .7rem; border: 1px solid var(--ok-line-d8d5eb,#d8d5eb); border-radius: .7rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .68rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; } .portal-contracts-open:hover { border-color: var(--ok-line-aaa5d5,#aaa5d5); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-contracts-open > .material-symbols-rounded, .portal-contracts-primary-action > .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-contracts-next-action { display: grid; gap: .18rem; padding: .78rem; border: 1px solid var(--ok-line-f2dfad,#f2dfad); border-radius: .75rem; background: var(--ok-surface-fffaf0,#fffaf0); } .portal-contracts-next-action strong, .portal-contracts-next-action span, .portal-contracts-next-action small { display: block; margin: 0; } .portal-contracts-next-action strong { color: var(--ok-ink-3d4657,#3d4657); font-size: .8rem; font-weight: 700; line-height: 1.35; } .portal-contracts-next-action span { color: var(--ok-ink-7a879b,#7a879b); font-size: .64rem; font-weight: 700; } .portal-contracts-next-action small { margin-top: .24rem; color: var(--ok-ink-a16207,#a16207); font-size: .65rem; } .portal-contracts-primary-action { display: flex; width: 100%; border-color: var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .portal-contracts-primary-action:hover { background: var(--ok-surface-403d75,#403d75); } .portal-contracts-overview { display: grid; gap: .05rem; margin: 0; } .portal-contracts-overview > div { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .58rem .05rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-contracts-overview > div:last-child { border-bottom: 0; } .portal-contracts-overview dt, .portal-contracts-overview dd { margin: 0; font-size: .69rem; } .portal-contracts-overview dt { display: flex; align-items: center; gap: .4rem; color: var(--ok-ink-6e7b90,#6e7b90); } .portal-contracts-overview dd { color: var(--ok-ink-29364b,#29364b); font-weight: 700; } .portal-contracts-dot { width: .45rem; height: .45rem; flex: 0 0 .45rem; border-radius: 999px; background: var(--ok-surface-94a3b8,#94a3b8); } .portal-contracts-dot.is-success { background: var(--ok-surface-22c55e,#22c55e); } .portal-contracts-dot.is-pending { background: var(--ok-surface-f59e0b,#f59e0b); } .portal-contracts-dot.is-expired { background: var(--ok-surface-94a3b8,#94a3b8); } .portal-contracts-dot.is-danger { background: var(--ok-surface-ef4444,#ef4444); } .portal-contracts-dot.is-renewed { background: var(--ok-surface-2563eb,#2563eb); } .portal-contracts-security-card > p { margin: 0; color: var(--ok-ink-748197,#748197); font-size: .69rem; line-height: 1.55; } .portal-contracts-empty { display: grid; min-width: 0; grid-template-columns: 3rem minmax(0, 1fr); align-items: center; gap: .8rem; padding: 1.1rem; border: 1px dashed var(--ok-line-cdd6e2,#cdd6e2); border-radius: .85rem; background: var(--ok-surface-fafbfc,#fafbfc); } .portal-contracts-empty__icon { width: 3rem; height: 3rem; border-radius: .8rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-contracts-empty strong, .portal-contracts-empty p { display: block; margin: 0; } .portal-contracts-empty strong { color: var(--ok-ink-29364b,#29364b); font-size: .8rem; font-weight: 700; } .portal-contracts-empty p { margin-top: .16rem; color: var(--ok-ink-8491a5,#8491a5); font-size: .68rem; } .portal-contracts-pagination { min-width: 0; padding-top: .15rem; } .portal-contracts-page :is(a, button):focus-visible { outline: 3px solid var(--ok-line-2563eb_a200,rgba(37, 99, 235, .2)); outline-offset: 2px; } @media (max-width: 1180px) { .portal-contracts-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-contracts-dashboard-grid { grid-template-columns: minmax(0, 1fr) minmax(17rem, 19rem); } .portal-contracts-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .portal-contracts-dashboard-grid { grid-template-columns: 1fr; } .portal-contracts-side-column { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-contracts-security-card { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-contracts-heading { align-items: flex-start; } .portal-contracts-heading__icon { width: 3rem; height: 3rem; } .portal-contracts-heading h1 { font-size: 1.5rem; } .portal-contracts-heading p { font-size: .76rem; } .portal-contracts-metrics, .portal-contracts-side-column { grid-template-columns: 1fr; } .portal-contracts-metric { min-height: 0; padding: .82rem; } .portal-contracts-card { padding: .82rem; } .portal-contracts-item__head { align-items: flex-start; } .portal-contracts-facts { grid-template-columns: 1fr 1fr; } .portal-contracts-item__footer { display: grid; } .portal-contracts-open { width: 100%; } .portal-contracts-security-card { grid-column: auto; } } @media (max-width: 460px) { .portal-contracts-heading__icon { display: none; } .portal-contracts-card__head, .portal-contracts-item__head { display: grid; } .portal-contracts-count, .portal-contracts-status { width: fit-content; } .portal-contracts-facts { grid-template-columns: 1fr; } .portal-contracts-item__identity h3 { white-space: normal; } } /* Portal · Faturas — TailAdmin-inspired dashboard — Hotfix 8.5.7 */ .portal-invoices-page, .portal-invoice-show-page { --portal-invoices-heading: var(--ok-ink-172033,#172033); --portal-invoices-muted: var(--ok-ink-748197,#748197); --portal-invoices-border: var(--ok-line-dfe5ed,#dfe5ed); --portal-invoices-panel: var(--ok-surface-ffffff,#ffffff); --portal-invoices-soft: var(--ok-surface-f7f9fc,#f7f9fc); --portal-invoices-primary: var(--ok-ink-4f4c8f,#4f4c8f); display: grid; min-width: 0; gap: 1rem; } .portal-invoices-page *, .portal-invoice-show-page * { box-sizing: border-box; } .portal-invoices-heading, .portal-invoice-show-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1.25rem; padding: .1rem .1rem .2rem; } .portal-invoices-heading > div:first-child, .portal-invoice-show-heading__copy { min-width: 0; } .portal-invoices-eyebrow, .portal-invoice-show-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-invoices-primary)); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-invoices-heading h1, .portal-invoices-heading p, .portal-invoice-show-heading h1, .portal-invoice-show-heading p { margin: 0; } .portal-invoices-heading h1, .portal-invoice-show-heading h1 { margin-top: .22rem; color: var(--ok-ink-172033,var(--portal-invoices-heading)); font-size: clamp(1.6rem, 2.8vw, 2.05rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; } .portal-invoices-heading p, .portal-invoice-show-heading p { max-width: 54rem; margin-top: .38rem; color: var(--ok-ink-748197,var(--portal-invoices-muted)); font-size: .82rem; line-height: 1.55; } .portal-invoices-heading__icon, .portal-invoices-metric__icon-box, .portal-invoices-card__icon, .portal-invoices-item__icon, .portal-invoices-empty__icon, .portal-invoice-show-metric__icon-box, .portal-invoice-show-card__icon { display: inline-grid; flex: 0 0 auto; place-items: center; } .portal-invoices-heading__icon { width: 3.45rem; height: 3.45rem; border: 1px solid var(--ok-line-dcd9f0,#dcd9f0); border-radius: 1rem; background: linear-gradient(145deg, var(--ok-surface-f8f7fd,#f8f7fd), var(--ok-surface-eeecf8,#eeecf8)); color: var(--ok-ink-4f4c8f,var(--portal-invoices-primary)); } .portal-invoices-heading__icon > .material-symbols-rounded, .portal-invoice-show-metric__icon-box > .material-symbols-rounded, .portal-invoices-metric__icon-box > .material-symbols-rounded, .portal-invoices-card__icon > .material-symbols-rounded, .portal-invoices-item__icon > .material-symbols-rounded, .portal-invoices-empty__icon > .material-symbols-rounded, .portal-invoice-show-card__icon > .material-symbols-rounded { margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-style: normal; font-weight: 400; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-invoices-heading__icon > .material-symbols-rounded { font-size: 1.55rem; } .portal-invoices-metrics, .portal-invoice-show-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .portal-invoices-metric, .portal-invoice-show-metric { display: grid; min-width: 0; grid-template-columns: 2.7rem minmax(0, 1fr); align-items: center; gap: .75rem; min-height: 7.15rem; padding: 1rem; border: 1px solid var(--ok-line-dfe5ed,var(--portal-invoices-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-invoices-panel)); box-shadow: 0 16px 40px -38px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-invoices-metric__icon-box, .portal-invoice-show-metric__icon-box { width: 2.7rem; height: 2.7rem; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoices-metric__icon-box.is-overdue, .portal-invoice-show-metric__icon-box.is-overdue { background: var(--ok-surface-fff0f1,#fff0f1); color: var(--ok-ink-dc2626,#dc2626); } .portal-invoices-metric__icon-box.is-paid, .portal-invoice-show-metric__icon-box.is-paid { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-invoices-metric__icon-box.is-balance, .portal-invoice-show-metric__icon-box.is-balance { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-invoice-show-metric__icon-box.is-date { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-invoices-metric__icon-box > .material-symbols-rounded, .portal-invoice-show-metric__icon-box > .material-symbols-rounded { font-size: 1.22rem; } .portal-invoices-metric__copy, .portal-invoice-show-metric > div:last-child { display: grid; min-width: 0; gap: .08rem; } .portal-invoices-metric__copy small, .portal-invoices-metric__copy strong, .portal-invoices-metric__copy span, .portal-invoice-show-metric small, .portal-invoice-show-metric strong, .portal-invoice-show-metric span { display: block; min-width: 0; margin: 0; } .portal-invoices-metric__copy small, .portal-invoice-show-metric small { color: var(--ok-ink-6f7d93,#6f7d93); font-size: .68rem; font-weight: 700; } .portal-invoices-metric__copy strong, .portal-invoice-show-metric strong { overflow: hidden; color: var(--ok-ink-172033,var(--portal-invoices-heading)); font-size: 1.25rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-invoices-metric__copy span, .portal-invoice-show-metric span { overflow: hidden; color: var(--ok-ink-8794a8,#8794a8); font-size: .65rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-invoices-dashboard-grid, .portal-invoice-show-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 1rem; align-items: start; } .portal-invoices-main, .portal-invoices-side-column, .portal-invoice-show-main, .portal-invoice-show-side { display: grid; min-width: 0; gap: 1rem; } .portal-invoices-side-column, .portal-invoice-show-side { position: sticky; top: 1rem; } .portal-invoices-card, .portal-invoice-show-card { display: grid; min-width: 0; gap: .9rem; padding: 1rem; border: 1px solid var(--ok-line-dfe5ed,var(--portal-invoices-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-invoices-panel)); box-shadow: 0 16px 42px -40px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-invoices-card__head, .portal-invoice-show-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; } .portal-invoices-card__head > div, .portal-invoice-show-card__head > div { display: grid; min-width: 0; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: center; gap: .65rem; } .portal-invoices-card__icon, .portal-invoice-show-card__icon { width: 2.45rem; height: 2.45rem; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoices-card__icon.is-next, .portal-invoice-show-card__icon.is-change { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-invoices-card__icon.is-overview, .portal-invoice-show-card__icon.is-details { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-invoices-card__icon.is-security, .portal-invoice-show-card__icon.is-security { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-invoices-card__icon > .material-symbols-rounded, .portal-invoice-show-card__icon > .material-symbols-rounded { font-size: 1.12rem; } .portal-invoices-card__head small, .portal-invoices-card__head h2, .portal-invoice-show-card__head small, .portal-invoice-show-card__head h2 { display: block; margin: 0; } .portal-invoices-card__head small, .portal-invoice-show-card__head small { color: var(--ok-ink-4f4c8f,var(--portal-invoices-primary)); font-size: .64rem; font-weight: 700; text-transform: uppercase; } .portal-invoices-card__head h2, .portal-invoice-show-card__head h2 { margin-top: .08rem; color: var(--ok-ink-172033,var(--portal-invoices-heading)); font-size: .9rem; font-weight: 700; } .portal-invoices-count, .portal-invoice-show-count { flex: 0 0 auto; padding: .34rem .55rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .64rem; font-weight: 700; white-space: nowrap; } .portal-invoices-tabs { display: flex; min-width: 0; flex-wrap: wrap; gap: .38rem; padding: .3rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .78rem; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-invoices-tabs button { display: inline-flex; min-height: 2.2rem; align-items: center; justify-content: center; gap: .35rem; padding: .45rem .72rem; border: 0; border-radius: .6rem; background: transparent; color: var(--ok-ink-64748b,#64748b); font: inherit; font-size: .68rem; font-weight: 700; cursor: pointer; } .portal-invoices-tabs button > span { display: inline-grid; min-width: 1.3rem; height: 1.3rem; place-items: center; padding-inline: .25rem; border-radius: 999px; background: var(--ok-surface-e9edf4,#e9edf4); color: var(--ok-ink-5d697d,#5d697d); font-size: .58rem; } .portal-invoices-tabs button.is-active { background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-403d75,#403d75); box-shadow: 0 4px 14px -10px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-invoices-tabs button.is-active > span { background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoices-list { display: grid; min-width: 0; gap: .65rem; } .portal-invoices-item { display: grid; min-width: 0; gap: .72rem; padding: .85rem; border: 1px solid var(--ok-line-e3e8ef,#e3e8ef); border-radius: .88rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .portal-invoices-item:hover { transform: translateY(-1px); border-color: var(--ok-line-cbc8e3,#cbc8e3); box-shadow: 0 12px 30px -26px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-invoices-item.requires-attention { border-color: var(--ok-line-fecaca,#fecaca); background: linear-gradient(145deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-fffafb,#fffafb)); } .portal-invoices-item__head, .portal-invoices-item__identity, .portal-invoices-item__footer, .portal-invoices-item__hint, .portal-invoices-open, .portal-invoices-facts dd, .portal-invoices-status, .portal-invoice-secondary-action, .portal-invoice-back, .portal-invoice-primary-action, .portal-invoice-secondary-wide { display: flex; min-width: 0; align-items: center; } .portal-invoices-item__head { justify-content: space-between; gap: .7rem; } .portal-invoices-item__identity { gap: .62rem; } .portal-invoices-item__identity > div { min-width: 0; } .portal-invoices-item__icon { width: 2.55rem; height: 2.55rem; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoices-item__icon > .material-symbols-rounded { font-size: 1.15rem; } .portal-invoices-item__identity small, .portal-invoices-item__identity h3 { display: block; min-width: 0; margin: 0; } .portal-invoices-item__identity small { color: var(--ok-ink-8491a5,#8491a5); font-size: .62rem; font-weight: 700; } .portal-invoices-item__identity h3 { margin-top: .08rem; overflow: hidden; color: var(--ok-ink-2d3748,#2d3748); font-size: .84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-invoices-status { flex: 0 0 auto; justify-content: center; gap: .28rem; min-height: 1.8rem; padding: .32rem .52rem; border-radius: 999px; background: var(--ok-surface-eef2ff,#eef2ff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; white-space: nowrap; } .portal-invoices-status > .material-symbols-rounded { font-size: .88rem; line-height: 1; } .portal-invoices-status.is-paid { background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-166534,#166534); } .portal-invoices-status.is-overdue { background: var(--ok-surface-fee2e2,#fee2e2); color: var(--ok-ink-991b1b,#991b1b); } .portal-invoices-status.is-partial { background: var(--ok-surface-fef3c7,#fef3c7); color: var(--ok-ink-92400e,#92400e); } .portal-invoices-status.is-neutral { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .portal-invoices-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 0; } .portal-invoices-facts > div { min-width: 0; padding: .55rem .6rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .68rem; background: var(--ok-surface-fafbfd,#fafbfd); } .portal-invoices-facts dt, .portal-invoices-facts dd { margin: 0; } .portal-invoices-facts dt { color: var(--ok-ink-8693a6,#8693a6); font-size: .6rem; font-weight: 700; } .portal-invoices-facts dd { gap: .28rem; margin-top: .12rem; overflow: hidden; color: var(--ok-ink-425067,#425067); font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-invoices-facts dd > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-7d87a3,#7d87a3); font-size: .9rem; line-height: 1; } .portal-invoices-facts dd.is-danger { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-invoices-item__footer { justify-content: space-between; gap: .7rem; padding-top: .05rem; } .portal-invoices-item__hint { flex: 1 1 auto; align-items: flex-start; gap: .35rem; color: var(--ok-ink-7b889b,#7b889b); font-size: .64rem; line-height: 1.4; } .portal-invoices-item__hint > .material-symbols-rounded { flex: 0 0 auto; margin-top: .02rem; color: var(--ok-ink-7d77ad,#7d77ad); font-size: .92rem; } .portal-invoices-item__hint.is-danger, .portal-invoices-item__hint.is-danger > .material-symbols-rounded { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-invoices-open, .portal-invoices-primary-action, .portal-invoice-primary-action, .portal-invoice-secondary-action, .portal-invoice-secondary-wide { justify-content: center; gap: .35rem; min-height: 2.35rem; padding: .5rem .7rem; border: 1px solid var(--ok-line-d9deea,#d9deea); border-radius: .68rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font: inherit; font-size: .65rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; } .portal-invoices-open:hover, .portal-invoice-secondary-action:hover, .portal-invoice-secondary-wide:hover { transform: translateY(-1px); border-color: var(--ok-line-bdb8de,#bdb8de); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-invoices-open > .material-symbols-rounded, .portal-invoices-primary-action > .material-symbols-rounded, .portal-invoice-primary-action > .material-symbols-rounded, .portal-invoice-secondary-action > .material-symbols-rounded, .portal-invoice-secondary-wide > .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-invoices-next { display: grid; gap: .12rem; padding: .75rem; border-radius: .75rem; background: var(--ok-surface-f8fafc,#f8fafc); } .portal-invoices-next span, .portal-invoices-next strong, .portal-invoices-next small { display: block; margin: 0; } .portal-invoices-next span { color: var(--ok-ink-768398,#768398); font-size: .65rem; font-weight: 700; } .portal-invoices-next strong { color: var(--ok-ink-29364b,#29364b); font-size: 1.15rem; font-weight: 700; } .portal-invoices-next small { color: var(--ok-ink-8390a3,#8390a3); font-size: .64rem; } .portal-invoices-next-card.is-overdue .portal-invoices-next { background: var(--ok-surface-fff6f6,#fff6f6); } .portal-invoices-primary-action, .portal-invoice-primary-action { width: 100%; border-color: var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .portal-invoices-primary-action:hover, .portal-invoice-primary-action:hover { transform: translateY(-1px); background: var(--ok-surface-403d75,#403d75); } .portal-invoices-overview { display: grid; gap: .05rem; margin: 0; } .portal-invoices-overview > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .52rem .08rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-invoices-overview > div:last-child { border-bottom: 0; } .portal-invoices-overview dt, .portal-invoices-overview dd { margin: 0; font-size: .68rem; } .portal-invoices-overview dt { display: flex; align-items: center; gap: .38rem; color: var(--ok-ink-657287,#657287); } .portal-invoices-overview dd { color: var(--ok-ink-29364b,#29364b); font-weight: 700; } .portal-invoices-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok-surface-94a3b8,#94a3b8); } .portal-invoices-dot.is-open { background: var(--ok-surface-6366f1,#6366f1); } .portal-invoices-dot.is-overdue { background: var(--ok-surface-ef4444,#ef4444); } .portal-invoices-dot.is-paid { background: var(--ok-surface-22c55e,#22c55e); } .portal-invoices-dot.is-total { background: var(--ok-surface-2563eb,#2563eb); } .portal-invoices-security-card > p, .portal-invoice-change-card > p, .portal-invoice-security-card > p { margin: 0; color: var(--ok-ink-748197,#748197); font-size: .68rem; line-height: 1.55; } .portal-invoices-empty { display: grid; min-width: 0; grid-template-columns: 3.1rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: 1.1rem; border: 1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius: .88rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-invoices-empty__icon { width: 3.1rem; height: 3.1rem; border-radius: .82rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoices-empty__icon > .material-symbols-rounded { font-size: 1.3rem; } .portal-invoices-empty strong, .portal-invoices-empty p { display: block; margin: 0; } .portal-invoices-empty strong { color: var(--ok-ink-334155,#334155); font-size: .78rem; font-weight: 700; } .portal-invoices-empty p { margin-top: .18rem; color: var(--ok-ink-8491a5,#8491a5); font-size: .65rem; line-height: 1.45; } .portal-invoices-pagination { min-width: 0; padding-top: .1rem; } /* Invoice detail */ .portal-invoice-show-heading { align-items: flex-end; } .portal-invoice-show-heading__copy { display: grid; gap: .06rem; } .portal-invoice-back { width: fit-content; gap: .28rem; margin-bottom: .35rem; color: var(--ok-ink-69768b,#69768b); font-size: .65rem; font-weight: 700; text-decoration: none; } .portal-invoice-back:hover { color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-invoice-back > .material-symbols-rounded { font-size: .9rem; line-height: 1; } .portal-invoice-show-heading__actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .4rem; } .portal-invoice-secondary-action { min-height: 2.4rem; } .portal-invoice-notice { display: flex; align-items: center; gap: .5rem; padding: .72rem .82rem; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .82rem; background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); font-size: .7rem; font-weight: 700; } .portal-invoice-notice > .material-symbols-rounded { font-size: 1rem; } .portal-invoice-show-page .invoice-pix-card { min-width: 0; margin: 0; border-color: var(--ok-line-dfe5ed,var(--portal-invoices-border)); border-radius: 1rem; box-shadow: 0 16px 42px -40px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-invoice-show-page .invoice-pix-card__header { padding: 1rem; } .portal-invoice-show-page .invoice-pix-card__icon { flex-basis: 2.65rem; width: 2.65rem; height: 2.65rem; border-radius: .78rem; } .portal-invoice-show-page .invoice-pix-card__icon .material-symbols-rounded { font-size: 1.2rem; line-height: 1; } .portal-invoice-show-page .invoice-pix-card__header h2 { font-size: .95rem; } .portal-invoice-show-page .invoice-pix-card__header p { font-size: .7rem; } .portal-invoice-show-page .invoice-pix-card__content { gap: 1rem; padding: 1rem; } .portal-invoice-show-page .invoice-pix-card__qr { min-height: 13rem; } .portal-invoice-show-page .invoice-pix-card__qr img { width: min(100%, 12.5rem); } .portal-invoice-show-page .invoice-pix-card__amount strong { font-size: 1.3rem; } .portal-invoice-show-page .invoice-public-link { padding: .82rem 1rem; } .portal-invoice-show-items { display: grid; gap: .05rem; } .portal-invoice-show-item { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; padding: .68rem .1rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-invoice-show-item > div { min-width: 0; } .portal-invoice-show-item strong, .portal-invoice-show-item small { display: block; margin: 0; } .portal-invoice-show-item strong { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-invoice-show-item small { margin-top: .12rem; color: var(--ok-ink-8592a5,#8592a5); font-size: .62rem; } .portal-invoice-show-item > b { flex: 0 0 auto; color: var(--ok-ink-29364b,#29364b); font-size: .72rem; font-weight: 700; white-space: nowrap; } .portal-invoice-show-item.is-total { margin-top: .25rem; padding: .75rem .7rem; border: 0; border-radius: .72rem; background: linear-gradient(135deg, var(--ok-surface-f0eff9,#f0eff9), var(--ok-surface-edf4ff,#edf4ff)); } .portal-invoice-show-item.is-total strong, .portal-invoice-show-item.is-total > b { color: var(--ok-ink-403d75,#403d75); font-size: .78rem; } .portal-invoice-show-item.is-empty { color: var(--ok-ink-8491a5,#8491a5); font-size: .68rem; } .portal-invoice-show-card > .portal-invoice-primary-action { justify-self: start; width: auto; } .portal-invoice-show-details { display: grid; gap: .04rem; margin: 0; } .portal-invoice-show-details > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; padding: .5rem .08rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-invoice-show-details > div:last-child { border-bottom: 0; } .portal-invoice-show-details dt, .portal-invoice-show-details dd { margin: 0; font-size: .67rem; } .portal-invoice-show-details dt { color: var(--ok-ink-748197,#748197); } .portal-invoice-show-details dd { overflow: hidden; color: var(--ok-ink-334155,#334155); font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .portal-invoice-show-details dd.is-danger { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-invoice-secondary-wide { width: 100%; } .portal-invoice-change-form { display: grid; min-width: 0; gap: .65rem; padding-top: .15rem; } .portal-invoice-change-form label { display: grid; min-width: 0; gap: .25rem; color: var(--ok-ink-526077,#526077); font-size: .65rem; font-weight: 700; } .portal-invoice-change-form select, .portal-invoice-change-form textarea { width: 100%; min-width: 0; padding: .62rem .68rem; border: 1px solid var(--ok-line-ccd5e2,#ccd5e2); border-radius: .68rem; outline: 0; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-172033,#172033); font: inherit; font-size: .7rem; } .portal-invoice-change-form select { min-height: 2.45rem; } .portal-invoice-change-form textarea { min-height: 5rem; resize: vertical; line-height: 1.45; } .portal-invoice-change-form :is(select, textarea):focus { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a120,rgba(79, 76, 143, .12)); } .portal-invoice-field-error { color: var(--ok-ink-b91c1c,#b91c1c); font-size: .62rem; font-weight: 700; } .portal-invoice-change-form .portal-invoice-primary-action { margin-top: .05rem; } .portal-invoices-page :is(a, button):focus-visible, .portal-invoice-show-page :is(a, button, select, textarea):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1180px) { .portal-invoices-metrics, .portal-invoice-show-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-invoices-dashboard-grid, .portal-invoice-show-grid { grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 18.5rem); } .portal-invoices-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .portal-invoices-dashboard-grid, .portal-invoice-show-grid { grid-template-columns: 1fr; } .portal-invoices-side-column, .portal-invoice-show-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-invoices-security-card, .portal-invoice-security-card { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-invoices-heading, .portal-invoice-show-heading { align-items: flex-start; } .portal-invoices-heading__icon { width: 3rem; height: 3rem; flex-basis: 3rem; border-radius: .86rem; } .portal-invoices-heading h1, .portal-invoice-show-heading h1 { font-size: 1.48rem; } .portal-invoices-heading p, .portal-invoice-show-heading p { font-size: .74rem; } .portal-invoices-metrics, .portal-invoice-show-metrics, .portal-invoices-side-column, .portal-invoice-show-side { grid-template-columns: 1fr; } .portal-invoices-metric, .portal-invoice-show-metric { min-height: 5.75rem; } .portal-invoices-card, .portal-invoice-show-card { padding: .82rem; } .portal-invoices-item__footer { align-items: stretch; flex-direction: column; } .portal-invoices-open { width: 100%; } .portal-invoices-security-card, .portal-invoice-security-card { grid-column: auto; } .portal-invoice-show-heading { display: grid; } .portal-invoice-show-heading__actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; } .portal-invoice-show-page .invoice-pix-card__content { grid-template-columns: 1fr; } .portal-invoice-show-page .invoice-public-link { grid-template-columns: 1fr; } } @media (max-width: 460px) { .portal-invoices-heading { gap: .65rem; } .portal-invoices-heading__icon { width: 2.7rem; height: 2.7rem; flex-basis: 2.7rem; } .portal-invoices-heading__icon > .material-symbols-rounded { font-size: 1.22rem; } .portal-invoices-card__head, .portal-invoices-item__head, .portal-invoice-show-card__head { align-items: flex-start; } .portal-invoices-card__head, .portal-invoices-item__head { display: grid; } .portal-invoices-count, .portal-invoices-status { width: fit-content; } .portal-invoices-status { margin-left: 3.17rem; } .portal-invoice-show-heading__actions .portal-invoices-status { margin-left: 0; } .portal-invoices-facts { grid-template-columns: 1fr 1fr; } .portal-invoices-tabs { display: grid; grid-template-columns: 1fr 1fr 1fr; } .portal-invoices-tabs button { padding-inline: .35rem; } .portal-invoice-secondary-action { flex: 1 1 auto; } .portal-invoice-show-item { align-items: flex-start; } .portal-invoice-show-item:not(.is-total) { display: grid; } .portal-invoice-show-item:not(.is-total) > b { justify-self: start; } } /* Portal tickets — TailAdmin-inspired customer experience — Hotfix 8.5.8 */ .portal-tickets-page, .portal-ticket-show-page { --portal-tickets-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-tickets-secondary: var(--ok-ink-2563eb,#2563eb); --portal-tickets-heading: var(--ok-ink-1e293b,#1e293b); --portal-tickets-text: var(--ok-ink-64748b,#64748b); --portal-tickets-border: var(--ok-line-e1e7ef,#e1e7ef); --portal-tickets-panel: var(--ok-surface-ffffff,#ffffff); display: grid; min-width: 0; gap: 1rem; } .portal-tickets-heading, .portal-ticket-show-heading { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 1rem; padding: .15rem .05rem .1rem; } .portal-tickets-heading > div, .portal-ticket-show-heading__copy { min-width: 0; } .portal-tickets-eyebrow { display: block; margin: 0 0 .2rem; color: var(--ok-ink-4f4c8f,var(--portal-tickets-primary)); font-size: .66rem; font-weight: 700; letter-spacing: .065em; text-transform: uppercase; } .portal-tickets-heading h1, .portal-ticket-show-heading h1 { margin: 0; color: var(--ok-ink-1e293b,var(--portal-tickets-heading)); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; } .portal-tickets-heading p, .portal-ticket-show-heading p { max-width: 46rem; margin: .34rem 0 0; color: var(--ok-ink-748197,#748197); font-size: .78rem; line-height: 1.55; } .portal-tickets-primary-action, .portal-tickets-open, .portal-tickets-primary-wide, .portal-tickets-secondary-wide, .portal-ticket-back { display: inline-flex; min-width: 0; align-items: center; justify-content: center; gap: .35rem; border-radius: .7rem; font: inherit; font-size: .66rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; } .portal-tickets-primary-action, .portal-tickets-primary-wide { min-height: 2.45rem; padding: .55rem .76rem; border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); background: linear-gradient(135deg, var(--ok-surface-5955a3,#5955a3), var(--ok-surface-4f4c8f,#4f4c8f)); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 14px 26px -20px var(--ok-shadow-4f4c8f_a800,rgba(79, 76, 143, .8)); } .portal-tickets-primary-action:hover, .portal-tickets-primary-wide:hover { background: var(--ok-surface-403d75,#403d75); } .portal-tickets-primary-action > .material-symbols-rounded, .portal-tickets-open > .material-symbols-rounded, .portal-tickets-primary-wide > .material-symbols-rounded, .portal-tickets-secondary-wide > .material-symbols-rounded, .portal-ticket-back > .material-symbols-rounded { flex: 0 0 auto; font-size: .98rem; line-height: 1; } .portal-tickets-metrics, .portal-ticket-show-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .portal-tickets-metric, .portal-ticket-show-metric { display: grid; min-width: 0; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .72rem; min-height: 6.15rem; padding: .82rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-tickets-border)); border-radius: .92rem; background: var(--ok-surface-ffffff,var(--portal-tickets-panel)); box-shadow: 0 14px 34px -34px var(--ok-shadow-0f172a_a600,rgba(15, 23, 42, .6)); } .portal-tickets-metric__icon-box, .portal-ticket-show-metric__icon-box, .portal-tickets-card__icon, .portal-tickets-item__icon, .portal-tickets-empty__icon, .portal-ticket-show-card__icon, .portal-ticket-attachment__icon { display: grid; flex: 0 0 auto; place-items: center; overflow: hidden; } .portal-tickets-metric__icon-box, .portal-ticket-show-metric__icon-box { width: 2.65rem; height: 2.65rem; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-tickets-metric__icon-box.is-attention, .portal-ticket-show-metric__icon-box.is-warning { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-tickets-metric__icon-box.is-resolved { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-tickets-metric__icon-box.is-total, .portal-ticket-show-metric__icon-box.is-category { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-ticket-show-metric__icon-box.is-agent { background: var(--ok-surface-f0fdfa,#f0fdfa); color: var(--ok-ink-0f766e,#0f766e); } .portal-ticket-show-metric__icon-box.is-sla { background: var(--ok-surface-f3f4f6,#f3f4f6); color: var(--ok-ink-475569,#475569); } .portal-ticket-show-metric__icon-box.is-danger { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-ticket-show-metric__icon-box.is-low { background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-64748b,#64748b); } .portal-tickets-metric__icon-box > .material-symbols-rounded, .portal-ticket-show-metric__icon-box > .material-symbols-rounded, .portal-tickets-card__icon > .material-symbols-rounded, .portal-tickets-item__icon > .material-symbols-rounded, .portal-tickets-empty__icon > .material-symbols-rounded, .portal-ticket-show-card__icon > .material-symbols-rounded, .portal-ticket-attachment__icon > .material-symbols-rounded { margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.15rem; font-style: normal; font-weight: normal; line-height: 1; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-tickets-metric__copy, .portal-ticket-show-metric > div:last-child { display: grid; min-width: 0; gap: .08rem; } .portal-tickets-metric__copy small, .portal-ticket-show-metric small { color: var(--ok-ink-7d899c,#7d899c); font-size: .61rem; font-weight: 700; } .portal-tickets-metric__copy strong, .portal-ticket-show-metric strong { min-width: 0; overflow: hidden; color: var(--ok-ink-283548,#283548); font-size: 1.14rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-tickets-metric__copy span, .portal-ticket-show-metric span:not(.material-symbols-rounded) { min-width: 0; overflow: hidden; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .61rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-tickets-dashboard-grid, .portal-ticket-show-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 1rem; align-items: start; } .portal-tickets-main, .portal-tickets-side-column, .portal-ticket-show-main, .portal-ticket-show-side { display: grid; min-width: 0; gap: 1rem; } .portal-tickets-side-column, .portal-ticket-show-side { position: sticky; top: 1rem; } .portal-tickets-card, .portal-ticket-show-card { display: grid; min-width: 0; gap: .9rem; padding: 1rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-tickets-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,var(--portal-tickets-panel)); box-shadow: 0 16px 42px -40px var(--ok-shadow-0f172a_a580,rgba(15, 23, 42, .58)); } .portal-tickets-card__head, .portal-ticket-show-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; } .portal-tickets-card__head > div, .portal-ticket-show-card__head > div { display: grid; min-width: 0; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: center; gap: .65rem; } .portal-tickets-card__icon, .portal-ticket-show-card__icon { width: 2.45rem; height: 2.45rem; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-tickets-card__icon.is-attention { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-tickets-card__icon.is-overview, .portal-ticket-show-card__icon.is-details { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-tickets-card__icon.is-help, .portal-ticket-show-card__icon.is-security { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-ticket-show-card__icon.is-rating { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-ticket-show-card__icon.is-attachments { background: var(--ok-surface-f5f3ff,#f5f3ff); color: var(--ok-ink-6d5db5,#6d5db5); } .portal-tickets-card__head small, .portal-tickets-card__head h2, .portal-ticket-show-card__head small, .portal-ticket-show-card__head h2 { display: block; margin: 0; } .portal-tickets-card__head small, .portal-ticket-show-card__head small { color: var(--ok-ink-4f4c8f,var(--portal-tickets-primary)); font-size: .64rem; font-weight: 700; text-transform: uppercase; } .portal-tickets-card__head h2, .portal-ticket-show-card__head h2 { margin-top: .08rem; color: var(--ok-ink-1e293b,var(--portal-tickets-heading)); font-size: .9rem; font-weight: 700; } .portal-tickets-count { flex: 0 0 auto; padding: .34rem .55rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .64rem; font-weight: 700; white-space: nowrap; } .portal-tickets-filters { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(12rem, .38fr); gap: .55rem; } .portal-tickets-search, .portal-tickets-status-filter { display: grid; min-width: 0; grid-template-columns: 2rem minmax(0, 1fr); align-items: center; border: 1px solid var(--ok-line-d9e0ea,#d9e0ea); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease; } .portal-tickets-search:focus-within, .portal-tickets-status-filter:focus-within { border-color: var(--ok-line-8e89bd,#8e89bd); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .10)); } .portal-tickets-search > .material-symbols-rounded, .portal-tickets-status-filter > .material-symbols-rounded { display: grid; width: 2rem; height: 2.35rem; place-items: center; color: var(--ok-ink-8a96a8,#8a96a8); font-size: 1rem; line-height: 1; } .portal-tickets-search input, .portal-tickets-status-filter select { width: 100%; min-width: 0; min-height: 2.35rem; padding: .48rem .62rem .48rem .1rem; border: 0; outline: 0; background: transparent; color: var(--ok-ink-334155,#334155); font: inherit; font-size: .68rem; } .portal-tickets-list { display: grid; min-width: 0; gap: .65rem; } .portal-tickets-item { display: grid; min-width: 0; gap: .72rem; padding: .85rem; border: 1px solid var(--ok-line-e3e8ef,#e3e8ef); border-radius: .88rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .portal-tickets-item:hover { transform: translateY(-1px); border-color: var(--ok-line-cbc8e3,#cbc8e3); box-shadow: 0 12px 30px -26px var(--ok-shadow-0f172a_a550,rgba(15, 23, 42, .55)); } .portal-tickets-item.requires-attention { border-color: var(--ok-line-fed7aa,#fed7aa); background: linear-gradient(145deg, var(--ok-surface-ffffff,#fff), var(--ok-surface-fffdf8,#fffdf8)); } .portal-tickets-item__head, .portal-tickets-item__identity, .portal-tickets-item__footer, .portal-tickets-item__hint, .portal-tickets-open, .portal-tickets-facts dd, .portal-tickets-status { display: flex; min-width: 0; align-items: center; } .portal-tickets-item__head { justify-content: space-between; gap: .7rem; } .portal-tickets-item__identity { gap: .62rem; } .portal-tickets-item__identity > div { min-width: 0; } .portal-tickets-item__icon { width: 2.55rem; height: 2.55rem; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-tickets-item__identity small, .portal-tickets-item__identity h3 { display: block; min-width: 0; margin: 0; } .portal-tickets-item__identity small { color: var(--ok-ink-8491a5,#8491a5); font-size: .62rem; font-weight: 700; } .portal-tickets-item__identity h3 { margin-top: .08rem; overflow: hidden; color: var(--ok-ink-2d3748,#2d3748); font-size: .84rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-tickets-status { flex: 0 0 auto; justify-content: center; gap: .28rem; min-height: 1.8rem; padding: .32rem .52rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .62rem; font-weight: 700; white-space: nowrap; } .portal-tickets-status > .material-symbols-rounded { font-size: .88rem; line-height: 1; } .portal-tickets-status.is-open { background: var(--ok-surface-eef2ff,#eef2ff); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-tickets-status.is-analysis { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-1d4ed8,#1d4ed8); } .portal-tickets-status.is-progress { background: var(--ok-surface-ecfeff,#ecfeff); color: var(--ok-ink-0f766e,#0f766e); } .portal-tickets-status.is-attention { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-tickets-status.is-resolved { background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-166534,#166534); } .portal-tickets-status.is-closed { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-475569,#475569); } .portal-tickets-status.is-cancelled { background: var(--ok-surface-fee2e2,#fee2e2); color: var(--ok-ink-991b1b,#991b1b); } .portal-tickets-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 0; } .portal-tickets-facts > div { min-width: 0; padding: .55rem .6rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .68rem; background: var(--ok-surface-fafbfd,#fafbfd); } .portal-tickets-facts dt, .portal-tickets-facts dd { margin: 0; } .portal-tickets-facts dt { color: var(--ok-ink-8693a6,#8693a6); font-size: .6rem; font-weight: 700; } .portal-tickets-facts dd { gap: .28rem; margin-top: .12rem; overflow: hidden; color: var(--ok-ink-425067,#425067); font-size: .68rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-tickets-facts dd > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-7d87a3,#7d87a3); font-size: .9rem; line-height: 1; } .portal-tickets-facts dd.is-warning { color: var(--ok-ink-b45309,#b45309); } .portal-tickets-facts dd.is-danger { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-tickets-item__footer { justify-content: space-between; gap: .7rem; } .portal-tickets-item__hint { flex: 1 1 auto; align-items: flex-start; gap: .35rem; color: var(--ok-ink-7b889b,#7b889b); font-size: .64rem; line-height: 1.4; } .portal-tickets-item__hint > .material-symbols-rounded { flex: 0 0 auto; margin-top: .02rem; color: var(--ok-ink-7d77ad,#7d77ad); font-size: .92rem; line-height: 1; } .portal-tickets-item__hint.is-attention, .portal-tickets-item__hint.is-attention > .material-symbols-rounded { color: var(--ok-ink-b45309,#b45309); } .portal-tickets-open, .portal-tickets-secondary-wide { min-height: 2.35rem; padding: .5rem .7rem; border: 1px solid var(--ok-line-d9deea,#d9deea); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-tickets-open:hover, .portal-tickets-secondary-wide:hover { transform: translateY(-1px); border-color: var(--ok-line-bdb8de,#bdb8de); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-tickets-primary-wide, .portal-tickets-secondary-wide { width: 100%; } .portal-tickets-next-action { display: grid; gap: .18rem; padding: .72rem; border-radius: .72rem; background: var(--ok-surface-fffaf0,#fffaf0); } .portal-tickets-next-action strong { color: var(--ok-ink-334155,#334155); font-size: .75rem; font-weight: 700; line-height: 1.35; } .portal-tickets-next-action span { color: var(--ok-ink-64748b,#64748b); font-size: .64rem; } .portal-tickets-next-action small { color: var(--ok-ink-8a6a37,#8a6a37); font-size: .62rem; } .portal-tickets-overview, .portal-ticket-details { display: grid; gap: .04rem; margin: 0; } .portal-tickets-overview > div, .portal-ticket-details > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .7rem; padding: .52rem .08rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-tickets-overview > div:last-child, .portal-ticket-details > div:last-child { border-bottom: 0; } .portal-tickets-overview dt, .portal-tickets-overview dd, .portal-ticket-details dt, .portal-ticket-details dd { margin: 0; font-size: .68rem; } .portal-tickets-overview dt { display: flex; align-items: center; gap: .38rem; color: var(--ok-ink-657287,#657287); } .portal-tickets-overview dd { color: var(--ok-ink-29364b,#29364b); font-weight: 700; } .portal-tickets-dot { display: inline-block; width: .5rem; height: .5rem; border-radius: 50%; background: var(--ok-surface-94a3b8,#94a3b8); } .portal-tickets-dot.is-active { background: var(--ok-surface-6366f1,#6366f1); } .portal-tickets-dot.is-attention { background: var(--ok-surface-f59e0b,#f59e0b); } .portal-tickets-dot.is-resolved { background: var(--ok-surface-22c55e,#22c55e); } .portal-tickets-dot.is-total { background: var(--ok-surface-2563eb,#2563eb); } .portal-tickets-help-card > p, .portal-ticket-rating-card > p, .portal-ticket-security-card > p { margin: 0; color: var(--ok-ink-748197,#748197); font-size: .68rem; line-height: 1.55; } .portal-tickets-empty { display: grid; min-width: 0; grid-template-columns: 3.1rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: 1.1rem; border: 1px dashed var(--ok-line-cbd5e1,#cbd5e1); border-radius: .88rem; background: var(--ok-surface-fafbfe,#fafbfe); } .portal-tickets-empty__icon { width: 3.1rem; height: 3.1rem; border-radius: .82rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-tickets-empty strong, .portal-tickets-empty p { display: block; margin: 0; } .portal-tickets-empty strong { color: var(--ok-ink-334155,#334155); font-size: .78rem; font-weight: 700; } .portal-tickets-empty p { margin-top: .18rem; color: var(--ok-ink-8491a5,#8491a5); font-size: .65rem; line-height: 1.45; } .portal-tickets-pagination { min-width: 0; padding-top: .1rem; } /* Ticket detail */ .portal-ticket-show-heading { align-items: flex-end; } .portal-ticket-show-heading__copy { display: grid; gap: .06rem; } .portal-ticket-back { width: fit-content; justify-content: flex-start; gap: .28rem; margin-bottom: .35rem; color: var(--ok-ink-69768b,#69768b); } .portal-ticket-back:hover { color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-ticket-notice { display: flex; align-items: center; gap: .5rem; padding: .72rem .82rem; border: 1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius: .82rem; background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); font-size: .7rem; font-weight: 700; } .portal-ticket-notice.is-warning { border-color: var(--ok-line-fed7aa,#fed7aa); background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-9a3412,#9a3412); } .portal-ticket-notice > .material-symbols-rounded { flex: 0 0 auto; font-size: 1rem; } .portal-ticket-thread { display: grid; min-width: 0; gap: .75rem; padding: .15rem 0 .2rem; } .portal-ticket-message { display: grid; min-width: 0; grid-template-columns: 2.25rem minmax(0, 1fr); align-items: start; gap: .62rem; } .portal-ticket-message__avatar { display: grid; width: 2.25rem; height: 2.25rem; place-items: center; border-radius: .68rem; background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-ticket-message.is-customer .portal-ticket-message__avatar { background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-ticket-message__avatar > .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-ticket-message__body { min-width: 0; padding: .72rem .78rem; border: 1px solid var(--ok-line-e3e8ef,#e3e8ef); border-radius: .78rem; background: var(--ok-surface-fafbfd,#fafbfd); } .portal-ticket-message.is-customer .portal-ticket-message__body { border-color: var(--ok-line-e2def1,#e2def1); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-ticket-message__body header { display: flex; min-width: 0; align-items: flex-start; justify-content: space-between; gap: .7rem; } .portal-ticket-message__body header > div { min-width: 0; } .portal-ticket-message__body header strong, .portal-ticket-message__body header span { display: block; margin: 0; } .portal-ticket-message__body header strong { color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-ticket-message__body header span { margin-top: .05rem; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .58rem; } .portal-ticket-message__body time { flex: 0 0 auto; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .59rem; white-space: nowrap; } .portal-ticket-message__body p { margin: .55rem 0 0; color: var(--ok-ink-526077,#526077); font-size: .72rem; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; } .portal-ticket-thread-empty { display: flex; align-items: center; gap: .45rem; padding: .8rem; border: 1px dashed var(--ok-line-d5dce6,#d5dce6); border-radius: .72rem; color: var(--ok-ink-8491a5,#8491a5); font-size: .67rem; } .portal-ticket-thread-empty > .material-symbols-rounded { font-size: 1rem; } .portal-ticket-reply { display: grid; min-width: 0; gap: .68rem; padding-top: .85rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-ticket-reply__head { display: flex; align-items: center; justify-content: space-between; gap: .7rem; } .portal-ticket-reply__head > div { display: grid; gap: .06rem; } .portal-ticket-reply__head small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; text-transform: uppercase; } .portal-ticket-reply__head strong { color: var(--ok-ink-334155,#334155); font-size: .78rem; font-weight: 700; } .portal-ticket-reply__head > .material-symbols-rounded { color: var(--ok-ink-817ba9,#817ba9); font-size: 1.2rem; } .portal-ticket-reply label, .portal-ticket-rating-form label { display: grid; min-width: 0; gap: .25rem; color: var(--ok-ink-526077,#526077); font-size: .65rem; font-weight: 700; } .portal-ticket-reply textarea, .portal-ticket-reply input[type="file"], .portal-ticket-rating-form select { width: 100%; min-width: 0; border: 1px solid var(--ok-line-ccd5e2,#ccd5e2); border-radius: .68rem; outline: 0; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-172033,#172033); font: inherit; font-size: .7rem; } .portal-ticket-reply textarea { min-height: 6rem; padding: .68rem; line-height: 1.5; resize: vertical; } .portal-ticket-reply input[type="file"] { min-height: 2.55rem; padding: .48rem; } .portal-ticket-reply input[type="file"]::file-selector-button { margin-right: .6rem; padding: .42rem .55rem; border: 0; border-radius: .5rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font: inherit; font-size: .62rem; font-weight: 700; cursor: pointer; } .portal-ticket-reply :is(textarea, input):focus, .portal-ticket-rating-form select:focus { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a120,rgba(79, 76, 143, .12)); } .portal-ticket-upload > small { color: var(--ok-ink-8a96a8,#8a96a8); font-size: .6rem; font-weight: 600; } .portal-ticket-field-error { color: var(--ok-ink-b91c1c,#b91c1c) !important; font-size: .62rem !important; font-weight: 700 !important; } .portal-ticket-reply__actions { display: flex; align-items: center; justify-content: flex-end; gap: .6rem; } .portal-ticket-uploading { display: inline-flex; align-items: center; gap: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .62rem; } .portal-ticket-uploading > .material-symbols-rounded { font-size: .9rem; animation: portal-ticket-spin 1s linear infinite; } @keyframes portal-ticket-spin { to { transform: rotate(360deg); } } .portal-ticket-attachments { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; } .portal-ticket-attachments > a { display: grid; min-width: 0; grid-template-columns: 2.25rem minmax(0, 1fr) 1.2rem; align-items: center; gap: .55rem; padding: .62rem; border: 1px solid var(--ok-line-e5e9ef,#e5e9ef); border-radius: .72rem; background: var(--ok-surface-fafbfd,#fafbfd); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .portal-ticket-attachments > a:hover { border-color: var(--ok-line-c7c2df,#c7c2df); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-ticket-attachment__icon { width: 2.25rem; height: 2.25rem; border-radius: .62rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-ticket-attachments > a > span:nth-child(2) { min-width: 0; } .portal-ticket-attachments strong, .portal-ticket-attachments small { display: block; min-width: 0; margin: 0; } .portal-ticket-attachments strong { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .66rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-ticket-attachments small { margin-top: .08rem; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .58rem; } .portal-ticket-attachments > a > .material-symbols-rounded:last-child { color: var(--ok-ink-7d87a3,#7d87a3); font-size: 1rem; } .portal-ticket-details dt { color: var(--ok-ink-748197,#748197); } .portal-ticket-details dd { max-width: 62%; overflow: hidden; color: var(--ok-ink-334155,#334155); font-weight: 700; text-align: right; text-overflow: ellipsis; white-space: nowrap; } .portal-ticket-details dd.is-warning { color: var(--ok-ink-b45309,#b45309); } .portal-ticket-details dd.is-danger { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-ticket-details dd.is-low { color: var(--ok-ink-64748b,#64748b); } .portal-ticket-rating-form { display: grid; gap: .6rem; } .portal-ticket-rating-form select { min-height: 2.45rem; padding: .55rem .65rem; } .portal-tickets-secondary-wide { gap: .35rem; } .portal-tickets-page :is(a, button, input, select):focus-visible, .portal-ticket-show-page :is(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1180px) { .portal-tickets-metrics, .portal-ticket-show-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-tickets-dashboard-grid, .portal-ticket-show-grid { grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 18.5rem); } .portal-tickets-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { .portal-tickets-dashboard-grid, .portal-ticket-show-grid { grid-template-columns: 1fr; } .portal-tickets-side-column, .portal-ticket-show-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-tickets-help-card, .portal-ticket-security-card { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-tickets-heading, .portal-ticket-show-heading { align-items: flex-start; } .portal-tickets-heading { display: grid; } .portal-tickets-heading .portal-tickets-primary-action { width: fit-content; } .portal-tickets-heading h1, .portal-ticket-show-heading h1 { font-size: 1.48rem; } .portal-tickets-heading p, .portal-ticket-show-heading p { font-size: .74rem; } .portal-tickets-metrics, .portal-ticket-show-metrics, .portal-tickets-side-column, .portal-ticket-show-side { grid-template-columns: 1fr; } .portal-tickets-metric, .portal-ticket-show-metric { min-height: 5.75rem; } .portal-tickets-card, .portal-ticket-show-card { padding: .82rem; } .portal-tickets-filters { grid-template-columns: 1fr; } .portal-tickets-item__footer { align-items: stretch; flex-direction: column; } .portal-tickets-open { width: 100%; } .portal-tickets-help-card, .portal-ticket-security-card { grid-column: auto; } .portal-ticket-show-heading { display: grid; } .portal-ticket-show-heading > .portal-tickets-status { width: fit-content; } .portal-ticket-attachments { grid-template-columns: 1fr; } } @media (max-width: 460px) { .portal-tickets-card__head, .portal-tickets-item__head, .portal-ticket-show-card__head { align-items: flex-start; } .portal-tickets-card__head, .portal-tickets-item__head { display: grid; } .portal-tickets-count, .portal-tickets-status { width: fit-content; } .portal-tickets-item__head > .portal-tickets-status { margin-left: 3.17rem; } .portal-tickets-facts { grid-template-columns: 1fr 1fr; } .portal-ticket-message { grid-template-columns: 1fr; } .portal-ticket-message__avatar { width: 2rem; height: 2rem; } .portal-ticket-message__body header { display: grid; gap: .22rem; } .portal-ticket-reply__actions { align-items: stretch; flex-direction: column; } .portal-ticket-reply__actions .portal-tickets-primary-action { width: 100%; } .portal-ticket-details dd { max-width: 56%; } } @media (prefers-reduced-motion: reduce) { .portal-tickets-item, .portal-tickets-open, .portal-tickets-secondary-wide, .portal-tickets-primary-action, .portal-tickets-primary-wide { transition: none !important; } .portal-ticket-uploading > .material-symbols-rounded { animation: none !important; } } /* Portal tickets reply form polish — Hotfix 8.5.10 */ .portal-ticket-field, .portal-ticket-upload { display: grid; min-width: 0; gap: .35rem; } .portal-ticket-field > span:first-child, .portal-ticket-upload > span:first-child { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 700; } .portal-ticket-field__control, .portal-ticket-upload__control { display: grid; min-width: 0; gap: .48rem; padding: .8rem; border: 1px solid var(--ok-line-d7dfeb,#d7dfeb); border-radius: .92rem; background: linear-gradient(180deg, var(--ok-surface-fcfdff,#fcfdff) 0%, var(--ok-surface-f8fafe,#f8fafe) 100%); box-shadow: inset 0 1px 0 var(--ok-shadow-ffffff_a720,rgba(255,255,255,.72)); } .portal-ticket-field__control > small, .portal-ticket-upload__hint { color: var(--ok-ink-7b889b,#7b889b); font-size: .61rem; font-weight: 600; } .portal-ticket-reply textarea { min-height: 8.25rem; padding: .2rem; border: 0; border-radius: 0; background: transparent; color: var(--ok-ink-172033,#172033); font-size: .72rem; line-height: 1.65; box-shadow: none; } .portal-ticket-reply textarea::placeholder { color: var(--ok-ink-95a1b3,#95a1b3); } .portal-ticket-reply .portal-ticket-field__control:focus-within, .portal-ticket-reply .portal-ticket-upload__control:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 4px var(--ok-shadow-4f4c8f_a80,rgba(79, 76, 143, .08)); } .portal-ticket-reply .portal-ticket-field__control textarea:focus, .portal-ticket-reply .portal-ticket-upload__control input[type="file"]:focus { box-shadow: none; } .portal-ticket-upload__surface { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .6rem; padding: .1rem 0; } .portal-ticket-upload__icon { display: inline-grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 1.1rem; line-height: 1; } .portal-ticket-upload__copy { display: grid; min-width: 0; gap: .08rem; } .portal-ticket-upload__copy strong { color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-ticket-upload__copy small { color: var(--ok-ink-7b889b,#7b889b); font-size: .61rem; line-height: 1.45; } .portal-ticket-reply .portal-ticket-upload__control input[type="file"] { min-height: 2.95rem; padding: .55rem .6rem; border: 1px dashed var(--ok-line-c9d2e1,#c9d2e1); border-radius: .82rem; background: var(--ok-surface-ffffff,#ffffff); color: var(--ok-ink-334155,#334155); font-size: .65rem; } .portal-ticket-reply .portal-ticket-upload__control input[type="file"]::file-selector-button { margin-right: .65rem; padding: .5rem .7rem; border: 1px solid var(--ok-line-d5d9f1,#d5d9f1); border-radius: .62rem; background: var(--ok-surface-f5f3ff,#f5f3ff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; } .portal-ticket-reply__actions { margin-top: .15rem; } @media (max-width: 720px) { .portal-ticket-field__control, .portal-ticket-upload__control { padding: .72rem; } .portal-ticket-upload__surface { grid-template-columns: 1fr; gap: .45rem; } .portal-ticket-upload__icon { width: 2.15rem; height: 2.15rem; } .portal-ticket-reply textarea { min-height: 7.15rem; } } /* Portal ticket create — TailAdmin-inspired consistency — Hotfix 8.5.11 */ .portal-ticket-create-page { --portal-ticket-create-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-ticket-create-heading: var(--ok-ink-1e293b,#1e293b); --portal-ticket-create-text: var(--ok-ink-64748b,#64748b); --portal-ticket-create-border: var(--ok-line-e1e7ef,#e1e7ef); display: grid; min-width: 0; gap: 1rem; } .portal-ticket-create-page, .portal-ticket-create-page * { box-sizing: border-box; } .portal-ticket-create-heading { display: flex; min-width: 0; align-items: flex-end; justify-content: space-between; gap: 1rem; } .portal-ticket-create-heading__copy { min-width: 0; } .portal-ticket-create-heading__copy .portal-ticket-back { margin-bottom: .65rem; } .portal-ticket-create-heading h1 { margin: .14rem 0 0; color: var(--ok-ink-1e293b,var(--portal-ticket-create-heading)); font-size: clamp(1.55rem, 2.4vw, 2rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.12; } .portal-ticket-create-heading p { max-width: 48rem; margin: .34rem 0 0; color: var(--ok-ink-718096,#718096); font-size: .78rem; line-height: 1.55; } .portal-ticket-create-heading__badge { display: grid; flex: 0 0 auto; grid-template-columns: 2.45rem minmax(0, 1fr); align-items: center; gap: .62rem; min-width: 12.5rem; padding: .64rem .72rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-ticket-create-border)); border-radius: .9rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 14px 34px -30px var(--ok-shadow-0f172a_a480,rgba(15, 23, 42, .48)); } .portal-ticket-create-heading__badge-icon { display: inline-grid; width: 2.45rem; height: 2.45rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-ticket-create-heading__badge-icon > .material-symbols-rounded { font-family: 'Material Symbols Rounded'; font-size: 1.15rem; line-height: 1; } .portal-ticket-create-heading__badge small, .portal-ticket-create-heading__badge strong { display: block; margin: 0; } .portal-ticket-create-heading__badge small { color: var(--ok-ink-8793a5,#8793a5); font-size: .6rem; font-weight: 700; } .portal-ticket-create-heading__badge strong { margin-top: .08rem; color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-ticket-create-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(18rem, 21rem); gap: 1rem; align-items: start; } .portal-ticket-create-main, .portal-ticket-create-side { min-width: 0; } .portal-ticket-create-side { display: grid; gap: .8rem; } .portal-ticket-create-card, .portal-ticket-create-side-card { min-width: 0; border: 1px solid var(--ok-line-e1e7ef,var(--portal-ticket-create-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 40px -36px var(--ok-shadow-0f172a_a620,rgba(15, 23, 42, .62)); } .portal-ticket-create-card { display: grid; gap: 0; } .portal-ticket-create-card__head, .portal-ticket-create-side-card > header { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .8rem; padding: .9rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-ticket-create-card__head > div, .portal-ticket-create-side-card > header { min-width: 0; } .portal-ticket-create-card__head > div, .portal-ticket-create-side-card > header { display: flex; align-items: center; gap: .62rem; } .portal-ticket-create-card__head > div > div, .portal-ticket-create-side-card > header > div { min-width: 0; } .portal-ticket-create-card__head small, .portal-ticket-create-card__head h2, .portal-ticket-create-side-card header small, .portal-ticket-create-side-card header h2 { display: block; margin: 0; } .portal-ticket-create-card__head small, .portal-ticket-create-side-card header small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; text-transform: uppercase; } .portal-ticket-create-card__head h2, .portal-ticket-create-side-card header h2 { margin-top: .08rem; color: var(--ok-ink-263247,#263247); font-size: .84rem; font-weight: 700; } .portal-ticket-create-required { flex: 0 0 auto; color: var(--ok-ink-8995a7,#8995a7); font-size: .6rem; font-weight: 700; white-space: nowrap; } .portal-ticket-create-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; padding: .95rem; } .portal-ticket-create-field { display: grid; min-width: 0; align-content: start; gap: .34rem; } .portal-ticket-create-field--full { grid-column: 1 / -1; } .portal-ticket-create-field__label { color: var(--ok-ink-405069,#405069); font-size: .66rem; font-style: normal; font-weight: 700; } .portal-ticket-create-field__label em { color: var(--ok-ink-b91c1c,#b91c1c); font-style: normal; } .portal-ticket-create-field__control { display: grid; min-width: 0; grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; gap: .42rem; min-height: 2.75rem; padding: 0 .68rem; border: 1px solid var(--ok-line-ccd5e2,#ccd5e2); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease; } .portal-ticket-create-field__control:focus-within, .portal-ticket-create-textarea:focus-within, .portal-ticket-create-upload__box:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .10)); } .portal-ticket-create-field__control > .material-symbols-rounded { color: var(--ok-ink-8793a5,#8793a5); font-family: 'Material Symbols Rounded'; font-size: 1rem; line-height: 1; } .portal-ticket-create-field__control input, .portal-ticket-create-field__control select { width: 100%; min-width: 0; min-height: 2.6rem; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ok-ink-172033,#172033); font: inherit; font-size: .7rem; } .portal-ticket-create-field__control select { cursor: pointer; } .portal-ticket-create-field__control input::placeholder { color: var(--ok-ink-9aa5b5,#9aa5b5); } .portal-ticket-create-field > small, .portal-ticket-create-upload > small { color: var(--ok-ink-8793a5,#8793a5); font-size: .6rem; font-weight: 600; line-height: 1.45; } .portal-ticket-create-textarea { display: grid; min-width: 0; gap: .4rem; padding: .72rem; border: 1px solid var(--ok-line-ccd5e2,#ccd5e2); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease; } .portal-ticket-create-textarea textarea { width: 100%; min-width: 0; min-height: 9.5rem; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ok-ink-172033,#172033); font: inherit; font-size: .72rem; line-height: 1.65; resize: vertical; } .portal-ticket-create-textarea textarea::placeholder { color: var(--ok-ink-9aa5b5,#9aa5b5); } .portal-ticket-create-textarea > small { color: var(--ok-ink-8793a5,#8793a5); font-size: .6rem; line-height: 1.45; } .portal-ticket-create-upload__box { display: grid; min-width: 0; gap: .55rem; padding: .72rem; border: 1px solid var(--ok-line-d3dbe7,#d3dbe7); border-radius: .82rem; background: linear-gradient(180deg, var(--ok-surface-fcfdff,#fcfdff) 0%, var(--ok-surface-f9fbfe,#f9fbfe) 100%); transition: border-color .15s ease, box-shadow .15s ease; } .portal-ticket-create-upload__lead { display: grid; min-width: 0; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .6rem; } .portal-ticket-create-upload__icon { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-family: 'Material Symbols Rounded'; font-size: 1.08rem; line-height: 1; } .portal-ticket-create-upload__lead > span:last-child { display: grid; min-width: 0; gap: .08rem; } .portal-ticket-create-upload__lead strong { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 700; } .portal-ticket-create-upload__lead small { color: var(--ok-ink-7b889b,#7b889b); font-size: .6rem; line-height: 1.45; } .portal-ticket-create-upload__box input[type="file"] { width: 100%; min-width: 0; min-height: 2.8rem; padding: .5rem .55rem; border: 1px dashed var(--ok-line-c8d2e1,#c8d2e1); border-radius: .72rem; outline: 0; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-425067,#425067); font: inherit; font-size: .64rem; } .portal-ticket-create-upload__box input[type="file"]::file-selector-button { margin-right: .62rem; padding: .46rem .64rem; border: 1px solid var(--ok-line-d7d8ee,#d7d8ee); border-radius: .56rem; background: var(--ok-surface-f5f3ff,#f5f3ff); color: var(--ok-ink-4f4c8f,#4f4c8f); font: inherit; font-size: .61rem; font-weight: 700; cursor: pointer; } .portal-ticket-create-card__footer { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .82rem .95rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); background: var(--ok-surface-fbfcfe,#fbfcfe); border-radius: 0 0 1rem 1rem; } .portal-ticket-create-card__footer p { display: flex; min-width: 0; align-items: flex-start; gap: .36rem; margin: 0; color: var(--ok-ink-7b889b,#7b889b); font-size: .61rem; line-height: 1.45; } .portal-ticket-create-card__footer p > .material-symbols-rounded { flex: 0 0 auto; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .95rem; line-height: 1; } .portal-ticket-create-card__footer .portal-tickets-primary-action { flex: 0 0 auto; } .portal-ticket-create-side-card { overflow: hidden; } .portal-ticket-create-side-card > header { justify-content: flex-start; } .portal-ticket-create-checklist { display: grid; gap: 0; margin: 0; padding: .25rem .9rem .65rem; list-style: none; } .portal-ticket-create-checklist li { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: .48rem; padding: .66rem 0; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-ticket-create-checklist li:last-child { border-bottom: 0; } .portal-ticket-create-checklist li > .material-symbols-rounded { margin-top: .03rem; color: var(--ok-ink-22a06b,#22a06b); font-size: 1rem; line-height: 1; } .portal-ticket-create-checklist li > span:last-child { display: grid; min-width: 0; gap: .08rem; } .portal-ticket-create-checklist strong { color: var(--ok-ink-405069,#405069); font-size: .66rem; font-weight: 700; } .portal-ticket-create-checklist small { color: var(--ok-ink-7b889b,#7b889b); font-size: .59rem; line-height: 1.45; } .portal-ticket-create-priority-guide { display: grid; gap: .12rem; padding: .55rem .9rem .75rem; } .portal-ticket-create-priority-guide > div { display: grid; grid-template-columns: .55rem minmax(0, 1fr); align-items: start; gap: .48rem; padding: .42rem 0; } .portal-ticket-create-priority-guide > div > span { width: .52rem; height: .52rem; margin-top: .22rem; border-radius: 999px; background: var(--ok-surface-94a3b8,#94a3b8); } .portal-ticket-create-priority-guide > div > span.is-normal { background: var(--ok-surface-6366f1,#6366f1); } .portal-ticket-create-priority-guide > div > span.is-high { background: var(--ok-surface-f59e0b,#f59e0b); } .portal-ticket-create-priority-guide > div > span.is-critical { background: var(--ok-surface-ef4444,#ef4444); } .portal-ticket-create-priority-guide p { display: grid; gap: .04rem; margin: 0; } .portal-ticket-create-priority-guide strong { color: var(--ok-ink-405069,#405069); font-size: .65rem; font-weight: 700; } .portal-ticket-create-priority-guide small { color: var(--ok-ink-7b889b,#7b889b); font-size: .58rem; line-height: 1.42; } .portal-ticket-create-security { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: start; gap: .62rem; padding: .82rem; border-color: var(--ok-line-d7e7df,#d7e7df); background: var(--ok-surface-fbfefc,#fbfefc); } .portal-ticket-create-security > .material-symbols-rounded { display: inline-grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .7rem; background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); font-size: 1.08rem; line-height: 1; } .portal-ticket-create-security > div { display: grid; gap: .12rem; } .portal-ticket-create-security strong { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 700; } .portal-ticket-create-security p { margin: 0; color: var(--ok-ink-718096,#718096); font-size: .6rem; line-height: 1.48; } .portal-ticket-create-alert { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: .65rem; padding: .8rem; border: 1px solid var(--ok-line-f6d68a,#f6d68a); border-radius: .9rem; background: var(--ok-surface-fffaf0,#fffaf0); } .portal-ticket-create-alert__icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .7rem; background: var(--ok-surface-fff3d6,#fff3d6); color: var(--ok-ink-b45309,#b45309); } .portal-ticket-create-alert__icon > .material-symbols-rounded { font-size: 1.08rem; line-height: 1; } .portal-ticket-create-alert strong { color: var(--ok-ink-7c4a09,#7c4a09); font-size: .72rem; font-weight: 700; } .portal-ticket-create-alert p { margin: .12rem 0 0; color: var(--ok-ink-8a6a37,#8a6a37); font-size: .62rem; line-height: 1.45; } @media (max-width: 980px) { .portal-ticket-create-grid { grid-template-columns: 1fr; } .portal-ticket-create-side { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-ticket-create-security { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-ticket-create-heading { align-items: flex-start; flex-direction: column; } .portal-ticket-create-heading__badge { width: 100%; min-width: 0; } .portal-ticket-create-form { grid-template-columns: 1fr; padding: .78rem; } .portal-ticket-create-field--full { grid-column: auto; } .portal-ticket-create-card__head { align-items: flex-start; } .portal-ticket-create-required { display: none; } .portal-ticket-create-card__footer { align-items: stretch; flex-direction: column; } .portal-ticket-create-card__footer .portal-tickets-primary-action { width: 100%; } .portal-ticket-create-side { grid-template-columns: 1fr; } .portal-ticket-create-security { grid-column: auto; } } @media (max-width: 460px) { .portal-ticket-create-upload__lead { grid-template-columns: 1fr; } .portal-ticket-create-textarea textarea { min-height: 8rem; } .portal-ticket-create-card__head, .portal-ticket-create-side-card > header { padding: .78rem; } } /* Portal Help Center — TailAdmin-inspired visual refresh — Hotfix 8.5.12 */ .portal-helpcenter-page { --portal-help-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-help-secondary: var(--ok-ink-2563eb,#2563eb); --portal-help-heading: var(--ok-ink-172033,#172033); --portal-help-text: var(--ok-ink-64748b,#64748b); --portal-help-border: var(--ok-line-e1e7ef,#e1e7ef); --portal-help-panel: var(--ok-surface-ffffff,#ffffff); display: grid; min-width: 0; gap: 1rem; } .portal-helpcenter-page, .portal-helpcenter-page * { box-sizing: border-box; } .portal-helpcenter-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .05rem .1rem; } .portal-helpcenter-heading > div:first-child { min-width: 0; } .portal-helpcenter-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-help-primary)); font-size: .66rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; } .portal-helpcenter-heading h1 { margin: .2rem 0 0; color: var(--ok-ink-172033,var(--portal-help-heading)); font-size: clamp(1.45rem, 2.4vw, 2rem); font-weight: 700; line-height: 1.08; letter-spacing: -.03em; } .portal-helpcenter-heading p { max-width: 58rem; margin: .38rem 0 0; color: var(--ok-ink-718096,#718096); font-size: .76rem; line-height: 1.55; } .portal-helpcenter-heading__icon { display: grid; width: 3.1rem; height: 3.1rem; flex: 0 0 3.1rem; place-items: center; border: 1px solid var(--ok-line-dcd9f0,#dcd9f0); border-radius: .9rem; background: var(--ok-surface-f4f2fb,#f4f2fb); color: var(--ok-ink-4f4c8f,var(--portal-help-primary)); } .portal-helpcenter-heading__icon > .material-symbols-rounded { font-size: 1.35rem; line-height: 1; } .portal-helpcenter-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; } .portal-helpcenter-metric { display: grid; min-width: 0; min-height: 6rem; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .72rem; padding: .82rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-help-border)); border-radius: .92rem; background: var(--ok-surface-ffffff,var(--portal-help-panel)); box-shadow: 0 14px 30px -30px var(--ok-shadow-0f172a_a500,rgba(15, 23, 42, .5)); } .portal-helpcenter-metric__icon-box, .portal-helpcenter-card__icon, .portal-helpcenter-article__icon, .portal-helpcenter-empty__icon, .portal-helpcenter-related-list__icon { display: grid; place-items: center; } .portal-helpcenter-metric__icon-box { width: 2.65rem; height: 2.65rem; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-metric__icon-box.is-category { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-059669,#059669); } .portal-helpcenter-metric__icon-box.is-results { background: var(--ok-surface-eef4ff,#eef4ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-helpcenter-metric__icon-box.is-filter { background: var(--ok-surface-fff4e8,#fff4e8); color: var(--ok-ink-ea580c,#ea580c); } .portal-helpcenter-metric__icon-box > .material-symbols-rounded { font-size: 1.28rem; line-height: 1; } .portal-helpcenter-metric__copy { display: grid; min-width: 0; gap: .06rem; } .portal-helpcenter-metric__copy small, .portal-helpcenter-metric__copy strong, .portal-helpcenter-metric__copy span { display: block; min-width: 0; margin: 0; } .portal-helpcenter-metric__copy small { color: var(--ok-ink-74839a,#74839a); font-size: .61rem; font-weight: 700; } .portal-helpcenter-metric__copy strong { overflow: hidden; color: var(--ok-ink-172033,#172033); font-size: 1rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-helpcenter-metric__copy span { color: var(--ok-ink-8a97aa,#8a97aa); font-size: .58rem; line-height: 1.4; } .portal-helpcenter-dashboard-grid, .portal-helpcenter-article-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.75fr) minmax(18rem, .72fr); gap: 1rem; align-items: start; } .portal-helpcenter-main, .portal-helpcenter-side, .portal-helpcenter-article-main, .portal-helpcenter-article-side { display: grid; min-width: 0; gap: 1rem; } .portal-helpcenter-side, .portal-helpcenter-article-side { position: sticky; top: 1rem; } .portal-helpcenter-card { min-width: 0; padding: .9rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-help-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 36px -34px var(--ok-shadow-0f172a_a560,rgba(15, 23, 42, .56)); } .portal-helpcenter-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .82rem; } .portal-helpcenter-card__head > div { display: flex; min-width: 0; align-items: center; gap: .58rem; } .portal-helpcenter-card__icon { width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; border-radius: .68rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-card__icon.is-category { background: var(--ok-surface-eef4ff,#eef4ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-helpcenter-card__icon.is-support { background: var(--ok-surface-ecfdf5,#ecfdf5); color: var(--ok-ink-059669,#059669); } .portal-helpcenter-card__icon.is-related { background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-c2410c,#c2410c); } .portal-helpcenter-card__icon.is-feedback { background: var(--ok-surface-fdf2f8,#fdf2f8); color: var(--ok-ink-be185d,#be185d); } .portal-helpcenter-card__icon > .material-symbols-rounded { font-size: 1.12rem; line-height: 1; } .portal-helpcenter-card__head small, .portal-helpcenter-card__head h2 { display: block; min-width: 0; margin: 0; } .portal-helpcenter-card__head small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .61rem; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; } .portal-helpcenter-card__head h2 { margin-top: .05rem; color: var(--ok-ink-172033,#172033); font-size: .9rem; font-weight: 700; line-height: 1.2; } .portal-helpcenter-count { flex: 0 0 auto; padding: .33rem .52rem; border-radius: 999px; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-657287,#657287); font-size: .63rem; font-weight: 700; white-space: nowrap; } .portal-helpcenter-toolbar { display: flex; min-width: 0; align-items: center; gap: .6rem; margin-bottom: .72rem; } .portal-helpcenter-search { display: grid; min-width: 0; flex: 1 1 auto; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; min-height: 2.8rem; overflow: hidden; border: 1px solid var(--ok-line-d7dfeb,#d7dfeb); border-radius: .78rem; background: var(--ok-surface-ffffff,#fff); } .portal-helpcenter-search:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .1)); } .portal-helpcenter-search > .material-symbols-rounded { color: var(--ok-ink-7e8a9d,#7e8a9d); font-size: 1rem; line-height: 1; justify-self: center; } .portal-helpcenter-search input { width: 100%; min-width: 0; min-height: 2.7rem; padding: .55rem .1rem; border: 0; outline: 0; background: transparent; color: var(--ok-ink-172033,#172033); font: inherit; font-size: .68rem; } .portal-helpcenter-search input::placeholder { color: var(--ok-ink-93a0b2,#93a0b2); } .portal-helpcenter-search button { display: grid; width: 2rem; height: 2rem; margin-right: .35rem; place-items: center; border: 0; border-radius: .58rem; background: var(--ok-surface-f5f7fb,#f5f7fb); color: var(--ok-ink-64748b,#64748b); cursor: pointer; } .portal-helpcenter-search button > .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-helpcenter-clear, .portal-helpcenter-primary-action, .portal-helpcenter-empty button, .portal-helpcenter-feedback__actions button { display: inline-flex; align-items: center; justify-content: center; gap: .38rem; min-height: 2.65rem; padding: .55rem .72rem; border-radius: .7rem; font: inherit; font-size: .66rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; } .portal-helpcenter-clear { flex: 0 0 auto; border: 1px solid var(--ok-line-d7dfeb,#d7dfeb); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-526077,#526077); } .portal-helpcenter-clear > .material-symbols-rounded, .portal-helpcenter-primary-action > .material-symbols-rounded, .portal-helpcenter-feedback__actions .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-helpcenter-results-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .7rem; padding: .15rem .08rem .65rem; } .portal-helpcenter-results-head strong { color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-helpcenter-results-head > div > span { margin-left: .22rem; color: var(--ok-ink-7d899b,#7d899b); font-size: .64rem; } .portal-helpcenter-active-filter { display: inline-flex; align-items: center; gap: .25rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; } .portal-helpcenter-active-filter > .material-symbols-rounded { font-size: .9rem; } .portal-helpcenter-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; } .portal-helpcenter-grid.is-loading { opacity: .62; } .portal-helpcenter-article { display: grid; min-width: 0; grid-template-columns: 2.4rem minmax(0, 1fr); gap: .62rem; padding: .72rem; border: 1px solid var(--ok-line-e6ebf2,#e6ebf2); border-radius: .82rem; background: var(--ok-surface-ffffff,#fff); color: inherit; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .portal-helpcenter-article:hover { transform: translateY(-1px); border-color: var(--ok-line-d3d0e8,#d3d0e8); box-shadow: 0 14px 30px -28px var(--ok-shadow-4f4c8f_a600,rgba(79, 76, 143, .6)); } .portal-helpcenter-article__icon { width: 2.4rem; height: 2.4rem; border-radius: .68rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-article__icon > .material-symbols-rounded { font-size: 1.08rem; line-height: 1; } .portal-helpcenter-article__body { display: grid; min-width: 0; align-content: start; gap: .14rem; } .portal-helpcenter-article__body small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .58rem; font-weight: 700; text-transform: uppercase; } .portal-helpcenter-article__body strong { color: var(--ok-ink-263247,#263247); font-size: .75rem; font-weight: 700; line-height: 1.35; } .portal-helpcenter-article__body > span { display: -webkit-box; overflow: hidden; margin-top: .12rem; color: var(--ok-ink-748197,#748197); font-size: .63rem; line-height: 1.48; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .portal-helpcenter-article__footer { display: flex; min-width: 0; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: .5rem; margin-top: .12rem; padding-top: .55rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-helpcenter-article__footer > small { color: var(--ok-ink-8b97a8,#8b97a8); font-size: .57rem; } .portal-helpcenter-article__footer > span { display: inline-flex; align-items: center; gap: .26rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; } .portal-helpcenter-article__footer .material-symbols-rounded { font-size: .9rem; line-height: 1; } .portal-helpcenter-empty { display: grid; min-width: 0; grid-column: 1 / -1; grid-template-columns: 2.8rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: 1rem; border: 1px dashed var(--ok-line-ccd6e3,#ccd6e3); border-radius: .82rem; background: var(--ok-surface-fafbfd,#fafbfd); } .portal-helpcenter-empty__icon { width: 2.8rem; height: 2.8rem; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-empty__icon > .material-symbols-rounded { font-size: 1.25rem; } .portal-helpcenter-empty strong { display: block; color: var(--ok-ink-334155,#334155); font-size: .76rem; font-weight: 700; } .portal-helpcenter-empty p { margin: .14rem 0 .55rem; color: var(--ok-ink-748197,#748197); font-size: .63rem; line-height: 1.45; } .portal-helpcenter-empty button { border: 0; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); } .portal-helpcenter-pagination { padding-top: .72rem; } .portal-helpcenter-categories { display: grid; min-width: 0; gap: .38rem; } .portal-helpcenter-categories button { display: grid; width: 100%; min-width: 0; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .52rem; border: 1px solid transparent; border-radius: .72rem; background: transparent; color: inherit; text-align: left; cursor: pointer; } .portal-helpcenter-categories button:hover { background: var(--ok-surface-f8fafc,#f8fafc); } .portal-helpcenter-categories button.is-active { border-color: var(--ok-line-dddaf0,#dddaf0); background: var(--ok-surface-f5f3fb,#f5f3fb); } .portal-helpcenter-categories__icon { display: grid; width: 2rem; height: 2rem; place-items: center; border-radius: .58rem; background: var(--ok-surface-f4f6fa,#f4f6fa); color: var(--ok-ink-68758a,#68758a); font-size: .96rem; line-height: 1; } .portal-helpcenter-categories button.is-active .portal-helpcenter-categories__icon { background: var(--ok-surface-eae8f7,#eae8f7); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-categories button > span:nth-child(2) { min-width: 0; } .portal-helpcenter-categories strong, .portal-helpcenter-categories small { display: block; min-width: 0; } .portal-helpcenter-categories strong { overflow: hidden; color: var(--ok-ink-425067,#425067); font-size: .66rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-helpcenter-categories small { margin-top: .06rem; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .56rem; } .portal-helpcenter-categories__count { min-width: 1.55rem; padding: .22rem .38rem; border-radius: 999px; background: var(--ok-surface-f2f4f8,#f2f4f8); color: var(--ok-ink-64748b,#64748b); font-size: .56rem; font-weight: 700; text-align: center; } .portal-helpcenter-categories button.is-active .portal-helpcenter-categories__count { background: var(--ok-surface-e9e6f6,#e9e6f6); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-support-card > p, .portal-helpcenter-feedback > p { margin: 0 0 .72rem; color: var(--ok-ink-718096,#718096); font-size: .65rem; line-height: 1.55; } .portal-helpcenter-primary-action { width: 100%; border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 12px 24px -20px var(--ok-shadow-4f4c8f_a750,rgba(79, 76, 143, .75)); } .portal-helpcenter-primary-action:hover { background: var(--ok-surface-403d75,#403d75); } .portal-helpcenter-back { display: inline-flex; width: fit-content; align-items: center; gap: .3rem; color: var(--ok-ink-657287,#657287); font-size: .64rem; font-weight: 700; text-decoration: none; } .portal-helpcenter-back:hover { color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-back > .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-helpcenter-article-heading { margin-top: -.25rem; } .portal-helpcenter-content-card { padding: 0; overflow: hidden; } .portal-helpcenter-content-card__head { margin: 0; padding: .9rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-helpcenter-content { max-width: 78ch; padding: clamp(1rem, 2.4vw, 1.55rem); color: var(--ok-ink-344257,#344257); font-size: .77rem; line-height: 1.78; } .portal-helpcenter-content > :first-child { margin-top: 0; } .portal-helpcenter-content > :last-child { margin-bottom: 0; } .portal-helpcenter-content h2, .portal-helpcenter-content h3, .portal-helpcenter-content h4 { color: var(--ok-ink-172033,#172033); font-weight: 700; line-height: 1.3; } .portal-helpcenter-content h2 { margin: 1.55rem 0 .58rem; font-size: 1.12rem; } .portal-helpcenter-content h3 { margin: 1.3rem 0 .5rem; font-size: .95rem; } .portal-helpcenter-content h4 { margin: 1.1rem 0 .45rem; font-size: .85rem; } .portal-helpcenter-content p { margin: .72rem 0; } .portal-helpcenter-content ul, .portal-helpcenter-content ol { margin: .72rem 0; padding-left: 1.35rem; } .portal-helpcenter-content ul { list-style: disc; } .portal-helpcenter-content ol { list-style: decimal; } .portal-helpcenter-content li { margin: .3rem 0; } .portal-helpcenter-content a { color: var(--ok-ink-2563eb,#2563eb); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; } .portal-helpcenter-content blockquote { margin: .9rem 0; padding: .72rem .82rem; border-left: 3px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius: 0 .62rem .62rem 0; background: var(--ok-surface-f7f6fc,#f7f6fc); color: var(--ok-ink-526077,#526077); } .portal-helpcenter-content code { padding: .12rem .28rem; border-radius: .32rem; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-334155,#334155); font-size: .9em; } .portal-helpcenter-content pre { max-width: 100%; margin: .9rem 0; overflow: auto; padding: .85rem; border-radius: .72rem; background: var(--ok-surface-172033,#172033); color: var(--ok-ink-e2e8f0,#e2e8f0); } .portal-helpcenter-content pre code { padding: 0; background: transparent; color: inherit; } .portal-helpcenter-content img { display: block; max-width: 100%; height: auto; margin: .9rem auto; border-radius: .72rem; } .portal-helpcenter-content table { width: 100%; margin: .9rem 0; border-collapse: collapse; font-size: .7rem; } .portal-helpcenter-content th, .portal-helpcenter-content td { padding: .48rem .55rem; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); text-align: left; vertical-align: top; } .portal-helpcenter-content th { background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-334155,#334155); font-weight: 700; } .portal-helpcenter-feedback__actions { display: flex; flex-wrap: wrap; gap: .5rem; } .portal-helpcenter-feedback__actions button { border: 1px solid var(--ok-line-d6deea,#d6deea); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-526077,#526077); } .portal-helpcenter-feedback__actions button:hover { border-color: var(--ok-line-bbb6da,#bbb6da); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-helpcenter-feedback__actions button.is-selected { border-color: var(--ok-line-86efac,#86efac); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .portal-helpcenter-feedback__actions button.is-selected.is-negative { border-color: var(--ok-line-fdba74,#fdba74); background: var(--ok-surface-fff7ed,#fff7ed); color: var(--ok-ink-9a3412,#9a3412); } .portal-helpcenter-feedback__actions button:disabled { cursor: wait; opacity: .62; } .portal-helpcenter-feedback__message { margin: .62rem 0 0 !important; color: var(--ok-ink-166534,#166534) !important; font-size: .62rem !important; font-weight: 700; } .portal-helpcenter-feedback__message.is-error { color: var(--ok-ink-b91c1c,#b91c1c) !important; } .portal-helpcenter-feedback__message.is-pending { color: var(--ok-ink-92400e,#92400e) !important; } .portal-helpcenter-related-list { display: grid; min-width: 0; gap: .35rem; } .portal-helpcenter-related-list > a { display: grid; min-width: 0; grid-template-columns: 2rem minmax(0, 1fr) 1rem; align-items: center; gap: .48rem; padding: .5rem; border: 1px solid transparent; border-radius: .7rem; color: inherit; text-decoration: none; } .portal-helpcenter-related-list > a:hover { border-color: var(--ok-line-e1e4ec,#e1e4ec); background: var(--ok-surface-fafbfd,#fafbfd); } .portal-helpcenter-related-list__icon { width: 2rem; height: 2rem; border-radius: .58rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .95rem; line-height: 1; } .portal-helpcenter-related-list > a > span:nth-child(2) { min-width: 0; } .portal-helpcenter-related-list strong, .portal-helpcenter-related-list small { display: block; min-width: 0; } .portal-helpcenter-related-list strong { overflow: hidden; color: var(--ok-ink-425067,#425067); font-size: .65rem; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-helpcenter-related-list small { margin-top: .08rem; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .55rem; } .portal-helpcenter-related-list > a > .material-symbols-rounded:last-child { color: var(--ok-ink-a0aabd,#a0aabd); font-size: .9rem; line-height: 1; } .portal-helpcenter-related-empty { display: grid; justify-items: center; gap: .35rem; padding: 1.1rem .7rem; border: 1px dashed var(--ok-line-d5dce6,#d5dce6); border-radius: .72rem; background: var(--ok-surface-fafbfd,#fafbfd); text-align: center; } .portal-helpcenter-related-empty > .material-symbols-rounded { color: var(--ok-ink-7d87a3,#7d87a3); font-size: 1.35rem; } .portal-helpcenter-related-empty p { margin: 0; color: var(--ok-ink-7c899c,#7c899c); font-size: .61rem; line-height: 1.45; } .portal-helpcenter-page :is(a, button, input):focus-visible { outline: 3px solid var(--ok-line-2563eb_a200,rgba(37, 99, 235, .2)); outline-offset: 2px; } @media (max-width: 1120px) { .portal-helpcenter-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-helpcenter-dashboard-grid, .portal-helpcenter-article-grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem); } } @media (max-width: 860px) { .portal-helpcenter-dashboard-grid, .portal-helpcenter-article-grid { grid-template-columns: 1fr; } .portal-helpcenter-side, .portal-helpcenter-article-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { .portal-helpcenter-heading { align-items: flex-start; } .portal-helpcenter-heading__icon { width: 2.75rem; height: 2.75rem; flex-basis: 2.75rem; } .portal-helpcenter-heading h1 { font-size: 1.4rem; } .portal-helpcenter-metrics { grid-template-columns: 1fr 1fr; gap: .6rem; } .portal-helpcenter-metric { min-height: 5.4rem; padding: .7rem; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .6rem; } .portal-helpcenter-metric__icon-box { width: 2.35rem; height: 2.35rem; } .portal-helpcenter-grid { grid-template-columns: 1fr; } .portal-helpcenter-toolbar { align-items: stretch; flex-direction: column; } .portal-helpcenter-clear { width: 100%; } .portal-helpcenter-side, .portal-helpcenter-article-side { grid-template-columns: 1fr; } } @media (max-width: 460px) { .portal-helpcenter-metrics { grid-template-columns: 1fr; } .portal-helpcenter-heading p { font-size: .7rem; } .portal-helpcenter-card { padding: .78rem; } .portal-helpcenter-content-card { padding: 0; } .portal-helpcenter-content-card__head { padding: .78rem; } .portal-helpcenter-results-head { align-items: flex-start; flex-direction: column; } .portal-helpcenter-feedback__actions { display: grid; } .portal-helpcenter-feedback__actions button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .portal-helpcenter-article { transition: none; } .portal-helpcenter-article:hover { transform: none; } } /* Portal customer dashboard — TailAdmin-inspired consistency — Hotfix 8.5.13 */ .portal-dashboard-tail-page { --portal-dashboard-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-dashboard-secondary: var(--ok-ink-2563eb,#2563eb); --portal-dashboard-heading: var(--ok-ink-172033,#172033); --portal-dashboard-text: var(--ok-ink-6f7e94,#6f7e94); --portal-dashboard-border: var(--ok-line-e1e7ef,#e1e7ef); --portal-dashboard-panel: var(--ok-surface-ffffff,#ffffff); display: grid; min-width: 0; gap: 1rem; } .portal-dashboard-tail-page, .portal-dashboard-tail-page * { box-sizing: border-box; } .portal-dashboard-tail-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .05rem .05rem; } .portal-dashboard-tail-heading__copy { min-width: 0; } .portal-dashboard-tail-eyebrow { display: block; color: var(--ok-ink-4f4c8f,var(--portal-dashboard-primary)); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-dashboard-tail-heading h1 { margin: .14rem 0 0; color: var(--ok-ink-172033,var(--portal-dashboard-heading)); font-size: clamp(1.55rem, 3vw, 2rem); font-weight: 700; line-height: 1.12; letter-spacing: -.026em; } .portal-dashboard-tail-heading p { max-width: 52rem; margin: .35rem 0 0; color: var(--ok-ink-6f7e94,var(--portal-dashboard-text)); font-size: .76rem; line-height: 1.55; } .portal-dashboard-tail-heading__status { display: flex; flex: 0 0 auto; align-items: center; gap: .58rem; min-width: 12rem; padding: .62rem .72rem; border: 1px solid var(--ok-line-e0e5ee,#e0e5ee); border-radius: .82rem; background: var(--ok-surface-ffffff_a820,rgba(255,255,255,.82)); } .portal-dashboard-tail-heading__status-icon, .portal-dashboard-tail-metric__icon-box, .portal-dashboard-tail-card__icon, .portal-dashboard-tail-attention-item__icon, .portal-dashboard-tail-list__icon, .portal-dashboard-tail-help-articles__icon, .portal-dashboard-tail-quick-grid > a > span:first-child, .portal-dashboard-tail-next-invoice > span:first-child, .portal-dashboard-tail-all-clear > span:first-child, .portal-dashboard-tail-empty > span:first-child { display: inline-grid; place-items: center; flex: 0 0 auto; } .portal-dashboard-tail-heading__status-icon { width: 2.35rem; height: 2.35rem; border-radius: .7rem; background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-dashboard-tail-heading__status-icon > .material-symbols-rounded { font-size: 1.08rem; line-height: 1; } .portal-dashboard-tail-heading__status > div { display: grid; min-width: 0; gap: .04rem; } .portal-dashboard-tail-heading__status small { color: var(--ok-ink-8491a5,#8491a5); font-size: .58rem; font-weight: 700; } .portal-dashboard-tail-heading__status strong { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 700; } .portal-dashboard-tail-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .portal-dashboard-tail-metric { position: relative; display: grid; min-width: 0; min-height: 6.7rem; grid-template-columns: 2.75rem minmax(0, 1fr) 1rem; align-items: center; gap: .7rem; padding: .88rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-dashboard-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,var(--portal-dashboard-panel)); color: inherit; text-decoration: none; box-shadow: 0 16px 38px -34px var(--ok-shadow-0f172a_a560,rgba(15,23,42,.56)); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .portal-dashboard-tail-metric:hover { transform: translateY(-1px); border-color: var(--ok-line-d1cee5,#d1cee5); box-shadow: 0 20px 42px -34px var(--ok-shadow-4f4c8f_a480,rgba(79,76,143,.48)); } .portal-dashboard-tail-metric.is-warning { border-color: var(--ok-line-f0d2a4,#f0d2a4); } .portal-dashboard-tail-metric__icon-box { width: 2.75rem; height: 2.75rem; border-radius: .82rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-metric__icon-box.is-finance { background: var(--ok-surface-fff6e9,#fff6e9); color: var(--ok-ink-c66a13,#c66a13); } .portal-dashboard-tail-metric__icon-box.is-services { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-dashboard-tail-metric__icon-box.is-contracts { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-dashboard-tail-metric__icon-box > .material-symbols-rounded { font-size: 1.18rem; line-height: 1; } .portal-dashboard-tail-metric__copy { display: grid; min-width: 0; align-content: center; gap: .05rem; } .portal-dashboard-tail-metric__copy small { color: var(--ok-ink-7d899b,#7d899b); font-size: .6rem; font-weight: 700; } .portal-dashboard-tail-metric__copy strong { color: var(--ok-ink-172033,#172033); font-size: 1.18rem; font-weight: 700; line-height: 1.15; } .portal-dashboard-tail-metric__copy span { overflow: hidden; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .58rem; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-metric__arrow { color: var(--ok-ink-a0aabd,#a0aabd); font-size: .98rem; line-height: 1; } .portal-dashboard-tail-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1.75fr) minmax(17rem, .72fr); gap: .85rem; align-items: start; } .portal-dashboard-tail-main, .portal-dashboard-tail-side { display: grid; min-width: 0; gap: .85rem; } .portal-dashboard-tail-side { position: sticky; top: 1rem; } .portal-dashboard-tail-card { display: grid; min-width: 0; gap: .75rem; padding: .85rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-dashboard-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,var(--portal-dashboard-panel)); box-shadow: 0 16px 38px -34px var(--ok-shadow-0f172a_a500,rgba(15,23,42,.5)); } .portal-dashboard-tail-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; } .portal-dashboard-tail-card__head > div { display: flex; min-width: 0; align-items: center; gap: .58rem; } .portal-dashboard-tail-card__head > div > div { display: grid; min-width: 0; gap: .04rem; } .portal-dashboard-tail-card__head small { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .58rem; font-weight: 700; text-transform: uppercase; } .portal-dashboard-tail-card__head h2 { margin: 0; color: var(--ok-ink-29364b,#29364b); font-size: .82rem; font-weight: 700; line-height: 1.25; } .portal-dashboard-tail-card__icon { width: 2.25rem; height: 2.25rem; border-radius: .68rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-card__icon.is-attention { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-dashboard-tail-card__icon.is-finance { background: var(--ok-surface-fff6e9,#fff6e9); color: var(--ok-ink-c66a13,#c66a13); } .portal-dashboard-tail-card__icon.is-help { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-dashboard-tail-card__icon.is-quick { background: var(--ok-surface-f5f3ff,#f5f3ff); color: var(--ok-ink-6d5db5,#6d5db5); } .portal-dashboard-tail-card__icon.is-account { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-dashboard-tail-card__icon > .material-symbols-rounded { font-size: 1.04rem; line-height: 1; } .portal-dashboard-tail-count { flex: 0 0 auto; padding: .28rem .5rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .58rem; font-weight: 700; } .portal-dashboard-tail-count.has-items { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-a65e10,#a65e10); } .portal-dashboard-tail-card__link { display: inline-flex; flex: 0 0 auto; align-items: center; gap: .24rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .6rem; font-weight: 700; text-decoration: none; } .portal-dashboard-tail-card__link .material-symbols-rounded { font-size: .86rem; line-height: 1; } .portal-dashboard-tail-attention-list { display: grid; min-width: 0; gap: .42rem; } .portal-dashboard-tail-attention-item { display: grid; min-width: 0; grid-template-columns: 2.15rem minmax(0, 1fr) 1rem; align-items: center; gap: .55rem; padding: .58rem; border: 1px solid var(--ok-line-edf1f5,#edf1f5); border-radius: .76rem; background: var(--ok-surface-fbfcfe,#fbfcfe); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .portal-dashboard-tail-attention-item:hover { border-color: var(--ok-line-d8d5e8,#d8d5e8); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-dashboard-tail-attention-item__icon { width: 2.15rem; height: 2.15rem; border-radius: .62rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-attention-item.is-danger .portal-dashboard-tail-attention-item__icon { background: var(--ok-surface-fef2f2,#fef2f2); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-dashboard-tail-attention-item.is-warning .portal-dashboard-tail-attention-item__icon { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-b45309,#b45309); } .portal-dashboard-tail-attention-item.is-info .portal-dashboard-tail-attention-item__icon { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-dashboard-tail-attention-item__icon > .material-symbols-rounded { font-size: .98rem; line-height: 1; } .portal-dashboard-tail-attention-item > div { display: grid; min-width: 0; gap: .07rem; } .portal-dashboard-tail-attention-item strong { color: var(--ok-ink-334155,#334155); font-size: .67rem; font-weight: 700; } .portal-dashboard-tail-attention-item small { overflow: hidden; color: var(--ok-ink-8491a5,#8491a5); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-attention-item > .material-symbols-rounded:last-child { color: var(--ok-ink-a0aabd,#a0aabd); font-size: .9rem; line-height: 1; } .portal-dashboard-tail-all-clear { display: grid; min-width: 0; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .65rem; padding: .82rem; border: 1px solid var(--ok-line-d8f0df,#d8f0df); border-radius: .8rem; background: var(--ok-surface-f7fcf9,#f7fcf9); } .portal-dashboard-tail-all-clear > span:first-child { width: 2.4rem; height: 2.4rem; border-radius: .7rem; background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-15803d,#15803d); } .portal-dashboard-tail-all-clear > span:first-child .material-symbols-rounded { font-size: 1.1rem; line-height: 1; } .portal-dashboard-tail-all-clear strong { display: block; color: var(--ok-ink-2f5540,#2f5540); font-size: .7rem; font-weight: 700; } .portal-dashboard-tail-all-clear p { margin: .12rem 0 0; color: var(--ok-ink-718a7b,#718a7b); font-size: .6rem; line-height: 1.45; } .portal-dashboard-tail-split { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; } .portal-dashboard-tail-list { display: grid; min-width: 0; gap: .34rem; } .portal-dashboard-tail-list__row { display: grid; min-width: 0; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .5rem; border: 1px solid transparent; border-radius: .7rem; color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease; } .portal-dashboard-tail-list__row:hover { border-color: var(--ok-line-e2e6ed,#e2e6ed); background: var(--ok-surface-fafbfd,#fafbfd); } .portal-dashboard-tail-list__icon { width: 2rem; height: 2rem; border-radius: .6rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-list__icon.is-finance { background: var(--ok-surface-fff6e9,#fff6e9); color: var(--ok-ink-c66a13,#c66a13); } .portal-dashboard-tail-list__icon > .material-symbols-rounded { font-size: .92rem; line-height: 1; } .portal-dashboard-tail-list__body { display: grid; min-width: 0; gap: .05rem; } .portal-dashboard-tail-list__body strong { overflow: hidden; color: var(--ok-ink-3b485d,#3b485d); font-size: .64rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-list__body small { overflow: hidden; color: var(--ok-ink-8b97a8,#8b97a8); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-status { padding: .24rem .38rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); font-size: .53rem; font-weight: 700; white-space: nowrap; } .portal-dashboard-tail-status.is-success { background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-166534,#166534); } .portal-dashboard-tail-status.is-warning { background: var(--ok-surface-fff7e8,#fff7e8); color: var(--ok-ink-a65e10,#a65e10); } .portal-dashboard-tail-status.is-danger { background: var(--ok-surface-fee2e2,#fee2e2); color: var(--ok-ink-991b1b,#991b1b); } .portal-dashboard-tail-status.is-info, .portal-dashboard-tail-status.is-primary { background: var(--ok-surface-eef2ff,#eef2ff); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-list__amount { display: grid; justify-items: end; gap: .05rem; text-align: right; } .portal-dashboard-tail-list__amount strong { color: var(--ok-ink-334155,#334155); font-size: .63rem; font-weight: 700; white-space: nowrap; } .portal-dashboard-tail-list__amount span { color: var(--ok-ink-7b889b,#7b889b); font-size: .53rem; font-weight: 700; } .portal-dashboard-tail-list__amount span.is-danger { color: var(--ok-ink-b91c1c,#b91c1c); } .portal-dashboard-tail-empty { display: grid; min-width: 0; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: center; gap: .55rem; padding: .72rem; border: 1px dashed var(--ok-line-d7dee8,#d7dee8); border-radius: .72rem; background: var(--ok-surface-fafbfd,#fafbfd); } .portal-dashboard-tail-empty > span:first-child { width: 2.2rem; height: 2.2rem; border-radius: .64rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-empty.is-success > span:first-child { background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-15803d,#15803d); } .portal-dashboard-tail-empty .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-dashboard-tail-empty strong { display: block; color: var(--ok-ink-425067,#425067); font-size: .64rem; font-weight: 700; } .portal-dashboard-tail-empty small { display: block; margin-top: .08rem; color: var(--ok-ink-8b97a8,#8b97a8); font-size: .56rem; } .portal-dashboard-tail-quick-grid { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .portal-dashboard-tail-quick-grid > a { display: grid; min-width: 0; grid-template-columns: 2.1rem minmax(0, 1fr); align-items: center; gap: .5rem; padding: .58rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .76rem; background: var(--ok-surface-fbfcfe,#fbfcfe); color: inherit; text-decoration: none; transition: border-color .15s ease, background .15s ease, transform .15s ease; } .portal-dashboard-tail-quick-grid > a:hover { transform: translateY(-1px); border-color: var(--ok-line-d3d0e8,#d3d0e8); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-dashboard-tail-quick-grid > a > span:first-child { width: 2.1rem; height: 2.1rem; border-radius: .62rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-dashboard-tail-quick-grid > a > span:first-child .material-symbols-rounded { font-size: .96rem; line-height: 1; } .portal-dashboard-tail-quick-grid > a > div { display: grid; min-width: 0; gap: .04rem; } .portal-dashboard-tail-quick-grid strong { overflow: hidden; color: var(--ok-ink-3d4a5f,#3d4a5f); font-size: .63rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-quick-grid small { overflow: hidden; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .54rem; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-finance-total { display: grid; gap: .08rem; padding: .78rem; border-radius: .78rem; background: linear-gradient(135deg, var(--ok-surface-f7f6fc,#f7f6fc) 0%, var(--ok-surface-f1f5ff,#f1f5ff) 100%); } .portal-dashboard-tail-finance-total small { color: var(--ok-ink-7d899b,#7d899b); font-size: .58rem; font-weight: 700; } .portal-dashboard-tail-finance-total strong { color: var(--ok-ink-27284a,#27284a); font-size: 1.32rem; font-weight: 700; letter-spacing: -.02em; } .portal-dashboard-tail-finance-total span { color: var(--ok-ink-7f8b9f,#7f8b9f); font-size: .56rem; } .portal-dashboard-tail-next-invoice { display: grid; min-width: 0; grid-template-columns: 2.05rem minmax(0, 1fr) 1rem; align-items: center; gap: .48rem; padding: .52rem; border: 1px solid var(--ok-line-e8ebf0,#e8ebf0); border-radius: .72rem; color: inherit; text-decoration: none; } .portal-dashboard-tail-next-invoice > span:first-child { width: 2.05rem; height: 2.05rem; border-radius: .6rem; background: var(--ok-surface-fff6e9,#fff6e9); color: var(--ok-ink-c66a13,#c66a13); } .portal-dashboard-tail-next-invoice > span:first-child .material-symbols-rounded { font-size: .92rem; line-height: 1; } .portal-dashboard-tail-next-invoice > div { display: grid; min-width: 0; gap: .03rem; } .portal-dashboard-tail-next-invoice small { color: var(--ok-ink-8a96a8,#8a96a8); font-size: .55rem; } .portal-dashboard-tail-next-invoice strong { color: var(--ok-ink-3d4a5f,#3d4a5f); font-size: .65rem; font-weight: 700; } .portal-dashboard-tail-next-invoice > .material-symbols-rounded:last-child { color: var(--ok-ink-a0aabd,#a0aabd); font-size: .88rem; line-height: 1; } .portal-dashboard-tail-finance-ok { display: flex; align-items: center; gap: .38rem; color: var(--ok-ink-15803d,#15803d); font-size: .59rem; font-weight: 700; } .portal-dashboard-tail-finance-ok .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-dashboard-tail-account-card > p { margin: 0; color: var(--ok-ink-748197,#748197); font-size: .62rem; line-height: 1.55; } .portal-dashboard-tail-secondary-action { display: inline-flex; width: 100%; min-height: 2.5rem; align-items: center; justify-content: center; gap: .34rem; padding: .5rem .65rem; border: 1px solid var(--ok-line-d7dfeb,#d7dfeb); border-radius: .7rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .62rem; font-weight: 700; text-decoration: none; } .portal-dashboard-tail-secondary-action:hover { border-color: var(--ok-line-bdb8de,#bdb8de); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-dashboard-tail-secondary-action .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-dashboard-tail-help-card { gap: .8rem; } .portal-dashboard-tail-help-card__intro { display: flex; min-width: 0; align-items: center; gap: .58rem; } .portal-dashboard-tail-help-card__intro > div { display: grid; min-width: 0; gap: .04rem; } .portal-dashboard-tail-help-card__intro small { color: var(--ok-ink-2563eb,#2563eb); font-size: .58rem; font-weight: 700; text-transform: uppercase; } .portal-dashboard-tail-help-card__intro h2 { margin: 0; color: var(--ok-ink-29364b,#29364b); font-size: .82rem; font-weight: 700; } .portal-dashboard-tail-help-card__intro p { margin: .08rem 0 0; color: var(--ok-ink-8491a5,#8491a5); font-size: .58rem; } .portal-dashboard-tail-help-search { display: grid; min-width: 0; grid-template-columns: 1.1rem minmax(0, 1fr) auto; align-items: center; gap: .38rem; min-height: 2.75rem; padding: .32rem .38rem .32rem .68rem; border: 1px solid var(--ok-line-d8e0eb,#d8e0eb); border-radius: .76rem; background: var(--ok-surface-ffffff,#fff); } .portal-dashboard-tail-help-search > .material-symbols-rounded { color: var(--ok-ink-94a0b2,#94a0b2); font-size: 1rem; line-height: 1; } .portal-dashboard-tail-help-search input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ok-ink-334155,#334155); font: inherit; font-size: .64rem; } .portal-dashboard-tail-help-search input::placeholder { color: var(--ok-ink-9aa5b5,#9aa5b5); } .portal-dashboard-tail-help-search button { min-height: 2.05rem; padding: .42rem .65rem; border: 0; border-radius: .6rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font: inherit; font-size: .58rem; font-weight: 700; cursor: pointer; } .portal-dashboard-tail-help-articles { display: grid; min-width: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .45rem; } .portal-dashboard-tail-help-articles > a { display: grid; min-width: 0; grid-template-columns: 2rem minmax(0, 1fr) .9rem; align-items: center; gap: .45rem; padding: .5rem; border: 1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius: .72rem; background: var(--ok-surface-fbfcfe,#fbfcfe); color: inherit; text-decoration: none; } .portal-dashboard-tail-help-articles > a:hover { border-color: var(--ok-line-d4d1e5,#d4d1e5); background: var(--ok-surface-faf9fe,#faf9fe); } .portal-dashboard-tail-help-articles__icon { width: 2rem; height: 2rem; border-radius: .6rem; background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-dashboard-tail-help-articles__icon .material-symbols-rounded { font-size: .92rem; line-height: 1; } .portal-dashboard-tail-help-articles > a > span:nth-child(2) { display: grid; min-width: 0; gap: .04rem; } .portal-dashboard-tail-help-articles strong { overflow: hidden; color: var(--ok-ink-3d4a5f,#3d4a5f); font-size: .61rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-help-articles small { overflow: hidden; color: var(--ok-ink-8b97a8,#8b97a8); font-size: .53rem; text-overflow: ellipsis; white-space: nowrap; } .portal-dashboard-tail-help-articles > a > .material-symbols-rounded:last-child { color: var(--ok-ink-a0aabd,#a0aabd); font-size: .85rem; line-height: 1; } .portal-dashboard-tail-help-card__browse { display: inline-flex; width: fit-content; align-items: center; gap: .25rem; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .61rem; font-weight: 700; text-decoration: none; } .portal-dashboard-tail-help-card__browse .material-symbols-rounded { font-size: .88rem; line-height: 1; } .portal-dashboard-tail-page :is(a, button, input):focus-visible { outline: 3px solid var(--ok-line-2563eb_a200,rgba(37,99,235,.2)); outline-offset: 2px; } @media (max-width: 1180px) { .portal-dashboard-tail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-dashboard-tail-grid { grid-template-columns: minmax(0, 1fr) minmax(16rem, 18rem); } .portal-dashboard-tail-split { grid-template-columns: 1fr; } .portal-dashboard-tail-help-articles { grid-template-columns: 1fr; } } @media (max-width: 900px) { .portal-dashboard-tail-grid { grid-template-columns: 1fr; } .portal-dashboard-tail-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-dashboard-tail-account-card { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-dashboard-tail-heading { align-items: flex-start; } .portal-dashboard-tail-heading__status { min-width: 0; padding: .5rem; } .portal-dashboard-tail-heading__status > div { display: none; } .portal-dashboard-tail-heading__status-icon { width: 2.65rem; height: 2.65rem; } .portal-dashboard-tail-heading h1 { font-size: 1.42rem; } .portal-dashboard-tail-metrics { grid-template-columns: 1fr 1fr; gap: .6rem; } .portal-dashboard-tail-metric { min-height: 5.8rem; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .58rem; padding: .72rem; } .portal-dashboard-tail-metric__icon-box { width: 2.35rem; height: 2.35rem; } .portal-dashboard-tail-metric__arrow { display: none; } .portal-dashboard-tail-metric__copy strong { font-size: 1rem; } .portal-dashboard-tail-card__head { align-items: flex-start; } .portal-dashboard-tail-side { grid-template-columns: 1fr; } .portal-dashboard-tail-account-card { grid-column: auto; } } @media (max-width: 520px) { .portal-dashboard-tail-page { gap: .8rem; } .portal-dashboard-tail-heading p { font-size: .7rem; } .portal-dashboard-tail-metrics { grid-template-columns: 1fr; } .portal-dashboard-tail-metric { grid-template-columns: 2.5rem minmax(0, 1fr); } .portal-dashboard-tail-metric__icon-box { width: 2.5rem; height: 2.5rem; } .portal-dashboard-tail-card { padding: .75rem; } .portal-dashboard-tail-card__head { display: grid; } .portal-dashboard-tail-card__link, .portal-dashboard-tail-count { width: fit-content; } .portal-dashboard-tail-attention-item { grid-template-columns: 2rem minmax(0, 1fr); } .portal-dashboard-tail-attention-item > .material-symbols-rounded:last-child { display: none; } .portal-dashboard-tail-attention-item__icon { width: 2rem; height: 2rem; } .portal-dashboard-tail-attention-item small { white-space: normal; } .portal-dashboard-tail-list__row { grid-template-columns: 2rem minmax(0, 1fr); } .portal-dashboard-tail-status, .portal-dashboard-tail-list__amount { grid-column: 2; justify-self: start; text-align: left; } .portal-dashboard-tail-quick-grid { grid-template-columns: 1fr; } .portal-dashboard-tail-help-search { grid-template-columns: 1rem minmax(0, 1fr); padding: .55rem .65rem; } .portal-dashboard-tail-help-search button { grid-column: 1 / -1; width: 100%; } } @media (prefers-reduced-motion: reduce) { .portal-dashboard-tail-metric, .portal-dashboard-tail-quick-grid > a { transition: none; } .portal-dashboard-tail-metric:hover, .portal-dashboard-tail-quick-grid > a:hover { transform: none; } } /* Portal Notifications + Profile TailAdmin-inspired experience — Hotfix 8.5.14 */ .portal-notifications-tail-page, .portal-profile-tail-page { --portal-tail-primary: var(--ok-ink-4f4c8f,#4f4c8f); --portal-tail-secondary: var(--ok-ink-2563eb,#2563eb); --portal-tail-heading: var(--ok-ink-1e293b,#1e293b); --portal-tail-text: var(--ok-ink-64748b,#64748b); --portal-tail-muted: var(--ok-ink-8a96a8,#8a96a8); --portal-tail-border: var(--ok-line-e1e7ef,#e1e7ef); --portal-tail-panel: var(--ok-surface-ffffff,#fff); display: grid; min-width: 0; gap: 1rem; } .portal-notifications-tail-page *, .portal-profile-tail-page * { box-sizing: border-box; } .portal-notifications-tail-heading, .portal-profile-tail-heading { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; padding: .15rem .08rem .25rem; } .portal-notifications-tail-heading__copy, .portal-profile-tail-heading__copy { min-width: 0; } .portal-notifications-tail-eyebrow, .portal-profile-tail-eyebrow { display: block; margin-bottom: .28rem; color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); font-size: .65rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-notifications-tail-heading h1, .portal-profile-tail-heading h1 { margin: 0; color: var(--ok-ink-1e293b,var(--portal-tail-heading)); font-size: clamp(1.55rem, 2.7vw, 2rem); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; } .portal-notifications-tail-heading p, .portal-profile-tail-heading p { max-width: 52rem; margin: .35rem 0 0; color: var(--ok-ink-708097,#708097); font-size: .78rem; line-height: 1.55; } .portal-notifications-tail-heading__status, .portal-profile-tail-heading__identity { display: flex; flex: 0 0 auto; align-items: center; gap: .62rem; min-width: 12rem; padding: .65rem .72rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-tail-border)); border-radius: .9rem; background: var(--ok-surface-ffffff_a880,rgba(255,255,255,.88)); box-shadow: 0 16px 36px -34px var(--ok-shadow-0f172a_a580,rgba(15,23,42,.58)); } .portal-notifications-tail-heading__status-icon, .portal-profile-tail-avatar { display: inline-grid; width: 2.6rem; height: 2.6rem; flex: 0 0 2.6rem; place-items: center; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-profile-tail-avatar { background: linear-gradient(145deg, var(--ok-surface-5955a3,#5955a3), var(--ok-surface-4f4c8f,#4f4c8f)); color: var(--ok-ink-ffffff,#fff); font-size: .92rem; font-weight: 700; } .portal-notifications-tail-heading__status-icon > .material-symbols-rounded { font-size: 1.2rem; line-height: 1; } .portal-notifications-tail-heading__status div, .portal-profile-tail-heading__identity div { display: grid; min-width: 0; gap: .08rem; } .portal-notifications-tail-heading__status small, .portal-profile-tail-heading__identity small { color: var(--ok-ink-8190a5,#8190a5); font-size: .6rem; font-weight: 700; } .portal-notifications-tail-heading__status strong, .portal-profile-tail-heading__identity strong { overflow: hidden; color: var(--ok-ink-2d3748,#2d3748); font-size: .78rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-notifications-tail-metrics, .portal-profile-tail-metrics { display: grid; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; } .portal-notifications-tail-metric, .portal-profile-tail-metric { display: grid; min-width: 0; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .68rem; min-height: 6.5rem; padding: .85rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-tail-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,var(--portal-tail-panel)); box-shadow: 0 16px 38px -36px var(--ok-shadow-0f172a_a620,rgba(15,23,42,.62)); } .portal-notifications-tail-metric__icon-box, .portal-profile-tail-metric__icon-box { display: inline-grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .8rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-notifications-tail-metric__icon-box > .material-symbols-rounded, .portal-profile-tail-metric__icon-box > .material-symbols-rounded { display: block; margin: 0; padding: 0; font-family: 'Material Symbols Rounded'; font-size: 1.18rem; font-style: normal; font-weight: normal; line-height: 1; letter-spacing: normal; text-transform: none; white-space: nowrap; word-wrap: normal; direction: ltr; font-feature-settings: 'liga'; -webkit-font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; } .portal-notifications-tail-metric__icon-box.is-total, .portal-profile-tail-metric__icon-box.is-device { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-notifications-tail-metric__icon-box.is-finance { background: var(--ok-surface-fff6e9,#fff6e9); color: var(--ok-ink-c25e09,#c25e09); } .portal-notifications-tail-metric__icon-box.is-recent, .portal-profile-tail-metric__icon-box.is-access { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-475569,#475569); } .portal-profile-tail-metric__icon-box.is-trusted { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-notifications-tail-metric > div, .portal-profile-tail-metric > div { display: grid; min-width: 0; gap: .08rem; } .portal-notifications-tail-metric small, .portal-profile-tail-metric small { color: var(--ok-ink-7b889b,#7b889b); font-size: .61rem; font-weight: 700; } .portal-notifications-tail-metric strong, .portal-profile-tail-metric strong { overflow: hidden; color: var(--ok-ink-1f2937,#1f2937); font-size: 1rem; font-weight: 700; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; } .portal-notifications-tail-metric span:not(.material-symbols-rounded), .portal-profile-tail-metric span:not(.material-symbols-rounded) { overflow: hidden; color: var(--ok-ink-8794a8,#8794a8); font-size: .6rem; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; } .portal-notifications-tail-grid, .portal-profile-tail-grid { display: grid; min-width: 0; grid-template-columns: minmax(0, 1fr) minmax(18rem, 20rem); gap: 1rem; align-items: start; } .portal-notifications-tail-main, .portal-notifications-tail-side, .portal-profile-tail-main, .portal-profile-tail-side { display: grid; min-width: 0; gap: .85rem; } .portal-notifications-tail-side, .portal-profile-tail-side { position: sticky; top: 1rem; } .portal-notifications-tail-card, .portal-profile-tail-card { display: grid; min-width: 0; gap: .8rem; padding: .9rem; border: 1px solid var(--ok-line-e1e7ef,var(--portal-tail-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,var(--portal-tail-panel)); box-shadow: 0 16px 38px -36px var(--ok-shadow-0f172a_a620,rgba(15,23,42,.62)); } .portal-notifications-tail-card__head, .portal-profile-tail-card__head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .75rem; } .portal-notifications-tail-card__head > div, .portal-profile-tail-card__head > div { display: flex; min-width: 0; align-items: center; gap: .62rem; } .portal-notifications-tail-card__icon, .portal-profile-tail-card__icon { display: inline-grid; width: 2.35rem; height: 2.35rem; flex: 0 0 2.35rem; place-items: center; border-radius: .7rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-notifications-tail-card__icon > .material-symbols-rounded, .portal-profile-tail-card__icon > .material-symbols-rounded { font-size: 1.05rem; line-height: 1; } .portal-notifications-tail-card__icon.is-overview, .portal-profile-tail-card__icon.is-history { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-profile-tail-card__icon.is-security { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-profile-tail-card__icon.is-device { background: var(--ok-surface-f5f3ff,#f5f3ff); color: var(--ok-ink-6d5db5,#6d5db5); } .portal-notifications-tail-card__head small, .portal-profile-tail-card__head small, .portal-notifications-tail-card__head h2, .portal-profile-tail-card__head h2 { display: block; margin: 0; } .portal-notifications-tail-card__head small, .portal-profile-tail-card__head small { color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); font-size: .6rem; font-weight: 700; text-transform: uppercase; } .portal-notifications-tail-card__head h2, .portal-profile-tail-card__head h2 { margin-top: .06rem; color: var(--ok-ink-263247,#263247); font-size: .84rem; font-weight: 700; } .portal-notifications-tail-secondary, .portal-notifications-tail-read, .portal-notifications-tail-open, .portal-profile-tail-primary, .portal-profile-tail-danger { display: inline-flex; min-width: 0; min-height: 2.35rem; align-items: center; justify-content: center; gap: .35rem; padding: .5rem .68rem; border-radius: .68rem; font: inherit; font-size: .64rem; font-weight: 700; line-height: 1; text-decoration: none; cursor: pointer; } .portal-notifications-tail-secondary, .portal-notifications-tail-read, .portal-notifications-tail-open { border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4b5870,#4b5870); } .portal-notifications-tail-secondary:hover, .portal-notifications-tail-read:hover, .portal-notifications-tail-open:hover { border-color: var(--ok-line-c5c0e0,#c5c0e0); background: var(--ok-surface-faf9fe,#faf9fe); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-notifications-tail-secondary > .material-symbols-rounded, .portal-notifications-tail-read > .material-symbols-rounded, .portal-notifications-tail-open > .material-symbols-rounded, .portal-profile-tail-primary > .material-symbols-rounded, .portal-profile-tail-danger > .material-symbols-rounded { font-size: .94rem; line-height: 1; } .portal-notifications-tail-list { display: grid; min-width: 0; gap: .48rem; } .portal-notifications-tail-item { display: grid; min-width: 0; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .68rem; padding: .7rem; border: 1px solid var(--ok-line-e6ebf1,#e6ebf1); border-radius: .8rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, background .15s ease, transform .15s ease; } .portal-notifications-tail-item:hover { transform: translateY(-1px); border-color: var(--ok-line-d1cde7,#d1cde7); } .portal-notifications-tail-item.is-unread { border-color: var(--ok-line-d9d6ef,#d9d6ef); background: linear-gradient(90deg, var(--ok-surface-fbfaff,#fbfaff), var(--ok-surface-ffffff,#fff) 62%); box-shadow: inset 3px 0 0 var(--ok-shadow-625da3,#625da3); } .portal-notifications-tail-item__icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-notifications-tail-item__icon > .material-symbols-rounded { font-size: 1.05rem; line-height: 1; } .portal-notifications-tail-item__icon.is-finance { background: var(--ok-surface-fff6e9,#fff6e9); color: var(--ok-ink-c25e09,#c25e09); } .portal-notifications-tail-item__icon.is-support { background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-notifications-tail-item__icon.is-contract { background: var(--ok-surface-f5f3ff,#f5f3ff); color: var(--ok-ink-6d5db5,#6d5db5); } .portal-notifications-tail-item__icon.is-research { background: var(--ok-surface-f0fdfa,#f0fdfa); color: var(--ok-ink-0f766e,#0f766e); } .portal-notifications-tail-item__icon.is-service { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-notifications-tail-item__body { min-width: 0; } .portal-notifications-tail-item__title-row { display: flex; min-width: 0; align-items: center; gap: .45rem; } .portal-notifications-tail-item__title-row strong { overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .72rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-notifications-tail-unread-badge { flex: 0 0 auto; padding: .2rem .4rem; border-radius: 999px; background: var(--ok-surface-eeecf8,#eeecf8); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); font-size: .55rem; font-weight: 700; } .portal-notifications-tail-item__body p { margin: .16rem 0 0; color: var(--ok-ink-66748a,#66748a); font-size: .65rem; line-height: 1.45; } .portal-notifications-tail-item__body small { display: block; margin-top: .25rem; color: var(--ok-ink-94a0b1,#94a0b1); font-size: .56rem; } .portal-notifications-tail-item__actions { display: flex; flex: 0 0 auto; align-items: center; justify-content: flex-end; gap: .35rem; } .portal-notifications-tail-read { min-height: 2.1rem; padding: .42rem .55rem; } .portal-notifications-tail-open { min-height: 2.1rem; padding: .42rem .55rem; color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-notifications-tail-empty, .portal-profile-tail-empty { display: grid; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .7rem; padding: 1rem; border: 1px dashed var(--ok-line-d4dce7,#d4dce7); border-radius: .8rem; background: var(--ok-surface-fafbfd,#fafbfd); } .portal-notifications-tail-empty > span, .portal-profile-tail-empty > span { display: inline-grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .75rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-notifications-tail-empty > span .material-symbols-rounded, .portal-profile-tail-empty > span .material-symbols-rounded { font-size: 1.15rem; line-height: 1; } .portal-notifications-tail-empty strong, .portal-profile-tail-empty strong { color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-notifications-tail-empty p { margin: .12rem 0 0; color: var(--ok-ink-7b889b,#7b889b); font-size: .62rem; line-height: 1.45; } .portal-profile-tail-empty small { display: block; margin-top: .08rem; color: var(--ok-ink-7b889b,#7b889b); font-size: .6rem; } .portal-profile-tail-empty.is-small { grid-template-columns: 2.2rem minmax(0,1fr); padding: .72rem; } .portal-profile-tail-empty.is-small > span { width: 2.2rem; height: 2.2rem; } .portal-notifications-tail-pagination { padding-top: .25rem; border-top: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-notifications-tail-overview, .portal-profile-tail-security-list { display: grid; gap: .02rem; margin: 0; } .portal-notifications-tail-overview > div, .portal-profile-tail-security-list > div { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: .7rem; padding: .52rem .05rem; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-notifications-tail-overview > div:last-child, .portal-profile-tail-security-list > div:last-child { border-bottom: 0; } .portal-notifications-tail-overview dt, .portal-notifications-tail-overview dd, .portal-profile-tail-security-list dt, .portal-profile-tail-security-list dd { margin: 0; font-size: .65rem; } .portal-notifications-tail-overview dt, .portal-profile-tail-security-list dt { color: var(--ok-ink-748197,#748197); } .portal-notifications-tail-overview dd, .portal-profile-tail-security-list dd { color: var(--ok-ink-2f3a50,#2f3a50); font-weight: 700; text-align: right; } .portal-notifications-tail-preferences { grid-template-columns: 2.5rem minmax(0, 1fr); align-items: start; gap: .7rem; } .portal-notifications-tail-preferences__icon { display: inline-grid; width: 2.5rem; height: 2.5rem; place-items: center; border-radius: .72rem; background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-notifications-tail-preferences__icon .material-symbols-rounded { font-size: 1.05rem; line-height: 1; } .portal-notifications-tail-preferences small { color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); font-size: .58rem; font-weight: 700; text-transform: uppercase; } .portal-notifications-tail-preferences h2 { margin: .08rem 0 0; color: var(--ok-ink-334155,#334155); font-size: .78rem; font-weight: 700; } .portal-notifications-tail-preferences p { margin: .28rem 0 0; color: var(--ok-ink-748197,#748197); font-size: .62rem; line-height: 1.48; } .portal-notifications-tail-preferences a { display: inline-flex; align-items: center; gap: .25rem; margin-top: .5rem; color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); font-size: .63rem; font-weight: 700; text-decoration: none; } .portal-notifications-tail-preferences a .material-symbols-rounded { font-size: .85rem; line-height: 1; } .portal-notifications-tail-tip, .portal-profile-tail-tip, .portal-profile-tail-readonly, .portal-profile-tail-notice { display: flex; min-width: 0; align-items: flex-start; gap: .55rem; padding: .72rem; border: 1px solid var(--ok-line-dce6f3,#dce6f3); border-radius: .8rem; background: var(--ok-surface-f8fbff,#f8fbff); } .portal-notifications-tail-tip > span, .portal-profile-tail-tip > span { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 2rem; place-items: center; border-radius: .6rem; background: var(--ok-surface-eef5ff,#eef5ff); color: var(--ok-ink-2563eb,#2563eb); } .portal-notifications-tail-tip .material-symbols-rounded, .portal-profile-tail-tip .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-notifications-tail-tip strong, .portal-profile-tail-tip strong { color: var(--ok-ink-334155,#334155); font-size: .66rem; font-weight: 700; } .portal-notifications-tail-tip p, .portal-profile-tail-tip p { margin: .14rem 0 0; color: var(--ok-ink-748197,#748197); font-size: .6rem; line-height: 1.48; } .portal-profile-tail-notice { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); font-size: .68rem; font-weight: 700; } .portal-profile-tail-notice > .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-profile-tail-readonly { border-color: var(--ok-line-fde68a,#fde68a); background: var(--ok-surface-fffbeb,#fffbeb); color: var(--ok-ink-92400e,#92400e); } .portal-profile-tail-readonly > .material-symbols-rounded { flex: 0 0 auto; font-size: 1rem; line-height: 1; } .portal-profile-tail-readonly div { display: grid; gap: .05rem; } .portal-profile-tail-readonly strong { font-size: .66rem; font-weight: 700; } .portal-profile-tail-readonly span:not(.material-symbols-rounded) { font-size: .61rem; } .portal-profile-tail-card__badge, .portal-profile-tail-card__count { flex: 0 0 auto; padding: .28rem .48rem; border-radius: 999px; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-5f6d81,#5f6d81); font-size: .57rem; font-weight: 700; } .portal-profile-tail-card__badge { background: var(--ok-surface-ecfdf3,#ecfdf3); color: var(--ok-ink-15803d,#15803d); } .portal-profile-tail-form { display: grid; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; } .portal-profile-tail-field { display: grid; min-width: 0; gap: .28rem; } .portal-profile-tail-field > label { color: var(--ok-ink-48566c,#48566c); font-size: .64rem; font-weight: 700; } .portal-profile-tail-field > small { color: var(--ok-ink-8996a8,#8996a8); font-size: .57rem; line-height: 1.42; } .portal-profile-tail-field__control { display: grid; min-width: 0; grid-template-columns: 1.2rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; min-height: 2.65rem; padding: 0 .68rem; border: 1px solid var(--ok-line-d5deea,#d5deea); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); } .portal-profile-tail-field__control:focus-within { border-color: var(--ok-line-4f4c8f,var(--portal-tail-primary)); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a100,rgba(79,76,143,.1)); } .portal-profile-tail-field__control > .material-symbols-rounded { color: var(--ok-ink-8794a8,#8794a8); font-size: .98rem; line-height: 1; } .portal-profile-tail-field__control input, .portal-profile-tail-field__control select { width: 100%; min-width: 0; height: 2.55rem; padding: 0; border: 0; outline: 0; background: transparent; color: var(--ok-ink-253247,#253247); font: inherit; font-size: .68rem; } .portal-profile-tail-field__control select { appearance: none; cursor: pointer; } .portal-profile-tail-field.is-readonly .portal-profile-tail-field__control { background: var(--ok-surface-f8fafc,#f8fafc); } .portal-profile-tail-field.is-readonly input { color: var(--ok-ink-64748b,#64748b); cursor: not-allowed; } .portal-profile-tail-lock, .portal-profile-tail-select-icon { color: var(--ok-ink-9aa6b6,#9aa6b6) !important; font-size: .9rem !important; } .portal-profile-tail-error { color: var(--ok-ink-b91c1c,#b91c1c) !important; font-size: .59rem !important; font-weight: 700 !important; } .portal-profile-tail-notification-setting { display: grid; min-width: 0; grid-column: 1 / -1; grid-template-columns: 2.3rem minmax(0, 1fr) auto; align-items: center; gap: .62rem; padding: .68rem; border: 1px solid var(--ok-line-e3e8ef,#e3e8ef); border-radius: .78rem; background: var(--ok-surface-fafbfd,#fafbfd); cursor: pointer; } .portal-profile-tail-notification-setting__icon { display: inline-grid; width: 2.3rem; height: 2.3rem; place-items: center; border-radius: .68rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--portal-tail-primary)); } .portal-profile-tail-notification-setting__icon .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-profile-tail-notification-setting__copy { display: grid; min-width: 0; gap: .07rem; } .portal-profile-tail-notification-setting__copy strong { color: var(--ok-ink-334155,#334155); font-size: .68rem; font-weight: 700; } .portal-profile-tail-notification-setting__copy small { color: var(--ok-ink-8190a5,#8190a5); font-size: .59rem; line-height: 1.42; } .portal-profile-tail-switch { position: relative; display: inline-flex; width: 2.55rem; height: 1.42rem; flex: 0 0 2.55rem; } .portal-profile-tail-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .portal-profile-tail-switch > span { position: absolute; inset: 0; border-radius: 999px; background: var(--ok-surface-cbd5e1,#cbd5e1); transition: background .15s ease; } .portal-profile-tail-switch > span::after { content: ''; position: absolute; top: .18rem; left: .18rem; width: 1.06rem; height: 1.06rem; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 2px 8px var(--ok-shadow-0f172a_a180,rgba(15,23,42,.18)); transition: transform .15s ease; } .portal-profile-tail-switch input:checked + span { background: var(--ok-surface-4f4c8f,var(--portal-tail-primary)); } .portal-profile-tail-switch input:checked + span::after { transform: translateX(1.12rem); } .portal-profile-tail-switch input:disabled + span { opacity: .55; } .portal-profile-tail-form__actions { display: flex; grid-column: 1 / -1; justify-content: flex-end; padding-top: .1rem; } .portal-profile-tail-primary { border: 1px solid var(--ok-line-4f4c8f,var(--portal-tail-primary)); background: var(--ok-surface-4f4c8f,var(--portal-tail-primary)); color: var(--ok-ink-ffffff,#fff); box-shadow: 0 12px 24px -18px var(--ok-shadow-4f4c8f_a900,rgba(79,76,143,.9)); } .portal-profile-tail-primary:hover { background: var(--ok-surface-403d75,#403d75); } .portal-profile-tail-danger { width: 100%; margin-top: .15rem; border: 1px solid var(--ok-line-fecaca,#fecaca); background: var(--ok-surface-fff7f7,#fff7f7); color: var(--ok-ink-b91c1c,#b91c1c); } .portal-profile-tail-danger:hover { border-color: var(--ok-line-fca5a5,#fca5a5); background: var(--ok-surface-fef2f2,#fef2f2); } .portal-profile-tail-log-list, .portal-profile-tail-device-list { display: grid; min-width: 0; gap: .4rem; } .portal-profile-tail-log-item, .portal-profile-tail-device-item { display: grid; min-width: 0; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .58rem; border: 1px solid var(--ok-line-e8edf2,#e8edf2); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); } .portal-profile-tail-log-item__icon, .portal-profile-tail-device-item__icon { display: inline-grid; width: 2.2rem; height: 2.2rem; place-items: center; border-radius: .64rem; background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .portal-profile-tail-log-item__icon .material-symbols-rounded, .portal-profile-tail-device-item__icon .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-profile-tail-log-item > div, .portal-profile-tail-device-item__copy { min-width: 0; } .portal-profile-tail-log-item strong, .portal-profile-tail-device-item strong { display: block; overflow: hidden; color: var(--ok-ink-334155,#334155); font-size: .65rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .portal-profile-tail-log-item small, .portal-profile-tail-device-item small, .portal-profile-tail-device-item__copy > span { display: block; overflow: hidden; margin-top: .08rem; color: var(--ok-ink-8a96a8,#8a96a8); font-size: .56rem; text-overflow: ellipsis; white-space: nowrap; } .portal-profile-tail-device-item__copy > span { color: var(--ok-ink-6f7d91,#6f7d91); } .portal-profile-tail-device-item.is-revoked { opacity: .62; background: var(--ok-surface-fafafa,#fafafa); } .portal-profile-tail-device-badge { flex: 0 0 auto; padding: .22rem .4rem; border-radius: 999px; background: var(--ok-surface-dcfce7,#dcfce7); color: var(--ok-ink-166534,#166534); font-size: .53rem; font-weight: 700; } .portal-profile-tail-device-badge.is-revoked { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .portal-notifications-tail-page :is(a, button, input, select):focus-visible, .portal-profile-tail-page :is(a, button, input, select):focus-visible { outline: 3px solid var(--ok-line-2563eb_a180,rgba(37,99,235,.18)); outline-offset: 2px; } @media (max-width: 1080px) { .portal-notifications-tail-metrics, .portal-profile-tail-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-notifications-tail-grid, .portal-profile-tail-grid { grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 18rem); } } @media (max-width: 860px) { .portal-notifications-tail-grid, .portal-profile-tail-grid { grid-template-columns: 1fr; } .portal-notifications-tail-side, .portal-profile-tail-side { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); } .portal-profile-tail-tip, .portal-notifications-tail-tip { grid-column: 1 / -1; } } @media (max-width: 680px) { .portal-notifications-tail-heading, .portal-profile-tail-heading { align-items: flex-start; } .portal-notifications-tail-heading__status, .portal-profile-tail-heading__identity { min-width: auto; padding: .55rem; } .portal-notifications-tail-heading__status div, .portal-profile-tail-heading__identity div { display: none; } .portal-notifications-tail-heading__status-icon, .portal-profile-tail-avatar { width: 2.45rem; height: 2.45rem; flex-basis: 2.45rem; } .portal-notifications-tail-card__head, .portal-profile-tail-card__head { align-items: flex-start; } .portal-notifications-tail-card__head:not(.is-compact) { display: grid; } .portal-notifications-tail-secondary { width: 100%; } .portal-notifications-tail-item { grid-template-columns: 2.35rem minmax(0, 1fr); align-items: start; } .portal-notifications-tail-item__icon { width: 2.35rem; height: 2.35rem; } .portal-notifications-tail-item__actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; } .portal-profile-tail-form { grid-template-columns: 1fr; } .portal-profile-tail-notification-setting, .portal-profile-tail-form__actions { grid-column: auto; } .portal-notifications-tail-side, .portal-profile-tail-side { grid-template-columns: 1fr; } .portal-profile-tail-tip, .portal-notifications-tail-tip { grid-column: auto; } } @media (max-width: 480px) { .portal-notifications-tail-page, .portal-profile-tail-page { gap: .78rem; } .portal-notifications-tail-heading h1, .portal-profile-tail-heading h1 { font-size: 1.45rem; } .portal-notifications-tail-heading p, .portal-profile-tail-heading p { font-size: .7rem; } .portal-notifications-tail-metrics, .portal-profile-tail-metrics { grid-template-columns: 1fr; } .portal-notifications-tail-metric, .portal-profile-tail-metric { min-height: 5.75rem; padding: .72rem; } .portal-notifications-tail-card, .portal-profile-tail-card { padding: .72rem; } .portal-notifications-tail-item__body p { font-size: .62rem; } .portal-notifications-tail-read, .portal-notifications-tail-open { flex: 1 1 auto; } .portal-profile-tail-notification-setting { grid-template-columns: 2.15rem minmax(0,1fr); } .portal-profile-tail-switch { grid-column: 2; margin-top: .2rem; } .portal-profile-tail-log-item, .portal-profile-tail-device-item { grid-template-columns: 2.1rem minmax(0, 1fr); } .portal-profile-tail-device-badge { grid-column: 2; justify-self: start; } } @media (prefers-reduced-motion: reduce) { .portal-notifications-tail-page *, .portal-profile-tail-page * { scroll-behavior: auto !important; transition: none !important; } } /* Portal sidebar fixed to viewport — Hotfix 8.5.15 */ @media (min-width: 761px) { .portal-shell { display: block; min-height: 100vh; } .portal-sidebar { position: fixed; top: 0; left: 0; bottom: 0; width: 16.5rem; height: 100dvh; max-height: 100dvh; overflow: hidden; z-index: 30; } .portal-sidebar nav { min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: .12rem; } .portal-workspace { min-height: 100vh; margin-left: 16.5rem; } .portal-topbar { top: 0; } } @media (min-width: 761px) and (max-width: 1100px) { .portal-sidebar { width: 13.5rem; } .portal-workspace { margin-left: 13.5rem; } } /* Portal authentication — TailAdmin-inspired split layout — Hotfix 8.5.16 */ .portal-login-body, .portal-login-body * { box-sizing: border-box; } .portal-login-body { min-width: 320px; min-height: 100vh; min-height: 100dvh; margin: 0; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-1e293b,#1e293b); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } .portal-login-shell { display: grid; min-height: 100vh; min-height: 100dvh; grid-template-columns: minmax(0, 1fr) minmax(31rem, 1fr); } .portal-login-main { display: grid; min-width: 0; min-height: 100vh; min-height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 5vw, 4.75rem); background: var(--ok-surface-ffffff,#fff); } .portal-login-topbar, .portal-login-main__content, .portal-login-footer { width: min(100%, 31rem); margin-inline: auto; } .portal-login-topbar { display: flex; align-items: center; min-height: 2.5rem; } .portal-login-back { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.35rem; padding: .35rem .5rem; border-radius: .6rem; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; font-weight: 700; text-decoration: none; } .portal-login-back:hover { background: var(--ok-surface-f8fafc,#f8fafc); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-login-back .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-login-main__content { align-self: center; padding-block: clamp(2rem, 7vh, 5rem); } .portal-login-card { display: grid; gap: 1.15rem; } .portal-login-brand { display: flex; align-items: center; gap: .72rem; } .portal-login-brand--mobile { display: none; margin-bottom: 2rem; } .portal-login-brand__mark { display: inline-grid; width: 2.8rem; height: 2.8rem; flex: 0 0 2.8rem; place-items: center; border-radius: .82rem; background: linear-gradient(135deg, var(--ok-surface-4f4c8f,#4f4c8f), var(--ok-surface-2563eb,#2563eb)); color: var(--ok-ink-ffffff,#fff); font-size: .86rem; font-weight: 700; box-shadow: 0 14px 26px -18px var(--ok-shadow-2563eb_a850,rgba(37, 99, 235, .85)); } .portal-login-brand strong, .portal-login-brand small { display: block; } .portal-login-brand strong { font-size: 1rem; font-weight: 700; line-height: 1.2; } .portal-login-brand small { margin-top: .08rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .7rem; } .portal-login-heading { display: grid; gap: .45rem; } .portal-login-eyebrow { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; } .portal-login-heading h1 { margin: 0; color: var(--ok-ink-1e293b,#1e293b); font-size: clamp(1.7rem, 3vw, 2.15rem); font-weight: 700; line-height: 1.12; letter-spacing: -.03em; } .portal-login-heading p { max-width: 29rem; margin: .1rem 0 0; color: var(--ok-ink-64748b,#64748b); font-size: .8rem; line-height: 1.6; } .portal-login-message { display: flex; align-items: flex-start; gap: .5rem; padding: .68rem .75rem; border: 1px solid var(--ok-line-dbeafe,#dbeafe); border-radius: .72rem; background: var(--ok-surface-eff6ff,#eff6ff); color: var(--ok-ink-1d4ed8,#1d4ed8); font-size: .7rem; line-height: 1.45; } .portal-login-message.is-success { border-color: var(--ok-line-bbf7d0,#bbf7d0); background: var(--ok-surface-f0fdf4,#f0fdf4); color: var(--ok-ink-166534,#166534); } .portal-login-message .material-symbols-rounded { flex: 0 0 auto; font-size: 1rem; line-height: 1; } .portal-login-form { display: grid; gap: 1rem; } .portal-login-field { display: grid; gap: .35rem; } .portal-login-field > label { color: var(--ok-ink-334155,#334155); font-size: .72rem; font-weight: 700; } .portal-login-field > small { color: var(--ok-ink-94a3b8,#94a3b8); font-size: .63rem; line-height: 1.45; } .portal-login-control { display: grid; min-width: 0; grid-template-columns: 2.7rem minmax(0, 1fr); align-items: center; min-height: 3.15rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .72rem; background: var(--ok-surface-ffffff,#fff); transition: border-color .15s ease, box-shadow .15s ease; } .portal-login-control:hover { border-color: var(--ok-line-cbd5e1,#cbd5e1); } .portal-login-control:focus-within { border-color: var(--ok-line-4f4c8f,#4f4c8f); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a100,rgba(79, 76, 143, .10)); } .portal-login-control.is-invalid { border-color: var(--ok-line-fca5a5,#fca5a5); } .portal-login-control > .material-symbols-rounded { display: inline-grid; width: 2.7rem; height: 100%; place-items: center; color: var(--ok-ink-8b97a8,#8b97a8); font-size: 1.05rem; line-height: 1; } .portal-login-control input { width: 100%; min-width: 0; height: 3rem; padding: 0 .78rem 0 0; border: 0; outline: 0; background: transparent; color: var(--ok-ink-1e293b,#1e293b); font: inherit; font-size: .78rem; } .portal-login-control input::placeholder { color: var(--ok-ink-a3adbb,#a3adbb); } .portal-login-control--otp input { letter-spacing: .42rem; font-size: 1rem; font-weight: 700; } .portal-login-error { display: flex; align-items: flex-start; gap: .3rem; margin: .05rem 0 0; color: var(--ok-ink-b91c1c,#b91c1c); font-size: .64rem; font-weight: 700; } .portal-login-error .material-symbols-rounded { font-size: .9rem; line-height: 1; } .portal-login-trusted { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .72rem; min-height: 3.35rem; padding: .62rem .7rem; border: 1px solid var(--ok-line-e5e9f0,#e5e9f0); border-radius: .72rem; background: var(--ok-surface-fafbfc,#fafbfc); cursor: pointer; } .portal-login-trusted > input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .portal-login-trusted__switch { position: relative; width: 2.35rem; height: 1.3rem; border-radius: 999px; background: var(--ok-surface-cbd5e1,#cbd5e1); transition: background .15s ease; } .portal-login-trusted__switch::after { content: ""; position: absolute; top: .16rem; left: .16rem; width: .98rem; height: .98rem; border-radius: 50%; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 2px 7px var(--ok-shadow-0f172a_a180,rgba(15, 23, 42, .18)); transition: transform .15s ease; } .portal-login-trusted > input:checked + .portal-login-trusted__switch { background: var(--ok-surface-4f4c8f,#4f4c8f); } .portal-login-trusted > input:checked + .portal-login-trusted__switch::after { transform: translateX(1.05rem); } .portal-login-trusted:focus-within { border-color: var(--ok-line-bdb8de,#bdb8de); box-shadow: 0 0 0 3px var(--ok-shadow-4f4c8f_a80,rgba(79, 76, 143, .08)); } .portal-login-trusted__copy { display: grid; gap: .08rem; min-width: 0; } .portal-login-trusted__copy strong { color: var(--ok-ink-334155,#334155); font-size: .7rem; font-weight: 700; } .portal-login-trusted__copy small { color: var(--ok-ink-8491a5,#8491a5); font-size: .61rem; line-height: 1.45; } .portal-login-submit { display: flex; width: 100%; min-height: 3.05rem; align-items: center; justify-content: center; gap: .42rem; padding: .65rem .85rem; border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius: .7rem; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font: inherit; font-size: .73rem; font-weight: 700; cursor: pointer; box-shadow: 0 14px 28px -22px var(--ok-shadow-4f4c8f_a920,rgba(79, 76, 143, .92)); transition: background .15s ease, transform .15s ease; } .portal-login-submit:hover { background: var(--ok-surface-403d75,#403d75); transform: translateY(-1px); } .portal-login-submit .material-symbols-rounded { font-size: 1rem; line-height: 1; } .portal-login-meta { display: flex; align-items: flex-start; gap: .45rem; padding-top: .15rem; color: var(--ok-ink-8491a5,#8491a5); } .portal-login-meta > .material-symbols-rounded { flex: 0 0 auto; margin-top: .05rem; color: var(--ok-ink-64748b,#64748b); font-size: .95rem; line-height: 1; } .portal-login-meta p { margin: 0; font-size: .62rem; line-height: 1.55; } .portal-login-admin-link, .portal-login-resend { display: flex; align-items: center; gap: .3rem; color: var(--ok-ink-64748b,#64748b); font-size: .68rem; } .portal-login-admin-link a, .portal-login-resend button, .portal-login-change-email { border: 0; background: transparent; color: var(--ok-ink-4f4c8f,#4f4c8f); font: inherit; font-size: .68rem; font-weight: 700; text-decoration: none; cursor: pointer; } .portal-login-resend form { margin: 0; } .portal-login-resend button { padding: .2rem; } .portal-login-change-email { display: inline-flex; width: fit-content; align-items: center; gap: .3rem; min-height: 2.2rem; padding: .3rem .1rem; } .portal-login-change-email .material-symbols-rounded { font-size: .92rem; line-height: 1; } .portal-login-invalid { display: grid; justify-items: start; gap: .55rem; padding: 1rem; border: 1px solid var(--ok-line-fde68a,#fde68a); border-radius: .8rem; background: var(--ok-surface-fffbeb,#fffbeb); } .portal-login-invalid__icon { color: var(--ok-ink-b45309,#b45309); font-size: 1.65rem; } .portal-login-invalid strong { color: var(--ok-ink-92400e,#92400e); font-size: .82rem; } .portal-login-invalid p { margin: 0; color: var(--ok-ink-8a6a37,#8a6a37); font-size: .68rem; line-height: 1.5; } .portal-login-invalid a { display: inline-flex; align-items: center; gap: .35rem; min-height: 2.5rem; padding: .5rem .7rem; border-radius: .6rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-92400e,#92400e); font-size: .67rem; font-weight: 700; text-decoration: none; } .portal-login-invalid a .material-symbols-rounded { font-size: .95rem; line-height: 1; } .portal-login-footer { display: flex; align-items: center; justify-content: space-between; gap: .75rem; color: var(--ok-ink-94a3b8,#94a3b8); font-size: .61rem; } .portal-login-footer__security { display: inline-flex; align-items: center; gap: .28rem; } .portal-login-footer__security .material-symbols-rounded { font-size: .85rem; line-height: 1; } .portal-login-aside { position: relative; isolation: isolate; display: grid; min-width: 0; min-height: 100vh; min-height: 100dvh; place-items: center; overflow: hidden; padding: clamp(2.5rem, 6vw, 6rem); background: linear-gradient(145deg, var(--ok-surface-181b56,#181b56) 0%, var(--ok-surface-171a4d,#171a4d) 46%, var(--ok-surface-11153e,#11153e) 100%); color: var(--ok-ink-ffffff,#fff); } .portal-login-aside__grid { position: absolute; inset: 0; z-index: -3; opacity: .13; background-image: linear-gradient(var(--ok-surface-ffffff_a140,rgba(255,255,255,.14)) 1px, transparent 1px), linear-gradient(90deg, var(--ok-surface-ffffff_a140,rgba(255,255,255,.14)) 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(135deg, transparent 12%, #000 52%, transparent 94%); } .portal-login-aside__glow { position: absolute; z-index: -2; border-radius: 999px; pointer-events: none; } .portal-login-aside__glow--one { top: 7%; right: 8%; width: 18rem; height: 18rem; background: var(--ok-surface-4f4c8f_a280,rgba(79, 76, 143, .28)); filter: blur(55px); } .portal-login-aside__glow--two { left: 8%; bottom: 7%; width: 14rem; height: 14rem; background: var(--ok-surface-2563eb_a170,rgba(37, 99, 235, .17)); filter: blur(60px); } .portal-login-aside__content { display: grid; width: min(100%, 34rem); gap: clamp(2.6rem, 7vh, 4.8rem); } .portal-login-brand--aside .portal-login-brand__mark { background: linear-gradient(135deg, var(--ok-surface-6f6ab4,#6f6ab4), var(--ok-surface-4f7cff,#4f7cff)); box-shadow: 0 16px 32px -20px var(--ok-shadow-6078ff_a950,rgba(96, 120, 255, .95)); } .portal-login-brand--aside strong { color: var(--ok-ink-ffffff,#fff); font-size: 1.2rem; } .portal-login-brand--aside small { color: var(--ok-ink-aeb9dd,#aeb9dd); font-size: .72rem; } .portal-login-aside__message { display: grid; gap: .8rem; } .portal-login-aside__eyebrow { color: var(--ok-ink-aeb9dd,#aeb9dd); font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; } .portal-login-aside__message h2 { max-width: 32rem; margin: 0; color: var(--ok-ink-ffffff,#fff); font-size: clamp(2rem, 4vw, 3.15rem); font-weight: 700; line-height: 1.08; letter-spacing: -.045em; } .portal-login-aside__message p { max-width: 29rem; margin: 0; color: var(--ok-ink-b9c4df,#b9c4df); font-size: .84rem; line-height: 1.65; } .portal-login-aside__badge { display: inline-flex; width: fit-content; align-items: center; gap: .5rem; padding: .62rem .72rem; border: 1px solid var(--ok-line-ffffff_a110,rgba(255,255,255,.11)); border-radius: .72rem; background: var(--ok-surface-ffffff_a60,rgba(255,255,255,.06)); color: var(--ok-ink-cbd5eb,#cbd5eb); font-size: .67rem; font-weight: 700; backdrop-filter: blur(10px); } .portal-login-aside__badge .material-symbols-rounded { color: var(--ok-ink-8ad9b4,#8ad9b4); font-size: 1rem; line-height: 1; } .portal-login-body :is(a, button, input):focus-visible { outline: 3px solid var(--ok-line-2563eb_a220,rgba(37, 99, 235, .22)); outline-offset: 2px; } @media (max-width: 1020px) { .portal-login-shell { grid-template-columns: minmax(0, 1fr) minmax(25rem, .82fr); } .portal-login-aside { padding-inline: 2.5rem; } } @media (max-width: 860px) { .portal-login-shell { display: block; } .portal-login-main { min-height: 100vh; min-height: 100dvh; } .portal-login-aside { display: none; } .portal-login-brand--mobile { display: flex; } } @media (max-width: 520px) { .portal-login-main { padding: max(.9rem, env(safe-area-inset-top)) max(.9rem, env(safe-area-inset-right)) max(.9rem, env(safe-area-inset-bottom)) max(.9rem, env(safe-area-inset-left)); } .portal-login-main__content { padding-block: 1.5rem 2rem; } .portal-login-heading h1 { font-size: 1.65rem; } .portal-login-heading p { font-size: .75rem; } .portal-login-control { min-height: 3rem; } .portal-login-trusted { grid-template-columns: 2.25rem minmax(0, 1fr); padding: .6rem; } .portal-login-footer { align-items: flex-start; flex-direction: column; gap: .25rem; } .portal-login-back span:last-child { display: none; } } @media (prefers-reduced-motion: reduce) { .portal-login-body * { scroll-behavior: auto !important; transition: none !important; } } /* Infrastructure Topology Studio — Hotfix 8.6.0 */ .topology-index-page, .topology-studio-page { --topology-primary: var(--ok-ink-4f4c8f,#4f4c8f); --topology-secondary: var(--ok-ink-2563eb,#2563eb); --topology-heading: var(--ok-ink-1e293b,#1e293b); --topology-text: var(--ok-ink-64748b,#64748b); --topology-border: var(--ok-line-e2e8f0,#e2e8f0); --topology-panel: var(--ok-surface-ffffff,#fff); } .topology-index-page *, .topology-studio-page * { box-sizing: border-box; } .topology-index-metrics, .topology-studio-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; } .topology-index-metric, .topology-studio-metrics > article { display: grid; min-width: 0; grid-template-columns: 2.65rem minmax(0, 1fr); align-items: center; gap: .65rem; min-height: 5.65rem; padding: .78rem; border: 1px solid var(--ok-line-e2e8f0,var(--topology-border)); border-radius: .95rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 35px -34px var(--ok-shadow-0f172a_a550,rgba(15,23,42,.55)); } .topology-index-metric__icon, .topology-studio-metrics > article > .material-symbols-rounded { display: inline-grid; width: 2.65rem; height: 2.65rem; place-items: center; border-radius: .78rem; background: var(--ok-surface-f0eff9,#f0eff9); color: var(--ok-ink-4f4c8f,var(--topology-primary)); font-size: 1.12rem; line-height: 1; } .topology-index-metric__icon.is-blue, .topology-studio-metrics .material-symbols-rounded.is-blue { background:var(--ok-surface-eef5ff,#eef5ff); color:var(--ok-ink-2563eb,#2563eb); } .topology-index-metric__icon.is-green, .topology-studio-metrics .material-symbols-rounded.is-green { background:var(--ok-surface-ecfdf3,#ecfdf3); color:var(--ok-ink-15803d,#15803d); } .topology-index-metric__icon.is-amber, .topology-studio-metrics .material-symbols-rounded.is-amber { background:var(--ok-surface-fff7e8,#fff7e8); color:var(--ok-ink-b45309,#b45309); } .topology-index-metric div, .topology-studio-metrics article div { display:grid; min-width:0; gap:.05rem; } .topology-index-metric small, .topology-studio-metrics article small { color:var(--ok-ink-7b889b,#7b889b); font-size:.61rem; font-weight:800; } .topology-index-metric strong, .topology-studio-metrics article strong { color:var(--ok-ink-1e293b,var(--topology-heading)); font-size:1rem; font-weight:950; line-height:1.15; } .topology-index-metric span:not(.material-symbols-rounded) { overflow:hidden; color:var(--ok-ink-8a96a8,#8a96a8); font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; } .topology-index-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 22rem); gap: .8rem; align-items: start; } .topology-index-panel, .topology-connections-panel { min-width: 0; padding: .85rem; border: 1px solid var(--ok-line-e2e8f0,var(--topology-border)); border-radius: 1rem; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 16px 38px -36px var(--ok-shadow-0f172a_a580,rgba(15,23,42,.58)); } .topology-index-create { position: sticky; top: 5.4rem; } .topology-index-panel__head, .topology-connections-panel > header { display:flex; min-width:0; align-items:flex-start; justify-content:space-between; gap:.8rem; margin-bottom:.72rem; } .topology-index-panel__head > div, .topology-connections-panel > header > div { min-width:0; } .topology-index-panel__head span:first-child, .topology-connections-panel > header div > span { color:var(--ok-ink-4f4c8f,var(--topology-primary)); font-size:.59rem; font-weight:900; letter-spacing:.03em; } .topology-index-panel__head h2, .topology-connections-panel h2 { margin:.08rem 0 0; color:var(--ok-ink-1e293b,var(--topology-heading)); font-size:.86rem; font-weight:950; } .topology-index-panel__head p { margin:.14rem 0 0; color:var(--ok-ink-7b889b,#7b889b); font-size:.61rem; line-height:1.45; } .topology-index-count, .topology-connections-panel > header > span { flex:0 0 auto; padding:.28rem .48rem; border-radius:999px; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-607087,#607087); font-size:.56rem; font-weight:900; } .topology-map-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.62rem; } .topology-map-card { min-width:0; overflow:hidden; border:1px solid var(--ok-line-e4e9f0,#e4e9f0); border-radius:.9rem; background:var(--ok-surface-fbfcfe,#fbfcfe); transition:border-color .15s ease, transform .15s ease, box-shadow .15s ease; } .topology-map-card:hover { transform:translateY(-1px); border-color:var(--ok-line-cfcbe5,#cfcbe5); box-shadow:0 16px 30px -27px var(--ok-shadow-4f4c8f_a450,rgba(79,76,143,.45)); } .topology-map-card__open { display:grid; grid-template-columns:2.55rem minmax(0,1fr) 1.25rem; align-items:center; gap:.6rem; padding:.72rem; color:inherit; text-decoration:none; } .topology-map-card__icon { display:grid; width:2.55rem; height:2.55rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,var(--topology-primary)); font-size:1.08rem; } .topology-map-card__copy { display:grid; min-width:0; gap:.04rem; } .topology-map-card__copy small { overflow:hidden; color:var(--ok-ink-8290a4,#8290a4); font-size:.56rem; text-overflow:ellipsis; white-space:nowrap; } .topology-map-card__copy strong { overflow:hidden; color:var(--ok-ink-2c384b,#2c384b); font-size:.72rem; font-weight:950; text-overflow:ellipsis; white-space:nowrap; } .topology-map-card__copy span { overflow:hidden; color:var(--ok-ink-748197,#748197); font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; } .topology-map-card__arrow { color:var(--ok-ink-a0aabd,#a0aabd); font-size:1rem; } .topology-map-card__facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.02rem; margin:0 .72rem; overflow:hidden; border:1px solid var(--ok-line-e9edf3,#e9edf3); border-radius:.66rem; background:var(--ok-surface-ffffff,#fff); } .topology-map-card__facts span { padding:.45rem .28rem; border-right:1px solid var(--ok-line-edf1f5,#edf1f5); color:var(--ok-ink-7b889b,#7b889b); font-size:.55rem; text-align:center; } .topology-map-card__facts span:last-child { border-right:0; } .topology-map-card__facts b { display:block; color:var(--ok-ink-334155,#334155); font-size:.65rem; } .topology-map-card__footer { display:flex; align-items:center; gap:.4rem; padding:.62rem .72rem; } .topology-map-status,.topology-map-layout { display:inline-flex; align-items:center; gap:.28rem; padding:.25rem .4rem; border-radius:999px; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-64748b,#64748b); font-size:.53rem; font-weight:850; } .topology-map-status i { width:.38rem; height:.38rem; border-radius:50%; background:var(--ok-surface-94a3b8,#94a3b8); } .topology-map-status.is-active { background:var(--ok-surface-ecfdf3,#ecfdf3); color:var(--ok-ink-15803d,#15803d); }.topology-map-status.is-active i{background:var(--ok-surface-22c55e,#22c55e);} .topology-map-actions { display:flex; margin-left:auto; gap:.25rem; } .topology-index-form, .topology-inspector-form, .topology-tool-form { display:grid; min-width:0; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.58rem; } .topology-index-form label, .topology-inspector-form label, .topology-tool-form label { display:grid; min-width:0; gap:.25rem; } .topology-index-form label > span, .topology-inspector-form label > span, .topology-tool-form label > span { color:var(--ok-ink-526077,#526077); font-size:.59rem; font-weight:850; } .topology-index-form :is(input,select,textarea), .topology-inspector-form :is(input,select,textarea), .topology-tool-form :is(input,select,textarea) { width:100%; min-width:0; min-height:2.45rem; padding:.5rem .58rem; border:1px solid var(--ok-line-d6dee9,#d6dee9); border-radius:.64rem; outline:0; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-263247,#263247); font:inherit; font-size:.63rem; } .topology-index-form textarea { min-height:4.7rem; resize:vertical; } .topology-index-form :is(input,select,textarea):focus, .topology-inspector-form :is(input,select,textarea):focus, .topology-tool-form :is(input,select,textarea):focus { border-color:var(--ok-line-4f4c8f,var(--topology-primary)); box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a90,rgba(79,76,143,.09)); } .topology-index-form .is-wide, .topology-inspector-form .is-wide, .topology-tool-form .is-wide { grid-column:1/-1; } .topology-index-form__actions { display:flex; justify-content:flex-end; gap:.4rem; } .topology-index-empty { display:grid; grid-column:1/-1; grid-template-columns:2.6rem minmax(0,1fr); align-items:center; gap:.65rem; padding:1rem; border:1px dashed var(--ok-line-cdd6e2,#cdd6e2); border-radius:.82rem; background:var(--ok-surface-fafbfd,#fafbfd); } .topology-index-empty > .material-symbols-rounded { display:grid; width:2.6rem; height:2.6rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,var(--topology-primary)); } .topology-index-empty strong { color:var(--ok-ink-334155,#334155); font-size:.7rem; }.topology-index-empty p { margin:.1rem 0 0; color:var(--ok-ink-7b889b,#7b889b); font-size:.6rem; } .topology-studio { display:grid; min-width:0; grid-template-columns:minmax(0,1fr) minmax(18rem,20rem); gap:.72rem; align-items:start; } .topology-studio-main, .topology-studio-inspector { min-width:0; border:1px solid var(--ok-line-e2e8f0,var(--topology-border)); border-radius:1rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 16px 38px -36px var(--ok-shadow-0f172a_a580,rgba(15,23,42,.58)); } .topology-studio-main { overflow:hidden; } .topology-studio-inspector { position:sticky; top:5.4rem; min-height:26rem; padding:.78rem; } .topology-studio-toolbar { display:flex; min-width:0; align-items:center; justify-content:space-between; gap:.75rem; padding:.68rem .72rem; border-bottom:1px solid var(--ok-line-e9edf3,#e9edf3); } .topology-studio-toolbar__title { display:flex; min-width:0; align-items:center; gap:.5rem; } .topology-studio-toolbar__title > .material-symbols-rounded { display:grid; width:2.15rem; height:2.15rem; flex:0 0 2.15rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,var(--topology-primary)); font-size:1rem; } .topology-studio-toolbar__title div { min-width:0; }.topology-studio-toolbar__title strong,.topology-studio-toolbar__title small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.topology-studio-toolbar__title strong{color:var(--ok-ink-334155,#334155);font-size:.68rem;font-weight:950;}.topology-studio-toolbar__title small{margin-top:.06rem;color:var(--ok-ink-8794a8,#8794a8);font-size:.56rem;} .topology-studio-toolbar__controls { display:flex; min-width:0; align-items:center; justify-content:flex-end; gap:.35rem; } .topology-studio-search { display:grid; width:min(15rem,30vw); grid-template-columns:1.25rem minmax(0,1fr); align-items:center; min-height:2.25rem; padding:0 .52rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.62rem; background:var(--ok-surface-ffffff,#fff); } .topology-studio-search .material-symbols-rounded { color:var(--ok-ink-8a96a8,#8a96a8); font-size:.9rem; }.topology-studio-search input{width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ok-ink-334155,#334155);font:inherit;font-size:.6rem;} .topology-studio-toolbar__controls select { height:2.25rem; max-width:10.5rem; padding:0 .55rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.62rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-526077,#526077); font:inherit; font-size:.59rem; } .topology-studio-tool { display:grid; width:2.25rem; height:2.25rem; flex:0 0 2.25rem; place-items:center; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.62rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-64748b,#64748b); cursor:pointer; }.topology-studio-tool:hover,.topology-studio-tool.is-active{border-color:var(--ok-line-c9c4e4,#c9c4e4);background:var(--ok-surface-f5f3ff,#f5f3ff);color:var(--ok-ink-4f4c8f,var(--topology-primary));}.topology-studio-tool .material-symbols-rounded{font-size:1rem;} .topology-studio-canvas { position:relative; height:min(62vh,40rem); min-height:31rem; overflow:auto; background-color:var(--ok-surface-f8fafc,#f8fafc); background-image:linear-gradient(var(--ok-surface-e7ecf3,#e7ecf3) 1px,transparent 1px),linear-gradient(90deg,var(--ok-surface-e7ecf3,#e7ecf3) 1px,transparent 1px); background-size:24px 24px; touch-action:none; scrollbar-color:#cbd5e1 transparent; } .topology-studio-canvas.is-grid-hidden { background-image:none; } .topology-studio-stage { position:relative; width:1900px; height:1100px; } .topology-studio-links { position:absolute; inset:0; z-index:1; overflow:visible; pointer-events:none; } .topology-studio-link { stroke:var(--ok-ink-94a3b8,#94a3b8); stroke-width:3; stroke-linecap:round; cursor:pointer; pointer-events:stroke; transition:stroke-width .12s ease, opacity .12s ease, filter .12s ease; } .topology-studio-link:hover,.topology-studio-link.is-selected { stroke-width:6; filter:drop-shadow(0 2px 3px var(--ok-shadow-4f4c8f_a240,rgba(79,76,143,.24))); } .topology-studio-link.is-online{stroke:var(--ok-ink-22c55e,#22c55e);}.topology-studio-link.is-warning{stroke:var(--ok-ink-f59e0b,#f59e0b);stroke-dasharray:8 5;}.topology-studio-link.is-offline{stroke:var(--ok-ink-ef4444,#ef4444);stroke-dasharray:5 5;}.topology-studio-link.is-unknown{stroke:var(--ok-ink-94a3b8,#94a3b8);stroke-dasharray:3 5;}.topology-studio-link.is-selected{stroke:var(--ok-ink-4f4c8f,var(--topology-primary));}.topology-studio-link.is-filtered-out{opacity:.06;pointer-events:none;} .topology-studio-node { position:absolute; z-index:2; display:grid; width:10.25rem; min-height:4.85rem; grid-template-columns:2.35rem minmax(0,1fr) .55rem; align-items:center; gap:.55rem; padding:.58rem; border:1px solid var(--ok-line-d4dce7,#d4dce7); border-radius:.82rem; background:var(--ok-surface-ffffff_a980,rgba(255,255,255,.98)); box-shadow:0 14px 28px -24px var(--ok-shadow-0f172a_a600,rgba(15,23,42,.6)); cursor:grab; user-select:none; transition:border-color .12s ease, box-shadow .12s ease, opacity .12s ease, transform .12s ease; } .topology-studio-node:hover { border-color:var(--ok-line-bbb6dc,#bbb6dc); box-shadow:0 16px 30px -23px var(--ok-shadow-4f4c8f_a500,rgba(79,76,143,.5)); } .topology-studio-node.is-selected { z-index:3; border-color:var(--ok-line-4f4c8f,var(--topology-primary)); box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a110,rgba(79,76,143,.11)),0 18px 32px -24px var(--ok-shadow-4f4c8f_a580,rgba(79,76,143,.58)); } .topology-studio-node.is-dragging { z-index:5; cursor:grabbing; transform:scale(1.015); } .topology-studio-node.is-filtered-out { opacity:.12; pointer-events:none; } .topology-studio-node__icon { display:grid; width:2.35rem; height:2.35rem; place-items:center; border-radius:.7rem; background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,var(--topology-primary)); font-size:1.08rem; line-height:1; } .topology-studio-node__copy { display:grid; min-width:0; gap:.03rem; }.topology-studio-node__copy strong,.topology-studio-node__copy small,.topology-studio-node__copy span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.topology-studio-node__copy strong{color:var(--ok-ink-2e3a4e,#2e3a4e);font-size:.66rem;font-weight:950;}.topology-studio-node__copy small{color:var(--ok-ink-66758a,#66758a);font-size:.58rem;}.topology-studio-node__copy span{color:var(--ok-ink-98a3b2,#98a3b2);font-size:.52rem;} .topology-studio-node__status { width:.5rem; height:.5rem; border-radius:50%; background:var(--ok-surface-94a3b8,#94a3b8); box-shadow:0 0 0 .18rem var(--ok-shadow-f1f5f9,#f1f5f9); }.topology-studio-node__status.is-online{background:var(--ok-surface-22c55e,#22c55e);box-shadow:0 0 0 .18rem var(--ok-shadow-dcfce7,#dcfce7);}.topology-studio-node__status.is-warning{background:var(--ok-surface-f59e0b,#f59e0b);box-shadow:0 0 0 .18rem var(--ok-shadow-fef3c7,#fef3c7);}.topology-studio-node__status.is-offline{background:var(--ok-surface-ef4444,#ef4444);box-shadow:0 0 0 .18rem var(--ok-shadow-fee2e2,#fee2e2);} .topology-studio-node.is-warning{border-color:var(--ok-line-f2cc88,#f2cc88);}.topology-studio-node.is-offline{border-color:var(--ok-line-f4b4b4,#f4b4b4);}.topology-studio-node.is-unknown{opacity:.8;} .topology-studio-footer { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.55rem .7rem; border-top:1px solid var(--ok-line-e9edf3,#e9edf3); background:var(--ok-surface-ffffff,#fff); } .topology-studio-legend { display:flex; flex-wrap:wrap; gap:.65rem; }.topology-studio-legend span,.topology-studio-hint{display:flex;align-items:center;gap:.3rem;color:var(--ok-ink-718096,#718096);font-size:.55rem;}.topology-studio-legend i{width:.45rem;height:.45rem;border-radius:50%;background:var(--ok-surface-94a3b8,#94a3b8);}.topology-studio-legend i.is-online{background:var(--ok-surface-22c55e,#22c55e)}.topology-studio-legend i.is-warning{background:var(--ok-surface-f59e0b,#f59e0b)}.topology-studio-legend i.is-offline{background:var(--ok-surface-ef4444,#ef4444)}.topology-studio-hint .material-symbols-rounded{color:var(--ok-ink-4f4c8f,var(--topology-primary));font-size:.9rem;} .topology-inspector-head { display:grid; grid-template-columns:2.45rem minmax(0,1fr) 1.9rem; align-items:center; gap:.55rem; padding-bottom:.68rem; border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5); } .topology-inspector-head__icon { display:grid; width:2.45rem; height:2.45rem; place-items:center; border-radius:.72rem; background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,var(--topology-primary)); font-size:1.08rem; }.topology-inspector-head__icon.is-link{background:var(--ok-surface-eef5ff,#eef5ff);color:var(--ok-ink-2563eb,#2563eb);} .topology-inspector-head div{display:grid;min-width:0;gap:.03rem}.topology-inspector-head small{color:var(--ok-ink-4f4c8f,var(--topology-primary));font-size:.54rem;font-weight:900}.topology-inspector-head strong,.topology-inspector-head span:not(.material-symbols-rounded){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topology-inspector-head strong{color:var(--ok-ink-334155,#334155);font-size:.69rem;font-weight:950}.topology-inspector-head span:not(.material-symbols-rounded){color:var(--ok-ink-8491a5,#8491a5);font-size:.55rem}.topology-inspector-head>button{display:grid;width:1.9rem;height:1.9rem;place-items:center;border:0;border-radius:.55rem;background:var(--ok-surface-f8fafc,#f8fafc);color:var(--ok-ink-7b889b,#7b889b);cursor:pointer}.topology-inspector-head>button .material-symbols-rounded{font-size:.9rem} .topology-inspector-form { margin-top:.7rem; } .topology-inspector-actions { display:flex; justify-content:space-between; gap:.4rem; padding-top:.1rem; } .topology-danger-button { display:inline-flex; align-items:center; justify-content:center; gap:.25rem; min-height:2.35rem; padding:.45rem .58rem; border:1px solid var(--ok-line-fecaca,#fecaca); border-radius:.62rem; background:var(--ok-surface-fff7f7,#fff7f7); color:var(--ok-ink-b91c1c,#b91c1c); font:inherit; font-size:.58rem; font-weight:900; cursor:pointer; }.topology-danger-button .material-symbols-rounded{font-size:.88rem} .topology-inspector-readonly { display:grid; gap:.04rem; margin:.65rem 0 0; }.topology-inspector-readonly div{display:flex;justify-content:space-between;gap:.5rem;padding:.52rem .05rem;border-bottom:1px solid var(--ok-line-edf1f5,#edf1f5)}.topology-inspector-readonly dt,.topology-inspector-readonly dd{margin:0;font-size:.59rem}.topology-inspector-readonly dt{color:var(--ok-ink-7b889b,#7b889b)}.topology-inspector-readonly dd{color:var(--ok-ink-334155,#334155);font-weight:900;text-align:right} .topology-inspector-empty { display:grid; min-height:24rem; place-items:center; align-content:center; gap:.35rem; padding:1rem; text-align:center; }.topology-inspector-empty>.material-symbols-rounded{display:grid;width:3.1rem;height:3.1rem;place-items:center;border-radius:.9rem;background:var(--ok-surface-f0eff9,#f0eff9);color:var(--ok-ink-4f4c8f,var(--topology-primary));font-size:1.35rem}.topology-inspector-empty strong{margin-top:.18rem;color:var(--ok-ink-334155,#334155);font-size:.75rem;font-weight:950}.topology-inspector-empty p{max-width:15rem;margin:.05rem 0;color:var(--ok-ink-7b889b,#7b889b);font-size:.59rem;line-height:1.5}.topology-inspector-empty__tips{display:flex;flex-wrap:wrap;justify-content:center;gap:.3rem;margin-top:.25rem}.topology-inspector-empty__tips span{padding:.28rem .36rem;border-radius:.5rem;background:var(--ok-surface-f8fafc,#f8fafc);color:var(--ok-ink-718096,#718096);font-size:.52rem}.topology-inspector-empty__tips kbd{font:inherit;font-weight:900;color:var(--ok-ink-4f4c8f,#4f4c8f)} .topology-tools-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.72rem; } .topology-tool-card { overflow:hidden; border:1px solid var(--ok-line-e2e8f0,var(--topology-border)); border-radius:.92rem; background:var(--ok-surface-ffffff,#fff); }.topology-tool-card summary{display:grid;grid-template-columns:2.25rem minmax(0,1fr) 1rem;align-items:center;gap:.55rem;padding:.68rem;cursor:pointer;list-style:none}.topology-tool-card summary::-webkit-details-marker{display:none}.topology-tool-card summary>span:first-child{display:grid;width:2.25rem;height:2.25rem;place-items:center;border-radius:.65rem;background:var(--ok-surface-f0eff9,#f0eff9);color:var(--ok-ink-4f4c8f,var(--topology-primary));font-size:1rem}.topology-tool-card summary div{display:grid;min-width:0;gap:.03rem}.topology-tool-card summary strong{color:var(--ok-ink-334155,#334155);font-size:.67rem;font-weight:950}.topology-tool-card summary small{color:var(--ok-ink-8491a5,#8491a5);font-size:.55rem}.topology-tool-card summary>span:last-child{color:var(--ok-ink-8794a8,#8794a8);font-size:.9rem;transition:transform .15s ease}.topology-tool-card[open] summary>span:last-child{transform:rotate(180deg)}.topology-tool-form{padding:.72rem;border-top:1px solid var(--ok-line-edf1f5,#edf1f5)} .topology-connections-panel > header { margin-bottom:.6rem; } .topology-connection-list { display:grid; gap:.35rem; } .topology-connection-row { display:grid; width:100%; min-width:0; grid-template-columns:2.15rem minmax(0,1fr) auto 1rem; align-items:center; gap:.55rem; padding:.56rem; border:1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius:.72rem; background:var(--ok-surface-fbfcfe,#fbfcfe); color:inherit; font:inherit; text-align:left; cursor:pointer; transition:border-color .12s ease,background .12s ease; }.topology-connection-row:hover,.topology-connection-row.is-selected{border-color:var(--ok-line-c9c4e4,#c9c4e4);background:var(--ok-surface-faf9fe,#faf9fe)}.topology-connection-row__icon{display:grid;width:2.15rem;height:2.15rem;place-items:center;border-radius:.62rem;background:var(--ok-surface-eef5ff,#eef5ff);color:var(--ok-ink-2563eb,#2563eb);font-size:.95rem}.topology-connection-row>div{min-width:0}.topology-connection-row strong,.topology-connection-row small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topology-connection-row strong{color:var(--ok-ink-334155,#334155);font-size:.64rem;font-weight:900}.topology-connection-row small{margin-top:.06rem;color:var(--ok-ink-8390a3,#8390a3);font-size:.55rem}.topology-link-status{padding:.24rem .38rem;border-radius:999px;background:var(--ok-surface-f1f5f9,#f1f5f9);color:var(--ok-ink-64748b,#64748b);font-size:.52rem;font-weight:900;text-transform:capitalize}.topology-link-status.is-online{background:var(--ok-surface-dcfce7,#dcfce7);color:var(--ok-ink-166534,#166534)}.topology-link-status.is-degraded{background:var(--ok-surface-fef3c7,#fef3c7);color:var(--ok-ink-92400e,#92400e)}.topology-link-status.is-offline{background:var(--ok-surface-fee2e2,#fee2e2);color:var(--ok-ink-991b1b,#991b1b)}.topology-connection-row__arrow{color:var(--ok-ink-a1abba,#a1abba);font-size:.9rem} @media (max-width: 1180px) { .topology-index-layout { grid-template-columns:minmax(0,1fr) minmax(17rem,19rem); } .topology-map-grid { grid-template-columns:1fr; } .topology-studio { grid-template-columns:minmax(0,1fr) 18rem; } .topology-studio-toolbar { align-items:flex-start; flex-direction:column; } .topology-studio-toolbar__controls { width:100%; justify-content:flex-start; } .topology-studio-search { width:min(100%,18rem); } } @media (max-width: 960px) { .topology-index-metrics,.topology-studio-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); } .topology-index-layout,.topology-studio { grid-template-columns:1fr; } .topology-index-create,.topology-studio-inspector { position:static; } .topology-studio-inspector { min-height:0; } .topology-inspector-empty { min-height:12rem; } } @media (max-width: 680px) { .topology-index-metrics,.topology-studio-metrics,.topology-tools-grid { grid-template-columns:1fr; } .topology-index-form,.topology-inspector-form,.topology-tool-form { grid-template-columns:1fr; } .topology-index-form .is-wide,.topology-inspector-form .is-wide,.topology-tool-form .is-wide { grid-column:auto; } .topology-studio-toolbar__controls { display:grid; grid-template-columns:minmax(0,1fr) auto auto; } .topology-studio-search { width:100%; grid-column:1/-1; } .topology-studio-toolbar__controls select { max-width:none; } .topology-studio-canvas { min-height:26rem; height:58vh; } .topology-studio-footer { align-items:flex-start; flex-direction:column; } .topology-connection-row { grid-template-columns:2.15rem minmax(0,1fr) auto; }.topology-link-status{grid-column:2;justify-self:start}.topology-connection-row__arrow{grid-column:3;grid-row:1} } @media (prefers-reduced-motion: reduce) { .topology-index-page *, .topology-studio-page * { scroll-behavior:auto !important; transition:none !important; } } /* Infrastructure Topology Studio Advanced — Hotfix 8.6.1 */ .topology-studio--advanced { --topology-command-bg: var(--ok-surface-f8fafc,#f8fafc); --topology-command-border: var(--ok-line-e3e8ef,#e3e8ef); } .topology-studio-commandbar { position: relative; z-index: 8; display: flex; min-width: 0; align-items: center; gap: .42rem; padding: .46rem .62rem; border-bottom: 1px solid var(--ok-line-e9edf3,#e9edf3); background: var(--ok-surface-fbfcfe,#fbfcfe); overflow: visible; } .topology-command-group { position: relative; display: flex; min-width: 0; align-items: center; gap: .28rem; padding-right: .38rem; border-right: 1px solid var(--ok-line-e8edf3,#e8edf3); } .topology-command-group:last-child, .topology-command-group--end { border-right: 0; } .topology-command-group--end { margin-left: auto; padding-right: 0; } .topology-command-label { color:var(--ok-ink-7b889b,#7b889b); font-size:.54rem; font-weight:900; text-transform:uppercase; letter-spacing:.04em; } .topology-command-group select { height:2.05rem; max-width:8.8rem; padding:0 .48rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.58rem; outline:0; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-526077,#526077); font:inherit; font-size:.56rem; } .topology-command-group select:focus { border-color:var(--ok-line-4f4c8f,var(--topology-primary)); box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a80,rgba(79,76,143,.08)); } .topology-command-button, .topology-command-icon { display: inline-flex; min-height: 2.05rem; align-items: center; justify-content: center; gap: .28rem; padding: 0 .48rem; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: .58rem; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-5d6a7e,#5d6a7e); font: inherit; font-size: .56rem; font-weight: 850; cursor: pointer; transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease; } .topology-command-icon { width:2.05rem; padding:0; } .topology-command-button:hover, .topology-command-icon:hover { border-color:var(--ok-line-c8c4e4,#c8c4e4); background:var(--ok-surface-faf9fe,#faf9fe); color:var(--ok-ink-4f4c8f,var(--topology-primary)); } .topology-command-button.is-primary { border-color:var(--ok-line-d4d0ef,#d4d0ef); background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,var(--topology-primary)); } .topology-command-button.is-active { border-color:var(--ok-line-4f4c8f,var(--topology-primary)); background:var(--ok-surface-4f4c8f,#4f4c8f); color:var(--ok-ink-ffffff,#fff); } .topology-command-button:disabled, .topology-command-icon:disabled { opacity:.38; cursor:not-allowed; transform:none; } .topology-command-button .material-symbols-rounded, .topology-command-icon .material-symbols-rounded { font-size:.88rem; line-height:1; } .topology-command-selection { opacity:.72; } .topology-command-selection:has(.topology-selection-count:not(:empty)) { opacity:1; } .topology-selection-count { min-width:5.7rem; padding:.3rem .42rem; border-radius:999px; background:var(--ok-surface-eef2ff,#eef2ff); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.53rem; font-weight:900; text-align:center; } .topology-overlay-menu, .topology-export-menu { position:relative; } .topology-overlay-popover { position:absolute; top:calc(100% + .35rem); right:0; z-index:30; display:grid; min-width:10.8rem; gap:.16rem; padding:.34rem; border:1px solid var(--ok-line-dde4ee,#dde4ee); border-radius:.72rem; background:var(--ok-surface-ffffff,#fff); box-shadow:0 20px 45px -24px var(--ok-shadow-0f172a_a420,rgba(15,23,42,.42)); } .topology-overlay-popover[hidden] { display:none; } .topology-overlay-popover button { display:flex; width:100%; align-items:center; gap:.42rem; min-height:2rem; padding:.35rem .44rem; border:0; border-radius:.5rem; background:transparent; color:var(--ok-ink-5f6c80,#5f6c80); font:inherit; font-size:.57rem; font-weight:800; text-align:left; cursor:pointer; } .topology-overlay-popover button:hover { background:var(--ok-surface-f8fafc,#f8fafc); color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-overlay-popover button.is-active { background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-overlay-popover .material-symbols-rounded { font-size:.9rem; line-height:1; } .topology-studio-statusbar { display:flex; align-items:center; gap:.35rem; min-height:2rem; padding:.35rem .68rem; border-bottom:1px solid var(--ok-line-e9edf3,#e9edf3); background:linear-gradient(90deg,var(--ok-surface-f9f8fe,#f9f8fe),var(--ok-surface-fbfdff,#fbfdff)); color:var(--ok-ink-718096,#718096); font-size:.54rem; } .topology-studio-statusbar > .material-symbols-rounded { color:var(--ok-ink-4f4c8f,var(--topology-primary)); font-size:.88rem; line-height:1; } .topology-studio-node { overflow: visible; min-height: 5rem; } .topology-studio-node.is-multi-selected { border-color:var(--ok-line-8b84c7,#8b84c7); box-shadow:0 0 0 2px var(--ok-shadow-4f4c8f_a90,rgba(79,76,143,.09)),0 16px 28px -24px var(--ok-shadow-4f4c8f_a550,rgba(79,76,143,.55)); } .topology-studio-node.is-link-source { border-color:var(--ok-line-2563eb,#2563eb); box-shadow:0 0 0 4px var(--ok-shadow-2563eb_a100,rgba(37,99,235,.10)),0 18px 32px -24px var(--ok-shadow-2563eb_a550,rgba(37,99,235,.55)); } .topology-studio.is-connect-mode .topology-studio-node { cursor:crosshair; } .topology-studio.is-link-dragging .topology-studio-node { cursor:crosshair; } .topology-node-observability { position:absolute; top:-.48rem; right:.55rem; z-index:4; display:flex; gap:.22rem; pointer-events:none; } .topology-node-observability__badge { display:inline-flex; min-height:1.05rem; align-items:center; gap:.15rem; padding:.16rem .28rem; border:1px solid var(--ok-line-dbe7e3,#dbe7e3); border-radius:999px; background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-15803d,#15803d); font-size:.46rem; font-weight:900; box-shadow:0 4px 12px -8px var(--ok-shadow-0f172a_a350,rgba(15,23,42,.35)); } .topology-node-observability__badge .material-symbols-rounded { font-size:.62rem; line-height:1; } .topology-node-observability__badge.is-alert { border-color:var(--ok-line-fde1b3,#fde1b3); background:var(--ok-surface-fff7e8,#fff7e8); color:var(--ok-ink-b45309,#b45309); } .topology-node-observability__badge.is-alert.is-critical, .topology-node-observability__badge.is-alert.is-high { border-color:var(--ok-line-fecaca,#fecaca); background:var(--ok-surface-fef2f2,#fef2f2); color:var(--ok-ink-b91c1c,#b91c1c); } .topology-node-ports { position:absolute; left:.5rem; right:.5rem; bottom:-.72rem; z-index:5; display:flex; min-width:0; justify-content:center; gap:.2rem; opacity:0; pointer-events:none; transform:translateY(-.12rem); transition:opacity .12s ease, transform .12s ease; } .topology-studio-node:hover .topology-node-ports, .topology-studio-node.is-selected .topology-node-ports, .topology-studio-node.is-multi-selected .topology-node-ports, .topology-studio.is-connect-mode .topology-node-ports, .topology-studio.is-link-dragging .topology-node-ports { opacity:1; pointer-events:auto; transform:none; } .topology-node-port { display:inline-flex; max-width:4.5rem; min-height:1.25rem; align-items:center; gap:.18rem; padding:.14rem .28rem; border:1px solid var(--ok-line-d2d9e5,#d2d9e5); border-radius:999px; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-5f6d81,#5f6d81); font-size:.45rem; font-weight:850; cursor:crosshair; box-shadow:0 5px 14px -10px var(--ok-shadow-0f172a_a450,rgba(15,23,42,.45)); } .topology-node-port:hover { border-color:var(--ok-line-7f79bd,#7f79bd); color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-node-port i { width:.42rem; height:.42rem; flex:0 0 .42rem; border:2px solid var(--ok-line-ffffff,#fff); border-radius:50%; background:var(--ok-surface-4f4c8f,#4f4c8f); box-shadow:0 0 0 1px var(--ok-shadow-4f4c8f,#4f4c8f); } .topology-node-port b { overflow:hidden; font:inherit; font-weight:900; text-overflow:ellipsis; white-space:nowrap; } .topology-node-port.is-generic { color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-studio-link-preview { stroke:var(--ok-ink-2563eb,#2563eb); stroke-width:3; stroke-dasharray:7 5; stroke-linecap:round; pointer-events:none; filter:drop-shadow(0 2px 3px var(--ok-shadow-2563eb_a220,rgba(37,99,235,.22))); } .topology-studio-stage.is-overlay-ip-hidden [data-topology-overlay-item="ip"], .topology-studio-stage.is-overlay-vlan-hidden [data-topology-overlay-item="vlan"], .topology-studio-stage.is-overlay-ports-hidden [data-topology-overlay-item="ports"], .topology-studio-stage.is-overlay-telemetry-hidden [data-topology-overlay-item="telemetry"], .topology-studio-stage.is-overlay-alerts-hidden [data-topology-overlay-item="alerts"] { display:none !important; } .topology-multiselect-card { display:grid; grid-template-columns:2.25rem minmax(0,1fr); align-items:center; gap:.5rem; margin-bottom:.65rem; padding:.55rem; border:1px solid var(--ok-line-d8d5ec,#d8d5ec); border-radius:.72rem; background:var(--ok-surface-f8f7fd,#f8f7fd); } .topology-multiselect-card[hidden] { display:none; } .topology-multiselect-card > .material-symbols-rounded { display:grid; width:2.25rem; height:2.25rem; place-items:center; border-radius:.62rem; background:var(--ok-surface-eeecf8,#eeecf8); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:1rem; } .topology-multiselect-card div { display:grid; min-width:0; gap:.04rem; } .topology-multiselect-card strong { color:var(--ok-ink-334155,#334155); font-size:.65rem; font-weight:950; } .topology-multiselect-card small { color:var(--ok-ink-7b889b,#7b889b); font-size:.54rem; line-height:1.35; } .topology-inspector-observability { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.38rem; margin-top:.58rem; } .topology-inspector-observability > div { display:grid; min-width:0; grid-template-columns:1.9rem minmax(0,1fr); align-items:center; gap:.4rem; padding:.48rem; border:1px solid var(--ok-line-dce8e3,#dce8e3); border-radius:.66rem; background:var(--ok-surface-f5fcf8,#f5fcf8); } .topology-inspector-observability > div.is-alert { border-color:var(--ok-line-f3ddbd,#f3ddbd); background:var(--ok-surface-fffaf1,#fffaf1); } .topology-inspector-observability > div > .material-symbols-rounded { display:grid; width:1.9rem; height:1.9rem; place-items:center; border-radius:.55rem; background:var(--ok-surface-dcfce7,#dcfce7); color:var(--ok-ink-15803d,#15803d); font-size:.9rem; } .topology-inspector-observability > div.is-alert > .material-symbols-rounded { background:var(--ok-surface-fef3c7,#fef3c7); color:var(--ok-ink-b45309,#b45309); } .topology-inspector-observability div div { display:grid; min-width:0; gap:.02rem; } .topology-inspector-observability small { color:var(--ok-ink-7b889b,#7b889b); font-size:.49rem; font-weight:800; } .topology-inspector-observability strong { color:var(--ok-ink-334155,#334155); font-size:.59rem; font-weight:950; } .topology-inspector-observability span:not(.material-symbols-rounded) { overflow:hidden; color:var(--ok-ink-8a96a8,#8a96a8); font-size:.49rem; text-overflow:ellipsis; white-space:nowrap; } .topology-tools-grid--advanced { grid-template-columns:repeat(2,minmax(0,1fr)); } .topology-versioning-panel, .topology-template-panel { display:grid; gap:.6rem; padding:.72rem; border-top:1px solid var(--ok-line-edf1f5,#edf1f5); } .topology-snapshot-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:.4rem; } .topology-snapshot-form input { min-width:0; min-height:2.4rem; padding:.48rem .58rem; border:1px solid var(--ok-line-d6dee9,#d6dee9); border-radius:.64rem; outline:0; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-263247,#263247); font:inherit; font-size:.6rem; } .topology-snapshot-form input:focus { border-color:var(--ok-line-4f4c8f,var(--topology-primary)); box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a80,rgba(79,76,143,.08)); } .topology-snapshot-list, .topology-template-list { display:grid; gap:.3rem; max-height:15rem; overflow:auto; } .topology-snapshot-row, .topology-template-row { display:grid; min-width:0; grid-template-columns:1.85rem minmax(0,1fr) 1.9rem; align-items:center; gap:.42rem; padding:.42rem; border:1px solid var(--ok-line-e7ebf1,#e7ebf1); border-radius:.62rem; background:var(--ok-surface-fbfcfe,#fbfcfe); } .topology-snapshot-row > .material-symbols-rounded, .topology-template-row > .material-symbols-rounded { display:grid; width:1.85rem; height:1.85rem; place-items:center; border-radius:.52rem; background:var(--ok-surface-f0eff9,#f0eff9); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.86rem; } .topology-snapshot-row div, .topology-template-row div { display:grid; min-width:0; gap:.03rem; } .topology-snapshot-row strong, .topology-template-row strong { overflow:hidden; color:var(--ok-ink-334155,#334155); font-size:.58rem; font-weight:900; text-overflow:ellipsis; white-space:nowrap; } .topology-snapshot-row small, .topology-template-row small { overflow:hidden; color:var(--ok-ink-8491a5,#8491a5); font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; } .topology-snapshot-row button, .topology-template-row button { display:grid; width:1.9rem; height:1.9rem; place-items:center; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.52rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-4f4c8f,#4f4c8f); cursor:pointer; } .topology-snapshot-row button:hover, .topology-template-row button:hover { border-color:var(--ok-line-c7c2df,#c7c2df); background:var(--ok-surface-f8f7fd,#f8f7fd); } .topology-snapshot-row button .material-symbols-rounded, .topology-template-row button .material-symbols-rounded { font-size:.84rem; } .topology-template-form { padding:0; border:0; } .topology-tool-empty { margin:0; padding:.55rem; border:1px dashed var(--ok-line-d8dee8,#d8dee8); border-radius:.6rem; color:var(--ok-ink-8491a5,#8491a5); font-size:.54rem; text-align:center; } @media (max-width: 1320px) { .topology-studio-commandbar { flex-wrap:wrap; } .topology-command-group--end { margin-left:0; } } @media (max-width: 960px) { .topology-studio-commandbar { align-items:flex-start; } .topology-command-group { flex-wrap:wrap; } .topology-tools-grid--advanced { grid-template-columns:1fr; } } @media (max-width: 680px) { .topology-studio-commandbar { display:grid; grid-template-columns:1fr; gap:.35rem; } .topology-command-group { width:100%; border-right:0; padding-right:0; } .topology-command-group--end { justify-content:flex-start; } .topology-command-label { min-width:2.5rem; } .topology-selection-count { margin-right:auto; } .topology-studio-statusbar { align-items:flex-start; } .topology-node-ports { left:.25rem; right:.25rem; justify-content:flex-start; overflow-x:auto; } .topology-snapshot-form { grid-template-columns:1fr; } .topology-inspector-observability { grid-template-columns:1fr; } } @media print { body.topology-printing * { visibility:hidden !important; } body.topology-printing .topology-studio-main, body.topology-printing .topology-studio-main * { visibility:visible !important; } body.topology-printing .topology-studio-main { position:absolute; inset:0; width:100%; border:0; box-shadow:none; } body.topology-printing .topology-studio-toolbar, body.topology-printing .topology-studio-commandbar, body.topology-printing .topology-studio-statusbar, body.topology-printing .topology-studio-footer { display:none !important; } body.topology-printing .topology-studio-canvas { height:auto; min-height:0; overflow:visible; background:var(--ok-surface-ffffff,#fff); } body.topology-printing .topology-studio-stage { transform:scale(.72); transform-origin:top left; } } /* Foundation v1 — shared semantic tokens and components. Keep this block last. */ :root { --ds-brand:var(--ok-ink-4f4c8f,#4f4c8f); --ds-brand-hover:var(--ok-surface-413e78,#413e78); --ds-brand-soft:var(--ok-surface-eeedf7,#eeedf7); --ds-link:var(--ok-ink-2563eb,#2563eb); --ds-canvas:var(--ok-surface-f6f7fb,#f6f7fb); --ds-surface:var(--ok-surface-ffffff,#fff); --ds-surface-muted:var(--ok-surface-f1f5f9,#f1f5f9); --ds-text:var(--ok-ink-172033,#172033); --ds-muted:var(--ok-ink-526176,#526176); --ds-border:var(--ok-line-d8dee8,#d8dee8); --ds-control-border:var(--ok-line-7c889b,#7c889b); --ds-focus:var(--ok-ink-2563eb,#2563eb); --ds-success:var(--ok-ink-166534,#166534); --ds-success-soft:var(--ok-surface-f0fdf4,#f0fdf4); --ds-warning:var(--ok-ink-854d0e,#854d0e); --ds-warning-soft:var(--ok-surface-fefce8,#fefce8); --ds-danger:var(--ok-ink-b91c1c,#b91c1c); --ds-danger-soft:var(--ok-surface-fef2f2,#fef2f2); --ds-info:var(--ok-ink-1e40af,#1e40af); --ds-info-soft:var(--ok-surface-eff6ff,#eff6ff); --ds-neutral:var(--ok-ink-475569,#475569); --ds-neutral-soft:var(--ok-surface-f1f5f9,#f1f5f9); --ds-space-1:.25rem; --ds-space-2:.5rem; --ds-space-3:.75rem; --ds-space-4:1rem; --ds-space-6:1.5rem; --ds-space-8:2rem; --ds-radius-control:.5rem; --ds-radius-card:.75rem; --ds-radius-overlay:1rem; --ds-text-body:.875rem; --ds-text-meta:.75rem; --ds-control-height:2.5rem; --ds-shadow:0 1px 2px var(--ok-shadow-172033_a40,rgb(23 32 51 / 4%)); } .app-body { background:var(--ok-surface-f6f7fb,var(--ds-canvas)); color:var(--ok-ink-172033,var(--ds-text)); } .app-body :focus-visible { outline:3px solid var(--ok-line-2563eb,var(--ds-focus)); outline-offset:3px; } .app-body .material-symbols-rounded { flex-shrink:0; } .app-body .app-nav-section__label { color:var(--ok-ink-526176,var(--ds-muted)); font-size:var(--ds-text-meta); } .app-body .app-nav-item__copy strong,.app-body .app-nav-subitem { font-size:var(--ds-text-body); line-height:1.5; } .app-body .app-nav-item,.app-body .app-nav-subitem { min-height:2.5rem; } .app-body .app-nav-item--active { border-inline-start:3px solid var(--ok-line-4f4c8f,var(--ds-brand)); background:var(--ok-surface-eeedf7,var(--ds-brand-soft)); } .app-body .app-nav-subitem--active { font-weight:700; text-decoration:underline; text-underline-offset:4px; } .ds-page { display:grid; min-width:0; gap:var(--ds-space-6); } .ds-page__body { display:grid; min-width:0; gap:var(--ds-space-6); } .ds-page--form { max-width:60rem; margin-inline:auto; } .ds-page-header { flex-wrap:wrap; overflow:visible; padding:var(--ds-space-6); border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:var(--ds-radius-card); background:var(--ok-surface-ffffff,var(--ds-surface)); box-shadow:var(--ds-shadow); } .ds-page-header__content { flex:1 1 20rem; min-width:0; } .ds-page-header h1 { font-size:1.5rem; line-height:2rem; font-weight:600; letter-spacing:normal; color:var(--ok-ink-172033,var(--ds-text)); overflow-wrap:anywhere; } .ds-page-header__description { font-size:var(--ds-text-body); line-height:1.6; color:var(--ok-ink-526176,var(--ds-muted)); } .ds-eyebrow { font-size:var(--ds-text-meta); font-weight:600; letter-spacing:.04em; color:var(--ok-ink-4f4c8f,var(--ds-brand)); } .ds-page-header__actions { flex:0 1 auto; min-width:0; max-width:100%; gap:var(--ds-space-2); } .ds-page-header__icon,.ds-panel__icon { background:var(--ok-surface-eeedf7,var(--ds-brand-soft)); color:var(--ok-ink-4f4c8f,var(--ds-brand)); border-radius:var(--ds-radius-control); } .ds-button { box-sizing:border-box; max-width:100%; min-height:var(--ds-control-height); height:auto; padding:.5rem 1rem; border-radius:var(--ds-radius-control); font-size:var(--ds-text-body); line-height:1.5; font-weight:600; gap:var(--ds-space-2); white-space:normal; text-align:center; box-shadow:none; transition:background-color 120ms ease; } .ds-button>span { min-width:0; overflow-wrap:anywhere; } .ds-button:hover { translate:none; transform:none; } .ds-button .material-symbols-rounded { display:flex; align-items:center; justify-content:center; font-size:1.25rem; flex:0 0 auto; } .ds-button--primary { background:var(--ok-surface-4f4c8f,var(--ds-brand)); color:var(--ok-ink-ffffff,#fff); } .ds-button--primary:hover { background:var(--ok-surface-413e78,var(--ds-brand-hover)); } .ds-button--secondary { color:var(--ok-ink-172033,var(--ds-text)); border-color:var(--ok-line-7c889b,var(--ds-control-border)); background:var(--ok-surface-ffffff,var(--ds-surface)); } .ds-button--secondary:hover,.ds-button--ghost:hover { background:var(--ok-surface-f1f5f9,var(--ds-surface-muted)); } .ds-button--ghost { color:var(--ok-ink-526176,var(--ds-muted)); background:transparent; } .ds-button--danger { color:var(--ok-ink-b91c1c,var(--ds-danger)); border-color:var(--ok-line-b91c1c,var(--ds-danger)); background:var(--ok-surface-ffffff,var(--ds-surface)); } .ds-button--danger:hover { background:var(--ok-surface-fef2f2,var(--ds-danger-soft)); } .ds-button:disabled,.ds-button[aria-disabled=true] { opacity:.6; cursor:not-allowed; box-shadow:none; } .ds-button:focus-visible,.ds-control:focus-visible,.ds-module-link:focus-visible { outline:3px solid var(--ok-line-2563eb,var(--ds-focus)); outline-offset:3px; } .ds-panel { border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:var(--ds-radius-card); background:var(--ok-surface-ffffff,var(--ds-surface)); box-shadow:var(--ds-shadow); min-width:0; } .ds-panel__header { padding:var(--ds-space-4) var(--ds-space-6); } .ds-panel__header h2 { font-size:1.125rem; line-height:1.5; font-weight:600; color:var(--ok-ink-172033,var(--ds-text)); } .ds-panel__header p { font-size:var(--ds-text-body); line-height:1.5; color:var(--ok-ink-526176,var(--ds-muted)); } .ds-panel__body { padding:var(--ds-space-6); min-width:0; } .ds-status-badge { gap:.375rem; padding:.25rem .5rem; border-radius:.375rem; font-size:var(--ds-text-meta); line-height:1.5; font-weight:600; white-space:normal; } .ds-status-badge--success { color:var(--ok-ink-166534,var(--ds-success)); background:var(--ok-surface-f0fdf4,var(--ds-success-soft)); } .ds-status-badge--warning { color:var(--ok-ink-854d0e,var(--ds-warning)); background:var(--ok-surface-fefce8,var(--ds-warning-soft)); } .ds-status-badge--danger { color:var(--ok-ink-b91c1c,var(--ds-danger)); background:var(--ok-surface-fef2f2,var(--ds-danger-soft)); } .ds-status-badge--info { color:var(--ok-ink-1e40af,var(--ds-info)); background:var(--ok-surface-eff6ff,var(--ds-info-soft)); } .ds-status-badge--neutral { color:var(--ok-ink-475569,var(--ds-neutral)); background:var(--ok-surface-f1f5f9,var(--ds-neutral-soft)); } .ds-field { display:grid; align-content:start; min-width:0; gap:var(--ds-space-2); } .ds-field>label { font-size:var(--ds-text-body); font-weight:600; line-height:1.5; color:var(--ok-ink-172033,var(--ds-text)); } .ds-control { box-sizing:border-box; width:100%; min-width:0; min-height:var(--ds-control-height); padding:.5rem .75rem; border:1px solid var(--ok-line-7c889b,var(--ds-control-border)); border-radius:var(--ds-radius-control); background:var(--ok-surface-ffffff,var(--ds-surface)); color:var(--ok-ink-172033,var(--ds-text)); font-family:inherit; font-size:var(--ds-text-body); line-height:1.5; } .ds-control::placeholder { color:var(--ok-ink-526176,var(--ds-muted)); opacity:1; } .ds-control[aria-invalid=true] { border-color:var(--ok-line-b91c1c,var(--ds-danger)); } .ds-control:disabled { background:var(--ok-surface-f1f5f9,var(--ds-surface-muted)); cursor:not-allowed; } .ds-field__help,.ds-field__error { margin:0; font-size:var(--ds-text-meta); line-height:1.5; color:var(--ok-ink-526176,var(--ds-muted)); } .ds-field__error { color:var(--ok-ink-b91c1c,var(--ds-danger)); } .ds-alert { padding:var(--ds-space-4); border-radius:var(--ds-radius-control); border-inline-start:3px solid currentColor; font-size:var(--ds-text-body); line-height:1.6; color:var(--ok-ink-1e40af,var(--ds-info)); background:var(--ok-surface-eff6ff,var(--ds-info-soft)); } .ds-alert--danger { color:var(--ok-ink-b91c1c,var(--ds-danger)); background:var(--ok-surface-fef2f2,var(--ds-danger-soft)); } .ds-alert--warning { color:var(--ok-ink-854d0e,var(--ds-warning)); background:var(--ok-surface-fefce8,var(--ds-warning-soft)); } .ds-alert--success { color:var(--ok-ink-166534,var(--ds-success)); background:var(--ok-surface-f0fdf4,var(--ds-success-soft)); } .ds-form-actions { display:flex; justify-content:flex-end; flex-wrap:wrap; gap:var(--ds-space-3); padding-block:var(--ds-space-4); } .ds-filter-panel { padding-bottom:var(--ds-space-6); } .ds-filter-panel>summary { cursor:pointer; color:var(--ok-ink-172033,var(--ds-text)); font-size:var(--ds-text-body); font-weight:600; padding-block:.5rem; min-height:2.75rem; } .ds-filter-panel__active { margin-inline-start:.5rem; color:var(--ok-ink-4f4c8f,var(--ds-brand)); font-size:var(--ds-text-meta); } .ds-filter-panel__fields { display:grid; grid-template-columns:minmax(12rem,2fr) repeat(3,minmax(8rem,1fr)); gap:var(--ds-space-4); padding-top:var(--ds-space-3); } .ds-filter-panel__actions { display:flex; align-items:center; flex-wrap:wrap; gap:var(--ds-space-4); margin-top:var(--ds-space-4); } .ds-result-count { color:var(--ok-ink-526176,var(--ds-muted)); font-size:var(--ds-text-body); } .ds-module-navigation { display:flex; gap:var(--ds-space-2); overflow-x:auto; padding:.375rem; border-bottom:1px solid var(--ok-line-d8dee8,var(--ds-border)); } .ds-module-link { flex:0 0 auto; min-height:2.75rem; display:inline-flex; align-items:center; padding:.5rem .75rem; color:var(--ok-ink-526176,var(--ds-muted)); text-decoration:none; font-size:var(--ds-text-body); } .ds-module-link--active { color:var(--ok-ink-4f4c8f,var(--ds-brand)); border-bottom:3px solid var(--ok-line-4f4c8f,var(--ds-brand)); font-weight:600; } .ds-empty-state strong { font-size:1rem; color:var(--ok-ink-172033,var(--ds-text)); } .ds-empty-state p { font-size:var(--ds-text-body); line-height:1.6; color:var(--ok-ink-526176,var(--ds-muted)); } .ds-workspace { display:grid; grid-template-columns:minmax(13rem,1fr) minmax(0,2fr) minmax(15rem,1fr); gap:var(--ds-space-4); } .ds-workspace>* { min-width:0; } .ds-clients-pilot .crm-table th,.ds-clients-pilot .crm-table td { font-size:var(--ds-text-body); line-height:1.5; } .ds-clients-pilot .crm-table td small { font-size:var(--ds-text-meta); color:var(--ok-ink-526176,var(--ds-muted)); } .ds-clients-pilot .crm-row-actions { flex-wrap:wrap; } .ds-clients-pilot .crm-row-actions>a,.ds-clients-pilot .crm-row-actions>button { min-width:2.75rem; min-height:2.75rem; } @media(max-width:1279px) { .ds-workspace { grid-template-columns:minmax(12rem,1fr) minmax(0,2fr); } .ds-workspace__context { grid-column:1/-1; } } @media(max-width:1023px) { .ds-filter-panel__fields { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:767px) { .ds-page-header,.ds-panel__header,.ds-panel__body { padding:var(--ds-space-4); } .ds-page-header h1 { font-size:1.25rem; line-height:1.75rem; } .ds-page-header__actions { width:100%; justify-content:flex-start; } .ds-page-header__actions>* { flex:1 1 10rem; } .ds-filter-panel__fields,.ds-workspace { grid-template-columns:minmax(0,1fr); } .ds-workspace__context { grid-column:auto; } .ds-control { font-size:1rem; min-height:2.75rem; } .ds-button { min-height:2.75rem; } .ds-form-actions>* { flex:1 1 10rem; } } @media(pointer:coarse) { .ds-button,.ds-control { min-height:2.75rem; } } /* Pilot 2.0 — customer journey. Shared controls still use Foundation tokens. */ .pilot-panel[hidden] { display:none !important; } .pilot-panel { display:grid; gap:var(--ds-space-6); min-width:0; } .pilot-client .ds-module-navigation { position:relative; max-width:100%; } .pilot-client .ds-module-link { border-top:0; border-inline:0; background:transparent; cursor:pointer; } .pilot-client .ds-module-link--active { background:var(--ok-surface-eeedf7,var(--ds-brand-soft)); } .pilot-attention { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:1rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:var(--ds-radius-card); padding:1rem; background:var(--ok-surface-eeedf7,var(--ds-brand-soft)); color:var(--ok-ink-172033,var(--ds-text)); } .pilot-attention p { margin:.25rem 0 0; font-size:var(--ds-text-body); } .pilot-records { display:grid; gap:.75rem; margin-top:1rem; } .pilot-records article { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; padding:1rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:var(--ds-radius-control); } .pilot-records article>div { min-width:0; flex:1 1 15rem; } .pilot-records a { color:var(--ok-ink-2563eb,var(--ds-link)); font-size:var(--ds-text-body); font-weight:600; overflow-wrap:anywhere; text-decoration:underline; text-underline-offset:3px; } .pilot-records p { color:var(--ok-ink-526176,var(--ds-muted)); font-size:var(--ds-text-body); margin:.375rem 0 0; } .pilot-client .crm-client-summary { grid-template-columns:repeat(auto-fit,minmax(10rem,1fr)); } .pilot-client .crm-client-summary small,.pilot-client .crm-detail-grid dt,.pilot-client .crm-record-list small { font-size:var(--ds-text-meta); color:var(--ok-ink-526176,var(--ds-muted)); } .pilot-client .crm-detail-grid dd,.pilot-client .crm-record-list p,.pilot-client .crm-record-list strong { font-size:var(--ds-text-body); line-height:1.6; overflow-wrap:anywhere; } .pilot-client .crm-record-list article { flex-wrap:wrap; } .pilot-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1rem; } .pilot-form-stack { display:grid; gap:1rem; } .pilot-ticket-form { width:100%; max-width:60rem; } .pilot-ticket-form textarea,.pilot-attendance textarea { resize:vertical; } .pilot-attendance .support-ticket-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(18rem,23rem); align-items:start; gap:1.5rem; } .pilot-attendance .support-ticket-main,.pilot-attendance .support-ticket-sidebar { min-width:0; display:grid; gap:1rem; } .pilot-attendance .support-ticket-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; } .pilot-attendance .support-ticket-summary>div { min-width:0; } .pilot-attendance .support-ticket-summary strong { font-size:var(--ds-text-body); overflow-wrap:anywhere; } .pilot-attendance .support-ticket-summary>div>span { font-size:var(--ds-text-meta); } .pilot-attendance .support-thread { max-height:none; } .pilot-attendance .support-message p { white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--ds-text-body); line-height:1.65; } .pilot-attendance .support-message header { flex-wrap:wrap; gap:.5rem; } .pilot-attendance .support-message header strong { font-size:var(--ds-text-body); } .pilot-attendance .support-message header span,.pilot-attendance .support-message time { font-size:var(--ds-text-meta); } .pilot-attendance .support-message--internal { background:var(--ok-surface-fefce8,var(--ds-warning-soft)); border-inline-start:3px solid var(--ok-line-854d0e,var(--ds-warning)); } .pilot-composer { padding:1rem; display:grid; gap:1rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:var(--ds-radius-card); } .pilot-composer--internal { background:var(--ok-surface-fefce8,var(--ds-warning-soft)); border-color:var(--ok-line-854d0e,var(--ds-warning)); } .pilot-composer--public { background:var(--ok-surface-ffffff,var(--ds-surface)); } .pilot-composer .support-reply-tabs { display:flex; flex-wrap:wrap; padding:0; border:0; gap:.75rem; } .pilot-composer legend { font-size:var(--ds-text-body); font-weight:600; margin-bottom:.5rem; } .pilot-composer .support-reply-tabs label { min-height:2.75rem; display:flex; align-items:center; gap:.5rem; font-size:var(--ds-text-body); } .pilot-context { display:grid; gap:1rem; margin:0; } .pilot-context dt { color:var(--ok-ink-526176,var(--ds-muted)); font-size:var(--ds-text-meta); } .pilot-context dd { margin:.25rem 0 0; font-size:var(--ds-text-body); overflow-wrap:anywhere; } @media(max-width:1023px) { .pilot-attendance .support-ticket-layout { grid-template-columns:minmax(0,1fr); } } @media(max-width:767px) { .pilot-form-grid { grid-template-columns:minmax(0,1fr); } .pilot-attendance .support-ticket-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .pilot-client .crm-management-grid { grid-template-columns:minmax(0,1fr); } .pilot-client .crm-record-list article { gap:.75rem; } .pilot-client .crm-record-list article>.ds-button { flex-basis:100%; } .pilot-composer { padding:.75rem; } } /* Continuity 3.0: work-order flow and operational forms. */ .continuity-steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); padding:0; margin:0; gap:1rem; list-style:none; } .continuity-steps li { display:grid; gap:.5rem; min-width:0; padding:1rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:var(--ds-radius-card); background:var(--ok-surface-ffffff,var(--ds-surface)); } .continuity-steps strong { color:var(--ok-ink-4f4c8f,var(--ds-brand)); font-size:var(--ds-text-body); } .continuity-steps span { color:var(--ok-ink-526176,var(--ds-muted)); font-size:var(--ds-text-body); overflow-wrap:anywhere; } .maintenance-page .crm-field>span,.maintenance-page .crm-field input,.maintenance-page .crm-field select,.maintenance-page .crm-field textarea { font-size:var(--ds-text-body); } .maintenance-page .maint-check-item { min-height:2.75rem; } .maintenance-page .maint-check-item:disabled { cursor:default; } .maintenance-page .maint-check-item strong { font-size:var(--ds-text-body); line-height:1.5; } .maintenance-page .maint-check-item small { font-size:var(--ds-text-meta); } @media(max-width:767px) { .continuity-steps { grid-template-columns:repeat(2,minmax(0,1fr)); } .maintenance-page .crm-field input,.maintenance-page .crm-field select,.maintenance-page .crm-field textarea { font-size:1rem; min-height:2.75rem; } } /* Operação técnica e portal 5.0 — padrões compartilhados */ .ds-next-step { display:flex; align-items:flex-start; flex-wrap:wrap; gap:1rem; padding:1rem; border:1px solid var(--ds-border, var(--ok-line-dbe1ea,#dbe1ea)); border-radius:var(--ds-radius-card); background:var(--ds-surface, var(--ok-surface-ffffff,#fff)); } .ds-next-step > .material-symbols-rounded { display:flex; flex:0 0 auto; color:var(--ok-ink-4f4c8f,var(--ds-brand)); } .ds-next-step__copy { flex:1 1 16rem; min-width:0; overflow-wrap:anywhere; } .ds-next-step__copy h2 { margin:0 0 .35rem; font-size:1rem; line-height:1.4; } .ds-next-step__copy p,.ds-context-note { margin:0; color:var(--ok-ink-526176,var(--ds-muted)); font-size:.875rem; line-height:1.6; } .ds-next-step__actions { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; } .portal-main .ds-control { width:100%; min-height:2.75rem; } .portal-main .ds-next-step { margin-block:1rem; } .ds-alert ul { margin:.5rem 0 0; padding-left:1.25rem; } @media(max-width:640px) { .ds-next-step__actions { width:100%; } .ds-next-step__actions > * { flex:1 1 auto; } } /* Sidebar 5.1 — one scoped visual system, after legacy rules. */ #app-sidebar { --nav-ink: var(--ok-ink-38455c,#38455c); --nav-muted: var(--ok-ink-68758a,#68758a); --nav-line: var(--ok-line-e6eaf2,#e6eaf2); --nav-hover: var(--ok-surface-f0f2f8,#f0f2f8); --nav-selected: var(--ok-surface-eeecf8,#eeecf8); --nav-brand: var(--ok-ink-4f4c8f,#4f4c8f); background: linear-gradient(180deg, var(--ok-surface-ffffff,#fff) 0%, var(--ok-surface-fafbfe,#fafbfe) 100%); border-right: 1px solid var(--ok-line-e6eaf2,var(--nav-line)); box-shadow: 8px 0 28px -24px var(--ok-shadow-232d4b_a180,rgb(35 45 75 / .18)); font-size: .8125rem; } #app-sidebar *, #app-sidebar *::before, #app-sidebar *::after { box-sizing: border-box; } #app-sidebar .app-sidebar__brand { flex:0 0 auto; min-height:4.6rem; padding:.85rem 1rem; gap:.65rem; background:transparent; border-bottom:1px solid var(--ok-line-e6eaf2,var(--nav-line)); } #app-sidebar .app-brand { gap:.65rem; } #app-sidebar .app-brand__mark { width:2.3rem; height:2.3rem; flex:0 0 2.3rem; border-radius:.8rem; background:var(--ok-surface-4f4c8f,var(--nav-brand)); box-shadow:0 4px 10px var(--ok-shadow-4f4c8f_a120,rgb(79 76 143 / .12)); font-size:.95rem; } #app-sidebar .app-brand__copy { min-width:0; } #app-sidebar .app-brand__copy strong { font-size:.8125rem; font-weight:700; line-height:1.35; letter-spacing:-.015em; } #app-sidebar .app-brand__copy small { font-size:.6875rem; line-height:1.4; color:var(--ok-ink-68758a,var(--nav-muted)); } #app-sidebar .app-navigation { flex:1 1 auto; min-height:0; padding:.85rem .65rem 1rem; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:#d2d7e4 transparent; scrollbar-gutter:stable; } #app-sidebar .app-nav-section { width:100%; min-width:0; } #app-sidebar .app-nav-section + .app-nav-section { margin-top:1.1rem; } #app-sidebar .app-nav-section__label { margin:0 0 .4rem; padding:0 .65rem; color:var(--ok-ink-68758a,var(--nav-muted)); font-size:.65625rem; font-weight:650; line-height:1.5; letter-spacing:.075em; text-transform:uppercase; } #app-sidebar .app-nav-section__items { display:grid; gap:.15rem; } #app-sidebar .app-nav-group { width:100%; min-width:0; margin:0; } #app-sidebar .app-nav-group__primary { position:relative; display:flex; align-items:center; width:100%; min-width:0; gap:0; border-radius:.7rem; } #app-sidebar .app-nav-item { display:flex; align-items:center; flex:1 1 auto; gap:.65rem; width:auto; min-width:0; max-width:none; height:auto; min-height:2.625rem; max-height:none; margin:0; padding:.55rem .65rem; border:0; border-radius:.7rem; color:var(--ok-ink-38455c,var(--nav-ink)); background:transparent; box-shadow:none; text-decoration:none; transform:none; transition:background-color 140ms ease,color 140ms ease; } #app-sidebar .app-nav-group__primary--expandable .app-nav-item { padding-right:.25rem; } #app-sidebar .app-nav-item__icon { display:flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; min-width:1.35rem; flex:0 0 1.35rem; padding:0; margin:0; background:transparent; color:var(--ok-ink-68758a,var(--nav-muted)); font-size:1.15rem; line-height:1; } #app-sidebar .app-nav-item__copy { display:flex; align-items:center; flex:1 1 auto; min-width:0; height:auto; } #app-sidebar .app-nav-item__copy strong { font-size:.8125rem; font-weight:600; line-height:1.45; white-space:normal; overflow-wrap:anywhere; letter-spacing:0; } #app-sidebar .app-nav-item:hover { background:var(--ok-surface-f0f2f8,var(--nav-hover)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); transform:none; } #app-sidebar .app-nav-item--active { background:var(--ok-surface-eeecf8,var(--nav-selected)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); border:0; box-shadow:none; } #app-sidebar .app-nav-item--active:not([aria-current="page"]) { background:transparent; } #app-sidebar .app-nav-item--active .app-nav-item__icon { color:var(--ok-ink-4f4c8f,var(--nav-brand)); } #app-sidebar .app-nav-group__toggle { position:static; display:flex; align-items:center; justify-content:center; flex:0 0 2.25rem; width:2.25rem; height:2.25rem; min-width:2.25rem; min-height:2.25rem; margin:0 .15rem 0 0; padding:0; border:0; border-radius:.6rem; color:var(--ok-ink-68758a,var(--nav-muted)); background:transparent; box-shadow:none; transform:none; } #app-sidebar .app-nav-group__toggle:hover, #app-sidebar .app-nav-group__toggle[aria-expanded="true"] { background:var(--ok-surface-f0f2f8,var(--nav-hover)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); border:0; box-shadow:none; } #app-sidebar .app-nav-group__toggle .material-symbols-rounded { font-size:1.1rem; } #app-sidebar .app-nav-submenu { display:grid; gap:.1rem; margin:.1rem .1rem .35rem 1.3rem; padding:.1rem 0 .1rem .7rem; border-left:1px solid var(--ok-line-e6eaf2,var(--nav-line)); } #app-sidebar .app-nav-submenu[hidden] { display:none !important; } #app-sidebar .app-nav-subitem { display:flex; align-items:center; gap:.5rem; min-width:0; min-height:2.25rem; margin:0; padding:.45rem .6rem; border:0; border-radius:.55rem; color:var(--ok-ink-68758a,var(--nav-muted)); background:transparent; box-shadow:none; font-size:.8125rem; font-weight:450; line-height:1.45; text-decoration:none; transform:none; } #app-sidebar .app-nav-subitem > span:not(.material-symbols-rounded) { min-width:0; white-space:normal; overflow-wrap:anywhere; } #app-sidebar .app-nav-subitem__icon { display:flex; align-items:center; justify-content:center; flex:0 0 1.1rem; min-width:1.1rem; width:1.1rem; height:1.1rem; font-size:.95rem; line-height:1; } #app-sidebar .app-nav-subitem:hover { background:var(--ok-surface-f0f2f8,var(--nav-hover)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); } #app-sidebar .app-nav-subitem--active, #app-sidebar .app-nav-subitem--active:hover { background:var(--ok-surface-eeecf8,var(--nav-selected)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); font-weight:650; box-shadow:inset 2px 0 0 var(--ok-shadow-4f4c8f,var(--nav-brand)); text-decoration:none; } #app-sidebar .app-nav-item::before, #app-sidebar .app-nav-item::after, #app-sidebar .app-nav-submenu::before, #app-sidebar .app-nav-subitem::before, #app-sidebar .app-nav-subitem::after { content:none; display:none; } #app-sidebar .app-nav-item--disabled { opacity:.55; cursor:not-allowed; } #app-sidebar :is(a,button):focus-visible { outline:2px solid var(--ds-link, var(--ok-line-2563eb,#2563eb)); outline-offset:2px; } #app-sidebar .app-navigation__personal { display:grid; gap:.7rem; padding:0 .1rem .8rem; margin:0 0 .85rem; border-bottom:1px solid var(--ok-line-e6eaf2,var(--nav-line)); } #app-sidebar .app-personal-section__header { display:flex; align-items:center; justify-content:space-between; min-height:1.5rem; padding:0 .5rem .2rem; } #app-sidebar .app-personal-section__header h2 { font-size:.65625rem; font-weight:650; line-height:1.5; color:var(--ok-ink-68758a,var(--nav-muted)); letter-spacing:.05em; } #app-sidebar .app-personal-section__header h2 .material-symbols-rounded { font-size:.95rem; } #app-sidebar .app-personal-section__count { font-size:.65625rem; background:var(--ok-surface-f0f2f8,var(--nav-hover)); color:var(--ok-ink-68758a,var(--nav-muted)); } #app-sidebar .app-personal-section__items { display:grid; gap:.1rem; } #app-sidebar .app-personal-page { grid-template-columns:minmax(0,1fr) 1.75rem; border:0; border-radius:.6rem; } #app-sidebar .app-personal-page > a { min-height:2.5rem; padding:.4rem .2rem .4rem .5rem; gap:.6rem; } #app-sidebar .app-personal-page__icon { display:flex; align-items:center; justify-content:center; flex:0 0 1.35rem; width:1.35rem; height:1.35rem; border-radius:.4rem; font-size:1rem; color:var(--ok-ink-4f4c8f,var(--nav-brand)); background:var(--ok-surface-eeecf8,var(--nav-selected)); } #app-sidebar .app-personal-page__copy strong { font-size:.75rem; font-weight:550; line-height:1.4; color:var(--ok-ink-38455c,var(--nav-ink)); } #app-sidebar .app-personal-page__copy small { font-size:.65625rem; line-height:1.4; color:var(--ok-ink-68758a,var(--nav-muted)); } #app-sidebar .app-personal-empty { padding:.45rem .5rem; border:0; background:transparent; } #app-sidebar .app-personal-empty strong, #app-sidebar .app-personal-empty small { font-size:.6875rem; line-height:1.4; } #app-sidebar .app-sidebar__footer { display:grid; flex:0 0 auto; gap:.4rem; padding:.65rem; border-top:1px solid var(--ok-line-e6eaf2,var(--nav-line)); background:var(--ok-surface-ffffff,#fff); } #app-sidebar .app-sidebar__compact { display:flex; align-items:center; min-height:2.25rem; padding:.4rem .65rem; gap:.65rem; color:var(--ok-ink-68758a,var(--nav-muted)); font-size:.75rem; font-weight:550; border:0; background:transparent; border-radius:.6rem; } #app-sidebar .app-sidebar__compact:hover { background:var(--ok-surface-f0f2f8,var(--nav-hover)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); } #app-sidebar .app-user-card { min-width:0; padding:.55rem; gap:.55rem; border:1px solid var(--ok-line-e6eaf2,var(--nav-line)); background:var(--ok-surface-f8f9fc,#f8f9fc); border-radius:.75rem; box-shadow:none; } #app-sidebar .app-user-card__avatar { display:flex; align-items:center; justify-content:center; width:2rem; height:2rem; flex:0 0 2rem; border-radius:.65rem; font-size:.8125rem; background:var(--ok-surface-eeecf8,var(--nav-selected)); color:var(--ok-ink-4f4c8f,var(--nav-brand)); } #app-sidebar .app-user-card__copy { min-width:0; } #app-sidebar .app-user-card__copy strong { font-size:.75rem; font-weight:600; line-height:1.4; } #app-sidebar .app-user-card__copy small { font-size:.65625rem; line-height:1.4; color:var(--ok-ink-68758a,var(--nav-muted)); } @media(min-width:1024px) { .app-shell--compact #app-sidebar .app-navigation { padding-inline:.4rem; } .app-shell--compact #app-sidebar .app-navigation__personal { display:none; } .app-shell--compact #app-sidebar .app-sidebar__brand { padding:.8rem .4rem; justify-content:center; } .app-shell--compact #app-sidebar .app-brand { flex:0 0 auto; } .app-shell--compact #app-sidebar .app-nav-group__primary { display:flex; justify-content:center; } .app-shell--compact #app-sidebar .app-nav-item { flex:0 0 2.75rem; width:2.75rem; min-width:2.75rem; max-width:2.75rem; height:2.75rem; min-height:2.75rem; margin-inline:auto; padding:0; gap:0; justify-content:center; } .app-shell--compact #app-sidebar .app-nav-item--active { background:var(--ok-surface-eeecf8,var(--nav-selected)); } .app-shell--compact #app-sidebar .app-nav-item__copy { display:none; } .app-shell--compact #app-sidebar .app-nav-section + .app-nav-section { margin-top:.65rem; padding-top:.65rem; border-top:1px solid var(--ok-line-e6eaf2,var(--nav-line)); } .app-shell--compact #app-sidebar .app-sidebar__footer { justify-items:center; padding:.65rem .35rem; } .app-shell--compact #app-sidebar .app-sidebar__compact { width:2.75rem; min-width:2.75rem; height:2.75rem; padding:0; gap:0; justify-content:center; } .app-shell--compact #app-sidebar .app-user-card { width:2.75rem; padding:.3rem; justify-content:center; } } @media(max-width:1023px) { #app-sidebar .app-nav-item, #app-sidebar .app-nav-subitem { min-height:2.75rem; } #app-sidebar .app-nav-group__toggle { width:2.75rem; height:2.75rem; flex-basis:2.75rem; } } @media(prefers-reduced-motion:reduce) { #app-sidebar *, #app-sidebar *::before, #app-sidebar *::after { transition:none !important; animation:none !important; } } /* Forms and lists 5.2 — shared administrative presentation. */ .app-body .ds-field { min-width:0; display:grid; align-content:start; gap:.4rem; } .app-body .ds-field > label,.app-body .crm-field > span:first-child { color:var(--ok-ink-172033,var(--ds-text)); font-size:.8125rem; font-weight:600; line-height:1.5; } .app-body .ds-control,.app-body .crm-field > input:not([type="checkbox"]):not([type="radio"]),.app-body .crm-field > select,.app-body .crm-field > textarea { box-sizing:border-box; width:100%; min-width:0; min-height:2.75rem; border:1px solid var(--ok-line-cbd3df,#cbd3df); border-radius:.5rem; padding:.65rem .8rem; color:var(--ok-ink-172033,var(--ds-text)); background-color:var(--ok-surface-ffffff,#fff); box-shadow:none; font-size:.875rem; line-height:1.45; } .app-body select.ds-control,.app-body .crm-field > select { padding-right:2rem; } .app-body textarea.ds-control,.app-body .crm-field > textarea { min-height:7rem; resize:vertical; } .app-body .ds-control:focus,.app-body .crm-field > :is(input,select,textarea):focus { border-color:var(--ok-line-4f4c8f,var(--ds-brand)); outline:2px solid var(--ok-line-e4e1f4,#e4e1f4); outline-offset:1px; box-shadow:none; } .app-body .ds-control[aria-invalid="true"] { border-color:var(--ok-line-b42318,#b42318); } .app-body .ds-control:disabled { background:var(--ok-surface-f3f5f8,#f3f5f8); color:var(--ok-ink-69768a,#69768a); cursor:not-allowed; } .app-body .ds-control::placeholder { color:var(--ok-ink-7b8799,#7b8799); opacity:1; } .app-body .ds-field__help,.app-body .ds-field__error { margin:0; font-size:.75rem; line-height:1.5; } .app-body .ds-field__error { color:var(--ok-ink-b42318,#b42318); } .app-body .ds-form-section { border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.85rem; background:var(--ok-surface-ffffff,#fff); box-shadow:none; overflow:visible; } .app-body .ds-form-section .ds-panel__header { padding:1rem 1.25rem; border-bottom:1px solid var(--ok-line-edf0f5,#edf0f5); background:transparent; } .app-body .ds-form-section .ds-panel__header h2 { font-size:1rem; font-weight:650; } .app-body .ds-form-section .ds-panel__header p { font-size:.8125rem; line-height:1.5; } .app-body .ds-form-section .ds-panel__body { padding:1.25rem; } .app-body .ds-editor :is(.crm-form,.crm-form-stack) { display:grid; gap:1.25rem; } .app-body .ds-editor .crm-form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1.1rem 1.25rem; } .app-body .ds-editor .ds-field--wide { grid-column:1 / -1; } .app-body .ds-editor .finance-item { display:grid; grid-template-columns:minmax(0,2fr) minmax(5rem,1fr) minmax(7rem,1fr) 2.75rem; align-items:start; gap:.85rem; padding:1rem; margin-bottom:.75rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.75rem; background:var(--ok-surface-fafbfe,#fafbfe); } .app-body .ds-editor .finance-item > button { margin-top:1.7rem; width:2.75rem; height:2.75rem; } .app-body .ds-form-actions { display:flex; justify-content:flex-end; align-items:center; flex-wrap:wrap; gap:.75rem; padding:1rem 0; border-top:1px solid var(--ok-line-d8dee8,var(--ds-border)); background:transparent; } .app-body .crm-table { width:100%; border-collapse:collapse; font-size:.8125rem; } .app-body .crm-table th { padding:.8rem 1rem; background:var(--ok-surface-f7f8fc,#f7f8fc); color:var(--ok-ink-5d697d,#5d697d); font-size:.6875rem; letter-spacing:.035em; font-weight:650; border-bottom:1px solid var(--ok-line-d8dee8,var(--ds-border)); } .app-body .crm-table td { padding:.9rem 1rem; border-bottom:1px solid var(--ok-line-edf0f5,#edf0f5); vertical-align:middle; line-height:1.5; } .app-body .crm-table td strong { font-size:.8125rem; font-weight:600; color:var(--ok-ink-172033,var(--ds-text)); } .app-body .crm-table td small { display:block; margin-top:.2rem; color:var(--ok-ink-526176,var(--ds-muted)); font-size:.75rem; line-height:1.45; } .app-body .crm-table tbody tr:hover { background:var(--ok-surface-fafaff,#fafaff); } .app-body .ds-cell-money { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .app-body .ds-data-list .ds-filter-panel { margin-bottom:1rem; padding:1rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.75rem; background:var(--ok-surface-fafbfe,#fafbfe); } .app-body .ds-data-list .ds-filter-panel__fields { display:grid; grid-template-columns:minmax(12rem,2fr) minmax(10rem,1fr) minmax(10rem,1fr); gap:1rem; align-items:start; } .ds-extra-filters { min-width:0; } .ds-extra-filters > summary { min-height:2.75rem; padding:.65rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.5rem; margin-top:1.65rem; cursor:pointer; font-size:.8125rem; color:var(--ok-ink-4f4c8f,var(--ds-brand)); } .ds-extra-filters > div { display:grid; gap:.85rem; padding-top:.85rem; } .ds-filter-chips { display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1rem; } .ds-filter-chips:empty { display:none; } .ds-filter-chips button { display:flex; align-items:center; gap:.6rem; max-width:100%; min-height:2rem; border:1px solid var(--ok-line-dedaf0,#dedaf0); border-radius:2rem; padding:.35rem .75rem; background:var(--ok-surface-eeedf7,var(--ds-brand-soft)); color:var(--ok-ink-4f4c8f,var(--ds-brand)); font-size:.75rem; text-align:left; overflow-wrap:anywhere; cursor:pointer; } .ds-filter-chips button:focus-visible,.ds-extra-filters summary:focus-visible,.ds-row-more summary:focus-visible { outline:2px solid var(--ok-line-2563eb,var(--ds-link)); outline-offset:2px; } .ds-list-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1rem; padding-top:1rem; border-top:1px solid var(--ok-line-d8dee8,var(--ds-border)); } .ds-list-footer > p { margin:0; color:var(--ok-ink-526176,var(--ds-muted)); font-size:.8125rem; } .ds-list-footer > .ds-field { display:flex; align-items:center; gap:.5rem; } .ds-list-footer select { max-width:6rem; } .ds-list-footer .crm-pagination { margin:0; min-width:0; } .ds-row-actions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:.5rem; } .ds-row-more { min-width:6rem; font-size:.75rem; } .ds-row-more summary { cursor:pointer; padding:.65rem .5rem; color:var(--ok-ink-526176,var(--ds-muted)); } .ds-row-more > div { display:grid; gap:.5rem; padding:.5rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.5rem; background:var(--ok-surface-ffffff,#fff); } .ds-row-more a,.ds-row-more button { color:var(--ok-ink-4f4c8f,var(--ds-brand)); text-align:left; min-height:2rem; } @media(max-width:767px) { .app-body .ds-editor .crm-form-grid,.app-body .ds-data-list .ds-filter-panel__fields { grid-template-columns:minmax(0,1fr); } .app-body .ds-editor .finance-item { grid-template-columns:repeat(2,minmax(0,1fr)); } .app-body .ds-editor .finance-item > :first-child { grid-column:1 / -1; } .app-body .ds-editor .finance-item > button { margin-top:0; } .ds-extra-filters > summary { margin-top:0; } .app-body .ds-form-actions > * { flex:1 1 auto; } .app-body .ds-data-list .crm-table,.app-body .ds-data-list .crm-table tbody { display:block; min-width:0; } .app-body .ds-data-list .crm-table thead { display:none; } .app-body .ds-data-list .crm-table tr { display:block; margin-bottom:.85rem; padding:.5rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.75rem; } .app-body .ds-data-list .crm-table td { display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem; padding:.65rem .5rem; min-width:0; text-align:left; white-space:normal; } .app-body .ds-data-list .crm-table td::before { content:attr(data-label); font-size:.6875rem; font-weight:600; color:var(--ok-ink-526176,var(--ds-muted)); } .app-body .ds-data-list .crm-table td[colspan] { display:block; } .app-body .ds-data-list .crm-table td[colspan]::before { content:none; } .ds-list-footer { align-items:flex-start; } .ds-list-footer .crm-pagination { width:100%; } } /* Planos 5.13.1 — filtros compactos em uma linha */ .app-body .ds-data-list .ds-filter-toolbar { display:grid; grid-template-columns:minmax(0,1fr) minmax(7rem,.45fr) auto; align-items:end; gap:.75rem; margin-bottom:.75rem; padding:.75rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.75rem; background:var(--ok-surface-fafbfe,#fafbfe); } .app-body .ds-data-list .ds-filter-toolbar .ds-field { min-width:0; gap:.25rem; margin:0; } .app-body .ds-data-list .ds-filter-toolbar .ds-control { width:100%; min-width:0; height:2.5rem; min-height:2.5rem; padding-block:.45rem; } .app-body .ds-data-list .ds-filter-toolbar > .ds-button { width:auto; min-height:2.5rem; margin:0; padding:.45rem .75rem; white-space:nowrap; } @media(max-width:639px) { .app-body .ds-data-list .ds-filter-toolbar { grid-template-columns:minmax(0,1fr) auto; gap:.5rem; } .app-body .ds-data-list .ds-filter-toolbar > .ds-field:first-child { grid-column:1 / -1; } .app-body .ds-data-list .ds-filter-toolbar .ds-control, .app-body .ds-data-list .ds-filter-toolbar > .ds-button { min-height:2.75rem; height:2.75rem; } } /* Filtros compartilhados 5.13.2 — densidade compacta */ .app-body .ds-compact-filters { display:flex; align-items:flex-end; gap:.625rem; min-width:0; margin-bottom:.75rem; padding:.75rem; border:1px solid var(--ok-line-d8dee8,var(--ds-border)); border-radius:.75rem; background:var(--ok-surface-fafbfe,#fafbfe); } .app-body .ds-compact-filters > .ds-field { flex:1 1 0; min-width:0; margin:0; gap:.25rem; } .app-body .ds-compact-filters > .ds-field:first-child { flex-grow:1.6; } .app-body .ds-compact-filters .ds-control { width:100%; min-width:0; height:2.5rem; min-height:2.5rem; padding-block:.45rem; } .app-body .ds-compact-filters__actions { display:flex; align-items:center; gap:.5rem; flex:0 0 auto; } .app-body .ds-compact-filters .ds-button { width:auto; min-height:2.5rem; padding:.45rem .75rem; margin:0; white-space:nowrap; } .app-body .ds-compact-filters .ds-result-count { max-width:9rem; font-size:.75rem; } .app-body .ds-compact-filters > .ds-extra-filters { flex:0 0 auto; min-width:0; margin:0; } .app-body .ds-compact-filters > .ds-extra-filters > summary { display:flex; align-items:center; min-height:2.5rem; padding:.45rem .625rem; white-space:nowrap; } .app-body .ds-compact-filters:has(> .ds-extra-filters[open]) { flex-wrap:wrap; } .app-body .ds-compact-filters > .ds-extra-filters[open] { order:3; flex:1 0 100%; } .app-body .ds-compact-filters > .ds-extra-filters[open] > div { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.625rem; padding-top:.5rem; } @media(max-width:1023px) { .app-body .ds-compact-filters { flex-wrap:wrap; } .app-body .ds-compact-filters > .ds-field { flex:1 1 8rem; } .app-body .ds-compact-filters > .ds-field:first-child { flex:2 1 12rem; } } @media(max-width:639px) { .app-body .ds-compact-filters > .ds-field:first-child { flex-basis:100%; } .app-body .ds-compact-filters__actions { flex-wrap:wrap; max-width:100%; } .app-body .ds-compact-filters .ds-control, .app-body .ds-compact-filters .ds-button, .app-body .ds-compact-filters > .ds-extra-filters > summary { min-height:2.75rem; } .app-body .ds-compact-filters > .ds-extra-filters[open] > div { grid-template-columns:minmax(0,1fr); } } /* Infraestrutura 5.18 — campos compartilhados nos formulários de topologia */ .app-body :is(.topology-index-form,.topology-inspector-form,.topology-tool-form) .ds-field > label { font-size:.75rem; font-weight:600; line-height:1.4; color:var(--ok-ink-172033,var(--ds-text)); } .app-body :is(.topology-index-form,.topology-inspector-form,.topology-tool-form) .ds-control { min-height:2.75rem; font-size:.8125rem; border-radius:.5rem; } /* Relatórios 5.26 — barra de período compacta, preservando os painéis BI. */ .app-body .reports-compact-period { display:flex; align-items:center; gap:.5rem; padding:.625rem .75rem; min-width:0; } .app-body .reports-compact-period > [class$="-bi-period__intro"] { flex:1 1 10rem; min-width:0; } .app-body .reports-compact-presets { display:flex; flex:0 0 auto; gap:.125rem; padding:.125rem; } .app-body .reports-compact-presets button { min-height:2.5rem; padding:.25rem .375rem; } .app-body .reports-compact-dates { display:flex; flex:0 0 auto; gap:.375rem; } .app-body .reports-compact-dates label { display:flex; align-items:center; gap:.25rem; } .app-body .reports-compact-dates input { width:8rem; min-height:2.5rem; font-size:.75rem; } .app-body .reports-compact-updated { white-space:normal; font-size:.65rem; } @media(max-width:1279px) { .app-body .reports-compact-period { flex-wrap:wrap; } .app-body .reports-compact-period > [class$="-bi-period__intro"] { flex-basis:100%; } } @media(max-width:639px) { .app-body .reports-compact-presets { flex:1 1 100%; overflow-x:auto; max-width:100%; } .app-body .reports-compact-presets button { flex:1 0 auto; min-height:2.75rem; } .app-body .reports-compact-dates { flex:1 1 100%; min-width:0; } .app-body .reports-compact-dates label { flex:1 1 0; min-width:0; display:grid; } .app-body .reports-compact-dates input { width:100%; min-width:0; min-height:2.75rem; } } /* Cabeçalhos responsivos 5.28 — base flex horizontal não deve virar altura. */ @media (max-width: 1279px) { .app-body .ds-dashboard-header > .ds-page-header__content { flex:0 1 auto; width:100%; } .app-body .ds-page-header { gap:.75rem; padding:1rem; } .app-body .ds-page-header__content { gap:.75rem; } } @media (max-width: 767px) { .app-body { --app-topbar-height:4rem; } .app-body .app-topbar__inner { padding-block:.375rem; } .app-body .ds-page-header { gap:.625rem; padding:.875rem; } .app-body .ds-page-header > .ds-page-header__content { flex:0 1 auto; width:100%; align-items:flex-start; gap:.625rem; } .app-body .ds-page-header__icon { width:2.25rem; height:2.25rem; flex:0 0 2.25rem; } .app-body .ds-page-header h1 { font-size:1.125rem; line-height:1.4; } .app-body .ds-page-header .ds-eyebrow { margin-bottom:.125rem; font-size:.65rem; line-height:1.4; letter-spacing:.04em; } .app-body .ds-page-header__description { margin-top:.25rem; font-size:.8125rem; line-height:1.4; } .app-body .ds-page-header__actions { gap:.5rem; } .app-body .ds-page-header__actions > .ds-button { flex:1 1 8rem; width:auto; min-height:2.75rem; } .app-body .ds-dashboard-header .ds-page-header__actions { gap:.5rem; } .app-body .ds-dashboard-header .ds-dashboard-period { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); flex:1 1 100%; width:100%; min-width:0; gap:.125rem; padding:.125rem; } .app-body .ds-dashboard-period__button { min-height:2.75rem; padding:.375rem .125rem; } .app-body .ds-dashboard-header .ds-dashboard-updated { flex:1 1 8rem; width:auto; min-height:0; font-size:.65rem; white-space:normal; } } /* Apache ECharts 5.30 — gráficos e dados acessíveis. */ .ds-echart { width:100%; min-width:0; } .ds-echart__toolbar { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:.375rem; margin-bottom:.5rem; } .ds-echart__toolbar button,.ds-echart__data summary { min-height:2.75rem; padding:.5rem .75rem; font:inherit; font-size:.75rem; color:var(--ok-ink-4f4c8f,#4f4c8f); cursor:pointer; } .ds-echart__toolbar button { border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.5rem; background:var(--ok-surface-ffffff,#fff); } .ds-echart__toolbar button:focus-visible,.ds-echart__data summary:focus-visible,.ds-echart__table-wrap:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb); outline-offset:2px; } .ds-echart__plot { width:100%; height:21rem; min-width:0; } .ds-echart__status { margin:.375rem 0; color:var(--ok-ink-64748b,#64748b); font-size:.75rem; } .ds-echart__status:empty { display:none; } .ds-echart__table-wrap { max-height:24rem; overflow:auto; } .ds-echart table { border-collapse:collapse; width:100%; font-size:.75rem; } .ds-echart th,.ds-echart td { padding:.5rem; border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0); text-align:start; } .ds-echart caption { padding:.5rem; font-weight:600; } .operations-bi-security-layout:has(.ds-echart) { grid-template-columns:minmax(0,1fr); } @media(max-width:767px) { .ds-echart__plot { height:19rem; } .ds-echart__toolbar { justify-content:flex-start; } } @media print { .ds-echart__toolbar { display:none; } .ds-echart__table-wrap { max-height:none; overflow:visible; } } /* Análises 5.31 — referência temporária nos gráficos. */ .ds-echart__reference { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.75rem; font-size:.75rem; } .ds-echart__reference input { max-width:10rem; min-height:2.75rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.5rem; padding:.5rem; font:inherit; } .ds-echart__reference small { flex-basis:100%; color:var(--ok-ink-64748b,#64748b); } /* Contratos 5.32 — catálogo de variáveis. */ .contract-placeholder-help { padding:.75rem; border:1px solid var(--ok-line-dfe3ed,#dfe3ed); border-radius:.75rem; margin-block:.75rem; } .contract-placeholder-help summary { cursor:pointer; min-height:2.75rem; font-weight:600; } .contract-placeholder-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(14rem,1fr)); gap:.75rem; } .contract-placeholder-grid label { display:grid; gap:.25rem; font-size:.75rem; } .contract-placeholder-grid input { min-width:0; width:100%; min-height:2.75rem; padding:.5rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.5rem; font-family:monospace; background:var(--ok-surface-f8fafc,#f8fafc); } /* Portal: inventário 5.35 — filtros compactos e leitura responsiva. */ .portal-inventory-page { display:grid; gap:1rem; min-width:0; } .portal-inventory-page .ds-panel { overflow:hidden; border:1px solid var(--ok-line-dfe4ef,#dfe4ef); border-radius:1rem; box-shadow:0 2px 8px var(--ok-shadow-24324b_a20,#24324b05); } .portal-inventory-page .ds-panel__header { padding:1rem 1.25rem; gap:1rem; flex-wrap:wrap; } .portal-inventory-page .ds-panel__header h2 { font-size:1.05rem; line-height:1.4; } .portal-inventory-page .ds-panel__header p { font-size:.8125rem; line-height:1.5; color:var(--ok-ink-5b6880,#5b6880); } .portal-inventory-page .ds-panel__body { padding:1rem 1.25rem; } .portal-inventory-page .portal-inventory-filters { display:grid; grid-template-columns:minmax(12rem,1fr) minmax(12rem,16rem) auto; align-items:end; gap:.8rem; } .portal-inventory-filters .ds-field { min-width:0; margin:0; } .portal-inventory-filters .ds-field label { display:block; margin-bottom:.375rem; font-size:.8125rem; } .portal-inventory-filters .ds-control { width:100%; min-height:2.75rem; font-size:.875rem; border-color:var(--ok-line-cbd3e2,#cbd3e2); border-radius:.65rem; } .portal-inventory-filters .ds-compact-filters__actions { margin:0; } .portal-inventory-filters .ds-button { min-height:2.75rem; white-space:nowrap; } .portal-inventory-count { display:inline-flex; align-items:center; padding:.4rem .7rem; border-radius:2rem; background:var(--ok-surface-f0eef9,#f0eef9); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.8125rem; font-weight:650; } .portal-inventory-loading { color:var(--ok-ink-5b6880,#5b6880); font-size:.8125rem; margin:0 0 .5rem; } .portal-inventory-page .crm-table-wrap { border:1px solid var(--ok-line-e4e8f0,#e4e8f0); border-radius:.8rem; } .portal-inventory-page .crm-table { width:100%; min-width:0; table-layout:fixed; } .portal-inventory-page .crm-table th { padding:.8rem .9rem; font-size:.6875rem; letter-spacing:.06em; color:var(--ok-ink-617089,#617089); background:var(--ok-surface-f7f9fc,#f7f9fc); } .portal-inventory-page .crm-table th:first-child { width:28%; } .portal-inventory-page .crm-table th:nth-child(2) { width:23%; } .portal-inventory-page .crm-table td { padding:1.1rem .9rem; font-size:.875rem; line-height:1.5; vertical-align:middle; overflow-wrap:anywhere; } .portal-inventory-page .crm-table td strong { display:block; font-size:.875rem; font-weight:650; color:var(--ok-ink-24324b,#24324b); line-height:1.5; } .portal-inventory-page .crm-table td small { display:block; font-size:.75rem; color:var(--ok-ink-617089,#617089); line-height:1.6; margin-top:.15rem; } .portal-inventory-page .portal-inventory-identity { display:flex; align-items:center; gap:.75rem; min-width:0; } .portal-inventory-identity>div { min-width:0; } .portal-inventory-identity>.material-symbols-rounded { display:grid; place-items:center; flex:0 0 2.5rem; width:2.5rem; height:2.5rem; font-size:1.3rem; border-radius:.75rem; background:var(--ok-surface-f0eef9,#f0eef9); color:var(--ok-ink-4f4c8f,#4f4c8f); } .portal-inventory-page .crm-table td .portal-inventory-tag { font-family:ui-monospace,monospace; font-size:.8125rem; } .portal-inventory-page .ds-list-footer { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:.8rem; margin-top:1rem; padding-top:1rem; } .portal-inventory-page .ds-list-footer p { font-size:.8125rem; color:var(--ok-ink-617089,#617089); } .portal-inventory-page .ds-list-footer .ds-field { display:flex; align-items:center; gap:.65rem; margin:0; } .portal-inventory-page .ds-list-footer label { white-space:nowrap; font-size:.8125rem; } .portal-inventory-page .ds-list-footer select { min-height:2.75rem; min-width:4.5rem; } .portal-inventory-page :is(input,select,button,a):focus-visible { outline:2px solid var(--ok-line-4f4c8f,#4f4c8f); outline-offset:3px; } @media(max-width:900px) { .portal-inventory-page .portal-inventory-filters { grid-template-columns:minmax(0,1fr) minmax(10rem,14rem); } .portal-inventory-filters .ds-compact-filters__actions { grid-column:1/-1; justify-self:end; } .portal-inventory-page .crm-table-wrap { border:0; overflow:visible; } .portal-inventory-page .crm-table, .portal-inventory-page .crm-table tbody { display:block; width:100%; } .portal-inventory-page .crm-table thead { display:none; } .portal-inventory-page .crm-table tr { display:block; margin-bottom:.8rem; padding:.9rem; border:1px solid var(--ok-line-e4e8f0,#e4e8f0); border-radius:.85rem; background:var(--ok-surface-ffffff,white); } .portal-inventory-page .crm-table td { display:grid; grid-template-columns:7rem minmax(0,1fr); gap:.75rem; width:100%; padding:.65rem 0; border:0; } .portal-inventory-page .crm-table td::before { content:attr(data-label); color:var(--ok-ink-617089,#617089); font-size:.75rem; font-weight:500; text-transform:none; letter-spacing:0; } .portal-inventory-page .crm-table td:first-child { display:block; padding:0 0 .8rem; margin-bottom:.25rem; border-bottom:1px solid var(--ok-line-edf0f6,#edf0f6); } .portal-inventory-page .crm-table td:first-child::before { display:none; } .portal-inventory-page .crm-table td>div { min-width:0; } } @media(max-width:540px) { .portal-inventory-page { gap:.75rem; } .portal-inventory-page .ds-panel__header, .portal-inventory-page .ds-panel__body { padding:.85rem; } .portal-inventory-page .portal-inventory-filters { grid-template-columns:minmax(0,1fr); gap:.65rem; } .portal-inventory-filters .ds-compact-filters__actions { grid-column:auto; justify-self:stretch; } .portal-inventory-filters .ds-button { width:100%; justify-content:center; } .portal-inventory-page .ds-list-footer { align-items:flex-start; } .portal-inventory-page .ds-list-footer .crm-pagination { flex-basis:100%; } } /* Topologia 5.38 — área ampliada e detalhes contextuais. */ .app-body .topology-studio-page { max-width:none; width:100%; } .topology-studio--advanced { grid-template-columns:minmax(0,1fr); } .topology-studio--advanced:not(.has-inspector)>.topology-studio-inspector { display:none; } .topology-studio--advanced.has-inspector { grid-template-columns:minmax(0,1fr) minmax(18rem,22rem); } .topology-studio--advanced .topology-studio-canvas { height:70vh; min-height:34rem; max-height:58rem; } .topology-studio-toolbar { flex-wrap:wrap; } .topology-studio-toolbar__controls { flex-wrap:wrap; } .topology-context-header { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding-bottom:.65rem; border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0); margin-bottom:.65rem; } .topology-context-header strong { font-size:.8125rem; } .topology-studio--advanced .topology-studio-inspector { min-height:0; max-height:80vh; overflow:auto; } .topology-zoom-value { min-width:3.5rem; min-height:2.5rem; border:1px solid var(--ok-line-dfe4ed,#dfe4ed); border-radius:.55rem; background:var(--ok-surface-ffffff,white); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.8125rem; font-weight:650; cursor:pointer; } .topology-studio--advanced.is-focus-mode { position:fixed; inset:12px; z-index:1000; padding:.65rem; background:var(--ok-surface-f3f5fa,#f3f5fa); border:1px solid var(--ok-line-dfe4ed,#dfe4ed); border-radius:1rem; box-shadow:0 0 0 100vmax var(--ok-shadow-0f172a_a502,#0f172a80); overflow:auto; align-items:stretch; } .topology-studio.is-focus-mode .topology-studio-main { display:flex; flex-direction:column; min-height:0; } .topology-studio.is-focus-mode .topology-studio-canvas { flex:1; min-height:12rem; height:auto; max-height:none; } .topology-studio.is-focus-mode .topology-studio-inspector { position:static; max-height:calc(100dvh - 48px); } @media(max-width:1100px) { .topology-studio--advanced.has-inspector { grid-template-columns:minmax(0,1fr); } .topology-studio--advanced .topology-studio-inspector { position:static; max-height:none; } .topology-studio--advanced .topology-studio-canvas { min-height:24rem; height:65vh; } .topology-studio.is-focus-mode .topology-studio-inspector { max-height:45vh; } } @media(max-width:600px) { .topology-studio--advanced .topology-studio-canvas { min-height:20rem; } .topology-studio--advanced.is-focus-mode { inset:4px; padding:.3rem; } .topology-studio-toolbar__controls { gap:.35rem; } .topology-studio-toolbar__controls .topology-studio-tool { min-width:2.5rem; min-height:2.5rem; } } @media print { body.topology-printing .topology-studio--advanced { position:static; box-shadow:none; } body.topology-printing .topology-studio--advanced .topology-studio-canvas { height:auto; min-height:0; max-height:none; } body.topology-printing .topology-studio-stage { zoom:1 !important; } } /* Topologia 5.39 — navegação e mapa geral. */ .topology-viewport { position:relative; min-height:0; } .topology-studio.is-focus-mode .topology-viewport { display:flex; flex:1; min-height:12rem; } .topology-studio.is-focus-mode .topology-viewport>.topology-studio-canvas { width:100%; } .topology-studio-canvas { cursor:grab; } .topology-studio-canvas.is-panning,.topology-studio-canvas.is-pan-mode .topology-studio-node { cursor:grabbing; } .topology-studio-canvas.is-pan-mode:not(.is-panning) .topology-studio-node { cursor:grab; } .topology-studio-canvas:focus-visible,.topology-minimap svg:focus-visible { outline:3px solid var(--ok-line-2563eb,#2563eb); outline-offset:-3px; } .topology-minimap { position:absolute; z-index:5; bottom:.75rem; right:.75rem; width:12rem; padding:.45rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.65rem; background:var(--ok-surface-ffffff_a949,#fffffff2); box-shadow:0 3px 12px var(--ok-shadow-0f172a_a82,#0f172a15); } .topology-minimap[hidden],.topology-search-empty[hidden] { display:none; } .topology-minimap strong { display:flex; justify-content:space-between; gap:.5rem; color:var(--ok-ink-334155,#334155); font-size:.75rem; } .topology-minimap strong span { color:var(--ok-ink-526176,#526176); font-weight:400; } .topology-minimap svg { display:block; width:100%; height:6.5rem; margin:.35rem 0; background:var(--ok-surface-f1f5f9,#f1f5f9); border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.3rem; cursor:crosshair; touch-action:none; } .topology-minimap small { display:block; color:var(--ok-ink-526176,#526176); font-size:.6875rem; } .topology-minimap line { stroke:var(--ok-ink-94a3b8,#94a3b8); stroke-width:8; } .topology-minimap g rect { fill:var(--ok-ink-15803d,#15803d); } .topology-minimap g rect.is-warning { fill:var(--ok-ink-b45309,#b45309); } .topology-minimap g rect.is-offline { fill:var(--ok-ink-dc2626,#dc2626); } .topology-minimap g rect.is-unknown { fill:var(--ok-ink-64748b,#64748b); } .topology-minimap g rect.is-selected { stroke:var(--ok-ink-4f4c8f,#4f4c8f); stroke-width:18; } .topology-minimap [data-topology-minimap-window] { fill:var(--ok-ink-2563eb_a82,#2563eb15); stroke:var(--ok-ink-2563eb,#2563eb); stroke-width:2; vector-effect:non-scaling-stroke; pointer-events:none; } .topology-search-empty { position:absolute; top:1rem; left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100% - 2rem); padding:.65rem .9rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.65rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-334155,#334155); font-size:.8125rem; text-align:center; pointer-events:none; } @media(max-width:600px) { .topology-minimap { width:9rem; bottom:.4rem; right:.4rem; } .topology-minimap svg { height:4.75rem; } .topology-minimap small { display:none; } } @media print { body.topology-printing .topology-minimap,body.topology-printing .topology-search-empty { display:none; } } /* Topologia 5.40 — ferramentas contextuais e conexões pesquisáveis. */ .topology-command-drawer>summary { display:none; } .topology-studio [data-topology-selection-tools][hidden],.topology-studio [data-topology-align][hidden],.topology-studio [data-topology-distribute][hidden],.topology-connection-row[hidden],.topology-connection-empty[hidden],.topology-connection-filters button[hidden] { display:none; } .topology-studio-toolbar__title small,.topology-studio-search input,.topology-studio-toolbar__controls select,.topology-command-button,.topology-command-icon,.topology-command-label,.topology-selection-count,.topology-overlay-popover button,.topology-studio-statusbar,.topology-studio-legend span,.topology-studio-hint { font-size:.6875rem; } .topology-command-button,.topology-command-icon,.topology-studio-tool { min-height:2.5rem; } .topology-connections-panel>summary { display:flex; align-items:center; flex-wrap:wrap; gap:.5rem; cursor:pointer; list-style:none; color:var(--ok-ink-334155,#334155); } .topology-connections-panel>summary::-webkit-details-marker { display:none; } .topology-connections-panel>summary strong { flex:1; font-size:.875rem; } .topology-connections-panel>summary>span:not(.material-symbols-rounded) { color:var(--ok-ink-526176,#526176); font-size:.75rem; } .topology-connections-panel>summary>span:last-child { transition:transform .15s; } .topology-connections-panel[open]>summary>span:last-child { transform:rotate(180deg); } .topology-connection-filters { display:flex; align-items:end; flex-wrap:wrap; gap:.65rem; padding:.75rem 0; } .topology-connection-filters label { display:grid; gap:.25rem; font-size:.75rem; color:var(--ok-ink-334155,#334155); } .topology-connection-filters label:first-child { flex:1; min-width:12rem; } .topology-connection-filters input,.topology-connection-filters select { width:100%; min-height:2.5rem; padding:.45rem .6rem; border:1px solid var(--ok-line-94a3b8,#94a3b8); border-radius:.5rem; background:var(--ok-surface-ffffff,#fff); font:inherit; } .topology-connection-filters>span { padding:.55rem 0; font-size:.75rem; color:var(--ok-ink-526176,#526176); } .topology-connection-list { max-height:28rem; overflow:auto; } .topology-connection-row strong { font-size:.8125rem; } .topology-connection-row small,.topology-link-status { font-size:.6875rem; } .topology-connection-empty { margin:.65rem 0 0; padding:.75rem; background:var(--ok-surface-f8fafc,#f8fafc); border:1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius:.5rem; color:var(--ok-ink-526176,#526176); font-size:.8125rem; } @media(max-width:767px) { .topology-command-drawer>summary { display:flex; align-items:center; gap:.4rem; min-height:2.75rem; padding:.45rem .65rem; color:var(--ok-ink-4f4c8f,#4f4c8f); background:var(--ok-surface-faf9fe,#faf9fe); border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0); font-size:.8125rem; cursor:pointer; list-style:none; } .topology-command-drawer>summary::-webkit-details-marker { display:none; } .topology-command-drawer>summary>span:last-child { margin-left:auto; } .topology-command-drawer[open]>summary>span:last-child { transform:rotate(180deg); } .topology-command-icon { min-width:2.5rem; } .topology-connection-filters label:first-child { flex-basis:100%; } .topology-connection-row { grid-template-columns:1.75rem minmax(0,1fr) auto; } .topology-connection-row__arrow { display:none; } .topology-connection-row small { white-space:normal; overflow-wrap:anywhere; } } @media(prefers-reduced-motion:reduce) { .topology-connections-panel>summary>span:last-child { transition:none; } } @media print { body.topology-printing .topology-command-drawer { display:none; } } /* Topologia 5.41 — filtros operacionais e navegação de atenção. */ .topology-operational-toolbar { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; padding:.4rem .65rem; border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0); background:var(--ok-surface-ffffff,#fff); } .topology-operational-filters { display:flex; gap:.3rem; min-width:0; max-width:100%; overflow-x:auto; padding:.15rem; } .topology-operational-filters button,.topology-attention-navigation button { display:flex; align-items:center; justify-content:center; gap:.35rem; flex-shrink:0; min-height:2.5rem; padding:.3rem .55rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:.5rem; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-526176,#526176); font:inherit; font-size:.75rem; cursor:pointer; white-space:nowrap; } .topology-operational-filters button.is-active { border-color:var(--ok-line-4f4c8f,#4f4c8f); background:var(--ok-surface-eeedf7,#eeedf7); color:var(--ok-ink-4f4c8f,#4f4c8f); font-weight:650; } .topology-operational-filters button span { min-width:1.2rem; padding:.1rem .25rem; border-radius:.3rem; background:var(--ok-surface-f1f5f9,#f1f5f9); color:var(--ok-ink-334155,#334155); font-size:.6875rem; } .topology-attention-navigation { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem; margin-left:auto; } .topology-attention-navigation>span { font-size:.75rem; color:var(--ok-ink-526176,#526176); } .topology-attention-navigation button[data-topology-attention-step] { min-width:2.5rem; padding:.3rem; } .topology-attention-navigation button .material-symbols-rounded { font-size:1.15rem; } .topology-attention-navigation button:disabled { opacity:.4; cursor:default; } .topology-attention-navigation button[hidden] { display:none; } .topology-operational-toolbar button:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb); outline-offset:2px; } @media(max-width:767px) { .topology-operational-filters { width:100%; } .topology-attention-navigation { width:100%; margin-left:0; } .topology-attention-navigation>span { flex:1; } } @media print { body.topology-printing .topology-operational-toolbar { display:none; } } /* Topologia 5.42 — relatório vetorial e prévia de impressão. */ .topology-export-dialog { width:min(58rem,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem); padding:1rem; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius:1rem; color:var(--ok-ink-334155,#334155); overflow:auto; } .topology-export-dialog::backdrop { background:var(--ok-surface-0f172a_a439,#0f172a70); } .topology-export-dialog>header { display:flex; align-items:start; justify-content:space-between; gap:.75rem; } .topology-export-dialog h2 { margin:.1rem 0 .75rem; font-size:1.2rem; } .topology-export-dialog small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.75rem; } .topology-export-dialog>header button { display:grid; place-items:center; min-width:2.5rem; min-height:2.5rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.5rem; background:var(--ok-surface-ffffff,white); cursor:pointer; } .topology-export-options { display:flex; flex-wrap:wrap; align-items:end; gap:.75rem; } .topology-export-options label { display:grid; gap:.3rem; font-size:.8125rem; } .topology-export-options select { min-height:2.5rem; border:1px solid var(--ok-line-94a3b8,#94a3b8); border-radius:.5rem; padding:.4rem; background:var(--ok-surface-ffffff,#fff); font:inherit; } .topology-export-options .topology-export-check { display:flex; align-items:center; gap:.4rem; padding:.55rem 0; } .topology-export-note { margin:.65rem 0; font-size:.8125rem; color:var(--ok-ink-526176,#526176); } .topology-export-dialog>footer { display:flex; justify-content:end; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; } .topology-print-report { display:none; font-family:Arial,sans-serif; color:var(--ok-ink-263247,#263247); background:var(--ok-surface-ffffff,#fff); } .topology-export-preview .topology-print-report { display:block; padding:.75rem; border:1px solid var(--ok-line-cbd5e1,#cbd5e1); border-radius:.5rem; } .topology-report-header { display:flex; align-items:start; justify-content:space-between; gap:1rem; border-bottom:2px solid var(--ok-line-4f4c8f,#4f4c8f); padding-bottom:.5rem; } .topology-report-header>div { min-width:0; } .topology-report-header>div:last-child { display:grid; gap:.2rem; text-align:right; flex-shrink:0; font-size:.75rem; } .topology-report-header h1 { margin:.25rem 0; font-size:1.2rem; overflow-wrap:anywhere; } .topology-report-header p { margin:0; font-size:.875rem; overflow-wrap:anywhere; } .topology-report-header small { color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.6875rem; } .topology-report-summary { padding:.4rem 0; font-size:.75rem; color:var(--ok-ink-526176,#526176); } .topology-report-map svg { display:block; width:100%; height:100%; } .topology-export-preview .topology-report-map { height:20rem; } .topology-report-legend { display:flex; flex-wrap:wrap; gap:.75rem; padding:.5rem 0; font-size:.75rem; } .topology-report-legend span::before { content:''; display:inline-block; width:.65rem; height:.65rem; border-radius:50%; margin-right:.25rem; background:var(--ok-surface-64748b,#64748b); } .topology-report-legend .is-online::before { background:var(--ok-surface-15803d,#15803d); } .topology-report-legend .is-warning::before { background:var(--ok-surface-b45309,#b45309); } .topology-report-legend .is-offline::before { background:var(--ok-surface-dc2626,#dc2626); } .topology-report-footnote { margin:.25rem 0; font-size:.6875rem; color:var(--ok-ink-526176,#526176); } .topology-report-documentation h2 { margin:1rem 0 .4rem; font-size:1rem; break-after:avoid; } .topology-report-documentation p { margin:0 0 .5rem; font-size:.75rem; } .topology-report-documentation table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:9pt; } .topology-report-documentation th,.topology-report-documentation td { padding:5px 6px; border:1px solid var(--ok-line-dbe2ea,#dbe2ea); vertical-align:top; text-align:left; overflow-wrap:anywhere; } .topology-report-documentation th { background:var(--ok-surface-eeedf7,#eeedf7); color:var(--ok-ink-4f4c8f,#4f4c8f); } @media(max-width:600px) { .topology-report-header { flex-direction:column; gap:.5rem; } .topology-report-header>div:last-child { text-align:left; } .topology-export-preview .topology-report-map { height:15rem; } } @page topology-a4 { size:A4 landscape; margin:10mm; @bottom-left { content:"Oktopus Cloud"; font:8pt Arial,sans-serif; color:var(--ok-ink-526176,#526176); } @bottom-right { content:"Página " counter(page) " de " counter(pages); font:8pt Arial,sans-serif; color:var(--ok-ink-526176,#526176); } } @page topology-a3 { size:A3 landscape; margin:10mm; @bottom-left { content:"Oktopus Cloud"; font:8pt Arial,sans-serif; color:var(--ok-ink-526176,#526176); } @bottom-right { content:"Página " counter(page) " de " counter(pages); font:8pt Arial,sans-serif; color:var(--ok-ink-526176,#526176); } } @media print { body.topology-printing { padding:0 !important; margin:0 !important; background:var(--ok-surface-ffffff,#fff) !important; } body.topology-printing>:not(.topology-print-report) { display:none !important; } body.topology-printing>.topology-print-report { display:block !important; visibility:visible !important; page:topology-a4; } body.topology-printing .topology-print-report * { visibility:visible !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; } body.topology-printing[data-topology-paper="a3"]>.topology-print-report { page:topology-a3; } .topology-print-report .topology-report-header { flex-direction:row; } .topology-print-report .topology-report-header>div:last-child { text-align:right; } .topology-print-report .topology-report-map { flex:1; min-height:0; height:auto; } .topology-print-report .topology-report-overview { display:flex; flex-direction:column; height:186mm; break-after:page; } body[data-topology-paper="a3"] .topology-report-overview { height:273mm; } .topology-report-overview:last-child { break-after:auto; } .topology-report-documentation thead { display:table-header-group; } .topology-report-documentation tr { break-inside:avoid; } } .topology-report-nodes th:nth-child(1) { width:30%; } .topology-report-nodes th:nth-child(2) { width:12%; } .topology-report-nodes th:nth-child(3) { width:18%; } .topology-report-nodes th:nth-child(4) { width:10%; } .topology-report-nodes th:nth-child(5) { width:30%; } .topology-report-links th:nth-child(1),.topology-report-links th:nth-child(2) { width:22%; } .topology-report-links th:nth-child(3) { width:20%; } .topology-report-links th:nth-child(4),.topology-report-links th:nth-child(5),.topology-report-links th:nth-child(7) { width:10%; } .topology-report-links th:nth-child(6) { width:6%; } /* 5.43 — atualização de estados sem recarregar os formulários. */ .topology-monitoring-bar { display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;padding:6px 12px;border-bottom:1px solid var(--border-color,var(--ok-line-e2e8f0,#e2e8f0)); } .topology-monitoring-bar [role="status"] { font-size:11px;color:var(--text-muted,var(--ok-ink-64748b,#64748b));margin-left:auto; } .topology-monitoring-bar[aria-busy="true"] [data-topology-refresh] .material-symbols-rounded { opacity:.5; } [data-topology-live-observability][hidden] { display:none !important; } @media (max-width:767px) { .topology-monitoring-bar { padding:6px 8px; }.topology-monitoring-bar [role="status"] { width:100%;margin-left:0; } } /* 5.44 — leitura e navegação contextual das conexões. */ .topology-link-hit { stroke:transparent;stroke-linecap:round;pointer-events:stroke;cursor:pointer; } .topology-studio-link.is-hovered,.topology-studio-link:focus-visible { stroke-width:6;filter:drop-shadow(0 2px 3px var(--ok-shadow-4f4c8f_a240,rgba(79,76,143,.24))); } .topology-studio-node.is-link-endpoint { border-color:var(--topology-primary,var(--ok-line-4f4c8f,#4f4c8f));box-shadow:0 0 0 3px var(--ok-shadow-4f4c8f_a180,rgba(79,76,143,.18)); } .topology-connection-summary { margin:0 12px 10px;padding:10px;border:1px solid var(--ok-line-dcd9ee,#dcd9ee);border-radius:10px;background:var(--ok-surface-faf9ff,#faf9ff);min-width:0; } .topology-connection-summary[hidden] { display:none !important; } .topology-connection-summary__heading { display:flex;align-items:start;justify-content:space-between;gap:8px;font-size:12px; } .topology-connection-summary__heading strong { overflow-wrap:anywhere; }.topology-connection-summary__heading>span { font-size:11px;flex-shrink:0;color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-connection-summary__ends { display:grid;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr);gap:6px;align-items:center;margin:10px 0; } .topology-connection-summary__ends>div { display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere; } .topology-connection-summary__ends small,.topology-connection-summary dt { font-size:10.5px;color:var(--ok-ink-64748b,#64748b); } .topology-connection-summary__ends strong { font-size:11.5px; }.topology-connection-summary__ends div>span { font-size:10.5px;color:var(--ok-ink-475569,#475569); } .topology-connection-summary__ends>.material-symbols-rounded { font-size:18px;color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-connection-summary dl { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 10px; } .topology-connection-summary dd { font-size:11px;font-weight:600;margin:2px 0 0;overflow-wrap:anywhere; } .topology-connection-summary__actions { display:flex;flex-wrap:wrap;gap:5px; }.topology-connection-summary__actions button { padding:5px 7px;background:var(--ok-surface-ffffff,white);border:1px solid var(--ok-line-dcd9ee,#dcd9ee);border-radius:6px;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:10.5px;cursor:pointer; } .topology-connection-summary__actions button:focus-visible { outline:2px solid var(--ok-line-4f4c8f,#4f4c8f);outline-offset:2px; }.topology-connection-summary__actions button:disabled { opacity:.5;cursor:default; } .topology-connection-summary__feedback { display:block;font-size:10.5px;color:var(--ok-ink-475569,#475569);overflow-wrap:anywhere; }.topology-connection-summary__feedback:not(:empty) { margin-top:7px; } .topology-studio-link:focus-visible { outline:none;stroke:var(--topology-primary,var(--ok-ink-4f4c8f,#4f4c8f)); } /* 5.45 — revisão informativa da documentação da topologia. */ .topology-review-panel { border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:14px;background:var(--ok-surface-ffffff,#fff);overflow:hidden;scroll-margin-top:85px; } .topology-review-panel>summary { display:flex;align-items:center;gap:8px;padding:12px 14px;cursor:pointer;list-style:none;font-size:13px; } .topology-review-panel>summary::-webkit-details-marker { display:none; }.topology-review-panel>summary>.material-symbols-rounded { font-size:20px;color:var(--ok-ink-4f4c8f,#4f4c8f); } .topology-review-panel>summary>span:last-child { margin-left:auto; }.topology-review-panel>summary [data-topology-review-total] { font-size:11px;color:var(--ok-ink-64748b,#64748b); } .topology-review-content { padding:0 14px 14px; }.topology-review-content>p { font-size:12px;color:var(--ok-ink-64748b,#64748b);margin:0 0 10px; } .topology-review-controls { display:flex;align-items:end;flex-wrap:wrap;gap:8px; }.topology-review-controls label { display:flex;flex-direction:column;gap:4px;font-size:10.5px;color:var(--ok-ink-475569,#475569);flex:1 1 180px;min-width:0; } .topology-review-controls input,.topology-review-controls select { min-width:0;width:100%;height:33px;padding:5px 9px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:8px;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-334155,#334155);font-size:12px; } .topology-review-controls button,.topology-review-item button { padding:7px 9px;border:1px solid var(--ok-line-dcd9ee,#dcd9ee);border-radius:7px;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-4f4c8f,#4f4c8f);cursor:pointer;font-size:11px; } .topology-review-controls [hidden],.topology-review-empty[hidden] { display:none !important; } .topology-review-panel button:focus-visible,.topology-review-panel input:focus-visible,.topology-review-panel select:focus-visible,.topology-review-panel summary:focus-visible { outline:2px solid var(--ok-line-4f4c8f,#4f4c8f);outline-offset:2px; } .topology-review-counts { display:flex;flex-wrap:wrap;justify-content:space-between;gap:5px;margin:10px 0;color:var(--ok-ink-64748b,#64748b);font-size:11px; } .topology-review-list { display:grid;gap:7px;max-height:450px;overflow:auto; }.topology-review-item { display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px;border:1px solid var(--ok-line-eee2ce,#eee2ce);border-left:3px solid var(--ok-line-d6a44c,#d6a44c);border-radius:8px;background:var(--ok-surface-fffdfa,#fffdfa); } .topology-review-item.is-info { border-color:var(--ok-line-dce2ee,#dce2ee);border-left-color:var(--ok-line-94a3b8,#94a3b8);background:var(--ok-surface-f8fafc,#f8fafc); }.topology-review-item>div:first-child { min-width:0;overflow-wrap:anywhere; }.topology-review-item strong { font-size:12px;color:var(--ok-ink-334155,#334155); }.topology-review-item p { font-size:11px;color:var(--ok-ink-64748b,#64748b);margin:3px 0 0; } .topology-review-item__actions { display:flex;flex-wrap:wrap;justify-content:end;gap:5px;flex:0 0 auto;max-width:45%; }.topology-review-feedback { display:block;font-size:11px;color:var(--ok-ink-64748b,#64748b);overflow-wrap:anywhere; }.topology-review-feedback:not(:empty) { margin-top:9px; } @media (max-width:767px) { .topology-review-content { padding:0 10px 10px; }.topology-review-panel>summary { padding:10px; }.topology-review-controls label { flex-basis:100%; }.topology-review-item { flex-direction:column;align-items:stretch;gap:7px; }.topology-review-item__actions { max-width:none;justify-content:start; } } /* 5.46 — caminho documentado entre equipamentos. */ .topology-path-panel { margin:0 10px 8px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:9px;background:var(--ok-surface-f8faff,#f8faff); } .topology-path-panel>summary { display:flex;align-items:center;gap:7px;padding:8px 10px;cursor:pointer;list-style:none;font-size:12px; }.topology-path-panel>summary::-webkit-details-marker { display:none; }.topology-path-panel>summary>.material-symbols-rounded { font-size:19px;color:var(--ok-ink-2563eb,#2563eb); }.topology-path-panel>summary>span:last-child { margin-left:auto; } .topology-path-content { padding:0 10px 10px; }.topology-path-content>p { margin:0 0 9px;font-size:11px;color:var(--ok-ink-64748b,#64748b); } .topology-path-controls { display:flex;flex-wrap:wrap;gap:7px;align-items:end; }.topology-path-controls label { display:flex;flex-direction:column;gap:3px;flex:1 1 155px;min-width:0;font-size:10.5px;color:var(--ok-ink-475569,#475569); } .topology-path-controls select { width:100%;min-width:0;height:32px;padding:4px 7px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:7px;background:var(--ok-surface-ffffff,white);font-size:11px;color:var(--ok-ink-334155,#334155); } .topology-path-panel button { padding:6px 8px;border:1px solid var(--ok-line-ccd9f1,#ccd9f1);border-radius:7px;background:var(--ok-surface-ffffff,white);color:var(--ok-ink-2563eb,#2563eb);font-size:11px;cursor:pointer; }.topology-path-panel button:disabled { opacity:.5;cursor:default; }.topology-path-panel button:focus-visible,.topology-path-panel select:focus-visible,.topology-path-panel summary:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } .topology-path-controls [data-topology-path-swap] { width:32px;height:32px;display:flex;align-items:center;justify-content:center; }.topology-path-controls .material-symbols-rounded { font-size:19px; } .topology-path-content>.topology-path-status { margin:9px 0;color:var(--ok-ink-334155,#334155); }.topology-path-result[hidden] { display:none !important; } .topology-path-result ol { display:grid;gap:6px;max-height:260px;overflow:auto;margin:0 0 8px;padding-left:24px; }.topology-path-result li { padding:7px 8px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:7px;background:var(--ok-surface-ffffff,white);color:var(--ok-ink-2563eb,#2563eb); }.topology-path-result li>div { display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere; }.topology-path-result li strong { font-size:11px;color:var(--ok-ink-334155,#334155); }.topology-path-result li span { font-size:10.5px;color:var(--ok-ink-64748b,#64748b); }.topology-path-result li button { margin-top:5px; } .topology-path-actions { display:flex;align-items:center;flex-wrap:wrap;gap:7px; }.topology-path-actions>span { font-size:10.5px;color:var(--ok-ink-64748b,#64748b); }.topology-path-actions i { display:inline-block;width:16px;border-top:3px solid var(--ok-line-2563eb,#2563eb);margin-right:5px; }.topology-path-content>[data-topology-path-feedback] { display:block;margin-top:6px;font-size:11px;color:var(--ok-ink-64748b,#64748b);overflow-wrap:anywhere; } .topology-studio-link.is-path-link { stroke:var(--ok-ink-2563eb,#2563eb);stroke-width:5; }.topology-studio-link.is-path-link.is-selected { stroke:var(--topology-primary,var(--ok-ink-4f4c8f,#4f4c8f)); }.topology-studio-node.is-path-node { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } @media (max-width:767px) { .topology-path-controls label { flex-basis:100%; }.topology-path-controls [data-topology-path-swap] { order:1; }.topology-path-result li { padding:7px; } } .topology-studio-link.is-path-link:focus-visible { stroke:var(--topology-primary,var(--ok-ink-4f4c8f,#4f4c8f));stroke-width:7; } .topology-path-controls [data-topology-path-swap] { overflow:hidden;flex-shrink:0; } .topology-path-controls [data-topology-path-swap] .material-symbols-rounded { width:19px;height:19px;line-height:19px;overflow:hidden;flex-shrink:0;pointer-events:none; } /* 5.47 — impacto, diagnóstico, versões e visão autorizada no portal. */ .topology-insight-list { display:grid;gap:7px;max-height:520px;overflow:auto;min-width:0; }.topology-insight-list p { font-size:11px;color:var(--ok-ink-64748b,#64748b);margin:4px 0; }.topology-insight-list>button { justify-self:start; }.topology-insight-list .crm-table { font-size:11px; }.topology-insight-list td { overflow-wrap:anywhere;max-width:300px; }.topology-insights[aria-busy="true"] { opacity:.75; } .topology-sharing { display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:10px;background:var(--ok-surface-ffffff,#fff);font-size:11px; }.topology-sharing button,.topology-inspector-actions a,.topology-inspector-actions>button { border:1px solid var(--ok-line-dcd9ee,#dcd9ee);border-radius:6px;background:var(--ok-surface-ffffff,#fff);padding:5px 7px;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:11px;text-decoration:none;cursor:pointer; } .topology-studio-node.is-impact-node { outline:3px solid var(--ok-line-d97706,#d97706);outline-offset:3px; }.topology-studio-node.is-impact-removed { outline:3px dashed var(--ok-line-dc2626,#dc2626);outline-offset:3px; }.topology-studio-link.is-impact-removed { stroke:var(--ok-ink-dc2626,#dc2626);stroke-width:6;stroke-dasharray:4 6; } .topology-public-cards { display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:15px 0; }.topology-public-cards>a { display:flex;flex-direction:column;gap:6px;padding:15px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:12px;color:var(--ok-ink-334155,#334155);background:var(--ok-surface-ffffff,#fff);text-decoration:none;overflow-wrap:anywhere; }.topology-public-cards small { color:var(--ok-ink-64748b,#64748b); } .topology-public-canvas { max-width:100%;height:450px;overflow:auto;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:10px;background:var(--ok-surface-f8fafc,#f8fafc); }.topology-public-canvas svg { display:block;max-width:none; }.topology-public-controls { display:flex;align-items:center;gap:10px;margin:10px 0; }.topology-public-controls label { display:flex;align-items:center;gap:8px; }.topology-public-controls button { border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:7px;padding:6px 9px;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-4f4c8f,#4f4c8f);cursor:pointer; } @media (max-width:767px) { .topology-sharing { flex-wrap:wrap; }.topology-public-canvas { height:350px; } } .topology-reading-button { padding:6px 8px;border:1px solid var(--ok-line-ccd9f1,#ccd9f1);border-radius:7px;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-2563eb,#2563eb);font-size:11px;cursor:pointer;flex-shrink:0; }.topology-reading-button:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } /* 5.48 — ferramentas compactas, com grupos preservados. */ .topology-tool-panels { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:6px 10px 8px;min-width:0; } .topology-tool-panels>.topology-path-panel { margin:0;min-width:0; } .topology-tool-panels>.topology-path-panel[open] { grid-column:1/-1; } .topology-tool-panels .topology-path-panel>summary { padding:6px 8px;min-height:32px;gap:5px; } .topology-tool-panels .topology-path-panel>summary strong { min-width:0;font-size:11px;line-height:1.3; } .topology-tool-panels .topology-path-content { padding:0 8px 8px; } .topology-tool-panels .topology-path-content>p { margin:5px 0 7px;line-height:1.4; } .topology-tool-panels .topology-path-controls { gap:5px;align-items:center; } .topology-tool-panels .topology-path-controls label { flex:1 1 175px;flex-direction:row;align-items:center;gap:5px; } .topology-tool-panels .topology-path-controls select { flex:1;min-width:65px;width:auto; } .topology-tool-panels .topology-path-controls button { min-height:32px;display:inline-flex;align-items:center;justify-content:center;gap:4px; } .topology-studio-commandbar { flex-wrap:wrap;gap:5px;padding:5px 10px; } .topology-command-group { flex:0 1 auto;flex-wrap:wrap;gap:4px; } .topology-command-button,.topology-command-icon,.topology-studio-tool { min-height:32px; } .topology-monitoring-bar { gap:5px 8px;padding:5px 10px; } @media(max-width:767px) { .topology-tool-panels { grid-template-columns:repeat(2,minmax(0,1fr));padding:6px 8px; } .topology-tool-panels>.topology-path-panel:last-child:not([open]) { grid-column:1/-1; } .topology-tool-panels .topology-path-controls label { flex:1 1 calc(50% - 5px);flex-direction:column;align-items:stretch;gap:3px; } .topology-tool-panels .topology-path-controls select { width:100%;flex:none;min-width:0; } .topology-tool-panels .topology-path-controls [data-topology-path-swap] { order:0; } .topology-command-group { width:auto;max-width:100%; } .topology-studio-toolbar__controls { display:flex;flex-wrap:wrap;gap:5px; } .topology-studio-search { flex:1 1 100%; } .topology-studio-toolbar__controls>select { flex:1 1 130px;min-width:0; } .topology-command-button,.topology-command-icon,.topology-studio-tool { min-height:36px; } .topology-tool-panels .topology-path-controls button { min-height:36px; } .topology-monitoring-bar [role="status"] { width:auto;flex:1 1 150px; } } /* 5.49 — estados/monitoramento unificados e análises com abas. */ .topology-status-controls { display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;padding:5px 10px;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0);background:var(--ok-surface-ffffff,#fff);min-width:0; } .topology-status-controls .topology-operational-toolbar { flex:1 1 540px;min-width:0;gap:5px;padding:0;border:0; } .topology-status-controls .topology-monitoring-bar { flex:0 1 auto;min-width:0;padding:0;border:0; } .topology-status-controls .topology-monitoring-bar [role="status"] { margin-left:0;max-width:230px;line-height:1.3; } .topology-tool-panels.is-tabbed { display:block;padding:5px 10px 8px; } .topology-tool-tabbar { display:flex;align-items:center;gap:6px;min-width:0; } .topology-tool-tabbar[hidden],.topology-tool-tabbar button[hidden],.topology-tool-panels.is-tabbed>details[hidden] { display:none!important; } .topology-tool-tabbar>[role="tablist"] { display:flex;gap:4px;min-width:0;flex:1; } .topology-tool-tabbar button { display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 9px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:7px;background:var(--ok-surface-ffffff,#fff);font-size:11px;color:var(--ok-ink-475569,#475569);cursor:pointer;line-height:1.3; } .topology-tool-tabbar [aria-selected="true"] { border-color:var(--ok-line-c7c3e5,#c7c3e5);background:var(--ok-surface-f0eff9,#f0eff9);color:var(--ok-ink-4f4c8f,#4f4c8f);font-weight:600; } .topology-tool-tabbar button:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } .topology-tool-tabbar [data-tool-close] { padding:5px;flex:none; }.topology-tool-tabbar .material-symbols-rounded { width:20px;height:20px;font-size:20px;line-height:20px;overflow:hidden; } .topology-tool-panels.is-tabbed>details { margin-top:6px; } .topology-tool-panels.is-tabbed>details>summary { display:none; } .topology-tool-panels.is-tabbed .topology-path-content { padding:8px; } @media(max-width:767px) { .topology-status-controls { padding:5px 8px; } .topology-status-controls .topology-monitoring-bar { flex:1 1 100%; } .topology-tool-panels.is-tabbed { padding:5px 8px 7px; } .topology-tool-tabbar button { min-height:36px;padding:5px 7px; } .topology-tool-tabbar>[role="tablist"] { flex-wrap:wrap; } } /* 5.50 — área de trabalho visual, mapa em primeiro plano. */ .topology-workspace-v550 { gap:10px; } .topology-workspace-v550 .topology-studio-metrics { display:flex;flex-wrap:wrap;gap:6px;margin:0; } .topology-workspace-v550 .topology-studio-metrics>article { display:flex;align-items:center;gap:7px;flex:0 1 auto;min-height:34px;padding:5px 10px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:8px;box-shadow:none;background:var(--ok-surface-ffffff,#fff); } .topology-workspace-v550 .topology-studio-metrics>article>span { width:20px;height:20px;font-size:20px;line-height:20px;background:none; } .topology-workspace-v550 .topology-studio-metrics>article>div { display:flex;align-items:center;gap:7px; } .topology-workspace-v550 .topology-studio-metrics small { font-size:11px; }.topology-workspace-v550 .topology-studio-metrics strong { font-size:14px;line-height:1.2; } .topology-workspace-v550 .topology-sharing { margin:0;padding:5px 10px;border:0;background:transparent;font-size:11px; } .topology-workspace-v550 .topology-studio-main { border-radius:12px;border-color:var(--ok-line-dce2ee,#dce2ee);box-shadow:0 4px 18px var(--ok-shadow-0f172a_a24,#0f172a06); } .topology-workspace-v550 .topology-studio-toolbar { padding:8px 10px;gap:6px;background:var(--ok-surface-ffffff,#fff);display:block; } .topology-workspace-v550 .topology-studio-toolbar__title { display:none; } .topology-workspace-v550 .topology-studio-toolbar__controls { display:flex;align-items:center;flex-wrap:wrap;gap:6px;width:100%; } .topology-workspace-v550 .topology-studio-search { flex:1 1 220px;min-width:140px;width:auto; } .topology-workspace-v550 .topology-studio-search input { width:100%; } .topology-workspace-v550 .topology-studio-toolbar__controls>select { flex:0 1 165px;max-width:165px; } .topology-workspace-v550 .topology-status-controls { background:var(--ok-surface-f8fafc,#f8fafc);padding:6px 10px;gap:4px 8px; } .topology-workspace-v550 .topology-status-controls .topology-operational-toolbar { flex:1 1 480px; } .topology-workspace-v550 .topology-operational-filters button { min-height:30px;padding:4px 8px;border-radius:6px;font-size:11px; } .topology-workspace-v550 .topology-command-drawer>summary { display:flex;align-items:center;gap:6px;padding:7px 10px;min-height:34px;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0);background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:12px;cursor:pointer;list-style:none; } .topology-workspace-v550 .topology-command-drawer>summary::-webkit-details-marker { display:none; } .topology-workspace-v550 .topology-command-drawer>summary>span:last-child { margin-left:auto; } .topology-workspace-v550 .topology-command-drawer[open]>summary>span:last-child { transform:rotate(180deg); } .topology-workspace-v550 .topology-studio-statusbar { padding:4px 10px;font-size:11px;line-height:1.35; } .topology-workspace-v550 .topology-studio-footer { padding:6px 10px; } .topology-visual-menu { position:relative;flex:none; } .topology-visual-menu>summary { display:flex;align-items:center;gap:4px;min-height:32px;padding:5px 8px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:7px;color:var(--ok-ink-475569,#475569);background:var(--ok-surface-ffffff,#fff);font-size:11px;cursor:pointer;list-style:none; } .topology-visual-menu>summary::-webkit-details-marker { display:none; } .topology-visual-menu>summary .material-symbols-rounded { width:18px;height:18px;line-height:18px;font-size:18px;overflow:hidden; } .topology-visual-menu>summary:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } .topology-visual-actions { position:absolute;right:0;top:calc(100% + 6px);z-index:30;display:flex;flex-wrap:wrap;gap:5px;width:252px;max-width:calc(100vw - 40px);padding:9px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:10px;background:var(--ok-surface-ffffff,#fff);box-shadow:0 10px 26px var(--ok-shadow-0f172a_a110,#0f172a1c); } .topology-visual-actions .topology-studio-tool { display:flex;align-items:center;justify-content:center;min-width:32px; } .topology-workspace-v550 .topology-studio-inspector { border-radius:12px;background:var(--ok-surface-ffffff,#fff); } .topology-workspace-v550 .topology-context-header { position:sticky;top:0;z-index:3;background:var(--ok-surface-ffffff,#fff);padding:5px 0 8px; } @media(max-width:767px) { .topology-workspace-v550 .topology-studio-metrics>article { flex:1 1 calc(50% - 6px);justify-content:flex-start;padding:5px 8px; } .topology-workspace-v550 .topology-studio-toolbar__controls { gap:5px; } .topology-workspace-v550 .topology-studio-search { flex:1 1 100%; } .topology-workspace-v550 .topology-studio-toolbar__controls>select { flex:1;max-width:none;min-width:0; } .topology-workspace-v550 .topology-visual-menu>summary { min-height:36px; } .topology-workspace-v550 .topology-studio--advanced.has-inspector>.topology-studio-inspector { position:fixed;inset:auto 8px 8px;z-index:1005;max-height:48dvh;overflow:auto;padding:10px 12px;border:1px solid var(--ok-line-cbd5e1,#cbd5e1);border-radius:16px 16px 10px 10px;box-shadow:0 -6px 30px var(--ok-shadow-0f172a_a141,#0f172a24);overscroll-behavior:contain; } .topology-workspace-v550 .topology-context-header { padding-top:3px; } .topology-workspace-v550 .topology-sharing { flex-wrap:wrap;gap:5px; } } @media print { body.topology-printing .topology-visual-menu { display:none!important; } } .topology-visual-actions .material-symbols-rounded { width:20px;height:20px;font-size:20px;line-height:20px;overflow:hidden;flex-shrink:0;pointer-events:none; } /* 5.51 — rede do cliente, mapa e listas acessíveis. */ .portal-network-page { gap:12px; } .portal-network-back { display:inline-flex;align-items:center;gap:5px;align-self:start;font-size:12px;color:var(--ok-ink-4f4c8f,#4f4c8f);text-decoration:none; } .portal-network-back .material-symbols-rounded { font-size:18px; } .portal-network-header { display:flex;align-items:center;justify-content:space-between;gap:12px; }.portal-network-header h1 { font-size:clamp(20px,3vw,28px);line-height:1.2;color:var(--ok-ink-1e293b,#1e293b);margin:4px 0;overflow-wrap:anywhere; }.portal-network-header p { font-size:13px;color:var(--ok-ink-64748b,#64748b);margin:0; } .portal-network-eyebrow { font-size:11px;color:var(--ok-ink-4f4c8f,#4f4c8f);font-weight:600; }.portal-network-version { font-size:11px;color:var(--ok-ink-64748b,#64748b);background:var(--ok-surface-f1f5f9,#f1f5f9);border-radius:20px;padding:5px 10px;white-space:nowrap; } .portal-network-summary { display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;padding:10px 12px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:10px;background:var(--ok-surface-ffffff,#fff);font-size:12px;color:var(--ok-ink-475569,#475569); }.portal-network-summary strong { color:var(--ok-ink-334155,#334155);font-size:15px; }.portal-network-note { display:flex;align-items:center;gap:5px;margin-left:auto;color:var(--ok-ink-64748b,#64748b);font-size:11px; }.portal-network-note .material-symbols-rounded { font-size:17px; } .portal-network-workspace { min-width:0;background:var(--ok-surface-ffffff,#fff);border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:14px;overflow:hidden;box-shadow:0 4px 20px var(--ok-shadow-0f172a_a24,#0f172a06); } .portal-network-tabbar { display:flex;gap:5px;padding:9px 12px;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0);background:var(--ok-surface-fafbfe,#fafbfe); }.portal-network-tabbar button { min-height:36px;padding:6px 12px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--ok-ink-64748b,#64748b);font-size:12px;cursor:pointer; }.portal-network-tabbar [aria-selected="true"] { background:var(--ok-surface-ffffff,#fff);border-color:var(--ok-line-dddaf0,#dddaf0);color:var(--ok-ink-4f4c8f,#4f4c8f);box-shadow:0 2px 6px var(--ok-shadow-0f172a_a20,#0f172a05);font-weight:600; } .portal-network-page [hidden] { display:none!important; }.portal-network-page button:focus-visible,.portal-network-page input:focus-visible,.portal-network-back:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } .portal-network-page .topology-public-controls { margin:0;padding:9px 12px;display:flex;flex-wrap:wrap;gap:8px 14px;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0);font-size:11px; }.portal-network-hint { margin-right:auto;color:var(--ok-ink-64748b,#64748b); }.portal-network-page .topology-public-controls label { font-size:11px;gap:5px; }.portal-network-page .topology-public-controls input { width:100px;accent-color:var(--ok-ink-4f4c8f,#4f4c8f); }.portal-network-page .topology-public-controls output { min-width:34px; }.portal-network-page .topology-public-controls button { min-height:34px;display:inline-flex;gap:5px;align-items:center; }.portal-network-page .topology-public-controls .material-symbols-rounded { width:18px;height:18px;font-size:18px;line-height:18px;overflow:hidden; } .portal-network-page .topology-public-canvas { height:clamp(340px,55vh,560px);border:0;border-radius:0;max-width:100%;background-color:var(--ok-surface-f8fafc,#f8fafc);background-image:radial-gradient(var(--ok-surface-cbd5e1,#cbd5e1) .7px,transparent .7px);background-size:18px 18px;overscroll-behavior:contain; }.portal-network-page .topology-public-canvas svg { margin:auto; } .portal-network-edge { stroke:var(--ok-ink-b6c2d3,#b6c2d3);stroke-width:3; }.portal-network-edge.is-selected { stroke:var(--ok-ink-4f4c8f,#4f4c8f);stroke-width:5; } .portal-network-node { cursor:pointer; }.portal-network-node rect { fill:var(--ok-ink-ffffff,#fff);stroke:var(--ok-ink-cbd5e1,#cbd5e1);stroke-width:1.5; }.portal-network-node circle { fill:var(--ok-ink-94a3b8,#94a3b8); }.portal-network-node[data-state="online"] circle { fill:var(--ok-ink-059669,#059669); }.portal-network-node[data-state="offline"] circle { fill:var(--ok-ink-dc2626,#dc2626); }.portal-network-node[data-state="warning"] circle { fill:var(--ok-ink-d97706,#d97706); }.portal-network-node.is-selected rect,.portal-network-node:focus-visible rect { fill:var(--ok-ink-f3f1fb,#f3f1fb);stroke:var(--ok-ink-4f4c8f,#4f4c8f);stroke-width:3; }.portal-network-node-name { fill:var(--ok-ink-334155,#334155);font-size:12px;font-family:system-ui,sans-serif;font-weight:600; }.portal-network-node-state { fill:var(--ok-ink-64748b,#64748b);font-size:11px;font-family:system-ui,sans-serif; } .portal-network-selection { display:flex;justify-content:space-between;align-items:center;gap:8px;padding:10px 12px;border-top:1px solid var(--ok-line-dddaf0,#dddaf0);background:var(--ok-surface-f7f6fd,#f7f6fd); }.portal-network-selection>div { display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere; }.portal-network-selection strong { font-size:13px;color:var(--ok-ink-334155,#334155); }.portal-network-selection span { font-size:11px;color:var(--ok-ink-64748b,#64748b); }.portal-network-selection button { border:0;border-radius:6px;background:var(--ok-surface-ffffff,#fff);width:32px;height:32px;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center; }.portal-network-selection button .material-symbols-rounded { font-size:20px; } .portal-network-legend { display:flex;flex-wrap:wrap;gap:8px 16px;padding:9px 12px;border-top:1px solid var(--ok-line-e2e8f0,#e2e8f0);font-size:11px;color:var(--ok-ink-64748b,#64748b); }.portal-network-legend span { display:flex;align-items:center;gap:5px; }.portal-network-legend i { width:7px;height:7px;border-radius:50%;background:var(--ok-surface-94a3b8,#94a3b8); }.portal-network-legend .is-online { background:var(--ok-surface-059669,#059669); }.portal-network-legend .is-offline { background:var(--ok-surface-dc2626,#dc2626); }.portal-network-legend .is-warning { background:var(--ok-surface-d97706,#d97706); } .portal-network-list-head { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;padding:12px; }.portal-network-list-head h2 { font-size:15px;margin:0;color:var(--ok-ink-334155,#334155); }.portal-network-list-head>span { font-size:11px;color:var(--ok-ink-64748b,#64748b); }.portal-network-search { display:flex;align-items:center;gap:5px;border:1px solid var(--ok-line-cbd5e1,#cbd5e1);border-radius:8px;padding:6px 8px; }.portal-network-search .material-symbols-rounded { font-size:18px; }.portal-network-search input { min-width:0;width:180px;border:0;background:transparent;font-size:12px; } .portal-network-page .crm-table { font-size:12px; }.portal-network-page td { overflow-wrap:anywhere; }.portal-network-page td strong { display:block; }.portal-network-locate { display:block;margin-top:3px;border:0;background:transparent;padding:2px 0;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:11px;cursor:pointer; }.portal-network-badge { display:inline-flex;padding:3px 7px;border-radius:20px;font-size:11px;background:var(--ok-surface-f1f5f9,#f1f5f9);color:var(--ok-ink-64748b,#64748b);white-space:nowrap; }.portal-network-badge[data-state="online"] { background:var(--ok-surface-ecfdf5,#ecfdf5);color:var(--ok-ink-047857,#047857); }.portal-network-badge[data-state="offline"] { background:var(--ok-surface-fef2f2,#fef2f2);color:var(--ok-ink-b91c1c,#b91c1c); }.portal-network-badge[data-state="warning"],.portal-network-badge[data-state="degraded"] { background:var(--ok-surface-fffbeb,#fffbeb);color:var(--ok-ink-b45309,#b45309); }.portal-network-empty { padding:24px 12px;text-align:center;color:var(--ok-ink-64748b,#64748b);font-size:13px; } @media(max-width:767px) { .portal-network-note { margin-left:0;flex-basis:100%; }.portal-network-header { align-items:flex-start; }.portal-network-page .topology-public-canvas { height:360px; }.portal-network-hint { flex-basis:100%; }.portal-network-tabbar { padding:7px 8px; }.portal-network-tabbar button { padding:6px 9px; }.portal-network-search { max-width:100%; }.portal-network-search input { width:min(180px,55vw); } } /* 5.52 — propostas comerciais, fluxo e apresentação. */ .proposals-page { gap:12px; }.proposal-summary,.proposal-actions,.proposal-checks,.proposal-editor-actions { display:flex;align-items:center;flex-wrap:wrap;gap:8px; }.proposal-summary { gap:10px 20px;padding:10px 12px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:10px;background:var(--ok-surface-ffffff,#fff);font-size:12px;color:var(--ok-ink-64748b,#64748b); }.proposal-summary strong { margin-left:5px;color:var(--ok-ink-334155,#334155); }.proposal-filter,.proposal-fields { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.proposal-filter { margin-bottom:12px; }.proposal-steps { display:flex;gap:6px;flex-wrap:wrap; }.proposal-steps button { padding:8px 12px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:8px;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-64748b,#64748b);font-size:12px;cursor:pointer; }.proposal-steps button.is-active { background:var(--ok-surface-f0eff9,#f0eff9);color:var(--ok-ink-4f4c8f,#4f4c8f);border-color:var(--ok-line-c7c3e5,#c7c3e5); }.proposal-editor { padding:16px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:12px;background:var(--ok-surface-ffffff,#fff); }.proposal-line { margin:0 0 12px;padding:12px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:9px; }.proposal-line legend { font-size:12px;font-weight:600;color:var(--ok-ink-475569,#475569); }.proposal-line .proposal-fields { grid-template-columns:repeat(3,minmax(0,1fr)); }.proposal-label { display:flex;flex-direction:column;gap:6px;font-size:12px;color:var(--ok-ink-475569,#475569);margin:12px 0; }.proposal-label textarea,.proposal-share input { padding:10px;border:1px solid var(--ok-line-cbd5e1,#cbd5e1);border-radius:8px;font:inherit;background:var(--ok-surface-ffffff,#fff);resize:vertical; }.proposal-editor-actions { margin-top:16px;padding-top:12px;border-top:1px solid var(--ok-line-e2e8f0,#e2e8f0); }.proposal-hint { font-size:12px;line-height:1.6;color:var(--ok-ink-64748b,#64748b); }.proposal-text-button { border:0;padding:6px 0;color:var(--ok-ink-b91c1c,#b91c1c);background:transparent;font-size:11px;cursor:pointer; }.proposal-share { padding:12px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:10px;background:var(--ok-surface-f8fafc,#f8fafc); }.proposal-share label { display:flex;flex-direction:column;gap:6px;font-size:12px; }.proposal-share input { width:100%; }.proposal-share p { margin:6px 0 0;color:var(--ok-ink-64748b,#64748b);font-size:11px; }.proposal-history { border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:10px;padding:12px;background:var(--ok-surface-ffffff,#fff);font-size:12px; }.proposal-history summary { cursor:pointer;font-weight:600;color:var(--ok-ink-475569,#475569); }.proposal-history li { margin:6px 0; }.proposal-hash { overflow-wrap:anywhere;color:var(--ok-ink-64748b,#64748b);font-size:11px; }.proposal-checks { margin-bottom:12px; }.proposal-checks label,.proposal-consent { display:flex;align-items:flex-start;gap:7px;font-size:12px;color:var(--ok-ink-475569,#475569); }.proposal-consent { margin:12px 0;line-height:1.6; }.proposal-checks input,.proposal-consent input { margin-top:3px;accent-color:var(--ok-ink-4f4c8f,#4f4c8f); }.proposal-presentation { max-width:1000px;margin:auto; }.proposal-actions>a { color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:12px; }.proposal-actions>span { margin-left:auto;color:var(--ok-ink-64748b,#64748b);font-size:12px; }.proposals-page button:focus-visible,.proposals-page input:focus-visible,.proposals-page textarea:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px; } @media(max-width:767px) { .proposal-filter,.proposal-fields,.proposal-line .proposal-fields { grid-template-columns:1fr; }.proposal-editor { padding:12px; }.proposal-steps button { flex:1 1 calc(50% - 6px); }.proposal-actions>span { margin-left:0;flex-basis:100%; } } /* BEGIN_PROPOSAL_PRINT */ .proposal-document { min-width:0;box-sizing:border-box;font-family:DejaVu Sans,Arial,sans-serif;color:var(--ok-ink-334155,#334155);background:var(--ok-surface-ffffff,#fff);padding:28px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:12px;line-height:1.55; } .proposal-document header { border-bottom:2px solid var(--ok-line-4f4c8f,#4f4c8f);padding-bottom:15px;margin-bottom:18px; }.proposal-eyebrow { font-size:11px;font-weight:bold;color:var(--ok-ink-4f4c8f,#4f4c8f); }.proposal-document h1 { font-size:25px;line-height:1.25;color:var(--ok-ink-1e293b,#1e293b);margin:8px 0;overflow-wrap:anywhere; }.proposal-document header p { color:var(--ok-ink-64748b,#64748b);font-size:12px;margin:0; }.proposal-document h2 { color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:16px;margin:22px 0 10px; }.proposal-totals { display:table;width:100%;border-spacing:8px 0;margin:16px -8px; }.proposal-totals>div { display:table-cell;width:50%;padding:14px;background:var(--ok-surface-f3f2fa,#f3f2fa);border-radius:8px;vertical-align:top; }.proposal-totals small { display:block;font-size:11px;color:var(--ok-ink-64748b,#64748b); }.proposal-totals strong { display:block;font-size:22px;color:var(--ok-ink-4f4c8f,#4f4c8f);margin-top:4px; }.proposal-table-wrap { overflow:auto;max-width:100%; }.proposal-document table { width:100%;border-collapse:collapse;font-size:11px; }.proposal-document th { text-align:left;background:var(--ok-surface-f8fafc,#f8fafc);font-weight:bold;color:var(--ok-ink-475569,#475569); }.proposal-document td,.proposal-document th { padding:9px 7px;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0);vertical-align:top; }.proposal-document td:first-child { width:38%;overflow-wrap:anywhere; }.proposal-document td small { display:block;color:var(--ok-ink-64748b,#64748b);font-size:10px; }.proposal-prose { white-space:pre-wrap;overflow-wrap:anywhere;font-size:12px;line-height:1.7; }.proposal-print { background:var(--ok-surface-ffffff,#fff);margin:0;padding:22px; }.proposal-print-hint { font-size:12px;color:var(--ok-ink-64748b,#64748b); } @media(max-width:767px) { .proposal-document { padding:16px; }.proposal-document h1 { font-size:21px; }.proposal-totals strong { font-size:18px; }.proposal-totals>div { padding:10px; }.proposal-document table { min-width:540px; } } @media print { @page { margin:18mm 15mm; }.proposal-print { padding:0; }.proposal-document { padding:0;border:0;border-radius:0; }.proposal-print-hint { display:none; }.proposal-document thead { display:table-header-group; }.proposal-document tr { page-break-inside:avoid; }.proposal-document h2 { page-break-after:avoid; }.proposal-document table { min-width:0; }.proposal-table-wrap { overflow:visible; } } /* END_PROPOSAL_PRINT */ /* 5.53 — reutilização comercial compacta. */ .proposal-reuse { margin-bottom:12px; }.proposal-reuse-row { display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) auto;align-items:end;gap:10px;margin:12px 0; }.proposal-reuse-row .ds-field { min-width:0; }.proposal-reuse-row .ds-control { width:100%; }.proposal-reuse-row>* { min-width:0; } @media(max-width:767px) { .proposal-reuse-row { grid-template-columns:1fr; }.proposal-reuse-row .ds-button { justify-content:center; } } /* 5.54 — histórico de análise comercial. */ .proposal-approval-record { padding:10px 0;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0); }.proposal-approval-record:last-child { border-bottom:0; }.proposal-approval-record p { margin:4px 0; } /* 5.55 — BI comercial compacto. */ .proposal-bi-page>* { min-width:0; }.proposal-bi-page .crm-table-wrap { max-width:100%;overflow-x:auto; } .proposal-bi-filters { display:grid;grid-template-columns:minmax(130px,1fr) minmax(130px,1fr) minmax(170px,2fr) auto;align-items:end;gap:10px;padding:12px;background:var(--ok-surface-ffffff,#fff);border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:10px; }.proposal-bi-cards { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px; }.proposal-bi-cards>div { padding:14px;background:var(--ok-surface-ffffff,#fff);border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:10px; }.proposal-bi-cards small,.proposal-bi-cards span { display:block;font-size:11px;color:var(--ok-ink-64748b,#64748b); }.proposal-bi-cards strong { display:block;margin:5px 0;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:25px; }.proposal-bi-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }.proposal-bi-grid>* { min-width:0; }.proposal-bi-filters .ds-field { min-width:0; } @media(max-width:900px) { .proposal-bi-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }.proposal-bi-filters { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:767px) { .proposal-bi-grid { grid-template-columns:1fr; }.proposal-bi-filters { grid-template-columns:1fr; }.proposal-bi-cards>div { padding:12px; }.proposal-bi-cards strong { font-size:22px; } } /* 5.56 — variáveis e edição de modelos. */ .proposal-placeholder-help { margin:0 0 12px; }.proposal-placeholder-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:12px; }.proposal-placeholder-grid>div { padding:8px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:7px;min-width:0; }.proposal-placeholder-grid code { display:block;color:var(--ok-ink-4f4c8f,#4f4c8f);overflow-wrap:anywhere;font-size:12px;user-select:all; }.proposal-placeholder-grid span { display:block;color:var(--ok-ink-64748b,#64748b);font-size:11px;margin-top:4px; } @media(max-width:900px) { .proposal-placeholder-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } } @media(max-width:480px) { .proposal-placeholder-grid { grid-template-columns:1fr; } } /* 5.57 — Acompanhamento comercial compacto */ .proposal-correspondence { min-width:0; } .proposal-correspondence .proposal-prose, .proposal-correspondence td { overflow-wrap:anywhere; } .proposal-correspondence .crm-table-wrap { max-width:100%; } .proposal-correspondence .crm-table, .proposal-correspondence .crm-table tr { box-sizing:border-box; } .proposal-correspondence .crm-table td>div { min-width:0; } /* 5.58 — Confirmação de aceite por código */ .proposal-acceptance-verification { margin:.8rem 0;padding:.8rem;border:1px solid var(--ok-line-e3e0f1,#e3e0f1);border-radius:.75rem;background:var(--ok-surface-f8f7fc,#f8f7fc);min-width:0; } .proposal-acceptance-verification .ds-field { max-width:20rem; } .proposal-acceptance-verification .proposal-actions { margin:.5rem 0; } .proposal-acceptance-verification p { overflow-wrap:anywhere; } /* 5.59 — Pacotes comerciais */ .proposal-package-preview { margin-top:.75rem;padding:.75rem;border:1px solid var(--ok-line-e3e0f1,#e3e0f1);border-radius:.75rem;background:var(--ok-surface-f8f7fc,#f8f7fc);min-width:0; } .proposal-package-lines { list-style:none;padding:0;margin:.75rem 0;display:grid;gap:.5rem; } .proposal-package-lines li { display:flex;align-items:flex-start;justify-content:space-between;gap:.75rem;padding:.5rem 0;border-bottom:1px solid var(--ok-line-e3e0f1,#e3e0f1);font-size:.8rem; } .proposal-package-lines li>span { min-width:0;overflow-wrap:anywhere; } .proposal-package-lines small { display:block;color:var(--ok-ink-64748b,#64748b);margin-top:.2rem;font-size:.72rem; } .proposal-package-lines li>strong { flex-shrink:0;white-space:nowrap; } @media(max-width:480px) { .proposal-package-lines li { flex-direction:column;gap:.3rem; } } /* BEGIN_PROPOSAL_CHOICES_5_60 */ .proposal-choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin-block:.75rem} .proposal-selection{padding:1rem;border:1px solid var(--color-primary,var(--ok-line-4f4c8f,#4f4c8f));border-radius:1rem;background:var(--ok-surface-fafaff,#fafaff);margin-block:1rem} .proposal-choice-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.35rem .65rem;padding:.85rem;border:1px solid var(--ok-line-d9dbe8,#d9dbe8);border-radius:.75rem;background:var(--ok-surface-ffffff,#fff);cursor:pointer;overflow-wrap:anywhere} .proposal-choice-card input{grid-row:1 / span 4;align-self:start;width:1.15rem;height:1.15rem;accent-color:var(--ok-ink-4f4c8f,#4f4c8f)} .proposal-choice-card:has(input:checked){border-color:var(--ok-line-4f4c8f,#4f4c8f);background:var(--ok-surface-f0effb,#f0effb);box-shadow:0 0 0 1px var(--ok-shadow-4f4c8f,#4f4c8f)} .proposal-choice-card:focus-within{outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:3px} .proposal-choice-card small{color:var(--ok-ink-526077,#526077)}.proposal-optionals{display:grid;gap:.5rem}.proposal-choice-grid>*{min-width:0} @media(max-width:767px){.proposal-choice-grid{grid-template-columns:1fr}.proposal-selection{padding:.75rem}} /* END_PROPOSAL_CHOICES_5_60 */ .proposal-steps a{display:inline-flex;align-items:center;padding:8px 12px;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:8px;background:var(--ok-surface-ffffff,#fff);color:var(--ok-ink-64748b,#64748b);font-size:12px;text-decoration:none}.proposal-steps a.is-active{background:var(--ok-surface-f0eff9,#f0eff9);color:var(--ok-ink-4f4c8f,#4f4c8f);border-color:var(--ok-line-c7c3e5,#c7c3e5)}.proposal-steps a:focus-visible{outline:2px solid var(--ok-line-2563eb,#2563eb);outline-offset:2px} /* BEGIN_PROPOSAL_INSTALLMENTS_5_61 */ .proposal-payment-editor{padding:1rem;margin-block:1rem;border:1px solid var(--ok-line-dce2ee,#dce2ee);border-radius:.75rem;background:var(--ok-surface-f8f9fe,#f8f9fe)}.proposal-payment-editor h2{font-size:1rem;margin:0 0 .5rem}.proposal-payment-schedule table{width:100%;border-collapse:collapse}.proposal-payment-schedule th,.proposal-payment-schedule td{padding:.65rem;text-align:left;border-bottom:1px solid var(--ok-line-e2e8f0,#e2e8f0)}.proposal-payment-schedule th{background:var(--ok-surface-f8f9fe,#f8f9fe)}.proposal-payment-schedule td:last-child{white-space:nowrap}.proposal-payment-editor .proposal-fields>*{min-width:0} @media(max-width:767px){.proposal-payment-editor .proposal-fields{grid-template-columns:1fr}.proposal-payment-editor{padding:.75rem}.proposal-payment-schedule th,.proposal-payment-schedule td{padding:.5rem;font-size:.8rem}} /* END_PROPOSAL_INSTALLMENTS_5_61 */ .proposal-document .proposal-payment-schedule table{min-width:0;table-layout:auto}.proposal-document .proposal-payment-schedule td:first-child{width:auto} .proposal-lifecycle-filters{grid-template-columns:minmax(180px,1fr) minmax(140px,.5fr) minmax(140px,.5fr)} @media(max-width:640px){.proposal-lifecycle-filters{grid-template-columns:1fr}} [data-recaptcha-status]:empty{display:none} .login-recaptcha{display:flex;align-items:flex-start;gap:.5rem;margin-top:.75rem;color:var(--ok-ink-64748b,#64748b);font-size:.75rem;line-height:1.45}.login-recaptcha>.material-symbols-rounded{display:flex;font-size:1.125rem;flex:0 0 auto}.login-recaptcha p{margin:0}.login-recaptcha small{font-size:.6875rem}.login-recaptcha a{text-decoration:underline} /* Public lead capture follows the public storefront and checkout design. */ .lead-capture-page{box-sizing:border-box;max-width:78rem;width:100%;margin:auto;padding:0;color:var(--ok-ink-172033,#172033)} .lead-capture-header{padding:.8rem 1.2rem} .lead-capture-header .store-public__brand{min-width:0}.lead-capture-header .store-public__brand strong{overflow-wrap:anywhere} .lead-capture-header-note{display:flex;align-items:center;gap:.35rem;font-size:.6875rem;color:var(--ok-ink-64748b,#64748b);flex-shrink:0} .lead-capture-header-note .material-symbols-rounded{display:flex;font-size:1.1rem} .lead-capture-intro{padding:2rem 1.2rem 1.8rem} .lead-capture-intro h1{max-width:48rem;font-size:clamp(2rem,4vw,3.25rem)} .lead-capture-intro>p{max-width:34rem} .lead-capture-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1fr);gap:1rem;align-items:start;max-width:62rem;margin:0 auto;padding:0 1.2rem 2.5rem} .lead-capture-benefits{padding:1.2rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.1rem;background:var(--ok-surface-ffffff_a750,rgba(255,255,255,.75))} .lead-capture-benefits h2{font-size:1rem;margin:0 0 .4rem;font-weight:850} .lead-capture-benefits>p{font-size:.8rem;color:var(--ok-ink-64748b,#64748b);line-height:1.6;margin:0} .lead-capture-benefits ul{display:grid;gap:1.2rem;margin:1.4rem 0 0;padding:0;list-style:none} .lead-capture-benefits li{display:flex;align-items:flex-start;gap:.7rem} .lead-capture-benefits li>.material-symbols-rounded{display:flex;align-items:center;justify-content:center;width:2.2rem;height:2.2rem;flex:0 0 2.2rem;border-radius:.65rem;background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.25rem} .lead-capture-benefits strong,.lead-capture-benefits small{display:block}.lead-capture-benefits strong{font-size:.8rem}.lead-capture-benefits small{margin-top:.2rem;font-size:.75rem;line-height:1.5;color:var(--ok-ink-64748b,#64748b)} .lead-capture-card{min-width:0;box-sizing:border-box;background:var(--ok-surface-ffffff,#fff);border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.1rem;padding:1.4rem;box-shadow:0 18px 45px -35px var(--ok-shadow-0f172a_a400,rgba(15,23,42,.4))} .lead-capture-card h2{font-size:1.1rem;font-weight:850;margin:0 0 6px} .lead-capture-hint{font-size:.8rem;color:var(--ok-ink-64748b,#64748b);line-height:1.5;margin:0 0 18px} .lead-capture-form{display:grid;gap:13px} .lead-capture-form>label,.lead-capture-pair>label{display:grid;gap:5px;color:var(--ok-ink-334155,#334155);font-size:.75rem;font-weight:750} .lead-capture-form label small{color:var(--ok-ink-64748b,#64748b);font-weight:400} .lead-capture-form input:not([type=checkbox]):not([type=hidden]),.lead-capture-form select,.lead-capture-form textarea{box-sizing:border-box;min-width:0;width:100%;min-height:2.8rem;border:1px solid var(--ok-line-cfd8e3,#cfd8e3);border-radius:.72rem;background:var(--ok-surface-ffffff,white);color:var(--ok-ink-172033,#172033);padding:.65rem .75rem;font:inherit;font-weight:400;font-size:.85rem} .lead-capture-form input:focus,.lead-capture-form select:focus,.lead-capture-form textarea:focus{outline:2px solid var(--ok-line-4f4c8f,#4f4c8f);outline-offset:2px} .lead-capture-form textarea{resize:vertical;min-height:80px}.lead-capture-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px} .lead-capture-form .lead-capture-consent{display:flex;align-items:flex-start;gap:9px;font-size:.75rem;line-height:1.5;font-weight:400;padding:.7rem;border-radius:.72rem;background:var(--ok-surface-f8fafc,#f8fafc)} .lead-capture-consent input{margin-top:3px;accent-color:var(--ok-ink-4f4c8f,#4f4c8f);flex-shrink:0;width:16px;height:16px} .lead-capture-privacy{font-size:.75rem;color:var(--ok-ink-64748b,#64748b);line-height:1.6}.lead-capture-privacy summary{cursor:pointer;text-decoration:underline} .lead-capture-submit{width:100%;font-size:.85rem;padding:.8rem 1rem}.lead-capture-submit span:last-child{display:flex;font-size:1.2rem} .lead-capture-submit:focus-visible{outline:3px solid var(--ok-line-2563eb,#2563eb);outline-offset:3px} .lead-capture-trap{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} .lead-capture-errors{background:var(--ok-surface-fff1f2,#fff1f2);border:1px solid var(--ok-line-fecdd3,#fecdd3);padding:12px;border-radius:10px;font-size:.8rem;margin:15px 0;color:var(--ok-ink-9f1239,#9f1239)} .lead-capture-success{text-align:center;padding:35px 4px;line-height:1.65}.lead-capture-success>.material-symbols-rounded{display:flex;justify-content:center;font-size:3rem;color:var(--ok-ink-168568,#168568);margin-bottom:14px} .lead-capture-success small,.lead-capture-footer{color:var(--ok-ink-64748b,#64748b);font-size:.75rem} .lead-capture-form .login-recaptcha{margin:0}.lead-capture-form [aria-invalid=true]{border-color:var(--ok-line-e11d48,#e11d48)}.lead-capture-form[aria-busy=true] .lead-capture-submit{opacity:.7;cursor:wait} @media(max-width:760px){.lead-capture-header{min-height:4rem;padding:.65rem 1rem}.lead-capture-header-note{font-size:.65rem}.lead-capture-intro{padding:1.1rem 1rem 1.2rem}.lead-capture-intro h1{font-size:clamp(1.6rem,5vw,2rem);line-height:1.1;margin:.5rem auto 0;max-width:28rem}.lead-capture-intro>p{font-size:.8rem;line-height:1.5;margin:.6rem auto 0}.lead-capture-grid{grid-template-columns:1fr;padding:0 1rem 1.5rem}.lead-capture-benefits{display:none}.lead-capture-card{padding:1.2rem 1rem}.lead-capture-footer{padding:1rem}} @media(max-width:390px){.lead-capture-pair{grid-template-columns:1fr}} /* Public lead form: compact labels and subtle checkout-colored animated background. */ .lead-capture-body{background:radial-gradient(circle at 88% 5%,var(--ok-surface-4f4c8f_a120,rgba(79,76,143,.12)),transparent 27rem),var(--ok-surface-f5f7fb,#f5f7fb);animation:lead-capture-background 16s ease-in-out infinite} @keyframes lead-capture-background{0%,100%{background-size:100% 100%}50%{background-size:108% 108%}} .lead-capture-field-label{display:flex;align-items:baseline;gap:.4rem} .lead-capture-field-label small{white-space:nowrap} .lead-capture-form .login-recaptcha--compact{align-items:center;font-size:.6875rem;gap:.4rem} .lead-capture-form .login-recaptcha--compact>div{line-height:1.5} .lead-capture-form .login-recaptcha--compact p,.lead-capture-form .login-recaptcha--compact small{display:inline;font-size:inherit} .lead-capture-form .login-recaptcha--compact small{margin-left:.2rem} @media(prefers-reduced-motion:reduce){.lead-capture-body{animation:none}} /* Compact public lead wizard, shared storefront step controls. */ .lead-wizard-steps{grid-template-columns:repeat(3,minmax(0,1fr));padding:0;margin:0;gap:.45rem} .lead-wizard-steps .store-wizard-step{flex-direction:column;text-align:center;align-items:center;padding:.65rem .3rem;gap:.25rem} .lead-wizard-steps .store-wizard-step__copy{align-items:center}.lead-wizard-steps .store-wizard-step strong{font-size:.75rem} .lead-wizard-panel{display:grid;gap:13px;border:0;min-width:0;margin:0;padding:0} .lead-wizard-panel legend{font-size:.95rem;font-weight:850;margin-bottom:14px;padding:0;color:var(--ok-ink-172033,#172033)} .lead-wizard-panel>label{display:grid;gap:5px;color:var(--ok-ink-334155,#334155);font-size:.75rem;font-weight:750} .lead-wizard-panel legend:focus-visible{outline:2px solid var(--ok-line-4f4c8f,#4f4c8f);outline-offset:4px} .lead-wizard-progress{margin:0;color:var(--ok-ink-64748b,#64748b);font-size:.75rem} .lead-wizard-review{display:grid;gap:.6rem;margin:0 0 .3rem;padding:1rem;background:var(--ok-surface-f8fafc,#f8fafc);border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:.85rem} .lead-wizard-review div{min-width:0}.lead-wizard-review dt{font-size:.6875rem;color:var(--ok-ink-64748b,#64748b)}.lead-wizard-review dd{margin:.15rem 0 0;font-size:.8rem;font-weight:650;overflow-wrap:anywhere;white-space:pre-wrap} .lead-wizard-actions{position:static;z-index:auto;padding:.6rem}.lead-wizard-actions .lead-capture-submit{width:auto;margin-left:auto;font-size:.75rem;padding:.65rem .8rem} .lead-wizard-actions [data-lead-next]{margin-left:auto} .lead-capture-form [hidden]{display:none!important} .lead-capture-form [data-recaptcha-status]:empty{display:none} @media(max-width:760px){.lead-wizard-steps .store-wizard-step small{display:none}.lead-wizard-actions .lead-capture-submit{font-size:.7rem}.lead-wizard-actions{gap:.4rem}} /* Individual showcase products share the public storefront visual language. */ .store-product-page{width:100%;min-width:0}.store-product-breadcrumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;max-width:78rem;margin:0 auto;padding:.7rem 1.2rem 1.3rem;font-size:.75rem;color:var(--ok-ink-64748b,#64748b);overflow-wrap:anywhere} .store-product-breadcrumb a{color:var(--ok-ink-4f4c8f,#4f4c8f);text-decoration:none}.store-product-breadcrumb a:hover{text-decoration:underline} .store-product-detail{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.8fr);gap:1.2rem;max-width:78rem;margin:0 auto;padding:0 1.2rem 2rem;align-items:start} .store-product-content{min-width:0;display:grid;gap:1rem}.store-product-cover{position:relative;display:flex;align-items:center;justify-content:center;min-height:20rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.2rem;background:var(--ok-surface-ffffff,#fff);overflow:hidden} .store-product-cover img{display:block;width:100%;max-height:32rem;object-fit:contain;padding:1rem;box-sizing:border-box}.store-product-cover>.material-symbols-rounded{display:flex;align-items:center;justify-content:center;font-size:5rem;color:var(--ok-ink-4f4c8f,#4f4c8f)}.store-product-featured{position:absolute;left:1rem;top:1rem;padding:.35rem .65rem;border-radius:999px;background:var(--ok-surface-f4f3fb,#f4f3fb);color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.7rem;font-weight:800} .store-product-section,.store-product-summary{min-width:0;padding:1.3rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:1.1rem;background:var(--ok-surface-ffffff,#fff);box-shadow:0 18px 45px -35px var(--ok-shadow-0f172a_a400,rgba(15,23,42,.4))} .store-product-section h2{font-size:1.05rem;margin:0 0 .8rem;color:var(--ok-ink-172033,#172033)}.store-product-description{white-space:pre-line;overflow-wrap:anywhere;font-size:.85rem;line-height:1.75;color:var(--ok-ink-475569,#475569);margin:0} .store-product-info-list{display:grid;gap:.7rem;list-style:none;margin:0;padding:0;font-size:.85rem;line-height:1.6;color:var(--ok-ink-475569,#475569)}.store-product-info-list li{display:flex;align-items:flex-start;gap:.5rem;overflow-wrap:anywhere}.store-product-info-list .material-symbols-rounded{display:flex;flex:0 0 1.2rem;font-size:1.2rem;color:var(--ok-ink-4f4c8f,#4f4c8f);margin-top:.1rem} .store-product-summary{display:grid;gap:.9rem;position:sticky;top:1rem}.store-product-category{color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:.7rem;font-weight:850;text-transform:uppercase;letter-spacing:.07em}.store-product-summary h1{font-size:clamp(1.5rem,2.7vw,2.2rem);letter-spacing:-.035em;line-height:1.15;margin:0;overflow-wrap:anywhere}.store-product-summary>p{color:var(--ok-ink-64748b,#64748b);font-size:.85rem;line-height:1.65;margin:0;overflow-wrap:anywhere} .store-product-price{display:grid;gap:.25rem;padding:1rem;border-radius:.85rem;background:var(--ok-surface-f8fafc,#f8fafc)}.store-product-price small,.store-product-price span{font-size:.75rem;color:var(--ok-ink-64748b,#64748b)}.store-product-price strong{font-size:1.65rem;color:var(--ok-ink-172033,#172033)}.store-product-summary>a{text-decoration:none;font-size:.8rem;min-height:2.8rem}.store-product-summary>a .material-symbols-rounded{display:flex;align-items:center;justify-content:center}.store-product-summary .store-product-disclaimer{font-size:.75rem} .store-product-share{padding-top:.9rem;border-top:1px solid var(--ok-line-e2e8f0,#e2e8f0)}.store-product-share button{width:100%;font-size:.75rem}.store-product-share p{font-size:.75rem;color:var(--ok-ink-64748b,#64748b);line-height:1.5}.store-product-share p:empty{display:none}.store-product-share label{display:grid;gap:.4rem;font-size:.75rem;color:var(--ok-ink-64748b,#64748b)}.store-product-share input{min-width:0;width:100%;box-sizing:border-box;padding:.65rem;border:1px solid var(--ok-line-cfd8e3,#cfd8e3);border-radius:.7rem;font-size:.75rem}.store-product-share [hidden]{display:none!important} .store-product-related{max-width:78rem;margin:0 auto;padding:0 1.2rem 2rem}.store-product-related>h2{font-size:1.2rem;margin:0 0 1rem}.store-product-related .store-product-grid{padding:0}.store-product-related h3{font-size:1rem;margin:.3rem 0} @media(max-width:760px){.store-product-detail{grid-template-columns:1fr;padding:0 1rem 1.4rem;gap:1rem}.store-product-summary{position:static;grid-row:1;padding:1.1rem}.store-product-cover{min-height:12rem}.store-product-cover img{max-height:22rem}.store-product-section{padding:1.1rem}.store-product-breadcrumb{padding:.5rem 1rem 1rem}.store-product-related{padding:0 1rem 1.5rem}.store-product-page .store-public__header{padding:.7rem 1rem;gap:.6rem}.store-product-page .store-public__brand{min-width:0}.store-product-page .store-public__brand strong{overflow-wrap:anywhere}.store-product-page .store-public__cta{flex-shrink:0;font-size:.65rem}} .lead-wizard-product{display:flex;align-items:flex-start;gap:.7rem;padding:.85rem;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:.85rem;background:var(--ok-surface-f4f3fb,#f4f3fb)}.lead-wizard-product>.material-symbols-rounded{display:flex;flex-shrink:0;color:var(--ok-ink-4f4c8f,#4f4c8f);font-size:1.3rem}.lead-wizard-product small,.lead-wizard-product strong,.lead-wizard-product a{display:block}.lead-wizard-product small{font-size:.6875rem;color:var(--ok-ink-64748b,#64748b)}.lead-wizard-product strong{font-size:.85rem;overflow-wrap:anywhere;margin:.15rem 0}.lead-wizard-product a{font-size:.75rem;color:var(--ok-ink-4f4c8f,#4f4c8f)} /* Showcase polish: full product image, formatted content and reference prices. */ .store-showcase-tools>label{box-sizing:border-box} .store-product-card__visual{background:var(--ok-surface-ffffff,#fff)} .store-product-card__visual img{object-fit:contain;background-color:var(--ok-surface-ffffff,#fff);box-sizing:border-box;padding:.6rem} .store-product-description{white-space:normal;overflow-x:auto} .store-product-description>:first-child{margin-top:0}.store-product-description>:last-child{margin-bottom:0} .store-product-description p{margin:.75rem 0}.store-product-description ul,.store-product-description ol{padding-left:1.4rem;margin:.8rem 0;list-style-position:outside}.store-product-description ul{list-style-type:disc}.store-product-description ol{list-style-type:decimal}.store-product-description li{margin:.35rem 0}.store-product-description strong,.store-product-description b{font-weight:750}.store-product-description h2,.store-product-description h3,.store-product-description h4,.store-product-description h5,.store-product-description h6{margin:1rem 0 .5rem;line-height:1.3;color:var(--ok-ink-172033,#172033)}.store-product-description h2{font-size:1.2rem}.store-product-description h3{font-size:1.1rem}.store-product-description h4,.store-product-description h5,.store-product-description h6{font-size:1rem}.store-product-description a{color:var(--ok-ink-4f4c8f,#4f4c8f);text-decoration:underline}.store-product-description blockquote{margin:1rem 0;padding:.6rem 1rem;border-left:3px solid var(--ok-line-4f4c8f,#4f4c8f);background:var(--ok-surface-f8fafc,#f8fafc)}.store-product-description pre{padding:.8rem;border-radius:.65rem;background:var(--ok-surface-f8fafc,#f8fafc);overflow:auto;white-space:pre}.store-product-description table{border-collapse:collapse;max-width:100%;font-size:.8rem}.store-product-description th,.store-product-description td{border:1px solid var(--ok-line-e2e8f0,#e2e8f0);padding:.5rem .65rem;text-align:left}.store-product-description hr{border:0;border-top:1px solid var(--ok-line-e2e8f0,#e2e8f0);margin:1rem 0} .store-product-reference-price{display:block;color:var(--ok-ink-64748b,#64748b);font-size:.75rem;text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:currentColor} .store-product-card>div:last-child>.store-product-reference-price{font-size:.65rem} /* Internal notification inbox: native forms also work without JavaScript. */ .app-notification-count[hidden] { display: none; } .app-notification-open { width: 100%; border: 0; background: transparent; color: inherit; text-align: left; font: inherit; cursor: pointer; } .app-notification-open:hover { background: var(--ok-surface-f5f7fb,#f5f7fb); } .app-notification-open:focus-visible { outline: 2px solid var(--ok-line-4f4c8f,#4f4c8f); outline-offset: -2px; } .app-notification-open > span:nth-child(2) { min-width: 0; flex: 1; overflow-wrap: anywhere; } .app-notification-open > .material-symbols-rounded { font-size: 18px; } .app-notification-footer { padding: 12px 16px; border-top: 1px solid var(--ok-line-edf0f6,#edf0f6); } .app-notification-footer a { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .78rem; font-weight: 700; } .app-notification-status { margin: 0; padding: 0 16px; color: var(--ok-ink-b45309,#b45309); font-size: .75rem; } .app-notification-status:not(:empty) { padding-top: 8px; padding-bottom: 8px; } .app-notification-history { margin-top: 12px; } .app-notification-history-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ok-line-edf0f6,#edf0f6); } .app-notification-history-item > div { min-width: 0; overflow-wrap: anywhere; } .app-notification-history-item p { margin: 4px 0; } .app-notification-history-item small { color: var(--ok-ink-64748b,#64748b); } .app-notification-history-item form { flex-shrink: 0; } @media (max-width: 480px) { .app-notification-history-item { align-items: flex-start; flex-direction: column; gap: 8px; } } /* Compact notification presentation, shared by server render and feed refresh. */ .app-notifications-panel { width: min(23rem, calc(100vw - 1.5rem)); border-radius: 14px; } .app-notifications-panel > header { padding: 12px 14px; background: var(--ok-surface-fbfbfd,#fbfbfd); } .app-notifications-panel > header strong { font-size: .85rem; } .app-notifications-panel > header small { margin-top: 2px; font-size: .72rem; } .app-notifications-panel > header .app-icon-button { width: 32px; height: 32px; min-width: 32px; border-radius: 9px; } .app-notifications-panel > header .app-icon-button:disabled { opacity: .4; cursor: default; } [data-notification-items] { max-height: min(350px, 52dvh); overflow-y: auto; overscroll-behavior: contain; } .app-notification-open { align-items: center; gap: 10px; padding: 12px 14px; min-height: 70px; transition: background-color .15s; } .app-notification-icon { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: var(--ok-surface-f0eff8,#f0eff8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 19px; } .app-notification-copy { display: block; min-width: 0; } .app-notification-copy strong { font-size: .8rem; line-height: 1.35; } .app-notification-copy small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 3px; font-size: .74rem; line-height: 1.4; } .app-notification-copy time, .app-notification-history-copy time { display: block; margin-top: 4px; color: var(--ok-ink-64748b,#64748b); font-size: .68rem; line-height: 1.4; } .app-notification-indicator { flex: 0 0 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--ok-surface-4f4c8f,#4f4c8f); } .app-notification-empty { display: flex; align-items: center; flex-direction: column; gap: 7px; padding: 24px 18px; text-align: center; } .app-notification-empty .app-notification-empty-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--ok-surface-f0eff8,#f0eff8); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 25px; margin-bottom: 3px; } .app-notification-empty strong { font-size: .83rem; color: var(--ok-ink-172033,#172033); } .app-notification-empty small { font-size: .74rem; color: var(--ok-ink-64748b,#64748b); line-height: 1.5; max-width: 280px; } .app-notification-footer { padding: 10px 14px; } .app-notification-footer a { font-size: .74rem; } .app-notification-footer .material-symbols-rounded { font-size: 17px; } .app-notification-history { margin-top: 0; } .app-notification-history-item { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 12px; border-radius: 10px; margin: 2px 0; } .app-notification-history-item.is-unread { background: var(--ok-surface-f8f7fc,#f8f7fc); } .app-notification-history-item.is-read > .app-notification-icon { background: var(--ok-surface-f1f5f9,#f1f5f9); color: var(--ok-ink-64748b,#64748b); } .app-notification-history-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .app-notification-history-heading strong { font-size: .84rem; } .app-notification-history-copy p { margin: 3px 0; font-size: .78rem; color: var(--ok-ink-64748b,#64748b); line-height: 1.5; } .app-notification-read-badge { border-radius: 6px; background: var(--ok-surface-eae7f7,#eae7f7); color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .65rem; padding: 2px 6px; font-weight: 700; } .is-read .app-notification-read-badge { background: var(--ok-surface-eef2f6,#eef2f6); color: var(--ok-ink-64748b,#64748b); } .app-notification-history-empty { padding: 40px 16px; } @media (max-width: 480px) { .app-notification-history-item { grid-template-columns: 30px minmax(0, 1fr); gap: 10px; padding: 12px 10px; } .app-notification-history-item > form { grid-column: 2; } .app-notification-history-item > .app-notification-icon { width: 30px; height: 30px; } } @media (prefers-reduced-motion: reduce) { .app-notification-open { transition: none; } } /* Dashboard shortcuts and chart controls: deliberate spacing, responsive layout. */ .ds-echart__toolbar { gap: .5rem; margin-top: 1rem; margin-bottom: .85rem; align-items: center; } .ds-echart__toolbar button { white-space: nowrap; padding-inline: .9rem; } .ds-quick-actions strong, .ds-quick-actions small { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.4; } .ds-quick-actions strong { font-size: .74rem; } .ds-quick-actions small { color: var(--ok-ink-64748b,#64748b); font-size: .68rem; } @media (min-width: 1024px) { .ds-quick-actions { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .65rem; } .ds-quick-actions a { min-height: 5.8rem; padding: .65rem; } } /* Customer Portal navigation: grouped desktop sidebar and complete mobile menu. */ .portal-menu-surface, .portal-navigation-backdrop, .portal-navigation-list a, .portal-mobile-menu-trigger { box-sizing: border-box; } .portal-shell { display: block; } .portal-shell > .portal-workspace { margin-left: 15rem; } .portal-sidebar { width: 15rem; min-height: 0; height: 100dvh; gap: .65rem; padding: .8rem .7rem; } .portal-sidebar .portal-navigation-list, .portal-menu-surface .portal-navigation-list { display: block; min-height: 0; overflow-y: auto; overscroll-behavior: contain; } .portal-navigation-group { margin-bottom: 9px; } .portal-navigation-group-label { margin: 12px 10px 5px; color: var(--ok-ink-64748b,#64748b); font-size: .67rem; font-weight: 700; letter-spacing: .015em; } .portal-sidebar .portal-navigation-list a, .portal-menu-surface .portal-navigation-list a { display: flex; align-items: center; gap: 10px; height: auto; max-height: none; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--ok-ink-475569,#475569); text-decoration: none; font-size: .78rem; font-weight: 650; margin-bottom: 2px; } .portal-navigation-list a > .material-symbols-rounded { display: grid; place-items: center; width: 24px; flex: 0 0 24px; font-size: 20px; } .portal-navigation-list a.is-active { background: var(--ok-surface-eeedf8,#eeedf8); color: var(--ok-ink-4f4c8f,#4f4c8f); box-shadow: inset 3px 0 var(--ok-shadow-4f4c8f,#4f4c8f); } .portal-navigation-list a:hover { background: var(--ok-surface-f4f3fa,#f4f3fa); } .portal-navigation-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } .portal-navigation-count { margin-left: auto; padding: 2px 5px; border-radius: 6px; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,#fff); font-size: .65rem; } .portal-sidebar-toggle { display: none; width: 100%; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 9px; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); font: inherit; font-size: .72rem; cursor: pointer; } .portal-navigation-ready .portal-sidebar-toggle { display: flex; } .portal-sidebar-footer > a { min-height: 44px; } .portal-sidebar-footer button { min-height: 44px; } .portal-topbar-heading { min-width: 0; flex: 1; } .portal-topbar-heading > small { display: block; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .66rem; font-weight: 700; } .portal-topbar-heading > strong { display: block; color: var(--ok-ink-172033,#172033); font-size: .94rem; line-height: 1.35; } .portal-topbar-heading > span { display: block; margin-top: 2px; color: var(--ok-ink-64748b,#64748b); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .portal-mobile-navigation, .portal-bottom-menu { display: none; } .portal-navigation-list a:focus-visible, .portal-sidebar-toggle:focus-visible, .portal-mobile-menu-trigger:focus-visible, .portal-menu-heading button:focus-visible, .portal-bottom-nav :is(a,button):focus-visible { outline: 2px solid var(--ok-line-2563eb,#2563eb); outline-offset: 2px; } @media (min-width: 1024px) { .portal-shell--nav-compact > .portal-sidebar { width: 5rem; } .portal-shell--nav-compact > .portal-workspace { margin-left: 5rem; } .portal-shell--nav-compact .portal-sidebar .portal-brand { display: flex; justify-content: center; padding: .4rem 0; } .portal-shell--nav-compact .portal-sidebar .portal-brand > div, .portal-shell--nav-compact .portal-sidebar .portal-navigation-label, .portal-shell--nav-compact .portal-navigation-group-label { display: none; } .portal-shell--nav-compact .portal-sidebar .portal-navigation-list a { justify-content: center; padding-inline: 0; position: relative; } .portal-shell--nav-compact .portal-navigation-count { position: absolute; top: 1px; right: 0; font-size: .6rem; } .portal-shell--nav-compact .portal-sidebar-footer > a { display: flex; justify-content: center; } .portal-shell--nav-compact .portal-navigation-group { margin-bottom: 6px; } .portal-shell--nav-compact .portal-sidebar-toggle { padding-inline: 0; } } @media (max-width: 1023px) { .portal-shell { display: block; } .portal-shell > .portal-workspace { margin-left: 0; } .portal-shell > .portal-sidebar { display: none; } .portal-topbar { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 64px; padding: .55rem .75rem; } .portal-topbar-heading small, .portal-topbar-heading span { display: none; } .portal-topbar-heading strong { margin: 0; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .portal-topbar-actions { gap: 6px; flex-wrap: nowrap; } .portal-topbar-actions > .portal-online, .portal-topbar-profile-copy, .portal-topbar-profile-chevron { display: none; } .portal-topbar-actions > .portal-topbar-icon-button, .portal-topbar-actions > .portal-topbar-profile { display: grid; width: 44px; height: 44px; min-width: 44px; max-width: 44px; padding: 4px; grid-template-columns: 1fr; } .portal-mobile-navigation { display: block; } .portal-mobile-menu-trigger { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ok-line-dbe2ea,#dbe2ea); border-radius: 10px; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; list-style: none; } .portal-mobile-menu-trigger::-webkit-details-marker { display: none; } .portal-mobile-navigation[open] .portal-menu-surface { position: fixed; left: 0; top: 0; bottom: 0; z-index: 102; width: min(21rem, calc(100vw - 2rem)); height: 100dvh; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom)); border-right: 1px solid var(--ok-line-dbe2ea,#dbe2ea); background: var(--ok-surface-ffffff,#fff); box-shadow: 12px 0 40px var(--ok-shadow-0f172a_a180,rgba(15,23,42,.18)); } .portal-navigation-backdrop { position: fixed; inset: 0; z-index: 101; width: 100%; height: 100dvh; border: 0; background: var(--ok-surface-0f172a_a400,rgba(15,23,42,.4)); cursor: pointer; } .portal-menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 0 6px 8px; border-bottom: 1px solid var(--ok-line-edf1f5,#edf1f5); } .portal-menu-heading strong, .portal-menu-heading small { display: block; } .portal-menu-heading strong { font-size: .88rem; } .portal-menu-heading small { color: var(--ok-ink-64748b,#64748b); font-size: .7rem; } .portal-menu-heading button { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border: 1px solid var(--ok-line-e2e8f0,#e2e8f0); border-radius: 10px; background: var(--ok-surface-ffffff,#fff); color: var(--ok-ink-4f4c8f,#4f4c8f); cursor: pointer; } .portal-menu-surface .portal-sidebar-footer { min-width: 0; } .portal-menu-surface .portal-sidebar-footer > a { grid-template-columns: 2.1rem minmax(0,1fr); } .portal-topbar:has(.portal-mobile-navigation[open]) { z-index: 90; backdrop-filter: none; } .portal-body:has(.portal-mobile-navigation[open]) { overflow: hidden; } .portal-body:not(.portal-navigation-ready) .portal-navigation-backdrop, .portal-body:not(.portal-navigation-ready) .portal-menu-heading button { display: none; } .portal-body:not(.portal-navigation-ready) .portal-mobile-navigation[open] > summary { position: fixed; z-index: 104; top: 12px; left: min(calc(21rem - 62px), calc(100vw - 94px)); } .portal-bottom-nav { position: fixed; display: flex; left: 8px; right: 8px; bottom: 0; z-index: 35; gap: 2px; padding: 5px 5px calc(5px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0; background: var(--ok-surface-ffffff_a970,rgba(255,255,255,.97)); } .portal-bottom-nav a, .portal-bottom-nav button { flex: 1 1 0; display: grid; place-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 52px; padding: 5px 2px; border: 0; border-radius: 9px; background: transparent; color: var(--ok-ink-64748b,#64748b); text-decoration: none; cursor: pointer; font: inherit; } .portal-bottom-nav .material-symbols-rounded { font-size: 21px; } .portal-bottom-nav a small, .portal-bottom-nav button small { display: block; font-size: .67rem; line-height: 1.2; font-weight: 650; } .portal-bottom-nav a.is-active, .portal-bottom-nav button[aria-expanded="true"] { background: var(--ok-surface-eeedf8,#eeedf8); color: var(--ok-ink-4f4c8f,#4f4c8f); } .portal-bottom-nav .portal-bottom-menu { display: none; } .portal-navigation-ready .portal-bottom-nav .portal-bottom-menu { display: grid; } .portal-navigation-ready .portal-menu-fallback { display: none; } .portal-main { padding-bottom: calc(5.4rem + env(safe-area-inset-bottom)); scroll-margin-top: 80px; } } @media (max-width: 480px) { .portal-topbar { gap: 8px; padding-inline: .6rem; } .portal-topbar-actions > .portal-topbar-ticket { display: none; } } /* Internet das Coisas: compact operational panels, shared by ERP and customer portal. */ .iot-page, .iot-page * { box-sizing: border-box; } .iot-page { color: var(--ok-ink-172033,#172033); font-family: inherit; max-width: 1600px; margin-inline: auto; } .iot-page h1, .iot-page h2, .iot-page h3, .iot-page p { margin: 0; } .iot-page-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .iot-page-header h1 { font-size: 1.25rem; line-height: 1.35; font-weight: 700; } .iot-page-header p { color: var(--ok-ink-64748b,#64748b); font-size: .8rem; line-height: 1.5; margin-top: 5px; } .iot-header-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .iot-button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 12px; background: var(--ok-surface-4f4c8f,#4f4c8f); color: var(--ok-ink-ffffff,white); border: 1px solid var(--ok-line-4f4c8f,#4f4c8f); border-radius: 8px; font: inherit; font-size: .76rem; font-weight: 650; text-decoration: none; cursor: pointer; line-height: 1.3; } .iot-button-secondary { color: var(--ok-ink-475569,#475569); background: var(--ok-surface-ffffff,white); border-color: var(--ok-line-dce2ec,#dce2ec); } .iot-button .material-symbols-rounded { display: flex; align-items: center; font-size: 19px; } .iot-button:disabled, .iot-refresh:disabled { opacity: .55; cursor: wait; } .iot-page :is(a,button,input,select,summary):focus-visible { outline: 2px solid var(--ok-line-2563eb,#2563eb); outline-offset: 3px; } .iot-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 16px; } .iot-filters label { display: grid; gap: 4px; font-size: .7rem; color: var(--ok-ink-64748b,#64748b); min-width: 150px; } .iot-filters label:first-child { flex: 1 1 180px; } .iot-page input:not([type=checkbox]), .iot-page select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--ok-line-dce2ec,#dce2ec); border-radius: 8px; background: var(--ok-surface-ffffff,white); color: var(--ok-ink-172033,#172033); font: inherit; font-size: .78rem; min-width: 0; } .iot-page input[readonly] { background: var(--ok-surface-f8fafc,#f8fafc); } .iot-page input::placeholder { color: var(--ok-ink-738097,#738097); } .iot-filter-clear { padding: 10px 6px; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: .74rem; } .iot-metrics { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; margin-bottom: 18px; } .iot-metric { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius: 10px; background: var(--ok-surface-ffffff,#fff); box-shadow: 0 2px 3px var(--ok-shadow-0f172a_a25,rgba(15,23,42,.025)); } .iot-metric small { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .68rem; line-height: 1.4; } .iot-metric strong { display: block; font-size: 1.35rem; margin: 4px 0; line-height: 1.2; } .iot-metric div>span { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; line-height: 1.35; } .iot-icon { display: grid; place-items: center; width: 38px; height: 38px; flex: 0 0 38px; color: var(--ok-ink-2563eb,#2563eb); background: var(--ok-surface-eff6ff,#eff6ff); border-radius: 9px; font-size: 23px; } .iot-metric:nth-child(2) .iot-icon { color: var(--ok-ink-4f4c8f,#4f4c8f); background: var(--ok-surface-f3f0fc,#f3f0fc); }.iot-metric:nth-child(3) .iot-icon { color: var(--ok-ink-475569,#475569); background: var(--ok-surface-f3f4f6,#f3f4f6); }.iot-metric:nth-child(4) .iot-icon { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7ed,#fff7ed); } .iot-dashboard-grid { display: grid; grid-template-columns: minmax(0,2fr) minmax(280px,1fr); gap: 18px; align-items: start; } .iot-main-column, .iot-side-column { display: grid; gap: 18px; min-width: 0; } .iot-panel { background: var(--ok-surface-ffffff,#fff); border: 1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius: 12px; padding: 18px; box-shadow: 0 2px 4px var(--ok-shadow-0f172a_a25,rgba(15,23,42,.025)); min-width: 0; } .iot-panel-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .iot-panel h2 { font-size: .85rem; font-weight: 700; line-height: 1.45; display: flex; align-items: center; gap: 8px; } .iot-panel h2>.material-symbols-rounded { display: flex; font-size: 20px; color: var(--ok-ink-64748b,#64748b); } .iot-panel-header>small { color: var(--ok-ink-64748b,#64748b); font-size: .66rem; } .iot-device-grid, .iot-camera-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; } .iot-device-card { padding: 12px; background: var(--ok-surface-fafbfe,#fafbfe); border: 1px solid var(--ok-line-edf0f5,#edf0f5); border-radius: 10px; min-width: 0; } .iot-device-card>header { display: flex; align-items: flex-start; gap: 8px; } .iot-device-card>header>div { min-width: 0; } .iot-device-icon { display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--ok-ink-4f4c8f,#4f4c8f); flex: 0 0 22px; } .iot-device-card h3 { font-size: .78rem; line-height: 1.4; font-weight: 700; overflow-wrap: anywhere; } .iot-device-card header small { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .66rem; line-height: 1.45; margin-top: 2px; } .iot-status { display: inline-flex; align-items: center; gap: 5px; margin: 9px 0; font-size: .66rem; color: var(--ok-ink-475569,#475569); background: var(--ok-surface-eef2f7,#eef2f7); padding: 3px 6px; border-radius: 5px; } .iot-status::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--ok-surface-64748b,#64748b); } .iot-status[data-state=online] { color: var(--ok-ink-166534,#166534); background: var(--ok-surface-f0fdf4,#f0fdf4); }.iot-status[data-state=online]::before { background: var(--ok-surface-16a34a,#16a34a); } .iot-status[data-state=offline] { color: var(--ok-ink-b45309,#b45309); background: var(--ok-surface-fff7ed,#fff7ed); } .iot-readings { margin: 0; display: grid; gap: 7px; max-height: 185px; overflow-y: auto; } .iot-readings>div { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: .72rem; line-height: 1.4; } .iot-readings dt { color: var(--ok-ink-64748b,#64748b); overflow-wrap: anywhere; }.iot-readings dd { margin: 0; text-align: right; font-weight: 650; overflow-wrap: anywhere; } .iot-device-card footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; } .iot-device-card time { color: var(--ok-ink-738097,#738097); font-size: .65rem; line-height: 1.4; } .iot-refresh { display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; min-height: 36px; border: 0; background: transparent; color: var(--ok-ink-2563eb,#2563eb); font: inherit; font-size: .69rem; cursor: pointer; padding: 4px; } .iot-refresh .material-symbols-rounded { font-size: 17px; display: flex; } .iot-edit-link { display: inline-block; margin-top: 6px; font-size: .65rem; color: var(--ok-ink-4f4c8f,#4f4c8f); } .iot-muted { color: var(--ok-ink-64748b,#64748b); font-size: .75rem; line-height: 1.6; } .iot-feedback { font-size: .7rem; line-height: 1.5; color: var(--ok-ink-4f4c8f,#4f4c8f); margin-top: 8px!important; overflow-wrap: anywhere; } .iot-feedback:empty { display: none; }.iot-feedback[data-error=true] { color: var(--ok-ink-b91c1c,#b91c1c); } .iot-camera { border: 1px solid var(--ok-line-e5e9f0,#e5e9f0); border-radius: 9px; overflow: hidden; min-width: 0; padding-bottom: 10px; } .iot-camera-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; padding: 9px 10px; } .iot-camera-heading strong { font-size: .74rem; }.iot-camera-heading small { font-size: .65rem; color: var(--ok-ink-64748b,#64748b); } .iot-video-frame { display: grid; place-items: center; background: var(--ok-surface-111827,#111827); aspect-ratio: 16/9; color: var(--ok-ink-94a3b8,#94a3b8); } .iot-video-frame video { width: 100%; height: 100%; object-fit: contain; min-width: 0; max-height: 360px; } .iot-video-frame [data-video-placeholder] { text-align: center; }.iot-video-frame .material-symbols-rounded { font-size: 34px; }.iot-video-frame p { font-size: .67rem; margin-top: 8px; } .iot-camera-actions { display: flex; gap: 8px; padding: 10px 10px 0; }.iot-camera>.iot-feedback { padding-inline: 10px; } .iot-attention .iot-panel-header { margin: -18px -18px 0; padding: 12px 16px; border-bottom: 1px solid var(--ok-line-ffedd5,#ffedd5); background: var(--ok-surface-fff8ef,#fff8ef); border-radius: 12px 12px 0 0; } .iot-attention h2, .iot-attention h2>.material-symbols-rounded { color: var(--ok-ink-9a3412,#9a3412); } .iot-attention-item, .iot-connection-summary, .iot-event { padding: 12px 0; border-bottom: 1px solid var(--ok-line-edf0f5,#edf0f5); }.iot-attention-item:last-child, .iot-connection-summary:last-child, .iot-event:last-child { border-bottom: 0; padding-bottom: 0; } .iot-attention-item strong, .iot-connection-summary strong, .iot-event strong { display: block; font-size: .73rem; line-height: 1.45; } .iot-attention-item small, .iot-connection-summary small, .iot-event small { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .66rem; line-height: 1.5; margin-top: 3px; } .iot-attention>.iot-muted { padding-top: 12px; }.iot-event time { display: block; color: var(--ok-ink-738097,#738097); font-size: .65rem; margin-top: 4px; } .iot-connection-summary a { display: inline-block; margin-top: 8px; color: var(--ok-ink-2563eb,#2563eb); font-size: .7rem; } .iot-controls { margin-top: 9px; border: 1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius: 9px; padding: 0 10px; } .iot-controls>summary { display: flex; align-items: center; gap: 8px; min-height: 52px; list-style: none; cursor: pointer; }.iot-controls>summary::-webkit-details-marker { display: none; } .iot-controls>summary::after { content: '+'; margin-left: auto; color: var(--ok-ink-64748b,#64748b); }.iot-controls[open]>summary::after { content: '−'; } .iot-controls summary>.material-symbols-rounded { display: flex; color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 20px; }.iot-controls summary strong { display: block; font-size: .73rem; }.iot-controls summary small { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .65rem; margin-top: 3px; } .iot-controls>.iot-muted { padding-bottom: 10px; }.iot-command { display: grid; gap: 7px; padding: 10px 0; border-top: 1px solid var(--ok-line-edf0f5,#edf0f5); }.iot-command label { font-size: .7rem; font-weight: 650; }.iot-control-unit { color: var(--ok-ink-64748b,#64748b); font-size: .65rem; } .iot-config-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin-bottom: 16px; }.iot-config-grid .iot-panel p { margin-top: 6px; font-size: .76rem; line-height: 1.5; }.iot-config-grid small, .iot-config-grid code { display: block; color: var(--ok-ink-64748b,#64748b); font-size: .7rem; margin: 8px 0; overflow-wrap: anywhere; }.iot-config-grid .iot-header-actions { margin-top: 14px; } .iot-form-page { max-width: 980px; }.iot-form { display: grid; gap: 16px; }.iot-form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }.iot-form label { display: grid; gap: 6px; font-size: .78rem; font-weight: 650; line-height: 1.5; }.iot-form label>small { font-size: .68rem; color: var(--ok-ink-64748b,#64748b); font-weight: 400; } .iot-form fieldset { min-width: 0; border: 1px solid var(--ok-line-e5e9f0,#e5e9f0); border-radius: 9px; padding: 14px; }.iot-form legend { font-size: .8rem; font-weight: 700; padding-inline: 5px; }.iot-form fieldset .iot-muted { margin-top: 10px; } .iot-checks { display: grid; gap: 10px; }.iot-checks label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-height: 32px; }.iot-checks input { width: 18px; height: 18px; flex: 0 0 18px; accent-color: var(--ok-ink-4f4c8f,#4f4c8f); } .iot-steps { margin: 0; padding-left: 20px; font-size: .78rem; color: var(--ok-ink-475569,#475569); line-height: 1.7; }.iot-qr { text-align: center; display: grid; justify-items: center; gap: 12px; }.iot-qr img { width: min(240px,100%); height: auto; background: var(--ok-surface-ffffff,white); border: 1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius: 9px; }.iot-qr p { font-size: .75rem; color: var(--ok-ink-64748b,#64748b); } .iot-empty { text-align: center; padding: 32px 16px; margin-bottom: 18px; }.iot-empty h2 { justify-content: center; font-size: .95rem; }.iot-empty p { color: var(--ok-ink-64748b,#64748b); font-size: .78rem; line-height: 1.6; margin: 8px 0 16px; }.iot-empty>.material-symbols-rounded { color: var(--ok-ink-4f4c8f,#4f4c8f); font-size: 38px; margin-bottom: 12px; } .iot-page [hidden] { display: none!important; } .iot-page:not(.iot-enhanced) :is(.iot-command,.iot-refresh,.iot-camera-actions) { display: none; } @media(max-width:1100px){ .iot-dashboard-grid { grid-template-columns: minmax(0,1.6fr) minmax(260px,1fr); }.iot-device-grid,.iot-camera-grid { grid-template-columns: 1fr; }.iot-config-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } } @media(max-width:760px){ .iot-metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }.iot-dashboard-grid { grid-template-columns: 1fr; gap: 12px; }.iot-panel { padding: 14px; }.iot-attention .iot-panel-header { margin: -14px -14px 0; }.iot-form-grid,.iot-config-grid { grid-template-columns: 1fr; }.iot-main-column,.iot-side-column { gap: 12px; }.iot-page-header { margin-bottom: 12px; }.iot-filters label { flex: 1 1 135px; }.iot-metric { padding: 10px; gap: 6px; }.iot-metric small { font-size: .65rem; }.iot-icon { width: 30px; height: 30px; flex-basis: 30px; font-size: 20px; }.iot-filters .iot-button,.iot-button { min-height: 44px; }.iot-device-card footer { flex-wrap: wrap; }.iot-form fieldset { padding: 10px; } } .iot-binary-actions { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; } .iot-page :is(#iot-controls-panel,#iot-cameras-panel) { scroll-margin-top: 90px; } .iot-history-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; margin-top: 16px; } .iot-history-samples { margin-top: 16px; }.iot-history-samples>summary { cursor: pointer; font-size: .8rem; font-weight: 700; min-height: 32px; }.iot-event>form { margin-top: 8px; }.iot-page>.iot-panel .ds-echart__plot { min-height: 280px; } @media(max-width:760px){.iot-history-grid {grid-template-columns:1fr;}} /* IoT quick controls: compact cards and explicit, reading-backed switches. */ .iot-quick-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; align-items:start; } .iot-quick-card { min-width:0; border:1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius:9px; background:var(--ok-surface-ffffff,#fff); padding:10px; } .iot-quick-card--alarm,.iot-quick-card--multiple { grid-column:1/-1; } .iot-quick-heading { display:flex; align-items:center; gap:7px; min-width:0; margin-bottom:5px; } .iot-quick-heading>span:last-child { min-width:0; } .iot-quick-heading strong { display:block; font-size:.73rem; line-height:1.4; overflow-wrap:anywhere; } .iot-quick-heading small { display:block; font-size:.65rem; color:var(--ok-ink-64748b,#64748b); line-height:1.4; margin-top:2px; overflow-wrap:anywhere; } .iot-quick-icon { display:flex; align-items:center; justify-content:center; flex:0 0 28px; width:28px; height:28px; border-radius:7px; background:var(--ok-surface-f1f0fa,#f1f0fa); color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:19px; } .iot-quick-card--light .iot-quick-icon { color:var(--ok-ink-b77900,#b77900); background:var(--ok-surface-fff8df,#fff8df); } .iot-quick-card--alarm .iot-quick-icon { color:var(--ok-ink-dc2626,#dc2626); background:var(--ok-surface-fee2e2,#fee2e2); } .iot-quick-card--door .iot-quick-icon { color:var(--ok-ink-64748b,#64748b); background:var(--ok-surface-f1f5f9,#f1f5f9); } .iot-command.iot-quick-command { padding:5px 0; gap:5px; margin:0; } .iot-quick-command:last-child { padding-bottom:0; } .iot-quick-row { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:3px 6px; min-height:38px; } .iot-quick-label { min-width:0; flex:1 1 55px; font-size:.7rem; font-weight:650; line-height:1.4; overflow-wrap:anywhere; } .iot-quick-label small { display:block; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; font-weight:400; } .iot-quick-binary { display:flex; flex-wrap:wrap; gap:5px; } .iot-quick-card .iot-button { min-height:32px; padding:5px 8px; font-size:.65rem; border-radius:6px; } .iot-quick-input { display:flex; align-items:center; flex-wrap:wrap; gap:5px; } .iot-quick-input :is(input,select) { flex:1 1 70px; min-width:0; width:0; min-height:32px; padding:5px 7px; font-size:.72rem; } .iot-quick-command .iot-feedback:empty { display:none; } .iot-quick-command .iot-feedback { margin:0; font-size:.65rem; overflow-wrap:anywhere; } .iot-toggle { display:flex; align-items:center; justify-content:center; flex:0 0 44px; width:44px; height:44px; padding:0; border:0; border-radius:8px; background:transparent; cursor:pointer; } .iot-toggle>span { display:block; position:relative; width:30px; height:18px; background:var(--ok-surface-94a3b8,#94a3b8); border-radius:20px; transition:background .15s; } .iot-toggle>span::after { content:''; position:absolute; top:3px; left:3px; width:12px; height:12px; border-radius:50%; background:var(--ok-surface-ffffff,#fff); box-shadow:0 1px 2px var(--ok-shadow-000000_a133,#0002); transition:transform .15s; } .iot-toggle[aria-checked=true]>span { background:var(--ok-surface-2563eb,#2563eb); }.iot-toggle[aria-checked=true]>span::after { transform:translateX(12px); } .iot-toggle:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb); outline-offset:2px; } .iot-toggle:disabled { opacity:.5; cursor:wait; } .iot-quick-command[data-sending] { opacity:.65; } .iot-quick-readonly { display:flex; flex-wrap:wrap; gap:6px; justify-content:space-between; padding:8px 0; border-top:1px solid var(--ok-line-edf0f5,#edf0f5); font-size:.7rem; } .iot-quick-readonly small { color:var(--ok-ink-64748b,#64748b); }.iot-quick-note { margin-top:6px; font-size:.65rem; } @media(max-width:760px) { .iot-quick-card .iot-button,.iot-quick-input :is(input,select) { min-height:44px; }.iot-quick-grid { gap:8px; } } @media(max-width:380px) { .iot-quick-grid { grid-template-columns:1fr; } } @media(prefers-reduced-motion:reduce) { .iot-toggle>span,.iot-toggle>span::after { transition:none; } } .iot-command.iot-quick-command--value { grid-template-columns:minmax(50px,.5fr) minmax(0,1fr); align-items:center; } .iot-quick-command--value>.iot-feedback { grid-column:1/-1; } /* IoT measurement dashboard and separate compact device directory. */ .iot-page :is(#iot-sensors-panel,#iot-devices-panel) { scroll-margin-top:90px; } .iot-sensor-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .iot-sensor-group { display:contents; } .iot-sensor-tile { min-width:0; padding:14px; border:1px solid var(--ok-line-e1e8f3,#e1e8f3); border-radius:10px; background:linear-gradient(140deg,var(--ok-surface-f5f8ff,#f5f8ff),var(--ok-surface-ffffff,#fff) 70%); } .iot-sensor-tile>header { display:flex; align-items:center; gap:7px; font-size:.73rem; font-weight:650; line-height:1.4; overflow-wrap:anywhere; } .iot-sensor-tile>header>.material-symbols-rounded { display:flex; flex:0 0 28px; align-items:center; justify-content:center; width:28px; height:28px; border-radius:8px; background:var(--ok-surface-e8efff,#e8efff); color:var(--ok-ink-2563eb,#2563eb); font-size:20px; } .iot-sensor-tile[data-kind=temperature]>header>.material-symbols-rounded { background:var(--ok-surface-fff0df,#fff0df); color:var(--ok-ink-b45309,#b45309); } .iot-sensor-tile[data-kind=humidity]>header>.material-symbols-rounded { background:var(--ok-surface-e0f5ff,#e0f5ff); color:var(--ok-ink-0369a1,#0369a1); } .iot-sensor-tile[data-kind=energy]>header>.material-symbols-rounded { background:var(--ok-surface-e5f6eb,#e5f6eb); color:var(--ok-ink-15803d,#15803d); } .iot-sensor-value { display:flex; align-items:baseline; flex-wrap:wrap; gap:5px; padding:14px 0 10px; } .iot-sensor-value>strong { font-size:1.8rem; line-height:1.2; letter-spacing:-.04em; overflow-wrap:anywhere; } .iot-sensor-value>span { color:var(--ok-ink-64748b,#64748b); font-size:.8rem; } .iot-sensor-origin { display:block; font-size:.7rem; line-height:1.4; overflow-wrap:anywhere; } .iot-sensor-location { display:block; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; } .iot-sensor-tile .iot-sensor-quality { margin-top:10px; color:var(--ok-ink-166534,#166534); font-size:.65rem; font-weight:600; } .iot-sensor-tile[data-fresh=false] .iot-sensor-quality { color:var(--ok-ink-9a3412,#9a3412); } .iot-sensor-tile time { display:block; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; margin-top:2px; } .iot-sensor-tile>a { display:flex; align-items:center; justify-content:space-between; gap:6px; min-height:32px; margin-top:8px; border-top:1px solid var(--ok-line-e7edf5,#e7edf5); padding-top:6px; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.68rem; text-decoration:none; } .iot-sensor-tile>a>.material-symbols-rounded { display:flex; font-size:17px; } .iot-device-list { display:grid; } .iot-device-row { padding:12px 0; min-width:0; border-top:1px solid var(--ok-line-edf0f5,#edf0f5); } .iot-device-row:first-child { padding-top:0; border-top:0; } .iot-device-row:last-child { padding-bottom:0; } .iot-device-row-main { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:4px 12px; } .iot-device-row header { display:flex; align-items:center; gap:8px; min-width:0; } .iot-device-row header>div { min-width:0; } .iot-device-row h3 { font-size:.75rem; font-weight:700; line-height:1.4; overflow-wrap:anywhere; } .iot-device-row header small { display:block; margin-top:2px; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; overflow-wrap:anywhere; } .iot-device-row .iot-status { margin:0; justify-self:end; } .iot-device-row time { font-size:.65rem; color:var(--ok-ink-64748b,#64748b); line-height:1.5; } .iot-device-row-actions { display:flex; align-items:center; justify-content:flex-end; flex-wrap:wrap; gap:10px; } .iot-device-row-actions>a { display:flex; align-items:center; min-height:36px; color:var(--ok-ink-4f4c8f,#4f4c8f); font-size:.68rem; } .iot-device-data>summary { display:list-item; list-style:disclosure-closed inside; width:fit-content; padding:5px 0; min-height:28px; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; cursor:pointer; } .iot-device-data[open]>summary { list-style-type:disclosure-open; } .iot-device-data[open] { margin-top:6px; padding:8px 10px; border:1px solid var(--ok-line-edf0f5,#edf0f5); border-radius:8px; background:var(--ok-surface-f8fafc,#f8fafc); } .iot-device-data .iot-readings { margin-top:7px; max-height:240px; } @media(max-width:1100px) { .iot-sensor-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.iot-device-row-main { grid-template-columns:minmax(0,1fr); }.iot-device-row .iot-status { justify-self:start; margin:3px 0; }.iot-device-row-actions { justify-content:flex-start; } } @media(max-width:760px) { .iot-sensor-tile { padding:11px; }.iot-sensor-value>strong { font-size:1.6rem; }.iot-sensor-tile>a,.iot-device-row-actions>a,.iot-device-data>summary { min-height:44px; }.iot-device-row-main { grid-template-columns:minmax(0,1fr) auto; }.iot-device-row .iot-status { justify-self:end; }.iot-device-row-actions { justify-content:flex-end; } } @media(max-width:760px) { .iot-device-row-main>header { grid-column:1/-1; }.iot-device-row-main>time { grid-column:1; grid-row:2; }.iot-device-row-main>.iot-status { grid-column:2; grid-row:2; max-width:145px; }.iot-device-row-actions { grid-column:1/-1; justify-content:flex-start; } } .iot-feedback[data-device-error][data-error=false] { color:var(--ok-ink-9a3412,#9a3412); } /* Device removal uses native disclosure confirmation and a CSRF-protected form. */ .iot-device-admin-actions { display:flex; align-items:flex-start; flex-wrap:wrap; gap:8px; margin-top:12px; } .iot-delete-confirm { min-width:0; flex:1 1 90px; } .iot-delete-confirm>summary { display:flex; align-items:center; justify-content:center; width:fit-content; min-height:40px; padding:8px 12px; border:1px solid var(--ok-line-fecaca,#fecaca); border-radius:8px; background:var(--ok-surface-ffffff,#fff); color:var(--ok-ink-b91c1c,#b91c1c); font-size:.76rem; font-weight:650; cursor:pointer; list-style:none; } .iot-delete-confirm>summary::-webkit-details-marker { display:none; } .iot-delete-confirm[open] { flex-basis:100%; } .iot-delete-confirm form { display:grid; gap:10px; padding:12px; margin-top:8px; border:1px solid var(--ok-line-fecaca,#fecaca); border-radius:8px; background:var(--ok-surface-fffafa,#fffafa); } .iot-delete-confirm form .iot-button { justify-self:start; } .iot-button.iot-button-danger { background:var(--ok-surface-b91c1c,#b91c1c); border-color:var(--ok-line-b91c1c,#b91c1c); color:var(--ok-ink-ffffff,#fff); } .iot-delete-notice { padding:12px; margin-bottom:14px!important; border:1px solid var(--ok-line-bbf7d0,#bbf7d0); border-radius:8px; background:var(--ok-surface-f0fdf4,#f0fdf4); color:var(--ok-ink-166534,#166534); font-size:.78rem; } @media(max-width:760px) { .iot-delete-confirm>summary { min-height:44px; } } .iot-device-admin-card { align-self:start; } /* On-demand Tuya discovery: select first, register only after review. */ .iot-discovery-page { max-width:1200px; } .iot-discovery-form,.iot-discovery-tools { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; } .iot-discovery-form label,.iot-discovery-tools label { display:grid; gap:6px; color:var(--ok-ink-475569,#475569); font-size:.75rem; font-weight:600; min-width:0; flex:1 1 220px; } .iot-discovery-form>label { max-width:600px; } .iot-discovery-intro { margin-top:10px!important; } .iot-discovery-tools { padding:14px 0; } .iot-discovery-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; } .iot-discovery-card { min-width:0; border:1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius:10px; padding:14px; background:var(--ok-surface-fafbfe,#fafbfe); } .iot-discovery-card>header { display:flex; justify-content:space-between; align-items:flex-start; gap:8px; } .iot-discovery-card h2 { font-size:.82rem; overflow-wrap:anywhere; } .iot-discovery-online { font-size:.65rem; color:var(--ok-ink-64748b,#64748b); white-space:nowrap; } .iot-discovery-card>code { display:block; margin:8px 0 4px; font-size:.7rem; color:var(--ok-ink-64748b,#64748b); overflow-wrap:anywhere; } .iot-discovery-card>small { display:block; } .iot-discovery-card .iot-discovery-state { font-size:.72rem; line-height:1.5; margin-top:12px; color:var(--ok-ink-475569,#475569); } .iot-discovery-card[data-state=compatible] .iot-discovery-state { color:var(--ok-ink-166534,#166534); } .iot-discovery-card[data-state=limited] .iot-discovery-state,.iot-discovery-card[data-state=unavailable] .iot-discovery-state { color:var(--ok-ink-9a3412,#9a3412); } .iot-discovery-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; } .iot-discovery-pagination { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0; } .iot-discovery-pagination>span { font-size:.73rem; color:var(--ok-ink-64748b,#64748b); } @media(max-width:760px) { .iot-discovery-grid { grid-template-columns:1fr; }.iot-discovery-form>label { max-width:none; } } /* Customer IoT sections are accessible tabs; plain anchor links without JS. */ .iot-portal-tabs { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; padding:5px; margin-bottom:16px; border:1px solid var(--ok-line-e1e6ee,#e1e6ee); border-radius:11px; background:var(--ok-surface-f1f4f9,#f1f4f9); } .iot-portal-tabs>a { display:flex; align-items:center; justify-content:center; gap:7px; min-width:0; min-height:48px; padding:9px 10px; border:1px solid transparent; border-radius:8px; color:var(--ok-ink-64748b,#64748b); font-size:.76rem; font-weight:650; line-height:1.4; text-decoration:none; } .iot-portal-tabs>a>.material-symbols-rounded { display:flex; flex:0 0 20px; font-size:20px; } .iot-portal-tabs>a>span:last-child { min-width:0; overflow-wrap:anywhere; } .iot-portal-tabs>a:hover { color:var(--ok-ink-4f4c8f,#4f4c8f); background:var(--ok-surface-ffffff_a600,#fff9); } .iot-portal-tabs>a[aria-selected=true] { color:var(--ok-ink-4f4c8f,#4f4c8f); background:var(--ok-surface-ffffff,#fff); border-color:var(--ok-line-dedff0,#dedff0); box-shadow:0 1px 3px var(--ok-shadow-172033_a43,#1720330b); } .iot-page [role=tabpanel]:focus-visible { outline:2px solid var(--ok-line-2563eb,#2563eb); outline-offset:3px; } [data-iot-portal-tabs] #iot-controls-panel .iot-quick-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } @media(max-width:760px) { .iot-portal-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px; }.iot-portal-tabs>a { justify-content:flex-start; font-size:.73rem; min-height:52px; padding:8px; } } @media(max-width:380px) { [data-iot-portal-tabs] #iot-controls-panel .iot-quick-grid { grid-template-columns:1fr; } } /* Room-based control tiles inspired by compact home automation dashboards. */ .iot-room-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,310px),1fr)); gap:22px 18px; } .iot-room { min-width:0; } .iot-room-heading { display:flex; align-items:center; gap:8px; margin-bottom:10px; min-height:28px; } .iot-room-heading>.material-symbols-rounded { display:flex; font-size:20px; color:var(--ok-ink-64748b,#64748b); } .iot-room-heading h3 { font-size:.82rem; font-weight:650; overflow-wrap:anywhere; } .iot-room-heading>small { margin-left:auto; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; white-space:nowrap; } .iot-entity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; align-items:start; } .iot-entity-card { min-width:0; overflow:hidden; border:1px solid var(--ok-line-e0e3e8,#e0e3e8); border-radius:13px; background:var(--ok-surface-ffffff,#fff); } .iot-entity-heading { display:flex; align-items:center; gap:10px; width:100%; min-width:0; min-height:62px; padding:10px; text-align:left; } .iot-entity-toggle { border:0; border-radius:12px; color:inherit; background:transparent; font:inherit; cursor:pointer; } .iot-entity-toggle:hover { background:var(--ok-surface-f8fafc,#f8fafc); } .iot-entity-toggle:disabled { opacity:.6; cursor:wait; } .iot-entity-icon { display:flex; align-items:center; justify-content:center; flex:0 0 34px; width:34px; height:34px; border-radius:50%; background:var(--ok-surface-f0f0f0,#f0f0f0); color:var(--ok-ink-8b9098,#8b9098); font-size:22px; } .iot-entity-copy { display:block; min-width:0; } .iot-entity-copy>strong { display:block; font-size:.75rem; font-weight:650; line-height:1.35; overflow-wrap:anywhere; } .iot-entity-copy>small { display:block; margin-top:3px; font-size:.68rem; line-height:1.4; color:var(--ok-ink-64748b,#64748b); overflow-wrap:anywhere; } .iot-entity-card[data-entity-state=on] .iot-entity-icon { background:var(--ok-surface-fff1c7,#fff1c7); color:var(--ok-ink-a86b00,#a86b00); } .iot-entity-card[data-entity-state=active] .iot-entity-icon { background:var(--ok-surface-e9f0ff,#e9f0ff); color:var(--ok-ink-2563eb,#2563eb); } .iot-entity-card[data-entity-state=limited] .iot-entity-icon { background:var(--ok-surface-fff4df,#fff4df); color:var(--ok-ink-9a6700,#9a6700); } .iot-entity-card[data-entity-state=unknown] .iot-entity-copy>small { color:var(--ok-ink-7c8490,#7c8490); } .iot-entity-command { margin:0; } .iot-entity-binary { display:flex; flex-wrap:wrap; gap:5px; padding:0 10px 10px; } .iot-entity-card .iot-button { min-height:32px; border-radius:8px; font-size:.65rem; padding:5px 8px; } .iot-entity-adjustment { display:grid; gap:7px; padding:0 10px 10px; } .iot-entity-adjustment>label { font-size:.65rem; color:var(--ok-ink-64748b,#64748b); } .iot-entity-input-row { display:flex; align-items:center; gap:5px; min-width:0; } .iot-entity-input-row :is(input,select) { flex:1 1 50px; width:0; min-width:0; min-height:32px; font-size:.72rem; padding:5px 6px; } .iot-page .iot-entity-range[type=range] { width:100%; min-width:0; min-height:30px; padding:0; border:0; border-radius:10px; background:var(--ok-surface-fff2cc,#fff2cc); accent-color:var(--ok-ink-d99a00,#d99a00); cursor:pointer; } .iot-entity-command .iot-feedback { padding:0 10px 10px; margin-top:0!important; font-size:.65rem; } .iot-entity-note { padding:0 10px 10px; color:var(--ok-ink-64748b,#64748b); font-size:.65rem; line-height:1.5; } .iot-entity-command[data-sending] { opacity:.65; } @media(max-width:760px) { .iot-room-grid { gap:18px; }.iot-entity-heading { gap:7px; padding:9px; }.iot-entity-icon { flex-basis:30px; width:30px; height:30px; font-size:20px; }.iot-entity-card .iot-button,.iot-entity-input-row :is(input,select),.iot-page .iot-entity-range[type=range] { min-height:44px; }.iot-entity-input-row { flex-wrap:wrap; }.iot-entity-copy>strong { font-size:.73rem; } } @media(max-width:359px) { .iot-entity-grid { grid-template-columns:1fr; } } .iot-page:not(.iot-enhanced) .iot-entity-command { display:none; } .iot-entity-range-wrap { position:relative; min-width:0; height:36px; } .iot-entity-range-wrap>progress { appearance:none; display:block; position:absolute; inset:0; width:100%; height:36px; border:0; border-radius:10px; overflow:hidden; background:var(--ok-surface-fff2cc,#fff2cc); color:var(--ok-ink-ffbf00,#ffbf00); pointer-events:none; } .iot-entity-range-wrap>progress::-webkit-progress-bar { background:var(--ok-surface-fff2cc,#fff2cc); border-radius:10px; }.iot-entity-range-wrap>progress::-webkit-progress-value { background:var(--ok-surface-ffbf00,#ffbf00); border-radius:10px; }.iot-entity-range-wrap>progress::-moz-progress-bar { background:var(--ok-surface-ffbf00,#ffbf00); border-radius:10px; } .iot-page .iot-entity-range-wrap>.iot-entity-range[type=range] { appearance:none; position:relative; z-index:1; display:block; height:36px; min-height:36px; margin:0; padding:0; background:transparent; border:0; } .iot-entity-range::-webkit-slider-runnable-track { height:36px; background:transparent; border-radius:10px; } .iot-entity-range::-webkit-slider-thumb { appearance:none; width:6px; height:22px; margin-top:7px; border:1px solid var(--ok-line-b17b00,#b17b00); border-radius:4px; background:var(--ok-surface-ffffff,#fff); } .iot-entity-range::-moz-range-track { height:36px; background:transparent; border:0; }.iot-entity-range::-moz-range-progress { background:transparent; }.iot-entity-range::-moz-range-thumb { width:5px; height:22px; border:1px solid var(--ok-line-b17b00,#b17b00); border-radius:4px; background:var(--ok-surface-ffffff,#fff); } @media(max-width:760px) { .iot-entity-range-wrap,.iot-entity-range-wrap>progress,.iot-page .iot-entity-range-wrap>.iot-entity-range[type=range] { height:44px; min-height:44px; }.iot-entity-range::-webkit-slider-runnable-track { height:44px; }.iot-entity-range::-webkit-slider-thumb { margin-top:11px; }.iot-entity-range::-moz-range-track { height:44px; } } /* IoT admin: availability only, grouped by category. */ .iot-availability-summary{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;font-size:.8rem;color:var(--ok-ink-334155,#334155);margin:16px 0 10px}.iot-availability-summary small{font-size:.7rem;color:var(--ok-ink-64748b,#64748b)}.iot-availability-counts{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.iot-availability-counts .iot-status{display:inline-flex;gap:5px;align-items:center;padding:5px 9px}.iot-availability-group{margin-bottom:14px}.iot-availability-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.iot-availability-card{min-width:0;padding:13px;border:1px solid var(--ok-line-e2e8f0,#e2e8f0);border-radius:9px;background:var(--ok-surface-ffffff,#fff)}.iot-availability-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.iot-availability-card h3{font-size:.8rem;line-height:1.4;min-width:0;overflow-wrap:anywhere;margin:0;color:var(--ok-ink-0f172a,#0f172a)}.iot-availability-card h3 a{color:inherit;text-decoration:none}.iot-availability-card h3 a:hover{text-decoration:underline}.iot-availability-card .iot-status{flex-shrink:0;font-size:.68rem;line-height:1.35;max-width:55%;text-align:center;white-space:normal}.iot-availability-card p{margin:7px 0;color:var(--ok-ink-475569,#475569);font-size:.72rem;line-height:1.5;overflow-wrap:anywhere}.iot-availability-card time{display:block;color:var(--ok-ink-64748b,#64748b);font-size:.68rem;line-height:1.4}.iot-availability [data-state=disabled]{background:var(--ok-surface-f1f5f9,#f1f5f9);color:var(--ok-ink-475569,#475569)} @media(max-width:1100px){.iot-availability-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.iot-availability-grid{grid-template-columns:minmax(0,1fr)}.iot-availability-card{padding:12px}} /* Shared pagination respects the portal/IoT typography ceiling. */ :is(.portal-body,.iot-page) .ok-pagination__summary strong, :is(.portal-body,.iot-page) :is(.ok-pagination__button,.ok-pagination__page){font-weight:700;} /* CRM map: pending-location metric opens the matching client list. */ .crm-map-metric--link{color:inherit;text-decoration:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.crm-map-metric--link:hover{border-color:var(--ok-line-d5b777,#d5b777);box-shadow:0 3px 12px var(--ok-shadow-947227_a120,rgb(148 114 39 / .12))}.crm-map-metric--link:focus-visible{outline:3px solid var(--ok-line-4f4c8f,#4f4c8f);outline-offset:3px} /* Oktopus appearance 5.69.24 — semantic color roles; light fallbacks preserve the approved UI. */ html[data-theme="dark"]{ --ok-ink-0369a1:#9fcfea; --ok-ink-047857:#9fead5; --ok-ink-059669:#9fead3; --ok-ink-075985:#9fd0ea; --ok-ink-087a34:#9feabc; --ok-ink-0f172a:#e3e6ed; --ok-ink-0f766e:#9feae4; --ok-ink-111827:#e3e6ed; --ok-ink-12734d:#9feacc; --ok-ink-137449:#9feac9; --ok-ink-15803d:#9feabb; --ok-ink-166534:#9feabb; --ok-ink-166a49:#9feacc; --ok-ink-168568:#9fead6; --ok-ink-16a34a:#8ee6af; --ok-ink-172033:#e3e6ed; --ok-ink-182236:#e3e6ed; --ok-ink-1a67aa:#9fc7ea; --ok-ink-1d4ed8:#a2b4e6; --ok-ink-1e293b:#e3e6ed; --ok-ink-1e40af:#a2b2e6; --ok-ink-1f2937:#e3e6ed; --ok-ink-20283a:#e3e6ed; --ok-ink-20293a:#e3e6ed; --ok-ink-202b3d:#e3e6ed; --ok-ink-22a06b:#8ee6c1; --ok-ink-22c55e:#8ee6af; --ok-ink-243047:#e3e6ed; --ok-ink-24324b:#e3e6ed; --ok-ink-252247:#e3e6ed; --ok-ink-253044:#e3e6ed; --ok-ink-253047:#e3e6ed; --ok-ink-253247:#e3e6ed; --ok-ink-2563eb:#a2b8e6; --ok-ink-2563eb_a82:rgb(162 184 230 / 0.0824); --ok-ink-263044:#e3e6ed; --ok-ink-263247:#e3e6ed; --ok-ink-263248:#e3e6ed; --ok-ink-272449:#e3e6ed; --ok-ink-27284a:#e3e6ed; --ok-ink-273043:#e3e6ed; --ok-ink-28264c:#e3e6ed; --ok-ink-283147:#e3e6ed; --ok-ink-283548:#e3e6ed; --ok-ink-29264e:#e3e6ed; --ok-ink-29264f:#e3e6ed; --ok-ink-29364b:#e3e6ed; --ok-ink-2a3344:#e3e6ed; --ok-ink-2a3445:#e3e6ed; --ok-ink-2b3445:#e3e6ed; --ok-ink-2c384b:#e3e6ed; --ok-ink-2d2a55:#e3e6ed; --ok-ink-2d3748:#e3e6ed; --ok-ink-2e3a4e:#c3ccd9; --ok-ink-2f3a50:#c3ccd9; --ok-ink-2f3b4e:#c3ccd9; --ok-ink-2f3b51:#c3ccd9; --ok-ink-2f3c52:#c3ccd9; --ok-ink-2f5540:#c3ccd9; --ok-ink-30394a:#c3ccd9; --ok-ink-312e61:#a6a2e6; --ok-ink-334155:#c3ccd9; --ok-ink-34315f:#e3e6ed; --ok-ink-343169:#a6a2e6; --ok-ink-344054:#c3ccd9; --ok-ink-344257:#c3ccd9; --ok-ink-354158:#c3ccd9; --ok-ink-37306f:#aaa2e6; --ok-ink-3730a3:#a6a2e6; --ok-ink-37445a:#c3ccd9; --ok-ink-384255:#c3ccd9; --ok-ink-38455c:#c3ccd9; --ok-ink-3b485d:#c3ccd9; --ok-ink-3d4657:#c3ccd9; --ok-ink-3d4a5f:#c3ccd9; --ok-ink-3e4a5f:#c3ccd9; --ok-ink-3f3b7e:#a6a2e6; --ok-ink-403d75:#a6a2e6; --ok-ink-405069:#c3ccd9; --ok-ink-413e75:#a6a2e6; --ok-ink-425067:#c3ccd9; --ok-ink-4338ca:#a7a2e6; --ok-ink-434b59:#c3ccd9; --ok-ink-443f83:#a7a2e6; --ok-ink-445169:#c3ccd9; --ok-ink-465267:#c3ccd9; --ok-ink-475569:#c3ccd9; --ok-ink-48556b:#c3ccd9; --ok-ink-48566c:#c3ccd9; --ok-ink-4b5563:#c3ccd9; --ok-ink-4b5870:#c3ccd9; --ok-ink-4f4c8f:#a5a2e6; --ok-ink-4f7667:#a6b2c5; --ok-ink-526077:#c3ccd9; --ok-ink-526176:#c3ccd9; --ok-ink-556176:#c3ccd9; --ok-ink-56657a:#a6b2c5; --ok-ink-576272:#c3ccd9; --ok-ink-5a6677:#a6b2c5; --ok-ink-5b56a2:#a7a2e6; --ok-ink-5b6472:#a6b2c5; --ok-ink-5b687b:#a6b2c5; --ok-ink-5b6880:#a6b2c5; --ok-ink-5c6680:#a6b2c5; --ok-ink-5d567f:#c3ccd9; --ok-ink-5d6575:#a6b2c5; --ok-ink-5d697d:#a6b2c5; --ok-ink-5d6a7c:#a6b2c5; --ok-ink-5d6a7e:#a6b2c5; --ok-ink-5f6877:#a6b2c5; --ok-ink-5f6979:#a6b2c5; --ok-ink-5f6b80:#a6b2c5; --ok-ink-5f6c80:#a6b2c5; --ok-ink-5f6d81:#a6b2c5; --ok-ink-607087:#a6b2c5; --ok-ink-617089:#a6b2c5; --ok-ink-64748b:#a6b2c5; --ok-ink-657084:#a6b2c5; --ok-ink-657287:#a6b2c5; --ok-ink-66619b:#a8a2e6; --ok-ink-667085:#a6b2c5; --ok-ink-66748a:#a6b2c5; --ok-ink-66758a:#a6b2c5; --ok-ink-687181:#a6b2c5; --ok-ink-687385:#a6b2c5; --ok-ink-687386:#a6b2c5; --ok-ink-68748a:#a6b2c5; --ok-ink-68758a:#a6b2c5; --ok-ink-69758a:#a6b2c5; --ok-ink-69768a:#a6b2c5; --ok-ink-69768b:#a6b2c5; --ok-ink-6b7280:#a6b2c5; --ok-ink-6c778b:#a6b2c5; --ok-ink-6d5db5:#afa2e6; --ok-ink-6d788c:#a6b2c5; --ok-ink-6e7787:#a6b2c5; --ok-ink-6e7b90:#a6b2c5; --ok-ink-6f6aa8:#a8a2e6; --ok-ink-6f7d91:#a6b2c5; --ok-ink-6f7d93:#a6b2c5; --ok-ink-6f7e94:#a6b2c5; --ok-ink-707b8f:#a6b2c5; --ok-ink-708097:#a6b2c5; --ok-ink-716da3:#a7a2e6; --ok-ink-717b8d:#a6b2c5; --ok-ink-718096:#a6b2c5; --ok-ink-718a7b:#a6b2c5; --ok-ink-727d90:#a6b2c5; --ok-ink-737d91:#a6b2c5; --ok-ink-737e91:#a6b2c5; --ok-ink-738097:#a6b2c5; --ok-ink-748094:#a6b2c5; --ok-ink-748195:#a6b2c5; --ok-ink-748197:#a6b2c5; --ok-ink-74839a:#a6b2c5; --ok-ink-766fb5:#a9a2e6; --ok-ink-768398:#a6b2c5; --ok-ink-777f91:#a6b2c5; --ok-ink-778194:#a6b2c5; --ok-ink-778397:#a6b2c5; --ok-ink-778399:#a6b2c5; --ok-ink-778499:#a6b2c5; --ok-ink-7a879b:#a6b2c5; --ok-ink-7b8493:#a6b2c5; --ok-ink-7b8494:#a6b2c5; --ok-ink-7b8595:#a6b2c5; --ok-ink-7b86a0:#a6b2c5; --ok-ink-7b8798:#a6b2c5; --ok-ink-7b8799:#a6b2c5; --ok-ink-7b879a:#a6b2c5; --ok-ink-7b889b:#a6b2c5; --ok-ink-7c3aed:#bba2e6; --ok-ink-7c4a03:#eacb9f; --ok-ink-7c4a09:#eac99f; --ok-ink-7c8490:#a6b2c5; --ok-ink-7c8696:#a6b2c5; --ok-ink-7c899c:#a6b2c5; --ok-ink-7c8aa0:#a6b2c5; --ok-ink-7d77ad:#aaa2e6; --ok-ink-7d78b3:#a8a2e6; --ok-ink-7d8795:#a6b2c5; --ok-ink-7d87a3:#a6b2c5; --ok-ink-7d899b:#a6b2c5; --ok-ink-7d899c:#a6b2c5; --ok-ink-7d899d:#a6b2c5; --ok-ink-7e8797:#a6b2c5; --ok-ink-7e8a9c:#a6b2c5; --ok-ink-7e8a9d:#a6b2c5; --ok-ink-7f8999:#a6b2c5; --ok-ink-7f8b9f:#a6b2c5; --ok-ink-804006:#eac39f; --ok-ink-817ba9:#a6b2c5; --ok-ink-818b9b:#a6b2c5; --ok-ink-8190a5:#a6b2c5; --ok-ink-8290a4:#a6b2c5; --ok-ink-8390a3:#a6b2c5; --ok-ink-8491a3:#a6b2c5; --ok-ink-8491a5:#a6b2c5; --ok-ink-854d0e:#eac79f; --ok-ink-8592a5:#a6b2c5; --ok-ink-8693a6:#a6b2c5; --ok-ink-8791a3:#a6b2c5; --ok-ink-8793a5:#a6b2c5; --ok-ink-8794a8:#a6b2c5; --ok-ink-8985bd:#9892e2; --ok-ink-8992a1:#a6b2c5; --ok-ink-8995a7:#a6b2c5; --ok-ink-8996a8:#a6b2c5; --ok-ink-8a6a37:#eacd9f; --ok-ink-8a94a5:#a6b2c5; --ok-ink-8a96a6:#a6b2c5; --ok-ink-8a96a8:#a6b2c5; --ok-ink-8a96a9:#a6b2c5; --ok-ink-8a97aa:#a6b2c5; --ok-ink-8a98aa:#a6b2c5; --ok-ink-8ad9b4:#8ee6bd; --ok-ink-8b6200:#ead49f; --ok-ink-8b9098:#a6b2c5; --ok-ink-8b96a8:#a6b2c5; --ok-ink-8b97a8:#a6b2c5; --ok-ink-8d5b20:#eac79f; --ok-ink-8f99a8:#a6b2c5; --ok-ink-9199a7:#a6b2c5; --ok-ink-92400e:#eabb9f; --ok-ink-929baa:#a6b2c5; --ok-ink-939baa:#a6b2c5; --ok-ink-93a0b2:#a6b2c5; --ok-ink-94a0b1:#a6b2c5; --ok-ink-94a0b2:#a6b2c5; --ok-ink-94a3b8:#a6b2c5; --ok-ink-95a1b3:#a6b2c5; --ok-ink-98a3b2:#a6b2c5; --ok-ink-991b1b:#ea9f9f; --ok-ink-9a3412:#eab29f; --ok-ink-9a6700:#ead19f; --ok-ink-9aa5b5:#a6b2c5; --ok-ink-9aa6b6:#a6b2c5; --ok-ink-9ba3b0:#a6b2c5; --ok-ink-9dd5bd:#8ee6c0; --ok-ink-9f1239:#ea9fb4; --ok-ink-a0aabc:#a6b2c5; --ok-ink-a0aabd:#a6b2c5; --ok-ink-a16207:#eacb9f; --ok-ink-a1abba:#a6b2c5; --ok-ink-a1acbc:#a6b2c5; --ok-ink-a3adbb:#a6b2c5; --ok-ink-a4adbb:#a6b2c5; --ok-ink-a5adba:#a6b2c5; --ok-ink-a5b4c6:#a6b2c5; --ok-ink-a65e10:#eac69f; --ok-ink-a85a08:#eac59f; --ok-ink-a86b00:#eacf9f; --ok-ink-a8a5ca:#a6b2c5; --ok-ink-a8b2c0:#a6b2c5; --ok-ink-ae2433:#ea9fa7; --ok-ink-aeb9dd:#a6b2c5; --ok-ink-b42318:#eaa49f; --ok-ink-b4232f:#ea9fa5; --ok-ink-b42332:#ea9fa7; --ok-ink-b45309:#eabf9f; --ok-ink-b5b0df:#a6b2c5; --ok-ink-b6c2d3:#a6b2c5; --ok-ink-b77900:#ead09f; --ok-ink-b91c1c:#ea9f9f; --ok-ink-b9c4df:#a6b2c5; --ok-ink-b9c7d8:#a6b2c5; --ok-ink-be185d:#ea9fbe; --ok-ink-c2410c:#eab59f; --ok-ink-c25e09:#eac19f; --ok-ink-c4ccd7:#a6b2c5; --ok-ink-c56a00:#eac79f; --ok-ink-c66a13:#eac39f; --ok-ink-c93636:#ea9f9f; --ok-ink-c9d5e6:#a6b2c5; --ok-ink-cbd5e1:#a6b2c5; --ok-ink-cbd5eb:#a6b2c5; --ok-ink-d5dfec:#a6b2c5; --ok-ink-d97706:#e6bd8e; --ok-ink-d99a00:#e6cd8e; --ok-ink-dbeafe:#e3e6ed; --ok-ink-dc2626:#ea9f9f; --ok-ink-dddafe:#a6b2c5; --ok-ink-e11d48:#ea9faf; --ok-ink-e2e8f0:#e3e6ed; --ok-ink-e7edf3:#e3e6ed; --ok-ink-e8edf3:#e3e6ed; --ok-ink-e8edf4:#e3e6ed; --ok-ink-e9eef4:#e3e6ed; --ok-ink-ea580c:#eab99f; --ok-ink-ef4444:#ea9f9f; --ok-ink-f3f1fb:#e3e6ed; --ok-ink-f59e0b:#e6c58e; --ok-ink-f5d46f:#e6d18e; --ok-ink-ffbf00:#e6d08e; --ok-ink-ffffff:#e3e6ed; --ok-ink-ffffff_a700:rgb(227 230 237 / 0.7); --ok-ink-ffffff_a720:rgb(227 230 237 / 0.72); --ok-ink-ffffff_a820:rgb(227 230 237 / 0.82); --ok-ink-ffffff_a840:rgb(227 230 237 / 0.84); --ok-line-15803d:#407253; --ok-line-16865b:#40725f; --ok-line-22c55e:#407253; --ok-line-2563eb:#405072; --ok-line-2563eb_a180:rgb(64 80 114 / 0.18); --ok-line-2563eb_a200:rgb(64 80 114 / 0.2); --ok-line-2563eb_a220:rgb(64 80 114 / 0.22); --ok-line-2563eb_a240:rgb(64 80 114 / 0.24); --ok-line-2563eb_a280:rgb(64 80 114 / 0.28); --ok-line-2563eb_a300:rgb(64 80 114 / 0.3); --ok-line-2563eb_a340:rgb(64 80 114 / 0.34); --ok-line-4ade80:#407252; --ok-line-4f4c8f:#424072; --ok-line-4f4c8f_a120:rgb(66 64 114 / 0.12); --ok-line-4f4c8f_a130:rgb(66 64 114 / 0.13); --ok-line-4f4c8f_a140:rgb(66 64 114 / 0.14); --ok-line-4f4c8f_a180:rgb(66 64 114 / 0.18); --ok-line-4f4c8f_a90:rgb(66 64 114 / 0.09); --ok-line-6d68a8:#444072; --ok-line-7771b1:#454072; --ok-line-7771b7:#454072; --ok-line-7773ae:#444072; --ok-line-7c889b:#384252; --ok-line-7f79bd:#454072; --ok-line-817db7:#444072; --ok-line-854d0e:#725b40; --ok-line-86efac:#407252; --ok-line-8882bd:#454072; --ok-line-8983bd:#454072; --ok-line-8b84c7:#454072; --ok-line-8d87c2:#454072; --ok-line-8e89bd:#454072; --ok-line-8f88c8:#464072; --ok-line-8f89c4:#454072; --ok-line-8f8ac4:#454072; --ok-line-93c5fd:#405872; --ok-line-94a3b8:#384252; --ok-line-9b99c7:#384252; --ok-line-a8a2cf:#384252; --ok-line-a9a3d4:#464072; --ok-line-aaa5cf:#384252; --ok-line-aaa5d3:#384252; --ok-line-aaa5d5:#454072; --ok-line-aab4c4:#384252; --ok-line-aeb9c9:#384252; --ok-line-aebbd0:#384252; --ok-line-b17b00:#726340; --ok-line-b42318:#724440; --ok-line-b45309:#725640; --ok-line-b5b0df:#384252; --ok-line-b8b3d9:#384252; --ok-line-b91c1c:#724040; --ok-line-b9b5dc:#384252; --ok-line-b9c4d6:#384252; --ok-line-bae6fd:#2e4552; --ok-line-bbb6da:#384252; --ok-line-bbb6dc:#384252; --ok-line-bbb6df:#384252; --ok-line-bbb8dc:#384252; --ok-line-bbf7d0:#2e523a; --ok-line-bdb8de:#384252; --ok-line-bfdbfe:#2e3e52; --ok-line-c2410c:#724f40; --ok-line-c4c0df:#384252; --ok-line-c5c0e0:#384252; --ok-line-c5c1e2:#384252; --ok-line-c5c9dc:#384252; --ok-line-c7c2df:#384252; --ok-line-c7c3e5:#384252; --ok-line-c7d2fe:#2e3552; --ok-line-c8c4e4:#384252; --ok-line-c8c4e5:#384252; --ok-line-c8c6e3:#384252; --ok-line-c8d2e1:#384252; --ok-line-c9c4e4:#384252; --ok-line-c9c5e5:#384252; --ok-line-c9c6e6:#384252; --ok-line-c9c8e6:#384252; --ok-line-c9d2e1:#384252; --ok-line-c9f1d6:#384252; --ok-line-cac6e7:#384252; --ok-line-cbc7e5:#384252; --ok-line-cbc8e3:#384252; --ok-line-cbc8e5:#384252; --ok-line-cbc8e8:#384252; --ok-line-cbc9e6:#384252; --ok-line-cbcfe0_a960:rgb(56 66 82 / 0.96); --ok-line-cbd3df:#384252; --ok-line-cbd3e2:#384252; --ok-line-cbd5e1:#384252; --ok-line-ccd5e2:#384252; --ok-line-ccd6e3:#384252; --ok-line-ccd9f1:#384252; --ok-line-cdd6e2:#384252; --ok-line-cfcbe5:#384252; --ok-line-cfcbe7:#384252; --ok-line-cfd8e3:#384252; --ok-line-cfd8e5:#384252; --ok-line-d1cde7:#384252; --ok-line-d1cee5:#384252; --ok-line-d1cee8:#384252; --ok-line-d1dae6_a960:rgb(56 66 82 / 0.96); --ok-line-d1fae5:#384252; --ok-line-d2d9e5:#384252; --ok-line-d3d0e8:#384252; --ok-line-d3d0ed:#384252; --ok-line-d3dbe7:#384252; --ok-line-d4d0ef:#384252; --ok-line-d4d1e5:#384252; --ok-line-d4dce7:#384252; --ok-line-d5b777:#726240; --ok-line-d5d1eb:#384252; --ok-line-d5d2e8:#384252; --ok-line-d5d3eb:#384252; --ok-line-d5d9f1:#384252; --ok-line-d5dce6:#384252; --ok-line-d5dce8:#384252; --ok-line-d5deea:#384252; --ok-line-d6a44c:#726040; --ok-line-d6d3eb:#384252; --ok-line-d6dee9:#384252; --ok-line-d6deea:#384252; --ok-line-d7ad61:#726040; --ok-line-d7d4e9:#384252; --ok-line-d7d8ee:#384252; --ok-line-d7dbeb_a900:rgb(56 66 82 / 0.9); --ok-line-d7dee8:#384252; --ok-line-d7dee9:#384252; --ok-line-d7deea:#384252; --ok-line-d7dfeb:#384252; --ok-line-d7e0ec:#384252; --ok-line-d7e6fb:#384252; --ok-line-d7e7df:#384252; --ok-line-d8d5e8:#384252; --ok-line-d8d5eb:#384252; --ok-line-d8d5ec:#384252; --ok-line-d8d6ec:#384252; --ok-line-d8d9ec:#384252; --ok-line-d8dce5:#384252; --ok-line-d8dce7:#384252; --ok-line-d8dee8:#384252; --ok-line-d8e0eb:#384252; --ok-line-d8f0df:#384252; --ok-line-d97706:#725b40; --ok-line-d9d6ea:#384252; --ok-line-d9d6ed:#384252; --ok-line-d9d6ef:#384252; --ok-line-d9d7eb:#384252; --ok-line-d9dbe8:#384252; --ok-line-d9deea:#384252; --ok-line-d9e0ea:#384252; --ok-line-dbe1e9:#384252; --ok-line-dbe1ea:#384252; --ok-line-dbe2ea:#384252; --ok-line-dbe2ea_a850:rgb(56 66 82 / 0.85); --ok-line-dbe2ea_a900:rgb(56 66 82 / 0.9); --ok-line-dbe2ea_a920:rgb(56 66 82 / 0.92); --ok-line-dbe2ea_a950:rgb(56 66 82 / 0.95); --ok-line-dbe3ee:#384252; --ok-line-dbe4ee:#384252; --ok-line-dbe7e3:#384252; --ok-line-dbeafe:#384252; --ok-line-dc2626:#724040; --ok-line-dc2626_a180:rgb(114 64 64 / 0.18); --ok-line-dcd9ee:#384252; --ok-line-dcd9ef:#384252; --ok-line-dcd9f0:#384252; --ok-line-dce2ea:#384252; --ok-line-dce2eb:#384252; --ok-line-dce2ec:#384252; --ok-line-dce2ee:#384252; --ok-line-dce3eb:#384252; --ok-line-dce3ee:#384252; --ok-line-dce4ee:#384252; --ok-line-dce4ef:#384252; --ok-line-dce6f3:#384252; --ok-line-dce7f7:#384252; --ok-line-dce8e3:#384252; --ok-line-ddd9ef:#384252; --ok-line-dddaf0:#384252; --ok-line-dde1ea:#384252; --ok-line-dde4ee:#384252; --ok-line-dedaf0:#384252; --ok-line-dedbea:#384252; --ok-line-dedcf0:#384252; --ok-line-dedcf1:#384252; --ok-line-dedff0:#384252; --ok-line-dfdcf1:#384252; --ok-line-dfe2f5:#384252; --ok-line-dfe3ed:#384252; --ok-line-dfe4eb:#384252; --ok-line-dfe4ec:#384252; --ok-line-dfe4ed:#384252; --ok-line-dfe4ef:#384252; --ok-line-dfe5ec:#384252; --ok-line-dfe5ed:#384252; --ok-line-dfe5ee:#384252; --ok-line-dfe6ee:#384252; --ok-line-dfe6ef:#384252; --ok-line-e0ddf2:#384252; --ok-line-e0e3e8:#384252; --ok-line-e0e5ed:#384252; --ok-line-e0e5ee:#384252; --ok-line-e11d48:#72404b; --ok-line-e1e4ec:#384252; --ok-line-e1e5ee:#384252; --ok-line-e1e6ee:#384252; --ok-line-e1e7ef:#384252; --ok-line-e1e8f3:#384252; --ok-line-e2def1:#384252; --ok-line-e2e5ec:#384252; --ok-line-e2e6ed:#384252; --ok-line-e2e8f0:#384252; --ok-line-e2e8f0_a820:rgb(56 66 82 / 0.82); --ok-line-e2e8f0_a900:rgb(56 66 82 / 0.9); --ok-line-e2e8f0_a950:rgb(56 66 82 / 0.95); --ok-line-e3e0f1:#384252; --ok-line-e3e8ef:#384252; --ok-line-e3e8f0:#384252; --ok-line-e3e8f1:#384252; --ok-line-e3e9f1:#384252; --ok-line-e4e1f4:#384252; --ok-line-e4e2f2:#384252; --ok-line-e4e8ee:#384252; --ok-line-e4e8f0:#384252; --ok-line-e4e9f0:#384252; --ok-line-e5e7eb:#384252; --ok-line-e5e7f2:#384252; --ok-line-e5e9ef:#384252; --ok-line-e5e9f0:#384252; --ok-line-e5eaf1:#384252; --ok-line-e6e8f5:#384252; --ok-line-e6eaf0:#384252; --ok-line-e6eaf2:#384252; --ok-line-e6ebf1:#384252; --ok-line-e6ebf2:#384252; --ok-line-e7e9ef:#384252; --ok-line-e7eaf0:#384252; --ok-line-e7ebf1:#384252; --ok-line-e7ebf2:#384252; --ok-line-e7edf5:#384252; --ok-line-e8e6f6:#384252; --ok-line-e8ebf0:#384252; --ok-line-e8ebf2:#384252; --ok-line-e8ecf1:#384252; --ok-line-e8ecf2:#384252; --ok-line-e8edf2:#384252; --ok-line-e8edf3:#384252; --ok-line-e8edf4:#384252; --ok-line-e9edf2:#384252; --ok-line-e9edf3:#384252; --ok-line-ead7a9:#726440; --ok-line-ebe9f7:#384252; --ok-line-ebeff4:#384252; --ok-line-edf0f4:#384252; --ok-line-edf0f5:#384252; --ok-line-edf0f6:#384252; --ok-line-edf1f5:#384252; --ok-line-edf1f6:#384252; --ok-line-eee2ce:#384252; --ok-line-eef2f7:#384252; --ok-line-ef4444:#724040; --ok-line-f0c96d:#726340; --ok-line-f0d2a4:#725f40; --ok-line-f0f3f7:#384252; --ok-line-f1c8cd:#384252; --ok-line-f1f5f9:#384252; --ok-line-f2cc88:#726040; --ok-line-f2dfad:#52482e; --ok-line-f3d7a6:#52452e; --ok-line-f3ddbd:#52432e; --ok-line-f4b4b4:#522e2e; --ok-line-f59e0b:#726040; --ok-line-f6c76b:#726140; --ok-line-f6d68a:#726340; --ok-line-f87171:#724040; --ok-line-fbbf24:#726440; --ok-line-fca5a5:#522e2e; --ok-line-fdba74:#725a40; --ok-line-fde0a3:#52462e; --ok-line-fde1b3:#52442e; --ok-line-fde4a7:#52472e; --ok-line-fde68a:#726840; --ok-line-fde7b0:#52472e; --ok-line-fecaca:#522e2e; --ok-line-fecdd3:#522e32; --ok-line-fed7aa:#52412e; --ok-line-ffedd5:#384252; --ok-line-ffffff:#384252; --ok-line-ffffff_a110:rgb(56 66 82 / 0.11); --ok-line-ffffff_a120:rgb(56 66 82 / 0.12); --ok-line-ffffff_a130:rgb(56 66 82 / 0.13); --ok-line-ffffff_a140:rgb(56 66 82 / 0.14); --ok-line-ffffff_a180:rgb(56 66 82 / 0.18); --ok-line-ffffff_a240:rgb(56 66 82 / 0.24); --ok-line-ffffff_a520:rgb(56 66 82 / 0.52); --ok-line-ffffff_a80:rgb(56 66 82 / 0.08); --ok-shadow-000000_a133:rgb(0 0 0 / 0.1333); --ok-shadow-000000_a180:rgb(0 0 0 / 0.18); --ok-shadow-0f172a_a110:rgb(0 0 0 / 0.1098); --ok-shadow-0f172a_a120:rgb(0 0 0 / 0.12); --ok-shadow-0f172a_a141:rgb(0 0 0 / 0.1412); --ok-shadow-0f172a_a160:rgb(0 0 0 / 0.16); --ok-shadow-0f172a_a180:rgb(0 0 0 / 0.18); --ok-shadow-0f172a_a20:rgb(0 0 0 / 0.0196); --ok-shadow-0f172a_a200:rgb(0 0 0 / 0.2); --ok-shadow-0f172a_a220:rgb(0 0 0 / 0.22); --ok-shadow-0f172a_a24:rgb(0 0 0 / 0.0235); --ok-shadow-0f172a_a25:rgb(0 0 0 / 0.025); --ok-shadow-0f172a_a30:rgb(0 0 0 / 0.03); --ok-shadow-0f172a_a300:rgb(0 0 0 / 0.3); --ok-shadow-0f172a_a35:rgb(0 0 0 / 0.035); --ok-shadow-0f172a_a350:rgb(0 0 0 / 0.35); --ok-shadow-0f172a_a40:rgb(0 0 0 / 0.04); --ok-shadow-0f172a_a400:rgb(0 0 0 / 0.4); --ok-shadow-0f172a_a420:rgb(0 0 0 / 0.42); --ok-shadow-0f172a_a45:rgb(0 0 0 / 0.045); --ok-shadow-0f172a_a450:rgb(0 0 0 / 0.45); --ok-shadow-0f172a_a480:rgb(0 0 0 / 0.48); --ok-shadow-0f172a_a500:rgb(0 0 0 / 0.5); --ok-shadow-0f172a_a502:rgb(0 0 0 / 0.502); --ok-shadow-0f172a_a520:rgb(0 0 0 / 0.52); --ok-shadow-0f172a_a550:rgb(0 0 0 / 0.55); --ok-shadow-0f172a_a560:rgb(0 0 0 / 0.56); --ok-shadow-0f172a_a580:rgb(0 0 0 / 0.58); --ok-shadow-0f172a_a600:rgb(0 0 0 / 0.6); --ok-shadow-0f172a_a620:rgb(0 0 0 / 0.62); --ok-shadow-0f172a_a650:rgb(0 0 0 / 0.65); --ok-shadow-0f172a_a70:rgb(0 0 0 / 0.07); --ok-shadow-0f172a_a700:rgb(0 0 0 / 0.7); --ok-shadow-0f172a_a750:rgb(0 0 0 / 0.75); --ok-shadow-0f172a_a80:rgb(0 0 0 / 0.08); --ok-shadow-0f172a_a800:rgb(0 0 0 / 0.8); --ok-shadow-0f172a_a82:rgb(0 0 0 / 0.0824); --ok-shadow-10b981_a100:rgb(0 0 0 / 0.1); --ok-shadow-10b981_a120:rgb(0 0 0 / 0.12); --ok-shadow-15803d_a100:rgb(0 0 0 / 0.1); --ok-shadow-166534_a80:rgb(0 0 0 / 0.08); --ok-shadow-172033_a40:rgb(0 0 0 / 0.04); --ok-shadow-172033_a43:rgb(0 0 0 / 0.0431); --ok-shadow-1e3a8a:#000000; --ok-shadow-1e3a8a_a550:rgb(0 0 0 / 0.55); --ok-shadow-1e3a8a_a720:rgb(0 0 0 / 0.72); --ok-shadow-232d4b_a180:rgb(0 0 0 / 0.18); --ok-shadow-24324b_a20:rgb(0 0 0 / 0.0196); --ok-shadow-252b48_a80:rgb(0 0 0 / 0.08); --ok-shadow-2563eb_a100:rgb(0 0 0 / 0.1); --ok-shadow-2563eb_a220:rgb(0 0 0 / 0.22); --ok-shadow-2563eb_a550:rgb(0 0 0 / 0.55); --ok-shadow-2563eb_a850:rgb(0 0 0 / 0.85); --ok-shadow-2563eb_a950:rgb(0 0 0 / 0.95); --ok-shadow-262c44_a55:rgb(0 0 0 / 0.055); --ok-shadow-334155:#000000; --ok-shadow-4f4c8f:#000000; --ok-shadow-4f4c8f_a100:rgb(0 0 0 / 0.1); --ok-shadow-4f4c8f_a110:rgb(0 0 0 / 0.11); --ok-shadow-4f4c8f_a120:rgb(0 0 0 / 0.12); --ok-shadow-4f4c8f_a130:rgb(0 0 0 / 0.13); --ok-shadow-4f4c8f_a140:rgb(0 0 0 / 0.14); --ok-shadow-4f4c8f_a180:rgb(0 0 0 / 0.18); --ok-shadow-4f4c8f_a200:rgb(0 0 0 / 0.2); --ok-shadow-4f4c8f_a220:rgb(0 0 0 / 0.22); --ok-shadow-4f4c8f_a240:rgb(0 0 0 / 0.24); --ok-shadow-4f4c8f_a420:rgb(0 0 0 / 0.42); --ok-shadow-4f4c8f_a450:rgb(0 0 0 / 0.45); --ok-shadow-4f4c8f_a480:rgb(0 0 0 / 0.48); --ok-shadow-4f4c8f_a500:rgb(0 0 0 / 0.5); --ok-shadow-4f4c8f_a550:rgb(0 0 0 / 0.55); --ok-shadow-4f4c8f_a580:rgb(0 0 0 / 0.58); --ok-shadow-4f4c8f_a60:rgb(0 0 0 / 0.06); --ok-shadow-4f4c8f_a600:rgb(0 0 0 / 0.6); --ok-shadow-4f4c8f_a650:rgb(0 0 0 / 0.65); --ok-shadow-4f4c8f_a700:rgb(0 0 0 / 0.7); --ok-shadow-4f4c8f_a720:rgb(0 0 0 / 0.72); --ok-shadow-4f4c8f_a750:rgb(0 0 0 / 0.75); --ok-shadow-4f4c8f_a80:rgb(0 0 0 / 0.08); --ok-shadow-4f4c8f_a800:rgb(0 0 0 / 0.8); --ok-shadow-4f4c8f_a820:rgb(0 0 0 / 0.82); --ok-shadow-4f4c8f_a850:rgb(0 0 0 / 0.85); --ok-shadow-4f4c8f_a90:rgb(0 0 0 / 0.09); --ok-shadow-4f4c8f_a900:rgb(0 0 0 / 0.9); --ok-shadow-4f4c8f_a920:rgb(0 0 0 / 0.92); --ok-shadow-6078ff_a950:rgb(0 0 0 / 0.95); --ok-shadow-625da3:#000000; --ok-shadow-78350f_a450:rgb(0 0 0 / 0.45); --ok-shadow-947227_a120:rgb(0 0 0 / 0.12); --ok-shadow-b45309_a100:rgb(0 0 0 / 0.1); --ok-shadow-b5b0df:#000000; --ok-shadow-c2410c_a450:rgb(0 0 0 / 0.45); --ok-shadow-cbd5e1:#000000; --ok-shadow-d8d5ec:#000000; --ok-shadow-d8dde5:#000000; --ok-shadow-dc2626_a110:rgb(0 0 0 / 0.11); --ok-shadow-dce3ee:#000000; --ok-shadow-dcfce7:#000000; --ok-shadow-edf1f5:#000000; --ok-shadow-ef4444_a100:rgb(0 0 0 / 0.1); --ok-shadow-ef4444_a120:rgb(0 0 0 / 0.12); --ok-shadow-f1f5f9:#000000; --ok-shadow-f59e0b_a100:rgb(0 0 0 / 0.1); --ok-shadow-fee2e2:#000000; --ok-shadow-fef3c7:#000000; --ok-shadow-ffffff_a10:rgb(0 0 0 / 0.01); --ok-shadow-ffffff_a100:rgb(0 0 0 / 0.1); --ok-shadow-ffffff_a720:rgb(0 0 0 / 0.72); --ok-shadow-ffffff_a80:rgb(0 0 0 / 0.08); --ok-surface-030a19_a200:rgb(20 24 32 / 0.2); --ok-surface-059669:#277c62; --ok-surface-06b6d4:#318c9b; --ok-surface-0f172a:#141820; --ok-surface-0f172a_a380:rgb(20 24 32 / 0.38); --ok-surface-0f172a_a400:rgb(20 24 32 / 0.4); --ok-surface-0f172a_a439:rgb(20 24 32 / 0.4392); --ok-surface-0f172a_a440:rgb(20 24 32 / 0.44); --ok-surface-0f172a_a500:rgb(20 24 32 / 0.5); --ok-surface-0f172a_a520:rgb(20 24 32 / 0.52); --ok-surface-0f766e:#277c75; --ok-surface-10b981:#277c60; --ok-surface-11153e:#141820; --ok-surface-111827:#141820; --ok-surface-111a2d:#141820; --ok-surface-15803d:#277c47; --ok-surface-16865b:#277c5b; --ok-surface-16a34a:#277c46; --ok-surface-171a4d:#31379b; --ok-surface-172033:#141820; --ok-surface-181b56:#31369b; --ok-surface-191f2d_a960:rgb(20 24 32 / 0.96); --ok-surface-1b2669_a200:rgb(49 64 155 / 0.2); --ok-surface-1b2940:#141820; --ok-surface-22a06b:#277c58; --ok-surface-22c55e:#277c46; --ok-surface-2563eb:#31529b; --ok-surface-2563eb_a100:rgb(49 82 155 / 0.1); --ok-surface-2563eb_a110:rgb(49 82 155 / 0.11); --ok-surface-2563eb_a130:rgb(49 82 155 / 0.13); --ok-surface-2563eb_a170:rgb(49 82 155 / 0.17); --ok-surface-2563eb_a25:rgb(49 82 155 / 0.025); --ok-surface-2563eb_a260:rgb(49 82 155 / 0.26); --ok-surface-2563eb_a300:rgb(49 82 155 / 0.3); --ok-surface-2563eb_a35:rgb(49 82 155 / 0.035); --ok-surface-2563eb_a80:rgb(49 82 155 / 0.08); --ok-surface-2563eb_a900:rgb(49 82 155 / 0.9); --ok-surface-29394f:#141820; --ok-surface-2a2070_a860:rgb(62 49 155 / 0.86); --ok-surface-2a2468:#3d3498; --ok-surface-2d256c_a680:rgb(63 52 152 / 0.68); --ok-surface-34325f:#141820; --ok-surface-403d75:#494686; --ok-surface-403d78:#484587; --ok-surface-403d79:#484488; --ok-surface-413e78:#494587; --ok-surface-464795:#41428b; --ok-surface-4f4c8f:#4a4785; --ok-surface-4f4c8f_a100:rgb(74 71 133 / 0.1); --ok-surface-4f4c8f_a120:rgb(74 71 133 / 0.12); --ok-surface-4f4c8f_a140:rgb(74 71 133 / 0.14); --ok-surface-4f4c8f_a150:rgb(74 71 133 / 0.15); --ok-surface-4f4c8f_a200:rgb(74 71 133 / 0.2); --ok-surface-4f4c8f_a280:rgb(74 71 133 / 0.28); --ok-surface-4f4c8f_a45:rgb(74 71 133 / 0.045); --ok-surface-4f4c8f_a55:rgb(74 71 133 / 0.055); --ok-surface-4f4c8f_a80:rgb(74 71 133 / 0.08); --ok-surface-4f4c8f_a90:rgb(74 71 133 / 0.09); --ok-surface-4f4c8f_a960:rgb(74 71 133 / 0.96); --ok-surface-4f5fc4:#334199; --ok-surface-4f7cff:#314c9b; --ok-surface-565192:#4d4983; --ok-surface-58578f:#4a4983; --ok-surface-5955a3:#494686; --ok-surface-5d58a3:#4c4884; --ok-surface-6366f1:#31339b; --ok-surface-64748b:#141820; --ok-surface-6966c2_a380:rgb(61 58 146 / 0.38); --ok-surface-6c68ae:#4b4785; --ok-surface-6f6ab4:#494488; --ok-surface-6f6bb0:#4b4785; --ok-surface-6f6cac:#4c4983; --ok-surface-7773ba:#474389; --ok-surface-7c3aed:#58319b; --ok-surface-881337:#9b3152; --ok-surface-92400e:#7c4727; --ok-surface-938feb_a170:rgb(54 49 155 / 0.17); --ok-surface-93c5fd:#1f2833; --ok-surface-94a3b8:#1e2633; --ok-surface-9f1239:#9b314e; --ok-surface-b45309:#7c4c27; --ok-surface-b91c1c:#9b3131; --ok-surface-c2410c:#9b5031; --ok-surface-cbd5e1:#222936; --ok-surface-d97706:#7c5527; --ok-surface-dbeafe:#222936; --ok-surface-dc2626:#9b3131; --ok-surface-dc3f4f:#9b313c; --ok-surface-dcfce7:#161b24; --ok-surface-e0f5ff:#222936; --ok-surface-e11d48:#9b3148; --ok-surface-e2e8f0:#222936; --ok-surface-e4e8ef:#222936; --ok-surface-e5f6eb:#222936; --ok-surface-e7ebf2:#222936; --ok-surface-e7ecf3:#222936; --ok-surface-e7f2ff:#222936; --ok-surface-e7f8ef:#161b24; --ok-surface-e8e6f6:#222936; --ok-surface-e8e9f7:#222936; --ok-surface-e8ebf2:#222936; --ok-surface-e8edf2:#222936; --ok-surface-e8edf3:#222936; --ok-surface-e8edf4:#222936; --ok-surface-e8efff:#222936; --ok-surface-e9e6f6:#222936; --ok-surface-e9e7f7:#222936; --ok-surface-e9edf4:#222936; --ok-surface-e9eef4:#222936; --ok-surface-e9eef5:#222936; --ok-surface-e9f0ff:#222936; --ok-surface-eae7f7:#222936; --ok-surface-eae8f7:#222936; --ok-surface-eaf1ff:#222936; --ok-surface-eaf2ff:#222936; --ok-surface-eaf3ff:#222936; --ok-surface-eaf8ef:#161b24; --ok-surface-eceaf7:#222936; --ok-surface-ececf8:#222936; --ok-surface-ecfdf3:#161b24; --ok-surface-ecfdf5:#161b24; --ok-surface-ecfeff:#161b24; --ok-surface-ededfa:#222936; --ok-surface-edf0f4:#222936; --ok-surface-edf1f5:#222936; --ok-surface-edf1f6:#222936; --ok-surface-edf4ff:#222936; --ok-surface-eeecf8:#222936; --ok-surface-eeecfb:#222936; --ok-surface-eeedf7:#222936; --ok-surface-eeedf8:#222936; --ok-surface-eeeefa:#222936; --ok-surface-eef1f6:#222936; --ok-surface-eef2f6:#222936; --ok-surface-eef2f7:#222936; --ok-surface-eef2ff:#222936; --ok-surface-eef3fb:#222936; --ok-surface-eef4ff:#161b24; --ok-surface-eef5ff:#161b24; --ok-surface-eef6ff:#161b24; --ok-surface-ef4444:#9b3131; --ok-surface-efedf9:#222936; --ok-surface-efeff9:#222936; --ok-surface-efeffb:#222936; --ok-surface-eff6ff:#161b24; --ok-surface-effaf5:#161b24; --ok-surface-effcf4:#161b24; --ok-surface-f0eef9:#222936; --ok-surface-f0eff8:#222936; --ok-surface-f0eff9:#222936; --ok-surface-f0effa:#222936; --ok-surface-f0effb:#222936; --ok-surface-f0f0f0:#222936; --ok-surface-f0f2f8:#222936; --ok-surface-f0f6ff:#161b24; --ok-surface-f0f9ff:#161b24; --ok-surface-f0fdf4:#161b24; --ok-surface-f0fdfa:#161b24; --ok-surface-f1effa:#222936; --ok-surface-f1f0f9:#222936; --ok-surface-f1f0fa:#222936; --ok-surface-f1f0fb:#222936; --ok-surface-f1f3f6:#222936; --ok-surface-f1f4f9:#161b24; --ok-surface-f1f5f9:#161b24; --ok-surface-f1f5ff:#161b24; --ok-surface-f2f0fa:#222936; --ok-surface-f2f1f9:#222936; --ok-surface-f2f3f8:#222936; --ok-surface-f2f4f8:#161b24; --ok-surface-f2f6ff:#161b24; --ok-surface-f3f0fc:#222936; --ok-surface-f3f1fa:#222936; --ok-surface-f3f1fb:#222936; --ok-surface-f3f2fa:#222936; --ok-surface-f3f4f6:#161b24; --ok-surface-f3f5f8:#161b24; --ok-surface-f3f5fa:#161b24; --ok-surface-f3f6fb:#161b24; --ok-surface-f4f2fa:#222936; --ok-surface-f4f2fb:#222936; --ok-surface-f4f3fa:#161b24; --ok-surface-f4f3fb:#161b24; --ok-surface-f4f5f7:#161b24; --ok-surface-f4f5fa:#161b24; --ok-surface-f4f6fa:#161b24; --ok-surface-f4f7fb:#161b24; --ok-surface-f59e0b:#7c5c27; --ok-surface-f59e0b_a130:rgb(124 92 39 / 0.13); --ok-surface-f5f3fb:#161b24; --ok-surface-f5f3ff:#161b24; --ok-surface-f5f4fb:#161b24; --ok-surface-f5f6fa:#161b24; --ok-surface-f5f7fa:#161b24; --ok-surface-f5f7fb:#161b24; --ok-surface-f5f7ff:#161b24; --ok-surface-f5f8ff:#161b24; --ok-surface-f5f9ff:#161b24; --ok-surface-f5fcf8:#161b24; --ok-surface-f6f5fb:#161b24; --ok-surface-f6f5fc:#161b24; --ok-surface-f6f7fb:#161b24; --ok-surface-f6f7fc:#161b24; --ok-surface-f6f7fd_a860:rgb(22 27 36 / 0.86); --ok-surface-f6f8fc:#161b24; --ok-surface-f6faff:#161b24; --ok-surface-f7f6fc:#161b24; --ok-surface-f7f6fd:#161b24; --ok-surface-f7f7fc:#161b24; --ok-surface-f7f7ff:#161b24; --ok-surface-f7f7ff_a960:rgb(22 27 36 / 0.96); --ok-surface-f7f8fb:#161b24; --ok-surface-f7f8fc:#161b24; --ok-surface-f7f9fc:#161b24; --ok-surface-f7fcf9:#161b24; --ok-surface-f7fef9:#1a1e27; --ok-surface-f8f7fc:#161b24; --ok-surface-f8f7fd:#161b24; --ok-surface-f8f8ff:#161b24; --ok-surface-f8f9fb:#161b24; --ok-surface-f8f9fc:#161b24; --ok-surface-f8f9fd:#161b24; --ok-surface-f8f9fe:#161b24; --ok-surface-f8fafc:#161b24; --ok-surface-f8fafc_a860:rgb(22 27 36 / 0.86); --ok-surface-f8fafc_a900:rgb(22 27 36 / 0.9); --ok-surface-f8fafe:#161b24; --ok-surface-f8faff:#161b24; --ok-surface-f8fbff:#161b24; --ok-surface-f9f8fe:#161b24; --ok-surface-f9fbfd:#161b24; --ok-surface-f9fbfe:#161b24; --ok-surface-f9fbff:#161b24; --ok-surface-faf9fe:#161b24; --ok-surface-faf9ff:#161b24; --ok-surface-fafafa:#161b24; --ok-surface-fafaff:#161b24; --ok-surface-fafbfc:#161b24; --ok-surface-fafbfd:#161b24; --ok-surface-fafbfe:#161b24; --ok-surface-fafcff:#1a1e27; --ok-surface-fb7185:#9b3140; --ok-surface-fbfaff:#161b24; --ok-surface-fbfbfd:#161b24; --ok-surface-fbfbfe:#161b24; --ok-surface-fbfcfe:#1a1e27; --ok-surface-fbfcff:#1a1e27; --ok-surface-fbfdff:#1a1e27; --ok-surface-fbfefc:#1a1e27; --ok-surface-fcfbff:#161b24; --ok-surface-fcfcfe:#1a1e27; --ok-surface-fcfdff:#1a1e27; --ok-surface-fda4af:#331f21; --ok-surface-fdebec:#222936; --ok-surface-fdf2f8:#161b24; --ok-surface-fee2e2:#222936; --ok-surface-fef2f2:#161b24; --ok-surface-fef3c7:#332f1f; --ok-surface-fefce8:#161b24; --ok-surface-ffbf00:#7c6727; --ok-surface-ffedd5:#222936; --ok-surface-fff0df:#222936; --ok-surface-fff0f0:#222936; --ok-surface-fff0f1:#222936; --ok-surface-fff1c7:#332e1f; --ok-surface-fff1f2:#161b24; --ok-surface-fff2cc:#332e1f; --ok-surface-fff2d9:#222936; --ok-surface-fff3d6:#161b24; --ok-surface-fff4df:#161b24; --ok-surface-fff4e8:#161b24; --ok-surface-fff6e9:#161b24; --ok-surface-fff6f6:#161b24; --ok-surface-fff7df:#161b24; --ok-surface-fff7e6:#161b24; --ok-surface-fff7e8:#161b24; --ok-surface-fff7ed:#161b24; --ok-surface-fff7f7:#161b24; --ok-surface-fff8df:#161b24; --ok-surface-fff8ef:#161b24; --ok-surface-fff8f8:#161b24; --ok-surface-fffaf0:#161b24; --ok-surface-fffaf1:#161b24; --ok-surface-fffaf2:#161b24; --ok-surface-fffaf4:#161b24; --ok-surface-fffafa:#161b24; --ok-surface-fffafb:#161b24; --ok-surface-fffbeb:#161b24; --ok-surface-fffbf2:#161b24; --ok-surface-fffcf3:#1a1e27; --ok-surface-fffcf5:#1a1e27; --ok-surface-fffdf7:#1a1e27; --ok-surface-fffdf8:#1a1e27; --ok-surface-fffdfa:#1a1e27; --ok-surface-ffffff:#1a1e27; --ok-surface-ffffff_a140:rgb(26 30 39 / 0.14); --ok-surface-ffffff_a150:rgb(26 30 39 / 0.15); --ok-surface-ffffff_a160:rgb(26 30 39 / 0.16); --ok-surface-ffffff_a170:rgb(26 30 39 / 0.17); --ok-surface-ffffff_a55:rgb(26 30 39 / 0.055); --ok-surface-ffffff_a60:rgb(26 30 39 / 0.06); --ok-surface-ffffff_a600:rgb(26 30 39 / 0.6); --ok-surface-ffffff_a650:rgb(26 30 39 / 0.65); --ok-surface-ffffff_a720:rgb(26 30 39 / 0.72); --ok-surface-ffffff_a750:rgb(26 30 39 / 0.75); --ok-surface-ffffff_a760:rgb(26 30 39 / 0.76); --ok-surface-ffffff_a80:rgb(26 30 39 / 0.08); --ok-surface-ffffff_a820:rgb(26 30 39 / 0.82); --ok-surface-ffffff_a840:rgb(26 30 39 / 0.84); --ok-surface-ffffff_a860:rgb(26 30 39 / 0.86); --ok-surface-ffffff_a880:rgb(26 30 39 / 0.88); --ok-surface-ffffff_a900:rgb(26 30 39 / 0.9); --ok-surface-ffffff_a920:rgb(26 30 39 / 0.92); --ok-surface-ffffff_a940:rgb(26 30 39 / 0.94); --ok-surface-ffffff_a949:rgb(26 30 39 / 0.949); --ok-surface-ffffff_a950:rgb(26 30 39 / 0.95); --ok-surface-ffffff_a960:rgb(26 30 39 / 0.96); --ok-surface-ffffff_a970:rgb(26 30 39 / 0.97); --ok-surface-ffffff_a980:rgb(26 30 39 / 0.98); } /* Compact native appearance selector: works with keyboard and without Alpine. */ .ok-theme-picker{position:relative;flex:0 0 auto;font:inherit;color:#334155;z-index:75} .ok-theme-trigger{display:flex;align-items:center;justify-content:center;width:38px;height:38px;border:1px solid #dce2eb;border-radius:11px;background:#fff;color:#4f4c8f;cursor:pointer;list-style:none} .ok-theme-trigger::-webkit-details-marker{display:none}.ok-theme-trigger>.material-symbols-rounded{font-size:21px;line-height:1} .ok-theme-picker[open]>.ok-theme-trigger,.ok-theme-trigger:hover{background:#f1f0fa;border-color:#b8b1da} .ok-theme-menu{position:absolute;right:0;top:calc(100% + 10px);width:278px;max-width:calc(100vw - 24px);padding:10px;border:1px solid #dce2eb;border-radius:14px;background:#fff;box-shadow:0 16px 44px rgb(15 23 42 / .18);isolation:isolate} .ok-theme-menu>strong{display:block;padding:4px 7px 9px;font-size:.78rem;font-weight:700;color:#64748b} .ok-theme-menu>button{display:flex;align-items:center;gap:10px;width:100%;min-height:48px;padding:9px 10px;border:1px solid transparent;border-radius:9px;background:transparent;color:#334155;font:inherit;text-align:left;cursor:pointer} .ok-theme-menu>button:hover{background:#f6f7fb}.ok-theme-menu>button[aria-pressed=true]{border-color:#d6d0ec;background:#f4f2fb;color:#4f4c8f} .ok-theme-menu>button>span:nth-child(2){flex:1;min-width:0;font-size:.8rem;font-weight:600}.ok-theme-menu small{display:block;margin-top:3px;font-size:.67rem;line-height:1.4;font-weight:400;color:#64748b} .ok-theme-menu .material-symbols-rounded{font-size:21px}.ok-theme-check{visibility:hidden}.ok-theme-menu [aria-pressed=true]>.ok-theme-check{visibility:visible} .portal-login-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px}.portal-login-topbar>.ok-theme-picker{order:2;margin-left:auto} html[data-theme=light]{color-scheme:light} html[data-theme=dark]{color-scheme:dark;--app-surface:#1a1e27;--app-surface-subtle:#161b24;--app-border:#384252;--app-text:#e3e6ed;--app-muted:#a6b2c5;--app-primary:#b8aaee;--app-secondary:#9cbcf2;--ok-chart-surface:#1a1e27;--ok-chart-text:#b9c3d3;--ok-chart-line:#374052} html[data-theme=dark] body.app-body,html[data-theme=dark] body.portal-body,html[data-theme=dark] body.portal-login-body{background:#101217;color:#e3e6ed} html[data-theme=dark] :is(.app-sidebar,.portal-sidebar){background:#14171e;border-color:#303744} html[data-theme=dark] :is(.app-topbar,.portal-topbar){background:rgb(20 23 30 / .97);border-color:#303744} html[data-theme=dark] :is(.app-body,.portal-body,.portal-login-body) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),select,textarea){background-color:#141922;color:#e3e6ed;border-color:#5e6d85} html[data-theme=dark] :is(input,textarea)::placeholder{color:#9aa8bc;opacity:1} html[data-theme=dark] :is(input,select,textarea):disabled{color:#9ba7b9;background-color:#202632;opacity:.8} html[data-theme=dark] :focus-visible{outline:2px solid #baabf2;outline-offset:3px} html[data-theme=dark] ::selection{background:#665a9b;color:#f4f2fc} html[data-theme=dark] :is(.ds-button--primary,.identity-primary-button,.portal-primary-button,.app-primary-button){background:#a89bdf;border-color:#a89bdf;color:#181523} html[data-theme=dark] :is(.ds-button--primary,.identity-primary-button,.portal-primary-button,.app-primary-button):hover{background:#b9adec;border-color:#b9adec} html[data-theme=dark] .ok-theme-picker{color:#e3e6ed} html[data-theme=dark] .ok-theme-trigger{background:#1a1e27;border-color:#414b5e;color:#c0b3ef} html[data-theme=dark] :is(.ok-theme-picker[open]>.ok-theme-trigger,.ok-theme-trigger:hover){background:#29253d;border-color:#8374b2} html[data-theme=dark] .ok-theme-menu{background:#1c202a;border-color:#414b5e;box-shadow:0 18px 48px rgb(0 0 0 / .42)} html[data-theme=dark] .ok-theme-menu>strong,html[data-theme=dark] .ok-theme-menu small{color:#a6b2c5} html[data-theme=dark] .ok-theme-menu>button{color:#e3e6ed} html[data-theme=dark] .ok-theme-menu>button:hover{background:#272d3a} html[data-theme=dark] .ok-theme-menu>button[aria-pressed=true]{background:#302a46;border-color:#8f7fc0;color:#e1d8ff} /* Vendor map surfaces are not part of the ERP bundle. Preserve map tiles and imagery. */ html[data-theme=dark] :is(.leaflet-popup-content-wrapper,.leaflet-popup-tip,.leaflet-bar a,.leaflet-control-layers){background:#1c202a;color:#e3e6ed} html[data-theme=dark] .leaflet-container{background:#202632} html[data-theme=dark] .leaflet-control-attribution{background:rgb(26 30 39 / .94);color:#b9c3d3} html[data-theme=dark] .leaflet-control-attribution a{color:#c0b3ef} @media(max-width:640px){.ok-theme-trigger{width:34px;height:34px;border-radius:9px}.ok-theme-menu{position:fixed;top:calc(env(safe-area-inset-top,0px) + 62px);right:12px;max-height:calc(100dvh - 90px);overflow:auto}.portal-login-topbar .ok-theme-menu{top:70px}.portal-topbar-actions{gap:5px}} @media print{.ok-theme-picker{display:none!important}html[data-theme=dark]{color-scheme:light;--app-surface:#fff;--app-surface-subtle:#f8fafc;--app-border:#e2e8f0;--app-text:#0f172a;--app-muted:#64748b;--app-primary:#4f4c8f;--app-secondary:#2563eb}html[data-theme=dark] :is(body,.app-body,.portal-body,.portal-login-body){background:#fff!important;color:#172033!important}} /* Keep clipped table accessibility labels inside their scrolling region. */ .crm-table-wrap{position:relative} @media print{html[data-theme="dark"]{--ok-shadow-0f172a_a220:initial!important;--ok-shadow-0f172a_a300:initial!important;--ok-shadow-4f4c8f_a720:initial!important;--ok-line-2563eb_a280:initial!important;--ok-surface-f5f7fb:initial!important;--ok-ink-172033:initial!important;--ok-ink-ffffff:initial!important;--ok-surface-4f4c8f:initial!important;--ok-surface-34325f:initial!important;--ok-surface-2563eb:initial!important;--ok-surface-ffffff_a80:initial!important;--ok-surface-ffffff_a160:initial!important;--ok-shadow-000000_a180:initial!important;--ok-ink-ffffff_a820:initial!important;--ok-line-e2e8f0:initial!important;--ok-surface-ffffff_a960:initial!important;--ok-shadow-0f172a_a350:initial!important;--ok-surface-f4f3fb:initial!important;--ok-ink-4f4c8f:initial!important;--ok-ink-0f172a:initial!important;--ok-ink-64748b:initial!important;--ok-ink-334155:initial!important;--ok-line-cbd5e1:initial!important;--ok-surface-ffffff:initial!important;--ok-ink-94a3b8:initial!important;--ok-line-4f4c8f:initial!important;--ok-surface-58578f:initial!important;--ok-surface-2a2468:initial!important;--ok-line-fecaca:initial!important;--ok-ink-b91c1c:initial!important;--ok-surface-f8fafc:initial!important;--ok-surface-f8f7fd:initial!important;--ok-line-eef2f7:initial!important;--ok-line-d3d0ed:initial!important;--ok-surface-faf9fe:initial!important;--ok-ink-403d75:initial!important;--ok-line-bbf7d0:initial!important;--ok-surface-f0fdf4:initial!important;--ok-ink-166534:initial!important;--ok-surface-ecfdf5:initial!important;--ok-ink-047857:initial!important;--ok-surface-fff7ed:initial!important;--ok-ink-c2410c:initial!important;--ok-surface-f1f5f9:initial!important;--ok-surface-ffffff_a170:initial!important;--ok-surface-2563eb_a300:initial!important;--ok-surface-4f4c8f_a90:initial!important;--ok-surface-f6f8fc:initial!important;--ok-shadow-4f4c8f_a820:initial!important;--ok-ink-2563eb:initial!important;--ok-surface-4f4c8f_a80:initial!important;--ok-shadow-0f172a_a200:initial!important;--ok-line-e2e8f0_a950:initial!important;--ok-surface-ffffff_a940:initial!important;--ok-shadow-0f172a_a420:initial!important;--ok-surface-5d58a3:initial!important;--ok-surface-403d75:initial!important;--ok-shadow-4f4c8f_a900:initial!important;--ok-ink-111827:initial!important;--ok-ink-475569:initial!important;--ok-line-e8e6f6:initial!important;--ok-line-e0ddf2:initial!important;--ok-surface-eef4ff:initial!important;--ok-shadow-4f4c8f_a750:initial!important;--ok-surface-f6f5fc:initial!important;--ok-surface-e8e6f6:initial!important;--ok-line-e2e8f0_a820:initial!important;--ok-surface-ffffff_a860:initial!important;--ok-ink-7c3aed:initial!important;--ok-shadow-0f172a_a450:initial!important;--ok-surface-10b981:initial!important;--ok-shadow-10b981_a120:initial!important;--ok-surface-ef4444:initial!important;--ok-shadow-ef4444_a120:initial!important;--ok-line-ffffff:initial!important;--ok-surface-dc2626:initial!important;--ok-line-f1f5f9:initial!important;--ok-ink-1e293b:initial!important;--ok-ink-b5b0df:initial!important;--ok-surface-0f172a_a440:initial!important;--ok-line-dbe2ea:initial!important;--ok-shadow-0f172a_a580:initial!important;--ok-surface-0f172a_a500:initial!important;--ok-ink-cbd5e1:initial!important;--ok-line-e0e5ed:initial!important;--ok-surface-2563eb_a110:initial!important;--ok-surface-eaf1ff:initial!important;--ok-line-d9d6ef:initial!important;--ok-surface-ffffff_a920:initial!important;--ok-shadow-0f172a_a500:initial!important;--ok-surface-eff6ff:initial!important;--ok-surface-fffbeb:initial!important;--ok-ink-b45309:initial!important;--ok-shadow-0f172a_a480:initial!important;--ok-surface-fafcff:initial!important;--ok-surface-fef2f2:initial!important;--ok-ink-dc2626:initial!important;--ok-surface-e2e8f0:initial!important;--ok-shadow-10b981_a100:initial!important;--ok-surface-f59e0b:initial!important;--ok-shadow-f59e0b_a100:initial!important;--ok-shadow-ef4444_a100:initial!important;--ok-surface-edf1f6:initial!important;--ok-surface-cbd5e1:initial!important;--ok-line-fde68a:initial!important;--ok-ink-92400e:initial!important;--ok-ink-991b1b:initial!important;--ok-line-dbe3ee:initial!important;--ok-line-817db7:initial!important;--ok-shadow-4f4c8f_a130:initial!important;--ok-line-e5eaf1:initial!important;--ok-surface-fbfbfe:initial!important;--ok-line-dddaf0:initial!important;--ok-surface-f6f5fb:initial!important;--ok-surface-0f172a_a380:initial!important;--ok-shadow-0f172a_a700:initial!important;--ok-line-e9edf3:initial!important;--ok-line-e8edf4:initial!important;--ok-surface-fafbfd:initial!important;--ok-line-dce4ee:initial!important;--ok-surface-0f172a:initial!important;--ok-ink-dbeafe:initial!important;--ok-surface-f7fef9:initial!important;--ok-ink-16a34a:initial!important;--ok-surface-fffcf3:initial!important;--ok-ink-d97706:initial!important;--ok-surface-fff8f8:initial!important;--ok-shadow-cbd5e1:initial!important;--ok-surface-22c55e:initial!important;--ok-shadow-0f172a_a550:initial!important;--ok-surface-16a34a:initial!important;--ok-surface-dbeafe:initial!important;--ok-line-aab4c4:initial!important;--ok-shadow-4f4c8f_a110:initial!important;--ok-line-e7ebf1:initial!important;--ok-line-edf1f5:initial!important;--ok-surface-fcfcfe:initial!important;--ok-surface-f7f6fc:initial!important;--ok-line-b5b0df:initial!important;--ok-surface-fbfaff:initial!important;--ok-line-e2e8f0_a900:initial!important;--ok-shadow-0f172a_a650:initial!important;--ok-line-e6ebf1:initial!important;--ok-line-dfe5ec:initial!important;--ok-ink-a8b2c0:initial!important;--ok-surface-f9f8fe:initial!important;--ok-shadow-b5b0df:initial!important;--ok-line-dc2626:initial!important;--ok-line-f59e0b:initial!important;--ok-surface-94a3b8:initial!important;--ok-shadow-fee2e2:initial!important;--ok-surface-eef2f7:initial!important;--ok-line-e6eaf0:initial!important;--ok-line-e5e9ef:initial!important;--ok-surface-eef2ff:initial!important;--ok-ink-4338ca:initial!important;--ok-surface-fef3c7:initial!important;--ok-line-e8ecf2:initial!important;--ok-line-bae6fd:initial!important;--ok-surface-f0f9ff:initial!important;--ok-ink-075985:initial!important;--ok-line-d8dce5:initial!important;--ok-line-d1fae5:initial!important;--ok-ink-4b5563:initial!important;--ok-surface-4f4c8f_a120:initial!important;--ok-surface-ffffff_a980:initial!important;--ok-line-dbe4ee:initial!important;--ok-surface-fcfbff:initial!important;--ok-line-a9a3d4:initial!important;--ok-shadow-4f4c8f_a800:initial!important;--ok-surface-e8edf4:initial!important;--ok-surface-fafbfc:initial!important;--ok-shadow-4f4c8f_a650:initial!important;--ok-line-dbe2ea_a900:initial!important;--ok-line-8f88c8:initial!important;--ok-shadow-0f172a_a400:initial!important;--ok-line-cfd8e3:initial!important;--ok-line-e3e9f1:initial!important;--ok-line-c8c4e5:initial!important;--ok-line-cbc7e5:initial!important;--ok-line-e8edf3:initial!important;--ok-line-d1cee8:initial!important;--ok-surface-f9fbfd:initial!important;--ok-surface-e9eef5:initial!important;--ok-ink-22c55e:initial!important;--ok-ink-f59e0b:initial!important;--ok-ink-ef4444:initial!important;--ok-shadow-0f172a_a600:initial!important;--ok-line-f6c76b:initial!important;--ok-line-fca5a5:initial!important;--ok-line-fdba74:initial!important;--ok-shadow-c2410c_a450:initial!important;--ok-surface-ffedd5:initial!important;--ok-ink-9a3412:initial!important;--ok-ink-e2e8f0:initial!important;--ok-ink-15803d:initial!important;--ok-ink-1d4ed8:initial!important;--ok-line-93c5fd:initial!important;--ok-ink-1e40af:initial!important;--ok-line-bfdbfe:initial!important;--ok-ink-37306f:initial!important;--ok-surface-f4f6fa:initial!important;--ok-surface-dcfce7:initial!important;--ok-surface-fee2e2:initial!important;--ok-line-86efac:initial!important;--ok-line-c9c5e5:initial!important;--ok-surface-fff7f7:initial!important;--ok-line-4f4c8f_a130:initial!important;--ok-line-8882bd:initial!important;--ok-surface-f6f7fb:initial!important;--ok-surface-eef3fb:initial!important;--ok-surface-f9fbff:initial!important;--ok-surface-ffffff_a900:initial!important;--ok-shadow-4f4c8f:initial!important;--ok-surface-f5f3ff:initial!important;--ok-surface-efeff9:initial!important;--ok-surface-edf4ff:initial!important;--ok-ink-3f3b7e:initial!important;--ok-shadow-d8d5ec:initial!important;--ok-surface-eeecf8:initial!important;--ok-line-dbe2ea_a850:initial!important;--ok-surface-f8fafc_a860:initial!important;--ok-shadow-dcfce7:initial!important;--ok-line-d9d7eb:initial!important;--ok-surface-4f4c8f_a960:initial!important;--ok-surface-2563eb_a900:initial!important;--ok-shadow-1e3a8a:initial!important;--ok-surface-f2f0fa:initial!important;--ok-surface-403d79:initial!important;--ok-line-d5d2e8:initial!important;--ok-line-dedbea:initial!important;--ok-surface-f0eff8:initial!important;--ok-line-a8a2cf:initial!important;--ok-line-c7d2fe:initial!important;--ok-surface-f5f7ff:initial!important;--ok-surface-e9e7f7:initial!important;--ok-line-dbe2ea_a950:initial!important;--ok-shadow-334155:initial!important;--ok-surface-ffffff_a950:initial!important;--ok-line-f0c96d:initial!important;--ok-ink-7c4a03:initial!important;--ok-shadow-78350f_a450:initial!important;--ok-surface-f59e0b_a130:initial!important;--ok-surface-92400e:initial!important;--ok-line-aaa5d3:initial!important;--ok-surface-faf9ff:initial!important;--ok-surface-ffffff_a820:initial!important;--ok-line-8d87c2:initial!important;--ok-line-edf1f6:initial!important;--ok-line-6d68a8:initial!important;--ok-line-dce4ef:initial!important;--ok-surface-ffffff_a720:initial!important;--ok-ink-3730a3:initial!important;--ok-line-7771b1:initial!important;--ok-line-dbe2ea_a920:initial!important;--ok-line-f0f3f7:initial!important;--ok-surface-f2f6ff:initial!important;--ok-ink-a5b4c6:initial!important;--ok-surface-4f4c8f_a150:initial!important;--ok-surface-2563eb_a130:initial!important;--ok-surface-f8f9fd:initial!important;--ok-surface-f3f6fb:initial!important;--ok-line-d1dae6_a960:initial!important;--ok-surface-ffffff_a970:initial!important;--ok-shadow-4f4c8f_a420:initial!important;--ok-surface-f1effa:initial!important;--ok-surface-f7f7fc:initial!important;--ok-shadow-4f4c8f_a60:initial!important;--ok-ink-56657a:initial!important;--ok-line-e3e8f0:initial!important;--ok-surface-eef1f6:initial!important;--ok-ink-263247:initial!important;--ok-line-cfd8e5:initial!important;--ok-shadow-0f172a_a30:initial!important;--ok-line-aebbd0:initial!important;--ok-surface-fffafa:initial!important;--ok-shadow-dc2626_a110:initial!important;--ok-surface-f7f8fc:initial!important;--ok-ink-8a98aa:initial!important;--ok-surface-464795:initial!important;--ok-shadow-2563eb_a950:initial!important;--ok-line-2563eb_a340:initial!important;--ok-line-dfe5ee:initial!important;--ok-ink-5b687b:initial!important;--ok-line-d7e6fb:initial!important;--ok-surface-f5f9ff:initial!important;--ok-surface-eaf2ff:initial!important;--ok-line-d7d4e9:initial!important;--ok-line-aaa5cf:initial!important;--ok-ink-c4ccd7:initial!important;--ok-surface-f4f2fa:initial!important;--ok-ink-5d6a7c:initial!important;--ok-line-d9d6ea:initial!important;--ok-ink-8491a3:initial!important;--ok-shadow-4f4c8f_a140:initial!important;--ok-line-4f4c8f_a140:initial!important;--ok-surface-ffffff_a840:initial!important;--ok-line-b8b3d9:initial!important;--ok-surface-f4f2fb:initial!important;--ok-surface-eef6ff:initial!important;--ok-ink-202b3d:initial!important;--ok-ink-718096:initial!important;--ok-ink-2f3b4e:initial!important;--ok-surface-172033:initial!important;--ok-line-15803d:initial!important;--ok-shadow-15803d_a100:initial!important;--ok-line-b45309:initial!important;--ok-shadow-b45309_a100:initial!important;--ok-line-2563eb_a220:initial!important;--ok-line-ebe9f7:initial!important;--ok-line-dfdcf1:initial!important;--ok-surface-f5f4fb:initial!important;--ok-surface-f0f6ff:initial!important;--ok-ink-a8a5ca:initial!important;--ok-surface-efedf9:initial!important;--ok-line-fed7aa:initial!important;--ok-surface-eeeefa:initial!important;--ok-surface-0f172a_a520:initial!important;--ok-line-c2410c:initial!important;--ok-surface-c2410c:initial!important;--ok-line-dfe4ec:initial!important;--ok-surface-f8fafc_a900:initial!important;--ok-line-2563eb_a200:initial!important;--ok-line-d6d3eb:initial!important;--ok-shadow-4f4c8f_a450:initial!important;--ok-line-2563eb_a240:initial!important;--ok-surface-fbfcfe:initial!important;--ok-surface-fffaf2:initial!important;--ok-surface-fbfcff:initial!important;--ok-ink-e8edf4:initial!important;--ok-surface-f6f7fc:initial!important;--ok-surface-eceaf7:initial!important;--ok-line-dce2eb:initial!important;--ok-surface-fffaf4:initial!important;--ok-surface-fcfdff:initial!important;--ok-surface-f8faff:initial!important;--ok-line-dfe6ef:initial!important;--ok-line-e7ebf2:initial!important;--ok-surface-fafbfe:initial!important;--ok-surface-f2f1f9:initial!important;--ok-surface-f8f9fc:initial!important;--ok-surface-7773ba:initial!important;--ok-surface-e9edf4:initial!important;--ok-line-94a3b8:initial!important;--ok-surface-eeedf8:initial!important;--ok-surface-f5f7fa:initial!important;--ok-shadow-4f4c8f_a100:initial!important;--ok-ink-5d567f:initial!important;--ok-ink-312e61:initial!important;--ok-line-aeb9c9:initial!important;--ok-line-2563eb_a300:initial!important;--ok-ink-778397:initial!important;--ok-ink-5c6680:initial!important;--ok-surface-f5f6fa:initial!important;--ok-surface-6966c2_a380:initial!important;--ok-surface-2563eb_a260:initial!important;--ok-surface-111a2d:initial!important;--ok-surface-1b2940:initial!important;--ok-surface-29394f:initial!important;--ok-line-ffffff_a80:initial!important;--ok-line-ffffff_a120:initial!important;--ok-surface-4f4c8f_a200:initial!important;--ok-line-ffffff_a140:initial!important;--ok-shadow-ffffff_a100:initial!important;--ok-ink-f5d46f:initial!important;--ok-ink-c9d5e6:initial!important;--ok-ink-d5dfec:initial!important;--ok-line-ffffff_a110:initial!important;--ok-surface-ffffff_a55:initial!important;--ok-surface-938feb_a170:initial!important;--ok-ink-dddafe:initial!important;--ok-ink-b9c7d8:initial!important;--ok-surface-030a19_a200:initial!important;--ok-ink-9dd5bd:initial!important;--ok-line-4f4c8f_a120:initial!important;--ok-surface-e11d48:initial!important;--ok-ink-e9eef4:initial!important;--ok-ink-e11d48:initial!important;--ok-shadow-0f172a_a800:initial!important;--ok-shadow-edf1f5:initial!important;--ok-surface-9f1239:initial!important;--ok-surface-93c5fd:initial!important;--ok-surface-fda4af:initial!important;--ok-surface-b91c1c:initial!important;--ok-surface-fb7185:initial!important;--ok-surface-e9eef4:initial!important;--ok-shadow-0f172a_a520:initial!important;--ok-shadow-4f4c8f_a700:initial!important;--ok-line-dce3eb:initial!important;--ok-ink-253047:initial!important;--ok-line-8983bd:initial!important;--ok-ink-1f2937:initial!important;--ok-ink-e8edf3:initial!important;--ok-line-cfcbe7:initial!important;--ok-line-fde7b0:initial!important;--ok-surface-fffdf7:initial!important;--ok-surface-e8edf3:initial!important;--ok-surface-edf1f5:initial!important;--ok-surface-d97706:initial!important;--ok-surface-881337:initial!important;--ok-surface-15803d:initial!important;--ok-line-dfe6ee:initial!important;--ok-surface-ecfdf3:initial!important;--ok-surface-7c3aed:initial!important;--ok-surface-0f766e:initial!important;--ok-shadow-0f172a_a45:initial!important;--ok-surface-f0effa:initial!important;--ok-shadow-4f4c8f_a180:initial!important;--ok-line-2563eb_a180:initial!important;--ok-line-2563eb:initial!important;--ok-line-e7eaf0:initial!important;--ok-shadow-0f172a_a40:initial!important;--ok-line-fde4a7:initial!important;--ok-surface-fff7df:initial!important;--ok-ink-e7edf3:initial!important;--ok-ink-748195:initial!important;--ok-shadow-0f172a_a70:initial!important;--ok-ink-263248:initial!important;--ok-line-e9edf2:initial!important;--ok-line-fde0a3:initial!important;--ok-surface-fffcf5:initial!important;--ok-surface-eeecfb:initial!important;--ok-ink-243047:initial!important;--ok-surface-06b6d4:initial!important;--ok-surface-4f4c8f_a55:initial!important;--ok-surface-2563eb_a35:initial!important;--ok-shadow-0f172a_a35:initial!important;--ok-ink-687386:initial!important;--ok-surface-f7f8fb:initial!important;--ok-ink-667085:initial!important;--ok-ink-343169:initial!important;--ok-shadow-0f172a_a80:initial!important;--ok-line-dce2ea:initial!important;--ok-ink-6b7280:initial!important;--ok-line-c9c8e6:initial!important;--ok-surface-eaf8ef:initial!important;--ok-surface-fff7e6:initial!important;--ok-surface-fff0f0:initial!important;--ok-ink-c93636:initial!important;--ok-ink-8a94a5:initial!important;--ok-ink-a5adba:initial!important;--ok-surface-64748b:initial!important;--ok-ink-8791a3:initial!important;--ok-line-edf0f4:initial!important;--ok-ink-7b8493:initial!important;--ok-line-ebeff4:initial!important;--ok-line-cbc9e6:initial!important;--ok-surface-f4f5f7:initial!important;--ok-ink-273043:initial!important;--ok-ink-778194:initial!important;--ok-ink-a4adbb:initial!important;--ok-ink-20293a:initial!important;--ok-ink-7b8494:initial!important;--ok-ink-2b3445:initial!important;--ok-surface-edf0f4:initial!important;--ok-ink-384255:initial!important;--ok-ink-7e8797:initial!important;--ok-ink-7d8795:initial!important;--ok-ink-344054:initial!important;--ok-surface-6f6cac:initial!important;--ok-ink-7f8999:initial!important;--ok-surface-f3f4f6:initial!important;--ok-ink-5b6472:initial!important;--ok-ink-2a3344:initial!important;--ok-ink-818b9b:initial!important;--ok-ink-929baa:initial!important;--ok-ink-253044:initial!important;--ok-ink-8992a1:initial!important;--ok-ink-717b8d:initial!important;--ok-ink-939baa:initial!important;--ok-surface-4f4c8f_a45:initial!important;--ok-surface-2563eb_a25:initial!important;--ok-ink-7b8595:initial!important;--ok-ink-5f6979:initial!important;--ok-line-dbe1e9:initial!important;--ok-line-c5c9dc:initial!important;--ok-line-7771b7:initial!important;--ok-shadow-4f4c8f_a120:initial!important;--ok-line-d7ad61:initial!important;--ok-surface-fffdf8:initial!important;--ok-ink-434b59:initial!important;--ok-surface-f8f9fb:initial!important;--ok-ink-5f6877:initial!important;--ok-line-e4e8ee:initial!important;--ok-surface-f2f3f8:initial!important;--ok-ink-5d6575:initial!important;--ok-line-dfe4eb:initial!important;--ok-line-c8c6e3:initial!important;--ok-surface-eef2f6:initial!important;--ok-ink-2a3445:initial!important;--ok-line-dedcf0:initial!important;--ok-ink-6e7787:initial!important;--ok-shadow-d8dde5:initial!important;--ok-surface-22a06b:initial!important;--ok-surface-dc3f4f:initial!important;--ok-ink-9199a7:initial!important;--ok-line-e8ecf1:initial!important;--ok-ink-2d3748:initial!important;--ok-surface-f1f3f6:initial!important;--ok-ink-687181:initial!important;--ok-ink-b4232f:initial!important;--ok-ink-9ba3b0:initial!important;--ok-ink-7c8696:initial!important;--ok-line-dce7f7:initial!important;--ok-surface-f6faff:initial!important;--ok-ink-5a6677:initial!important;--ok-surface-eaf3ff:initial!important;--ok-surface-e8edf2:initial!important;--ok-line-4f4c8f_a180:initial!important;--ok-shadow-0f172a_a120:initial!important;--ok-surface-ffffff_a880:initial!important;--ok-ink-657084:initial!important;--ok-shadow-0f172a_a160:initial!important;--ok-ink-a85a08:initial!important;--ok-ink-687385:initial!important;--ok-ink-7d78b3:initial!important;--ok-ink-30394a:initial!important;--ok-line-f3d7a6:initial!important;--ok-surface-fffbf2:initial!important;--ok-surface-fff2d9:initial!important;--ok-ink-804006:initial!important;--ok-ink-8d5b20:initial!important;--ok-line-dc2626_a180:initial!important;--ok-line-e5e7eb:initial!important;--ok-line-dfe2f5:initial!important;--ok-surface-4f4c8f_a140:initial!important;--ok-surface-f8f8ff:initial!important;--ok-shadow-252b48_a80:initial!important;--ok-line-e6e8f5:initial!important;--ok-surface-6f6bb0:initial!important;--ok-shadow-4f4c8f_a200:initial!important;--ok-ink-737d91:initial!important;--ok-ink-272449:initial!important;--ok-ink-68748a:initial!important;--ok-line-e1e5ee:initial!important;--ok-ink-8985bd:initial!important;--ok-ink-34315f:initial!important;--ok-ink-29264f:initial!important;--ok-ink-6d788c:initial!important;--ok-line-d9deea:initial!important;--ok-ink-263044:initial!important;--ok-line-7773ae:initial!important;--ok-surface-403d78:initial!important;--ok-line-16865b:initial!important;--ok-surface-16865b:initial!important;--ok-ink-12734d:initial!important;--ok-ink-b42332:initial!important;--ok-ink-166a49:initial!important;--ok-surface-effaf5:initial!important;--ok-ink-4f7667:initial!important;--ok-line-e5e7f2:initial!important;--ok-surface-f6f7fd_a860:initial!important;--ok-surface-e8e9f7:initial!important;--ok-ink-556176:initial!important;--ok-line-e2e5ec:initial!important;--ok-surface-2563eb_a100:initial!important;--ok-ink-20283a:initial!important;--ok-surface-6c68ae:initial!important;--ok-shadow-4f4c8f_a220:initial!important;--ok-ink-28264c:initial!important;--ok-ink-6c778b:initial!important;--ok-line-d8dce7:initial!important;--ok-ink-413e75:initial!important;--ok-line-d7dbeb_a900:initial!important;--ok-surface-f7f7ff_a960:initial!important;--ok-ink-777f91:initial!important;--ok-ink-252247:initial!important;--ok-surface-ececf8:initial!important;--ok-surface-e7f8ef:initial!important;--ok-ink-137449:initial!important;--ok-surface-fdebec:initial!important;--ok-surface-fff3d6:initial!important;--ok-ink-8b6200:initial!important;--ok-ink-576272:initial!important;--ok-surface-e7f2ff:initial!important;--ok-ink-1a67aa:initial!important;--ok-line-e1e4ec:initial!important;--ok-ink-737e91:initial!important;--ok-ink-29264e:initial!important;--ok-line-f1c8cd:initial!important;--ok-ink-ae2433:initial!important;--ok-shadow-262c44_a55:initial!important;--ok-surface-ededfa:initial!important;--ok-ink-2d2a55:initial!important;--ok-ink-707b8f:initial!important;--ok-line-e7e9ef:initial!important;--ok-ink-283147:initial!important;--ok-ink-5f6b80:initial!important;--ok-line-dde1ea:initial!important;--ok-ink-748094:initial!important;--ok-ink-727d90:initial!important;--ok-line-dce3ee:initial!important;--ok-line-b9c4d6:initial!important;--ok-surface-fafaff:initial!important;--ok-shadow-4f4c8f_a90:initial!important;--ok-surface-4f4c8f_a100:initial!important;--ok-shadow-dce3ee:initial!important;--ok-surface-f7f7ff:initial!important;--ok-line-22c55e:initial!important;--ok-line-ef4444:initial!important;--ok-line-9b99c7:initial!important;--ok-ink-a0aabc:initial!important;--ok-ink-8b96a8:initial!important;--ok-line-b9b5dc:initial!important;--ok-line-8f89c4:initial!important;--ok-line-c9f1d6:initial!important;--ok-surface-effcf4:initial!important;--ok-ink-087a34:initial!important;--ok-line-c4c0df:initial!important;--ok-line-ffffff_a240:initial!important;--ok-surface-4f5fc4:initial!important;--ok-shadow-1e3a8a_a720:initial!important;--ok-line-ffffff_a130:initial!important;--ok-ink-ffffff_a840:initial!important;--ok-surface-2d256c_a680:initial!important;--ok-shadow-ffffff_a80:initial!important;--ok-surface-2a2070_a860:initial!important;--ok-line-ffffff_a520:initial!important;--ok-ink-443f83:initial!important;--ok-line-ffffff_a180:initial!important;--ok-surface-1b2669_a200:initial!important;--ok-surface-ffffff_a150:initial!important;--ok-ink-ffffff_a700:initial!important;--ok-ink-ffffff_a720:initial!important;--ok-ink-7b8798:initial!important;--ok-line-dfe5ed:initial!important;--ok-line-c5c1e2:initial!important;--ok-surface-f0eff9:initial!important;--ok-ink-c56a00:initial!important;--ok-ink-657287:initial!important;--ok-surface-f5f3fb:initial!important;--ok-ink-5b56a2:initial!important;--ok-surface-f3f1fa:initial!important;--ok-ink-8f99a8:initial!important;--ok-ink-69768a:initial!important;--ok-ink-465267:initial!important;--ok-ink-8a96a6:initial!important;--ok-shadow-ffffff_a10:initial!important;--ok-surface-2563eb_a80:initial!important;--ok-surface-f4f7fb:initial!important;--ok-shadow-0f172a_a620:initial!important;--ok-surface-5955a3:initial!important;--ok-shadow-4f4c8f_a850:initial!important;--ok-line-d7e0ec:initial!important;--ok-ink-526077:initial!important;--ok-line-d8d9ec:initial!important;--ok-surface-ffffff_a650:initial!important;--ok-shadow-1e3a8a_a550:initial!important;--ok-line-4f4c8f_a90:initial!important;--ok-ink-66748a:initial!important;--ok-line-e0e5ee:initial!important;--ok-ink-778499:initial!important;--ok-ink-29364b:initial!important;--ok-ink-748197:initial!important;--ok-ink-766fb5:initial!important;--ok-line-ddd9ef:initial!important;--ok-ink-445169:initial!important;--ok-line-bdb8de:initial!important;--ok-line-4ade80:initial!important;--ok-shadow-166534_a80:initial!important;--ok-line-fbbf24:initial!important;--ok-line-f87171:initial!important;--ok-line-ccd5e2:initial!important;--ok-surface-565192:initial!important;--ok-surface-ffffff_a760:initial!important;--ok-line-e4e2f2:initial!important;--ok-ink-716da3:initial!important;--ok-line-cac6e7:initial!important;--ok-line-d5d1eb:initial!important;--ok-ink-66619b:initial!important;--ok-shadow-4f4c8f_a80:initial!important;--ok-line-bbb8dc:initial!important;--ok-line-c9c6e6:initial!important;--ok-line-cbcfe0_a960:initial!important;--ok-surface-191f2d_a960:initial!important;--ok-shadow-0f172a_a750:initial!important;--ok-line-e3e8f1:initial!important;--ok-ink-738097:initial!important;--ok-ink-182236:initial!important;--ok-surface-f1f0fb:initial!important;--ok-surface-efeffb:initial!important;--ok-ink-059669:initial!important;--ok-ink-ea580c:initial!important;--ok-ink-778399:initial!important;--ok-ink-8a96a9:initial!important;--ok-ink-7d899d:initial!important;--ok-ink-69758a:initial!important;--ok-ink-6f7d91:initial!important;--ok-ink-48556b:initial!important;--ok-line-d7deea:initial!important;--ok-line-8f8ac4:initial!important;--ok-ink-7b86a0:initial!important;--ok-ink-3e4a5f:initial!important;--ok-line-d9d6ed:initial!important;--ok-line-edf0f5:initial!important;--ok-ink-7b8799:initial!important;--ok-surface-f1f0f9:initial!important;--ok-ink-354158:initial!important;--ok-ink-8a96a8:initial!important;--ok-ink-2f3c52:initial!important;--ok-ink-2f3b51:initial!important;--ok-ink-7b879a:initial!important;--ok-surface-e4e8ef:initial!important;--ok-line-dcd9ef:initial!important;--ok-ink-37445a:initial!important;--ok-ink-7e8a9c:initial!important;--ok-line-d5dce8:initial!important;--ok-ink-7d899b:initial!important;--ok-line-dde4ee:initial!important;--ok-ink-74839a:initial!important;--ok-line-dedcf1:initial!important;--ok-surface-f3f1fb:initial!important;--ok-ink-8491a5:initial!important;--ok-ink-8a97aa:initial!important;--ok-ink-7c8aa0:initial!important;--ok-line-cbc8e8:initial!important;--ok-line-e8ebf2:initial!important;--ok-ink-7b889b:initial!important;--ok-surface-e7ebf2:initial!important;--ok-line-d7dee9:initial!important;--ok-surface-fff4e8:initial!important;--ok-shadow-0f172a_a560:initial!important;--ok-line-d5d3eb:initial!important;--ok-shadow-4f4c8f_a550:initial!important;--ok-line-d8d6ec:initial!important;--ok-line-d4dce7:initial!important;--ok-line-d8d5ec:initial!important;--ok-line-bbb6df:initial!important;--ok-surface-e8ebf2:initial!important;--ok-surface-f7f9fc:initial!important;--ok-line-dcd9f0:initial!important;--ok-surface-fff7e8:initial!important;--ok-surface-eef5ff:initial!important;--ok-ink-6f7d93:initial!important;--ok-ink-8794a8:initial!important;--ok-surface-f4f5fa:initial!important;--ok-line-e3e8ef:initial!important;--ok-line-cbc8e5:initial!important;--ok-line-ead7a9:initial!important;--ok-ink-6f6aa8:initial!important;--ok-ink-a1acbc:initial!important;--ok-ink-7d899c:initial!important;--ok-ink-a16207:initial!important;--ok-line-d8d5eb:initial!important;--ok-line-aaa5d5:initial!important;--ok-line-f2dfad:initial!important;--ok-surface-fffaf0:initial!important;--ok-ink-3d4657:initial!important;--ok-ink-7a879b:initial!important;--ok-ink-6e7b90:initial!important;--ok-line-cdd6e2:initial!important;--ok-surface-fff0f1:initial!important;--ok-ink-5d697d:initial!important;--ok-line-cbc8e3:initial!important;--ok-surface-fffafb:initial!important;--ok-ink-8693a6:initial!important;--ok-ink-425067:initial!important;--ok-ink-7d87a3:initial!important;--ok-ink-7d77ad:initial!important;--ok-ink-768398:initial!important;--ok-ink-8390a3:initial!important;--ok-surface-fff6f6:initial!important;--ok-surface-6366f1:initial!important;--ok-ink-69768b:initial!important;--ok-ink-8592a5:initial!important;--ok-line-e1e7ef:initial!important;--ok-surface-f0fdfa:initial!important;--ok-ink-0f766e:initial!important;--ok-ink-283548:initial!important;--ok-ink-6d5db5:initial!important;--ok-line-d9e0ea:initial!important;--ok-line-8e89bd:initial!important;--ok-surface-ecfeff:initial!important;--ok-ink-8a6a37:initial!important;--ok-line-e2def1:initial!important;--ok-line-d5dce6:initial!important;--ok-ink-817ba9:initial!important;--ok-line-c7c2df:initial!important;--ok-line-d7dfeb:initial!important;--ok-surface-f8fafe:initial!important;--ok-shadow-ffffff_a720:initial!important;--ok-ink-95a1b3:initial!important;--ok-line-c9d2e1:initial!important;--ok-line-d5d9f1:initial!important;--ok-ink-8793a5:initial!important;--ok-ink-8995a7:initial!important;--ok-ink-405069:initial!important;--ok-ink-9aa5b5:initial!important;--ok-line-d3dbe7:initial!important;--ok-surface-f9fbfe:initial!important;--ok-line-c8d2e1:initial!important;--ok-line-d7d8ee:initial!important;--ok-ink-22a06b:initial!important;--ok-line-d7e7df:initial!important;--ok-surface-fbfefc:initial!important;--ok-line-f6d68a:initial!important;--ok-ink-7c4a09:initial!important;--ok-surface-fdf2f8:initial!important;--ok-ink-be185d:initial!important;--ok-ink-7e8a9d:initial!important;--ok-ink-93a0b2:initial!important;--ok-line-e6ebf2:initial!important;--ok-line-d3d0e8:initial!important;--ok-shadow-4f4c8f_a600:initial!important;--ok-ink-8b97a8:initial!important;--ok-line-ccd6e3:initial!important;--ok-ink-68758a:initial!important;--ok-surface-eae8f7:initial!important;--ok-surface-f2f4f8:initial!important;--ok-surface-e9e6f6:initial!important;--ok-ink-344257:initial!important;--ok-line-d6deea:initial!important;--ok-line-bbb6da:initial!important;--ok-ink-a0aabd:initial!important;--ok-ink-7c899c:initial!important;--ok-ink-6f7e94:initial!important;--ok-line-d1cee5:initial!important;--ok-shadow-4f4c8f_a480:initial!important;--ok-line-f0d2a4:initial!important;--ok-surface-fff6e9:initial!important;--ok-ink-c66a13:initial!important;--ok-ink-a65e10:initial!important;--ok-line-d8d5e8:initial!important;--ok-line-d8f0df:initial!important;--ok-surface-f7fcf9:initial!important;--ok-ink-2f5540:initial!important;--ok-ink-718a7b:initial!important;--ok-line-e2e6ed:initial!important;--ok-ink-3b485d:initial!important;--ok-line-d7dee8:initial!important;--ok-ink-3d4a5f:initial!important;--ok-surface-f1f5ff:initial!important;--ok-ink-27284a:initial!important;--ok-ink-7f8b9f:initial!important;--ok-line-e8ebf0:initial!important;--ok-line-d8e0eb:initial!important;--ok-ink-94a0b2:initial!important;--ok-line-d4d1e5:initial!important;--ok-ink-708097:initial!important;--ok-ink-8190a5:initial!important;--ok-ink-c25e09:initial!important;--ok-ink-4b5870:initial!important;--ok-line-c5c0e0:initial!important;--ok-line-d1cde7:initial!important;--ok-shadow-625da3:initial!important;--ok-ink-94a0b1:initial!important;--ok-ink-2f3a50:initial!important;--ok-line-dce6f3:initial!important;--ok-surface-f8fbff:initial!important;--ok-ink-5f6d81:initial!important;--ok-ink-48566c:initial!important;--ok-ink-8996a8:initial!important;--ok-line-d5deea:initial!important;--ok-ink-253247:initial!important;--ok-ink-9aa6b6:initial!important;--ok-shadow-0f172a_a180:initial!important;--ok-line-e8edf2:initial!important;--ok-surface-fafafa:initial!important;--ok-shadow-2563eb_a850:initial!important;--ok-line-dbeafe:initial!important;--ok-ink-a3adbb:initial!important;--ok-line-e5e9f0:initial!important;--ok-shadow-4f4c8f_a920:initial!important;--ok-surface-181b56:initial!important;--ok-surface-171a4d:initial!important;--ok-surface-11153e:initial!important;--ok-surface-ffffff_a140:initial!important;--ok-surface-4f4c8f_a280:initial!important;--ok-surface-2563eb_a170:initial!important;--ok-surface-6f6ab4:initial!important;--ok-surface-4f7cff:initial!important;--ok-shadow-6078ff_a950:initial!important;--ok-ink-aeb9dd:initial!important;--ok-ink-b9c4df:initial!important;--ok-surface-ffffff_a60:initial!important;--ok-ink-cbd5eb:initial!important;--ok-ink-8ad9b4:initial!important;--ok-ink-607087:initial!important;--ok-line-e4e9f0:initial!important;--ok-line-cfcbe5:initial!important;--ok-ink-8290a4:initial!important;--ok-ink-2c384b:initial!important;--ok-line-d6dee9:initial!important;--ok-line-c9c4e4:initial!important;--ok-surface-e7ecf3:initial!important;--ok-shadow-4f4c8f_a240:initial!important;--ok-line-bbb6dc:initial!important;--ok-shadow-4f4c8f_a500:initial!important;--ok-shadow-4f4c8f_a580:initial!important;--ok-ink-2e3a4e:initial!important;--ok-ink-66758a:initial!important;--ok-ink-98a3b2:initial!important;--ok-shadow-f1f5f9:initial!important;--ok-shadow-fef3c7:initial!important;--ok-line-f2cc88:initial!important;--ok-line-f4b4b4:initial!important;--ok-ink-a1abba:initial!important;--ok-ink-5d6a7e:initial!important;--ok-line-c8c4e4:initial!important;--ok-line-d4d0ef:initial!important;--ok-ink-5f6c80:initial!important;--ok-surface-fbfdff:initial!important;--ok-line-8b84c7:initial!important;--ok-shadow-2563eb_a100:initial!important;--ok-shadow-2563eb_a550:initial!important;--ok-line-dbe7e3:initial!important;--ok-line-fde1b3:initial!important;--ok-line-d2d9e5:initial!important;--ok-line-7f79bd:initial!important;--ok-shadow-2563eb_a220:initial!important;--ok-line-dce8e3:initial!important;--ok-surface-f5fcf8:initial!important;--ok-line-f3ddbd:initial!important;--ok-surface-fffaf1:initial!important;--ok-line-d8dee8:initial!important;--ok-surface-413e78:initial!important;--ok-surface-eeedf7:initial!important;--ok-ink-526176:initial!important;--ok-line-7c889b:initial!important;--ok-ink-854d0e:initial!important;--ok-surface-fefce8:initial!important;--ok-shadow-172033_a40:initial!important;--ok-line-b91c1c:initial!important;--ok-line-854d0e:initial!important;--ok-line-dbe1ea:initial!important;--ok-ink-38455c:initial!important;--ok-line-e6eaf2:initial!important;--ok-surface-f0f2f8:initial!important;--ok-shadow-232d4b_a180:initial!important;--ok-line-cbd3df:initial!important;--ok-line-e4e1f4:initial!important;--ok-line-b42318:initial!important;--ok-surface-f3f5f8:initial!important;--ok-ink-b42318:initial!important;--ok-line-dedaf0:initial!important;--ok-line-dfe3ed:initial!important;--ok-line-dfe4ef:initial!important;--ok-shadow-24324b_a20:initial!important;--ok-ink-5b6880:initial!important;--ok-line-cbd3e2:initial!important;--ok-surface-f0eef9:initial!important;--ok-line-e4e8f0:initial!important;--ok-ink-617089:initial!important;--ok-ink-24324b:initial!important;--ok-line-edf0f6:initial!important;--ok-line-dfe4ed:initial!important;--ok-surface-f3f5fa:initial!important;--ok-shadow-0f172a_a502:initial!important;--ok-surface-ffffff_a949:initial!important;--ok-shadow-0f172a_a82:initial!important;--ok-ink-2563eb_a82:initial!important;--ok-surface-0f172a_a439:initial!important;--ok-surface-b45309:initial!important;--ok-line-dcd9ee:initial!important;--ok-line-dce2ee:initial!important;--ok-line-eee2ce:initial!important;--ok-line-d6a44c:initial!important;--ok-surface-fffdfa:initial!important;--ok-line-ccd9f1:initial!important;--ok-line-d97706:initial!important;--ok-line-c7c3e5:initial!important;--ok-shadow-0f172a_a24:initial!important;--ok-shadow-0f172a_a110:initial!important;--ok-shadow-0f172a_a141:initial!important;--ok-shadow-0f172a_a20:initial!important;--ok-ink-b6c2d3:initial!important;--ok-ink-f3f1fb:initial!important;--ok-surface-f7f6fd:initial!important;--ok-surface-059669:initial!important;--ok-surface-f3f2fa:initial!important;--ok-line-e3e0f1:initial!important;--ok-surface-f8f7fc:initial!important;--ok-line-d9dbe8:initial!important;--ok-surface-f0effb:initial!important;--ok-surface-f8f9fe:initial!important;--ok-surface-ffffff_a750:initial!important;--ok-surface-fff1f2:initial!important;--ok-line-fecdd3:initial!important;--ok-ink-9f1239:initial!important;--ok-ink-168568:initial!important;--ok-line-e11d48:initial!important;--ok-surface-fbfbfd:initial!important;--ok-surface-eae7f7:initial!important;--ok-surface-f4f3fa:initial!important;--ok-surface-0f172a_a400:initial!important;--ok-line-dce2ec:initial!important;--ok-line-e1e6ee:initial!important;--ok-shadow-0f172a_a25:initial!important;--ok-surface-f3f0fc:initial!important;--ok-surface-111827:initial!important;--ok-line-ffedd5:initial!important;--ok-surface-fff8ef:initial!important;--ok-surface-f1f0fa:initial!important;--ok-ink-b77900:initial!important;--ok-surface-fff8df:initial!important;--ok-shadow-000000_a133:initial!important;--ok-line-e1e8f3:initial!important;--ok-surface-f5f8ff:initial!important;--ok-surface-e8efff:initial!important;--ok-surface-fff0df:initial!important;--ok-surface-e0f5ff:initial!important;--ok-ink-0369a1:initial!important;--ok-surface-e5f6eb:initial!important;--ok-line-e7edf5:initial!important;--ok-surface-f1f4f9:initial!important;--ok-surface-ffffff_a600:initial!important;--ok-line-dedff0:initial!important;--ok-shadow-172033_a43:initial!important;--ok-line-e0e3e8:initial!important;--ok-surface-f0f0f0:initial!important;--ok-ink-8b9098:initial!important;--ok-surface-fff1c7:initial!important;--ok-ink-a86b00:initial!important;--ok-surface-e9f0ff:initial!important;--ok-surface-fff4df:initial!important;--ok-ink-9a6700:initial!important;--ok-ink-7c8490:initial!important;--ok-surface-fff2cc:initial!important;--ok-ink-d99a00:initial!important;--ok-ink-ffbf00:initial!important;--ok-surface-ffbf00:initial!important;--ok-line-b17b00:initial!important;--ok-line-d5b777:initial!important;--ok-shadow-947227_a120:initial!important;}} html[data-theme=dark] :is(.crm-tag-row>span,.crm-tag-selector input:checked+span){color:color-mix(in srgb,var(--tag-color,#a89bdf) 35%,#e3e6ed)} /* 5.69.25: paint the root canvas too, including browser-owned edge regions. Native Android navigation bar rendering remains controlled by its host. */ html[data-theme=dark]{background-color:#101217} @media print{html[data-theme]{background-color:#fff!important}}