*{box-sizing:border-box}body{margin:0;font:14px Arial;background:#f5f6f8;color:#20242a}header{display:flex;align-items:center;gap:28px;padding:0 14px;height:50px;background:#fff;border-bottom:1px solid #d7dde5}.brand{font-size:19px;font-weight:700}nav{display:flex;gap:22px}nav a{text-decoration:none;color:#222}.stage{text-align:center;padding:5px;background:#fff3cd;font-size:11px}main{max-width:1600px;margin:auto;padding:8px}.customerbar{display:grid;grid-template-columns:2fr repeat(4,1fr);background:#fff;border:1px solid #d7dde5}.customerbar div{padding:8px;border-right:1px solid #d7dde5}.customerbar small{display:block;color:#66717d;margin-bottom:3px}.tabs,.actions,.quick{display:flex;gap:6px;flex-wrap:wrap;padding:8px 0}.tabs button{flex:1;min-height:48px;background:#fff;border:1px solid #cbd3dc;border-radius:6px}.workspace{display:grid;grid-template-columns:1.7fr .8fr;gap:8px}.workspace section,.workspace aside{background:#fff;border:1px solid #d7dde5;border-radius:7px;padding:9px}.garments{display:grid;grid-template-columns:repeat(6,1fr);gap:7px}.garments button{aspect-ratio:1.05/1;min-height:76px;background:#f7f9fb;border:1px solid #c8d1dc;border-radius:8px;font-size:15px}.quick button{min-height:40px;min-width:70px}.workspace h2{font-size:17px;margin:3px 0 8px}.workspace h2 span{float:right;font-size:13px;font-weight:normal}table{width:100%;border-collapse:collapse;background:#fff}th,td{border:1px solid #d7dde5;padding:7px;white-space:nowrap}th{background:#eef2f6}.totals{text-align:right;line-height:2;margin-top:10px}.actions{border-top:1px solid #d7dde5;margin-top:8px}.actions button{min-height:56px;min-width:94px;flex:1;background:#fff;border:1px solid #c8d1dc;border-radius:7px}.tablewrap{overflow-x:auto;min-height:380px;background:#fff}h1{font-size:19px}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.garments{grid-template-columns:repeat(4,1fr)}.customerbar{grid-template-columns:repeat(3,1fr)}}@media(max-width:600px){.garments{grid-template-columns:repeat(3,1fr)}.customerbar{grid-template-columns:repeat(2,1fr)}header{height:auto;flex-direction:column;align-items:flex-start;padding:8px}nav{flex-wrap:wrap}}

/* DEV058 contained touch POS */
:root{--select:#e7f2ff;--info:#dcecff;--edit:#fff2cc;--utility:#eee9ff;--success:#dff4df;--warning:#ffe7bd;--danger:#ffdede;--key:#f4f6f8}.support-nav{display:inline-flex;align-items:center;justify-content:center;min-width:150px;min-height:44px;padding:0 20px;border-radius:7px;background:#0b355d!important;color:#fff!important;font-weight:700;text-decoration:none}button{touch-action:manipulation}.selector{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(300px,34%) 280px;gap:8px;padding-right:0!important}.rightpad{position:static!important;width:auto!important;grid-column:3;grid-row:1;background:#fff;border:1px solid #cbd2da;border-radius:7px;padding:8px;overflow:hidden}.keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.keypad button{height:68px;min-width:0;background:var(--key);border:1px solid #aeb8c2;border-radius:6px;font-size:22px;font-weight:700}.keypad .enter{grid-column:span 3;background:var(--success)}.garments button,.service-tabs button{background:var(--select)!important}.garments button{min-height:96px!important}.service-tabs button{min-height:60px!important}.quick button,.actions button{min-height:64px!important;font-size:15px!important;white-space:normal!important}.actions button:nth-child(1){background:var(--success);font-weight:700}.actions button:nth-child(2){background:var(--info);font-weight:700}.actions button:nth-child(3){background:var(--warning)}.actions button:nth-child(5),.actions button:nth-child(6),.actions button:nth-child(7){background:var(--info)}.actions button:nth-child(8),.actions button:nth-child(12),.actions button:nth-child(13),.actions button:nth-child(14){background:var(--edit)}.actions button:nth-child(9),.actions button:nth-child(10),.actions button:nth-child(11){background:var(--utility)}.actions button:last-child{background:var(--danger);font-weight:700}@media(max-width:1200px){.selector{grid-template-columns:minmax(0,1fr) 270px}.rightpad{grid-column:2}}@media(max-width:760px){.selector{grid-template-columns:1fr}.rightpad{grid-column:1;grid-row:auto}.support-nav{min-width:120px}}

/* DEV059 branding + compact right rail */
.brand{display:flex!important;align-items:center;gap:8px}.dbs-logo{height:34px;width:auto;max-width:62px;object-fit:contain}.app-footer{min-height:42px;display:flex;align-items:center;justify-content:center;background:#fff;border-top:1px solid #d7dde4;font-size:13px;margin-top:8px}.selector{grid-template-columns:minmax(0,1fr) minmax(300px,32%) 250px!important}.rightpad{max-width:250px!important;align-self:start!important}.keypad button{height:58px!important;font-size:19px!important}@media(max-width:1200px){.selector{grid-template-columns:minmax(0,1fr) 250px!important}.rightpad{max-width:250px!important}}@media(max-width:760px){.selector{grid-template-columns:1fr!important}.rightpad{max-width:none!important;width:100%!important}.dbs-logo{height:30px;max-width:55px}}

.tablet-pos-controls,.tablet-popover{display:none}
@media (max-width:1024px){
 .rightpad{display:none!important}.selector{grid-template-columns:minmax(0,1fr) minmax(280px,38%)!important;gap:8px!important}
 .garments button{min-height:64px!important;height:auto!important}
 .tablet-pos-controls{display:flex;gap:8px;position:sticky;bottom:0;z-index:30;background:#fff;padding:6px;border-top:1px solid #ccd5df}
 .tablet-master{min-width:96px;min-height:52px;font-size:18px;font-weight:700}
 .tablet-popover{display:block;position:fixed;right:12px;bottom:70px;width:min(360px,calc(100vw - 24px));z-index:100;background:#fff;border:1px solid #aeb8c4;border-radius:10px;padding:10px;box-shadow:0 8px 30px rgba(0,0,0,.22)}
 .tablet-popover[hidden]{display:none!important}.tablet-title{display:flex;justify-content:space-between;align-items:center;font-size:18px;font-weight:700;margin-bottom:8px}
 .tablet-title button{min-width:44px;min-height:44px}.tablet-keygrid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
 .tablet-keygrid button,.tablet-adjust button,.tablet-actions button,.tablet-toolgrid button{min-height:54px;font-size:17px}
 .tablet-adjust{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}.qty-minus{background:#fff1d6}.qty-plus,.enter{background:#dff3df}
 .tablet-actions{display:grid;grid-template-columns:1fr 1fr 1.3fr;gap:6px;margin-top:6px}.tablet-toolgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
}
@media(max-width:700px){.selector{grid-template-columns:1fr!important}.garments{grid-template-columns:repeat(3,1fr)!important}.tabs{overflow-x:auto;white-space:nowrap}.tabs>*{min-width:120px}.tablet-pos-controls{justify-content:center}}

/* DEV060B explicit Create Ticket desktop structure */
@media (min-width:1025px){
  .pos-workspace{
    display:grid!important;
    grid-template-columns:minmax(0,1.65fr) minmax(320px,.75fr) 250px!important;
    gap:8px!important;
    align-items:start!important;
  }
  .pos-workspace .garment-panel{
    grid-column:1!important;
  }
  .pos-workspace .live-ticket-panel{
    grid-column:2!important;
  }
  .pos-workspace .rightpad{
    display:block!important;
    grid-column:3!important;
    grid-row:1!important;
    width:100%!important;
    max-width:250px!important;
    align-self:start!important;
  }
}

/* DEV061: Tablet/mobile POS only. Desktop baseline remains unchanged. */

/* Touch tablets with larger landscape viewports */
@media (hover:none) and (pointer:coarse) and (min-width:701px) {
  .pos-workspace {
    display:grid!important;
    grid-template-columns:minmax(0,1.55fr) minmax(270px,.85fr)!important;
    gap:7px!important;
    align-items:start!important;
  }
  .pos-workspace .garment-panel {
    grid-column:1!important;
    grid-row:1!important;
    min-width:0;
  }
  .pos-workspace .live-ticket-panel {
    grid-column:2!important;
    grid-row:1!important;
    min-width:0;
  }
  .pos-workspace .rightpad {display:none!important}
  .pos-workspace .garments {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:5px;
  }
  .pos-workspace .garments button {
    min-height:0!important;
    aspect-ratio:1.05/1;
    font-size:13px;
    padding:3px;
  }
  .pos-workspace th,.pos-workspace td {
    white-space:normal;
    overflow-wrap:anywhere;
    padding:5px 3px;
  }
  .tablet-pos-controls {
    display:flex!important;
    position:sticky;
    bottom:0;
    justify-content:center;
    background:#fff;
    z-index:30;
  }
}

/* All small viewports, including iPhones */
@media (max-width:700px) {
  .pos-workspace {
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
  }
  .pos-workspace .garment-panel,
  .pos-workspace .live-ticket-panel {
    grid-column:1!important;
    grid-row:auto!important;
  }
  .pos-workspace .rightpad {display:none!important}
  .pos-workspace .garments {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:5px;
  }
  .pos-workspace .garments button {
    min-height:0!important;
    aspect-ratio:1.05/1;
    font-size:13px!important;
    padding:3px;
  }
  .tablet-pos-controls {
    display:flex!important;
    position:sticky;
    bottom:0;
    justify-content:center;
    z-index:30;
  }
  .pos-workspace th,.pos-workspace td {
    white-space:normal;
    overflow-wrap:anywhere;
  }
  .actions button {min-height:48px!important}
}

/* DEV062 layout correction: desktop and shared header */
header {
  justify-content:flex-start;
  gap:10px;
}
header .brand {
  flex:0 0 auto;
}
.pos-workspace .live-ticket-panel {
  background:#fff!important;
  align-self:stretch!important;
}
.pos-workspace .rightpad {
  background:#fff;
}
.pos-side-navigation {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:6px;
  margin-top:10px;
}
.pos-side-navigation a,
.pos-side-navigation button {
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  min-height:46px;
  padding:5px;
  border:1px solid #b8c6d5;
  border-radius:6px;
  background:#e7f2ff;
  color:#12314b;
  text-decoration:none;
  font:600 12px Arial,sans-serif;
}
.pos-side-navigation button:disabled {
  background:#edf0f4;
  color:#687583;
  cursor:not-allowed;
}
@media(max-width:1024px) {
  .pos-workspace .live-ticket-panel {
    background:#fff!important;
  }
}