/* ══════════════════════════════════════════════════════════════
   theme.css — CarpetPro shared design system
   Light Swiss / Apple aesthetic. Single source of truth for
   tokens + base components across app / login / quote / admin.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Surfaces ── */
    --bg:#f5f5f7;
    --surface:#ffffff;
    --surface-2:#fafafc;
    --border:#e6e6ea;
    --border-strong:#d9d9e0;

    /* ── Text ramp ── */
    --text:#1d1d1f;
    --text-2:#6e6e73;
    --text-3:#a1a1a8;

    /* ── Primary accent (refined brand indigo) ── */
    --accent:#2b4acb;
    --accent-hover:#2340b4;
    --accent-soft:#eef1fc;

    /* ── Semantic — muted, meaning only ── */
    --green:#1a8f66; --green-soft:#e8f5f0;
    --amber:#c2740a; --amber-soft:#fbf3e6;
    --red:#d13b3b;   --red-soft:#fbecec;
    --violet:#6a45d4; --violet-soft:#f0ecfb;

    /* ── Radii ── */
    --radius:16px; --radius-sm:10px; --radius-xs:7px;

    /* ── Depth — soft, Apple-style ── */
    --shadow-sm:0 1px 2px rgba(20,23,40,.04);
    --shadow:0 1px 2px rgba(20,23,40,.04),0 6px 16px rgba(20,23,40,.05);
    --shadow-lg:0 8px 30px rgba(20,23,40,.10);

    /* ── Back-compat aliases (old token names still referenced inline) ── */
    --surface2:var(--surface-2);
    --primary:var(--accent);
    --primary-dark:var(--accent-hover);
    --primary-light:var(--accent-soft);
    --text2:var(--text-2);
    --text3:var(--text-3);
    --purple:var(--violet);
    --card:var(--surface);
    --text1:var(--text);
}

/* ── Reset ── */
*{margin:0;padding:0;box-sizing:border-box;}

