/* ============================================= Fiyavairu v18 Modern Editorial Theme - Warm neutral surfaces, deep ink text, cleaner hierarchy - Optional dark mode via ============================================= */ :root{ --fv-max-width: 1180px; --fv-radius: 24px; --fv-radius-sm: 16px; --fv-bg: #F5F1EA; --fv-surface: #FFFFFF; --fv-surface-2: #FCFAF6; --fv-text: #182126; --fv-muted: #66727B; --fv-border: rgba(24, 33, 38, .10); --fv-primary: #0F766E; --fv-primary-2: #155E75; --fv-accent: #D97706; --fv-shadow-sm: 0 12px 30px rgba(24, 33, 38, .07); --fv-shadow-md: 0 24px 60px rgba(24, 33, 38, .12); --fv-ring: 0 0 0 .25rem rgba(15, 118, 110, .16); } [data-theme="dark"]{ --fv-bg: #10181C; --fv-surface: #172228; --fv-surface-2: #1C2A31; --fv-text: #EAF0F2; --fv-muted: #AAB8BE; --fv-border: rgba(229, 231, 235, .10); --fv-shadow-sm: 0 8px 22px rgba(0,0,0,.38); --fv-shadow-md: 0 18px 60px rgba(0,0,0,.55); --fv-ring: 0 0 0 .25rem rgba(45, 212, 191, .18); } html, body{ min-height: 100%; height: 100%; background-color: var(--fv-bg); } html{ scroll-behavior: smooth; } body{ position: relative; overflow-x: hidden; font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; color: var(--fv-text); background: radial-gradient(900px 420px at 10% -5%, rgba(15,118,110,.12), transparent 58%), radial-gradient(760px 380px at 92% 2%, rgba(217,119,6,.10), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)), var(--fv-bg); background-repeat: no-repeat; background-size: cover; } body::before{ content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 420px at 10% -5%, rgba(15,118,110,.12), transparent 58%), radial-gradient(760px 380px at 92% 2%, rgba(217,119,6,.10), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.38), rgba(255,255,255,0)), var(--fv-bg); } [data-theme="dark"] body::before{ background: radial-gradient(900px 420px at 10% -5%, rgba(45,212,191,.10), transparent 58%), radial-gradient(760px 380px at 92% 2%, rgba(245,158,11,.09), transparent 52%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)), var(--fv-bg); } /* Container */ .fv-container{ max-width: var(--fv-max-width); margin: 0 auto; } .fv-main{ position: relative; min-height: calc(100vh - 96px); padding-bottom: 24px; } .fv-main > .container-fluid{ position: relative; z-index: 1; } /* Topbar + Desktop nav */ .fv-topbar{ position: sticky; top: 0; z-index: 1030; backdrop-filter: blur(16px); background: rgba(245,241,234,.78) !important; border-bottom: 1px solid var(--fv-border) !important; } [data-theme="dark"] .fv-topbar{ background: rgba(16,24,28,.75) !important; } .fv-desktopnav{ background: rgba(245,241,234,.6) !important; border-bottom: 1px solid var(--fv-border) !important; } [data-theme="dark"] .fv-desktopnav{ background: rgba(16,24,28,.62) !important; } /* Brand */ .fv-logo{ width: 42px; height: 42px; display: block; object-fit: contain; object-position: center; border-radius: 12px; filter: drop-shadow(0 14px 28px rgba(15,118,110,.18)); } .fv-brand-title{ font-weight: 800; line-height: 1.1; } .fv-brand-subtitle{ color: var(--fv-muted); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; } .fv-theme-toggle{ min-width: 38px; } .fv-install-btn[hidden]{ display: none !important; } .fv-userchip{ align-items: center; gap: .5rem; border: 1px solid var(--fv-border); border-radius: 999px; padding: .38rem .72rem; background: rgba(255,255,255,.62); } [data-theme="dark"] .fv-userchip{ background: rgba(255,255,255,.04); } .fv-userchip-label{ font-size: .9rem; font-weight: 700; } .fv-userchip-role{ color: var(--fv-muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; } /* Desktop nav pills */ .fv-desktopnav .fv-dnavlink{ display: inline-flex; align-items: center; gap: .35rem; padding: .62rem .92rem; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--fv-text); background: rgba(255,255,255,.7); border: 1px solid var(--fv-border); transition: background .18s ease, transform .12s ease, box-shadow .18s ease, border-color .18s ease; } [data-theme="dark"] .fv-desktopnav .fv-dnavlink{ background: rgba(255,255,255,.03); } .fv-desktopnav .fv-dnavlink:hover{ background: rgba(15,118,110,.08); border-color: rgba(15,118,110,.16); box-shadow: var(--fv-shadow-sm); } .fv-desktopnav .fv-dnavlink.active{ background: rgba(15,118,110,.12); border-color: rgba(15,118,110,.24); } /* Cards */ .fv-card, .card.fv-card{ border-radius: var(--fv-radius); border: 1px solid var(--fv-border); background: linear-gradient(180deg, var(--fv-surface), var(--fv-surface-2)); box-shadow: var(--fv-shadow-sm); overflow: hidden; } /* List/item cards */ .fv-item-card{ border-radius: var(--fv-radius); border: 1px solid var(--fv-border); background: linear-gradient(180deg, var(--fv-surface), var(--fv-surface-2)); box-shadow: var(--fv-shadow-sm); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .fv-item-card:hover{ transform: translateY(-2px); box-shadow: var(--fv-shadow-md); border-color: rgba(15,118,110,.18); } .fv-scroll-panel{ max-height: min(72vh, 980px); overflow-y: auto; padding-right: 6px; } .fv-location-groups{ display: grid; gap: 18px; } .fv-location-group{ border: 1px solid var(--fv-border); border-radius: calc(var(--fv-radius) - 2px); background: radial-gradient(420px 140px at 100% 0%, rgba(217,119,6,.08), transparent 72%), radial-gradient(380px 180px at 0% 100%, rgba(15,118,110,.08), transparent 76%), rgba(255,255,255,.62); box-shadow: var(--fv-shadow-sm); padding: 1rem; } [data-theme="dark"] .fv-location-group{ background: rgba(255,255,255,.03); } .fv-location-group--indoor{ border-color: rgba(217,119,6,.18); } .fv-location-group--outdoor{ border-color: rgba(14,165,233,.18); } .fv-location-group--mixed{ border-color: rgba(15,118,110,.18); } .fv-location-group--unassigned{ border-color: rgba(100,116,139,.18); } .fv-location-group-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .95rem; padding-bottom: .85rem; border-bottom: 1px solid var(--fv-border); } .fv-location-group-title{ display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; font-size: 1rem; } .fv-location-group-title i{ color: var(--fv-primary); } .fv-location-group-meta{ color: var(--fv-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; } .fv-substation-card{ position: relative; overflow: hidden; } .fv-substation-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 999px; background: rgba(15,118,110,.32); } .fv-substation-card--indoor{ background: linear-gradient(180deg, rgba(255,251,235,.95), rgba(255,247,237,.86)); border-color: rgba(217,119,6,.18); } .fv-substation-card--indoor::before{ background: #d97706; } .fv-substation-card--outdoor{ background: linear-gradient(180deg, rgba(239,246,255,.96), rgba(240,249,255,.86)); border-color: rgba(14,165,233,.18); } .fv-substation-card--outdoor::before{ background: #0284c7; } .fv-substation-card--overload{ border-color: rgba(249,115,22,.34); box-shadow: 0 18px 34px rgba(249,115,22,.12); } .fv-substation-card--overload::before{ background: #f97316; } .fv-substation-card .fv-item-sub{ font-size: .8rem; line-height: 1.35; } [data-theme="dark"] .fv-substation-card--indoor{ background: linear-gradient(180deg, rgba(77,45,12,.88), rgba(92,56,16,.74)); } [data-theme="dark"] .fv-substation-card--outdoor{ background: linear-gradient(180deg, rgba(11,50,68,.9), rgba(16,67,92,.76)); } .fv-install-location-card{ position: relative; overflow: hidden; } .fv-install-location-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 999px; background: rgba(15,118,110,.32); } .fv-install-location-card--active{ background: linear-gradient(180deg, rgba(236,253,245,.96), rgba(240,253,250,.88)); border-color: rgba(16,185,129,.18); } .fv-install-location-card--active::before{ background: #10b981; } .fv-install-location-card--inactive{ background: linear-gradient(180deg, rgba(248,250,252,.96), rgba(241,245,249,.88)); border-color: rgba(100,116,139,.16); } .fv-install-location-card--inactive::before{ background: #64748b; } [data-theme="dark"] .fv-substation-card--indoor{ background: linear-gradient(180deg, rgba(77,45,12,.88), rgba(92,56,16,.74)); } [data-theme="dark"] .fv-substation-card--outdoor{ background: linear-gradient(180deg, rgba(11,50,68,.9), rgba(16,67,92,.76)); } [data-theme="dark"] .fv-install-location-card--active{ background: linear-gradient(180deg, rgba(7,59,44,.92), rgba(8,78,59,.82)); } [data-theme="dark"] .fv-install-location-card--inactive{ background: linear-gradient(180deg, rgba(30,41,59,.92), rgba(51,65,85,.82)); } .fv-substation-load{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; padding: .7rem .8rem; border-radius: 14px; border: 1px solid rgba(15,118,110,.12); background: rgba(255,255,255,.62); color: var(--fv-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } .fv-substation-load strong{ color: var(--fv-text); font-size: .76rem; } .fv-substation-load--overload{ border-color: rgba(249,115,22,.22); background: rgba(255,237,213,.88); color: #c2410c; } [data-theme="dark"] .fv-substation-load{ background: rgba(255,255,255,.04); } [data-theme="dark"] .fv-substation-load--overload{ background: rgba(124,45,18,.5); color: #fed7aa; } .fv-substation-sparkline{ position: relative; margin-bottom: .95rem; padding: .75rem .8rem; border-radius: 16px; border: 1px solid rgba(15,118,110,.14); background: radial-gradient(160px 60px at 100% 0%, rgba(15,118,110,.08), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); color: #0f766e; } .fv-substation-sparkline-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .45rem; color: var(--fv-muted); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; } .fv-substation-sparkline-head strong{ color: var(--fv-text); font-size: .74rem; } .fv-substation-sparkline-chart{ display: block; width: 100%; height: auto; overflow: visible; } .fv-substation-sparkline-dates{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; color: var(--fv-muted); font-size: .72rem; letter-spacing: .04em; } .fv-substation-sparkline-axis{ fill: none; stroke: rgba(15,23,42,.12); stroke-width: 1.5; } .fv-substation-sparkline-area{ opacity: .72; } .fv-substation-sparkline-line{ fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 4px 8px rgba(15,118,110,.08)); } .fv-substation-sparkline-point{ fill: currentColor; stroke: rgba(255,255,255,.96); stroke-width: 1.4; cursor: pointer; transition: filter .18s ease; filter: drop-shadow(0 4px 8px rgba(15,118,110,.16)); } .fv-substation-sparkline-point:hover, .fv-substation-sparkline-point:focus-visible{ filter: drop-shadow(0 6px 12px rgba(15,118,110,.22)); outline: none; } .fv-substation-sparkline--overload{ border-color: rgba(249,115,22,.22); background: radial-gradient(160px 60px at 100% 0%, rgba(249,115,22,.12), transparent 70%), linear-gradient(180deg, rgba(255,247,237,.92), rgba(255,251,235,.84)); color: #f97316; } .fv-substation-sparkline--overload .fv-substation-sparkline-line{ filter: drop-shadow(0 4px 8px rgba(249,115,22,.10)); } [data-theme="dark"] .fv-substation-sparkline{ background: radial-gradient(160px 60px at 100% 0%, rgba(45,212,191,.08), transparent 70%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); color: #5eead4; } [data-theme="dark"] .fv-substation-sparkline-axis{ stroke: rgba(255,255,255,.12); } [data-theme="dark"] .fv-substation-sparkline--overload{ background: radial-gradient(160px 60px at 100% 0%, rgba(251,146,60,.12), transparent 70%), linear-gradient(180deg, rgba(124,45,18,.42), rgba(88,28,12,.34)); color: #fdba74; } [data-theme="dark"] .fv-substation-sparkline-point{ stroke: rgba(15,23,42,.92); } .fv-substation-sparkline-tooltip{ position: absolute; left: 0; top: 0; z-index: 3; min-width: 132px; max-width: 180px; padding: .55rem .65rem; border-radius: 14px; border: 1px solid rgba(15,118,110,.16); background: rgba(255,255,255,.96); box-shadow: 0 14px 24px rgba(15,23,42,.10); backdrop-filter: blur(12px); pointer-events: none; transform: translate(-50%, calc(-100% - 10px)); opacity: 0; transition: opacity .12s ease; } .fv-substation-sparkline-tooltip strong{ display: block; color: var(--fv-text); font-size: .74rem; line-height: 1.25; } .fv-substation-sparkline-tooltip span{ display: block; margin-top: .14rem; color: var(--fv-muted); font-size: .68rem; line-height: 1.25; } [data-theme="dark"] .fv-substation-sparkline-tooltip{ border-color: rgba(94,234,212,.12); background: rgba(15,23,42,.94); } .fv-substation-sparkline-tooltip:not([hidden]){ opacity: 1; } .fv-feeder-card{ position: relative; overflow: hidden; } .fv-feeder-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 999px; background: rgba(15,118,110,.32); } .fv-feeder-card--hv{ background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(254,226,226,.88)); border-color: rgba(220,38,38,.18); } .fv-feeder-card--hv::before{ background: #dc2626; } .fv-feeder-card--lv{ background: linear-gradient(180deg, rgba(239,246,255,.96), rgba(219,234,254,.88)); border-color: rgba(37,99,235,.18); } .fv-feeder-card--lv::before{ background: #2563eb; } .fv-feeder-card--overload{ border-color: rgba(249,115,22,.34); box-shadow: 0 18px 34px rgba(249,115,22,.12); } .fv-feeder-card--overload::before{ background: #f97316; } [data-theme="dark"] .fv-feeder-card--hv{ background: linear-gradient(180deg, rgba(69,20,20,.96), rgba(95,30,30,.88)); } [data-theme="dark"] .fv-feeder-card--lv{ background: linear-gradient(180deg, rgba(20,39,76,.96), rgba(27,56,109,.9)); } .fv-feeder-load{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; padding: .7rem .8rem; border-radius: 14px; border: 1px solid rgba(15,118,110,.12); background: rgba(255,255,255,.62); color: var(--fv-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } .fv-feeder-load strong{ color: var(--fv-text); font-size: .76rem; } .fv-feeder-load--overload{ border-color: rgba(249,115,22,.22); background: rgba(255,237,213,.88); color: #c2410c; } [data-theme="dark"] .fv-feeder-load{ background: rgba(255,255,255,.04); } [data-theme="dark"] .fv-feeder-load--overload{ background: rgba(124,45,18,.5); color: #fed7aa; } .fv-subfeeder-shell{ position: relative; margin-top: .5rem; padding-top: .55rem; border-top: 1px solid rgba(148,163,184,.18); } .fv-subfeeder-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; } .fv-subfeeder-label{ color: var(--fv-muted); font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .fv-subfeeder-count{ min-width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; padding: 0 .45rem; border-radius: 999px; background: rgba(15,118,110,.08); color: var(--fv-primary); font-size: .74rem; font-weight: 800; } .fv-subfeeder-list{ position: relative; display: grid; gap: .6rem; padding-left: 1.1rem; } .fv-subfeeder-list::before{ content: ""; position: absolute; left: 5px; top: 4px; bottom: 8px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(15,118,110,.28), rgba(37,99,235,.22)); } .fv-subfeeder-item{ position: relative; display: grid; gap: .75rem; width: 100%; padding: .72rem .82rem; border-radius: 16px; border: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.58); box-shadow: 0 10px 24px rgba(24,33,38,.05); text-align: left; } .fv-subfeeder-item::before{ content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px; transform: translateY(-50%); border-radius: 999px; background: rgba(15,118,110,.28); } .fv-subfeeder-item::after{ content: ""; position: absolute; left: -17px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 999px; background: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.10); } .fv-subfeeder-item:hover{ transform: translateY(-1px); box-shadow: var(--fv-shadow-sm); } .fv-subfeeder-item--overload{ border-color: rgba(249,115,22,.26); background: rgba(255,237,213,.78); } .fv-subfeeder-item-trigger{ display: flex; align-items: center; justify-content: space-between; gap: .8rem; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; } .fv-subfeeder-item-main{ min-width: 0; } .fv-subfeeder-item-title{ display: flex; align-items: center; gap: .45rem; font-size: .84rem; font-weight: 800; } .fv-subfeeder-item-sub{ margin-top: .2rem; color: var(--fv-muted); font-size: .73rem; line-height: 1.35; } .fv-subfeeder-item-side{ display: flex; flex-direction: column; align-items: flex-end; gap: .16rem; text-align: right; } .fv-subfeeder-item-side strong{ font-size: .8rem; color: var(--fv-text); } .fv-subfeeder-item-side span{ color: var(--fv-muted); font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .fv-subfeeder-inline-actions{ display: flex; justify-content: flex-end; gap: .45rem; } .fv-subfeeder-records{ margin-top: .15rem; } .fv-subfeeder-records-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding-top: .15rem; } .fv-subfeeder-record-list{ display: grid; gap: .55rem; margin-top: .75rem; } .fv-subfeeder-record-card{ padding: .75rem; border-radius: 14px; border: 1px solid rgba(148,163,184,.16); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 0 rgba(255,255,255,.35); } .fv-subfeeder-record-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .fv-subfeeder-record-date{ font-size: .78rem; font-weight: 800; color: var(--fv-text); } .fv-subfeeder-record-meta{ margin-top: .18rem; color: var(--fv-muted); font-size: .7rem; line-height: 1.35; } .fv-subfeeder-record-side{ display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: .18rem; } .fv-subfeeder-record-side strong{ font-size: .78rem; } .fv-subfeeder-record-side span{ color: var(--fv-muted); font-size: .66rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; } .fv-subfeeder-record-grid{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin-top: .72rem; } .fv-subfeeder-record-grid > div{ padding: .55rem .6rem; border-radius: 12px; background: rgba(248,250,252,.9); border: 1px solid rgba(226,232,240,.86); } .fv-subfeeder-record-grid span{ display: block; color: var(--fv-muted); font-size: .64rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .fv-subfeeder-record-grid strong{ display: block; margin-top: .18rem; font-size: .74rem; color: var(--fv-text); } .fv-subfeeder-record-remarks{ margin-top: .65rem; padding: .62rem .68rem; border-radius: 12px; background: rgba(248,250,252,.92); border: 1px solid rgba(226,232,240,.82); color: var(--fv-text); font-size: .72rem; line-height: 1.45; } .fv-subfeeder-record-actions{ display: flex; justify-content: flex-end; gap: .45rem; margin-top: .7rem; } .fv-subfeeder-record-empty{ margin-top: .75rem; padding: .8rem .85rem; border-radius: 14px; border: 1px dashed rgba(148,163,184,.34); background: rgba(248,250,252,.72); color: var(--fv-muted); font-size: .78rem; text-align: center; } .fv-subfeeder-load-panel{ margin-top: .25rem; padding: .9rem; border-radius: 16px; border: 1px solid rgba(148,163,184,.18); background: rgba(255,255,255,.56); } .fv-subfeeder-load-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .85rem; } .fv-subfeeder-load-title{ font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; color: var(--fv-muted); } .fv-subfeeder-load-sub{ margin-top: .25rem; font-size: .82rem; color: var(--fv-text); } .fv-subfeeder-load-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; } .fv-subfeeder-load-actions .btn.disabled, .fv-subfeeder-load-actions .btn:disabled{ opacity: .45; pointer-events: none; } [data-theme="dark"] .fv-subfeeder-count{ background: rgba(45,212,191,.12); color: #99f6e4; } [data-theme="dark"] .fv-subfeeder-list::before, [data-theme="dark"] .fv-subfeeder-item::before{ background: linear-gradient(180deg, rgba(94,234,212,.36), rgba(96,165,250,.3)); } [data-theme="dark"] .fv-subfeeder-item{ background: rgba(255,255,255,.05); border-color: rgba(148,163,184,.14); } [data-theme="dark"] .fv-subfeeder-item-trigger{ color: inherit; } [data-theme="dark"] .fv-subfeeder-item::after{ background: #5eead4; box-shadow: 0 0 0 3px rgba(94,234,212,.14); } [data-theme="dark"] .fv-subfeeder-item--overload{ background: rgba(124,45,18,.44); border-color: rgba(251,146,60,.24); } [data-theme="dark"] .fv-subfeeder-load-panel{ background: rgba(255,255,255,.05); border-color: rgba(148,163,184,.14); } [data-theme="dark"] .fv-subfeeder-record-card{ background: rgba(255,255,255,.05); border-color: rgba(148,163,184,.14); } [data-theme="dark"] .fv-subfeeder-record-grid > div, [data-theme="dark"] .fv-subfeeder-record-remarks, [data-theme="dark"] .fv-subfeeder-record-empty{ background: rgba(15,23,42,.38); border-color: rgba(148,163,184,.16); } .fv-rmu-card{ position: relative; overflow: hidden; } .fv-rmu-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 999px; background: rgba(124,58,237,.38); } .fv-rmu-card--default{ background: linear-gradient(180deg, rgba(245,243,255,.96), rgba(237,233,254,.88)); border-color: rgba(124,58,237,.16); } .fv-rmu-card--open{ background: linear-gradient(180deg, rgba(255,247,237,.96), rgba(255,237,213,.9)); border-color: rgba(217,119,6,.18); } .fv-rmu-card--open::before{ background: #d97706; } .fv-rmu-card--closed{ background: linear-gradient(180deg, rgba(237,233,254,.96), rgba(221,214,254,.9)); border-color: rgba(124,58,237,.2); } .fv-rmu-card--closed::before{ background: #7c3aed; } [data-theme="dark"] .fv-rmu-card--default{ background: linear-gradient(180deg, rgba(44,26,76,.92), rgba(55,36,92,.82)); } [data-theme="dark"] .fv-rmu-card--open{ background: linear-gradient(180deg, rgba(77,45,12,.88), rgba(92,56,16,.74)); } [data-theme="dark"] .fv-rmu-card--closed{ background: linear-gradient(180deg, rgba(50,31,88,.9), rgba(64,41,110,.78)); } .fv-rmu-route{ display: flex; align-items: center; justify-content: space-between; gap: .65rem; padding: .75rem .85rem; border-radius: 14px; border: 1px solid rgba(124,58,237,.14); background: rgba(255,255,255,.62); color: var(--fv-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; } .fv-rmu-route span{ flex: 1 1 0; } .fv-rmu-route span:last-child{ text-align: right; } .fv-rmu-route i{ color: #7c3aed; font-size: .95rem; } [data-theme="dark"] .fv-rmu-route{ background: rgba(255,255,255,.04); } .fv-substation-form-shell{ padding: clamp(1.2rem, 3vw, 2rem); } .fv-substation-form-card{ border: 1px solid var(--fv-border); border-radius: calc(var(--fv-radius) - 2px); background: rgba(255,255,255,.72); box-shadow: var(--fv-shadow-sm); } [data-theme="dark"] .fv-substation-form-card{ background: rgba(255,255,255,.04); } .fv-substation-form-card .form-label{ color: var(--fv-muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .fv-admin-user-card{ position: relative; overflow: hidden; } .fv-admin-user-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 5px; border-radius: 999px; background: rgba(15,118,110,.32); } .fv-admin-user-card--admin{ background: linear-gradient(180deg, rgba(245,243,255,.96), rgba(237,233,254,.88)); border-color: rgba(124,58,237,.18); } .fv-admin-user-card--admin::before{ background: #7c3aed; } .fv-admin-user-card--user{ background: linear-gradient(180deg, rgba(240,253,250,.96), rgba(236,253,245,.88)); border-color: rgba(13,148,136,.18); } .fv-admin-user-card--user::before{ background: #0f766e; } .fv-admin-user-card--inactive{ box-shadow: inset 0 0 0 1px rgba(217,119,6,.12); } [data-theme="dark"] .fv-admin-user-card--admin{ background: linear-gradient(180deg, rgba(44,26,76,.92), rgba(55,36,92,.82)); } [data-theme="dark"] .fv-admin-user-card--user{ background: linear-gradient(180deg, rgba(7,59,44,.92), rgba(8,78,59,.82)); } .fv-form-icon-actions{ align-items: center; } .fv-form-icon-actions .btn-icon{ width: 46px; height: 46px; border-radius: 14px; } .fv-scroll-panel::-webkit-scrollbar{ width: 10px; } .fv-scroll-panel::-webkit-scrollbar-thumb{ background: rgba(15,23,42,.16); border-radius: 999px; } [data-theme="dark"] .fv-scroll-panel::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); } .fv-item-head{ display: flex; justify-content: space-between; gap: .75rem; } .fv-item-title{ font-weight: 800; letter-spacing: -.01em; } .fv-item-sub{ color: var(--fv-muted); font-size: .92rem; } .fv-kv{ display: flex; flex-wrap: wrap; gap: .5rem .75rem; color: var(--fv-muted); font-size: .92rem; } .fv-kv span{ display: inline-flex; align-items: center; gap: .35rem; } .fv-actions .btn{ padding: .45rem .65rem; } /* Typography */ h1, h2, h3, h4, h5{ letter-spacing: -.02em; } .fv-display{ font-family: "DM Serif Display", Georgia, serif; font-size: clamp(2.2rem, 5vw, 4rem); line-height: .98; letter-spacing: -.03em; } .fv-hero-title{ font-family: "DM Serif Display", Georgia, serif; font-size: clamp(1.8rem, 4vw, 3.1rem); line-height: 1.02; letter-spacing: -.03em; } .fv-eyebrow{ display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .72rem; border-radius: 999px; background: rgba(15,118,110,.10); color: var(--fv-primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fv-eyebrow::before{ content: ""; width: 8px; height: 8px; border-radius: 999px; background: currentColor; } .fv-hero-copy{ color: var(--fv-muted); font-size: 1.02rem; line-height: 1.75; max-width: 58ch; } /* Buttons */ .btn{ border-radius: var(--fv-radius-sm); font-weight: 700; } .btn:focus{ box-shadow: var(--fv-ring) !important; } /* Re-style btn-dark as the main primary action (used throughout the app) */ .btn-dark{ background: linear-gradient(135deg, var(--fv-primary), var(--fv-primary-2)); border: none; box-shadow: 0 14px 26px rgba(15,118,110,.20); } .btn-dark:hover{ filter: brightness(.98); box-shadow: 0 18px 32px rgba(15,118,110,.24); } .btn-outline-secondary, .btn-outline-primary, .btn-outline-dark, .btn-outline-danger{ background: rgba(255,255,255,.72); border-color: var(--fv-border); } [data-theme="dark"] .btn-outline-secondary, [data-theme="dark"] .btn-outline-primary, [data-theme="dark"] .btn-outline-dark, [data-theme="dark"] .btn-outline-danger{ background: rgba(255,255,255,.04); } .btn:active{ transform: translateY(1px); } /* Icon-only buttons (Back/Add/Search/Locations etc.) */ .btn-icon{ width: 44px; height: 44px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--fv-radius-sm); line-height: 1; flex: 0 0 auto; /* avoid shrinking inside flex */ } .btn-icon i{ font-size: 1.1rem; line-height: 1; } /* Small icon buttons (optional use for compact actions) */ .btn-icon.btn-sm{ width: 36px; height: 36px; border-radius: 12px; } .btn-icon.btn-sm i{ font-size: 1rem; } /* Cleaner hover for outline icon buttons */ .btn-icon.btn-outline-secondary:hover, .btn-icon.btn-outline-primary:hover, .btn-icon.btn-outline-dark:hover, .btn-icon.btn-outline-danger:hover{ box-shadow: var(--fv-shadow-sm); } /* Optional: if you convert Edit/Delete to icon-only inside cards */ .fv-actions .btn.btn-icon{ width: 38px; height: 38px; padding: 0 !important; border-radius: 14px; } /* Forms */ .form-control, .form-select{ border-radius: var(--fv-radius-sm); border: 1px solid var(--fv-border); background: var(--fv-surface); color: var(--fv-text); box-shadow: 0 1px 0 rgba(17,24,39,.03); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select{ background: rgba(255,255,255,.02); } .form-control:focus, .form-select:focus{ border-color: rgba(15,118,110,.42); box-shadow: var(--fv-ring); } /* Tables */ .table{ color: var(--fv-text); } .table thead th{ color: var(--fv-muted); font-weight: 800; font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid var(--fv-border); } .table tbody tr{ border-color: var(--fv-border); } .table-hover tbody tr:hover{ background: rgba(15,118,110,.05); } /* Pagination */ .pagination .page-link{ border-radius: 999px; border: 1px solid var(--fv-border); color: var(--fv-text); background: rgba(255,255,255,.68); font-weight: 800; padding: .52rem .78rem; } [data-theme="dark"] .pagination .page-link{ background: rgba(255,255,255,.03); } .pagination .page-link:focus{ box-shadow: var(--fv-ring); } .pagination .page-item.active .page-link{ background: rgba(15,118,110,.14); border-color: rgba(15,118,110,.25); color: var(--fv-text); } .pagination .page-item.disabled .page-link{ opacity: .55; } /* Alerts & Modals */ .alert{ border-radius: var(--fv-radius); border: 1px solid var(--fv-border); } .modal{ z-index: 2000; } .modal-backdrop{ z-index: 1990; } .tooltip{ --bs-tooltip-bg: transparent; --bs-tooltip-opacity: 1; z-index: 2100; opacity: 0 !important; visibility: hidden; pointer-events: none; transition: none !important; transform: none !important; } .tooltip.show{ opacity: 1 !important; visibility: visible; } .tooltip.fade{ transition: none !important; } .tooltip .tooltip-inner{ max-width: 220px; padding: .55rem .72rem; border-radius: 14px; border: 1px solid rgba(15,118,110,.14); background: radial-gradient(140px 48px at 100% 0%, rgba(15,118,110,.08), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.95)); color: var(--fv-text); box-shadow: 0 16px 28px rgba(15,23,42,.12); font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; font-size: .76rem; font-weight: 700; letter-spacing: .01em; backdrop-filter: blur(12px); } .tooltip.fv-modern-tooltip{ transition: none !important; transform: none !important; } .tooltip.fv-modern-tooltip.show{ transform: none !important; } .tooltip.fv-modern-tooltip .tooltip-inner{ max-width: 240px; padding: .62rem .8rem; border-radius: 16px; border-color: rgba(15,118,110,.16); box-shadow: 0 18px 34px rgba(15,23,42,.14); font-size: .76rem; font-weight: 700; line-height: 1.35; letter-spacing: .01em; } .tooltip .tooltip-arrow::before{ border-top-color: rgba(255,255,255,.96); border-bottom-color: rgba(255,255,255,.96); } [data-theme="dark"] .tooltip .tooltip-inner{ border-color: rgba(94,234,212,.12); background: radial-gradient(140px 48px at 100% 0%, rgba(45,212,191,.08), transparent 72%), linear-gradient(180deg, rgba(15,23,42,.98), rgba(17,24,39,.95)); color: #e5eef7; box-shadow: 0 16px 28px rgba(2,6,23,.34); } [data-theme="dark"] .tooltip.fv-modern-tooltip .tooltip-inner{ border-color: rgba(94,234,212,.14); box-shadow: 0 18px 34px rgba(2,6,23,.42); } [data-theme="dark"] .tooltip .tooltip-arrow::before{ border-top-color: rgba(15,23,42,.96); border-bottom-color: rgba(15,23,42,.96); } .modal-content{ display: flex; flex-direction: column; min-height: 0; border-radius: 20px; border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow-md); background: var(--fv-surface); color: var(--fv-text); } .modal-dialog{ margin: 1rem auto; } .modal-dialog-scrollable{ height: calc(100dvh - 2rem); } .modal-dialog-scrollable .modal-content{ max-height: 100%; } .modal-content form{ display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; } .modal-content > :not(.modal-header):not(form):not(.modal-footer){ min-height: 0; } .modal-header{ position: sticky; top: 0; z-index: 2; flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: space-between; gap: .85rem; background: var(--fv-surface); border-bottom: 1px solid var(--fv-border); } .modal-header > :first-child{ flex: 1 1 auto; min-width: 0; } .modal-header .btn-close{ flex: 0 0 auto; margin-left: auto; } .modal-body{ min-height: 0; flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } .modal-footer{ position: sticky; bottom: 0; z-index: 2; flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: .65rem; background: var(--fv-surface); border-top: 1px solid var(--fv-border); } .fv-modal-actions{ display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: .65rem; width: 100%; } .fv-modal-actions .btn{ flex: 0 0 auto; } .fv-modal-actions .btn-icon{ width: 44px; height: 44px; border-radius: 14px; } .fv-substation-log-shell{ display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 1rem; } .fv-substation-log-list, .fv-substation-log-editor{ border: 1px solid var(--fv-border); border-radius: calc(var(--fv-radius) - 4px); background: linear-gradient(180deg, rgba(255,255,255,.84), rgba(248,250,252,.92)); box-shadow: var(--fv-shadow-sm); } .fv-substation-log-toolbar, .fv-substation-log-editor-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; padding: 1rem 1rem .8rem; border-bottom: 1px solid rgba(148,163,184,.16); } .fv-substation-log-title{ font-size: 1rem; font-weight: 800; color: var(--fv-ink); } .fv-substation-log-sub{ font-size: .8rem; color: var(--fv-muted); } .fv-substation-log-entries{ display: grid; gap: .8rem; padding: 1rem; max-height: 24rem; overflow: auto; } .fv-substation-log-entry{ border: 1px solid rgba(148,163,184,.18); border-radius: 18px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(241,245,249,.9)); padding: .9rem; box-shadow: 0 14px 28px rgba(15,23,42,.06); border-left-width: 4px; } .fv-substation-log-entry-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; } .fv-substation-log-entry-title{ font-weight: 800; color: var(--fv-ink); } .fv-substation-log-entry-meta{ font-size: .77rem; color: var(--fv-muted); } .fv-substation-log-status{ display: inline-flex; align-items: center; justify-content: center; min-height: 1.7rem; padding: .22rem .62rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .02em; border: 1px solid transparent; } .fv-substation-log-status--planned, .fv-substation-log-entry--planned{ border-color: rgba(245,158,11,.28); } .fv-substation-log-status--planned{ background: rgba(245,158,11,.14); color: #b45309; } .fv-substation-log-entry--planned{ background: linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,247,237,.92)); border-left-color: #f59e0b; } .fv-substation-log-status--pending, .fv-substation-log-entry--pending{ border-color: rgba(249,115,22,.24); } .fv-substation-log-status--pending{ background: rgba(249,115,22,.14); color: #c2410c; } .fv-substation-log-entry--pending{ background: linear-gradient(180deg, rgba(255,247,237,.98), rgba(255,237,213,.92)); border-left-color: #f97316; } .fv-substation-log-status--completed, .fv-substation-log-entry--completed{ border-color: rgba(5,150,105,.24); } .fv-substation-log-status--completed{ background: rgba(5,150,105,.14); color: #047857; } .fv-substation-log-entry--completed{ background: linear-gradient(180deg, rgba(236,253,245,.98), rgba(209,250,229,.9)); border-left-color: #10b981; } .fv-substation-log-status--critical, .fv-substation-log-entry--critical{ border-color: rgba(220,38,38,.26); } .fv-substation-log-status--critical{ background: rgba(220,38,38,.14); color: #b91c1c; } .fv-substation-log-entry--critical{ background: linear-gradient(180deg, rgba(254,242,242,.98), rgba(254,226,226,.92)); border-left-color: #ef4444; } .fv-substation-log-status--warning, .fv-substation-log-entry--warning{ border-color: rgba(217,119,6,.28); } .fv-substation-log-status--warning{ background: rgba(217,119,6,.14); color: #b45309; } .fv-substation-log-entry--warning{ background: linear-gradient(180deg, rgba(255,251,235,.98), rgba(254,243,199,.92)); border-left-color: #d97706; } .fv-substation-log-status--information, .fv-substation-log-entry--information{ border-color: rgba(37,99,235,.24); } .fv-substation-log-status--information{ background: rgba(37,99,235,.12); color: #1d4ed8; } .fv-substation-log-entry--information{ background: linear-gradient(180deg, rgba(239,246,255,.98), rgba(219,234,254,.92)); border-left-color: #3b82f6; } .fv-substation-log-entry-body{ font-size: .86rem; line-height: 1.5; color: var(--fv-ink-soft); white-space: pre-wrap; } .fv-substation-log-empty{ border: 1px dashed rgba(148,163,184,.35); border-radius: 18px; padding: 1rem; text-align: center; color: var(--fv-muted); background: rgba(248,250,252,.82); } .fv-substation-log-editor{ padding-bottom: 1rem; } .fv-substation-log-editor .row{ padding: 1rem; } [data-theme="dark"] .fv-substation-log-list, [data-theme="dark"] .fv-substation-log-editor{ background: linear-gradient(180deg, rgba(15,23,42,.92), rgba(30,41,59,.86)); } [data-theme="dark"] .fv-substation-log-entry{ background: linear-gradient(180deg, rgba(30,41,59,.96), rgba(15,23,42,.9)); border-color: rgba(148,163,184,.16); } [data-theme="dark"] .fv-substation-log-entry--planned{ background: linear-gradient(180deg, rgba(71,49,9,.68), rgba(30,41,59,.94)); } [data-theme="dark"] .fv-substation-log-entry--pending{ background: linear-gradient(180deg, rgba(67,35,10,.72), rgba(30,41,59,.94)); } [data-theme="dark"] .fv-substation-log-entry--completed{ background: linear-gradient(180deg, rgba(6,78,59,.64), rgba(15,23,42,.94)); } [data-theme="dark"] .fv-substation-log-entry--critical{ background: linear-gradient(180deg, rgba(127,29,29,.68), rgba(30,41,59,.94)); } [data-theme="dark"] .fv-substation-log-entry--warning{ background: linear-gradient(180deg, rgba(120,53,15,.68), rgba(30,41,59,.94)); } [data-theme="dark"] .fv-substation-log-entry--information{ background: linear-gradient(180deg, rgba(30,64,175,.64), rgba(15,23,42,.94)); } [data-theme="dark"] .fv-substation-log-status--planned{ color: #fbbf24; } [data-theme="dark"] .fv-substation-log-status--pending{ color: #fb923c; } [data-theme="dark"] .fv-substation-log-status--completed{ color: #34d399; } [data-theme="dark"] .fv-substation-log-status--critical{ color: #f87171; } [data-theme="dark"] .fv-substation-log-status--warning{ color: #f59e0b; } [data-theme="dark"] .fv-substation-log-status--information{ color: #60a5fa; } /* Hero + auth + modules */ .fv-page-hero{ position: relative; overflow: hidden; border: 1px solid var(--fv-border); border-radius: calc(var(--fv-radius) + 6px); padding: clamp(1.4rem, 3vw, 2.4rem); background: radial-gradient(600px 240px at 100% 0%, rgba(217,119,6,.08), transparent 65%), radial-gradient(560px 220px at 0% 100%, rgba(15,118,110,.10), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.80), rgba(255,255,255,.62)); box-shadow: var(--fv-shadow-md); } [data-theme="dark"] .fv-page-hero{ background: radial-gradient(600px 240px at 100% 0%, rgba(245,158,11,.08), transparent 65%), radial-gradient(560px 220px at 0% 100%, rgba(45,212,191,.08), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); } .fv-stat-panel{ border: 1px solid var(--fv-border); border-radius: calc(var(--fv-radius) - 2px); background: rgba(255,255,255,.62); padding: 1rem 1.1rem; } [data-theme="dark"] .fv-stat-panel{ background: rgba(255,255,255,.03); } .fv-stat-row{ display: flex; justify-content: space-between; gap: 1rem; padding: .82rem 0; border-bottom: 1px solid var(--fv-border); } .fv-stat-row:last-child{ border-bottom: 0; } .fv-stat-label{ color: var(--fv-muted); text-transform: uppercase; letter-spacing: .08em; font-size: .78rem; font-weight: 800; } .fv-stat-value{ font-weight: 800; } .fv-module-card{ position: relative; } .fv-module-card .card-body{ display: flex; flex-direction: column; } .fv-module-card .btn{ margin-top: auto; } .fv-module-icon{ width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; border-radius: 18px; margin-bottom: 1rem; color: var(--fv-primary); background: rgba(15,118,110,.10); font-size: 1.25rem; } .fv-report-card{ position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 100%; } .fv-report-card::before{ content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(135deg, rgba(255,255,255,.24), transparent 52%); } .fv-report-card--inspection{ background: radial-gradient(260px 120px at 100% 0%, rgba(245,158,11,.18), transparent 62%), linear-gradient(180deg, rgba(255,251,235,.98), rgba(255,255,255,.94)); border-color: rgba(245,158,11,.24); } .fv-report-card--load{ background: radial-gradient(280px 130px at 100% 0%, rgba(14,165,233,.16), transparent 62%), linear-gradient(180deg, rgba(240,249,255,.98), rgba(255,255,255,.94)); border-color: rgba(14,165,233,.22); } .fv-report-card--records{ background: radial-gradient(260px 120px at 100% 0%, rgba(45,212,191,.16), transparent 62%), linear-gradient(180deg, rgba(240,253,250,.98), rgba(255,255,255,.94)); border-color: rgba(45,212,191,.22); } .fv-report-icon{ border: 1px solid rgba(255,255,255,.46); box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 14px 28px rgba(15,23,42,.08); } .fv-report-icon--inspection{ color: #b45309; background: linear-gradient(135deg, rgba(251,191,36,.28), rgba(249,115,22,.16)); } .fv-report-icon--load{ color: #0f766e; background: linear-gradient(135deg, rgba(45,212,191,.22), rgba(14,165,233,.16)); } .fv-report-icon--records{ color: #0f766e; background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(148,163,184,.12)); } .fv-report-chip{ display: inline-flex; align-items: center; min-height: 32px; padding: .35rem .7rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: var(--fv-text); background: rgba(255,255,255,.72); border: 1px solid rgba(148,163,184,.2); backdrop-filter: blur(10px); } .fv-report-meta{ display: flex; flex-wrap: wrap; gap: .55rem; font-size: .78rem; color: var(--fv-text-soft); } .fv-report-meta span{ display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .62rem; border-radius: 999px; background: rgba(255,255,255,.7); border: 1px solid rgba(148,163,184,.18); } .fv-report-btn{ border: 0; color: #fff; font-weight: 700; box-shadow: 0 16px 32px rgba(15,23,42,.12); } .fv-report-btn:hover, .fv-report-btn:focus{ color: #fff; } .fv-report-btn--inspection{ background: linear-gradient(135deg, #d97706, #f59e0b); } .fv-report-btn--load{ background: linear-gradient(135deg, #0f766e, #0891b2); } .fv-report-btn--records{ background: linear-gradient(135deg, #0f766e, #14b8a6); } [data-theme="dark"] .fv-report-card--inspection{ background: radial-gradient(260px 120px at 100% 0%, rgba(245,158,11,.22), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); } [data-theme="dark"] .fv-report-card--load{ background: radial-gradient(280px 130px at 100% 0%, rgba(14,165,233,.2), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); } [data-theme="dark"] .fv-report-card--records{ background: radial-gradient(260px 120px at 100% 0%, rgba(45,212,191,.2), transparent 62%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); } [data-theme="dark"] .fv-report-chip, [data-theme="dark"] .fv-report-meta span{ background: rgba(15,23,42,.56); border-color: rgba(148,163,184,.16); } .fv-auth-shell{ overflow: hidden; border-radius: 30px; border: 1px solid var(--fv-border); background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.58)); box-shadow: var(--fv-shadow-md); } [data-theme="dark"] .fv-auth-shell{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); } .fv-auth-panel{ height: 100%; padding: clamp(1.5rem, 4vw, 3rem); } .fv-auth-copy{ display: flex; flex-direction: column; justify-content: center; align-items: center; background: radial-gradient(420px 220px at 0% 0%, rgba(15,118,110,.08), transparent 70%), radial-gradient(360px 200px at 100% 100%, rgba(217,119,6,.08), transparent 68%); } .fv-auth-brand-image{ display: block; width: min(100%, 420px); height: auto; object-fit: contain; filter: drop-shadow(0 22px 44px rgba(15,23,42,.10)); } .fv-auth-card{ max-width: 420px; margin: 0 auto; } .fv-load-summary{ display: grid; grid-template-columns: repeat(3, minmax(148px, 1fr)); gap: 12px; } .fv-load-summary-card{ padding: 1rem 1.1rem; border-radius: 20px; border: 1px solid var(--fv-border); background: rgba(255,255,255,.65); } [data-theme="dark"] .fv-load-summary-card{ background: rgba(255,255,255,.04); } .fv-load-summary-card span{ display: block; color: var(--fv-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; } .fv-load-summary-card strong{ display: block; margin-top: .35rem; font-size: 1.08rem; } .fv-load-hero-grid{ display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .9fr); gap: 20px; align-items: stretch; } .fv-load-hero-grid > *{ min-width: 0; } .fv-load-chart-card, .fv-load-list-card{ border: 1px solid var(--fv-border); border-radius: calc(var(--fv-radius) - 2px); background: rgba(255,255,255,.64); box-shadow: var(--fv-shadow-sm); } [data-theme="dark"] .fv-load-chart-card, [data-theme="dark"] .fv-load-list-card{ background: rgba(255,255,255,.03); } .fv-load-chart-card{ padding: 1rem 1rem .65rem; } .fv-load-chart-info{ display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: .75rem; } .fv-load-chart-chip{ display: inline-flex; align-items: center; gap: .45rem; padding: .45rem .7rem; border-radius: 999px; border: 1px solid var(--fv-border); background: rgba(255,255,255,.78); color: var(--fv-text); font-size: .74rem; font-weight: 700; } .fv-load-chart-chip::before{ content: ""; width: 10px; height: 10px; border-radius: 999px; flex: 0 0 auto; } .fv-load-chart-chip--normal::before{ background: #2563eb; } .fv-load-chart-chip--overload::before{ background: #f97316; } [data-theme="dark"] .fv-load-chart-chip{ background: rgba(255,255,255,.04); } .fv-load-chart{ width: 100%; height: auto; display: block; } .fv-load-chart-scroll{ width: 100%; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .25rem; } .fv-load-chart-scroll::-webkit-scrollbar{ height: 8px; } .fv-load-axis{ stroke: rgba(24,33,38,.38); stroke-width: 1.5; } .fv-load-grid{ stroke: rgba(24,33,38,.10); stroke-width: 1; } [data-theme="dark"] .fv-load-axis{ stroke: rgba(255,255,255,.34); } [data-theme="dark"] .fv-load-grid{ stroke: rgba(255,255,255,.10); } .fv-load-axis-label, .fv-load-bottom-label, .fv-load-value-label{ fill: #111111; font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; } .fv-load-axis-label{ font-size: 12px; } .fv-load-bottom-label{ font-size: 11px; } .fv-load-date-label{ fill: #111111; font-family: "Manrope", ui-sans-serif, system-ui, sans-serif; font-size: 10px; opacity: 1; } .fv-load-value-label{ font-size: 12px; font-weight: 800; } .fv-load-bar--hv{ fill: #dc2626; } .fv-load-bar--lv{ fill: #2563eb; } .fv-load-bar--overload{ fill: #f97316; } .fv-load-point{ stroke: rgba(255,255,255,.96); stroke-width: 2.5; filter: drop-shadow(0 4px 8px rgba(15,23,42,.12)); } .fv-load-point--hv{ fill: #dc2626; } .fv-load-point--lv{ fill: #2563eb; } .fv-load-point--overload{ fill: #f97316; } [data-theme="dark"] .fv-load-point{ stroke: rgba(15,23,42,.92); } .fv-load-list-card{ padding: 1rem 1rem 1.1rem; } .fv-load-records{ margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--fv-border); } .fv-load-records-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; } .fv-load-record-groups{ display: grid; gap: .8rem; } .fv-load-record-card{ position: relative; overflow: hidden; padding: .95rem 1rem 1rem; border-radius: 18px; border: 1px solid var(--fv-border); background: radial-gradient(160px 70px at 100% 0%, rgba(45,212,191,.08), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.66)); } .fv-load-record-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #0f766e, #14b8a6); } .fv-load-record-card--overload{ border-color: rgba(249,115,22,.24); background: radial-gradient(160px 70px at 100% 0%, rgba(249,115,22,.12), transparent 72%), linear-gradient(180deg, rgba(255,247,237,.92), rgba(255,255,255,.74)); } .fv-load-record-card--overload::before{ background: linear-gradient(180deg, #ea580c, #f97316); } .fv-load-record-meta{ display: flex; flex-wrap: wrap; gap: .5rem; } .fv-load-record-meta span{ display: inline-flex; align-items: center; padding: .34rem .6rem; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid var(--fv-border); color: var(--fv-muted); font-size: .76rem; font-weight: 700; } [data-theme="dark"] .fv-load-record-card{ background: radial-gradient(160px 70px at 100% 0%, rgba(45,212,191,.08), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); } [data-theme="dark"] .fv-load-record-card--overload{ background: radial-gradient(160px 70px at 100% 0%, rgba(249,115,22,.16), transparent 72%), linear-gradient(180deg, rgba(124,45,18,.42), rgba(88,28,12,.24)); } [data-theme="dark"] .fv-load-record-meta span{ background: rgba(255,255,255,.04); } .fv-load-list-head{ padding-bottom: .8rem; border-bottom: 1px solid var(--fv-border); } .fv-load-list{ display: grid; gap: .8rem; padding-top: .9rem; } .fv-load-card-stage{ display: grid; gap: .8rem; padding-top: .95rem; min-height: 440px; align-content: start; perspective: 1200px; } .fv-load-card-stage--compact{ min-height: 0; padding-top: .85rem; } .fv-load-card-stage--compact .fv-load-stat-card{ padding: .92rem .95rem .98rem; border-radius: 18px; } .fv-load-card-stage--compact .fv-load-stat-top{ margin-bottom: .7rem; } .fv-load-card-stage--compact .fv-load-stat-main{ font-size: 1.2rem; } .fv-load-stat-card{ position: relative; overflow: hidden; padding: 1rem 1rem 1.05rem; border-radius: 20px; border: 1px solid var(--fv-border); background: radial-gradient(180px 70px at 100% 0%, rgba(45,212,191,.10), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.68)); box-shadow: var(--fv-shadow-sm); animation: fv-app-surface-enter .45s cubic-bezier(.2, .85, .25, 1) both; } .fv-load-stat-card::before{ content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: linear-gradient(180deg, #0f766e, #14b8a6); } .fv-load-stat-card--swing{ transform-origin: center top; animation: fv-load-swing-in .72s cubic-bezier(.2,.85,.25,1) both; } .fv-load-stat-card--overload{ border-color: rgba(249,115,22,.24); background: radial-gradient(180px 70px at 100% 0%, rgba(249,115,22,.12), transparent 72%), linear-gradient(180deg, rgba(255,247,237,.92), rgba(255,255,255,.76)); } .fv-load-stat-card--overload::before{ background: linear-gradient(180deg, #ea580c, #f97316); } .fv-load-stat-top{ display: flex; align-items: flex-start; justify-content: space-between; gap: .85rem; margin-bottom: .8rem; } .fv-load-stat-pill{ display: inline-flex; align-items: center; padding: .34rem .65rem; border-radius: 999px; background: rgba(15,118,110,.10); color: #0f766e; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .fv-load-stat-card--overload .fv-load-stat-pill{ background: rgba(249,115,22,.12); color: #c2410c; } .fv-load-stat-main{ font-size: 1.42rem; font-weight: 800; letter-spacing: -.03em; margin-bottom: .35rem; } .fv-load-graph-pager{ min-width: 52px; text-align: right; color: var(--fv-muted); font-size: .78rem; font-weight: 800; letter-spacing: .06em; } [data-theme="dark"] .fv-load-stat-card{ background: radial-gradient(180px 70px at 100% 0%, rgba(45,212,191,.10), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); } [data-theme="dark"] .fv-load-stat-card--overload{ background: radial-gradient(180px 70px at 100% 0%, rgba(249,115,22,.16), transparent 72%), linear-gradient(180deg, rgba(124,45,18,.42), rgba(88,28,12,.24)); } [data-theme="dark"] .fv-load-stat-pill{ background: rgba(20,184,166,.14); color: #99f6e4; } [data-theme="dark"] .fv-load-stat-card--overload .fv-load-stat-pill{ background: rgba(249,115,22,.16); color: #fdba74; } @keyframes fv-load-swing-in{ 0%{ opacity: 0; transform: rotateX(-26deg) rotateY(12deg) translate3d(0, 26px, 0) scale(.96); filter: blur(2px); } 55%{ opacity: 1; transform: rotateX(10deg) rotateY(-6deg) translate3d(0, -4px, 0) scale(1.01); filter: blur(0); } 100%{ opacity: 1; transform: rotateX(0) rotateY(0) translate3d(0, 0, 0) scale(1); filter: blur(0); } } .fv-load-row{ display: flex; justify-content: space-between; gap: 1rem; padding: .85rem .95rem; border-radius: 18px; background: rgba(255,255,255,.72); border: 1px solid var(--fv-border); } [data-theme="dark"] .fv-load-row{ background: rgba(255,255,255,.03); } .fv-load-row-title{ font-weight: 800; } .fv-load-row-sub, .fv-load-row-phases{ color: var(--fv-muted); font-size: .82rem; } .fv-load-row-value{ font-weight: 800; font-size: 1.02rem; } .fv-topology-card{ position: relative; overflow: hidden; } .fv-topology-map-shell{ width: 100%; overflow: auto; -webkit-overflow-scrolling: touch; border-radius: calc(var(--fv-radius) - 4px); transform-origin: top left; } .fv-topology-summary{ display: grid; grid-template-columns: repeat(5, minmax(120px, 1fr)); gap: 12px; } .fv-topology-side{ display: grid; gap: 14px; min-width: 0; } .fv-topology-actions{ display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; } .fv-topology-metric{ min-width: 120px; padding: .9rem 1rem; border-radius: 18px; border: 1px solid var(--fv-border); background: rgba(255,255,255,.62); } [data-theme="dark"] .fv-topology-metric{ background: rgba(255,255,255,.03); } .fv-topology-metric strong{ display: block; font-size: 1.35rem; line-height: 1; } .fv-topology-metric span{ display: block; margin-top: .35rem; color: var(--fv-muted); font-size: .82rem; text-transform: uppercase; letter-spacing: .08em; } .fv-topology-legend{ display: flex; flex-wrap: wrap; gap: .85rem 1.25rem; color: var(--fv-muted); font-size: .92rem; } .fv-topology-legend span{ display: inline-flex; align-items: center; gap: .45rem; } .fv-topology-empty{ border: 1px dashed var(--fv-border); border-radius: 20px; padding: 1.4rem; text-align: center; color: var(--fv-muted); background: rgba(255,255,255,.42); } .fv-topology-map{ position: relative; width: 100%; min-height: 420px; border-radius: calc(var(--fv-radius) - 4px); background: radial-gradient(520px 160px at 100% 0%, rgba(217,119,6,.08), transparent 70%), radial-gradient(520px 200px at 0% 100%, rgba(15,118,110,.08), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.62), rgba(255,255,255,.4)); border: 1px solid var(--fv-border); overflow: auto; } [data-theme="dark"] .fv-topology-map{ background: radial-gradient(520px 160px at 100% 0%, rgba(245,158,11,.07), transparent 70%), radial-gradient(520px 200px at 0% 100%, rgba(45,212,191,.07), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); } .fv-topology-tree-map{ min-height: 0; } .fv-topology-tree{ --fv-topology-rmu-gutter: 74px; position: relative; display: grid; gap: 18px; width: 100%; padding-right: var(--fv-topology-rmu-gutter); } .fv-topology-group{ position: relative; display: grid; gap: 12px; } .fv-topology-group-children{ position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: start; } .fv-topology-tree-lane{ position: relative; } .fv-topology-tree-lane-children{ position: relative; display: grid; gap: 10px; padding-top: 2px; } .fv-topology-tree-feeders{ position: relative; display: grid; gap: 8px; margin-top: .8rem; padding-left: 16px; } .fv-topology-tree-empty{ padding: .55rem .75rem; border: 1px dashed rgba(148,163,184,.24); border-radius: 12px; color: var(--fv-muted); font-size: .76rem; background: rgba(255,255,255,.48); } [data-theme="dark"] .fv-topology-tree-empty{ background: rgba(255,255,255,.04); border-color: rgba(148,163,184,.18); } .fv-topology-group-children::before, .fv-topology-tree-lane-children::before, .fv-topology-tree-feeders::before{ content: ""; position: absolute; left: 8px; top: 0; bottom: 10px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(15,118,110,.26), rgba(37,99,235,.20)); } .fv-topology-tree-lane::before, .fv-topology-tree-node::before, .fv-topology-tree-feeder-wrap::before{ content: ""; position: absolute; left: -14px; top: 28px; width: 14px; height: 2px; border-radius: 999px; background: rgba(15,118,110,.28); } .fv-topology-group-children > .fv-topology-tree-lane{ margin-left: 14px; } .fv-topology-tree-lane-children > .fv-topology-tree-node{ margin-left: 14px; } .fv-topology-tree-feeders > .fv-topology-tree-feeder-wrap{ margin-left: 12px; } [data-theme="dark"] .fv-topology-group-children::before, [data-theme="dark"] .fv-topology-tree-lane-children::before, [data-theme="dark"] .fv-topology-tree-feeders::before, [data-theme="dark"] .fv-topology-tree-lane::before, [data-theme="dark"] .fv-topology-tree-node::before, [data-theme="dark"] .fv-topology-tree-feeder-wrap::before{ background: linear-gradient(180deg, rgba(94,234,212,.36), rgba(96,165,250,.26)); } .fv-topology-rmu-overlay{ position: absolute; inset: 0; pointer-events: none; z-index: 5; } .fv-topology-rmu-svg{ position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .fv-topology-rmu-link--vertical{ min-width: 34px; max-width: 34px; padding: .4rem .28rem; border-radius: 14px; writing-mode: vertical-rl; text-orientation: mixed; } .fv-topology-rmu-link--vertical strong, .fv-topology-rmu-link--vertical span{ display: inline-block; margin: 0; } .fv-topology-tree-map .fv-topology-hub, .fv-topology-tree-map .fv-topology-node, .fv-topology-tree-map .fv-topology-lane, .fv-topology-tree-map .fv-topology-feeder-wrap{ position: relative; left: auto !important; top: auto !important; width: auto !important; min-height: 0 !important; height: auto !important; } .fv-topology-tree-map .fv-topology-svg, .fv-topology-tree-map .fv-topology-svg--overlay{ display: none; } .fv-topology-svg{ position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; } .fv-topology-svg--overlay{ z-index: 4; } .fv-topology-svg path{ fill: none; stroke-width: 2.5; stroke-linecap: round; } .fv-topology-line--group{ stroke: rgba(15,118,110,.34); stroke-dasharray: 4 8; } .fv-topology-line--indoor{ stroke: rgba(217,119,6,.44); stroke-dasharray: 6 8; } .fv-topology-line--outdoor{ stroke: rgba(14,165,233,.42); stroke-dasharray: 6 8; } .fv-topology-line--hv{ stroke: rgba(220,38,38,.55); stroke-width: 2.8; } .fv-topology-line--lv{ stroke: rgba(37,99,235,.52); stroke-width: 2.8; } .fv-topology-line--rmu{ stroke: rgba(109,40,217,.92); stroke-width: 3.8; } .fv-topology-line--feeder{ stroke-dasharray: none; filter: drop-shadow(0 0 3px rgba(255,255,255,.35)); } .fv-topology-line--rmu-bridge{ stroke-dasharray: 0; filter: drop-shadow(0 0 6px rgba(124,58,237,.26)); } .fv-topology-line-dot--hv{ fill: #dc2626; stroke: rgba(255,255,255,.95); stroke-width: 2; } .fv-topology-line-dot--lv{ fill: #2563eb; stroke: rgba(255,255,255,.95); stroke-width: 2; } .fv-topology-line-dot--rmu{ fill: #7c3aed; stroke: rgba(255,255,255,.95); stroke-width: 2; } .fv-topology-line-dot--rmu-joint{ fill: #a78bfa; stroke: rgba(255,255,255,.92); stroke-width: 1.8; } [data-theme="dark"] .fv-topology-line--feeder{ filter: drop-shadow(0 0 4px rgba(15,23,42,.55)); } [data-theme="dark"] .fv-topology-line--rmu-bridge{ filter: drop-shadow(0 0 5px rgba(124,58,237,.3)); } [data-theme="dark"] .fv-topology-line-dot--hv, [data-theme="dark"] .fv-topology-line-dot--lv, [data-theme="dark"] .fv-topology-line-dot--rmu, [data-theme="dark"] .fv-topology-line-dot--rmu-joint{ stroke: rgba(15,23,42,.9); } .fv-topology-hub, .fv-topology-node{ position: absolute; backdrop-filter: blur(10px); z-index: 2; } .fv-topology-hub{ padding: .92rem 1rem; border-radius: 20px; border: 1px solid rgba(15,118,110,.18); background: linear-gradient(135deg, rgba(15,118,110,.14), rgba(21,94,117,.10)); box-shadow: var(--fv-shadow-sm); } .fv-topology-hub-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .fv-topology-hub--unassigned{ border-color: rgba(217,119,6,.24); background: linear-gradient(135deg, rgba(217,119,6,.14), rgba(217,119,6,.08)); } .fv-topology-add-btn{ width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 1px solid rgba(255,255,255,.45); box-shadow: 0 10px 18px rgba(24,33,38,.08); } .fv-topology-hub-title{ font-weight: 800; font-size: .96rem; } .fv-topology-hub-meta{ margin-top: .25rem; color: var(--fv-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; } .fv-topology-lane{ position: absolute; border-radius: 22px; border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow-sm); backdrop-filter: blur(10px); padding: 12px; } .fv-topology-lane--indoor{ background: linear-gradient(180deg, rgba(255,247,237,.92), rgba(255,251,235,.82)); border-color: rgba(217,119,6,.20); } .fv-topology-lane--outdoor{ background: linear-gradient(180deg, rgba(240,249,255,.92), rgba(236,254,255,.82)); border-color: rgba(14,165,233,.18); } [data-theme="dark"] .fv-topology-lane--indoor{ background: linear-gradient(180deg, rgba(77,45,12,.82), rgba(92,56,16,.72)); } [data-theme="dark"] .fv-topology-lane--outdoor{ background: linear-gradient(180deg, rgba(10,47,64,.82), rgba(16,67,92,.72)); } .fv-topology-lane-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 7px; } .fv-topology-lane-title{ font-size: .84rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; } .fv-topology-lane--indoor .fv-topology-lane-title{ color: #b45309; } .fv-topology-lane--outdoor .fv-topology-lane-title{ color: #0369a1; } [data-theme="dark"] .fv-topology-lane-title{ color: #f8fafc; } .fv-topology-lane-meta{ color: var(--fv-muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; } .fv-topology-lane-empty{ display: flex; align-items: center; justify-content: center; min-height: 86px; border-radius: 16px; border: 1px dashed rgba(24,33,38,.12); color: var(--fv-muted); font-size: .86rem; background: rgba(255,255,255,.36); } [data-theme="dark"] .fv-topology-lane-empty{ border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.04); } .fv-topology-node{ padding: .88rem .92rem; border-radius: 20px; border: 1px solid var(--fv-border); background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(246,250,249,.82)); box-shadow: var(--fv-shadow-sm); } [data-theme="dark"] .fv-topology-node{ background: linear-gradient(180deg, rgba(23,34,40,.96), rgba(27,40,46,.92)); } .fv-topology-node--overload{ border-color: rgba(249,115,22,.38); background: radial-gradient(170px 72px at 100% 0%, rgba(249,115,22,.18), transparent 72%), linear-gradient(180deg, rgba(255,247,237,.96), rgba(255,237,213,.88)); box-shadow: 0 18px 36px rgba(249,115,22,.18); animation: fv-topology-overload-blink 4.8s ease-in-out infinite; } [data-theme="dark"] .fv-topology-node--overload{ background: radial-gradient(170px 72px at 100% 0%, rgba(251,146,60,.18), transparent 72%), linear-gradient(180deg, rgba(124,45,18,.58), rgba(88,28,12,.42)); } .fv-topology-node-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .fv-topology-node-title{ font-weight: 800; line-height: 1.2; } .fv-topology-node-title-btn{ padding: 0; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 800; line-height: 1.2; text-align: left; cursor: pointer; } .fv-topology-node-title-btn:hover{ color: var(--fv-primary); } .fv-topology-node-title-btn:focus-visible{ outline: 2px solid rgba(15,118,110,.28); outline-offset: 3px; border-radius: 8px; } .fv-topology-add-btn--sub{ flex: 0 0 auto; } .fv-topology-node-code{ margin-top: .3rem; color: var(--fv-muted); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; } .fv-topology-node-stats{ display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } .fv-topology-node-stats span{ display: inline-flex; align-items: center; padding: .2rem .55rem; border-radius: 999px; background: rgba(15,118,110,.08); color: var(--fv-primary); font-size: .68rem; font-weight: 800; letter-spacing: .03em; } .fv-topology-node-meta{ display: flex; align-items: center; gap: .4rem; margin-top: .55rem; color: var(--fv-muted); font-size: .76rem; } .fv-topology-node-meta--load{ color: #c2410c; font-weight: 700; } [data-theme="dark"] .fv-topology-node-meta--load{ color: #fdba74; } .fv-topology-node-alert{ margin-top: .7rem; display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .65rem; border-radius: 999px; background: rgba(249,115,22,.14); color: #c2410c; font-size: .7rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } [data-theme="dark"] .fv-topology-node-alert{ background: rgba(249,115,22,.2); color: #fdba74; } .fv-topology-coordinate-link{ color: inherit; text-decoration: underline; text-underline-offset: 2px; } .fv-topology-coordinate-link:hover{ color: var(--fv-primary); } .fv-topology-feeder-wrap{ position: absolute; z-index: 2; } .fv-topology-feeder-actions{ position: absolute; top: 5px; right: 5px; z-index: 4; } .fv-topology-subfeeder-add{ width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; padding: 0; box-shadow: 0 8px 18px rgba(24,33,38,.08); } .fv-topology-feeder{ position: relative; appearance: none; text-align: left; cursor: pointer; width: 100%; padding: .62rem 2.05rem .62rem .78rem; border-radius: 15px; border: 1px solid var(--fv-border); background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,251,255,.92)); box-shadow: var(--fv-shadow-sm); backdrop-filter: blur(10px); z-index: 2; } .fv-topology-feeder:hover{ transform: translateY(-1px); box-shadow: var(--fv-shadow-md); } .fv-topology-feeder--draggable{ cursor: grab; } .fv-topology-feeder--draggable::after{ content: ""; position: absolute; top: 8px; left: 8px; width: 8px; height: 8px; border-radius: 999px; background: rgba(124,58,237,.85); box-shadow: 0 0 0 4px rgba(124,58,237,.14); } .fv-topology-feeder--draggable.is-dragging{ cursor: grabbing; opacity: .72; transform: scale(.98); } .fv-topology-feeder--drop-target{ box-shadow: 0 0 0 3px rgba(124,58,237,.18), var(--fv-shadow-md); border-color: rgba(124,58,237,.38); } .fv-topology-feeder:focus-visible{ outline: 2px solid rgba(15,118,110,.32); outline-offset: 2px; } [data-theme="dark"] .fv-topology-feeder{ background: linear-gradient(180deg, rgba(23,34,40,.98), rgba(28,38,52,.94)); } .fv-topology-subfeeder-list{ position: relative; display: grid; gap: 8px; margin-top: 10px; margin-left: 10px; padding-top: 4px; padding-left: 18px; } .fv-topology-subfeeder-list::before{ content: ""; position: absolute; left: 6px; top: 0; bottom: 10px; width: 2px; border-radius: 999px; background: linear-gradient(180deg, rgba(15,118,110,.34), rgba(37,99,235,.24)); } .fv-topology-subfeeder{ position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem .75rem; border-radius: 12px; border: 1px solid rgba(148,163,184,.22); background: rgba(255,255,255,.72); box-shadow: 0 8px 18px rgba(24,33,38,.05); text-align: left; cursor: pointer; } .fv-topology-subfeeder::before{ content: ""; position: absolute; left: -14px; top: 50%; width: 14px; height: 2px; transform: translateY(-50%); border-radius: 999px; background: rgba(15,118,110,.34); } .fv-topology-subfeeder::after{ content: ""; position: absolute; left: -17px; top: 50%; width: 8px; height: 8px; transform: translateY(-50%); border-radius: 999px; background: #0f766e; box-shadow: 0 0 0 3px rgba(15,118,110,.10); } .fv-topology-subfeeder:hover{ transform: translateY(-1px); box-shadow: var(--fv-shadow-sm); } .fv-topology-subfeeder-name{ font-size: .77rem; font-weight: 800; line-height: 1.2; } .fv-topology-subfeeder-meta{ color: var(--fv-muted); font-size: .69rem; text-align: right; } [data-theme="dark"] .fv-topology-subfeeder{ background: rgba(255,255,255,.06); border-color: rgba(148,163,184,.16); } [data-theme="dark"] .fv-topology-subfeeder-list::before, [data-theme="dark"] .fv-topology-subfeeder::before{ background: linear-gradient(180deg, rgba(94,234,212,.42), rgba(96,165,250,.34)); } [data-theme="dark"] .fv-topology-subfeeder::after{ background: #5eead4; box-shadow: 0 0 0 3px rgba(94,234,212,.12); } .fv-topology-subfeeder--hv{ border-color: rgba(220, 38, 38, .18); background: rgba(254,242,242,.84); } .fv-topology-subfeeder--lv{ border-color: rgba(37, 99, 235, .16); background: rgba(239,246,255,.84); } [data-theme="dark"] .fv-topology-subfeeder--hv{ background: rgba(127,29,29,.34); } [data-theme="dark"] .fv-topology-subfeeder--lv{ background: rgba(30,58,138,.34); } .fv-topology-feeder--hv{ border-color: rgba(220, 38, 38, .24); background: linear-gradient(180deg, rgba(254,242,242,.96), rgba(254,226,226,.88)); } .fv-topology-feeder--lv{ border-color: rgba(37, 99, 235, .22); background: linear-gradient(180deg, rgba(239,246,255,.96), rgba(219,234,254,.88)); } [data-theme="dark"] .fv-topology-feeder--hv{ background: linear-gradient(180deg, rgba(69,20,20,.96), rgba(95,30,30,.9)); } [data-theme="dark"] .fv-topology-feeder--lv{ background: linear-gradient(180deg, rgba(20,39,76,.96), rgba(27,56,109,.9)); } .fv-topology-feeder-title{ display: flex; align-items: center; gap: .36rem; font-weight: 800; font-size: .82rem; } .fv-topology-feeder-title i{ font-size: .86rem; } .fv-topology-feeder--hv .fv-topology-feeder-title{ color: #b91c1c; } .fv-topology-feeder--lv .fv-topology-feeder-title{ color: #1d4ed8; } [data-theme="dark"] .fv-topology-feeder--hv .fv-topology-feeder-title, [data-theme="dark"] .fv-topology-feeder--lv .fv-topology-feeder-title{ color: #f8fafc; } .fv-topology-feeder-code{ margin-top: .15rem; color: var(--fv-muted); font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; } .fv-topology-feeder-meta{ margin-top: .25rem; color: var(--fv-muted); font-size: .7rem; } .fv-topology-rmu-link{ position: absolute; min-width: 138px; max-width: 168px; padding: .38rem .62rem; border-radius: 999px; border: 1px solid rgba(124,58,237,.22); background: rgba(245,243,255,.95); box-shadow: var(--fv-shadow-sm); text-align: center; font-size: .7rem; color: #5b21b6; backdrop-filter: blur(10px); z-index: 5; } .fv-topology-rmu-link strong{ display: block; font-size: .72rem; } .fv-topology-rmu-link span{ display: block; margin-top: .12rem; color: var(--fv-muted); } [data-theme="dark"] .fv-topology-rmu-link{ background: rgba(59,34,102,.92); color: #f5f3ff; } [data-theme="dark"] .fv-topology-rmu-link span{ color: rgba(245,243,255,.72); } @keyframes fv-topology-overload-blink{ 0%, 58%, 100%{ transform: translateY(0) scale(1); box-shadow: 0 18px 36px rgba(249,115,22,.14); filter: saturate(1); } 8%, 16%{ transform: translateY(-1px) scale(1.015); box-shadow: 0 0 0 3px rgba(249,115,22,.20), 0 22px 42px rgba(249,115,22,.24); filter: saturate(1.18); } } /* Mobile bottom nav */ .fv-bottomnav{ position: fixed; bottom: 0; left: 0; right: 0; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); z-index: 1030; backdrop-filter: blur(12px); background: rgba(245,241,234,.78) !important; border-top: 1px solid var(--fv-border) !important; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } [data-theme="dark"] .fv-bottomnav{ background: rgba(16,24,28,.72) !important; } .fv-bottomnav::-webkit-scrollbar{ display: none; } .fv-navitem{ display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; flex: 0 0 84px; min-height: 68px; text-align: center; padding: 9px 6px 10px; text-decoration: none; font-weight: 800; color: var(--fv-text); border-radius: 20px; background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(255,255,255,.62)); border: 1px solid var(--fv-border); box-shadow: var(--fv-shadow-sm); } [data-theme="dark"] .fv-navitem{ background: rgba(255,255,255,.03); } .fv-navitem.active{ background: linear-gradient(180deg, rgba(15,118,110,.16), rgba(15,118,110,.08)); border-color: rgba(15,118,110,.28); } .fv-navitem:active{ transform: scale(0.99); } .fv-navitem-icon{ width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(15,118,110,.08); color: var(--fv-primary); font-size: 1.05rem; box-shadow: inset 0 1px 0 rgba(255,255,255,.55); } .fv-navitem-label{ display: block; max-width: 100%; font-size: .72rem; line-height: 1.1; letter-spacing: .02em; } [data-theme="dark"] .fv-navitem-icon{ background: rgba(255,255,255,.08); color: #8ee0d5; } .fv-navitem.active .fv-navitem-icon{ background: rgba(15,118,110,.16); } @keyframes fv-app-screen-enter{ from{ opacity: 0; transform: translate3d(0, 20px, 0) scale(.988); filter: saturate(.96) blur(1px); } to{ opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: saturate(1) blur(0); } } @keyframes fv-app-surface-enter{ from{ opacity: 0; transform: translate3d(0, 18px, 0); } to{ opacity: 1; transform: translate3d(0, 0, 0); } } .fv-main > .container-fluid{ animation: fv-app-screen-fade .3s ease both; } .fv-page-hero, .fv-auth-shell, .fv-module-card, .fv-item-card, .fv-card, .fv-load-chart-card, .fv-load-list-card, .fv-location-group, .alert{ animation: fv-app-surface-enter .5s cubic-bezier(.2, .85, .25, 1) both; will-change: transform, opacity; } .fv-page-hero, .fv-auth-shell, .fv-card:first-child{ animation-delay: .04s; } .fv-load-chart-card, .fv-load-list-card, .fv-location-group, .fv-module-card, .fv-item-card{ animation-delay: .08s; } .fv-location-group:nth-of-type(2), .fv-item-card:nth-of-type(2){ animation-delay: .12s; } .fv-location-group:nth-of-type(3), .fv-item-card:nth-of-type(3){ animation-delay: .16s; } .fv-location-group:nth-of-type(4), .fv-item-card:nth-of-type(4){ animation-delay: .2s; } @media (prefers-reduced-motion: reduce){ .fv-main > .container-fluid, .fv-page-hero, .fv-auth-shell, .fv-module-card, .fv-item-card, .fv-card, .fv-load-chart-card, .fv-load-list-card, .fv-location-group, .alert{ animation: none !important; transform: none !important; filter: none !important; } } @keyframes fv-app-screen-fade{ from{ opacity: 0; } to{ opacity: 1; } } @media (max-width: 575.98px){ .fv-page-hero{ padding: 1rem; } .fv-report-card{ padding: 1rem !important; } .fv-report-meta{ gap: .45rem; font-size: .73rem; } .fv-report-meta span{ padding: .36rem .55rem; } .fv-hero-title{ font-size: 1.35rem; } .fv-load-summary{ gap: 8px; } .fv-load-summary-card{ padding: .78rem .85rem; border-radius: 16px; } .fv-load-summary-card span{ font-size: .68rem; } .fv-load-summary-card strong{ font-size: .95rem; } .fv-load-hero-grid{ grid-template-columns: 1fr; gap: 12px; } .fv-load-chart-card{ padding: .7rem .7rem .35rem; width: 100%; } .fv-load-chart-info{ gap: .4rem; margin-bottom: .55rem; } .fv-load-chart-chip{ padding: .38rem .58rem; font-size: .68rem; } .fv-load-list-card{ padding: .75rem .75rem .8rem; } .fv-load-list-head{ display: flex; align-items: center; justify-content: space-between; gap: .55rem; flex-wrap: wrap; } .fv-load-list-head{ padding-bottom: .6rem; } .fv-load-list{ gap: .55rem; padding-top: .7rem; } .fv-load-card-stage{ min-height: 0; gap: .7rem; padding-top: .75rem; } .fv-load-card-stage--compact .fv-load-stat-card{ padding: .82rem .82rem .88rem; border-radius: 15px; } .fv-load-card-stage--compact .fv-load-stat-main{ font-size: 1.08rem; } .fv-load-graph-pager{ width: 100%; text-align: left; font-size: .72rem; } .fv-load-stat-card{ padding: .85rem .85rem .9rem; border-radius: 16px; } .fv-load-stat-top{ margin-bottom: .65rem; gap: .65rem; } .fv-load-stat-pill{ font-size: .66rem; padding: .28rem .55rem; } .fv-load-stat-main{ font-size: 1.14rem; } .fv-load-row{ gap: .7rem; padding: .68rem .75rem; border-radius: 14px; } .fv-load-row-title{ font-size: .9rem; } .fv-load-row-sub, .fv-load-row-phases{ font-size: .74rem; } .fv-load-row-value{ font-size: .92rem; } .fv-load-axis-label{ font-size: 10px; } .fv-load-bottom-label{ font-size: 9px; } .fv-load-date-label{ font-size: 8px; } .fv-load-value-label{ font-size: 10px; } .modal{ padding: .35rem; } .modal-dialog{ display: flex; align-items: stretch; width: min(100dvw - .8rem, 100%); max-width: none; margin: .4rem auto; min-height: calc(100dvh - .8rem); height: calc(100dvh - .8rem); } .modal-dialog-scrollable{ height: calc(100dvh - .8rem); } .modal-dialog-scrollable .modal-content, .modal-content{ width: 100%; min-height: 100%; max-height: 100%; border-radius: 18px; } .modal-header{ padding-top: .95rem; padding-bottom: .85rem; } .modal-header, .modal-body, .modal-footer{ padding-left: .9rem; padding-right: .9rem; } .modal-body{ padding-top: .8rem; padding-bottom: .95rem; } .modal-footer{ gap: .65rem; padding-top: .8rem; padding-bottom: max(.8rem, env(safe-area-inset-bottom)); } .fv-modal-actions{ justify-content: flex-end; } .fv-modal-actions .btn{ flex: 0 0 auto; } .fv-modal-actions .btn-icon{ width: 46px; height: 46px; } .modal-title{ font-size: 1rem; line-height: 1.35; } .modal .form-label{ font-size: .8rem; } .modal .form-control, .modal .form-select{ min-height: 44px; font-size: .95rem; } .modal textarea.form-control{ min-height: 96px; } .modal .row{ --bs-gutter-x: .75rem; } .modal .btn-close{ width: 2rem; height: 2rem; padding: .5rem; margin: 0; } .modal-open .fv-bottomnav{ display: none !important; } .fv-main{ padding-bottom: 102px; } .fv-brand-subtitle{ display: none; } .fv-topology-side{ width: 100%; } .fv-topology-summary{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .fv-topology-summary .fv-topology-metric:last-child{ grid-column: 1 / -1; } .fv-topology-metric{ min-width: 0; padding: .72rem .75rem; border-radius: 14px; } .fv-topology-metric strong{ font-size: 1.05rem; } .fv-topology-metric span{ margin-top: .28rem; font-size: .68rem; letter-spacing: .05em; } .fv-topology-actions{ justify-content: stretch; } .fv-topology-actions .btn{ flex: 1 1 auto; } .fv-topology-feeder-title{ font-size: .84rem; } .fv-load-summary{ grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .fv-load-summary-card{ padding: .68rem .55rem; } .fv-load-summary-card strong{ font-size: .84rem; } .fv-bottomnav{ gap: 6px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); } .fv-navitem{ flex-basis: 78px; min-height: 64px; padding: 8px 4px 9px; border-radius: 18px; } .fv-navitem-icon{ width: 30px; height: 30px; font-size: .98rem; } .fv-navitem-label{ font-size: .68rem; } .fv-topology-map-shell{ margin-left: -4px; margin-right: -4px; padding-left: 4px; padding-right: 4px; overflow-x: hidden; } .fv-scroll-panel{ max-height: 68vh; padding-right: 2px; } .fv-location-group{ padding: .8rem; } .fv-location-group-head{ margin-bottom: .8rem; padding-bottom: .7rem; } .fv-location-group-title{ font-size: .92rem; } .fv-substation-load{ flex-direction: column; align-items: flex-start; gap: .3rem; padding: .65rem .7rem; } .fv-substation-sparkline{ padding: .65rem .7rem; } .fv-substation-sparkline-head{ flex-direction: column; align-items: flex-start; gap: .25rem; } .fv-substation-sparkline-dates{ font-size: .68rem; } .fv-substation-sparkline-tooltip{ min-width: 118px; padding: .48rem .55rem; } .fv-substation-card .fv-item-sub{ font-size: .74rem; } .fv-feeder-load{ flex-direction: column; align-items: flex-start; gap: .3rem; padding: .65rem .7rem; } .fv-subfeeder-list{ padding-left: .9rem; gap: .5rem; } .fv-subfeeder-item{ align-items: flex-start; gap: .4rem; padding: .65rem .72rem; } .fv-subfeeder-item-trigger{ align-items: flex-start; flex-direction: column; gap: .4rem; } .fv-subfeeder-item-side{ width: 100%; align-items: flex-start; text-align: left; } .fv-subfeeder-inline-actions, .fv-subfeeder-record-actions{ width: 100%; justify-content: flex-start; } .fv-subfeeder-records-head, .fv-subfeeder-record-top{ flex-direction: column; align-items: flex-start; } .fv-subfeeder-record-side{ align-items: flex-start; text-align: left; } .fv-subfeeder-record-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .fv-rmu-route{ flex-wrap: wrap; justify-content: flex-start; padding: .65rem .7rem; } .fv-rmu-route span:last-child{ text-align: left; } .fv-substation-form-shell{ padding: 1rem; } .fv-form-icon-actions{ justify-content: space-between; } .fv-substation-log-shell{ grid-template-columns: 1fr; } .fv-substation-log-entries{ max-height: none; } } @media (min-width: 576px) and (max-width: 991.98px){ .fv-topology-tree{ --fv-topology-rmu-gutter: 62px; gap: 14px; } .fv-topology-group-children{ grid-template-columns: 1fr; gap: 12px; } .fv-display{ font-size: clamp(2rem, 8vw, 3.1rem); } .fv-auth-card{ max-width: none; } .fv-topology-map{ min-height: 520px; } .fv-topology-summary{ grid-template-columns: repeat(2, minmax(120px, 1fr)); } .fv-topology-card .card-body{ padding: 1.1rem !important; } .fv-topology-hub{ padding: .82rem .9rem; border-radius: 18px; } .fv-topology-hub-title{ font-size: .9rem; } .fv-topology-hub-meta{ font-size: .72rem; } .fv-topology-lane{ padding: 10px; border-radius: 18px; } .fv-topology-lane-title{ font-size: .8rem; } .fv-topology-lane-meta{ font-size: .66rem; } .fv-topology-node{ padding: .78rem .82rem; border-radius: 17px; } .fv-topology-node-title-btn{ font-size: .84rem; } .fv-topology-node-code{ font-size: .68rem; } .fv-topology-node-meta{ font-size: .7rem; } .fv-topology-node-stats span{ font-size: .64rem; } .fv-topology-feeder{ padding: .56rem 1.9rem .56rem .68rem; border-radius: 13px; } .fv-topology-feeder-title{ font-size: .75rem; } .fv-topology-feeder-title i{ font-size: .8rem; } .fv-topology-feeder-code{ font-size: .62rem; } .fv-topology-feeder-meta{ font-size: .62rem; } .fv-topology-subfeeder-add{ width: 24px; height: 24px; } .fv-topology-rmu-link{ min-width: 122px; max-width: 144px; padding: .34rem .5rem; font-size: .64rem; } .fv-topology-rmu-link strong{ font-size: .67rem; } .fv-load-hero-grid{ grid-template-columns: 1fr; } .fv-load-card-stage{ min-height: 0; } } @media (min-width: 992px) and (max-width: 1360px){ .fv-topology-tree{ --fv-topology-rmu-gutter: 68px; gap: 16px; } .fv-topology-group-children{ gap: 12px; } .fv-topology-card .card-body{ padding: 1.3rem !important; } .fv-topology-hub{ padding: .86rem .94rem; border-radius: 19px; } .fv-topology-hub-title{ font-size: .93rem; } .fv-topology-hub-meta{ font-size: .74rem; } .fv-topology-lane{ padding: 11px; border-radius: 19px; } .fv-topology-lane-title{ font-size: .82rem; } .fv-topology-lane-meta{ font-size: .68rem; } .fv-topology-node{ padding: .82rem .86rem; border-radius: 18px; } .fv-topology-node-title-btn{ font-size: .88rem; } .fv-topology-node-code{ font-size: .7rem; } .fv-topology-node-meta{ font-size: .72rem; } .fv-topology-node-stats span{ font-size: .66rem; } .fv-topology-feeder{ padding: .58rem 1.95rem .58rem .72rem; border-radius: 14px; } .fv-topology-feeder-title{ font-size: .78rem; } .fv-topology-feeder-title i{ font-size: .84rem; } .fv-topology-feeder-code{ font-size: .64rem; } .fv-topology-feeder-meta{ font-size: .66rem; } .fv-topology-subfeeder-add{ width: 25px; height: 25px; } .fv-topology-rmu-link{ min-width: 128px; max-width: 150px; padding: .36rem .54rem; font-size: .66rem; } .fv-topology-rmu-link strong{ font-size: .69rem; } } @media (max-width: 767.98px){ .fv-topology-tree{ --fv-topology-rmu-gutter: 46px; gap: 12px; padding-right: var(--fv-topology-rmu-gutter); } .fv-topology-group{ gap: 10px; } .fv-topology-group-children{ grid-template-columns: 1fr; gap: 10px; } .fv-topology-group-children::before, .fv-topology-tree-lane-children::before, .fv-topology-tree-feeders::before{ left: 6px; } .fv-topology-tree-lane::before, .fv-topology-tree-node::before, .fv-topology-tree-feeder-wrap::before{ left: -10px; width: 10px; top: 24px; } .fv-topology-group-children > .fv-topology-tree-lane, .fv-topology-tree-lane-children > .fv-topology-tree-node, .fv-topology-tree-feeders > .fv-topology-tree-feeder-wrap{ margin-left: 10px; } .fv-topology-card{ overflow: visible; } .fv-topology-card > .p-3{ padding: .65rem !important; } .fv-topology-card .card-body{ padding: .9rem !important; } .fv-topology-map-shell{ width: 100%; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: hidden; } .fv-topology-map{ min-height: 320px; border-radius: calc(var(--fv-radius) - 8px); transform-origin: top left; } .fv-topology-summary{ gap: 8px; } .fv-topology-metric{ min-width: 0; padding: .72rem .78rem; } .fv-topology-side{ gap: 10px; } .fv-topology-hub{ padding: .78rem .82rem; border-radius: 16px; } .fv-topology-hub-title{ font-size: .9rem; } .fv-topology-hub-meta{ font-size: .72rem; letter-spacing: .05em; } .fv-topology-add-btn{ width: 32px; height: 32px; border-radius: 10px; } .fv-topology-lane{ padding: 8px; border-radius: 16px; } .fv-topology-lane-head{ margin-bottom: 5px; } .fv-topology-lane-title{ font-size: .74rem; letter-spacing: .06em; } .fv-topology-lane-meta{ font-size: .62rem; } .fv-topology-node{ padding: .64rem .66rem; border-radius: 15px; } .fv-topology-node-title-btn{ font-size: .79rem; } .fv-topology-node-code{ font-size: .64rem; } .fv-topology-node-stats{ gap: .28rem; margin-top: .5rem; } .fv-topology-node-stats span{ padding: .16rem .45rem; font-size: .62rem; } .fv-topology-node-meta{ margin-top: .34rem; gap: .26rem; font-size: .67rem; line-height: 1.2; } .fv-topology-node-alert{ margin-top: .42rem; padding: .18rem .42rem; font-size: .62rem; } .fv-topology-feeder{ padding: .52rem 1.9rem .52rem .64rem; border-radius: 13px; } .fv-topology-feeder-title{ font-size: .71rem; gap: .28rem; } .fv-topology-feeder-title i{ font-size: .78rem; } .fv-topology-feeder-code{ font-size: .6rem; } .fv-topology-feeder-meta{ margin-top: .14rem; font-size: .58rem; line-height: 1.2; } .fv-topology-feeder-actions{ top: 3px; right: 3px; } .fv-topology-subfeeder-add{ width: 22px; height: 22px; border-radius: 7px; } .fv-topology-subfeeder-list{ gap: 5px; margin-top: 7px; margin-left: 5px; padding-left: 12px; } .fv-topology-subfeeder{ padding: .38rem .48rem; border-radius: 9px; gap: .38rem; } .fv-topology-subfeeder-name{ font-size: .64rem; } .fv-topology-subfeeder-meta{ font-size: .56rem; } .fv-topology-rmu-link{ min-width: 108px; max-width: 118px; padding: .32rem .44rem; border-radius: 10px; font-size: .6rem; } .fv-topology-rmu-link strong{ font-size: .64rem; } .fv-topology-rmu-link span{ font-size: .55rem; } .fv-topology-rmu-link--vertical{ min-width: 28px; max-width: 28px; padding: .32rem .2rem; border-radius: 10px; } } .fv-duty-hero{ background: radial-gradient(300px 140px at 100% 0%, rgba(255,255,255,.28), transparent 72%), linear-gradient(135deg, rgba(15,118,110,.12), rgba(255,255,255,.56)); border-color: rgba(15,118,110,.15); } .fv-duty-summary-grid{ display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; } .fv-duty-summary-card{ position: relative; overflow: hidden; display: flex; flex-direction: column; gap: .42rem; min-width: 0; padding: 1rem 1rem .95rem; border-radius: 22px; border: 1px solid rgba(148,163,184,.18); background: radial-gradient(180px 90px at 100% 0%, rgba(255,255,255,.28), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,244,.92)); box-shadow: 0 16px 32px rgba(15,23,42,.08); } .fv-duty-summary-card::after{ content: ""; position: absolute; inset: auto 18px 0; height: 4px; border-radius: 999px 999px 0 0; background: rgba(15,118,110,.24); } .fv-duty-summary-card strong{ font-size: clamp(1.4rem, 2vw, 1.95rem); line-height: 1; color: #122033; } .fv-duty-summary-card span:last-child{ color: #516074; font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; } .fv-duty-summary-icon{ display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 16px; font-size: 1.05rem; color: #0f766e; background: rgba(15,118,110,.1); box-shadow: inset 0 0 0 1px rgba(15,118,110,.08); } .fv-duty-summary-card--today .fv-duty-summary-icon, .fv-duty-summary-card--today::after{ color: #0284c7; background-color: rgba(2,132,199,.1); background: rgba(2,132,199,.1); } .fv-duty-summary-card--today::after{ background: rgba(2,132,199,.28); } .fv-duty-summary-card--planned .fv-duty-summary-icon, .fv-duty-summary-card--planned::after{ color: #2563eb; background-color: rgba(37,99,235,.1); background: rgba(37,99,235,.1); } .fv-duty-summary-card--planned::after{ background: rgba(37,99,235,.28); } .fv-duty-summary-card--pending .fv-duty-summary-icon, .fv-duty-summary-card--pending::after{ color: #d97706; background-color: rgba(217,119,6,.12); background: rgba(217,119,6,.12); } .fv-duty-summary-card--pending::after{ background: rgba(217,119,6,.28); } .fv-duty-summary-card--completed .fv-duty-summary-icon, .fv-duty-summary-card--completed::after{ color: #059669; background-color: rgba(5,150,105,.12); background: rgba(5,150,105,.12); } .fv-duty-summary-card--completed::after{ background: rgba(5,150,105,.28); } .fv-duty-summary-card--cancelled .fv-duty-summary-icon, .fv-duty-summary-card--cancelled::after{ color: #dc2626; background-color: rgba(220,38,38,.1); background: rgba(220,38,38,.1); } .fv-duty-summary-card--cancelled::after{ background: rgba(220,38,38,.28); } .fv-duty-filter-card, .fv-duty-output-card{ position: relative; overflow: hidden; background: radial-gradient(280px 140px at 100% 0%, rgba(15,118,110,.05), transparent 72%), radial-gradient(220px 110px at 0% 100%, rgba(217,119,6,.05), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,250,246,.94)); } .fv-duty-calendar-card, .fv-duty-calendar-details{ padding: 1rem; border-radius: 22px; border: 1px solid rgba(148,163,184,.16); background: radial-gradient(200px 90px at 100% 0%, rgba(255,255,255,.24), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.9), rgba(250,248,244,.92)); box-shadow: 0 16px 28px rgba(15,23,42,.06); } .fv-duty-calendar-head, .fv-duty-calendar-details-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; margin-bottom: .9rem; } .fv-duty-calendar-title{ font-size: 1.06rem; font-weight: 800; color: #14243a; } .fv-duty-calendar-sub, .fv-duty-calendar-details-count{ color: #66768b; font-size: .8rem; } .fv-duty-calendar-weekdays{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin-bottom: .4rem; } .fv-duty-calendar-weekdays span{ text-align: center; color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .fv-duty-calendar-grid{ display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .fv-duty-calendar-day{ display: flex; flex-direction: column; align-items: stretch; gap: .4rem; cursor: pointer; min-height: 132px; padding: .72rem; text-align: left; border-radius: 18px; border: 1px solid rgba(148,163,184,.16); background: radial-gradient(140px 70px at 100% 0%, rgba(255,255,255,.18), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,247,242,.9)); box-shadow: 0 10px 18px rgba(15,23,42,.04); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; } .fv-duty-calendar-day:hover{ transform: translateY(-1px); border-color: rgba(15,118,110,.22); box-shadow: 0 14px 22px rgba(15,23,42,.08); } .fv-duty-calendar-day.is-outside{ opacity: .46; } .fv-duty-calendar-day.is-today{ border-color: rgba(15,118,110,.28); box-shadow: inset 0 0 0 1px rgba(15,118,110,.12), 0 14px 24px rgba(15,23,42,.06); } .fv-duty-calendar-day.is-selected{ border-color: rgba(15,118,110,.34); background: radial-gradient(150px 80px at 100% 0%, rgba(255,255,255,.2), transparent 72%), linear-gradient(180deg, rgba(236,253,245,.96), rgba(248,250,252,.92)); } .fv-duty-calendar-daynum{ display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 12px; background: rgba(15,118,110,.08); color: #0f766e; font-size: .92rem; font-weight: 800; } .fv-duty-calendar-events{ display: flex; flex-direction: column; gap: 6px; min-height: 0; } .fv-duty-calendar-event, .fv-duty-calendar-more{ display: block; width: 100%; padding: .42rem .55rem; border-radius: 12px; border: 1px solid rgba(148,163,184,.16); background: rgba(255,255,255,.92); color: #1f2937; font-size: .73rem; font-weight: 700; line-height: 1.25; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fv-duty-calendar-event{ border-left: 3px solid var(--fv-shift-color, rgba(15,118,110,.5)); } .fv-duty-calendar-more{ color: #0f766e; background: rgba(15,118,110,.08); } .fv-duty-calendar-detail-list{ display: flex; flex-direction: column; gap: .9rem; } .fv-duty-calendar-table-head{ display: grid; grid-template-columns: 1.2fr .85fr .95fr .95fr 1fr .85fr 1.35fr 132px; gap: .75rem; align-items: center; padding: 0 .95rem; color: #64748b; font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .fv-duty-calendar-details-empty{ padding: 1rem; border-radius: 16px; background: rgba(15,23,42,.04); color: #66768b; font-size: .88rem; line-height: 1.55; } .fv-duty-calendar-details{ width: 100%; } .fv-duty-calendar-detail-card{ padding: .9rem .95rem; border-radius: 18px; border: 1px solid rgba(148,163,184,.18); background: radial-gradient(150px 70px at 100% 0%, rgba(255,255,255,.18), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,244,.92)); box-shadow: 0 12px 20px rgba(15,23,42,.05); } .fv-duty-calendar-detail-table{ display: grid; grid-template-columns: 1.2fr .85fr .95fr .95fr 1fr .85fr 1.35fr 132px; gap: .75rem; align-items: start; } .fv-duty-calendar-cell{ min-width: 0; } .fv-duty-calendar-cell-label{ display: none; margin-bottom: .22rem; color: #64748b; font-size: .66rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; } .fv-duty-calendar-cell strong{ display: block; color: #17263b; font-size: .88rem; font-weight: 700; line-height: 1.45; word-break: break-word; } .fv-duty-calendar-cell--shift strong{ font-weight: 800; } .fv-duty-calendar-cell--notes strong{ color: #546476; font-weight: 600; } .fv-duty-calendar-cell--actions .fv-actions{ display: inline-flex; flex-wrap: nowrap; gap: .4rem; width: auto; justify-content: flex-end; } .fv-duty-calendar-cell--actions{ min-width: 132px; justify-self: end; } .fv-dashboard-duty-card{ position: relative; overflow: hidden; background: radial-gradient(320px 160px at 100% 0%, rgba(15,118,110,.06), transparent 72%), radial-gradient(240px 120px at 0% 100%, rgba(217,119,6,.06), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,250,246,.94)); } .fv-dashboard-duty-calendar-shell{ padding: 1.05rem; } .fv-dashboard-duty-grid{ gap: 7px; } .fv-dashboard-duty-day{ min-height: 112px; padding: .68rem; } .fv-dashboard-duty-day.has-duty{ border-color: rgba(15,118,110,.18); box-shadow: 0 14px 22px rgba(15,23,42,.06); } .fv-dashboard-duty-day:disabled{ cursor: default; } .fv-dashboard-duty-markers{ display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: auto; } .fv-dashboard-duty-marker{ width: 14px; height: 14px; border-radius: 999px; background: var(--fv-shift-color, #0f766e); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fv-shift-color, #0f766e) 18%, transparent); } .fv-dashboard-duty-more{ color: #64748b; font-size: .72rem; font-weight: 800; } .fv-dashboard-duty-modal-list{ display: flex; flex-direction: column; gap: 1rem; } .fv-dashboard-duty-modal-card{ position: relative; overflow: hidden; border-radius: 22px; border: 1px solid rgba(148,163,184,.16); background: linear-gradient(90deg, var(--fv-shift-color, #0f766e) 0 10px, transparent 10px), linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,250,252,.92)); box-shadow: 0 18px 32px rgba(15,23,42,.08); } .fv-dashboard-duty-modal-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; padding: .95rem 1rem .72rem 1.25rem; } .fv-dashboard-duty-head-main{ min-width: 0; } .fv-dashboard-duty-head-side{ min-width: 0; text-align: right; } .fv-dashboard-duty-head-meta{ display: flex; align-items: flex-start; justify-content: flex-end; gap: .8rem; } .fv-dashboard-duty-head-meta-block{ min-width: 0; } .fv-dashboard-duty-head-label{ color: #64748b; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fv-dashboard-duty-head-location{ color: #556476; font-size: .82rem; font-weight: 700; line-height: 1.3; word-break: break-word; } .fv-dashboard-duty-head-status{ color: #64748b; font-size: .72rem; font-weight: 800; line-height: 1.2; } .fv-dashboard-duty-mobile-summary{ display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; padding: 0 .9rem .68rem 1.05rem; } .fv-dashboard-duty-mobile-item{ display: flex; flex-direction: column; gap: .15rem; min-width: 0; padding: .5rem .45rem; border-radius: 14px; background: rgba(15,23,42,.04); text-align: center; } .fv-dashboard-duty-mobile-item span{ color: #64748b; font-size: .64rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; line-height: 1.1; } .fv-dashboard-duty-mobile-item strong{ color: #10253d; font-size: .78rem; font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .fv-dashboard-duty-mobile-item--shift strong{ color: #1d4e89; } .fv-dashboard-duty-modal-top{ display: none; } .fv-dashboard-duty-time-card{ display: flex; flex-direction: column; gap: .18rem; padding: .65rem .75rem; border-radius: 16px; border: 1px solid rgba(148,163,184,.16); background: rgba(255,255,255,.74); } .fv-dashboard-duty-time-label{ color: #64748b; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; } .fv-dashboard-duty-time-card strong{ color: #10253d; font-size: .92rem; font-weight: 800; line-height: 1.2; } .fv-dashboard-duty-time-card--end{ text-align: right; } .fv-dashboard-duty-shift-name{ color: #1d4e89; font-size: .96rem; font-weight: 800; line-height: 1.2; letter-spacing: .03em; } .fv-dashboard-duty-modal-body{ display: flex; flex-direction: column; gap: .6rem; padding: .75rem 1rem .82rem 1.25rem; } .fv-dashboard-duty-detail-grid{ display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr); gap: .6rem; } .fv-dashboard-duty-modal-key{ display: inline-flex; align-items: center; gap: .45rem; color: #546476; font-size: .8rem; font-weight: 800; } .fv-dashboard-duty-detail-card{ display: flex; flex-direction: column; gap: .45rem; padding: .72rem .82rem; border-radius: 16px; background: rgba(15,23,42,.04); } .fv-dashboard-duty-detail-card--wide{ min-width: 0; grid-column: 1 / -1; } .fv-dashboard-duty-detail-value{ color: #10253d; font-size: .82rem; font-weight: 700; line-height: 1.35; } .fv-dashboard-duty-user-list{ display: flex; flex-wrap: wrap; gap: .4rem; } .fv-dashboard-duty-user-chip{ display: inline-flex; align-items: center; justify-content: center; padding: .28rem .6rem; border-radius: 999px; background: rgba(15,118,110,.08); color: #165a56; font-size: .8rem; font-weight: 700; line-height: 1.2; } .fv-dashboard-duty-status-wrap{ display: flex; justify-content: flex-end; } .fv-dashboard-duty-status-btn{ padding: 0; border: 0; background: transparent; text-decoration: none; font-size: .8rem; font-weight: 800; line-height: 1.2; } .fv-dashboard-duty-status-btn:hover{ opacity: .82; } .fv-dashboard-duty-modal-notes{ padding: .72rem .82rem; border-radius: 16px; background: rgba(15,23,42,.045); color: #556476; font-size: .8rem; line-height: 1.45; } .fv-duty-loading{ display: flex; align-items: center; justify-content: center; gap: .8rem; min-height: 200px; color: #4c6474; font-weight: 700; } .fv-duty-group{ padding: 1rem; border-radius: 24px; border: 1px solid rgba(148,163,184,.14); background: radial-gradient(240px 120px at 100% 0%, rgba(255,255,255,.24), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.86), rgba(250,248,244,.9)); box-shadow: 0 18px 34px rgba(15,23,42,.06); } .fv-duty-group + .fv-duty-group{ margin-top: 1rem; } .fv-duty-group-head{ display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .95rem; padding-bottom: .85rem; border-bottom: 1px solid rgba(148,163,184,.18); } .fv-duty-group-title{ font-size: 1rem; font-weight: 800; color: #132238; } .fv-duty-group-sub{ color: #66768b; font-size: .8rem; } .fv-duty-card-grid-wrap{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .fv-duty-card{ display: flex; flex-direction: column; gap: .9rem; padding: 1rem; min-width: 0; border-radius: 20px; border: 1px solid rgba(148,163,184,.18); background: radial-gradient(160px 80px at 100% 0%, rgba(255,255,255,.22), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.94), rgba(250,248,244,.92)); box-shadow: 0 16px 28px rgba(15,23,42,.06); } .fv-duty-card-head{ display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .fv-duty-card-grid{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } .fv-duty-card-grid span{ display: block; margin-bottom: .22rem; color: #64748b; font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; } .fv-duty-card-grid strong{ display: block; color: #17263b; font-size: .92rem; font-weight: 700; } .fv-duty-notes{ padding: .78rem .85rem; border-radius: 16px; background: rgba(15,23,42,.04); color: #546476; font-size: .84rem; line-height: 1.55; min-height: 74px; } .fv-duty-status-chip{ display: inline-flex; align-items: center; justify-content: center; padding: .4rem .72rem; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; border: 1px solid rgba(148,163,184,.2); } .fv-duty-status--planned{ border-color: rgba(37,99,235,.18); background: rgba(37,99,235,.1); color: #1d4ed8; } .fv-duty-status--pending{ border-color: rgba(217,119,6,.18); background: rgba(245,158,11,.12); color: #b45309; } .fv-duty-status--completed{ border-color: rgba(5,150,105,.18); background: rgba(16,185,129,.12); color: #047857; } .fv-duty-status--cancelled{ border-color: rgba(220,38,38,.16); background: rgba(248,113,113,.12); color: #b91c1c; } .fv-duty-audit{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; padding: .85rem; border-radius: 16px; background: rgba(15,23,42,.04); color: #516074; font-size: .84rem; } .fv-duty-modal .modal-content{ background: radial-gradient(260px 120px at 100% 0%, rgba(15,118,110,.05), transparent 72%), linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,250,246,.94)); } @media (max-width: 1199.98px){ .fv-duty-summary-grid{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .fv-duty-card-grid-wrap{ grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px){ .fv-duty-summary-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .fv-duty-summary-card{ padding: .82rem .82rem .78rem; border-radius: 18px; } .fv-duty-summary-card strong{ font-size: 1.18rem; } .fv-duty-summary-card span:last-child{ font-size: .68rem; } .fv-duty-summary-icon{ width: 36px; height: 36px; border-radius: 14px; font-size: .92rem; } .fv-duty-group{ padding: .82rem; border-radius: 18px; } .fv-duty-card-grid-wrap{ grid-template-columns: 1fr; gap: 10px; } .fv-duty-card{ padding: .85rem; border-radius: 18px; } .fv-duty-card-grid{ grid-template-columns: 1fr; gap: .5rem; } .fv-duty-card-head{ flex-direction: column; align-items: flex-start; } .fv-duty-audit{ grid-template-columns: 1fr; } .fv-duty-calendar-card, .fv-duty-calendar-details{ padding: .82rem; border-radius: 18px; } .fv-duty-calendar-grid{ gap: 2px; } .fv-duty-calendar-day{ min-height: auto; aspect-ratio: 1 / 1; padding: .36rem; border-radius: 10px; gap: .22rem; } .fv-duty-calendar-daynum{ width: 28px; height: 28px; border-radius: 10px; font-size: .82rem; } .fv-duty-calendar-events{ display: flex; flex-wrap: wrap; gap: 3px; margin-top: auto; } .fv-duty-calendar-event, .fv-duty-calendar-more{ width: 11px; min-width: 11px; height: 11px; padding: 0; border-radius: 4px; border: 1px solid rgba(255,255,255,.72); background: var(--fv-shift-color, rgba(15,118,110,.85)); font-size: 0; line-height: 0; color: transparent; overflow: hidden; text-indent: -9999px; white-space: nowrap; box-shadow: 0 2px 4px rgba(15,23,42,.08); } .fv-duty-calendar-more{ display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 20px; height: 11px; padding: 0 4px; border-radius: 999px; background: rgba(15,118,110,.12); border-color: rgba(15,118,110,.14); color: #0f766e; font-size: .5rem; line-height: 1; text-indent: 0; } .fv-duty-calendar-detail-grid{ grid-template-columns: 1fr; gap: .5rem; } .fv-duty-calendar-detail-head, .fv-duty-calendar-head, .fv-duty-calendar-details-head{ flex-direction: column; align-items: flex-start; } .fv-duty-calendar-table-head{ display: none; } .fv-duty-calendar-detail-card{ padding: .82rem; border-radius: 16px; } .fv-duty-calendar-detail-table{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem .75rem; } .fv-duty-calendar-cell-label{ display: block; } .fv-duty-calendar-cell--notes, .fv-duty-calendar-cell--actions{ grid-column: 1 / -1; } .fv-duty-calendar-cell--actions .fv-actions{ flex-wrap: wrap; justify-content: flex-start; } .fv-dashboard-duty-grid{ gap: 4px; } .fv-dashboard-duty-day{ min-height: auto; aspect-ratio: 1 / 1; padding: .5rem; border-radius: 16px; } .fv-dashboard-duty-markers{ gap: 4px; } .fv-dashboard-duty-marker{ width: 10px; height: 10px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--fv-shift-color, #0f766e) 18%, transparent); } .fv-dashboard-duty-more{ font-size: .66rem; } .fv-dashboard-duty-modal-card{ border-radius: 18px; background: linear-gradient(90deg, var(--fv-shift-color, #0f766e) 0 8px, transparent 8px), linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.94)); } .fv-dashboard-duty-mobile-summary{ gap: .28rem; padding: 0 .72rem .52rem .92rem; } .fv-dashboard-duty-mobile-item{ padding: .42rem .3rem; border-radius: 12px; } .fv-dashboard-duty-mobile-item span{ font-size: .56rem; } .fv-dashboard-duty-mobile-item strong{ font-size: .68rem; } .fv-dashboard-duty-modal-head{ display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .45rem; padding: .72rem .72rem .58rem .92rem; } .fv-dashboard-duty-shift-name{ font-size: .78rem; } .fv-dashboard-duty-head-side{ text-align: left; } .fv-dashboard-duty-head-meta{ justify-content: flex-start; gap: .55rem; } .fv-dashboard-duty-head-location{ font-size: .74rem; } .fv-dashboard-duty-head-status{ font-size: .68rem; } .fv-dashboard-duty-modal-top{ display: none; } .fv-dashboard-duty-time-card, .fv-dashboard-duty-time-card--end{ text-align: left; } .fv-dashboard-duty-time-card{ padding: .56rem .62rem; } .fv-dashboard-duty-time-card strong{ font-size: .78rem; } .fv-dashboard-duty-modal-body{ gap: .55rem; padding: .58rem .72rem .64rem .92rem; } .fv-dashboard-duty-detail-grid{ grid-template-columns: 1fr; } .fv-dashboard-duty-modal-key{ font-size: .7rem; } .fv-dashboard-duty-user-list, .fv-dashboard-duty-status-wrap{ justify-content: flex-start; } .fv-dashboard-duty-user-chip, .fv-dashboard-duty-status-btn{ font-size: .72rem; } .fv-dashboard-duty-detail-card{ padding: .6rem .65rem; border-radius: 14px; } .fv-dashboard-duty-detail-value{ font-size: .74rem; } .fv-dashboard-duty-modal-notes{ padding: .58rem .65rem; border-radius: 14px; font-size: .72rem; line-height: 1.45; } }