/* === ZÁKLADNÍ OBALOVACÍ BOX PRO FORMULÁŘE === */
.custom-form-box {
    background: #f8fbff;              /* Světlé pozadí pro lepší čitelnost */
    border-radius: 10px;              /* Zaoblené rohy boxu */
    padding: 25px 20px 20px 20px;     /* Vnitřní odsazení */
    box-shadow: 0 2px 12px rgba(0,0,0,0.06); /* Jemný stín pro vystouplý efekt */
    max-width: 500px;                 /* Maximální šířka boxu */
    margin: 30px auto;                /* Zarovnání na střed stránky s horním odsazením */
}

/* === VSTUPNÍ POLE A PRVKY FORMULÁŘE UVNITŘ BOXU === */
.custom-form-box input[type="text"],
.custom-form-box input[type="password"],
.custom-form-box input[type="email"],
.custom-form-box input[type="date"],
.custom-form-box select,
.custom-form-box textarea {
    width: 100%;                     /* Pole přes celou šířku boxu */
    padding: 12px;                   /* Vnitřní odsazení */
    margin-bottom: 16px;             /* Mezera pod polem */
    border: 1px solid #c8d4e3;       /* Světle modrý rámeček */
    border-radius: 6px;              /* Zaoblené rohy pole */
    font-size: 16px;                 /* Větší písmo pro lepší čitelnost */
    background: #fff;                /* Bílé pozadí pole */
    transition: border-color 0.2s;   /* Plynulý přechod při změně barvy rámečku */
}

/* === ZVÝRAZNĚNÍ POLE PŘI FOKUSU === */
.custom-form-box input[type="text"]:focus,
.custom-form-box input[type="password"]:focus,
.custom-form-box input[type="email"]:focus,
.custom-form-box input[type="date"]:focus,
.custom-form-box select:focus,
.custom-form-box textarea:focus {
    border-color: #3b7ddd;           /* Modrý rámeček při kliknutí do pole */
    outline: none;                   /* Odstranění výchozího zvýraznění */
}

/* === POPISKY POLÍ (LABEL) === */
.custom-form-box label {
    font-weight: 500;                /* Ztučnění popisku */
    margin-bottom: 6px;              /* Mezera pod popiskem */
    display: block;                  /* Každý popisek na vlastním řádku */
    color: #2e3a59;                  /* Tmavě modrá barva */
}

/* === RADIO TLAČÍTKA A JEJICH SKUPINY === */
.custom-form-box input[type="radio"] {
    margin-right: 6px;               /* Odsazení mezi radio tlačítkem a popiskem */
}

.custom-form-box .custom-radio-group {
    margin-bottom: 16px;             /* Mezera pod skupinou radio tlačítek */
}

/* Popisky radio tlačítek vedle sebe */
.custom-radio-group label {
    display: inline-block;
    margin-right: 20px;
    margin-bottom: 0;
    vertical-align: middle;
}

/* Radio tlačítka zarovnaná s popisky */
.custom-radio-group input[type="radio"] {
    margin-right: 6px;
    vertical-align: middle;
}

/* === TLAČÍTKA (ODESLÁNÍ, AKCE) === */
.custom-form-box input[type="submit"],
.custom-form-box button {
    background: #1a2e4c;             /* Tmavě modré pozadí */
    color: #fff;                     /* Bílé písmo */
    padding: 12px 30px;              /* Větší tlačítko */
    border: none;                    /* Bez rámečku */
    border-radius: 6px;              /* Zaoblené rohy */
    font-size: 16px;                 /* Větší písmo */
    cursor: pointer;                 /* Kurzor ruky */
    transition: background 0.2s;     /* Plynulý přechod barvy */
}

/* Hover efekt pro tlačítka */
.custom-form-box input[type="submit"]:hover,
.custom-form-box button:hover {
    background: #3b7ddd;             /* Světlejší modrá při najetí myší */
}

/* === ZPRÁVY O CHYBĚ A ÚSPĚCHU === */
.custom-form-box .error-message {
    color: #e74c3c;                  /* Červená barva pro chyby */
    margin-bottom: 12px;
}

.custom-form-box .success-message {
    color: #27ae60;                  /* Zelená barva pro úspěšné hlášky */
    margin-bottom: 12px;
}

/* === TLAČÍTKO PRO ODHLAŠENÍ === */
.logout-btn {
    background: #e74c3c;             /* Červené pozadí */
    color: #fff;                     /* Bílé písmo */
    border: none;
    border-radius: 6px;
    padding: 10px 22px;
    font-size: 15px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: background 0.2s;
}
.logout-btn:hover {
    background: #c0392b;             /* Tmavší červená při najetí */
}

/* === OBAL PRO TABULKU SERVISNÍCH POŽADAVKŮ === */
.wide-table-box {
    max-width: 1200px;               /* Maximální šířka tabulky */
    width: 100%;                     /* Tabulka přes celou šířku boxu */
}

/* === TABULKA SERVISNÍCH POŽADAVKŮ === */
.wide-table-box .service-requests-table {
    width: 100%;                     /* Tabulka přes celou šířku boxu */
    max-width: 100%;
    table-layout: fixed;             /* Pevné rozložení sloupců – zabraňuje roztažení */
    display: table;
}

/* Zalamování dlouhých slov a omezení šířky buněk */
.wide-table-box .service-requests-table td,
.wide-table-box .service-requests-table th {
    word-break: break-word;          /* Zalamuje dlouhá slova */
    white-space: normal;             /* Povolení zalamování textu */
    overflow-wrap: break-word;       /* Moderní alternativa */
    max-width: 250px;                /* Maximální šířka buňky */
}

/* === RESPONSIVITA PRO MOBILY === */
@media (max-width: 600px) {
    .wide-table-box {
        overflow-x: auto;            /* Umožní horizontální posuvník na mobilu */
    }
    .service-requests-table {
        min-width: 600px;            /* Tabulka má minimální šířku, je posuvná */
    }
}

/* === BOX PRO CELÝ SERVISNÍ POŽADAVEK (request-block) === */
.request-block {
    border-radius: 10px;             /* Zaoblené rohy celého bloku */
    margin-bottom: 18px;             /* Mezera mezi požadavky */
    overflow: hidden;
    border: 1px solid #222831;       /* Tmavý rámeček kolem požadavku */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04); /* Jemný stín */
    background: #222831;             /* Tmavé pozadí mezery kolem požadavku */
    padding: 8px 0 8px 0;            /* Svislé odsazení uvnitř bloku */
}

/* === BARVY PODLE STAVU POŽADAVKU === */
.stav-vyreseno .request-desc,
.stav-vyreseno tr { background: #b6fcb6 !important; }    /* Zelená – vyřešeno */
.stav-v_reseni .request-desc,
.stav-v_reseni tr { background: #fff9c4; }               /* Žlutá – v řešení */
.stav-novy .request-desc,
.stav-novy tr { background: #fff !important; }           /* Bílá – nový */

/* === VNITŘNÍ TABULKA BEZ OKRAJŮ === */
.request-block tr, .request-block td, .request-block th {
    border: none !important;         /* Odstranění okrajů uvnitř bloku */
}

/* === POPIS POŽADAVKU (request-desc) === */
.request-desc {
    font-style: italic;              /* Kurzíva pro popis */
    color: #fff;                     /* Bílé písmo (změňte dle potřeby) */
    padding: 14px 18px;              /* Vnitřní odsazení */
    font-size: 16px;                 /* Větší písmo */
    background: inherit !important;  /* Přebírá barvu podle stavu */
}