:root{
  --navy:#0f3d66;
  --dark:#082b4b;
  --blue:#1d69a7;
  --light:#e8f2fb;
  --surface:#fff;
  --soft:#f5f8fb;
  --line:#dbe4ec;
  --text:#17222d;
  --muted:#627181;
  --success:#19734b;
  --successbg:#e8f7f0;
  --warning:#8a5b00;
  --warningbg:#fff5d8;
  --danger:#a92f2f;
  --dangerbg:#fdecec;
  --shadow:0 18px 45px rgba(15,
  61,
  102,
  .14);
  font-family:Inter,
  system-ui,
  -apple-system,
  "Segoe UI",
  sans-serif
}
*{
  box-sizing:border-box
}
html,
body{
  margin:0;
  min-height:100%;
  background:var(--soft);
  color:var(--text)
}
button,
input,
textarea{
  font:inherit
}
.hidden{
  display:none!important
}
.auth-page{
  min-height:100vh;
  background:radial-gradient(circle at top left,
  rgba(29,
  105,
  167,
  .16),
  transparent 35%),
  linear-gradient(135deg,
  #edf5fb,
  #f9fbfd)
}
.auth-shell{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(320px,
  1fr) minmax(380px,
  520px)
}
.auth-hero{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(40px,
  7vw,
  100px);
  color:#fff;
  background:linear-gradient(rgba(8,
  43,
  75,
  .78),
  rgba(15,
  61,
  102,
  .9)),
  linear-gradient(135deg,
  var(--navy),
  var(--blue))
}
.auth-hero h1{
  margin:24px 0 10px;
  font-size:clamp(36px,
  5vw,
  64px)
}
.auth-card{
  align-self:center;
  margin:34px;
  padding:clamp(28px,
  5vw,
  52px);
  background:#fff;
  border:1px solid var(--line);
  border-radius:24px;
  box-shadow:var(--shadow)
}
.brand-mark{
  width:74px;
  height:74px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#fff;
  color:var(--navy);
  font-weight:900;
  font-size:28px
}
.brand-mark.small{
  width:44px;
  height:44px;
  border-radius:13px;
  font-size:17px;
  color:#fff;
  background:var(--navy)
}
.eyebrow{
  margin-bottom:8px;
  color:var(--blue);
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em;
  text-transform:uppercase
}
.muted{
  color:var(--muted)
}
label{
  display:grid;
  gap:8px;
  margin-bottom:18px;
  font-weight:650
}
input,
textarea{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:13px 14px
}
.password-box{
  display:grid;
  grid-template-columns:1fr auto;
  border:1px solid var(--line);
  border-radius:12px
}
.password-box input{
  border:0
}
.text-button{
  border:0;
  background:transparent;
  color:var(--blue);
  padding:0 14px
}
.primary-button,
.secondary-button,
.danger-button{
  border:0;
  border-radius:11px;
  padding:12px 18px;
  font-weight:750;
  cursor:pointer
}
.primary-button{
  background:var(--navy);
  color:#fff
}
.secondary-button{
  background:var(--light);
  color:var(--navy)
}
.danger-button{
  background:var(--dangerbg);
  color:var(--danger)
}
.compact{
  padding:9px 14px
}
form>.primary-button{
  width:100%
}
.device-summary,
.security-note{
  color:var(--muted);
  font-size:13px
}
.message{
  margin:14px 0;
  padding:12px 14px;
  border-radius:10px;
  background:var(--light);
  color:var(--navy)
}
.message.error{
  background:var(--dangerbg);
  color:var(--danger)
}
.message.success{
  background:var(--successbg);
  color:var(--success)
}
.center-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:24px
}
.status-card{
  width:min(620px,
  100%);
  padding:42px;
  background:#fff;
  border-radius:18px;
  box-shadow:var(--shadow);
  text-align:center
}
.status-icon{
  width:68px;
  height:68px;
  display:grid;
  place-items:center;
  margin:0 auto 22px;
  border-radius:50%;
  font-size:28px
}
.status-icon.pending{
  color:var(--warning);
  background:var(--warningbg)
}
.detail-list{
  display:grid;
  margin:28px 0;
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  text-align:left
}
.detail-list div{
  display:grid;
  grid-template-columns:145px 1fr;
  gap:16px;
  padding:12px 14px;
  border-bottom:1px solid var(--line)
}
.detail-list div:last-child{
  border:0
}
.detail-list dd{
  margin:0;
  font-weight:650;
  word-break:break-word
}
.detail-list.compact div{
  grid-template-columns:95px 1fr
}
.button-row{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  flex-wrap:wrap
}
.topbar{
  position:sticky;
  top:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:12px clamp(18px,
  4vw,
  48px);
  background:rgba(255,
  255,
  255,
  .93);
  border-bottom:1px solid var(--line)
}
.brand-inline{
  display:flex;
  align-items:center;
  gap:13px
}
.brand-inline strong,
.brand-inline span{
  display:block
}
.brand-inline span{
  color:var(--muted);
  font-size:12px
}
.back-link{
  color:var(--navy);
  font-size:26px;
  text-decoration:none
}
.app-shell{
  width:min(1180px,
  calc(100% - 32px));
  margin:28px auto 60px
}
.welcome-card,
.panel{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px
}
.welcome-card{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:26px 28px
}
.dashboard-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:18px
}
.panel{
  padding:24px
}
.panel.full{
  grid-column:1/-1
}
.status-chip{
  display:inline-flex;
  border-radius:999px;
  padding:6px 10px;
  font-size:12px;
  font-weight:800
}
.status-chip.active{
  color:var(--success);
  background:var(--successbg)
}
.status-chip.pending{
  color:var(--warning);
  background:var(--warningbg)
}
.chip-list,
.permission-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px
}
.chip,
.permission-list code{
  border-radius:999px;
  padding:7px 10px;
  background:var(--light);
  color:var(--navy);
  font-size:12px
}
.stack-list{
  display:grid;
  gap:10px
}
.branch-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:12px 14px;
  border:1px solid var(--line);
  border-radius:12px
}
.feature-grid{
  display:grid;
  grid-template-columns:repeat(3,
  1fr);
  gap:14px
}
.feature-card{
  min-height:150px;
  display:grid;
  gap:8px;
  padding:20px;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--line);
  border-radius:14px
}
.feature-card.disabled{
  opacity:.58
}
.feature-icon{
  font-size:28px
}
.section-heading{
  display:flex;
  align-items:center;
  justify-content:space-between
}
.count-badge{
  min-width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:#fff;
  background:var(--navy)
}
.device-grid{
  display:grid;
  grid-template-columns:repeat(2,
  minmax(0,
  1fr));
  gap:16px;
  margin-top:20px
}
.device-card{
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px
}
.device-card-header{
  display:flex;
  justify-content:space-between;
  gap:16px
}
.mono{
  font-family:ui-monospace,
  monospace;
  font-size:12px
}
.empty-state{
  margin-top:24px;
  padding:34px;
  border:1px dashed var(--line);
  border-radius:14px;
  color:var(--muted);
  text-align:center
}
.splash-page{
  min-height:100vh;
  display:grid;
  place-items:center
}
.splash-card{
  text-align:center
}
.splash-card .brand-mark{
  margin:0 auto 22px;
  background:var(--navy);
  color:#fff
}
@media(max-width:820px){
  .auth-shell{
    grid-template-columns:1fr
  }
  .auth-hero{
    min-height:270px;
    padding:36px 26px
  }
  .auth-card{
    margin:-34px 16px 28px;
    position:relative
  }
  .dashboard-grid,
  .feature-grid,
  .device-grid{
    grid-template-columns:1fr
  }
  .panel.full{
    grid-column:auto
  }
}
@media(max-width:560px){
  .welcome-card{
    align-items:flex-start;
    flex-direction:column
  }
  .status-card{
    padding:28px 20px
  }
  .detail-list div,
  .detail-list.compact div{
    grid-template-columns:1fr
  }
  .button-row{
    flex-direction:column
  }
  .button-row button{
    width:100%
  }
}


