:root {
            --black: #20262d;
            --orange: #f47721;
            --orange-dark: #d95f12;
            --orange-light: #fff0e4;
            --white: #ffffff;
            --gray-100: #eef2f5;
            --gray-200: #dde4ea;
            --gray-300: #cfd8e0;
            --gray-500: #687482;
            --gray-700: #45474a;
            --panel-head: #45474a;
            --sidebar: #292c30;
            --green: #347451;
            --green-dark: #285b40;
            --green-light: #e7f5ec;
            --red: #a72d2d;
            --red-light: #fdeaea;
            --yellow: #9a6900;
            --yellow-light: #fff7dd;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
        }

        body {
            margin: 0;
            min-height: 100vh;
            background: var(--gray-100);
            color: var(--black);
            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Arial,
                sans-serif;
        }

        button,
        input,
        textarea,
        select {
            font: inherit;
        }

        button {
            -webkit-tap-highlight-color: transparent;
        }

        .hidden {
            display: none !important;
        }

        .topbar {
            width: min(calc(100% - 24px), 460px);
            margin: 0 auto;
            padding: max(18px, env(safe-area-inset-top)) 2px 6px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            background: transparent;
        }

        .logo {
            display: block;
            width: 142px;
            height: auto;
            margin: 0;
            object-fit: contain;
        }

        .fallback-logo {
            display: none;
            color: var(--black);
            font-size: 22px;
            font-weight: 900;
            letter-spacing: 1px;
        }

        .login-screen {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 22px 14px;
            background: var(--gray-100);
        }

        .login-card {
            width: 100%;
            max-width: 402px;
            padding: 26px 20px 20px;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 14px;
            box-shadow: 0 10px 28px rgba(32,38,45,.08);
        }

        .login-logo {
            display: block;
            width: min(190px, 62vw);
            height: auto;
            margin: 0 auto;
            object-fit: contain;
        }

        .login-title {
            margin: 18px 0 0;
            text-align: center;
            font-size: 24px;
            font-weight: 900;
        }

        .login-subtitle {
            margin: 6px 0 20px;
            color: var(--gray-500);
            text-align: center;
            font-size: 13px;
        }

        .login-card .field {
            margin-bottom: 14px;
        }

        .login-card .orange-button {
            margin-top: 4px;
        }
        .app {
            width: min(100%, 484px);
            margin: 0 auto;
            padding: 14px 12px calc(28px + env(safe-area-inset-bottom));
            background: var(--gray-100);
        }
