/* 
 * Alap megjelenés az alkalmazáshoz
 * Cél: egyszerű, letisztult, mobilbarát admin felület.
 */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    background: #f4f6f8;
    color: #1f2933;
}

/* Felső fejléc */

.app-header {
    background: #1f2937;
    color: #ffffff;
    padding: 16px 24px;
}

.app-header h1 {
    margin: 0;
    font-size: 22px;
}

.app-header p {
    margin: 4px 0 0 0;
    color: #d1d5db;
    font-size: 14px;
}

/* Navigáció */

.app-nav {
    background: #ffffff;
    border-bottom: 1px solid #d9dee5;
    padding: 10px 24px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.app-nav a {
    text-decoration: none;
    color: #1f2937;
    background: #eef2f7;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 14px;
}

.app-nav a.active {
    background: #2563eb;
    color: #ffffff;
}

.app-nav a:hover {
    background: #dbe4ef;
}

.app-nav a.active {
    background: #2563eb;
    color: #ffffff;
}

.app-nav a.active {
    background: #2563eb;
    color: #ffffff;
}

/* Tartalmi konténer */

.container {
    max-width: 1200px;
    margin: 24px auto;
    padding: 0 16px;
}

/* Kártya */

.card {
    background: #ffffff;
    border: 1px solid #d9dee5;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}

.card h2 {
    margin-top: 0;
    font-size: 20px;
}

/* Űrlapok */

.form-row {
    margin-bottom: 14px;
}

label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 14px;
}


input[type="text"],
input[type="date"],
input[type="time"],
input[type="number"],
textarea,
select {
    width: 100%;
    max-width: 480px;
    padding: 10px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    font-size: 15px;
}

textarea {
    resize: vertical;
}

button,
.btn {
    display: inline-block;
    border: none;
    background: #2563eb;
    color: #ffffff;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
}

button:hover,
.btn:hover {
    background: #1d4ed8;
}

/* Másodlagos link */

.link-secondary {
    color: #475569;
    text-decoration: none;
    margin-left: 10px;
}

.link-secondary:hover {
    text-decoration: underline;
}

/* Üzenetek */

.message-success {
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.message-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Táblázat */

.table-wrapper {
    width: 100%;
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 760px;
}

th,
td {
    border-bottom: 1px solid #e5e7eb;
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
    font-size: 14px;
}

th {
    background: #f8fafc;
    font-weight: bold;
}

tr:hover td {
    background: #f9fafb;
}

/* Státusz jelvények */

.badge {
    display: inline-block;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
}

.badge-active {
    background: #dcfce7;
    color: #166534;
}

.badge-inactive {
    background: #e5e7eb;
    color: #374151;
}

/* Műveleti linkek */

.action-links a {
    color: #2563eb;
    text-decoration: none;
    margin-right: 8px;
}

.action-links a:hover {
    text-decoration: underline;
}

/* Mobil optimalizálás */

@media (max-width: 768px) {
    .app-header {
        padding: 14px 16px;
    }

    .app-header h1 {
        font-size: 20px;
    }

    .app-nav {
        padding: 10px 16px;
        gap: 8px;
    }

    .app-nav a {
        width: 100%;
        text-align: center;
    }

    .container {
        margin: 16px auto;
        padding: 0 12px;
    }

    .card {
        padding: 16px;
        border-radius: 10px;
    }

    button,
    .btn {
        width: 100%;
        text-align: center;
    }

    .link-secondary {
        display: block;
        margin: 12px 0 0 0;
        text-align: center;
    }
}

/* Főoldali dashboard csempék */

.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}

.dashboard-tile {
    border-radius: 14px;
    padding: 18px;
    color: #ffffff;
    min-height: 120px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

.dashboard-tile h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
}

.dashboard-tile p {
    margin: 0;
    font-size: 28px;
    font-weight: bold;
}

.tile-blue {
    background: #2563eb;
}

.tile-orange {
    background: #f97316;
}

.tile-green {
    background: #16a34a;
}

.tile-red {
    background: #dc2626;
}

@media (max-width: 900px) {
    .dashboard-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .dashboard-grid {
        grid-template-columns: 1fr;
    }
}
/* Alkalmak csempés főoldali nézete */

.session-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.session-tile {
    display: block;
    border-radius: 16px;
    padding: 18px;
    color: #ffffff;
    text-decoration: none;
    min-height: 210px;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.session-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

.session-date {
    font-size: 14px;
    opacity: 0.95;
    margin-bottom: 4px;
}

.session-time {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
}

.session-tile h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    line-height: 1.25;
}

.session-meta {
    font-size: 14px;
    margin-bottom: 4px;
    opacity: 0.95;
}

.session-bottom {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
    margin-top: 18px;
    font-size: 14px;
}

.session-bottom strong {
    font-size: 17px;
}

.session-payment {
    margin-top: 10px;
    font-size: 14px;
    font-weight: bold;
}

/* Csempe színek */

.session-tile-blue {
    background: #2563eb;
}

.session-tile-green {
    background: #16a34a;
}

.session-tile-orange {
    background: #f97316;
}

.session-tile-red {
    background: #dc2626;
}

.session-tile-gray {
    background: #6b7280;
}

.session-tile-purple {
    background: #7c3aed;
}

@media (max-width: 1000px) {
    .session-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .session-grid {
        grid-template-columns: 1fr;
    }

    .session-tile {
        min-height: auto;
    }

    .session-bottom {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* JAVÍTÁS: csempés alkalomnézet kényszerített megjelenítés */
.session-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 16px !important;
}

.session-tile,
a.session-tile {
    display: block !important;
    border-radius: 16px !important;
    padding: 18px !important;
    color: #ffffff !important;
    text-decoration: none !important;
    min-height: 210px !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12) !important;
    transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}

a.session-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18) !important;
    text-decoration: none !important;
}

