/* Canigenix Vet — Home polish and missed training disclosures.
   Intentionally CSS-only. No JS, route, record, photo, or clinical behavior changes.
   Styled only when Home shortcut section is visible; other tabs keep their existing layouts.
*/

/* The exact + / Open / Close affordance already used by Patients.
   Both the walkthrough and its nested sample are native, accessible <details>. */
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 13px 16px;
  margin: 0;
  list-style: none;
  cursor: pointer;
  border: 1px solid #4d918d;
  border-radius: 10px;
  background: #16343e;
  color: #e5f8f2;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.35;
  transition: background .15s ease, border-color .15s ease;
}
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary::-webkit-details-marker { display: none; }
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary::marker { content: ''; }
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary::before {
  content: '+';
  width: 29px;
  height: 29px;
  border-radius: 8px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 29px;
  color: #082b2b;
  background: #81dec7;
  font-weight: 800;
  font-size: 1.3rem;
}
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary::after {
  content: 'Open  ▾';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid #568781;
  border-radius: 8px;
  color: #dff6ee;
  font-size: .78rem;
  font-weight: 750;
  white-space: nowrap;
}
#clinicPilotPanel :is(#pilotGuide, details.pilot-example)[open] > summary::before { content: '−'; }
#clinicPilotPanel :is(#pilotGuide, details.pilot-example)[open] > summary::after { content: 'Close  ▴'; }
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary:hover {
  border-color: #85e2cb;
  background: #1d4450;
}
#clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary:focus-visible {
  outline: 3px solid #d0fbda;
  outline-offset: 3px;
}
#clinicPilotPanel #pilotGuide > summary { margin-top: 12px; }
#clinicPilotPanel details.pilot-example > summary { margin-top: 12px; }
#clinicPilotPanel #pilotGuide[open] { margin-bottom: 12px; }
#clinicPilotPanel #pilotGuide > :not(summary) { margin-left: 3px; margin-right: 3px; }

/* Home-only treatment, not a global redesign. 
   Chromium 105+ supports :has(), including the user's modern Chrome build. */
