/* =========================================
   ALAPÉRTELMEZETT TÉMA - Világos és sötét mód
   ========================================= */

/* Prerender állapotban alapértelmezett világos téma */
body:not([class*="mud-theme"]) {
    background-color: #ffffff !important;
}

/* Világos téma */
body:not(.mud-theme-dark),
.mud-theme-default {
    background-color: #ffffff !important;
}

body:not(.mud-theme-dark) .mud-layout,
body:not(.mud-theme-dark) .mud-main-content,
body:not(.mud-theme-dark) .mud-container,
body:not(.mud-theme-dark) .mud-paper {
    background-color: #ffffff !important;
}

/* Sötét téma */
body.mud-theme-dark {
    background-color: #1a1a27 !important;
}

body.mud-theme-dark .mud-layout,
body.mud-theme-dark .mud-main-content,
body.mud-theme-dark .mud-container,
body.mud-theme-dark .mud-paper {
    background-color: #1a1a27 !important;
}

/* =========================================
   WEEKEND (Hétvége: szombat, vasárnap)
   ========================================= */

/* 1) Globális */
	.mud-table tr.weekend td,
	.weekend {
		background-color: rgba(255, 228, 230, 1.0) !important; /* light rózsaszín */
		color: rgba(185, 28, 28, 1.0) !important; /* sötét vörös */
	}

		.mud-table tr.weekend td:first-child {
			border-left: 3px solid rgba(252, 165, 165, 1.0) !important;
		}

/* 2) Light mode */
	body.mud-theme-default .mud-table tr.weekend td,
	body.mud-theme-default .weekend {
		background-color: rgba(255, 228, 230, 1.0) !important;
		color: rgba(185, 28, 28, 1.0) !important;
	}

		body.mud-theme-default .mud-table tr.weekend td:first-child {
			border-left: 3px solid rgba(252, 165, 165, 1.0) !important;
		}

		/* 2.1) Light hover (ha kell külön) */
			body.mud-theme-default .mud-table-hover tr.weekend:hover td {
				/* opcionális: enyhén sötétebb */
				background-color: rgba(255, 228, 230, 0.9) !important;
			}

/* 3) Dark mode */
	body.mud-theme-dark .mud-table tr.weekend td,
	body.mud-theme-dark .weekend {
		/* mélyebb háttér, NEM piros szöveg */
		background-color: rgba(60, 8, 12, 0.25) !important;
		color: var(--mud-palette-text-primary) !important;
	}

	body.mud-theme-dark .mud-table tr.weekend td:first-child {
		border-left: 3px solid rgba(255, 77, 77, 0.8) !important;
	}

	/* 3.1) Dark hover */
		body.mud-theme-dark .mud-table-hover tr.weekend:hover td {
			background-color: rgba(80, 12, 18, 0.5) !important;
		}

/* 4) Elválasztó */
	/* Vasárnap utáni elválasztó – mindkét téma */
		.mud-table tr.is-sunday td {
			border-bottom: 2px solid rgba(239, 68, 68, 0.2) !important;
		}

		body.mud-theme-dark .mud-table tr.is-sunday td {
			border-bottom-color: rgba(239, 68, 68, 0.2) !important;
		}


/* =========================================
   HOLIDAY-LEAVE (Szabadság napok)
   ========================================= */

/* 1) Globális */
	.holiday-leave {
		background-color: rgba(219, 234, 254, 1.0) !important; /* light kék */
		color: rgba(37, 99, 235, 1.0) !important; /* sötét kék */
	}

/* 2) Light mode */
	body.mud-theme-default .holiday-leave,
	body.mud-theme-default .mud-table tr.holiday-leave td {
		background-color: rgba(219, 234, 254, 1.0) !important;
		color: rgba(37, 99, 235, 1.0) !important;
	}

	/* 2.1) Light hover */
		body.mud-theme-default .mud-table-hover tr.holiday-leave:hover td {
			background-color: rgba(219, 234, 254, 0.9) !important;
		}

/* 3) Dark mode */
	body.mud-theme-dark .holiday-leave,
	body.mud-theme-dark .mud-table tr.holiday-leave td {
		background-color: rgba(59, 130, 246, 0.4) !important;
		color: rgba(255, 255, 255, 0.7) !important;
	}

	/* 3.1) Dark hover */
		body.mud-theme-dark .mud-table-hover tr.holiday-leave:hover td {
			background-color: rgba(59, 130, 246, 0.8) !important;
		}

/* ==== OVERRIDE: Szabadság (holiday-leave) szöveg legyen fekete / normál ==== */
.holiday-leave,
body.mud-theme-default .holiday-leave,
body.mud-theme-default .mud-table tr.holiday-leave td {
    color: #000 !important;            /* világos téma: fekete */
}

