/* Consultant dashboard - professional layout: a left menu of modules, one module at a time, full width; phone / tablet / desktop */
:root {
  --navy: #1e3a5f; --navy-2: #274b78; --blue: #2563eb; --ink: #111827; --text: #374151; --mut: #6b7280;
  --line: #e5e7eb; --line-2: #d1d5db; --bg: #f5f6f8; --panel: #fff; --ok: #166534; --okbg: #e8f5ec; --err: #b42318; --warn: #92600a; --warnbg: #fdf3dc;
  --side: 248px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; }
[hidden] { display: none !important; }

/* top bar */
.top { position: sticky; top: 0; z-index: 30; height: 60px; display: flex; align-items: center; gap: 12px; padding: 0 20px; background: var(--navy); color: #fff; }
.top img { width: 36px; height: 36px; border-radius: 6px; background: #fff; padding: 3px; object-fit: contain; }
.who { flex: 1; display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.who b { font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .who small { color: #c3d0e2; font-size: 12.5px; }
.navbtn { display: none; width: 40px; height: 40px; padding: 0; border-radius: 6px; background: transparent; border: 1px solid rgba(255, 255, 255, .35); flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.navbtn span { display: block; width: 18px; height: 2px; background: #fff; }

/* layout */
.shell { display: flex; min-height: calc(100vh - 60px); }
.side { width: var(--side); flex: 0 0 var(--side); background: #fff; border-right: 1px solid var(--line); position: sticky; top: 60px; height: calc(100vh - 60px); overflow-y: auto; padding: 14px 0 24px; }
.side nav { display: flex; flex-direction: column; }
.side a { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px 20px; color: var(--text); text-decoration: none; font-weight: 500; border-left: 3px solid transparent; }
.side a:hover { background: #f3f5f8; }
.side a.on { background: #eef3fa; color: var(--navy); border-left-color: var(--navy); font-weight: 600; }
.side .grp { padding: 16px 20px 6px; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; }
.side em { font-style: normal; font-size: 12px; font-weight: 600; min-width: 22px; text-align: center; padding: 1px 7px; border-radius: 4px; background: #e5e9f0; color: var(--navy); } .side em:empty { display: none; }
.scrim { display: none; }
.content { flex: 1; min-width: 0; padding: 28px 32px 56px; }
.views { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
.views > .view, .views > .view.half { grid-column: 1 / -1; }          /* every module opens in the same full width */
.view.card, .card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 22px 24px; }
section.view:not(.card):not(.vw) { display: grid; gap: 20px; }
.view.vw { display: block; padding-top: 12px; }
/* the heading of every module sits above its white card, same size and place as in the Billing pages */
.vhead, .hd.vhead { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: flex-start; min-height: 44px; margin: 0 0 14px; }
.vhead h2, .hd.vhead h2 { margin: 0; line-height: 44px; font-size: 18px; font-weight: 600; color: #111827; }
.vhead > :not(h2) { margin-top: 1px; }
.vhead input { max-width: 280px; }
.ph { margin: 0; }

/* text */
h1 { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; }
h2 { margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--ink); }
p { margin: 0 0 10px; }
.muted { color: var(--mut); } .small { font-size: 13px; } .center { text-align: center; }
a { color: var(--blue); }
label { display: block; font-weight: 600; font-size: 13.5px; color: var(--ink); margin: 14px 0 5px; }
label .muted { font-weight: 400; }

/* controls */
input, select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; color: var(--ink); background: #fff; }
input[type=file] { height: auto; padding: 8px 10px; }
input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--navy); }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
button, .btn { font: inherit; font-weight: 600; height: 42px; padding: 0 20px; border: 1px solid var(--navy); border-radius: 6px; background: var(--navy); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
button:hover, .btn:hover { background: var(--navy-2); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.sec, .btn.sec { background: #fff; color: var(--navy); border-color: var(--line-2); } button.sec:hover, .btn.sec:hover { background: #f3f5f8; }
button.ghost { height: 36px; background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; padding: 0 16px; } button.ghost:hover { background: rgba(255, 255, 255, .12); }
button.link { height: auto; padding: 2px 4px; background: none; border: 0; color: var(--blue); font-weight: 600; text-decoration: underline; } button.link:hover { background: none; text-decoration: none; }
button.wide { width: 100%; margin-top: 16px; }
label.upbtn { display: inline-flex; align-items: center; height: 42px; padding: 0 22px; border-radius: 6px; background: var(--navy); color: #fff; font-weight: 600; cursor: pointer; margin: 0; }
td button.link { color: var(--err); }

.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; } .field.full { grid-column: 1 / -1; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } .row input[type=file] { flex: 1; min-width: 200px; } .row input[type=email], .row input[type=text] { flex: 1; min-width: 200px; }
#addForm button, #docForm button, #dtForm button { margin-top: 18px; }
.msg { margin-top: 12px; font-weight: 600; font-size: 14px; } .msg:empty { display: none; } .msg.err { color: var(--err); } .msg.ok { color: var(--ok); } .msg.info { color: var(--mut); }
.steps { padding-left: 20px; margin: 0 0 14px; } .steps li { margin-bottom: 6px; }
.hd { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin-bottom: 4px; } .hd h2 { margin: 0; } .hd input { max-width: 280px; }

/* login */
.login { display: flex; justify-content: center; padding: 48px 16px; }
.logincard { width: 100%; max-width: 420px; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 32px 28px; }
.otpbox { letter-spacing: .35em; text-align: center; font-size: 20px; }
.newbox { margin-top: 14px; padding: 14px; border: 1px dashed var(--line-2); border-radius: 6px; text-align: center; } .newbox p { margin: 0 0 10px; }
a.signup { display: inline-block; background: var(--navy); color: #fff; text-decoration: none; padding: 10px 18px; border-radius: 6px; }
a.signup b { display: block; } a.signup small { display: block; font-weight: 400; font-size: 12px; opacity: .9; }

/* overview */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tile { display: block; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px; text-decoration: none; color: var(--text); }
.tile:hover { border-color: var(--navy); }
.tile small { display: block; color: var(--mut); font-size: 13px; } .tile b { display: block; font-size: 30px; font-weight: 600; color: var(--ink); line-height: 1.2; margin-top: 4px; }
.codecard { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; align-items: center; }
.codecard small { color: var(--mut); } .code { font-size: 26px; font-weight: 700; letter-spacing: 4px; color: var(--navy); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.codecard p { grid-column: 1 / -1; margin: 0; }
.lockbox { border-color: #f1c7c3; background: #fff7f6; margin-bottom: 20px; } .lockbox h2 { color: var(--err); }

/* tables */
.xl { overflow: auto; border: 1px solid var(--line); border-radius: 6px; margin-top: 14px; max-height: 70vh; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th { position: sticky; top: 0; z-index: 1; background: #f3f5f8; text-align: left; padding: 10px 12px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); font-weight: 600; white-space: nowrap; border-bottom: 1px solid var(--line); }
td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
tbody tr:hover td { background: #fafbfc; }
td small { display: block; color: var(--mut); }
tr.bad td { background: #fff4f2; } tr.good td:last-child { color: var(--ok); } tr.bad td:last-child { color: var(--err); font-weight: 600; }
.pill { display: inline-block; padding: 2px 9px; border-radius: 4px; font-size: 12px; font-weight: 600; } .pill.ok { background: var(--okbg); color: var(--ok); } .pill.wait { background: var(--warnbg); color: var(--warn); }
.dt td { background: #f8f9fb; } .dt dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 18px; margin: 0; } .dt dt { font-size: 12px; color: var(--mut); } .dt dd { margin: 0 0 4px; font-weight: 600; word-break: break-word; color: var(--ink); }
.rdf { display: inline-flex; border: 1px solid var(--line-2); border-radius: 6px; overflow: hidden; margin: 6px 0 4px; }
.rdfb { height: 36px; padding: 0 16px; border: 0; border-radius: 0; background: #fff; color: var(--text); font-weight: 500; } .rdfb:hover { background: #f3f5f8; } .rdfb.on { background: var(--navy); color: #fff; font-weight: 600; }
.fdt input, .fdt select { height: 38px; min-width: 130px; font-size: 14px; padding: 0 8px; } .fdt td select { margin-bottom: 6px; }

/* upload rows */
.dsrow { border: 1px solid var(--line); border-radius: 6px; padding: 14px; margin-top: 12px; background: #fafbfc; } .dsrow .grid { margin: 0; } .dsrow .st { font-size: 13.5px; margin-top: 8px; } .dsrow .st.err { color: var(--err); } .dsrow .st.ok { color: var(--ok); }
.dsrow .fn { font-weight: 600; margin-bottom: 8px; word-break: break-all; color: var(--ink); } .rds { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-bottom: 8px; } .rd { font-weight: 600; color: var(--ink); } .rd small { display: block; font-weight: 500; color: var(--mut); font-size: 12.5px; }
.dsrow details { margin: 8px 0; } .dsrow summary { cursor: pointer; font-weight: 600; }
.ref { display: block; max-width: 100%; max-height: 150px; margin-top: 6px; border: 1px solid var(--line); border-radius: 4px; }
.refs { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; margin: 6px 0 12px; } .refs figure { margin: 0; } .refs figcaption { font-size: 13px; font-weight: 600; }
.rates { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 0; } .rates label { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; } .rates input { width: auto; height: auto; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #14532d; color: #fff; padding: 11px 20px; border-radius: 6px; font-weight: 600; z-index: 60; max-width: 92%; }
.toast.err { background: var(--err); }

/* tablet: the menu becomes a drawer */
@media (max-width: 1023px) {
  .navbtn { display: inline-flex; }
  .side { position: fixed; top: 60px; left: 0; bottom: 0; height: auto; z-index: 40; transform: translateX(-102%); transition: transform .2s ease; box-shadow: 0 0 0 rgba(0,0,0,0); width: min(82vw, 300px); }
  .side.open { transform: none; box-shadow: 4px 0 24px rgba(0, 0, 0, .18); }
  .scrim.open { display: block; position: fixed; inset: 60px 0 0 0; background: rgba(17, 24, 39, .45); z-index: 35; }
  .content { padding: 22px 20px 48px; }
  .views { grid-template-columns: 1fr; } .views > .view.half { grid-column: 1 / -1; }
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* phone */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .top { padding: 0 12px; } .who small { display: none; }
  .content { padding: 16px 12px 40px; }
  .card, .view.card { padding: 18px 16px; }
  .grid { grid-template-columns: 1fr; } .codecard { grid-template-columns: 1fr; }
  .tile b { font-size: 26px; } .tile { padding: 14px 16px; }
  .row { flex-direction: column; align-items: stretch; } .row > * { width: 100%; } .row .btn, .row button, .row label.upbtn { width: 100%; }
  .hd input { max-width: none; width: 100%; }
  .login { padding: 20px 12px; } .logincard { padding: 24px 18px; }
  /* tables become one card per row */
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border-top: 1px solid var(--line-2); padding: 8px 0; } table.stack tr:first-child { border-top: 0; }
  table.stack td { border: 0; padding: 6px 12px; }
  table.stack td::before { content: attr(data-label); display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin-bottom: 2px; }
  table.stack td[data-label=""]::before, table.stack td:not([data-label])::before { display: none; }
  .xl { max-height: none; }
  .fdt input, .fdt select { width: 100%; }
}
@media (min-width: 1024px) { .content { max-width: none; } }
@media print { .side, .top, .scrim { display: none; } }

/* Service Master / Applicable customers */
#smForm { border: 1px solid var(--line); border-radius: 8px; padding: 18px; margin: 14px 0; background: #fafbfd; } #smForm h3 { margin: 0 0 12px; font-size: 17px; }
#smForm label { display: block; margin: 12px 0 6px; font-weight: 600; } #smForm label.upbtn { display: inline-flex; margin: 0; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.dates { display: flex; flex-wrap: wrap; gap: 10px; } .dt1 { display: flex; align-items: center; gap: 6px; } .dt1 input { width: 84px; } .dt1 input[type=date] { width: 190px; } .dt1 select { width: 130px; } .dt1 .muted { min-width: 56px; }
.remrow { display: grid; grid-template-columns: 110px 1fr auto; gap: 10px; align-items: start; margin-bottom: 10px; } .remrow textarea { width: 100%; min-height: 42px; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; resize: vertical; }
#smForm .row { margin-top: 12px; }
.filters { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin: 10px 0 8px; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 4px; font-size: 12.5px; font-weight: 600; } .pill.on { background: #e3f3e8; color: #176b35; } .pill.off { background: #f1f3f6; color: #5b6676; }
tr.dim td { color: #8a94a3; }
@media (max-width: 760px) { .grid2, .filters { grid-template-columns: 1fr; } .remrow { grid-template-columns: 1fr; } }

/* Create task form spacing */
#tkForm label:not(.upbtn) { display: block; margin: 16px 0 6px; font-weight: 600; } #tkForm label:first-child { margin-top: 4px; }
#tkForm .row { margin: 20px 0 0; } #tkForm #tkGo { margin-top: 24px; min-width: 160px; }
#tsForm label, #tfSv + * { font-weight: 600; } #tsForm label { display: block; margin: 0 0 6px; } #tsForm .row { margin-top: 4px; }
#tfSt { margin-top: 0; } .view[data-view=tflow] .row { margin-top: 14px; } .view[data-view=tflow] label { display: block; margin: 12px 0 6px; font-weight: 600; } .view[data-view=tflow] .xl { margin-top: 18px; }

.subh { margin: 28px 0 8px; font-size: 16px; }
.view[data-view=tflow] button.warn { background: #b45309; border-color: #b45309; }

.cuList { max-height: 220px; overflow-y: auto; border: 1px solid var(--line-2); border-radius: 6px; margin-top: 8px; background: #fff; padding: 4px 0; }
#smForm label.cuRow { display: flex; align-items: center; gap: 8px; margin: 0; padding: 8px 12px; font-weight: 500; cursor: pointer; } #smForm label.cuRow:hover { background: #f3f5f8; } .cuRow input { width: 18px; height: 18px; flex: none; }

.permGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 2px 14px; border: 1px solid var(--line-2); border-radius: 6px; background: #fff; padding: 6px; margin-top: 8px; }
.side a[hidden], .side .grp[hidden] { display: none; }
#emForm .row, .view[data-view=employees] #emForm > .row { margin-top: 18px; }

/* sub-tasks, task detail */
textarea { width: 100%; padding: 9px 12px; border: 1px solid var(--line-2); border-radius: 6px; font: inherit; color: var(--ink); background: #fff; resize: vertical; }
.chip { display: inline-flex; align-items: center; gap: 4px; margin: 4px 6px 0 0; padding: 3px 10px; border: 1px solid var(--line-2); border-radius: 999px; background: #f3f5f8; font-size: 13px; color: var(--blue); text-decoration: none; word-break: break-all; } .chip button.link { height: auto; padding: 0 2px; color: var(--err); text-decoration: none; font-size: 16px; }
.chips { margin-top: 4px; } td.clip { max-width: 260px; white-space: pre-wrap; word-break: break-word; }
.tkDetail { margin-top: 18px; border: 1px solid var(--line); border-radius: 8px; padding: 18px; background: #fafbfd; } .tkDetail .hd h3 { margin: 0; }
.tkSteps { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 14px; } .tkStep { font-size: 13px; padding: 4px 10px; border-radius: 6px; border: 1px solid #dfe5ee; color: #64748b; background: #fff; }
.tkStep.done { background: #e3f3e8; border-color: #bfe3c9; color: #176b35; } .tkStep.now { background: #fff4de; border-color: #f0cf8a; color: #8a5a00; font-weight: 600; }
.tkInfo { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; margin-top: 12px; } .tkInfo h4 { margin: 0 0 6px; font-size: 16px; } .tkInfo p { margin: 6px 0; }
.tkNote { border-top: 1px solid var(--line); padding: 8px 0; } .tkNote:first-of-type { border-top: 0; } .tkInfo textarea { margin-top: 8px; } .tkInfo .row { margin-top: 10px; }
#tsForm label.upbtn { display: inline-flex; align-items: center; justify-content: center; margin: 0; height: 42px; }

/* task detail: one coloured card per part */
.tkDetail { background: #f4f7fb; border-color: #d7e0ee; box-shadow: 0 1px 3px rgba(30,58,95,.08); }
.tkDetail .hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; border-bottom: 2px solid var(--navy); }
.tkDetail .hd h3 { color: var(--navy); font-size: 19px; }
.tkInfo { border-left: 5px solid #94a3b8; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.tkInfo h4 { display: flex; align-items: center; gap: 8px; }
.tkInfo.c-blue { border-left-color: #2563eb; background: #f3f7ff; } .tkInfo.c-blue h4 { color: #1d4ed8; }
.tkInfo.c-indigo { border-left-color: #4f46e5; background: #f5f4ff; } .tkInfo.c-indigo h4 { color: #4338ca; }
.tkInfo.c-amber { border-left-color: #d97706; background: #fffaf0; } .tkInfo.c-amber h4 { color: #b45309; }
.tkInfo.c-purple { border-left-color: #9333ea; background: #faf5ff; } .tkInfo.c-purple h4 { color: #7e22ce; }
.tkInfo.c-teal { border-left-color: #0d9488; background: #f0fdfa; } .tkInfo.c-teal h4 { color: #0f766e; }
.tkInfo.c-slate { border-left-color: #475569; background: #f8fafc; } .tkInfo.c-slate h4 { color: #334155; }
.tkInfo .xl table { width: 100%; } .tkInfo.c-slate thead th { background: #e8edf4; }
.alRow { display: grid; grid-template-columns: minmax(120px, 190px) minmax(160px, 1fr) auto; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid #e0defa; }
.alRow:first-of-type { border-top: 0; } .alRow .alName { font-weight: 600; color: #3730a3; } .alRow.done .alName { color: #94a3b8; text-decoration: line-through; } .alRow.now .alName::after { content: ' (now)'; color: #b45309; font-weight: 500; } .alRow select { margin: 0; }
.alRow .muted { grid-column: 1 / -1; }
.tkStep { font-weight: 500; } .tkStep.todo { background: #f1f5f9; }
.pill { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 600; } .pill.p-now { background: #fff4de; color: #8a5a00; border: 1px solid #f0cf8a; } .pill.p-done { background: #e3f3e8; color: #176b35; border: 1px solid #bfe3c9; }
#myCard { border-top: 4px solid #2563eb; } #myCard h2 { color: #1d4ed8; }
@media (max-width: 640px) { .alRow { grid-template-columns: 1fr; } }

/* calmer, professional task view: white sections, thin accent, folded until clicked */
.tkDetail { background: #fff; border: 1px solid var(--line); box-shadow: none; padding: 20px 22px; }
.tkDetail .hd { border-bottom: 1px solid var(--line); padding-bottom: 12px; } .tkDetail .hd h3 { font-size: 18px; font-weight: 650; color: var(--ink); }
.tkSteps { gap: 0; margin: 14px 0 6px; align-items: center; }
.tkStep { background: transparent !important; border: 0 !important; border-radius: 0; padding: 4px 14px 4px 0; font-size: 13px; font-weight: 500; color: #94a3b8; }
.tkStep + .tkStep::before { content: '\203A'; margin-right: 14px; color: #cbd5e1; }
.tkStep.done { color: #4b6b57; } .tkStep.now { color: var(--navy); font-weight: 700; }
.tkSec { border: 1px solid var(--line); border-left: 3px solid #94a3b8; border-radius: 6px; background: #fff; margin-top: 10px; }
.tkSec > summary { cursor: pointer; list-style: none; padding: 12px 16px; font-weight: 600; font-size: 14.5px; color: var(--ink); display: flex; align-items: center; justify-content: space-between; }
.tkSec > summary::-webkit-details-marker { display: none; }
.tkSec > summary::after { content: ''; width: 8px; height: 8px; border-right: 2px solid #94a3b8; border-bottom: 2px solid #94a3b8; transform: rotate(45deg); transition: transform .15s; margin-right: 4px; }
.tkSec[open] > summary { border-bottom: 1px solid var(--line); } .tkSec[open] > summary::after { transform: rotate(-135deg); }
.tkSec > summary:hover { background: #f8fafc; }
.tkSec .secBody { padding: 4px 16px 16px; } .tkSec .secBody p { margin: 8px 0; }
.tkSec.c-blue { border-left-color: var(--navy); } .tkSec.c-indigo { border-left-color: #475569; } .tkSec.c-amber { border-left-color: #b7791f; } .tkSec.c-purple { border-left-color: #6b5b95; } .tkSec.c-teal { border-left-color: #2f7f79; } .tkSec.c-slate { border-left-color: #94a3b8; }
.tkSec .alRow { border-top-color: var(--line); } .tkSec .alRow .alName { color: var(--ink); font-weight: 600; } .tkSec .alRow.now .alName::after { color: var(--navy); }
.tkSec thead th { background: #f3f5f8 !important; }
.pill { font-weight: 600; border-radius: 4px; padding: 2px 9px; font-size: 12.5px; } .pill.p-now { background: #eef2f7; color: var(--navy); border: 1px solid #d5deea; } .pill.p-done { background: #eaf4ee; color: #1f6b3b; border: 1px solid #cfe5d8; }
#myCard { border-top: 3px solid var(--navy); } #myCard h2 { color: var(--ink); }

/* task work area: write | write, notes | files, with the history in a right-hand panel */
.tkDetail .hd { flex-wrap: wrap; } .tkDetail .hbtn { display: flex; gap: 8px; }
.tkLay { display: flex; gap: 16px; align-items: flex-start; } .tkMain { flex: 1; min-width: 0; }
.tkSide { display: none; width: 330px; flex: none; border: 1px solid var(--line); border-radius: 6px; background: #fbfcfd; padding: 14px 14px 6px; max-height: 640px; overflow: auto; }
.tkLay.hist .tkSide { display: block; } .tkSide h4 { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
.hiItem { border-left: 2px solid #cbd5e1; padding: 2px 0 10px 12px; margin-left: 4px; font-size: 13.5px; position: relative; } .hiItem::before { content: ''; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--navy); }
.hiTop { display: flex; flex-wrap: wrap; gap: 4px; align-items: baseline; } .hiBody { margin-top: 3px; padding: 6px 8px; background: #f1f4f8; border-radius: 4px; white-space: pre-wrap; word-break: break-word; }
.tkTwo { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.tkCard { border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 12px 14px; min-width: 0; } .tkCard h4 { margin: 0 0 4px; font-size: 14.5px; color: var(--ink); } .tkCard p { margin: 2px 0 8px; }
.tkCard.k-int { border-top: 3px solid #b7791f; } .tkCard.k-per { border-top: 3px solid #6b5b95; } .tkCard textarea { width: 100%; resize: vertical; } .tkCard .row { margin-top: 8px; }
.tkCard input[type=search] { width: 100%; margin-bottom: 8px; }
.noteList { max-height: 210px; overflow: auto; } .noteItem { border: 1px solid var(--line); border-radius: 6px; padding: 7px 10px; margin-bottom: 6px; cursor: pointer; position: relative; background: #fff; } .noteItem:hover, .noteItem:focus { background: #f5f8fc; border-color: #b8c7dc; outline: 0; }
.nmeta { font-size: 12px; color: var(--mut); display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } .ncopy { margin-left: auto; } .ntext { white-space: pre-wrap; word-break: break-word; margin-top: 3px; user-select: text; } .ndel { position: absolute; right: 8px; bottom: 6px; font-size: 12px; }
.ntag { padding: 0 7px; border-radius: 3px; font-size: 11.5px; font-weight: 600; } .ntag.int { background: #fbf1de; color: #8a5a00; } .ntag.per { background: #ece8f5; color: #5b4a8a; }
.fileList .fileRow, a.fileRow { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13.5px; word-break: break-all; }
.fico { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 22px; padding: 0 4px; border-radius: 3px; font-size: 10px; font-weight: 700; letter-spacing: .3px; color: #fff; background: #64748b; flex: none; }
.fico.f-pdf { background: #c0392b; } .fico.f-xls { background: #1e7e45; } .fico.f-doc { background: #2b5fab; } .fico.f-img { background: #7b5ea7; }
@media (max-width: 1100px) { .tkLay { flex-direction: column; } .tkSide { width: 100%; max-height: none; } .tkTwo { grid-template-columns: 1fr; } }
.fileList .fileRow { flex-wrap: wrap; word-break: normal; } .fileList .fileRow a { flex: 1 1 120px; min-width: 0; overflow-wrap: anywhere; } .fileList .fileRow .muted { flex: 1 0 100%; padding-left: 40px; margin-top: -4px; } .fileList .fileRow .link { white-space: nowrap; }

.tkBar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); } .tkBar button.ok { background: #1f6b3b; } .tkBar .err { color: var(--err); }
.shareLbl { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-top: 8px; font-weight: 400; } .shareLbl input { width: auto; margin: 0; } .fileList .fileRow .shareLbl { margin: 0; flex: none; }

.noteItem .ncopy { position: absolute; right: 10px; top: 6px; } .noteItem { padding-right: 96px; } .noteList:empty { display: none; }

.noteItem { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; } .noteItem .ntext { flex: 1; min-width: 0; margin: 0; }
.nacts { display: flex; align-items: center; gap: 10px; flex: none; } .noteItem .ncopy { border: 1px solid var(--line-2); background: #fff; color: var(--text); border-radius: 4px; padding: 2px 10px; font-size: 12.5px; font-weight: 500; cursor: pointer; min-width: 64px; } .noteItem .ncopy:hover { background: #eef2f7; }
.noteItem .ndel { position: static; font-size: 12.5px; padding: 0; }
.noteItem .ncopy, .noteItem .ndel { height: auto; min-height: 0; line-height: 1.3; margin: 0; width: auto; box-shadow: none; } .noteItem .ncopy { padding: 3px 10px; } .noteItem .ndel { background: none; border: 0; color: var(--blue); text-decoration: underline; }
.noteItem { align-items: center; }
.noteItem { padding-right: 10px; }
.noteItem .ncopy { position: static; }

/* the whole task fits one screen; long lists (notes, files, history) scroll inside their own box */
@media (min-width: 1101px) {
  .tkDetail.fit:not([hidden]) { display: flex; flex-direction: column; height: calc(100vh - 150px); min-height: 440px; overflow: hidden; padding: 14px 18px; }
  .tkDetail.fit .hd { flex: none; padding-bottom: 8px; } .tkDetail.fit .tkSteps { flex: none; margin: 8px 0 2px; flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; } .tkDetail.fit .tkStep { flex: none; }
  .tkDetail.fit > p.muted { flex: none; margin: 2px 0 6px; }
  .tkDetail.fit .tkLay { flex: 1 1 0; min-height: 0; align-items: stretch; }
  .tkDetail.fit .tkMain { display: flex; flex-direction: column; min-height: 0; overflow: auto; }
  .tkDetail.fit .tkMain > .tkSec { flex: none; margin-top: 0; margin-bottom: 8px; } .tkDetail.fit .tkSec .secBody { max-height: 32vh; overflow: auto; }
  .tkDetail.fit .tkTwo { flex: 1 1 0; min-height: 110px; margin-top: 0; margin-bottom: 8px; grid-auto-rows: minmax(0, 1fr); }
  .tkDetail.fit .tkCard { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 10px 12px; }
  .tkDetail.fit .tkCard p { margin: 0 0 6px; } .tkDetail.fit .tkCard h4 { flex: none; }
  .tkDetail.fit .tkCard textarea { flex: 1 1 auto; min-height: 44px; resize: none; } .tkDetail.fit .tkCard .shareLbl { flex: none; margin-top: 6px; }
  .tkDetail.fit .noteList, .tkDetail.fit .fileList { flex: 1 1 0; min-height: 0; max-height: none; overflow: auto; }
  .tkDetail.fit .tkCard input[type=search] { flex: none; } .tkDetail.fit .tkCard > input[type=file] { flex: none; margin-top: 6px; }
  .tkDetail.fit .tkBar { flex: none; margin-top: 0; padding-top: 10px; }
  .tkDetail.fit .tkSide { display: none; height: 100%; max-height: none; overflow: auto; } .tkDetail.fit .tkLay.hist .tkSide { display: block; }
}
@media (min-width: 1101px) { .tkDetail.fit .k-files > p.muted { display: none; } .tkDetail.fit .k-files .fileList { min-height: 90px; } }
@media (min-width: 1101px) and (max-height: 820px) { .tkDetail.fit .tkCard > p.muted { display: none; } .tkDetail.fit .tkCard { padding: 8px 10px; } .tkDetail.fit .tkCard h4 { margin-bottom: 4px; } .tkDetail.fit .hd h3 { font-size: 16px; } .tkDetail.fit .tkMain > .tkSec > summary { padding: 8px 14px; } .tkDetail.fit .tkCard .shareLbl { margin-top: 4px; } }
@media (min-width: 1101px) { .tkDetail.fit .k-files .fileList { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 4px; } }

/* tablets and small laptops: tables also become one card per row (no sideways scrolling) */
@media (max-width: 1100px) {
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; width: 100%; }
  table.stack thead { display: none; }
  table.stack tr { border-top: 1px solid var(--line-2); padding: 8px 0; } table.stack tr:first-child { border-top: 0; }
  table.stack td { border: 0; padding: 6px 12px; min-width: 0; overflow-wrap: anywhere; }
  table.stack td::before { content: attr(data-label); display: block; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin-bottom: 2px; }
  table.stack td[data-label=""]::before, table.stack td:not([data-label])::before { display: none; }
  .xl { max-height: none; overflow-x: visible; } td.clip { max-width: none; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  table.stack tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 8px; }
  table.stack td[data-label=""], table.stack td:not([data-label]) { grid-column: 1 / -1; }
  .tkTwo { grid-template-columns: 1fr 1fr; }
}
/* never wider than the screen */
img, video, canvas, svg { max-width: 100%; } input, select, textarea { max-width: 100%; }

/* phones and tablets: nothing is cut off, nothing needs a sideways swipe */
#tsGroup { height: 42px; }
@media (max-width: 760px) {
  .noteItem { flex-direction: column; align-items: stretch; gap: 6px; } .noteItem .nacts { justify-content: flex-end; }
  .noteList { max-height: 260px; } .fileList { max-height: 220px; overflow: auto; }
  .tkSteps { gap: 2px 14px; } .tkStep { font-size: 12.5px; padding: 2px 0 !important; } .tkStep + .tkStep::before { display: none; }
  .tkDetail { padding: 14px 12px; } .tkDetail .hd { gap: 8px; } .tkDetail .hd h3 { font-size: 16px; width: 100%; } .tkDetail .hbtn { width: 100%; } .tkDetail .hbtn button { flex: 1; }
  .tkSec .secBody, .tkCard { padding-left: 12px; padding-right: 12px; } .tkBar { position: sticky; bottom: 0; background: #fff; padding-bottom: 10px; z-index: 5; } .tkBar button { flex: 1; }
  .fileList .fileRow .muted { padding-left: 0; } .hiItem { font-size: 13px; }
}

.dates { flex-direction: column; gap: 10px; } .dtp { border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; background: #fff; } .dtl { margin-bottom: 4px; }
.dtrow { display: flex; flex-wrap: wrap; gap: 8px 28px; align-items: center; } .dtrow .dt1 { display: flex; align-items: center; gap: 6px; } .dtrow .dt1[data-r=d] span { color: #8a5a00; font-weight: 600; }
@media (max-width: 760px) { .dtrow { flex-direction: column; align-items: stretch; gap: 8px; } .dtrow .dt1 { flex-wrap: wrap; } }
.overdue { color: #c62828; font-weight: 700; }
.urgentRow td { background: #fdecea; } .urgentRow td:first-child { border-left: 4px solid #c62828; }

.dsDet { background: #f8fafc; padding: 10px 14px !important; } .dsDet:before { content: none !important; } .dsGrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 16px; } .dsKv div { word-break: break-all; font-size: 13px; }
#dcertRes .ok { color: #117a3d; } #dcertRes .err { color: #c0262d; }
@media (max-width: 1023px) { table.stack tbody tr.dsDetRow { display: block; } table.stack tbody tr.dsDetRow[hidden] { display: none; } }
#dcertRes .warn { color: #a16207; }

label.upbtn.sec { background: #fff; color: var(--navy); border: 1px solid var(--navy); }
.fillBox { background: #f6f9fc; border: 1px dashed #b6c4d6; border-radius: 8px; padding: 12px 14px; margin-bottom: 14px; }
.fillBox #aRead > div { margin: 3px 0; word-break: break-word; }

/* left menu: one group open at a time, opens like a drop-down */
.side .sg { border-top: 1px solid var(--line); }
.side .sg:last-child { border-bottom: 1px solid var(--line); }
.side button.grp { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 11px 20px; margin: 0; border: 0; border-left: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text); font: inherit; font-weight: 600; text-align: left; cursor: pointer; text-transform: none; letter-spacing: 0; }
.side button.grp:hover { background: #f3f5f8; }
.side .sg.open > button.grp { color: var(--navy); }
.side .sg.has-on > button.grp { border-left-color: var(--navy); }
.side .chev { width: 16px; height: 16px; flex: 0 0 16px; transition: transform .25s ease; color: var(--mut); }
.side .sg.open .chev { transform: rotate(180deg); }
.side .sgb { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .28s ease, visibility 0s linear .28s; }
.side .sg.open > .sgb { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .28s ease, visibility 0s; }
.side .sgi { overflow: hidden; min-height: 0; background: #fafbfd; }
.side .sgi a { padding: 8px 20px 8px 34px; font-weight: 500; font-size: 14.5px; }
.side .sg[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .side .sgb, .side .chev { transition: none; } }
/* billing: the consultant's own invoice / proforma / receipt pages inside this dashboard */
.billview { display: block; }
#billFrame { width: 100%; height: calc(100vh - 118px); min-height: 520px; border: 0; background: transparent; display: block; }

.nrCust { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: 6px; margin: 8px 0 14px; }
.nrCust label { display: flex; align-items: center; gap: 10px; padding: 8px 12px; margin: 0; border-bottom: 1px solid var(--line); font-weight: 500; cursor: pointer; }
.nrCust label:last-child { border-bottom: 0; }
.nrCust input { width: auto; margin: 0; }

/* Inward */
.iwModes{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 6px}
.iwModes button{background:#fff;color:#1e3a5f;border:1.5px solid #c9d3e0;border-radius:10px;padding:9px 20px;font-weight:600;cursor:pointer}
.iwModes button[aria-checked="true"]{background:#1e3a5f;color:#fff;border-color:#1e3a5f}
.iwTasks{display:flex;flex-direction:column;gap:4px;margin-top:4px;max-height:230px;overflow:auto;padding-right:2px}
.iwTasks label{flex:none;height:auto;line-height:1.35;display:flex;gap:10px;align-items:center;padding:6px 12px;margin:0;min-height:0;border:1px solid #dfe5ee;border-radius:8px;cursor:pointer;font-weight:500;font-size:14px}
.iwTasks label:hover{background:#f3f6fb}
.iwTasks input{width:auto;margin:0}
.iwSel{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.iwSel select{max-width:230px}
.card .iwTasks label{padding:5px 12px!important;height:auto!important;min-height:0!important;margin:0!important;line-height:1.3!important}
.card .iwTasks input[type=radio]{width:16px!important;height:16px!important;min-height:0!important;padding:0!important;flex:none}

/* categories, levels, chips */
.chipbox { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; } .chipbox:empty { display: none; }
.chipbox .cchip { display: inline-flex; align-items: center; gap: 6px; background: #eef2f8; border: 1px solid var(--line); border-radius: 999px; padding: 3px 6px 3px 12px; font-size: 13px; }
.chipbox .cchip button { height: auto; min-height: 0; padding: 0 6px; background: none; border: 0; color: var(--err); font-size: 16px; line-height: 1; cursor: pointer; }
.pstPanel { margin: 12px 0; } .pstPanel .pstRow { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); } .pstPanel .pstRow label { flex: 1; margin: 0; font-weight: 500; cursor: pointer; }
.pstPanel .pstRow button.link { color: var(--err); } .pstPanel .row { margin-top: 10px; }
td.pstCell { white-space: nowrap; }
.pill.p-wait { background: #fdeceb; color: #9b2c1f; border: 1px solid #f3c6c1; }
.pstPanel .pstRow input[type=radio] { width: 18px; height: 18px; min-width: 18px; flex: none; margin: 0; padding: 0; } .pstPanel .pstRow label { text-align: left; display: block; } .pstPanel input[type=text] { flex: 1; min-width: 200px; }
.stepsRow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .stepsRow .tkSteps { flex: 1; min-width: 0; }
.pstPick { display: flex; align-items: center; gap: 8px; margin-left: auto; } .pstPick select { width: auto; min-width: 190px; height: 38px; } .pstPick button { height: 38px; padding: 0 14px; }
.pstAdd { width: 100%; display: flex; gap: 8px; justify-content: flex-end; align-items: center; } .pstAdd input { max-width: 260px; }

.hiSym{display:inline-block;min-width:18px;text-align:center;font-weight:700}.hiSym.ok{color:#15803d}.hiSym.sv{color:#b45309}

.vhead{justify-content:space-between}.bkPanel{border:1px solid var(--line,#d9dde3);border-radius:10px;padding:14px;margin-bottom:16px;background:#fafbfc}.bkPanel h3{margin:0 0 4px}
.bkGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:10px 0}.bkGrid label{display:block;font-size:12px;margin-bottom:3px}
.bkCnt{display:flex;justify-content:space-between;align-items:center;margin:8px 0}
.msel{position:relative}.msel>button{width:100%;text-align:left;background:#fff;border:1px solid #c9ced6;border-radius:8px;padding:8px 10px;color:inherit;font:inherit;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.msel .mpop{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:3px;background:#fff;border:1px solid #c9ced6;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.14);max-height:260px;overflow:auto;padding:6px}
.msel .mpop input[type=search]{width:100%;margin-bottom:4px}.msel .mpop label{display:flex;gap:6px;align-items:center;padding:3px 4px;margin:0;font-size:13px}.msel .mpop .none{padding:6px;color:#6b7280;font-size:12px}
.bkTools{display:flex;gap:10px;align-items:center}.bkTools .sec{padding:4px 12px}

.hiLegend{display:flex;flex-wrap:wrap;gap:4px;margin:2px 0 10px}.hiLegend span{font-size:11px;padding:2px 8px;border-radius:999px;color:#fff;font-weight:600}
.hiItem.hk1{--c:#e53935;--b:#fdecea}.hiItem.hk2{--c:#fb8c00;--b:#fff3e0}.hiItem.hk3{--c:#f9c600;--b:#fffbe0}.hiItem.hk4{--c:#2e9e44;--b:#e8f7ec}.hiItem.hk5{--c:#1e88e5;--b:#e6f2fd}.hiItem.hk6{--c:#4338ca;--b:#ecebfb}.hiItem.hk7{--c:#8e24aa;--b:#f5e8f9}
.hiItem.hk1,.hiItem.hk2,.hiItem.hk3,.hiItem.hk4,.hiItem.hk5,.hiItem.hk6,.hiItem.hk7{background:var(--b);border-left:5px solid var(--c);border-radius:8px;padding:8px 10px;margin-bottom:8px}
.hiLegend .hk1{background:#e53935}.hiLegend .hk2{background:#fb8c00}.hiLegend .hk3{background:#f9c600;color:#5a4a00}.hiLegend .hk4{background:#2e9e44}.hiLegend .hk5{background:#1e88e5}.hiLegend .hk6{background:#4338ca}.hiLegend .hk7{background:#8e24aa}
.hiItem[class*=' hk']::before{display:none}.hiItem[class*=' hk']{margin-left:0}

/* ================= premium look: charcoal, graphite, greige and taupe; many quiet animations ================= */
:root{--p1:#151515;--p2:#3b3b3b;--p3:#6b6b6b;--p4:#bdb7ad;--p5:#8c7a6b;--surf:#f4f1ec;--surf2:#ebe7e0;--pg:#d8d3ca;
 --navy:#151515;--navy-2:#3b3b3b;--bg:var(--pg);--panel:var(--surf);--line:#c9c3b9;--line-2:#b3ada3;--ink:#151515;--text:#2a2a2a;--mut:#6b6b6b;--blue:#5d4f43}
:root{--c-ov:#8c7a6b;--c-leave:#9a4b3f;--c-bill:#4f6b57;--c-team:#6a5a7a;--c-cust:#4d6a78;--c-docs:#a0703f;--c-inw:#8a7a38;--c-svc:#84546a;--c-dsc:#4f5d8a;--c-mca:#41706b;--c-task:#6a7a3f}
[data-g=ov],[data-sg=ov]{--mc:var(--c-ov)}[data-g=leave]{--mc:var(--c-leave)}[data-g=bill],[data-sg=bill]{--mc:var(--c-bill)}[data-g=team],[data-sg=team]{--mc:var(--c-team)}[data-g=cust],[data-sg=cust]{--mc:var(--c-cust)}
[data-g=docs],[data-sg=docs]{--mc:var(--c-docs)}[data-g=inw],[data-sg=inw]{--mc:var(--c-inw)}[data-g=svc],[data-sg=svc]{--mc:var(--c-svc)}[data-g=dsc],[data-sg=dsc]{--mc:var(--c-dsc)}[data-g=mca],[data-sg=mca]{--mc:var(--c-mca)}[data-g=task],[data-sg=task]{--mc:var(--c-task)}
body{background:var(--pg);color:#2a2a2a}
/* top bar */
.top{background:linear-gradient(180deg,#1d1d1d,#151515);color:#f4f1ec}
.top::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#8c7a6b,#e0d6c6,#bdb7ad,#8c7a6b);background-size:200% 100%;animation:fxFlow 7s linear infinite}
@keyframes fxFlow{to{background-position:200% 0}}
.top img{animation:fxFloat 5s ease-in-out infinite}@keyframes fxFloat{50%{transform:translateY(-2px)}}
.who small{color:#bdb7ad}
/* left menu: dark graphite */
.side{background:#1d1d1d;border-right:1px solid #000}
.side a{color:#d9d4cb}.side a:hover{background:#2c2c2c;color:#fff}
.side a.on,.side a[data-g].on{background:#3b3b3b;color:#fff;border-left-color:#bdb7ad;animation:fxBreath 3.2s ease-in-out infinite}
@keyframes fxBreath{50%{box-shadow:inset 0 0 14px rgba(189,183,173,.28)}}
.side .sg{border-color:#2f2f2f}.side .sg:last-child{border-color:#2f2f2f}
.side .sg[data-sg]>button.grp{background:#262626;color:#e6e1d8;border-left:4px solid var(--mc);transition:background .2s,padding-left .2s}
.side .sg[data-sg]>button.grp:hover{background:#333;padding-left:24px}
.side .sg.open>button.grp{background:#333;color:#fff}
.side .sg[data-sg] .chev{color:#bdb7ad}
.side .sgi{background:#161616}
.side a[data-g]{transition:background .2s,padding-left .2s}.side a[data-g]:hover{background:#2c2c2c;padding-left:26px}
.side em,.side a[data-g] em{background:#8c7a6b;color:#fff;animation:fxBadge 2.6s ease-in-out infinite}
@keyframes fxBadge{50%{transform:scale(1.12)}}
.side .sg.open .sgb a{animation:fxItem .35s ease-out both}.side .sg.open .sgb a.on{animation:fxItem .35s ease-out both,fxBreath 3.2s 0.4s ease-in-out infinite}
.side .sg.open .sgb a:nth-child(2){animation-delay:.04s}.side .sg.open .sgb a:nth-child(3){animation-delay:.08s}.side .sg.open .sgb a:nth-child(4){animation-delay:.12s}.side .sg.open .sgb a:nth-child(n+5){animation-delay:.16s}
@keyframes fxItem{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
/* page, cards, headings */
.view[data-g] .vhead h2{color:#151515;position:relative;padding-bottom:2px}
.view[data-g] .vhead h2::after{content:'';position:absolute;left:0;bottom:-3px;height:3px;width:46px;border-radius:2px;background:var(--mc);animation:fxBar .6s .12s ease-out both}
@keyframes fxBar{from{width:0}to{width:46px}}
.view[data-g] .card,.view.card,.card{background:var(--surf);border:1px solid #c9c3b9;border-top:4px solid var(--mc);box-shadow:0 1px 3px rgba(21,21,21,.08);transition:box-shadow .25s,transform .25s}
.view[data-g] .card:hover{box-shadow:0 8px 22px rgba(21,21,21,.14)}
.view[data-g] thead th{background:#3b3b3b;color:#f4f1ec;border-color:#3b3b3b}
.view[data-g] tbody tr{background:#f8f6f2;animation:fxRow .38s ease-out both;transition:background .15s,transform .15s}.view[data-g] tbody tr:nth-child(even){background:#ece8e1}
.view[data-g] tbody tr:hover{background:#e0d9cc;transform:translateX(3px)}
.view[data-g] tbody tr:nth-child(2){animation-delay:.03s}.view[data-g] tbody tr:nth-child(3){animation-delay:.06s}.view[data-g] tbody tr:nth-child(4){animation-delay:.09s}.view[data-g] tbody tr:nth-child(5){animation-delay:.12s}.view[data-g] tbody tr:nth-child(6){animation-delay:.15s}.view[data-g] tbody tr:nth-child(n+7){animation-delay:.18s}
@keyframes fxRow{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
input,select,textarea{background:#fbfaf8;color:#151515;border-color:#b9b3a8}
.view[data-g] input:focus,.view[data-g] select:focus,.view[data-g] textarea:focus{outline:2px solid #8c7a6b;outline-offset:0;border-color:#5d4f43;box-shadow:0 0 0 4px rgba(140,122,107,.18)}
.muted,.small.muted{color:#6b6b6b}
.view[data-g] label{color:#2a2a2a}
.xl{background:transparent}
.bkPanel,.tkSide,.tkSec,.tkMain>*{background-color:#f8f6f2;border-color:#c9c3b9}
.tkSide{background:#ece8e1}
.pill{background:#e0d9cc;color:#2a2a2a}
/* buttons: all the same */
button,.btn{background:#151515;border:1px solid #151515;color:#f4f1ec;border-radius:6px;font-weight:600;position:relative;overflow:hidden;transition:background .2s,box-shadow .2s,transform .12s}
button:not(.sec):not(.link):not(.ghost):not(.grp):not(.navbtn):not(:disabled):hover,.btn:hover{background:#3b3b3b;box-shadow:0 4px 12px rgba(21,21,21,.25);transform:translateY(-1px)}
button:not(.link):not(.ghost):not(.grp):not(.navbtn):not(:disabled)::after{content:'';position:absolute;top:0;left:-70%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);transition:left .5s}
button:not(.link):not(.ghost):not(.grp):not(.navbtn):not(:disabled):hover::after{left:130%}
button.sec,.btn.sec{background:#bdb7ad!important;color:#151515!important;border:1px solid #8c7a6b!important}
button.sec:hover,.btn.sec:hover{background:#cfc9bf!important;box-shadow:0 4px 12px rgba(21,21,21,.15)!important}
button.link{background:none;color:#5d4f43}
button.ghost{background:transparent;border-color:rgba(244,241,236,.5);color:#f4f1ec}
body .msel>button{background:#fbfaf8;color:#2a2a2a;border:1px solid #b9b3a8;font-weight:500;box-shadow:none;transform:none}
button:active{transform:scale(.96)!important}
button:focus-visible,.btn:focus-visible{outline:2px solid #8c7a6b;outline-offset:2px}
.vhead>button:not(.sec):not(.link){animation:fxCta 4.2s ease-in-out infinite}
@keyframes fxCta{0%,70%,100%{box-shadow:0 0 0 0 rgba(140,122,107,0)}80%{box-shadow:0 0 0 8px rgba(140,122,107,.35)}95%{box-shadow:0 0 0 14px rgba(140,122,107,0)}}
/* every module opens in its own way and leaves in its own way */
.view[data-g]:not([hidden]){animation:var(--in,fxZoom) .5s cubic-bezier(.2,.8,.2,1) both}
.view[data-g].fx-out:not([hidden]){animation:var(--out,fxOutL) .17s ease-in both;pointer-events:none}
[data-g=ov]{--in:fxZoom;--out:fxOutZ}[data-g=leave]{--in:fxSlideR;--out:fxOutR}[data-g=bill]{--in:fxFlip;--out:fxOutUp}[data-g=team]{--in:fxBounce;--out:fxOutZ}[data-g=cust]{--in:fxSlideL;--out:fxOutL}[data-g=docs]{--in:fxDrop;--out:fxOutDn}
[data-g=inw]{--in:fxSwing;--out:fxOutR}[data-g=svc]{--in:fxBlur;--out:fxOutBlur}[data-g=dsc]{--in:fxRot;--out:fxOutRot}[data-g=mca]{--in:fxSkew;--out:fxOutL}[data-g=task]{--in:fxRise;--out:fxOutUp}
@keyframes fxZoom{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
@keyframes fxSlideR{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}
@keyframes fxSlideL{from{opacity:0;transform:translateX(-40px)}to{opacity:1;transform:none}}
@keyframes fxFlip{from{opacity:0;transform:perspective(900px) rotateX(-18deg);transform-origin:top}to{opacity:1;transform:none}}
@keyframes fxBounce{0%{opacity:0;transform:translateY(28px)}60%{opacity:1;transform:translateY(-6px)}80%{transform:translateY(2px)}100%{transform:none}}
@keyframes fxDrop{from{opacity:0;transform:translateY(-28px)}to{opacity:1;transform:none}}
@keyframes fxSwing{from{opacity:0;transform:perspective(900px) rotateY(18deg);transform-origin:left}to{opacity:1;transform:none}}
@keyframes fxBlur{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
@keyframes fxRot{from{opacity:0;transform:rotate(-2deg) scale(.96)}to{opacity:1;transform:none}}
@keyframes fxSkew{from{opacity:0;transform:skewX(-5deg) translateX(-24px)}to{opacity:1;transform:none}}
@keyframes fxRise{0%{opacity:0;transform:translateY(34px)}70%{opacity:1;transform:translateY(-4px)}100%{transform:none}}
@keyframes fxOutL{to{opacity:0;transform:translateX(-28px)}}@keyframes fxOutR{to{opacity:0;transform:translateX(28px)}}@keyframes fxOutUp{to{opacity:0;transform:translateY(-20px)}}@keyframes fxOutDn{to{opacity:0;transform:translateY(20px)}}
@keyframes fxOutZ{to{opacity:0;transform:scale(.96)}}@keyframes fxOutBlur{to{opacity:0;filter:blur(6px)}}@keyframes fxOutRot{to{opacity:0;transform:rotate(2deg) scale(.97)}}
/* sections opening inside a module */
.tkLay,.bkPanel,.view[data-g] form:not([hidden]),.msel .mpop:not([hidden]){animation:fxSect .38s cubic-bezier(.2,.8,.2,1) both}
@keyframes fxSect{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:none}}
.tkSec[open]>*:not(summary){animation:fxSect .3s ease-out both}
/* history: muted tones, lines glide in */
.hiItem.hk1,.hiItem.hk2,.hiItem.hk3,.hiItem.hk4,.hiItem.hk5,.hiItem.hk6,.hiItem.hk7{animation:fxSlideH .4s ease-out both;border-left-width:4px}
.hiItem.hk1{--c:#8f3b3b;--b:#f3e8e6}.hiItem.hk2{--c:#a0662a;--b:#f4ebdd}.hiItem.hk3{--c:#8c7a2b;--b:#f3efdc}.hiItem.hk4{--c:#3f6b4f;--b:#e6efe8}.hiItem.hk5{--c:#2f5d8a;--b:#e3ecf3}.hiItem.hk6{--c:#43498a;--b:#e7e8f2}.hiItem.hk7{--c:#6b4a7a;--b:#efe7f2}
.tkSide .hiItem:nth-of-type(2){animation-delay:.05s}.tkSide .hiItem:nth-of-type(3){animation-delay:.1s}.tkSide .hiItem:nth-of-type(4){animation-delay:.15s}.tkSide .hiItem:nth-of-type(n+5){animation-delay:.2s}
@keyframes fxSlideH{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.hiSym.ok{color:#3f6b4f}.hiSym.sv{color:#8c6a2b}
/* a click on a button: a different small answer for every module group */
.fxb-ov{animation:fbPulse .4s}.fxb-leave{animation:fbShake .4s}.fxb-bill{animation:fbFlip .5s}.fxb-team{animation:fbJelly .5s}.fxb-cust{animation:fbRipple .6s}.fxb-docs{animation:fbDrop .45s}
.fxb-inw{animation:fbTilt .45s}.fxb-svc{animation:fbGlow .6s}.fxb-dsc{animation:fbSpin .5s}.fxb-mca{animation:fbBounce .5s}.fxb-task{animation:fbPop .4s}
@keyframes fbPulse{50%{transform:scale(1.07)}}@keyframes fbShake{20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}}
@keyframes fbFlip{50%{transform:perspective(400px) rotateX(70deg)}}@keyframes fbJelly{30%{transform:scale(1.1,.92)}50%{transform:scale(.94,1.08)}70%{transform:scale(1.04,.98)}}
@keyframes fbRipple{from{box-shadow:0 0 0 0 rgba(140,122,107,.65)}to{box-shadow:0 0 0 14px rgba(140,122,107,0)}}
@keyframes fbDrop{30%{transform:translateY(-6px)}60%{transform:translateY(2px)}}@keyframes fbTilt{30%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}}
@keyframes fbGlow{50%{box-shadow:0 0 16px 3px rgba(189,183,173,.75)}}@keyframes fbSpin{to{transform:rotate(360deg)}}@keyframes fbBounce{30%{transform:translateY(-7px)}55%{transform:none}75%{transform:translateY(-3px)}}@keyframes fbPop{40%{transform:scale(.92)}70%{transform:scale(1.08)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* file-pick labels look exactly like the main buttons */
body .view[data-g] label.upbtn,body label.upbtn{background:#151515;color:#f4f1ec;border:1px solid #151515;border-radius:6px;font-weight:600;transition:background .2s,box-shadow .2s,transform .12s}
body label.upbtn:hover{background:#3b3b3b;box-shadow:0 4px 12px rgba(21,21,21,.25);transform:translateY(-1px)}
body label.upbtn.sec,body .view[data-g] label.upbtn.sec{background:#bdb7ad;color:#151515;border:1px solid #8c7a6b}
/* Visit / Courier / Email: clear in every state */
body .iwModes button{background:#fbfaf8;color:#151515;border:1.5px solid #b9b3a8;border-radius:8px;padding:9px 22px;box-shadow:none;transform:none}
body .iwModes button:hover:not(:disabled){background:#e0d9cc;color:#151515;border-color:#8c7a6b;box-shadow:none;transform:translateY(-1px)}
body .iwModes button[aria-checked="true"],body .iwModes button[aria-checked="true"]:hover:not(:disabled){background:#151515;color:#f4f1ec;border-color:#151515}
body .iwModes button::after{display:none}
/* Open and Complete sit side by side */
#tlRows td:last-child,#myRows td:last-child,#tdRows td:last-child,#rfRows td:last-child{white-space:nowrap}
#tlRows td:last-child button+button,#tlRows td:last-child{display:table-cell}
body label.upbtn,body .row button{font-size:15px;line-height:1.2}
/* Visit / Courier / Email: light colours */
body .iwModes button:hover:not(:disabled){background:#ece7de;color:#151515;border-color:#8c7a6b}
body .iwModes button[aria-checked="true"],body .iwModes button[aria-checked="true"]:hover:not(:disabled){background:#d9d2c5;color:#151515;border-color:#8c7a6b;box-shadow:inset 0 0 0 1px #8c7a6b;font-weight:700}
body .iwModes button{background:#fbfaf8!important;color:#151515!important}
body .iwModes button:hover{background:#ece7de!important;color:#151515!important;box-shadow:none!important}
body .iwModes button[aria-checked="true"],body .iwModes button[aria-checked="true"]:hover{background:#d9d2c5!important;color:#151515!important;box-shadow:inset 0 0 0 1px #8c7a6b!important}

/* history like a chat: the customer on the left, the consultant and employees on the right */
.hiItem.hk8{--c:#2f6f6a;--b:#e1efec}.hiSym.st{color:#2f6f6a;font-size:15px}
.tkSide .hiItem[class*=" hk"]{max-width:92%;margin-left:0;margin-right:0;padding:8px 12px}
.tkSide .hiItem.hiR{margin-left:auto;border-left:0;border-right:4px solid var(--c);border-radius:14px 14px 3px 14px;text-align:left}
.tkSide .hiItem.hiL{margin-right:auto;border-right:0;border-left:4px solid var(--c);border-radius:14px 14px 14px 3px}
.tkSide .hiItem.hiR{animation-name:fxSlideR2}.tkSide .hiItem.hiL{animation-name:fxSlideL2}
@keyframes fxSlideR2{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}@keyframes fxSlideL2{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.tkSide .hiItem.hk8 .hiTxt{font-weight:600}
.hiItem.hk8{background:var(--b);border-radius:8px;padding:8px 12px;margin-bottom:8px;animation:fxSlideH .4s ease-out both}
.tkSide .hiItem.hk8{border-width:0;border-right:4px solid var(--c)}

/* general messages (status changed, completed, task created, allotted, head saved) sit in the middle, like WhatsApp notices */
.tkSide .hiItem.hiC{max-width:94%;margin:8px auto;text-align:center;border:1px solid var(--c)!important;border-radius:999px;padding:6px 14px;background:var(--b);font-size:12.5px}
.tkSide .hiItem.hiC .hiTop{display:block;font-size:11px;color:#6b6b6b;margin-bottom:1px}.tkSide .hiItem.hiC .hiTop b{font-weight:600}
.tkSide .hiItem.hiC .hiTxt{font-weight:600}
.tkSide .hiItem.hiC{animation-name:fxSect}
.tkSide .hiItem.hiC{border-radius:16px}
.tkSide .hiItem.hiC .hiTop{display:flex;flex-direction:column;align-items:center;line-height:1.3}

.tkSide .hiItem.hiC{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:999px;padding:5px 12px;margin:6px auto;max-width:96%;width:fit-content;font-size:12px}
.tkSide .hiItem.hiC .hiTxt{overflow:hidden;text-overflow:ellipsis}

.tkSide .hiItem.hiC.open{white-space:normal;border-radius:14px;overflow:visible;text-overflow:clip}.tkSide .hiItem.hiC.open .hiTxt{white-space:normal;overflow:visible}
.fcList{margin:8px 0}.fcRow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 10px;margin-bottom:6px;background:#ece8e1;border:1px solid #c9c3b9;border-radius:8px;animation:fxSect .25s ease-out both}
.fcName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.fcRm{height:30px!important;padding:0 12px!important;font-size:13px!important;flex:0 0 auto}

/* black lines instead of brown */
.top::after{background:#000!important;animation:none!important;height:3px}
.view[data-g] .card,.view[data-g].card,.card{border-top-color:#151515!important}
.view[data-g] .vhead h2::after{background:#151515!important}
/* the menu slides to the left when a module opens; the module gets the whole width */
.shell{overflow-x:hidden}
.side{transition:margin-left .45s cubic-bezier(.2,.8,.2,1),transform .45s cubic-bezier(.2,.8,.2,1),opacity .35s ease}
.content{transition:padding .45s ease}
body.sb-hide .side{margin-left:calc(var(--side) * -1);transform:translateX(-40px);opacity:0;pointer-events:none}
.sbBtn{display:none;width:40px;height:40px;padding:0!important;flex-direction:column;justify-content:center;align-items:center;gap:4px;flex:0 0 40px}
.sbBtn span{display:block;width:18px;height:2px;background:#f4f1ec;border-radius:2px;transition:transform .3s,width .3s}
.sbBtn:hover span:nth-child(2){width:12px}
.sbBtn[aria-expanded="false"] span:nth-child(1){transform:translateY(0) scaleX(.7)}
@media (min-width:1024px){.sbBtn:not([hidden]){display:inline-flex}}
@media (max-width:1023px){body.sb-hide .side{margin-left:0;transform:none;opacity:1;pointer-events:auto}}
/* history is wider */
@media (min-width:1100px){.tkSide,.tkDetail.fit .tkSide{width:480px}}
/* overflow-x:hidden on .shell made the menu stop sticking; clip does not */
.shell{overflow-x:clip!important;overflow:visible}
@supports not (overflow:clip){.shell{overflow-x:visible!important}body{overflow-x:hidden}}

/* Bulk message is its own module */
.view[data-view=bulk] .bkPanel{border:0;background:none;padding:0;box-shadow:none}
/* Task list: the module fills the screen, nothing scrolls except the boxes inside; it grows and shrinks with the menu */
@media (min-width:1101px){
  body[data-cur=tlist] .content{padding-bottom:28px}
  .view[data-view=tlist]:not([hidden]){display:flex;flex-direction:column;height:calc(100vh - 60px - 56px)}
  .view[data-view=tlist]>.card{flex:1 1 0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .view[data-view=tlist] #tlBox{flex:1 1 0;min-height:0;overflow:auto}
  .view[data-view=tlist] .tkDetail.fit:not([hidden]){height:auto;flex:1 1 0;min-height:0}
  .tkSide,.tkDetail.fit .tkSide{width:36%;min-width:300px;flex:0 0 36%}
}

/* the open task always fits the screen: nothing scrolls; the boxes share the height, hints and spacing shrink on a short screen, the tick boxes always stay */
@media (min-width:1101px){
  .tkDetail.fit .tkMain{overflow:hidden}
  .tkDetail.fit .tkTwo.tkTop{flex:1.15 1 0;min-height:0;grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}
  .tkDetail.fit .tkTwo:not(.tkTop){flex:1 1 0;min-height:0;grid-template-rows:minmax(0,1fr);grid-auto-rows:minmax(0,1fr)}
  .tkDetail.fit .tkCard>label,.tkDetail.fit .tkCard>.shareLbl,.tkDetail.fit .tkCard>h4,.tkDetail.fit .tkCard>input,.tkDetail.fit .tkCard>input[type=checkbox]{flex:none}
  .tkDetail.fit .tkCard.k-int textarea,.tkDetail.fit .tkCard.k-per textarea{flex:1 1 auto;height:auto;min-height:30px}
  .tkDetail.fit .tkCard .shareLbl{margin-top:3px}
  .tkDetail.fit .tkTop .tkCard{padding:8px 12px}
}
@media (min-width:1101px) and (max-height:960px){
  .tkDetail.fit .tkCard>p.muted{display:none}
  .tkDetail.fit .tkMain>.tkSec{margin-bottom:6px}
  .view[data-view=tlist]:has(.tkDetail:not([hidden])) .vhead{display:none}
  .view[data-view=tlist]:has(.tkDetail:not([hidden])){height:calc(100vh - 60px - 40px)}
  body[data-cur=tlist] .content{padding-top:12px;padding-bottom:12px}
}
@media (min-width:1101px) and (max-height:760px){
  .tkDetail.fit > p.muted{display:none}
  .tkDetail.fit .tkSteps{margin:4px 0 0}
  .tkDetail.fit .hd{padding-bottom:4px}
  .tkDetail.fit .hd h3{font-size:15px}
  .tkDetail.fit .tkTwo.tkTop{flex:1.3 1 0}
  .tkDetail.fit .tkCard{padding:6px 10px}.tkDetail.fit .tkTop .tkCard{padding:6px 10px}
  .tkDetail.fit .tkCard>input[type=file]{margin-top:2px}.tkDetail.fit .k-files .fileList{margin-top:2px;padding-top:2px}
  .tkDetail.fit .tkBar{padding-top:6px}
  .tkDetail.fit .k-files input[type=file]{padding:2px 6px;height:34px}.tkDetail.fit .k-files .shareLbl{font-size:13px;margin-top:2px}
  .tkDetail.fit .tkTwo.tkTop{flex:1.15 1 0}
}
@media (min-width:1101px){.view[data-view=tlist]>.card{padding:10px 12px}.view[data-view=tlist] .vhead{min-height:36px;margin-bottom:8px}.view[data-view=tlist] .vhead h2{line-height:36px}.tkDetail.fit:not([hidden]){padding:10px 16px}}

/* Notes list: Copy / Delete buttons - light, readable */
.noteItem .ncopy,.noteItem .ncopy:focus{background:#EFEBE4!important;color:#151515!important;border:1px solid #BDB7AD!important;border-radius:6px;box-shadow:none!important;transform:none!important;font-weight:600}
.noteItem .ncopy:hover{background:#E2DCD2!important;color:#151515!important;border-color:#8C7A6B!important}
.noteItem .ncopy:active{background:#D6CFC3!important}
.noteItem .ndel,.noteItem .ndel:hover,.noteItem .ndel:focus{background:none!important;color:#3B3B3B!important;box-shadow:none!important;transform:none!important}
.noteItem .ndel:hover{color:#151515!important}

/* Bulk message filter boxes: always light with dark text (also on hover / focus / open) */
body .msel>button,body .msel>button:hover,body .msel>button:focus,body .msel>button:active,body .msel>button[aria-expanded="true"]{background:#FBFAF8!important;color:#151515!important;border:1px solid #BDB7AD!important;box-shadow:none!important;transform:none!important;text-shadow:none!important}
body .msel>button:hover{background:#EFEBE4!important;border-color:#8C7A6B!important}
body .msel>button[aria-expanded="true"]{border-color:#151515!important}

/* themed popups (replace the browser's confirm / alert / prompt) */
.dlgBack{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(21,21,21,.55);backdrop-filter:blur(3px);animation:dlgFade .18s ease both}
.dlgBack.out{animation:dlgFadeOut .16s ease both}
.dlgBox{width:min(440px,100%);background:#F5F2EC;color:#151515;border:1px solid #BDB7AD;border-top:4px solid #151515;border-radius:14px;box-shadow:0 24px 60px rgba(21,21,21,.35);padding:18px 20px 16px;animation:dlgPop .26s cubic-bezier(.2,.9,.25,1.1) both}
.dlgHead{font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6B6B6B;margin-bottom:8px}
.dlgText p{margin:0 0 9px;font-size:15px;line-height:1.5;color:#151515;white-space:pre-wrap;word-break:break-word}
.dlgIn{width:100%;margin:4px 0 6px;padding:9px 11px;border:1px solid #BDB7AD;border-radius:8px;background:#fff;color:#151515;font:inherit}
.dlgIn:focus{outline:2px solid #8C7A6B;outline-offset:1px}
.dlgBar{display:flex;justify-content:flex-end;gap:10px;margin-top:12px}
.dlgBar button{min-width:88px;height:40px;padding:0 18px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;box-shadow:none!important;transform:none}
.dlgBar .dlgOk,.dlgBar .dlgOk:focus{background:#151515!important;color:#fff!important;border:1px solid #151515!important}
.dlgBar .dlgOk:hover{background:#3B3B3B!important;border-color:#3B3B3B!important}
.dlgBar .dlgNo,.dlgBar .dlgNo:focus{background:#EFEBE4!important;color:#151515!important;border:1px solid #BDB7AD!important}
.dlgBar .dlgNo:hover{background:#E2DCD2!important;border-color:#8C7A6B!important}
.dlgBar button:focus-visible{outline:2px solid #8C7A6B;outline-offset:2px}
@keyframes dlgFade{from{opacity:0}to{opacity:1}}@keyframes dlgFadeOut{to{opacity:0}}
@keyframes dlgPop{from{opacity:0;transform:translateY(14px) scale(.94)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.dlgBack,.dlgBox{animation:none}}

/* Overview dashboard */
.dbCard{padding:18px 20px}
.dbHead{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap}.dbHead h2{margin:0 0 2px}.dbHead p{margin:0}
.dbCtl{display:flex;gap:8px;align-items:center}.dbCtl select{height:38px;min-width:190px}.dbCtl button{height:38px;padding:0 16px}
.dbKpi{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:16px 0}
.dbK{background:#FBFAF8;border:1px solid #CFC9BE;border-top:4px solid #8C7A6B;border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px;animation:fxSect .4s cubic-bezier(.2,.8,.2,1) both}
.dbK small{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6B6B6B}.dbK b{font-size:32px;line-height:1.1;color:#151515;font-variant-numeric:tabular-nums}.dbK em{font-style:normal;font-size:12px;color:#6B6B6B;min-height:16px}
.dbc-tot{border-top-color:#151515}.dbc-ov{border-top-color:#A23E2F}.dbc-ov b{color:#A23E2F}.dbc-pr{border-top-color:#C48A2C}.dbc-pr b{color:#8A5E10}.dbc-run{border-top-color:#8C7A6B}.dbc-done{border-top-color:#4C7A5A}.dbc-done b{color:#3B6A49}
.dbCharts{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,2fr);gap:14px;margin-bottom:8px}
.dbPanel{background:#FBFAF8;border:1px solid #CFC9BE;border-radius:12px;padding:14px 16px;min-width:0;animation:fxSect .45s cubic-bezier(.2,.8,.2,1) both}.dbPanel h3{margin:0 0 10px;font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:#3B3B3B}
.dbWide{grid-column:auto}.dbCharts>.dbWide:nth-child(n+3){grid-column:1/-1}
.dbDonutBox{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.dbDonut{width:170px;height:170px;flex:none}.dbArc{transition:stroke-width .2s;animation:dbArc .9s ease both}.dbArc:hover{stroke-width:27}
.dbDonutN{font-size:30px;font-weight:700;fill:#151515}.dbDonutS{font-size:12px;fill:#6B6B6B}
.dbLegend{display:flex;flex-direction:column;gap:6px;min-width:130px;flex:1}.dbLegend div{display:flex;align-items:center;gap:8px;font-size:13px}.dbLegend i{width:12px;height:12px;border-radius:3px;flex:none}.dbLegend span{flex:1;color:#3B3B3B}.dbLegend b{font-variant-numeric:tabular-nums}
.dbBars{width:100%;height:auto;display:block}.dbBar{transform-box:fill-box;transform-origin:bottom;animation:dbGrow .6s cubic-bezier(.2,.8,.2,1) both}.dbVal{font-size:11px;font-weight:700;fill:#151515}.dbAx{font-size:10px;fill:#6B6B6B}
.dbStack{display:flex;flex-direction:column;gap:8px}.dbRow{display:grid;grid-template-columns:minmax(90px,200px) 1fr 34px;gap:10px;align-items:center;font-size:13px}.dbRow.pick{cursor:pointer}.dbRow.pick:hover .dbLbl{text-decoration:underline}
.dbLbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2A2A2A}.dbRow b{text-align:right;font-variant-numeric:tabular-nums}
.dbTrack{display:flex;height:20px;background:#E9E4DB;border-radius:6px;overflow:hidden}.dbTrack span{display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;transform-origin:left;animation:dbGrowX .6s cubic-bezier(.2,.8,.2,1) both}
.dbSec{margin-top:20px}.dbSecH{display:flex;align-items:center;gap:10px;margin-bottom:10px;padding-bottom:6px;border-bottom:2px solid #BDB7AD}.dbSecH h3{margin:0;font-size:16px;color:#151515}.dbCnt{background:#151515;color:#fff;border-radius:999px;font-size:12px;font-weight:700;padding:1px 10px}
.dbs-ov .dbSecH{border-bottom-color:#A23E2F}.dbs-ov .dbCnt{background:#A23E2F}.dbs-pr .dbSecH{border-bottom-color:#C48A2C}.dbs-pr .dbCnt{background:#C48A2C}.dbs-done .dbSecH{border-bottom-color:#4C7A5A}.dbs-done .dbCnt{background:#4C7A5A}
.dbGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
body .dbTask,body .dbTask:hover,body .dbTask:focus{display:flex;flex-direction:column;gap:6px;align-items:stretch;text-align:left;height:auto;min-height:0;width:auto;background:#FBFAF8!important;color:#151515!important;border:1px solid #CFC9BE!important;border-left:5px solid #8C7A6B!important;border-radius:10px!important;padding:11px 13px;box-shadow:none!important;font:inherit;font-weight:400;cursor:pointer;animation:fxSect .4s cubic-bezier(.2,.8,.2,1) both;transition:transform .18s ease,box-shadow .18s ease}
body .dbTask:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(21,21,21,.14)!important}
body .dbk-ov{border-left-color:#A23E2F!important}body .dbk-pr{border-left-color:#C48A2C!important}body .dbk-done{border-left-color:#4C7A5A!important}
.dbTop{display:flex;justify-content:space-between;gap:8px;align-items:baseline}.dbTop b{font-size:15px}.dbSvc{font-size:12px;color:#6B6B6B;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dbCust{font-size:14px;font-weight:600;word-break:break-word}.dbChips{display:flex;flex-wrap:wrap;gap:5px}.dbChip{font-size:11.5px;font-weight:600;background:#EFEBE4;border:1px solid #BDB7AD;border-radius:999px;padding:1px 9px;color:#3B3B3B}.dbPs{background:#fff}
.dbDue{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12.5px;color:#3B3B3B}.dbMeta{font-size:12px;color:#6B6B6B}
.dbPill{font-size:11.5px;font-weight:700;border-radius:999px;padding:1px 9px;border:1px solid #BDB7AD;background:#fff}.dbp-ov{background:#F3DCD8;color:#7A1F14;border-color:#D9A8A0}.dbp-pr{background:#F4E8CC;color:#6B4A0B;border-color:#DCC28A}.dbp-ok{background:#DDEBDD;color:#1F5A2E;border-color:#A9CBAE}
.dbProg{display:flex;flex-direction:column;gap:3px}.dbProg i{display:block;height:6px;border-radius:4px;min-width:3px;transform-origin:left;animation:dbGrowX .7s ease both}.dbProg{position:relative}.dbProg::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:#E3DED5;border-radius:4px;z-index:0}.dbProg i{position:relative;z-index:1}.dbProg small{font-size:11.5px;color:#6B6B6B}
.dbEmp{font-size:12px;font-weight:600;color:#5D4F43;border-top:1px dashed #CFC9BE;padding-top:5px}.dbMore{margin-top:10px;height:36px;padding:0 16px}
@keyframes dbGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}@keyframes dbGrowX{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes dbArc{from{opacity:0}to{opacity:1}}
@media (max-width:1100px){.dbKpi{grid-template-columns:repeat(3,minmax(0,1fr))}.dbCharts{grid-template-columns:1fr}}
@media (max-width:600px){.dbKpi{grid-template-columns:repeat(2,minmax(0,1fr))}.dbCtl{width:100%}.dbCtl select{flex:1}.dbRow{grid-template-columns:90px 1fr 28px}}
@media (prefers-reduced-motion:reduce){.dbBar,.dbTrack span,.dbProg i,.dbArc{animation:none}}

.hiImg{display:block;margin-top:6px;text-decoration:none}.hiImg img{display:block;max-width:100%;max-height:220px;border-radius:8px;border:1px solid rgba(0,0,0,.12);background:#fff;object-fit:contain}.hiImg span{display:block;margin-top:2px}

.tkAi{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}.tkAi select{max-width:100%}
/* AI helper: one slim row at the top of the task, so the note boxes, Notes and Attach files all stay on one screen */
.tkAi{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 6px;flex:none}
.tkAi select{width:auto;max-width:100%;padding:4px 8px;font-size:13px;height:auto}
.tkAi button{padding:4px 10px;font-size:13px;line-height:1.4}
.tkAi .small{font-size:12px}
/* everything of the task on ONE screen: tighter spacing, the grey hints inside the boxes are hidden */
@media (min-width:1101px){
  .tkDetail.fit:not([hidden]){height:calc(100vh - 96px);padding:8px 16px}
  .tkDetail.fit .hd{padding-bottom:2px}
  .tkDetail.fit .hd h3{font-size:16px;margin:0}
  .tkDetail.fit .tkSteps{margin:4px 0 0}
  .tkDetail.fit > p.muted{margin:0 0 2px;font-size:12px}
  .tkDetail.fit .tkMain > .tkSec{margin-bottom:4px}
  .tkDetail.fit .tkCard > p.muted{display:none}
  .tkDetail.fit .tkCard{padding:6px 10px}
  .tkDetail.fit .tkCard h4{margin:0 0 3px;font-size:14px}
  .tkDetail.fit .tkTwo{margin-bottom:4px;gap:8px}
  .tkDetail.fit .tkCard .shareLbl{margin-top:2px;font-size:13px}
  .tkDetail.fit .tkCard textarea{min-height:40px}
  .tkDetail.fit .tkBar{padding-top:6px;padding-bottom:2px}
  .tkDetail.fit .tkAi{margin:0 0 4px}
}
/* short screens (laptops): the grey info lines of the task are hidden so the boxes and the Save / Complete buttons fit */
@media (min-width:1101px) and (max-height:800px){
  .tkDetail.fit > p.muted{display:none}
  .tkDetail.fit .tkSteps{margin:2px 0 0}
  .tkDetail.fit .hd{padding-bottom:0}
  .tkDetail.fit .tkMain > .tkSec .secBody{max-height:22vh}
  .tkDetail.fit .tkCard{padding:5px 9px}
  .tkDetail.fit .tkTwo{min-height:96px}
}

/* the row under the internal note box: language, AI buttons, and the two switches */
.tkTools{display:flex;flex-wrap:wrap;gap:5px;align-items:center;margin:5px 0 0;flex:none}
.tkTools select{width:auto;max-width:130px;padding:3px 6px;font-size:12.5px;height:auto}
.tkTg{padding:3px 9px;font-size:12.5px;line-height:1.4;border-radius:999px;background:#fff;color:var(--ink,#151515);border:1px solid var(--line-2,#b3ada3);cursor:pointer;white-space:nowrap}
.tkTg.ai{background:#efe9f7;border-color:#b9a7d6;color:#3d2a63}
.tkTg.on{background:#151515;color:#fff;border-color:#151515}
.tkTg:disabled{opacity:.55;cursor:wait}
.tkAm{margin:3px 0 0;flex:none;min-height:0}
.tkAm:empty{display:none}

/* ---- sign in page (consultant and employee): split card with a calm animated panel ---- */
.login { position: relative; align-items: center; min-height: calc(100vh - 60px); padding: 32px 16px; overflow: hidden; }
.login::before, .login::after { content: ""; position: absolute; border-radius: 50%; filter: blur(60px); opacity: .5; pointer-events: none; animation: lgDrift 14s ease-in-out infinite alternate; }
.login::before { width: 360px; height: 360px; left: 8%; top: 6%; background: #c9bfae; }
.login::after { width: 300px; height: 300px; right: 8%; bottom: 4%; background: #b8c4d6; animation-delay: -7s; }
.logincard { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; max-width: 880px; padding: 0; overflow: hidden; border: 0; border-radius: 20px; background: #fff; box-shadow: 0 24px 70px rgba(21, 21, 21, .18); animation: lgIn .6s cubic-bezier(.2, .8, .2, 1) both; }
.lgForm { padding: 44px 40px; display: flex; flex-direction: column; justify-content: center; }
.lgForm h1 { margin: 0 0 8px; font-size: 26px; letter-spacing: -.01em; animation: lgUp .5s .15s both; }
.lgForm > div, .lgForm > p { animation: lgUp .5s .25s both; }
.lgForm label { font-weight: 600; font-size: 13.5px; }
.lgForm input { height: 46px; border-radius: 10px; transition: border-color .2s, box-shadow .2s, background .2s; }
.lgForm input:focus { outline: 0; border-color: #151515; box-shadow: 0 0 0 4px rgba(21, 21, 21, .1); }
.lgForm button.wide { height: 48px; border-radius: 10px; background: linear-gradient(135deg, #151515, #3b3b3b); position: relative; overflow: hidden; transition: transform .2s, box-shadow .2s; }
.lgForm button.wide:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(21, 21, 21, .28); }
.lgForm button.wide:active { transform: translateY(0); }
.lgForm button.wide::after { content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .25), transparent); animation: lgShine 3.6s ease-in-out infinite; }
.lgHero { position: relative; overflow: hidden; padding: 40px 34px; color: #fff; display: flex; flex-direction: column; justify-content: center; background: linear-gradient(150deg, #151515 0%, #2b2926 55%, #4a4036 100%); }
.lgHero h2 { color: #fff !important; margin: 14px 0 8px; font-size: 25px; line-height: 1.2; letter-spacing: -.01em; position: relative; }
.lgHero p { margin: 0 0 14px; color: #d8d3ca; position: relative; }
.lgHero ul { list-style: none; margin: 0; padding: 0; position: relative; }
.lgHero li { padding-left: 24px; margin: 6px 0; position: relative; color: #ece8e1; font-size: 14px; animation: lgUp .5s both; }
.lgHero li:nth-child(1) { animation-delay: .5s; } .lgHero li:nth-child(2) { animation-delay: .65s; } .lgHero li:nth-child(3) { animation-delay: .8s; }
.lgHero li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 17px; height: 17px; border-radius: 50%; background: #2f9e63; color: #fff; font-size: 11px; line-height: 17px; text-align: center; }
.lgHero .orb { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .07); animation: lgFloat 9s ease-in-out infinite; }
.lgHero .o1 { width: 180px; height: 180px; right: -60px; top: -50px; } .lgHero .o2 { width: 110px; height: 110px; left: -30px; bottom: 40px; animation-delay: -3s; } .lgHero .o3 { width: 60px; height: 60px; right: 40px; bottom: -14px; animation-delay: -6s; }
.lgArt { width: 190px; max-width: 70%; position: relative; animation: lgFloat 6s ease-in-out infinite; filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .35)); }
.lgBar, .lgLn { transform-box: fill-box; transform-origin: 0 100%; animation: lgGrow .9s cubic-bezier(.2, .8, .2, 1) both; }
.lgLn { transform-origin: 0 50%; animation-name: lgLine; }
.lgLn.l1 { animation-delay: .5s; } .lgLn.l2 { animation-delay: .65s; } .lgLn.l3 { animation-delay: .8s; }
.lgBar.b1 { animation-delay: .9s; } .lgBar.b2 { animation-delay: 1.05s; } .lgBar.b3 { animation-delay: 1.2s; }
.lgTick { transform-box: fill-box; transform-origin: center; animation: lgPop .7s 1.4s cubic-bezier(.2, 1.6, .4, 1) both; }
#vLogin[data-mode="m"] .lgHero { background: linear-gradient(150deg, #1e3a5f 0%, #1b2f4a 60%, #2b4a6e 100%); }
@keyframes lgIn { from { opacity: 0; transform: translateY(22px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lgUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes lgFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes lgDrift { from { transform: translate(0, 0); } to { transform: translate(60px, 40px); } }
@keyframes lgGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes lgLine { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes lgPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes lgShine { 0%, 55% { left: -60%; } 100% { left: 130%; } }
@media (max-width: 760px) {
  .logincard { grid-template-columns: 1fr; max-width: 440px; }
  .lgHero { padding: 22px 22px 18px; } .lgHero .lgArt, .lgHero p, .lgHero ul { display: none; } .lgHero h2 { margin: 0; font-size: 20px; }
  .lgForm { padding: 26px 22px 28px; }
}
@media (prefers-reduced-motion: reduce) { .login::before, .login::after, .logincard, .lgForm *, .lgHero *, .lgArt, .lgBar, .lgLn, .lgTick { animation: none !important; } }

/* AI: "change this message" row under the note box */
.tkRf { display: flex; gap: 5px; margin: 5px 0 0; flex: none; } .tkRf:empty { display: none; }
.tkRf input { flex: 1; min-width: 0; height: 30px; padding: 0 9px; font-size: 12.5px; border-radius: 8px; }

.tkAm { overflow-wrap: anywhere; max-height: 3.4em; overflow-y: auto; line-height: 1.35; }

/* ---- task page: two buttons (Internal note / Personal note) open ONE box on the left; Notes and Attach files are on the right ---- */
.tkTabs { display: flex; gap: 6px; flex: none; margin: 0 0 8px; }
.tkTab { height: 36px; padding: 0 16px; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); font-weight: 600; cursor: pointer; transition: background .15s, color .15s, box-shadow .15s; }
.tkTab:hover { background: #f1eee8; }
.tkTab.on { background: #151515; color: #fff; border-color: #151515; box-shadow: 0 4px 12px rgba(21, 21, 21, .2); }
.tkLeft, .tkRight { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.tkLeft > .tkCard { flex: 1 1 auto; } .tkRight > .tkCard { flex: 1 1 auto; }
.tkLeft .tkCard > h4 { display: none; } .tkLeft .tkCard > p.muted { display: none; }
.tkWork.one { grid-template-columns: 1fr; }
.tkPv { flex: none; max-height: 130px; overflow: auto; margin-top: 6px; padding: 6px 10px; border: 1px dashed var(--line-2); border-radius: 8px; background: #fff; font-size: 13.5px; line-height: 1.45; }
.tkPv p, .hiBody p, .ntext p, .tkMsgTx p { margin: 0 0 6px; } .tkPv ul, .tkPv ol, .hiBody ul, .hiBody ol, .ntext ul, .ntext ol { margin: 0 0 6px; padding-left: 20px; } .tkPv h3, .hiBody h3 { font-size: 14px; margin: 0 0 4px; }
@media (min-width: 1101px) {
  .tkDetail.fit .tkWork { flex: 1 1 0; min-height: 0; grid-template-rows: minmax(0, 1fr); grid-auto-rows: minmax(0, 1fr); margin-bottom: 8px; }
  .tkDetail.fit .tkLeft, .tkDetail.fit .tkRight { min-height: 0; }
  .tkDetail.fit .tkLeft > .tkCard, .tkDetail.fit .tkRight > .tkCard { flex: 1 1 0; min-height: 0; }
  .tkDetail.fit .tkRight > .tkCard { flex: 1 1 0; }
  .tkDetail.fit .tkLeft .tkCard textarea { flex: 1 1 auto; min-height: 90px; }
  .tkDetail.fit .tkLeft .tkCard.k-per textarea { min-height: 120px; }
}

.tkPv::before { content: "The customer sees:"; display: block; font-size: 11px; color: var(--mut); margin-bottom: 2px; }
.tkPv { flex: 0 1 auto; min-height: 36px; max-height: 120px; }
.tkRf .tkTg { height: 30px; padding-top: 0; padding-bottom: 0; }
@media (min-width: 1101px) { .tkDetail.fit .tkLeft .tkCard textarea { min-height: 56px; } .tkDetail.fit .tkTabs { margin-bottom: 6px; } .tkDetail.fit .tkLeft .tkCard { padding-top: 8px; } }

/* the note box shows the message as the customer will see it */
.tkEd { flex: 1 1 auto; min-height: 90px; overflow: auto; padding: 8px 10px; border: 1px solid var(--line-2); border-radius: 8px; background: #fff; font-size: 14px; line-height: 1.5; outline: 0; word-break: break-word; }
.tkEd:focus { border-color: #151515; box-shadow: 0 0 0 3px rgba(21, 21, 21, .1); }
.tkEd:empty::before { content: attr(data-ph); color: #9a958c; }
.tkEd p { margin: 0 0 6px; } .tkEd ul, .tkEd ol { margin: 0 0 6px; padding-left: 22px; } .tkEd h3 { font-size: 14.5px; margin: 0 0 4px; }
@media (min-width: 1101px) { .tkDetail.fit .tkLeft .tkEd { min-height: 70px; } }
.hiSend { margin-top: 6px; height: 28px; padding: 0 12px; border-radius: 999px; background: #fff; color: var(--ink); border: 1px solid var(--line-2); font-size: 12.5px; font-weight: 600; cursor: pointer; }
.hiSend:hover { background: #151515; color: #fff; }

/* the CA logo turns like a coin while the AI is writing */
.tkEdW { position: relative; flex: 1 1 auto; min-height: 90px; display: flex; } .tkEdW .tkEd { flex: 1 1 auto; min-height: 0; }
.tkLd { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; background: rgba(255, 255, 255, .88); border-radius: 8px; backdrop-filter: blur(1px); }
.tkLdImg { width: 54px; height: 54px; object-fit: contain; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(21, 21, 21, .25); animation: tkCoin 1.1s linear infinite; }
.tkLdTx { font-weight: 600; color: var(--ink); font-size: 14px; animation: tkPulse 1.4s ease-in-out infinite; }
@keyframes tkCoin { to { transform: rotateY(360deg); } }
@keyframes tkPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@media (min-width: 1101px) { .tkDetail.fit .tkLeft .tkEdW { min-height: 70px; } .tkDetail.fit .tkLeft .tkEdW .tkEd { min-height: 0; } }
@media (prefers-reduced-motion: reduce) { .tkLdImg, .tkLdTx { animation: none; } }
.tkDetail.fit .tkLdImg { width: 42px; height: 42px; } .tkDetail.fit .tkLd { gap: 6px; }

/* the coin: both faces carry the logo, it turns all the time (same idea as the dashboard's loading coin; kept moving even when the system asks for less motion, it is a loader) */
.tkCoinW { perspective: 600px; } .tkCoin { position: relative; width: 56px; height: 56px; transform-style: preserve-3d; animation: tkCoin 1.2s linear infinite; }
.tkCoin .cf { position: absolute; inset: 0; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 4px 14px rgba(21, 21, 21, .3), inset 0 0 0 2px #d9c27a; }
.tkCoin .cf.cb { transform: rotateY(180deg); } .tkCoin .cf img { width: 74%; height: auto; display: block; }
.tkDetail.fit .tkCoin { width: 44px; height: 44px; }
.tkLdImg { display: none; }
@media (prefers-reduced-motion: reduce) { .tkCoin { animation: tkCoin 1.2s linear infinite !important; } .tkLdTx { animation: none; } }

.stCard{max-width:none;width:100%;box-sizing:border-box;padding-bottom:16px}.stCard>p{margin:0 0 10px}.stCard label{display:block;margin:0 0 3px;font-weight:600;font-size:13px}.stCard input[type=text],.stCard input[type=tel]{width:100%;box-sizing:border-box}
.stLogo{display:flex;gap:14px;align-items:center;margin:0 0 12px}.stLogo img{height:64px;width:auto;max-width:130px;border-radius:10px;object-fit:contain;background:#fff;border:1px solid #dde3ec}
.stCard #stClrL{display:inline;font-weight:400;margin-left:8px}
.stGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px 18px}.stGrid .row{flex-wrap:nowrap}.stGrid .row select{flex:0 0 150px}
.stAct{margin-top:12px!important;align-items:center;gap:12px}.stAct .msg{margin:0}
@media(max-width:640px){.stGrid{grid-template-columns:1fr}}

.regV{background:none;border:0;padding:2px 4px;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;border-radius:6px;word-break:break-all}.regV:hover{background:rgba(30,58,95,.1);text-decoration:underline}.regV.has{font-weight:700}
.crOv{position:fixed;inset:0;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;z-index:900;padding:16px}
.crBox{background:#fff;border-radius:14px;padding:18px 20px;width:100%;max-width:420px;box-shadow:0 18px 50px rgba(0,0,0,.3);max-height:92vh;overflow:auto}.crBox h3{margin:0 0 2px}.crBox label{display:block;margin:10px 0 3px;font-weight:600;font-size:13px}.crBox input{width:100%;box-sizing:border-box}
.crPw{flex-wrap:nowrap;gap:8px}.crPw .crSh{flex:0 0 auto}.crAct{margin-top:12px;gap:8px}
.tkRegSel{max-width:230px}
table button.regV, button.regV { background: transparent !important; color: inherit !important; box-shadow: none !important; border: 0 !important; height: auto !important; min-height: 0 !important; padding: 2px 4px !important; margin: 0 !important; font: inherit !important; font-size: inherit !important; text-transform: none !important; letter-spacing: normal !important; width: auto; text-align: left; transform: none !important; }
table button.regV:hover, button.regV:hover { background: rgba(30,58,95,.1) !important; text-decoration: underline; }
table button.regV.has { font-weight: 700 !important; }
.qTip{position:fixed;z-index:1000;background:#111827;color:#fff;font-size:12.5px;line-height:1.3;padding:6px 10px;border-radius:7px;box-shadow:0 6px 18px rgba(0,0,0,.25);pointer-events:none;max-width:min(320px,92vw)}

/* consultant code in the header, next to the name */
.who { flex: 0 1 auto; } .top .sp { flex: 1; }
.hdCode { display: flex; align-items: center; gap: 8px; margin-left: 10px; padding: 3px 4px 3px 12px; border: 1px solid rgba(255,255,255,.28); border-radius: 10px; background: rgba(255,255,255,.08); color: #fff; cursor: pointer; white-space: nowrap; }
.hdCode[hidden] { display: none; }
.hdCode small { opacity: .75; font-size: 11.5px; } .hdCode b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 2px; font-size: 15px; }
.hdCode button { height: 28px; padding: 0 12px; font-size: 12.5px; }
@media (max-width: 760px) { .hdCode { margin-left: 4px; padding-left: 8px; gap: 5px; } .hdCode small { display: none; } .hdCode b { font-size: 12.5px; letter-spacing: 1px; } .hdCode button { padding: 0 8px; } }
/* overview: search + tables with pages */
.dbSearch { margin: 4px 0 10px; } .dbSearch input { width: 100%; max-width: 520px; box-sizing: border-box; }
.dbTbl { width: 100%; border-collapse: collapse; font-size: 14px; } .dbTbl th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; padding: 9px 12px; white-space: nowrap; }
.dbTbl td { padding: 10px 12px; vertical-align: middle; border-top: 1px solid rgba(0,0,0,.08); }
.dbTbl tr.dbRowGo { cursor: pointer; } .dbTbl tr.dbRowGo:hover td { background: rgba(30,58,95,.07); } .dbTbl tr.dbRowGo:focus-visible { outline: 2px solid var(--blue, #2563eb); outline-offset: -2px; }
.dbTbl td:first-child { font-weight: 700; white-space: nowrap; }
.dbPg { display: flex; align-items: center; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.dbPg button { height: 32px; padding: 0 14px; } .dbPg button:disabled { opacity: .45; cursor: default; }
@media (max-width: 760px) { .dbTbl { font-size: 12.5px; } .dbTbl th, .dbTbl td { padding: 8px 8px; } .dbPg { justify-content: space-between; } }
/* phone: the menu is a drawer that stays closed after a module / task opens; only the menu button opens it */
@media (max-width:1023px){body.sb-hide .side{margin-left:0;opacity:1;pointer-events:auto;transform:translateX(-102%)}body.sb-hide .side.open{transform:none}}

/* overview: table on computer, the old cards on phone */
.dbCardsM{display:none}
@media (max-width:760px){.dbCardsM{display:grid}button.dbCardsM{display:inline-block}.dbTblD{display:none!important}}
@media (min-width:761px){.dbCardsM{display:none!important}}

.dvCard,.cvCard{margin-top:22px;padding-top:14px;border-top:1px solid rgba(0,0,0,.12)} .dvCard .row,.cvCard .row{align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .dvCard select,.cvCard select{width:80px}

.atBar{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;margin:10px 0} .atBar>div{min-width:150px}

.acOv { position: fixed; inset: 0; z-index: 6000; background: rgba(16,24,40,.55); display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 24px 12px; }
.acOv[hidden] { display: none; }
.acBox { position: relative; background: #fff; border-radius: 10px; width: 100%; max-width: 860px; padding: 10px 6px 6px; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.acX { position: absolute; right: 10px; top: 6px; z-index: 2; border: 0; background: transparent; font-size: 28px; line-height: 1; cursor: pointer; }

.empSug { position: absolute; left: 0; right: 0; top: 100%; z-index: 30; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.18); max-height: 220px; overflow-y: auto; margin-top: 2px; }
.empSug[hidden] { display: none; }
.empIt, .empNo { padding: 9px 12px; font-size: 14px; }
.empIt { cursor: pointer; } .empIt:hover { background: #eef2f8; }
.empNo { color: #6b7280; }

/* Task list: the Open / Complete buttons stay in view on the right while the table scrolls sideways */
@media (min-width: 761px) {
  #tlBox th:last-child, #tlBox td:last-child { position: sticky; right: 0; z-index: 2; box-shadow: -6px 0 8px -6px rgba(0,0,0,.25); }
  #tlBox td:last-child { background: #f7f5f1; white-space: nowrap; }
  #tlBox th:last-child { background: #3b3b3b; }
  #tlBox td, #tlBox th { padding-left: 10px; padding-right: 10px; }
}

.tfBar { position: relative; margin: 4px 0 10px; max-width: 520px; } .tfBar input { width: 100%; box-sizing: border-box; }

/* Attach files: many chosen files / many files already attached can be scrolled to (the card scrolls, nothing is cut off) */
.tkDetail.fit .tkCard.k-files { overflow-y: auto !important; min-height: 0; }
.tkDetail.fit .tkCard.k-files > * { flex: none !important; }
.tkCard.k-files .fcList { max-height: none; }