/* style.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap'); /* Lade till 500 weight för variation */

/* I ditt :root block, lägg till denna rad (eller ändra om du redan har en liknande) */
:root {
  /* ... dina befintliga variabler ... */
  --primary-color: #3B82F6;
  --primary-color-hover: #2563EB;
  --secondary-color: #60A5FA;
  --secondary-color-hover: #3B82F6;
  
  
  --title-color: #111827;         /* NY: Mycket mörkgrå för titlar (Tailwind Gray 900) */
  --text-color: #192638;          /* Brödtext (Tailwind Gray 800) - Ljusare än titlar */
  --text-color-light: #4B5563;    /* Lättare text (Tailwind Gray 600) */
  --text-on-primary: #FFFFFF;
  --font-family-base: 'Inter', sans-serif;
  --text-on-secondary: #FFFFFF;

  --background-color: #F3F4F6;
  --container-bg: #FFFFFF;
  --border-color: #D1D5DB;
  --focus-ring-color: rgba(59, 130, 246, 0.25);

  --disabled-bg: #E5E7EB;
  --disabled-text: #9CA3AF;

  --success-bg: #E8F5E9;
  --success-border: #4CAF50;
  --success-text: #1B5E20;

  --info-bg: #E0F7FA;
  --info-border: #00BCD4;
  --info-text: #006064;

  --error-bg: #FFEBEE;
  --error-border: #F44336;
  --error-text: #C62828;

  --font-family-base: 'Inter', sans-serif;
  --border-radius-base: 6px;
  --box-shadow-base: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.07);
}

/* --- Grundläggande Sidstilar --- */
body { 
    font-family: var(--font-family-base);
    margin: 0; 
    padding: 20px; 
    background-color: var(--background-color);
    color: var(--text-color);
    line-height: 1.6; 
}
/* --- Sidhuvud / Företagsinfo & Logotyp --- */
.site-header {
    background-color: var(--container-bg); 
    padding: 15px 0; 
    box-shadow: var(--box-shadow-base); 
    margin-bottom: 30px; 
    width: 100%; 
}

.header-content {
    max-width: 780px; 
    margin: 0 auto; 
    padding: 0 30px; 
    display: flex;
    justify-content: space-between; 
    align-items: center; 
    gap: 20px; 
}

.logo-container .logo-img {
    max-height: 60px; /* Justera detta värde för att ändra logotypens storlek */
    width: auto; 
    display: block; 
}

.company-info {
    text-align: right; 
    font-size: 0.85em; 
    color: var(--text-color-light); 
}

.company-info p {
    margin: 3px 0; 
}

.company-info .company-name {
    font-size: 1.1em; 
    font-weight: 500; 
    color: var(--text-color); 
    margin-bottom: 5px;
}

/* --- Responsivitet för Sidhuvud --- */
@media (max-width: 768px) {
    .header-content {
        padding: 0 20px; 
    }
    .logo-container .logo-img {
        max-height: 50px; /* Mindre logga på mindre skärmar */
    }
    .company-info {
        font-size: 0.8em;
    }
}

@media (max-width: 480px) {
    .header-content {
        flex-direction: column; 
        align-items: center;    
        text-align: center;     
        gap: 15px;
    }
    .company-info {
        text-align: center; 
    }
    .logo-container .logo-img {
        max-height: 45px; /* Ännu mindre logga på små skärmar */
    }
}
.container { 
    max-width: 900px;
    margin: 30px auto; 
    background-color: var(--container-bg); 
    padding: 25px 30px;
    border-radius: 10px; /* Något större än bas-rundning för huvudcontainer */
    box-shadow: var(--box-shadow-base); 
}

h1 {
    color: var(--title-color); /* ÄNDRAD */
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 15px; 
    margin-top: 0; 
    margin-bottom: 25px;
    font-size: 2em; 
    font-weight: 700;
}

h2 { 
    color: var(--title-color); /* ÄNDRAD */
    border-bottom: 1px solid var(--border-color); 
    padding-bottom: 10px;
    margin-top: 35px;
    margin-bottom: 20px;
    font-size: 1.5em;
    font-weight: 700;
}

