/* Mitt försök till snygga grejer */
/* skall tydligen fixa så skit liksom inte lägger på tusen padding etc */
*, *::before, *::after {
    box-sizing: border-box;
}
/* Färger */
:root {
    --my-red: #ff8fab;
    --my-green: #84dcc6;
    --my-middle: #f0efeb;
    --my-darker-than-background-gray: #f0efeb;
    --gap: 0.75rem;
    --padding-left: 1.5rem;
    --padding-top: 1.5rem;
    --vertical-gap: 0.2rem;
    --horizontal-gap: 1rem;
}

/* Speciella för landing page */
.landing-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
}

.landing { /* This is one card */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    display: inline-flex;
    gap: 1.5rem;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.landing:hover {
    border-color: var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.landing h2, p {
    margin: 0;
}

.landing-badge {
    background: var(--my-middle);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.75em;
}

.landing-badge svg {
    width: 3.5em;
    height: 3.5em;
}

.top-heading {
    margin-top: var(--padding-top);
    display: grid;
    grid-template-columns: 1fr auto 1fr;
}

button {
    color: ; /* färg på text */
    font-size: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--my-middle);
    padding: 0.5rem 0.6rem;
}

.button-normal:hover {
    background: color-mix(in srgb, var(--bg) 85%, #341c02);
}

button:hover {
    cursor: pointer;
}

.button-icon {
        all: unset;
}

.button-icon svg {
    width: 1.6em;
    height: 1.6em;
    stroke-width: 1.5;
    vertical-align: middle; /* för pixelkontroll: vertical-align: -0.15em */
}

.button-color-red svg {
    color: var(--my-red);
}

.button-color-green svg {
    color: var(--my-green);

}

/* För att få en <a> att se ut som en button */
.button-link {
    color: var(--text);
    font-size: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--my-middle);
    padding: 0.5rem 0.6rem;
    text-decoration: none;
    cursor: pointer;
    margin-left: auto;
}

.button-link-simple {
    color: var(--text);
    font-size: inherit;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--my-middle);
    padding: 0.5rem 0.6rem;
    text-decoration: none;
    cursor: pointer;
}

.button-right-div {
    display: flex;
    align-items: center;
    color: var(--text);
    margin-top: var(--padding-top);
    margin-bottom: var(--padding-top);
}

.button-space-between-div {
    display: flex;
    align-items: center;
    color: var(--text);
    margin-top: var(--padding-top);
    margin-bottom: var(--padding-top);
    justify-content: space-between;
}

.button-link:hover {
    background: color-mix(in srgb, var(--bg) 85%, #341c02);
}

.heading-description {
    display: flex;
    align-items: baseline;
    gap: var(--gap);
    padding-left: var(--padding-left);
}

/* Invoice / customer detail */
.detail-list {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--padding-left) var(--padding-top);
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--vertical-gap) var(--horizontal-gap);
}
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }

/* Forms */
form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--padding-left) var(--padding-top);
}

/* Bara för en form, kanske ta bort
fieldset {
    border: none;
    border-top: 1px solid var(--border);
    padding: 1rem 0 0;
    margin: 0 0 1rem;
}

fieldset:first-of-type { border-top: none; padding-top: 0; }
*/
legend {
    font-weight: 600;
    padding: 0 0 0.5rem;
}

label {
    margin-bottom: 1rem;
    font-weight: 500;
}

input, select, textarea {
    margin-top: 0.35rem;
    margin-bottom: 0.35rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    background: var(--surface);
    color: var(--text);
    min-width: 0;
    width: 100%;
}

/* Detta table gör så att inputs inte fyller hela raden, men de kan då overflow eller sträcka ut containern de är i */
.form-2 {
    display: flex;
    align-items: center;
    gap: var(--gap);
}
.form-2 input {
    width: auto;
}

input:disabled { background: #f0efeb; color: var(--muted); }

/* Fakturaformuläret */

.form-invoice input, select, option {
    border: none;
    border-bottom: 1px dashed green;
    border-radius: 0;
    padding: 0em 0.5em;
}

.form-invoice input[readonly] {
    padding: 0;
    border: none;
    margin: 0.1em;
}

.form-invoice p {
    text-align: right;
    padding-right: 0.2em;
    margin-top: 0.4em;
    margin-bottom: 0.4em;
}

.top-of-invoice-form {
    padding-left: 1em;
}

.form-invoice span {
    align-items: bottom;
}

.grid-1 {
    display: grid;
    grid-template-columns: 1fr;
}

.grid-2-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.grid-3-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.grid-3-1-2 {
    display: grid;
    grid-template-columns: 1fr 2fr;
}

.grid-3-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
}

.grid-4-4 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

