/* Botanic Design System alignment: tokens, readable type and progressive disclosure. */
.stock-app{--stock-brand:var(--ci-color-brand-700);--stock-brand-strong:var(--ci-color-brand-800);--stock-brand-soft:var(--ci-color-brand-100);font-family:var(--ci-font-sans)}
.stock-app .stock-main{background:linear-gradient(180deg,var(--ci-color-bg-mid),var(--ci-color-bg-bottom) 280px);color:var(--ci-color-ink)}
.stock-app .stock-heading .eyebrow,.stock-app .stock-card-code,.stock-app .copy-button{color:var(--stock-brand-strong)}
.stock-app .stock-heading h1{color:var(--ci-color-ink);font-size:var(--ci-type-32);line-height:var(--ci-leading-36);letter-spacing:var(--ci-tracking-tight)}
.stock-app .stock-heading p:last-child{color:var(--ci-color-muted);font-size:var(--ci-type-14)}
.stock-app .outline-button{min-height:var(--ci-control-height-md);border-color:var(--ci-color-line-strong);border-radius:var(--ci-radius-control);color:var(--stock-brand-strong)}
.stock-app .outline-button:hover{border-color:var(--stock-brand);background:var(--stock-brand-soft)}
.stock-app .relationship-map{border-color:var(--ci-color-line);border-radius:var(--ci-radius-menu);box-shadow:var(--ci-shadow-1)}
.stock-app .relationship-map>span,.stock-app .relationship-map>a{border-radius:var(--ci-radius-control);color:var(--ci-color-ink-soft)}
.stock-app .relationship-map>span.active{background:var(--stock-brand-soft);color:var(--stock-brand-strong)}
.stock-app .relationship-map b{background:var(--stock-brand-soft);color:var(--stock-brand-strong)}
.stock-app .relationship-map strong{font-size:var(--ci-type-14)}
.stock-app .relationship-map small{font-size:var(--ci-type-11)}
.stock-app .stock-summary span{min-height:52px;border-color:var(--ci-color-line);border-radius:var(--ci-radius-control);box-shadow:var(--ci-shadow-1)}
.stock-app .stock-summary strong{color:var(--stock-brand-strong);font-size:var(--ci-type-24)}
.stock-app .stock-summary small{color:var(--ci-color-muted);font-size:var(--ci-type-12)}
.stock-app .stock-summary .warning{border-color:#e5c46e;background:var(--ci-color-warning-soft)}
.stock-app .stock-summary .success{border-color:rgba(8,124,112,.24);background:var(--ci-color-success-soft)}
.stock-app .stock-summary .success strong{color:var(--ci-color-success)}
.stock-app .legacy-review{border-color:#e5c46e;border-radius:var(--ci-radius-control);background:var(--ci-color-warning-soft)}
.stock-app .legacy-review>summary{min-height:48px;padding:var(--ci-space-4) var(--ci-space-6)}
.stock-app .legacy-review>summary strong{font-size:var(--ci-type-14)}
.stock-app .legacy-review>summary small{font-size:var(--ci-type-11)}
.stock-app .legacy-review>summary b{font-size:var(--ci-type-11)}
.stock-app .stock-toolbar{flex-wrap:wrap;background:linear-gradient(180deg,var(--ci-color-bg-mid),rgba(238,244,243,.96));padding-block:var(--ci-space-5)}
.stock-app .stock-toolbar .category-tabs{border-color:var(--ci-color-line);border-radius:var(--ci-radius-control);background:rgba(255,255,255,.9);box-shadow:var(--ci-shadow-1)}
.stock-app .category-tab{min-height:var(--ci-control-height-sm);border-radius:var(--ci-radius-compact);font-size:var(--ci-type-12)}
.stock-app .category-tab.active{border-color:var(--stock-brand);background:var(--stock-brand);color:#fff}
.stock-app .stock-category{border-color:var(--ci-color-line);border-radius:var(--ci-radius-card);padding:var(--ci-space-6);box-shadow:var(--ci-shadow-1)}
.stock-app .stock-category>header{border-color:var(--ci-color-line);padding-bottom:var(--ci-space-5);margin-bottom:var(--ci-space-5)}
.stock-app .stock-category h2{font-size:var(--ci-type-20);line-height:var(--ci-leading-24)}
.stock-app .stock-category header span{color:var(--ci-color-muted);font-size:var(--ci-type-11)}
.stock-app .stock-grid{grid-template-columns:repeat(auto-fill,minmax(184px,1fr));gap:var(--ci-space-5)}
.stock-app .stock-card{border-color:var(--ci-color-line);border-radius:var(--ci-radius-menu);padding:var(--ci-space-4);transition:border-color var(--ci-motion-base) var(--ci-ease-standard),box-shadow var(--ci-motion-base) var(--ci-ease-standard),transform var(--ci-motion-base) var(--ci-ease-standard)}
.stock-app .stock-card:hover{transform:translateY(-2px);border-color:var(--ci-color-line-strong);box-shadow:var(--ci-shadow-1)}
.stock-app .stock-card.selected{border-color:var(--stock-brand);box-shadow:var(--ci-focus-ring)}
.stock-app .stock-card-media{border-radius:var(--ci-radius-control);background:var(--ci-color-surface-soft)}
.stock-app .stock-card-code{font-size:var(--ci-type-11);letter-spacing:var(--ci-tracking-label)}
.stock-app .stock-card h3{margin:4px 0 8px;font-size:var(--ci-type-14);line-height:var(--ci-leading-20)}
.prescription-filters{order:3;display:flex;align-items:center;gap:var(--ci-space-3);width:100%;min-height:42px;border:1px solid var(--ci-color-line);border-radius:var(--ci-radius-control);background:rgba(255,255,255,.9);padding:var(--ci-space-3) var(--ci-space-4);box-shadow:var(--ci-shadow-1)}
.prescription-filter-label{display:grid;min-width:210px;margin-right:var(--ci-space-2)}
.prescription-filter-label strong{font-size:var(--ci-type-12);color:var(--ci-color-ink)}
.prescription-filter-label small{font-size:var(--ci-type-11);color:var(--ci-color-muted)}
.prescription-filters button{min-height:30px;border:1px solid var(--ci-color-line);border-radius:var(--ci-radius-round);background:#fff;padding:4px 10px;color:var(--ci-color-ink-soft);font-size:var(--ci-type-11);font-weight:800;cursor:pointer;white-space:nowrap}
.prescription-filters button:hover,.prescription-filters button:focus-visible{border-color:var(--stock-brand);outline:0;box-shadow:var(--ci-focus-ring)}
.prescription-filters button.active{border-color:var(--stock-brand);background:var(--stock-brand);color:#fff}
.prescription-filters button b{margin-left:3px;font-size:inherit}
.eyesight-tags{display:flex;flex-wrap:wrap;gap:4px;margin:0 0 var(--ci-space-3)}
.eyesight-tag{display:inline-flex;align-items:center;min-height:22px;border:1px solid transparent;border-radius:var(--ci-radius-round);padding:2px 7px;font-size:var(--ci-type-11);font-weight:800;line-height:1.2;white-space:nowrap}
.eyesight-tag.eyesight-short{border-color:rgba(35,127,186,.18);background:var(--ci-color-info-soft);color:var(--ci-color-info)}
.eyesight-tag.eyesight-plano{border-color:var(--ci-color-line);background:var(--ci-color-surface-soft);color:var(--ci-color-muted)}
.eyesight-tag.eyesight-long{border-color:rgba(11,131,122,.18);background:var(--stock-brand-soft);color:var(--stock-brand-strong)}
.eyesight-tags.detailed{margin:var(--ci-space-5) 0 0;padding:var(--ci-space-4);border:1px solid var(--ci-color-line);border-radius:var(--ci-radius-control);background:var(--ci-color-surface-soft)}
.eyesight-tags.detailed::before{content:"ค่าสายตาที่รองรับ";width:100%;color:var(--ci-color-muted);font-size:var(--ci-type-11);font-weight:800}
.eyesight-tags.detailed .eyesight-tag{min-height:28px;background:#fff;padding-inline:9px}
.stock-app .stock-card-badges span{border-radius:var(--ci-radius-detail);background:var(--ci-color-info-soft);font-size:var(--ci-type-11)}
.stock-app .stock-card-badges .used{background:var(--ci-color-success-soft);color:var(--ci-color-success)}
.stock-app .stock-card-badges .missing{background:var(--ci-color-warning-soft);color:var(--ci-color-warning)}

.stock-drawer-backdrop{position:fixed;inset:68px 0 42px 240px;z-index:30;border:0;background:rgba(7,38,35,.16);backdrop-filter:blur(1px);cursor:pointer}
.stock-app .stock-drawer{width:min(480px,calc(100vw - 240px));overflow:auto;border-color:var(--ci-color-line-strong);box-shadow:var(--ci-shadow-3)}
.stock-app .stock-drawer>header{min-height:52px;padding:var(--ci-space-4) var(--ci-space-6);border-color:var(--ci-color-line);background:rgba(255,255,255,.96)}
.stock-app .stock-drawer>header strong{font-size:var(--ci-type-14);color:var(--ci-color-ink)}
.stock-app .stock-drawer>header button{min-width:72px;min-height:36px;border-color:var(--ci-color-line-strong);border-radius:var(--ci-radius-control);color:var(--stock-brand-strong);font-size:var(--ci-type-12)}
.stock-app .stock-detail{padding:var(--ci-space-6)}
.stock-app .stock-detail-hero{display:grid;grid-template-columns:156px minmax(0,1fr);align-items:center;gap:var(--ci-space-6)}
.stock-app .stock-detail-cover{width:156px;height:auto;aspect-ratio:1/1;border-radius:var(--ci-radius-menu);background:var(--ci-color-surface-soft)}
.stock-app .stock-detail-copy{min-width:0}
.stock-app .stock-detail .eyebrow{margin:0 0 4px;color:var(--stock-brand-strong);font-size:var(--ci-type-11);letter-spacing:var(--ci-tracking-eyebrow)}
.stock-app .stock-detail h2{font-size:var(--ci-type-20);line-height:var(--ci-leading-28);letter-spacing:var(--ci-tracking-heading)}
.stock-app .stock-detail-meta{margin:var(--ci-space-4) 0 0}
.stock-app .stock-detail-meta span{background:var(--stock-brand-soft);color:var(--stock-brand-strong);font-size:var(--ci-type-11)}
.stock-app .stock-identity{gap:var(--ci-space-4);margin:var(--ci-space-6) 0}
.stock-app .stock-identity span{min-height:64px;border-color:var(--ci-color-line);border-radius:var(--ci-radius-control);padding:var(--ci-space-5)}
.stock-app .stock-identity small{color:var(--ci-color-muted);font-size:var(--ci-type-11)}
.stock-app .stock-identity b{font-size:var(--ci-type-14)}
.stock-app .stock-sku-section{border-color:var(--ci-color-line);padding-top:var(--ci-space-6)}
.stock-sku-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--ci-space-5);margin-bottom:var(--ci-space-5)}
.stock-app .stock-sku-heading h3{margin:0;font-size:var(--ci-type-16);line-height:var(--ci-leading-24)}
.stock-sku-heading p{margin:2px 0 0;color:var(--ci-color-muted);font-size:var(--ci-type-11)}
.stock-sku-heading>b{flex:0 0 auto;border-radius:var(--ci-radius-round);background:var(--stock-brand-soft);color:var(--stock-brand-strong);padding:4px 8px;font-size:var(--ci-type-11)}
.stock-sku-search{display:flex;align-items:center;gap:var(--ci-space-4);min-height:var(--ci-control-height-md);margin-bottom:var(--ci-space-5);border:1px solid var(--ci-color-line-strong);border-radius:var(--ci-radius-control);background:#fff;padding:0 var(--ci-space-5);color:var(--ci-color-muted)}
.stock-sku-search:focus-within{box-shadow:var(--ci-focus-ring);border-color:var(--stock-brand)}
.stock-sku-search span,.stock-sku-search svg{width:18px;height:18px;flex:0 0 18px}
.stock-sku-search input{min-width:0;flex:1;border:0;outline:0;background:transparent;color:var(--ci-color-ink);font-size:var(--ci-type-14)}
.stock-sku-groups{display:grid;gap:var(--ci-space-4)}
.stock-sku-group{border:1px solid var(--ci-color-line);border-radius:var(--ci-radius-control);background:#fff;overflow:hidden}
.stock-sku-group>summary{display:flex;align-items:center;justify-content:space-between;gap:var(--ci-space-5);min-height:54px;padding:var(--ci-space-4) var(--ci-space-5);cursor:pointer;list-style:none}
.stock-sku-group>summary::-webkit-details-marker{display:none}
.stock-sku-group>summary::before{content:"›";flex:0 0 auto;color:var(--stock-brand-strong);font-size:22px;line-height:1;transition:transform var(--ci-motion-fast) var(--ci-ease-standard)}
.stock-sku-group[open]>summary::before{transform:rotate(90deg)}
.stock-sku-group>summary>span{display:grid;min-width:0;margin-right:auto}
.stock-sku-group>summary strong{font-size:var(--ci-type-14)}
.stock-sku-group>summary small{overflow:hidden;color:var(--ci-color-muted);font-size:var(--ci-type-11);text-overflow:ellipsis;white-space:nowrap}
.stock-sku-group>summary>b{flex:0 0 auto;color:var(--stock-brand-strong);font-size:var(--ci-type-12)}
.stock-sku-group .stock-sku-list{border-top:1px solid var(--ci-color-line);padding:var(--ci-space-4)}
.stock-app .stock-sku-list{gap:var(--ci-space-3)}
.stock-app .stock-sku-row{grid-template-columns:minmax(160px,1fr) minmax(120px,1.2fr);gap:var(--ci-space-3) var(--ci-space-5);border-color:var(--ci-color-line);border-radius:var(--ci-radius-compact);padding:var(--ci-space-4) var(--ci-space-5)}
.stock-app .copy-button{font-size:var(--ci-type-14)}
.stock-app .stock-sku-row span{font-size:var(--ci-type-11);line-height:var(--ci-leading-16)}
.stock-sku-description{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ci-space-2)}
.stock-app .stock-sku-description .eyesight-tag{font-size:var(--ci-type-11)}
.stock-app .stock-sku-row code{grid-column:1/-1;color:var(--ci-color-muted);font-family:var(--ci-font-mono);font-size:var(--ci-type-11)}
.stock-sku-empty{border:1px dashed var(--ci-color-line-strong);border-radius:var(--ci-radius-control);padding:var(--ci-space-8);color:var(--ci-color-muted);text-align:center}

@media(max-width:760px){
  .stock-app .stock-heading h1{font-size:var(--ci-type-24);line-height:var(--ci-leading-28)}
  .stock-app .stock-heading p:last-child{font-size:var(--ci-type-12)}
  .stock-app .stock-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stock-app .stock-category{border-radius:var(--ci-radius-menu);padding:var(--ci-space-4)}
  .prescription-filters{overflow-x:auto;flex-wrap:nowrap;padding:var(--ci-space-3);scrollbar-width:thin}
  .prescription-filter-label{min-width:118px}
  .prescription-filter-label small{display:none}
  .stock-app .stock-card h3{font-size:var(--ci-type-12);line-height:var(--ci-leading-16)}
  .stock-drawer-backdrop{inset:60px 0 42px}
  .stock-app .stock-drawer{width:100vw}
  .stock-app .stock-detail-hero{grid-template-columns:104px minmax(0,1fr);gap:var(--ci-space-5)}
  .stock-app .stock-detail-cover{width:104px}
  .stock-app .stock-detail h2{font-size:var(--ci-type-16);line-height:var(--ci-leading-24)}
  .stock-app .stock-sku-row{grid-template-columns:1fr auto}
  .stock-app .stock-sku-row code{grid-column:1/-1}
}

@media(prefers-reduced-motion:reduce){.stock-app *{transition-duration:0s!important}}