/* =========================================================
   Tidrapport – Globalt tema, layout och sidkomponenter
   (rensad, kommenterad och grupperad)
   ========================================================= */

/* ---------- 1) Tema-variabler ---------- */
:root {
    --bg: #0b0e14;
    --panel: #1a1f2a;
    --header: #121826;
    --accent: #d32f2f;
    --accent-2: #ffc107;
    --text: #f5f5f5;
    --link: #ff5252;
    --btn-hover: #b71c1c;
    --muted: #cfd8dc;
    --border: #2a3140;

    /* (NYTT) Tider: filter & kolumnmått */
    --date-input-w: 220px;
    --w-date: 150px;
    /* Datum */
    --w-time: 120px;
    /* Start/Slut */
    --w-lunch: 90px;
    /* Lunch */
    --w-hours: 110px;
    /* Timmar */
    --w-actions: 170px;
    /* Editera/Ta bort */
}

/* ---------- 2) Bas/reset ---------- */
* {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    margin: 0;
    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
    color: var(--text);
    background: var(--bg);
}

:focus-visible {
    outline: 3px solid rgba(255, 193, 7, .7);
    outline-offset: 2px;
}

/* ---------- 3) Hjälp-klasser ---------- */
.row {
    display: flex;
    gap: 10px;
}

.row.between {
    justify-content: space-between;
}

.row.center {
    align-items: center;
}

.gap-8 {
    gap: 8px;
}

.muted {
    color: var(--muted);
    font-size: .95rem;
}

/* =========================================================
   KOMPONENTER
   ========================================================= */

/* ---------- 4) Kort/containers ---------- */
.card {
    background: linear-gradient(180deg, rgba(26, 31, 42, .96), rgba(26, 31, 42, .98));
    border: 1px solid var(--border);
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .45);
    padding: 22px;
}

.card.app {
    margin: 14px 0;
}

.card-head {
    text-align: center;
    margin-bottom: 6px;
}

.center-wrap {
    width: 100%;
    max-width: 480px;
}

.logo {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    margin: 8px auto;
    background: radial-gradient(60% 60% at 50% 40%, rgba(211, 47, 47, .35), rgba(183, 28, 28, .25));
    border: 1px solid rgba(211, 47, 47, .35);
    font-size: 22px;
}

/* ---------- 5) Typografi: brand, rubriker, text ---------- */
.brand {
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #e6eaee;
    opacity: .9;
    margin: 6px 0 2px;
}

.title {
    font-size: 1.4rem;
    line-height: 1.2;
    font-weight: 700;
    margin: 6px 0 8px;
    position: relative;
}

.title::after {
    content: "";
    display: block;
    height: 2px;
    margin: 3px auto 10px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--accent), rgba(211, 47, 47, 0));
    opacity: .75;
}

.card-foot {
    margin-top: 12px;
    text-align: center;
}

.fineprint {
    color: #98a6b3;
    font-size: .8rem;
}

/* ---------- 6) Länkar ---------- */
.link {
    color: var(--link);
    text-decoration: none;
    border-bottom: 1px dashed transparent;
}

.link:hover {
    color: var(--accent);
    border-bottom-color: currentColor;
}

.link[aria-disabled="true"] {
    opacity: .6;
    pointer-events: none;
}

/* ---------- 7) Knappar ---------- */
.btn {
    cursor: pointer;
    font-weight: 700;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid transparent;
    background: #222836;
    color: var(--text);
    transition: transform .05s ease, filter .2s ease, box-shadow .2s ease;
}

.btn.full {
    width: 100%;
}

.btn.ghost {
    background: transparent;
    border-color: #2a3140;
}

.btn.xs {
    padding: 6px 8px;
    border-radius: 10px;
    font-weight: 600;
}

/* (NYTT) Ikonknapp – används i Tider mobilkort för pilen */
.btn.icon {
    padding: 6px 10px;
    border-radius: 10px;
}