a.session-tile * {
    color: #ffffff !important;
    text-decoration: none !important;
}

@media (max-width: 1000px) {
    .session-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 640px) {
    .session-grid {
        grid-template-columns: 1fr !important;
    }

    .session-tile,
    a.session-tile {
        min-height: auto !important;
    }
}
/* Csempén belüli gyorsműveleti gombok */

.session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.session-actions a {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
    text-decoration: none;
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 7px 10px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: bold;
}

.session-actions a:hover {
    background: rgba(255, 255, 255, 0.32);
}

/* A csempe most nem link, hanem műveleti kártya */
.session-tile {
    cursor: default;
}

/* Mobilon nagyobb, jobban bökhető gombok */
@media (max-width: 640px) {
    .session-actions a {
        width: 100%;
        text-align: center;
        padding: 10px 12px;
        font-size: 14px;
    }
}
/* Saját / családi nézet kapcsoló */

.view-switcher {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.btn-active {
    background: #1f2937;
}

.btn-active:hover {
    background: #111827;
}

@media (max-width: 640px) {
    .view-switcher .btn {
        width: 100%;
        text-align: center;
    }
}
/* Egyszerűsített főoldal - csak csempék */

.app-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
}

.mobile-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.settings-toggle {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #1f2937;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-toggle:hover {
    background: #111827;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: -340px;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.2);
    z-index: 9999;
    transition: right 0.2s ease;
    display: flex;
    flex-direction: column;
}

.settings-panel.open {
    right: 0;
}

.settings-panel-header {
    padding: 18px;
    background: #1f2937;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-close {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.settings-panel-content {
    padding: 18px;
    overflow-y: auto;
}

.settings-label {
    margin: 18px 0 8px 0;
    color: #64748b;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
}

.settings-link {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
}

.settings-link:hover {
    background: #e2e8f0;
}

.settings-link.active {
    background: #2563eb;
    color: #ffffff;
}

.simple-session-grid {
    grid-template-columns: repeat(4, 1fr);
}

.floating-message {
    position: fixed;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    padding: 12px 18px;
    border-radius: 999px;
    color: #ffffff;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.floating-message.success {
    background: #16a34a;
}

.floating-message.error {
    background: #dc2626;
}

.empty-state {
    max-width: 520px;
    margin: 80px auto;
    background: #ffffff;
    padding: 32px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}

.empty-state h2 {
    margin-top: 0;
}

