/* CarpaTech admin ticket desk.
   Every class is prefixed ctk- on purpose: this file is loaded alongside the
   portal's own stylesheet, and a bare .card or .chip here would silently restyle
   half the portal. The tokens (--bg, --panel, --ink, --soft, --accent, --steel,
   --line, --bad) come from portal/index.html; only --ok is new. */

.ctk { --ok:#3f9a6d; --ok-dim:rgba(63,154,109,.16); }

.ctk-loading { color:var(--soft); font-size:.92rem; padding:1.5rem 0 }
.ctk-muted   { color:var(--soft); font-weight:300 }

/* ------------------------------------------------------------------ head -- */

.ctk-top { display:flex; align-items:flex-start; justify-content:space-between;
           gap:1.5rem; flex-wrap:wrap; margin-bottom:1.4rem }
.ctk-h1  { font-size:1.35rem; font-weight:300; letter-spacing:.01em; margin:0 0 .3rem }
.ctk-sub { color:var(--soft); font-size:.9rem; margin:0 }

.ctk-seg { display:inline-flex; border:1px solid var(--line); border-radius:9px; overflow:hidden }
.ctk-seg__b { background:none; border:0; padding:.5rem 1rem; color:var(--soft); cursor:pointer;
              font-family:var(--font); font-size:.82rem; transition:color .15s, background .15s }
.ctk-seg__b:hover  { color:var(--ink) }
.ctk-seg__b.is-on  { background:rgba(34,102,145,.22); color:var(--ink) }

/* ------------------------------------------------------------------ tabs -- */

.ctk-tabs { display:flex; gap:.2rem; flex-wrap:wrap;
            border-bottom:1px solid var(--line); margin-bottom:1rem }
.ctk-tab  { background:none; border:0; border-bottom:2px solid transparent; margin-bottom:-1px;
            padding:.6rem .9rem; color:var(--soft); cursor:pointer;
            font-family:var(--font); font-size:.85rem; display:flex; align-items:center; gap:.45rem }
.ctk-tab:hover { color:var(--ink) }
.ctk-tab.is-on { color:var(--ink); border-bottom-color:var(--accent) }
.ctk-tab__n { font-family:var(--mono); font-size:.62rem; padding:.12rem .38rem; border-radius:999px;
              background:rgba(147,161,176,.16); color:var(--soft) }
.ctk-tab__n.is-hot { background:rgba(217,165,32,.18); color:var(--accent) }

/* ---------------------------------------------------------- search bar ---- */

.ctk-bar { display:flex; gap:.6rem; align-items:center; margin-bottom:1rem; flex-wrap:wrap }
.ctk-search { flex:1; min-width:14rem; display:flex; align-items:center; gap:.5rem;
              background:var(--panel); border:1px solid var(--line); border-radius:9px;
              padding:0 .75rem; color:var(--soft) }
.ctk .ctk-search input { flex:1; width:100%; background:none; border:0; padding:.62rem 0;
                         color:var(--ink); font-family:var(--font); font-size:.88rem }
.ctk .ctk-search input:focus { outline:none }
.ctk-search:focus-within { border-color:var(--steel) }

.ctk-filterbox { display:flex; gap:.8rem; flex-wrap:wrap; align-items:flex-end;
                 background:var(--panel); border:1px solid var(--line); border-radius:11px;
                 padding:1rem 1.1rem; margin-bottom:1rem }
.ctk-filterbox label { display:flex; flex-direction:column; gap:.35rem; font-size:.74rem;
                       letter-spacing:.08em; text-transform:uppercase; color:var(--soft) }

/* --------------------------------------------------------------- buttons -- */

.ctk-btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem;
           background:var(--steel); color:#fff; border:0; border-radius:9px;
           padding:.6rem 1.15rem; cursor:pointer;
           font-family:var(--font); font-size:.86rem; font-weight:500 }
.ctk-btn:disabled { opacity:.55; cursor:default }
.ctk-btn--ghost { background:none; border:1px solid var(--line); color:var(--ink) }
.ctk-btn--ghost:hover  { border-color:var(--steel) }
.ctk-btn--ghost.is-on  { border-color:var(--accent); color:var(--accent) }
.ctk-btn--ghost.is-busy { opacity:.5 }
.ctk-btn--go { background:var(--ok); font-size:.95rem; padding:.8rem 1.6rem; width:100% }

.ctk-link { background:none; border:0; padding:.35rem 0; color:var(--soft); cursor:pointer;
            font-family:var(--font); font-size:.82rem;
            display:inline-flex; align-items:center; gap:.35rem }
.ctk-link:hover { color:var(--accent) }

.ctk-back { background:none; border:1px solid var(--line); border-radius:9px; cursor:pointer;
            color:var(--soft); padding:.42rem .5rem; line-height:0 }