.btn.primary {
    background: linear-gradient(180deg, #d32f2f 0%, #b71c1c 100%);
    border-color: #d32f2f;
    box-shadow: 0 4px 10px rgba(211, 47, 47, .22);
}

.btn.primary:hover {
    filter: brightness(1.02);
    box-shadow: 0 6px 16px rgba(211, 47, 47, .28);
}

.btn.primary:active {
    transform: translateY(1px);
}

/* ---------- 8) Formulär ---------- */
.form {
    display: grid;
    gap: 14px;
    margin-top: 12px;
}

.field {
    display: grid;
    gap: 6px;
}

label {
    font-weight: 600;
    font-size: .95rem;
}

input::placeholder {
    color: #9fb0bf;
}

input[type="email"],
input[type="password"],
input[type="date"],
input[type="time"],
input[type="number"],
.note-builder input,
textarea.note-preview {
    width: 100%;
    padding: 11px 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #0f131b;
    color: var(--text);
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

input[type="email"]:focus,
input[type="password"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="number"]:focus,
.note-builder input:focus,
textarea.note-preview:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .25);
}

.hint {
    color: #9fb0bf;
    font-size: .85rem;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
}

.checkbox input {
    width: 16px;
    height: 16px;
    accent-color: var(--accent);
}

/* =========================================================
   APP-LAYOUT (Topbar, nav, grids, tabeller)
   ========================================================= */

/* ---------- 9) App-bakgrund ---------- */
.app-bg {
    min-height: 100dvh;
    background:
        radial-gradient(1200px 600px at 20% 10%, rgba(211, 47, 47, .10), transparent 60%),
        radial-gradient(1000px 600px at 80% 90%, rgba(255, 193, 7, .08), transparent 60%),
        linear-gradient(180deg, var(--bg) 0%, var(--bg) 100%);
}

/* ---------- 10) Topbar & navigering ---------- */
.topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(18, 24, 38, .9);
    border-bottom: 1px solid var(--btn-hover);
    backdrop-filter: blur(6px);
}

.topbar .wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.brand-mini {
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    font-size: .95rem;
}

.nav {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.nav a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--text);
    border: 1px solid transparent;
    background: transparent;
}

.nav a:hover {
    color: var(--accent);
    border-color: #2a3140;
    background: #101625;
}

.nav a.active {
    border-color: #2d3b5c;
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .18) inset;
}

.userbox {
    display: flex;
    align-items: center;
    gap: 10px;
}

.userbox .muted {
    font-size: .9rem;
}

/* ---------- 11) Sidcontainer & rubrik ---------- */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
}

.page-title {
    font-size: 1.4rem;
    font-weight: 700;
    margin: 14px 4px;
}

/* ---------- 12) Grid-hjälpare ---------- */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 12px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
    gap: 12px;
}

.grid-4 {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 12px;
}

