/* =================================================================
   211 Design System — Components
   Maps existing intranet patterns to the 211 UI Kit.
   Requires tokens.css to be loaded first.
   ================================================================= */

/* ------------------------------------------------------------------
   Typography classes
   ------------------------------------------------------------------ */
.t-h2  { font: var(--fw-bold) var(--fs-h2)/var(--lh-h2) var(--font-display); color: var(--text-primary); letter-spacing: -0.01em; }
.t-h4  { font: var(--fw-bold) var(--fs-h4)/var(--lh-h4) var(--font-display); color: var(--text-primary); }
.t-h6  { font: var(--fw-bold) var(--fs-h6)/var(--lh-h6) var(--font-display); color: var(--text-primary); }
.t-h7  { font: var(--fw-bold) var(--fs-h7)/var(--lh-h7) var(--font-display); color: var(--text-primary); }
.t-body       { font: var(--fw-semibold) var(--fs-body)/var(--lh-body) var(--font-body); color: var(--text-primary); }
.t-body-bold  { font: var(--fw-bold)     var(--fs-body)/var(--lh-body) var(--font-body); color: var(--text-primary); }
.t-label      { font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-body); color: var(--text-primary); }
.t-muted      { color: var(--text-secondary); }
.t-eyebrow {
  font: var(--fw-bold) var(--fs-label)/var(--lh-label) var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray-500);
}

/* ------------------------------------------------------------------
   Button — pill, M (48) and S (40)
   Source: /UI-Kit/Tla-tka
     Primary  = "Hlavní"    (bg primary, white text)
     Subtle   = "Doplňkové" (bg gray-100, primary text)
     Outline  = "Sekundární" (3px border)
     Text     = "Textové"   (transparent, primary text)
     Danger   = derived for destructive action (Smazat)
   ------------------------------------------------------------------ */
.btn {
  --_h: var(--control-h-m);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  height: var(--_h);
  padding: 0 var(--s-6);
  border: 0;
  border-radius: var(--r-pill);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  letter-spacing: 0;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease),
              color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease),
              border-color var(--dur-base) var(--ease);
  white-space: nowrap;
}
.btn:focus-visible { outline: 0; box-shadow: var(--shadow-focus); }
.btn--s { --_h: var(--control-h-s); padding: 0 var(--s-5); font-size: var(--fs-body); }

/* Variants */
.btn--primary {
  background: var(--c-primary);
  color: var(--text-onbrand);
}
.btn--primary:hover  { background: var(--c-primary-hover); }
.btn--primary:active { background: var(--c-primary-deep); }
.btn--primary[disabled],
.btn--primary.is-disabled { background: var(--c-gray-300); color: var(--c-white); cursor: not-allowed; }

.btn--subtle {
  background: var(--c-gray-100);
  color: var(--c-primary);
}
.btn--subtle:hover { background: var(--c-primary-100); }

.btn--outline {
  background: var(--c-white);
  color: var(--c-primary);
  box-shadow: inset 0 0 0 3px var(--c-primary);
}
.btn--outline:hover { background: var(--c-primary-100); }

.btn--text {
  background: transparent;
  color: var(--c-primary);
  padding: 0 var(--s-3);
}
.btn--text:hover { color: var(--c-primary-hover); text-decoration: underline; text-underline-offset: 4px; }

.btn--danger {
  background: var(--c-danger);
  color: var(--text-onbrand);
}
.btn--danger:hover  { background: var(--c-danger-soft); }
.btn--danger:active { background: #D85A5A; }

/* Iconography slot inside a button */
.btn .ico { width: 20px; height: 20px; display: inline-block; }

/* ------------------------------------------------------------------
   Input / Textarea
   Source: /UI-Kit/Textov-pole
   ------------------------------------------------------------------ */
.field { display: flex; flex-direction: column; gap: var(--s-3); }
.field__label-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-3);
}
.field__label  { font: var(--fw-bold) var(--fs-label)/1 var(--font-body); color: var(--c-primary-deep); }
.field__req    { font: var(--fw-bold) var(--fs-label)/1 var(--font-body); color: var(--c-danger); }

