/* Tejas Ops — same design language as the Tejas site refresh (Establishment 46339, Tejas blues) */

:root{
  --ink:#10151b;
  --panel:#14202d;
  --line:#24313f;
  --steel:#8fa5ba;
  --white:#f2f4f6;
  --brand:#0075c1;
  --sky:#3fa9e8;
  --fab:#d98e2b;       /* warm accent for the fab side of the calendar */
  --ok:#2e7d4f;
  --oktext:#7fd4a3;
  --danger:#8a3a3a;
  --display:"Barlow Condensed","Bahnschrift","Arial Narrow",sans-serif;
  --body:"Barlow","Segoe UI",system-ui,sans-serif;
}

*{box-sizing:border-box; margin:0; padding:0}
[hidden]{display:none !important}  /* class rules like .btn{display:inline-block} must not override the hidden attribute */
body{background:var(--ink); color:var(--white); font-family:var(--body); font-size:15px; line-height:1.5}
a{color:var(--sky)}
button{font-family:var(--body)}
.container{max-width:1400px; margin:0 auto; padding:0 24px}

/* ---------- header (mirrors the site) ---------- */
header.site{position:sticky; top:0; z-index:50; background:rgba(16,21,27,.92); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
header.site .container{display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:14px; padding-bottom:14px}
.brand .nm{white-space:nowrap}
.brand{text-decoration:none; color:var(--white)}
.brand .nm{font-family:var(--display); font-size:22px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; line-height:1}
.brand .tag{display:block; font-family:var(--body); font-size:10px; letter-spacing:.28em; color:var(--steel); font-weight:400; margin-top:3px}
nav.main ul{display:flex; align-items:center; gap:26px; list-style:none}
nav.main a{white-space:nowrap; color:var(--steel); text-decoration:none; font-size:13px; letter-spacing:.14em; text-transform:uppercase; font-weight:500}
nav.main a:hover, nav.main a[aria-current="page"]{color:var(--white)}
nav.main a.cta{color:var(--white); border:1px solid var(--brand); padding:10px 20px; transition:background .15s}
nav.main a.cta:hover{background:var(--brand)}

.hright{display:flex; align-items:center; gap:20px; flex-wrap:wrap; justify-content:flex-end; row-gap:10px}
.useracct, .useracct a, .role-badge, .useracct #me-name{white-space:nowrap}
.useracct{display:flex; align-items:center; gap:14px}
.useracct #me-name{color:var(--white); font-size:13px; letter-spacing:.1em; text-transform:uppercase; font-weight:600}
.useracct a{color:var(--steel); text-decoration:none; font-size:12px; letter-spacing:.14em; text-transform:uppercase}
.useracct a:hover{color:var(--white)}
.role-badge{font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); border:1px solid var(--line); padding:3px 8px}

main{padding:34px 0 80px}
.view h2, .list-title{font-family:var(--display); font-size:30px; text-transform:uppercase; font-weight:700; line-height:1}

