/* Kitchen OS UI refresh v22
   Dense, touch-friendly layout for phones while keeping desktop readable. */

:root{
  --ink:#172622;
  --muted:#64756f;
  --soft:#91a09a;
  --line:#dbe4e0;
  --paper:#ffffff;
  --page:#f3f7f5;
  --forest:#103c34;
  --forest-light:#175348;
  --green:#087b62;
  --green-soft:#e8f6f1;
  --amber:#a96816;
  --amber-soft:#fff3dc;
  --red:#b6453c;
  --red-soft:#fff0ed;
  --blue:#4666a8;
  --blue-soft:#eef3ff;
  --shadow:0 4px 18px rgb(26 54 45 / 6%);
  --radius:11px;
  --control-h:38px;
  font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei","Segoe UI",Roboto,Arial,sans-serif;
}
html{font-size:15px}
body{font-size:14px;line-height:1.45;background:var(--page)}
button,input,select,textarea{font-size:13px}
button{touch-action:manipulation}
::placeholder{color:#92a09b;opacity:1}

/* Global density */
.sidebar{width:244px;padding:20px 13px 13px}
.main-shell{margin-left:244px}
.brand{gap:10px;padding:0 5px 20px}
.brand-mark{width:39px;height:39px;border-radius:11px;font-size:23px}
.brand strong{font-size:15px}
.brand small,.profile-card small{font-size:11px}
.sidebar-label{margin:3px 7px 8px;font-size:10px}
.desktop-nav{gap:3px}
.nav-item{min-height:41px;gap:10px;padding:0 10px;border-radius:9px;font-size:13.5px;font-weight:620}
.nav-item .icon{width:18px;height:18px}
.sidebar-summary{padding:12px;border-radius:10px}
.profile-card{margin-top:9px;padding:9px 4px 1px}

.topbar{min-height:66px;padding:8px 28px}
.date-switcher{gap:9px}
.date-label{min-width:175px;padding:2px 3px}
.date-label>span{font-size:11px;font-weight:600;color:#718079}
.date-label>strong{font-size:14px}
.icon-button{width:36px;height:36px;border-radius:8px}
.language-button{min-height:34px}
.topbar-language-switch>button{min-height:30px;padding-inline:9px;font-size:12px}
.auth-user-chip{min-height:38px}

.page-content{width:min(1220px,100%);padding:22px 28px 62px}
.page-heading{gap:12px;margin-bottom:16px}
.page-heading h1{margin-bottom:4px;font-size:25px;letter-spacing:-.025em}
.page-heading p,.card-heading p{font-size:12.5px;line-height:1.45}
.card{padding:14px;border-radius:var(--radius);box-shadow:var(--shadow)}
.card-heading{min-height:25px;margin-bottom:10px}
.card-heading h2{font-size:15px}
.card-heading p{margin-top:3px}
.helper-text{font-size:12px;line-height:1.5;margin:7px 0 10px}
.empty-state{padding:13px 4px;font-size:12.5px}

.primary-button,.secondary-button,.danger-button,.restock-button{
  min-height:var(--control-h);
  border-radius:8px;
  padding:0 11px;
  font-size:12.5px;
  font-weight:700;
}
.primary-button{background:var(--forest)}
.primary-button:hover{background:var(--forest-light)}
.secondary-button{border-color:#d2ddd8}
.danger-button{margin-top:4px}
.page-actions,.topbar-actions{gap:6px}
.icon-button,.inventory-action-button,.quantity-button{transition:background .12s,border-color .12s,color .12s}

/* Inputs / filters */
.search-box{
  min-width:250px;
  height:40px;
  padding:0 11px;
  border-color:#cfdcd6;
  border-radius:9px;
  box-shadow:0 1px 3px rgb(22 50 41 / 3%);
}
.search-box>input{font-size:13px}
.search-box:focus-within{border-color:#7ab5a3;box-shadow:0 0 0 3px rgb(8 123 98 / 8%)}
.filter-tab{
  min-height:36px;
  padding:0 10px;
  border-color:#e0e7e4;
  background:#fff;
  font-size:12px;
}
.filter-tab.selected{border-color:#b9d8cc;background:var(--green-soft);color:#096f59}
.zone-tabs,.task-filters{gap:5px}
.inventory-view-switch{margin-bottom:12px;padding:3px}
.inventory-view-button{min-height:36px;font-size:12px}
.storage-filter{font-size:12px}
.storage-filter>select{height:38px;font-size:12.5px}
.management-field>input,.management-field>select,.management-field>textarea,
.schedule-toolbar input,.schedule-toolbar select,.report-filter-card input,.report-filter-card select,
.modal-card input,.modal-card select,.account-form-grid input,.account-form-grid select{
  min-height:40px;
  font-size:13px;
  border-color:#d3ddd9;
}

/* Cards / status colors */
.stats-grid{gap:10px;margin-bottom:12px}
.stat-card{min-height:112px;padding:14px;border-radius:11px}
.stat-top{font-size:12px;font-weight:600}
.stat-value{margin-top:9px;font-size:25px}
.stat-card>p{margin-top:4px;font-size:11px;line-height:1.4}
.tag{min-height:25px;padding:0 8px;font-size:11px}
.tag-ok{background:#e5f5ef;color:#087259}
.tag-low{background:#fff0d3;color:#9a5d0b}
.tag-empty{background:#ffebe7;color:#a63c33}
.tag-neutral{background:#eef2f0;color:#596a64}
.capacity-summary{padding:10px}
.capacity-zone{padding:8px}
.summary-pill{padding:6px 9px;font-size:11px}

/* Calendar: stronger hierarchy and clearer state colors */
.calendar-popover{
  width:340px;
  padding:12px;
  border-color:#cfddd7;
  border-radius:12px;
  box-shadow:0 16px 42px rgb(18 48 39 / 16%);
}
.calendar-shortcuts{gap:5px;padding-bottom:9px}
.calendar-shortcut{
  min-height:32px;
  padding:0 9px;
  border-color:#d4dfda;
  background:#f9fbfa;
  color:#53655f;
  font-size:11px;
  font-weight:650;
}
.calendar-shortcut:hover{background:#dff2eb;color:#096d57}
.calendar-toolbar{margin:10px 0 7px}
.calendar-selects>select{height:34px;font-size:12px}
.calendar-weekdays>span{padding:5px 0;color:#667a72;font-size:11px;font-weight:700}
.calendar-day{height:38px;border-radius:8px;font-size:12px;font-weight:600}
.calendar-day:hover{background:#e4f4ee}
.calendar-day.outside-month{color:#b0bbb7}
.calendar-day.today{border-color:#7fc0ad;background:#f0faf6;color:#08745c}
.calendar-day.selected{border-color:#0d6653;background:#0d6653;color:#fff;box-shadow:0 2px 7px rgb(13 102 83 / 22%)}

/* Inventory: reduce unused vertical space, improve readability */
.inventory-summary{margin:-3px 0 12px}
.filters-row{gap:10px;margin-bottom:10px}
.storage-tab-groups{gap:8px;margin-bottom:10px}
.storage-tab-group{gap:4px}
.storage-group-label{font-size:11px}
.inventory-table{border-radius:11px}
.inventory-table-head,.inventory-row{padding-inline:11px}
.inventory-table-head{min-height:38px;font-size:11px;font-weight:700;background:#f5f8f7}
.inventory-row{min-height:57px}
.inventory-group-heading{min-height:32px;padding-inline:11px}
.inventory-group-heading>strong{font-size:11px}
.inventory-item-name{gap:8px}
.inventory-item-name>div{gap:2px}
.inventory-item-name strong{font-size:12.5px}
.inventory-item-name small,.inventory-zone,.inventory-minimum>small,.quantity-control>small{font-size:11px}
.inventory-select{min-height:33px;font-size:11.5px}
.quantity-button{width:31px;height:31px}
.quantity-input{width:42px;font-size:14px}
.minimum-input{font-size:12px}
.inventory-action-button{width:31px;height:31px}
.restock-button{min-height:34px;font-size:12px}
.source-quantity{font-size:10.5px}
.source-quantity>strong{font-size:11px}

/* Operational rows */
.portion-row{min-height:52px}
.portion-row strong{font-size:13px}
.portion-row>div:first-child>small{font-size:11px}
.task-row{min-height:56px;gap:9px}
.task-row.compact{min-height:48px}
.task-copy{gap:3px}
.task-copy>strong{font-size:12.5px}
.task-copy>small{font-size:11px}
.alert-row{min-height:50px}
.item-title{gap:2px}
.item-title strong{font-size:12.5px}
.item-title small,.alert-quantity{font-size:11px}
.setting-row{min-height:49px}
.setting-row>span:first-child{font-size:12.5px}
.setting-control>input{height:36px;font-size:12.5px}
.language-switch>button{min-height:31px;padding:0 9px;font-size:11.5px}
.history-item{min-height:40px}
.history-item>span{font-size:12px}

/* Central kitchen */
.central-heading{margin-bottom:12px}
.central-heading h1{font-size:25px;margin:2px 0 3px}
.central-heading p{font-size:12.5px}
.central-stats{gap:9px;margin-bottom:10px}
.central-stats article{padding:12px;border-radius:11px}
.central-stats span,.central-stats small{font-size:11px}
.central-stats strong{margin:3px 0 1px;font-size:23px}
.central-tabs{gap:2px;margin-bottom:10px;overflow-x:auto;scrollbar-width:none}
.central-tabs::-webkit-scrollbar{display:none}
.central-tabs button{min-height:39px;padding:7px 11px;font-size:12.5px;white-space:nowrap}
.central-card{border-radius:11px}
.central-toolbar{gap:8px;padding:10px}
.central-zone-tabs{gap:4px}
.central-zone-tabs button{min-height:35px;padding:0 9px;font-size:11.5px}
.central-toolbar input{height:39px;font-size:13px}
.central-table-head{padding:8px 12px;font-size:11px}
.central-row{padding:9px 12px}
.central-row>div:first-child strong{font-size:13px}
.central-row>div:first-child small{margin-top:1px;font-size:11px}
.central-current strong{font-size:17px}
.zone-pill{padding:4px 7px;font-size:10.5px}
.central-row input,.central-action{height:37px;font-size:12.5px}
.history-title{padding:12px}
.central-history article{padding:10px 12px}

/* Account / permission management */
.account-card-head{gap:10px;margin-bottom:10px}
.account-card-head h2{font-size:16px}
.account-card-head p{font-size:12px}
.account-table{border-radius:11px}
.account-table-head,.account-row{gap:8px;padding:9px 11px}
.account-table-head{font-size:11px}
.account-row{min-height:50px;font-size:12.5px}
.account-row small{font-size:10.5px}
.account-status{font-size:11px;padding:4px 7px}
.account-storage-note{margin-top:9px;font-size:11px}
.account-modal{width:min(980px,97vw);max-height:94vh;padding:14px;border-radius:13px}
.account-form-grid{gap:9px}
.account-form-grid label{gap:4px;font-size:12px}
.permission-grid{margin-top:11px;border-radius:10px}
.permission-head,.permission-row{grid-template-columns:1fr 92px 92px;min-height:37px;padding:0 11px}
.permission-head{font-size:11px}
.permission-row{font-size:12px}
.permission-row input{width:18px;height:18px;accent-color:var(--green)}
.account-form-actions{gap:7px;margin-top:11px}

/* SOP, reports and management */
.sop-layout{gap:10px}
.sop-list{padding:9px}
.sop-list-item{min-height:50px;padding:7px}
.sop-list-item strong{font-size:12px}
.sop-list-item small{font-size:10.5px}
.sop-detail-heading,.sop-editor-heading{margin-bottom:10px}
.sop-detail-heading h2,.sop-editor-heading h2{font-size:16px}
.sop-specifications>div{padding:9px 0}
.sop-specifications dt,.sop-specifications dd{font-size:12px}
.sop-step{min-height:38px;padding:5px 0}
.sop-step>strong{font-size:12px}
.management-list-row{min-height:48px}
.management-list-row strong{font-size:12px}
.management-list-row small{font-size:10.5px}
.report-table th,.report-table td{padding:8px 7px;font-size:11.5px}
.attendance-row{min-height:61px}
.attendance-row strong{font-size:11.5px}
.attendance-row small{font-size:10px}

/* Make bilingual labels readable: Vietnamese primary, Chinese compact but not tiny */
html[lang="vi"] small,
html[lang="vi"] .item-title small,
html[lang="vi"] .inventory-item-name small,
html[lang="vi"] .central-row small{line-height:1.35}

/* Tablet */
@media(max-width:1100px){
  .sidebar{width:218px}
  .main-shell{margin-left:218px}
  .topbar,.page-content{padding-inline:18px}
  .search-box{min-width:220px}
}

/* Phone */
@media(max-width:760px){
  html{font-size:16px}
  body{min-width:320px;font-size:14px}
  .topbar{
    min-height:58px;
    gap:6px;
    padding:7px 10px;
    box-shadow:0 1px 8px rgb(21 50 41 / 5%);
  }
  .topbar-mobile-brand{gap:7px}
  .topbar-mobile-brand>.brand-mark{width:33px;height:33px;font-size:19px}
  .topbar-mobile-brand>strong{font-size:12.5px}
  .topbar-actions{gap:4px}
  .auth-user-chip{min-height:34px;padding:3px}
  .auth-user-chip button{padding:6px 8px;font-size:11px}
  .topbar-language-switch{padding:2px}
  .topbar-language-switch>button{min-width:34px;min-height:28px;padding:0 6px;font-size:11px}
  .date-switcher{gap:6px}
  .date-label{min-height:38px}
  .date-label>span{font-size:10.5px}
  .date-label>strong{font-size:13px}
  .icon-button{width:36px;height:36px}

  .page-content{padding:14px 9px 80px}
  .page-heading{align-items:center;gap:7px;margin-bottom:11px}
  .page-heading h1{margin-bottom:2px;font-size:20px;line-height:1.18}
  .page-heading p{font-size:11.5px;line-height:1.35}
  .page-heading>.primary-button,.page-heading>.secondary-button{
    flex:0 0 auto;min-height:36px;padding:0 8px;font-size:11px
  }

  .card{padding:11px;border-radius:10px}
  .card-heading{margin-bottom:7px}
  .card-heading h2{font-size:14px}
  .card-heading p{font-size:11px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:8px}
  .stat-card{min-height:91px;padding:10px}
  .stat-top{font-size:10.5px}
  .stat-icon{width:27px;height:27px}
  .stat-value{margin-top:5px;font-size:21px}
  .stat-card>p{font-size:9.8px}
  .dashboard-grid,.reservations-layout,.settings-layout{gap:8px}

  .primary-button,.secondary-button,.danger-button,.restock-button{min-height:38px;font-size:12px}
  .filters-row{gap:7px;margin-bottom:8px}
  .zone-tabs,.task-filters,.central-zone-tabs{
    flex-wrap:nowrap;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:1px;
  }
  .zone-tabs::-webkit-scrollbar,.task-filters::-webkit-scrollbar,.central-zone-tabs::-webkit-scrollbar{display:none}
  .filter-tab{min-height:35px;flex:0 0 auto;padding:0 9px;font-size:11.5px}
  .search-box{height:42px}
  .search-box>input{font-size:13px}
  .storage-filter>select{height:40px}

  .inventory-view-switch{margin-bottom:8px}
  .inventory-view-button{min-height:38px;font-size:11.5px}
  .inventory-view-description{font-size:11px}
  .storage-tab-groups{gap:6px;margin-bottom:8px}
  .inventory-group+.inventory-group{margin-top:8px}
  .inventory-group-heading{min-height:28px}
  .inventory-row,.work-row{
    min-height:0;
    gap:5px;
    margin-bottom:6px;
    padding:9px 10px;
    border-radius:9px;
  }
  .inventory-item-name strong{font-size:13px}
  .inventory-item-name small{font-size:10.5px}
  .inventory-work-area,.inventory-zone{padding-left:16px}
  .mobile-field-label{min-width:82px;font-size:10.5px}
  .inventory-select{min-height:34px;font-size:11.5px}
  .quantity-control{margin-top:2px;padding-left:16px}
  .quantity-button{width:34px;height:34px}
  .quantity-input{font-size:14px}
  .inventory-action-button{width:34px;height:34px}
  .storage-threshold{padding-left:16px;font-size:9.5px}
  .work-row>.inventory-source{padding-left:16px}
  .source-quantity{padding:3px 5px}

  .portion-row{min-height:46px;gap:7px}
  .portion-row strong{font-size:12.5px}
  .portion-metrics{gap:9px}
  .portion-needed{min-width:48px;font-size:16px}
  .task-row{min-height:48px}
  .task-copy>strong{font-size:12.5px}
  .task-copy>small{font-size:10.5px}
  .alert-row{min-height:45px}
  .item-title strong{font-size:12px}

  .calendar-popover{
    position:fixed;
    inset:60px 7px auto;
    width:auto;
    max-height:calc(100vh - 75px);
    overflow:auto;
    padding:10px;
  }
  .calendar-shortcuts{flex-wrap:nowrap;overflow-x:auto}
  .calendar-shortcut{flex:0 0 auto;min-height:34px;font-size:11px}
  .calendar-day{height:40px;font-size:12.5px}

  .central-heading{gap:6px;margin-bottom:8px}
  .central-heading h1{font-size:20px}
  .central-heading p{font-size:11.5px}
  .central-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-bottom:7px}
  .central-stats article{min-width:0;padding:8px}
  .central-stats span,.central-stats small{font-size:9px;line-height:1.25}
  .central-stats strong{font-size:18px}
  .central-tabs{margin-bottom:7px}
  .central-tabs button{min-height:38px;padding:6px 9px;font-size:11.5px}
  .central-toolbar{padding:8px}
  .central-toolbar input{height:42px}
  .central-row,.central-list .central-row:has([data-central-adjust]){
    grid-template-columns:minmax(0,1fr) auto;
    gap:6px;
    padding:8px 9px;
  }
  .central-row>div:first-child strong{font-size:13px}
  .central-row>div:first-child small{font-size:10.5px}
  .zone-pill{font-size:10px}
  .central-current strong{font-size:16px}
  .central-row input,.central-action{height:38px}
  .history-title{padding:9px}
  .central-history article{padding:9px}

  .setting-row{min-height:45px;gap:7px}
  .setting-row>span:first-child{font-size:12px}
  .setting-control>input{height:38px}
  .language-switch>button{min-height:34px;font-size:11px}
  .history-item{min-height:38px}

  .account-modal-backdrop{padding:6px}
  .account-modal{
    width:100%;
    max-height:96vh;
    padding:10px;
    border-radius:10px;
  }
  .account-card-head{position:sticky;top:-10px;z-index:2;margin:-10px -10px 8px;padding:10px;background:#fff;border-bottom:1px solid var(--line)}
  .account-form-grid,.account-self-card .account-form-grid{grid-template-columns:1fr;gap:7px}
  .account-form-grid label{font-size:11.5px}
  .account-form-grid input,.account-form-grid select{height:40px}
  .permission-grid{margin-top:8px}
  .permission-head,.permission-row{grid-template-columns:minmax(0,1fr) 58px 66px;min-height:36px;padding:0 7px}
  .permission-head{font-size:10px}
  .permission-row{font-size:11.5px}
  .permission-row input{width:19px;height:19px}
  .account-form-actions{position:sticky;bottom:-10px;margin:8px -10px -10px;padding:8px 10px;background:#fff;border-top:1px solid var(--line)}
  .account-form-actions>*{flex:1}

  .account-row{padding:8px 9px}
  .sop-list{gap:4px}
  .sop-list-item{min-height:42px;padding:6px}
  .sop-specifications>div{gap:7px;padding:7px 0}
  .sop-specifications dt,.sop-specifications dd{font-size:11.5px}
  .management-form-grid{gap:8px}
  .management-field{gap:4px}
  .management-field>span{font-size:10.5px}

  .modal-backdrop{padding:6px}
  .modal-card{width:100%;max-height:95vh;overflow:auto;padding:11px;border-radius:10px}
  .modal-card>form{gap:9px}
  .modal-card form>label,.modal-grid>label{gap:4px;font-size:11.5px}
  .modal-locations{gap:6px;padding:8px}
  .modal-location-row{gap:4px}

  .mobile-nav{height:62px}
  .mobile-nav>.nav-item{min-height:52px;gap:2px;padding:2px;font-size:9.5px;font-weight:650}
  .mobile-nav>.nav-item>.icon{width:18px;height:18px}
}

@media(max-width:390px){
  .page-content{padding-inline:7px}
  .stats-grid{gap:5px}
  .stat-card{padding:8px}
  .central-stats article{padding:7px 5px}
  .central-stats span,.central-stats small{font-size:8.5px}
  .permission-head,.permission-row{grid-template-columns:minmax(0,1fr) 52px 58px}
}


/* v24 — responsive matrix for current common phone sizes
   Targets: 320/360/375/390/393/412/414/430/480px + small tablets.
   Breakpoints are content-driven so Android/iPhone CSS viewport differences remain safe. */

@supports(padding:max(0px)){
  @media(max-width:760px){
    .topbar{
      padding-left:max(9px,env(safe-area-inset-left));
      padding-right:max(9px,env(safe-area-inset-right));
      padding-top:max(7px,env(safe-area-inset-top));
    }
    .page-content{
      padding-left:max(9px,env(safe-area-inset-left));
      padding-right:max(9px,env(safe-area-inset-right));
      padding-bottom:calc(78px + env(safe-area-inset-bottom));
    }
    .mobile-nav{
      height:calc(62px + env(safe-area-inset-bottom));
      padding-bottom:env(safe-area-inset-bottom);
      padding-left:env(safe-area-inset-left);
      padding-right:env(safe-area-inset-right);
    }
    .account-form-actions{padding-bottom:max(8px,env(safe-area-inset-bottom))}
  }
}

/* Small tablet / large phone landscape: 600–760 CSS px */
@media(min-width:600px) and (max-width:760px){
  .page-content{padding-inline:14px}
  .stats-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stat-card{min-height:96px}
  .dashboard-grid{grid-template-columns:1fr 1fr}
  .dashboard-grid>.card{min-width:0}
  .settings-layout{grid-template-columns:1fr 1fr}
  .staff-settings-card,.account-admin-card,.account-self-card{grid-column:1/-1}
  .central-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .central-toolbar{flex-direction:row;align-items:center}
  .central-toolbar input{width:min(280px,42vw)}
  .calendar-popover{inset:64px 14px auto;width:min(430px,calc(100vw - 28px));margin-inline:auto}
  .modal-card{width:min(620px,calc(100vw - 20px))}
  .account-modal{width:min(700px,calc(100vw - 16px))}
}

/* Large phones: 430–599px (Plus/Max class, many Android 1080p devices) */
@media(min-width:430px) and (max-width:599px){
  .page-content{padding-inline:11px}
  .page-heading h1{font-size:21px}
  .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat-card{min-height:94px}
  .central-stats article{padding:9px}
  .central-stats span,.central-stats small{font-size:9.5px}
  .central-stats strong{font-size:19px}
  .permission-head,.permission-row{grid-template-columns:minmax(0,1fr) 64px 72px}
  .account-row{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  .calendar-day{height:42px}
  .mobile-nav{grid-auto-columns:minmax(72px,1fr)}
}

/* Mainstream phones: 390–429px (390/393/412/414/428/430 class) */
@media(min-width:390px) and (max-width:429px){
  .page-content{padding-inline:9px}
  .page-heading{align-items:flex-start}
  .page-heading h1{font-size:20px}
  .page-heading p{font-size:11.3px}
  .page-heading>.primary-button,.page-heading>.secondary-button{
    max-width:42%;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .stat-card{min-height:90px;padding:9px}
  .stat-value{font-size:20px}
  .central-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .central-stats article{padding:7px 6px}
  .central-stats span,.central-stats small{font-size:8.8px}
  .central-stats strong{font-size:18px}
  .central-tabs button{font-size:11.2px}
  .central-zone-tabs button{font-size:11px}
  .central-row,.central-list .central-row:has([data-central-adjust]){padding:8px}
  .central-row input{min-width:72px}
  .search-box{padding-inline:10px}
  .permission-head,.permission-row{grid-template-columns:minmax(0,1fr) 56px 64px}
  .permission-head{font-size:9.8px}
  .permission-row{font-size:11.2px}
  .mobile-nav{grid-auto-columns:minmax(68px,1fr)}
}

/* 360–389px (common Android 360/384 and iPhone 375 CSS layouts) */
@media(min-width:360px) and (max-width:389px){
  .topbar{padding-inline:7px}
  .topbar-mobile-brand>strong{display:none}
  .page-content{padding-inline:7px}
  .page-heading{align-items:flex-start}
  .page-heading h1{font-size:19px}
  .page-heading p{font-size:10.9px}
  .page-heading>.primary-button,.page-heading>.secondary-button{
    min-height:35px;
    max-width:39%;
    padding-inline:7px;
    font-size:10.5px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .stats-grid{gap:5px}
  .stat-card{min-height:86px;padding:8px}
  .stat-top{font-size:9.8px}
  .stat-value{font-size:19px}
  .stat-card>p{font-size:9px}
  .card{padding:9px}
  .filters-row{gap:5px}
  .filter-tab{min-height:34px;padding-inline:8px;font-size:11px}
  .search-box{height:41px;padding-inline:9px}
  .inventory-row,.work-row{padding:8px}
  .inventory-work-area,.inventory-zone,.quantity-control,.storage-threshold,.work-row>.inventory-source{padding-left:12px}
  .mobile-field-label{min-width:74px;font-size:10px}
  .quantity-button,.inventory-action-button{width:33px;height:33px}
  .central-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .central-stats article:last-child{grid-column:1/-1}
  .central-stats span,.central-stats small{font-size:9px}
  .central-stats strong{font-size:18px}
  .central-tabs button{padding-inline:8px;font-size:11px}
  .central-zone-tabs button{padding-inline:8px;font-size:10.7px}
  .central-row,.central-list .central-row:has([data-central-adjust]){
    grid-template-columns:minmax(0,1fr) 78px;
  }
  .central-row input,.central-action{width:78px;font-size:11.5px}
  .account-modal{padding:8px}
  .account-card-head{top:-8px;margin:-8px -8px 7px;padding:9px 8px}
  .permission-head,.permission-row{grid-template-columns:minmax(0,1fr) 50px 57px;padding-inline:5px}
  .permission-head{font-size:9.2px}
  .permission-row{font-size:10.8px}
  .permission-row input{width:18px;height:18px}
  .account-form-actions{margin-inline:-8px;padding-inline:8px}
  .calendar-popover{inset:58px 5px auto;padding:8px}
  .calendar-shortcut{padding-inline:8px}
  .calendar-day{height:39px}
  .mobile-nav{grid-auto-columns:minmax(64px,1fr)}
  .mobile-nav>.nav-item{font-size:9px}
}

/* Compact phones: <=359px (320/340/359 CSS px) */
@media(max-width:359px){
  html{font-size:15px}
  body{min-width:0}
  .topbar{padding-inline:5px}
  .topbar-mobile-brand>strong{display:none}
  .topbar-mobile-brand>.brand-mark{width:31px;height:31px}
  .topbar-language-switch>button{min-width:30px;padding-inline:4px;font-size:10px}
  .auth-user-chip button{padding-inline:6px;font-size:10px}
  .date-switcher{gap:4px}
  .date-label>span{font-size:9.5px}
  .date-label>strong{font-size:12px}
  .icon-button{width:34px;height:34px}
  .page-content{padding:11px 5px 76px}
  .page-heading{gap:5px;margin-bottom:8px;align-items:flex-start}
  .page-heading h1{font-size:18px}
  .page-heading p{font-size:10.3px}
  .page-heading>.primary-button,.page-heading>.secondary-button{
    min-height:34px;max-width:38%;padding-inline:6px;font-size:10px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .stats-grid{grid-template-columns:1fr 1fr;gap:4px}
  .stat-card{min-height:82px;padding:7px}
  .stat-icon{width:24px;height:24px}
  .stat-value{font-size:18px}
  .stat-card>p{font-size:8.6px}
  .card{padding:8px}
  .card-heading h2{font-size:13px}
  .filter-tab{min-height:33px;padding-inline:7px;font-size:10.5px}
  .search-box{height:40px;padding-inline:8px}
  .search-box>input{font-size:12px}
  .inventory-view-button{font-size:10.5px}
  .inventory-row,.work-row{padding:7px}
  .inventory-item-name strong{font-size:12px}
  .inventory-item-name small{font-size:9.8px}
  .inventory-work-area,.inventory-zone,.quantity-control,.storage-threshold,.work-row>.inventory-source{padding-left:9px}
  .mobile-field-label{min-width:66px;font-size:9.5px}
  .inventory-select{min-width:105px;font-size:10.5px}
  .quantity-button,.inventory-action-button{width:32px;height:32px}
  .quantity-input{width:34px}
  .central-stats{grid-template-columns:1fr 1fr}
  .central-stats article{padding:6px}
  .central-stats article:last-child{grid-column:1/-1}
  .central-stats span,.central-stats small{font-size:8.4px}
  .central-stats strong{font-size:17px}
  .central-tabs button{min-height:36px;padding-inline:7px;font-size:10.5px}
  .central-zone-tabs button{min-height:33px;padding-inline:7px;font-size:10px}
  .central-row,.central-list .central-row:has([data-central-adjust]){
    grid-template-columns:minmax(0,1fr) 72px;
    padding:7px;
  }
  .central-row input,.central-action{width:72px;height:36px;padding-inline:4px;font-size:10.5px}
  .zone-pill{font-size:9.2px;padding-inline:5px}
  .permission-head,.permission-row{grid-template-columns:minmax(0,1fr) 45px 52px;padding-inline:4px}
  .permission-head{font-size:8.8px}
  .permission-row{font-size:10.2px}
  .account-form-grid label{font-size:10.8px}
  .account-form-grid input,.account-form-grid select{font-size:12px}
  .calendar-popover{inset:56px 3px auto;padding:7px}
  .calendar-shortcut{min-height:32px;padding-inline:7px;font-size:10px}
  .calendar-weekdays>span{font-size:10px}
  .calendar-day{height:36px;font-size:11.5px}
  .mobile-nav{height:59px;grid-auto-columns:minmax(60px,1fr)}
  .mobile-nav>.nav-item{min-height:49px;font-size:8.5px}
  .mobile-nav>.nav-item>.icon{width:17px;height:17px}
}

/* Phone landscape: preserve usable vertical space */
@media(max-width:900px) and (max-height:500px) and (orientation:landscape){
  .topbar{position:relative;min-height:50px;padding-block:5px}
  .date-switcher{order:0;width:auto;min-width:250px}
  .topbar-mobile-brand{display:none}
  .page-content{padding-top:9px;padding-bottom:66px}
  .page-heading{margin-bottom:8px}
  .page-heading h1{font-size:18px}
  .calendar-popover{position:fixed;inset:5px 5px auto auto;width:min(390px,55vw);max-height:calc(100vh - 10px)}
  .account-modal,.modal-card{max-height:calc(100vh - 10px)}
  .mobile-nav{height:55px}
}

/* Avoid iOS text zoom and keep controls reliably tappable without making cards tall. */
@media(max-width:760px){
  input,select,textarea{font-size:max(16px,1em)}
  .quantity-input,.minimum-input,.inline-number{font-size:16px}
  .search-box>input,.central-toolbar input{font-size:16px}
  .filter-tab,.central-tabs button,.central-zone-tabs button,.language-switch button{min-height:40px}
  .icon-button,.quantity-button,.inventory-action-button{min-width:36px;min-height:36px}
}


/* v25 — readability pass: larger inventory labels and quantities */
.inventory-item-name strong{font-size:14px;font-weight:750;line-height:1.3}
.inventory-item-name small{font-size:12px;line-height:1.35}
.quantity-input{font-size:16px;font-weight:760}
.quantity-control>small{font-size:12px;font-weight:650}
.inventory-working>strong{font-size:15px;font-weight:760}
.inventory-working>small{font-size:12px}
.inventory-minimum .minimum-input{font-size:13px;font-weight:700}
.source-quantity{font-size:11.5px}
.source-quantity>strong{font-size:13px}
.inventory-badge .tag{font-size:11.5px}
.inventory-row{min-height:61px}
.central-row>div:first-child strong{font-size:14px;font-weight:760;line-height:1.3}
.central-row>div:first-child small{font-size:12px}
.central-current strong{font-size:19px;font-weight:780}
.central-current small{font-size:12px;font-weight:650}
.central-row input{font-size:15px;font-weight:700}
.central-action{font-size:13px}
.stat-value{font-size:27px}

@media(max-width:760px){
  .inventory-item-name strong{font-size:14.5px}
  .inventory-item-name small{font-size:11.5px}
  .quantity-input{font-size:17px}
  .quantity-control>small{font-size:12px}
  .inventory-working>strong{font-size:16px}
  .inventory-working>small{font-size:11.5px}
  .minimum-input{font-size:14px}
  .source-quantity{font-size:11px}
  .source-quantity>strong{font-size:12.5px}
  .inventory-badge .tag{font-size:11px}
  .central-row>div:first-child strong{font-size:14.5px}
  .central-row>div:first-child small{font-size:11.5px}
  .central-current strong{font-size:18px}
  .central-current small{font-size:11.5px}
  .central-row input{font-size:16px}
  .stat-value{font-size:22px}
}

@media(max-width:389px){
  .inventory-item-name strong{font-size:13.8px}
  .inventory-item-name small{font-size:10.8px}
  .quantity-input{font-size:16.5px}
  .inventory-working>strong{font-size:15px}
  .central-row>div:first-child strong{font-size:13.8px}
  .central-row>div:first-child small{font-size:10.8px}
  .central-current strong{font-size:17px}
}


/* v29 — cloud inventory controls */
.quantity-readonly,.minimum-readonly{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  min-height:31px;
  font-size:15px;
  font-weight:780;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.minimum-readonly{min-width:34px;font-size:13px}
.central-list .central-row:has([data-central-set]){
  grid-template-columns:minmax(240px,2fr) minmax(110px,1fr) 105px 100px 100px;
}
.central-action.adjust{background:#496a60}
.history-adjust{color:#5d6f98}
.central-row [data-central-set-qty]{font-weight:750;font-variant-numeric:tabular-nums}

@media(max-width:820px){
  .central-row,
  .central-list .central-row:has([data-central-adjust]),
  .central-list .central-row:has([data-central-set]){
    grid-template-columns:minmax(0,1fr) minmax(88px,auto);
  }
}
@media(max-width:760px){
  .quantity-readonly{min-width:40px;min-height:34px;font-size:16px}
  .minimum-readonly{font-size:13.5px}
  .central-list .central-row:has([data-central-set]){
    grid-template-columns:minmax(0,1fr) 86px;
  }
  .central-list .central-row:has([data-central-set]) [data-central-set-qty],
  .central-list .central-row:has([data-central-set]) .central-action{
    width:86px;
  }
}


/* v31 — account-level read-only and historical inventory states */
.inventory-readonly-field{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 8px;
  border-radius:8px;
  background:#f2f6f4;
  color:#52645d;
  font-size:12px;
  font-weight:650;
}
.inventory-readonly-notice{
  margin:-4px 0 10px;
  padding:9px 11px;
  border:1px solid #ecd5a8;
  border-radius:9px;
  background:#fff8e8;
  color:#805813;
  font-size:12px;
  font-weight:650;
  line-height:1.45;
}
.account-readonly-control[aria-disabled="true"],
.account-readonly-form [aria-disabled="true"]{
  opacity:.58;
  cursor:not-allowed;
}
@media(max-width:760px){
  .inventory-readonly-field{min-height:36px;font-size:11.5px}
  .inventory-readonly-notice{margin-bottom:8px;padding:8px 9px;font-size:11px}
}


.inventory-cloud-notice{
  margin:-2px 0 10px;
  padding:9px 11px;
  border:1px solid #e6c9a8;
  border-radius:9px;
  background:#fff6e9;
  color:#875516;
  font-size:12px;
  font-weight:700;
  line-height:1.45;
}
@media(max-width:760px){
  .inventory-cloud-notice{padding:8px 9px;font-size:11px}
}


/* v32 — staff-first inventory operations: inbound / outbound / transfer / receiving */
.inventory-operations-host{min-height:180px}
.inventory-ops-shell{display:grid;gap:10px}
.inventory-ops-toolbar{display:flex;align-items:center;gap:8px;justify-content:space-between}
.op-search{flex:1;display:flex}
.op-search input{width:100%;height:42px;border:1px solid #cfdbd6;border-radius:9px;padding:0 11px;background:#fff;font-size:14px}
.op-search input:focus{outline:none;border-color:#7ab5a3;box-shadow:0 0 0 3px rgb(8 123 98 / 8%)}
.op-count{min-width:36px;height:32px;display:grid;place-items:center;border-radius:999px;background:#e9f3ef;color:#17624f;font-size:12px;font-weight:800}
.inventory-ops-list{display:grid;gap:8px}
.inventory-op-card{display:grid;grid-template-columns:minmax(240px,1.6fr) minmax(320px,1.8fr) auto;align-items:end;gap:10px;padding:11px;border:1px solid #dce5e1;border-radius:11px;background:#fff;box-shadow:0 2px 9px rgb(25 53 45 / 4%)}
.op-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0}
.op-item-head>div{min-width:0;display:grid;gap:2px}
.op-item-head>div>strong{font-size:14.5px;line-height:1.3;color:var(--ink)}
.op-item-head>div>small{font-size:11.5px;color:#7b8b85}
.op-item-head>span{display:grid;justify-items:end;gap:1px;white-space:nowrap}
.op-item-head>span>small{font-size:9.5px;color:#87968f}
.op-item-head>span>strong{font-size:16px;font-variant-numeric:tabular-nums}
.op-select-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.op-select-grid label{display:grid;gap:4px;min-width:0}
.op-select-grid label>span{font-size:10.5px;font-weight:700;color:#687a73}
.op-select-grid select{width:100%;height:39px;border:1px solid #d2ddd8;border-radius:8px;padding:0 8px;background:#fff;font-size:12px}
.op-action-row{display:flex;align-items:center;gap:7px;justify-content:flex-end}
.op-quantity{display:grid;grid-template-columns:36px 58px 36px;align-items:center;border:1px solid #cfdbd6;border-radius:9px;overflow:hidden;background:#fff}
.op-quantity button{height:38px;border:0;background:#f5f8f7;font-size:18px;font-weight:800;color:#28594c}
.op-quantity input{width:100%;height:38px;border:0;border-inline:1px solid #dde5e2;text-align:center;padding:0;font-size:16px;font-weight:800;font-variant-numeric:tabular-nums}
.op-primary{height:40px;border:0;border-radius:9px;padding:0 12px;background:#116852;color:#fff;font-size:12px;font-weight:800;white-space:nowrap}
.op-primary.op-out{background:#8a5520}
.op-primary:disabled{opacity:.48;cursor:not-allowed}
.op-message{min-height:19px;margin:0;font-size:11.5px;font-weight:700}
.op-message.ok{color:#087259}.op-message.error{color:#ad4038}
.inventory-ops-empty,.inventory-ops-loading{padding:20px;text-align:center;color:#71827b;font-size:13px}
.shipment-card{grid-template-columns:minmax(240px,1.3fr) minmax(250px,1fr) auto}
.shipment-status{padding:5px 8px;border-radius:999px;background:#fff1d8;color:#945d12;font-size:10.5px;font-weight:800}
.shipment-route{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:700;color:#4d615a}
.shipment-meta{display:grid;gap:2px;font-size:10.5px;color:#75857f}
.receive-row{justify-content:flex-end}
.branch-ops-tabs{margin-top:-2px}
.warehouse-switch{display:flex;gap:4px;flex-wrap:wrap}
.warehouse-switch button{min-height:34px;padding:0 9px;border:1px solid #d5e0dc;border-radius:8px;background:#fff;font-size:11.5px;font-weight:700;color:#61726c}
.warehouse-switch button.active{background:#123e35;color:#fff;border-color:#123e35}

@media(max-width:920px){
  .inventory-op-card,.shipment-card{grid-template-columns:1fr 1fr}
  .op-action-row{grid-column:1/-1;justify-content:flex-end}
}
@media(max-width:760px){
  .inventory-ops-shell{gap:8px}
  .inventory-ops-toolbar{gap:6px}
  .op-search input{height:42px;font-size:16px}
  .inventory-op-card,.shipment-card{grid-template-columns:1fr;gap:8px;padding:10px}
  .op-item-head>div>strong{font-size:14.5px}
  .op-item-head>div>small{font-size:11px}
  .op-item-head>span>strong{font-size:17px}
  .op-select-grid{grid-template-columns:1fr 1fr;gap:6px}
  .op-select-grid select{height:42px;font-size:12px}
  .op-action-row{grid-column:auto;justify-content:stretch}
  .op-quantity{grid-template-columns:42px minmax(58px,1fr) 42px;flex:1}
  .op-quantity button,.op-quantity input{height:42px}
  .op-primary{height:42px;min-width:108px;font-size:12px}
  .shipment-route{font-size:11.5px}
  .receive-row .op-primary{width:100%}
  .branch-ops-tabs{margin-bottom:8px}
}
@media(max-width:389px){
  .op-select-grid{grid-template-columns:1fr}
  .op-action-row{gap:5px}
  .op-quantity{grid-template-columns:38px minmax(50px,1fr) 38px}
  .op-primary{min-width:94px;padding-inline:8px;font-size:11px}
  .warehouse-switch button{font-size:10.5px;padding-inline:7px}
}


.inventory-overview-card{
  grid-template-columns:minmax(260px,1fr) minmax(360px,2fr);
  align-items:center;
}
.op-location-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  justify-content:flex-end;
}
.op-location-pill{
  min-width:116px;
  display:grid;
  gap:1px;
  padding:6px 8px;
  border:1px solid #dbe5e0;
  border-radius:8px;
  background:#f7faf8;
}
.op-location-pill small{
  font-size:10px;
  color:#71827b;
  line-height:1.25;
}
.op-location-pill strong{
  font-size:13px;
  color:#263c35;
  font-variant-numeric:tabular-nums;
}
@media(max-width:760px){
  .inventory-overview-card{grid-template-columns:1fr}
  .op-location-list{justify-content:stretch}
  .op-location-pill{min-width:0;flex:1 1 calc(50% - 4px)}
}
@media(max-width:389px){
  .op-location-pill{flex-basis:100%}
}


/* v33 — cloud fallback visibility */
.inventory-cloud-notice small{
  display:block;
  margin-top:5px;
  font-size:10.5px;
  font-weight:600;
  line-height:1.45;
  opacity:.9;
}
.central-tabs button:disabled{
  opacity:.42;
  cursor:not-allowed;
  filter:saturate(.45);
}
@media(max-width:760px){
  .inventory-cloud-notice small{font-size:10px}
}


/* v34 — explicit local inventory fallback */
.inventory-fallback-notice{
  display:grid;
  gap:3px;
}
.inventory-fallback-notice>strong{
  display:block;
  font-size:12.5px;
  line-height:1.35;
}
.inventory-fallback-notice>small{
  margin-top:0;
  color:#77501d;
}
@media(max-width:760px){
  .inventory-fallback-notice>strong{font-size:11.5px}
}


/* v35 — provisional central inventory count pending approval */
.central-draft-banner{
  margin:8px 10px 0;
  padding:7px 9px;
  border-radius:8px;
  background:#fff7e8;
  color:#805519;
  font-size:11px;
  font-weight:750;
  line-height:1.4;
}
.central-row.is-draft{
  background:#fffcf5;
}
.central-row.is-draft .central-current small{
  color:#93611c;
  font-weight:700;
}
.central-action.draft-save{
  background:#73531f;
}
@media(max-width:760px){
  .central-draft-banner{
    margin:7px 8px 0;
    padding:6px 8px;
    font-size:10.5px;
  }
}


/* v38 — explicit transfer movement feedback for manager review */
.op-transfer-balance{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:8px;
  padding:7px 9px;
  border-radius:8px;
  background:#f5f8f7;
  color:#566a62;
  font-size:11px;
}
.op-transfer-balance span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.op-transfer-balance span:last-child{text-align:right}
.op-transfer-balance strong{
  margin-left:4px;
  color:#153f35;
  font-size:13px;
  font-variant-numeric:tabular-nums;
}
.op-transfer-balance b{
  color:#0d765d;
  font-size:16px;
}
.draft-operations-shell .op-message.ok{
  position:sticky;
  bottom:76px;
  z-index:5;
  padding:8px 10px;
  border:1px solid #b8d9cd;
  border-radius:8px;
  background:#eff8f4;
}
@media(max-width:760px){
  .op-transfer-balance{font-size:10.5px;padding:6px 8px}
  .op-transfer-balance strong{font-size:12px}
}


/* v41 — 領貨 / 出貨 split and post-pick handling */
.pick-followup{
  grid-column:1/-1;
  display:grid;
  gap:8px;
  margin-top:2px;
  padding:9px;
  border:1px solid #dce7e2;
  border-radius:10px;
  background:#f8fbfa;
}
.pick-status{
  display:grid;
  grid-template-columns:auto auto 1fr;
  align-items:baseline;
  gap:6px;
  font-size:11px;
  color:#62756e;
}
.pick-status strong{
  color:#143f35;
  font-size:14px;
  font-variant-numeric:tabular-nums;
}
.pick-status small{
  text-align:right;
  color:#7b8b85;
}
.pick-use-row,
.pick-return-row{
  display:grid;
  align-items:center;
  gap:8px;
}
.pick-use-row{
  grid-template-columns:minmax(150px,1fr) auto;
}
.pick-return-row{
  grid-template-columns:minmax(180px,1fr) minmax(150px,.72fr) auto;
}
.pick-return-row label{
  display:grid;
  gap:4px;
  min-width:0;
}
.pick-return-row label>span{
  font-size:10px;
  font-weight:700;
  color:#70827b;
}
.pick-return-row select{
  width:100%;
  min-width:0;
}
.op-secondary{
  min-height:40px;
  padding:0 14px;
  border:1px solid #b9cbc4;
  border-radius:9px;
  background:#fff;
  color:#184d40;
  font-weight:750;
}
.op-secondary.op-use{
  background:#174d40;
  border-color:#174d40;
  color:#fff;
}
.op-secondary:disabled{
  opacity:.42;
}
@media(max-width:760px){
  .pick-followup{
    padding:8px;
    gap:7px;
  }
  .pick-status{
    grid-template-columns:auto auto;
  }
  .pick-status small{
    grid-column:1/-1;
    text-align:left;
  }
  .pick-use-row,
  .pick-return-row{
    grid-template-columns:1fr;
  }
  .pick-use-row .op-quantity,
  .pick-return-row .op-quantity{
    width:100%;
  }
  .op-secondary{
    min-height:42px;
    width:100%;
  }
}


/* v42 — in-use stock visibility */
.op-location-pill-use{
  border-color:#d9c28f;
  background:#fff8e9;
}
.op-location-pill-use small{
  color:#795a1d;
}
.op-location-pill-use strong{
  color:#6f4b0c;
}


/* v43 — shipped quantity stays at the selected destination location */
.ship-fixed-hint{
  grid-column:1/-1;
  padding:7px 9px;
  border:1px solid #d9e5df;
  border-radius:8px;
  background:#f6faf8;
  color:#5d736b;
  font-size:10.5px;
  line-height:1.45;
}
@media(max-width:760px){
  .ship-fixed-hint{
    padding:6px 8px;
    font-size:10px;
  }
}


/* v67 — stable central search field across Safari/iOS/Android */
.central-search-box{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:210px;
  height:40px;
  padding:0 9px;
  border:1px solid #d8e2de;
  border-radius:9px;
  background:#fff;
  color:#75837e;
  box-sizing:border-box;
}
.central-search-box:focus-within{
  border-color:#7ab5a3;
  box-shadow:0 0 0 3px rgb(8 123 98 / 8%);
}
.central-search-icon{
  width:17px;
  height:17px;
  flex:0 0 17px;
}
.central-search-box>input{
  flex:1 1 auto !important;
  min-width:0 !important;
  width:100% !important;
  height:100% !important;
  padding:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  color:var(--ink) !important;
  -webkit-text-fill-color:var(--ink);
  box-shadow:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.central-search-box>input::placeholder{
  color:#92a09b !important;
  -webkit-text-fill-color:#92a09b;
  opacity:1;
}
.central-search-box>input::-webkit-search-decoration,
.central-search-box>input::-webkit-search-results-button,
.central-search-box>input::-webkit-search-results-decoration,
.central-search-box>input::-webkit-search-cancel-button{
  display:none;
  -webkit-appearance:none;
}
.central-search-clear{
  display:grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#eef3f1;
  color:#60706a;
  font-size:20px;
  line-height:1;
}
.central-search-clear[hidden]{display:none !important}

@media(max-width:820px){
  .central-toolbar{
    align-items:stretch !important;
  }
  .central-search-box{
    width:100%;
    min-width:0;
    height:44px;
  }
}