/* Mobile / small screens layout for Production Rules */

@media (max-width: 900px) {

    /* Nie chcemy poziomego przewijania całej strony modułu */
    .pr-container {
        max-width: 100%;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    /* Lewy/prawy panel (RuleSet / Add new rule) jeden pod drugim */
    .pr-left,
    .pr-right {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 0 12px 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Gdyby .pr-container było flex – wymuszamy kolumnę */
    .pr-container {
        display: block !important;
    }

    /* Tabele w tych panelach nie mogą wystawać poza ekran */
    .pr-left table,
    .pr-right table {
        width: 100% !important;
        max-width: 100% !important;
        table-layout: fixed;
    }

    .pr-left table td,
    .pr-right table td {
        white-space: normal;
        word-break: break-word;
    }

    /* Form input/select niech się mieszczą */
    .pr-left input[type="text"],
    .pr-left select,
    .pr-right input[type="text"],
    .pr-right select {
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Tooltip od flow – dopasowany do ekranu */
    #pr-flow-tooltip {
        max-width: 90% !important;
        font-size: 12px !important;
        line-height: 1.3 !important;
    }
}
/* --- MOBILE: wyrównanie sekcji Rule set / New RuleSet / RAW / FG-SF --- */
@media (max-width: 900px) {

    /* Formularze po lewej stronie (Rule set, New RuleSet, RAW, FG/SF) */
    .pr-left form {
        display: block;
        width: 100%;
    }

    .pr-left form * {
        box-sizing: border-box;
    }

    /* Tekst + pola wejściowe niech składają się pionowo, bez rozjeżdżania */
    .pr-left form input[type="text"],
    .pr-left form select {
        width: 100%;
        max-width: 100%;
        margin-top: 2px;
        margin-bottom: 8px;
    }

    /* Przyciski w tych formularzach – pełna szerokość pod polami */
    .pr-left form .button,
    .pr-left form input[type="submit"],
    .pr-left form input[type="button"] {
        display: block;
        width: 100%;
        margin-top: 4px;
        margin-bottom: 10px;
    }
}