/* --- Formulärelement --- */
label { 
    display: block; 
    margin-top: 18px;
    margin-bottom: 6px;
    font-weight: 500; /* Lite mindre tung än bold */
    color: var(--text-color-light); 
}

input[type="text"] { 
    width: 100%; 
    padding: 12px 15px;
    margin-top: 5px; 
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-base);
    box-sizing: border-box; 
    font-size: 1rem;
    color: var(--text-color);
    background-color: var(--container-bg); /* Kan vara samma som container eller en aning ljusare/mörkare */
    transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
input[type="text"]:focus { 
    border-color: var(--primary-color);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--focus-ring-color); 
}

/* Knappar */
button, 
.button { /* En generell .button klass om du vill använda den för <a> taggar etc. */
    display: inline-block; /* För att <a>-taggar ska bete sig som knappar om de får klassen .button */
    text-decoration: none; /* För <a>-taggar */
    background-color: var(--primary-color);
    color: var(--text-on-primary); 
    padding: 10px 18px;
    border: none; 
    border-radius: var(--border-radius-base);  
    cursor: pointer; 
    margin-top: 20px; 
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    transition: background-color 0.2s ease-in-out, transform 0.1s ease; 
}
button:hover,
.button:hover { 
    background-color: var(--primary-color-hover);
    transform: translateY(-1px);
}
button:active,
.button:active {
    transform: translateY(0px);
}
button:disabled,
.button:disabled { 
    background-color: var(--disabled-bg);
    color: var(--disabled-text);
    cursor: not-allowed;
    transform: none;
}

/* Sekundär knappstil (för "Välj fil" t.ex.) */
.button-secondary,
#customUploadBtn { /* Applicerar sekundär stil på #customUploadBtn */
    background-color: var(--secondary-color);
    color: var(--text-on-secondary);
}
.button-secondary:hover,
#customUploadBtn:hover {
    background-color: var(--secondary-color-hover);
}

#customUploadBtn {
    margin-right: 10px; 
    vertical-align: middle;
}
#chosenFileName { 
    font-style: italic;
    color: var(--text-color-light);
    font-size: 0.9em;
    vertical-align: middle;
}

/* --- Meddelanden --- */
.status-message { 
    margin-top: 20px; 
    padding: 12px 18px; 
    border-radius: var(--border-radius-base); 
    border-left-width: 5px;
    border-left-style: solid;
    font-size: 0.95rem;
}
.status-message.info { background-color: var(--info-bg); border-left-color: var(--info-border); color: var(--info-text);}
.status-message.success { background-color: var(--success-bg); border-left-color: var(--success-border); color: var(--success-text);}
.status-message.error { background-color: var(--error-bg); border-left-color: var(--error-border); color: var(--error-text);}

/* --- Orderdetalj-sektioner --- */
.order-details, 
.image-upload-section, 
.order-images-section { 
    margin-top: 35px; 
    padding-top: 25px; 
    border-top: 1px solid var(--border-color);
}

/* Orderdetaljer (dl, dt, dd) */
dl {
  margin-top: 15px;
}
dt { 
    font-weight: 700; /* ÄNDRAD */
    margin-top: 15px; 
    color: var(--title-color); /* ÄNDRAD */
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

dd { 
    margin-left: 0; 
    margin-bottom: 12px; 
    padding-left: 0;
    font-size: 1rem;
    color: var(--text-color-light); /* Behålls */
}

textarea#newCustomerNoteTextarea { /* Mer specifik selector */
    width: 100%;
    box-sizing: border-box; /* Mycket viktig tillsammans med width: 100% och padding */
    /* Lägg till andra stilar du vill ha specifikt för denna textarea här,
       eller låt dem ärvas från den mer generella 'textarea'-regeln. */
    padding: 12px 15px; /* Om den inte ärvs */
    margin-top: 5px; 
    border: 1px solid var(--border-color, #d1d8e0); 
    border-radius: var(--border-radius-base, 6px);
    font-size: 1rem;
    font-family: var(--font-family-base, 'Roboto', sans-serif);
    line-height: 1.5; 
    resize: vertical; 
}

textarea#newCustomerNoteTextarea:focus {
    border-color: var(--primary-color, #3498db);
    outline: 0;
    box-shadow: 0 0 0 0.2rem var(--focus-ring-color, rgba(52,152,219,.25));
}

/* --- Statusfärger för orderstatusen på portalen --- */
dd#orderStatus.status-text {
    font-weight: 500; /* Kan vara 700 för mer "punch" om du gillar det med versaler */
    padding: 5px 12px;   /* Lite mindre padding för en tajtare look */
    border-radius: 16px; /* Fortsatt rundad, "pill shape" */
    display: inline-block; 
    text-align: center;
    font-size: 0.8em;    /* Lite mindre textstorlek */
    letter-spacing: 0.5px; /* Kan ökas till 0.75px om texten känns för kompakt */
    text-transform: uppercase; /* STORA BOKSTÄVER */
    border-width: 1px;      /* Lägg till en tunn kant */
    border-style: solid;    /* Definiera kantstilen */
    /* border-color kommer att definieras per status nedan */
    min-width: auto; /* Behåll eller sätt t.ex. 90px om du vill ha mer enhetlig bredd */
    margin-top: 5px;
    line-height: 1.5;   /* Justera för att texten ska vara centrerad vertikalt */
}

