/* Park It Uniform Inventory */
* { box-sizing: border-box; }
body { margin: 0; background: #ECEAE4; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #0B0B0B; }
a { color: #7A7100; } a:hover { color: #0B0B0B; }
input, select, textarea, button { font-family: inherit; font-size: 13px; }
input:focus, select:focus, textarea:focus { outline: 2px solid #FAEE00; outline-offset: -1px; }
::placeholder { color: #A8A498; }
code { background: #F1EFE8; padding: 1px 5px; font-size: 11px; }

/* auth pages */
.dark-page { background: #0B0B0B; }
.auth-wrap { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 20px; }
.auth-title { text-align: center; font-size: 13px; color: #F4F4F2; letter-spacing: 1px; }
.auth-title span { display: block; font-size: 9.5px; letter-spacing: 3px; color: #5E5E5E; text-transform: uppercase; margin-top: 6px; }
.auth-card { display: flex; flex-direction: column; gap: 12px; width: 300px; max-width: 92vw; }
.auth-card label { font-size: 9px; letter-spacing: 1.5px; color: #5E5E5E; text-transform: uppercase; display: flex; flex-direction: column; gap: 4px; }
.auth-card input { padding: 13px 14px; background: #151515; border: 1px solid #2A2A2A; color: #F4F4F2; font-size: 14px; width: 100%; }
.auth-card .check { flex-direction: row; align-items: center; gap: 8px; text-transform: none; font-size: 11.5px; letter-spacing: 0.3px; color: #9C9C9C; }
.code-input { text-align: center; font-size: 28px !important; letter-spacing: 14px; color: #FAEE00 !important; font-family: "SF Mono", Menlo, Consolas, monospace; }
.err-msg { color: #FF8A80; font-size: 11.5px; margin: 0; text-align: center; }
.ok-msg { color: #9CCC65; font-size: 12px; margin: 0; text-align: center; }
.dim-msg { color: #9C9C9C; font-size: 12px; margin: 0; text-align: center; line-height: 1.6; }
.foot-note { font-size: 10px; color: #5E5E5E; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; line-height: 2; }
.foot-note a { color: #9C9C9C; }

/* buttons */
.btn, .btn-y, button.btn, button.btn-y { display: inline-block; text-align: center; padding: 10px 14px; font-size: 10px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; cursor: pointer; text-decoration: none; border: 1px solid #B9B5A8; color: #3A382F; background: #FFFFFF; }
.btn:hover { border-color: #0B0B0B; color: #0B0B0B; }
.btn-y { background: #FAEE00; border-color: #0B0B0B; color: #0B0B0B; }
.btn-y:hover { background: #FFF64D; }
.btn.sm { padding: 7px 10px; font-size: 9px; }
.btn.sm.x { padding: 7px 9px; font-size: 12px; line-height: 9px; }
.btn.sm.x:hover { background: #FBEAE8; border-color: #B3261E; color: #B3261E; }
.btn.sm:hover { background: #FAEE00; border-color: #0B0B0B; }
.btn.danger:hover { border-color: #B3261E; color: #B3261E; background: #FBEAE8; }
.block { display: block; width: 100%; }
button:disabled { background: #F1EFE8 !important; border-color: #C9C4B5 !important; color: #A8A498 !important; cursor: default; }

/* top bar */
.topbar { background: #0B0B0B; display: flex; align-items: center; gap: 10px; padding: 10px 16px; position: sticky; top: 0; z-index: 40; flex-wrap: wrap; }
.topbar .logo { height: 28px; }
.topbar .divider { width: 1px; height: 26px; background: #2A2A2A; }
.topbar .brand { font-size: 12px; color: #F4F4F2; letter-spacing: 0.5px; font-weight: 500; }
.topbar .brand span { display: block; font-size: 9px; letter-spacing: 2.5px; color: #5E5E5E; text-transform: uppercase; margin-top: 2px; }
.topbar nav { display: flex; flex-wrap: wrap; }
.topbar nav a { padding: 11px 12px 9px; font-size: 10.5px; letter-spacing: 2px; color: #9C9C9C; border-bottom: 2px solid transparent; text-transform: uppercase; text-decoration: none; }
.topbar nav a:hover { color: #FAEE00; }
.topbar nav a.on { color: #FAEE00; border-color: #FAEE00; }
.userchip { display: flex; align-items: center; gap: 8px; border: 1px solid #2A2A2A; padding: 8px 12px; font-size: 9.5px; letter-spacing: 1.5px; color: #9C9C9C; text-transform: uppercase; }
.userchip i { width: 8px; height: 8px; border-radius: 50%; background: #4CAF50; }
.signout { border: 1px solid #2A2A2A; color: #9C9C9C; font-size: 9.5px; letter-spacing: 2px; padding: 9px 12px; text-transform: uppercase; text-decoration: none; }
.signout:hover { border-color: #FAEE00; color: #F4F4F2; }
.spacer { flex: 1; }

/* layout */
.wrap { max-width: 1200px; margin: 0 auto; padding: 14px 16px 60px; }
.wrap.narrow { max-width: 760px; }
.wrap.narrow-wide { max-width: 860px; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding-bottom: 0 !important; }
.stat { background: #FFFFFF; border: 1px solid #C9C4B5; padding: 10px 14px; }
.stat span { font-size: 9px; letter-spacing: 2px; color: #6E6B63; text-transform: uppercase; }
.stat b { display: block; font-size: 24px; font-weight: 300; margin-top: 2px; }
.flash { max-width: 1200px; margin: 12px auto 0; padding: 10px 14px; font-size: 12px; border: 1px solid; }
.flash.ok { background: #FBFAF4; border-color: #C9C4B5; color: #3A382F; }
.flash.bad { background: #FBEAE8; border-color: #B3261E; color: #B3261E; }
.card { background: #FFFFFF; border: 1px solid #C9C4B5; }
.pad-card { padding: 16px 18px; }
.hint { font-size: 10px; color: #8A867B; letter-spacing: 0.5px; line-height: 1.6; }
.side-title { font-size: 10px; letter-spacing: 2.5px; color: #6E6B63; text-transform: uppercase; margin-bottom: 10px; }
.dim-inline { letter-spacing: 0.5px; text-transform: none; color: #8A867B; font-size: 10.5px; margin-left: 8px; }

/* toolbar + chips */
.toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { padding: 10px 13px; font-size: 11px; letter-spacing: 1.2px; font-weight: 600; text-transform: uppercase; background: #FFFFFF; color: #0B0B0B; border: 1px solid #0B0B0B; text-decoration: none; }
.chip.on { background: #0B0B0B; color: #FAEE00; }

/* matrix tables */
.table-card { margin-bottom: 12px; }
.scroll { overflow-x: auto; }
.band-head { display: flex; align-items: center; gap: 10px; background: #F1EFE8; border-bottom: 1px solid #C9C4B5; padding: 8px 12px; }
.band-head b { font-size: 9.5px; letter-spacing: 2px; text-transform: uppercase; }
.band-head span { font-size: 10px; color: #8A867B; }
.sw { width: 10px; height: 10px; border: 1px solid #0B0B0B; display: inline-block; }
.sw.clean { background: #FAEE00; } .sw.dirty { background: #B9B5A8; }
table.matrix { border-collapse: collapse; width: 100%; min-width: 680px; }
table.matrix th { background: #0B0B0B; color: #9C9C9C; font-size: 9px; letter-spacing: 1.8px; text-transform: uppercase; padding: 10px 8px; text-align: center; font-weight: 400; }
table.matrix th.left, table.matrix td.left { text-align: left; padding-left: 12px; }
table.matrix th.hl { color: #FAEE00; }
table.matrix td { border-bottom: 1px solid #EEECE3; padding: 11px 8px; font-size: 13px; text-align: center; }
table.matrix td.name { font-size: 12.5px; font-weight: 600; }
table.matrix.clean tr td:first-child { border-left: 3px solid #FAEE00; }
table.matrix.dirty tr td:first-child { border-left: 3px solid #B9B5A8; }
td.cell { cursor: pointer; font-weight: 600; user-select: none; }
td.cell:hover { background: #FAEE00; }
td.cell.zero { color: #B9B5A8; }
table.matrix.clean td.cell.zero { color: #B3261E; font-weight: 700; }
td.cell input { width: 54px; text-align: center; font-weight: 700; border: none; background: #FAEE00; padding: 4px 2px; }
td.tot { font-weight: 700; background: #FBFAF4; }
td.act { padding: 6px 10px; text-align: right; white-space: nowrap; }
td.empty { color: #6E6B63; font-size: 12px; padding: 16px 12px; }
tr.dim td { color: #8A867B; }
tr.live td:first-child { border-left: 3px solid #FAEE00; }
.tag { display: inline-block; font-size: 8.5px; letter-spacing: 1px; padding: 4px 8px; border: 1px solid #B9B5A8; background: #FFFFFF; color: #6E6B63; text-transform: uppercase; font-weight: 700; }
.tag-on { background: #F1EFE8; color: #0B0B0B; border-color: #0B0B0B; }
.tag-y { background: #FAEE00; color: #0B0B0B; border-color: #0B0B0B; }
.inline-form { display: inline; }

/* add lines */
.addline { display: flex; gap: 6px; max-width: 420px; }
.addline.pad { padding: 10px; max-width: none; }
.addline input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px dashed #B9B5A8; font-size: 12.5px; background: #FFFFFF; }
.addline input.short { flex: 0 1 90px; }

/* tally */
.mode-tabs { display: flex; gap: 6px; }
.mode-tabs a { flex: 1; text-align: center; padding: 13px 6px; font-size: 10.5px; letter-spacing: 1.5px; font-weight: 700; text-transform: uppercase; background: #FFFFFF; border: 1px solid #0B0B0B; color: #0B0B0B; text-decoration: none; }
.mode-tabs a.on { background: #FAEE00; }
.tally-card { margin-top: 12px; padding: 14px 16px 16px; }
.tally-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.tally-head b { font-size: 15px; }
.tally-head span { font-size: 10px; color: #8A867B; }
.chips { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.tchip { border: 1px solid #B9B5A8; background: #FBFAF4; width: 80px; }
.tchip .sz { display: block; text-align: center; font-size: 9px; letter-spacing: 1.5px; color: #6E6B63; text-transform: uppercase; padding: 5px 0 0; }
.tchip .n { display: block; text-align: center; font-size: 22px; font-weight: 600; color: #B9B5A8; }
.tchip .n.hot { color: #0B0B0B; }
.tchip .cap { display: block; text-align: center; font-size: 8.5px; color: #A8A498; padding-bottom: 4px; min-height: 11px; }
.tchip .pm { display: flex; border-top: 1px solid #B9B5A8; }
.tchip .pm button { flex: 1; padding: 11px 0; font-size: 16px; font-weight: 700; border: none; background: #FFFFFF; cursor: pointer; }
.tchip .pm .minus { border-right: 1px solid #B9B5A8; }
.tchip .pm .minus:hover { background: #F1EFE8; }
.tchip .pm .plus:hover { background: #FAEE00; }
.commit { margin-top: 12px; padding: 13px 0; }

/* employees split */
.split { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.split aside { flex: 1 1 260px; max-width: 360px; min-width: 240px; }
.split .detail { flex: 999 1 420px; min-width: 0; padding: 18px; }
.emp-row { display: block; padding: 13px 14px; border-left: 3px solid transparent; border-bottom: 1px solid #EEECE3; text-decoration: none; color: #0B0B0B; }
.emp-row:hover { background: #FBFAF4; color: #0B0B0B; }
.emp-row.on { background: #FBFAF4; border-left-color: #FAEE00; }
.emp-row .nm { display: flex; align-items: baseline; gap: 8px; font-size: 13px; font-weight: 600; }
.emp-row .nm i { font-style: normal; font-size: 8.5px; letter-spacing: 1px; padding: 2px 6px; border: 1px solid #B9B5A8; color: #6E6B63; text-transform: uppercase; font-weight: 400; margin-left: auto; }
.emp-row .sub { display: block; font-size: 10.5px; color: #8A867B; margin-top: 4px; }
.csv-btns { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.csv-btns .btn { flex: 1; }
.detail-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.detail-head h2 { font-size: 22px; font-weight: 300; margin: 0; }
.badge { font-size: 9px; letter-spacing: 1.5px; padding: 3px 8px; border: 1px solid #0B0B0B; background: #F1EFE8; text-transform: uppercase; font-weight: 700; }
.rule { height: 3px; background: #FAEE00; margin: 14px 0; }
.issued-tbl { min-width: 540px; }
.issued-tbl td { text-align: left; padding-left: 12px; }
.issued-tbl th { text-align: left; padding-left: 12px; }

/* activity */
.feed-row { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px solid #EEECE3; flex-wrap: wrap; }
.feed-row .when { font-size: 10px; color: #8A867B; width: 84px; flex-shrink: 0; }
.feed-row .txt { font-size: 12.5px; color: #3A382F; flex: 1; min-width: 200px; }

/* settings */
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; align-items: start; }
.span-2 { grid-column: 1 / -1; }
.stack { display: flex; flex-direction: column; gap: 10px; max-width: 320px; margin-top: 12px; }
.stack label, .modal label, .user-add label { display: flex; flex-direction: column; gap: 4px; font-size: 9px; letter-spacing: 1.5px; color: #8A867B; text-transform: uppercase; }
.stack input, .modal input, .modal select, .modal textarea, .user-add input, .user-add select { padding: 10px 12px; border: 1px solid #B9B5A8; font-size: 13px; width: 100%; }
.user-add { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }
.user-add label { flex: 1 1 140px; min-width: 130px; }
.logins-tbl { min-width: 560px; }
.logins-tbl td, .logins-tbl th { text-align: left; padding-left: 12px; }

/* modals */
.modal { display: none; position: fixed; inset: 0; background: rgba(11,11,11,0.55); z-index: 100; align-items: center; justify-content: center; padding: 16px; }
.modal.open { display: flex; }
.modal-box { background: #FFFFFF; border: 1px solid #0B0B0B; box-shadow: 0 20px 60px rgba(0,0,0,0.35); width: 380px; max-width: 94vw; padding: 20px; max-height: 90vh; overflow-y: auto; }
.m-title { font-size: 10px; letter-spacing: 2px; color: #6E6B63; text-transform: uppercase; margin-bottom: 12px; }
.modal form { display: flex; flex-direction: column; gap: 10px; }
.modal form + form { margin-top: 10px; }
.m-btns { display: flex; gap: 8px; }
.m-btns .btn, .m-btns .btn-y { flex: 1; padding: 12px 0; }
.row2 { display: flex; gap: 10px; }
.row2 label { flex: 1; }
.modal textarea { height: 130px; font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; resize: vertical; }

/* footer + legal pages */
.site-foot { text-align: center; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: #8A867B; padding: 18px 16px 26px; }
.site-foot a { color: #8A867B; text-decoration: none; }
.site-foot a:hover { color: #0B0B0B; }
.dark-page .site-foot { position: fixed; bottom: 0; left: 0; right: 0; }
.dark-page .site-foot a { color: #5E5E5E; }
.dark-page .site-foot a:hover { color: #9C9C9C; }
.legal { background: #FFFFFF; border: 1px solid #C9C4B5; margin-top: 24px; padding: 28px 32px 32px; }
.legal h1 { font-size: 24px; font-weight: 300; margin: 0 0 4px; }
.legal h2 { font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #6E6B63; margin: 22px 0 6px; }
.legal p, .legal li { font-size: 13px; line-height: 1.7; color: #3A382F; }
.legal .dim { font-size: 11px; color: #8A867B; }

@media (max-width: 700px) {
  .topbar { gap: 8px; }
  .topbar nav a { padding: 9px 8px 7px; font-size: 9.5px; letter-spacing: 1.2px; }
  .userchip { display: none; }
  .stats { grid-template-columns: repeat(3, 1fr); }
  .stat b { font-size: 19px; }
  .split aside { max-width: none; flex-basis: 100%; }
}