/*
 * Clinika's own layer on top of the Industry design system.
 *
 * industry.css is the design system and is copied in verbatim so it can be
 * replaced wholesale when the system is retuned; everything specific to
 * Clinika lives here and must load after it (see the stylesheet_link_tag in
 * app/views/layouts/application.html.erb, which lists the two files in order
 * rather than using Propshaft's :app shortcut -- that one sorts logical paths
 * alphabetically, which would put clinika.css first and silently undo every
 * override below).
 *
 * Two things live in this file:
 *   1. the token overrides that turn Industry's slate-blue palette into
 *      Clinika's teal one, light on :root and dark under [data-theme="dark"];
 *   2. the application shell -- sidebar, main column, screen header, empty
 *      state -- drawn with those tokens.
 */

/* ── tokens ─────────────────────────────────────────────────────────────── */

:root {
  --color-bg: #f9fafb;
  --color-surface: #ffffff;
  --color-text: #1f2937;
  --color-divider: #e5e7eb;
  --color-accent: #0e7490;
  --color-accent-100: #ecfeff;
  --color-accent-200: #cffafe;
  --color-accent-300: #a5f3fc;
  --color-accent-400: #22d3ee;
  --color-accent-500: #0891b2;
  --color-accent-600: #155e75;
  --color-accent-700: #164e63;
  --color-accent-800: #164e63;
  --color-accent-900: #083344;
  --color-accent-2: #0284c7;
  --color-accent-2-100: #f0f9ff;
  --color-accent-2-800: #075985;
  --c-muted: #6b7280;
  --c-soft: #f3f4f6;
  --c-line: #eef0f3;
  --c-ok: #059669;
  --c-warn: #d97706;
  --c-bad: #dc2626;
  color-scheme: light;
}

/* Dark is opt-in through data-theme, which app/javascript/controllers/
   theme_controller.js sets from localStorage or, with nothing stored, from
   the operating system's prefers-color-scheme. */
[data-theme="dark"] {
  --color-bg: #111827;
  --color-surface: #1f2937;
  --color-text: #e5e7eb;
  --color-divider: #374151;
  --color-accent: #22d3ee;
  --color-accent-100: #164e63;
  --color-accent-200: #155e75;
  --color-accent-600: #67e8f9;
  --color-accent-700: #a5f3fc;
  --color-accent-800: #cffafe;
  --color-accent-2-100: #0c4a6e;
  --color-accent-2-800: #bae6fd;
  --c-muted: #9ca3af;
  --c-soft: #111827;
  --c-line: #2b3444;
  --c-ok: #34d399;
  --c-warn: #fbbf24;
  --c-bad: #f87171;
  /* The two ends of Industry's neutral ramp that .tag-neutral is drawn from.
     Left alone they keep their light values, and a neutral tag comes out as a
     near-white chip on a dark card. These are the divider and the text colour
     above, not new colours. */
  --color-neutral-100: #374151;
  --color-neutral-800: #e5e7eb;
  color-scheme: dark;
}

/* ── design-system adjustments ──────────────────────────────────────────── */

.btn-primary { color: #ffffff; }
[data-theme="dark"] .btn-primary { color: #083344; }
.input { background: var(--color-surface); }
a { color: var(--color-accent); }
a:hover { color: var(--color-accent-600); }
button { font-family: var(--font-body); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: var(--color-divider); border-radius: 4px; }

/* ── application shell ──────────────────────────────────────────────────── */

html, body { height: 100%; }

.ck-app {
  position: relative;
  height: 100dvh;
  display: flex;
  flex-direction: row;
  overflow: hidden;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.4;
  background: var(--color-bg);
  color: var(--color-text);
}

/* Nothing but the sidebar's own scroll areas may scroll, so the frame stays
   put while a screen's content moves underneath it. */
.ck-sidebar {
  width: 248px;
  flex: none;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--color-surface);
  border-right: 1px solid var(--color-divider);
}

.ck-brand { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; }
.ck-brand-mark {
  width: 30px;
  height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  background: var(--color-accent);
  color: #ffffff;
  font: var(--font-heading-weight) 17px var(--font-heading);
}
.ck-brand-text { min-width: 0; }
.ck-brand-name { font: var(--font-heading-weight) 19px/1 var(--font-heading); letter-spacing: 0.01em; }
.ck-brand-org { font-size: 11px; color: var(--c-muted); margin-top: 3px; }

.ck-nav { display: flex; flex-direction: column; gap: 2px; padding: 4px 10px; }
.ck-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background: transparent;
}
.ck-nav-item:hover { background: var(--c-soft); }
.ck-nav-item[aria-current="page"] { background: var(--color-accent-100); color: var(--color-accent); }
.ck-nav-item svg { flex: none; }