/* Specifika statusfärger - Uppdaterad för modernare känsla */
dd#orderStatus.status-received { 
    color: #854d0e;            /* Din ursprungliga textfärg */
    background-color: #FEF3C7;  /* Ljus bärnsten/gul (Tailwind Amber 100) */
    border-color: #FDE68A;      /* Något mörkare bärnsten/gul (Tailwind Amber 200) */
}
dd#orderStatus.status-in-progress { 
    color: #0d47a1;            /* Din ursprungliga textfärg */
    background-color: #DBEAFE;  /* Ljusblå (Tailwind Blue 100) */
    border-color: #BFDBFE;      /* Något mörkare blå (Tailwind Blue 200) */
}
dd#orderStatus.status-ready { 
    color: #1b5e20;            /* Din ursprungliga textfärg */
    background-color: #D1FAE5;  /* Ljusgrön (Tailwind Emerald 100) */
    border-color: #A7F3D0;      /* Något mörkare grön (Tailwind Emerald 200) */
}
dd#orderStatus.status-completed { 
    color: #374151;            /* Något justerad mörkgrå (Tailwind Gray 700) */
    background-color: #F3F4F6;  /* Mycket ljusgrå (Tailwind Gray 100) */
    border-color: #E5E7EB;      /* Ljusgrå (Tailwind Gray 200) */
}
dd#orderStatus.status-cancelled { 
    color: #991B1B;            /* Något justerad mörkröd (Tailwind Red 700) */
    background-color: #FEE2E2;  /* Ljusrosa/röd (Tailwind Red 100) */
    border-color: #FECACA;      /* Något mörkare rosa/röd (Tailwind Red 200) */
}
dd#orderStatus.status-unknown { 
    color: #374151;            /* Samma som completed (Tailwind Gray 700) */
    background-color: #F3F4F6;  /* Samma som completed (Tailwind Gray 100) */
    border-color: #E5E7EB;      /* Samma som completed (Tailwind Gray 200) */
}

/* --- Bilder --- */
#orderImagesContainer { 
    display: flex;
    flex-wrap: wrap;
    gap: 15px; 
    margin-top: 15px;
}

#orderImagesContainer a {
    display: inline-block;
    text-decoration: none;
    line-height: 0;
    border-radius: var(--border-radius-base); /* Lägger till rundning på länken också */
    overflow: hidden; /* För att säkerställa att bilden inte går utanför rundade hörn */
    transition: box-shadow 0.2s ease, transform 0.2s ease; /* Flyttar hover-effekt till länken */
}
#orderImagesContainer a:hover {
    transform: scale(1.03);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.order-images-section img { /* Tog bort order-images-section klassen från img, appliceras på container-länken */
    width: 100%; /* Bilden fyller sin a-tagg */
    display: block; /* Tar bort extra utrymme under bilden */
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-color); /* Kan tas bort om a-taggen har box-shadow och det räcker */
    border-radius: var(--border-radius-base); /* Matchar a-taggen */
    object-fit: cover; 
    /* Ta bort individuell box-shadow och transition från img, hanteras av <a> nu */
    cursor: pointer;
}