.empty-state-button {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.empty-state-button:hover {
    background: #1d4ed8;
}

/* A régi nagy szöveges blokkokat a főoldalon nem használjuk */
.app-home .card {
    display: none;
}

/* Mobilos finomítás */

@media (max-width: 1200px) {
    .simple-session-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .simple-session-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .app-home {
        padding: 12px;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #f8fafc;
        padding: 10px 0;
        margin-bottom: 12px;
    }

    .simple-session-grid {
        grid-template-columns: 1fr;
    }

    .settings-toggle {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .settings-panel {
        right: -100%;
        width: 100%;
        max-width: 100%;
    }

    .session-tile {
        min-height: auto;
    }

    .floating-message {
        top: 72px;
        width: calc(100% - 32px);
        text-align: center;
        border-radius: 12px;
    }
}
/* Egyszerűsített főoldal - csak csempék */

.app-home {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    padding-bottom: 110px;
}

.mobile-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.settings-toggle {
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 999px;
    background: #1f2937;
    color: #ffffff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settings-toggle:hover {
    background: #111827;
}

.settings-panel {
    position: fixed;
    top: 0;
    right: -340px;
    width: 320px;
    max-width: 88vw;
    height: 100vh;
    background: #ffffff;
    box-shadow: -8px 0 24px rgba(15, 23, 42, 0.2);
    z-index: 9999;
    transition: right 0.2s ease;
    display: flex;
    flex-direction: column;
}

.settings-panel.open {
    right: 0;
}

.settings-panel-header {
    padding: 18px;
    background: #1f2937;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-close {
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.settings-panel-content {
    padding: 18px;
    overflow-y: auto;
}

.settings-label {
    margin: 18px 0 8px 0;
    color: #64748b;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: bold;
}

.settings-link {
    display: block;
    padding: 12px 14px;
    margin-bottom: 8px;
    border-radius: 10px;
    background: #f1f5f9;
    color: #0f172a;
    text-decoration: none;
    font-weight: 600;
}

.settings-link:hover {
    background: #e2e8f0;
}

.settings-link.active {
    background: #2563eb;
    color: #ffffff;
}

.simple-session-grid {
    grid-template-columns: repeat(4, 1fr);
}

.floating-message {
    position: fixed;
    left: 50%;
    top: 18px;
    transform: translateX(-50%);
    padding: 12px 18px;
    border-radius: 999px;
    color: #ffffff;
    font-weight: bold;
    z-index: 10000;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.2);
}

.floating-message.success {
    background: #16a34a;
}

.floating-message.error {
    background: #dc2626;
}

.empty-state {
    max-width: 520px;
    margin: 80px auto;
    background: #ffffff;
    padding: 32px;
    border-radius: 18px;
    text-align: center;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08);
}

.empty-state h2 {
    margin-top: 0;
}

.empty-state-button {
    display: inline-block;
    margin-top: 16px;
    padding: 12px 18px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.empty-state-button:hover {
    background: #1d4ed8;
}

/* Lebegő + gomb új alkalom rögzítéséhez */

.floating-add-button {
    position: fixed;
    right: 28px;
    bottom: 28px;
    width: 64px;
    height: 64px;
    border-radius: 999px;
    background: #2563eb;
    color: #ffffff;
    text-decoration: none;
    font-size: 42px;
    line-height: 58px;
    text-align: center;
    font-weight: 300;
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.38);
    z-index: 9998;
    transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.floating-add-button:hover {
    background: #1d4ed8;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(37, 99, 235, 0.48);
}

/* A régi nagy szöveges blokkokat a főoldalon nem használjuk */
.app-home .card {
    display: none;
}

/* Mobilos finomítás */

@media (max-width: 1200px) {
    .simple-session-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 900px) {
    .simple-session-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .app-home {
        padding: 12px;
        padding-bottom: 100px;
    }

    .mobile-topbar {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: #f8fafc;
        padding: 10px 0;
        margin-bottom: 12px;
    }

    .simple-session-grid {
        grid-template-columns: 1fr;
    }

    .settings-toggle {
        width: 48px;
        height: 48px;
        font-size: 24px;
    }

    .settings-panel {
        right: -100%;
        width: 100%;
        max-width: 100%;
    }

    .session-tile {
        min-height: auto;
    }

    .floating-message {
        top: 72px;
        width: calc(100% - 32px);
        text-align: center;
        border-radius: 12px;
    }

    .floating-add-button {
        right: 18px;
        bottom: 18px;
        width: 62px;
        height: 62px;
        font-size: 42px;
        line-height: 56px;
    }
}
/* Belépési oldal */

.login-page {
    background: #f8fafc;
}

.login-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.login-card {
    width: 100%;
    max-width: 420px;
    background: #ffffff;
    border-radius: 18px;
    padding: 28px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.12);
}

.login-card h1 {
    margin: 0;
    font-size: 28px;
}

.login-subtitle {
    margin-top: 8px;
    margin-bottom: 22px;
    color: #64748b;
}

.remember-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin: 18px 0;
    font-size: 14px;
}

