/*
 * חלק בקוד: ls-office/assets/css/frontend.css
 * מבנה הרכיבים של התוסף (פילים, טפסים, התחברות, thread הודעות, מסמכים, ציר זמן, כרטיסי שירות, שיתוף).
 * הצבעים/הגופנים נקראים ממשתני --ls-* שהתבנית מגדירה (tokens.css); כאן יש fallback לעיצוב Ledger
 * כדי שהרכיבים ייראו טוב גם בלי התבנית.
 */

:root {
	--ls-bg: var(--ls-color-bg, #f3ecdd);
	--ls-bg-2: var(--ls-color-bg-2, #ece3cf);
	--ls-panel: var(--ls-color-panel, #fffdf7);
	--ls-panel-2: var(--ls-color-panel-2, #faf5ea);
	--ls-line: var(--ls-color-line, #d3c5a5);
	--ls-line-soft: var(--ls-color-line-soft, #e2d7bd);
	--ls-ink: var(--ls-color-ink, #2a2114);
	--ls-muted: var(--ls-color-muted, #6d5c40);
	--ls-faint: var(--ls-color-faint, #98875f);
	--ls-gold: var(--ls-color-gold, #8f6c27);
	--ls-gold-bright: var(--ls-color-gold-bright, #c79a3f);
	--ls-gold-dark: var(--ls-color-gold-dark, #7c5c1d);
	--ls-radius: var(--ls-radius-ledger, 10px);
	--ls-shadow: var(--ls-shadow-ledger, 0 8px 26px rgba(90, 70, 30, 0.16));
	--ls-font-display: var(--ls-font-display, "Frank Ruhl Libre", Georgia, serif);
	--ls-font-body: var(--ls-font-body, "Assistant", system-ui, sans-serif);
	--ls-st-active: #157a47; --ls-st-active-bg: #e2f4e9;
	--ls-st-pending: #7a5500; --ls-st-pending-bg: #faf0d2;
	--ls-st-waiting: #8a3b12; --ls-st-waiting-bg: #fbe6d6;
	--ls-st-done: #44566b; --ls-st-done-bg: #e7edf4;
	--ls-st-cancel: #6d5c40; --ls-st-cancel-bg: #ece3cf;
	--ls-error: #9b2c2c; --ls-error-bg: #fbe4e4;
}

/* ---- pills / badges ---- */
.ls-pill { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 3px 12px; font-size: 13px; font-weight: 600; line-height: 1.5; white-space: nowrap; font-family: var(--ls-font-body); }
.ls-pill--lg { font-size: 15px; padding: 6px 16px; }
.ls-pill--active { background: var(--ls-st-active-bg); color: var(--ls-st-active); }
.ls-pill--pending { background: var(--ls-st-pending-bg); color: var(--ls-st-pending); }
.ls-pill--waiting { background: var(--ls-st-waiting-bg); color: var(--ls-st-waiting); }
.ls-pill--done { background: var(--ls-st-done-bg); color: var(--ls-st-done); }
.ls-pill--cancelled { background: var(--ls-st-cancel-bg); color: var(--ls-st-cancel); }
.ls-pill--quote { background: var(--ls-panel); color: var(--ls-gold-dark); border: 1px dashed var(--ls-gold); }
.ls-badge { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; background: var(--ls-bg-2); color: var(--ls-muted); vertical-align: middle; }
.ls-badge--count { background: var(--ls-gold); color: var(--ls-panel); min-width: 20px; text-align: center; }
.ls-badge--internal { background: var(--ls-st-pending-bg); color: var(--ls-st-pending); }
.ls-eyebrow { display: block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ls-gold-dark); margin: 0 0 6px; }

/* ---- notices ---- */
.ls-notice { border-radius: var(--ls-radius); padding: 12px 16px; margin: 0 0 16px; font-weight: 600; border-top: 3px solid currentColor; }
.ls-notice--success { background: var(--ls-st-active-bg); color: var(--ls-st-active); }
.ls-notice--error { background: var(--ls-error-bg); color: var(--ls-error); }
.ls-notice--warn { background: var(--ls-st-pending-bg); color: var(--ls-st-pending); }

/* ---- buttons ---- */
.ls-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: var(--ls-radius); border: 1px solid var(--ls-line); background: var(--ls-panel); color: var(--ls-ink); font: 600 15px/1.2 var(--ls-font-body); padding: 11px 20px; cursor: pointer; text-decoration: none; transition: transform .15s, background .15s, box-shadow .15s; }
.ls-btn:hover { background: var(--ls-bg-2); transform: translateY(-1px); text-decoration: none; }
.ls-btn:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 2px; }
.ls-btn--primary { background: var(--ls-gold); border-color: var(--ls-gold); color: var(--ls-panel); box-shadow: var(--ls-shadow); }
.ls-btn--primary:hover { background: var(--ls-gold-dark); border-color: var(--ls-gold-dark); color: var(--ls-panel); }
.ls-btn--block { width: 100%; }
.ls-btn--lg { padding: 14px 28px; font-size: 17px; }
.ls-btn--small { padding: 6px 12px; font-size: 13px; }
.ls-btn--whatsapp { background: #25d366; border-color: #25d366; color: #fff; }
.ls-btn[disabled] { opacity: .6; cursor: progress; }

/* ---- forms ---- */
.ls-form .ls-field { margin: 0 0 16px; }
.ls-form label, .ls-field__label { display: block; font-weight: 600; font-size: 14px; color: var(--ls-ink); margin-bottom: 6px; }
.ls-form input:not([type=checkbox]):not([type=radio]):not([type=file]), .ls-form select, .ls-form textarea {
	width: 100%; box-sizing: border-box; border: 1.5px solid #c9bda4; background: #fff; color: var(--ls-ink); border-radius: 8px; padding: 12px 14px; font: 16px/1.5 var(--ls-font-body);
	box-shadow: inset 0 1px 2px rgba(42, 33, 20, .06); transition: border-color .15s, box-shadow .15s; }
.ls-form input::placeholder, .ls-form textarea::placeholder { color: #a39780; opacity: 1; }
.ls-form input:hover:not(:focus), .ls-form select:hover:not(:focus), .ls-form textarea:hover:not(:focus) { border-color: #b3a383; }
.ls-form input:focus, .ls-form select:focus, .ls-form textarea:focus { outline: none; border-color: var(--ls-gold); box-shadow: 0 0 0 3px rgba(143, 108, 39, .22); }
.ls-form textarea { resize: vertical; min-height: 130px; }
.ls-form select { appearance: none; -webkit-appearance: none; padding-inline-end: 40px; cursor: pointer;
	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='%238f6c27' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 14px center; background-size: 16px; }
[dir=ltr] .ls-form select, .ls-form select[dir=ltr] { background-position: right 14px center; }
.ls-form small { display: block; color: var(--ls-muted); font-size: 13px; margin-top: 4px; }
.ls-form__grid { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.ls-field__required { color: var(--ls-error); margin-inline-start: 2px; }
.ls-field__choices { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.ls-field__choice { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; }
.ls-field--hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ls-check { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 500 !important; }
.ls-form input[type=file] { width: 100%; font-family: var(--ls-font-body); }

/* ---- auth (sign-in) ---- */
.ls-auth { max-width: 460px; margin: 0 auto; padding: 32px 0 48px; }
.ls-auth__title { font-family: var(--ls-font-display); font-size: 32px; margin: 0 0 8px; color: var(--ls-ink); }
.ls-auth__lead { color: var(--ls-muted); margin: 0 0 20px; }
.ls-auth__modes { display: flex; gap: 8px; margin-bottom: 16px; }
.ls-auth__mode { flex: 1; border-radius: var(--ls-radius); border: 1px solid var(--ls-line); background: var(--ls-bg); color: var(--ls-ink); font: 600 14px var(--ls-font-body); padding: 10px 14px; cursor: pointer; }
.ls-auth__mode.is-active { background: var(--ls-gold); border-color: var(--ls-gold); color: var(--ls-panel); }
.ls-auth__mode:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 2px; }
.ls-auth__form { background: var(--ls-panel); border-top: 3px solid var(--ls-gold); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); padding: 24px; }
.ls-auth__row { display: flex; justify-content: space-between; align-items: center; margin: -4px 0 16px; font-size: 14px; }
.ls-auth__hint { color: var(--ls-muted); font-size: 13px; margin: 12px 0 0; text-align: center; }
.ls-auth__switch { text-align: center; margin: 20px 0 0; color: var(--ls-muted); }
.ls-auth a { color: var(--ls-gold-dark); text-decoration: underline; text-underline-offset: 3px; }

/* ---- cards / grid ---- */
.ls-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ls-card { background: var(--ls-panel); border-top: 3px solid var(--ls-gold); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); transition: transform .15s; }
.ls-card:hover { transform: translateY(-2px); }
.ls-card__link { display: flex; flex-direction: column; height: 100%; padding: 24px; color: inherit; text-decoration: none; box-sizing: border-box; }
.ls-card__link:focus-visible { outline: 2px solid var(--ls-gold); outline-offset: 3px; border-radius: var(--ls-radius); }
.ls-card__icon { font-size: 28px; line-height: 1; margin-bottom: 10px; }
.ls-card__kicker { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ls-gold-dark); }
.ls-card__title { font-family: var(--ls-font-display); font-size: 21px; margin: 6px 0 8px; color: var(--ls-ink); }
.ls-card__link:hover .ls-card__title { color: var(--ls-gold-dark); }
.ls-card__desc { color: var(--ls-muted); font-size: 15px; flex: 1; margin: 0 0 16px; }
.ls-card__price { display: flex; align-items: baseline; gap: 8px; }
.ls-card__amount { font-family: var(--ls-font-display); font-size: 26px; font-weight: 700; color: var(--ls-gold-dark); }
.ls-card__quote { font-size: 17px; font-weight: 700; color: var(--ls-gold-dark); }
.ls-card__vat, .ls-card__meta { font-size: 12px; color: var(--ls-muted); }
.ls-card__meta { margin-top: 8px; }
.ls-empty { color: var(--ls-muted); background: var(--ls-panel-2); border-radius: var(--ls-radius); padding: 20px; text-align: center; }

/* ---- case summary / timeline / paybox ---- */
.ls-case { background: var(--ls-panel); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); padding: 24px; margin: 0 0 24px; }
.ls-case__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ls-case__title { font-family: var(--ls-font-display); font-size: 26px; margin: 0; }
.ls-case__desc { color: var(--ls-muted); margin: 10px 0 20px; }
.ls-timeline { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; counter-reset: step; }
.ls-timeline__step { position: relative; text-align: center; font-size: 13px; color: var(--ls-faint); padding-top: 34px; }
.ls-timeline__step::before { content: ""; position: absolute; top: 13px; inset-inline: -4px; height: 2px; background: var(--ls-line-soft); }
.ls-timeline__step:first-child::before { inset-inline-start: 50%; }
.ls-timeline__step:last-child::before { inset-inline-end: 50%; }
.ls-timeline__dot { position: absolute; top: 0; inset-inline-start: calc(50% - 14px); width: 28px; height: 28px; border-radius: 50%; background: var(--ls-bg-2); color: var(--ls-faint); font-weight: 700; font-size: 13px; display: grid; place-items: center; border: 2px solid var(--ls-line-soft); }
.ls-timeline__step.is-done .ls-timeline__dot { background: var(--ls-gold); border-color: var(--ls-gold); color: var(--ls-panel); }
.ls-timeline__step.is-done { color: var(--ls-ink); }
.ls-timeline__step.is-current .ls-timeline__dot { background: var(--ls-panel); border-color: var(--ls-gold); color: var(--ls-gold-dark); box-shadow: 0 0 0 4px var(--ls-st-pending-bg); }
.ls-timeline__step.is-current { color: var(--ls-ink); font-weight: 700; }
.ls-paybox { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; background: var(--ls-panel-2); border: 1px solid var(--ls-line-soft); border-radius: var(--ls-radius); padding: 18px 20px; margin: 0 0 20px; }
.ls-paybox--muted { color: var(--ls-muted); }
.ls-paybox__label { display: block; font-size: 13px; color: var(--ls-muted); }
.ls-paybox__amount { font-family: var(--ls-font-display); font-size: 30px; color: var(--ls-gold-dark); }
.ls-paybox__note { margin: 6px 0 0; color: var(--ls-muted); font-size: 14px; }
.ls-case__details summary { cursor: pointer; font-weight: 600; color: var(--ls-gold-dark); }
.ls-dl { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr; gap: 8px 16px; margin: 12px 0 0; }
.ls-dl dt { color: var(--ls-muted); font-weight: 600; }
.ls-dl dd { margin: 0; }

/* ---- documents ---- */
.ls-docs { background: var(--ls-panel); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); padding: 24px; margin: 0 0 24px; }
.ls-docs__title, .ls-thread__title { font-family: var(--ls-font-display); font-size: 22px; margin: 0 0 14px; }
.ls-docs__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 8px; }
.ls-doc { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ls-line-soft); border-radius: var(--ls-radius); background: var(--ls-bg); }
.ls-doc--office { border-inline-start: 4px solid var(--ls-gold); }
.ls-doc--hidden { opacity: .6; border-style: dashed; }
.ls-doc__name { font-weight: 600; color: var(--ls-ink); text-decoration: none; overflow-wrap: anywhere; }
.ls-doc__name:hover { color: var(--ls-gold-dark); text-decoration: underline; }
.ls-doc__meta { grid-column: 2; font-size: 12px; color: var(--ls-muted); }
.ls-doc__actions { grid-column: 3; grid-row: 1 / span 2; font-size: 13px; }
.ls-doc__actions a { color: var(--ls-gold-dark); }
.ls-danger, .ls-doc__actions .ls-danger { color: var(--ls-error) !important; }
.ls-docs__drop { display: flex; flex-direction: column; gap: 6px; border: 2px dashed var(--ls-line); border-radius: var(--ls-radius); padding: 18px; background: var(--ls-panel-2); cursor: pointer; }
.ls-docs__drop span { color: var(--ls-muted); font-size: 13px; font-weight: 400; }
.ls-docs__form .ls-btn { margin-top: 12px; }
.ls-docs__opt { display: inline-flex !important; gap: 6px; margin: 10px 16px 0 0; font-weight: 500 !important; }
.ls-docs-table, .ls-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.ls-table th { text-align: start; font-size: 13px; color: var(--ls-muted); border-bottom: 1px solid var(--ls-line); padding: 8px 10px; }
.ls-table td { padding: 10px; border-bottom: 1px solid var(--ls-line-soft); vertical-align: middle; }

/* ---- thread ---- */
.ls-thread { background: var(--ls-panel); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); padding: 24px; margin: 0 0 24px; }
.ls-thread__list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 12px; }
.ls-thread__empty { color: var(--ls-muted); text-align: center; padding: 16px; background: var(--ls-panel-2); border-radius: var(--ls-radius); }
.ls-msg { max-width: 85%; border-radius: var(--ls-radius); padding: 12px 16px; background: var(--ls-bg); border: 1px solid var(--ls-line-soft); }
.ls-msg--mine { margin-inline-start: auto; background: var(--ls-panel-2); border-color: var(--ls-gold-bright); }
.ls-msg--internal { background: var(--ls-st-pending-bg); border-style: dashed; }
.ls-msg__meta { display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--ls-muted); margin-bottom: 6px; flex-wrap: wrap; }
.ls-msg__read { color: var(--ls-st-active); }
.ls-msg__body { white-space: normal; overflow-wrap: anywhere; }
.ls-thread__form textarea { min-height: 90px; }
.ls-thread__options { display: flex; gap: 16px; flex-wrap: wrap; font-size: 14px; margin: 10px 0; }
.ls-thread__options label { display: inline-flex; gap: 6px; font-weight: 500; }
.ls-thread__form .ls-btn { margin-top: 10px; }
.ls-thread__closed { color: var(--ls-muted); }
.ls-threads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ls-threads__item a { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--ls-radius); background: var(--ls-panel); border: 1px solid var(--ls-line-soft); text-decoration: none; color: inherit; }
.ls-threads__item.is-unread a { border-inline-start: 4px solid var(--ls-gold); }
.ls-threads__title { font-weight: 700; }
.ls-threads__title small { color: var(--ls-muted); font-weight: 400; margin-inline-start: 6px; }
.ls-threads__preview { color: var(--ls-muted); }
.ls-threads__meta { font-size: 12px; color: var(--ls-faint); }

/* ---- quote form / intake / upload ---- */
.ls-quote-form__title { font-family: var(--ls-font-display); font-size: 20px; margin: 0 0 6px; }
.ls-quote-form__intro, .ls-quote-form__note { color: var(--ls-muted); font-size: 14px; }
.ls-intake { margin: 20px 0; padding: 20px; background: var(--ls-panel-2); border-radius: var(--ls-radius); border: 1px solid var(--ls-line-soft); }
.ls-intake__title { font-family: var(--ls-font-display); font-size: 20px; margin: 0 0 14px; }
.ls-upload { margin: 16px 0; padding: 16px; border: 2px dashed var(--ls-line); border-radius: var(--ls-radius); background: var(--ls-bg); }
.ls-upload__title { margin: 0 0 8px; font-size: 16px; }
.ls-upload__docs { margin: 0 0 12px; padding-inline-start: 18px; }
.ls-upload__hint, .ls-upload__guidance { color: var(--ls-muted); font-size: 13px; margin: 6px 0; }

/* ---- share ---- */
.ls-share { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ls-share--section { border-top: 1px solid var(--ls-line); padding-top: 16px; margin-top: 32px; }
.ls-share__label { font-weight: 700; font-size: 14px; color: var(--ls-muted); margin-inline-end: 6px; }
.ls-share__btn { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--ls-line); background: var(--ls-panel); color: var(--ls-ink); cursor: pointer; text-decoration: none; }
.ls-share__btn:hover { color: var(--ls-gold-dark); border-color: var(--ls-gold); }
.ls-share--footer .ls-share__btn { background: transparent; border-color: rgba(255,255,255,.2); color: inherit; }
.ls-share__btn.is-copied { background: var(--ls-st-active-bg); color: var(--ls-st-active); border-color: var(--ls-st-active); }

/* ---- contact ---- */
.ls-contact__head { margin: 0 0 20px; }
.ls-contact__title { font-family: var(--ls-font-display); font-size: 28px; line-height: 1.2; margin: 4px 0 8px; color: var(--ls-ink); }
.ls-contact__lead { color: var(--ls-muted); margin: 0; max-width: 60ch; }
.ls-contact__form { background: var(--ls-panel); border: 1px solid #e6dcc4; border-top: 4px solid var(--ls-gold); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); padding: 28px; }
.ls-contact__form .ls-field { margin: 0 0 18px; }
.ls-contact__form .ls-check { margin: 4px 0 20px; color: var(--ls-muted); font-size: 14px; align-items: flex-start; }
.ls-contact__form .ls-check input { margin-top: 4px; accent-color: var(--ls-gold); width: 18px; height: 18px; flex: none; }
.ls-contact__actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.ls-contact__actions .ls-btn { min-width: 180px; }
.ls-contact__note { color: var(--ls-faint, #8a7d66); font-size: 13px; }
.ls-modal .ls-contact__form { border: 0; border-top: 0; box-shadow: none; padding: 8px 0 0; background: transparent; }
@media (max-width: 600px) { .ls-contact__form { padding: 20px 16px; } .ls-contact__actions .ls-btn { width: 100%; } }

/* ---- payment simulation ---- */
.ls-paysim { background: var(--ls-panel); border-radius: var(--ls-radius); box-shadow: var(--ls-shadow); padding: 24px; max-width: 520px; }
.ls-paysim form { display: flex; gap: 12px; flex-wrap: wrap; }

@media (max-width: 640px) {
	.ls-timeline__step { font-size: 11px; }
	.ls-msg { max-width: 100%; }
	.ls-dl { grid-template-columns: 1fr; }
	.ls-doc { grid-template-columns: auto 1fr; }
	.ls-doc__actions { grid-column: 1 / -1; grid-row: auto; }
}