.ck-sidebar-section {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 12px 16px;
  margin-top: 8px;
  border-top: 1px solid var(--color-divider);
}
.ck-sidebar-heading {
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}

.ck-pro-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-pro { display: flex; align-items: center; gap: 10px; padding: 5px 4px; font-size: 13px; }
.ck-pro-box {
  width: 16px;
  height: 16px;
  flex: none;
  display: grid;
  place-items: center;
  border-style: solid;
  border-width: 1.5px;
}
/* Both labels can lose characters to the 248px column, but not equally: a
   person's name is the thing you scan this list for, so the specialty gives
   way first. The larger shrink factor is what does it -- flex distributes
   shrinkage by factor times base width, so the specialty yields several times
   faster and the names stay whole until it has nothing left to give. */
.ck-pro-name { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-pro-specialty {
  flex: 0 6 auto;
  min-width: 0;
  font-size: 11px;
  color: var(--c-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-account {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-top: 1px solid var(--color-divider);
}
.ck-avatar {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #cffafe;
  color: #155e75;
  font: var(--font-heading-weight) 13px var(--font-heading);
}
.ck-account-text { flex: 1; min-width: 0; }
.ck-account-name { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ck-account-council { font-size: 11px; color: var(--c-muted); }

.ck-theme-toggle {
  width: 32px;
  height: 32px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-divider);
  background: transparent;
  color: inherit;
  cursor: pointer;
}
/* The moon offers the dark theme, the sun offers the light one, so exactly
   one of the two is ever shown -- swapped in CSS so the pair needs no
   JavaScript beyond flipping data-theme. */
.ck-theme-toggle .ck-icon-sun { display: none; }
[data-theme="dark"] .ck-theme-toggle .ck-icon-sun { display: block; }
[data-theme="dark"] .ck-theme-toggle .ck-icon-moon { display: none; }

.ck-main { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ck-screen { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ck-screen-header {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-screen-title {
  margin: 0;
  font: var(--font-heading-weight) 21px/1 var(--font-heading);
  letter-spacing: -0.01em;
}
.ck-screen-body { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: var(--space-8); }

.ck-empty { max-width: 420px; margin-inline: auto; padding: var(--space-8); text-align: center; background: var(--color-surface); }
.ck-empty-title { margin: 0 0 var(--space-2); font-size: 20px; }
.ck-empty-body { margin: 0; font-size: 13px; color: var(--c-muted); }

/* ── tabs ───────────────────────────────────────────────────────────────── */

/* A segmented control made of links: each tab is a state of the page and so
   is a URL, which is what lets the pair work with no JavaScript at all. */
.ck-tabs { display: inline-flex; overflow: hidden; border: 1px solid var(--color-divider); }
.ck-tab {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--color-text);
}
.ck-tab + .ck-tab { border-left: 1px solid var(--color-divider); }
/* Both properties are restated on :hover because clinika.css styles bare
   `a:hover`, whose specificity would otherwise win over a single class. */
.ck-tab:hover { background: var(--c-soft); color: var(--color-text); }
.ck-tab[aria-current="page"],
.ck-tab[aria-current="page"]:hover { background: var(--color-accent); color: #ffffff; }
/* The dark accent is a bright cyan; white on it fails AA, so the selected tab
   flips to the darkest ink of the ramp, exactly as .btn-primary does. */
[data-theme="dark"] .ck-tab[aria-current="page"] { color: #083344; }

/* ── salas e bloqueios ──────────────────────────────────────────────────── */

/* Both tabs scroll a column of content instead of centring a single panel, so
   they undo .ck-screen-body's grid placement. The paddings are the design's.
   `place-items` has to be undone as well as `display`: justify-items applies
   to the children of a block container too, and any value but `normal` there
   makes them shrink to fit their content -- which would collapse the room
   grid to a single column however wide the window is. */
.ck-rooms-body, .ck-blocks-body { display: block; place-items: normal; }
.ck-rooms-body { padding: 22px 18px; }
.ck-blocks-body { padding: 16px 18px; }

/* auto-fill, so the row keeps its card width and leaves the tail empty rather
   than stretching four cards across a desk-width window. */
.ck-room-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px 18px; }
.ck-room { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--color-surface); }
.ck-room-name { margin: 0; font: var(--font-heading-weight) 19px/1.1 var(--font-heading); }
.ck-room-where { margin: 2px 0 0; font-size: 11.5px; color: var(--c-muted); }
.ck-room-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-room-resources { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--c-muted); }
.ck-room-resources-label { font-weight: 500; color: var(--color-text); }
.ck-room-occupancy { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--c-muted); }

/* The rule itself, stated on the screen it governs. Dashed, because it is a
   note about the system rather than a thing in it. */
.ck-rooms-note {
  margin: 26px 0 0;
  padding: 12px 14px;
  border: 1px dashed var(--color-divider);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--c-muted);
}
.ck-rooms-note strong { color: var(--color-text); }

.ck-blocks { border: 1px solid var(--color-divider); background: var(--color-surface); }
.ck-blocks-head {
  display: grid;
  grid-template-columns: 110px 1fr 140px 90px;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--color-divider);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
}
.ck-blocks-affected { text-align: right; }
.ck-blocks-empty { padding: var(--space-8) var(--space-4); text-align: center; }
.ck-blocks-empty-title { margin: 0 0 var(--space-2); font-size: 18px; }
.ck-blocks-empty-body { margin: 0 auto; max-width: 52ch; font-size: 13px; color: var(--c-muted); }
.ck-blocks-note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--c-muted); }