.input,
.textarea {
  display: flex; align-items: center;
  width: 100%;
  height: var(--control-h-m);
  padding: 0 var(--s-5);
  background: var(--c-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-md);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  color: var(--c-primary-deep);
  outline: 0;
  transition: border-color var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease);
}
.input::placeholder,
.textarea::placeholder { color: var(--c-primary-200); }
.input:hover, .textarea:hover { border-color: var(--c-primary); }
.input:focus, .textarea:focus { border-color: var(--c-primary); box-shadow: var(--shadow-focus); }
.input[disabled], .textarea[disabled] {
  background: var(--c-gray-50);
  color: var(--c-primary-200);
  cursor: not-allowed;
}
.field.is-error .input,
.field.is-error .textarea { border-color: var(--c-danger); }
.field.is-error .field__label { color: var(--c-danger); }

.textarea { height: auto; min-height: 176px; padding: var(--s-3) var(--s-5); align-items: flex-start; }

/* ------------------------------------------------------------------
   Checkbox
   Source: /UI-Kit/Za-krt-vac-pole
   ------------------------------------------------------------------ */
.checkbox {
  display: inline-flex; align-items: center; gap: var(--s-3);
  cursor: pointer;
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  color: var(--c-primary-deep);
  user-select: none;
}
.checkbox__box {
  width: 22px; height: 22px;
  border: 1.5px solid var(--c-primary-200);
  border-radius: 6px;
  background: var(--c-white);
  display: inline-grid; place-items: center;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.checkbox__box::after {
  content: ""; width: 12px; height: 12px;
  background: var(--c-white);
  clip-path: polygon(14% 49%, 0 63%, 38% 100%, 100% 24%, 87% 13%, 38% 73%);
  transform: scale(0);
  transition: transform var(--dur-fast) var(--ease);
}
.checkbox input { position: absolute; opacity: 0; pointer-events: none; }
.checkbox input:checked + .checkbox__box { background: var(--c-primary); border-color: var(--c-primary); }
.checkbox input:checked + .checkbox__box::after { transform: scale(1); }
.checkbox:hover .checkbox__box { border-color: var(--c-primary); }

/* ------------------------------------------------------------------
   Tag / Chip
   Source: /UI-Kit/t-tky  (Štítky)
   ------------------------------------------------------------------ */
.tag {
  display: inline-flex; align-items: center; gap: var(--s-2);
  height: 32px;
  padding: 0 var(--s-3);
  border-radius: var(--r-sm);
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: 0;
}
.tag--active   { background: var(--c-primary-100); color: var(--c-primary); }
.tag--inactive { background: var(--c-gray-100);    color: var(--c-gray-500); }
.tag--success  { background: #E0F8E6;              color: #1F8A3F; }
.tag--warning  { background: #FFE9D6;              color: #B86A1E; }
.tag--danger   { background: #FBE0E0;              color: #B23A3A; }

/* ------------------------------------------------------------------
   Card
   Source: /UI-Kit/Karty
   ------------------------------------------------------------------ */
.card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-6);
  box-shadow: var(--shadow-1);
}
.card--flush  { padding: 0; }
.card--raised { box-shadow: var(--shadow-2); }

.card__header { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-4); }
.card__meta   { display: flex; align-items: center; gap: var(--s-3); color: var(--text-secondary); font-size: var(--fs-label); }
.card__title  { font: var(--fw-bold) var(--fs-h7)/1.3 var(--font-display); color: var(--text-primary); margin: var(--s-2) 0 var(--s-3); }
.card__body   { color: var(--text-primary); font-weight: var(--fw-semibold); }

/* Title-less post: the opening line of the body acts as the headline.
   No separate title field — author just starts writing. */
.card__post   { margin: var(--s-2) 0 0; }
.card__post .lead {
  display: block;
  font: var(--fw-bold) var(--fs-h7)/1.35 var(--font-display);
  color: var(--text-primary);
}
.card__post .cont {
  color: var(--text-primary); font-weight: var(--fw-semibold);
  margin-top: var(--s-2);
}
/* Collapsed/preview state: clamp the running text under the lead */
.card__post .cont--clamp {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.card__footer { display: flex; gap: var(--s-3); margin-top: var(--s-5); }

/* Pinned variant: a highlighted card — accent-tinted surface, accent border,
   raised elevation, and a labelled badge. No gradient strip. */
.card--pinned {
  position: relative;
  background: var(--c-primary-100);
  border-color: var(--c-primary);
  box-shadow: var(--shadow-2);
}

.pin-badge {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: auto; flex: 0 0 auto;
  height: 24px; padding: 0 11px;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: #fff;
  font: var(--fw-bold) 11px/1 var(--font-body);
  letter-spacing: 0.08em; text-transform: uppercase;
  white-space: nowrap;
}
.pin-badge::before {
  content: ""; width: 12px; height: 12px; flex: 0 0 auto;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3l7 7-4 1-3 3v3l-2 2-4-4-4 4v-2l4-4-4-4 2-2h3l3-3 2-1z' fill='black'/></svg>") no-repeat center / contain;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M14 3l7 7-4 1-3 3v3l-2 2-4-4-4 4v-2l4-4-4-4 2-2h3l3-3 2-1z' fill='black'/></svg>") no-repeat center / contain;
}
/* Legacy hook: hide any leftover corner-pin span from old markup. */
.card__pin { display: none; }

/* ------------------------------------------------------------------
   Sidebar panel — used for KATEGORIE and RYCHLÉ ODKAZY
   ------------------------------------------------------------------ */
.panel {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-5) var(--s-6);
}
.panel__title {
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--c-gray-500);
  padding-bottom: var(--s-4);
  margin-bottom: var(--s-3);
  border-bottom: 1px solid var(--c-gray-100);
}
.panel__list { display: flex; flex-direction: column; gap: var(--s-3); }

