/* FariDocs 1.21.0 — connected Workspace: pipeline, Customer 360, products, reminders */
.workspace-role-badge { width: fit-content; margin-top: 7px; padding: 4px 7px; border-radius: 999px; background: #dff4f1; color: #08746b; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pipeline-panel, .dashboard-reminders, .customer-360-panel { margin: 0 0 18px; }
.pipeline-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 10px; }
.pipeline-grid article { min-width: 0; padding: 14px; border: 1px solid #dce8ec; border-radius: 11px; background: #f8fbfc; }
.pipeline-grid article span { display: block; margin-bottom: 7px; color: #657f90; font-size: 8px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.pipeline-grid article strong { display: block; overflow: hidden; color: #123b5d; font-size: clamp(11px,1.2vw,16px); text-overflow: ellipsis; white-space: nowrap; }
.pipeline-grid .pipeline-outstanding { border-color: #f0c8bb; background: #fff8f5; }
.pipeline-grid .pipeline-outstanding strong { color: #a64e38; }
.reminder-mini-list { display: grid; gap: 8px; }
.reminder-mini-list > a { display: grid; grid-template-columns: 32px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #dce8ec; border-radius: 10px; color: inherit; }
.reminder-type-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 8px; background: #e4f4f2; color: #0b8177; }
.reminder-type-icon svg, .customer-timeline h3 svg, .reminder-card-icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.reminder-mini-list div { display: grid; min-width: 0; gap: 2px; }
.reminder-mini-list strong, .reminder-mini-list small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reminder-mini-list strong { color: #153c57; font-size: 10px; }
.reminder-mini-list small { color: #718794; font-size: 8px; }
.reminder-mini-list > a > b { padding: 5px 7px; border-radius: 999px; background: #e6f3f8; color: #31728c; font-size: 8px; }
.reminder-mini-list > a > b.overdue { background: #fff0ed; color: #a54535; }

.customer-360-panel { padding: 22px; border-color: #9ed8d0; background: linear-gradient(145deg,#fff,#f1faf8); }
.customer-360-head { display: flex; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.customer-360-head > div { display: grid; gap: 4px; }
.customer-360-head span { color: #118c80; font-size: 8px; font-weight: 900; letter-spacing: .13em; }
.customer-360-head h2, .customer-360-head p { margin: 0; }
.customer-360-head h2 { color: #123b5d; font-size: 20px; }
.customer-360-head p { color: #667f8e; font-size: 10px; }
.customer-360-head > a { height: 30px; display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; border: 1px solid #bed9dc; border-radius: 8px; color: #557684; font-size: 9px; font-weight: 800; }
.customer-360-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 9px; margin-bottom: 16px; }
.customer-360-stats article { display: grid; gap: 2px; padding: 12px; border: 1px solid #d8e9e9; border-radius: 10px; background: rgba(255,255,255,.78); }
.customer-360-stats strong { color: #103e59; font-size: 19px; }
.customer-360-stats span { color: #69818d; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.customer-360-grid { display: grid; grid-template-columns: minmax(240px,.7fr) minmax(300px,1.3fr); gap: 16px; align-items: start; }
.customer-activity-form { padding: 16px; border: 1px solid #d8e7e9; border-radius: 11px; background: #fff; }
.customer-activity-form h3, .customer-timeline h3 { margin: 0 0 12px; color: #123b5d; font-size: 12px; }
.customer-timeline { min-width: 0; padding: 16px; border: 1px solid #d8e7e9; border-radius: 11px; background: #fff; }
.customer-timeline h3 { display: flex; align-items: center; gap: 7px; }
.customer-timeline article { position: relative; display: grid; grid-template-columns: 10px minmax(0,1fr); gap: 10px; padding: 0 0 16px; }
.customer-timeline article:not(:last-child)::before { content:""; position: absolute; left: 4px; top: 10px; bottom: -2px; width: 1px; background: #cee1e4; }
.customer-timeline article > i { position: relative; z-index: 1; width: 9px; height: 9px; margin-top: 3px; border: 2px solid #fff; border-radius: 50%; background: #159b8f; box-shadow: 0 0 0 1px #77bfb9; }
.customer-timeline article > div { display: grid; gap: 3px; min-width: 0; }
.customer-timeline article span { color: #69828f; font-size: 7px; font-weight: 900; letter-spacing: .06em; }
.customer-timeline article strong { color: #153d58; font-size: 10px; overflow-wrap: anywhere; }
.customer-timeline article p { margin: 0; color: #657d8b; font-size: 9px; overflow-wrap: anywhere; }
.customer-timeline .timeline-reminder > i { background: #e89440; }
.customer-timeline .timeline-document > i { background: #297ca0; }
.customer-quick-action.timeline-action { border-color: #c8b8e5; background: #f5f1fc; color: #7356a6; }

.product-master-layout { grid-template-columns: minmax(300px,.7fr) minmax(420px,1.3fr); align-items: start; }
.form-three { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; }
.inline-check { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; }
.inline-check input { width: 16px !important; min-height: 16px !important; margin: 0; }
.product-master-list { display: grid; gap: 9px; }
.product-master-card { overflow: hidden; border: 1px solid #dae7eb; border-radius: 11px; background: #f9fbfc; }
.product-master-card summary { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 13px; cursor: pointer; list-style: none; }
.product-master-card summary::-webkit-details-marker { display: none; }
.product-master-card summary > div { display: grid; min-width: 0; gap: 2px; }
.product-master-card summary b, .product-master-card summary small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.product-master-card summary b { color: #153d58; font-size: 11px; }
.product-master-card summary small { color: #708692; font-size: 8px; }
.product-master-card summary > strong { color: #0f766e; font-size: 10px; }
.product-edit-form { padding: 14px; border-top: 1px solid #dae7eb; background: #fff; }
.product-edit-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.product-delete-form { padding: 0 14px 14px; background: #fff; text-align: right; }
.product-delete-form button { display: inline-flex; align-items: center; gap: 5px; border: 0; background: transparent; color: #ad4a4a; font: 800 9px Inter,sans-serif; cursor: pointer; }
.product-delete-form svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.reminder-toolbar { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.reminder-filters { display: flex; gap: 5px; margin-bottom: 24px; padding: 4px; border: 1px solid #d6e4e8; border-radius: 10px; background: #edf4f6; }
.reminder-filters a { padding: 7px 10px; border-radius: 7px; color: #607985; font-size: 9px; font-weight: 800; }
.reminder-filters a.active { background: #fff; color: #123b5d; box-shadow: 0 2px 7px rgba(14,54,74,.1); }
.reminder-list { display: grid; gap: 10px; }
.reminder-card { display: grid; grid-template-columns: 42px minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 15px 18px; }
.reminder-card.is-overdue { border-color: #e4b8ad; }
.reminder-card-icon { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: #e2f4f1; color: #0b8176; }
.reminder-card.is-overdue .reminder-card-icon { background: #fff0ed; color: #a74a39; }
.reminder-card-copy { display: grid; min-width: 0; gap: 3px; }
.reminder-card-copy > div { display: flex; align-items: center; gap: 8px; }
.reminder-card-copy > div > span { color: #6d8390; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.reminder-card-copy h2 { margin: 0; color: #153d58; font-size: 12px; }
.reminder-card-copy p, .reminder-card-copy small { margin: 0; color: #708794; font-size: 9px; overflow-wrap: anywhere; }
.reminder-actions { display: flex; gap: 6px; }
.reminder-actions form { margin: 0; }
.reminder-actions button { min-height: 30px; padding: 6px 9px; border: 1px solid #c8dce1; border-radius: 7px; background: #f5f9fa; color: #345f70; font: 800 8px Inter,sans-serif; cursor: pointer; }
.reminder-actions button.primary { border-color: #198b81; background: #13877d; color: #fff; }

.workspace-product-picker { margin: 0 0 10px; padding: 10px; border: 1px solid #bddbd8; border-radius: 10px; background: #f1faf8; }
.workspace-product-picker label { display: grid; grid-template-columns: auto minmax(180px,1fr); align-items: center; gap: 10px; color: #17445b; font-size: 9px; font-weight: 800; }
.workspace-product-picker select { min-width: 0; }

html[data-theme="dark"] .workspace-role-badge { background: #123f3c; color: #84ddd2; }
html[data-theme="dark"] .pipeline-grid article, html[data-theme="dark"] .reminder-mini-list > a, html[data-theme="dark"] .product-master-card { border-color: #2d4d5a; background: #102c39; }
html[data-theme="dark"] .pipeline-grid article span, html[data-theme="dark"] .customer-360-head p, html[data-theme="dark"] .customer-timeline article span, html[data-theme="dark"] .customer-timeline article p, html[data-theme="dark"] .reminder-card-copy p, html[data-theme="dark"] .reminder-card-copy small { color: #9bb2bc; }
html[data-theme="dark"] .pipeline-grid article strong, html[data-theme="dark"] .reminder-mini-list strong, html[data-theme="dark"] .customer-360-head h2, html[data-theme="dark"] .customer-360-stats strong, html[data-theme="dark"] .customer-activity-form h3, html[data-theme="dark"] .customer-timeline h3, html[data-theme="dark"] .customer-timeline article strong, html[data-theme="dark"] .product-master-card summary b, html[data-theme="dark"] .reminder-card-copy h2 { color: #eef7f9; }
html[data-theme="dark"] .pipeline-grid .pipeline-outstanding { border-color: #67463d; background: #302722; }
html[data-theme="dark"] .customer-360-panel { border-color: #2d655f; background: linear-gradient(145deg,#102b38,#103838); }
html[data-theme="dark"] .customer-360-stats article, html[data-theme="dark"] .customer-activity-form, html[data-theme="dark"] .customer-timeline, html[data-theme="dark"] .product-edit-form, html[data-theme="dark"] .product-delete-form { border-color: #2e505d; background: #0d2633; }
html[data-theme="dark"] .customer-timeline article > i { border-color: #0d2633; }
html[data-theme="dark"] .customer-timeline article:not(:last-child)::before { background: #31515d; }
html[data-theme="dark"] .reminder-filters { border-color: #2d4d59; background: #09212d; }
html[data-theme="dark"] .reminder-filters a { color: #9bb2bc; }
html[data-theme="dark"] .reminder-filters a.active { background: #184255; color: #fff; }
html[data-theme="dark"] .workspace-product-picker { border-color: #2f615c; background: #103735; }
html[data-theme="dark"] .workspace-product-picker label { color: #d7ece9; }

@media (max-width: 1080px) { .pipeline-grid { grid-template-columns: repeat(3,minmax(0,1fr)); } .product-master-layout { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .pipeline-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .customer-360-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .customer-360-grid { grid-template-columns: 1fr; } .reminder-toolbar { display: block; } .reminder-filters { width: fit-content; margin-top: -10px; } .reminder-card { grid-template-columns: 38px minmax(0,1fr); } .reminder-actions { grid-column: 1/-1; justify-content: flex-end; } }
@media (max-width: 520px) { .pipeline-grid, .customer-360-stats { grid-template-columns: 1fr 1fr; } .pipeline-grid article { padding: 11px; } .form-three { grid-template-columns: 1fr; } .product-master-card summary { grid-template-columns: minmax(0,1fr) auto; } .product-master-card summary .status-pill { grid-column: 1/-1; justify-self: start; } .customer-360-head > a span { display: none; } .reminder-mini-list > a { grid-template-columns: 30px minmax(0,1fr); } .reminder-mini-list > a > b { grid-column: 2; justify-self: start; } .workspace-product-picker label { grid-template-columns: 1fr; } }
