/* Material Design 3 — elcs.vikingoapp.hu
 * Az alapot a Bootstrap 5 markup adja, ezt overlay-eli a Material 3 stílus.
 * Csak az általunk használt komponensekre fókuszál (button, alert, form-floating, accordion).
 * Új komponensek (md-list, md-checkbox, md-batch-bar) saját class-ekkel.
 */

/* ----- Roboto font (self-hosted, latin + latin-ext) ----- */
/* Egy fájl tartalmazza mind a 3 súlyt (variable font), ezért 3 @font-face deklarációval
   ugyanazt a fájlt használjuk eltérő font-weight-tel. Méret: ~62 KB total, cache-elhető. */

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0306, U+0309, U+030C, U+031C, U+0323, U+0328, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('vendor/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0306, U+0309, U+030C, U+031C, U+0323, U+0328, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('vendor/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0306, U+0309, U+030C, U+031C, U+0323, U+0328, U+1D00-1DBF, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('vendor/fonts/roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ----- Design tokens (M3 light theme — Vikingo brand: #FF544D korall) ----- */
:root {
  --md-primary:                #FF544D;  /* Vikingo brand korall */
  --md-on-primary:             #ffffff;
  --md-primary-container:      #ffe1de;  /* coral 90 tone */
  --md-on-primary-container:   #410003;  /* coral 10 tone */
  --md-secondary:              #5e5b5b;  /* neutral gray, complements coral */
  --md-secondary-container:    #f1f1f1;  /* light neutral for batch bar */
  --md-on-secondary-container: #1c1b1b;
  --md-error:                  #b3261e;  /* keep distinct from primary */
  --md-on-error:               #ffffff;
  --md-error-container:        #f9dedc;
  --md-on-error-container:     #410e0b;
  --md-warning-container:      #fff4d6;
  --md-on-warning-container:   #5c4400;
  --md-success-container:      #d6f0d7;
  --md-on-success-container:   #1b3b1e;
  --md-surface:                #ffffff;  /* tiszta fehér háttér */
  --md-surface-container:      #f6f6f6;  /* semleges szürke konténer */
  --md-surface-variant:        #ededed;  /* lista-háttér / chip háttér */
  --md-on-surface:             #1d1b20;
  --md-on-surface-variant:     #49454f;
  --md-outline:                #79747e;
  --md-outline-variant:        #d1d1d1;

  --md-elevation-1: 0 1px 2px 0 rgba(0,0,0,0.08), 0 1px 3px 1px rgba(0,0,0,0.06);
  --md-elevation-2: 0 1px 2px 0 rgba(0,0,0,0.10), 0 2px 6px 2px rgba(0,0,0,0.08);
  --md-elevation-3: 0 4px 8px 3px rgba(0,0,0,0.10), 0 1px 3px 0 rgba(0,0,0,0.08);

  --md-shape-xs:     4px;
  --md-shape-sm:     8px;
  --md-shape-md:    12px;
  --md-shape-lg:    16px;
  --md-shape-pill:  9999px;

  --md-motion-easing: cubic-bezier(0.2, 0, 0, 1);
}

/* ----- Typography ----- */
body, .accordion, .alert, .btn, .form-control, .form-check-label, button {
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body {
  background: var(--md-surface);
  color: var(--md-on-surface);
}

/* ----- Buttons (Vikingo design system style) ----- */
.btn {
  font-weight: 500;
  letter-spacing: 0.1px;
  text-transform: none;
  border-radius: var(--md-shape-sm) !important;  /* 8px — nem pill */
  padding: 10px 22px !important;
  transition: background 0.18s var(--md-motion-easing),
              box-shadow 0.18s var(--md-motion-easing),
              filter 0.18s var(--md-motion-easing);
  box-shadow: none;
}
.btn-lg {
  padding: 14px 28px !important;
  font-size: 1rem;
  border-radius: var(--md-shape-sm) !important;
}
.btn-sm {
  padding: 7px 16px !important;
  font-size: 0.875rem;
  border-radius: var(--md-shape-sm) !important;
}

/* Filled primary (Vikingo "primary" variant) */
.btn-primary {
  background-color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
  color: var(--md-on-primary) !important;
  box-shadow: var(--md-elevation-1) !important;  /* finom alap-árnyék */
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--md-primary) !important;
  filter: brightness(1.06);
  box-shadow: var(--md-elevation-2) !important;
}
.btn-primary:active {
  filter: brightness(0.95);
  box-shadow: var(--md-elevation-1) !important;
}

/* Outlined primary */
.btn-outline-primary {
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  color: var(--md-primary) !important;
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: rgba(255, 84, 77, 0.08) !important;
  color: var(--md-primary) !important;
}

/* Filled danger (Vikingo "destructive" variant) */
.btn-danger {
  background-color: var(--md-error) !important;
  border-color: var(--md-error) !important;
  color: var(--md-on-error) !important;
  box-shadow: var(--md-elevation-1) !important;
}
.btn-danger:hover, .btn-danger:focus {
  filter: brightness(1.06);
  box-shadow: var(--md-elevation-2) !important;
}
.btn-danger:active {
  filter: brightness(0.95);
  box-shadow: var(--md-elevation-1) !important;
}

/* Outlined danger */
.btn-outline-danger {
  background: transparent !important;
  border: 1px solid var(--md-error) !important;
  color: var(--md-error) !important;
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
  background: rgba(179, 38, 30, 0.08) !important;
  color: var(--md-error) !important;
}

/* Outlined secondary */
.btn-outline-secondary {
  background: transparent !important;
  border: 1px solid var(--md-outline) !important;
  color: var(--md-on-surface-variant) !important;
}
.btn-outline-secondary:hover {
  background: rgba(73, 69, 79, 0.08) !important;
}

/* ----- Form floating (outlined text field) ----- */
.form-floating > .form-control {
  border: 1px solid var(--md-outline) !important;
  border-radius: var(--md-shape-xs) !important;
  background: transparent !important;
  padding-top: 1.625rem !important;
  transition: border-color 0.15s var(--md-motion-easing),
              box-shadow 0.15s var(--md-motion-easing);
}
.form-floating > .form-control:focus {
  border-color: var(--md-primary) !important;
  box-shadow: inset 0 0 0 1px var(--md-primary) !important;
  outline: none;
}
.form-floating > label {
  color: var(--md-on-surface-variant);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--md-primary);
}

/* Inline form-control (license check) */
.form-control:not(.form-floating .form-control) {
  border: 1px solid var(--md-outline);
  border-radius: var(--md-shape-xs);
  background: transparent;
}
.form-control:focus {
  border-color: var(--md-primary);
  box-shadow: 0 0 0 1px var(--md-primary);
}

/* ----- Checkboxes (radio + checkbox) ----- */
.form-check-input {
  border: 2px solid var(--md-on-surface-variant) !important;
  border-radius: 2px !important;
  width: 18px;
  height: 18px;
  margin-top: 0.25rem;
}
.form-check-input[type="radio"] {
  border-radius: 50% !important;
}
.form-check-input:checked {
  background-color: var(--md-primary) !important;
  border-color: var(--md-primary) !important;
}
.form-check-input:focus {
  box-shadow: 0 0 0 4px rgba(255, 84, 77, 0.15) !important;
}
.form-check-label {
  color: var(--md-on-surface);
  margin-left: 4px;
}
.form-check-link {
  color: var(--md-primary);
  text-decoration: underline;
}

/* ----- Alerts (M3 banners) ----- */
.alert {
  border: none !important;
  border-radius: var(--md-shape-md) !important;
  padding: 14px 20px !important;
  box-shadow: none;
}
.alert-warning {
  background: var(--md-warning-container) !important;
  color: var(--md-on-warning-container) !important;
}
.alert-success {
  background: var(--md-success-container) !important;
  color: var(--md-on-success-container) !important;
}
.alert-info {
  background: var(--md-primary-container) !important;
  color: var(--md-on-primary-container) !important;
}
.alert-danger {
  background: var(--md-error-container) !important;
  color: var(--md-on-error-container) !important;
}

/* ----- Accordion (M3 list of expandable surfaces) ----- */
.accordion {
  --bs-accordion-border-color: var(--md-outline-variant);
  --bs-accordion-border-radius: var(--md-shape-md);
  --bs-accordion-active-color: var(--md-on-primary-container);
  --bs-accordion-active-bg: var(--md-primary-container);
  background: transparent;
  border-radius: var(--md-shape-md);
  overflow: hidden;
}
.accordion-item {
  background: var(--md-surface);
  border: none;
  margin-bottom: 2px;
}
.accordion-item:first-of-type .accordion-button { border-radius: var(--md-shape-md) var(--md-shape-md) 0 0; }
.accordion-item:last-of-type .accordion-button.collapsed { border-radius: 0 0 var(--md-shape-md) var(--md-shape-md); }
.accordion-button {
  font-weight: 500;
  background: var(--md-surface-container);
  color: var(--md-on-surface);
  padding: 14px 20px;
  box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
  background: var(--md-primary-container);
  color: var(--md-on-primary-container);
}
.accordion-button:focus {
  box-shadow: none !important;
  outline: 2px solid var(--md-primary);
  outline-offset: -2px;
}
.accordion-body {
  background: var(--md-surface);
  color: var(--md-on-surface);
  padding: 16px 20px;
  border-left: 1px solid var(--md-outline-variant);   /* keret a nyitott rész körül */
  border-right: 1px solid var(--md-outline-variant);
  border-bottom: 1px solid var(--md-outline-variant);
  border-radius: 0 0 var(--md-shape-md) var(--md-shape-md);  /* lekerekített alsó sarkok */
}

/* ----- Fieldset / legend ----- */
fieldset legend {
  color: var(--md-on-surface);
  font-weight: 500;
}

/* ----- M3 List (új komponens, domain-listához) ----- */
.md-list {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  overflow: hidden;
}
.md-list-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  min-height: 56px;
  border-bottom: 1px solid var(--md-outline-variant);
  cursor: pointer;
  transition: background 0.15s var(--md-motion-easing);
}
.md-list-item:last-child { border-bottom: none; }
.md-list-item:hover {
  background: rgba(29, 27, 32, 0.04);
}
.md-list-item.is-exception {
  cursor: default;
  background: rgba(29, 27, 32, 0.02);
}
.md-list-item.is-exception:hover {
  background: rgba(29, 27, 32, 0.02);
}
.md-list-item.is-deleting {
  background: rgba(179, 38, 30, 0.05);
  pointer-events: none;
  opacity: 0.6;
}
.md-list-item-label {
  flex: 1;
  font-size: 15px;
  color: var(--md-on-surface);
  word-break: break-all;
}
.md-list-item-tag {
  font-size: 11px;
  font-weight: 500;
  color: var(--md-on-surface-variant);
  background: var(--md-surface-variant);
  padding: 3px 10px;
  border-radius: var(--md-shape-pill);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* M3 Checkbox (új komponens) */
.md-checkbox {
  width: 18px;
  height: 18px;
  border: 2px solid var(--md-on-surface-variant);
  border-radius: 2px;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 0.15s var(--md-motion-easing),
              border-color 0.15s var(--md-motion-easing);
}
.md-checkbox:hover {
  background: rgba(73, 69, 79, 0.08);
}
.md-checkbox:checked {
  background: var(--md-primary);
  border-color: var(--md-primary);
}
.md-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid var(--md-on-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.md-checkbox:focus-visible {
  outline: 2px solid var(--md-primary);
  outline-offset: 2px;
}

/* ----- Batch action bar (mint egy sticky FAB-pad a lista alatt) ----- */
.md-batch-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--md-secondary-container);
  color: var(--md-on-secondary-container);
  border-radius: var(--md-shape-md);
  margin-top: 12px;
  box-shadow: var(--md-elevation-2);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.2s var(--md-motion-easing),
              transform 0.2s var(--md-motion-easing);
}
.md-batch-bar.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.md-batch-count {
  font-weight: 500;
  font-size: 0.9375rem;
}
.md-batch-actions {
  display: flex;
  gap: 8px;
}