/* Quick link inside RYCHLÉ ODKAZY */
.qlink {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-sm);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  color: var(--c-primary-deep);
  text-decoration: none;
  transition: background-color var(--dur-base) var(--ease), color var(--dur-base) var(--ease);
}
.qlink:hover { background: var(--c-primary-100); color: var(--c-primary); }
.qlink--manage { color: var(--c-gray-500); font-weight: var(--fw-semibold); }

/* Category list item with checkbox */
.cat-item {
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--s-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
}
.cat-item:hover { background: var(--c-primary-100); }
.cat-item.is-selected { background: var(--c-primary-100); }
.cat-item.is-selected::before {
  content: ""; position: absolute; left: -20px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 3px; background: var(--c-primary);
}

/* ------------------------------------------------------------------
   Top bar — brand band + secondary nav band
   ------------------------------------------------------------------ */
.brandbar {
  background: var(--c-primary-deep);
  color: var(--c-white);
  padding: var(--s-5) var(--s-7);
  display: flex; align-items: center; gap: var(--s-6);
}
.brandbar__logo {
  display: flex; align-items: center; gap: var(--s-5);
  font: var(--fw-bold) var(--fs-h4)/1 var(--font-display);
}
.brandbar__divider { width: 1px; height: 36px; background: rgba(255,255,255,0.25); }
.brandbar__product {
  font: var(--fw-bold) var(--fs-label)/1 var(--font-body);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
}
/* Member actions live in the main header (brandbar): Messages + Sign out */
.brandbar__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s-4); }
.brandbar__btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 40px; padding: 0 var(--s-5); border: 0; cursor: pointer;
  border-radius: var(--r-full);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body); text-decoration: none;
  background: rgba(255,255,255,0.12); color: var(--c-white);
  transition: background var(--dur-base) var(--ease);
}
.brandbar__btn:hover { background: rgba(255,255,255,0.22); }
.brandbar__btn svg { display: block; }
.brandbar__btn .badge {
  min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center;
  border-radius: var(--r-full); background: var(--c-white); color: var(--c-primary-deep);
  font: 800 12px/1 var(--font-body);
}
.brandbar .btn--outline {
  background: transparent; color: var(--c-white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9);
  height: 40px; padding: 0 var(--s-5);
}
.brandbar .btn--outline:hover { background: rgba(255,255,255,0.10); }