.section {
            margin-bottom: 16px;
        }

        .section-heading {
            margin-bottom: 9px;
            text-align: center;
        }

        .section-heading h2 {
            margin: 0;
            font-size: 20px;
            font-weight: 900;
        }

        .section-heading p {
            margin: 4px 0 0;
            color: var(--gray-500);
            font-size: 12px;
        }

        .card {
            overflow: hidden;
            background: var(--white);
            border: 1px solid var(--gray-200);
            border-radius: 12px;
            box-shadow: none;
        }

        /* Körningskorten behöver kunna visa ⋯-menyn utanför kortets kant. */
        #running-runs,
        #today-runs,
        #completed-runs,
        #tomorrow-runs {
            overflow: visible;
        }

        #running-runs > .run:first-child,
        #today-runs > .run:first-child,
        #completed-runs > .run:first-child,
        #tomorrow-runs > .run:first-child {
            border-radius: 11px 11px 0 0;
        }

        #running-runs > .run:last-child,
        #today-runs > .run:last-child,
        #completed-runs > .run:last-child,
        #tomorrow-runs > .run:last-child {
            border-radius: 0 0 11px 11px;
        }

        #running-runs > .run:only-child,
        #today-runs > .run:only-child,
        #completed-runs > .run:only-child,
        #tomorrow-runs > .run:only-child {
            border-radius: 11px;
        }

        .completed-day-group + .completed-day-group {
            margin-top: 10px;
        }

        .completed-day-label {
            padding: 7px 12px;
            background: var(--gray-100);
            color: var(--gray-500);
            border-bottom: 1px solid var(--gray-200);
            font-size: 11px;
            font-weight: 850;
            text-transform: uppercase;
            letter-spacing: 0.45px;
        }

        .run {
            padding: 14px;
            border-bottom:
                1px solid
                var(--gray-200);
        }

        .run:last-child {
            border-bottom: 0;
        }

        .run.is-next {
            background:
                var(--orange-light);
        }

        .run.is-running {
            background:
                var(--green-light);
        }

        .run.is-paused {
            background:
                var(--yellow-light);
        }

        .run.is-completed {
            opacity: 0.88;
        }

        .run.has-warning {
            background:
                var(--red-light);
        }

        .run-top {
            display: grid;
            grid-template-columns: 40px minmax(0, 1fr) 30px;
            align-items: start;
            gap: 10px;
        }

        .run-time {
            min-width: 38px;
            padding-top: 3px;
            color: #999999;
            font-size: 12px;
            font-weight: 400;
            line-height: 1.4;
        }

        .run-main {
            display: grid;
            align-content: start;
            gap: 4px;
            min-width: 0;
        }

        .run-customer {
            margin: 0;
            color: var(--black);
            font-size: 15px;
            font-weight: 800;
            line-height: 1.35;
        }

        .run-route {
            color: var(--gray-500);
            font-size: 13px;
            font-weight: 600;
            line-height: 1.4;
        }

        .order-more-menu {
            position: relative;
        }

        .order-more-menu > summary {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 1px solid var(--gray-300);
            border-radius: 5px;
            background: var(--white);
            color: var(--black);
            cursor: pointer;
            font-size: 15px;
            font-weight: 800;
            line-height: 1;
            list-style: none;
            user-select: none;
            transition:
                background 0.12s ease,
                border-color 0.12s ease,
                color 0.12s ease,
                transform 0.06s ease;
        }

        .order-more-menu > summary::-webkit-details-marker {
            display: none;
        }

        .order-more-menu > summary:active,
        .order-more-menu > summary:focus-visible {
            border-color: var(--gray-500);
            background: var(--gray-100);
        }

        .order-more-options {
            position: absolute;
            top: 34px;
            right: 0;
            z-index: 30;
            width: 140px;
            padding: 6px;
            border: 1px solid var(--gray-200);
            border-radius: 8px;
            background: var(--white);
            box-shadow: 0 10px 30px rgba(0,0,0,0.16);
        }

        .order-more-options button {
            display: block;
            width: 100%;
            min-height: 42px;
            padding: 9px 11px;
            border: 0;
            border-radius: 6px;
            background: var(--white);
            color: var(--black);
            cursor: pointer;
            text-align: left;
            font-size: 14px;
            font-weight: 750;
        }

        .order-more-options button:active,
        .order-more-options button:focus-visible {
            background: var(--gray-100);
        }

        .order-more-options .has-comment {
            color: var(--orange-dark);
            font-weight: 850;
        }

        .run-tc {
            margin-top: 6px;
            color: var(--gray-500);
            font-size: 12px;
            line-height: 1.4;
        }

        .run-instruction {
            margin-top: 4px;
            color: var(--black);
            font-size: 14px;
            font-weight: 700;
            line-height: 1.4;
        }

        .run-tc-order {
            color: var(--black);
            font-weight: 900;
        }

        .timer-panel {
            margin-top: 9px;
            padding: 6px 9px;
            border-radius: 8px;
            background:
                rgba(255,255,255,0.62);

            border:
                1px solid
                rgba(0,0,0,0.07);
        }

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

        .timer-state {
            font-size: 11px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.35px;
        }

        .timer-value {
            color: var(--gray-700);
            font-size: 17px;
            font-weight: 750;
            font-variant-numeric:
                tabular-nums;
        }

        .timer-detail {
            margin-top: 2px;
            color: #999999;
            font-size: 10px;
        }

        .warning-text {
            margin-top: 9px;
            color: var(--red);
            font-size: 12px;
            font-weight: 800;
        }

        .run-actions {
            display: grid;
            grid-template-columns:
                repeat(
                    2,
                    minmax(0, 1fr)
                );

            gap: 6px;
            margin-top: 8px;
        }

        .orange-button,
        .green-button,
        .dark-button,
        .secondary-button,
        .small-button {
            width: 100%;
            min-height: 50px;
            border-radius: 14px;
            cursor: pointer;
            font-weight: 900;
        }

        .orange-button {
            border: 0;
            background: var(--orange);
            color: var(--white);
        }

        .orange-button:active {
            background:
                var(--orange-dark);
        }

        .green-button {
            border: 0;
            background: var(--green);
            color: var(--white);
        }

        .green-button:active {
            background:
                var(--green-dark);
        }

        .dark-button {
            border: 0;
            background: var(--black);
            color: var(--white);
        }

        .secondary-button {
            border:
                1px solid
                var(--gray-300);

            background: var(--white);
            color: var(--gray-700);
        }