/* ── agenda ─────────────────────────────────────────────────────────────── */

/* The title takes the space the view, column and colour switchers will occupy
   once they exist, so it sits beside the arrows rather than centred over an
   empty row. */
.ck-agenda-header .ck-screen-title { margin: 0 auto 0 6px; }
.ck-agenda-today { height: 34px; }
.ck-agenda-steps { display: inline-flex; border: 1px solid var(--color-divider); }
.ck-agenda-step {
  width: 34px;
  height: 32px;
  display: grid;
  place-items: center;
  color: var(--color-text);
}
.ck-agenda-step:hover { background: var(--c-soft); color: var(--color-text); }
.ck-agenda-step + .ck-agenda-step { border-left: 1px solid var(--color-divider); }

/* The grid scrolls as one, so the gutter sticks to the left edge and both
   headers stick to the top of it. */
.ck-agenda {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  background: var(--color-surface);
}
.ck-agenda-gutter {
  width: 52px;
  flex: none;
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--color-surface);
}
.ck-agenda-gutter-head,
.ck-agenda-column-head {
  height: 48px;
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-divider);
}
.ck-agenda-hours, .ck-agenda-body { position: relative; }
/* Pulled up by half a line so the label reads as sitting on its rule rather
   than under it. */
.ck-agenda-hour-label {
  position: absolute;
  right: 8px;
  margin-top: -7px;
  font-size: 11px;
  color: var(--c-muted);
  font-variant-numeric: tabular-nums;
}
/* Every label but the first is centred on its rule; the first one has the
   sticky column header immediately above it and would be read through it. */
.ck-agenda-hour-label:first-child { margin-top: 0; }