/* Justering av bildstorlekar i flex container */
#orderImagesContainer > a { /* Direkt barn till container för storlekskontroll */
    width: calc(33.333% - 10px); /* (15px gap * 2) / 3 = 10px per item for 3 columns */
}


/* --- Responsiv Design --- */
@media (max-width: 768px) { 
    body { padding: 15px; }
    .container { margin: 15px auto; padding: 20px; }
    h1 { font-size: 1.7em; margin-bottom: 20px; }
    h2 { font-size: 1.35em; margin-top: 30px; margin-bottom: 15px; }

    /* Gemensam fontstorlek för input, textarea och knappar på mindre skärmar */
    input[type="text"], 
    textarea, /* <<< LADE TILL TEXTAREA HÄR */
    button, 
    .button, /* Om du använder denna klass */
    #customUploadBtn,
    #saveCustomerNotesBtn { /* <<< LADE TILL SPARA-KNAPPEN HÄR */
        font-size: 1rem; /* Behåll läsbar storlek, eller justera till t.ex. 0.95rem om du föredrar */
    }

    /* Knappar som ska vara fullbredd på mindre skärmar */
    #fetchOrderBtn, 
    #uploadImageBtn,
    #saveCustomerNotesBtn { /* <<< LADE TILL SPARA-KNAPPEN HÄR */
        width: 100%; 
        margin-left: 0; /* Nollställ eventuella sidomarginaler om de blir fullbredd */
        margin-right: 0;
    }
    
    #customUploadBtn { 
        display: block; /* Behåll om du vill ha den på egen rad */
        width: 100%; 
        margin-bottom: 8px; 
        margin-right: 0;
    }
    #chosenFileName { 
        display: block; 
        text-align: center; 
        margin-left:0; 
        margin-top: 8px; /* Ökade lite från 0 för bättre avstånd */
        font-size: 0.85em; 
    }

    #orderImagesContainer > a {
        width: calc(50% - 7.5px); 
    }
    dd { padding-left: 0; border-left: none; }
    dt { font-size: 0.85rem; }
    dd#orderStatus.status-text { min-width: 100px; font-size: 0.85em; padding: 6px 10px;}
}

/* Du har också ett @media (max-width: 480px) block,
   se till att textarea och #saveCustomerNotesBtn inkluderas där också om nödvändigt. */
@media (max-width: 480px) { 
    body { padding: 10px; }
    .container { padding: 15px; }
    h1 { font-size: 1.5em; }
    h2 { font-size: 1.2em; }
    
    #orderImagesContainer > a {
        width: 100%; 
    }
    dt, dd, 
    input[type="text"], 
    textarea, /* <<< LADE TILL TEXTAREA HÄR */
    button, 
    .button, 
    #customUploadBtn,
    #saveCustomerNotesBtn { /* <<< LADE TILL SPARA-KNAPPEN HÄR */
        font-size: 0.9rem; 
    }
    dd#orderStatus.status-text { padding: 5px 8px; }
}

#throttleCountdown {
    background-color: #FEF3C7;
    border: 1px solid #FCD34D;
    padding: 10px;
    border-radius: 6px;
    font-size: 1rem;
}

/* ======================================= */
/* == NY OCH FÖRBÄTTRAD STYLING FÖR OFFERT == */
/* ======================================= */

.quote-card {
  background-color: #ffffff;
  border: 1px solid #e9ecef;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.05);
  margin-bottom: 2rem;
}

.quote-card .card-header {
  background-color: #f8f9fa;
  font-weight: 600;
  color: #343a40;
  border-bottom: 1px solid #e9ecef;
  padding: 0.75rem 1.25rem;
}

.quote-card .card-body {
    padding: 1.25rem;
}

.quote-card .card-body h6 {
    font-size: 0.9rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
}

.quote-card .list-group {
    border-top: 1px solid #e9ecef;
}

.quote-card .list-group-item {
    padding: 0.75rem 0; /* Tar bort sidostoppning från list-item */
    border-bottom: 1px solid #e9ecef;
    background-color: transparent;
}
.quote-card .list-group-item:last-child {
    border-bottom: none;
}

