/* ==========================================================================
   Vizuální modernizace formulářových prvků (inputy, selecty, tlačítka)

   Načítá se AŽ ZA styles_<akce>.css, aby mohl přepsat jejich geometrii.
   Barevnost zůstává původní – akcentní barva každé akce je níže převzatá
   1:1 z příslušného styles_<akce>.css. Pokud se barva akce mění, změňte ji
   i zde v proměnné --accent.
   ========================================================================== */

/* akcentní barvy jednotlivých akcí ---------------------------------------- */
:root {
    --accent: #f57e00;      /* výchozí (kdyby akce nebyla rozpoznána) */
    --accent-fg: #000000;   /* barva textu na tlačítku */
    --field-bg: #ffffff;
}

body.action_ff  { --accent: #f57e00; --accent-fg: #000000; }
body.action_pr  { --accent: #0052b5; --accent-fg: #ffffff; }
body.action_ccp { --accent: #ffb700; --accent-fg: #000000; }
body.action_ccj { --accent: #ffb700; --accent-fg: #000000; }
body.action_cco { --accent: #1ed2ff; --accent-fg: #000000; }
body.action_cfc { --accent: #ffba03; --accent-fg: #000000; }
body.action_bxm { --accent: #ff0000; --accent-fg: #ffffff; }
body.action_dfl { --accent: #ffff00; --accent-fg: #000000; }
body.action_fc  { --accent: #f58220; --accent-fg: #000000; }
body.action_gff { --accent: #ddd73f; --accent-fg: #000000; }
body.action_lgc { --accent: #96c8ff; --accent-fg: #000000; }
body.action_pgf { --accent: #8bbc2c; --accent-fg: #000000; }
body.action_slc { --accent: #8c0000; --accent-fg: #ffffff; }


input,
select,
textarea,
button {
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
}


/* textová pole a selecty --------------------------------------------------- */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input[type="time"],
textarea,
select {
    font-size: 13px;
    line-height: 18px;
    padding: 6px 9px;
    background-color: var(--field-bg);
    border: solid 1px var(--accent);
    border-radius: 6px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="tel"]:hover,
input[type="url"]:hover,
input[type="number"]:hover,
input[type="search"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
textarea:hover,
select:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.10);
}

input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
textarea:focus,
select:focus {
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.30);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);
}

input:disabled,
textarea:disabled,
select:disabled {
    background-color: #e3e3e3;
    color: #777777;
    box-shadow: none;
    cursor: not-allowed;
}

::placeholder {
    color: #9a9a9a;
    opacity: 1;
}


/* rozměry známých tříd ----------------------------------------------------- */
.text {
    width: 170px;
}

.long_text {
    width: 280px;
}

.short_text {
    width: 60px;
    padding-left: 5px;
    padding-right: 5px;
    text-align: center;
}

.search_text {
    width: 200px;
}

.log_text {
    width: 200px;
}

.textarea {
    width: 400px;
    min-height: 110px;
    line-height: 17px;
    resize: vertical;
}

.bigarea {
    line-height: 17px;
    resize: vertical;
}

select {
    min-height: 32px;
    padding-right: 6px;
    cursor: pointer;
}


/* tlačítka ----------------------------------------------------------------- */
input[type="submit"],
input[type="button"],
input[type="reset"],
button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    font-weight: bold;
    line-height: 18px;
    padding: 7px 16px;
    border: 0;
    border-radius: 6px;
    background-color: var(--accent);
    color: var(--accent-fg);
    cursor: pointer;
    outline: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    transition: filter 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
    -webkit-appearance: none;
    appearance: none;
}

input[type="submit"]:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
button:hover {
    filter: brightness(1.12);
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
input[type="reset"]:focus-visible,
button:focus-visible {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(255, 255, 255, 0.45);
}

input[type="submit"]:active,
input[type="button"]:active,
input[type="reset"]:active,
button:active {
    transform: translateY(1px);
    filter: brightness(0.94);
}

input[type="submit"]:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    filter: none;
    transform: none;
}

/* malá formátovací tlačítka (B / I / U) */
.format_button {
    padding: 4px 10px;
    min-width: 30px;
}

.log_button {
    margin-top: 8px;
}


/* zaškrtávátka a přepínače ------------------------------------------------- */
input[type="checkbox"],
input[type="radio"] {
    width: 14px;
    height: 14px;
    vertical-align: -2px;
    accent-color: var(--accent);
    cursor: pointer;
}

label {
    cursor: pointer;
}


/* výběr souboru ------------------------------------------------------------ */
input[type="file"] {
    font-size: 12px;
    color: #e2e2e2;
    padding: 5px 0;
}

input[type="file"]::file-selector-button {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    padding: 6px 12px;
    margin-right: 8px;
    border: 0;
    border-radius: 6px;
    background-color: var(--accent);
    color: var(--accent-fg);
    cursor: pointer;
    transition: filter 0.15s ease;
}

input[type="file"]::file-selector-button:hover {
    filter: brightness(1.12);
}


/* ==========================================================================
   Datové tabulky – třída .data_table

   Nasazuje se postupně, jen tam, kde se třída doplní do <table>.
   Počítá s tím, že první <tr> je hlavička (buňky <td>, jak je to v Amberu
   psané), takže není potřeba přepisovat výpisy na <thead>/<th>.
   ========================================================================== */
.data_table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    line-height: 18px;
    margin-bottom: 10px;
}

/* úzké tabulky (2–3 sloupce) se nemají roztahovat přes celou šířku */
.data_table_narrow {
    width: auto;
    min-width: 320px;
    max-width: 100%;
}

.data_table td {
    padding: 5px 6px;
    border: 0;
    border-bottom: solid 1px rgba(255, 255, 255, 0.09);
    text-align: left;
    vertical-align: top;
    transition: background-color 0.12s ease;
}

/* hlavička = první řádek */
.data_table tr:first-child td {
    padding-top: 4px;
    padding-bottom: 8px;
    font-weight: bold;
    color: var(--accent);
    white-space: nowrap;
    background: none;
    border-bottom: solid 2px var(--accent);
}

/* jemné pruhování a zvýraznění řádku pod myší */
.data_table tr:nth-child(even) td {
    background-color: rgba(255, 255, 255, 0.035);
}

.data_table tr:hover td {
    background-color: rgba(255, 255, 255, 0.085);
}

.data_table tr:first-child:hover td {
    background: none;
}

/* poslední řádek bez ukončovací linky */
.data_table tr:last-child td {
    border-bottom: 0;
}

/* odkazy v tabulce nechávají barvu akce, jen bez podtržení do klidu */
.data_table td a {
    text-decoration: none;
}

.data_table td a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   Responzivita – základ pro mobil

   Vše podstatné je uzavřené v @media (max-width: 799px), takže na desktopu
   se neuplatní jediné pravidlo a vzhled zůstává beze změny. Breakpoint
   799/800px je schválně stejný, jaký už používá styles.css pro pozadí body.

   Souvisí s tím dva řádky v system/external_construct_page.php:
   meta viewport a tlačítko #menu_button před <div id="left">.
   ========================================================================== */

/* přepínač menu se na desktopu vůbec nezobrazuje */
#menu_button {
    display: none;
}

@media (max-width: 799px) {

    /* grafické pozadí i na mobilu (styles.css ho pod 800px vypíná) ---------- */
    body {
        background-image: url('grafika/body_bg.jpg');
        background-repeat: no-repeat;
        background-position: top center;
        background-size: cover;
        background-attachment: fixed;
    }

    /* základní rámec ------------------------------------------------------- */
    #main,
    #main_admin {
        width: auto;
        max-width: 100%;
    }

    #content_in,
    #content_in_admin {
        float: none;
        width: auto;
    }

    #content {
        padding-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        padding-bottom: 20px;
    }

    /* dekorativní loga – absolutně pozicovaná, táhla by stránku do šířky */
    #left_logo,
    #right_logo,
    #right_gopay {
        display: none;
    }

    /* horní lišta odkazů --------------------------------------------------- */
    #top_line {
        height: auto;
        padding-top: 4px;
        padding-bottom: 4px;
    }

    #top_line_in {
        width: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top_item,
    .top_item:hover {
        float: none;
        height: auto;
        padding: 4px 8px;
    }

    /* hlavička – vyhledávání a přepínač akcí pod sebe ---------------------- */
    #header {
        height: auto;
        padding-top: 10px;
        padding-bottom: 8px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.15);
    }

    /* zalomení psaná pro desktopovou hlavičku na mobilu jen zabírají místo */
    #header > br {
        display: none;
    }

    #header_area {
        float: none;
        margin-right: 0;
        margin-bottom: 8px;
        padding-left: 10px;
        padding-right: 10px;
    }

    #actions_1 {
        float: none;
        margin-left: 0;
        padding-left: 10px;
        padding-right: 10px;
        line-height: 26px;
    }

    /* menu pod tlačítko ---------------------------------------------------- */
    #menu_button {
        display: block;
        width: 100%;
        margin-bottom: 10px;
        text-align: left;
        font-size: 15px;
    }

    #left {
        float: none;
        width: auto;
        display: none;
        margin-bottom: 14px;
        padding-bottom: 10px;
        border-bottom: solid 1px rgba(255, 255, 255, 0.15);
    }

    #content.menu_open #left {
        display: block;
    }

    #left a {
        display: inline-block;
        padding-top: 5px;
        padding-bottom: 5px;
        font-size: 14px;
    }

    /* plovoucí boxy pod sebe ----------------------------------------------- */
    .left_box,
    .left_box_long,
    .left_box_longer,
    .log_box,
    .log_box_right,
    .float_right {
        float: none;
        width: auto;
        padding-right: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .log_box_right {
        border-left: 0;
        padding-left: 0;
    }

    #log_or {
        position: static;
        margin-left: 0;
        margin-top: 6px;
    }

    .admin_day,
    .guests_fields {
        float: none;
        width: auto;
    }

    /* formulářová pole – 16px kvůli automatickému zoomu na iOS -------------- */
    input[type="text"],
    input[type="password"],
    input[type="email"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    input[type="time"],
    textarea,
    select {
        font-size: 16px;
        max-width: 100%;
    }

    .text,
    .long_text,
    .search_text,
    .log_text,
    .textarea {
        width: 100%;
    }

    .short_text {
        width: 80px;
    }

    /* datové tabulky – posun uvnitř tabulky, ne celé stránky ---------------- */
    .data_table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .data_table_narrow {
        min-width: 0;
    }

    .data_table td {
        white-space: nowrap;
    }
}