.login-button {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    font-size: 16px;
}
/* Felhasználói adatok a főoldali beállítás panelen */

.topbar-user {
    margin-top: 2px;
    font-size: 13px;
    color: #64748b;
}

.settings-user-box {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
}

.settings-user-box strong {
    display: block;
    color: #0f172a;
    margin-bottom: 4px;
}

.settings-user-box span {
    display: block;
    color: #64748b;
    font-size: 13px;
}

.logout-link {
    background: #fee2e2;
    color: #991b1b;
}

.logout-link:hover {
    background: #fecaca;
}
/* Főoldali szűrők és lapozás */

.settings-filter-form .form-row {
    margin-bottom: 12px;
}

.settings-filter-form select {
    max-width: 100%;
}

.settings-submit-button,
.settings-save-button {
    width: 100%;
    margin-top: 8px;
    padding: 11px 14px;
    border-radius: 999px;
    border: none;
    cursor: pointer;
    font-weight: bold;
}

.settings-submit-button {
    background: #2563eb;
    color: #ffffff;
}

.settings-submit-button:hover {
    background: #1d4ed8;
}

.settings-save-button {
    background: #0f172a;
    color: #ffffff;
}

.settings-save-button:hover {
    background: #020617;
}

.settings-save-form {
    margin-top: 10px;
}

.pagination-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
    margin: 24px 0 8px 0;
    padding-bottom: 20px;
}

.pagination-button {
    display: inline-block;
    padding: 10px 16px;
    border-radius: 999px;
    background: #1f2937;
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
}

.pagination-button:hover {
    background: #111827;
}

.pagination-button.disabled {
    background: #cbd5e1;
    color: #64748b;
    cursor: not-allowed;
}

.pagination-info {
    font-weight: bold;
    color: #334155;
}

@media (max-width: 640px) {
    .pagination-bar {
        gap: 8px;
        margin-bottom: 80px;
    }

    .pagination-button {
        padding: 10px 13px;
        font-size: 14px;
    }

    .pagination-info {
        font-size: 14px;
    }
}
/* Checkbox kártyák szolgáltatásfajtákhoz */

.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 760px;
}

.checkbox-card {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 12px;
    cursor: pointer;
    font-size: 14px;
}

.checkbox-card:hover {
    background: #eef2ff;
    border-color: #93c5fd;
}

.checkbox-card input {
    width: auto;
}

@media (max-width: 900px) {
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 560px) {
    .checkbox-grid {
        grid-template-columns: 1fr;
    }
}
/* Elmúlt, lezárandó státuszú alkalmak */

.session-tile-yellow-outline {
    outline: 4px solid #facc15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.35), 0 8px 22px rgba(15, 23, 42, 0.22);
    position: relative;
}

.session-tile-yellow-outline::before {
    content: "Lezárandó";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #facc15;
    color: #422006;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
}
/* Elmúlt, lezárandó státuszú alkalmak */

.session-tile-yellow-outline {
    outline: 4px solid #facc15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.35), 0 8px 22px rgba(15, 23, 42, 0.22);
    position: relative;
}

.session-tile-yellow-outline::before {
    content: "Lezárandó";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #facc15;
    color: #422006;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    z-index: 2;
}

@media (max-width: 640px) {
    .session-tile-yellow-outline {
        outline-width: 3px;
    }

    .session-tile-yellow-outline::before {
        top: 8px;
        right: 8px;
        font-size: 11px;
    }
}
/* Csempén belüli fő link kinézetének javítása */

.session-tile-main-link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.session-tile-main-link:visited,
.session-tile-main-link:hover,
.session-tile-main-link:active,
.session-tile-main-link:focus {
    color: inherit;
    text-decoration: none;
}

