/* ==========================================================================
   Background — "Outline"
   A near-white canvas, lighter than today, where cards are defined by a
   crisp, clearly visible border rather than by tone. Bright and open;
   lines do the work. Smaller 8px corners suit the drawn-edge look.

   Styles surfaces only: the surface tokens, cards, card-like panels,
   modal corners, dashed inner sections and notice callouts. Loaded after skeleton.css and menu.css, in the order background, tabs, forms, tables, services.
   ========================================================================== */

:root {
    --sk-canvas: #f7f8fa;
    --sk-bar: #ffffff;
    --sk-card: #ffffff;
    --sk-sunken: #f5f6f8;
    --sk-line: #dadfe6;
    --sk-line-soft: #eceef2;
    --sk-radius-card: 8px;

    --bg-card-edge: #d1d7df;
    --bg-card-shadow: none;
    --bg-section-line: #dde2e8;
    --bg-nested-radius: 6px;

    /* Menu labels and icons sit straight on the canvas; tuned for AA
       (labels 4.9:1, icons 3.6:1). */
    --mn-muted: #646e7e;
    --mn-icon: #7a8494;
}

/* --- Cards ----------------------------------------------------------------- */
#kt_body .full-content-container .card:not(.card-dashed) {
    background-color: var(--sk-card);
    border: 1px solid var(--bg-card-edge);
    border-radius: var(--sk-radius-card);
    box-shadow: var(--bg-card-shadow);
}

#kt_body .full-content-container .card.shadow-sm,
#kt_body .full-content-container .card.shadow {
    box-shadow: var(--bg-card-shadow) !important;
}

/* A card that asks for .border (without its own colour) gets the edge colour. */
#kt_body .full-content-container .card.border:not([class*="border-"]) {
    border-color: var(--sk-line) !important;
}

/* Cards inside cards (billing addresses, wrappers) stay quiet: no shadow,
   no frame unless they ask for one, a smaller radius. */
#kt_body .full-content-container .card .card,
#kt_body .full-content-container .modal .card {
    border-color: transparent;
    border-radius: var(--bg-nested-radius);
    box-shadow: none !important;
}

#kt_body .full-content-container .card .card.border:not([class*="border-"]) {
    border-color: var(--sk-line) !important;
}

/* Coloured strips that run edge to edge at the top or bottom of a card
   (e.g. the auto-billing banner on Services) follow the card's corners. */
#kt_body .full-content-container .card > .rounded-top {
    border-top-left-radius: calc(var(--sk-radius-card) - 1px) !important;
    border-top-right-radius: calc(var(--sk-radius-card) - 1px) !important;
}

#kt_body .full-content-container .card > .rounded-bottom,
#kt_body .full-content-container .card > .card-rounded-bottom {
    border-bottom-left-radius: calc(var(--sk-radius-card) - 1px) !important;
    border-bottom-right-radius: calc(var(--sk-radius-card) - 1px) !important;
}

/* --- Panels built from utilities (bg-white + shadow-sm) look like cards ------ */
#kt_body .full-content-container .shadow-sm:is(.bg-white, .bg-body):not(.btn, .itooltip, .card) {
    border: 1px solid var(--bg-card-edge);
    border-radius: var(--sk-radius-card) !important;
    box-shadow: var(--bg-card-shadow) !important;
}

/* --- Modals share the card corners ------------------------------------------- */
#kt_body .modal-content {
    border-radius: var(--sk-radius-card);
}

#kt_body .modal-content > .modal-header {
    border-top-left-radius: var(--sk-radius-card);
    border-top-right-radius: var(--sk-radius-card);
}

#kt_body .modal-content > .modal-footer {
    border-bottom-left-radius: var(--sk-radius-card);
    border-bottom-right-radius: var(--sk-radius-card);
}

/* --- Inner sections ----------------------------------------------------------
   The dashed boxes around form sections ("Profil", "Personuppgifter",
   popup forms) become a quiet solid hairline at the nested radius. No fill:
   form inputs inside may be filled themselves. */