.flex-in-grid {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.form-invoice input[name="betalningsvillkor_dagar"] { width: 7ch; }
.form-invoice input[type="date"] { width: 16ch;}


/* För auth */
/* -- Topbar: brand till vänster, användare + logga ut till höger -- */
.topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logout-form {
    /* Överrida den generella form-stylen (kort, padding, ram). */
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.logout-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.logout-btn:hover {
    background: transparent;
    color: var(--text);
    border-color: var(--text);
}

/* -- Felmeddelanden i login-formulären -- */
.error {
    color: #8a2020;
    background: #fdf0f0;
    border: 1px solid #f0c8c8;
    border-radius: 6px;
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

/* original */
:root {
    --bg: #f7f7f5;
    --surface: #ffffff;
    --border: #ddd9d0;
    /*--text: #26241f;*/
    --text: #3d3b34;
    --muted: #726f66;
    --accent: #2f5d50;
    --accent-hover: #24473d;
    --delete: #6d2323;
    --delete-hover: #a32f2f;
    --radius: 8px;
    /* nya för snyggt */
    --accent: #2f5d50;        /* primary actions, links, focus */
    --success: #3a6b3a;       /* add, save */
    --success-hover: #2d542d;
    --danger: #8a3a3a;        /* delete, destructive */
    --danger-hover: #a84444;
    --danger-bg: #fdf0f0;     /* error message background */
    --success-bg: #eef4ee;
}

@font-face {
    font-family: "Inter";
    src: url("/static/fonts/Inter/Inter-VariableFont_opsz-wght.ttf") format("truetype");
    font-weight: 100 900;
    font-style: normal;
}

body {
    margin: 0;
    font-family: "Inter", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
}

.topbar {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 0.9rem 1.5rem;
}

.brand {
    font-weight: 600;
    text-decoration: none;
    color: var(--text);
    font-size: 1.1rem;
}

.container {
    max-width: 720px;
    margin: 0 auto;
    padding-bottom: 40px;
}


h1 { font-size: 1.5rem; margin-bottom: 1.25rem; }

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

a { color: var(--muted); }

.back-link { margin-top: 2rem; }

/* Card grid used on landing + fakturor menu */
.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.card {
    display: block;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-decoration: none;
    color: var(--text);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.card:hover {
    border-color: var(--accent);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.card h2 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.9rem; }

.card-disabled {
    opacity: 0.55;
    cursor: not-allowed;
}



small.muted { display: block; margin-top: 0.3rem; font-weight: 400; }

/* Tables */
/* Först generellt för alla tables, sedan specifikt */

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-wrap: anywhere;
}

    th:nth-child(1) { width: 40%; }
    th:nth-child(2) { width: 25%; }
    th:nth-child(3) { width: 25%; }
    th:nth-child(4) { width: 10%; }

th, td {
    text-align: left;
    padding: 0.2rem var(--padding-left);
    border-bottom: 1px solid var(--border);
}

th:last-child, td:last-child {
    text-align: right;
}

th {
    background: var(--my-middle);
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}
tr:last-child td { border-bottom: none; }

.auto-table {
    table-layout: auto;
}

.auto-table th, td {
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
}

.auto-table th:nth-child(n) {
    width: auto;
}

/* Pick list (choose customer for new invoice) */
.pick-list { list-style: none; padding: 0; }
.pick-list li {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 0.5rem;
}
.pick-list a {
    display: block;
    padding: 0.75rem 1rem;
    text-decoration: none;
    color: var(--text);
}
.pick-list a:hover { color: var(--accent); }

/* Dynamic invoice line rows */
.line-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.5rem;
}

.line-row input { margin-top: 0; }

/* tar bort denna, kanske fuckar
.line-row input[name="line_amount"] { width: 12rem; }
*/

.remove-line-btn {
    background: transparent;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    width: 2.1rem;
    height: 2.1rem;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
}

.remove-line-btn:hover { color: #b3413a; border-color: #b3413a; }

.secondary-btn {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 6px;
    padding: 0.45rem 1rem;
    font-size: 0.9rem;
    cursor: pointer;
}

.secondary-btn:hover { background: rgba(47, 93, 80, 0.08); }

h2 { font-size: 1.15rem; margin: 1.75rem 0 0.75rem; }

/* Im not reading this shit section */

.moms-toggle {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
    margin-top: 0.5rem;
}

.moms-toggle input {
    /* Behåll för tangentbord och skärmläsare, men gör osynlig. */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.moms-toggle-track {
    position: relative;
    flex-shrink: 0;
    width: 2.5rem;
    height: 1.25rem;
    background: var(--border);
    border-radius: 999px;
    transition: background 0.15s ease;
}

.moms-toggle-track::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.25rem - 4px);
    height: calc(1.25rem - 4px);
    background: white;
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
    transition: transform 0.15s ease;
}

.moms-toggle input:checked + .moms-toggle-track {
    background: var(--accent);
}

.moms-toggle input:checked + .moms-toggle-track::after {
    transform: translateX(1.25rem);
}

.moms-toggle input:focus-visible + .moms-toggle-track {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}