.small-button {
            min-height: 42px;
            padding: 0 11px;
            border: 1px solid var(--gray-300);
            border-radius: 7px;
            background: var(--white);
            color: var(--black);
            font-size: 13px;
            font-weight: 750;
            transition:
                background 0.12s ease,
                border-color 0.12s ease,
                color 0.12s ease,
                transform 0.06s ease;
        }

        .run-actions .small-button:active,
        .run-actions .small-button:focus-visible {
            border-color: var(--gray-500);
            background: var(--gray-100);
            color: var(--black);
        }

        .run-actions .small-button.primary:active,
        .run-actions .small-button.primary:focus-visible {
            border-color: var(--green);
            background: var(--green);
            color: var(--white);
        }

        .run-actions .small-button.pause:active,
        .run-actions .small-button.pause:focus-visible {
            border-color: #d49a1f;
            background: #d49a1f;
            color: var(--black);
        }

        .run-actions .small-button.finish:active,
        .run-actions .small-button.finish:focus-visible {
            border-color: var(--black);
            background: var(--black);
            color: var(--white);
        }

        button:disabled {
            opacity: 0.55;
            cursor: default;
        }

        .empty {
            padding: 25px 15px;
            color: #999999;
            text-align: center;
            font-size: 13px;
        }


        .attachment-helper {
            margin-top: 6px;
            color: var(--gray-500);
            font-size: 11px;
            line-height: 1.4;
        }

        .attachment-existing-section {
            margin-bottom: 18px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--gray-200);
        }

        .attachment-section-heading {
            margin-bottom: 8px;
            font-size: 13px;
            font-weight: 800;
            color: var(--gray-900);
        }

        .attachment-existing-message {
            color: var(--gray-500);
            font-size: 12px;
            line-height: 1.4;
        }

        .attachment-existing-message:empty {
            display: none;
        }

        .attachment-existing-list {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .attachment-existing-list:empty {
            display: none;
        }

        .attachment-existing-card {
            overflow: hidden;
            min-width: 0;
            border: 1px solid var(--gray-200);
            border-radius: 10px;
            background: #fff;
        }

        .attachment-existing-image-button {
            display: block;
            width: 100%;
            padding: 0;
            border: 0;
            border-radius: 0;
            background: var(--gray-100);
            cursor: pointer;
        }

        .attachment-existing-image {
            display: block;
            width: 100%;
            aspect-ratio: 4 / 3;
            object-fit: cover;
        }

        .attachment-existing-body {
            padding: 8px;
        }

        .attachment-existing-category {
            overflow: hidden;
            color: var(--gray-900);
            font-size: 12px;
            font-weight: 800;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .attachment-existing-time,
        .attachment-existing-comment {
            margin-top: 3px;
            color: var(--gray-500);
            font-size: 11px;
            line-height: 1.35;
            overflow-wrap: anywhere;
        }

        .attachment-existing-delete {
            width: 100%;
            margin-top: 8px;
            padding: 7px 8px;
            border: 1px solid #d8d8d8;
            border-radius: 8px;
            background: #fff;
            color: var(--red-700, #a11a1a);
            font-size: 12px;
            font-weight: 700;
            cursor: pointer;
        }

        #attachment-viewer-modal {
            z-index: 10020;
            padding-top: max(18px, env(safe-area-inset-top));
            padding-bottom: max(18px, env(safe-area-inset-bottom));
        }

        .attachment-viewer {
            max-width: 760px;
        }

        .attachment-viewer-image {
            display: block;
            width: 100%;
            max-height: 76vh;
            object-fit: contain;
            border-radius: 10px;
            background: #000;
        }

        .attachment-image-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
        }

        .attachment-image-actions button {
            width: 100%;
        }

        .attachment-file-input {
            display: none;
        }

        .attachment-files-summary {
            min-height: 20px;
            margin-top: 9px;
            color: var(--gray-600);
            font-size: 13px;
            font-weight: 700;
        }

        .attachment-files-summary:empty {
            display: none;
        }

        .attachment-previews {
            display: grid;
            grid-template-columns: repeat(3, minmax(0, 1fr));
            gap: 8px;
            margin-top: 8px;
        }

        .attachment-previews:empty {
            display: none;
        }

        .attachment-preview-item {
            position: relative;
            overflow: hidden;
            aspect-ratio: 1 / 1;
            border: 1px solid var(--gray-200);
            border-radius: 9px;
            background: var(--gray-100);
        }

        .attachment-preview-item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .attachment-preview-remove {
            position: absolute;
            top: 5px;
            right: 5px;
            display: flex;
            align-items: center;
            justify-content: center;
            width: 28px;
            height: 28px;
            padding: 0;
            border: 0;
            border-radius: 50%;
            background: rgba(0, 0, 0, 0.76);
            color: #fff;
            font-size: 20px;
            font-weight: 700;
            line-height: 1;
            cursor: pointer;
        }

        #attachment-camera-modal {
            z-index: 10000;
            padding-top: max(18px, env(safe-area-inset-top));
            padding-bottom: max(18px, env(safe-area-inset-bottom));
        }

        .camera-modal {
            max-width: 430px;
        }

        .attachment-camera-preview {
            display: block;
            width: 100%;
            max-height: 68vh;
            object-fit: contain;
            border-radius: 10px;
            background: #000000;
        }


        .field {
            position: relative;
            margin-bottom: 16px;
            min-width: 0;
        }

        .field:last-child {
            margin-bottom: 0;
        }

        .field-row {
            display: grid;

            grid-template-columns:
                minmax(0,1fr)
                minmax(0,1fr);

            gap: 8px;
            width: 100%;
            min-width: 0;
        }

        .field-row > .field {
            min-width: 0;
        }

        label {
            display: block;
            margin-bottom: 7px;
            color: var(--gray-700);
            font-size: 14px;
            font-weight: 800;
        }

        .optional {
            color: #999999;
            font-weight: 400;
        }

        input,
        textarea,
        select {
            width: 100%;
            max-width: 100%;
            min-width: 0;

            border:
                1px solid
                var(--gray-300);

            border-radius: 14px;
            background: #f7f7f6;
            color: var(--black);
            outline: none;
            font-size: 16px;
        }

        input,
        select {
            height: 51px;
            padding: 0 13px;
        }

        textarea {
            min-height: 100px;
            padding: 12px 13px;
            resize: vertical;
        }

        input:focus,
        textarea:focus,
        select:focus {
            border-color: var(--orange);

            box-shadow:
                0 0 0 3px
                rgba(245,130,32,0.16);
        }

        .message {
            display: none;
            margin-bottom: 14px;
            padding: 13px 14px;
            border-radius: 9px;
            text-align: center;
            font-size: 14px;
            font-weight: 800;
        }

        .message.success {
            display: block;
            background: var(--green-light);
            color: #216532;
            border: 1px solid #b9dfc3;
        }

        .message.error {
            display: block;
            background: var(--red-light);
            color: var(--red);
            border: 1px solid #efbcbc;
        }

        .modal-backdrop {
            position: fixed;
            inset: 0;
            z-index: 9999;

            display: flex;
            align-items: center;
            justify-content: center;

            padding: 18px;

            background:
                rgba(0,0,0,0.65);
        }

        .modal {
            width: 100%;
            max-width: 440px;
            padding: 20px;
            background: var(--white);
            border-radius: 18px;
        }

        #attachment-modal {
            align-items: flex-start;
            overflow-y: auto;
            -webkit-overflow-scrolling: touch;
            padding-top: max(18px, env(safe-area-inset-top));
            padding-bottom: max(18px, env(safe-area-inset-bottom));
        }

        #attachment-modal .modal {
            margin: 0 auto;
        }

        .modal h2 {
            margin: 0 0 12px;
            text-align: center;
        }

        .modal p {
            color: var(--gray-500);
            font-size: 13px;
            line-height: 1.45;
        }

        .modal-order {
            margin-bottom: 16px;
            padding: 13px;
            background: var(--gray-100);

            border-radius: 8px;
        }

        .modal-customer {
            font-weight: 900;
        }

        .modal-route {
            margin-top: 4px;
            color: var(--gray-500);
            font-size: 13px;
        }

        .modal-time {
            margin-top: 9px;
            font-size: 14px;
            font-weight: 800;
        }

        .modal-actions {
            display: grid;

            grid-template-columns:
                1fr 1fr;

            gap: 8px;
            margin-top: 16px;
        }


        .time-editor-modal {
            max-width: 460px;
        }

        .time-editor-summary {
            margin-bottom: 14px;
            padding: 14px;
            background: var(--gray-100);
            border-radius: 10px;
            text-align: center;
        }

        .time-editor-summary-label {
            color: var(--gray-500);
            font-size: 12px;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.4px;
        }

        .time-editor-summary-value {
            margin-top: 4px;
            font-size: 26px;
            font-weight: 900;
            font-variant-numeric: tabular-nums;
        }

        .time-timeline {
            display: grid;
            gap: 9px;
            margin: 14px 0;
        }

        .time-block {
            padding: 12px;
            border: 1px solid var(--gray-200);
            border-radius: 10px;
            background: var(--white);
        }

        .time-block.break-block {
            border-color: #f3c89f;
            background: var(--orange-light);
        }

        .time-block-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .time-block-type {
            color: var(--gray-700);
            font-size: 12px;
            font-weight: 900;
            text-transform: uppercase;
            letter-spacing: 0.35px;
        }

        .time-block-duration {
            color: var(--gray-500);
            font-size: 13px;
            font-weight: 700;
            white-space: nowrap;
        }

        .time-block-range {
            margin-top: 5px;
            font-size: 18px;
            font-weight: 850;
            font-variant-numeric: tabular-nums;
        }

        .time-block-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 7px;
            margin-top: 10px;
        }

        .time-block-actions.single {
            grid-template-columns: 1fr;
        }

        .time-editor-add-actions {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-top: 12px;
        }

        .time-editor-bottom-actions {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 8px;
            margin-top: 14px;
        }

        .break-add-button {
            border-color: var(--orange);
        }

        .time-editor-form {
            margin-top: 12px;
            padding: 13px;
            border-radius: 10px;
            background: var(--gray-100);
            border: 1px solid var(--gray-200);
        }

        .break-editor-form {
            background: var(--orange-light);
            border-color: #f3c89f;
        }

        .time-editor-form-title {
            margin-bottom: 12px;
            font-size: 15px;
            font-weight: 900;
            text-align: center;
        }

        .time-clock-row {
            grid-template-columns: 1fr 1fr;
        }

        .time-clock-row input[type="time"],
        .time-clock-row input.chiq-clock-input {
            font-variant-numeric: tabular-nums;
        }


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

            .run-actions {
                grid-template-columns: 1fr;
            }
        }