/* Dark téma – használjuk a MudBlazor alap szöveg színt (jobb kontraszt) */
body.mud-theme-dark .holiday-leave,
body.mud-theme-dark .mud-table tr.holiday-leave td {
    color: var(--mud-palette-text-primary) !important;
}

/* (Ha csak a háttér kell és a színeket örökíteni szeretnéd, akkor a fenti color sorok helyett:
   color: inherit !important; 
   de itt direkt feketét kértél a világos témára.)*/


/* =========================================
   SICK-LEAVE (Betegszabadság)
   ========================================= */

/* 1) Globális */
	.sick-leave {
		background-color: rgba(220, 252, 231, 1.0) !important; /* light zöld */
		color: rgba(22, 163, 74, 1.0) !important; /* zöld */
	}

/* 2) Light mode */
	body.mud-theme-default .sick-leave {
		background-color: rgba(220, 252, 231, 1.0) !important;
		color: rgba(22, 163, 74, 1.0) !important;
	}

	/* 2.1) Light hover */
		body.mud-theme-default .mud-table-hover tr.sick-leave:hover td {
			background-color: rgba(220, 252, 231, 0.9) !important;
		}

/* 3) Dark mode */
	body.mud-theme-dark .sick-leave {
		background-color: rgba(16, 185, 129, 0.2) !important;
		color: rgba(255, 255, 255, 1.0) !important;
	}

	/* 3.1) Dark hover */
		body.mud-theme-dark .mud-table-hover tr.sick-leave:hover td {
			background-color: rgba(16, 185, 129, 0.3) !important;
		}


/* =========================================
   PUBLIC-HOLIDAY (Ünnepnapok)
   ========================================= */

/* 1) Globális */
	.public-holiday {
		background-color: rgba(255, 237, 213, 1.0) !important; /* light narancs */
		color: rgba(255, 255, 255, 1.0) !important;
	}

/* 2) Light mode */
	body.mud-theme-default .public-holiday {
		background-color: rgba(255, 237, 213, 1.0) !important;
		color: rgba(255, 255, 255, 1.0) !important;
	}

/* 2.1) Light hover */
	body.mud-theme-default .mud-table-hover tr.public-holiday:hover td {
		background-color: rgba(255, 237, 213, 0.95) !important;
	}

/* 3) Dark mode */
	body.mud-theme-dark .public-holiday {
		background-color: rgba(72, 50, 17, 0.4) !important;
		color: rgba(255, 194, 153, 1.0) !important;
	}

	/* 3.1) Dark hover */
		body.mud-theme-dark .mud-table-hover tr.public-holiday:hover td {
			background-color: rgba(72, 50, 17, 0.5) !important;
		}


/* =========================================
   SHIFTED-DAY-OFF (Áthelyezett pihenőnap)
   ========================================= */

/* 1) Globális */
	.shifted-day-off {
		background-color: rgba(254, 240, 138, 1.0) !important; /* light sárga */
		color: rgba(161, 98, 7, 1.0) !important;
	}

/* 2) Light mode */
	body.mud-theme-default .shifted-day-off {
		background-color: rgba(254, 240, 138, 1.0) !important;
		color: rgba(161, 98, 7, 1.0) !important;
	}

	/* 2.1) Light hover */
		body.mud-theme-default .mud-table-hover tr.shifted-day-off:hover td {
			background-color: rgba(254, 240, 138, 0.95) !important;
		}

/* 3) Dark mode */
	body.mud-theme-dark .shifted-day-off {
		background-color: rgba(31, 20, 0, 0.8) !important;
		color: rgba(255, 224, 163, 1.0) !important;
	}

	/* 3.1) Dark hover */
		body.mud-theme-dark .mud-table-hover tr.shifted-day-off:hover td {
			background-color: rgba(31, 20, 0, 0.9) !important;
		}


/* =========================================
   SHIFTED-WORKING-DAY (Áthelyezett munkanap)
   ========================================= */

/* 1) Globális */
	.shifted-working-day {
		background-color: rgba(224, 255, 224, 1.0) !important; /* light zöldes */
		color: rgba(5, 150, 105, 1.0) !important;
	}

/* 2) Light mode */
	body.mud-theme-default .shifted-working-day {
		background-color: rgba(224, 255, 224, 1.0) !important;
		color: rgba(5, 150, 105, 1.0) !important;
	}

	/* 2.1) Light hover */
		body.mud-theme-default .mud-table-hover tr.shifted-working-day:hover td {
			background-color: rgba(224, 255, 224, 0.95) !important;
		}