@supports selector(#appView:has(#dashboardShortcuts:not([hidden]))) {
  #appView:has(#dashboardShortcuts:not([hidden])) #workspaceHeading {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 170px;
    padding: clamp(23px, 3.2vw, 39px);
    border: 1px solid #386d76;
    border-radius: 20px;
    background:
      radial-gradient(ellipse at 82% 22%, rgba(40, 195, 185, .22) 0%, transparent 42%),
      linear-gradient(116deg, #163844 0%, #0f2a37 56%, #10323b 100%);
    box-shadow: 0 22px 50px rgba(0, 8, 18, .22), inset 0 1px rgba(255,255,255,.045);
    margin: 4px 0 21px;
    align-items: center;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #workspaceHeading::before {
    content: '';
    position: absolute;
    z-index: -1;
    pointer-events: none;
    top: 12px;
    right: 7%;
    width: 164px;
    height: 164px;
    background: url('/vet/assets/canigenix-paw.png') center / contain no-repeat;
    opacity: .13;
    transform: rotate(-12deg);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #workspaceHeading::after {
    content: '';
    position: absolute;
    z-index: -1;
    bottom: 0;
    left: 38px;
    height: 3px;
    width: 110px;
    border-radius: 4px;
    background: linear-gradient(90deg, #69e2c6, #39a7cc 65%, transparent);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #workspaceEyebrow {
    color: #9be9d9;
    font-weight: 800;
    letter-spacing: .17em;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #workspaceTitle {
    font-size: clamp(2rem, 3.3vw, 3rem);
    font-weight: 800;
    letter-spacing: -.045em;
    line-height: 1.15;
    margin: 9px 0 12px;
    color: #f5fffc;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #workspaceDescription {
    max-width: 560px;
    font-size: .95rem;
    line-height: 1.6;
    color: #c0dedc;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts {
    gap: 15px;
    margin-bottom: 21px;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts .cgx-home-card,
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts button.task-button {
    position: relative;
    overflow: hidden;
    border: 1px solid #3b6470;
    background: linear-gradient(155deg, #163a45 0%, #102630 95%);
    box-shadow: inset 0 1px rgba(255,255,255,.045), 0 8px 22px rgba(0,10,17,.11);
    transition: background .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts .cgx-home-card:hover,
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts button.task-button:hover {
    border-color: #9aead7;
    background: linear-gradient(155deg, #1b4652 0%, #14323e 95%);
    transform: translateY(-2px);
    box-shadow: 0 14px 26px rgba(0,10,17,.21);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts > button:nth-of-type(2) {
    border-color: #61cbb6;
    background: linear-gradient(135deg, #205a55 0%, #153c42 55%, #102b3a 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.075), 0 10px 24px rgba(0,24,25,.14);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts > button:nth-of-type(2):hover {
    border-color: #b9f9e7;
    background: linear-gradient(135deg, #286960 0%, #1b4b50 58%, #123542 100%);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardShortcuts :is(.cgx-home-number, .task-icon) {
    color: #8ce8d2;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardStats .dashboard-stat {
    position: relative;
    overflow: hidden;
    border-color: #365c68;
    border-radius: 14px;
    background: linear-gradient(160deg, #17313d, #0e242f);
    box-shadow: inset 0 1px rgba(255,255,255,.035);
    padding: 19px 21px;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardStats .dashboard-stat::before {
    content:'';
    position:absolute;
    top:0; left:0; right:0;
    height:3px;
    background:linear-gradient(90deg,#68dac1 0%,#4094bb 70%,transparent 100%);
    opacity:.72;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #dashboardStats .dashboard-stat strong {
    color: #a5f1da;
    font-size: clamp(1.8rem, 2.3vw, 2.35rem);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) :is(#clinicWorklistPanel, #clinicPilotPanel, #cxCaseBoard, .cx-board) {
    border: 1px solid #345e6a;
    border-radius: 17px;
    background: linear-gradient(160deg,#142f3c 0%,#112834 62%,#0e232e 100%);
    box-shadow: inset 0 1px rgba(255,255,255,.035), 0 12px 25px rgba(0, 10, 16, .12);
  }
  #appView:has(#dashboardShortcuts:not([hidden])) :is(#clinicWorklistPanel, #clinicPilotPanel, #cxCaseBoard, .cx-board) .overline {
    color: #93dfcf;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) :is(#clinicWorklistPanel, #clinicPilotPanel, #cxCaseBoard, .cx-board) h2 {
    letter-spacing: -.025em;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #clinicPilotPanel {
    position: relative;
    margin-top: 20px;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #clinicPilotPanel::before {
    content:'';
    position:absolute;
    top:0; left:24px; right:24px;
    height:3px;
    background: linear-gradient(90deg,#62d7bd 0%,#4d9ac1 72%,transparent 100%);
    opacity:.8;
    border-radius: 4px;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #clinicPilotPanel .pilot-label {
    padding: 7px 11px;
    border-color: #527b7b;
    background: #173e43;
    color: #c8f3e6;
    font-weight: 700;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #clinicPilotPanel .pilot-steps li {
    border-color: #355d66;
    background: #0c2430;
    border-radius: 11px;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #clinicWorklistPanel .worklist-card,
  #appView:has(#dashboardShortcuts:not([hidden])) .cx-board .cx-case {
    background: #0c2630;
    border-color: #345a65;
    border-radius: 11px;
  }
  #appView:has(#dashboardShortcuts:not([hidden])) #clinicWorklistPanel .worklist-card:hover,
  #appView:has(#dashboardShortcuts:not([hidden])) .cx-board .cx-case:hover {
    border-color: #609b96;
  }
}
@media (max-width: 760px) {
  #clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary { padding:12px; }
  #clinicPilotPanel :is(#pilotGuide, details.pilot-example) > summary::after { padding:5px 8px; }
  @supports selector(#appView:has(#dashboardShortcuts:not([hidden]))) {
    #appView:has(#dashboardShortcuts:not([hidden])) #workspaceHeading {
      min-height: 140px;
      padding: 23px 19px;
    }
    #appView:has(#dashboardShortcuts:not([hidden])) #workspaceHeading::before { opacity: .07; right: -15px; top: 9px; }
    #appView:has(#dashboardShortcuts:not([hidden])) #workspaceHeading::after { left: 19px; }
  }
}
@media (prefers-reduced-motion: reduce) {
  #dashboardShortcuts .cgx-home-card,
  #dashboardShortcuts button.task-button { transition:none!important; transform:none!important; }
}