/* Visual style ported from Vallox_Panorama's wwwroot/app.css - kept deliberately framework-free
   (no Bootstrap/MudBlazor), matching that project. Only the pieces this app actually uses are
   ported; Panorama's roadmap/dashboard-specific rules were left behind. */

html, body {
    height: 100%;
    margin: 0;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* ---------- Layout / topbar ---------- */

.layout-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 56px;
    padding: 0 16px;
    background: #0A5CA8;
    color: #fff;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 28px;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
    padding-right: 16px;
}

.app-version {
    font-size: 15px;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}

.topbar-user {
    color: rgba(255, 255, 255, 0.92);
    font-size: 14px;
    white-space: nowrap;
}

.main-content {
    flex: 1;
    padding: 16px 16px 80px;
    display: flex;
    flex-direction: column;
    overflow: auto;
}

/* ---------- Brand / logo (Vallox sun icon + wordmark) ---------- */

.brand {
    display: flex;
    align-items: center;
    line-height: 0;
}

.vp-ink { fill: var(--vp-ink, #0A5CA8); }
.vp-line { stroke: var(--vp-ink, #0A5CA8); }
.vp-wordmark { font-family: Arial, Helvetica, sans-serif; }

/* The logo's "gaps" are small rectangles cut into the solid triangle using the same color as
   whatever is actually behind the logo (page: white; topbar: its own #0A5CA8) - --vp-bg is set
   inline per-context (see MainLayout.razor's dark topbar override). */
.vp-hole { fill: var(--vp-bg, #ffffff); }

/* The wordmark PNG is a solid dark-blue image on a transparent background - brightness(0) turns
   every opaque pixel black regardless of color, invert(1) flips black to white, so the same file
   works both on light backgrounds (unfiltered) and on the dark topbar (this class). */
.vp-logo-invert { filter: brightness(0) invert(1); }

@keyframes vp-spin { to { transform: rotate(360deg); } }

.vp-rays {
    animation: vp-spin 22s linear infinite;
    transform-box: view-box;
    transform-origin: 62px 66px;
}

@media (prefers-reduced-motion: reduce) {
    .vp-rays { animation: none; }
}

/* ---------- Top navigation ---------- */

.topnav {
    display: flex;
    gap: 12px;
}

.topnav-link {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.topnav-link:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.topnav-link.active {
    background: #083B6D;
    color: #ffffff;
}

/* ---------- Language toggle (FI / EN / SV) ---------- */

.lang-toggle {
    display: flex;
    gap: 2px;
}

.lang-btn {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.45);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78em;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.5px;
    transition: background 0.15s, color 0.15s;
}

.lang-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
}

.lang-btn.lang-active {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.8);
}

.app-footer {
    flex-shrink: 0;
    padding: 10px 16px;
    text-align: center;
    font-size: 13px;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
}

.app-footer a {
    color: #6b7280;
    text-decoration: underline;
}

.app-footer a:hover {
    color: #0A5CA8;
}

.app-footer .footer-sep {
    margin: 0 8px;
    color: #d1d5db;
}

/* ---------- Legal pages (Terms of Service / Privacy Policy) ---------- */

.legal-page {
    max-width: 760px;
}

.legal-page h1 {
    margin-bottom: 4px;
}

.legal-page .legal-effective-date {
    color: #6b7280;
    font-size: 14px;
    margin-top: 0;
    margin-bottom: 24px;
}

.legal-page h2 {
    font-size: 1.1rem;
    margin-top: 28px;
}

.legal-page h3 {
    font-size: 1rem;
    margin-top: 20px;
}

.legal-page p, .legal-page li {
    line-height: 1.6;
}

/* ---------- Cards / forms / buttons ---------- */

.card {
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px;
    background: #fff;
    max-width: 700px;
}

.login-page {
    max-width: 480px;
    margin: 48px 0 48px 5%;
    padding: 0 16px;
    text-align: left;
}

.login-logo {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 16px;
}

.login-card {
    max-width: 360px;
    margin: 24px 0 0;
    padding: 16px 20px;
    background-color: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    text-align: left;
}

.login-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.login-field input {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

/* ---------- Configurator page (/konfigurointi) ---------- */

.config-section {
    border: 2px solid #cbd5e1;
    border-radius: 10px;
    padding: 8px 20px 16px;
    margin-bottom: 20px;
    background: #fff;
    max-width: 900px;
}

/* Opt back into a wider (but still bounded) width for sections whose content is a multi-column table
   (e.g. the apartment assignment grid) rather than a simple field form. */
.config-section-wide {
    max-width: 1600px;
}

.config-section > legend {
    padding: 0 8px;
    font-weight: 700;
    font-size: 1.05rem;
    color: #0A5CA8;
}

.field-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    max-width: 260px;
}

.field-row-wide {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
    max-width: 700px;
}

/* Fills whatever width its container (e.g. a .config-section) has left - used for the Kone select,
   whose option text (label + item code + description) is far longer than a typical field. */
.field-row-full {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 12px;
}

.field-row input,
.field-row select,
.field-row-wide input,
.field-row-wide select,
.field-row-full input,
.field-row-full select {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    width: 100%;
    box-sizing: border-box;
}

.login-submit {
    width: 100%;
}

.login-error {
    color: #b91c1c;
    font-weight: 600;
}

.form {
    display: grid;
    gap: 8px;
}

.form input,
.form select {
    padding: 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
}

.btn {
    padding: 8px 12px;
    background: #0A5CA8;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.btn:hover {
    background: #083B6D;
}

.btn-secondary {
    padding: 8px 12px;
    background: #e5e7eb;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.btn-outline {
    padding: 8px 12px;
    background: transparent;
    color: #003876;
    border: 1.5px solid #003876;
    border-radius: 8px;
    cursor: pointer;
    font-size: inherit;
}

.btn-outline:hover {
    background: #eff6ff;
}

.btn-danger {
    padding: 8px 12px;
    background: #b91c1c;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.btn:disabled, .btn-secondary:disabled, .btn-outline:disabled, .btn-danger:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* .main-content is a column flexbox (see below), which stretches every direct child - including
   buttons - to its full width by default. Buttons should size to their own content instead. */
.btn, .btn-secondary, .btn-outline, .btn-danger {
    align-self: flex-start;
}

/* Without this, .btn-outline (the only variant with a border) renders ~3px taller than the others
   (same padding + its 1.5px border added on top) - border-box makes the border count INSIDE the
   stated padding instead, and the font/line-height reset keeps <a class="btn"> and <button class="btn">
   identical in height too (an <a> inherits the page's font; a <button> doesn't by default). */
.btn, .btn-secondary, .btn-outline, .btn-danger {
    box-sizing: border-box;
    font: inherit;
    line-height: 1.25;
    display: inline-block;
}

.table {
    border-collapse: collapse;
    width: 100%;
}

.table th, .table td {
    text-align: left;
    padding: 6px 12px 6px 0;
    border-bottom: 1px solid #e5e7eb;
}

.table th {
    color: #334155;
    font-weight: 600;
}

/* Buttons inside a table cell (e.g. Layoutit's "Muokkaa") use the same .btn padding as everywhere
   else by default, which is taller than a table row needs - shrink it so consecutive rows keep a
   visible gap instead of their buttons nearly touching. */
.table .btn, .table .btn-outline, .table .btn-secondary, .table .btn-danger {
    padding: 4px 10px;
    display: inline-block;
}

.table select {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-sizing: border-box;
    background-color: #fff;
}

.logout-link {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.85);
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

.logout-link:hover {
    color: #fff;
}

.error {
    color: #b91c1c;
    font-weight: 600;
}

.hint {
    color: #475569;
}

/* ---------- Framework error UI (kept from the default template) ---------- */

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}