/* ---------- buttons ---------- */
.btn{display:inline-block; padding:15px 28px; font-size:13px; letter-spacing:.16em; text-transform:uppercase; text-decoration:none; font-weight:600; cursor:pointer; border:none}
.btn.sm{padding:10px 18px; font-size:12px}
.btn.primary{background:var(--brand); color:#fff; transition:background .15s}
.btn.primary:hover{background:#0086dd}
.btn.ghost{background:none; border:1px solid #3a4a5a; color:var(--white); transition:border-color .15s}
.btn.ghost:hover{border-color:var(--sky)}
.btn.danger{background:none; border:1px solid var(--danger); color:#e8a0a0}
.btn.danger:hover{background:var(--danger); color:#fff}

/* ---------- calendar toolbar ---------- */
.cal-toolbar{display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap; margin-bottom:20px}
.cal-nav{display:flex; align-items:center; gap:10px}
.cal-nav h2{margin-left:12px; min-width:230px}
.navbtn{background:var(--panel); border:1px solid var(--line); color:var(--white); padding:9px 14px; cursor:pointer; font-size:13px; letter-spacing:.08em; text-transform:uppercase}
.navbtn:hover{border-color:var(--sky)}
.cal-right{display:flex; align-items:center; gap:16px}
.seg{display:flex; border:1px solid var(--line)}
.seg button{background:none; border:none; color:var(--steel); padding:9px 16px; cursor:pointer; font-size:12px; letter-spacing:.12em; text-transform:uppercase}
.seg button.on{background:var(--brand); color:#fff}
.legend{font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--steel); display:inline-flex; align-items:center; gap:6px}
.dot{width:9px; height:9px; display:inline-block}
.dot.kill{background:var(--sky)}
.dot.fab{background:var(--fab)}
.cal-hint{margin-top:14px; font-size:12px; color:#5c6b7a; letter-spacing:.04em}

/* ---------- calendar grid ---------- */
.cal-head{display:grid; grid-template-columns:repeat(7,1fr); border:1px solid var(--line); border-bottom:none; background:#0b121a}
.cal-head div{padding:8px 10px; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--steel); border-right:1px solid var(--line)}
.cal-head div:last-child{border-right:none}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:1px; background:var(--line); border:1px solid var(--line)}
.day{background:var(--panel); min-height:130px; display:flex; flex-direction:column}
.cal-grid.week .day{min-height:420px}
.day.dim{background:#101923}
.day.today .dnum{color:var(--sky); font-weight:700}
.dnum{font-family:var(--display); font-size:15px; padding:6px 9px 2px; color:var(--steel); letter-spacing:.06em}
.daycols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1px; flex:1; background:var(--line)}
.dayside{background:var(--panel); padding:3px 3px 12px 6px; display:flex; flex-direction:column; gap:4px; min-height:70px; min-width:0}
.dayside.drag-over{outline:2px dashed var(--sky); outline-offset:-2px}
.dayside.fabside.drag-over{outline-color:var(--fab)}
.dayside{cursor:pointer}
.noside{flex:1; display:flex; align-items:center; justify-content:center; font-size:9px; letter-spacing:.24em; text-transform:uppercase; color:#33414f; user-select:none; pointer-events:auto}
.cal-grid.week .noside{font-size:11px}

/* chips */
.chip{position:relative; border-left:3px solid var(--sky); background:#0e1822; padding:4px 15px 4px 7px; font-size:11px; line-height:1.3; cursor:grab; user-select:none}
.chipx{position:absolute; top:1px; right:1px; background:none; border:none; color:#41505f; cursor:pointer; font-size:13px; line-height:1; padding:2px 4px}
.chip:hover .chipx{color:var(--steel)}
.chipx:hover{color:#e8a0a0 !important}
.chip:active{cursor:grabbing}
.chip .t{font-weight:600; color:var(--white); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip .s{color:var(--steel); display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chip.fabchip{border-left-color:var(--fab)}
.chip.done{opacity:.45; border-left-color:var(--ok)}
.chip .flag{color:var(--sky); font-weight:600}
.fabchip .flag{color:var(--fab)}
.cal-grid.week .chip{font-size:13px; padding:7px 9px}

/* ---------- batch list ---------- */
.bcard{border:1px solid var(--line); background:var(--panel); margin-bottom:14px}
.bcard-head{display:grid; grid-template-columns:170px 1fr 1fr 130px 170px; gap:14px; align-items:center; padding:16px 22px; cursor:pointer}
.bcard-head:hover{background:#182636}
.bnum{font-family:var(--display); font-size:24px; font-weight:700; letter-spacing:.04em}
.bnum small{display:block; font-family:var(--body); font-size:10px; letter-spacing:.2em; color:var(--steel); text-transform:uppercase; font-weight:400}
.bmeta{font-size:13px; color:#b9c6d3}
.bmeta b{color:var(--white); font-weight:600}
.bmeta .lbl{display:block; font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel)}
.btags{display:flex; gap:6px; flex-wrap:wrap}
.tagchip{font-size:10px; letter-spacing:.14em; text-transform:uppercase; border:1px solid var(--line); color:var(--steel); padding:3px 8px}
.tagchip.halal{border-color:var(--ok); color:var(--oktext)}
.tagchip.grades{border-color:var(--sky); color:var(--sky)}
.progress{text-align:right}
.pbar{height:4px; background:#0e1822; margin-top:7px}
.pbar i{display:block; height:100%; background:var(--brand)}
.pbar.full i{background:var(--ok)}
.ptext{font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--steel)}
.ptext.complete{color:var(--oktext)}

.bcard-body{border-top:1px solid var(--line); padding:20px 22px; display:grid; grid-template-columns:1.2fr 1fr; gap:28px}
.tasklist{list-style:none}
.tasklist li{display:flex; align-items:center; gap:11px; padding:8px 0; border-bottom:1px solid #1b2836}
.tasklist li:last-child{border-bottom:none}
.tasklist input[type=checkbox]{width:17px; height:17px; accent-color:var(--brand); cursor:pointer}
.tasklist .tl{flex:1; font-size:14px}
.tasklist .tdone{color:var(--steel); text-decoration:line-through}
.tasklist .tdate{font-size:11px; color:#5c6b7a}
.tasklist .tx{background:none; border:none; color:#5c6b7a; cursor:pointer; font-size:14px; padding:2px 6px}
.tasklist .tx:hover{color:#e8a0a0}
.addship{display:flex; gap:8px; margin-top:12px}
.addship input{flex:1}
.binfo h4, .btasks h4{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--sky); margin-bottom:10px; font-weight:600}
.binfo dl{font-size:13px}
.binfo dt{font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-top:10px}
.binfo dd{color:#c3cfda}
.binfo .note{white-space:pre-wrap; border-left:2px solid var(--line); padding-left:10px}
.rowactions{margin-top:16px; display:flex; gap:10px}
.empty{border:1px dashed var(--line); padding:44px; text-align:center; color:var(--steel); font-size:14px; letter-spacing:.06em}

/* ---------- dialogs / forms ---------- */
dialog{background:var(--panel); color:var(--white); border:1px solid var(--line); padding:0; max-width:640px; width:calc(100vw - 40px); margin:auto}
dialog::backdrop{background:rgba(5,9,14,.72); backdrop-filter:blur(3px)}
.dlgform{padding:30px 32px}
.dlgform h3{font-family:var(--display); font-size:26px; text-transform:uppercase; font-weight:600; margin-bottom:20px}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:0 18px; margin-bottom:6px}
.grid2 .span2{grid-column:1 / -1}
.field{margin-bottom:16px}
.field label, .dlgform label{display:block; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel); margin-bottom:6px}
.lbl-note{letter-spacing:.02em; text-transform:none; color:#5c6b7a}
input, textarea, select{width:100%; background:var(--ink); border:1px solid var(--line); color:var(--white); padding:11px 13px; font-family:var(--body); font-size:15px}
input:focus, textarea:focus{outline:2px solid var(--brand); outline-offset:0; border-color:var(--brand)}
input[type=checkbox]{width:auto}
.check{display:flex !important; align-items:center; gap:9px; font-size:13px !important; letter-spacing:.1em !important; color:var(--white) !important; margin-bottom:14px; cursor:pointer}
.check input{accent-color:var(--brand); width:16px; height:16px}
.chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:9px}
.chips label{display:inline-flex; align-items:center; gap:0; margin:0; cursor:pointer}
.chips input{position:absolute; opacity:0; pointer-events:none}
.chips span{border:1px solid var(--line); color:var(--steel); font-size:11px; letter-spacing:.12em; text-transform:uppercase; padding:6px 11px; transition:all .1s}
.chips input:checked + span{border-color:var(--brand); background:var(--brand); color:#fff}
.dlg-actions{display:flex; justify-content:flex-end; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line)}
.dlg-actions .danger{margin-right:auto}

/* ---------- customers (rolodex) ---------- */
.custcard{border:1px solid var(--line); background:var(--panel); margin-bottom:10px}
.custrow{display:flex; align-items:center; justify-content:space-between; gap:14px; padding:16px 22px; cursor:pointer}
.custrow:hover{background:#182636}
.custrow .nm{font-family:var(--display); font-size:22px; text-transform:uppercase; font-weight:600; letter-spacing:.03em}
.custrow .chev{color:var(--steel); font-size:14px}
.custbody{border-top:1px solid var(--line); padding:20px 22px; display:grid; grid-template-columns:1fr 1.2fr; gap:28px}
.contactlist{list-style:none}
.contactlist li{padding:8px 0; border-bottom:1px solid #1b2836; font-size:14px}
.contactlist li:last-child{border-bottom:none}
.contactlist .crole{color:var(--sky); font-size:11px; letter-spacing:.14em; text-transform:uppercase; margin-left:8px}
.contactlist .creach{display:block; color:var(--steel); font-size:13px}
.nocontacts{color:#c9873f; font-size:13px}
.custbody button[disabled]{opacity:.35; cursor:not-allowed}

/* contact rows in customer modal */
.contact-block{display:flex; gap:8px; margin-bottom:10px; align-items:stretch}
.contact-block .cgrid{flex:1; display:grid; grid-template-columns:1fr 1fr; gap:8px}
.contact-block .rm{background:none; border:1px solid var(--line); color:var(--steel); cursor:pointer; padding:0 13px}
.contact-block .rm:hover{border-color:var(--danger); color:#e8a0a0}

/* production modal */
.picker{max-height:190px; overflow-y:auto; border:1px solid var(--line); background:var(--ink)}
.picker label.locked{opacity:.3; pointer-events:none}
.picker .pickrow{display:flex; align-items:center; gap:10px; padding:11px 13px; border-bottom:1px solid #1b2836; cursor:pointer; font-size:13px}
.picker .pickrow:last-child{border-bottom:none}
.picker .pickrow:hover{background:#182636}
.sched-sub{color:var(--steel); font-size:13px; margin:-10px 0 14px}
.picker label{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid #1b2836; margin:0; cursor:pointer; font-size:13px !important; letter-spacing:.02em !important; text-transform:none !important; color:var(--white) !important}
.picker label:last-child{border-bottom:none}
.picker input{accent-color:var(--fab); width:15px; height:15px}
.picker .ph{color:var(--steel); margin-left:auto; font-variant-numeric:tabular-nums}
.picker .pempty{padding:14px; color:var(--steel); font-size:13px}
.prod-total{font-family:var(--display); font-size:21px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); background:var(--ink); padding:12px 16px; margin-bottom:18px}
.prod-total em{font-style:normal; color:var(--fab)}
.prod-total div + div{margin-top:4px; padding-top:6px; border-top:1px solid var(--line)}
.dayrow{display:flex; gap:8px; margin-bottom:8px; align-items:center}
.dayrow input[type=date]{flex:1.4}
.dayrow input[type=number]{flex:1}
.dayrow .rm{background:none; border:1px solid var(--line); color:var(--steel); cursor:pointer; padding:9px 12px}
.dayrow .rm:hover{border-color:var(--danger); color:#e8a0a0}

/* ---------- users ---------- */
.userrow-right{display:flex; align-items:center; gap:12px}
.userrow-right .lastlogin{color:var(--steel); font-size:12px; font-variant-numeric:tabular-nums}
.tagchip.inactive{border-color:var(--danger); color:#e8a0a0}
.custrow .uname-sub{display:block; font-family:var(--body); font-size:11px; letter-spacing:.08em; text-transform:none; color:var(--steel); font-weight:400; margin-top:2px}
.pwrow{display:flex; gap:8px}
.pwrow input{flex:1}

/* ---------- auth (sign in / first-run setup) ---------- */
.auth-main{display:flex; justify-content:center; padding-top:70px}
.auth-wrap{width:100%; max-width:380px}
.auth-card{background:var(--panel); border:1px solid var(--line)}
.auth-err{color:#e8a0a0; font-size:13px; letter-spacing:.02em; margin:-8px 0 16px}
.auth-card .dlg-actions{border-top:none; padding-top:4px; margin-top:8px}
.auth-card .dlg-actions .btn{width:100%; text-align:center}

/* ---------- header search ---------- */
.hsearch{display:flex}
#search-q{width:180px; background:var(--panel); border:1px solid var(--line); color:var(--white);
  padding:9px 12px; font-size:12px; letter-spacing:.12em}
#search-q::placeholder{color:var(--steel); text-transform:uppercase; letter-spacing:.18em; font-size:11px}
#search-q:focus{outline:none; border-color:var(--sky)}
#search-q::-webkit-search-cancel-button{filter:grayscale(1) brightness(1.8)}

/* ---------- attendance strip on the calendar ---------- */
/* the date number + strip form one shaded header band so announcements break cleanly from kill/fab */
.att-strip{display:flex; flex-wrap:wrap; align-items:center; gap:3px; padding:3px 6px 6px;
  background:rgba(143,165,186,.07); border-bottom:1px solid var(--line)}
.day:has(.att-strip) .dnum{background:rgba(143,165,186,.07); padding-bottom:3px}
.att-chip{max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--body); font-size:10px; line-height:1.5; letter-spacing:.12em; text-transform:uppercase;
  padding:1px 6px; background:none; border:1px solid transparent; border-left-width:3px;
  color:var(--steel); cursor:pointer}
.att-chip.k-out{background:rgba(138,58,58,.22); color:#e8a0a0}
.att-chip.k-partial{border-color:var(--line); border-left-color:transparent; color:var(--steel)}
.att-chip.k-event{border-color:var(--sky); border-left-color:transparent; color:var(--sky)}
.att-chip.d-kill{border-left-color:var(--brand)}
.att-chip.d-fab{border-left-color:var(--fab)}
.att-chip.d-shipping{border-left-color:var(--ok)}
.att-chip.d-admin{border-left-color:var(--steel)}
.att-chip:hover{color:var(--white)}
.att-chip.att-more{border-color:var(--line); border-left-color:transparent; color:var(--steel)}
.att-add{background:none; border:none; color:#41505f; cursor:pointer; font-family:var(--body);
  font-size:14px; line-height:1; padding:1px 6px}
.att-add:hover{color:var(--sky)}
.cal-grid.week .att-chip{font-size:11px; padding:2px 8px}
.cal-grid.week .att-strip{padding:3px 8px 7px}

/* a search result jump highlights its day for a moment */
.day.hit{outline:1px solid var(--sky); outline-offset:-1px; animation:dayhit 2s ease-out 1}
@keyframes dayhit{
  0%,55%{outline-color:var(--sky)}
  75%{outline-color:rgba(63,169,232,.25)}
  100%{outline-color:rgba(63,169,232,0)}
}

/* ---------- search results ---------- */
.srch-group{margin-bottom:22px}
.srch-day{display:flex; align-items:center; gap:14px; width:100%; text-align:left; background:#0b121a;
  border:1px solid var(--line); color:var(--white); font-family:var(--display); font-size:19px;
  letter-spacing:.14em; text-transform:uppercase; padding:10px 16px}
button.srch-day{cursor:pointer; transition:border-color .15s}
button.srch-day:hover{border-color:var(--sky)}
.srch-day.static{color:var(--steel)}
.srch-go{margin-left:auto; font-family:var(--body); font-size:10px; letter-spacing:.2em; color:var(--steel)}
button.srch-day:hover .srch-go{color:var(--sky)}
.srch-items{border:1px solid var(--line); border-top:none; background:var(--panel)}
.srch-row{display:grid; grid-template-columns:104px minmax(0,1fr) minmax(0,1.3fr); gap:14px; align-items:baseline;
  width:100%; text-align:left; background:none; border:none; border-bottom:1px solid #1b2836;
  color:var(--white); padding:12px 16px; cursor:pointer; font-family:var(--body); font-size:14px}
.srch-row:last-child{border-bottom:none}
.srch-row:hover{background:#182636}
.srch-tag{font-size:10px; letter-spacing:.18em; text-transform:uppercase; font-weight:600}
.srch-tag.t-batch{color:var(--sky)}
.srch-tag.t-prod{color:var(--fab)}
.srch-tag.t-att{color:var(--steel)}
.srch-title{font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.srch-snip{color:var(--steel); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- audit trail ---------- */
.audit-wrap{border-top:1px solid var(--line); margin-top:18px; padding-top:12px}
.audit-line{display:flex; align-items:baseline; gap:14px}
.audit-meta{color:var(--steel); font-size:11px; letter-spacing:.06em}
.linkbtn{margin-left:auto; background:none; border:none; color:var(--sky); cursor:pointer;
  font-family:var(--body); font-size:11px; letter-spacing:.16em; text-transform:uppercase; padding:2px 0; white-space:nowrap}
.linkbtn:hover{color:var(--white)}
.audit-list{margin-top:10px; border:1px solid var(--line); background:var(--ink); max-height:180px; overflow-y:auto}
.audit-row{display:grid; grid-template-columns:120px 130px minmax(0,1fr); gap:10px; padding:8px 12px;
  border-bottom:1px solid #1b2836; font-size:12px}
.audit-row:last-child{border-bottom:none}
.audit-row .aw{color:var(--steel); font-variant-numeric:tabular-nums}
.audit-row .au{color:var(--white)}
.audit-row .as{color:#b9c6d3}
.audit-row.muted{display:block; color:var(--steel)}

/* type picker inside the attendance dialog */
.seg.segfull{width:100%}
.seg.segfull button{flex:1; padding:12px 4px; white-space:nowrap; letter-spacing:.08em}

/* ---------- admin sample data ---------- */
.admin-tools{border:1px solid var(--line); background:var(--panel); padding:22px 24px; margin-top:26px}
.admin-tools h3{font-family:var(--display); font-size:21px; text-transform:uppercase; font-weight:600; letter-spacing:.08em; margin-bottom:8px}
.admin-tools p{color:var(--steel); font-size:13px; max-width:660px; margin-bottom:16px}
.admin-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.admin-row input[type=month]{width:auto; padding:9px 12px; font-size:13px}
.admin-mlabel{margin:0; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--steel)}

.custrow-right{display:flex; align-items:center; gap:12px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  .bcard-head{grid-template-columns:1fr 1fr; row-gap:10px}
  .bcard-body{grid-template-columns:1fr}
  .custbody{grid-template-columns:1fr}
  .contact-block .cgrid{grid-template-columns:1fr}
  .cal-grid .sidelabel{display:none}
  .grid2{grid-template-columns:1fr}
  .srch-row{grid-template-columns:1fr; gap:4px}
  .audit-row{grid-template-columns:1fr; gap:2px}
}

/* header collapses cleanly on narrow screens: nav on one row, account row beneath */
@media (max-width:1100px){
  header.site .container{flex-wrap:wrap}
  .hright{width:100%; justify-content:space-between}
  nav.main ul{gap:18px}
  nav.main a.cta{padding:8px 14px}
}
@media (max-width:640px){
  nav.main ul{flex-wrap:wrap; gap:12px 16px}
  .hright{gap:14px}
  .hsearch{width:100%}
  #search-q{width:100%}
}