/* Sprint 0.1 mobile refinements */
body {
  padding-bottom: env(safe-area-inset-bottom);
}

.device-summary {
  margin: 2px 0 16px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--light);
  color: var(--navy);
  line-height: 1.4;
}

@media (max-width: 820px) {
  .auth-card {
    margin-bottom: calc(28px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px) {
  .auth-card {
    padding: 28px 22px;
    margin-bottom: calc(24px + env(safe-area-inset-bottom));
  }

  .auth-hero {
    padding-bottom: 76px;
  }

  .security-note {
    line-height: 1.45;
  }
}

@media (max-width: 560px) and (max-height: 740px) {
  .auth-hero {
    min-height: 390px;
    padding-top: 42px;
    padding-bottom: 72px;
  }

  .auth-card {
    padding: 24px 20px;
  }
}


select{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:13px 14px;
  color:var(--text);
  font:inherit
}
.toolbar-actions{
  display:flex;
  gap:8px
}
.trip-shell{
  width:min(1540px,calc(100% - 28px));
  margin:22px auto 50px
}
.trip-filter{
  padding:22px 24px;
  margin-bottom:18px
}
.section-heading,
.column-heading,
.member-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px
}
.section-heading h1,
.column-heading h2,
.member-heading h3{
  margin:0
}
.filter-grid{
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(180px,240px) auto;
  gap:16px;
  align-items:end
}
.filter-grid label{
  margin:0
}
.filter-action{
  padding-bottom:18px
}
.trip-workspace{
  display:grid;
  grid-template-columns:minmax(250px,.8fr) minmax(380px,1.25fr) minmax(320px,1fr);
  gap:18px;
  align-items:start
}
.workspace-column{
  min-height:620px;
  padding:18px;
  overflow:hidden
}
.column-heading{
  margin-bottom:14px
}
.column-heading>div{
  display:flex;
  align-items:center;
  gap:10px
}
.step-number{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-weight:800
}
.search-box{
  margin-bottom:12px
}
.search-box input{
  padding:10px 12px
}
.select-list,
.document-list{
  display:grid;
  gap:9px;
  max-height:530px;
  overflow:auto;
  padding-right:3px
}
.select-card{
  width:100%;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  padding:13px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  text-align:left;
  cursor:pointer
}
.select-card:hover,
.select-card.selected{
  border-color:var(--blue);
  background:var(--light)
}
.select-card-main{
  display:grid;
  gap:4px
}
.select-card-main small,
.document-meta,
.member-info span{
  color:var(--muted);
  font-size:12px
}
.select-arrow{
  color:var(--blue);
  font-size:24px
}
.selection-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 4px 12px
}
.check-line{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0
}
.check-line input,
.document-card>input{
  width:auto
}
.document-card{
  margin:0;
  display:flex;
  gap:11px;
  padding:13px;
  border:1px solid var(--line);
  border-radius:12px;
  cursor:pointer;
  font-weight:400
}
.document-card:hover,
.document-card.selected{
  border-color:var(--blue);
  background:var(--light)
}
.document-body{
  flex:1;
  display:grid;
  gap:5px
}
.document-title{
  font-weight:800
}
.document-body strong{
  color:var(--navy)
}
.trip-form{
  display:grid;
  gap:2px
}
.trip-form label{
  margin-bottom:13px
}
.trip-result{
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:16px
}
.member-list{
  display:grid;
  gap:9px;
  margin:12px 0 18px
}
.member-row{
  display:grid;
  grid-template-columns:62px 1fr auto;
  gap:10px;
  align-items:center;
  padding:11px;
  border:1px solid var(--line);
  border-radius:12px
}
.member-role{
  padding:6px;
  border-radius:8px;
  background:var(--light);
  color:var(--navy);
  text-align:center;
  font-size:11px;
  font-weight:850
}
.member-info{
  display:grid;
  gap:3px
}
.trip-actions{
  justify-content:stretch
}
.trip-actions button{
  flex:1
}
.compact-empty{
  padding:14px
}
button:disabled{
  opacity:.55;
  cursor:wait
}

