/* ============================================================
   Lexilet Template: Normal
   Template-Name: Normal
   Template-Description: Kontrasztosabb, keretes megjelenes meleg szinekkel
   ============================================================
   A "Solid"-nal kontrasztosabb kinezet: a dashboard kerettel
   rendelkezik, a kartyak halvan sargak, erotelesebb arnyekok
   es hatarok. Olvashatobb, "tankonyvszerubb" jelleg.
   ============================================================ */

/* ============================================================
   A) DASHBOARD
   ============================================================ */

/* -- Layout -------------------------------------------------- */
.lexd {
    background: #f0efe8;
    border: 2px solid #d5d0c4;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.1);
}

/* -- Sidebar ------------------------------------------------- */
.lexd-sidebar {
    background: #faf9f4;
    border-right: 2px solid #d5d0c4;
}

.lexd-logo {
    border-bottom: 2px solid #d5d0c4;
    color: #5a52c0;
}

.lexd-nav-link {
    color: #555;
    border-left: 3px solid transparent;
}

.lexd-nav-link:hover {
    background: #f0eedf;
    color: #5a52c0;
}

.lexd-nav-link.is-active {
    background: #eeecdb;
    color: #5a52c0;
    border-left-color: #5a52c0;
}

/* -- Main area ----------------------------------------------- */
.lexd-title {
    color: #1a1a1a;
}