/* =====================================================
   CURRENT MOBILE WORK VIEW
   ===================================================== */
/* Arbetssektioner: samma headerstruktur som Planering. */
#running-section,
#today-section,
#tomorrow-section,
#completed-section {
    margin-bottom: 16px;
}

#running-section > .section-heading,
#today-section > .section-heading,
#tomorrow-section > .section-heading,
#completed-section > .section-heading {
    display: flex;
    align-items: stretch;
    min-height: 52px;
    margin-bottom: 0;
    padding: 0;
    background: var(--panel-head);
    color: var(--white);
    border-bottom: 2px solid var(--orange);
    border-radius: 12px 12px 0 0;
    text-align: left;
}

#running-section > .section-heading {
    align-items: center;
    padding: 8px 14px;
}

#running-section > .section-heading h2 {
    display: grid;
    gap: 2px;
    margin: 0;
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
}

.section-heading-copy {
    display: grid;
    gap: 2px;
}

.section-kicker {
    display: block;
    color: var(--orange);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .1em;
    line-height: 1.15;
}

.section-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    margin: 0;
    padding: 8px 14px;
    border: 0;
    border-radius: 12px 12px 0 0;
    background: transparent;
    color: var(--white);
    font-size: 15px;
    font-weight: 900;
    line-height: 1.15;
    text-align: left;
    cursor: pointer;
}