.navbar {
  background: var(--c-primary);
  color: var(--c-white);
  padding: 0 var(--s-7);
  height: 56px;
  display: flex; align-items: center;
}
.navbar__title { font: var(--fw-bold) var(--fs-body)/1 var(--font-body); color: var(--c-white); }
.navbar__links { margin-left: auto; display: flex; align-items: center; gap: var(--s-7); }
.navbar__link {
  color: var(--c-white);
  font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity var(--dur-base) var(--ease);
}
.navbar__link:hover, .navbar__link.is-active { opacity: 1; }
.navbar .btn--outline {
  background: transparent;
  color: var(--c-white);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,0.9);
  height: 40px; padding: 0 var(--s-5);
}
.navbar .btn--outline:hover { background: rgba(255,255,255,0.10); }

/* ------------------------------------------------------------------
   Layout
   ------------------------------------------------------------------ */
.app          { min-height: 100vh; background: var(--surface-app); }
.app__main    { max-width: var(--container); margin: 0 auto; padding: var(--s-8) var(--s-7); }
.layout-3col  { display: grid; grid-template-columns: 240px 1fr 240px; gap: var(--s-7); align-items: start; }

.page-header  { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.page-title   { font: var(--fw-bold) var(--fs-h4)/1.2 var(--font-display); color: var(--text-primary); }
.post-list    { display: flex; flex-direction: column; gap: var(--s-5); }

/* ------------------------------------------------------------------
   Dropdown top nav (shared — rendered by js/nav.js)
   ------------------------------------------------------------------ */
.nav-dd { position: relative; }
.nav-dd__btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 0; cursor: pointer;
  color: var(--c-white); font: var(--fw-bold) var(--fs-body)/1 var(--font-body);
  opacity: .85; padding: 6px 0; transition: opacity var(--dur-base) var(--ease);
}
.nav-dd__btn:hover, .nav-dd.is-active .nav-dd__btn, .nav-dd.is-open .nav-dd__btn { opacity: 1; }
.nav-dd__btn .caret {
  width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); margin-top: -3px; transition: transform var(--dur-base) var(--ease);
}
.nav-dd.is-open .nav-dd__btn .caret { transform: rotate(-135deg); margin-top: 1px; }
.nav-dd__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%);
  min-width: 190px; background: #fff; border: 1px solid var(--c-gray-200);
  border-radius: var(--r-md); box-shadow: var(--shadow-2); padding: 6px; display: none; z-index: 80;
}
.nav-dd.is-open .nav-dd__menu { display: block; }
.nav-dd__menu::before {
  content: ""; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg);
  width: 11px; height: 11px; background: #fff; border-left: 1px solid var(--c-gray-200); border-top: 1px solid var(--c-gray-200);
}
.nav-dd__menu a {
  display: block; padding: 9px 12px; border-radius: var(--r-sm);
  font: 600 14px/1.2 var(--font-body); color: var(--c-gray-800); text-decoration: none; white-space: nowrap;
}
.nav-dd__menu a:hover { background: var(--c-gray-100); color: var(--c-primary); }
.nav-dd__menu a.is-current { color: var(--c-primary); background: var(--c-primary-100); }