.session-tile-main-link h3,
.session-tile-main-link div,
.session-tile-main-link span,
.session-tile-main-link strong {
    color: inherit;
    text-decoration: none;
}

/* A csempék szövege legyen fehér, ne böngésző-link kék */

.session-tile {
    color: #ffffff;
}

.session-tile a {
    color: inherit;
}

/* A fizetési összeg se legyen kék/aláhúzott */

.session-bottom strong {
    color: #ffffff;
    text-decoration: none;
}

/* Ha overdue / lezárandó státusz van */

.session-tile-yellow-outline {
    outline: 4px solid #facc15;
    box-shadow: 0 0 0 4px rgba(250, 204, 21, 0.35), 0 8px 22px rgba(15, 23, 42, 0.22);
    position: relative;
}

.session-tile-yellow-outline::before {
    content: "Lezárandó";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #facc15;
    color: #422006;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    z-index: 2;
}
/* Főoldali csempék valódi csempe elrendezése */

.simple-session-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch;
}

/* A csempe ne nyúljon sávként túl szélesre */
.session-tile {
    min-height: 260px;
    border-radius: 18px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* A csempén belüli kattintható rész */
.session-tile-main-link {
    display: block;
    color: inherit;
    text-decoration: none;
    flex: 1;
}

/* Linkes kék/aláhúzás tiltása */
.session-tile-main-link,
.session-tile-main-link:visited,
.session-tile-main-link:hover,
.session-tile-main-link:active,
.session-tile-main-link:focus {
    color: inherit;
    text-decoration: none;
}

.session-tile-main-link h3,
.session-tile-main-link div,
.session-tile-main-link span,
.session-tile-main-link strong {
    color: inherit;
    text-decoration: none;
}

/* A státusz és összeg ne tolja szét sávként a kártyát */
.session-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.session-bottom strong {
    white-space: nowrap;
}

/* Gombok csempén belül */
.session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.session-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* Nagy monitoron több oszlop */
@media (min-width: 1200px) {
    .simple-session-grid {
        grid-template-columns: repeat(4, minmax(240px, 1fr)) !important;
    }
}

/* Közepes képernyőn 3 oszlop */
@media (max-width: 1199px) {
    .simple-session-grid {
        grid-template-columns: repeat(3, minmax(240px, 1fr)) !important;
    }
}

/* Tablet méretben 2 oszlop */
@media (max-width: 900px) {
    .simple-session-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

/* Mobilon maradhat 1 oszlop */
@media (max-width: 600px) {
    .simple-session-grid {
        grid-template-columns: 1fr !important;
    }

    .session-tile {
        min-height: auto;
    }
}
/* Lezárandó csempe javított, olvasható megjelenése */

.session-tile-yellow-outline {
    background: #fef3c7 !important;
    color: #422006 !important;
    border: 3px solid #facc15 !important;
    outline: none !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
    position: relative;
}

/* Minden belső szöveg legyen sötét, jól olvasható */
.session-tile-yellow-outline,
.session-tile-yellow-outline a,
.session-tile-yellow-outline h3,
.session-tile-yellow-outline div,
.session-tile-yellow-outline span,
.session-tile-yellow-outline strong {
    color: #422006 !important;
    text-decoration: none !important;
}

/* A Lezárandó címke maradjon erősebb sárga */
.session-tile-yellow-outline::before {
    content: "Lezárandó";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #facc15;
    color: #422006 !important;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    z-index: 2;
}

/* A gombok külön is olvashatók legyenek */
.session-tile-yellow-outline .session-actions a {
    background: rgba(250, 204, 21, 0.35) !important;
    border: 1px solid rgba(202, 138, 4, 0.45) !important;
    color: #422006 !important;
}

/* Fizetési összeg is sötét legyen */
.session-tile-yellow-outline .session-bottom strong {
    color: #422006 !important;
}

/* Kisebb képernyőn is maradjon jól látható */
@media (max-width: 640px) {
    .session-tile-yellow-outline::before {
        top: 8px;
        right: 8px;
        font-size: 11px;
    }
}
/* ===== Főoldali egységes fejléc ===== */

.home-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
}

.home-dashboard-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-dashboard-user {
    font-size: 28px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.1;
}

.home-dashboard-subline {
    font-size: 14px;
    color: #64748b;
}

.home-dashboard-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ===== Összesítő rész ===== */

.summary-section {
    margin-bottom: 24px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

.summary-card {
    display: block;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
    transition: 0.2s ease;
    color: #0f172a;
}

.summary-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
}

.summary-card.active {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.16);
}

