/* ==========================================================================
   Vivotecnia extranet — visual language matched to the branded transactional
   email template (FM/EMAIL/CommunicationChannelLink.html): system font,
   navy heading, teal #1a9a8a accent, soft elevated card.
   Bootstrap is the base; this layer applies the brand look.
   Spacing follows a 4px base grid (8px steps preferred): margins, paddings and
   gaps are multiples of 4. Field controls share one compact height (~36px).
   ========================================================================== */

:root {
    --vt-teal: #1a9a8a;
    --vt-teal-dark: #178577;
    --vt-teal-hover: #178577;
    --vt-orange: #E57C4A;
    --vt-bg: #f2f2f2;
    --vt-surface: #ffffff;
    --vt-card-border: #ececec;
    --vt-input-border: #d8d8d8;
    --vt-text: #333333;
    --vt-heading: #1a2332;
    --vt-muted: #6b7785;
    --vt-muted-soft: #8a95a3;
    --vt-ring: rgba(26, 154, 138, 0.18);
    --vt-radius-card: 12px;
    --vt-radius-ctrl: 8px;
    --vt-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

body {
    background: var(--vt-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    color: var(--vt-text);
}

/* ==========================================================================
   Auth (login) screen — full viewport, content sits in the top third
   (1 part above, 2 parts below), exactly like the form lock screen.
   ========================================================================== */
.vt-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 24px;
}
.vt-auth::before { content: ''; flex: 1; }
.vt-auth::after  { content: ''; flex: 2; }

.vt-auth__inner {
    width: 100%;
    max-width: 440px;
    margin: 0 auto;
    text-align: center;
}

/* Entrance: the login fades up from below ~1s after load (skipped on error,
   so the shake + red fields show immediately). */
.vt-anim-enter {
    opacity: 0;
    transform: translateY(24px);
    animation: vt-enter-up 0.6s ease-out 0.9s forwards;
}
@keyframes vt-enter-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.vt-auth__logo {
    height: 58px;
    width: auto;
    margin-bottom: 32px;
}

.vt-auth__card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-card-border);
    border-radius: var(--vt-radius-card);
    box-shadow: var(--vt-shadow);
    padding: 36px 32px;
    text-align: left;
}

.vt-auth__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--vt-heading);
    text-align: center;
    margin: 0 0 12px;
}

.vt-auth__subtitle {
    font-size: 15px;
    color: var(--vt-muted);
    line-height: 1.5;
    text-align: center;
    margin: 0 0 28px;
}

/* --- Form fields (override Bootstrap colours within the auth/app scope) --- */
.vt-auth .form-label,
.vt-app .form-label {
    font-weight: 600;
    font-size: 13px;
    color: #444;
    margin-bottom: 8px;
}

.vt-auth .form-control,
.vt-app .form-control {
    border: 1.5px solid var(--vt-input-border);
    border-radius: var(--vt-radius-ctrl);
    /* Compact height (~36px) used consistently across the whole extranet. */
    padding: 6px 12px;
    line-height: 1.4;
    font-size: 15px;
    color: var(--vt-text);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

.vt-auth .form-control:focus,
.vt-app .form-control:focus {
    outline: none;
    border-color: var(--vt-teal);
    box-shadow: 0 0 0 3px var(--vt-ring);
}

/* --- Remember me --- */
.vt-remember {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 13px;
    color: var(--vt-muted);
    cursor: pointer;
    user-select: none;
    margin: 0 0 16px;
}
.vt-remember input {
    width: 16px;
    height: 16px;
    accent-color: var(--vt-teal);
    cursor: pointer;
}

/* --- Post-action flash + secondary links --- */
.vt-auth__flash {
    margin: 0 0 16px;
    padding: 8px 12px;
    border-radius: 8px;
    background: #e6f4ee;
    color: #1f7a5a;
    font-size: 13px;
    line-height: 1.45;
}
.vt-auth__link {
    display: inline-block;
    margin-top: .25rem;
    font-size: 13px;
    color: var(--vt-teal, #0f766e);
    text-decoration: none;
}
.vt-auth__link:hover { text-decoration: underline; }

/* --- Buttons (mirror the form's .btn-confirm / cancel) --- */
.vt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 13px;
    border: 2px solid transparent;
    border-radius: 6px;
    padding: 8px 24px;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.vt-btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vt-ring);
}