@media (max-width:900px) {
    .grid-4 {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width:700px) {
    .grid-3 {
        grid-template-columns: 1fr;
    }

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

/* ---------- 13) KPI-rutor ---------- */
.kpis {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.kpi {
    background: #0f131b;
    border: 1px dashed #2a3140;
    padding: 10px 12px;
    border-radius: 12px;
}

.kpi strong {
    font-size: 1.05rem;
}

/* ---------- 14) Tabeller ---------- */
.tablewrap {
    overflow: auto;
}

.tablewrap table {
    /* möjliggör fasta kolumnbredder */
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

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

th,
td {
    padding: 10px 12px;
    border-bottom: 1px solid #223066;
}

th {
    text-align: left;
    color: #b8c6f3;
}

/* ---------- 15) Footer ---------- */
.footer {
    color: #9fb0bf;
    text-align: center;
    padding: 24px 16px;
    opacity: .9;
}

/* =========================================================
   MOBILMENY (panel + hamburgare) — FIX: fullhöjd, synlig överallt
   ========================================================= */
.mobile-nav {
    position: fixed;
    top: var(--topbar-h, 56px);
    left: 0;
    right: 0;
    height: calc(100vh - var(--topbar-h, 56px));
    z-index: 1000;
    overflow: auto;
    -webkit-overflow-scrolling: touch;

    background: rgba(18, 24, 38, .98);
    border-bottom: 1px solid var(--border);

    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .22s ease, transform .28s ease, visibility 0s .28s;
    padding: 0 16px;
}

.mobile-nav .nav {
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

.mobile-nav .nav a {
    padding: 10px 8px;
    border-radius: 10px;
}

.mobile-user {
    display: grid;
    gap: 10px;
    padding: 8px 0 14px;
}

.mobile-user .who-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.mobile-user .label {
    color: #9fb0bf;
    font-size: .9rem
}

/* Öppet läge */
.topbar.open .mobile-nav {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
}

/* Respekt för reduce-motion */
@media (prefers-reduced-motion: reduce) {

    .mobile-nav,
    .topbar.open .mobile-nav {
        transition: none;
        transform: none;
    }
}

/* =========================================================
   HAMBURGAREN
   ========================================================= */
.hamburger {
    display: none;
    width: 42px;
    height: 42px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: #101625;
    padding: 8px;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .35s ease;
}

.hamburger::before {
    content: "";
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--text);
    transition: background .2s ease;
}

.topbar.open .hamburger {
    transform: rotate(90deg);
}

.hamburger:hover::before {
    background: var(--accent);
}

@media (max-width: 900px) {
    .hamburger {
        display: inline-flex;
    }

    .desktop-nav,
    .desktop-user {
        display: none;
    }

    .brand-mini {
        font-size: .9rem;
    }
}

@media (max-width: 520px) {
    .topbar .wrap {
        padding: 8px 10px;
    }

    .brand-mini {
        font-size: .85rem;
    }
}


/* =========================================================
   SID-SPECIFIKT: REGISTRERA
   ========================================================= */

/* Staplad layout: tider först, sedan Notering */
.two-col {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    align-items: start;
}

/* Label/fält spacing (gäller även generellt form i appen) */
.form .grid-3 label,
.form label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.kpi.inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #0f131b;
    border: 1px dashed #2a3140;
    padding: 0 14px;
    border-radius: 12px;
    font-weight: 600;
}

/* Notering-builder */
.note-builder .row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.note-list {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    margin-bottom: 12px;
}

.note-item {
    background: #0f131b;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}

.note-item header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.note-preview {
    width: 100%;
    min-height: 120px;
}

/* Enhetlig fälthöjd (inputs/textarea) */
input[type="date"],
input[type="time"],
input[type="number"],
.note-builder input,
textarea.note-preview {
    height: 40px;
    padding: 0 14px;
    font-size: 1rem;
}

textarea.note-preview {
    height: 140px;
    padding: 12px 14px;
}

/* Grids för registrera */
.reg-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(160px, 1fr));
    gap: 12px;
}

@media (max-width:900px) {
    .reg-row {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width:520px) {
    .reg-row {
        grid-template-columns: 1fr;
    }
}

.reg-actions {
    display: grid;
    grid-template-columns: minmax(160px, 220px) 1fr auto;
    align-items: end;
    gap: 12px;
    margin-top: 12px;
}

/* Min-bredd i grid */
.reg-row input,
.note-builder input {
    min-width: 180px;
}

#notesPreview {
    resize: vertical;
    overflow: auto;
}

/* Registrera – mobiljusteringar */
@media (max-width:900px) {
    .container {
        padding: 12px;
    }

    .card {
        padding: 16px;
    }

    .reg-row input,
    .reg-actions input,
    .note-builder input,
    textarea.note-preview {
        width: 100%;
        min-width: 0;
    }

    .reg-actions {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .kpi.inline {
        justify-content: flex-start;
        height: 44px;
    }

    .btn.primary {
        width: 100%;
        height: 44px;
    }

    .note-builder .row {
        flex-direction: column;
    }

    .note-builder .row>* {
        width: 100%;
    }

    .note-builder .row .btn {
        align-self: stretch;
        height: 44px;
    }

    .page-title {
        font-size: 1.25rem;
    }

    .title {
        font-size: 1.2rem;
    }

    /* Nolla inline flex-basis så inputs inte blir för höga */
    #nbType,
    #nbCustomer,
    #nbText {
        flex: initial !important;
        flex-basis: auto !important;
    }

    #nbType,
    #nbCustomer {
        height: 40px !important;
        line-height: 44px !important;
        padding: 0 14px !important;
    }

    #nbText {

        line-height: 1.35 !important;

    }
}

