@font-face { font-family: Roboto; src: url('/fonts/Roboto-400.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url('/fonts/Roboto-500.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url('/fonts/Roboto-600.ttf') format('truetype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: Roboto; src: url('/fonts/Roboto-700.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
    --sibek-navy: #15173a;
    --sibek-navy-soft: #292e73;
    --sibek-green: #04824c;
    --sibek-green-dark: #03663c;
    --ink: #1c2430;
    --muted: #647182;
    --line: #dce2e8;
    --surface: #ffffff;
    --canvas: #f2f4f7;
    --danger: #a32626;
    --shadow: 0 12px 34px rgba(21, 23, 58, .1);
    font-family: Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--canvas);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--canvas); }
body { min-height: 100vh; margin: 0; display: flex; flex-direction: column; background: var(--canvas); color: var(--ink); }
a { color: var(--sibek-navy-soft); text-underline-offset: 3px; }
a:hover { color: var(--sibek-green-dark); }
h1, h2, h3 { color: var(--sibek-navy); line-height: 1.15; }
h1 { letter-spacing: -.025em; }

.skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 100; background: #fff; color: var(--sibek-navy); padding: .65rem 1rem; border-radius: 0 0 6px 6px; }
.skip-link:focus { top: 0; }

.site-header {
    min-height: 78px;
    padding: .75rem clamp(1rem, 3vw, 2.5rem);
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    color: #fff;
    background: var(--sibek-navy);
    border-bottom: 3px solid var(--sibek-green);
    box-shadow: 0 4px 18px rgba(10, 12, 35, .18);
    position: relative;
    z-index: 10;
}
.brand { display: flex; align-items: center; gap: .9rem; color: #fff; text-decoration: none; min-width: max-content; }
.brand:hover { color: #fff; }
.brand img { width: 118px; height: auto; filter: brightness(0) invert(1); }
.brand-divider { width: 1px; height: 34px; background: rgba(255,255,255,.32); }
.brand-copy { display: grid; line-height: 1.15; }
.brand-copy strong { font-size: 1.08rem; }
.brand-copy small { margin-top: .25rem; color: rgba(255,255,255,.65); font-size: .72rem; }

.site-nav { margin-left: auto; display: flex; align-self: stretch; align-items: center; gap: .25rem; }
.site-nav a { color: rgba(255,255,255,.78); text-decoration: none; padding: .65rem .75rem; border-radius: 5px; font-size: .92rem; font-weight: 500; }
.site-nav a:hover, .site-nav a:focus-visible { color: #fff; background: rgba(255,255,255,.1); }
.site-nav a.active { color: #fff; background: var(--sibek-navy-soft); box-shadow: inset 0 -2px 0 var(--sibek-green); }
.user-menu { display: flex; align-items: center; gap: .65rem; padding-left: 1rem; border-left: 1px solid rgba(255,255,255,.2); }
.user-chip { display: flex; align-items: center; gap: .55rem; color: #fff; text-decoration: none; }
.user-chip:hover { color: #fff; }
.user-chip > span:last-child { display: grid; line-height: 1.15; }
.user-chip strong { font-size: .83rem; max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-chip small { color: rgba(255,255,255,.62); font-size: .7rem; }
.user-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #fff; background: var(--sibek-green); font-weight: 700; }
.logout-link { color: rgba(255,255,255,.75); font-size: .8rem; white-space: nowrap; }
.logout-link:hover { color: #fff; }

.app-main { width: min(calc(100% - 2rem), 1600px); margin: 1.5rem auto; flex: 1; }
.workspace-surface, .development-page, .card:not(.login-card), .app-main > h1, .app-main > table {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(21, 23, 58, .055);
}
.workspace-surface { padding: clamp(1rem, 2vw, 1.5rem); overflow-x: auto; }
.development-page { max-width: 1040px; margin: auto; padding: clamp(1rem, 2vw, 2rem); }

.site-footer { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 3vw, 2.5rem); color: #788493; font-size: .76rem; border-top: 1px solid var(--line); }

button, input[type="submit"], .primary-button {
    min-height: 38px;
    padding: .55rem .9rem;
    border: 1px solid var(--sibek-navy-soft);
    border-radius: 5px;
    background: var(--sibek-navy-soft);
    color: #fff;
    font: 500 .9rem Roboto, Arial, sans-serif;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
button:hover, input[type="submit"]:hover, .primary-button:hover { background: var(--sibek-green-dark); border-color: var(--sibek-green-dark); }
button:active, input[type="submit"]:active { transform: translateY(1px); }
button.danger, .danger { background: var(--danger) !important; border-color: var(--danger) !important; }
input, select, textarea {
    max-width: 100%;
    min-height: 38px;
    padding: .5rem .65rem;
    border: 1px solid #aeb8c4;
    border-radius: 5px;
    background: #fff;
    color: var(--ink);
    font: inherit;
}
input:hover, select:hover, textarea:hover { border-color: #788799; }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible, summary:focus-visible {
    outline: 3px solid rgba(4,130,76,.32);
    outline-offset: 2px;
}
label { font-weight: 500; color: #313b49; }
.card label, .stacked-form label { display: block; margin: .8rem 0; }
.toolbar { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; padding: 1rem; border: 1px solid var(--line); border-radius: 8px; background: #f8f9fb; }
.toolbar input, .toolbar select { min-width: 180px; }

table { width: max-content; min-width: 100%; border-collapse: separate; border-spacing: 0; background: #fff; font-size: .86rem; }
th, td { padding: .48rem .62rem !important; border-right: 1px solid #e3e7eb !important; border-bottom: 1px solid #e3e7eb !important; text-align: left; vertical-align: top; }
th:first-child, td:first-child { border-left: 1px solid #e3e7eb !important; }
thead th, tr:first-child > th { position: sticky; top: 0; z-index: 2; background: var(--sibek-navy) !important; color: #fff !important; font-weight: 600; border-color: #35385f !important; }
tbody tr:nth-child(even) td { background: #f7f8fa; }
tbody tr:hover td { background: #edf4f0; }
td a { font-weight: 500; }

.ritning-huvudmeny { margin-top: 0 !important; }
.ritning-huvudmeny .ritning-flikar { gap: .35rem !important; padding: .35rem .35rem 0 !important; border-bottom: 2px solid var(--sibek-navy-soft) !important; }
.ritning-huvudmeny .ritning-flik { padding: .65rem 1rem !important; border: 1px solid #cbd3dc !important; border-bottom: 0 !important; border-radius: 7px 7px 0 0 !important; background: #eef1f5 !important; color: #3b4655 !important; font-weight: 500 !important; }
.ritning-huvudmeny a.ritning-flik:hover { background: #e3e7ee !important; color: var(--sibek-navy) !important; }
.ritning-huvudmeny .ritning-flik-aktiv { top: 2px !important; background: var(--sibek-navy-soft) !important; border-color: var(--sibek-navy-soft) !important; color: #fff !important; }
.ritning-sektionsrubrik { color: var(--sibek-navy); }
#ritning-filterpanel { margin-bottom: 1rem; border: 1px solid var(--line); border-radius: 8px; background: #f8f9fb; padding: .2rem .85rem .8rem; }
#ritning-filterpanel summary { padding: .55rem 0; }
#ritning-filterpanel .ritning-filterram { background: #fff; border: 1px solid var(--line) !important; border-radius: 6px; }
.ritning-verktygsrad { padding: .4rem 0; }
.ritning-verktygsrad form { margin: 0; }
.ritning-admin-andringar, .ritning-admin-banor, .ritning-admin-anlaggningar, .ritning-admin-ritningar { overflow-x: auto; }

.auth-main { flex: 1; width: 100%; display: grid; place-items: center; padding: clamp(2rem, 6vw, 5rem) 1rem; background:
    radial-gradient(circle at 78% 18%, rgba(4,130,76,.22), transparent 27%),
    linear-gradient(125deg, rgba(21,23,58,.98), rgba(21,23,58,.86)),
    linear-gradient(35deg, #292e73, #15173a); }
.app-public .site-header { background: rgba(21,23,58,.97); border-bottom-color: rgba(255,255,255,.12); box-shadow: none; }
.app-public .site-footer { background: var(--sibek-navy); color: rgba(255,255,255,.52); border: 0; }
.auth-layout { width: min(1080px, 100%); display: grid; grid-template-columns: 1.1fr minmax(340px, .75fr); align-items: center; gap: clamp(2rem, 6vw, 6rem); }
.auth-intro { color: #fff; }
.auth-intro h1 { margin: .35rem 0 1rem; color: #fff; font-size: clamp(2.7rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.045em; }
.auth-intro > p:not(.eyebrow) { max-width: 590px; color: rgba(255,255,255,.67); font-size: 1.05rem; line-height: 1.65; }
.eyebrow { margin: 0 0 .4rem; color: var(--sibek-green) !important; font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.auth-intro .eyebrow { color: #55c894 !important; }
.auth-features { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.5rem; }
.auth-features span { padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; color: rgba(255,255,255,.78); font-size: .78rem; }
.card { max-width: 36rem; margin: 2rem auto; padding: clamp(1.3rem, 3vw, 2.2rem); }
.login-card { width: 100%; max-width: 430px; margin: 0; padding: clamp(1.5rem, 4vw, 2.4rem); border-radius: 10px; background: #fff; box-shadow: 0 24px 65px rgba(4,5,22,.3); }
.card h1 { margin: .15rem 0 .35rem; font-size: 2rem; }
.card-lead { margin: 0 0 1.4rem; color: var(--muted); }
.card label input, .card label select { display: block; width: 100%; margin-top: .35rem; }
.card form button { width: 100%; margin-top: .45rem; }
.card-footer-link { margin: 1rem 0 0; text-align: center; font-size: .88rem; }

.page-heading { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; margin-bottom: 1.5rem; }
.page-heading h1 { margin: .15rem 0; }
.page-heading p { margin: .25rem 0; color: var(--muted); }
.version-current, .version-marker { display: inline-flex; align-items: center; justify-content: center; width: max-content; align-self: flex-start; background: var(--sibek-navy-soft); color: #fff; border-radius: 999px; padding: .35rem .7rem; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.version-list, .feedback-list { display: grid; gap: 1rem; }
.version-card, .feedback-card, .feedback-create, .empty-state { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 1rem; }
.version-card { display: grid; grid-template-columns: auto 1fr; gap: 1rem; }
.version-heading, .feedback-top { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.version-heading h2, .feedback-card h2 { margin: .1rem 0; }
.version-card ul { padding-left: 1.2rem; }
.feedback-create { margin-bottom: 1rem; background: #f8f9fb; }
.feedback-create > summary, .feedback-manage > summary { cursor: pointer; font-weight: 700; color: var(--sibek-navy); }
.stacked-form input, .stacked-form select, .stacked-form textarea { display: block; width: 100%; margin-top: .25rem; }
.feedback-kind, .feedback-status { display: inline-flex; border-radius: 999px; padding: .25rem .55rem; font-size: .82rem; font-weight: 700; background: #e8edf2; }
.feedback-kind.correction { background: #fde8e8; color: #8d1b1b; }
.feedback-kind.improvement { background: #e5f0ff; color: #064b8c; }
.feedback-status.done { background: #e3f5e8; color: #176b32; }
.feedback-status.in_progress, .feedback-status.planned { background: #fff1cf; color: #765400; }
.admin-note { margin-top: 1rem; padding: .8rem; background: #f4f6f8; border-radius: 7px; }
.feedback-manage { margin-top: 1rem; border-top: 1px solid var(--line); padding-top: .8rem; }
.delete-form { margin-top: .7rem; }
.notice-box { padding: .7rem; border: 1px solid currentColor; border-radius: 6px; background: #fff; }
.error { color: #9d2020; }
.success { color: #087344; }
.empty-state { text-align: center; color: var(--muted); }
.management-section + .management-section { margin-top: 1.8rem; }
.management-section h2 { margin: 0 0 .75rem; }
.invite-toolbar { grid-template-columns: minmax(160px, 1fr) minmax(210px, 1.25fr) minmax(150px, .7fr) auto; }
.table-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 7px; }
.table-scroll table { margin: 0; border: 0; box-shadow: none; }
.status-pill { display: inline-flex; border-radius: 999px; padding: .24rem .55rem; font-size: .8rem; font-weight: 700; }
.status-pill.active { color: #176b32; background: #e3f5e8; }
.status-pill.blocked { color: #8d1b1b; background: #fde8e8; }
.button-small { min-height: 2.1rem; padding: .35rem .7rem; font-size: .82rem; }

@media (max-width: 1180px) {
    .site-header { flex-wrap: wrap; }
    .site-nav { order: 3; width: 100%; margin-left: 0; border-top: 1px solid rgba(255,255,255,.15); padding-top: .45rem; }
    .user-menu { margin-left: auto; }
}
@media (max-width: 760px) {
    .site-header { padding: .7rem 1rem; }
    .brand img { width: 95px; }
    .brand-copy small, .brand-divider, .user-chip > span:last-child { display: none; }
    .site-nav { overflow-x: auto; justify-content: flex-start; }
    .site-nav a { white-space: nowrap; }
    .app-main { width: min(calc(100% - 1rem), 1600px); margin: .5rem auto 1rem; }
    .workspace-surface, .development-page { padding: .75rem; border-radius: 6px; }
    .auth-layout { grid-template-columns: 1fr; max-width: 460px; }
    .auth-intro { display: none; }
    .page-heading, .version-heading { display: block; }
    .version-card { grid-template-columns: 1fr; }
    .version-marker { width: max-content; }
    .invite-toolbar { grid-template-columns: 1fr; }
    .site-footer { flex-direction: column; align-items: center; }
}

@media print {
    .site-header, .site-footer, .ritning-huvudmeny, #ritning-filterpanel, .ritning-verktygsrad { display: none !important; }
    .app-main, .workspace-surface { width: 100%; margin: 0; padding: 0; border: 0; box-shadow: none; }
}