.ck-agenda-column { flex: 1; min-width: 0; border-left: 1px solid var(--color-divider); }
.ck-agenda-column-head { display: flex; align-items: center; gap: 8px; padding: 0 8px; overflow: hidden; }
.ck-agenda-column-dot { width: 10px; height: 10px; flex: none; }
.ck-agenda-column-text { min-width: 0; }
.ck-agenda-column-name {
  font: var(--font-heading-weight) 14px/1.1 var(--font-heading);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ck-agenda-column-kicker {
  font-size: 10.5px;
  color: var(--c-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.ck-agenda-rule { position: absolute; left: 0; right: 0; border-top: 1px solid var(--color-divider); }
.ck-agenda-rule--half { border-top: 1px dashed var(--c-line); }

.ck-agenda-empty { position: absolute; left: 0; right: 0; top: 0; padding: 64px 16px; text-align: center; }
.ck-agenda-empty-title { margin: 0; font: var(--font-heading-weight) 17px var(--font-heading); }
.ck-agenda-empty-body { margin: 4px auto 0; max-width: 32ch; font-size: 12.5px; color: var(--c-muted); }

/* ── appointment cards ──────────────────────────────────────────────────── */

/* The slot is the geometry the presenter computed; the card is inset inside
   it, which is what leaves the design's hairline gap between two appointments
   that touch. */
.ck-event-slot { position: absolute; }
.ck-event {
  position: absolute;
  inset: 1px 5px 2px 2px;
  box-sizing: border-box;
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 3px 6px;
  overflow: hidden;
  border: 1px solid transparent;
  border-left: 3px solid var(--ck-event-color);
  /* Fill and text are both mixed from the one colour on the professional's
     record, so a customer who picks a new colour gets the whole card, and both
     themes mix against the surface they are drawn on. */
  background: color-mix(in srgb, var(--ck-event-color) 20%, var(--color-surface));
  color: color-mix(in srgb, var(--ck-event-color) 55%, var(--color-text));
}
.ck-event-text { flex: 1; min-width: 0; }
.ck-event-time {
  font: var(--font-heading-weight) 11px/1.2 var(--font-heading);
  letter-spacing: 0.03em;
  opacity: 0.9;
}
.ck-event-name { font-size: 12.5px; font-weight: 500; line-height: 1.2; }
.ck-event-sub { font-size: 10.5px; opacity: 0.75; line-height: 1.3; }
.ck-event-time, .ck-event-name, .ck-event-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Too short for three lines: the procedure goes, the time and the name stay,
   and the vertical padding goes with it so that a half-hour card still holds
   both of them whole. */
.ck-event--compact { padding-top: 0; padding-bottom: 0; }
.ck-event--compact .ck-event-sub { display: none; }

/* The eight states of spec §3.2, each legible without anything being clicked. */
.ck-event--nao_confirmado {
  background: transparent;
  border: 1px dashed var(--ck-event-color);
  border-left: 3px solid var(--ck-event-color);
}
.ck-event--cancelado {
  background: transparent;
  border: 1px solid var(--color-divider);
  border-left: 3px solid var(--color-divider);
  color: var(--c-muted);
}
.ck-event--cancelado .ck-event-name { text-decoration: line-through; }
.ck-event--atendido { opacity: 0.55; }
.ck-event--falta {
  background: repeating-linear-gradient(
    135deg,
    color-mix(in srgb, var(--ck-event-color) 15%, transparent) 0 5px,
    transparent 5px 10px
  );
  border: 1px solid color-mix(in srgb, var(--ck-event-color) 40%, transparent);
  border-left: 3px solid var(--ck-event-color);
}
/* The pulsing left bar of a session under way. It is the card's own left
   border that pulses rather than a bar drawn inside it: the card clips its
   overflow, and anything laid over the border would be cut away. */
.ck-event--em_atendimento {
  box-shadow: inset 0 0 0 1px var(--ck-event-color);
  animation: ck-pulse 1.3s ease-in-out infinite;
}
@keyframes ck-pulse {
  0%, 100% { border-left-color: var(--ck-event-color); }
  50% { border-left-color: color-mix(in srgb, var(--ck-event-color) 25%, transparent); }
}
/* The pulse is the only thing on this screen that moves; honour the setting
   that asks it not to (WCAG 2.1 AA, spec §5). */
@media (prefers-reduced-motion: reduce) {
  .ck-event--em_atendimento { animation: none; }
}

.ck-event-state { flex: none; }
.ck-event-state--confirmado,
.ck-event-state--atendido,
.ck-event-state--cancelado,
.ck-event-state--pedido_remarcacao,
.ck-event-state--nao_confirmado {
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
}
.ck-event-state--confirmado { background: var(--c-ok); color: #ffffff; }
.ck-event-state--atendido { background: currentColor; }
.ck-event-state--atendido svg { stroke: var(--color-surface); }
.ck-event-state--cancelado { background: var(--c-bad); color: #ffffff; }
.ck-event-state--pedido_remarcacao { background: var(--c-warn); color: #ffffff; }
.ck-event-state--nao_confirmado { border: 1.5px dashed currentColor; }
.ck-event-state-glyph { font-size: 9px; font-weight: 700; line-height: 1; }

/* The state's name rides along with every card, for anything that cannot see
   the glyph. On a no-show it is the marker itself, which is how the design
   labels one. */
.ck-event-state-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.ck-event-state--falta .ck-event-state-label {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip-path: none;
  padding: 0 4px;
  border: 1px solid currentColor;
  font: var(--font-heading-weight) 10px var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ck-event-conflict { flex: none; display: grid; place-items: center; color: var(--c-bad); }