/* V2.21 — Menu headers (all screen sizes) + mobile Home fixes. Loaded last; visual only. */

/* ---------- Menu: headers clearly different from their items (desktop + mobile) ---------- */
#nav .ps-nav-group{margin:6px 0 10px;border:0!important}
#nav .ps-nav-heading{background:#e6f2ea!important;color:#17723a!important;text-transform:uppercase;letter-spacing:.3px;font-size:11px!important;white-space:nowrap;font-weight:800!important;padding:9px 10px!important;border-radius:10px!important;border-left:4px solid #1f9d4d!important;margin-bottom:4px}
#nav .ps-nav-heading .bellife-icon{color:#1f9d4d;width:17px;height:17px}
#nav .ps-nav-heading .ps-nav-chevron{margin-left:auto;opacity:.7}
#nav .ps-nav-heading:hover{background:#d9ecdf!important}
#nav .ps-nav-entries{margin-left:12px!important;padding:2px 0 4px 8px!important;border-left:2px solid #dbe8df}
#nav .ps-nav-entries button{font-weight:500!important;color:#3a4a40!important;font-size:13px!important;text-transform:none;letter-spacing:0}
#nav .ps-nav-entries button .bellife-icon{opacity:.75}
#nav .ps-nav-entries button.active{font-weight:700!important;color:#17723a!important;background:#dff1e4!important}
#nav .ps-nav-entries button:hover:not(.active){background:#f1f6f2!important}
html.bellife-dark #nav .ps-nav-heading{background:#21342a!important;color:#9fe0b3!important;border-left-color:#5fbf78!important}
html.bellife-dark #nav .ps-nav-heading .bellife-icon{color:#9fe0b3}
html.bellife-dark #nav .ps-nav-entries{border-left-color:#2f4337}
html.bellife-dark #nav .ps-nav-entries button{color:#cfdcd3!important}
html.bellife-dark #nav .ps-nav-entries button.active{background:#2b4a36!important;color:#c6f0d2!important}
@media(max-width:750px){#nav .ps-nav-heading{font-size:13px!important;letter-spacing:.9px;padding:12px 12px!important}#nav .ps-nav-entries button{font-size:15px!important}}

/* ---------- Mobile Home ---------- */
@media(max-width:750px){
 /* 1. Job card: shirt icon sits beside the name instead of on top of it */
 #app .home-redesign .home-job-with-stages{display:grid!important;grid-template-columns:42px minmax(0,1fr) 28px!important;grid-template-areas:"av info drag" "stages stages stages" "act act act"!important;gap:8px 10px!important;padding:12px!important;align-items:start!important}
 #app .home-redesign .home-job-with-stages>.job-avatar{grid-area:av!important;position:static!important;width:42px!important;height:42px!important;margin:0!important;left:auto!important;top:auto!important;border-radius:12px!important}
 #app .home-redesign .home-job-with-stages>.job-avatar svg{width:24px;height:24px}
 #app .home-redesign .home-job-with-stages>.job-info{grid-area:info!important;padding-left:0!important;margin:0!important;min-width:0!important}
 #app .home-redesign .home-job-with-stages>.job-info b{font-size:16px;line-height:1.25}
 #app .home-redesign .home-job-with-stages>.job-info small{font-size:12.5px!important}
 #app .home-redesign .home-job-with-stages>.production-drag-controls{grid-area:drag!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;position:static!important}
 #app .home-redesign .home-job-with-stages>.production-drag-controls button,#app .home-redesign .home-job-with-stages>.production-drag-controls span{font-size:12px!important;line-height:1!important;padding:3px!important;min-height:0!important}
 #app .home-redesign .home-job-with-stages>.home-stage-panel{grid-area:stages!important;margin:0!important;padding:10px 0 0!important;border-top:1px solid rgba(31,157,77,.18)}
 #app .home-redesign .home-job-with-stages>.job-actions{grid-area:act!important;display:flex!important;flex-direction:row!important;justify-content:stretch!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important;margin:0!important;padding:0!important;border:0!important}
 #app .home-redesign .home-job-with-stages>.job-actions .job-stage-badge{display:none!important} /* stage name is already shown above the progress bar */
 #app .home-redesign .home-job-with-stages>.job-actions>.btn{flex:1 1 0!important;width:auto!important;min-width:0!important;min-height:40px!important;font-size:14px!important}
 #app .home-redesign .home-job-with-stages>.job-actions>.ps-notify-slot:not(:empty){flex:1 1 100%!important}
 #app .home-redesign .home-job-with-stages>.job-actions>.ps-notify-slot:empty{display:none}
 #app .home-redesign .home-job-with-stages>.job-actions>.ps-notify-slot .btn{width:100%;min-height:40px}

 /* 2. All 8 stages visible: 4 × 2 grid, no sideways scrolling */
 #app .home-redesign .home-stage-panel .home-stage-title{font-size:12px!important;margin-bottom:4px!important;opacity:.75}
 #app .home-redesign .home-production-stages{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;grid-template-rows:auto!important;grid-auto-flow:row!important;grid-auto-columns:auto!important;gap:6px 4px!important;overflow:visible!important;width:100%!important;flex-wrap:wrap!important;padding:2px 0 0!important}
 #app .home-redesign .home-production-stages .home-stage-item{grid-column:auto!important;grid-row:auto!important;min-width:0!important;width:auto!important;flex:none!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:3px!important;padding:6px 2px!important;border-radius:10px!important;cursor:pointer}
 #app .home-redesign .home-production-stages .home-stage-item.selected{background:rgba(31,157,77,.10)}
 #app .home-redesign .home-production-stages .home-stage-circle{width:24px!important;height:24px!important;flex:none!important}
 #app .home-redesign .home-production-stages .home-stage-name{font-size:10.5px!important;line-height:1.15!important;text-align:center!important;white-space:normal!important;overflow-wrap:anywhere;max-width:100%}
 #app .home-redesign .home-stage-legend{display:none!important}

 /* 3. Quick actions: every button fits, no sideways scrolling */
 #app .home-redesign .quick-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important;width:auto!important;padding:10px!important}
 #app .home-redesign .quick-grid button{min-width:0!important;width:auto!important;min-height:66px!important;padding:8px 4px!important;font-size:11px!important;line-height:1.15!important;gap:4px!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;white-space:normal!important}
 #app .home-redesign .quick-grid button .bellife-icon{width:20px!important;height:20px!important}
 #app .home-redesign .quick-grid button span{overflow-wrap:anywhere}

 /* Tabs above My Schedule: all 5 fit */
 #app .task-tabs{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;overflow:visible!important;gap:4px!important;padding:4px!important}
 #app .task-tabs button{min-width:0!important;width:auto!important;padding:7px 2px!important;font-size:10.5px!important;display:flex!important;flex-direction:column!important;align-items:center!important;gap:2px!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
 #app .task-tabs button .bellife-icon{width:18px!important;height:18px!important}
 /* Production toolbar: wrap instead of scrolling sideways */
 #app .home-redesign .production-order-toolbar{display:grid!important;grid-template-columns:1fr 1fr!important;overflow:visible!important;gap:6px!important;align-items:center!important}
 #app .home-redesign .production-order-toolbar>.compact-select{grid-column:1/-1;justify-content:space-between}
 #app .home-redesign .production-order-toolbar>.btn{width:100%!important;white-space:nowrap!important;overflow:hidden;text-overflow:ellipsis}
 #app .home-redesign .production-order-toolbar .btn,#app .home-redesign .production-order-toolbar select{font-size:12px!important;min-height:32px!important;padding:5px 10px!important;width:auto!important}
 #app .home-redesign .production-order-toolbar .compact-select{font-size:12px!important;gap:5px!important}
}