/* ================== ZMIENNE ================== */
:root {
    --mint-bg: #e8f7f2;
    --mint-light: #f4fbf8;
    --mint-border: #b8e0d2;

    --blue-main: #1e88e5;
    --blue-dark: #1565c0;
    --blue-light: #e3f2fd;

    --text-main: #2c3e50;
    --text-muted: #6b7c85;
}

/* ================== BODY ================== */
body {
    margin: 0;
    padding: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background-color: var(--mint-bg);
    color: var(--text-main);
}

.container {
    max-width: 1100px;
    margin: 40px auto;
    padding: 30px;
    background-color: var(--mint-light);
    border-radius: 10px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

/* ================== FIELDSET ================== */
fieldset {
    border: 2px solid var(--mint-border);
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
}

legend {
    padding: 0 10px;
    font-weight: 600;
    color: var(--blue-main);
}

/* ================== INPUTY ================== */
input,
select,
textarea {
    width: 100%;
    padding: 11px 12px;
    margin: 6px 0 15px;
    font-size: 14px;
    background-color: #ffffff;
    border: 1px solid #9fd6c3; /* ciemniejsza ramka */
    border-radius: 6px;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}


input:focus,
select:focus,
textarea:focus {
    outline: none;
    background-color: #ffffff;
    border-color: var(--blue-main);
    box-shadow:
        0 0 0 2px rgba(30, 136, 229, 0.2),
        inset 0 1px 2px rgba(0, 0, 0, 0.08);
}


/* ================== PRZYCISKI – JEDNO ŹRÓDŁO PRAWDY ================== */
.action-btn,
button,
input[type="submit"],
input[type="button"],
a.action-btn {
    width: 200px;
    padding: 12px;

    font-size: 15px;
    font-weight: 600;

    border-radius: 6px;
    border: none;
    cursor: pointer;

    background-color: var(--blue-main);
    color: #fff;

    display: inline-block;
    text-align: center;
    text-decoration: none;

    transition: background-color 0.2s, transform 0.1s, box-shadow 0.1s;

    appearance: none;
    -webkit-appearance: none;
}

/* Hover */
.action-btn:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.action-btn:hover {
    background-color: var(--blue-dark);
    box-shadow: 0 6px 14px rgba(30, 136, 229, 0.3);
}

/* Active */
.action-btn:active,
button:active,
input[type="submit"]:active,
input[type="button"]:active,
a.action-btn:active {
    transform: scale(0.98);
}

/* ================== TABELA ================== */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

thead th {
    background-color: var(--blue-main);
    color: #fff;
    padding: 12px;
    text-align: left;
    font-weight: 600;
}

tbody td {
    padding: 10px 12px;
    border-bottom: 1px solid #e0e0e0;
}

tbody tr:nth-child(odd) {
    background-color: #f9fdfc;
}

tbody tr:nth-child(even) {
    background-color: #eaf6f3;
}

tbody tr:hover {
    background-color: var(--blue-light);
}

/* ================== KOMÓRKI Z PRZYCISKAMI ================== */
td.center-cell {
    text-align: center;
}

/* ================== RESPONSYWNOŚĆ ================== */
@media (max-width: 600px) {
    .action-btn,
    button,
    input[type="submit"],
    input[type="button"] {
        width: 100%;
    }
}

/*===================DIV=============================*/
.layout {
    display: flex;
    gap: 20px;
}

.menu {
    width: 200px;
}

.menu form {
    margin-bottom: 10px;
}

.content {
    width: 800px;        /* stała szerokość */
    margin: 0 auto;      /* centrowanie */
    padding: 15px;
    border: 1px solid #ccc;
}


.standard_table {
	width: auto;
	margin-left: auto;
	margin-right: auto;
	border: 0;
}

pre {
    max-width: 80%;      /* albo 100% */
    white-space: pre-wrap;
    word-break: break-word;
    overflow-x: auto;
}