/* Elevated search experience */
.search-wrap { width: min(500px, 48vw); }
.search {
  height: 54px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 24px rgba(4,19,29,.18), inset 0 1px 0 rgba(255,255,255,.7);
  padding-left: 46px;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.search:hover { border-color: rgba(19,119,232,.58); }
.search:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(19,119,232,.22), 0 14px 30px rgba(4,19,29,.2); }
.search-icon { left: 17px; top: 16px; color: var(--blue); font-size: 21px; font-weight: 700; }
.search-clear { top: 10px; right: 12px; width: 32px; height: 32px; border-radius: 9px; line-height: 27px; }
.search-clear:hover { background: #edf3f7; }
.search-menu { top: 62px; padding: 8px; border: 1px solid rgba(213,223,230,.96); border-radius: 14px; box-shadow: 0 22px 50px rgba(4,20,31,.28); overflow: hidden; }
.create-result { border-radius: 10px; padding: 14px 15px; box-shadow: inset 0 1px 0 rgba(255,255,255,.1); transition: transform .16s ease, background .16s ease; }
.create-result:hover { background: var(--navy2); transform: translateY(-1px); }
.result-label { padding: 13px 10px 7px; font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.result { min-height: 58px; align-items: center; gap: 12px; padding: 10px; border-top: 0; border-radius: 10px; transition: background .15s ease, transform .15s ease; }
.result + .result { margin-top: 2px; }
.result:hover { background: #f0f6fb; transform: translateX(2px); }
.result .swatch { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(16,35,49,.12); }
.result strong { font-size: 13px; }
.product-result { width: 100%; border: 0; background: transparent; color: var(--ink); text-align: left; }
.product-result > span:last-child { margin-left: auto; color: var(--blue); font-size: 22px; font-weight: 400; }
@media(max-width:720px){.search-wrap{width:100%}.search{height:52px}.search-menu{top:60px}}

.component-row input[readonly] { background: #f4f6f7; color: #60717c; cursor: default; }

/* Administration tint-system tabs */
.admin-tint-tabs { display: inline-flex; gap: 5px; padding: 5px; margin: 10px 0 0; background: #eaf0f4; border: 1px solid #d7e0e6; border-radius: 13px; }
.admin-tint-tabs button { min-width: 118px; border: 0; border-radius: 9px; padding: 10px 15px; background: transparent; color: #61717d; font-weight: 700; cursor: pointer; transition: background .16s ease, color .16s ease, box-shadow .16s ease; }
.admin-tint-tabs button:hover { color: var(--ink); }
.admin-tint-tabs button.active { background: var(--navy); color: white; box-shadow: 0 4px 10px rgba(10,34,49,.2); }
.admin-tint-tabs ~ .form-card { margin-top: 12px !important; border-color: #d4dee5; box-shadow: 0 12px 30px rgba(22,48,64,.07); }
.admin-tint-tabs ~ .form-card .section-head { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
@media(max-width:720px){.admin-tint-tabs{display:flex;width:100%;overflow:auto}.admin-tint-tabs button{min-width:108px;padding:9px 11px}}

/* Administration workspace */
.admin-page { max-width: 1320px; margin: 0 auto; padding: 12px 4px 36px; }
.admin-page .page-title { margin: 4px 0 20px; padding: 26px 28px; color: #fff; background: linear-gradient(135deg, var(--navy), #20485b); border-radius: 17px; box-shadow: 0 14px 28px rgba(9,33,47,.16); }
.admin-page .page-title h1 { font-size: 30px; letter-spacing: -.03em; }
.admin-page .page-title .muted { margin: 7px 0 0; color: #c9d8df; }
.admin-overview-grid { grid-template-columns: minmax(0, 1.45fr) minmax(300px, .78fr); align-items: start; gap: 18px; }
.admin-overview-grid > .form-card, .admin-overview-grid .side-card { padding: 24px; border-color: #d9e2e7; box-shadow: 0 10px 28px rgba(23,48,63,.06); }
.admin-overview-grid > .form-card > h2, .admin-overview-grid .side-card h3 { font-size: 19px; letter-spacing: -.02em; }
.admin-overview-grid .section-head { margin: 24px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.admin-overview-grid .history-item { display: grid; grid-template-columns: minmax(140px,1fr) 105px auto; align-items: center; gap: 10px; padding: 12px 13px; background: #fbfcfc; }
.admin-overview-grid .history-item span { margin: 0; }
.admin-overview-grid .history-item .btn { justify-self: end; margin: 0 !important; }
.admin-page > .section-head { margin: 30px 2px 0; padding: 22px 0 14px; border-top: 1px solid #d7e0e5; }
.admin-page > .section-head h2 { font-size: 24px; letter-spacing: -.025em; }
.admin-tint-tabs { margin: 0; }
.admin-tint-tabs ~ .form-card { padding: 22px; }
.admin-tint-tabs ~ .form-card .history-list { gap: 8px; }
@media(max-width:900px){.admin-overview-grid{grid-template-columns:1fr}.admin-overview-grid .history-item{grid-template-columns:1fr auto}.admin-overview-grid .history-item span{grid-column:1}.admin-overview-grid .history-item .btn{grid-column:2;grid-row:1 / span 2}}

/* Shared page treatment */
.view-history .page, .view-opened .page, .view-new .page, .view-editor .page { max-width: 1320px; margin: 0 auto; padding: 12px 4px 36px; }
.view-history .page-title, .view-opened .page-title, .view-new .page-title, .view-editor .page-title { margin: 4px 0 20px; padding: 24px 27px; color: white; background: linear-gradient(135deg, var(--navy), #20485b); border-radius: 17px; box-shadow: 0 14px 28px rgba(9,33,47,.15); }
.view-history .page-title h1, .view-opened .page-title h1, .view-new .page-title h1, .view-editor .page-title h1 { font-size: 29px; letter-spacing: -.03em; }
.view-history .page-title .muted, .view-opened .page-title .muted { color: #c9d8df; }
.view-history .page-title .save-state, .view-new .page-title .save-state, .view-editor .page-title .save-state { color: #b9f0ce; }
.view-history .page-title .btn.danger, .view-editor .page-title .btn.danger { background: #d95a5a; border-color: #d95a5a; box-shadow: 0 5px 12px rgba(0,0,0,.15); }
.view-history #history-search { height: 48px; border-radius: 12px; border-color: #d5e0e6; box-shadow: 0 5px 14px rgba(22,48,63,.05); }
.view-history .table-wrap { border-color: #d8e2e7; box-shadow: 0 12px 30px rgba(23,48,63,.06); }
.view-history .table th { padding-top: 14px; padding-bottom: 14px; background: #f2f6f8; color: #5d6d78; font-weight: 700; }
.view-history .table td { padding-top: 13px; padding-bottom: 13px; }
.view-history .table tbody tr:hover { background: #f7fafb; }
.view-opened .open-grid { gap: 16px; margin-top: 0; }
.view-opened .open-card { min-height: 170px; padding: 19px; background: white; border-color: #d7e1e6; border-radius: 14px; box-shadow: 0 10px 24px rgba(22,48,63,.06); }
.view-opened .open-card h3 { font-size: 20px; }
.view-opened .open-card .meta, .view-opened .open-card .details { color: #63737e; }
.view-opened .saved { background: #e1f4e9; }
.view-new .form-card, .view-editor .form-card, .view-new .side-card, .view-editor .side-card { border-color: #d7e1e6; box-shadow: 0 12px 30px rgba(23,48,63,.06); }
.view-new .form-layout { grid-template-columns: minmax(0, 1fr); }
.view-new .form-layout > aside { display: none; }
.view-new .form-card, .view-editor .form-card { padding: 25px; }
.view-new .section-head, .view-editor .section-head { margin: 25px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
.view-new .section-head h2, .view-editor .section-head h2 { font-size: 22px; letter-spacing: -.02em; }
.view-new .format-bar, .view-editor .format-bar { background: #eaf0f4; padding: 6px; }
.view-new .format-bar button, .view-editor .format-bar button { font-weight: 700; }
.view-new .component-row, .view-editor .component-row { padding: 7px; background: #fbfcfc; border: 1px solid #e4eaed; border-radius: 11px; }
.view-new .side-card, .view-editor .side-card { padding: 20px; }
@media(max-width:720px){.view-history .page,.view-opened .page,.view-new .page,.view-editor .page{padding:6px 0 24px}.view-history .page-title,.view-opened .page-title,.view-new .page-title,.view-editor .page-title{padding:20px}.view-new .form-card,.view-editor .form-card{padding:16px}}

/* Keep every view aligned to the dashboard's content edge. */
.view-admin .admin-page, .view-history .page, .view-opened .page, .view-new .page, .view-editor .page { max-width: none; margin: 0; padding: 0 0 32px; }
.view-admin .admin-page .page-title, .view-history .page-title, .view-opened .page-title, .view-new .page-title, .view-editor .page-title { margin: 0 0 16px; padding: 28px 30px; }
@media(max-width:720px){.view-admin .admin-page,.view-history .page,.view-opened .page,.view-new .page,.view-editor .page{padding:0 0 24px}.view-admin .admin-page .page-title,.view-history .page-title,.view-opened .page-title,.view-new .page-title,.view-editor .page-title{padding:20px;margin-bottom:12px}}

/* Formula identity comes first: name, number, then product. */
.formula-color-name { order: 1 !important; }
.formula-color-number { order: 2 !important; }
.view-new .form-card > .field-grid > .field, .view-editor .form-card > .field-grid > .field { order: 4; }
.view-new .form-card > .field-grid > .field:nth-child(1), .view-editor .form-card > .field-grid > .field:nth-child(1) { order: 3; }
.view-new .form-card > .field-grid > .field:nth-child(2), .view-editor .form-card > .field-grid > .field:nth-child(2) { order: 1; }
.view-new .form-card > .field-grid > .field:nth-child(3), .view-editor .form-card > .field-grid > .field:nth-child(3) { order: 2; }

.formula-product-number { order: 3 !important; }
.formula-product-name { order: 4 !important; }
.formula-product-name::after { content: ' '; display: block; min-height: 14px; font-size: 12px; }
.formula-details { grid-column: 1 / -1; order: 5; margin-top: 2px; border: 1px solid #d8e2e7; border-radius: 12px; background: #f8fafb; overflow: hidden; }
.formula-details summary { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; color: var(--ink); font-weight: 700; cursor: pointer; list-style: none; }
.formula-details summary::-webkit-details-marker { display: none; }
.formula-details summary::after { content: '⌄'; color: var(--blue); font-size: 18px; transition: transform .18s ease; }
.formula-details[open] summary { border-bottom: 1px solid #dce5e9; background: #fff; }
.formula-details[open] summary::after { transform: rotate(180deg); }
.formula-details summary span { margin-left: auto; color: var(--muted); font-size: 12px; font-weight: 500; }
.formula-details-grid { padding: 16px; }
@media(max-width:720px){.formula-details summary{align-items:flex-start;flex-wrap:wrap}.formula-details summary span{margin-left:0;flex-basis:calc(100% - 28px)}.formula-details-grid{padding:14px}}

.product-suggestions { display: grid; gap: 4px; margin: 12px 0 0; padding: 7px; border: 1px solid #d5e1e8; border-radius: 12px; background: #f7fafc; }
.product-suggestions:empty { display: none; }
.product-suggestions button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 11px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.product-suggestions button:hover { background: #e8f2fa; }
.product-suggestions strong { min-width: 68px; color: var(--blue); }
.product-suggestions span { color: #536671; font-size: 13px; }
.product-suggestions button { display:grid; grid-template-columns:76px minmax(0,1fr); }.product-suggestions small { grid-column:2; margin-top:-6px; color:#819099; font-size:11px; font-weight:700; }

.component-text { display: flex; align-items: center; min-height: 42px; padding: 0 4px; color: #40515c; font-weight: 600; }
.view-editor .component-row.has-apply { grid-template-columns: 32px 90px minmax(110px,1fr) 96px 92px 92px 32px 36px; }
.view-editor .component-row.has-apply.has-original, .view-editor .component-row.has-apply.has-boosted { grid-template-columns: 32px 90px minmax(110px,1fr) 96px 96px 92px 92px 32px 36px; }
.view-editor .component-row.has-apply.has-original.has-boosted { grid-template-columns: 32px 90px minmax(110px,1fr) 96px 96px 96px 92px 92px 32px 36px; }
.apply-add { color:#31586a; border:1px solid #c8d7dc; border-radius:8px; background:#edf4f5; font-size:16px; font-weight:800; }
.apply-add:disabled { opacity:.35; cursor:not-allowed; background:#f2f4f4; color:#849199; border-color:#dfe5e6; }
.formula-total { display:flex; justify-content:space-between; align-items:center; margin:12px 0 0; padding:13px 15px; border:1px solid #d7e1e4; border-radius:10px; background:#f4f7f7; color:#536671; }
.formula-total strong { color:#1d3a48; font-size:16px; }
.formula-total.is-near-limit { border-color:#e8bf65; background:#fff8e8; }
.formula-total.is-near-limit strong { color:#8a5a08; }
.formula-total.is-over-limit { border-color:#df8b82; background:#fff0ee; }
.formula-total.is-over-limit strong { color:#9e2d21; }
.tint-limit-warning { margin:8px 0 0; padding:10px 13px; border-radius:12px; background:#fff8e8; color:#7b560f; font-size:12px; font-weight:750; line-height:1.4; }
.formula-total.is-over-limit + .tint-limit-warning { background:#fff0ee; color:#922f25; }
.tint-capacity-form { display:grid; grid-template-columns:repeat(4,minmax(150px,1fr)) auto; gap:12px; align-items:end; }
.tint-capacity-form .field { margin:0; }
.tint-capacity-form .field .muted { display:block; margin-top:5px; font-size:11px; }
.tint-capacity-note { margin:16px 0 0; }
@media(max-width:1000px){.tint-capacity-form{grid-template-columns:repeat(2,minmax(0,1fr))}.tint-capacity-form>div:last-child{grid-column:1/-1}}
@media(max-width:560px){.tint-capacity-form{grid-template-columns:1fr}}
.formula-actions { display:flex; align-items:center; gap:8px; margin-left:auto; }
.formula-actions a.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; }
@media(max-width:720px){.formula-actions{width:100%; margin:10px 0 0;}.formula-actions .btn{flex:1}}
.formula-summary { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:10px 0 14px; padding:12px 14px; border:1px solid #e0e8ea; border-radius:15px; background:#fbfcfc; }.formula-summary span { min-width:0; color:#60737c; font-size:11px; }.formula-summary b { display:block; margin-bottom:3px; color:#87959b; font-size:9px; letter-spacing:.08em; text-transform:uppercase; }.revision-card .revision-diff { color:#405b67; line-height:1.4; }.history-filter-bar { display:grid; grid-template-columns:minmax(220px,1.5fr) repeat(3,minmax(130px,.65fr)); gap:10px; margin-bottom:10px; }.history-filter-bar .history-search { margin:0; }.history-filter-bar select { width:100%; min-height:48px; padding:0 12px; border:1px solid #d5e0e3; border-radius:14px; background:#fff; color:#40545d; }.history-result-count { margin:0 0 10px; color:#71818a; font-size:12px; font-weight:700; }
@media(max-width:720px){.formula-summary{grid-template-columns:repeat(2,1fr)}.history-filter-bar{grid-template-columns:1fr 1fr}.history-filter-bar .history-search{grid-column:1/-1}}
.view-new .form-layout,.view-editor .form-layout { align-items:start; }.view-new .form-layout aside>.side-card:first-child,.view-editor .form-layout aside>.side-card:first-child { display:none; }.view-new .form-layout { grid-template-columns:1fr; }.view-new .form-layout aside { display:none; }

/* Product-first formula cards and lists. */
.product-number { display:inline-flex; align-items:center; min-height:20px; padding:3px 8px; border-radius:6px; background:#e5edef; color:#31586a; font-size:10px; font-weight:800; letter-spacing:.06em; line-height:1; }
.table td strong { line-height:1.2; }.table .product-line { display:flex; align-items:center; gap:7px; margin-top:6px; }
.table .product-number { flex:none; margin:0; }
.table td strong { display:block; }
.open-card { position:relative; padding:0 !important; overflow:hidden; }
.open-card-main { display:block; width:100%; padding:18px 45px 18px 19px; border:0; background:transparent; color:inherit; text-align:left; cursor:pointer; }
.open-card-main:hover { background:#f5f8f8; }
.open-card-main:hover .open-arrow { transform:translateX(3px); color:#102733; }
.open-card .open-card-head { align-items:flex-start; }
.open-card h3 { margin:8px 0 3px; }
.open-card .saved { background:#e7eef0; color:#31586a; }
.open-card .meta { color:#536871; font-weight:600; }.open-card .details { color:#405963; font-weight:600; }.open-card .details em { color:#627983; }
.home-open .saved { margin-right:27px; }
.product-number { min-height:24px; padding:4px 9px; font-size:12px; }.home-open .product-number { min-height:23px; font-size:12px; }.product-result strong { font-size:14px; letter-spacing:.01em; }.search-menu .product-result .swatch { width:40px; height:40px; }
.open-card .details { display:flex; justify-content:space-between; align-items:center; margin-top:16px; color:#62747d; }
.open-arrow { color:#31586a; font-weight:800; transition:transform .16s ease,color .16s ease; }
.close-formula { position:absolute; top:13px; right:12px; width:27px; height:27px; border-radius:8px; background:#f0f4f5; font-size:17px; line-height:20px; }
.close-formula:hover { background:#e2eaec; color:#102733; }
.system-badge { display:inline-flex; align-items:center; gap:6px; vertical-align:middle; color:#536671; font-size:11px; font-weight:700; }.system-badge img { display:block; width:28px; height:20px; object-fit:contain; object-position:left center; }.open-card .details .system-badge img { width:25px; height:17px; }.open-card .details em { margin-left:4px; color:#71818a; font-style:normal; }

/* Home workspace. */
.home-dashboard { display:grid; gap:18px; }
.home-hero { display:grid; grid-template-columns:minmax(300px,1fr) minmax(350px,.9fr); align-items:center; gap:34px; min-height:246px; padding:34px 38px; border-radius:22px; background:linear-gradient(125deg,#102733 0%,#173845 55%,#294f5d 100%); color:#fff; box-shadow:0 18px 38px rgba(15,37,49,.18); }
.home-eyebrow { display:block; color:#91aeb9; font-size:10px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.home-hero h1 { margin:9px 0 9px; font-size:34px; letter-spacing:-.04em; line-height:1.05; }
.home-hero p { max-width:530px; margin:0; color:#cad7db; font-size:14px; line-height:1.55; }
.home-status { display:flex; gap:20px; margin-top:22px; }
.home-status span { display:flex; align-items:baseline; gap:6px; color:#b8cbd1; font-size:12px; }
.home-status b { color:#fff; font-size:18px; }
.home-search { justify-self:stretch; }
.search-label { display:block; margin:0 0 8px 2px; color:#b8cbd1; font-size:12px; font-weight:700; }
.home-search .search-wrap { width:100%; }
.home-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.home-stats article { display:flex; align-items:center; gap:14px; min-height:112px; padding:19px; border:1px solid #e0e7e8; border-radius:17px; background:#fff; box-shadow:0 8px 22px rgba(23,48,63,.045); }
.stat-icon { display:grid; flex:none; width:42px; height:42px; place-items:center; border-radius:13px; background:#e7eff1; color:#31586a; font-size:21px; }
.home-stats article:nth-child(2) .stat-icon { background:#edf2f3; color:#254b5b; }.home-stats article:nth-child(3) .stat-icon { background:#e4ecee; color:#31586a; }
.home-stats span:not(.stat-icon) { display:block; color:#71818a; font-size:12px; font-weight:600; }.home-stats strong { display:inline-block; margin:3px 8px 0 0; color:#172b36; font-size:25px; letter-spacing:-.04em; }.home-stats small { color:#8a989e; font-size:11px; }
.home-content { display:grid; grid-template-columns:minmax(0,1.55fr) minmax(315px,.8fr); gap:16px; align-items:stretch; }
.home-recent,.home-open { height:100%; padding:22px; }
.home-section-head { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; }.home-section-head h2 { margin:5px 0 0; color:#172b36; font-size:21px; letter-spacing:-.03em; }.home-section-head .btn { padding:8px 11px; border-radius:9px; font-size:12px; }.home-section-head .btn span { margin-left:4px; color:#31586a; font-size:16px; }.home-section-head>.icon-btn { display:grid; place-items:center; width:32px; height:32px; border:1px solid #dfe7e9; border-radius:9px; background:#f4f7f7; color:#31586a; }
.home-recent .table-wrap { border:1px solid #e3e9ea; border-radius:13px; box-shadow:none; overflow-x:hidden; }.home-recent .table th { background:#f4f7f7; }.home-recent .table td { height:76px; padding-top:12px; padding-bottom:12px; }.home-recent .table td:nth-child(2) { max-width:0; overflow:hidden; }.home-recent .product-line span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.home-recent .table th:first-child,.home-recent .table td:first-child { width:58px; padding-right:4px; }.home-recent .table th:nth-child(2),.home-recent .table td:nth-child(2) { width:52%; max-width:none; padding-left:4px; }.home-recent .table th:nth-child(3),.home-recent .table td:nth-child(3) { width:120px; }
.home-recent .table th:nth-child(4),.home-recent .table td:nth-child(4),.home-recent .table th:nth-child(5),.home-recent .table td:nth-child(5),.home-recent .table th:nth-child(6),.home-recent .table td:nth-child(6){display:none}.formula-row{cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.formula-row td{transition:background .16s ease}.formula-row:hover{transform:translateX(4px);box-shadow:0 7px 16px rgba(23,48,63,.08)}.formula-row:hover td{background:#f4f8f8}.formula-row:hover .row-open b{transform:translateX(3px)}.formula-row:focus{outline:2px solid #78909b;outline-offset:-2px}.row-open{display:flex;align-items:center;justify-content:flex-end;gap:5px;color:#31586a;font-size:12px;font-weight:800;white-space:nowrap}.row-open b{display:inline-block;font-size:16px;transition:transform .16s ease}
.home-open-grid { display:grid; gap:10px; }.home-open .open-card { height:128px; min-height:128px; box-shadow:none; border-color:#e1e8e9; }.home-open .open-card-main { height:100%; padding:14px 39px 14px 14px; }.home-open .open-card h3 { margin:7px 0 2px; overflow:hidden; font-size:15px; text-overflow:ellipsis; white-space:nowrap; }.home-open .open-card .meta { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.home-open .open-card .details { margin-top:12px; font-size:11px; }.home-open .saved { padding:4px 7px; font-size:10px; }.home-open .product-number { font-size:9px; min-height:18px; }.home-open .close-formula { top:10px; right:9px; }
.home-empty { display:grid; place-items:center; min-height:184px; padding:22px; border:1px dashed #ccd9dd; border-radius:13px; color:#71818a; text-align:center; }.home-empty>span { display:grid; place-items:center; width:38px; height:38px; margin-bottom:8px; border-radius:12px; background:#edf3f4; color:#31586a; font-size:20px; }.home-empty strong { color:#425761; font-size:13px; }.home-empty p { margin:5px 0 0; font-size:12px; }
@media(max-width:1050px){.home-hero{grid-template-columns:1fr;padding:28px}.home-content{grid-template-columns:1fr}.home-open-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.home-hero{min-height:0;padding:24px 20px;border-radius:17px}.home-hero h1{font-size:28px}.home-stats{grid-template-columns:1fr}.home-content{display:grid}.home-recent,.home-open{padding:16px}.home-open-grid{grid-template-columns:1fr}.home-status{gap:14px}.home-search{margin-top:-3px}}

/* Administration control centre. */
.admin-page { display:grid; gap:18px; }
.admin-page .page-title { position:relative; overflow:hidden; margin:0; padding:31px 32px; background:linear-gradient(120deg,#102733,#1b3d4b 62%,#31586a); }
.admin-page .page-title::after { content:''; position:absolute; width:260px; height:260px; right:-72px; top:-158px; border:1px solid rgba(255,255,255,.16); border-radius:50%; box-shadow:0 0 0 32px rgba(255,255,255,.04),0 0 0 66px rgba(255,255,255,.025); }
.admin-page .page-title>div { position:relative; z-index:1; }.admin-page .page-title h1 { font-size:32px; }.admin-page .page-title .muted { max-width:530px; font-size:14px; line-height:1.5; }
.admin-overview-grid { position:relative; gap:16px; }.admin-overview-grid>.form-card,.admin-overview-grid .side-card { border-radius:17px; box-shadow:0 10px 26px rgba(23,48,63,.055); }.admin-overview-grid>.form-card { background:linear-gradient(180deg,#fff,#fbfcfc); }.admin-overview-grid>.form-card>h2 { display:flex; align-items:center; gap:10px; margin-bottom:18px; }.admin-overview-grid>.form-card>h2::before { content:'+'; display:grid; place-items:center; width:28px; height:28px; border-radius:9px; background:#e5edef; color:#31586a; font-size:20px; font-weight:500; }.admin-overview-grid .field-grid { align-items:end; }.admin-overview-grid .field input,.admin-overview-grid .field select { background:#fff; }.admin-overview-grid .section-head { display:flex; align-items:center; margin-top:26px; }.admin-overview-grid .section-head h2 { font-size:17px; }.admin-overview-grid .history-list { gap:7px; }.admin-overview-grid .history-item { border-color:#e2e9eb; border-radius:11px; transition:transform .16s ease,box-shadow .16s ease; }.admin-overview-grid .history-item:hover { transform:translateX(2px); box-shadow:0 5px 14px rgba(23,48,63,.06); }.admin-overview-grid .side-card { background:#f6f9f9; }.admin-overview-grid .side-card h3 { display:flex; align-items:center; gap:9px; }.admin-overview-grid .side-card h3::before { content:'⌁'; display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#dfeaec; color:#31586a; font-size:18px; }.admin-overview-grid .side-card .btn { width:100%; }
.admin-page>.section-head { margin:4px 0 0; padding:22px 2px 12px; border-top:0; }.admin-page>.section-head h2 { font-size:25px; }.admin-page>.section-head p { margin:5px 0 0; }
.admin-tint-tabs { display:flex; width:100%; gap:7px; padding:6px; border:1px solid #d9e3e6; border-radius:15px; background:#edf2f3; }.admin-tint-tabs button { flex:1; min-width:0; padding:12px 15px; border-radius:10px; }.admin-tint-tabs button.active { box-shadow:0 6px 14px rgba(10,34,49,.17); }
.admin-tint-tabs~.form-card { padding:25px; border-radius:17px; background:#fff; }.admin-tint-tabs~.form-card .section-head { align-items:flex-start; margin:0 0 18px; padding:0 0 15px; }.admin-tint-tabs~.form-card .section-head h2 { font-size:21px; }.admin-tint-tabs~.form-card .history-item { padding:13px 14px; border-radius:11px; background:#fbfcfc; }.admin-tint-tabs~.form-card .add-colorant-admin { margin-top:18px!important; padding:17px; border:1px dashed #c8d7dc; border-radius:13px; background:#f5f8f8; }.admin-tint-tabs~.form-card .add-colorant-admin>div:last-child { align-self:end; }.admin-tint-tabs~.form-card .add-colorant-admin .btn { width:100%; }
@media(max-width:720px){.admin-page .page-title{padding:25px 21px}.admin-page .page-title h1{font-size:28px}.admin-overview-grid>.form-card,.admin-overview-grid .side-card,.admin-tint-tabs~.form-card{padding:18px}.admin-tint-tabs{overflow:auto}.admin-tint-tabs button{flex:0 0 120px}.admin-tint-tabs~.form-card .add-colorant-admin{padding:14px}}

/* Rounded card and control language. */
.card,.table-wrap,.open-card,.modal-card,.login-card,.install-card { border-radius:22px; }.card,.table-wrap,.open-card { border-color:#e1e8e9; }.form-card,.side-card { border-radius:22px; }.metric { border-radius:20px; }.history-item { border-radius:14px; }.product-suggestions { border-radius:16px; }.product-suggestions button { border-radius:12px; }
.btn { min-height:40px; padding:9px 17px; border-radius:999px; border-color:#cbd9dd; background:#fff; box-shadow:0 2px 0 rgba(16,39,51,.035); transition:transform .16s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease; }.btn:hover { transform:translateY(-1px); border-color:#8ca4ad; box-shadow:0 7px 15px rgba(23,48,63,.09); filter:none; }.btn:active { transform:translateY(0); box-shadow:none; }.btn.primary,.btn.blue { background:#102733; border-color:#102733; box-shadow:0 7px 14px rgba(16,39,51,.16); }.btn.primary:hover,.btn.blue:hover { background:#1d3a48; border-color:#1d3a48; }.btn.danger { background:#4a6470; border-color:#4a6470; }.btn.small { min-height:32px; padding:6px 12px; border-radius:999px; }.icon-btn { display:inline-grid; place-items:center; min-width:32px; min-height:32px; border-radius:11px; transition:transform .16s ease,background .16s ease; }.icon-btn:hover { transform:translateY(-1px); background:#e7eff1; }
.field input,.field select,.field textarea,.component-row input { border-radius:13px; padding:12px 13px; }.field input:focus,.field select:focus,.field textarea:focus,.component-row input:focus { box-shadow:0 0 0 4px rgba(120,144,155,.18); }.format-bar { padding:6px; border-radius:16px; background:#eaf0f1; }.format-bar button { border-radius:12px; }.format-bar button.active { box-shadow:0 5px 11px rgba(16,39,51,.15); }
.view-history .page-title,.view-opened .page-title,.view-new .page-title,.view-editor .page-title,.admin-page .page-title { border-radius:24px; }.view-new .component-row,.view-editor .component-row { border-radius:15px; }.formula-total { border-radius:15px; }.original-amount,.current-amount,.boosted-amount { border-radius:12px; }.search-menu { border-radius:20px; }.search,.hero .search,.home-search .search { border-radius:18px; }.modal-card { padding:30px; box-shadow:0 28px 72px rgba(7,25,35,.25); }

/* Sidebar account area. */
.sidebar .account { position:relative; margin:18px 0 0; padding:16px 13px 12px; border:1px solid #dfe7e9; border-radius:14px; background:linear-gradient(145deg,#f7faf9,#eef3f4); }.sidebar .account::before { content:'Signed in'; display:block; margin-bottom:7px; color:#7a8a91; font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }.sidebar .account strong { overflow:hidden; color:#172b36; font-size:14px; text-overflow:ellipsis; white-space:nowrap; }.sidebar .account span { overflow:hidden; margin:4px 0 12px; color:#64767f; text-overflow:ellipsis; white-space:nowrap; }.sidebar .account .btn { width:100%; padding:8px 10px; border-color:#cfdbde; border-radius:9px; background:#fff; color:#31586a; font-size:12px; }.sidebar .account .btn:hover { border-color:#9fb2b9; background:#e6eff1; }
@media(max-width:1050px){.sidebar .account{display:none}}

.sidebar .account { margin-top:auto; }

/* Superior Coatings brand treatment. */
.sidebar .brand { width:100%; height:94px; margin:0 0 22px; padding:14px 13px; border:1px solid #dde6e8; border-radius:16px; background:linear-gradient(145deg,#fff,#f4f7f7); box-shadow:0 8px 18px rgba(23,48,63,.05); object-fit:contain; object-position:center; filter:saturate(.86) contrast(1.04); }.sidebar .brand:hover { filter:saturate(1) contrast(1.05); }
.login-card img { padding:10px 18px; border:1px solid #e0e7e9; border-radius:14px; background:#f7f9f9; filter:saturate(.9) contrast(1.04); }
@media(max-width:1050px){.sidebar .brand{height:68px;padding:9px;border-radius:13px}}
@media(max-width:720px){.sidebar .brand{width:110px;height:48px;padding:5px 8px;margin:0 auto 0 0;border:0;background:transparent;box-shadow:none}}
.original-amount { display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:8px;background:#eef2f4;color:#53636d;font-weight:700;font-size:13px; }
.current-amount { display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:8px;background:#f4f7f7;color:#1d3a48;font-weight:800;font-size:13px; }
.boosted-amount { display:flex;align-items:center;justify-content:center;min-height:42px;border-radius:8px;background:#dbe7eb;color:#1d3a48;font-weight:800;font-size:13px; }
.formula-section-head { margin-bottom: 10px; }
.formula-preview { display:flex; align-items:center; gap:8px; color:#536671; font-size:12px; font-weight:700; }
.formula-preview i { width:28px; height:28px; display:block; border-radius:50%; border:1px solid rgba(16,39,51,.16); box-shadow:inset 0 1px 1px rgba(255,255,255,.5); }
.formula-column-headings { display:grid;grid-template-columns:32px 90px minmax(110px,1fr) 96px 92px 92px 32px 36px;align-items:end;gap:10px;margin:12px 8px 6px;color:#74838b;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase; }
.formula-column-headings.has-original, .formula-column-headings.has-boosted { grid-template-columns:32px 90px minmax(110px,1fr) 96px 96px 92px 92px 32px 36px; }
.formula-column-headings.has-original.has-boosted { grid-template-columns:32px 90px minmax(110px,1fr) 96px 96px 96px 92px 92px 32px 36px; }
.formula-column-headings .add-heading { grid-column: span 2; }
.formula-column-headings span { text-align:center; }.formula-column-headings span:nth-child(2),.formula-column-headings span:nth-child(3) { text-align:left; }
.boost-action { display:flex; justify-content:flex-end; margin: 0 0 10px; }
.admin-component-row [data-global-colorant] { background: #fffdf5; border-color: #e0c979; }

/* Base is retained in existing records but is no longer part of formula entry. */
.view-new .field:has([data-field="base_name"]), .view-editor .field:has([data-field="base_name"]) { display: none; }

/* Refined card system inspired by the supplied references. */
body { background: #f7f8f7; letter-spacing: -.012em; }
.shell { gap: 20px; padding: 20px; }
.sidebar { border: 0; border-radius: 18px; box-shadow: 0 14px 38px rgba(20,40,51,.06); }
.nav button { border-radius: 12px; transition: background .16s ease, transform .16s ease; }
.nav button:hover { transform: translateX(2px); }
.nav button.active { background: #eef1f2; box-shadow: inset 0 1px 0 rgba(255,255,255,.9); }
.hero { border-radius: 20px; box-shadow: 0 16px 34px rgba(15,37,49,.12); }
.card, .table-wrap, .open-card, .form-card, .side-card { border-color: #e1e6e8; box-shadow: 0 8px 24px rgba(23,48,63,.045); }
.metric { border-radius: 16px; transition: transform .18s ease, box-shadow .18s ease; }
.metric:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(23,48,63,.09); }
.metric h3, .open-card h3, .side-card h3 { letter-spacing: -.025em; }
.open-card { background: rgba(255,255,255,.035); transition: transform .18s ease, background .18s ease; }
.open-card:hover { transform: translateY(-2px); background: rgba(255,255,255,.07); }
.btn { border-radius: 10px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(19,41,53,.12); }
.field input, .field select, .field textarea, .component-row input { border-color: #dce3e6; border-radius: 10px; background: #fcfdfd; }
.table-wrap { border-radius: 16px; }
.table th { background: #f4f6f7; }
.history-item { border-color: #e2e8ea; background: #fcfdfd; }
.modal-card { border-radius: 18px; box-shadow: 0 28px 70px rgba(5,25,37,.28); }
@media(max-width:720px){.shell{padding:10px;gap:10px}.sidebar{border-radius:14px}.hero{border-radius:16px}}

/* Reference palette: navy, blue-grey, white, and neutral greys only. */
:root { --navy:#102733; --navy2:#1d3a48; --ink:#172b36; --muted:#74838b; --line:#dfe5e6; --soft:#f3f5f5; --blue:#31586a; --green:#52717d; --danger:#4a6470; --white:#ffffff; }
body { background:#f7f8f7; }
.badge, .btn.blue { background:var(--navy2); border-color:var(--navy2); }
.saved { background:#e7eef0; color:#31586a; }
.notice { background:#e9eff0; color:#31586a; }
.error { background:#eef1f1; color:#314b57; }
.btn.danger { background:#4a6470; border-color:#4a6470; }
.view-history .page-title .btn.danger, .view-editor .page-title .btn.danger { background:#4a6470; border-color:#4a6470; }
.search:focus { box-shadow:0 0 0 4px rgba(49,88,106,.18),0 14px 30px rgba(4,19,29,.2); border-color:#31586a; }

/* Refined command-style formula search. */
.hero .search-wrap { width:min(560px,50vw); }
.hero .search { height:58px; padding:0 50px 0 52px; border:1px solid rgba(255,255,255,.32); border-radius:17px; background:rgba(255,255,255,.97); color:#172b36; box-shadow:0 14px 28px rgba(4,19,29,.18),inset 0 1px 0 #fff; font-size:15px; font-weight:500; }
.hero .search::placeholder { color:#7c8a91; font-weight:400; }
.hero .search:hover { border-color:#78909b; box-shadow:0 16px 30px rgba(4,19,29,.22),inset 0 1px 0 #fff; }
.hero .search:focus { border-color:#31586a; box-shadow:0 0 0 4px rgba(189,207,214,.72),0 17px 34px rgba(4,19,29,.26); }
.hero .search-icon { left:19px; top:16px; color:#31586a; font-size:23px; line-height:1; }
.hero .search-clear { top:13px; right:13px; color:#49636f; font-size:20px; line-height:28px; }
.hero .search-clear:hover { background:#e8eff1; }
.hero .search-menu { top:68px; padding:10px; border:1px solid #d8e1e4; border-radius:17px; background:#fff; box-shadow:0 24px 58px rgba(4,20,31,.3); }
.hero .create-result { display:flex; align-items:center; min-height:52px; padding:13px 15px; border-radius:12px; background:linear-gradient(135deg,#102733,#244856); font-size:14px; letter-spacing:.005em; }
.hero .create-result:hover { background:linear-gradient(135deg,#173542,#315b6a); transform:none; }
.hero .result-label { margin:3px 2px 4px; padding:12px 8px 6px; color:#74838b; font-size:10px; }
.hero .result { min-height:62px; padding:11px 10px; border:1px solid transparent; border-radius:12px; }
.hero .result:hover { border-color:#dbe5e8; background:#f3f7f8; transform:none; }
.hero .result strong { color:#172b36; font-size:13px; font-weight:750; }
.hero .result small { color:#71818a; }
.hero .product-result > span:last-child { display:grid; place-items:center; width:27px; height:27px; border-radius:50%; background:#e4edef; color:#31586a; font-size:18px; }
@media(max-width:720px){.hero .search-wrap{width:100%}.hero .search{height:54px;border-radius:15px}.hero .search-menu{top:64px}}

/* Administration: make the new-color control a clear, square swatch. */
.add-colorant-admin .field:has(input[type="color"]) { align-items:start; }
.add-colorant-admin input[type="color"] { display:block; width:46px; height:46px; padding:3px; border:1px solid #c9d7dc; border-radius:6px; background:#fff; cursor:pointer; }
.add-colorant-admin input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.add-colorant-admin input[type="color"]::-webkit-color-swatch { border:0; border-radius:2px; }

/* Compact format label used beside formula details across the library. */
.formula-format-pill { display:inline-flex; align-items:center; min-height:22px; margin-left:7px; padding:2px 8px; border:1px solid #c9d7dc; border-radius:999px; background:#eef3f4; color:#31586a; font-size:10px; font-weight:800; letter-spacing:.02em; line-height:1; vertical-align:middle; white-space:nowrap; }
.table .formula-format-pill { margin:0; }
.open-card .details > span:first-child { display:flex; align-items:center; gap:4px; flex-wrap:wrap; }

/* Keep every Add Colorant control in one aligned row. */
.admin-tint-tabs~.form-card .add-colorant-admin { display:grid; grid-template-columns:56px 122px minmax(190px,1fr) auto; gap:10px; align-items:end; }
.admin-tint-tabs~.form-card .add-colorant-admin .field { min-width:0; }
.admin-tint-tabs~.form-card .add-colorant-admin .btn { width:auto; min-width:124px; }
.admin-tint-tabs~.form-card .add-colorant-admin .field:has(input[type="color"]) { order:-1; }
.edit-colorant-admin [data-colorant-save-status] { display:none!important; }
@media(max-width:720px){.admin-tint-tabs~.form-card .add-colorant-admin{grid-template-columns:54px 1fr}.admin-tint-tabs~.form-card .add-colorant-admin>div:last-child{grid-column:1/-1}}

/* Keep the tint-system and format labels comfortably inside home-page open cards. */
.home-open .open-card { height:140px; min-height:140px; }
.home-open .open-card-main { height:100%; padding:14px 39px 20px 14px; }
.home-open .saved { position:absolute; top:14px; right:44px; margin:0; }
.home-open .open-card-head > div:first-child { min-width:0; padding-right:52px; }
.home-recent .product-line .formula-format-pill { flex:none; min-height:20px; margin:0; padding:2px 7px; font-size:9px; }

/* Recent Formula cards use the same tidy system/format details row as Opened Formulas. */
.recent-formula-pills { display:none; }
.home-recent .table th:nth-child(3), .home-recent .table td:nth-child(3) { display:none; }
.home-recent .table td { height:96px; }
.home-recent .recent-formula-pills { display:flex; align-items:center; gap:7px; margin-top:7px; color:#536871; font-size:10px; font-weight:700; }
.home-recent .recent-system-pill { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border:1px solid #d5e0e3; border-radius:999px; background:#f3f7f8; color:#49636f; line-height:1; white-space:nowrap; }
.home-recent .recent-formula-pills .formula-format-pill { min-height:20px; margin:0; padding:2px 7px; font-size:9px; }

/* Product numbers lead the formula metadata; all companion pills share their readable size. */
.product-number-pill { display:none; }
.formula-format-pill, .recent-system-pill, .home-recent .recent-formula-pills .formula-format-pill { font-size:12px; }
.home-open .product-number, .home-recent .product-number { font-size:12px; }
.home-recent .product-number-inline { display:none; }
.home-recent .product-number-pill { display:inline-flex; align-items:center; min-height:20px; padding:2px 7px; border:1px solid #d5e0e3; border-radius:999px; background:#f3f7f8; color:#49636f; line-height:1; white-space:nowrap; }
.home-recent .recent-formula-pills { font-size:12px; }

.open-system-pill { display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border:1px solid #c9d7dc; border-radius:999px; background:#eef3f4; color:#31586a; font-size:12px; font-weight:800; letter-spacing:.02em; line-height:1; white-space:nowrap; }
.open-product-pill { display:inline-flex; align-items:center; min-height:22px; padding:2px 8px; border:1px solid #c9d7dc; border-radius:999px; background:#eef3f4; color:#31586a; font-size:12px; font-weight:800; letter-spacing:.02em; line-height:1; white-space:nowrap; }

/* Home cards show one concise identifier instead of separate product/system/format pills. */
.formula-sku-pill { display:inline-flex; align-items:center; min-height:24px; padding:3px 9px; border:1px solid #c9d7dc; border-radius:999px; background:#eef3f4; color:#31586a; font-size:12px; font-weight:850; letter-spacing:.035em; line-height:1; white-space:nowrap; }
.home-recent .recent-formula-pills { margin-top:8px; }
.home-recent .formula-sku-pill { min-height:24px; }

/* Faster shared-workstation scanning and editing. */
.open-updated { margin-top:5px; color:#74838b; font-size:10px; font-weight:700; }
.home-open .open-card { height:154px; min-height:154px; }
.view-opened .open-grid { grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px; }
.formula-glance { display:flex; flex-wrap:wrap; gap:9px; margin:-5px 0 16px; padding:11px 13px; border:1px solid #dfe8ea; border-radius:14px; background:#fbfcfc; }
.formula-glance span { display:grid; gap:2px; min-width:120px; color:#405963; font-size:12px; font-weight:750; }
.formula-glance b { color:#819099; font-size:9px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.view-editor [data-update] { position:sticky; bottom:14px; z-index:4; box-shadow:0 8px 20px rgba(16,39,51,.2); }
@media(max-width:820px){.view-opened .open-grid{grid-template-columns:1fr!important}.formula-glance span{min-width:calc(50% - 9px)}}

.home-system-filters { display:flex; flex-wrap:wrap; gap:5px; margin-left:auto; }
.home-system-filters button { border:1px solid #d8e2e5; border-radius:999px; background:#fff; color:#65767e; padding:5px 8px; font-size:10px; font-weight:800; cursor:pointer; }
.home-system-filters button.active { border-color:#31586a; background:#31586a; color:#fff; }
@media(max-width:720px){.home-section-head{align-items:flex-start;flex-wrap:wrap}.home-system-filters{width:100%;margin:2px 0 0}}

/* Keep revision history useful without letting it overwhelm the editor. */
.view-editor .form-layout > aside { align-self:start; position:sticky; top:20px; }
.view-editor .form-layout > aside .side-card:last-child { display:flex; flex-direction:column; max-height:430px; margin-bottom:0; overflow:hidden; }
.view-editor .form-layout > aside .side-card:last-child .history-list { min-height:0; overflow-x:hidden; overflow-y:auto; padding-right:4px; }
.view-editor .revision-card { padding:9px 10px; }
.view-editor .revision-card strong { font-size:13px; }
.view-editor .revision-card span { margin-top:3px; font-size:11px; }
.view-editor .revision-card .revision-diff { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.view-editor .revision-card .btn { margin-top:7px!important; padding:6px 9px; font-size:12px; }
@media(max-width:1050px){.view-editor .form-layout > aside{position:static}.view-editor .form-layout > aside .side-card:last-child{max-height:none}.view-editor .form-layout > aside .side-card:last-child .history-list{overflow:visible}}

/* Administration colorant usage. */
.colorant-usage { margin:24px 0 28px; padding:22px; border-radius:18px; }
.usage-head { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; }
.usage-eyebrow { color:#72828a; font-size:10px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.usage-head h2 { margin:4px 0; font-size:21px; }
.usage-head p { margin:0; }
.usage-range { display:flex; align-items:end; gap:8px; }
.usage-range label { display:grid; gap:5px; color:#73828a; font-size:10px; font-weight:800; text-transform:uppercase; }
.usage-range input { height:37px; border:1px solid #d7e1e4; border-radius:9px; padding:0 8px; background:#fff; color:#203a47; font-size:12px; }
.usage-range .btn { height:37px; padding:8px 12px; font-size:12px; }
.usage-tabs { display:flex; gap:7px; margin:18px 0 12px; padding:5px; border-radius:12px; background:#edf2f3; }
.usage-tabs button { flex:1; border:0; border-radius:8px; background:transparent; color:#65777f; padding:9px 11px; font-weight:800; cursor:pointer; }
.usage-tabs button.active { background:#31586a; color:#fff; box-shadow:0 4px 10px rgba(16,39,51,.14); }
.usage-list { display:grid; gap:7px; max-height:300px; overflow-y:auto; overflow-x:hidden; padding-right:3px; }
.usage-row { display:grid; grid-template-columns:28px minmax(0,1fr) auto; align-items:center; gap:10px; padding:9px 10px; border:1px solid #e2e9eb; border-radius:10px; background:#fcfdfd; }
.usage-chip { width:22px; height:22px; border:1px solid rgba(19,43,54,.14); border-radius:6px; }
.usage-row strong,.usage-row span { display:block; }
.usage-row strong { color:#233d49; font-size:12px; }
.usage-row span { margin-top:1px; overflow:hidden; color:#73838b; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.usage-row b { color:#31586a; font-size:13px; white-space:nowrap; }
.usage-total { display:flex; justify-content:space-between; margin-top:10px; padding:11px 2px 0; border-top:1px solid #e1e8ea; color:#64767f; font-size:12px; font-weight:750; }
.usage-total strong { color:#1c3947; font-size:15px; }
@media(max-width:860px){.usage-head{display:grid}.usage-range{flex-wrap:wrap}}@media(max-width:560px){.colorant-usage{padding:17px}.usage-range{display:grid;grid-template-columns:1fr 1fr}.usage-range .btn{grid-column:1/-1}.usage-tabs button{padding:8px 4px;font-size:11px}}

/* Settings workspace navigation. */
.settings-tabs { display:flex; gap:7px; margin:0 0 20px; padding:5px; border-radius:14px; background:#eaf0f1; }
.settings-tabs button { flex:1; border:0; border-radius:10px; background:transparent; color:#63757d; padding:10px 13px; font-weight:800; cursor:pointer; }
.settings-tabs button.active { background:#fff; color:#1d3a48; box-shadow:0 4px 10px rgba(22,48,63,.09); }
.admin-page .admin-tint-heading[hidden],.admin-page .admin-tint-tabs[hidden],.admin-page .admin-tint-system[hidden],.admin-page .admin-overview-grid[hidden],.admin-page .colorant-usage[hidden],.admin-page .tint-system-manager[hidden] { display:none!important; }
.admin-page .product-manager[hidden] { display:none!important; }
.admin-page .colorant-usage { margin-top:0; }
.admin-page .settings-tabs { margin:0; }
.admin-page .admin-tint-heading { margin:0!important; padding:2px 2px 8px; }
.admin-page .admin-tint-tabs { margin-top:0; }
.tint-system-manager { display:none; margin:0 0 14px; padding:20px; }
.tint-system-manager[hidden] { display:none!important; }
.admin-page:has(.settings-tabs [data-settings-section="tints"].active) .tint-system-manager { display:block; }
.tint-system-manager-head h2 { margin:4px 0; font-size:20px; }
.tint-system-manager-head p { margin:0; }
.tint-system-config-list { display:grid; gap:8px; margin-top:15px; }
.tint-system-config { display:grid; grid-template-columns:minmax(160px,1fr) 130px 120px auto auto; align-items:end; gap:10px; padding:12px; border:1px solid #e1e9eb; border-radius:13px; background:#fbfcfc; }
.tint-system-create { display:grid; grid-template-columns:minmax(160px,1fr) 130px 120px auto; align-items:end; gap:10px; padding:12px; border:1px dashed #e1e9eb; border-radius:13px; background:#f4f8f8; }
.tint-system-create { margin-top:12px; }
.tint-system-config .btn,.tint-system-create .btn { min-width:118px; }
.tint-logo-field { grid-column:1/-1; }
.tint-logo-input { display:flex; align-items:center; gap:10px; }
.tint-logo-input input { min-width:0; flex:1; }
.tint-logo-preview { display:grid; place-items:center; width:52px; height:52px; overflow:hidden; border:1px solid #dbe5e7; border-radius:9px; background:#fff; color:#7a8990; font-size:9px; font-weight:750; white-space:normal; text-align:center; }
.tint-logo-preview img { display:block; width:100%; height:100%; object-fit:contain; padding:6px; }
.tint-logo-upload { display:flex; align-items:center; gap:10px; }
.logo-file-button { position:relative; overflow:hidden; cursor:pointer; }
.logo-file-button input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }

/* Logo tile leads each tint-system settings row and uploads immediately on selection. */
.tint-system-config { grid-template-columns:58px minmax(160px,1fr) 130px 120px auto auto; }
.tint-system-create { grid-template-columns:58px minmax(160px,1fr) 130px 120px auto; }
.tint-system-config [type="submit"] { display:none; }
.tint-system-config .tint-logo-field { grid-column:auto; display:block; }
.tint-system-create .tint-logo-field { grid-column:auto; display:block; }
.tint-logo-avatar { display:block; cursor:pointer; }
.tint-logo-avatar input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.tint-system-config .tint-logo-preview { width:52px; height:52px; border-radius:12px; cursor:pointer; font-size:24px; }
.logo-uploading { color:#31586a; font-size:22px; font-weight:900; animation:logo-pulse .8s ease-in-out infinite alternate; }
@keyframes logo-pulse { from { opacity:.35; } to { opacity:1; } }
.disabled-tint-systems { display:grid; gap:10px; margin-top:18px; padding-top:18px; border-top:1px solid #e0e8ea; }
.disabled-tint-systems h3 { margin:3px 0; font-size:16px; }
.disabled-tint-systems p { margin:0; }
.disabled-tint-row { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #dce4e6; border-radius:12px; background:#f4f7f7; }
.disabled-tint-row div { min-width:0; margin-right:auto; }
.disabled-tint-row strong,.disabled-tint-row span { display:block; }
.disabled-tint-row span { margin-top:3px; color:#72828a; font-size:12px; }
@media(max-width:720px){.disabled-tint-row{display:grid}.disabled-tint-row .btn{width:100%}}
.tint-system-workspace-tabs { display:flex; gap:7px; margin:0 0 14px; padding:5px; border-radius:14px; background:#eaf0f1; }
.tint-system-workspace-tabs button { flex:1; border:0; border-radius:10px; background:transparent; color:#63757d; padding:10px 13px; font-weight:800; cursor:pointer; }
.tint-system-workspace-tabs button.active { background:#fff; color:#1d3a48; box-shadow:0 4px 10px rgba(22,48,63,.09); }
@media(max-width:720px){.tint-system-config,.tint-system-create{grid-template-columns:1fr}.tint-system-config .btn,.tint-system-create .btn{width:100%}}
.delete-confirm-code { margin:13px 0; padding:12px; border:1px dashed #9aacb2; border-radius:10px; background:#f3f7f8; color:#183946; font-size:26px; font-weight:900; letter-spacing:.22em; text-align:center; }
.view-editor .colorant-picker-field,.view-new .colorant-picker-field { position:relative; z-index:8; padding-bottom:18px; }
.colorant-dropdown { position:absolute; z-index:20; bottom:calc(100% + 7px); left:0; width:min(430px,calc(100vw - 58px)); max-height:270px; display:grid; gap:3px; overflow-y:auto; padding:7px; border:1px solid #cbd9dd; border-radius:14px; background:#fff; box-shadow:0 18px 38px rgba(16,39,51,.20); }
.colorant-dropdown button { display:grid; grid-template-columns:20px 44px minmax(0,1fr); align-items:center; gap:8px; width:100%; min-height:36px; padding:7px 9px; border:0; border-radius:9px; background:transparent; color:#203a47; text-align:left; cursor:pointer; }
.colorant-dropdown button:hover,.colorant-dropdown button:focus { background:#eaf0f1; outline:none; }
.colorant-dropdown i { width:16px; height:16px; border:1px solid rgba(16,39,51,.14); border-radius:5px; }
.colorant-dropdown strong { font-size:12px; }.colorant-dropdown span { overflow:hidden; color:#687a82; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.apply-add[hidden] { display:none!important; }

/* Product description is already shown in the adjacent Product field. */
.field:has([data-field="product_number"]) [data-product-hint] { display:none; }

/* New formulas are created automatically after their first saved entry. */
.view-new [data-create] { display:none!important; }

/* Formula workspace: colorants on the left, formula details on the right. */
.view-new .form-layout,.view-editor .form-layout { grid-template-columns:minmax(0,1.35fr) minmax(360px,.8fr); align-items:start; }
.view-new .form-layout aside { display:block; }
.formula-details-card { display:grid; gap:18px; }
.formula-details-title { display:grid; gap:4px; padding-bottom:14px; border-bottom:1px solid #e2e9eb; color:#163340; font-size:17px; font-weight:800; }
.formula-details-title small { color:#778891; font-size:12px; font-weight:600; }
.formula-sku { display:flex; align-items:center; gap:8px; margin-top:6px; }
.formula-sku span { color:#70828b; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.formula-sku strong { color:#102f3d; font-size:13px; letter-spacing:.04em; }
.formula-details-card .field-grid { grid-template-columns:1fr; gap:12px; }
.formula-details-card .field.full { grid-column:auto; }
.formula-details-card .field textarea { min-height:96px; }
.formula-details-history { display:grid; gap:10px; padding-top:18px; border-top:1px solid #e2e9eb; }
.formula-details-history h3 { margin:0; font-size:16px; }
.formula-details-history .history-list { max-height:330px; overflow-y:auto; padding-right:3px; }
@media(max-width:1050px){.view-new .form-layout,.view-editor .form-layout{grid-template-columns:1fr}.formula-details-card .field-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.formula-details-card .field.full{grid-column:1/-1}}
@media(max-width:620px){.formula-details-card .field-grid{grid-template-columns:1fr}.formula-details-card .field.full{grid-column:auto}}

/* Compact formula editor: chip, color, change trail, and final total. */
.formula-column-headings.compact,
.view-editor .component-row,
.view-new .component-row {
  grid-template-columns:minmax(150px,.75fr) minmax(250px,1.65fr) 112px 38px;
  gap:16px;
}
.formula-column-headings.compact { display:grid; align-items:center; margin:18px 0 8px; padding:0 13px; min-height:30px; color:#6d7e86; font-size:10px; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.formula-column-headings.compact span { min-width:0; }
.formula-column-headings.compact span:nth-child(3) { padding-left:12px; }
.view-editor .component-row,.view-new .component-row { padding:13px; background:#fff; border-color:#e1e9eb; }
.colorant-identity { display:flex; align-items:center; min-width:0; gap:10px; }
.view-editor .component-row .dot,.view-new .component-row .dot { flex:0 0 auto; width:30px; height:30px; border-radius:9px; }
.component-color { display:grid; min-width:0; }
.component-color .component-text:first-child { overflow:hidden; color:#183946; font-weight:850; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.component-color .component-text:nth-child(3) { overflow:hidden; margin-top:3px; font-size:12px; color:#71808a; font-weight:600; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
.component-formula { min-width:0; display:grid; gap:9px; padding-left:16px; border-left:1px solid #e5ecee; }
.formula-trail { display:block; min-height:21px; color:#314d59; font-weight:750; line-height:1.45; overflow-wrap:anywhere; }
.formula-trail .summary-boost { display:inline-block; color:#075985!important; background:#e0f2fe; padding:1px 5px; border-radius:6px; font-weight:900; }
.adjust-line { display:flex; align-items:center; gap:8px; color:#7b8b93; font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; }
.adjust-inputs { display:flex; align-items:center; gap:6px; }
.adjust-inputs .amount { width:76px; position:relative; }
.adjust-inputs .amount input { min-height:36px; padding:7px 23px 7px 8px; }
.adjust-inputs .amount span { position:absolute; right:8px; top:10px; color:#71808a; font-size:11px; }
.total-amount { display:flex; align-items:center; justify-content:center; min-height:44px; padding:0 10px; border:1px solid #d7e3e6; border-radius:12px; background:#f1f6f7; color:#183946; font-weight:850; white-space:nowrap; }
.view-new .component-formula>.adjust-inputs { padding-top:2px; }
@media(max-width:860px){
  .formula-column-headings.compact { display:none; }
  .view-editor .component-row,.view-new .component-row { grid-template-columns:minmax(0,1fr) 36px; gap:10px; }
  .colorant-identity { grid-column:1; grid-row:1; }
  .component-formula,.total-amount { grid-column:1; }
  .component-formula { grid-row:2; }
  .total-amount { grid-row:3; width:max-content; }
  .component-row>[data-remove] { grid-column:2; grid-row:1; }
}
@media(max-width:620px){.settings-tabs{overflow:auto}.settings-tabs button{flex:0 0 auto;white-space:nowrap}}

.product-manager { margin-top:20px; }
.product-manager-head,.product-toolbar,.product-import-row,.product-add-row,.product-row { display:flex; align-items:center; gap:10px; }
.product-manager-head { justify-content:space-between; margin-bottom:18px; }
.product-manager-head h2 { margin:3px 0; }
.product-toolbar { padding:12px; border:1px solid #dbe3e5; border-radius:14px; background:#f7f9f9; }
.product-toolbar select,.product-import-row select,.product-add-row select { min-height:42px; border:1px solid #d5dfe2; border-radius:10px; background:#fff; padding:0 10px; color:#193442; font:inherit; }
.product-search { flex:1; min-width:220px; display:flex; align-items:center; gap:8px; min-height:42px; padding:0 12px; border:1px solid #d5dfe2; border-radius:10px; background:#fff; color:#58717b; }
.product-search input { width:100%; border:0; outline:0; background:transparent; color:#193442; font:inherit; }
.product-count { margin-left:auto; color:#58717b; font-size:13px; }
.product-import-row { margin:14px 0; padding:12px; border-radius:14px; background:#eef3f4; flex-wrap:wrap; }
.product-import-row form { display:flex; align-items:center; gap:8px; }
.file-button input { display:none; }
.product-add-row { display:grid; grid-template-columns:150px minmax(120px,.8fr) minmax(180px,1.6fr) minmax(120px,.7fr) auto; margin:14px 0; }
.product-add-row input,.product-row input { min-width:0; min-height:42px; box-sizing:border-box; border:1px solid #d5dfe2; border-radius:10px; background:#fff; padding:0 11px; color:#193442; font:inherit; }
.product-list { overflow:auto; max-height:560px; border:1px solid #e0e7e8; border-radius:14px; }
.product-row { display:grid; grid-template-columns:150px minmax(120px,.8fr) minmax(180px,1.6fr) minmax(120px,.7fr) 145px; min-width:760px; padding:9px 12px; border-bottom:1px solid #e8eeee; background:#fff; }
.product-row:last-child { border-bottom:0; }
.product-labels { position:sticky; top:0; z-index:1; background:#eef3f4; color:#58717b; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.product-system-label { font-weight:800; color:#264957; }
.product-row-actions { display:flex; justify-content:flex-end; gap:6px; }
.product-empty { padding:18px; margin:0; }
.product-manager.is-loading { opacity:.72; }
@media(max-width:760px){.product-toolbar{align-items:stretch;flex-wrap:wrap}.product-search{min-width:100%}.product-count{margin-left:0}.product-import-row form{width:100%;flex-wrap:wrap}.product-add-row{grid-template-columns:1fr}.product-manager-head{align-items:flex-start;gap:12px;flex-direction:column}}

.product-system-tabs { display:flex; gap:7px; margin:0 0 14px; padding:5px; overflow:auto; border-radius:14px; background:#eaf0f1; }
.admin-page > .product-manager.card { width:100%; box-sizing:border-box; margin:22px 0 34px; padding:26px; }
.product-system-tabs button { flex:1; min-width:max-content; border:0; border-radius:10px; background:transparent; color:#63757d; padding:10px 14px; font-weight:800; cursor:pointer; }
.product-system-tabs button.active { background:#fff; color:#1d3a48; box-shadow:0 4px 10px rgba(22,48,63,.09); }
.product-actions-grid { display:grid; grid-template-columns:1fr; gap:10px; margin:14px 0; }
.product-actions-grid .product-import-row { display:grid; grid-template-columns:minmax(240px,1fr) auto auto; margin:0; }
.product-import-row > div { display:grid; gap:3px; }
.product-import-row > div span { color:#58717b; font-size:12px; }
.product-actions-grid .product-add-row { grid-template-columns:minmax(120px,.75fr) minmax(220px,1.7fr) minmax(130px,.8fr) auto; margin:0; }
.product-list .product-row { grid-template-columns:minmax(120px,.75fr) minmax(220px,1.7fr) minmax(130px,.8fr) 145px; min-width:640px; }
@media(max-width:760px){.admin-page > .product-manager.card{margin:16px 0 24px;padding:18px}.product-actions-grid .product-import-row{grid-template-columns:1fr}.product-actions-grid .product-add-row{grid-template-columns:1fr}.product-system-tabs button{flex:0 0 auto}}

/* Product import/export actions share one calm, aligned toolbar. */
.product-import-row { display:block; margin:14px 0; padding:14px 16px; }
.product-import-row form { display:grid; grid-template-columns:minmax(240px,1fr) auto auto; align-items:center; gap:10px; width:100%; }
.product-import-row form > div { display:grid; min-width:0; gap:3px; }
.product-import-row form > div strong { line-height:1.2; }
.product-import-row form > div span { color:#58717b; font-size:12px; line-height:1.35; }
.product-import-row .btn { white-space:nowrap; }
.product-import-row .file-button.is-importing { pointer-events:none; opacity:.72; }
.product-pagination { display:flex; align-items:center; justify-content:flex-end; gap:10px; padding:14px 2px 2px; color:#58717b; font-size:13px; font-weight:800; }
.product-pagination .btn { min-width:86px; }
@media(max-width:760px){.product-pagination{justify-content:space-between}.product-pagination .btn{min-width:0}}
@media(max-width:760px){.product-import-row form{grid-template-columns:1fr;align-items:stretch}.product-import-row .btn{width:100%;justify-content:center}}

/* Final formula row layout: override legacy multi-column rules. */
.view-editor .component-row.has-apply,
.view-editor .component-row.has-apply.has-original,
.view-editor .component-row.has-apply.has-boosted,
.view-editor .component-row.has-apply.has-original.has-boosted,
.view-editor .component-row,
.view-new .component-row {
  grid-template-columns:minmax(150px,.75fr) minmax(250px,1.65fr) 112px 38px;
  gap:16px;
}
@media(max-width:860px){
  .view-editor .component-row.has-apply,
  .view-editor .component-row.has-apply.has-original,
  .view-editor .component-row.has-apply.has-boosted,
  .view-editor .component-row.has-apply.has-original.has-boosted,
  .view-editor .component-row,
  .view-new .component-row { grid-template-columns:minmax(0,1fr) 36px; gap:10px; }
}

/* The Formula card begins directly with its heading after details move to the side card. */
.view-new .formula-section-head,
.view-editor .formula-section-head {
  margin:0 0 14px;
  padding-top:0;
  border-top:0;
}

/* Product compatibility picker */
.compatibility-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 22px}
.compatibility-options label{display:flex;align-items:center;gap:8px;padding:11px 12px;border:1px solid var(--line,#d9dee2);border-radius:12px;background:#fff;color:var(--ink,#132735);font-weight:600;cursor:pointer}
.compatibility-options input{width:17px;height:17px;accent-color:#132735}
@media(max-width:560px){.compatibility-options{grid-template-columns:1fr}}

/* Keep product row fields and the three row actions in separate columns. */
.product-list .product-row{grid-template-columns:minmax(125px,.8fr) minmax(230px,1.7fr) minmax(140px,.85fr) 235px;column-gap:18px;min-width:840px}
.product-list .product-row-actions{align-items:center;justify-content:flex-end;gap:6px;white-space:nowrap}

/* Two Sansin formula families share one concise heading in Tint Systems. */
.admin-tint-tabs .sansin-parent-tab{flex:1;min-width:0;border:0;border-radius:10px;padding:12px 15px;background:transparent;color:#61717d;font-weight:700;cursor:pointer}
.admin-tint-tabs .sansin-parent-tab.active{background:var(--navy);color:#fff;box-shadow:0 6px 14px rgba(10,34,49,.17)}
.usage-system-tabs .sansin-parent-tab{border:0;border-radius:9px;padding:9px 14px;background:transparent;color:#61717d;font-weight:800;cursor:pointer}
.usage-system-tabs .sansin-parent-tab.active{background:var(--navy);color:#fff;box-shadow:0 5px 12px rgba(10,34,49,.2)}
.sansin-subtabs{display:flex;gap:7px;margin:10px 0 0;padding:5px;border:1px solid #d9e3e6;border-radius:13px;background:#f0f4f5}
.usage-sansin-subtabs{margin-bottom:12px}
.pouroff-popup{position:fixed!important;z-index:60;left:50%;top:50%;width:min(660px,calc(100vw - 36px));max-height:calc(100vh - 36px);overflow:auto;transform:translate(-50%,-50%);padding:24px!important;background:#fff;border:1px solid #dce5e8;border-radius:22px;box-shadow:0 24px 70px rgba(9,31,43,.28)}
.pouroff-popup:has([data-pouroff-pin]){width:min(440px,calc(100vw - 36px));padding:34px!important;text-align:center}.pouroff-popup:has([data-pouroff-pin]) h2:before{content:'⌁';display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:50%;background:#eaf0f2;color:var(--navy);font-size:30px}.pouroff-popup:has([data-pouroff-pin]) p{margin:0 auto 20px;max-width:290px}.pouroff-popup:has([data-pouroff-pin]) .field{max-width:260px;margin:0 auto 18px;text-align:left}.pouroff-popup:has([data-pouroff-pin]) .field label{text-align:center;display:block;margin-bottom:8px}.pouroff-popup [data-pouroff-pin]{height:58px!important;border:2px solid var(--navy)!important;border-radius:14px!important;text-align:center;font-size:28px;letter-spacing:15px;padding-left:15px!important}.pouroff-popup:has([data-pouroff-pin]) [data-pouroff-next]{width:100%;max-width:260px}
.sansin-subtabs[hidden]{display:none!important}
.sansin-subtabs button.sansin-category{flex:0 0 auto;min-width:112px;padding:9px 14px;border:0;border-radius:9px;background:transparent;color:#61717d;font-weight:800;cursor:pointer}
.sansin-subtabs button.sansin-category.active,.sansin-subtabs button.sansin-category[aria-pressed="true"]{background:var(--navy)!important;color:#fff!important;box-shadow:0 5px 12px rgba(10,34,49,.2)!important}
.pouroff-popup .field{margin-bottom:15px}.pouroff-popup .field:last-of-type{margin-bottom:22px}.pouroff-popup .btn.primary{margin-top:4px}.pouroff-product-options{top:calc(100% + 6px)!important;z-index:80!important;max-height:250px;overflow:auto}.pouroff-popup:has(.pouroff-product-options){overflow:visible}
.pouroff-overlay-scrim{position:fixed;inset:0;z-index:59;background:rgba(11,31,42,.32);backdrop-filter:blur(2px)}
.pouroff-close{position:absolute;top:14px;right:15px;width:34px;height:34px;border:0;border-radius:50%;background:#eef3f4;color:#36515d;font-size:25px;line-height:1;cursor:pointer}.pouroff-close:hover{background:#dfe9eb;color:#122f3c}
.pouroff-product-menu-portal{position:fixed!important;z-index:100!important;margin:0!important;box-shadow:0 16px 34px rgba(8,29,41,.24)!important}
.pouroff-success{text-align:center;padding:18px 8px 8px}.pouroff-success-mark{display:grid;place-items:center;width:58px;height:58px;margin:0 auto 16px;border-radius:50%;background:#dfeee8;color:#1d6852;font-size:30px;font-weight:800}.pouroff-success p{max-width:330px;margin:0 auto 22px;color:#5b707b}.pouroff-success .btn{min-width:150px}

/* A concise, scan-friendly staff directory. */
.admin-overview-grid .history-list>.history-item{display:grid;grid-template-columns:minmax(180px,1fr) 110px auto;gap:12px;align-items:center;padding:15px 16px;border:1px solid #e1e9eb;background:linear-gradient(135deg,#fff,#f7fafb)}
.admin-overview-grid .history-list>.history-item strong{font-size:15px;color:#183441}.admin-overview-grid .history-list>.history-item span{font-size:12px;color:#637780}.admin-overview-grid .history-list>.history-item .btn{margin:0!important}
.admin-overview-grid .history-list>.history-item:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(20,48,61,.07)}
@media(max-width:700px){.admin-overview-grid .history-list>.history-item{grid-template-columns:1fr auto}.admin-overview-grid .history-list>.history-item span{grid-column:1}.admin-overview-grid .history-list>.history-item .btn{grid-column:2;grid-row:1 / span 2}}

/* Team directory */
.admin-overview-grid .employee-directory-row{display:grid;grid-template-columns:42px minmax(180px,1fr) auto auto;gap:13px;align-items:center;margin-top:8px;padding:14px 15px;border:1px solid #dfe8ea;border-radius:14px;background:linear-gradient(135deg,#fff,#f6f9fa);box-shadow:none;cursor:pointer}
.admin-overview-grid .employee-directory-row:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(20,48,61,.07)}
.admin-overview-grid .employee-directory-row:focus-visible{outline:3px solid rgba(69,113,133,.34);outline-offset:2px}
.employee-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:#163746;color:#fff;font-weight:800;font-size:16px}
.employee-directory-info{min-width:0}.employee-directory-info>strong{display:block;color:#17303d;font-size:15px;line-height:1.25}.employee-directory-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:5px;color:#657982;font-size:12px}.employee-directory-meta span+span{padding-left:7px;border-left:1px solid #d7e0e3;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:250px}
.employee-status{padding:5px 9px;border:1px solid;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.02em}.employee-status.is-active{color:#2c6270;background:#edf6f6;border-color:#cfe2e3}.employee-status.is-disabled{color:#7a4b4b;background:#fbf1f1;border-color:#ebd4d4}
.employee-directory-actions{display:flex;gap:7px;align-items:center;justify-content:flex-end}.employee-directory-actions .btn{margin:0!important;white-space:nowrap}
@media(max-width:800px){.admin-overview-grid .employee-directory-row{grid-template-columns:42px minmax(0,1fr) auto}.employee-directory-actions{grid-column:2 / -1;justify-content:flex-start}.employee-directory-meta span+span{max-width:190px}}
@media(max-width:460px){.admin-overview-grid .employee-directory-row{grid-template-columns:42px minmax(0,1fr)}.employee-status{grid-column:2;justify-self:start}.employee-directory-actions{grid-column:1 / -1;flex-wrap:wrap}.employee-directory-meta span+span{border-left:0;padding-left:0;flex-basis:100%}}

/* Pouroff notification settings */
.pouroff-settings-card{max-width:760px;margin:0 auto;padding:0!important;overflow:hidden;border-color:#dce7e9!important;background:linear-gradient(150deg,#fff,#f7fafb)!important}
.pouroff-settings-head{padding:25px 27px 21px;background:#163746;color:#fff}.pouroff-settings-head .usage-eyebrow{color:#b8d1da}.pouroff-settings-head h2{margin:6px 0 7px;color:#fff;font-size:22px;letter-spacing:-.025em}.pouroff-settings-head p{margin:0;color:#c9dbe1;line-height:1.5}
.pouroff-settings-body{padding:23px 27px 27px}.pouroff-recipient-form{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:15px;align-items:end}.pouroff-recipient-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:#e6f0f2;color:#183c4b;font-size:21px}.pouroff-recipient-fields .field{margin:0}.pouroff-recipient-fields select{background:#fff}.pouroff-recipient-fields .muted{display:block;margin:7px 0 0;font-size:12px}.pouroff-recipient-form .btn{min-height:45px;white-space:nowrap}.pouroff-email-preview{display:flex;gap:9px;align-items:center;margin-top:22px;padding:13px 15px;border:1px solid #dce7e9;border-radius:12px;background:#f1f6f7;color:#536a74;font-size:13px}.pouroff-email-preview strong{color:#173541}.pouroff-email-preview span{line-height:1.4}
@media(max-width:650px){.pouroff-recipient-form{grid-template-columns:48px minmax(0,1fr)}.pouroff-recipient-form .btn{grid-column:1 / -1;width:100%}.pouroff-email-preview{align-items:flex-start;flex-direction:column}}

.pin-delivery-status{text-align:center}.pin-delivery-icon{display:grid;place-items:center;width:52px;height:52px;margin:0 auto 14px;border-radius:17px;font-size:25px;font-weight:800}.pin-delivery-icon.is-sent{background:#e5f2f3;color:#1c6070}.pin-delivery-icon.is-not-sent{background:#fbeeee;color:#a45151}.pin-delivery-status p{line-height:1.6}.pin-delivery-status .modal-actions{justify-content:center}

/* Opened formulas workspace */
.opened-workspace{max-width:1180px}.opened-workspace-hero{display:flex;justify-content:space-between;gap:28px;align-items:center;margin:8px 0 22px;padding:27px 29px;border-radius:22px;background:#163746;color:#fff;box-shadow:0 14px 30px rgba(19,49,63,.12)}.opened-workspace-hero .home-eyebrow{color:#b9d2db}.opened-workspace-hero h1{margin:6px 0 8px;font-size:31px;letter-spacing:-.04em;color:#fff}.opened-workspace-hero p{max-width:620px;margin:0;color:#d0e0e5;line-height:1.55}.opened-workspace-count{display:grid;place-items:center;flex:0 0 112px;min-height:90px;border:1px solid rgba(216,236,241,.24);border-radius:19px;background:rgba(255,255,255,.08)}.opened-workspace-count strong{font-size:32px;line-height:1}.opened-workspace-count span{margin-top:4px;color:#c4d9df;font-size:12px}.opened-workspace-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:15px}.opened-workspace-card{position:relative;min-height:238px;border:1px solid #dce6e8;border-radius:18px;background:linear-gradient(145deg,#fff,#f7fafb);overflow:hidden;box-shadow:0 7px 18px rgba(21,50,62,.045);transition:transform .16s ease,box-shadow .16s ease}.opened-workspace-card:hover{transform:translateY(-3px);box-shadow:0 14px 25px rgba(21,50,62,.1)}.opened-workspace-main{display:flex;flex-direction:column;align-items:flex-start;width:100%;height:100%;min-height:238px;padding:19px;border:0;background:transparent;text-align:left;cursor:pointer}.opened-workspace-top{display:flex;align-items:center;width:100%;gap:9px}.opened-color-dot{width:16px;height:16px;border:2px solid #fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.18)}.opened-workspace-state{padding:4px 8px;border:1px solid #d7e4e7;border-radius:999px;background:#f0f6f7;color:#416978;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.045em}.opened-workspace-main h2{max-width:calc(100% - 35px);margin:19px 0 5px;color:#17323f;font-size:19px;letter-spacing:-.025em}.opened-workspace-main p{min-height:38px;margin:0;color:#60747d;font-size:13px;line-height:1.45}.opened-workspace-meta{display:flex;flex-direction:column;gap:8px;margin-top:auto;color:#72858d;font-size:11px}.opened-workspace-meta .formula-sku-pill{align-self:flex-start;font-size:12px}.opened-workspace-open{margin-top:14px;color:#1e6072;font-size:13px;font-weight:800}.opened-workspace-open b{margin-left:3px}.opened-workspace-close{position:absolute;top:12px;right:12px;display:grid;place-items:center;width:29px;height:29px;border:1px solid #e1e9eb;border-radius:9px;background:#fff;color:#6c7d84;font-size:20px;line-height:1;cursor:pointer;transition:.16s}.opened-workspace-close:hover{border-color:#e4caca;background:#fff6f6;color:#a64c4c}.opened-workspace-empty{display:grid;justify-items:center;padding:54px 24px;text-align:center}.opened-workspace-empty>span{display:grid;place-items:center;width:49px;height:49px;border-radius:16px;background:#eaf2f3;color:#35677a;font-size:23px}.opened-workspace-empty h2{margin:15px 0 6px}.opened-workspace-empty p{max-width:370px;margin:0 0 19px;color:#687b83;line-height:1.55}
@media(max-width:650px){.opened-workspace-hero{align-items:flex-start;flex-direction:column;padding:23px}.opened-workspace-count{width:100%;min-height:65px;grid-template-columns:auto auto;gap:8px}.opened-workspace-count span{margin:0}.opened-workspace-grid{grid-template-columns:1fr}}
.pouroff-popup .pouroff-preview span{display:block;margin-bottom:14px}.pouroff-popup .pouroff-preview strong{display:block}
.view-pouroffs .page{max-width:1120px}.view-pouroffs .page-title{margin:8px 0 22px;padding:22px 24px;border:1px solid #dfe8ea;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#f3f7f7 100%)}.view-pouroffs .page-title h1{font-size:30px;letter-spacing:-.04em}.view-pouroffs .page-title .muted{margin-top:6px}.view-pouroffs .page-title .btn{border-radius:12px;padding:12px 18px;box-shadow:0 8px 18px rgba(18,41,54,.14)}.view-pouroffs .side-card{border-radius:20px;padding:22px;border-color:#dfe8ea;background:#fff;box-shadow:0 10px 25px rgba(20,48,61,.045)}.view-pouroffs .side-card h3{font-size:18px}.pouroff-popup{background:#fbfcfc!important;border-color:#dbe6e8!important;padding:28px!important}.pouroff-popup .page-title{margin:0 0 18px;padding:0 0 16px;background:transparent;border:0;border-bottom:1px solid #e3eaec;border-radius:0}.pouroff-popup .page-title h1{font-size:25px}.pouroff-popup .form-card{padding:0;background:transparent;border:0;box-shadow:none}.pouroff-popup .field label{color:#526672;font-weight:750}.pouroff-popup .field input,.pouroff-popup .field select{border-radius:12px;border-color:#d6e1e4;background:#fff;padding:12px 13px}.pouroff-popup .pouroff-preview{margin:18px 0;padding:17px 18px;border:1px solid #dae5e7;border-radius:15px;background:#f1f6f7;color:#16303d}.pouroff-popup .pouroff-preview b{color:#102b39}.pouroff-popup .pouroff-employee{font-size:12px;color:#5f7480;margin-bottom:10px!important}.pouroff-popup .history-item{border-radius:12px;background:#fff}.pouroff-popup .btn.primary{border-radius:12px;padding:12px 17px}

/* Pouroffs uses the same quiet toolbar-and-library rhythm as Formula History. */
.pouroff-history-page{max-width:none;margin:0;padding:0 0 32px}
.pouroff-history-page .page-title{margin:0 0 16px;padding:28px 30px;color:#fff;background:linear-gradient(135deg,var(--navy),#20485b);border:0;border-radius:24px;box-shadow:0 14px 28px rgba(9,33,47,.15)}
.pouroff-history-page .page-title .muted{color:#c9d8df}
.pouroff-history-page .page-title .btn{box-shadow:0 5px 12px rgba(0,0,0,.15)}
.pouroff-filter-bar{grid-template-columns:minmax(260px,1.5fr) minmax(170px,.55fr);align-items:center}
.pouroff-filter-bar select{width:100%;min-height:48px;padding:0 12px;border:1px solid #d5e0e3;border-radius:14px;background:#fff;color:#40545d}
.pouroff-table-wrap{overflow:hidden;border:1px solid #d8e2e7;box-shadow:0 12px 30px rgba(23,48,63,.06)}
.pouroff-table th{padding-top:14px;padding-bottom:14px;background:#f2f6f8;color:#5d6d78;font-weight:700}
.pouroff-table td{padding-top:14px;padding-bottom:14px;vertical-align:middle}
.pouroff-table tbody tr:hover{background:#f7fafb}
.pouroff-table td:first-child{min-width:310px}
.pouroff-product-number{display:inline-block;margin-right:9px;color:var(--navy);font-size:14px;letter-spacing:.01em}
.pouroff-product-name{color:#50636c;font-weight:600}
.pouroff-conversion{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid #d9e3e6;border-radius:999px;background:#f5f8f9;color:#294654;font-weight:700;white-space:nowrap}
.pouroff-conversion b{color:#607985;font-size:15px}.pouroff-empty-row{text-align:center;padding:34px!important}
@media(max-width:720px){.pouroff-history-page{padding-bottom:24px}.pouroff-history-page .page-title{padding:20px;margin-bottom:12px}.pouroff-filter-bar{grid-template-columns:1fr}.pouroff-table-wrap{overflow-x:auto}.pouroff-table{min-width:720px}}

/* Formula ownership */
.formula-creator-pill{display:inline-flex;align-items:center;min-height:25px;padding:4px 9px;border:1px solid #d6e3e6;border-radius:999px;background:#f0f6f7;color:#416773;font-size:12px;font-weight:750;line-height:1.1;white-space:nowrap}.recent-formula-pills .formula-creator-pill{font-size:12px}.open-card .details{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.open-card .open-arrow{margin-left:auto}.opened-workspace-pills{display:flex;gap:7px;align-items:center;flex-wrap:wrap}.opened-workspace-pills .formula-creator-pill{font-size:11px}

/* Home command center */
.home-command-center{width:100%;max-width:none;margin:0}.home-command-hero{display:grid;grid-template-columns:minmax(260px,.82fr) minmax(390px,1.18fr);gap:32px;align-items:center;margin:8px 0 18px;padding:29px 31px;border-radius:23px;background:#163746;color:#fff;box-shadow:0 15px 32px rgba(18,49,63,.14)}.home-command-hero .home-eyebrow{color:#b8d2db}.home-command-copy h1{margin:7px 0 8px;color:#fff;font-size:32px;letter-spacing:-.045em}.home-command-copy p{max-width:430px;margin:0;color:#cbdde3;line-height:1.55}.home-command-search .search-label{display:block;margin-bottom:8px;color:#d5e4e8;font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.055em}.home-command-search .search-wrap{position:relative}.home-command-search .search{min-height:54px;border:0;box-shadow:0 8px 18px rgba(5,25,34,.16);font-size:16px}.home-work-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(270px,.72fr);gap:17px;margin-bottom:17px}.home-continue-card,.home-library-card{padding:22px!important;border-color:#dce6e8!important;box-shadow:0 9px 24px rgba(19,49,62,.045)!important}.home-section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:16px}.home-section-head h2{margin:4px 0 0;color:#183441;font-size:21px;letter-spacing:-.03em}.home-section-head p{margin:6px 0 0;color:#6c7f87;font-size:13px}.home-section-head .btn{white-space:nowrap}.home-resume-list{display:grid;gap:8px}.home-resume-card{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:11px;align-items:center;width:100%;padding:11px 12px;border:1px solid #e0e9eb;border-radius:13px;background:#fbfcfc;color:#183441;text-align:left;cursor:pointer;transition:.16s}.home-resume-card:hover{transform:translateX(2px);border-color:#cddde1;background:#fff;box-shadow:0 7px 15px rgba(22,52,65,.06)}.home-resume-swatch{width:30px;height:30px;border:2px solid #fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.17)}.home-resume-copy{display:grid;gap:2px;min-width:0}.home-resume-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px}.home-resume-copy small{overflow:hidden;color:#657981;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.home-resume-copy span{overflow:hidden;color:#84949a;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.home-resume-arrow{color:#3a7180;font-size:19px}.home-activity-card{display:flex;flex-direction:column;padding:23px;border:1px solid #dce6e8;border-radius:19px;background:linear-gradient(145deg,#f4f8f9,#fff);box-shadow:0 9px 24px rgba(19,49,62,.045)}.home-activity-stats{display:grid;gap:10px;margin:18px 0}.home-activity-stats>div{display:flex;align-items:baseline;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid #e1eaec}.home-activity-stats strong{color:#173b4a;font-size:27px;letter-spacing:-.04em}.home-activity-stats span{color:#627882;font-size:12px;font-weight:700}.home-activity-actions{display:grid;gap:8px;margin-top:auto}.home-activity-actions .btn{justify-content:space-between;width:100%;background:#fff}.home-library-card .table-wrap{margin:0 -3px}.home-command-center .home-empty{padding:22px 8px}.formula-creator-pill{min-height:0;padding:0;border:0;border-radius:0;background:transparent;color:#71848c;font-size:11px;font-weight:650}.formula-creator-pill::before{content:'•';margin-right:4px;color:#a2b1b6}.recent-formula-pills{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
@media(max-width:900px){.home-command-hero{grid-template-columns:1fr;gap:20px}.home-work-grid{grid-template-columns:1fr}.home-activity-card{min-height:0}.home-activity-stats{grid-template-columns:repeat(3,1fr);gap:14px}.home-activity-stats>div{display:grid;gap:2px;border:0;padding:0}.home-activity-stats span{font-size:11px}}
@media(max-width:600px){.home-command-hero{padding:23px 20px}.home-command-copy h1{font-size:28px}.home-section-head{flex-direction:column}.home-section-head .btn{width:100%}.home-activity-stats{grid-template-columns:1fr}.home-activity-stats>div{display:flex;justify-content:space-between;padding-bottom:8px;border-bottom:1px solid #e1eaec}.home-library-card,.home-continue-card{padding:18px!important}}

.home-library-list{display:grid;gap:8px}.home-library-row{display:grid;grid-template-columns:34px minmax(190px,1.25fr) minmax(175px,.85fr) minmax(145px,.7fr) auto;gap:13px;align-items:center;width:100%;padding:12px 14px;border:1px solid #dee8ea;border-radius:14px;background:linear-gradient(145deg,#fff,#f8fafb);color:#183441;text-align:left;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease}.home-library-row:hover{transform:translateY(-2px);border-color:#cbdde1;box-shadow:0 10px 20px rgba(20,48,61,.075)}.home-library-swatch{width:32px;height:32px;border:2px solid #fff;border-radius:10px;box-shadow:0 1px 4px rgba(0,0,0,.16)}.home-library-main,.home-library-details,.home-library-updated{display:grid;gap:3px;min-width:0}.home-library-main strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}.home-library-main small{overflow:hidden;color:#627680;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.home-library-details{font-size:11px;color:#73868e}.home-library-details .formula-sku-pill{align-self:start;font-size:12px}.home-library-updated{color:#72858d;font-size:11px}.home-library-updated b{color:#426471;font-size:12px}.home-library-arrow{color:#357081;font-size:20px}.home-library-card .table-wrap{display:none}@media(max-width:820px){.home-library-row{grid-template-columns:34px minmax(0,1fr) auto}.home-library-details{grid-column:2}.home-library-updated{grid-column:3;grid-row:1 / span 2;align-self:center;text-align:right}.home-library-arrow{grid-column:3;grid-row:1 / span 2;opacity:0}}@media(max-width:560px){.home-library-row{grid-template-columns:34px minmax(0,1fr) auto;gap:10px}.home-library-details{grid-column:2}.home-library-updated{display:none}.home-library-arrow{grid-column:3;grid-row:1 / span 2;opacity:1}.home-library-details .formula-sku-pill{font-size:11px}}

.history-card-page{max-width:none}.history-card-page .history-formula-list{display:grid;gap:9px}.history-card-page .history-filter-bar{margin-bottom:13px}.pouroff-card-list{display:grid;gap:9px}.pouroff-card-row{display:grid;grid-template-columns:36px minmax(190px,1fr) minmax(180px,.85fr) minmax(110px,.45fr) minmax(120px,.45fr);gap:14px;align-items:center;padding:13px 15px;border:1px solid #dce6e8;border-radius:14px;background:linear-gradient(145deg,#fff,#f8fafb);box-shadow:0 6px 15px rgba(20,48,61,.035);transition:.16s}.pouroff-card-row:hover{transform:translateY(-2px);border-color:#cadce0;box-shadow:0 11px 21px rgba(20,48,61,.075)}.pouroff-card-mark{display:grid;place-items:center;width:35px;height:35px;border-radius:11px;background:#e7f0f2;color:#2b6476;font-size:18px}.pouroff-card-product,.pouroff-card-person{display:grid;gap:3px;min-width:0}.pouroff-card-product strong{color:#1b3e4c;font-size:14px}.pouroff-card-product span{overflow:hidden;color:#617680;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.pouroff-card-person span{color:#809199;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em}.pouroff-card-person strong{color:#3b5c67;font-size:12px}.pouroff-card-date{color:#6d8189;font-size:12px;white-space:nowrap}@media(max-width:850px){.pouroff-card-row{grid-template-columns:36px minmax(0,1fr) minmax(170px,.7fr) auto}.pouroff-card-person{display:none}}@media(max-width:610px){.pouroff-card-row{grid-template-columns:36px minmax(0,1fr) auto;gap:10px}.pouroff-card-row .pouroff-conversion{grid-column:2}.pouroff-card-date{grid-column:3;grid-row:1 / span 2;font-size:11px;white-space:normal;text-align:right}}

/* Formula library rows follow the same hierarchy as opened-formula cards. */
.home-library-row{grid-template-columns:34px minmax(0,1fr) minmax(145px,.65fr) auto}.home-library-main{gap:4px}.home-library-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}.home-library-creator{color:#758890;font-size:11px;font-weight:650}.home-library-creator::before{content:'•';margin-right:5px;color:#a3b2b7}.home-library-details{display:none}@media(max-width:820px){.home-library-row{grid-template-columns:34px minmax(0,1fr) auto}.home-library-meta{max-width:100%}.home-library-updated{grid-column:3;grid-row:1 / span 2}.home-library-arrow{grid-column:3;grid-row:1 / span 2}}@media(max-width:560px){.home-library-meta{gap:6px}.home-library-creator{font-size:10px}.home-library-updated{display:none}.home-library-arrow{opacity:1}}

/* Formula libraries use the same card language as Opened Formulas. */
.home-library-list,.history-card-page .history-formula-list{grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:13px}.home-library-row{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:212px;padding:17px;border:1px solid #dce6e8;border-radius:17px;background:linear-gradient(145deg,#fff,#f7fafb);box-shadow:0 7px 18px rgba(20,48,61,.045);overflow:hidden}.home-library-row:hover{transform:translateY(-3px);border-color:#c9dce1;box-shadow:0 14px 26px rgba(20,48,61,.1)}.formula-library-top{display:flex;align-items:center;gap:9px;width:100%}.home-library-swatch{width:29px;height:29px;border-radius:9px}.formula-library-type{padding:4px 8px;border:1px solid #d7e4e7;border-radius:999px;background:#f1f6f7;color:#4a707c;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.035em}.formula-library-name{max-width:100%;margin-top:17px;overflow:hidden;color:#17323f;text-align:left;text-overflow:ellipsis;white-space:nowrap;font-size:18px;letter-spacing:-.025em}.formula-library-product{display:-webkit-box;min-height:37px;margin-top:5px;overflow:hidden;color:#627680;text-align:left;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:12px;line-height:1.45}.home-library-meta{margin-top:auto;padding-top:12px}.home-library-updated{display:block;margin-top:8px;color:#73868e;font-size:11px}.home-library-arrow{margin-top:12px;color:#276779;font-size:12px;font-weight:800}.home-library-arrow b{margin-left:3px;font-size:15px}.history-card-page .home-library-row{min-height:218px}.home-library-card .table-wrap{display:none}@media(max-width:560px){.home-library-list,.history-card-page .history-formula-list{grid-template-columns:1fr}.home-library-row{min-height:195px}}
.home-library-list,.history-card-page .history-formula-list{grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}.home-library-row{min-height:238px;padding:21px}.formula-library-top{min-height:30px}.home-library-swatch{width:30px;height:30px}.formula-library-name{margin-top:20px;font-size:19px}.formula-library-product{min-height:40px;margin-top:7px;font-size:13px}.home-library-meta{padding-top:16px}.home-library-updated{margin-top:10px}.home-library-arrow{margin-top:14px}.history-card-page .home-library-row{min-height:238px}@media(max-width:560px){.home-library-list,.history-card-page .history-formula-list{grid-template-columns:1fr}.home-library-row{min-height:220px;padding:19px}}

.home-library-list,.history-card-page .history-formula-list{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:11px}.home-library-row{min-height:178px;padding:15px 16px}.formula-library-top{min-height:25px}.home-library-swatch{width:25px;height:25px;border-radius:8px}.formula-library-name{margin-top:10px;font-size:17px}.formula-library-product{display:block;min-height:0;margin-top:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.home-library-meta{padding-top:10px}.home-library-updated{margin-top:6px;font-size:10px}.home-library-arrow{position:absolute;right:15px;bottom:14px;margin:0;font-size:11px}.history-card-page .home-library-row{min-height:178px}@media(max-width:560px){.home-library-list,.history-card-page .history-formula-list{grid-template-columns:1fr}.home-library-row{min-height:168px;padding:14px 15px}}
.home-library-row{overflow:hidden}.formula-library-product{display:block;align-self:stretch;max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.home-library-meta{max-width:100%;flex-wrap:wrap;overflow:visible}.home-library-creator{overflow:visible;text-overflow:clip;white-space:normal}.home-library-meta::after{display:none}

.formula-library-surface{padding:18px!important;border-color:#dce6e8!important;background:linear-gradient(145deg,#fff,#fbfcfc)!important;box-shadow:0 9px 24px rgba(19,49,62,.045)!important}.opened-workspace .formula-library-surface{padding:17px!important}.pouroff-card-list.formula-library-surface{padding:15px!important}.formula-library-surface .home-empty{padding:25px 8px}
.formula-library-heading{margin:1px 2px 18px}.formula-library-heading .home-eyebrow{margin-bottom:5px;color:#718891}.formula-library-heading h2{margin:0;color:#183441;font-size:21px;letter-spacing:-.03em}.formula-library-heading p{margin:6px 0 0;color:#6d8088;font-size:13px}.opened-workspace .formula-library-heading{margin:2px 3px 17px}.pouroff-card-list .formula-library-heading{margin:3px 4px 16px}

/* Keep the colorant action flush with the row, without crowding the edge. */
.admin-tint-system .edit-colorant-admin{padding-right:12px!important;column-gap:18px!important}.admin-tint-system .edit-colorant-admin [data-delete-colorant]{align-self:end;justify-self:end;margin:0 0 4px 0!important;min-width:78px;white-space:nowrap}

/* Formula and settings swatches share the same compact home-library treatment. */
.opened-color-dot{width:25px!important;height:25px!important;box-sizing:border-box;border:2px solid #fff!important;border-radius:8px!important;box-shadow:0 1px 4px rgba(0,0,0,.16)!important}.admin-tint-system .admin-color-chip{height:44px!important;align-items:center!important;justify-content:center!important}.admin-tint-system .admin-color-chip [data-chip-preview]{width:44px!important;height:44px!important;box-sizing:border-box;border:2px solid #fff!important;border-radius:10px!important;box-shadow:0 1px 4px rgba(0,0,0,.16)!important}.admin-tint-system .edit-colorant-admin{grid-template-columns:54px 110px minmax(160px,1fr) 72px auto!important}
.admin-tint-system .edit-colorant-admin>.field:first-child>label{position:relative;top:2px;display:block;text-align:center}
.admin-tint-system .add-colorant-admin>.field:nth-child(3){justify-items:center}.admin-tint-system .add-colorant-admin>.field:nth-child(3)>label{font-size:0;text-align:center}.admin-tint-system .add-colorant-admin>.field:nth-child(3)>label::after{content:'Color';font-size:12px}.admin-tint-system .add-colorant-admin>.field:nth-child(3)>input[type="color"]{width:44px;height:44px;padding:0;border-radius:10px}

/* Pouroff workspace: a concise guided entry point followed by a useful inventory log. */
.view-pouroffs .main{background:linear-gradient(145deg,#f7fafb 0%,#f3f6f7 58%,#f9fbfb 100%)}
.pouroff-history-page{max-width:none!important;padding:4px 0 38px!important}
.pouroff-command-hero{display:flex;justify-content:space-between;gap:28px;align-items:center;margin:0 0 18px;padding:30px 32px;border-radius:25px;color:#fff;background:radial-gradient(circle at 84% -50%,rgba(142,190,205,.28),transparent 44%),linear-gradient(135deg,#102e3d 0%,#1d4657 100%);box-shadow:0 17px 34px rgba(14,42,55,.18)}
.pouroff-command-copy{max-width:690px}.pouroff-command-copy .home-eyebrow{color:#b9d4de}.pouroff-command-copy h1{margin:5px 0 8px;color:#fff;font-size:34px;letter-spacing:-.045em}.pouroff-command-copy p{max-width:580px;margin:0;color:#d0e0e5;font-size:14px;line-height:1.55}
.pouroff-steps{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:21px;color:#e6f1f4;font-size:12px;font-weight:700}.pouroff-steps span{display:inline-flex;align-items:center;gap:7px}.pouroff-steps b{display:grid;place-items:center;width:21px;height:21px;border:1px solid rgba(230,241,244,.52);border-radius:50%;font-size:11px}.pouroff-steps i{color:#8eacb7;font-size:15px;font-style:normal}
.pouroff-hero-action{display:grid;gap:10px;justify-items:end;min-width:212px;color:#c6dae1;font-size:12px;text-align:right}.pouroff-hero-action .btn{min-height:48px;border-color:#fff;background:#fff;color:#153544;box-shadow:0 9px 18px rgba(0,0,0,.18)}.pouroff-hero-action .btn:hover{background:#eaf2f4}.pouroff-hero-action .btn b{font-size:18px;line-height:0;vertical-align:-1px}
.pouroff-library-panel{padding:23px;border:1px solid #dce6e9;border-radius:23px;background:rgba(255,255,255,.72);box-shadow:0 12px 30px rgba(19,48,61,.045)}
.pouroff-library-toolbar{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 3px 17px}.pouroff-library-toolbar h2{margin:3px 0 0;color:#173440;font-size:23px;letter-spacing:-.035em}.pouroff-library-toolbar p{margin:5px 0 0;color:#6b8089;font-size:13px}.pouroff-library-toolbar .history-result-count{padding:8px 11px;border:1px solid #d9e5e8;border-radius:999px;background:#f6f9fa;color:#55707b;font-size:12px;font-weight:750;white-space:nowrap}
.pouroff-filter-bar{display:grid!important;grid-template-columns:minmax(260px,1.4fr) minmax(190px,.55fr)!important;gap:10px!important;margin:0 0 15px!important}.pouroff-filter-bar .history-search{position:relative;margin:0}.pouroff-filter-bar .history-search input{width:100%;min-height:48px;padding-left:42px!important;border-color:#d7e2e5!important;border-radius:14px!important;background:#fff}.pouroff-search-icon{position:absolute;z-index:1;top:50%;left:15px;transform:translateY(-52%);color:#5f7b87;font-size:21px;line-height:1}.pouroff-filter-bar select{min-height:48px;border-radius:14px!important;background:#fff}
.pouroff-card-list.formula-library-surface{padding:10px!important;border:0!important;background:transparent!important;box-shadow:none!important}.pouroff-card-row{grid-template-columns:40px minmax(210px,1.25fr) minmax(200px,.9fr) minmax(118px,.48fr) minmax(132px,.55fr)!important;gap:15px!important;padding:14px 16px!important;border-radius:16px!important;background:#fff!important;box-shadow:0 7px 17px rgba(24,52,64,.045)!important}.pouroff-card-row:hover{border-color:#bfd6dc!important;box-shadow:0 13px 25px rgba(20,52,64,.09)!important}.pouroff-card-mark{width:40px!important;height:40px!important;border-radius:13px!important;background:#eaf3f5!important;color:#285e70!important}.pouroff-card-product strong{font-size:14px!important;letter-spacing:.015em}.pouroff-card-product span{font-size:12px!important}.pouroff-conversion{display:grid!important;justify-content:start;gap:2px;padding:7px 11px!important;border-radius:12px!important;background:#f3f7f8!important}.pouroff-conversion small,.pouroff-card-date span{color:#7c929b;font-size:9px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.pouroff-conversion b{margin:0 2px}.pouroff-card-person span{font-size:9px!important}.pouroff-card-person strong{font-size:12px!important}.pouroff-card-date{display:grid;gap:3px;color:#516a75!important;font-size:12px!important}.pouroff-empty{padding:44px 14px!important}
@media(max-width:900px){.pouroff-command-hero{align-items:flex-start;flex-direction:column}.pouroff-hero-action{justify-items:start;text-align:left}.pouroff-card-row{grid-template-columns:40px minmax(0,1fr) minmax(185px,.75fr) auto!important}.pouroff-card-person{display:none}}
@media(max-width:620px){.pouroff-history-page{padding-bottom:24px!important}.pouroff-command-hero{margin-bottom:13px;padding:24px 20px;border-radius:20px}.pouroff-command-copy h1{font-size:29px}.pouroff-steps{display:none}.pouroff-hero-action{width:100%}.pouroff-hero-action .btn{width:100%}.pouroff-library-panel{padding:17px 13px;border-radius:19px}.pouroff-library-toolbar{align-items:flex-start;flex-direction:column;margin:0 3px 14px}.pouroff-filter-bar{grid-template-columns:1fr!important}.pouroff-card-row{grid-template-columns:40px minmax(0,1fr) auto!important;gap:10px!important;padding:12px!important}.pouroff-card-row .pouroff-conversion{grid-column:2 / -1}.pouroff-card-date{grid-column:3;grid-row:1 / span 2;text-align:right}.pouroff-card-product span{white-space:normal!important}}

/* Pouroffs use a tile-based inventory ledger instead of dense, table-like rows. */
.pouroff-history-page{max-width:none!important;padding:4px 0 38px!important}.pouroff-dashboard{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:18px;margin-bottom:18px}.pouroff-dashboard-copy{padding:31px 33px;border-radius:25px;background:radial-gradient(circle at 82% -35%,rgba(143,192,207,.28),transparent 47%),linear-gradient(135deg,#102d3c 0%,#1e4a5c 100%);box-shadow:0 17px 34px rgba(14,42,55,.18);color:#fff}.pouroff-dashboard-copy .home-eyebrow{color:#b9d4de}.pouroff-dashboard-copy h1{margin:5px 0 8px;color:#fff;font-size:34px;letter-spacing:-.045em}.pouroff-dashboard-copy p{max-width:600px;margin:0 0 22px;color:#d0e0e5;font-size:14px;line-height:1.55}.pouroff-dashboard-copy .btn{min-height:46px;border-color:#fff;background:#fff;color:#153544;box-shadow:0 9px 18px rgba(0,0,0,.16)}.pouroff-dashboard-copy .btn:hover{background:#eaf2f4}.pouroff-dashboard-copy .btn b{margin-right:3px;font-size:18px;line-height:0}.pouroff-dashboard-guide{display:flex;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid #dce7e9;border-radius:25px;background:linear-gradient(145deg,#fff,#f2f7f8);box-shadow:0 12px 28px rgba(20,48,61,.045)}.pouroff-guide-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:19px;border-radius:15px;background:#183c4b;color:#fff;font-size:25px}.pouroff-dashboard-guide strong{color:#1a3b47;font-size:17px}.pouroff-dashboard-guide p{margin:6px 0 0;color:#687e87;font-size:13px;line-height:1.45}.pouroff-guide-steps{display:flex;align-items:center;gap:9px;margin-top:24px}.pouroff-guide-steps span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:#dce9ec;color:#224c5b;font-size:11px;font-weight:850}.pouroff-guide-steps i{height:1px;flex:1;background:#cbdcdf}.pouroff-ledger{padding:24px;border:1px solid #dce6e9;border-radius:23px;background:rgba(255,255,255,.74);box-shadow:0 12px 30px rgba(19,48,61,.045)}.pouroff-ledger-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 3px 18px}.pouroff-ledger-head h2{margin:3px 0 0;color:#173440;font-size:23px;letter-spacing:-.035em}.pouroff-ledger-head p{margin:5px 0 0;color:#6b8089;font-size:13px}.pouroff-ledger-head .history-result-count{padding:8px 11px;border:1px solid #d9e5e8;border-radius:999px;background:#f6f9fa;color:#55707b;font-size:12px;font-weight:750;white-space:nowrap}.pouroff-filter-bar{display:grid!important;grid-template-columns:minmax(260px,1.4fr) minmax(190px,.55fr)!important;gap:10px!important;margin:0 0 17px!important}.pouroff-history-search{position:relative}.pouroff-history-search>span{position:absolute;z-index:1;top:50%;left:15px;transform:translateY(-52%);color:#5f7b87;font-size:21px;line-height:1}.pouroff-history-search input{width:100%;min-height:48px;padding-left:42px!important;border:1px solid #d7e2e5!important;border-radius:14px!important;background:#fff}.pouroff-filter-bar select{min-height:48px;border:1px solid #d7e2e5;border-radius:14px!important;background:#fff}.pouroff-entry-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(275px,1fr));gap:12px}.pouroff-entry-card{display:grid;min-height:180px;padding:17px;border:1px solid #dce6e8;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fafb);box-shadow:0 7px 17px rgba(24,52,64,.045);transition:transform .16s,box-shadow .16s,border-color .16s}.pouroff-entry-card:hover{transform:translateY(-3px);border-color:#c0d7dd;box-shadow:0 14px 25px rgba(20,52,64,.095)}.pouroff-entry-top{display:flex;gap:11px;align-items:flex-start;min-width:0}.pouroff-entry-mark{display:grid;flex:0 0 auto;place-items:center;width:39px;height:39px;border-radius:13px;background:#eaf3f5;color:#285e70;font-size:19px}.pouroff-entry-product{display:grid;gap:3px;min-width:0}.pouroff-entry-product strong{color:#1b3e4c;font-size:15px;letter-spacing:.015em}.pouroff-entry-product span{overflow:hidden;color:#617680;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.pouroff-entry-conversion{display:flex;align-items:center;gap:8px;align-self:center;padding:11px 12px;border:1px solid #dce7e9;border-radius:13px;background:#f2f7f8;color:#45616c;font-size:12px;font-weight:750}.pouroff-entry-conversion b{display:grid;place-items:center;width:23px;height:23px;border-radius:50%;background:#1d4858;color:#fff;font-size:13px}.pouroff-entry-conversion strong{color:#1d4655;font-size:13px}.pouroff-entry-card footer{display:flex;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid #e9eff0;color:#59717b;font-size:11px;font-weight:750}.pouroff-entry-card footer span,.pouroff-entry-card time{display:grid;gap:3px}.pouroff-entry-card footer time{text-align:right}.pouroff-entry-card footer small{color:#8a9ba1;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase}.pouroff-empty{grid-column:1 / -1}.view-pouroffs .pouroff-popup{z-index:60}
@media(max-width:850px){.pouroff-dashboard{grid-template-columns:1fr}.pouroff-dashboard-guide{min-height:190px}.pouroff-entry-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.pouroff-history-page{padding-bottom:24px!important}.pouroff-dashboard-copy{padding:25px 21px;border-radius:20px}.pouroff-dashboard-copy h1{font-size:29px}.pouroff-dashboard-copy .btn{width:100%}.pouroff-dashboard-guide,.pouroff-ledger{padding:20px;border-radius:20px}.pouroff-ledger-head{align-items:flex-start;flex-direction:column;margin:0 3px 15px}.pouroff-filter-bar{grid-template-columns:1fr!important}.pouroff-entry-grid{grid-template-columns:1fr}.pouroff-entry-card{min-height:172px}}

/* Formula Library follows the same calm dashboard-and-ledger pattern as Pouroffs. */
.library-card-page{max-width:none!important;padding:4px 0 38px!important}.library-dashboard{display:grid!important;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:18px;align-items:stretch;margin:0 0 18px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.library-dashboard-copy{padding:31px 33px;border-radius:25px;background:radial-gradient(circle at 82% -35%,rgba(143,192,207,.28),transparent 47%),linear-gradient(135deg,#102d3c 0%,#1e4a5c 100%);box-shadow:0 17px 34px rgba(14,42,55,.18);color:#fff}.library-dashboard-copy .home-eyebrow{color:#b9d4de}.library-dashboard-copy h1{margin:5px 0 8px;color:#fff;font-size:34px;letter-spacing:-.045em}.library-dashboard-copy .muted{max-width:610px;margin:0;color:#d0e0e5;font-size:14px;line-height:1.55}.library-dashboard-guide{display:flex;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid #dce7e9;border-radius:25px;background:linear-gradient(145deg,#fff,#f2f7f8);box-shadow:0 12px 28px rgba(20,48,61,.045)}.library-guide-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:19px;border-radius:15px;background:#183c4b;color:#fff;font-size:22px}.library-dashboard-guide strong{color:#1a3b47;font-size:17px}.library-dashboard-guide p{margin:6px 0 0;color:#687e87;font-size:13px;line-height:1.45}.library-total{align-self:flex-start;margin-top:20px;padding:8px 11px;border:1px solid #d4e3e7;border-radius:999px;background:#f7fbfb;color:#54707b;font-size:12px;font-weight:750}.library-total b{color:#173f4e;font-size:14px}.library-ledger{padding:24px;border:1px solid #dce6e9;border-radius:23px;background:rgba(255,255,255,.74);box-shadow:0 12px 30px rgba(19,48,61,.045)}.library-ledger-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 3px 18px}.library-ledger-head h2{margin:3px 0 0;color:#173440;font-size:23px;letter-spacing:-.035em}.library-ledger-head p{margin:5px 0 0;color:#6b8089;font-size:13px}.library-ledger-head .history-result-count{margin:0;padding:8px 11px;border:1px solid #d9e5e8;border-radius:999px;background:#f6f9fa;color:#55707b;font-size:12px;font-weight:750;white-space:nowrap}.library-filter-bar{display:grid!important;grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(145px,.48fr))!important;gap:10px!important;margin:0 0 17px!important}.library-filter-bar .history-search{position:relative;margin:0}.library-search-icon{position:absolute;z-index:1;top:50%;left:15px;transform:translateY(-52%);color:#5f7b87;font-size:21px;line-height:1}.library-filter-bar .history-search input{width:100%;min-height:48px;padding-left:42px!important;border-color:#d7e2e5!important;border-radius:14px!important;background:#fff}.library-filter-bar select{min-height:48px;border:1px solid #d7e2e5;border-radius:14px;background:#fff;color:#40545d}.library-tile-surface{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.library-tile-surface .history-formula-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px}.library-tile-surface .home-library-row{min-height:184px;border-radius:18px;background:linear-gradient(145deg,#fff,#f8fafb);box-shadow:0 7px 17px rgba(24,52,64,.045)}.library-tile-surface .home-library-row:hover{transform:translateY(-3px);border-color:#c0d7dd;box-shadow:0 14px 25px rgba(20,52,64,.095)}
@media(max-width:1000px){.library-filter-bar{grid-template-columns:minmax(230px,1fr) repeat(2,minmax(145px,.5fr))!important}.library-filter-bar select:last-child{grid-column:2 / 4}}@media(max-width:850px){.library-dashboard{grid-template-columns:1fr}.library-dashboard-guide{min-height:190px}}@media(max-width:620px){.library-card-page{padding-bottom:24px!important}.library-dashboard-copy{padding:25px 21px;border-radius:20px}.library-dashboard-copy h1{font-size:29px}.library-dashboard-guide,.library-ledger{padding:20px;border-radius:20px}.library-ledger-head{align-items:flex-start;flex-direction:column;margin:0 3px 15px}.library-filter-bar{grid-template-columns:1fr!important}.library-filter-bar select:last-child{grid-column:auto}.library-tile-surface .history-formula-list{grid-template-columns:1fr}.library-tile-surface .home-library-row{min-height:172px}}

/* The comparison tool sits inside the Formula Library hero without disrupting its grid. */
.library-dashboard{position:relative}.library-dashboard-copy{padding-bottom:84px}.library-dashboard>[data-compare-formulas]{position:absolute;z-index:1;bottom:25px;left:33px;min-height:43px;border-color:rgba(255,255,255,.32);background:rgba(255,255,255,.13);color:#fff}.library-dashboard>[data-compare-formulas]:hover{background:rgba(255,255,255,.22)}@media(max-width:620px){.library-dashboard-copy{padding-bottom:82px}.library-dashboard>[data-compare-formulas]{bottom:23px;left:21px}}

/* Opened formulas share the same dashboard-and-tile rhythm as Library and Pouroffs. */
.opened-workspace{max-width:none!important;padding:4px 0 38px!important}.opened-dashboard{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(330px,.65fr);gap:18px;margin-bottom:18px}.opened-dashboard-copy{padding:31px 33px;border-radius:25px;background:radial-gradient(circle at 82% -35%,rgba(143,192,207,.28),transparent 47%),linear-gradient(135deg,#102d3c 0%,#1e4a5c 100%);box-shadow:0 17px 34px rgba(14,42,55,.18);color:#fff}.opened-dashboard-copy .home-eyebrow{color:#b9d4de}.opened-dashboard-copy h1{margin:5px 0 8px;color:#fff;font-size:34px;letter-spacing:-.045em}.opened-dashboard-copy p{max-width:620px;margin:0 0 22px;color:#d0e0e5;font-size:14px;line-height:1.55}.opened-dashboard-copy .btn{min-height:46px;border-color:rgba(255,255,255,.3);background:rgba(255,255,255,.13);color:#fff}.opened-dashboard-copy .btn:hover{background:rgba(255,255,255,.22)}.opened-dashboard-guide{display:flex;flex-direction:column;justify-content:space-between;padding:28px;border:1px solid #dce7e9;border-radius:25px;background:linear-gradient(145deg,#fff,#f2f7f8);box-shadow:0 12px 28px rgba(20,48,61,.045)}.opened-guide-icon{display:grid;place-items:center;width:48px;height:48px;margin-bottom:19px;border-radius:15px;background:#183c4b;color:#fff;font-size:22px}.opened-dashboard-guide strong{color:#1a3b47;font-size:17px}.opened-dashboard-guide p{margin:6px 0 0;color:#687e87;font-size:13px;line-height:1.45}.opened-dashboard-count{display:inline-grid;justify-items:start;gap:1px;align-self:flex-start;margin-top:20px;padding:8px 11px;border:1px solid #d4e3e7;border-radius:13px;background:#f7fbfb;color:#54707b}.opened-dashboard-count b{color:#173f4e;font-size:18px;line-height:1}.opened-dashboard-count span{font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.06em}.opened-ledger{padding:24px;border:1px solid #dce6e9;border-radius:23px;background:rgba(255,255,255,.74);box-shadow:0 12px 30px rgba(19,48,61,.045)}.opened-ledger-head{display:flex;align-items:end;justify-content:space-between;gap:18px;margin:0 3px 18px}.opened-ledger-head h2{margin:3px 0 0;color:#173440;font-size:23px;letter-spacing:-.035em}.opened-ledger-head p{margin:5px 0 0;color:#6b8089;font-size:13px}.opened-ledger-status{padding:8px 11px;border:1px solid #d9e5e8;border-radius:999px;background:#f6f9fa;color:#55707b;font-size:12px;font-weight:750;white-space:nowrap}.opened-workspace-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr))!important;gap:12px!important}.opened-workspace-card{min-height:184px!important;border-radius:18px!important;background:linear-gradient(145deg,#fff,#f8fafb)!important;box-shadow:0 7px 17px rgba(24,52,64,.045)!important}.opened-workspace-card:hover{border-color:#c0d7dd!important;box-shadow:0 14px 25px rgba(20,52,64,.095)!important}.opened-workspace-main{min-height:184px!important;padding:17px!important}.opened-workspace-main h2{margin:15px 36px 5px 0!important;font-size:19px!important}.opened-workspace-main p{min-height:35px!important;font-size:12px!important}.opened-workspace-meta{gap:7px!important}.opened-workspace-open{margin-top:11px!important}.opened-workspace-close{top:14px!important;right:14px!important}.opened-workspace-empty{margin:0;padding:58px 24px!important;border-radius:23px!important}@media(max-width:850px){.opened-dashboard{grid-template-columns:1fr}.opened-dashboard-guide{min-height:190px}}@media(max-width:620px){.opened-workspace{padding-bottom:24px!important}.opened-dashboard-copy{padding:25px 21px;border-radius:20px}.opened-dashboard-copy h1{font-size:29px}.opened-dashboard-copy .btn{width:100%}.opened-dashboard-guide,.opened-ledger{padding:20px;border-radius:20px}.opened-ledger-head{align-items:flex-start;flex-direction:column;margin:0 3px 15px}.opened-workspace-grid{grid-template-columns:1fr!important}.opened-workspace-card,.opened-workspace-main{min-height:172px!important}}

/* Customer workspace and formula customer picker. */
.customers-page{max-width:none!important;padding:4px 0 38px!important}.customers-dashboard{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);gap:18px;margin-bottom:18px}.customers-dashboard-copy{padding:31px 33px;border-radius:25px;background:radial-gradient(circle at 82% -35%,rgba(143,192,207,.28),transparent 47%),linear-gradient(135deg,#102d3c,#1e4a5c);color:#fff;box-shadow:0 17px 34px rgba(14,42,55,.18)}.customers-dashboard-copy .home-eyebrow{color:#b9d4de}.customers-dashboard-copy h1{margin:5px 0 8px;color:#fff;font-size:34px;letter-spacing:-.045em}.customers-dashboard-copy p{max-width:610px;margin:0 0 22px;color:#d0e0e5;line-height:1.55}.customers-dashboard-copy .btn{background:#fff;color:#173b49}.customers-dashboard-guide{padding:28px;border:1px solid #dce7e9;border-radius:25px;background:linear-gradient(145deg,#fff,#f2f7f8)}.customers-dashboard-guide>span{display:grid;place-items:center;width:48px;height:48px;margin-bottom:18px;border-radius:15px;background:#183c4b;color:#fff;font-size:22px}.customers-dashboard-guide strong{display:block;color:#1a3b47;font-size:17px}.customers-dashboard-guide p{color:#687e87;font-size:13px;line-height:1.45}.customers-ledger{padding:24px;border:1px solid #dce6e9;border-radius:23px;background:rgba(255,255,255,.74)}.customers-ledger header h2{margin:3px 0;color:#173440;font-size:23px}.customers-ledger header p{margin:5px 0 17px;color:#6b8089;font-size:13px}.customers-search{position:relative;display:block;margin-bottom:16px}.customers-search span{position:absolute;left:15px;top:13px;color:#5f7b87;font-size:20px}.customers-search input{width:100%;min-height:48px;padding-left:42px;border:1px solid #d7e2e5;border-radius:14px}.customers-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:12px}.customer-card{display:flex;align-items:center;gap:12px;min-height:105px;padding:16px;border:1px solid #dce6e8;border-radius:18px;background:#fff;text-align:left;cursor:pointer}.customer-card:hover{transform:translateY(-2px);border-color:#c0d7dd;box-shadow:0 12px 24px rgba(20,52,64,.08)}.customer-avatar{display:grid;flex:0 0 auto;place-items:center;width:40px;height:40px;border-radius:13px;background:#eaf3f5;color:#285e70;font-size:17px;font-weight:850}.customer-card-copy{display:grid;gap:3px;min-width:0}.customer-card-copy strong{color:#1b3e4c}.customer-card-copy small,.customer-card-copy span{overflow:hidden;color:#687e87;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.customer-card-copy span{font-weight:700}.customer-card>b{margin-left:auto;color:#3a6d7d}.customer-editor{width:min(680px,100%)}.customer-profile{width:min(780px,100%);max-height:82vh;overflow:auto}.customer-profile-close{position:absolute;top:13px;right:15px;border:0;background:none;font-size:24px;color:#6d8189}.customer-profile-head{display:flex;align-items:center;gap:12px}.customer-profile-head h2{margin:0}.customer-profile-head p{margin:3px 0;color:#6b8089}.customer-profile-head .btn{margin-left:auto}.customer-profile-details{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.customer-profile-details span,.customer-tags span{padding:6px 9px;border:1px solid #dce6e8;border-radius:999px;background:#f5f9fa;color:#486570;font-size:12px}.customer-profile section{margin-top:20px}.customer-profile h3{margin:0 0 9px;color:#1b3d49}.customer-section-title{display:flex;justify-content:space-between;align-items:center;gap:12px}.customer-section-title form{display:flex;gap:7px}.customer-section-title input{min-height:34px;border:1px solid #d7e2e5;border-radius:9px;padding:0 9px}.customer-tags{display:flex;gap:7px;flex-wrap:wrap}.customer-notes{white-space:pre-wrap;color:#56707a}.customer-formula-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px}.customer-formula-list .home-library-row{min-height:145px}.customer-suggestions{position:absolute;z-index:20;top:calc(100% + 5px);left:0;right:0;display:grid;border:1px solid #d6e3e6;border-radius:12px;background:#fff;box-shadow:0 15px 32px rgba(16,45,57,.16);overflow:hidden}.customer-suggestions button{padding:10px 12px;border:0;border-bottom:1px solid #edf1f2;background:#fff;text-align:left;cursor:pointer}.customer-suggestions button:hover{background:#f4f8f9}.customer-suggestions strong,.customer-suggestions small{display:block}.customer-suggestions small{margin-top:2px;color:#70838b}.customer-job-picker{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}.customer-job-picker small{width:100%;color:#70838b}.customer-job-picker button{border:1px solid #d5e3e6;border-radius:999px;background:#f4f8f9;color:#355d6b;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer}@media(max-width:750px){.customers-dashboard{grid-template-columns:1fr}.customers-dashboard-copy,.customers-dashboard-guide,.customers-ledger{padding:21px;border-radius:20px}.customers-grid{grid-template-columns:1fr}}

.workstation-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(115px,.45fr) auto;align-items:end;gap:14px;padding:13px 2px;border-top:1px solid #e3eaec}.workstation-row small{padding-bottom:10px;color:#71848c;font-weight:700}.workstation-actions{display:flex;gap:7px;align-items:center}@media(max-width:650px){.workstation-row{grid-template-columns:1fr}.workstation-row small{padding-bottom:0}.workstation-actions{justify-content:flex-start}}

/* Keep the customer profile close control anchored to its card. */
.customer-profile{position:relative}
.customer-editor{position:relative}.customer-editor-close{position:absolute;top:13px;right:15px;width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:#55707b;font-size:25px;line-height:1;cursor:pointer}.customer-editor-close:hover{background:#eef4f5;color:#173b49}

/* Customer formula cards keep the live mixed-color chip prominent beside the SKU. */
.customer-formula-list .formula-library-top{min-height:34px}.customer-formula-list .home-library-swatch{display:block;flex:0 0 32px;width:32px;height:32px;border:2px solid #fff;border-radius:10px;box-shadow:0 0 0 1px #b8cbd1,0 3px 7px rgba(16,45,57,.16)}

/* Borderless Superior Coatings wordmark for the application sidebar. */
.sidebar .brand-wordmark{display:flex;align-items:center;gap:11px;width:100%;height:auto;margin:1px 5px 25px;padding:3px 5px;background:transparent;border:0;border-radius:0;box-shadow:none;filter:none}.brand-glyph{position:relative;display:flex;align-items:flex-end;gap:3px;width:33px;height:35px;padding:5px 2px 4px;border-radius:12px;background:#183a49;overflow:hidden}.brand-glyph::after{position:absolute;top:5px;left:7px;width:14px;height:14px;border:2px solid rgba(255,255,255,.9);border-radius:50%;content:''}.brand-glyph i{display:block;width:6px;border-radius:7px;background:#e2eff2}.brand-glyph i:nth-child(1){height:8px}.brand-glyph i:nth-child(2){height:15px}.brand-glyph i:nth-child(3){height:11px}.brand-copy{display:grid;gap:0;line-height:1}.brand-copy strong,.brand-copy b{font-size:18px;letter-spacing:-.055em}.brand-copy strong{color:#173641;font-weight:800}.brand-copy b{color:#4f7d8b;font-weight:650}.brand-copy small{margin-top:5px;color:#7f949b;font-size:8px;font-weight:850;letter-spacing:.14em}.sidebar .brand-wordmark:hover{filter:none}@media(max-width:1050px){.sidebar .brand-wordmark{justify-content:center;height:auto;margin:1px 0 18px;padding:2px}.brand-copy{display:none}.brand-glyph{width:36px;height:36px}}@media(max-width:720px){.sidebar .brand-wordmark{width:auto;height:auto;margin:0 12px 0 0;padding:0}.brand-copy{display:grid}.brand-glyph{width:31px;height:33px}.brand-copy strong,.brand-copy b{font-size:16px}.brand-copy small{font-size:7px}}

.product-derived-field input:disabled,.product-derived-field select:disabled{cursor:not-allowed;border-color:#dfe8ea;background:#f2f6f7;color:#58707a;opacity:1}.product-derived-field label::after{margin-left:6px;color:#82959c;content:'set by product';font-size:10px;font-weight:750;text-transform:uppercase;letter-spacing:.04em}

.customer-linked-field input{border-color:#7ba2ae!important;background:#f0f7f8!important;color:#1d4653!important;font-weight:750}.customer-linked-field label::after{margin-left:6px;color:#4e7e8c;content:'selected';font-size:10px;font-weight:850;text-transform:uppercase;letter-spacing:.05em}.customer-selected-state{display:inline-flex;align-items:center;align-self:start;margin-top:1px;padding:4px 8px;border:1px solid #c8dde2;border-radius:999px;background:#e5f1f3;color:#396b79;font-size:10px;font-weight:800;letter-spacing:.02em}

.customer-tags button{border:1px solid #dce6e8;border-radius:999px;background:#f5f9fa;color:#486570;padding:6px 9px;font:inherit;font-size:12px;cursor:pointer}.customer-tags button:hover,.customer-tags button.active{border-color:#4e7e8c;background:#315f6d;color:#fff}

/* Preserve the light primary action in the customer dashboard on hover. */
.customers-dashboard-copy .btn.primary:hover{background:#f2f7f8;color:#173b49;box-shadow:0 8px 18px rgba(5,25,34,.18)}
.alias-list{display:grid;gap:7px;margin-top:14px}.alias-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border:1px solid #e1eaec;border-radius:10px;background:#f8fbfb}.alias-row span{font-weight:650;color:#315866}

/* Navigation: separate daily formula work from operations and support. */
.sidebar .nav{display:flex;min-height:0;flex:1;flex-direction:column;gap:18px}.sidebar .nav-group{display:grid;gap:4px}.sidebar .nav-group-utility{margin-top:auto;padding-top:16px;border-top:1px solid #e4ebed}.sidebar .nav-group-label{padding:0 13px;color:#8a9aa0;font-size:10px;font-weight:850;letter-spacing:.105em;text-transform:uppercase}.sidebar .nav button{min-height:44px;gap:12px;padding:10px 12px;color:#385662;font-size:13px;font-weight:720}.sidebar .nav button .icon{display:grid;place-items:center;width:28px;height:28px;border:1px solid #dbe5e7;border-radius:9px;background:#f8fafb;color:#476a76;font-size:15px;line-height:1}.sidebar .nav button:hover{background:#f4f8f9;transform:translateX(3px)}.sidebar .nav button.active{background:linear-gradient(135deg,#183846,#285566);box-shadow:0 8px 17px rgba(20,52,64,.16);color:#fff}.sidebar .nav button.active .icon{border-color:rgba(255,255,255,.28);background:rgba(255,255,255,.13);color:#fff}.sidebar .nav .badge{height:21px;min-width:21px;background:#4f8191;color:#fff;font-size:10px;box-shadow:none}.sidebar .nav button.active .badge{background:#fff;color:#214958}.sidebar .account{margin-top:17px!important}
@media(max-width:1050px){.sidebar .nav{gap:12px}.sidebar .nav-group{gap:5px}.sidebar .nav-group-label{display:none}.sidebar .nav-group-utility{margin-top:auto;padding-top:12px}.sidebar .nav button{justify-content:center;padding:8px}.sidebar .nav button .icon{width:30px;height:30px}}
@media(max-width:720px){.sidebar .nav{display:flex;flex:1;flex-direction:row;gap:5px;overflow-x:auto}.sidebar .nav-group{display:flex;gap:4px}.sidebar .nav-group-utility{margin:0;padding:0;border:0}.sidebar .nav-group-label{display:none}.sidebar .nav button{min-height:auto;padding:7px;position:relative}.sidebar .nav button .icon{width:27px;height:27px}.sidebar .nav button span:not(.icon):not(.badge){display:none}.sidebar .nav .badge{position:absolute;margin:-19px 0 0 18px;width:16px;min-width:16px;height:16px;padding:0;font-size:9px}}
.product-list .product-row{grid-template-columns:minmax(125px,.8fr) minmax(230px,1.7fr) minmax(150px,.9fr) 290px;min-width:900px}.product-list .product-row-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;white-space:nowrap}.product-list .product-row-actions .btn{flex:0 0 auto}
.product-add-row{grid-template-columns:minmax(120px,.75fr) minmax(220px,1.5fr) minmax(145px,.9fr) minmax(130px,.8fr) auto!important}
.product-list .product-row{grid-template-columns:minmax(125px,.75fr) minmax(230px,1.5fr) minmax(150px,.9fr) minmax(140px,.8fr) 290px;min-width:1080px}
.knowledge-page{max-width:none!important}.knowledge-hero{display:flex;justify-content:space-between;align-items:center;gap:25px;padding:30px 32px;border-radius:24px;background:linear-gradient(135deg,#163746,#285667);color:#fff}.knowledge-hero h1{margin:5px 0 8px;font-size:34px;letter-spacing:-.045em}.knowledge-hero p{max-width:580px;margin:0;color:#d1e1e6;line-height:1.55}.knowledge-hero .home-eyebrow{color:#b6d2dc}.knowledge-search{position:relative;flex:0 1 430px}.knowledge-search span{position:absolute;left:15px;top:14px;color:#5a7480;font-size:18px}.knowledge-search input{width:100%;height:48px;padding:0 14px 0 42px;border:0;border-radius:13px;box-shadow:0 8px 18px rgba(0,0,0,.13)}.knowledge-popular{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:17px 2px}.knowledge-popular strong{margin-right:4px;color:#57707a;font-size:12px}.knowledge-popular button{border:1px solid #d6e3e6;border-radius:999px;background:#fff;color:#315b69;padding:7px 11px;font-size:12px;font-weight:750;cursor:pointer}.knowledge-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(265px,1fr));gap:13px}.knowledge-article{min-height:176px;padding:18px;border:1px solid #dce6e8;border-radius:17px;background:linear-gradient(145deg,#fff,#f8fbfb);box-shadow:0 7px 17px rgba(20,48,61,.045)}.knowledge-article>span{color:#66818b;font-size:10px;font-weight:850;letter-spacing:.07em;text-transform:uppercase}.knowledge-article h2{margin:12px 0 7px;color:#173541;font-size:18px;letter-spacing:-.025em}.knowledge-article p{margin:0;color:#617780;font-size:13px;line-height:1.5}.knowledge-empty{padding:38px;text-align:center;color:#687d85}@media(max-width:720px){.knowledge-hero{align-items:flex-start;flex-direction:column;padding:24px 20px}.knowledge-search{width:100%;flex-basis:auto}.knowledge-grid{grid-template-columns:1fr}}

/* Keep the main creation/search action centered in the home header. */
.home-command-hero{grid-template-columns:minmax(0,1fr);justify-items:center;gap:22px}
.home-command-copy{text-align:center}
.home-command-copy p{max-width:620px}
.home-command-search{width:min(100%,720px);min-width:0;text-align:left}
.home-command-search .search-wrap{width:100%;max-width:none}
.customer-formula-list [data-open][hidden]{display:none!important}

/* Product usage report */
.formula-note-templates{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}.formula-note-templates span{color:#71848c;font-size:11px;font-weight:800}.formula-note-templates button{border:1px solid #d9e5e8;border-radius:999px;background:#f8fbfb;color:#426774;padding:5px 9px;font-size:11px;font-weight:700;cursor:pointer}.formula-note-templates button:hover{background:#eaf3f5}.formula-compare-modal{width:min(600px,100%)}.formula-compare-result{display:grid;gap:7px;margin-top:17px}.compare-formula-head,.compare-row{display:grid;grid-template-columns:80px 1fr 1fr;gap:8px;align-items:center;padding:8px 10px;border-radius:10px;background:#f5f8f9}.compare-formula-head{grid-template-columns:80px 1fr 1fr;background:#163746;color:#fff}.compare-formula-head::before{content:'Colorant';color:#c9dce2;font-size:11px;font-weight:800;text-transform:uppercase}.compare-row b{color:#315c6a}.workstation-create{display:flex;align-items:end;gap:10px;margin-bottom:14px}.workstation-create .field{flex:1}.workstation-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 2px;border-top:1px solid #e3eaec}.workstation-row strong,.workstation-row span{display:block}.workstation-row span{margin-top:3px;color:#72848c;font-size:12px}.workstation-row small{color:#71848c;font-weight:700}.login-workstation{margin:0 0 15px;text-align:left}
.product-usage-card{width:100%;max-width:none;margin:0;padding:24px!important;border-color:#dce6e8!important;box-shadow:0 9px 24px rgba(19,49,62,.045)!important}.product-usage-head{margin-bottom:18px}.product-usage-head h2{margin:4px 0 6px;color:#183441;font-size:23px;letter-spacing:-.03em}.product-usage-head p{margin:0}.product-usage-filter{display:grid;grid-template-columns:minmax(160px,1fr) minmax(160px,1fr) auto;gap:12px;align-items:end;padding:14px;border:1px solid #e0e9eb;border-radius:14px;background:#f7fafb}.product-usage-filter .btn{min-height:44px;white-space:nowrap}.product-usage-results{margin-top:16px}.product-usage-list{display:grid;gap:8px}.product-usage-row{display:grid;grid-template-columns:44px minmax(190px,1fr) minmax(120px,.45fr) minmax(130px,.45fr);gap:13px;align-items:center;padding:12px 14px;border:1px solid #dce6e8;border-radius:13px;background:#fff}.product-usage-count{display:grid;place-items:center;width:39px;height:39px;border-radius:12px;background:#e7f0f2;color:#276779;font-weight:850;font-size:16px}.product-usage-row>div{display:grid;gap:3px;min-width:0}.product-usage-row strong{color:#183b4a;font-size:14px}.product-usage-row>div span{overflow:hidden;color:#637780;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.product-usage-system{color:#4c6e7a;font-size:12px;font-weight:700}.product-usage-row small{color:#778991;font-size:11px}@media(max-width:700px){.product-usage-filter{grid-template-columns:1fr 1fr}.product-usage-filter .btn{grid-column:1/-1}.product-usage-row{grid-template-columns:44px minmax(0,1fr) auto}.product-usage-system{display:none}.product-usage-row small{grid-column:2;font-size:10px}}