/* BMEssentia HQ (company control panel). Same components as the portal, in the company brand:
   navy #1B2B4B, orange #E87722. Applied while an HQ page is open (.shell.hq-mode). */
.shell.hq-mode {
  --navy-900: #1b2b4b;
  --navy-800: #1b2b4b;
  --navy-700: #26395f;
  --navy-600: #33497a;
  --orange: #e87722;
  --orange-deep: #c9621a;
  --amber: #f4a259;
}
.shell.hq-mode .side { border-right-color: #111c33; }
.shell.hq-mode .nav a.on { background: linear-gradient(90deg, rgba(232,119,34,.22), rgba(232,119,34,.05)); }
.side .hq-tag { margin: .9rem .55rem 0; display: inline-flex; align-self: flex-start; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 750; color: #fff; background: #e87722; border-radius: 999px; padding: .22rem .65rem; }

.badge.sample { background: repeating-linear-gradient(135deg, #fff1df 0 6px, #ffe6c9 6px 12px); color: #8a4a00; border: 1px dashed #e8a35f; }
.badge.p-critical { background: var(--bad); color: #fff; }
.badge.p-high { background: var(--bad-bg); color: var(--bad); }
.badge.p-medium { background: #fff0db; color: var(--orange-deep); }
.badge.p-low { background: #eeebe3; color: var(--ink-2); }
.badge.k-bug { background: #fbe7e5; color: #8f1d17; }
.badge.k-feature { background: #e8eef5; color: var(--navy-700); }
.badge.k-expansion { background: #e6f2ea; color: var(--good); }

.hq-toggle { display: inline-flex; align-items: center; gap: .55rem; font-size: .86rem; font-weight: 650; color: var(--ink-2); background: var(--white); border: 1px solid var(--line-2); border-radius: 999px; padding: .38rem .8rem .38rem .45rem; cursor: pointer; user-select: none; }
.hq-toggle i { width: 2.1rem; height: 1.2rem; border-radius: 99px; background: #d9d2c2; position: relative; transition: background .15s; flex: none; }
.hq-toggle i::after { content: ""; position: absolute; top: .15rem; left: .15rem; width: .9rem; height: .9rem; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.hq-toggle.on i { background: var(--orange); }
.hq-toggle.on i::after { left: 1.05rem; }
.seg-mini { display: inline-flex; background: var(--white); border: 1px solid var(--line-2); border-radius: 999px; padding: .2rem; gap: .15rem; }
.seg-mini button { border: 0; background: none; border-radius: 999px; padding: .3rem .8rem; font-weight: 650; font-size: .85rem; color: var(--ink-2); cursor: pointer; }
.seg-mini button.on { background: var(--navy-800); color: var(--cream); }

.hq-note { display: flex; gap: .7rem; align-items: center; background: #fff7ec; border: 1px dashed #e8a35f; color: #7a4300; border-radius: 12px; padding: .7rem 1rem; font-size: .88rem; margin-bottom: 1.2rem; }
.hq-note b { color: #5e3300; }
.hq-live { display: inline-flex; align-items: center; gap: .45rem; font-size: .78rem; font-weight: 700; color: var(--good); letter-spacing: .04em; }
.hq-live::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--good-bg); }

/* kanban */
.kanban { display: grid; grid-template-columns: repeat(6, minmax(13.5rem, 1fr)); gap: .9rem; overflow-x: auto; padding-bottom: .6rem; align-items: start; }
.kcol { background: #f1ede3; border: 1px solid var(--line); border-radius: var(--r); padding: .7rem; min-height: 12rem; display: grid; gap: .6rem; align-content: start; transition: background .12s, border-color .12s; }
.kcol.over { background: #fff3e3; border-color: var(--orange); }
.kcol h4 { font-family: var(--sans); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); display: flex; justify-content: space-between; padding: .1rem .2rem .3rem; }
.kcol h4 span { color: var(--orange-deep); }
.kcard { background: var(--white); border: 1px solid var(--line); border-radius: 11px; padding: .7rem .8rem; display: grid; gap: .45rem; cursor: pointer; box-shadow: 0 1px 2px rgba(10,29,48,.05); }
.kcard:hover { border-color: var(--orange); }
.kcard[draggable="true"] { cursor: grab; }
.kcard.dragging { opacity: .45; }
.kcard .t { font-weight: 650; color: var(--navy-800); font-size: .9rem; line-height: 1.3; }
.kcard .n { font-family: var(--mono); font-size: .76rem; color: var(--ink-3); }
.kcard .m { display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; font-size: .76rem; color: var(--ink-3); }
.kcard .who { margin-left: auto; width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center; background: var(--navy-700); color: var(--amber); font-size: .66rem; font-weight: 700; }
.area { display: inline-flex; gap: .3rem; align-items: center; font-size: .76rem; color: var(--ink-2); background: #f7f4ec; border-radius: 6px; padding: .1rem .45rem; }

/* ticket detail */
.tgrid { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.3rem; align-items: start; }
.tbody { white-space: pre-wrap; line-height: 1.6; }
.tlog { font-family: var(--mono); font-size: .8rem; background: var(--navy-900); color: #f3e7d3; border-radius: 10px; padding: .9rem 1rem; overflow: auto; max-height: 18rem; white-space: pre; }
.comments { display: grid; gap: .8rem; }
.comment { border-left: 3px solid var(--orange); padding: .2rem 0 .2rem .9rem; }
.comment .h { font-size: .8rem; color: var(--ink-3); }
.side-fields { display: grid; gap: .9rem; }

/* roadmap */
.road { display: grid; gap: .7rem; }
.ritem { display: grid; grid-template-columns: minmax(0, 1fr) 9rem 8rem 8rem; gap: 1rem; align-items: center; padding: .85rem 1rem; border: 1px solid var(--line); border-radius: 12px; background: var(--white); cursor: pointer; }
.ritem:hover { border-color: var(--orange); }
.ritem .t { font-weight: 650; color: var(--navy-800); }
.ritem .d { font-size: .8rem; color: var(--ink-3); }
.kindcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin-bottom: 1.3rem; }
.kindcard { background: var(--white); border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem; border-top: 4px solid var(--kc, var(--orange)); }
.kindcard b { font-family: var(--serif); font-size: 1.6rem; color: var(--navy-800); display: block; }
.kindcard span { font-size: .74rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }

/* permission matrix */
.perm { font-size: .74rem; font-weight: 750; border-radius: 6px; padding: .12rem .45rem; display: inline-block; min-width: 3.4rem; text-align: center; }
.perm.write { background: var(--navy-800); color: var(--cream); }
.perm.read { background: #fff0db; color: var(--orange-deep); }
.perm.none { background: #eeebe3; color: #9a9a9a; }
.permgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: .7rem; }

@media (max-width: 1100px) {
  .tgrid { grid-template-columns: 1fr; }
  .ritem { grid-template-columns: 1fr; gap: .4rem; }
}
.hq-note svg { width: 1.2rem; height: 1.2rem; flex: none; color: var(--orange-deep); }
.area svg { width: .85rem; height: .85rem; flex: none; }
.items .item svg { width: .9rem; height: .9rem; flex: none; }