/* Calc_summary.css — Kalkylsammanställning (egen sida) */

#page-calc-summary{ padding: 0; }

.calc-summary-layout{
    display: grid;
    grid-template-columns: minmax(0,1fr) 340px;
    gap: 20px;
    align-items: start;
}
@media (max-width: 960px){
    .calc-summary-layout{ grid-template-columns: 1fr; }
}

.calc-summary-main{ min-width: 0; }
.calc-summary-sidebar{ min-width: 0; position: sticky; top: 20px; }

.calc-summary-pill{
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 10px;
    border: 1px solid #dbe7ef; border-radius: 999px; background: #f8fbfd;
    color: #1f5160; text-decoration: none;
    font-size: 11px; font-weight: 700; font-family: inherit;
}
.calc-summary-pill span{ color: #6b8793; }

.calc-summary-session{ margin-bottom: 12px; }
.calc-summary-sid-pill{
    display: inline-block; padding: 3px 10px;
    border: 1px solid #bfdbfe; background: #eff6ff; color: #1e40af;
    border-radius: 6px;
    font-family: monospace; font-size: 11px; font-weight: 700;
}

.calc-summary-content{ margin-bottom: 14px; }

.calc-summary-empty{
    padding: 32px; background: #fff; border: 1px solid #e5e7eb;
    border-radius: 12px; text-align: center;
    color: #94a3b8; font-size: 14px;
}

.calc-summary-group{
    background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
    margin-bottom: 12px; overflow: hidden;
}

.calc-summary-group-header{
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px;
    background: #f8fafc; border-bottom: 1px solid #e5e7eb;
    font-size: 12px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .5px;
}
.calc-summary-group-header :last-child{
    color: #024550; font-size: 14px; text-transform: none; letter-spacing: 0;
}

.calc-summary-row{
    display: grid;
    grid-template-columns: 1fr auto 28px 28px;
    align-items: center; gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f1f5f9;
}
.calc-summary-row:last-child{ border-bottom: none; }

.calc-summary-eye, .calc-summary-edit, .calc-summary-del{
    background: none; border: none; padding: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer; color: #64748b;
    border-radius: 6px;
}
.calc-summary-eye:hover, .calc-summary-edit:hover{
    background: #f1f5f9; color: #024550;
}
.calc-summary-del{ color: #ef4444; font-size: 18px; font-weight: 700; }
.calc-summary-del:hover{ background: #fee2e2; }

.calc-summary-row-main{ min-width: 0; }
.calc-summary-row-name{
    font-size: 14px; font-weight: 600; color: #1a1a1a;
    white-space: normal; word-break: break-word;
}
.calc-summary-row-cat{
    font-size: 11px; color: #94a3b8; margin-top: 2px;
}
.calc-summary-row-price{
    font-size: 15px; font-weight: 700; color: #024550;
    text-align: right;
}

.calc-summary-expand{
    grid-column: 1 / -1;
    margin-top: 8px; padding: 10px 14px;
    background: #f8fafc; border-left: 3px solid #024550; border-radius: 0 8px 8px 0;
}
.calc-summary-expand-section{
    font-size: 11px; font-weight: 700; color: #64748b;
    text-transform: uppercase; letter-spacing: .5px;
    margin: 6px 0 4px;
}
.calc-summary-expand-row{
    display: flex; justify-content: space-between; align-items: center;
    padding: 3px 0; font-size: 13px; color: #334155;
}
.calc-summary-expand-row strong{ color: #024550; }

/* "Lägg till produkt"-knapp längst ner i content */
.calc-summary-add-row{ margin-top:16px; }
.calc-summary-add-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px; border-radius:12px;
    background:#fff; border:2px dashed #cbd5e1;
    color:#024550; font-size:14px; font-weight:700; font-family:inherit;
    cursor:pointer; transition:all .15s;
}
.calc-summary-add-btn:hover{
    border-color:#024550; border-style:solid;
    background:#f0fdfa; color:#0d9488;
}

/* ============================================================
   HEADER: kundinfo + prospektbilder + actions
   ============================================================ */
.cs-header{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }

.cs-head-block{
    border:1px solid #e5e7eb; border-radius:10px; background:#fff; overflow:hidden;
}
.cs-head-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:12px 16px; cursor:pointer;
    transition:background .15s;
}
.cs-head-row:hover{ background:#f8fafc; }
.cs-head-left{
    display:flex; align-items:center; gap:10px; min-width:0; flex:1;
    color:#024550;
}
.cs-head-left strong{ font-size:14px; font-weight:700; color:#024550; }
.cs-head-summary{
    font-size:13px; color:#334155; font-weight:600;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1; min-width:0;
}
.cs-head-chev{ flex-shrink:0; transition:transform .2s; }
.cs-head-body{
    padding:14px 16px 16px; border-top:1px solid #eef2f7; background:#fafbfc;
}

/* Form */
.cs-form{
    display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px 14px;
}
.cs-field{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.cs-field-wide{ grid-column:1 / -1; }
.cs-field label{
    font-size:11px; font-weight:700; color:#64748b; text-transform:uppercase; letter-spacing:.4px;
}
.cs-field input, .cs-field textarea{
    padding:8px 10px; border:1px solid #e5e7eb; border-radius:6px;
    font-size:13px; font-family:inherit; background:#fff; color:#0f172a;
    transition:border-color .15s;
}
.cs-field input:focus, .cs-field textarea:focus{
    outline:none; border-color:#0d9488; box-shadow:0 0 0 3px rgba(13,148,136,.12);
}
.cs-field textarea{ resize:vertical; }
@media (max-width:720px){ .cs-form{ grid-template-columns:1fr; } }

/* Prospektbilder */
.cs-img-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(120px,1fr)); gap:10px;
}
.cs-img-thumb{
    position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden;
    border:1px solid #e5e7eb; background:#f1f5f9;
}
.cs-img-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cs-img-del{
    position:absolute; top:6px; right:6px;
    width:26px; height:26px; border-radius:50%;
    border:none; background:rgba(15,23,42,.75); color:#fff;
    font-size:16px; line-height:1; cursor:pointer;
}
.cs-img-del:hover{ background:#dc2626; }
.cs-img-add{
    aspect-ratio:4/3; border:2px dashed #cbd5e1; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; color:#64748b; font-weight:600; font-size:13px;
    transition:all .15s;
}
.cs-img-add:hover{ border-color:#0d9488; color:#0d9488; background:#f0fdfa; }

/* Actions-row */
.cs-actions-row{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    padding:10px 14px; border:1px solid #e5e7eb; border-radius:10px; background:#fff;
}
.cs-status-badge{
    display:inline-flex; align-items:center;
    padding:4px 12px; border-radius:999px;
    color:#fff; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px;
}
.cs-action-btn{
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 14px; border:1px solid #e5e7eb; border-radius:8px;
    background:#fff; color:#0f172a; font-size:13px; font-weight:600; font-family:inherit;
    cursor:pointer; transition:all .15s;
}
.cs-action-btn:hover:not(:disabled){ border-color:#0d9488; color:#0d9488; background:#f0fdfa; }
.cs-action-btn:disabled{ opacity:.5; cursor:not-allowed; }
.cs-action-primary{
    background:#024550; border-color:#024550; color:#fff;
}
.cs-action-primary:hover:not(:disabled){
    background:#0d9488; border-color:#0d9488; color:#fff;
}
.cs-quote-id{
    margin-left:auto; font-size:12px; color:#64748b; font-weight:600;
}
.cs-sent-date{
    display:inline-flex; align-items:center; gap:4px;
    padding:4px 10px; background:#ecfdf5; color:#065f46;
    border:1px solid #a7f3d0; border-radius:999px;
    font-size:11px; font-weight:700;
}

@media print{
    .cs-head-row, .cs-actions-row, .calc-summary-pill, .dummy-btn{ display:none !important; }
    .cs-head-body{ display:block !important; }
}