/* -- Stat cards ---------------------------------------------- */
.lexd-stat-card {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.lexd-stat-card-value {
    color: #1a1a1a;
}

.lexd-stat-card-label {
    color: #777;
}

/* -- Mixed study bar ----------------------------------------- */
.lexd-mixed-study-bar {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    border-left: 4px solid #5a52c0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* -- SRS toggle card ----------------------------------------- */
.lexd-srs-toggle-card {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* -- Deck items ---------------------------------------------- */
.lexd-deck-item {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.lexd-deck-item:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
    border-color: #c0b8a8;
}

.lexd-deck-name {
    color: #1a1a1a;
}

.lexd-deck-progress {
    background: #e0ddd0;
}

/* -- Buttons ------------------------------------------------- */
.lexd-btn-manage {
    background: #fffef8;
    border: 1px solid #c0b8a8;
}

.lexd-btn-manage:hover {
    background: #f0eedf;
    border-color: #5a52c0;
}

.lexd-btn-add-folder,
.lexd-btn-add-deck,
.lexd-btn-add-card {
    background: #fffef8;
    border: 1px solid #c0b8a8;
}

.lexd-btn-add-folder:hover,
.lexd-btn-add-deck:hover,
.lexd-btn-add-card:hover {
    background: #f0eedf;
    border-color: #5a52c0;
}

.lexd-btn-back-to-decks {
    background: #fffef8;
    border: 1px solid #c0b8a8;
}

.lexd-btn-back-to-decks:hover {
    background: #f0eedf;
    border-color: #999;
}

.lexd-btn-cancel {
    background: #ece9de;
    color: #555;
}

.lexd-btn-cancel:hover {
    background: #ddd9cc;
    color: #333;
}

.lexd-btn-confirm {
    background: #5a52c0;
    color: #fff;
}

.lexd-btn-confirm:hover {
    background: #4a44a8;
}

/* -- Modal --------------------------------------------------- */
.lexd-modal-inner {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.lexd-modal-input {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lexd-modal-input:focus {
    border-color: #5a52c0;
    box-shadow: 0 0 0 3px rgba(90, 82, 192, 0.12);
}

select.lexd-modal-input {
    background: #fff;
}

/* -- Folder headers ------------------------------------------ */
.lexd-folder-header {
    border-bottom: 1px solid #e0ddd0;
}

/* -- Dictionary ---------------------------------------------- */
.lexd-dict-item {
    background: #fffef8;
    border: 1px solid #d5d0c4;
}

/* -- Import -------------------------------------------------- */
.lexd-import-deck-row select,
.lexd-import-deck-row input[type="text"] {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lexd-import-mode-btn {
    background: #fffef8 !important;
    border: 1px solid #c0b8a8 !important;
}

.lexd-import-mode-btn.is-active {
    border-color: #5a52c0 !important;
    background: #eeecdb !important;
    color: #5a52c0 !important;
}

.lexd-import-textarea {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lexd-import-textarea:focus {
    border-color: #5a52c0;
    box-shadow: 0 0 0 3px rgba(90, 82, 192, 0.12);
}

.lexd-import-dropzone {
    background: #faf9f4;
    border: 2px dashed #c0b8a8;
}

.lexd-import-dropzone:hover,
.lexd-import-dropzone.is-dragover {
    border-color: #5a52c0;
    background: #eeecdb;
}

/* -- Library ------------------------------------------------- */
.lexd-library-item {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.06);
}

.lexd-library-item:hover {
    box-shadow: 0 3px 14px rgba(0, 0, 0, 0.1);
    border-color: #c0b8a8;
}

.lexd-library-preview {
    background: #faf9f4;
    border: 1px solid #d5d0c4;
}

.lexd-library-preview-table thead th {
    background: #f0eedf;
    border-color: #d5d0c4;
}

.lexd-library-preview-table tbody td {
    border-color: #e0ddd0;
}

/* -- Game ---------------------------------------------------- */
.lexd-game-setup select {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lexd-game-tile {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.07);
}

.lexd-game-tile.is-def {
    background: #faf8ee;
}

.lexd-game-tile:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    border-color: #b0a890;
}

.lexd-game-tile.is-selected {
    border-color: #5a52c0;
    box-shadow: 0 0 0 2px rgba(90, 82, 192, 0.3);
    background: #eeecdb;
}

.lexd-game-tile.is-wrong {
    border-color: #e74c3c;
    background: #fdeaea;
}

/* -- Deck action buttons ------------------------------------- */
.lexd-deck-del {
    border: 1px solid #c0b8a8;
}

html body .lexd .lexd-deck-edit {
    border-color: #c0b8a8;
}

html body .lexd .lexd-deck-cards {
    border-color: #c0b8a8;
}

html body .lexd .lexd-deck-reset-progress {
    border-color: #c0b8a8;
}

/* -- Deck cards panel ---------------------------------------- */
.lexd-deck-cards-panel {
    border: 1px solid #d5d0c4;
    background: #faf9f4;
}

/* -- Warning boxes ------------------------------------------- */
.lexd-note,
.lexd-warning {
    background: #fef8e0;
    border-left-color: #e6b800;
}

/* -- Responsive: mobile sidebar ------------------------------ */
@media (max-width: 700px) {
    .lexd-sidebar {
        border-bottom: 2px solid #d5d0c4;
        border-right: none;
    }
}


/* ============================================================
   B) CARD VIEW (shortcode)
   ============================================================ */

/* -- Card faces: warm pale yellow ----------------------------- */
.lexilet-card-face {
    background: #fffde8;
    border: 1px solid #e0d8b8;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.06);
}

/* -- Term & definition --------------------------------------- */
.lexilet-term {
    color: #1a1a1a;
}

.lexilet-definition {
    color: #333;
}

.lexilet-example {
    color: #777;
}

/* -- Gomb CSS változók (normal téma) ------------------------- */
.lexilet-deck-wrapper {
    --lex-btn-wrong-color: #c0392b;
    --lex-btn-wrong-hover: #a93226;
    --lex-btn-wrong-border: rgba(192, 57, 43, 0.4);
    --lex-btn-hard-color: #e8860c;
    --lex-btn-hard-hover: #cf7508;
    --lex-btn-hard-border: rgba(232, 134, 12, 0.4);
    --lex-btn-right-color: #27ae60;
    --lex-btn-right-hover: #219a52;
    --lex-btn-right-border: rgba(39, 174, 96, 0.4);
    --lex-btn-base-bg: #fffef8;
    --lex-btn-text-color: #fff;
    --lex-btn-back-bg: #f0f0f0;
    --lex-btn-back-color: #555;
    --lex-btn-back-border: 1px solid #c8c0b8;
}

/* -- Buttons ------------------------------------------------- */
.lexilet-btn {
    border: 1px solid #c0b8a8;
}

/* -- Completion screen --------------------------------------- */
.lexilet-complete-inner {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}


/* ============================================================
   C) MAGIC POPUP
   ============================================================ */

.lex-mp-modal {
    background: #fffef8;
    border: 1px solid #d5d0c4;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
}

.lex-mp-header {
    border-bottom-color: #e0ddd0;
}

.lex-mp-logo {
    color: #5a52c0;
}

.lex-mp-input {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lex-mp-input:focus {
    border-color: #5a52c0;
    box-shadow: 0 0 0 3px rgba(90, 82, 192, 0.12);
}

.lex-mp-select {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lex-mp-textarea {
    background: #fff;
    border: 1px solid #c0b8a8;
}

.lex-mp-textarea:focus {
    border-color: #5a52c0;
    box-shadow: 0 0 0 3px rgba(90, 82, 192, 0.12);
}

.lex-mp-btn-save {
    background: #5a52c0;
}

.lex-mp-btn-save:hover {
    background: #4a44a8;
}

.lex-mp-btn-cancel {
    background: #ece9de;
    border: 1px solid #c0b8a8;
}

.lex-mp-btn-cancel:hover {
    background: #ddd9cc;
}

.lex-mp-footer {
    border-top-color: #e0ddd0;
}

/* -- Special chars bar --------------------------------------- */
.lex-mp-chars button {
    background: #fffef8;
    border: 1px solid #c0b8a8;
}

.lex-mp-chars button:hover {
    background: #eeecdb;
    border-color: #5a52c0;
}