body{
    font-family:'Inter',-apple-system,BlinkMacSystemFont,system-ui,'Segoe UI',sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.5;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

/* ── Icons ── */
.icon{
    width:18px;height:18px;
    flex-shrink:0;
    stroke:currentColor;
    stroke-width:1.6;
    stroke-linecap:round;
    stroke-linejoin:round;
    fill:none;
    vertical-align:middle;
    display:inline-block;
}
.icon-xs{width:13px;height:13px;}
.icon-sm{width:15px;height:15px;}
.icon-lg{width:22px;height:22px;}
.ic{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon.spin{animation:cp-spin 1s linear infinite;}
@keyframes cp-spin{to{transform:rotate(360deg);}}
/* Hidden sprite container */
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* ── Cards ── */
.card{
    background:var(--surface);
    border-radius:var(--radius);
    border:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    margin-bottom:1rem;
}
.card:last-child{margin-bottom:0;}
.card-header{
    padding:1rem 1.4rem;
    border-bottom:1px solid var(--border);
    display:flex;align-items:center;gap:10px;
}
.card-header h2{
    font-size:.95rem;font-weight:600;color:var(--text);
    letter-spacing:-.01em;
}
.card-header .icon{color:var(--text-3);}
.card-body{padding:1.25rem 1.4rem;}

/* ── Forms ── */
label{
    display:block;
    font-size:.78rem;font-weight:600;
    color:var(--text-2);
    letter-spacing:0;
    margin-bottom:6px;
}
input:not([type=checkbox]):not([type=radio]),select,textarea{
    width:100%;
    padding:10px 13px;
    border:1px solid var(--border-strong);
    border-radius:var(--radius-sm);
    font-size:.92rem;
    font-family:inherit;
    color:var(--text);
    background:var(--surface);
    transition:border-color .15s,box-shadow .15s;
    -webkit-appearance:none;appearance:none;
}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{
    border-color:var(--accent);
    outline:none;
    box-shadow:0 0 0 3.5px var(--accent-soft);
}
input::placeholder,textarea::placeholder{color:var(--text-3);}
textarea{resize:vertical;min-height:76px;line-height:1.5;}
select{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat:no-repeat;
    background-position:right 11px center;
    padding-right:34px;
}

/* ── Buttons ── */
.btn,.btn-primary,.btn-add{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    background:var(--accent);
    color:#fff;border:none;
    padding:10px 18px;
    border-radius:var(--radius-sm);
    font-family:inherit;font-weight:600;font-size:.9rem;
    cursor:pointer;white-space:nowrap;
    transition:background .15s,transform .08s,box-shadow .15s;
    min-height:42px;
}
.btn:hover,.btn-primary:hover,.btn-add:hover{background:var(--accent-hover);}
.btn:active,.btn-primary:active,.btn-add:active{transform:scale(.985);}
.btn-add{width:100%;}
.btn-add.inline,.btn.inline{width:auto;}
.btn-add.green,.btn.green{background:var(--green);}
.btn-add.green:hover,.btn.green:hover{background:#15784f;}
.btn-add .icon,.btn .icon{width:16px;height:16px;}

.btn-ghost{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    background:var(--surface);
    color:var(--text);
    border:1px solid var(--border-strong);
    padding:9px 15px;
    border-radius:var(--radius-sm);
    font-family:inherit;font-weight:600;font-size:.88rem;
    cursor:pointer;white-space:nowrap;
    transition:background .15s,border-color .15s;
    min-height:40px;
}
.btn-ghost:hover{background:var(--surface-2);border-color:var(--text-3);}

.btn-icon{
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:none;
    width:36px;height:36px;
    border-radius:var(--radius-xs);
    color:var(--text-2);
    cursor:pointer;padding:0;flex-shrink:0;
    transition:background .15s,color .15s;
}
.btn-icon:hover{background:var(--surface-2);color:var(--text);}

.btn-remove{
    display:inline-flex;align-items:center;justify-content:center;
    background:none;
    border:1px solid var(--border-strong);
    color:var(--text-3);
    cursor:pointer;
    padding:0;
    border-radius:var(--radius-xs);
    transition:all .15s;flex-shrink:0;
    min-height:34px;min-width:34px;
}
.btn-remove:hover{background:var(--red-soft);color:var(--red);border-color:#f0b8b8;}
.btn-remove .icon{width:16px;height:16px;}

/* ── Item rows ── */
.item-list{margin-top:.65rem;}
.item-row{
    display:flex;align-items:center;
    padding:11px 13px;
    background:var(--surface-2);
    border-radius:var(--radius-sm);
    margin-bottom:6px;
    border:1px solid var(--border);
    gap:10px;
}
.item-info{flex:1;min-width:0;}
.item-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.item-detail{font-size:.79rem;color:var(--text-2);margin-top:2px;}
.item-price{font-weight:600;font-size:.9rem;color:var(--text);white-space:nowrap;}
.empty-msg{color:var(--text-3);text-align:center;padding:1.25rem 0;font-size:.86rem;}

/* ── Totals ── */
.totals-block{
    background:var(--surface-2);
    border-radius:var(--radius-sm);
    padding:13px 15px;margin-top:12px;
    border:1px solid var(--border);
}
.stat-row{display:flex;justify-content:space-between;font-size:.86rem;color:var(--text-2);margin:4px 0;}
.stat-row strong{color:var(--text);font-weight:600;}
.grand-total{
    display:flex;justify-content:space-between;align-items:center;
    background:var(--accent);
    color:#fff;
    border-radius:var(--radius-sm);
    padding:15px 18px;margin-top:14px;
    box-shadow:var(--shadow-sm);
}
.grand-total .gt-label{font-size:.74rem;font-weight:600;opacity:.85;letter-spacing:.02em;text-transform:uppercase;}
.grand-total .gt-val{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;}

/* ── Cost composition bar (data-viz) ── */
.costbar{margin-top:14px;}
.costbar-track{
    display:flex;width:100%;height:10px;border-radius:6px;overflow:hidden;
    background:var(--surface-2);
}
.costbar-seg{height:100%;}
.costbar-legend{
    display:flex;flex-wrap:wrap;gap:10px 16px;margin-top:12px;
}
.costbar-key{display:flex;align-items:center;gap:6px;font-size:.78rem;color:var(--text-2);}
.costbar-dot{width:9px;height:9px;border-radius:3px;flex-shrink:0;}
.costbar-key strong{color:var(--text);font-weight:600;}

/* ── Toasts ── */
#toast-container{
    position:fixed;bottom:1.5rem;left:50%;transform:translateX(-50%);
    z-index:999;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none;
}
.toast{
    display:flex;align-items:center;gap:8px;
    padding:11px 18px;border-radius:12px;
    font-size:.87rem;font-weight:500;
    background:var(--text);color:#fff;
    box-shadow:var(--shadow-lg);
    opacity:0;transform:translateY(12px);
    transition:opacity .2s,transform .2s;pointer-events:none;
}
.toast.show{opacity:1;transform:translateY(0);}
.toast .icon{width:17px;height:17px;}
.toast.error{background:var(--red);}
.toast.success{background:var(--green);}
.toast.info{background:var(--text);}

/* ── Modals ── */
.modal-overlay{
    display:none;position:fixed;inset:0;
    background:rgba(20,23,40,.35);
    backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
    z-index:200;align-items:center;justify-content:center;padding:1rem;
}
.modal-overlay.open{display:flex;}
.modal{
    background:var(--surface);
    border-radius:20px;
    padding:0;width:560px;max-width:100%;max-height:90vh;
    display:flex;flex-direction:column;
    box-shadow:var(--shadow-lg);
    border:1px solid var(--border);
}
.modal-header{
    padding:1.1rem 1.5rem;border-bottom:1px solid var(--border);
    display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.modal-header h3{font-size:1.05rem;font-weight:600;letter-spacing:-.01em;display:flex;align-items:center;gap:9px;}
.modal-close{
    display:inline-flex;align-items:center;justify-content:center;
    background:none;border:none;cursor:pointer;color:var(--text-3);
    width:32px;height:32px;border-radius:var(--radius-xs);transition:background .15s,color .15s;
}
.modal-close:hover{background:var(--surface-2);color:var(--text);}
.modal-body{padding:1.25rem 1.5rem;overflow-y:auto;flex:1;}

/* ── Utility ── */
.hairline{border:none;border-top:1px solid var(--border);margin:1rem 0;}