.summary-card-debt {
    background: linear-gradient(180deg, #fff7ed 0%, #ffffff 100%);
}

.summary-card-warning {
    background: linear-gradient(180deg, #fef9c3 0%, #ffffff 100%);
}

.summary-card-label {
    font-size: 13px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 10px;
}

.summary-card-value {
    font-size: 24px;
    font-weight: 800;
    color: #0f172a;
    line-height: 1.2;
    margin-bottom: 6px;
}

.summary-card-meta {
    font-size: 13px;
    color: #64748b;
}

.summary-mini-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.summary-mini-card {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-radius: 14px;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    text-decoration: none;
    color: #0f172a;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.04);
}

.summary-mini-card strong {
    font-size: 16px;
    color: #0f172a;
}

.mini-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 700;
}

.mini-clear-card {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* ===== Csempe rács ===== */

.simple-session-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
    gap: 18px !important;
    align-items: stretch;
}

.session-tile {
    min-height: 260px;
    border-radius: 18px;
    padding: 18px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: #ffffff;
}

.session-tile-main-link {
    display: block;
    color: inherit;
    text-decoration: none;
    flex: 1;
}

.session-tile-main-link,
.session-tile-main-link:visited,
.session-tile-main-link:hover,
.session-tile-main-link:active,
.session-tile-main-link:focus {
    color: inherit;
    text-decoration: none;
}

.session-tile-main-link h3,
.session-tile-main-link div,
.session-tile-main-link span,
.session-tile-main-link strong {
    color: inherit;
    text-decoration: none;
}

.session-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 18px;
}

.session-bottom strong {
    white-space: nowrap;
}

.session-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.session-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 11px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.28);
}

/* ===== Lezárandó csempe ===== */

.session-tile-yellow-outline {
    background: #fef3c7 !important;
    color: #422006 !important;
    border: 3px solid #facc15 !important;
    outline: none !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.18) !important;
    position: relative;
}

.session-tile-yellow-outline,
.session-tile-yellow-outline a,
.session-tile-yellow-outline h3,
.session-tile-yellow-outline div,
.session-tile-yellow-outline span,
.session-tile-yellow-outline strong {
    color: #422006 !important;
    text-decoration: none !important;
}

.session-tile-yellow-outline::before {
    content: "Lezárandó";
    position: absolute;
    top: 10px;
    right: 10px;
    background: #facc15;
    color: #422006 !important;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 9px;
    border-radius: 999px;
    z-index: 2;
}

.session-tile-yellow-outline .session-actions a {
    background: rgba(250, 204, 21, 0.35) !important;
    border: 1px solid rgba(202, 138, 4, 0.45) !important;
    color: #422006 !important;
}

.session-tile-yellow-outline .session-bottom strong {
    color: #422006 !important;
}

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

@media (max-width: 1200px) {
    .summary-grid {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }
}

@media (max-width: 900px) {
    .simple-session-grid {
        grid-template-columns: repeat(2, minmax(220px, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .summary-grid {
        grid-template-columns: 1fr;
    }

    .summary-mini-row {
        flex-direction: column;
    }

    .home-dashboard-header {
        align-items: flex-start;
    }

    .home-dashboard-user {
        font-size: 22px;
    }
}

@media (max-width: 600px) {
    .simple-session-grid {
        grid-template-columns: 1fr !important;
    }

    .session-tile {
        min-height: auto;
    }

    .session-tile-yellow-outline::before {
        top: 8px;
        right: 8px;
        font-size: 11px;
    }
}
/* Csempe ikon gombok: naptár + e-mail */

.session-actions .session-icon-action {
    min-width: 36px;
    width: 36px;
    height: 36px;
    padding: 0 !important;
    font-size: 17px;
    border-radius: 50%;
    line-height: 1;
}

/* Lezárandó csempén is jól látszódjanak az ikonok */

.session-tile-yellow-outline .session-actions .session-icon-action {
    background: rgba(250, 204, 21, 0.45) !important;
    border-color: rgba(202, 138, 4, 0.55) !important;
    color: #422006 !important;
}