:root {
    /* =========================================================
       1. DIN HUVUDFÄRG (Det enda du behöver ändra!)
       ========================================================= */
    --brand-color: #0d6efd; 

    /* =========================================================
       2. AUTOMATISKA NYANSER (Rör ej)
       ========================================================= */
    /* Skapar en stabil mörkare variant för menyer/text (30% mörkare) */
    --brand-dark: color-mix(in srgb, var(--brand-color), black 30%);
    
    /* Skapar en genomskinlig variant för fokus-ringar (25% synlighet) */
    --brand-fade: color-mix(in srgb, var(--brand-color), transparent 75%);

    /* Skriv över Bootstraps grundfärg */
    --bs-primary: var(--brand-color);
    --bs-link-color: var(--brand-dark);
    --bs-link-hover-color: var(--brand-color);
}

/* =========================================
   BOOTSTRAP OVERRIDES (Utan RGB-krav)
   ========================================= */

/* --- KNAPPAR (SOLID) --- */
.btn-primary {
    --bs-btn-bg: var(--brand-color);
    --bs-btn-border-color: var(--brand-color);
    
    /* Hover/Active styrs av color-mix */
    --bs-btn-hover-bg: color-mix(in srgb, var(--brand-color), black 15%);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--brand-color), black 20%);
    --bs-btn-active-bg: color-mix(in srgb, var(--brand-color), black 20%);
    --bs-btn-active-border-color: color-mix(in srgb, var(--brand-color), black 25%);
    
    --bs-btn-disabled-bg: var(--brand-color);
    --bs-btn-disabled-border-color: var(--brand-color);
}

/* Fixa fokus-ringen (glow) utan RGB-siffror */
.btn-primary:focus, .btn-primary.focus {
    box-shadow: 0 0 0 0.25rem var(--brand-fade) !important;
}

/* --- KNAPPAR (OUTLINE) --- */
.btn-outline-primary {
    --bs-btn-color: var(--brand-color);
    --bs-btn-border-color: var(--brand-color);
    --bs-btn-hover-bg: var(--brand-color);
    --bs-btn-hover-border-color: var(--brand-color);
    --bs-btn-active-bg: var(--brand-color);
    --bs-btn-active-border-color: var(--brand-color);
    --bs-btn-disabled-color: var(--brand-color);
    --bs-btn-disabled-border-color: var(--brand-color);
}
.btn-outline-primary:focus, .btn-outline-primary.focus {
    box-shadow: 0 0 0 0.25rem var(--brand-fade) !important;
}

/* --- FORMULÄR (Fokus-ringar) --- */
.form-control:focus, .form-select:focus {
    border-color: var(--brand-color);
    box-shadow: 0 0 0 0.25rem var(--brand-fade) !important;
}
.form-check-input:checked {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}

/* --- PAGINERING & LISTOR --- */
.page-item.active .page-link, .list-group-item.active {
    background-color: var(--brand-color);
    border-color: var(--brand-color);
}
.page-link { color: var(--brand-color); }
.page-link:hover { color: var(--brand-dark); }
.dropdown-item.active, .dropdown-item:active { background-color: var(--brand-color); }


/* =========================================
   TEMPLATE (MyResume) OVERRIDES
   ========================================= */

/* --- Allmänna länkar --- */
a { color: var(--brand-dark); }
a:hover { color: var(--brand-color); }

/* --- Back to top knapp --- */
.back-to-top { background: var(--brand-color); }
.back-to-top:hover { background: var(--brand-dark); }

/* --- Preloader --- */
#preloader:before {
    border: 6px solid var(--brand-color);
    border-top-color: #fff;
    border-bottom-color: #fff;
}

/* --- Navigation / Header (Mörk variant) --- */
.nav-menu a:hover, 
.nav-menu .active, 
.nav-menu .active:focus, 
.nav-menu li:hover > a {
    background: var(--brand-dark);
}
.mobile-nav-active .mobile-nav-toggle {
    background-color: var(--brand-dark);
}

/* --- Hero --- */
#adress p span { color: var(--brand-color); }
#adress .social-links a:hover { color: var(--brand-color); }