/* Detta är den magiska delen som separerar text och pris */
.spec-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.totals-section {
    border-top: 2px solid #ced4da;
    padding-top: 1rem;
    margin-top: 1rem;
    text-align: right; /* Flyttar allt inuti till höger */
}

.totals-section .spec-row span:first-child {
    font-weight: 500;
    color: #495057;
}

.grand-total {
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: 0.5rem;
}

.actions-section {
    text-align: right;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e9ecef;
}


/* ========================================================== */
/* == STYLING FÖR "BOKA NYTT ÄRENDE"-FORMULÄRET
/* ========================================================== */

#newOrderSection .card-header {
  font-weight: 500;
  padding: 0.75rem 1.25rem;
  background-color: #f8f9fa;
  border-bottom: 1px solid #dee2e6;
}

#newOrderSection .card-body {
    padding: 1.25rem;
}

/* Ger avstånd mellan varje fält */
.form-group {
    margin-bottom: 1rem;
}

/* Styling för texten ovanför fälten (labels) */
.form-group label {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #495057;
}

/* Styling för själva input-fälten och textarea */
.form-control {
    display: block;
    width: 100%;
    height: calc(1.5em + 0.75rem + 2px);
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    box-sizing: border-box; /* Viktigt för att padding inte ska spräcka bredden */
}

/* Anpassar höjden för textrutan */
textarea.form-control {
    height: auto;
}

/* Stil när man klickar i ett fält */
.form-control:focus {
    color: #495057;
    background-color: #fff;
    border-color: #80bdff;
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Styling för knapparna i formuläret */
.btn-secondary {
    color: #fff;
    background-color: #6c757d;
    border-color: #6c757d;
}
.btn-secondary:hover {
    background-color: #5a6268;
    border-color: #545b62;
}
.btn-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}
.btn-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* ======================================= */
/* == SLUTGILTIG STYLING FÖR NYA FUNKTIONER == */
/* ======================================= */

/* Behållaren som har samma stil som din .container */
#portal-actions-container {
    max-width: 900px;
    margin: 30px auto;
    background-color: var(--container-bg);
    padding: 25px 30px;
    border-radius: 10px;
    box-shadow: var(--box-shadow-base);
}

/* Raden med knappar */
.action-buttons-row {
    display: flex;
    justify-content: flex-end; /* Flyttar knapparna till höger */
    gap: 10px; /* Mellanrum mellan knapparna */
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #e9ecef;
}

/* Sektionerna som visas/döljs */
.action-content-section {
    padding: 20px;
    background-color: #f8f9fa; /* Ljus bakgrund för att separera */
    border-radius: 5px;
}

/* Styling för formuläret */
.form-group { margin-bottom: 1rem; }
.form-group label { display: block; margin-bottom: .5rem; font-weight: 500; }
.form-control {
    display: block; width: 100%; padding: .375rem .75rem; font-size: 1rem;
    line-height: 1.5; color: #495057; background-color: #fff;
    border: 1px solid #ced4da; border-radius: .25rem; box-sizing: border-box;
}
textarea.form-control { height: auto; }
.form-actions { text-align: right; margin-top: 1rem; }
.form-actions .btn-light {
    background-color: #f8f9fa; border-color: #dee2e6;
}

/* Styling för historik-listan */
.history-item {
    background-color: #ffffff; border: 1px solid #e9ecef;
    padding: 1rem; margin-bottom: 1rem; border-radius: 5px;
}
#cancelNewOrderBtn {
  background-color: #6c757d; /* Standard grå färg */
  color: #ffffff;           /* Vit text */
  border-color: #6c757d;
}

#cancelNewOrderBtn:hover {
  background-color: #5a6268; /* En mörkare grå vid hovring */
  border-color: #545b62;
}

/* Styling för rekommendations-rutan */
.upsell-card {
    border: 2px dashed #007bff; /* Streckad blå linje för att fånga uppmärksamhet */
    background-color: #f0f8ff; /* Mycket ljusblå bakgrund (AliceBlue) */
    margin-top: 2rem;
    border-radius: 8px;
}
.upsell-card .card-body {
    text-align: center;
}
.upsell-card h5 {
    color: #0056b3;
}