/* =====================================================
   AXIS - Proposals (Proposal Builder) styles
   Route #proposals. List view + full-page builder.
   ===================================================== */

.prop-page { width: 100%; }

/* ---------- Header ---------- */
.prop-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: var(--spacing-md); margin-bottom: var(--spacing-lg); flex-wrap: wrap;
}
.prop-title { font-size: 22px; font-weight: 700; margin: 0 0 4px; color: var(--text-primary); }
.prop-subtitle { font-size: 13px; color: var(--text-secondary); margin: 0; }
.prop-header-actions { display: flex; gap: var(--spacing-sm); }

/* ---------- Stats ---------- */
.prop-stats {
    display: grid; grid-template-columns: repeat(5, 1fr);
    gap: var(--spacing-md); margin-bottom: var(--spacing-lg);
}
.prop-stat-card {
    display: flex; align-items: center; gap: 12px;
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: box-shadow 0.15s, transform 0.1s;
}
.prop-stat-card:hover { box-shadow: 0 6px 18px -8px rgba(15, 23, 42, 0.22); transform: translateY(-1px); }
.prop-stat-icon {
    width: 40px; height: 40px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.prop-stat-icon .material-icons-outlined { font-size: 21px; }
.prop-stat-meta { display: flex; flex-direction: column; min-width: 0; }
.prop-stat-value { font-size: 19px; font-weight: 700; color: var(--text-primary); line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-stat-label { font-size: 12px; color: var(--text-secondary); }

/* ---------- Toolbar ---------- */
.prop-toolbar { display: flex; gap: var(--spacing-sm); margin-bottom: var(--spacing-lg); flex-wrap: wrap; }
.prop-search { position: relative; flex: 1 1 280px; min-width: 0; }
.prop-search .material-icons-outlined { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 20px; color: var(--text-tertiary); pointer-events: none; }
.prop-search input { width: 100%; padding: 11px 12px 11px 40px; border: 1.5px solid var(--border-color); border-radius: 10px; background: var(--bg-primary); color: var(--text-primary); font-size: 14px; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
.prop-search input::placeholder { color: var(--text-tertiary); }
.prop-search input:hover { border-color: var(--primary); }
.prop-search input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,102,186,0.12); }
.prop-filter-select {
    flex: 0 0 auto;
    min-width: 180px;
    -webkit-appearance: none;
    appearance: none;
    padding: 11px 38px 11px 14px;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    outline: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230c66ba' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 17px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-filter-select:hover { border-color: var(--primary); }
.prop-filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,102,186,0.12); }