.section-toggle:active,
.section-toggle:focus-visible {
    background: #3d3f42;
}

.section-toggle-arrow {
    flex: 0 0 auto;
    color: #d8d8d8;
    font-size: 13px;
    transition: transform 0.15s ease;
}

.section-toggle[aria-expanded="true"] .section-toggle-arrow {
    transform: rotate(180deg);
}

#running-runs,
#today-runs,
#tomorrow-runs,
#completed-runs {
    overflow: visible;
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.035);
}

/* Nar en sektion ar stangd ar den svarta headern hela boxen. */
#today-section:has(#today-runs.hidden) > .section-heading,
#tomorrow-section:has(#tomorrow-runs.hidden) > .section-heading,
#completed-section:has(#completed-runs.hidden) > .section-heading,
#today-section:has(#today-runs.hidden) .section-toggle,
#tomorrow-section:has(#tomorrow-runs.hidden) .section-toggle,
#completed-section:has(#completed-runs.hidden) .section-toggle {
    border-radius: 10px;
}

/* Orderrader. */
.run {
    padding: 12px;
    background: var(--white);
}

.run.is-next {
    background: var(--white);
}

.run.is-running,
#running-runs > .run.is-running {
    background: var(--green-light);
    box-shadow: none;
}

.run.is-paused {
    background: var(--yellow-light);
}