/* --- Rubriker --- */
.section-title h2::after { background: var(--brand-dark); }

/* --- Ikoner & Dekor --- */
.material .content ul i { color: var(--brand-color); }
.facts .count-box i { background: var(--brand-color); }
.skills .progress-bar { background-color: var(--brand-dark); }

/* --- Resume --- */
.resume .resume-title { color: var(--brand-dark); }
.resume .resume-item { border-left: 2px solid var(--brand-dark); }
.resume .resume-item h4 { color: var(--brand-dark); }
.resume .resume-item::before { border: 2px solid var(--brand-dark); background: #fff; }

/* --- Portfolio --- */
.portfolio #portfolio-flters li:hover, 
.portfolio #portfolio-flters li.filter-active { color: var(--brand-dark); }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet { border: 1px solid var(--brand-dark); }
.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet-active { background-color: var(--brand-dark); }

/* --- Contact & Services Icons --- */
.contact .info i {
    color: var(--brand-dark);
    /* Skapar en ljus bakgrund (tint) genom att blanda med vitt */
    background: color-mix(in srgb, var(--brand-dark), white 90%);
}
.contact .info .email:hover i, 
.contact .info .address:hover i, 
.contact .info .phone:hover i {
    background: var(--brand-dark);
    color: #fff;
}
.contact .php-email-form button[type=submit] { background: var(--brand-color); }
.contact .php-email-form button[type=submit]:hover { background: var(--brand-dark); }

/* --- Footer --- */
#footer .social-links a { background: var(--brand-dark); }
#footer .social-links a:hover { background: var(--brand-color); }

/* --- Weboffert Specifikt --- */
.searchvgrupp:not(:placeholder-shown) {
    border: 2px solid color-mix(in srgb, var(--brand-color), white 40%);
}
.portfolio-wrap {
    background-color: transparent !important; /* eller #fff om du föredrar det */
}
.gradient-custom-2 {
    background: var(--brand-color);
    /* Skapar en dynamisk övertoning baserad på bolagets färg */
    background: linear-gradient(to right, 
        var(--brand-dark), 
        var(--brand-color), 
        color-mix(in srgb, var(--brand-color), white 20%), 
        var(--brand-color), 
        var(--brand-dark)
    );
}




/* =========================================
   PORTAL / DASHBOARD KNAPPAR
   ========================================= */
/* =========================================
   PORTAL / DASHBOARD KNAPPAR (Bootstrap 5 API)
   ========================================= */
.btn-portal {
    /* 1. Grundfärger (Light-läge) */
    --bs-btn-bg: color-mix(in srgb, var(--brand-color), white 85%);
    --bs-btn-color: var(--brand-dark);
    --bs-btn-border-color: color-mix(in srgb, var(--brand-color), white 70%);

    /* 2. Hover-färger (Fylls med brand-color) */
    --bs-btn-hover-bg: var(--brand-color);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-border-color: var(--brand-color);

    /* 3. Active-färger (När man klickar) */
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-border-color: var(--brand-dark);

    transition: all 0.2s ease-in-out;
}

/* Styling för ikonen i normalläge */
.btn-portal i {
    color: var(--brand-color);
    transition: color 0.2s ease-in-out;
}

/* Hover-effekter för layout (Lyft och skugga) */
.btn-portal:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px color-mix(in srgb, var(--brand-color), transparent 70%);
}

/* Tvinga ikonen att ärva den vita färgen från knappens hover-color */
.btn-portal:hover i {
    color: inherit !important;
}

/* =========================================
   PORTAL / DASHBOARD CONTAINERS
   ========================================= */
.portal-container {
  max-width: 1100px;
  background-color: #ffffff;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  min-height: 80vh;
  padding: 30px;
}
.back-link {
  font-weight: 500;
  font-size: 0.9em;
  display: inline-block;
  margin-bottom: 10px;
  color: var(--brand-dark);
}

/* =========================================
   SÖK & FILTER (Lager/Ordrar)
   ========================================= */