.vt-btn:disabled,
.vt-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.vt-btn--primary {
    width: 100%;
    background: var(--vt-teal);
    color: #fff;
    border-color: var(--vt-teal);
}
.vt-btn--primary:hover {
    background: var(--vt-teal-hover);
    border-color: var(--vt-teal-hover);
    color: #fff;
}

.vt-btn--ghost {
    background: #f0f0f0;
    color: #555;
    border-color: #ddd;
}
.vt-btn--ghost:hover {
    background: #e0e0e0;
    color: #333;
}

/* --- Field-level error: red inputs (like the form's OTP .is-error) --- */
.vt-auth .form-control.is-error {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.15);
}
.vt-auth .form-control.is-error:focus {
    border-color: #c0392b;
    box-shadow: 0 0 0 3px rgba(192, 57, 43, 0.28);
}

/* Inline message above the button. The slot is ALWAYS rendered with a reserved
   height so showing/hiding the error never shifts the layout. */
.vt-field-error {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 20px;
    color: #c0392b;
    font-size: 13px;
    line-height: 1.4;
    margin: 0 0 12px;
}
.vt-field-error svg {
    flex: 0 0 auto;
}
/* Fade in only when it actually carries a message. */
.vt-field-error:not(.vt-field-error--empty) {
    opacity: 0;
    animation: vt-error-in 280ms ease forwards;
}
/* Empty slot: invisible but still occupies the reserved space. */
.vt-field-error--empty {
    visibility: hidden;
}
@keyframes vt-error-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* One-off shake to draw attention to the card when a submit fails */
.vt-auth__card--error {
    animation: vt-shake 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}
@keyframes vt-shake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-4px); }
    40%, 60% { transform: translateX(4px); }
}

/* ==========================================================================
   App shell (authenticated pages)
   ========================================================================== */
.vt-topbar {
    background: var(--vt-surface);
    border-bottom: 1px solid var(--vt-card-border);
}

.vt-topbar__inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Hamburger: only rendered <768px (Bootstrap d-md-none) — opens #vtSidebar. */
.vt-topbar__nav-toggle {
    flex: 0 0 auto;
    background: none;
    border: 0;
    padding: 4px 8px;
    font-size: 22px;
    line-height: 1;
    color: var(--vt-heading);
    cursor: pointer;
    border-radius: var(--vt-radius-ctrl);
}
.vt-topbar__nav-toggle:hover { background: #f0f0f0; }
.vt-topbar__nav-toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vt-ring);
}

.vt-topbar__logo {
    height: 40px;
    width: auto;
}

/* --- Topbar right cluster: company block + avatar + sign out --- */
/* margin-left:auto pushes the cluster to the far edge (replaces the old
   justify-content:space-between, which mis-centred the logo once the mobile
   toggle added a third child). */
.vt-topbar__right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 16px;
}

/* User avatar (initials) — links to My profile */
.vt-topbar__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vt-teal);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
    text-decoration: none;
    transition: background 0.2s;
}
.vt-topbar__avatar:hover { background: var(--vt-teal-hover); color: #fff; }
.vt-topbar__avatar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vt-ring);
}

.vt-company {
    position: relative;
    /* Fill the topbar row height so the dropdown toggle can stretch to match
       the Sign out button; align-items keeps the single-company name centered. */
    align-self: stretch;
    display: flex;
    align-items: center;
}

/* Single company: just the name, no affordance. */
.vt-company--single .vt-company__name {
    font-weight: 600;
    color: var(--vt-heading);
    font-size: 14px;
}

/* Switchable company: stacked text (name + "Change company") on the left,
   caret on the right. align-self: stretch makes it match the Sign out height;
   align-items: center vertically centres the caret against the text block. */