/* ---------- List ---------- */
.prop-list { display: flex; flex-direction: column; gap: 8px; }
.prop-row {
    display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md);
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 12px; padding: 14px 16px; cursor: pointer;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-row:hover { border-color: var(--primary); box-shadow: 0 6px 18px -8px rgba(15,23,42,0.22); }
.prop-row-main { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
.prop-row-number { font-size: 12px; font-weight: 700; color: var(--primary); background: rgba(12,102,186,0.08); border-radius: 6px; padding: 4px 8px; white-space: nowrap; }
.prop-row-info { display: flex; flex-direction: column; min-width: 0; }
.prop-row-title { font-size: 14px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-row-sub { font-size: 12.5px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-row-meta { display: flex; align-items: center; gap: var(--spacing-md); flex: 0 0 auto; }
.prop-status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; border-radius: 20px; padding: 3px 10px; }
.prop-row-status { display: flex; align-items: center; gap: 6px; }
.prop-row-amount { display: flex; flex-direction: column; align-items: flex-end; min-width: 90px; }
.prop-row-total { font-size: 15px; font-weight: 700; color: var(--text-primary); }
.prop-row-recurring { font-size: 11.5px; color: #047857; }
.prop-row-valid { font-size: 12px; color: var(--text-tertiary); min-width: 110px; text-align: right; }
.prop-row-valid.is-expired { color: var(--danger); font-weight: 600; }
.prop-row-actions { display: flex; gap: 2px; }
.prop-row-actions .btn-icon, .prop-line-remove {
    background: none; border: none; cursor: pointer; color: var(--text-tertiary);
    padding: 7px; border-radius: 8px; display: flex; align-items: center; transition: background 0.12s, color 0.12s;
}
.prop-row-actions .btn-icon:hover { background: var(--bg-secondary); color: var(--text-primary); }
.prop-row-actions .material-icons-outlined { font-size: 19px; }

/* ---------- Empty ---------- */
.prop-empty { text-align: center; padding: var(--spacing-xl); color: var(--text-secondary); }
.prop-empty .material-icons-outlined { font-size: 56px; color: var(--text-tertiary); }
.prop-empty h3 { margin: var(--spacing-sm) 0 4px; color: var(--text-primary); font-size: 16px; }
.prop-empty p { font-size: 13px; margin: 0 0 var(--spacing-md); }

/* =====================================================
   BUILDER
   ===================================================== */
.prop-builder { width: 100%; }

/* Polished fields inside the builder */
.prop-builder .form-input, .prop-builder .form-select, .prop-builder .form-textarea {
    width: 100%; padding: 10px 12px; font-size: 14px; font-family: inherit;
    color: var(--text-primary); background: var(--bg-primary);
    border: 1.5px solid var(--border-color); border-radius: 9px; outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-builder .form-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }
.prop-builder .form-input:focus, .prop-builder .form-select:focus, .prop-builder .form-textarea:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,102,186,0.12);
}
.prop-builder .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.prop-builder select.form-select {
    -webkit-appearance: none; appearance: none; cursor: pointer; padding-right: 32px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat; background-position: right 8px center; background-size: 16px;
}

/* Builder gradient hero */
.prop-builder-hero {
    position: relative;
    background: linear-gradient(135deg, #0b225e 0%, #1e3a8a 55%, #0c66ba 100%);
    border-radius: 18px;
    padding: 20px 26px 24px;
    margin-bottom: var(--spacing-lg);
    overflow: hidden;
    box-shadow: 0 10px 30px -12px rgba(11, 34, 94, 0.5);
}
.prop-hero-glow {
    position: absolute; top: -80px; right: -50px; width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(91,143,170,0.28), transparent 70%); pointer-events: none;
}
.prop-hero-top { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-md); margin-bottom: 14px; flex-wrap: wrap; }
.prop-hero-back {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(255,255,255,0.1); border: none; color: #fff;
    font-size: 13px; font-weight: 600; padding: 7px 14px 7px 10px; border-radius: 9px; cursor: pointer;
    transition: background 0.15s;
}
.prop-hero-back:hover { background: rgba(255,255,255,0.2); }
.prop-hero-back .material-icons-outlined { font-size: 18px; }
.prop-hero-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.prop-hero-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    transition: background 0.15s;
}
.prop-hero-btn:hover { background: rgba(255,255,255,0.22); }
.prop-hero-btn .material-icons-outlined { font-size: 18px; }
.prop-hero-btn--solid { background: #fff; color: #0b225e; border-color: #fff; }
.prop-hero-btn--solid:hover { background: #eef5fc; }
.prop-hero-main { position: relative; z-index: 1; }
.prop-hero-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.prop-hero-eyebrow { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.65); }
.prop-builder-hero .prop-status { background: rgba(255,255,255,0.18) !important; color: #fff !important; }
.prop-hero-title {
    width: 100%; border: none; outline: none; background: transparent;
    font-size: 24px; font-weight: 700; color: #fff; padding: 0;
}
.prop-hero-title::placeholder { color: rgba(255,255,255,0.5); font-weight: 600; }
/* Valid-until field on the hero */
.prop-hero-field {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px; padding: 6px 12px;
}
.prop-hero-field .material-icons-outlined { font-size: 16px; color: rgba(255,255,255,0.7); }
.prop-hero-field-label { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.7); }
.prop-hero-field input[type="date"] {
    background: transparent; border: none; outline: none; color: #fff;
    font-size: 13px; font-family: inherit; font-weight: 600; color-scheme: dark; cursor: pointer;
}
/* Expired tag */
.prop-expired-tag {
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    border-radius: 20px; padding: 3px 10px; background: rgba(239,68,68,0.85); color: #fff;
}

/* Hero row 2: owner + status + dates */
.prop-hero-row2 { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.prop-hero-owner {
    display: flex; align-items: center; gap: 10px; min-height: 44px; box-sizing: border-box;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px; padding: 6px 10px 6px 8px;
    cursor: pointer; font-family: inherit; text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.prop-hero-owner:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.3); }
.prop-hero-owner-caret { font-size: 20px; color: rgba(255,255,255,0.7); margin-left: auto; flex: 0 0 auto; transition: transform 0.15s; }
.prop-owner-select.is-open .prop-hero-owner-caret { transform: rotate(180deg); }

/* Owner picker dropdown (reassign the proposal owner) */
.prop-owner-select { position: relative; }
.prop-owner-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
    min-width: 280px; max-height: 300px; overflow-y: auto;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 14px 36px rgba(15, 23, 42, 0.22); padding: 6px;
}
.prop-owner-select.is-open .prop-owner-menu { display: block; z-index: 1000; }
.prop-owner-menu-head { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-tertiary); padding: 6px 9px 4px; }
.prop-owner-option {
    width: 100%; display: flex; align-items: center; gap: 9px; padding: 7px 9px;
    border: none; background: transparent; border-radius: 8px; cursor: pointer;
    font-family: inherit; text-align: left; transition: background 0.12s;
}
.prop-owner-option:hover { background: var(--bg-secondary); }
.prop-owner-option.is-selected { background: rgba(12, 102, 186, 0.08); }
.prop-owner-option img, .prop-owner-option .user-avatar, .prop-owner-option .avatar { width: 28px !important; height: 28px !important; border-radius: 50% !important; flex: 0 0 auto; }
.prop-owner-opt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto; }
.prop-owner-opt-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-owner-opt-email { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-owner-check { font-size: 18px; color: var(--primary); display: none; flex: 0 0 auto; }
.prop-owner-option.is-selected .prop-owner-check { display: inline-flex; }
.prop-owner-empty { padding: 12px; text-align: center; color: var(--text-tertiary); font-size: 13px; }
.prop-hero-owner img, .prop-hero-owner .user-avatar, .prop-hero-owner .avatar {
    width: 30px !important; height: 30px !important; border-radius: 50% !important; flex: 0 0 auto;
}
.prop-hero-owner-ph { font-size: 30px; color: rgba(255,255,255,0.55); }
.prop-hero-owner-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.prop-hero-owner-name { font-size: 13px; font-weight: 700; color: #fff; }
.prop-hero-owner-email { font-size: 11px; color: rgba(255,255,255,0.65); }
.prop-hero-control {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; box-sizing: border-box;
    background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
    border-radius: 9px; padding: 6px 8px 6px 12px;
}
.prop-hero-control select {
    background: transparent; border: none; outline: none; color: #fff;
    font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer;
}
/* Native option popup renders on a white surface — force dark text so the
   options are readable (the closed value stays white on the navy band). */
.prop-hero-control select option { color: #0f172a; background: #ffffff; font-weight: 600; }

/* Linked-order chip on the Customer card */
.prop-linked-order {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 12px; font-weight: 600; color: var(--primary);
    background: rgba(12,102,186,0.1); border-radius: 20px; padding: 3px 5px 3px 10px;
}
.prop-linked-order > .material-icons-outlined { font-size: 14px; }
.prop-linked-order button { border: none; background: none; cursor: pointer; color: var(--primary); display: flex; padding: 2px; border-radius: 50%; }
.prop-linked-order button .material-icons-outlined { font-size: 14px; }
.prop-linked-order button:hover { background: rgba(12,102,186,0.2); }

/* Property banner + recipient selector in the Customer card */
.prop-property-banner {
    display: flex; align-items: center; gap: 12px;
    background: rgba(12,102,186,0.06); border: 1px solid rgba(12,102,186,0.18);
    border-radius: 10px; padding: 12px 14px; margin-bottom: var(--spacing-md);
}
.prop-property-banner > .material-icons-outlined { font-size: 22px; color: var(--primary); flex: 0 0 auto; }
.prop-property-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.prop-property-name { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.prop-property-addr { font-size: 12.5px; color: var(--text-secondary); }
.prop-recipient { display: flex; flex-direction: column; gap: 3px; flex: 0 0 auto; }
.prop-recipient-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary); }
/* Branded recipient picker (avatar + name + title + email/phone) */
.prop-rcpt-select { position: relative; min-width: 260px; }
.prop-rcpt-trigger {
    width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
    border: 1.5px solid var(--border-color); border-radius: 10px; background: var(--bg-primary);
    color: var(--text-primary); font-family: inherit; padding: 6px 8px; outline: none; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-rcpt-select.is-open .prop-rcpt-trigger, .prop-rcpt-trigger:focus {
    border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12, 102, 186, 0.12);
}
.prop-rcpt-current { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
.prop-rcpt-avatar {
    width: 30px; height: 30px; border-radius: 50%; flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0c66ba, #0b225e); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
}
.prop-rcpt-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; text-align: left; }
.prop-rcpt-name { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-rcpt-title { font-weight: 500; color: var(--text-secondary); }
.prop-rcpt-meta { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-rcpt-caret { font-size: 20px; color: var(--text-tertiary); flex: 0 0 auto; transition: transform 0.15s; }
.prop-rcpt-select.is-open .prop-rcpt-caret { transform: rotate(180deg); }
.prop-rcpt-menu {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16); padding: 6px; max-height: 280px; overflow-y: auto;
}
.prop-rcpt-select.is-open .prop-rcpt-menu { display: block; }
.prop-rcpt-option {
    width: 100%; display: flex; align-items: center; gap: 9px; padding: 8px 9px;
    border: none; background: transparent; border-radius: 8px; cursor: pointer;
    font-family: inherit; text-align: left; transition: background 0.12s;
}
.prop-rcpt-option:hover { background: var(--bg-secondary); }
.prop-rcpt-option.is-selected { background: rgba(12, 102, 186, 0.08); }
.prop-rcpt-option .prop-rcpt-text { flex: 1 1 auto; }
.prop-rcpt-check { font-size: 18px; color: var(--primary); display: none; flex: 0 0 auto; }
.prop-rcpt-option.is-selected .prop-rcpt-check { display: inline-flex; }

/* Proposals linked to a Property / Contact (detail panels + dashboard) */
.prop-linked-list { display: flex; flex-direction: column; }
.prop-linked-item {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 10px 12px; border-bottom: 1px solid var(--border-color); cursor: pointer; transition: background 0.12s;
}
.prop-linked-item:last-child { border-bottom: none; }
.prop-linked-item:hover { background: var(--bg-secondary); }
.prop-linked-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prop-linked-number { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; }
.prop-linked-title { font-size: 13px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-linked-meta { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.prop-linked-amount { font-size: 13px; font-weight: 700; color: var(--text-primary); }
.prop-linked-chevron { font-size: 20px; color: var(--text-tertiary); }
.prop-linked-empty { padding: 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; }

/* Dashboard "My Proposals" stat chips */
.prop-dash-stats { display: flex; gap: 8px; margin-bottom: 12px; }
.prop-dash-stat {
    flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 10px 6px; background: var(--bg-secondary); border-radius: 10px;
}
.prop-dash-stat-num { font-size: 20px; font-weight: 800; line-height: 1; }
.prop-dash-stat-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); }

/* List: owner avatar + linked property */
.prop-row-owner { display: flex; align-items: center; flex: 0 0 auto; }
.prop-row-owner img, .prop-row-owner .user-avatar, .prop-row-owner .avatar { width: 26px !important; height: 26px !important; border-radius: 50% !important; }
.prop-row-order { display: inline-flex; align-items: center; gap: 2px; color: var(--primary); font-weight: 600; }
.prop-row-order .material-icons-outlined { font-size: 13px; }

/* Builder layout */
.prop-builder-grid { display: grid; grid-template-columns: 1fr 340px; gap: var(--spacing-lg); align-items: start; }
.prop-builder-main { display: flex; flex-direction: column; gap: var(--spacing-md); min-width: 0; }

/* Cards */
.prop-card {
    background: var(--bg-primary); border: 1px solid var(--border-color);
    border-radius: 14px; overflow: hidden;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 8px 24px -18px rgba(15, 23, 42, 0.25);
}
/* Colored top accent strip per section */
.prop-card[data-accent] { border-top: 3px solid var(--accent, var(--primary)); }
.prop-card-head {
    display: flex; align-items: center; gap: 10px; padding: 14px 18px;
    border-bottom: 1px solid var(--border-color);
    background: linear-gradient(180deg, var(--bg-primary), var(--bg-secondary));
}
.prop-card-head .material-icons-outlined { font-size: 18px; color: var(--primary); background: rgba(12,102,186,0.1); border-radius: 8px; padding: 6px; }
.prop-card-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: var(--text-primary); flex: 1 1 auto; }
.prop-card-head-actions { display: flex; gap: 6px; }
.prop-card-head .btn-sm { display: inline-flex; align-items: center; gap: 4px; }
.prop-card-head .btn-sm .material-icons-outlined { font-size: 15px !important; background: none !important; color: inherit !important; padding: 0 !important; }
.prop-card-body { padding: 18px; }

.prop-title-input {
    width: 100%; border: none; outline: none; background: transparent;
    font-size: 19px; font-weight: 700; color: var(--text-primary); padding: 16px 18px;
}
.prop-title-input::placeholder { color: var(--text-tertiary); font-weight: 600; }

.prop-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); margin-bottom: var(--spacing-md); }
.prop-grid-2 .form-group { margin-bottom: 0; }

