/* 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; }
}