/* OPERATIONS (v1.0): Charts · Guides · Dough · Sheetouts. Same look as HCM ▸ Resources: charcoal lines, yellow accent rules,
   white backgrounds. No tinted backgrounds behind text (hover included); status = green / yellow / red text only; no blue.
   Self-contained so it also works on my-schedule.html (which doesn't load index.html's .panel / table styles). */
.ops { color: var(--hh-charcoal, #121212); font-family: var(--font-body, Montserrat, Arial, sans-serif); }
.ops-subnav { display: flex; gap: 1.2rem; border-bottom: 2px solid var(--hh-charcoal, #121212); margin: 0 0 .8rem; overflow-x: auto; }
.ops-subnav button { background: transparent; border: 0; border-bottom: 4px solid transparent; padding: .35rem .1rem; font-family: var(--font-display, "Bebas Neue", Impact, sans-serif);
  font-size: 1.15rem; letter-spacing: .05em; color: var(--hh-charcoal, #121212); cursor: pointer; box-shadow: none; white-space: nowrap; }
.ops-subnav button.on { border-bottom-color: var(--hh-yellow, #FFF200); }
.ops-subnav button:hover { background: transparent; transform: none; }
.ops-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; margin-bottom: .6rem; }
.ops-title { font-family: var(--font-display, "Bebas Neue", Impact, sans-serif); font-size: 1.7rem; letter-spacing: .04em; margin: 0; border-bottom: 4px solid var(--hh-yellow, #FFF200); line-height: 1.05; font-weight: 400; }
.ops-head p { margin: 0; font-size: .78rem; }
.ops-head .ops-add { margin-left: auto; }
.ops-lead { font-size: .82rem; margin: 0 0 .7rem; }
.ops-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(26rem, 1fr)); gap: 1rem; }
.ops-card { background: #fff; border: 2px solid var(--hh-charcoal, #121212); border-radius: 12px; padding: .8rem 1rem 1rem; min-width: 0; }
.ops-sh { font-family: var(--font-display, "Bebas Neue", Impact, sans-serif); font-size: 1.35rem; letter-spacing: .04em; font-weight: 400; margin: 0 0 .4rem; padding-bottom: .15rem; border-bottom: 2px solid var(--hh-charcoal, #121212); }
.ops-sh .hcs-muted { font-family: var(--font-body, Montserrat, Arial, sans-serif); font-size: .74rem; letter-spacing: 0; margin-left: .3rem; }
.ops-tbl { overflow-x: auto; }
.ops table { width: 100%; border-collapse: collapse; font-size: .85rem; background: #fff; }
.ops th, .ops td { text-align: left; padding: .45rem .45rem; border-bottom: 1px solid rgba(18, 18, 18, .14); background: transparent; }
.ops th { color: var(--hh-muted, #5a5a5a); font-weight: 700; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--hh-charcoal, #121212); }
.ops th.num, .ops td.num { text-align: right; font-variant-numeric: tabular-nums; }
.ops td.ops-item { font-weight: 800; white-space: nowrap; }
.ops tr:hover td { background: transparent; box-shadow: inset 0 -1.5px 0 rgba(18, 18, 18, .4); }
.ops-foot { font-size: .7rem; color: var(--hh-muted, #5a5a5a); margin: .5rem 0 0; }
.ops-na { color: #8a0018; font-style: italic; font-size: .85rem; margin: .3rem 0; }
.ops-empty { border: 2px dashed rgba(18, 18, 18, .35); border-radius: 12px; padding: 1.5rem; text-align: center; color: var(--hh-muted, #5a5a5a); background: transparent; display: flex; flex-direction: column; gap: .35rem; font-size: .85rem; }
.ops-empty strong { color: var(--hh-charcoal, #121212); font-family: var(--font-display, "Bebas Neue", Impact, sans-serif); font-size: 1.35rem; letter-spacing: .04em; font-weight: 400; text-transform: uppercase; }
.ops-files { list-style: none; margin: 0; padding: 0; }
.ops-file { display: flex; align-items: center; justify-content: space-between; gap: .4rem 1rem; padding: .45rem .1rem; border-bottom: 1px solid rgba(18, 18, 18, .14); }
.ops-ftxt { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.ops-ftitle { font-weight: 800; font-size: .88rem; overflow-wrap: anywhere; }
.ops-fmeta, .ops-fdesc { font-size: .74rem; }
.ops-fact { display: flex; gap: .35rem; flex-wrap: wrap; flex: 0 0 auto; }
.ops a.ops-btn { text-decoration: none; display: inline-flex; align-items: center; }
.ops .ops-btn { font-size: .72rem; padding: .3rem .7rem; text-transform: uppercase; letter-spacing: .04em; background: #fff; }
.ops .ops-btn:hover { background: #fff; transform: none; }
.ops-formwrap { position: fixed; inset: 0; z-index: 70; display: flex; align-items: center; justify-content: center; background: transparent; padding: 1rem; }
.ops-form { background: #fff; border: 2px solid var(--hh-charcoal, #121212); border-radius: 12px; padding: .8rem 1rem 1rem; width: min(34rem, 100%); max-height: calc(100vh - 2rem); overflow-y: auto;
  box-sizing: border-box; box-shadow: 0 10px 40px rgba(0, 0, 0, .28); display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .7rem; font-size: .8rem; }
.ops-read { width: min(52rem, 100%); display: block; }
.ops-fhead { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: .6rem; border-bottom: 3px solid var(--hh-yellow, #FFF200); padding-bottom: .35rem; margin-bottom: .2rem; }
.ops-fhead h3 { font-family: var(--font-display, "Bebas Neue", Impact, sans-serif); font-size: 1.35rem; letter-spacing: .03em; font-weight: 400; margin: 0; }
.ops-form label { display: flex; flex-direction: column; gap: .15rem; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--hh-muted, #5a5a5a); }
.ops-form label .hcs-muted { text-transform: none; letter-spacing: 0; font-weight: 500; }
.ops-form input[type=text], .ops-form select, .ops-form input[type=file] { font: inherit; font-size: .84rem; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--hh-charcoal, #121212);
  border: 1.5px solid var(--hh-charcoal, #121212); border-radius: 6px; padding: .32rem .45rem; background: #fff; width: 100%; box-sizing: border-box; min-width: 0; }
.ops-form .ops-wide { grid-column: 1 / -1; }
.ops-actions { display: flex; gap: .4rem; }
.ops-text { white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .8rem; line-height: 1.45; margin: .5rem 0 0; background: #fff; }
@media (max-width: 600px) {
  .ops-grid { grid-template-columns: 1fr; }
  .ops-card { padding: .6rem .6rem .8rem; }
  .ops th, .ops td { padding: .4rem .18rem; font-size: .78rem; }
  .ops th { letter-spacing: 0; font-size: .64rem; }
  .ops .ops-unit { display: none; }      /* "each" (DD / 4C DD) drops on phones so all 7 days fit at 375px */
  .ops-subnav button { min-height: 44px; font-size: 1.2rem; }
  .ops-head .ops-add { margin-left: 0; width: 100%; justify-content: center; }
  .ops-file { flex-direction: column; align-items: stretch; border: 1.5px solid var(--hh-charcoal, #121212); border-radius: 10px; padding: .6rem .7rem; margin-bottom: .5rem; }
  .ops-fact { display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
  .ops .ops-btn { min-height: 44px; font-size: .86rem; justify-content: center; border-radius: 10px; }
  .ops-formwrap { align-items: flex-end; padding: 0; }
  .ops-form { width: 100%; max-height: 92vh; border-radius: 16px 16px 0 0; border-width: 4px 0 0; grid-template-columns: 1fr; padding-bottom: 1.5rem; }
  .ops-form input[type=text], .ops-form select, .ops-form input[type=file] { min-height: 44px; font-size: 16px; }
}
/* v1.1 Resources-in-OPS: the Resources library (hcm-resources.js) renders inside OPERATIONS ▸ Resources; the tab title above it
   replaces its own "Resources" heading. Same rules: white backgrounds, charcoal lines, status in text colour only. */
.ops-res .hcr { margin-top: 0; }
.ops-res .hcr-head { margin-top: 0; }