#kt_body .border-dashed:is(.border-gray-300, .border-gray-400, .border-gray-500, .border-primary):not(.notice, .alert, .card, .nav-link, .btn, .form-control, [class*="bg-light-"], .border-left-0, .bg-danger):not(.sv *) {
    border-style: solid !important;
    border-color: var(--bg-section-line) !important;
    border-radius: var(--bg-nested-radius) !important;
}

/* A whole card drawn dashed gets the normal card edge. */
#kt_body .full-content-container .card.border-dashed:is(.border-gray-300, .border-gray-400, .border-gray-500):not(.sv *) {
    border-style: solid !important;
    border-color: var(--sk-line) !important;
}

/* Dashed top/bottom rules (e.g. the Swish instructions) become hairlines. */
#kt_body .border-dashed.border-left-0.border-right-0:not(.sv *) {
    border-style: solid !important;
    border-color: var(--sk-line-soft) !important;
}

/* --- Callouts ------------------------------------------------------------------
   Notices and dashed alerts keep their colour meaning but lose the dashes:
   a barely tinted fill drawn by a clearly visible hue border. Titles, links and icons are darkened to the
   hue's AA shade (the stock yellow title was 1.5:1 on its own fill). */
#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]).border-primary {
    --co-bg: #eef7fe; --co-soft: #f7fbff; --co-edge: #b6dcf6; --co-edge-strong: #7cc3f2;
    --co-accent: #009ef7; --co-title: #0a5e96; --co-body: #3a6385; --co-icon: #0089d9;
}

/* ### App refresh: info reads as brand blue too (two blues, no purple) */
#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]).border-info {
    --co-bg: #eef7fe; --co-soft: #f7fbff; --co-edge: #b6dcf6; --co-edge-strong: #7cc3f2;
    --co-accent: #009ef7; --co-title: #0a5e96; --co-body: #3a6385; --co-icon: #0089d9;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]).border-success {
    --co-bg: #ebf9f1; --co-soft: #f6fcf9; --co-edge: #ace2c4; --co-edge-strong: #7fd0a3;
    --co-accent: #2fb46c; --co-title: #17703f; --co-body: #3d6a51; --co-icon: #23915a;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]).border-warning {
    --co-bg: #fff7e2; --co-soft: #fffcf3; --co-edge: #f2d58a; --co-edge-strong: #e6c35f;
    --co-accent: #e8ac00; --co-title: #7a5200; --co-body: #6b5a33; --co-icon: #b07800;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]).border-danger {
    --co-bg: #fff0f3; --co-soft: #fff8fa; --co-edge: #f5bccb; --co-edge-strong: #f08ea6;
    --co-accent: #f1416c; --co-title: #b3173f; --co-body: #7d3e4e; --co-icon: #e0305c;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]):not(.nav-link, .btn, .bg-danger):not(.sv *) {
    background-color: var(--co-soft) !important;
    border: 1px solid var(--co-edge-strong) !important;
    border-radius: var(--bg-nested-radius) !important;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]):not(.nav-link, .btn, .bg-danger):not(.sv *) :is(.text-primary, .text-info, .text-success, .text-warning, .text-danger) {
    color: var(--co-title) !important;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]):not(.nav-link, .btn, .bg-danger):not(.sv *) .opacity-75:is(.text-primary, .text-info, .text-success, .text-warning, .text-danger) {
    color: var(--co-body) !important;
    opacity: 1 !important;
}

#kt_body .border-dashed:is(.notice, .alert, [class*="bg-light-"]):not(.nav-link, .btn, .bg-danger):not(.sv *) :is(svg, .svg-icon):is(.text-primary, .text-info, .text-success, .text-warning, .text-danger) {
    color: var(--co-icon) !important;
}

/* The solid red staff notice stays solid; only the dashes go. */
#kt_body .notice.bg-danger.border-dashed:not(.sv *) {
    border-style: solid !important;
    border-color: #d92f5a !important;
    border-radius: var(--bg-nested-radius) !important;
}