/* ----- Confirmation dialog (in-result inline) ----- */
.md-confirm-dialog {
  background: var(--md-surface);
  border: 1px solid var(--md-outline-variant);
  border-radius: var(--md-shape-md);
  padding: 16px 20px;
  box-shadow: var(--md-elevation-2);
  margin: 8px 0;
}
.md-confirm-dialog-title {
  font-weight: 500;
  margin-bottom: 8px;
}
.md-confirm-dialog-body {
  color: var(--md-on-surface-variant);
  font-size: 0.875rem;
  margin-bottom: 12px;
}
.md-confirm-dialog-list {
  max-height: 200px;
  overflow-y: auto;
  background: var(--md-surface-variant);
  border-radius: var(--md-shape-sm);
  padding: 8px 12px;
  margin-bottom: 16px;
  font-family: 'Roboto Mono', monospace;
  font-size: 0.8125rem;
}
.md-confirm-dialog-list div {
  padding: 2px 0;
}
.md-confirm-dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ----- Material Symbols (inline SVG) ----- */
.md-icon {
  width: 18px;
  height: 18px;
  vertical-align: text-bottom;
  flex-shrink: 0;
  margin-right: 6px;
  display: inline-block;
}
.btn .md-icon { margin-right: 6px; }
.btn-sm .md-icon { width: 16px; height: 16px; }
.btn-lg .md-icon { width: 20px; height: 20px; }