.vt-company__toggle {
    display: flex;
    flex-direction: row;
    align-items: center;
    align-self: stretch;
    gap: 8px;
    background: none;
    border: none;
    /* Vertical stays 0 so align-self: stretch keeps the height equal to the Sign
       out button; horizontal kept tight so the avatar sits close to the name. */
    padding: 0 12px;
    cursor: pointer;
    border-radius: var(--vt-radius-ctrl);
}
.vt-company__toggle:hover { background: #f5f5f5; }
.vt-company__toggle:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--vt-ring);
}
/* Name + "Change company" right-aligned together. */
.vt-company__text {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.vt-company__name {
    font-weight: 600;
    color: var(--vt-heading);
    font-size: 14px;
    line-height: 1.2;
}
.vt-company__caret {
    color: var(--vt-muted);
    font-size: 18px;
    line-height: 1;
}
.vt-company__change {
    font-size: 11px;
    color: var(--vt-teal);
    line-height: 1.2;
}

.vt-company__menu { font-size: 14px; }
.vt-company__item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.vt-company__check { width: 12px; color: var(--vt-teal); }
.vt-company__item.is-active { font-weight: 600; }

.vt-app__main {
    max-width: 1100px;
    margin: 0 auto;
    padding: 40px 24px;
}

.vt-page-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--vt-teal-dark);
    margin: 0 0 8px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--vt-teal);
}

.vt-muted {
    color: var(--vt-muted);
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
    /* Without animations these must still be visible (not stuck at opacity:0). */
    .vt-field-error,
    .vt-anim-enter {
        opacity: 1 !important;
        transform: none !important;
    }
}

@media (max-width: 480px) {
    .vt-auth__card { padding: 28px 18px; }
    /* Keep inputs at 16px on phones so iOS Safari doesn't auto-zoom on focus. */
    .vt-auth .form-control,
    .vt-app .form-control { font-size: 16px; }
}

/* ==========================================================================
   App shell: sidebar + main
   ========================================================================== */
/* Full-height column so the sidebar (and its right divider) reaches the bottom,
   leaving only the footer. */
.vt-app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}
.vt-shell {
    flex: 1;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    gap: 24px;
    padding: 0 24px;
}
/* Inside the shell, main is a flex child — neutralize the standalone caps. */
.vt-shell .vt-app__main { padding: 40px 0; flex: 1; max-width: none; margin: 0; }

/* The nav links list. Forced to a vertical stack on every size (overrides the
   row that Bootstrap's offcanvas-md applies to .offcanvas-body >=768px). */
.vt-sidebar__body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Slide-in panel width on phones (only applies <768px). */
.vt-sidebar.offcanvas-md { --bs-offcanvas-width: 260px; }

/* Desktop: render as a fixed-width static rail with a divider. Below 768px the
   element is a Bootstrap offcanvas, so none of this should constrain it. */
@media (min-width: 768px) {
    .vt-sidebar {
        width: 180px;
        flex: 0 0 180px;
        border-right: 1px solid #d8d7d7;
    }
    .vt-sidebar .offcanvas-body { padding: 24px 16px 24px 0; }
}
.vt-sidebar__link {
    display: block;
    padding: 8px 12px;
    border-right: 2px solid transparent;
    border-bottom: 2px solid transparent;
    color: var(--vt-text);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vt-sidebar__link:hover { background: #f0f0f0; }
.vt-sidebar__link.is-active {
    background: #e6f4ee;
    color: var(--vt-teal-dark);
    border-right-color: var(--vt-teal);
    border-bottom-color: var(--vt-teal);
}

/* Mobile-only offcanvas footer: company switcher + Sign out (the topbar drops
   them <768px). Hidden >=768px via d-md-none, so it never touches the rail. */
.vt-sidebar__mobile {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #d8d7d7;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vt-sidebar__section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--vt-muted);
    padding: 0 12px 4px;
}
.vt-sidebar__company-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--vt-text);
    border-radius: var(--vt-radius-ctrl);
    cursor: pointer;
}
.vt-sidebar__company-item:hover { background: #f0f0f0; }
.vt-sidebar__company-item.is-active { font-weight: 700; color: var(--vt-teal-dark); }
.vt-sidebar__company-check { width: 12px; flex: 0 0 12px; color: var(--vt-teal); }
.vt-sidebar__company-current {
    padding: 0 12px 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--vt-heading);
}
.vt-sidebar__signout { width: 100%; margin-top: 8px; }

