/* ============================================================
   KOREVRA CRM+ — v9
   Service & Cases · Contact Centre workstation · Mobile screens · Access control
============================================================ */

/* ============================================================
   SERVICE & CASES
============================================================ */
.case-table-row{
  display: grid;
  grid-template-columns: 90px 1.4fr 70px 1.3fr 120px 70px 90px 90px 90px;
  gap: 10px;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px dashed var(--rule-cream);
  cursor: pointer;
  transition: background .12s;
}
.case-table-row:last-child{ border-bottom: 0; }
.case-table-row:hover{ background: rgba(244,237,223,.04); }
.case-table-row.head{
  background: var(--navy-mid);
  cursor: default;
  font-family: var(--ff-mono);
  font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold);
}
.case-table-row.head:hover{ background: var(--navy-mid); }
.case-id{ font-family: var(--ff-mono); font-size: 11.5px; color: var(--gold); font-weight: 500; }
.case-cust{ font-family: var(--ff-serif); font-size: 13.5px; color: var(--cream); font-weight: 500; }
.case-cat{ font-family: var(--ff-sans); font-size: 12.5px; color: var(--cream); opacity: .85; }
.case-pri{ font-family: var(--ff-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 10px; text-align: center; font-weight: 600; }
.case-pri.high{ background: rgba(229,89,79,.15); color: var(--bad-ink); }
.case-pri.med{ background: rgba(229,161,74,.15); color: var(--warn); }
.case-pri.low{ background: rgba(91,193,120,.12); color: var(--good); }
.case-status{ font-family: var(--ff-mono); font-size: 9px; letter-spacing: .08em; text-transform: uppercase; padding: 3px 8px; border-radius: 2px; text-align: center; }
.case-status.open{ background: rgba(111,166,224,.12); color: var(--info); }
.case-status.progress{ background: rgba(229,161,74,.14); color: var(--warn); }
.case-status.escalated{ background: rgba(229,89,79,.16); color: var(--bad-ink); }
.case-status.resolved, .case-status.closed{ background: rgba(91,193,120,.12); color: var(--good); }

.case-sla-cell{ display: flex; flex-direction: column; gap: 4px; }
.case-sla-text{ font-family: var(--ff-mono); font-size: 10px; letter-spacing: .04em; }
.case-sla-bar{ height: 3px; background: rgba(244,237,223,.08); border-radius: 2px; overflow: hidden; }
.case-sla-fill{ height: 100%; border-radius: 2px; }

/* Case drawer conversation */
.conv-thread{ display: flex; flex-direction: column; gap: 12px; }
.conv-msg{ display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.conv-msg.out{ grid-template-columns: 1fr 34px; }
.conv-msg.out .conv-bubble{ order: 1; background: linear-gradient(180deg, rgba(212,168,67,.12), rgba(212,168,67,.03)); border-color: var(--rule); }
.conv-msg.out .conv-av{ order: 2; }
.conv-av{
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep));
  color: var(--cream); display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
}
.conv-av.agent{ background: linear-gradient(135deg, var(--gold), #B8902F); color: var(--navy-deep); }
.conv-av.bot{ background: linear-gradient(135deg, #1B8A8A, #0F6E6E); }
.conv-bubble{
  background: var(--navy-deep); border: 1px solid var(--rule-cream);
  border-radius: 8px; padding: 10px 14px;
}
.conv-from{ font-family: var(--ff-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-soft); margin-bottom: 4px; }
.conv-body{ font-family: var(--ff-sans); font-size: 13px; color: var(--cream); line-height: 1.5; }
.conv-trans{ font-style: italic; color: var(--cream); opacity: .68; font-size: 11px; margin-top: 4px; }
.conv-time{ font-family: var(--ff-mono); font-size: 9px; color: var(--cream); opacity: .66; margin-top: 4px; }
.conv-suggest{
  background: linear-gradient(180deg, rgba(27,138,138,.12), rgba(27,138,138,.03));
  border: 1px solid rgba(27,138,138,.4); border-radius: 4px; padding: 12px 14px; margin-top: 12px; position: relative;
}
.conv-suggest::before{ content: "AI · suggested reply"; position: absolute; top: -8px; left: 12px; background: var(--navy-mid); padding: 0 6px; font-family: var(--ff-mono); font-size: 8px; letter-spacing: .2em; color: var(--teal-light); text-transform: uppercase; }
.conv-compose{ display: flex; gap: 8px; margin-top: 12px; align-items: flex-end; }
.conv-compose textarea{
  flex: 1; background: rgba(244,237,223,.05); border: 1px solid var(--rule-cream);
  color: var(--cream); border-radius: 4px; padding: 10px; font-family: var(--ff-sans); font-size: 13px; min-height: 56px; resize: vertical;
}
.conv-compose textarea:focus{ outline: 0; border-color: var(--gold); }

/* macro list */
.macro-item{ padding: 10px 12px; border-bottom: 1px dashed var(--rule-cream); cursor: pointer; }
.macro-item:hover{ background: rgba(212,168,67,.08); }
.macro-item:last-child{ border-bottom: 0; }
.macro-title{ font-family: var(--ff-serif); font-size: 13px; color: var(--cream); font-weight: 500; }
.macro-prev{ font-family: var(--ff-sans); font-size: 11px; color: var(--cream); opacity: .6; margin-top: 2px; }

/* ============================================================
   CONTACT CENTRE WORKSTATION
============================================================ */
.cc2-bar{
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px; align-items: center;
  background: linear-gradient(180deg, var(--navy-mid), var(--navy));
  border: 1px solid var(--rule-cream); border-radius: 6px; padding: 14px 18px; margin-bottom: 18px;
}
.cc2-agent{ display: flex; align-items: center; gap: 12px; }
.cc2-agent-av{
  width: 44px; height: 44px; border-radius: 50%;
  background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep)); color: var(--cream);
  display: flex; align-items: center; justify-content: center; font-family: var(--ff-serif); font-size: 16px; font-weight: 600; border: 2px solid var(--gold);
}
.cc2-agent-name{ font-family: var(--ff-serif); font-size: 16px; color: var(--cream); font-weight: 500; }
.cc2-agent-meta{ font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; color: var(--gold-soft); text-transform: uppercase; margin-top: 2px; }
.cc2-status-seg{ display: flex; gap: 4px; justify-self: center; }
.cc2-status-btn{
  background: rgba(244,237,223,.04); border: 1px solid var(--rule-cream); color: var(--cream); opacity: .7;
  font-family: var(--ff-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 8px 14px; border-radius: 3px; cursor: pointer; transition: all .12s;
  display: flex; align-items: center; gap: 6px;
}
.cc2-status-btn .d{ width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.cc2-status-btn:hover{ opacity: 1; }
.cc2-status-btn.active{ opacity: 1; font-weight: 700; }
.cc2-status-btn.active[data-st="available"]{ background: rgba(91,193,120,.18); color: var(--good); border-color: var(--good); }
.cc2-status-btn.active[data-st="oncall"]{ background: rgba(229,89,79,.18); color: var(--bad-ink); border-color: var(--bad-ink); }
.cc2-status-btn.active[data-st="acw"]{ background: rgba(229,161,74,.18); color: var(--warn); border-color: var(--warn); }
.cc2-status-btn.active[data-st="break"]{ background: rgba(111,166,224,.18); color: var(--info); border-color: var(--info); }
.cc2-status-btn.active[data-st="offline"]{ background: rgba(244,237,223,.1); color: var(--cream); }
.cc2-timer{ font-family: var(--ff-mono); font-size: 18px; color: var(--gold); font-weight: 700; letter-spacing: .04em; }

.cc2-stats{ display: grid; grid-template-columns: repeat(5,1fr); gap: 1px; background: var(--rule-cream); border: 1px solid var(--rule-cream); border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.cc2-stat{ background: var(--navy-deep); padding: 12px 14px; }
.cc2-stat .l{ font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cream); opacity: .6; }
.cc2-stat .v{ font-family: var(--ff-serif); font-size: 24px; color: var(--gold); font-weight: 400; letter-spacing: -.02em; margin-top: 4px; }
.cc2-stat .v.live{ color: var(--good); }

/* queue */
.cc2-queue{ display: flex; flex-direction: column; gap: 8px; }
.cc2-qcard{
  display: grid; grid-template-columns: 40px 1fr auto auto; gap: 14px; align-items: center;
  background: var(--navy-deep); border: 1px solid var(--rule-cream); border-radius: 4px; padding: 12px 16px;
  transition: all .15s;
}
.cc2-qcard.priority{ border-left: 3px solid var(--bad); }
.cc2-qcard:hover{ border-color: var(--gold); }
.cc2-qav{ width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg, var(--teal-fill), var(--teal-deep)); color: var(--cream); display: flex; align-items: center; justify-content: center; font-family: var(--ff-mono); font-size: 12px; font-weight: 700; }
.cc2-qname{ font-family: var(--ff-serif); font-size: 14.5px; color: var(--cream); font-weight: 500; }
.cc2-qmeta{ font-family: var(--ff-mono); font-size: 10px; color: var(--gold-soft); letter-spacing: .04em; margin-top: 2px; }
.cc2-qwait{ font-family: var(--ff-mono); font-size: 13px; color: var(--warn); font-weight: 600; }
.cc2-qwait.long{ color: var(--bad-ink); animation: blink 1.5s infinite; }
.cc2-answer{ background: var(--good); color: var(--navy-deep); border: 0; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: 9px 18px; border-radius: 3px; cursor: pointer; }
.cc2-answer:hover{ filter: brightness(1.1); }

/* ACW disposition */
.acw-form{ background: var(--navy-deep); border: 1px solid var(--rule-cream); border-radius: 6px; padding: 22px; }
.disp-grid{ display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; }
.disp-opt{ background: rgba(244,237,223,.04); border: 1px solid var(--rule-cream); color: var(--cream); padding: 12px; border-radius: 4px; cursor: pointer; text-align: center; font-family: var(--ff-sans); font-size: 12.5px; transition: all .12s; }
.disp-opt:hover{ border-color: var(--gold); }
.disp-opt.sel{ border-color: var(--gold); background: rgba(212,168,67,.1); color: var(--gold); }

/* idle big state */
.cc2-idle{ text-align: center; padding: 60px 20px; background: var(--navy-deep); border: 1px dashed var(--rule); border-radius: 6px; }
.cc2-idle-ic{ font-size: 44px; color: var(--gold); opacity: .5; margin-bottom: 12px; }

/* ============================================================
   MOBILE APP — screen switching + onboarding
============================================================ */
.mob2-screens{ position: relative; }
.mob2-onboard{ padding: 40px 22px 90px; text-align: center; min-height: 580px; display: flex; flex-direction: column; }
.mob2-ob-art{
  width: 120px; height: 120px; margin: 30px auto 24px;
  border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 52px;
  background: linear-gradient(135deg, var(--gold), var(--gold-bright)); color: var(--navy-deep);
  box-shadow: 0 20px 50px -16px rgba(212,168,67,.5);
}
.mob2-ob-title{ font-family: var(--ff-serif); font-size: 26px; font-weight: 400; color: var(--cream); letter-spacing: -.015em; margin-bottom: 10px; }
.mob2-ob-title em{ color: var(--gold); font-style: italic; }
.mob2-ob-desc{ font-family: var(--ff-sans); font-size: 13.5px; color: var(--cream); opacity: .8; line-height: 1.55; max-width: 260px; margin: 0 auto; }
.mob2-ob-dots{ display: flex; gap: 6px; justify-content: center; margin: 24px 0; }
.mob2-ob-dot{ width: 7px; height: 7px; border-radius: 50%; background: rgba(244,237,223,.2); }
.mob2-ob-dot.active{ background: var(--gold); width: 20px; border-radius: 4px; }
.mob2-ob-cta{ margin-top: auto; }
.mob2-ob-btn{ width: 100%; background: var(--gold); color: var(--navy-deep); border: 0; padding: 13px; border-radius: 8px; font-family: var(--ff-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; cursor: pointer; }
.mob2-ob-skip{ background: transparent; border: 0; color: var(--cream); opacity: .6; font-family: var(--ff-mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; margin-top: 12px; cursor: pointer; }

.mob2-permrow{ display: flex; align-items: center; gap: 12px; padding: 12px; background: rgba(244,237,223,.04); border: 1px solid var(--rule-cream); border-radius: 10px; margin-bottom: 8px; text-align: left; }
.mob2-permrow .ic{ font-size: 20px; }
.mob2-permrow .t{ flex: 1; }
.mob2-permrow .tn{ font-family: var(--ff-serif); font-size: 13px; color: var(--cream); font-weight: 500; }
.mob2-permrow .ts{ font-family: var(--ff-sans); font-size: 10.5px; color: var(--cream); opacity: .65; }

.mob2-feature{ display: grid; grid-template-columns: 36px 1fr; gap: 12px; padding: 12px; background: rgba(244,237,223,.04); border: 1px solid var(--rule-cream); border-radius: 10px; margin-bottom: 8px; text-align: left; }
.mob2-feature .fic{ width: 36px; height: 36px; border-radius: 8px; background: rgba(212,168,67,.12); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 17px; }
.mob2-feature .ft{ font-family: var(--ff-serif); font-size: 13px; color: var(--cream); font-weight: 500; }
.mob2-feature .fd{ font-family: var(--ff-sans); font-size: 11px; color: var(--cream); opacity: .7; line-height: 1.4; margin-top: 2px; }

.mob2-tour-chip{
  position: absolute; z-index: 5;
  background: var(--gold); color: var(--navy-deep);
  font-family: var(--ff-mono); font-size: 9px; letter-spacing: .06em;
  padding: 4px 8px; border-radius: 4px; font-weight: 700;
  box-shadow: 0 6px 20px -6px rgba(0,0,0,.5);
  animation: tourpulse 1.6s ease-in-out infinite;
}
@keyframes tourpulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.06);} }

.mob2-nav-item{ cursor: pointer; }

/* mode toggle on top */
.mob2-modebar{ display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; }

/* ============================================================
   ACCESS CONTROL
============================================================ */
.ac-grid{ display: grid; grid-template-columns: 240px 1fr; gap: 22px; align-items: start; }
.ac-roles{ background: var(--navy-deep); border: 1px solid var(--rule-cream); border-radius: 6px; overflow: hidden; position: sticky; top: 90px; }
.ac-role{ padding: 12px 16px; border-bottom: 1px dashed var(--rule-cream); cursor: pointer; border-left: 2px solid transparent; transition: all .12s; }
.ac-role:last-child{ border-bottom: 0; }
.ac-role:hover{ background: rgba(244,237,223,.04); }
.ac-role.active{ background: rgba(212,168,67,.1); border-left-color: var(--gold); }
.ac-role-name{ font-family: var(--ff-serif); font-size: 14px; color: var(--cream); font-weight: 500; }
.ac-role-meta{ font-family: var(--ff-mono); font-size: 9.5px; color: var(--gold-soft); letter-spacing: .04em; margin-top: 2px; }
.ac-modgrid{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ac-modcard{
  background: var(--navy-deep); border: 1px solid var(--rule-cream); border-radius: 6px; padding: 14px;
  transition: all .15s;
}
.ac-modcard.granted{ border-color: rgba(91,193,120,.4); background: linear-gradient(180deg, rgba(91,193,120,.06), transparent); }
.ac-modcard.denied{ opacity: .85; } /* .6 dimmed the card's own text to 2.60–3.17; .85 -> 4.89–5.93 and still reads dimmed */
.ac-modcard-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.ac-modcard-name{ font-family: var(--ff-serif); font-size: 14px; color: var(--cream); font-weight: 500; }
.ac-modcard-ic{ width: 30px; height: 30px; border-radius: 6px; background: rgba(212,168,67,.1); border: 1px solid var(--rule); color: var(--gold); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.ac-modcard-levels{ display: flex; gap: 1px; background: var(--rule-cream); border-radius: 3px; overflow: hidden; margin-top: 8px; }
.ac-lvl{ flex: 1; background: var(--navy-mid); border: 0; color: var(--cream); opacity: .68; font-family: var(--ff-mono); font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; padding: 6px 0; cursor: pointer; }
.ac-lvl:hover{ opacity: 1; }
.ac-lvl.active{ opacity: 1; font-weight: 700; }
.ac-lvl.active[data-l="none"]{ background: rgba(244,237,223,.1); }
.ac-lvl.active[data-l="view"]{ background: rgba(111,166,224,.25); color: var(--cream); }   /* tone-on-own-tint was 2.34 */
.ac-lvl.active[data-l="edit"]{ background: rgba(229,161,74,.25); color: var(--cream); }   /* tone-on-own-tint was 2.69 */
.ac-lvl.active[data-l="full"]{ background: var(--gold); color: var(--navy-deep); }

/* access denied screen */
.access-denied{ text-align: center; padding: 80px 24px; }
.access-denied-ic{ font-size: 56px; margin-bottom: 16px; }
.access-denied-title{ font-family: var(--ff-serif); font-size: 30px; font-weight: 300; color: var(--cream); letter-spacing: -.02em; margin-bottom: 8px; }
.access-denied-title em{ color: var(--bad-ink); font-style: italic; }
.access-denied-desc{ font-family: var(--ff-sans); font-size: 14px; color: var(--cream); opacity: .8; max-width: 440px; margin: 0 auto 20px; line-height: 1.55; }
.access-denied-role{ font-family: var(--ff-mono); font-size: 11px; color: var(--gold); letter-spacing: .08em; }

/* small generic pill reuse already exists (.pill). Ensure variants */
.pill{ display:inline-flex; align-items:center; font-family: var(--ff-mono); font-size: 9px; letter-spacing:.06em; text-transform: uppercase; padding: 2px 7px; border-radius: 2px; background: rgba(212,168,67,.12); color: var(--gold); border: 1px solid var(--rule); }
.pill.good{ background: rgba(91,193,120,.12); color: var(--good-ink); border-color: rgba(91,193,120,.4); }   /* --good was 4.28 on its own tint */
.pill.warn{ background: rgba(229,161,74,.14); color: var(--warn); border-color: rgba(229,161,74,.4); }
.pill.bad{ background: rgba(229,89,79,.14); color: var(--bad-ink); border-color: rgba(229,89,79,.4); }
.pill.purple{ background: rgba(124,58,237,.14); color: #C4A8F5; border-color: rgba(124,58,237,.35); }
.pill.gold{ background: rgba(212,168,67,.12); color: var(--gold); border-color: var(--rule); }

@media(max-width: 1000px){
  .ac-grid{ grid-template-columns: 1fr; }
  .ac-modgrid{ grid-template-columns: 1fr; }
  .cc2-stats{ grid-template-columns: repeat(2,1fr); }
  .cc2-bar{ grid-template-columns: 1fr; gap: 12px; }
  .cc2-status-seg{ justify-self: start; flex-wrap: wrap; }
  .case-table-row{ grid-template-columns: 80px 1fr 80px; }
  .case-table-row > .case-hide{ display: none; }
  .disp-grid{ grid-template-columns: 1fr; }
}