.ctk-back:hover { color:var(--ink); border-color:var(--steel) }

.ctk-ic { width:1.05rem; height:1.05rem; flex:none }
.ctk-ic--big { width:2.4rem; height:2.4rem; opacity:.35 }

/* ----------------------------------------------------------------- chips -- */

.ctk-chip { display:inline-block; font-family:var(--mono); font-size:.62rem; letter-spacing:.07em;
            padding:.22rem .5rem; border:1px solid var(--line); border-radius:999px;
            color:var(--soft); white-space:nowrap }
.ctk-chip--wait  { border-color:rgba(217,165,32,.45); color:var(--accent) }
.ctk-chip--live  { border-color:rgba(34,102,145,.6);  color:#8ec2e6 }
.ctk-chip--done  { border-color:rgba(147,161,176,.3); color:var(--soft) }
.ctk-chip--quote { border-color:rgba(34,102,145,.6);  color:#8ec2e6 }
.ctk-chip--who   { border-color:rgba(147,161,176,.35); color:var(--ink) }
.ctk-chip--warn  { border-color:rgba(217,165,32,.35); color:var(--accent) }
.ctk-chip--quiet { border-color:var(--line); color:var(--soft) }
.ctk-chip--ok    { border-color:rgba(63,154,109,.5); color:#79c39c }
.ctk-chip--bad   { border-color:rgba(224,119,106,.55); color:#e0a49b;
                   background:rgba(224,119,106,.08) }

.ctk-pill { font-family:var(--mono); font-size:.58rem; letter-spacing:.08em; text-transform:uppercase;
            padding:.18rem .45rem; border-radius:5px; background:rgba(147,161,176,.14); color:var(--soft) }
.ctk-pill--done { background:var(--ok-dim); color:#79c39c }
.ctk-pill--int  { background:rgba(224,119,106,.14); color:#e0a49b }

/* ---------------------------------------------------------------- kanban -- */

/* Five columns that scroll sideways rather than squeezing to nothing. A board
   that reflows to one narrow column per status is unreadable at five statuses. */
.ctk-kanban { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(15rem,1fr);
              gap:.8rem; overflow-x:auto; padding-bottom:.6rem }
.ctk-col    { background:rgba(255,255,255,.012); border:1px solid var(--line);
              border-radius:12px; display:flex; flex-direction:column; min-height:8rem }
.ctk-col__h { display:flex; justify-content:space-between; align-items:center;
              padding:.7rem .85rem; border-bottom:1px solid var(--line);
              font-size:.74rem; letter-spacing:.09em; text-transform:uppercase; color:var(--soft) }
.ctk-col__n { font-family:var(--mono); font-size:.66rem; color:var(--soft) }
.ctk-col__b { padding:.6rem; display:flex; flex-direction:column; gap:.55rem }
.ctk-col__none { color:var(--soft); font-size:.78rem; margin:.4rem .25rem; opacity:.6 }

.ctk-card { display:flex; flex-direction:column; gap:.45rem; width:100%; text-align:left;
            background:var(--panel); border:1px solid var(--line); border-radius:10px;
            padding:.75rem .8rem; cursor:pointer; font-family:var(--font); color:var(--ink);
            transition:border-color .15s }
.ctk-card:hover  { border-color:var(--steel) }
.ctk-card.is-bad { border-left:2px solid var(--bad) }
.ctk-card__t { font-size:.88rem; line-height:1.4 }
.ctk-card__p { font-size:.76rem; color:var(--soft) }
.ctk-card__c { display:flex; flex-wrap:wrap; gap:.3rem }
.ctk-card__f { display:flex; justify-content:space-between; align-items:center;
               gap:.5rem; font-size:.72rem; color:var(--soft); margin-top:.15rem }
.ctk-who { display:inline-flex; align-items:center; gap:.3rem; overflow:hidden;
           text-overflow:ellipsis; white-space:nowrap }
.ctk-who .ctk-ic { width:.85rem; height:.85rem }
.ctk-age { white-space:nowrap }

/* ------------------------------------------------------------------ list -- */

.ctk-list  { border-top:1px solid var(--line) }
.ctk-lrow  { display:flex; width:100%; gap:1rem; align-items:center; text-align:left;
             background:none; border:0; border-bottom:1px solid var(--line);
             padding:.85rem .2rem; cursor:pointer; font-family:var(--font); color:var(--ink) }
.ctk-lrow:hover b { color:var(--accent) }
.ctk-lrow.is-bad  { border-left:2px solid var(--bad); padding-left:.7rem }
.ctk-lrow__m { flex:1; line-height:1.5 }
.ctk-lrow__m b { font-weight:400; font-size:.9rem }
.ctk-lrow__s { display:block; font-size:.76rem; color:var(--soft) }
.ctk-lrow__c { display:flex; gap:.3rem; flex-wrap:wrap; justify-content:flex-end }

.ctk-empty { display:flex; flex-direction:column; align-items:center; gap:.8rem;
             padding:3.5rem 1rem; color:var(--soft); font-size:.9rem }
.ctk-empty p { margin:0 }

/* ---------------------------------------------------------- detail head --- */

.ctk-dhead { display:flex; align-items:center; gap:.7rem; flex-wrap:wrap; margin-bottom:.4rem }
.ctk-dtitle { font-size:1.15rem; font-weight:400; margin:0; line-height:1.4 }
.ctk-dchips { display:flex; gap:.3rem; flex-wrap:wrap; align-items:center }
.ctk-did { margin-left:auto; display:flex; align-items:center; gap:.35rem }
.ctk-did code { font-family:var(--mono); font-size:.7rem; letter-spacing:.06em; color:var(--soft) }
.ctk-copy { background:none; border:1px solid var(--line); border-radius:6px; cursor:pointer;
            color:var(--soft); padding:.25rem; line-height:0 }
.ctk-copy:hover  { color:var(--ink) }
.ctk-copy.is-ok  { color:#79c39c; border-color:rgba(63,154,109,.5) }
.ctk-dsub { color:var(--soft); font-size:.84rem; margin:0 0 1.4rem }

.ctk-cols { display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:1rem; align-items:start }
@media (max-width:900px){ .ctk-cols { grid-template-columns:minmax(0,1fr) } }

.ctk-panel { background:var(--panel); border:1px solid var(--line); border-radius:12px;
             padding:1.2rem 1.3rem; margin-bottom:1rem }
.ctk-panel h2 { font-size:.74rem; letter-spacing:.11em; text-transform:uppercase;
                color:var(--soft); font-weight:500; margin:0 0 .9rem }
.ctk-body { font-size:.9rem; line-height:1.65; margin:0 0 .6rem }

/* -------------------------------------------------------------- workflow -- */

.ctk-wf__h { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:.9rem }
.ctk-wf__h h2 { margin:0 }
.ctk-wf__n { font-family:var(--mono); font-size:.68rem; color:var(--accent) }

.ctk-step { border-top:1px solid var(--line) }
.ctk-step:first-of-type { border-top:0 }
.ctk-step__h { display:flex; align-items:center; gap:.6rem; padding:.75rem 0; cursor:pointer;
               user-select:none }
.ctk-step__n { width:1.5rem; height:1.5rem; flex:none; border-radius:50%;
               border:1px solid var(--line); color:var(--soft);
               display:flex; align-items:center; justify-content:center;
               font-family:var(--mono); font-size:.72rem }
.ctk-step__n.is-done { border-color:rgba(63,154,109,.55); background:var(--ok-dim); color:#79c39c }
.ctk-step__n .ctk-ic { width:.8rem; height:.8rem }
.ctk-step__t { font-size:.76rem; letter-spacing:.11em; text-transform:uppercase; color:var(--soft) }
.ctk-step.is-open .ctk-step__t { color:var(--ink) }
.ctk-step__b { padding:.2rem 0 1.1rem 2.1rem }
@media (max-width:520px){ .ctk-step__b { padding-left:0 } }

.ctk-f3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));
          gap:.7rem; margin-bottom:.9rem }
.ctk-f3 label, .ctk-lbl { display:flex; flex-direction:column; gap:.35rem;
                          font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
                          color:var(--soft); margin-bottom:.9rem }
.ctk-lbl .ctk-muted { text-transform:none; letter-spacing:0; font-size:.72rem }

.ctk select, .ctk input, .ctk textarea {
  width:100%; background:var(--bg); color:var(--ink); border:1px solid var(--line);
  border-radius:8px; padding:.55rem .65rem; font-family:var(--font); font-size:.86rem;
  text-transform:none; letter-spacing:0 }
.ctk select:focus, .ctk input:focus, .ctk textarea:focus { outline:none; border-color:var(--steel) }
.ctk textarea { resize:vertical; line-height:1.55 }

.ctk-note { color:var(--soft); font-size:.78rem; line-height:1.6; margin:.5rem 0 0 }
.ctk-note--ok   { color:#79c39c }
.ctk-note--bad  { color:#e0a49b }
.ctk-note--warn { color:var(--accent) }
.ctk-row { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center }
.ctk-row--end { justify-content:flex-end; margin-top:.9rem }
.ctk-row input { flex:1; min-width:11rem }

.ctk-radios { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:.3rem }
.ctk-radio  { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer;
              border:1px solid var(--line); border-radius:999px; padding:.4rem .85rem;
              font-size:.82rem; color:var(--soft) }
.ctk-radio:hover { color:var(--ink) }
.ctk-radio.is-on { border-color:var(--accent); color:var(--accent) }
.ctk-radio input { width:auto; accent-color:var(--accent); margin:0 }

/* Quote lines: description takes the room, the numbers stay narrow and
   right-aligned so they line up down the column. */
.ctk-qline { display:grid; grid-template-columns:1fr 4.5rem 7rem 1.9rem; gap:.4rem; margin-bottom:.45rem }
.ctk-qline .q-q, .ctk-qline .q-u { text-align:right; font-variant-numeric:tabular-nums }
.ctk-qx { background:none; border:1px solid var(--line); border-radius:7px; color:var(--soft);
          cursor:pointer; font-size:1rem; line-height:1; padding:0 }
.ctk-qx:hover { color:var(--bad); border-color:var(--bad) }
@media (max-width:560px){ .ctk-qline { grid-template-columns:1fr 3.4rem 5.2rem 1.9rem } }

.ctk-total { display:block; font-family:var(--mono); font-size:1rem; color:var(--ink);
             padding:.55rem 0 }
.ctk-paid  { display:flex; align-items:center; gap:.45rem; color:#79c39c; font-size:.88rem;
             margin:0 0 .9rem }

.ctk-seam { border:1px dashed var(--line); border-radius:10px; padding:.9rem 1rem; margin-top:1.1rem }
.ctk-seam h4 { display:flex; align-items:center; gap:.45rem; margin:0 0 .4rem;
               font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--soft) }
.ctk-seam .ctk-row { margin-top:.7rem }

/* ------------------------------------------------------ thread, composer -- */

.ctk-msg { border:1px solid var(--line); border-radius:10px; padding:.8rem .95rem; margin-bottom:.6rem }
.ctk-msg.is-mine     { border-color:rgba(34,102,145,.45) }
.ctk-msg.is-internal { border-color:rgba(224,119,106,.32); background:rgba(224,119,106,.045) }
.ctk-msg header { display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
                  font-size:.76rem; color:var(--soft); margin-bottom:.4rem }
.ctk-msg header .ctk-muted { margin-left:auto }
.ctk-msg__b { font-size:.9rem; line-height:1.6 }
.ctk-msg__a { margin-top:.55rem; display:flex; gap:.6rem; flex-wrap:wrap; font-size:.78rem }

.ctk-comp textarea { margin-bottom:.6rem }
.ctk-comp__bar { display:flex; gap:.6rem; align-items:center; flex-wrap:wrap }
.ctk-comp__bar .ctk-btn:last-child { margin-left:auto }
.ctk-comp__files { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem }
.ctk-file { display:inline-flex; align-items:center; gap:.35rem; font-size:.76rem; color:var(--soft);
            border:1px solid var(--line); border-radius:999px; padding:.22rem .3rem .22rem .65rem }
.ctk-file button { background:none; border:0; color:var(--soft); cursor:pointer; padding:0 .25rem;
                   font-size:.95rem; line-height:1; width:auto }
.ctk-file button:hover { color:var(--bad) }

.ctk-toggle { display:inline-flex; align-items:center; gap:.45rem; cursor:pointer;
              font-size:.82rem; color:var(--soft) }
.ctk-toggle input { position:absolute; opacity:0; width:0; height:0 }
.ctk-toggle span  { width:2.1rem; height:1.15rem; border-radius:999px; background:rgba(147,161,176,.2);
                    border:1px solid var(--line); position:relative; transition:background .15s }
.ctk-toggle span::after { content:""; position:absolute; top:.13rem; left:.15rem;
                          width:.78rem; height:.78rem; border-radius:50%; background:var(--soft);
                          transition:transform .15s, background .15s }
.ctk-toggle input:checked + span { background:rgba(224,119,106,.25); border-color:rgba(224,119,106,.5) }
.ctk-toggle input:checked + span::after { transform:translateX(.9rem); background:#e0a49b }

/* -------------------------------------------------------------- timeline -- */

.ctk-tl__l { list-style:none; margin:0; padding:0 }
.ctk-tl__l li { display:flex; gap:.7rem; padding-bottom:1rem; position:relative }
/* The rail is drawn from each icon downward, so the last event has no tail
   hanging off the bottom of the list. */
.ctk-tl__l li:not(:last-child)::before { content:""; position:absolute; left:.82rem; top:1.8rem;
                                         bottom:0; width:1px; background:var(--line) }
.ctk-tl__i { width:1.65rem; height:1.65rem; flex:none; border-radius:50%;
             border:1px solid var(--line); background:var(--bg); color:var(--soft);
             display:flex; align-items:center; justify-content:center }
.ctk-tl__i .ctk-ic { width:.85rem; height:.85rem }
.ctk-tl__t { font-size:.83rem; line-height:1.5; min-width:0 }
.ctk-tl__t .ctk-muted { display:block; font-size:.72rem; margin-top:.1rem }
.ctk-tl__x { display:block; font-size:.72rem; margin-top:.25rem; word-break:break-all }