/* 3) Dark mode */
	body.mud-theme-dark .shifted-working-day {
		/* korábbi elírás javítva: rgb -> rgba */
		background-color: rgba(29, 52, 100, 0.4) !important;
		color: rgba(163, 232, 208, 1.0) !important;
	}

	/* 3.1) Dark hover */
		body.mud-theme-dark .mud-table-hover tr.shifted-working-day:hover td {
			background-color: rgba(29, 52, 100, 0.8) !important;
		}


/* =========================================
   Globális táblázat hover (csak dark)
   ========================================= */

	body.mud-theme-dark .mud-table-hover tr:hover td {
		background-color: rgba(255, 255, 255, 0.02) !important;
	}

/* =========================================
   Admin panel fejlécek (light/dark)
   ========================================= */

.admin-panel-header { border-radius: 8px; }

/* Light theme */
body.mud-theme-default .admin-panel-header {
  background-color: #f3f4f6; /* szürkébb világos háttér */
  color: #1f2937;           /* sötétebb szöveg */
}

/* Dark theme */
body.mud-theme-dark .admin-panel-header {
  background-color: #12141c; /* eddigi sötét háttér */
  color: var(--mud-palette-drawer-text, #b2b0bf);
}

/* Örökölt színezés a belső elemekre */
.admin-panel-header .mud-icon,
.admin-panel-header .mud-typography {
  color: inherit;
}

/* Átmeneti override: Admin oldalak régi inline sötét háttér (background:#12141c) fényes témában */
body.mud-theme-default .mud-expansion-panels .mud-expansion-panel .mud-paper[style*="background:#12141c"] {
  background-color: #f3f4f6 !important;
  color: #1f2937 !important;
}
body.mud-theme-default .mud-expansion-panels .mud-expansion-panel .mud-paper[style*="background:#12141c"] .mud-icon,
body.mud-theme-default .mud-expansion-panels .mud-expansion-panel .mud-paper[style*="background:#12141c"] .mud-typography {
  color: inherit !important;
}
/* Light theme (alt selectors) */
body.mud-light .admin-panel-header,
html[data-bs-theme='light'] .admin-panel-header {
  background-color: #f3f4f6;
  color: #1f2937;
}

/* Keresőmező Layout */
.filter-bar {
	display: flex;
	max-width: 960px;
	gap: 24px;
	width: 100%;
}

.filter-search {
	flex: 3 1 0;
	min-width: 320px;
}

.filter-role {
	flex: 2 1 0;
	min-width: 200px;
}

.filter-add {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

/* =========================================
   Responsive helpers
   ========================================= */

.admin-users-card {
    max-width: 100%;
}

.admin-users-toolbar {
    gap: 16px;
}

.admin-users-filters {
    gap: 24px;
}

.responsive-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.responsive-table table {
    min-width: 720px;
}

@media (max-width: 1200px) {
    .main-appbar .mud-toolbar {
        flex-wrap: wrap;
        gap: 8px;
        padding-inline: 8px;
    }

    .main-appbar .mud-toolbar > * {
        margin-top: 4px;
    }

    .main-appbar .mud-divider-vertical {
        display: none;
    }

    .main-appbar .language-switcher {
        justify-content: flex-end;
        width: 100%;
    }

    .admin-users-toolbar {
        flex-wrap: wrap;
    }

    .filter-bar {
        max-width: 100%;
    }
}

@media (max-width: 900px) {
    .filter-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .filter-search,
    .filter-role,
    .filter-add {
        flex: 1 1 100%;
        min-width: 0;
        width: 100%;
    }

    .main-content {
        padding: 56px 16px 20px;
    }

    .responsive-table table {
        min-width: 640px;
    }

    .main-appbar .mud-chip {
        width: 100%;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    .main-appbar .mud-toolbar {
        gap: 6px;
    }

    .responsive-table {
        margin: 0 -8px;
        padding: 0 8px 8px;
    }

    .responsive-table table {
        min-width: 560px;
    }

    .main-appbar .language-switcher {
        justify-content: center;
    }
}

/* =========================================
   Munkaido komponens stílusai (átköltöztetve globálisra)
   ========================================= */

/* Hónap navigáció */
.month-nav {
    margin-top: 4rem;
}

/* Mud Expansion Panels – mobil finomhangolás */
@media (max-width: 960px) {
    .mud-expansion-panel-header {
        font-weight: 600;
    }

    .mud-expansion-panels {
        border-radius: 10px;
        overflow: visible;
    }
}

/* Asztali táblázat – belső görgetés tiltása */
.munkaido-no-scroll .mud-table-container {
    overflow-y: visible !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: visible !important;
}

/* Mobil kártyák (ExpansionPanel) */
.day-card {
	box-shadow: var(--mud-elevation-2);
	border: 1px solid var(--mud-palette-lines-default) !important;
	border-radius: 12px;
	overflow: hidden;
}

/* "kattintható" fejlécháttér + kurzor */
.day-card-header {
    cursor: pointer;
}

@media (hover: hover) {
    .day-card-header:hover {
        background-color: var(--mud-palette-action-default-hover);
    }
}

/* fejléctől leválasztó finom vonal */
.day-card-body {
    border-top: 1px dashed var(--mud-palette-lines-default);
}

/* lebegésre erősebb árnyék */
@media (hover: hover) {
    .day-card:hover {
        box-shadow: var(--mud-elevation-4);
    }
}

/* nyitott panel */
/* .expanded-day {
}  */


/* "Ma" kiemelés (teljes kártya + opcionálisan csak a header) */
.today-day {
    background-color: rgba(173, 216, 230, 0.3);
}

.today-day .day-card-header {
    background-color: rgba(173, 216, 230, 0.3);
}

/* Lebegő Összes mentése gombhoz alul hely biztosítása */
.floating-save-spacer { height: 96px; }

/* Mobil „MENTÉS” gomb – nagyobb tappolható cél */
.mobile-save-btn {
    padding: 12px 16px;
    min-height: 40px;
    min-width: 44px;
    font-weight: 700;
    border-radius: 10px;
    margin-right: 2px;
}

/* alsó térköz a gomb körül */
.save-row {
    padding-right: 10px;
    padding-bottom: 8px;
}

/* Dátum + nap a címben – nagyobb és félkövér */
.day-title {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1.2;
}

/* Óra:perc mezők – nagyobb és félkövér */
.time-input .mud-input-input {
    font-size: 1.1rem;
    font-weight: 700;
}

/* Munkaidő – ledolgozott idő szöveg nagyobb betűvel */
.worked-hours.mud-typography {
    font-size: 1.1rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ===== Munkaidő toolbar (mobil/desktop) ===== */

/* Közös alapok */
.toolbar-actions {
  display: flex;
  width: 100%;
}

.toolbar-actions .action {
  min-height: 44px;       /* egységes magasság */
  min-width: 160px;       /* egységes szélesség – finomhangolható */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: 16px;
}

.toolbar-actions .action-switch {
  border: 1px solid var(--mud-palette-lines-default);
  border-radius: var(--mud-default-borderradius, 6px);
  background: var(--mud-palette-surface);
  display: inline-flex;
  gap: 10px;
}

/* pontos selector a MudSwitch címkére */
.toolbar-actions .action-switch .mud-switch-label {
  white-space: nowrap;
  font-weight: 600;
}

/* ===== DESKTOP (>=960px) ===== */
@media (min-width: 960px) {
  .toolbar-actions { gap: 12px; }
  .toolbar-actions .actions-left { display: flex; gap: 12px; }

  /* balról jobbra: switch -> PDF -> Excel, jobb szélen Refresh */
  .toolbar-actions .sw-manual { order: 1; }
  .toolbar-actions .btn-export-menu-item { order: 2; }
  .toolbar-actions .btn-export-pdf { order: 2; }
  .toolbar-actions .btn-export-excel { order: 3; }
  .toolbar-actions .btn-refresh { order: 4; }

  /* szűkebb desktopon kicsit kisebb minimális szélesség */
  @media (max-width: 1280px) {
    .toolbar-actions .action { min-width: 140px; }
  }
}

/* ===== Export gombok egységes méretre (PDF / Excel) ===== */
.toolbar-actions .btn-export-pdf,
.toolbar-actions .btn-export-excel {
  height: 44px !important;          /* azonos magasság */
  min-width: 160px !important;      /* azonos szélesség */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding-inline: 16px !important;
}/* Egyesített Export (MudMenu) – anchor gomb és konténer */
.toolbar-actions .btn-export-menu.mud-button-root,
.toolbar-actions .btn-export-menu-item {
  height: 44px;
  min-width: 160px;
}

/* ===== Munkaidő tábla oszlopszélességek (desktop) ===== */
.td-checkin, .td-checkout { width: 220px; }
.td-break { width: 200px; }
.td-event { width: 400px; }

/* ===== MOBIL (<960px) ===== */
@media (max-width: 959.98px) {
  /* mobil 2×2-es grid finomhangolása */
  .mobile-actions-grid > .mud-grid-item:first-child {
    display: flex;
    flex-direction: column-reverse; /* felül a switch, alatta az Export menü */
  }
  .mobile-actions-grid .mud-menu { margin: 6px 0 10px; }
  .mobile-actions-grid > .mud-grid-item:last-child .mud-stack {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
}