/* White sheet (shadowed card) — shared by My profile and the employees roster. */
.vt-card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-card-border);
    border-radius: var(--vt-radius-card);
    box-shadow: var(--vt-shadow);
    padding: 8px 24px 24px;
    margin-top: 8px;
}

/* --- Employees page --- */
.vt-count { font-size: 14px; color: var(--vt-muted); font-weight: 600; }
.vt-invite-title { font-size: 1rem; font-weight: 600; color: var(--vt-teal-dark); margin: 32px 0 8px; padding: 0; }
.vt-invite { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; max-width: 496px; padding: 0; }
.vt-invite-note { padding: 0; }
.vt-invite .form-control { flex: 1; }
.vt-invite .vt-btn { width: auto; flex: 0 0 auto; padding: 8px 16px; }

.vt-emp-list { list-style: none; padding: 0; margin: 16px 0 0; }
.vt-emp {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #d8d7d7;
}
.vt-emp__avatar {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vt-teal);
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    letter-spacing: .02em;
}
.vt-emp__id { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.vt-emp__name {
    font-weight: 700;
    color: var(--vt-heading);
    line-height: 1.3;
}
.vt-emp__email {
    color: var(--vt-muted);
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vt-emp__status {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid transparent;
    display: inline-block;
    min-width: 72px;
    text-align: center;
}
.vt-emp__status--active  { background: rgba(31, 122, 90, 0.10);  color: #1f7a5a; border-color: #1f7a5a; }
.vt-emp__status--pending { background: rgba(154, 91, 31, 0.10);  color: #9a5b1f; border-color: #9a5b1f; }
.vt-emp__status--expired { background: rgba(192, 57, 43, 0.10); color: #c0392b; border-color: #c0392b; }
.vt-emp__revoke { padding: 4px 12px; font-size: 12px; }

/* DEV-only email preview modal */
#vt-preview-error:empty { display: none; } /* no green flash box until JS sets an error */
.vt-preview { width: min(900px, 96vw); max-height: 92vh; overflow: auto; border: none; border-radius: 12px; padding: 24px; background: #fff8e1; }
.vt-preview::backdrop { background: rgba(0, 0, 0, 0.45); }
.vt-preview__title { margin: 0 0 16px; font-size: 18px; }
.vt-preview__frame { width: 100%; height: 70vh; border: 1px solid #e2e8f0; border-radius: 8px; background: #f2f2f2; }
.vt-preview__actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }

/* ==========================================================================
   My profile — identity header + grouped fieldsets inside a brand card.
   Spacing follows a 4px base grid (8px steps preferred): every margin,
   padding and gap below is a multiple of 4 — 4, 8, 12, 16, 24, 32 — so the
   vertical rhythm and the horizontal insets line up.
   ========================================================================== */
.vt-profile { max-width: none; }
.vt-profile__card {
    background: var(--vt-surface);
    border: 1px solid var(--vt-card-border);
    border-radius: var(--vt-radius-card);
    box-shadow: var(--vt-shadow);
    padding: 24px 24px 32px;
    margin-top: 8px;
}

/* --- Identity header band --- */
.vt-profile__header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding: 0 16px; /* align with the section content inset */
}
.vt-profile__avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vt-teal);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
}
/* No first name + surname -> washed-out "disabled" avatar, everywhere an avatar
   appears (employee row, topbar, My profile). Defined after all three base
   avatar rules so it overrides their teal fill regardless of source order. */
.vt-emp__avatar--muted,
.vt-topbar__avatar--muted,
.vt-profile__avatar--muted { background: #eceef1; color: #a6adb7; }
.vt-profile__id { display: flex; flex-direction: column; min-width: 0; }
.vt-profile__name {
    font-weight: 700;
    font-size: 18px;
    color: var(--vt-heading);
    line-height: 1.25;
}
.vt-profile__email {
    font-size: 14px;
    color: var(--vt-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Grouped sections --- */
.vt-profile__group {
    border: 0;
    margin: 0 0 24px; /* breathing room between sections */
    padding: 16px; /* interior padding on all sides; legend + content stay aligned */
    min-width: 0; /* let the grid shrink inside the fieldset */
}
.vt-profile__group:last-of-type { margin-bottom: 0; }
.vt-profile__legend {
    float: none;
    display: block;
    width: 100%;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--vt-teal-dark);
    margin: 0 0 8px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--vt-input-border);
}

.vt-profile__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 24px;
}
.vt-profile__field--wide { grid-column: 1 / -1; }

.vt-profile__field { margin: 0; } /* grid gap handles spacing */
.vt-profile__label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 13px;
    color: var(--vt-heading);
}
.vt-profile__req { color: var(--vt-orange); }
.vt-profile .form-control.is-error { border-color: var(--vt-orange); }

.vt-profile__actions {
    margin-top: 24px;
    padding: 0 16px; /* align with the section content inset */
    display: flex;
    justify-content: space-between; /* Change password (left) | Save changes (right) */
    align-items: center;
    gap: 12px;
}
.vt-profile__actions .vt-btn--primary { width: auto; padding: 8px 20px; }

/* Change-password modal */
.vt-pw-dialog {
    width: min(420px, 94vw);
    border: none;
    border-radius: var(--vt-radius-card);
    padding: 24px;
    background: var(--vt-surface);
    box-shadow: var(--vt-shadow);
    color: var(--vt-text);
}
.vt-pw-dialog::backdrop { background: rgba(0, 0, 0, 0.45); }
.vt-pw-dialog__title {
    margin: 0 0 16px;
    padding-bottom: 8px;
    font-size: 18px;
    font-weight: 700;
    color: var(--vt-teal-dark);
    border-bottom: 2px solid var(--vt-teal);
}
.vt-pw-field { margin-bottom: 16px; }
.vt-pw-actions {
    display: flex;
    gap: 8px;
    justify-content: space-between; /* Cancel left, primary right */
    margin-top: 24px;
}
.vt-pw-actions .vt-btn { width: auto; }

/* Save-confirmation: list of changed fields (was -> now) */
.vt-save-intro { margin: 0 0 12px; font-size: 14px; color: var(--vt-muted); }
.vt-save-list { list-style: none; margin: 0 0 8px; padding: 0; }
.vt-save-list li {
    padding: 8px 0;
    border-bottom: 1px solid var(--vt-card-border);
    font-size: 14px;
    line-height: 1.5;
}
.vt-save-list li:last-child { border-bottom: none; }
.vt-save-list strong { display: block; color: var(--vt-heading); font-size: 12px; font-weight: 700; }
.vt-save-from { color: var(--vt-muted); text-decoration: line-through; }
.vt-save-to { color: var(--vt-heading); font-weight: 600; }

.vt-profile__warning {
    max-width: none;
    margin-top: 16px;
    padding: 12px 16px;
    border-left: 4px solid var(--vt-orange);
    border-radius: var(--vt-radius-ctrl);
    background: #fff7f2;
    color: var(--vt-heading);
}

@media (max-width: 560px) {
    .vt-profile__card { padding: 24px 16px; }
    .vt-profile__grid { grid-template-columns: 1fr; }
}

/* Phones: the topbar is just [hamburger · logo · avatar] (company + Sign out
   move into the offcanvas), so it always fits — only the spacing is tightened. */
@media (max-width: 575.98px) {
    .vt-topbar__inner { padding: 8px 16px; gap: 8px; }
    .vt-topbar__right { gap: 8px; }
}