/* Line items table */
.prop-lines-body { padding: 0; }
.prop-lines-empty { text-align: center; padding: 36px 18px; color: var(--text-tertiary); }
.prop-lines-empty .material-icons-outlined { font-size: 40px; }
.prop-lines-empty p { font-size: 13px; margin: 8px 0 0; }
.prop-lines-table { overflow-x: auto; }
.prop-lines-head, .prop-line-row {
    display: grid;
    grid-template-columns: minmax(230px, 1.7fr) 60px 100px 124px 116px 116px 34px;
    gap: 12px; align-items: start; padding: 12px 18px; min-width: 900px;
}
.prop-lines-head { align-items: center; }
.prop-lines-head {
    background: var(--bg-secondary); border-bottom: 1px solid var(--border-color);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-secondary);
}
.prop-line-row { border-bottom: 1px solid var(--border-color); transition: background 0.12s; }
.prop-lines-rows .prop-line-row:nth-child(even) { background: rgba(15, 23, 42, 0.018); }
.prop-line-row:last-child { border-bottom: none; }
.prop-line-row:hover { background: rgba(12, 102, 186, 0.05); }
/* Column alignment */
.prop-line-qty { text-align: center; }
.prop-line-static { justify-content: flex-end; }
.prop-price-input .form-input { text-align: right; }
.ta-right { text-align: right; }
/* Uniform control height so QTY / UNIT PRICE / DISC / PRICING / AMOUNT line up */
.prop-line-row .prop-line-lookup,
.prop-line-row .prop-line-qty,
.prop-line-row .prop-price-input,
.prop-line-row .prop-disc-field,
.prop-line-row .prop-line-billing,
.prop-line-row .prop-line-name { height: 38px; }
.prop-line-row .prop-line-remove { height: 38px; width: 38px; display: inline-flex; align-items: center; justify-content: center; }
.prop-line-row .prop-line-qty { padding-top: 0; padding-bottom: 0; }
.prop-line-row .prop-line-static { min-height: 38px; display: flex; align-items: center; }
/* Read-only pricing pill: a 38px cell vertically centers the natural-size
   pill so it lines up with the other controls (the item cell can be taller
   when it shows a description). */