@media (max-width:520px) {
    .card {
        padding: 14px;
    }

    .reg-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .kpi.inline {
        height: 40px;
    }

    .btn,
    .btn.primary {
        padding: 10px 12px;
    }

    textarea.note-preview {
        height: 160px;
    }
}

/* Topbar – mobil scrolljustering */
@media (max-width:700px) {
    .topbar .wrap {
        gap: 8px;
    }

    .nav {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .nav a {
        padding: 6px 10px;
    }
}

/* ---------- Kundtid (hour picker) ---------- */
.cust-hours {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 0 0 190px;
}

.cust-hours label span {
    font-weight: 600;
    font-size: 0.95rem;
}

.cust-hours-input {
    display: flex;
    align-items: center;
    background: #0f131b;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}

.cust-hours-input input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text);
    padding: 10px 12px;
    font-size: 1rem;
    text-align: center;
    outline: none;
}

.cust-hours-input:focus-within {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(211, 47, 47, .25);
}

.cust-hours-buttons {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: #101625;
    border-left: 1px solid var(--border);
}

.cust-hours-buttons .btn {
    border: none;
    background: transparent;
    color: var(--text);
    font-size: 1rem;
    line-height: 1;
    padding: 4px 10px;
}

.cust-hours-buttons .btn:hover {
    background: rgba(255, 255, 255, 0.06);
}

.smalltext {
    font-size: 0.9rem;
    text-align: right;
}

@media (max-width: 900px) {
    .cust-hours {
        flex: 1 1 100%;
    }

    .cust-hours-input {
        width: 100%;
    }

    .cust-hours-buttons {
        flex-direction: row;
    }

    .cust-hours-buttons .btn {
        padding: 8px 12px;
    }

    .smalltext {
        text-align: left;
    }
}

/* =========================================================
   LOGIN (egen layout, ingen topbar)
   ========================================================= */

/* Dölj app-topbar etc. när vi är på login */
body:not(.app-bg) .topbar,
body:not(.app-bg) .desktop-nav,
body:not(.app-bg) .desktop-user,
body:not(.app-bg) .mobile-nav {
    display: none !important;
}