.filter-bar {
  background: color-mix(in srgb, var(--brand-color), white 96%);
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 20px;
  border: 1px solid color-mix(in srgb, var(--brand-color), white 85%);
}
.filter-form { display: flex; width: 100%; align-items: center; gap: 15px; flex-wrap: wrap; }
.filter-group { flex: 1; min-width: 200px; }
.search-group { flex: 2; display: flex; gap: 10px; }
.search-group input { margin-bottom: 0; }
.search-group button { width: auto; margin-bottom: 0; }

/* =========================================
   STYLING FÖR SÖKRUTOR OCH FILTER (Portal)
   ========================================= */
.portal-container input[type="text"]:focus,
.portal-container input[type="search"]:focus,
.portal-container select:focus,
.portal-container .form-control:focus,
.portal-container .form-select:focus {
    border-color: var(--brand-color);
    outline: none;
    box-shadow: 0 0 0 0.25rem var(--brand-fade);
}

/* Snyggt fokus-läge (när man klickar i rutan) som använder bolagets färg */
.portal-container input[type="text"]:focus,
.portal-container input[type="search"]:focus,
.portal-container select:focus {
    border-color: var(--brand-color);
    outline: none;
    box-shadow: 0 0 0 0.25rem var(--brand-fade); /* Använder fade-variabeln från toppen av din fil */
}

/* Anpassning för sök-knappen bredvid fältet */
.search-group button {
    padding: 12px 20px;
    font-size: 16px;
    border-radius: 6px;
}
/* Ser till att knapp och sökfält ligger på samma rad */
.portal-container form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Tvingar sökfältet att ge plats åt knappen */
.portal-container input[type="text"],
.portal-container input[type="search"] {
    flex-grow: 1;
    width: auto !important;
}