.prop-line-row .prop-billing-cell { min-height: 38px; display: flex; align-items: center; }
.prop-line-item { display: flex; flex-direction: column; gap: 4px; min-width: 0; position: relative; }
.prop-line-name { font-weight: 600; }
.prop-line-desc { font-size: 12px !important; padding: 6px 10px !important; color: var(--text-secondary); }
.prop-custom-tag { position: absolute; top: 0; right: 0; font-size: 9.5px; font-weight: 700; text-transform: uppercase; color: #8b5cf6; background: rgba(139,92,246,0.12); border-radius: 4px; padding: 1px 5px; }
.prop-line-qty, .prop-line-disc { text-align: center; }
.prop-price-input {
    display: flex; align-items: center; border: 1.5px solid var(--border-color);
    border-radius: 9px; background: var(--bg-primary); overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-price-input:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,102,186,0.12); }
.prop-price-input span { padding: 0 2px 0 10px; color: var(--text-secondary); font-weight: 600; font-size: 13px; }
.prop-price-input .form-input { border: none !important; box-shadow: none !important; background: transparent; padding-left: 4px; }
.prop-line-amount { font-weight: 700; font-size: 14px; color: var(--text-primary); white-space: nowrap; min-height: 38px; display: flex; align-items: center; justify-content: flex-end; }
.prop-line-suffix { font-size: 10.5px; font-weight: 600; color: #047857; margin-left: 2px; }
.prop-line-remove:hover { background: rgba(239,68,68,0.1); color: var(--danger); }
.prop-line-remove .material-icons-outlined { font-size: 18px; }

/* Catalog lookup control (line item product field) */
.prop-line-lookup {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    background: var(--bg-primary); border: 1.5px solid var(--border-color); border-radius: 9px;
    padding: 8px 10px; cursor: pointer; text-align: left; font-size: 14px; font-family: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.prop-line-lookup:hover { border-color: var(--primary); background: rgba(12,102,186,0.04); }
.prop-line-lookup.is-empty { border-style: dashed; }
.prop-line-lookup-sel { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prop-cat-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
/* Category icon chip — mirrors the catalog's category color + icon */
.prop-cat-chip { width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prop-cat-chip .material-icons-outlined { font-size: 14px; line-height: 1; }
.prop-line-lookup-name { font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-line-lookup-cat { font-size: 10.5px; font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border-color); border-radius: 20px; padding: 1px 8px; flex: 0 0 auto; white-space: nowrap; }
/* Composite (variant-of-a-composite-product) chip — matches the catalog badge */
.prop-composite-chip {
    display: inline-flex; align-items: center; gap: 3px; flex: 0 0 auto; white-space: nowrap;
    font-size: 10px; font-weight: 700; color: #7c3aed; background: rgba(124, 58, 237, 0.12);
    border-radius: 20px; padding: 1px 8px 1px 6px;
}
.prop-composite-chip .material-icons-outlined { font-size: 12px; }
.prop-line-lookup-ph { display: flex; align-items: center; gap: 6px; color: var(--text-tertiary); font-weight: 500; }
.prop-line-lookup-ph .material-icons-outlined { font-size: 16px; }
.prop-line-lookup-caret { font-size: 18px; color: var(--text-tertiary); flex: 0 0 auto; }
.prop-line-catdesc { font-size: 12px; color: var(--text-secondary); margin-top: 4px; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Read-only (pulled-from-catalog) cells */
.prop-line-static { display: flex; align-items: center; min-height: 38px; font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.prop-billing-tag {
    display: inline-flex; align-items: center;
    font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 20px;
    background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); white-space: nowrap;
}
.prop-billing-tag.is-recurring { background: rgba(16,185,129,0.12); color: #047857; border-color: rgba(16,185,129,0.25); }

/* Discount field (value + % / $ toggle) — per line and overall */
.prop-disc-field {
    display: flex; align-items: stretch; height: 36px;
    border: 1.5px solid var(--border-color); border-radius: 8px;
    background: var(--bg-primary); overflow: hidden;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prop-disc-field:focus-within { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(12,102,186,0.12); }
.prop-disc-input {
    border: none !important; box-shadow: none !important; background: transparent;
    width: 100%; min-width: 0; padding: 0 5px 0 8px !important; text-align: right; font-size: 13px;
}
/* Segmented % / $ chooser */
.prop-disc-seg { display: flex; flex: 0 0 auto; border-left: 1px solid var(--border-color); }
.prop-seg-btn {
    width: 24px; border: none; background: var(--bg-secondary);
    color: var(--text-tertiary); font-weight: 700; font-size: 12px; cursor: pointer;
    transition: background 0.12s, color 0.12s;
}
.prop-seg-btn + .prop-seg-btn { border-left: 1px solid var(--border-color); }
.prop-seg-btn.is-active { background: var(--primary); color: #fff; }
.prop-seg-btn:not(.is-active):hover { background: rgba(12,102,186,0.1); color: var(--primary); }
.prop-disc-field--overall { width: 132px; }

/* Totals sidebar */
.prop-builder-side { position: sticky; top: var(--spacing-md); display: flex; flex-direction: column; gap: var(--spacing-md); }
.prop-totals-card { overflow: hidden; box-shadow: 0 4px 16px -6px rgba(11, 34, 94, 0.25); }
.prop-totals-head {
    display: flex; align-items: center; gap: 10px; padding: 15px 18px;
    background: linear-gradient(135deg, #0b225e, #0c66ba); color: #fff;
}
.prop-totals-head .material-icons-outlined { font-size: 18px; color: #fff; background: rgba(255,255,255,0.16); border-radius: 8px; padding: 6px; }
.prop-totals-head h4 { margin: 0; font-size: 14px; font-weight: 700; color: #fff; }
.prop-totals-body { padding: 16px 18px; }
.prop-total-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-secondary); padding: 5px 0; }
.prop-total-row span:last-child { font-weight: 600; color: var(--text-primary); }
.prop-total-discount { color: #059669; }
.prop-total-discount span:last-child { color: #059669; }
.prop-overall-row { align-items: center; }
.prop-overall-input { display: inline-flex; align-items: center; gap: 4px; color: var(--text-secondary); font-size: 13px; }
.prop-overall-input .form-input { width: 64px; padding: 6px 8px; text-align: right; }
/* Highlighted Total Due block */
.prop-total-grand {
    display: flex; justify-content: space-between; align-items: center;
    margin: 12px -18px 0; padding: 14px 18px;
    background: linear-gradient(135deg, rgba(12,102,186,0.10), rgba(11,34,94,0.06));
    border-top: 1px solid var(--border-color);
}
.prop-total-grand span:first-child { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: #0b225e; }
.prop-total-grand span:last-child { font-size: 22px; font-weight: 800; color: #0b225e; }
.prop-totals-recurring { margin-top: 14px; padding: 10px 12px; background: rgba(16,185,129,0.07); border: 1px solid rgba(16,185,129,0.2); border-radius: 10px; }
.prop-recurring-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #047857; font-weight: 700; margin-bottom: 4px; }
.prop-totals-recurring .prop-total-row { color: #047857; font-weight: 600; }
.prop-totals-recurring .prop-total-row span:last-child { color: #047857; }
.prop-totals-count { margin-top: 14px; font-size: 12px; color: var(--text-tertiary); text-align: center; }

/* ---------- Order picker ---------- */
.prop-order-list { display: flex; flex-direction: column; gap: 8px; }
.prop-order-row {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px;
    padding: 12px 14px; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.prop-order-row:hover { border-color: var(--primary); background: var(--bg-secondary); }
.prop-order-row > .material-icons-outlined { color: var(--primary); }
.prop-order-info { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }
.prop-order-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); }
.prop-order-sub { font-size: 12px; color: var(--text-secondary); }
.prop-order-chevron { color: var(--text-tertiary); }

/* ---------- Catalog picker ---------- */
.prop-picker-section { margin-bottom: var(--spacing-lg); }
.prop-picker-cat {
    display: flex; align-items: center; gap: 10px;
    font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
    padding: 9px 12px; border-radius: 10px; margin-bottom: 10px;
}
.prop-picker-cat-icon { width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.prop-picker-cat-icon .material-icons-outlined { font-size: 17px; }
.prop-picker-cat-name { flex: 1 1 auto; }
.prop-picker-cat-count { font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 20px; }
.prop-picker-rows { display: flex; flex-direction: column; gap: 6px; padding-left: 6px; }
.prop-picker-row {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
    background: var(--bg-primary); border: 1px solid var(--border-color); border-radius: 10px;
    padding: 10px 14px; cursor: pointer; margin-bottom: 6px; transition: border-color 0.15s, background 0.15s;
}
.prop-picker-row:hover { border-color: var(--primary); background: var(--bg-secondary); }
.prop-picker-info { flex: 1 1 auto; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.prop-picker-line1 { display: flex; align-items: center; gap: 8px; min-width: 0; }
.prop-picker-name { font-size: 13.5px; font-weight: 600; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-picker-desc { font-size: 12px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prop-picker-type { flex: 0 0 auto; font-size: 10.5px; font-weight: 600; padding: 3px 9px; border-radius: 20px; background: var(--bg-secondary); color: var(--text-secondary); border: 1px solid var(--border-color); white-space: nowrap; }
.prop-picker-type.is-recurring { background: rgba(16,185,129,0.12); color: #047857; border-color: rgba(16,185,129,0.25); }
.prop-picker-price { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--text-primary); white-space: nowrap; min-width: 80px; text-align: right; }
.prop-picker-add { color: var(--primary); flex: 0 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
    .prop-stats { grid-template-columns: repeat(3, 1fr); }
    .prop-builder-grid { grid-template-columns: 1fr; }
    .prop-builder-side { position: static; }
}
@media (max-width: 768px) {
    .prop-stats { grid-template-columns: repeat(2, 1fr); }
    .prop-row-valid, .prop-row-recurring { display: none; }
    .prop-grid-2 { grid-template-columns: 1fr; }
    .prop-header-actions { width: 100%; }
    .prop-header-actions .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 480px) {
    .prop-stats { grid-template-columns: 1fr; }
    .prop-filter-select { flex: 1 1 100%; }
}