@media(max-width:1100px){
  .trip-workspace{
    grid-template-columns:1fr 1fr
  }
  .trip-workspace>article:last-child{
    grid-column:1/-1;
    min-height:auto
  }
}
@media(max-width:720px){
  .trip-shell{
    width:min(100% - 16px,1540px);
    margin-top:10px
  }
  .trip-filter,
  .workspace-column{
    padding:14px
  }
  .filter-grid,
  .trip-workspace{
    grid-template-columns:1fr
  }
  .filter-action{
    padding:0
  }
  .filter-action button{
    width:100%
  }
  .trip-workspace>article:last-child{
    grid-column:auto
  }
  .workspace-column{
    min-height:auto
  }
  .select-list,
  .document-list{
    max-height:420px
  }
  .topbar{
    align-items:flex-start
  }
  .toolbar-actions{
    flex-direction:column
  }
  .member-row{
    grid-template-columns:54px 1fr
  }
  .member-row>.status-chip{
    grid-column:1/-1;
    justify-self:start
  }
}

/* ERP3S TRIP UI 02 */
.draft-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 2px 10px;padding-top:16px;border-top:1px solid var(--line)}
.draft-heading h3{margin:0}.draft-list{max-height:260px}.draft-card{background:#fffaf0}
.field-note{display:block;margin-top:5px;color:var(--muted);font-weight:400}
select[multiple]{min-height:132px}

.helper-picker{display:grid;gap:10px;margin-bottom:13px}
.helper-results{display:grid;gap:6px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:7px;background:#fff}
.helper-option{display:grid;gap:3px;width:100%;text-align:left;border:0;border-radius:9px;padding:9px 10px;background:#fff;cursor:pointer;color:var(--text)}
.helper-option:hover{background:var(--light)}
.helper-option span{font-size:12px;color:var(--muted)}
.selected-helpers{display:flex;flex-wrap:wrap;gap:7px}
.helper-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border-radius:999px;background:var(--light);color:var(--navy);font-size:12px;font-weight:750}
.helper-chip button{border:0;background:transparent;color:inherit;padding:0;font-size:17px;line-height:1;cursor:pointer}

/* ERP3S TRIP UI 03 R2 */
.compact-trip {
  max-width: 1180px;
}

.compact-editor {
  padding: 18px;
}

.compact-grid {
  grid-template-columns: 2fr 1fr auto;
}

.combo-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  align-items: end;
  margin-bottom: 14px;
}

.trip-command-row {
  grid-template-columns: minmax(320px, 1fr) auto auto;
}

.member-selection-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.compact-docs {
  max-height: 330px;
}

.danger-button {
  border: 0;
  border-radius: 12px;
  background: #b42318;
  color: #fff;
  padding: 12px 16px;
}

.danger-button:disabled {
  opacity: 0.45;
}

@media (max-width: 760px) {
  .compact-grid,
  .combo-row,
  .trip-command-row,
  .member-selection-row {
    grid-template-columns: 1fr;
  }
}

/* ERP3S EMPLOYEE UI 01 */
.employee-shell {
  max-width: 1440px;
  margin: 0 auto;
  padding: 22px;
}

.employee-filter {
  margin-bottom: 18px;
}

.employee-filter-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr auto auto;
  gap: 12px;
  align-items: end;
}