/* Ser till att knapp och sökfält ligger på samma rad */
.portal-container form {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Tvingar sökfältet att ge plats åt knappen */
.portal-container input[type="text"],
.portal-container input[type="search"] {
    flex-grow: 1;
    width: auto !important;
}

/* =========================================
   UNIFIERADE TABELLER (Sök & Ordrar)
   ========================================= */
/* Gör så att alla huvudtabeller i portalen får samma bredd och marginal */
.order-table, 
.portal-container table { 
    width: 100%; 
    border-collapse: collapse; 
    margin-top: 10px; 
}

/* Enhetliga tabellhuvuden (Färgas automatiskt efter bolaget) */
.order-table th,
.portal-container table th {
    text-align: left;
    background: var(--brand-color);
    color: #fff;
    padding: 12px 15px;
    font-weight: 600;
}

/* Enhetliga celler (Samma luftighet överallt) */
.order-table td,
.search-row td,
.portal-container table td {
    padding: 12px 15px;
    border-bottom: 1px solid #eee;
    vertical-align: middle;
}

/* Samma snygga hover-effekt oavsett om det är en order eller ett sökresultat */
.order-table tr:hover,
.search-row:hover {
    background-color: color-mix(in srgb, var(--brand-color), white 92%) !important;
    outline: 1px solid var(--brand-color);
    transform: translateY(-1px);
    z-index: 1;
    position: relative;
    cursor: pointer;
}

/* Texten blir mörkare vid hover för extra tydlighet */
.order-table tr:hover td,
.search-row:hover td {
    color: var(--brand-dark);
}

/* =========================================
   DÖLJ FELSÖKNING (För lager.asp)
   ========================================= */
.debug {
    display: none !important;
}

/* =========================================
   ORDER DETALJER & SUMMERING
   ========================================= */
.detail-header { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; }
.detail-box {
  flex: 1; min-width: 250px; background: #f9f9f9; padding: 15px;
  border-radius: 4px; border: 1px solid #eee;
}
.detail-box h4 { border-bottom: 1px solid #ddd; padding-bottom: 5px; color: var(--brand-dark); }
.row-card { border: 1px solid #eee; border-radius: 4px; margin-bottom: 15px; background: #fff; overflow: hidden; }
.row-header {
  background: color-mix(in srgb, var(--brand-color), white 92%);
  padding: 10px 15px; display: flex; justify-content: space-between;
  font-weight: bold; color: var(--brand-dark);
}
.row-content { padding: 15px; }
.dim-table { width: 100%; font-size: 0.9em; border-collapse: collapse; margin-top: 10px; }
.dim-table th { background: #f5f5f5; padding: 6px; border-bottom: 1px solid #ddd; text-align: left; }
.dim-table td { padding: 6px; border-bottom: 1px solid #eee; }

.summary-box {
  text-align: right; margin-top: 20px; font-size: 1.1em; padding: 20px;
  background: #fafafa; border-top: 2px solid var(--brand-color);
}
.summary-row { display: flex; justify-content: flex-end; gap: 20px; margin-bottom: 5px; }

/* Informations & Action Boxar */
.info-box {
    background-color: color-mix(in srgb, var(--brand-color), white 96%);
    border: 1px solid color-mix(in srgb, var(--brand-color), white 70%);
    border-left: 5px solid var(--brand-color);
    padding: 15px; margin-bottom: 20px; border-radius: 4px;
}
.action-bar { display: flex; justify-content: flex-end; margin-bottom: 20px; }
.qty-box {
  border: 1px solid var(--brand-color); padding: 2px 8px; border-radius: 3px;
  color: var(--brand-dark); font-weight: bold;
}
/* =========================================
   LAGER-VY (Kort, Listor, Bilder)
   ========================================= */
.block-card {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  margin-bottom: 25px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.block-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.block-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.block-data {
  padding: 20px;
  flex: 1;
}

.block-img {
  width: 240px;
  min-width: 240px;
  background-color: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  border-left: 1px solid #eee;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.block-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease;
}

.block-img:hover img {
  transform: scale(1.05);
}

.img-badge {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: var(--brand-dark);
  color: white;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.85em;
  font-weight: bold;
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* Skiv-lista tabell */
.slab-list {
  margin-top: 15px;
  border-top: 1px solid #eee;
}
.slab-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid #f9f9f9;
  font-size: 0.95em;
}
.slab-row:nth-child(even) {
  background: color-mix(in srgb, var(--brand-color), white 98%);
}
.slab-nr {
  font-weight: 700;
  min-width: 70px;
  color: var(--brand-dark);
}
.slab-note {
  color: #d35400;
  font-style: italic;
  font-size: 0.9em;
}
.slab-back {
  color: #777;
  font-size: 0.85em;
  display: block;
  margin-top: 2px;
}
.slab-price-block {
  text-align: right;
  min-width: 110px;
  margin-left: 10px;
}
.slab-price-main {
  font-weight: 700;
  color: var(--brand-dark);
  display: block;
}
.slab-price-sub {
  font-size: 0.85em;
  color: #888;
  display: block;
}
.slab-qty {
  color: #27ae60;
  font-weight: bold;
  background: #eafaf1;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
  margin-right: 5px;
}
.avail-tag {
  margin-top: 10px;
}
.avail-warn {
  color: #e67e22;
  font-weight: bold;
}

/* =========================================
   LIGHTBOX / GALLERI (För Lager)
   ========================================= */
#lightbox {
  display: none;
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.lightbox-content {
  max-width: 90%;
  max-height: 80vh;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}
.lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  color: #fff;
  font-size: 40px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  z-index: 2001;
}
.lightbox-close:hover {
  color: var(--brand-color);
}
.lightbox-nav {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -25px;
  color: white;
  font-weight: bold;
  font-size: 30px;
  transition: 0.3s;
  user-select: none;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  z-index: 2001;
}
.lightbox-nav:hover {
  background-color: var(--brand-color);
}
.prev { left: 20px; }
.next { right: 20px; }
.lightbox-caption {
  color: #ccc;
  margin-top: 15px;
  font-size: 1.1em;
  text-align: center;
}

/* Mobilanpassning för Lager */
@media (max-width: 768px) {
  .block-info {
    flex-direction: column-reverse;
  }
  .block-img {
    width: 100%;
    height: 250px;
    border-left: none;
    border-bottom: 1px solid #eee;
  }
}