/* --- PODSTAWOWE USTAWIENIA I CZCIONKI --- */
@font-face {font-family: 'Raleway'; font-style: normal; font-weight: 400;src: local('Raleway Regular'), local('Raleway-Regular'), url('fonts/Raleway-Regular.ttf') format('truetype');}
@font-face {font-family: 'Raleway'; font-style: normal; font-weight: 500; src: local('Raleway Medium'), local('Raleway-Medium'), url('fonts/Raleway-Medium.ttf') format('truetype');}
@font-face {font-family: 'Raleway'; font-style: normal; font-weight: 700; src: local('Raleway Bold'), local('Raleway-Bold'),url('fonts/Raleway-Bold.ttf') format('truetype');}

:root {
    --font-family: 'Raleway', sans-serif;
    --primary-color: #007bff;
    --primary-color-hover: #0056b3;
    --danger-color: #dc3545;
    --danger-color-hover: #c82333;
    --success-color: #28a745;
    --success-color-hover: #218838;
    --bg-main: #f4f7f9;
    --bg-controls: #ffffff;
    --text-color: #333;
    --text-light: #555;
    --border-color: #dee2e6;
    --shadow-color: rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--font-family); color: var(--text-color);
    background-color: var(--bg-main);
    width: 700px; height: 600px;
    overflow: hidden; /* Zapobiega podwójnym scrollbarom */
}

/* --- GŁÓWNY LAYOUT APLIKACJI (FLEXBOX) --- */
.app-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 15px;
}

/* --- SYSTEM ZAKŁADEK --- */
.tab-nav {
    display: flex;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-color);
}
.tab-link {
    padding: 10px 15px; cursor: pointer; border: none;
    background-color: transparent; font-family: inherit; font-size: 15px;
    font-weight: 500; color: var(--text-light);
    border-bottom: 3px solid transparent;
    margin-bottom: -1px; /* Nakłada dolną ramkę na ramkę kontenera */
    transition: all 0.2s;
}
.tab-link:hover { color: var(--primary-color); }
.tab-link.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}
.tab-content {
    flex-grow: 1;
    padding-top: 15px;
    overflow-y: auto;
    min-height: 0;
}
.tab-pane {
    display: none;
    height: 100%;
}
.tab-pane.active {
    display: flex;
    flex-direction: column;
}
.tox-tinymce, #htmlAceEditorDiv {
    flex-grow: 1 !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 5px;
}

/* --- STYLE ZAKŁADKI Z OPCJAMI --- */
#tab-options .column-left { display: flex; flex-direction: column; gap: 20px; }
.section-container {
    border: 1px solid var(--border-color); padding: 15px 20px;
    border-radius: 8px; background-color: var(--bg-controls);
}
.section-title {
    margin-top: 0; margin-bottom: 15px;
    font-size: 16px; color: var(--text-color);
    border-bottom: 1px solid #eee; padding-bottom: 10px;
}
.options-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
.option-item { display: flex; align-items: center; gap: 10px; }
.option-item label { font-weight: normal; margin: 0; }
.option-item select { width: 100%; padding: 6px 8px; border: 1px solid var(--border-color); border-radius: 4px; }
.checkbox-label {
    display: flex; align-items: center; position: relative;
    cursor: pointer; font-weight: 400; user-select: none; gap: 10px;
}
.checkbox-label input[type="checkbox"] { position: absolute; opacity: 0; height: 0; width: 0; }
.checkbox-label .checkmark {
    width: 18px; height: 18px; background-color: #eee;
    border: 1px solid #ccc; border-radius: 4px; transition: background-color 0.2s ease; flex-shrink: 0;
}
.checkbox-label input:checked ~ .checkmark { background-color: var(--primary-color); border-color: var(--primary-color); }
.checkbox-label .checkmark:after {
    content: ""; position: absolute; display: none;
    width: 5px; height: 10px; border: solid white; border-width: 0 2px 2px 0;
    top: 45%; left: 50%; transform: translate(-50%, -50%) rotate(45deg);
}
.checkbox-label input:checked ~ .checkmark:after { display: block; }

/* --- SEKCJA ZNAJDŹ I ZASTĄP --- */
.find-replace-section { display: flex; flex-direction: column; gap: 10px; }
#findReplacePairsContainer { display: flex; flex-direction: column; gap: 8px; }
.find-replace-pair { display: flex; gap: 8px; align-items: center; }
.find-replace-pair input[type="text"] { flex-grow: 1; padding: 6px; border: 1px solid #ccc; border-radius: 4px; }

/* --- PRZYCISKI GŁÓWNE (NA DOLE) --- */
.main-actions {
    display: flex; justify-content: flex-end; gap: 12px;
    padding-top: 15px; border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}
.action-btn {
    font-family: inherit; font-size: 14px; color: white; padding: 8px 16px;
    display: inline-flex; align-items: center; justify-content: center;
    border: none; border-radius: 20px; box-shadow: 0 4px 8px var(--shadow-color);
    transition: all 0.2s ease-out; font-weight: 500; cursor: pointer;
}
.action-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); }
.action-btn:disabled { background: #b8c1c9 !important; box-shadow: none; transform: none; cursor: not-allowed; }
.action-btn .svg-wrapper {
    width: 28px; height: 28px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2);
    margin-right: 10px; display: flex; align-items: center; justify-content: center;
}
.action-btn img.icon { width: 16px; height: 16px; }
.action-btn.btn-copy { background-color: #0d6efd; }
.action-btn.btn-copy:hover { background-color: #0b5ed7; }
.action-btn.btn-reverse { background-color: #e71212; }
.action-btn.btn-reverse:hover { background-color: #a10b0b; }
.action-btn.btn-clean { background-color: var(--success-color); }
.action-btn.btn-clean:hover { background-color: var(--success-color-hover); }
#undoButton { margin-right: auto; }
.action-btn-small {
    font-size: 13px; padding: 6px 12px; background-color: #6c757d; color: white;
    border: none; border-radius: 20px; cursor: pointer; display: inline-flex; align-items: center;
}
.action-btn-small:hover { background-color: #5a6268; }
.action-btn-small.btn-add { background-color: var(--success-color); }
.action-btn-small.btn-add:hover { background-color: var(--success-color-hover); }
.action-btn-small img.icon { width: 14px; height: 14px; margin-right: 6px; filter: brightness(0) invert(1); }
.delete-pair-button {
    background-color: var(--danger-color); color: white; border: none;
    width: 30px; height: 30px; padding: 0; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.delete-pair-button:hover { background-color: var(--danger-color-hover); }
.delete-pair-button .icon { width: 16px; height: 16px; filter: brightness(0) invert(1); }
.tab-align-right {
    margin-left: auto;
}
/* Poprawka wielkości czcionki dla opcji */
.checkbox-label {
    font-size: 14px;
}