.employee-layout {
  display: grid;
  grid-template-columns: minmax(380px, 0.9fr) minmax(500px, 1.3fr);
  gap: 18px;
}

.employee-list-panel,
.employee-editor {
  min-height: 620px;
}

.employee-list {
  display: grid;
  gap: 8px;
  max-height: 720px;
  overflow: auto;
}

.employee-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  text-align: left;
  cursor: pointer;
}

.employee-card:hover {
  background: var(--light);
}

.employee-card-main {
  display: grid;
  gap: 4px;
}

.employee-card-main small {
  color: var(--muted);
}

.employee-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#role-codes {
  min-height: 170px;
}

@media (max-width: 900px) {
  .employee-filter-grid,
  .employee-layout,
  .employee-form-grid {
    grid-template-columns: 1fr;
  }
}

/* ERP3S EMPLOYEE UI 02 */
.employee-shell-wide { max-width: 1760px; }
.employee-layout-three {
  display: grid;
  grid-template-columns: minmax(340px, .8fr) minmax(520px, 1.15fr) minmax(390px, .9fr);
  gap: 16px;
}
.employee-security-panel { min-height: 620px; }
.employee-pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.employee-action-row { flex-wrap: wrap; }
.employee-card.selected { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(28, 103, 189, .12); }
.employee-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.employee-tab { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 9px 12px; cursor: pointer; }
.employee-tab.active { background: var(--primary); color: #fff; border-color: var(--primary); }
.security-list { display: grid; gap: 8px; max-height: 620px; overflow: auto; }
.security-card { display: grid; gap: 4px; border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: #fff; }
.security-card span { color: var(--muted); font-size: .9rem; }
.security-card.success { border-left: 4px solid #16803a; }
.security-card.error { border-left: 4px solid #b42318; }
.security-actions { display: flex; gap: 6px; margin-top: 4px; }
.security-actions button { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px 10px; cursor: pointer; }
.compact-history { max-height: 240px; margin-bottom: 14px; }
.empty-line { color: var(--muted); padding: 12px; text-align: center; }
@media (max-width: 1280px) {
  .employee-layout-three { grid-template-columns: minmax(330px, .8fr) minmax(500px, 1.2fr); }
  .employee-security-panel { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .employee-layout-three, .employee-pick-grid { grid-template-columns: 1fr; }
  .employee-security-panel { grid-column: auto; }
}

/* ERP3S DELIVERY FIELD PHASE 1 */
.delivery-field-shell {
  max-width: 1500px;
  margin: 0 auto;
  padding: 14px;
  display: grid;
  gap: 14px;
}
.delivery-trip-bar {
  display: grid;
  grid-template-columns: minmax(150px,190px) minmax(260px,1fr) auto;
  gap: 10px;
  align-items: end;
}
.delivery-trip-bar .message { grid-column: 1 / -1; margin: 0; }
.delivery-map-panel { padding: 10px; }
.delivery-map-heading {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 2px 4px 10px;
}
.delivery-map-heading > div { display: grid; gap: 3px; }
.delivery-map-heading span { color: var(--muted); font-size: .9rem; }
#delivery-map {
  width: 100%;
  height: min(58vh,610px);
  min-height: 380px;
  border-radius: 14px;
  overflow: hidden;
  background: #eef2f5;
}
.delivery-map-fallback {
  min-height: 180px;
  display: grid;
  place-items: center;
  padding: 24px;
  color: var(--muted);
  text-align: center;
}
.delivery-route-grid {
  display: grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
  gap: 14px;
}
.delivery-stop-list { display: grid; gap: 8px; }
.delivery-stop-card {
  display: grid;
  grid-template-columns: 42px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}
.delivery-stop-card.dragging { opacity: .5; }
.delivery-stop-badge {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  background: #e8f0ff;
  color: #174ea6;
}
.delivery-stop-card.unplanned .delivery-stop-badge {
  background: #fff0f0;
  color: #b42318;
  border: 1px solid #f4b7b1;
}
.delivery-stop-body { min-width: 0; display: grid; gap: 3px; }
.delivery-stop-body strong,
.delivery-stop-body span,
.delivery-stop-body small {
  overflow: hidden;
  text-overflow: ellipsis;
}
.delivery-stop-body span,
.delivery-stop-body small { color: var(--muted); }
.delivery-stop-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 5px;
}
.route-icon { min-width: 34px; font-size: 1.15rem; font-weight: 700; }
.delivery-postpone-select { width: auto; min-width: 104px; }
.delivery-hint { margin-top: -6px; }
.delivery-map-marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.28);
  font-weight: 800;
  font-size: 15px;
}
.delivery-map-marker.planned { background: #2563eb; color: #fff; }
.delivery-map-marker.unplanned { background: #dc2626; color: #fff; }
.delivery-marker-popup { min-width: 180px; display: grid; gap: 7px; }
@media (max-width: 820px) {
  .delivery-field-shell { padding: 8px; gap: 8px; }
  .delivery-trip-bar { grid-template-columns: 1fr auto; }
  .delivery-trip-select { grid-column: 1 / -1; grid-row: 1; }
  #delivery-map { height: 48vh; min-height: 330px; }
  .delivery-route-grid { grid-template-columns: 1fr; }
  .delivery-stop-card { grid-template-columns: 38px minmax(0,1fr); }
  .delivery-stop-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
    padding-left: 48px;
  }
  .delivery-postpone-select { flex: 1; min-width: 115px; }
}
@media (max-width: 520px) {
  .delivery-topbar { padding-inline: 10px; }
  #delivery-map { height: 44vh; min-height: 300px; }
  .delivery-stop-actions { padding-left: 0; }
  .delivery-stop-actions .secondary-button.compact { flex: 1; }
}


/* ERP3S FIELD-02 */
.app-shell-compact {
  max-width: 980px;
}

.user-strip {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 2px 10px;
  border-bottom: 1px solid var(--line);
}

.user-strip strong {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.user-strip span {
  color: var(--muted);
  font-size: 0.8rem;
  white-space: nowrap;
}

.role-home-grid {
  margin-top: 12px;
}

.role-home-grid .primary-entry {
  min-height: 110px;
}

.delivery-status-select {
  width: auto;
  min-width: 118px;
}

.danger-text-button {
  border: 0;
  background: transparent;
  color: #b42318;
  font: inherit;
  cursor: pointer;
  padding: 7px 8px;
  border-radius: 8px;
}

.danger-text-button:hover {
  background: #fff0f0;
}

@media (max-width: 620px) {
  .user-strip {
    padding: 4px 2px 7px;
    gap: 5px;
  }

  .user-strip strong {
    font-size: 0.9rem;
  }

  .user-strip span {
    font-size: 0.68rem;
  }

  .role-home-grid {
    grid-template-columns: 1fr;
  }

  .role-home-grid .primary-entry {
    min-height: 88px;
  }

  .delivery-status-select {
    flex: 1;
  }
}


/* FIELD-02-r3: compact user header */
.app-shell-compact {
  padding-top: 10px;
}

.user-strip {
  min-height: 32px;
  padding: 3px 2px 7px;
}

.user-strip strong {
  font-size: 0.92rem;
  font-weight: 700;
}

.user-strip span {
  font-size: 0.72rem;
}

@media (max-width: 620px) {
  .app-shell-compact {
    padding-top: 6px;
  }

  .user-strip {
    min-height: 28px;
    padding: 2px 0 5px;
  }

  .user-strip strong {
    font-size: 0.86rem;
  }

  .user-strip span {
    font-size: 0.64rem;
  }
}