/* Szemantikus ikon-színek (override-olja a currentColor-t) */
.md-icon-activate { color: #2e7d32; }   /* zöld — sikeres / pozitív */
.md-icon-delete   { color: var(--md-error); }  /* coral-piros — törlés / negatív */
.md-icon-history  { color: var(--md-on-surface-variant); }
.md-icon-date     { color: var(--md-on-surface-variant); width: 14px; height: 14px; }

/* Egyenrangú soron belüli ikon, mint a history-list dátum-prefix */
.md-icon-inline { vertical-align: -3px; margin-right: 4px; }

/* ----- Snackbar (M3 floating toast) ----- */
.md-snackbar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(120px);
  min-width: 280px;
  max-width: 520px;
  padding: 14px 16px 14px 20px;
  background: var(--md-on-surface);
  color: var(--md-surface);
  border-radius: var(--md-shape-sm);
  box-shadow: var(--md-elevation-3);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s var(--md-motion-easing),
              transform 0.25s var(--md-motion-easing);
  font-size: 0.9375rem;
}
.md-snackbar.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.md-snackbar-text { flex: 1; line-height: 1.4; }
.md-snackbar .md-icon { margin-right: 0; flex-shrink: 0; }
.md-snackbar-close {
  background: transparent;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
  line-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-snackbar-close .md-icon { margin: 0; width: 16px; height: 16px; }
.md-snackbar-close:hover { opacity: 1; background: rgba(255,255,255,0.08); }

.md-snackbar.is-success {
  background: #1b3b1e;
  color: #d6f0d7;
}
.md-snackbar.is-error {
  background: #410e0b;
  color: #f9dedc;
}
.md-snackbar.is-info {
  background: var(--md-on-surface);
  color: var(--md-surface);
}

/* ----- Container (teljes szélesség, mérsékelt oldal-tér a kijelöléseknek) ----- */
.container-fluid {
  max-width: none;
  width: 100%;
  padding-top: 16px;
  padding-left: 16px;
  padding-right: 16px;
  margin-left: 0;
  margin-right: 0;
}

/* ----- Apró javítások ----- */
hr { border-color: var(--md-outline-variant); }
code {
  background: var(--md-surface-variant);
  color: var(--md-on-surface);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.875em;
}