/* ===========================================================
   base.css - reset + typografi + bas-element/knapp/formulärstilar
   Konsoliderat hit (2026-08-20, GUI-moderniseringens etapp 1) från
   flera tidigare, kaskad-ordningsberoende lager som låg i slutet
   av webshop.css: "MODERNIZATION DRAFT v1" (2026-04-27, c0e8b6c),
   "Typography/accessibility override layer" (2025-12-05, 3400f0e,
   utökat 2026-04-27/28) och "Product grid/card consolidated layer"
   (2026-04-28, 4ca8785). De konkurrerande äldre deklarationerna är
   borttagna ur webshop.css - denna fil är nu den enda sanningskällan
   för dessa element, oavsett laddningsordning.
   =========================================================== */

/* --- Reset --- */
html, body {
  height: 100%;
}

/* Klassisk quirks/standards-mode-skillnad: <img> i <td> får annars
   ett par pixlars "gap" under sig pga baseline-rendering. Påverkar
   logo/vagn-/kontoikoner sajtbrett efter doctype-bytet i shop.jsp. */
img {
  vertical-align: middle;
  /* Många <img> i innehållsträdet har hårdkodade width/height-attribut
     (t.ex. width="400" på Outlet-sidans bild) utan någon mobil-anpassning -
     utan detta svämmar de över på smala skärmar. height:auto bevarar
     bildens proportioner när max-width krymper den. */
  max-width: 100%;
  height: auto;
}

/* --- Typografi ---
   system-ui-stacken och de förstorade/mer läsbara måtten är det
   senaste medvetna typografivalet (tillagt 2025-12-05, utökat med
   färre magiska tal 2026-04-27/28) - vi behåller det som grund för
   moderniseringen istället för det äldre Lato-valet. */
html {
  font-size: 16px;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif;
  font-size: 15px;
  color: var(--ws-color-text);
  background: #fff;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding: 0;
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: inherit;
  font-weight: 600;
  color: #111;
  line-height: 1.25;
  margin-top: 0.8em;
  margin-bottom: 0.4em;
}

h1 { font-size: clamp(1.8rem, 1.2rem + 1.5vw, 2.4rem); }
h2 { font-size: clamp(1.4rem, 1.1rem + 0.6vw, 1.8rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.9rem; }

p, li {
  font-size: 1rem;
  margin-bottom: 0.8em;
}

a,
a:link,
a:visited {
  color: var(--ws-color-primary);
  text-decoration: none;
}

a:hover {
  color: var(--ws-color-primary-hover);
  text-decoration: underline;
}

button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
}

/* --- Sidchrome (header/nav/footer) --- */
#headerTop {
  background: #fff;
}

#header,
.rk-1 {
  background: #fff;
}

#superBody {
  background: var(--ws-color-surface);
  border-top: 3px solid var(--ws-color-primary);
}

#horiz-menu {
  height: 54px;
  background: linear-gradient(180deg, #1f9dda 0%, #0b88c7 100%);
}

#horiz-menu a:link,
#horiz-menu a:visited {
  transition: background-color 0.15s ease;
}

#horiz-menu a:hover {
  background: rgba(255, 255, 255, 0.18);
}

#footer,
#footer td,
.footer {
  background: #ffffff;
  color: #333;
  border-top: 1px solid var(--ws-color-border);
}

/* --- Formulär/knappar --- */
input[type="text"],
input[type="TEXT"],
input[type="password"],
textarea,
select {
  background: #fff;
  border: 1px solid var(--ws-color-border);
  border-radius: var(--ws-radius-md);
  color: var(--ws-color-text);
  margin-bottom: 5px;
}

/* Inaktiverade textfält (t.ex. "rowSum"/ibland "qtyDisabled" i produktkortets köpformulär,
   RiskItemHtml.getItemFormFields) är beräknade summeringar, inte något användaren kan skriva
   i - såg tidigare identiska ut som de redigerbara fälten (vit ruta+ram), vilket dels signalerar
   "redigerbar" fast de inte är det, dels skapade en vit "stapel" av flera sådana rutor i rad på
   grå bakgrund (t.ex. .pcard-buyform - Johans feedback 2026-08-24). Nu genomskinliga så de
   smälter in i bakgrunden istället. */
input[type="text"]:disabled,
input[type="TEXT"]:disabled {
  background: transparent;
  border-color: transparent;
}

button,
input[type="submit"],
input[type="SUBMIT"],
input[type="button"],
input[type="BUTTON"] {
  background: var(--ws-color-primary);
  color: #fff;
  border: 1px solid transparent;
  border-radius: var(--ws-radius-md);
  padding: 6px 12px;
  margin-bottom: 5px;
}

button:hover,
input[type="submit"]:hover,
input[type="SUBMIT"]:hover,
input[type="button"]:hover,
input[type="BUTTON"]:hover {
  background: var(--ws-color-primary-hover);
}

button:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="submit"]:focus,
input[type="button"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 2px #00007C;
  background: rgba(85, 187, 229, 0.08);
}
/* :not(.ws-dialog-btn) - dialogknapparna (script/dialogs.js) har en egen
   primar/sekundar-formgivning med egen fokusmarkering. Utan undantaget vinner
   !important har over den, och OK-knappen blir ljusblek istallet for blå. */
button:not(.ws-dialog-btn):focus,
input[type="submit"]:focus,
input[type="SUBMIT"]:focus,
input[type="button"]:focus,
input[type="BUTTON"]:focus {
  color: var(--ws-color-text) !important;
  background: #e6f4fa !important;
  box-shadow: 0 0 0 2px #00007C;
}

/* --- Tabbar (jQuery UI) --- */
#tabs {
  border-color: var(--ws-color-border);
  box-shadow: var(--ws-shadow-sm);
}

#tabs .ui-state-active a {
  background: var(--ws-color-primary);
}

/* --- Produktkort (RiskItemHtmlCardLayout.java / RiskDirHtml.java) --- */
.product-card {
  background: var(--ws-color-surface);
  border-width: 1px;
  border-style: solid;
  border-color: var(--ws-color-border);
  border-radius: var(--ws-radius-md);
  box-shadow: var(--ws-shadow-sm);
  padding: 16px;
  text-align: center;
  box-sizing: border-box;
  transition: box-shadow 0.15s ease;
  margin-bottom: 8px;
}

.product-card:hover {
  box-shadow: 0 6px 16px rgba(2, 132, 199, 0.16);
}

.product-card-title a {
  color: var(--ws-color-primary);
}

/* --- Övrigt --- */
#buyBut {
    width: 50px !important;
}
#fTree a:focus,
#fTree a:active,
.jqueryFileTree a:focus,
.jqueryFileTree a:active {
  outline: none;
  border: none;
}

#fTree, .jqueryFileTree {
    max-width: 350px !important;
    /* Justera värdet vid behov */
    overflow-x: auto;
    box-sizing: border-box;
}