.run.has-warning {
    background: var(--red-light);
}

#today-runs > .empty,
#tomorrow-runs > .empty {
    padding: 22px 14px;
    text-align: center;
}

/* Gemensam verktygsbox: samma panelhuvud som övriga Chiqflow. */
.mobile-tools {
    margin-top: 18px;
    padding: 0;
    overflow: hidden;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    box-shadow: none;
}

.mobile-tools-heading {
    display: grid;
    gap: 2px;
    min-height: 52px;
    padding: 8px 14px;
    align-content: center;
    background: var(--panel-head);
    color: var(--white);
    border-bottom: 2px solid var(--orange);
}

.mobile-tools-heading strong {
    font-size: 15px;
    line-height: 1.15;
}

.mobile-tools-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 12px;
}

.mobile-tool-button {
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0 10px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    background: var(--gray-50);
    color: var(--gray-700);
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
}

.mobile-tool-button:active,
.mobile-tool-button:focus-visible {
    border-color: var(--gray-300);
    background: var(--gray-100);
    color: var(--black);
}

/* Starta körning är primär arbetsåtgärd */
.run-actions.one {
    grid-template-columns: minmax(0, 1fr);
}

.run-actions .small-button.primary {
    width: 100%;
    border-color: var(--green);
    background: var(--green);
    color: var(--white);
}

.run-actions .small-button.primary:active,
.run-actions .small-button.primary:focus-visible {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: var(--white);
}


.quick-start-modal .quick-start-explanation {
    margin: 0 0 12px;
    color: var(--gray-700);
    font-size: 14px;
    line-height: 1.45;
}

.quick-start-modal textarea {
    min-height: 88px;
}