/* Login-layout centrering */
.bg {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.bg .center-wrap {
    max-width: 520px;
}

body.bg .center-wrap {
    width: 100%;
    max-width: 480px;
}

body.bg .card {
    padding: 24px 22px;
    border-radius: 18px;
}

/* Login-typo */
body.bg .brand {
    display: block;
    text-align: center;
    margin-top: 4px;
}

body.bg .title {
    text-align: center;
    margin: 6px 0 10px;
}

.bg .card .brand {
    opacity: .95;
}

.bg .card .title::after {
    width: 60px;
}

/* Login–fält/knappar */
body.bg label {
    font-weight: 600;
}

body.bg input[type="email"],
body.bg input[type="password"] {
    height: 44px;
    padding: 12px 12px;
    border-radius: 12px;
}

body.bg .row {
    gap: 10px;
}

body.bg .btn.primary {
    height: 48px;
    font-size: 1rem;
    box-shadow: 0 6px 16px rgba(211, 47, 47, .25);
}

body.bg .checkbox input {
    width: 16px;
    height: 16px;
}

/* Remember-rad på login */
.login-remember-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* ✅ Fix: håll checkbox & text på samma rad (överskriv global label-stil) */
.login-remember-row .checkbox {
    display: inline-flex;
    flex-direction: row;
    /* <— den här var grejen */
    align-items: center;
    gap: 8px;
    margin: 0;
}

.login-remember-row .checkbox input {
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
}

.login-remember-row .link {
    align-self: center;
    white-space: nowrap;
}

/* =========================================================
   HEM: Deadline-widget
   ========================================================= */
.deadline {
    margin-top: 12px;
    display: grid;
    gap: 8px;
    background: #0f131b;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 10px 12px;
}

.deadline .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.deadline .left {
    display: grid;
    gap: 2px;
}

.deadline .label {
    font-weight: 600;
}

.deadline .when {
    color: #9fb0bf;
    font-size: .95rem;
}

.deadline .right {
    margin-left: auto;
    display: flex;
    align-items: center;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    background: #2e7d32;
    box-shadow: 0 0 0 4px rgba(0, 0, 0, .12) inset;
}

/* Progressbar */
.bar {
    height: 10px;
    border-radius: 999px;
    background: #0b0f18;
    border: 1px solid var(--border);
    overflow: hidden;
}

.bar>.fill {
    height: 100%;
    width: 0%;
    background: #2e7d32;
    transition: width .35s ease;
}

/* Deadline-färger (grön >=7d, gul 3–6d, röd <=3d) */
.deadline.green .fill,
.deadline.green .status-dot {
    background: #2e7d32;
}

.deadline.yellow .fill,
.deadline.yellow .status-dot {
    background: #f9a825;
}

.deadline.red .fill,
.deadline.red .status-dot {
    background: #c62828;
}

/* =========================================================
   HEM: Datumcell (senaste 10) – två rader i mobil
   ========================================================= */
.dt-desktop {
    display: inline;
}

.dt-mobile {
    display: none;
}

@media (max-width:700px) {
    .dt-desktop {
        display: none;
    }

    .dt-mobile {
        display: inline-block;
        line-height: 1.1;
    }

    .dt-mobile .y {
        display: block;
        font-weight: 700;
    }

    .dt-mobile .md {
        display: block;
    }
}

/* =========================================================
   TIDER: Filter, tabellmått, mobilkort & interaktion
   (flyttat hit från inline-styles i tider.html)
   ========================================================= */

/* Grund */
.row-mobile {
    display: none;
}

/* Pil-ikon rotation när rad expanderas */
.chev {
    display: inline-block;
    transform: rotate(0);
    transition: transform .2s ease;
}

.btn[aria-expanded="true"] .chev {
    transform: rotate(180deg);
}

/* Filter-rad */
.filters {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.filters-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filters-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filters-right label {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Desktop: identisk bredd på datumfält */
@media (min-width:901px) {

    .filters-right input[type="date"],
    #from,
    #to {
        width: var(--date-input-w) !important;
        max-width: 100%;
        box-sizing: border-box;
        text-align: center;
    }
}

/* Desktop: lås första kolumnerna, låt Notering flexa */
@media (min-width:901px) {

    /* 1: Datum */
    .tablewrap th:nth-child(1),
    .tablewrap td:nth-child(1) {
        width: var(--w-date);
        white-space: nowrap;
    }

    /* 2–3: Start/Slut */
    .tablewrap th:nth-child(2),
    .tablewrap td:nth-child(2),
    .tablewrap th:nth-child(3),
    .tablewrap td:nth-child(3) {
        width: var(--w-time);
        white-space: nowrap;
    }

    /* 4: Lunch */
    .tablewrap th:nth-child(4),
    .tablewrap td:nth-child(4) {
        width: var(--w-lunch);
        white-space: nowrap;
    }

    /* 5: Timmar */
    .tablewrap th:nth-child(5),
    .tablewrap td:nth-child(5) {
        width: var(--w-hours);
        white-space: nowrap;
    }

    /* 6: Notering – flexa */
    .tablewrap th:nth-child(6),
    .tablewrap td:nth-child(6) {
        width: auto;
        white-space: normal;
        overflow: hidden;
    }

    /* 7: Actions – fast till höger */
    .tablewrap th:nth-child(7),
    .tablewrap td:nth-child(7) {
        width: var(--w-actions);
        white-space: nowrap;
        text-align: right;
    }

    td.actions {
        text-align: right;
        vertical-align: middle;
    }

    td.actions .actions-row {
        display: inline-flex;
        gap: 6px;
        align-items: center;
    }
}

/* Mobil: kortlayout */
@media (max-width:900px) {
    thead {
        display: none;
    }

    .row-desktop {
        display: none;
    }

    .row-mobile {
        display: table-row;
    }

    .row-mobile>td {
        padding: 0;
        border-bottom: 1px solid #223066;
    }

    .m-row {
        padding: 10px 12px;
    }

    .m-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .m-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .m-date {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    .m-date .d {
        font-size: 1.35rem;
        line-height: 1;
        font-weight: 800;
        letter-spacing: .02em;
    }

    .m-date .my {
        color: #9fb0bf;
        font-size: .95rem;
        line-height: 1.1;
        text-transform: lowercase;
    }

    .m-actions {
        display: flex;
        gap: 6px;
    }

    .m-body {
        display: none;
        padding: 8px 0 2px;
    }

    .m-body.open {
        display: block;
    }

    .m-line {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 10px;
        padding: 4px 0;
    }

    .m-line span {
        color: #9fb0bf;
    }

    .m-line strong {
        font-weight: 600;
    }

    .note-box {
        margin-top: 8px;
        background: #101625;
        border: 1px solid var(--border);
        border-radius: 12px;
        padding: 10px 12px;
        white-space: pre-wrap;
        line-height: 1.35;
    }

    /* Filter – stapla & fullbredd */
    .filters {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .filters-left,
    .filters-right {
        width: 100%;
    }

    .filters-left .btn {
        width: 100%;
    }

    .filters-right {
        flex-direction: column;
        gap: 10px;
    }

    .filters-right label {
        width: 100%;
        display: grid;
        grid-template-columns: 64px 1fr;
        /* label + input */
        gap: 8px;
    }

    .filters-right input[type="date"],
    #from,
    #to {
        width: 100% !important;
        min-width: 0;
        box-sizing: border-box;
    }
}

/* =========================================================
   TIDER: Notering i desktop – 2 rader + "Visa mer"
   (denna del påverkar inte mobilkortslayouten)
   ========================================================= */
@media (min-width: 901px) {

    th.notes,
    td.notes {
        width: 42%;
    }

    td.notes {
        vertical-align: top;
    }

    .note-wrap {
        display: grid;
        gap: 6px;
    }

    .note-text {
        background: #101625;
        border: 1px solid var(--border);
        border-radius: 10px;
        padding: 8px 10px;
        line-height: 1.35;
        white-space: pre-wrap;

        /* klipp till 2 rader */
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .note-wrap[data-collapsed="0"] .note-text {
        -webkit-line-clamp: unset;
        overflow: visible;
    }

    .note-more {
        justify-self: start;
    }
}

/* =========================================================
   REGISTRERA – Kundtidspicker (fält – minus – plus)
   ========================================================= */
.ct-wrap {
    display: flex;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
    flex-wrap: nowrap;
    /* <-- håll allt på samma rad */
}

/* Lås totalbredd på desktop */
@media (min-width:901px) {
    .ct-wrap {
        width: 200px;
        /* totalbredd (fält + 2 knappar + gap) */
        max-width: 200px;
    }
}

/* Visningsfältet (text som "1 h 30 min") */
.ct-wrap .ct-input {
    flex: 1 1 auto;
    /* tar resten av utrymmet */
    min-width: 0 !important;
    /* <-- överstyr ev. generella min-width */
    height: 40px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: #0f131b;
    color: var(--text);
    font-size: 1rem;
    display: flex;
    align-items: center;
}

/* Knappar (exakt 40x40 – aldrig ihoppressade) */
.ct-wrap .ct-btn {
    flex: 0 0 40px;
    /* <-- lås bredden i flex-layouterna */
    width: 40px;
    min-width: 40px;
    /* bälte och hängslen */
    height: 40px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    line-height: 1;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: transparent;
    color: var(--text);
}

.ct-wrap[hidden] {
    display: none;
}

/* Mobil: alla “bars” 45px höga (ej textarea) */
@media (max-width:900px) {
    .ct-wrap {
        width: auto;
        max-width: none;
    }

    .ct-wrap .ct-input {
        height: 40px;
    }

    .ct-wrap .ct-btn {
        height: 45px;
    }

}