/* ============================================================
   Logistics.One Landing Page — content-only styles
   Lives inside the WIS MainLayout chrome. Only adds:
     1. Section accent bar (tinted strip next to a project title)
     2. Widget-grid (responsive 12-col friendly grid)
     3. Widget-body internals (line/bar/donut/kpi/list renderers)
     4. Suggested-apps card tint
   No topbar, no drawer, no theme override — WIS owns those.
   ============================================================ */

/* ─── Section accent bar (4px tinted strip) ─── */
.lp-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    min-height: 32px;
}

/* Reset margins on direct children so vertical centering is consistent
   regardless of whether the title is an <h3>, <h4> or a FluentLabel. */
.lp-section-head > * {
    margin: 0;
    line-height: 1;
}

.lp-section-head__title {
    font: 700 16px/1 inherit;
    color: var(--neutral-foreground-rest, currentColor);
    white-space: nowrap;
}

.lp-section-bar {
    width: 4px;
    height: 18px;
    border-radius: 1px;
    background: var(--swatch, var(--accent-fill-rest, #cc0000));
    flex-shrink: 0;
    align-self: center;
}

.lp-section-sep {
    flex: 1;
    height: 1px;
    background: var(--neutral-stroke-divider-rest, #ededed);
    min-width: 32px;
    align-self: center;
}

.lp-section-count {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.72;
    white-space: nowrap;
    align-self: center;
}

/* ─── Widget grid (3-col / 2-col / 1-col) ─── */
.lp-widget-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.lp-widget-grid > .lp-span-2 {
    grid-column: span 2;
}

@media (max-width: 1200px) {
    .lp-widget-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
    .lp-widget-grid { grid-template-columns: 1fr; }
    .lp-widget-grid > .lp-span-2 { grid-column: span 1; }
}

/* ─── Widget card chrome — small bits FluentCard does not give us ─── */
.lp-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.lp-card-head .lp-card-icon {
    color: var(--swatch, var(--accent-fill-rest));
    flex-shrink: 0;
    font-size: 18px;
}

.lp-card-head .lp-card-title {
    flex: 1;
    min-width: 0;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-card-head .lp-card-tag {
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.7;
    padding: 2px 6px;
    border-radius: 1000px;
    background: var(--neutral-fill-secondary-rest, #ededed);
}

.lp-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    opacity: 0.72;
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-divider-rest, #ededed);
}

/* ─── Suggested-app card (clickable button, tinted left border) ─── */
.lp-suggested-card {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px;
    background: var(--neutral-layer-1, var(--neutral-layer-floating, transparent));
    border: 1px solid var(--neutral-stroke-rest, #dedede);
    border-left: 3px solid var(--swatch, var(--accent-fill-rest));
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: box-shadow 120ms, border-color 120ms;
}

.lp-suggested-card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.12);
}

.lp-suggested-card:focus-visible {
    outline: 2px solid var(--focus-stroke-outer, #000);
    outline-offset: 2px;
}

.lp-suggested-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest, #ededed);
    color: var(--swatch, var(--accent-fill-rest));
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.lp-suggested-card__icon .material-symbols-rounded {
    font-size: 24px;
}

.lp-suggested-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow: hidden;
}

.lp-suggested-card__title {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.lp-suggested-card__name {
    font-weight: 700;
    font-size: 14px;
    line-height: 1.2;
    color: var(--neutral-foreground-rest, currentColor);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

.lp-suggested-card__legacy {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 1000px;
    background: var(--neutral-fill-secondary-rest, #ededed);
    color: var(--neutral-foreground-hint, var(--neutral-foreground-rest));
    line-height: 1;
}

.lp-suggested-card__tagline {
    font-size: 12px;
    line-height: 1.4;
    opacity: 0.72;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.lp-suggested-card__open {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--swatch, var(--accent-fill-rest));
    flex-shrink: 0;
    white-space: nowrap;
}

/* ─── WIDGET BODIES (renderers) ─────────────────────────────────── */

/* Horizontal bar rows */
.lp-hbar { display: flex; flex-direction: column; gap: 6px; padding: 4px 0; }
.lp-hbar__row { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.lp-hbar__lbl { width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.72; }
.lp-hbar__track { flex: 1; height: 10px; background: var(--neutral-fill-secondary-rest, #ededed); border-radius: 2px; }
.lp-hbar__fill { height: 100%; border-radius: 2px; }
.lp-hbar__val { width: 32px; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Vertical bar columns */
.lp-vbar { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding: 8px 0 28px 0; position: relative; }
.lp-vbar__col { flex: 1; display: flex; flex-direction: column; align-items: center; height: 100%; min-width: 0; }
.lp-vbar__col-fill-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; }
.lp-vbar__col-fill { width: 100%; border-radius: 2px 2px 0 0; }
.lp-vbar__col-lbl {
    position: absolute; bottom: 4px;
    font-size: 9px; opacity: 0.72;
    transform: rotate(-30deg); transform-origin: top left;
    white-space: nowrap;
}

/* List rows */
.lp-list { display: flex; flex-direction: column; max-height: 220px; overflow: auto; }
.lp-list__row {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 4px;
    border-bottom: 1px solid var(--neutral-stroke-divider-rest, #ededed);
    font-size: 12.5px;
}
.lp-list__row:last-child { border-bottom: 0; }
.lp-list__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.lp-list__id { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 12px; min-width: 70px; }
.lp-list__label { flex: 1; opacity: 0.78; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* KPI */
.lp-kpi { padding: 8px 0; display: flex; flex-direction: column; gap: 8px; }
.lp-kpi__value { font-size: 28px; font-weight: 700; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; line-height: 1; }
.lp-kpi__meta { display: flex; align-items: center; gap: 8px; font-size: 11px; opacity: 0.72; }
.lp-kpi__delta-pos { color: var(--accent-fill-rest, #008448); font-weight: 700; }
.lp-kpi__delta-neg { color: var(--status-error, #90112c); font-weight: 700; }

/* Sizing helper for material-symbols-rounded inside the dashboard */
.lp-icon { font-size: 18px; vertical-align: middle; line-height: 1; }
.lp-icon--lg { font-size: 24px; }
.lp-icon--sm { font-size: 14px; }

/* ─── Focus-ring hygiene ─────────────────────────────────────────────
   Keyboard users still get a visible focus ring (via :focus-visible).
   Mouse clicks (which set :focus but not :focus-visible) and the
   FluentDialog auto-focusing its header on open should not leave a
   stray outline behind.
*/
.wis-page-stack button:focus:not(:focus-visible),
.wis-page-stack fluent-button:focus:not(:focus-visible),
.wis-page-stack [tabindex]:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* FluentButton paints its focus ring inside the Shadow DOM via the
   ::part(control) inner element. Pierce the shadow root to suppress it
   for non-keyboard focus. */
.wis-page-stack fluent-button::part(control):focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

/* Some FluentUI builds also use these design tokens for the focus stroke.
   Force them transparent on the section-head Accent buttons so a sticky
   :focus that survives blur() still cannot draw a ring. */
.lp-section-head fluent-button {
    --neutral-stroke-focus: transparent;
    --focus-stroke-outer: transparent;
    --focus-stroke-inner: transparent;
}

/* Keyboard users still see a ring courtesy of :focus-visible. */
.lp-section-head fluent-button:focus-visible {
    --focus-stroke-outer: var(--neutral-foreground-rest);
}

/* Suppress the focus ring the FluentDialog draws around its header /
   title element when the panel opens. The dialog title isn't an
   interactive element — focus belongs on the panel's first widget tile,
   which still gets a ring on keyboard navigation. */
fluent-dialog:focus,
fluent-dialog [slot="title"]:focus,
fluent-dialog [role="heading"]:focus,
fluent-dialog *:focus:not(:focus-visible) {
    outline: none !important;
}

/* ─── App switcher in WIS topbar ─── */
.lp-appswitcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.lp-appswitcher__trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 12px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    color: var(--neutral-foreground-rest, currentColor);
    font: 700 13px/1 inherit;
    white-space: nowrap;
}

.lp-appswitcher__trigger:hover {
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.06));
}

.lp-appswitcher__trigger:focus-visible {
    outline: 2px solid var(--focus-stroke-outer, #000);
    outline-offset: 2px;
}

.lp-appswitcher__icon {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    display: inline-grid;
    place-items: center;
    color: #fff;
    flex-shrink: 0;
    background: var(--neutral-fill-strong-rest, #4d4d4d);
}

.lp-appswitcher__icon .material-symbols-rounded {
    font-size: 14px;
    line-height: 1;
}

.lp-appswitcher__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
    font-weight: 700;
}

.lp-appswitcher__backdrop {
    position: fixed;
    inset: 0;
    z-index: 100;
    background: transparent;
}

.lp-appswitcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 101;
    min-width: 340px;
    max-width: 420px;
    background: var(--neutral-layer-floating, var(--neutral-layer-1, #fff));
    border: 1px solid var(--neutral-stroke-rest, #dedede);
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.16);
    padding: 4px;
    display: flex;
    flex-direction: column;
}

.lp-appswitcher__item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    min-height: 48px;
}

.lp-appswitcher__item:hover {
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.06));
}

.lp-appswitcher__item-icon {
    width: 22px;
    height: 22px;
    border-radius: 3px;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.lp-appswitcher__item-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lp-appswitcher__item-text strong {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
    color: var(--neutral-foreground-rest, currentColor);
    display: flex;
    align-items: center;
}

.lp-appswitcher__item-text small {
    font-size: 11px;
    line-height: 1.3;
    opacity: 0.7;
}

.lp-appswitcher__divider {
    height: 1px;
    background: var(--neutral-stroke-divider-rest, #ededed);
    margin: 4px 8px;
}

/* ─── Drawer section title (Workspace / App modules / Help) ─── */
.lp-drawer-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 16px 6px;
    font: 700 10px/1.3 var(--font-base, inherit);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint, currentColor);
    opacity: 0.7;
    pointer-events: none;
    user-select: none;
    min-width: 0;
}

/* Long titles like "DEVICE MANAGEMENT MODULES" exceed the narrow drawer width
   and used to get clipped on the right edge. Letting the text span wrap onto
   a 2nd line keeps the font at the original 10px (accessibility) while
   gracefully handling future apps with long names. Short titles
   ("WORKSPACE", "HELP", "MYPARTS MODULES") still render on one line because
   they fit naturally. */
.lp-drawer-section-title > span:not(.lp-drawer-section-title__bar) {
    min-width: 0;
    white-space: normal;
    word-break: break-word;
    overflow-wrap: anywhere;
}

.lp-drawer-section-title__bar {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    flex-shrink: 0;
}

/* ─── Add-widget row inside the slide-in panel ─── */
.lp-add-row {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid var(--neutral-stroke-rest, #dedede);
    border-radius: 4px;
    cursor: pointer;
    text-align: left;
    color: inherit;
    font: inherit;
    transition: border-color 120ms, background-color 120ms;
}

.lp-add-row:hover {
    border-color: var(--swatch, var(--accent-fill-rest));
    background: var(--neutral-fill-stealth-hover, rgba(0, 0, 0, 0.04));
}

.lp-add-row--added {
    border-color: var(--swatch, var(--accent-fill-rest));
    background: var(--neutral-fill-stealth-rest, rgba(0, 0, 0, 0.02));
}

.lp-add-row__icon {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    background: var(--neutral-fill-secondary-rest, #ededed);
    color: var(--swatch, var(--accent-fill-rest));
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
}

.lp-add-row__text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.lp-add-row__text strong {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

.lp-add-row__text small {
    font-size: 11px;
    line-height: 1.4;
    opacity: 0.72;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lp-add-row__action {
    flex-shrink: 0;
}