/* =========================================
   CONNECTOR — PODSTAWOWA WERSJA MOBILNA
   Ten plik musi być podpięty jako ostatni CSS.
   ========================================= */

.mobile-topbar,
#mobile-menu-overlay{
    display:none;
}

.mobile-project-list,
.mobile-payments-list,
.mobile-offers-list,
.mobile-realization-list,
.mobile-invoice-list,
.mobile-clients-list{
    display:none;
}

/* =========================================
   TELEFONY I MNIEJSZE TABLETY
   ========================================= */

/* =========================================
   KLIENCI — PASEK AKCJI I WYSZUKIWARKA
   ========================================= */

.clients-toolbar{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:10px;

    min-width:0;
}

.clients-search-row{
    display:grid;
    grid-template-columns:minmax(240px, 360px) 44px;
    align-items:center;
    gap:8px;

    min-width:0;
}

.clients-search-box{
    position:relative;

    display:flex;
    align-items:center;

    min-width:0;
}

.clients-search-box > i{
    position:absolute;
    left:14px;
    z-index:2;

    color:#64748b;

    pointer-events:none;
}

.clients-search-box input{
    width:100%;
    min-width:0;
    height:44px;

    padding:
        10px
        14px
        10px
        42px;

    border:1px solid #cbd5e1;
    border-radius:12px;

    background:#ffffff;
    color:#0f172a;

    font-size:14px;

    box-shadow:
        0 3px 10px rgba(15,23,42,0.05);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.clients-search-box input:focus{
    outline:none;

    border-color:#2563eb;

    box-shadow:
        0 0 0 3px rgba(37,99,235,0.12);
}

/*
Ukrywamy przeglądarkowy przycisk X,
ponieważ obok pola mamy własny.
*/
.clients-search-box
input::-webkit-search-cancel-button{
    display:none;

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

.clients-search-clear{
    width:44px;
    min-width:44px;
    height:44px;
    min-height:44px;

    display:flex;
    align-items:center;
    justify-content:center;

    margin:0;
    padding:0;

    border:1px solid #cbd5e1;
    border-radius:12px;

    background:#e2e8f0;
    color:#475569;

    font-size:16px;
    cursor:pointer;

    opacity:1;
    visibility:visible;
    pointer-events:auto;

    transition:
        opacity 0.15s ease,
        visibility 0.15s ease,
        background 0.15s ease;
}

.clients-search-clear:hover{
    background:#cbd5e1;

    transform:none;
}

.clients-search-clear i{
    pointer-events:none;
}

.clients-search-clear.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

@media(min-width:769px) and (max-width:1100px){

    #clients .topbar{
        align-items:stretch;
        flex-direction:column;
        gap:14px;
    }

    #clients .clients-toolbar{
        width:100%;

        justify-content:space-between;
    }

    #clients .clients-search-row{
        flex:1 1 auto;

        grid-template-columns:minmax(180px, 1fr) 44px;
    }
}

@media(max-width:768px){

    html{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
    }

    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden;
        -webkit-text-size-adjust:100%;
    }

    body.mobile-menu-open{
        overflow:hidden;
    }

    *{
        box-sizing:border-box;
    }


    /* =====================================
       GŁÓWNY UKŁAD
       ===================================== */

    #app{
        display:block !important;
        width:100%;
        min-height:100dvh;
    }

    .content{
        width:100%;
        min-width:0;
        max-width:100%;
        padding:
            calc(72px + env(safe-area-inset-top))
            12px
            calc(24px + env(safe-area-inset-bottom))
            12px;
        overflow-x:hidden;
    }

    .view{
        width:100%;
        max-width:100%;
        min-width:0;
        padding-bottom:20px;
    }

    .view h1{
        margin-top:0;
        margin-bottom:10px;
        font-size:25px;
        line-height:1.2;
    }

    .view h2{
        font-size:21px;
        line-height:1.25;
    }

    .view-lead{
        margin-top:0;
        font-size:14px;
        line-height:1.5;
    }


    /* =====================================
       GÓRNY PASEK MOBILNY
       ===================================== */

    .mobile-topbar{
        position:fixed;
        top:0;
        left:0;
        right:0;
        z-index:100050;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        min-height:60px;
        padding:
            calc(8px + env(safe-area-inset-top))
            12px
            8px
            12px;

        background:rgba(15,23,42,0.97);
        color:white;

        box-shadow:0 4px 18px rgba(15,23,42,0.22);
        backdrop-filter:blur(12px);
    }

    .mobile-topbar-brand{
        flex:1;
        display:flex;
        align-items:center;
        gap:10px;
        min-width:0;
    }

    .mobile-topbar-logo{
        width:34px;
        height:34px;
        object-fit:contain;
        flex:0 0 auto;
    }

    .mobile-topbar-title{
        font-size:18px;
        font-weight:900;
        white-space:nowrap;
    }

    .mobile-back-button,
    .mobile-menu-button{
        width:44px;
        height:44px;
        min-width:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        margin:0;
        padding:0;

        border:none;
        border-radius:12px;

        background:#334155;
        color:white;

        font-size:20px;
        cursor:pointer;
    }


    /* =====================================
       WYSUWANE MENU
       ===================================== */

    .sidebar{
        position:fixed;
        top:0;
        bottom:0;
        left:0;
        z-index:100070;

        width:min(86vw, 320px);
        min-height:100dvh;
        height:100dvh;

        padding:
            calc(18px + env(safe-area-inset-top))
            16px
            calc(18px + env(safe-area-inset-bottom))
            16px;

        overflow-y:auto;
        overflow-x:hidden;

        transform:translateX(-105%);
        transition:transform 0.22s ease;

        box-shadow:12px 0 30px rgba(15,23,42,0.28);
    }

    .sidebar.mobile-open{
        transform:translateX(0);
    }

    .sidebar.collapsed{
        width:min(86vw, 320px);
        padding:
            calc(18px + env(safe-area-inset-top))
            16px
            calc(18px + env(safe-area-inset-bottom))
            16px;
    }

    .sidebar.collapsed .sidebar-title,
    .sidebar.collapsed .menu-text{
        display:block;
    }

    .sidebar.collapsed button{
        justify-content:flex-start;
        padding:12px;
    }

    .sidebar.collapsed .sidebar-toggle{
        margin:0;
    }

    .sidebar button{
        width:100%;
        min-height:46px;
        font-size:15px;
    }

    .sidebar button:hover{
        transform:none;
    }

    .sidebar-group-chevron{
        display:flex;
    }

    .sidebar.collapsed
    .sidebar-group-chevron{
        display:flex;
    }

    .sidebar .process-submenu{
        width:calc(100% - 20px);

        margin:
            0
            0
            10px
            20px;
    }

    .sidebar.collapsed
    .process-submenu{
        width:calc(100% - 20px);

        margin:
            0
            0
            10px
            20px;
    }

    .sidebar .process-submenu button,
    .sidebar.collapsed
    .process-submenu button{
        width:100%;

        justify-content:flex-start;

        min-height:44px;

        padding:
            10px
            12px;
    }

    .sidebar.collapsed
    .process-submenu .menu-text{
        display:block;
    }

    .sidebar.collapsed
    .sidebar-tree-submenu::before,
    .sidebar.collapsed
    .sidebar-tree-submenu button::before{
        display:block;
    }

    .sidebar-header{
        position:sticky;
        top:0;
        z-index:3;
        padding-bottom:10px;
        background:#111827;
    }

    #mobile-menu-overlay{
        position:fixed;
        inset:0;
        z-index:100060;

        display:block;

        width:100vw;
        height:100dvh;
        margin:0;
        padding:0;

        border:none;
        border-radius:0;

        background:rgba(15,23,42,0.56);

        opacity:0;
        visibility:hidden;
        pointer-events:none;

        transition:
            opacity 0.2s ease,
            visibility 0.2s ease;
    }

    body.mobile-menu-open #mobile-menu-overlay{
        opacity:1;
        visibility:visible;
        pointer-events:auto;
    }


    /* =====================================
       PRZYCISKI I POLA
       ===================================== */

    button,
    input,
    select,
    textarea{
        font-size:16px;
    }

    button{
        min-height:44px;
        touch-action:manipulation;
    }

    input,
    select,
    textarea{
        width:100%;
        max-width:100%;
    }

    textarea{
        min-height:100px;
    }


    /* =====================================
       NAGŁÓWKI I PASKI AKCJI
       ===================================== */

    .topbar,
    .projects-topbar,
    .sales-view-header,
    .realization-view-header,
    .invoice-view-header,
    .finance-view-header,
    .mail-view-header,
    .work-calendar-header,
    .gantt-header{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    .topbar > button,
    .projects-add-button,
    .sales-main-action,
    .realization-main-action,
    .invoice-main-action{
        width:100%;
        justify-content:center;
    }

    .topbar-actions,
    .mail-header-actions,
    .budget-header-buttons{
        width:100%;
        flex-direction:column;
        align-items:stretch;
    }

    .topbar-actions button,
    .mail-header-actions button,
    .budget-header-buttons button{
        width:100%;
        justify-content:center;
    }


    /* =====================================
       FILTRY
       ===================================== */

    .filters,
    .projects-filter-bar .filters,
    .sales-filter-bar,
    .realization-filter-bar,
    .invoice-filter-bar,
    .gantt-filters,
    .mail-toolbar{
        width:100%;
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
        overflow:visible;
    }

    .filters input,
    .filters select,
    .sales-filter-bar input,
    .sales-filter-bar select,
    .realization-filter-bar input,
    .realization-filter-bar select,
    .invoice-filter-bar input,
    .invoice-filter-bar select,
    .gantt-filters input,
    .gantt-filters select,
    .mail-toolbar input,
    .mail-toolbar select{
        width:100%;
        min-width:0;
        max-width:none;
    }


    /* =====================================
       KAFELKI I SIATKI
       ===================================== */

    .cards,
    .dashboard-section,
    .dashboard-top-layout,
    .dashboard-top-cards,
    .command-center-grid,
    .command-center-stats,
    .sales-summary-grid,
    .realization-summary-grid,
    .invoice-summary-grid,
    .payment-summary-cards,
    .finance-summary-grid,
    .finance-summary-grid-extended,
    .budget-summary-grid,
    .mail-summary-grid,
    .gantt-counters{
        grid-template-columns:1fr !important;
        gap:12px;
    }

    .dashboard-section{
        display:grid;
    }

    .dashboard-half,
    .card,
    .dashboard-card,
    .command-panel,
    .mail-dashboard-card{
        width:100%;
        min-width:0;
        padding:16px;
    }

    .quick-actions,
    .process-quick-actions{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;
    }

    .quick-actions button,
    .process-quick-actions button{
        width:100%;
        min-height:58px;
        justify-content:flex-start;
        text-align:left;
    }


    /* =====================================
       TABELE — WERSJA TYMCZASOWA
       ===================================== */

    .view,
    .dashboard-half,
    .budget-table-card,
    .mail-list-panel,
    .work-calendar-card{
        max-width:100%;
    }

    .view table:not(.calendar-grid),
    .dashboard-half table,
    .budget-table-card table,
    .mail-list-panel table{
        min-width:720px;
    }

    .dashboard-half,
    .budget-table-card,
    .mail-list-panel{
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    .view > table{
        display:block;
        width:100%;
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    table th,
    table td{
        padding:12px 10px;
        white-space:nowrap;
    }

    table td button{
        min-height:40px;
        padding:9px 12px;
    }


    /* =====================================
       MODALE
       ===================================== */

    .modal{
        align-items:flex-end;
        padding:0;
    }

    .modal-box,
    .form-modal,
    .details-modal,
    .project-modal-box{
        width:100%;
        max-width:100vw;
        max-height:94dvh;

        margin:0;
        padding:18px 14px;

        border-radius:22px 22px 0 0;
    }

    .modal-tabs,
    .settings-tabs,
    .work-calendar-tabs,
    .mail-tabs{
        width:100%;
        flex-wrap:nowrap;
        overflow-x:auto;
        overflow-y:hidden;
        padding-bottom:5px;
        -webkit-overflow-scrolling:touch;
    }

    .modal-tabs button,
    .settings-tabs button,
    .work-calendar-tabs button,
    .mail-tabs button{
        flex:0 0 auto;
        white-space:nowrap;
    }

    .modal-actions-fixed{
        flex-direction:column-reverse;
        align-items:stretch;
    }

    .modal-actions-fixed button{
        width:100%;
    }


    /* =====================================
       FORMULARZE
       ===================================== */

    .budget-project-selector-card,
    .budget-cost-form-grid,
    .budget-import-grid,
    .mail-account-form{
        grid-template-columns:1fr !important;
    }

    .budget-project-selector-card{
        flex-direction:column;
        align-items:stretch;
    }

    .budget-cost-form-actions{
        justify-content:stretch;
    }

    .budget-cost-form-actions button{
        width:100%;
    }


    /* =====================================
       POWIADOMIENIA
       ===================================== */

    .notification-center{
        top:72px !important;
        right:12px !important;

        /*
        Na komputerze dzwoneczek jest ustawiany
        właściwością bottom. Na telefonie musimy
        ją wyłączyć, inaczej kontener rozciąga się
        przez prawie cały ekran.
        */
        bottom:auto !important;
        left:auto !important;

        /*
        Kontener ma zajmować tylko rzeczywistą
        powierzchnię przycisku dzwoneczka.
        */
        width:52px !important;
        height:52px !important;

        pointer-events:none;
    }

    /*
    Klikalny pozostaje wyłącznie widoczny
    przycisk dzwoneczka.
    */
    .notification-center
    .notification-bell-button{
        pointer-events:auto;
    }

    /*
    Po otwarciu panel powiadomień również
    musi normalnie reagować na dotyk.
    */
    .notification-center
    .notifications-panel{
        pointer-events:auto;
    }

    /*
    W widoku Klienci dzwonek nie może
    nachodzić na wyszukiwarkę i przycisk X.
    */
    body.clients-view-active .notification-center{
        display:none !important;
    }    

    .notifications-panel{
        position:fixed;
        top:70px;
        left:10px;
        right:10px;

        width:auto;
        max-width:none;
        max-height:calc(100dvh - 84px);
    }


    /* =====================================
       LOGIN
       ===================================== */

    #login-screen{
        width:100%;
        min-height:100dvh;
        padding:16px;
    }

    .login-box{
        width:100%;
        max-width:420px;
        padding:22px 18px;
    }


    /* =====================================
       HARMONOGRAM I KALENDARZE
       ===================================== */

    .gantt-chart{
        max-height:72dvh;
    }

    .gantt-left{
        width:180px;
        min-width:180px;
    }

    .calendar-fixed-column{
        width:150px;
        min-width:150px;
    }

    .calendar-fixed-column table{
        width:150px;
    }

    .calendar-fixed-column th,
    .calendar-fixed-column td{
        width:150px;
        padding:0 10px;
    }
    /* =====================================
       PROJEKTY — KARTY MOBILNE
       ===================================== */

    #projects .projects-desktop-table{
        display:none;
    }

    #projects .mobile-project-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    .mobile-project-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;
        border:1px solid #dbe3ef;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-project-card:active{
        transform:scale(0.99);
    }

    .mobile-project-card-top{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:12px;
    }

    .mobile-project-heading{
        display:flex;
        flex-direction:column;
        gap:3px;
        min-width:0;
    }

    .mobile-project-kicker{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.08em;
        color:#64748b;
    }

    .mobile-project-number{
        font-size:17px;
        line-height:1.25;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-project-status{
        flex:0 0 auto;
        max-width:50%;
        text-align:right;
    }

    .mobile-project-status .badge{
        white-space:normal;
        text-align:left;
        line-height:1.25;
    }

    .mobile-project-topic{
        margin:14px 0;
        font-size:19px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-project-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:15px;
    }

    .mobile-project-data > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .mobile-project-data span{
        font-size:11px;
        font-weight:800;
        text-transform:uppercase;
        letter-spacing:0.04em;
        color:#64748b;
    }

    .mobile-project-data strong{
        font-size:14px;
        line-height:1.35;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-project-alerts{
        margin-top:12px;
    }

    .mobile-project-alerts:empty{
        display:none;
    }

    .mobile-project-alerts .project-list-alerts{
        margin-top:0;
    }

    .mobile-project-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .mobile-project-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px 8px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        font-weight:900;
    }

    .mobile-project-actions .mobile-project-primary-action{
        background:linear-gradient(135deg, #2563eb, #1d4ed8);
        color:#ffffff;
    }

    .mobile-project-actions .mobile-project-delete-action{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }

    .mobile-empty-state{
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;
        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;
        border:1px dashed #cbd5e1;
        border-radius:20px;

        color:#64748b;
    }

    .mobile-empty-state i{
        font-size:32px;
        color:#94a3b8;
    }

    .mobile-empty-state strong{
        font-size:17px;
        color:#334155;
    }

    .mobile-empty-state span{
        font-size:14px;
        line-height:1.45;
    }

    /* =====================================
       PŁATNOŚCI — KARTY MOBILNE
       ===================================== */

    #payments .payments-desktop-table{
        display:none;
    }

    #payments .mobile-payments-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    .mobile-payment-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;
        border:1px solid #dbe3ef;
        border-left:5px solid #94a3b8;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-payment-card.waiting{
        border-left-color:#f59e0b;
    }

    .mobile-payment-card.warning{
        border-left-color:#f97316;
    }

    .mobile-payment-card.danger{
        border-left-color:#dc2626;
    }

    .mobile-payment-card.paid{
        border-left-color:#16a34a;
    }

    .mobile-payment-card:active{
        transform:scale(0.99);
    }

    .mobile-payment-card-top{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:12px;
    }

    .mobile-payment-heading{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-payment-kicker{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.07em;
        color:#64748b;
    }

    .mobile-payment-number{
        font-size:17px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-payment-status{
        flex:0 0 auto;
        max-width:48%;
        text-align:right;
    }

    .mobile-payment-status .badge{
        white-space:normal;
        line-height:1.25;
        text-align:left;
    }

    .mobile-payment-amount{
        margin:15px 0;

        font-size:28px;
        line-height:1.1;
        font-weight:900;

        color:#0f172a;
        letter-spacing:-0.03em;
    }

    .mobile-payment-project{
        display:flex;
        flex-direction:column;
        gap:3px;

        margin-bottom:10px;
        padding:12px;

        background:#eff6ff;
        border:1px solid #dbeafe;
        border-radius:14px;
    }

    .mobile-payment-project span,
    .mobile-payment-data span{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.04em;
        color:#64748b;
    }

    .mobile-payment-project strong{
        font-size:15px;
        line-height:1.35;
        color:#1e3a8a;
        word-break:break-word;
    }

    .mobile-payment-project small{
        font-size:13px;
        line-height:1.4;
        color:#475569;
    }

    .mobile-payment-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:14px;
    }

    .mobile-payment-data > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .mobile-payment-data strong{
        font-size:14px;
        line-height:1.35;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-payment-data small{
        font-size:12px;
        line-height:1.35;
    }

    .mobile-payment-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .mobile-payment-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px 8px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        font-weight:900;
    }

    .mobile-payment-actions .mobile-payment-primary-action{
        background:linear-gradient(135deg, #2563eb, #1d4ed8);
        color:#ffffff;
    }

    .mobile-payment-actions .mobile-payment-paid-action{
        background:#dcfce7 !important;
        color:#166534 !important;
    }

    .mobile-payment-actions .mobile-payment-delete-action{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }

    /* =====================================
       SPRZEDAŻ — KARTY MOBILNE
       ===================================== */

    #offers .sales-desktop-table{
        display:none;
    }

    #offers .mobile-offers-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    .mobile-offer-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;
        border:1px solid #dbe3ef;
        border-left:5px solid #2563eb;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-offer-card.active{
        border-left-color:#2563eb;
    }

    .mobile-offer-card.warning{
        border-left-color:#f59e0b;
    }

    .mobile-offer-card.danger{
        border-left-color:#dc2626;
    }

    .mobile-offer-card.lost{
        border-left-color:#64748b;
        background:#f8fafc;
    }

    .mobile-offer-card:active{
        transform:scale(0.99);
    }

    .mobile-offer-card-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
    }

    .mobile-offer-heading{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-offer-kicker{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.07em;
        color:#64748b;
    }

    .mobile-offer-number{
        font-size:17px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-offer-status{
        flex:0 0 auto;
        max-width:50%;
        text-align:right;
    }

    .mobile-offer-status .badge{
        white-space:normal;
        line-height:1.25;
        text-align:left;
    }

    .mobile-offer-topic{
        margin:14px 0;
        font-size:19px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-offer-amount{
        display:flex;
        flex-direction:column;
        gap:4px;

        margin-bottom:10px;
        padding:14px;

        background:#eff6ff;
        border:1px solid #dbeafe;
        border-radius:14px;
    }

    .mobile-offer-card.warning .mobile-offer-amount{
        background:#fffbeb;
        border-color:#fde68a;
    }

    .mobile-offer-card.danger .mobile-offer-amount{
        background:#fff1f2;
        border-color:#fecdd3;
    }

    .mobile-offer-card.lost .mobile-offer-amount{
        background:#f1f5f9;
        border-color:#e2e8f0;
    }

    .mobile-offer-amount span,
    .mobile-offer-data span{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.04em;
        color:#64748b;
    }

    .mobile-offer-amount strong{
        font-size:25px;
        line-height:1.15;
        color:#0f172a;
        letter-spacing:-0.03em;
    }

    .mobile-offer-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:14px;
    }

    .mobile-offer-data > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .mobile-offer-data strong{
        font-size:14px;
        line-height:1.35;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-offer-data small{
        font-size:12px;
        line-height:1.35;
    }

    .mobile-offer-alerts{
        margin-top:12px;
    }

    .mobile-offer-alerts:empty{
        display:none;
    }

    .mobile-offer-alerts .project-list-alerts{
        margin-top:0;
    }

    .mobile-offer-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .mobile-offer-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px 8px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        font-weight:900;
    }

    .mobile-offer-actions .mobile-offer-primary-action{
        background:linear-gradient(135deg, #2563eb, #1d4ed8);
        color:#ffffff;
    }    
    /* =====================================
       REALIZACJA — KARTY MOBILNE
       ===================================== */

    #realization .realization-desktop-table{
        display:none;
    }

    #realization .mobile-realization-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    .mobile-realization-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;
        border:1px solid #dbe3ef;
        border-left:5px solid #2563eb;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-realization-card.active{
        border-left-color:#2563eb;
    }

    .mobile-realization-card.warning{
        border-left-color:#f59e0b;
    }

    .mobile-realization-card.danger{
        border-left-color:#dc2626;
    }

    .mobile-realization-card.paused{
        border-left-color:#64748b;
        background:#f8fafc;
    }

    .mobile-realization-card:active{
        transform:scale(0.99);
    }

    .mobile-realization-card-top{
        display:flex;
        justify-content:space-between;
        align-items:flex-start;
        gap:12px;
    }

    .mobile-realization-heading{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-realization-kicker{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.07em;
        color:#64748b;
    }

    .mobile-realization-number{
        font-size:17px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-realization-status{
        flex:0 0 auto;
        max-width:50%;
        text-align:right;
    }

    .mobile-realization-status .badge{
        white-space:normal;
        line-height:1.25;
        text-align:left;
    }

    .mobile-realization-topic{
        margin:14px 0;
        font-size:19px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-realization-client{
        display:flex;
        flex-direction:column;
        gap:4px;

        margin-bottom:10px;
        padding:12px;

        background:#eff6ff;
        border:1px solid #dbeafe;
        border-radius:14px;
    }

    .mobile-realization-client span,
    .mobile-realization-data span,
    .mobile-realization-deadline span{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.04em;
        color:#64748b;
    }

    .mobile-realization-client strong{
        font-size:15px;
        line-height:1.35;
        color:#1e3a8a;
        word-break:break-word;
    }

    .mobile-realization-deadline{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        margin-bottom:10px;
        padding:13px;

        background:#f8fafc;
        border:1px solid #e2e8f0;
        border-radius:14px;
    }

    .mobile-realization-deadline > div{
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-realization-deadline strong{
        font-size:16px;
        line-height:1.3;
    }

    .mobile-realization-deadline i{
        font-size:24px;
        color:#64748b;
    }

    .mobile-realization-card.warning
    .mobile-realization-deadline{
        background:#fffbeb;
        border-color:#fde68a;
    }

    .mobile-realization-card.danger
    .mobile-realization-deadline{
        background:#fff1f2;
        border-color:#fecdd3;
    }

    .mobile-realization-card.paused
    .mobile-realization-deadline{
        background:#f1f5f9;
        border-color:#cbd5e1;
    }

    .mobile-realization-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:14px;
    }

    .mobile-realization-data > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .mobile-realization-data strong{
        font-size:14px;
        line-height:1.35;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-realization-alerts{
        margin-top:12px;
    }

    .mobile-realization-alerts:empty{
        display:none;
    }

    .mobile-realization-alerts .project-list-alerts{
        margin-top:0;
    }

    .mobile-realization-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .mobile-realization-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px 8px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        font-weight:900;
    }

    .mobile-realization-actions
    .mobile-realization-primary-action{
        background:linear-gradient(135deg, #2563eb, #1d4ed8);
        color:#ffffff;
    }

    .mobile-realization-actions
    .mobile-realization-schedule-action{
        grid-column:1 / -1;
        background:#ede9fe;
        color:#5b21b6;
    }

    /* =====================================
       DO WYSTAWIENIA — KARTY MOBILNE
       ===================================== */

    #invoice .invoice-desktop-table{
        display:none;
    }

    #invoice .mobile-invoice-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    .mobile-invoice-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;
        border:1px solid #dbe3ef;
        border-left:5px solid #8b5cf6;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-invoice-card.waiting{
        border-left-color:#8b5cf6;
    }

    .mobile-invoice-card.success{
        border-left-color:#16a34a;
    }

    .mobile-invoice-card.warning{
        border-left-color:#f59e0b;
    }

    .mobile-invoice-card.additional{
        border-left-color:#0284c7;
    }

    .mobile-invoice-card:active{
        transform:scale(0.99);
    }

    .mobile-invoice-card-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
    }

    .mobile-invoice-heading{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-invoice-kicker{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.07em;
        color:#64748b;
    }

    .mobile-invoice-number{
        font-size:17px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-invoice-status{
        flex:0 0 auto;
        max-width:50%;
        text-align:right;
    }

    .mobile-invoice-status .badge{
        white-space:normal;
        line-height:1.25;
        text-align:left;
    }

    .mobile-invoice-type-badge{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;
        gap:6px;

        padding:7px 10px;

        border-radius:999px;

        background:#e0f2fe;
        color:#075985;

        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
    }

    .mobile-invoice-topic{
        margin:14px 0;
        font-size:19px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-invoice-parent-project{
        display:flex;
        flex-direction:column;
        gap:4px;

        margin-bottom:10px;
        padding:12px;

        background:#f0f9ff;
        border:1px solid #bae6fd;
        border-radius:14px;
    }

    .mobile-invoice-parent-project span,
    .mobile-invoice-amount span,
    .mobile-invoice-data span{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.04em;
        color:#64748b;
    }

    .mobile-invoice-parent-project strong{
        font-size:14px;
        line-height:1.35;
        color:#075985;
        word-break:break-word;
    }

    .mobile-invoice-amount{
        display:flex;
        flex-direction:column;
        gap:4px;

        margin-bottom:10px;
        padding:14px;

        background:#f5f3ff;
        border:1px solid #ddd6fe;
        border-radius:14px;
    }

    .mobile-invoice-card.success .mobile-invoice-amount{
        background:#f0fdf4;
        border-color:#bbf7d0;
    }

    .mobile-invoice-card.warning .mobile-invoice-amount{
        background:#fffbeb;
        border-color:#fde68a;
    }

    .mobile-invoice-card.additional .mobile-invoice-amount{
        background:#f0f9ff;
        border-color:#bae6fd;
    }

    .mobile-invoice-amount strong{
        font-size:26px;
        line-height:1.15;
        color:#0f172a;
        letter-spacing:-0.03em;
    }

    .mobile-invoice-amount
    .mobile-invoice-missing-amount{
        font-size:20px;
        color:#b45309;
    }

    .mobile-invoice-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:14px;
    }

    .mobile-invoice-data > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .mobile-invoice-data strong{
        font-size:14px;
        line-height:1.35;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-invoice-alerts{
        margin-top:12px;
    }

    .mobile-invoice-alerts:empty{
        display:none;
    }

    .mobile-invoice-alerts .project-list-alerts{
        margin-top:0;
    }

    .mobile-invoice-extra-alert{
        display:flex;
        align-items:center;
        gap:8px;

        margin-top:12px;
        padding:10px 12px;

        border-radius:12px;

        background:#e0f2fe;
        color:#075985;

        font-size:13px;
        font-weight:900;
    }

    .mobile-invoice-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:14px;
    }

    .mobile-invoice-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px 8px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        font-weight:900;
    }

    .mobile-invoice-actions
    .mobile-invoice-project-action{
        background:#e2e8f0;
        color:#334155;
    }

    .mobile-invoice-actions
    .mobile-invoice-primary-action{
        background:linear-gradient(135deg, #7c3aed, #6d28d9);
        color:#ffffff;
    }

    .mobile-invoice-card.additional
    .mobile-invoice-primary-action{
        background:linear-gradient(135deg, #0284c7, #0369a1);
    }

    .mobile-invoice-actions
    .mobile-invoice-edit-action{
        grid-column:1 / -1;
        background:#eff6ff;
        color:#1d4ed8;
    }
    /* =====================================
       KLIENCI — KARTY MOBILNE
       ===================================== */

    #clients .clients-desktop-table{
        display:none;
    }

    #clients .mobile-clients-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    .mobile-client-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;
        border:1px solid #dbe3ef;
        border-left:5px solid #2563eb;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-client-card:active{
        transform:scale(0.99);
    }

    .mobile-client-card-top{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        margin:0;
    }

    .mobile-client-heading{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-client-kicker{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.07em;
        color:#64748b;
    }

    .mobile-client-name{
        font-size:20px;
        line-height:1.3;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-client-icon{
        width:44px;
        height:44px;
        min-width:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        border-radius:14px;

        background:#dbeafe;
        color:#1d4ed8;

        font-size:20px;
    }

    .mobile-client-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:14px;
    }

    .mobile-client-data > div{
        min-width:0;
        display:flex;
        flex-direction:column;
        gap:3px;
    }

    .mobile-client-data span{
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.04em;
        color:#64748b;
    }

    .mobile-client-data strong{
        font-size:14px;
        line-height:1.4;
        color:#0f172a;
        word-break:break-word;
    }

    .mobile-client-address{
        display:flex;
        align-items:flex-start;
        gap:9px;

        margin-top:10px;
        padding:11px 12px;

        background:#f8fafc;
        border:1px solid #eef2f7;
        border-radius:12px;

        color:#475569;
        font-size:13px;
        line-height:1.4;
    }

    .mobile-client-address i{
        margin-top:2px;
        color:#2563eb;
    }

    .mobile-client-quick-contact{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:12px;
    }

    .mobile-client-quick-contact:empty{
        display:none;
    }

    .mobile-client-quick-contact a{
        min-height:44px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        padding:10px;

        border-radius:12px;

        background:#eff6ff;
        color:#1d4ed8;

        font-size:13px;
        font-weight:900;
        text-decoration:none;
    }

    .mobile-client-quick-contact a:first-child{
        background:#f0fdf4;
        color:#15803d;
    }

    .mobile-client-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
        margin-top:12px;
    }

    .mobile-client-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px 8px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        font-weight:900;
    }

    .mobile-client-actions
    .mobile-client-primary-action{
        background:linear-gradient(135deg, #2563eb, #1d4ed8);
        color:#ffffff;
    }

    .mobile-client-actions
    .mobile-client-delete-action{
        grid-column:1 / -1;
        background:#fee2e2 !important;
        color:#991b1b !important;
    }
    
    /* =====================================
       KLIENCI — WYSZUKIWARKA
       ===================================== */

    #clients .clients-toolbar{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    #clients .clients-search-row{
        width:100%;

        display:grid;
        grid-template-columns:minmax(0, 1fr) 48px;
        align-items:center;
        gap:8px;
    }

    #clients .clients-search-box{
        position:relative;

        display:flex;
        align-items:center;

        width:100%;
    }

    #clients .clients-search-box > i{
        position:absolute;
        left:14px;
        z-index:2;

        color:#64748b;
        pointer-events:none;
    }

    #clients .clients-search-box input{
        width:100%;
        min-height:48px;

        padding:
            11px
            14px
            11px
            42px;

        border:1px solid #cbd5e1;
        border-radius:14px;

        background:#ffffff;
        color:#0f172a;

        font-size:16px;

        box-shadow:
            0 4px 12px rgba(15,23,42,0.05);
    }

    #clients .clients-search-box input:focus{
        outline:none;
        border-color:#2563eb;

        box-shadow:
            0 0 0 3px rgba(37,99,235,0.13);
    }

    /*
    Ukrywamy przeglądarkowy przycisk X,
    ponieważ używamy własnego.
    */
    #clients
    .clients-search-box
    input::-webkit-search-cancel-button{
        appearance:none;
        -webkit-appearance:none;
        display:none;
    }

    #clients .clients-search-clear{
        position:static;

        width:48px;
        min-width:48px;
        height:48px;
        min-height:48px;

        display:flex;
        align-items:center;
        justify-content:center;

        margin:0;
        padding:0;

        border:1px solid #cbd5e1;
        border-radius:14px;

        background:#e2e8f0;
        color:#475569;

        font-size:17px;
        cursor:pointer;

        opacity:1;
        visibility:visible;
        pointer-events:auto;

        transition:
            opacity 0.15s ease,
            background 0.15s ease;
    }

    #clients .clients-search-clear:hover{
        background:#cbd5e1;
        transform:none;
    }

    #clients .clients-search-clear:active{
        background:#94a3b8;
    }

    #clients .clients-search-clear i{
        pointer-events:none;
    }

    #clients .clients-search-clear.is-hidden{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }

    #clients .clients-search-clear i{
        pointer-events:none;
    }

    #clients .clients-search-clear:hover{
        background:#cbd5e1;
        transform:none;
    }

    #clients .clients-search-clear:active{
        background:#94a3b8;
    }


    #clients .clients-toolbar > button{
        width:100%;
        min-height:48px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
    }
    /* =====================================
       KLIENCI — ZWIJANE KARTY
       ===================================== */

        .mobile-client-card{
            cursor:pointer;
        }

    .mobile-client-card-top{
        width:100%;

        display:grid;
        grid-template-columns:minmax(0, 1fr) 48px;
        align-items:center;
        gap:10px;

        margin:0;
    }

 
    .mobile-client-expand-button{
        width:48px;
        min-width:48px;
        height:48px;
        min-height:48px;

        display:flex;
        align-items:center;
        justify-content:center;

        margin:0;
        padding:0;

        border:none;
        border-radius:14px;

        background:#eff6ff;
        color:#2563eb;

        font-size:16px;
        cursor:pointer;
    }

    .mobile-client-expand-button:hover{
        background:#dbeafe;
        transform:none;
    }

    .mobile-client-expand-button:active{
        background:#bfdbfe;
    }

    .mobile-client-expand-tools{
        flex:0 0 auto;

        display:flex;
        align-items:center;
        gap:10px;
    }

    .mobile-client-chevron{
        font-size:15px;
        color:#64748b;

        transition:transform 0.2s ease;
    }

    .mobile-client-card.expanded
    .mobile-client-chevron{
        transform:rotate(180deg);
    }

    .mobile-client-card-body{
        display:none;

        margin-top:14px;
        padding-top:14px;

        border-top:1px solid #e2e8f0;
    }

    .mobile-client-card.expanded
    .mobile-client-card-body{
        display:block;
    }

    .clients-search-empty{
        grid-column:1 / -1;
    }

    /* =====================================
       KLIENCI — NAPRAWA STRUKTURY I KLIKANIA
       ===================================== */

    #clients .clients-search-row{
        position:relative;
        z-index:20;
    }

    #clients .clients-search-box{
        position:relative;
        z-index:1;
        min-width:0;
    }

    #clients #clients-search-clear{
        position:relative;
        z-index:50;

        pointer-events:auto !important;
        touch-action:manipulation;

        flex:0 0 48px;
    }

    #clients #clients-search-clear i{
        pointer-events:none !important;
    }

    #clients .clients-desktop-table{
        display:none !important;
    }

    #clients .mobile-clients-list{
        display:grid !important;
        grid-template-columns:1fr;
        gap:14px;
        margin-top:14px;
    }

    #clients .clients-add-button{
        width:100%;
        min-height:48px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:8px;
    }

    /* =====================================
       SZCZEGÓŁY KLIENTA — ZAKŁADKI MOBILNE
       ===================================== */

    #client-details-modal .modal-box{
        width:100% !important;
        max-width:100vw !important;
        max-height:94dvh !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

    #client-details-modal .client-details-tabs{
        width:100%;

        display:flex;
        flex-wrap:nowrap;
        gap:8px;

        overflow-x:auto;
        overflow-y:hidden;

        margin:0 0 14px 0;
        padding:4px 0 8px 0;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:thin;
    }

    #client-details-modal
    .client-details-tabs button{
        flex:0 0 auto;

        min-height:44px;
        margin:0;

        white-space:nowrap;
    }

    #client-details-modal .client-tab-content{
        width:100%;
        min-width:0;
        max-width:100%;

        overflow-x:auto;
        overflow-y:visible;

        padding-bottom:20px;

        -webkit-overflow-scrolling:touch;
    }

    #client-details-modal
    .client-tab-content table{
        min-width:720px;
    }

    #client-details-modal .client-command-hero{
        flex-direction:column;
        align-items:stretch;
    }

    #client-details-modal
    .client-command-main-actions{
        width:100%;

        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    #client-details-modal
    .client-command-main-actions button{
        width:100%;
        min-width:0;
        min-height:48px;

        margin:0;
        white-space:normal;
    }

    #client-details-modal .details-grid,
    #client-details-modal .client-overview-panels,
    #client-details-modal .client-mini-summary-grid{
        grid-template-columns:1fr !important;
    }
 
    /* =====================================
       SZCZEGÓŁY KLIENTA — NOWY UKŁAD MOBILNY
       ===================================== */

    #client-details-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #client-details-modal .modal-box,
    #client-details-modal .form-modal{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            0
            14px
            calc(18px + env(safe-area-inset-bottom))
            14px !important;

        border-radius:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }


    /* Górny nagłówek okna */

    #client-details-modal .app-modal-header{
        position:sticky;
        top:0;
        z-index:30;

        margin:
            0
            -14px
            14px
            -14px;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            12px
            14px;

        background:rgba(255,255,255,0.98);
        border-bottom:1px solid #e2e8f0;

        backdrop-filter:blur(10px);
    }

    #client-details-modal .app-modal-header h2{
        margin:0;
        font-size:21px;
        line-height:1.2;
    }

    #client-details-modal .app-modal-close{
        width:44px;
        min-width:44px;
        height:44px;
        min-height:44px;
    }


    /* Główna karta klienta */

    #client-details-modal .client-command-hero{
        display:block !important;

        margin-bottom:12px !important;
        padding:14px !important;

        border-radius:18px !important;
    }

    #client-details-modal .client-command-kicker{
        margin-bottom:8px;
        padding:6px 9px;

        font-size:10px;
    }

    #client-details-modal .client-command-hero h2{
        margin-bottom:4px;
        font-size:22px !important;
    }

    #client-details-modal .client-command-hero p{
        font-size:13px;
        line-height:1.4;
    }


    /* Cztery główne przyciski */

    #client-details-modal
    .client-command-main-actions{
        width:100%;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;

        margin-top:14px;
    }

    #client-details-modal
    .client-command-main-actions button{
        width:100% !important;
        min-width:0 !important;

        height:auto !important;
        min-height:48px !important;

        margin:0 !important;
        padding:8px 9px !important;

        border-radius:13px !important;

        font-size:13px !important;
        line-height:1.25;

        white-space:normal !important;
    }


    /* Mobilny wybór sekcji */

    /* =====================================
       SZCZEGÓŁY KLIENTA — WYBÓR SEKCJI
       ===================================== */

    #client-details-modal
    .client-mobile-section-picker{
        display:block !important;

        position:sticky;
        top:69px;
        z-index:25;

        margin:
            0
            0
            14px
            0;

        padding:8px 0;

        background:rgba(255,255,255,0.96);
        backdrop-filter:blur(10px);
    }

    #client-details-modal
    .client-mobile-section-control{
        position:relative;

        width:100%;
        min-height:64px;

        display:grid;
        grid-template-columns:42px minmax(0, 1fr) 32px;
        align-items:center;
        gap:10px;

        padding:8px 10px;

        background:
            linear-gradient(
                135deg,
                #eff6ff,
                #f8fafc
            );

        border:1px solid #bfdbfe;
        border-radius:17px;

        box-shadow:
            0 5px 16px rgba(37,99,235,0.09);
    }

    #client-details-modal
    .client-mobile-section-icon{
        width:42px;
        height:42px;

        display:flex;
        align-items:center;
        justify-content:center;

        border-radius:13px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        color:#ffffff;
        font-size:17px;

        box-shadow:
            0 5px 12px rgba(37,99,235,0.22);
    }

    #client-details-modal
    .client-mobile-section-field{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:2px;
    }

    #client-details-modal
    .client-mobile-section-field label{
        margin:0;

        color:#64748b;

        font-size:10px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.07em;

        pointer-events:none;
    }

    #client-details-modal
    .client-mobile-section-field select{
        width:100%;
        min-width:0;
        min-height:34px;

        margin:0;
        padding:0 30px 0 0;

        border:none;
        border-radius:0;

        outline:none;
        appearance:none;
        -webkit-appearance:none;

        background:transparent;
        color:#0f172a;

        font-size:16px;
        line-height:1.3;
        font-weight:900;

        box-shadow:none;

        cursor:pointer;
    }

    #client-details-modal
    .client-mobile-section-field select:focus{
        outline:none;
        box-shadow:none;
    }

    #client-details-modal
    .client-mobile-section-chevron{
        position:relative;
        z-index:1;

        color:#2563eb;
        font-size:14px;

        pointer-events:none;
    }

    #client-details-modal
    .client-mobile-section-picker label{
        display:block;

        margin-bottom:6px;

        color:#475569;

        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #client-details-modal
    .client-mobile-section-picker select{
        width:100%;
        min-height:48px;

        margin:0;
        padding:10px 12px;

        border:1px solid #cbd5e1;
        border-radius:12px;

        background:#ffffff;
        color:#0f172a;

        font-size:16px;
        font-weight:800;
    }

    /*
    Na telefonie nie używamy już ciasnego,
    poziomego paska zakładek.
    */
    #client-details-modal .client-details-tabs{
        display:none !important;
    }


    /* Zawartość sekcji */

    #client-details-modal .client-tab-content{
        width:100%;
        min-width:0;
        max-width:100%;

        padding-bottom:20px;

        overflow:visible !important;
    }

    #client-details-modal .client-tab-header{
        display:block !important;

        margin-bottom:10px !important;
        padding:12px !important;

        border-radius:16px !important;
    }

    #client-details-modal .client-tab-header h3{
        margin-bottom:4px;
        font-size:17px;
        line-height:1.3;
    }

    #client-details-modal .client-tab-header p{
        font-size:13px;
        line-height:1.4;
    }

    #client-details-modal
    .client-tab-header button{
        width:100%;

        margin-top:10px;

        justify-content:center;
    }


    /* =====================================
       SZCZEGÓŁY KLIENTA — PODSUMOWANIE
       ===================================== */

    #client-details-modal
    #client-tab-overview{
        width:100%;
        min-width:0;
    }


    /* Dane podstawowe klienta */

    #client-details-modal
    #client-tab-overview
    .details-grid{
        width:100%;

        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;

        gap:10px;

        margin:0 0 14px 0;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid > div{
        position:relative;

        width:100%;
        min-width:0;
        min-height:86px;

        display:flex;
        flex-direction:column;
        justify-content:center;
        gap:6px;

        padding:14px;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f8fafc
            );

        border:1px solid #dbe5f2;
        border-radius:17px;

        box-shadow:
            0 5px 14px rgba(15,23,42,0.05);
    }

    /*
    Nazwa, email, adres i osoba kontaktowa
    zajmują całą szerokość.
    */
    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(1),

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(3),

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(5),

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(6){
        grid-column:1 / -1;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(1){
        background:
            linear-gradient(
                145deg,
                #eff6ff,
                #ffffff
            );

        border-color:#bfdbfe;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid label{
        display:block;

        margin:0;

        color:#64748b;

        font-size:10px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.07em;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid p{
        width:100%;
        min-width:0;

        margin:0;
        padding:0;

        color:#0f172a;

        font-size:15px;
        line-height:1.4;
        font-weight:800;

        border:none;

        word-break:break-word;
        overflow-wrap:anywhere;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(1) p{
        color:#1e3a8a;
        font-size:18px;
    }


    /* Skróty do pozostałych sekcji */

    #client-details-modal
    .client-overview-panels{
        width:100%;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px;

        margin:0;
    }

    #client-details-modal
    .client-overview-panels button{
        position:relative;

        width:100%;
        min-width:0;
        min-height:72px;

        display:grid;
        grid-template-columns:44px minmax(0, 1fr) 22px;
        align-items:center;
        gap:11px;

        margin:0;
        padding:11px 12px;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f8fafc
            );

        border:1px solid #dbe5f2;
        border-radius:17px;

        box-shadow:
            0 4px 13px rgba(15,23,42,0.05);

        text-align:left;
    }

    #client-details-modal
    .client-overview-panels button::after{
        content:"›";

        display:flex;
        align-items:center;
        justify-content:center;

        color:#2563eb;

        font-size:26px;
        line-height:1;
        font-weight:700;
    }

    #client-details-modal
    .client-overview-panels button:active{
        transform:scale(0.99);
    }

    #client-details-modal
    .client-overview-panels button > i{
        width:44px;
        height:44px;
        min-width:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        margin:0;

        border-radius:14px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        color:#ffffff;

        font-size:17px;

        box-shadow:
            0 5px 12px rgba(37,99,235,0.2);
    }

    #client-details-modal
    .client-overview-panels button span{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }

    #client-details-modal
    .client-overview-panels button strong{
        color:#0f172a;

        font-size:15px;
        line-height:1.25;
    }

    #client-details-modal
    .client-overview-panels button small{
        color:#64748b;

        font-size:12px;
        line-height:1.3;

        word-break:break-word;
    }

    #client-details-modal
    .client-overview-panels button:nth-child(2){
        background:
            linear-gradient(
                145deg,
                #f0fdf4,
                #ffffff
            );

        border-color:#bbf7d0;
    }

    #client-details-modal
    .client-overview-panels button:nth-child(2) > i{
        background:
            linear-gradient(
                135deg,
                #16a34a,
                #15803d
            );
    }

    #client-details-modal
    .client-overview-panels button:nth-child(3){
        background:
            linear-gradient(
                145deg,
                #fffbeb,
                #ffffff
            );

        border-color:#fde68a;
    }

    #client-details-modal
    .client-overview-panels button:nth-child(3) > i{
        background:
            linear-gradient(
                135deg,
                #f59e0b,
                #d97706
            );
    }

    #client-details-modal
    .client-overview-panels button:nth-child(4){
        background:
            linear-gradient(
                145deg,
                #f5f3ff,
                #ffffff
            );

        border-color:#ddd6fe;
    }

    #client-details-modal
    .client-overview-panels button:nth-child(4) > i{
        background:
            linear-gradient(
                135deg,
                #7c3aed,
                #6d28d9
            );
    }

    /* Podsumowanie finansów */

    #client-details-modal
    .client-mini-summary-grid{
        grid-template-columns:
            repeat(3, minmax(0, 1fr))
            !important;

        gap:7px;
    }

    #client-details-modal
    .client-mini-summary-grid div{
        min-width:0;

        padding:10px 6px;

        border-radius:14px;

        text-align:center;
    }

    #client-details-modal
    .client-mini-summary-grid span{
        margin-bottom:5px;

        font-size:9px;
        line-height:1.2;
    }

    #client-details-modal
    .client-mini-summary-grid strong{
        font-size:14px;
        line-height:1.2;
        word-break:break-word;
    }


    /* =====================================
       TABELE KLIENTA JAKO KARTY
       ===================================== */

    #client-details-modal
    .client-tab-content table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        border:none !important;
        background:transparent !important;
        box-shadow:none !important;
    }

    #client-details-modal
    .client-tab-content thead{
        display:none !important;
    }

    #client-details-modal
    .client-tab-content tbody{
        display:block !important;
        width:100% !important;
    }

    #client-details-modal
    .client-tab-content tbody tr{
        display:block !important;

        width:100% !important;

        margin:0 0 10px 0;
        padding:12px;

        background:#ffffff;
        border:1px solid #e2e8f0;
        border-radius:16px;

        box-shadow:
            0 4px 12px rgba(15,23,42,0.05);
    }

    #client-details-modal
    .client-tab-content tbody td{
        display:grid !important;
        grid-template-columns:
            100px
            minmax(0, 1fr);

        gap:10px;
        align-items:start;

        width:100% !important;

        padding:8px 0 !important;

        border:none !important;
        border-bottom:1px solid #eef2f7 !important;

        white-space:normal !important;
        text-align:left !important;

        font-size:13px;
        line-height:1.4;

        word-break:break-word;
    }

    #client-details-modal
    .client-tab-content tbody td::before{
        color:#64748b;

        font-size:10px;
        font-weight:900;
        line-height:1.3;

        text-transform:uppercase;
        letter-spacing:0.04em;
    }

    #client-details-modal
    .client-tab-content tbody td:last-child{
        border-bottom:none !important;
    }

    #client-details-modal
    .client-tab-content tbody td[colspan]{
        display:block !important;

        padding:18px 8px !important;

        border:none !important;

        text-align:center !important;
        color:#64748b;
    }

    #client-details-modal
    .client-tab-content tbody td[colspan]::before{
        display:none;
    }


    /* Przyciski akcji w kartach */

    #client-details-modal
    td.client-command-actions{
        display:flex !important;
        align-items:center;
        gap:8px;

        width:100% !important;
        text-align:left !important;
    }

    #client-details-modal
    td.client-command-actions::before{
        content:"Akcje";

        flex:0 0 92px;

        color:#64748b;

        font-size:10px;
        font-weight:900;
        text-transform:uppercase;
    }

    #client-details-modal
    td.client-command-actions button{
        width:42px;
        min-width:42px;
        height:42px;
        min-height:42px;

        margin:0;
    }


    /* Projekty */

    #client-details-projects-table
    td:nth-child(1)::before{
        content:"Numer";
    }

    #client-details-projects-table
    td:nth-child(2)::before{
        content:"Nazwa";
    }

    #client-details-projects-table
    td:nth-child(3)::before{
        content:"Kod";
    }

    #client-details-projects-table
    td:nth-child(4)::before{
        content:"Status";
    }

    #client-details-projects-table
    td:nth-child(5)::before{
        content:"Oferta";
    }

    #client-details-projects-table
    td:nth-child(6)::before{
        content:"Sprzedaż";
    }


    /* Finanse */

    #client-details-payments-table
    td:nth-child(1)::before{
        content:"Faktura";
    }

    #client-details-payments-table
    td:nth-child(2)::before{
        content:"Projekt";
    }

    #client-details-payments-table
    td:nth-child(3)::before{
        content:"Kwota";
    }

    #client-details-payments-table
    td:nth-child(4)::before{
        content:"Termin";
    }

    #client-details-payments-table
    td:nth-child(5)::before{
        content:"Status";
    }


    /* Reklamacje */

    #client-details-complaints-table
    td:nth-child(1)::before{
        content:"Projekt";
    }

    #client-details-complaints-table
    td:nth-child(2)::before{
        content:"Opis";
    }

    #client-details-complaints-table
    td:nth-child(3)::before{
        content:"Zgłoszenie";
    }

    #client-details-complaints-table
    td:nth-child(4)::before{
        content:"Termin";
    }

    #client-details-complaints-table
    td:nth-child(5)::before{
        content:"Status";
    }

    #client-details-complaints-table
    td:nth-child(6)::before{
        content:"Koszt";
    }


    /* Kontakty */

    #client-details-contacts-table
    td:nth-child(1)::before{
        content:"Osoba";
    }

    #client-details-contacts-table
    td:nth-child(2)::before{
        content:"Telefon";
    }

    #client-details-contacts-table
    td:nth-child(3)::before{
        content:"Email";
    }

    #client-details-contacts-table
    td:nth-child(4)::before{
        content:"Stanowisko";
    }

    #client-details-contacts-table
    td:nth-child(5)::before{
        content:"Uwagi";
    }


    /* Poczta */

    #client-mail-table
    td:nth-child(1)::before{
        content:"Data";
    }

    #client-mail-table
    td:nth-child(2)::before{
        content:"Od / do";
    }

    #client-mail-table
    td:nth-child(3)::before{
        content:"Temat";
    }

    #client-mail-table
    td:nth-child(4)::before{
        content:"Projekt";
    }

    #client-mail-table
    td:nth-child(5)::before{
        content:"Status";
    }

    #client-mail-table
    td:nth-child(6)::before{
        content:"Akcje";
    }

    #client-details-modal .client-mail-layout{
        grid-template-columns:1fr !important;
    }

    #client-details-modal .client-mail-preview{
        min-height:180px;
    }    
    /* =====================================
       START — ŚRODEK WYKRESU PROJEKTÓW
       ===================================== */

    #dashboard
    .dashboard-top-layout
    .dashboard-chart-canvas-wrap{
        position:relative;

        width:230px !important;
        min-width:230px !important;
        max-width:230px !important;

        height:230px !important;
        min-height:230px !important;
        max-height:230px !important;

        margin:0 auto !important;
    }

    #dashboard
    .dashboard-top-layout
    .dashboard-chart-canvas-wrap canvas{
        display:block;

        width:230px !important;
        height:230px !important;

        margin:0 !important;
    }

    #dashboard
    .dashboard-top-layout
    .dashboard-chart-center{
        position:absolute;

        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:230px !important;
        height:230px !important;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        margin:0 !important;
        padding:0 !important;

        text-align:center;
        transform:none !important;
    }

    #dashboard
    .dashboard-chart-center strong,
    #dashboard
    .dashboard-chart-center span{
        width:100%;
        margin-left:0 !important;
        margin-right:0 !important;

        text-align:center;
    }
    /* =====================================
       SZCZEGÓŁY KLIENTA — WIDOCZNOŚĆ SEKCJI
       ===================================== */

    #client-details-modal
    .client-tab-content[hidden]{
        display:none !important;
        visibility:hidden !important;
        opacity:0 !important;
    }

    #client-details-modal
    .client-tab-content:not([hidden]){
        display:block !important;
        visibility:visible !important;
        opacity:1 !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }
    /* =====================================
       PODSUMOWANIE KLIENTA — PEŁNE KARTY
       ===================================== */

    #client-details-modal
    #client-tab-overview
    .details-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;

        width:100% !important;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid > div{
        grid-column:1 / -1 !important;

        width:100% !important;
        min-width:0 !important;
        min-height:88px !important;

        display:grid !important;
        grid-template-columns:48px minmax(0, 1fr) !important;
        grid-template-rows:auto auto !important;
        column-gap:12px !important;
        row-gap:4px !important;

        align-items:center !important;

        padding:14px !important;

        background:
            linear-gradient(
                145deg,
                #ffffff,
                #f8fafc
            ) !important;

        border:1px solid #dbe5f2 !important;
        border-radius:17px !important;

        box-shadow:
            0 5px 14px rgba(15,23,42,0.05)
            !important;
    }


    /* Wspólny wygląd ikon */

    #client-details-modal
    #client-tab-overview
    .details-grid > div::before{
        grid-column:1 !important;
        grid-row:1 / 3 !important;

        width:46px;
        height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        border-radius:14px;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        color:#ffffff;

        font-family:"Font Awesome 6 Free";
        font-size:18px;
        font-weight:900;

        box-shadow:
            0 5px 12px rgba(37,99,235,0.20);
    }


    /* Etykiety i wartości */

    #client-details-modal
    #client-tab-overview
    .details-grid label{
        grid-column:2 !important;
        grid-row:1 !important;

        align-self:end;

        margin:0 !important;

        color:#64748b;

        font-size:10px !important;
        line-height:1.2 !important;
        font-weight:900 !important;

        text-transform:uppercase;
        letter-spacing:0.07em;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid p{
        grid-column:2 !important;
        grid-row:2 !important;

        align-self:start;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        border:none !important;
        background:transparent !important;

        color:#0f172a !important;

        font-size:15px !important;
        line-height:1.4 !important;
        font-weight:800 !important;

        word-break:break-word;
        overflow-wrap:anywhere;
    }


    /* 1 — Nazwa klienta */

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(1)::before{
        content:"\f1ad";
    }

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(1){
        background:
            linear-gradient(
                145deg,
                #eff6ff,
                #ffffff
            ) !important;

        border-color:#bfdbfe !important;
    }

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(1) p{
        color:#1e3a8a !important;
        font-size:18px !important;
    }


    /* 2 — NIP */

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(2)::before{
        content:"\f2c2";
    }


    /* 3 — Email */

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(3)::before{
        content:"\f0e0";
    }


    /* 4 — Telefon */

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(4)::before{
        content:"\f095";
    }


    /* 5 — Adres */

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(5)::before{
        content:"\f3c5";
    }


    /* 6 — Osoba kontaktowa */

    #client-details-modal
    #client-tab-overview
    .details-grid > div:nth-child(6)::before{
        content:"\f508";
    }
    /* =====================================
       KLIENCI — NAJPIERW ROZWIŃ KARTĘ
       ===================================== */

    .mobile-client-card{
        cursor:default;
    }

    .mobile-client-card-top.mobile-client-expand-button{
        width:100%;
        min-width:0;
        min-height:58px;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        margin:0;
        padding:0;

        border:none;
        border-radius:0;

        background:transparent;
        color:inherit;

        text-align:left;
        cursor:pointer;
    }

    .mobile-client-card-top.mobile-client-expand-button:hover,
    .mobile-client-card-top.mobile-client-expand-button:active{
        background:transparent;
        transform:none;
    }

    .mobile-client-expand-tools{
        flex:0 0 auto;

        display:flex;
        align-items:center;
        gap:10px;
    }

    .mobile-client-card-top
    .mobile-client-chevron{
        color:#2563eb;
    }
    /* =====================================
       SZCZZEGÓŁY KLIENTA — PRZYCISKI AKCJI
       ===================================== */

    #client-details-modal
    .client-tab-content
    tbody
    td.client-command-actions{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:8px !important;

        width:100% !important;

        padding:10px 0 !important;

        border-bottom:none !important;
    }

    #client-details-modal
    .client-tab-content
    tbody
    td.client-command-actions::before{
        content:"Akcje";

        flex:0 0 100px;

        color:#64748b;

        font-size:10px;
        line-height:1.3;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.04em;
    }

    #client-details-modal
    .client-tab-content
    tbody
    td.client-command-actions button{
        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        min-height:44px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;
        padding:0 !important;

        border:none !important;
        border-radius:13px !important;

        background:#2563eb !important;
        color:#ffffff !important;

        font-size:15px !important;

        box-shadow:
            0 4px 10px rgba(37,99,235,0.18);
    }

    #client-details-modal
    .client-tab-content
    tbody
    td.client-command-actions button:nth-of-type(2){
        background:#eef2ff !important;
        color:#4338ca !important;

        box-shadow:none;
    }

    #client-details-modal
    .client-tab-content
    tbody
    td.client-command-actions button:active{
        transform:scale(0.96);
    }
    
}

/* =========================================
   EDYCJA PROJEKTU — WERSJA MOBILNA
   ========================================= */

@media(max-width:768px){

    /*
    Całe okno edycji zajmuje ekran telefonu.
    */
    #project-modal{
        align-items:stretch;
        padding:0;
        overflow:hidden;
    }

    #project-modal .project-modal-box{
        width:100vw;
        max-width:100vw;

        height:100dvh;
        max-height:100dvh;

        margin:0;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            0
            14px;

        display:flex;
        flex-direction:column;
        gap:0;

        overflow:hidden;

        border-radius:0;
    }

    /*
    Nagłówek pozostaje nad przewijaną zawartością.
    */
    #project-modal .app-modal-header{
        flex:0 0 auto;

        margin:0;
        padding:0 0 12px 0;

        background:#ffffff;
    }

    #project-modal .app-modal-header h2{
        min-width:0;

        font-size:20px;
        line-height:1.25;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    /*
    Pasek zakładek przewijany palcem w bok.
    */
#project-modal .project-edit-tabs{
    flex:0 0 auto;

    width:auto;
    min-height:0;

    margin:0 -14px;
    padding:10px 14px;

    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:8px;

    overflow:visible;

    background:#f8fafc;
    border-top:1px solid #e2e8f0;
    border-bottom:1px solid #cbd5e1;
}

#project-modal .project-edit-tabs button{
    /*
    Każdy przycisk ma rozsądną minimalną szerokość,
    ale może się rozszerzyć, aby wypełnić wolne miejsce.

    Dzięki temu:
    - pierwszy rząd zawsze wypełni całą szerokość,
    - ostatni rząd również wypełni całą szerokość,
    - liczba przycisków w rzędzie dobierze się automatycznie.
    */
    flex:1 1 105px;

    width:auto;
    min-width:105px;
    min-height:44px;

    margin:0;
    padding:9px 8px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:1px solid #cbd5e1;
    border-radius:12px;

    background:#e2e8f0;
    color:#334155;

    font-size:13px;
    line-height:1.2;
    font-weight:800;

    text-align:center;
    white-space:normal;
}

    #project-modal .project-edit-tabs button.active-tab{
        top:0;

        background:#2563eb;
        border-color:#2563eb;
        color:#ffffff;

        box-shadow:0 4px 10px rgba(37,99,235,0.22);
    }

    /*
    Przewijana jest tylko zawartość aktywnej zakładki.
    Nagłówek, zakładki i dolne przyciski zostają na ekranie.
    */
    #project-modal .project-tab-content{
        flex:1 1 auto;

        width:100%;
        min-width:0;
        min-height:0;

        padding:16px 2px 26px 2px;

        overflow-y:auto;
        overflow-x:auto;

        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    #project-modal .project-tab-content label{
        flex:0 0 auto;
    }

    #project-modal .project-tab-content input,
    #project-modal .project-tab-content select,
    #project-modal .project-tab-content textarea{
        flex:0 0 auto;
        width:100%;
        max-width:100%;
    }

    /*
    Górne paski wewnątrz zakładek,
    np. Dodaj zasób lub Dodaj zadanie.
    */
    #project-modal .project-tab-content .topbar{
        flex:0 0 auto;

        width:100%;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;
    }

    #project-modal .project-tab-content .topbar h2{
        margin:0;
        font-size:19px;
    }

    #project-modal .project-tab-content .topbar button{
        width:100%;
        margin:0;
        justify-content:center;
    }

    /*
    Tabele nie rozszerzają całego okna.
    Można je przesuwać palcem wewnątrz zakładki.
    */
    #project-modal .project-tab-content table{
        flex:0 0 auto;

        min-width:680px;
        margin-top:12px;
    }

    #project-modal .offer-revisions-panel{
        width:100%;
        min-width:0;
    }

    #project-modal .offer-revisions-header{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    #project-modal .offer-revisions-header button{
        width:100%;
        justify-content:center;
    }

    /*
    Podsumowanie zakresów układamy pionowo.
    */
    #project-modal .project-scopes-summary{
        grid-template-columns:1fr !important;
        gap:10px;
    }

    #project-modal .project-scopes-summary .card{
        padding:14px;
    }

    /*
    Przyciski zawsze pozostają na dole.
    */
    #project-modal .project-edit-actions{
        flex:0 0 auto;

        position:static;

        width:auto;

        margin:0 -14px;
        padding:
            12px
            14px
            calc(12px + env(safe-area-inset-bottom))
            14px;

        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        background:#ffffff;
        border-top:1px solid #cbd5e1;

        box-shadow:0 -8px 20px rgba(15,23,42,0.10);

        z-index:5;
    }

    #project-modal .project-edit-actions button{
        width:100%;
        min-width:0;
        min-height:48px;

        margin:0;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
    }

    #project-modal .project-cancel-button{
        background:#e2e8f0;
        color:#334155;
    }

    #project-modal .project-save-button{
        background:linear-gradient(135deg, #2563eb, #1d4ed8);
        color:#ffffff;
    }
}

/* =========================================
   SZCZEGÓŁY PROJEKTU — MOBILNE ZAKŁADKI
   ========================================= */

@media(max-width:768px){

    /*
    Zakładki układają się w kilku rzędach.
    Nie trzeba ich przesuwać palcem na boki.
    */
    #project-details-modal .project-process-tabs{
        flex:0 0 auto !important;

        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;

        margin:0 0 14px 0 !important;
        padding:10px !important;

        overflow:visible !important;

        background:#f8fafc !important;
        border:1px solid #dbe3ef !important;
        border-radius:16px !important;

        box-sizing:border-box !important;
    }

    /*
    Przyciski automatycznie dzielą szerokość rzędu.

    Jeżeli w rzędzie są dwa przyciski,
    każdy zajmie połowę szerokości.

    Jeżeli w ostatnim rzędzie zostanie jeden,
    zajmie całą szerokość.
    */
    #project-details-modal .project-process-tabs button{
        flex:1 1 135px !important;

        width:auto !important;
        min-width:135px !important;
        min-height:52px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;

        margin:0 !important;
        padding:10px 8px !important;

        border:1px solid #cbd5e1 !important;
        border-radius:12px !important;

        background:#e2e8f0 !important;
        color:#334155 !important;

        font-size:13px !important;
        line-height:1.25 !important;
        font-weight:800 !important;

        text-align:center !important;
        white-space:normal !important;

        box-shadow:none !important;
    }

    /*
    Ikona pozostaje obok tekstu i nie zmniejsza się.
    */
    #project-details-modal .project-process-tabs button i{
        flex:0 0 auto !important;

        margin:0 !important;

        font-size:15px !important;
    }

    /*
    Wybrana zakładka.
    */
    #project-details-modal .project-process-tabs button.active-tab{
        top:0 !important;

        background:linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

        border-color:#2563eb !important;
        color:#ffffff !important;

        box-shadow:
            0 5px 12px rgba(37,99,235,0.24) !important;
    }

    #project-details-modal .project-process-tabs button:active{
        transform:scale(0.98) !important;
    }
}

/* =========================================
   SZCZEGÓŁY PROJEKTU — MOBILNE TABELE
   ========================================= */

@media(max-width:768px){

    /*
    Żadna sekcja szczegółów nie może
    rozszerzać całego ekranu na boki.
    */
    #project-details-modal .details-tab-content,
    #project-details-modal .project-details-group,
    #project-details-modal .project-details-group-body{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    #project-details-modal .project-details-group-body{
        padding:14px !important;
        overflow:visible !important;
    }

    /*
    Po zwinięciu sekcji treść nadal
    musi być prawidłowo schowana.
    */
    #project-details-modal
    .project-details-group.collapsed
    .project-details-group-body{
        overflow:hidden !important;
    }

    /*
    Wyłączamy wygląd klasycznej tabeli.
    */
    #project-details-modal
    table.project-details-mobile-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:14px 0 0 0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    /*
    Nagłówki nie są już potrzebne nad tabelą,
    ponieważ nazwa każdej kolumny pojawi się
    bezpośrednio w karcie.
    */
    #project-details-modal
    table.project-details-mobile-table thead{
        display:none !important;
    }

    #project-details-modal
    table.project-details-mobile-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    /*
    Każdy wiersz tabeli staje się kartą.
    */
    #project-details-modal
    table.project-details-mobile-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;

        animation:none !important;
    }

    /*
    Każda komórka zajmuje całą szerokość.
    */
    #project-details-modal
    table.project-details-mobile-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:10px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #project-details-modal
    table.project-details-mobile-table tbody td:last-child{
        border-bottom:none !important;
    }

    /*
    Nazwa kolumny nad wartością.
    Na przykład:
    Termin płatności
    20.07.2026
    */
    #project-details-modal
    table.project-details-mobile-table tbody td::before{
        content:attr(data-label);

        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:11px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    /*
    Kwoty, statusy i inne elementy HTML
    również muszą mieścić się w karcie.
    */
    #project-details-modal
    table.project-details-mobile-table tbody td strong,
    #project-details-modal
    table.project-details-mobile-table tbody td small,
    #project-details-modal
    table.project-details-mobile-table tbody td span,
    #project-details-modal
    table.project-details-mobile-table tbody td a{
        max-width:100% !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    /*
    Pole Akcje ma własny układ.
    Wszystkie przyciski są pod ręką.
    */
    #project-details-modal
    table.project-details-mobile-table
    tbody td.project-mobile-actions-cell{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #project-details-modal
    table.project-details-mobile-table
    tbody td.project-mobile-actions-cell::before{
        flex:0 0 100% !important;

        margin:0 0 3px 0 !important;
    }

    /*
    Przyciski automatycznie dzielą szerokość.
    Ostatni rząd również zostaje wypełniony.
    */
    #project-details-modal
    table.project-details-mobile-table
    tbody td.project-mobile-actions-cell > button,
    #project-details-modal
    table.project-details-mobile-table
    tbody td.project-mobile-actions-cell > a{
        flex:1 1 120px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:9px 10px !important;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;

        text-align:center !important;
        white-space:normal !important;
    }

    /*
    Niektóre akcje są umieszczone
    w dodatkowym kontenerze.
    */
    #project-details-modal
    table.project-details-mobile-table
    tbody td.project-mobile-actions-cell
    > .table-icon-actions{
        flex:1 1 100% !important;

        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;
    }

    #project-details-modal
    table.project-details-mobile-table
    tbody td.project-mobile-actions-cell
    > .table-icon-actions button{
        flex:1 1 120px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    /*
    Komunikaty „Brak danych” pozostają
    prostą, czytelną kartą.
    */
    #project-details-modal
    table.project-details-mobile-table
    tbody tr.project-mobile-empty-row{
        border-left-color:#94a3b8 !important;

        text-align:center !important;
    }

    #project-details-modal
    table.project-details-mobile-table
    tbody tr.project-mobile-empty-row td{
        padding:18px 10px !important;

        border:none !important;

        color:#64748b !important;

        text-align:center !important;
    }

    #project-details-modal
    table.project-details-mobile-table
    tbody tr.project-mobile-empty-row td::before{
        display:none !important;
    }

    /*
    Kolory kart płatności.
    */
    #project-details-modal
    #project-finances-table
    tr.payment-paid{
        border-left-color:#16a34a !important;
    }

    #project-details-modal
    #project-finances-table
    tr.payment-overdue{
        border-left-color:#dc2626 !important;
    }

    #project-details-modal
    #project-finances-table
    tr.payment-soon{
        border-left-color:#f59e0b !important;
    }

    /*
    Poczta projektu również układa się
    w jednej kolumnie.
    */
    #project-details-modal .project-mail-layout{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;

        width:100% !important;
        min-width:0 !important;
    }

    #project-details-modal .project-mail-table-wrap{
        width:100% !important;
        min-width:0 !important;

        overflow:visible !important;
    }
}

/* =========================================
   PODGLĄD MAILA PROJEKTU — OSOBNE OKNO
   ========================================= */

.project-mail-layout{
    grid-template-columns:1fr !important;
}

.project-mail-table-wrap{
    width:100%;
    min-width:0;
}

.project-mail-reader-modal{
    z-index:100300 !important;
}

.project-mail-reader-box{
    width:min(920px, 94vw);
    max-width:94vw;

    height:auto;
    max-height:90vh;

    padding:0;

    display:flex;
    flex-direction:column;
    gap:0;

    overflow:hidden;

    background:#ffffff;
    border-radius:18px;
}

.project-mail-reader-header{
    flex:0 0 auto;

    margin:0;
    padding:16px 18px;

    background:#ffffff;
}

.project-mail-reader-header h2{
    margin:0;
    font-size:20px;
}

.project-mail-reader-scroll{
    flex:1 1 auto;

    min-height:0;

    padding:18px;

    overflow-y:auto;
    overflow-x:hidden;

    background:#f8fafc;

    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
}

.project-mail-reader-scroll #project-mail-preview{
    display:block !important;

    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;

    margin:0 !important;
}

body.project-mail-reader-open{
    overflow:hidden;
}

/* =========================================
   PODGLĄD MAILA — TELEFON
   ========================================= */

@media(max-width:768px){

    #project-mail-reader-modal{
        align-items:stretch;
        padding:0;
    }

    #project-mail-reader-modal
    .project-mail-reader-box{
        width:100vw;
        max-width:100vw;

        height:100dvh;
        max-height:100dvh;

        margin:0;
        padding:0;

        border-radius:0;
    }

    #project-mail-reader-modal
    .project-mail-reader-header{
        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            12px
            14px;
    }

    #project-mail-reader-modal
    .project-mail-reader-header h2{
        min-width:0;

        font-size:19px;
        line-height:1.25;
    }

    #project-mail-reader-modal
    .project-mail-reader-scroll{
        padding:
            14px
            12px
            calc(18px + env(safe-area-inset-bottom))
            12px;
    }
}


/* =========================================
   EDYCJA PROJEKTU — MOBILNE TABELE
   ========================================= */

@media(max-width:768px){

    /*
    Zakładki edycji nie mogą przewijać
    całej zawartości na boki.
    */
    #project-modal .project-tab-content{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow-x:hidden !important;
    }

    /*
    Usuwamy wcześniejsze minimalne
    szerokości klasycznych tabel.
    */
    #project-modal
    table.project-edit-mobile-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:14px 0 0 0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    /*
    Nazwy kolumn pokażą się przy wartościach,
    dlatego klasyczny nagłówek ukrywamy.
    */
    #project-modal
    table.project-edit-mobile-table thead{
        display:none !important;
    }

    #project-modal
    table.project-edit-mobile-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    /*
    Każdy wiersz staje się osobną kartą.
    */
    #project-modal
    table.project-edit-mobile-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;

        animation:none !important;
    }

    /*
    Każde pole karty zajmuje całą szerokość.
    */
    #project-modal
    table.project-edit-mobile-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:10px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #project-modal
    table.project-edit-mobile-table tbody td:last-child{
        border-bottom:none !important;
    }

    /*
    Nazwa kolumny nad wartością.
    */
    #project-modal
    table.project-edit-mobile-table tbody td::before{
        content:attr(data-label);

        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:11px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    /*
    Teksty, statusy i linki nie mogą
    wychodzić poza kartę.
    */
    #project-modal
    table.project-edit-mobile-table tbody td strong,
    #project-modal
    table.project-edit-mobile-table tbody td small,
    #project-modal
    table.project-edit-mobile-table tbody td span,
    #project-modal
    table.project-edit-mobile-table tbody td a{
        max-width:100% !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    /*
    Pola zawierające przyciski.
    Dotyczy również przycisków pracowników,
    zasobów i zależności w zadaniach.
    */
    #project-modal
    table.project-edit-mobile-table
    tbody td.project-edit-mobile-actions-cell{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #project-modal
    table.project-edit-mobile-table
    tbody td.project-edit-mobile-actions-cell::before{
        flex:0 0 100% !important;

        margin:0 0 3px 0 !important;
    }

    /*
    Każdy rząd przycisków wypełnia
    całą dostępną szerokość.
    */
    #project-modal
    table.project-edit-mobile-table
    tbody td.project-edit-mobile-actions-cell button,
    #project-modal
    table.project-edit-mobile-table
    tbody td.project-edit-mobile-actions-cell a{
        flex:1 1 120px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:9px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        text-align:center !important;
        white-space:normal !important;
    }

    /*
    Obsługa dodatkowych kontenerów przycisków.
    */
    #project-modal
    table.project-edit-mobile-table
    tbody td.project-edit-mobile-actions-cell
    .table-icon-actions{
        flex:1 1 100% !important;

        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;
    }

    #project-modal
    table.project-edit-mobile-table
    tbody td.project-edit-mobile-actions-cell
    .table-icon-actions button{
        flex:1 1 120px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
    }

    /*
    Komunikaty „Brak danych”.
    */
    #project-modal
    table.project-edit-mobile-table
    tbody tr.project-edit-mobile-empty-row{
        border-left-color:#94a3b8 !important;

        text-align:center !important;
    }

    #project-modal
    table.project-edit-mobile-table
    tbody tr.project-edit-mobile-empty-row td{
        padding:18px 10px !important;

        border:none !important;

        color:#64748b !important;

        text-align:center !important;
    }

    #project-modal
    table.project-edit-mobile-table
    tbody tr.project-edit-mobile-empty-row td::before{
        display:none !important;
    }
}

/* =========================================
   PODGLĄD MAILA — ZAWSZE NAD PROJEKTEM
   ========================================= */

@media(max-width:768px){

    #project-mail-reader-modal{
        position:fixed !important;

        inset:0 !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        display:none;

        align-items:stretch !important;
        justify-content:stretch !important;

        /*
        Bardzo wysoka wartość zapewnia,
        że mail jest nad Szczegółami projektu
        i nad innymi modalami.
        */
        z-index:2147483000 !important;

        background:rgba(15,23,42,0.65) !important;

        isolation:isolate;
    }

    #project-mail-reader-modal[style*="display: flex"]{
        display:flex !important;
    }

    #project-mail-reader-modal
    .project-mail-reader-box{
        position:relative !important;
        z-index:1 !important;

        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        background:#ffffff !important;
        border-radius:0 !important;
    }

    /*
    Ukrywamy również ewentualny stary X
    za pomocą CSS. Zostaje wyłącznie X
    w nagłówku nowego modala.
    */
    #project-mail-reader-modal
    #project-mail-preview
    .project-mail-preview-close,

    #project-mail-reader-modal
    #project-mail-preview
    .mail-preview-close,

    #project-mail-reader-modal
    #project-mail-preview
    .app-modal-close,

    #project-mail-reader-modal
    #project-mail-preview
    button[onclick*="closeMail"],

    #project-mail-reader-modal
    #project-mail-preview
    button[onclick*="closeProjectMail"]{
        display:none !important;
    }
}

/* =========================================
   ZADANIE — PRACOWNICY I ZASOBY MOBILNIE
   ========================================= */

@media(max-width:768px){

    /*
    Oba okna zajmują cały ekran telefonu.
    */
    #project-task-employees-modal,
    #project-task-resources-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #project-task-employees-modal .modal-box,
    #project-task-resources-modal .modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:
            calc(14px + env(safe-area-inset-top))
            14px
            calc(18px + env(safe-area-inset-bottom))
            14px !important;

        border-radius:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        -webkit-overflow-scrolling:touch;
    }

    /*
    Nagłówek okna.
    */
    #project-task-employees-modal .topbar,
    #project-task-resources-modal .topbar{
        width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;

        margin-bottom:14px !important;
    }

    #project-task-employees-modal .topbar h2,
    #project-task-resources-modal .topbar h2{
        flex:1;
        min-width:0;

        margin:0 !important;

        font-size:19px !important;
        line-height:1.3 !important;

        overflow-wrap:anywhere;
    }

    #project-task-employees-modal .topbar button,
    #project-task-resources-modal .topbar button{
        flex:0 0 auto;

        width:auto !important;
        min-width:88px !important;

        margin:0 !important;
        padding:9px 12px !important;
    }

    /*
    Klasyczna tabela zostaje zamieniona
    na listę pionowych kart.
    */
    #project-task-employees-modal table,
    #project-task-resources-modal table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:12px 0 18px 0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    /*
    Nagłówki tabeli ukrywamy.
    Nazwy pól pojawią się bezpośrednio w kartach.
    */
    #project-task-employees-modal table thead,
    #project-task-resources-modal table thead{
        display:none !important;
    }

    #project-task-employees-modal table tbody,
    #project-task-resources-modal table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    /*
    Każdy dodany pracownik lub zasób
    staje się osobną kartą.
    */
    #project-task-employees-modal table tbody tr,
    #project-task-resources-modal table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;

        animation:none !important;
    }

    /*
    Każda informacja zajmuje całą szerokość.
    */
    #project-task-employees-modal table tbody td,
    #project-task-resources-modal table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:9px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #project-task-employees-modal table tbody td:last-child,
    #project-task-resources-modal table tbody td:last-child{
        border-bottom:none !important;
    }

    /*
    Nazwy pól w kartach pracowników.
    */
    #project-task-employees-modal
    table tbody td:nth-child(1)::before{
        content:"Pracownik";
    }

    #project-task-employees-modal
    table tbody td:nth-child(2)::before{
        content:"Od";
    }

    #project-task-employees-modal
    table tbody td:nth-child(3)::before{
        content:"Do";
    }

    #project-task-employees-modal
    table tbody td:nth-child(4)::before{
        content:"Uwagi";
    }

    #project-task-employees-modal
    table tbody td:nth-child(5)::before{
        content:"Akcje";
    }

    /*
    Nazwy pól w kartach zasobów.
    */
    #project-task-resources-modal
    table tbody td:nth-child(1)::before{
        content:"Zasób";
    }

    #project-task-resources-modal
    table tbody td:nth-child(2)::before{
        content:"Od";
    }

    #project-task-resources-modal
    table tbody td:nth-child(3)::before{
        content:"Do";
    }

    #project-task-resources-modal
    table tbody td:nth-child(4)::before{
        content:"Uwagi";
    }

    #project-task-resources-modal
    table tbody td:nth-child(5)::before{
        content:"Akcje";
    }

    /*
    Wygląd nazw pól.
    */
    #project-task-employees-modal table tbody td::before,
    #project-task-resources-modal table tbody td::before{
        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:11px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    /*
    Komunikaty „Brak pracowników”
    i „Brak zasobów”.
    */
    #project-task-employees-modal
    table tbody td[colspan],

    #project-task-resources-modal
    table tbody td[colspan]{
        padding:18px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    #project-task-employees-modal
    table tbody td[colspan]::before,

    #project-task-resources-modal
    table tbody td[colspan]::before{
        display:none !important;
    }

    #project-task-employees-modal
    table tbody tr:has(td[colspan]),

    #project-task-resources-modal
    table tbody tr:has(td[colspan]){
        border-left-color:#94a3b8 !important;
    }

    /*
    Pole z przyciskami Edytuj i Usuń.
    */
    #project-task-employees-modal
    table tbody td:nth-child(5),

    #project-task-resources-modal
    table tbody td:nth-child(5){
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #project-task-employees-modal
    table tbody td:nth-child(5)::before,

    #project-task-resources-modal
    table tbody td:nth-child(5)::before{
        flex:0 0 100% !important;
        margin-bottom:2px !important;
    }

    /*
    Przyciski razem wypełniają cały rząd.
    */
    #project-task-employees-modal
    table tbody td:nth-child(5) button,

    #project-task-resources-modal
    table tbody td:nth-child(5) button{
        flex:1 1 120px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:9px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        text-align:center !important;
        white-space:normal !important;
    }

    /*
    Formularz dodawania.
    */
    #project-task-employees-modal h3,
    #project-task-resources-modal h3{
        margin:18px 0 12px 0 !important;
        font-size:18px !important;
    }

    #project-task-employees-modal .form-control,
    #project-task-resources-modal .form-control{
        width:100% !important;
        max-width:100% !important;

        min-height:46px !important;

        margin-bottom:10px !important;
    }

    /*
    Główny przycisk Dodaj.
    */
    #project-task-employees-modal
    .modal-box > button:last-child,

    #project-task-resources-modal
    .modal-box > button:last-child{
        width:100% !important;
        min-height:48px !important;

        margin-top:4px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
}

/* =========================================
   ZADANIE — ZALEŻNOŚCI MOBILNIE
   ========================================= */

@media(max-width:768px){

    /*
    Modal zajmuje cały ekran telefonu.
    */
    #project-task-dependencies-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #project-task-dependencies-modal .modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            calc(14px + env(safe-area-inset-top))
            14px
            calc(18px + env(safe-area-inset-bottom))
            14px !important;

        border-radius:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        -webkit-overflow-scrolling:touch;
    }

    /*
    Nagłówek i przycisk Zamknij.
    */
    #project-task-dependencies-modal .topbar{
        width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;

        margin-bottom:14px !important;
    }

    #project-task-dependencies-modal .topbar h2{
        flex:1;
        min-width:0;

        margin:0 !important;

        font-size:19px !important;
        line-height:1.3 !important;

        overflow-wrap:anywhere;
    }

    #project-task-dependencies-modal .topbar button{
        flex:0 0 auto;

        width:auto !important;
        min-width:88px !important;

        margin:0 !important;
        padding:9px 12px !important;
    }

    /*
    Tabela zmienia się w listę kart.
    */
    #project-task-dependencies-modal table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:12px 0 18px 0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #project-task-dependencies-modal table thead{
        display:none !important;
    }

    #project-task-dependencies-modal table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    /*
    Każda zależność jest osobną kartą.
    */
    #project-task-dependencies-modal table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;

        animation:none !important;
    }

    #project-task-dependencies-modal table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:10px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #project-task-dependencies-modal table tbody td:last-child{
        border-bottom:none !important;
    }

    /*
    Nazwy pól w karcie.
    */
    #project-task-dependencies-modal
    table tbody td:nth-child(1)::before{
        content:"Poprzednik";
    }

    #project-task-dependencies-modal
    table tbody td:nth-child(2)::before{
        content:"Następnik";
    }

    #project-task-dependencies-modal
    table tbody td:nth-child(3)::before{
        content:"Typ zależności";
    }

    #project-task-dependencies-modal
    table tbody td:nth-child(4)::before{
        content:"Akcje";
    }

    #project-task-dependencies-modal table tbody td::before{
        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:11px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    /*
    Pole z przyciskiem Usuń.
    */
    #project-task-dependencies-modal
    table tbody td:nth-child(4){
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #project-task-dependencies-modal
    table tbody td:nth-child(4)::before{
        flex:0 0 100% !important;
        margin-bottom:2px !important;
    }

    #project-task-dependencies-modal
    table tbody td:nth-child(4) button{
        flex:1 1 100% !important;

        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:9px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        text-align:center !important;
        white-space:normal !important;
    }

    /*
    Komunikat „Brak zależności”.
    */
    #project-task-dependencies-modal
    table tbody td[colspan]{
        padding:18px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    #project-task-dependencies-modal
    table tbody td[colspan]::before{
        display:none !important;
    }

    #project-task-dependencies-modal
    table tbody tr:has(td[colspan]){
        border-left-color:#94a3b8 !important;
    }

    /*
    Formularz dodawania zależności.
    */
    #project-task-dependencies-modal hr{
        width:100% !important;
        margin:18px 0 !important;

        border:none !important;
        border-top:1px solid #e2e8f0 !important;
    }

    #project-task-dependencies-modal h3{
        margin:0 0 12px 0 !important;
        font-size:18px !important;
    }

    #project-task-dependencies-modal label{
        display:block;

        margin:10px 0 6px 0;

        color:#475569;

        font-size:13px;
        font-weight:800;
    }

    #project-task-dependencies-modal .form-control{
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;

        margin-bottom:6px !important;
    }

    /*
    Przycisk Dodaj zależność.
    */
    #project-task-dependencies-modal
    .modal-box > button:last-child{
        width:100% !important;
        min-height:48px !important;

        margin-top:14px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }
}

/* =========================================
   REKLAMACJE — LISTA MOBILNA
   ========================================= */

.mobile-complaints-list{
    display:none;
}

@media(max-width:768px){

    #complaints .complaints-desktop-table{
        display:none !important;
    }

    #complaints .mobile-complaints-list{
        display:grid;
        grid-template-columns:1fr;
        gap:14px;

        width:100%;
        margin-top:14px;
    }

    #complaints .complaints-topbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    #complaints .complaints-add-button{
        width:100%;
        min-height:48px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
    }

    .mobile-complaint-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-left:5px solid #94a3b8;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .mobile-complaint-card.new{
        border-left-color:#2563eb;
    }

    .mobile-complaint-card.progress{
        border-left-color:#f59e0b;
    }

    .mobile-complaint-card.done{
        border-left-color:#16a34a;
    }

    .mobile-complaint-card.rejected{
        border-left-color:#dc2626;
    }

    .mobile-complaint-card.billing{
        border-left-color:#7c3aed;
    }

    .mobile-complaint-card:active{
        transform:scale(0.99);
    }

    .mobile-complaint-card-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
    }

    .mobile-complaint-heading{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-complaint-kicker{
        color:#64748b;

        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.07em;
    }

    .mobile-complaint-project{
        color:#0f172a;

        font-size:17px;
        line-height:1.3;

        overflow-wrap:anywhere;
    }

    .mobile-complaint-status,
    .complaint-table-status{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;
        justify-content:center;

        max-width:48%;

        padding:7px 10px;

        border-radius:999px;

        font-size:11px;
        line-height:1.2;
        font-weight:900;

        text-align:center;
        white-space:normal;
    }

    .mobile-complaint-status.new,
    .complaint-table-status.new{
        background:#dbeafe;
        color:#1d4ed8;
    }

    .mobile-complaint-status.progress,
    .complaint-table-status.progress{
        background:#fef3c7;
        color:#92400e;
    }

    .mobile-complaint-status.done,
    .complaint-table-status.done{
        background:#dcfce7;
        color:#166534;
    }

    .mobile-complaint-status.rejected,
    .complaint-table-status.rejected{
        background:#fee2e2;
        color:#991b1b;
    }

    .mobile-complaint-status.billing,
    .complaint-table-status.billing{
        background:#ede9fe;
        color:#6d28d9;
    }

    .mobile-complaint-status.neutral,
    .complaint-table-status.neutral{
        background:#e2e8f0;
        color:#475569;
    }

    .mobile-complaint-description{
        margin:14px 0;

        color:#0f172a;

        font-size:18px;
        line-height:1.4;

        overflow-wrap:anywhere;
    }

    .mobile-complaint-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        padding:12px;

        background:#f8fafc;
        border:1px solid #e2e8f0;
        border-radius:15px;
    }

    .mobile-complaint-data > div{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .mobile-complaint-data span{
        color:#64748b;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    .mobile-complaint-data strong{
        color:#0f172a;

        font-size:14px;
        line-height:1.35;

        overflow-wrap:anywhere;
    }

    .mobile-complaint-cost{
        grid-column:1 / -1;
    }

    .mobile-complaint-actions{
        display:flex;
        flex-wrap:wrap;
        align-items:stretch;
        gap:8px;

        margin-top:14px;
    }

    .mobile-complaint-actions button{
        flex:1 1 100px;

        width:auto;
        min-width:0;
        min-height:46px;

        margin:0;
        padding:9px 8px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:6px;

        border:none;
        border-radius:12px;

        font-size:12px;
        font-weight:900;

        text-align:center;
        white-space:normal;
    }

    .mobile-complaint-details-action{
        background:linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

        color:#ffffff !important;
    }

    .mobile-complaint-edit-action{
        background:#e2e8f0 !important;
        color:#334155 !important;
    }

    .mobile-complaint-delete-action{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }
}


/* =========================================
   REKLAMACJE — FORMULARZ MOBILNY
   ========================================= */

@media(max-width:768px){

    #complaint-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #complaint-modal .modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            0
            14px !important;

        display:flex;
        flex-direction:column;
        gap:0;

        overflow:hidden !important;

        border-radius:0 !important;
    }

    #complaint-modal .app-modal-header{
        flex:0 0 auto;

        margin:0;
        padding:0 0 12px 0;

        background:#ffffff;
    }

    #complaint-modal .app-modal-header h2{
        min-width:0;

        margin:0;

        font-size:20px;
        line-height:1.25;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    #complaint-modal .modal-tabs{
        flex:0 0 auto;

        width:auto;

        margin:0 -14px;
        padding:10px 14px;

        display:flex;
        flex-wrap:wrap;
        align-items:stretch;
        gap:8px;

        overflow:visible;

        background:#f8fafc;
        border-top:1px solid #e2e8f0;
        border-bottom:1px solid #cbd5e1;
    }

    #complaint-modal .modal-tabs button{
        flex:1 1 130px;

        width:auto;
        min-width:0;
        min-height:46px;

        margin:0;
        padding:9px 8px;

        display:flex;
        align-items:center;
        justify-content:center;

        border:1px solid #cbd5e1;
        border-radius:12px;

        background:#e2e8f0;
        color:#334155;

        font-size:13px;
        line-height:1.25;
        font-weight:900;

        text-align:center;
        white-space:normal;
    }

    #complaint-modal .modal-tabs button.active-tab{
        top:0;

        background:linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        );

        border-color:#2563eb;
        color:#ffffff;

        box-shadow:
            0 5px 12px rgba(37,99,235,0.22);
    }

    #complaint-modal .complaint-tab-content{
        flex:1 1 auto;

        width:100%;
        min-width:0;
        min-height:0;

        padding:16px 2px 24px 2px;

        overflow-y:auto;
        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;
        overscroll-behavior:contain;
    }

    #complaint-modal .complaint-tab-content label{
        display:block;

        margin:10px 0 6px 0;
    }

    #complaint-modal .complaint-tab-content input,
    #complaint-modal .complaint-tab-content select,
    #complaint-modal .complaint-tab-content textarea{
        width:100%;
        max-width:100%;
    }

    #complaint-modal .complaint-tab-content .topbar{
        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:10px;

        width:100%;
    }

    #complaint-modal .complaint-tab-content .topbar h2{
        margin:0;

        font-size:19px;
    }

    #complaint-modal .complaint-tab-content .topbar button{
        width:100%;
        justify-content:center;
    }

    #complaint-modal .complaint-modal-actions{
        flex:0 0 auto;

        width:auto;

        margin:0 -14px;
        padding:
            12px
            14px
            calc(12px + env(safe-area-inset-bottom))
            14px;

        display:grid;
        grid-template-columns:1fr 1fr;
        gap:10px;

        background:#ffffff;
        border-top:1px solid #cbd5e1;

        box-shadow:
            0 -8px 20px rgba(15,23,42,0.10);
    }

    #complaint-modal .complaint-modal-actions button{
        width:100%;
        min-width:0;
        min-height:48px;

        margin:0;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;
    }

    #complaint-modal .complaint-cancel-button{
        background:#e2e8f0 !important;
        color:#334155 !important;
    }

    #complaint-modal .complaint-save-button{
        background:linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

        color:#ffffff !important;
    }
}


/* =========================================
   DOKUMENTY REKLAMACJI — KARTY
   ========================================= */

@media(max-width:768px){

    #complaint-modal #complaint-tab-files table,
    #complaint-details-modal table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:12px 0 0 0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #complaint-modal #complaint-tab-files table thead,
    #complaint-details-modal table thead{
        display:none !important;
    }

    #complaint-modal #complaint-tab-files table tbody,
    #complaint-details-modal table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    #complaint-modal #complaint-tab-files table tbody tr,
    #complaint-details-modal table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;
    }

    #complaint-modal #complaint-tab-files table tbody td,
    #complaint-details-modal table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:9px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #complaint-modal #complaint-tab-files table tbody td:last-child,
    #complaint-details-modal table tbody td:last-child{
        border-bottom:none !important;
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(1)::before,
    #complaint-details-modal table tbody td:nth-child(1)::before{
        content:"Nazwa";
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(2)::before,
    #complaint-details-modal table tbody td:nth-child(2)::before{
        content:"Typ";
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(3)::before,
    #complaint-details-modal table tbody td:nth-child(3)::before{
        content:"Data dodania";
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(4)::before,
    #complaint-details-modal table tbody td:nth-child(4)::before{
        content:"Akcje";
    }

    #complaint-modal #complaint-tab-files table tbody td::before,
    #complaint-details-modal table tbody td::before{
        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:11px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(4),
    #complaint-details-modal table tbody td:nth-child(4){
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;

        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(4)::before,
    #complaint-details-modal table tbody td:nth-child(4)::before{
        flex:0 0 100%;
    }

    #complaint-modal #complaint-tab-files table tbody td:nth-child(4) button,
    #complaint-details-modal table tbody td:nth-child(4) button{
        flex:1 1 120px;

        width:auto !important;
        min-width:0 !important;
        min-height:44px;

        margin:0 !important;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    #complaint-modal #complaint-tab-files table tbody td[colspan],
    #complaint-details-modal table tbody td[colspan]{
        padding:18px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    #complaint-modal #complaint-tab-files table tbody td[colspan]::before,
    #complaint-details-modal table tbody td[colspan]::before{
        display:none !important;
    }
}


/* =========================================
   SZCZEGÓŁY REKLAMACJI — TELEFON
   ========================================= */

@media(max-width:768px){

    #complaint-details-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #complaint-details-modal .modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            calc(18px + env(safe-area-inset-bottom))
            14px !important;

        border-radius:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        -webkit-overflow-scrolling:touch;
    }

    #complaint-details-modal .app-modal-header{
        position:sticky;
        top:0;
        z-index:3;

        margin:0 -14px 14px -14px;
        padding:
            0
            14px
            12px
            14px;

        background:#ffffff;
    }

    .complaint-details-summary{
        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-left:5px solid #94a3b8;
        border-radius:18px;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07);
    }

    .complaint-details-summary.new{
        border-left-color:#2563eb;
    }

    .complaint-details-summary.progress{
        border-left-color:#f59e0b;
    }

    .complaint-details-summary.done{
        border-left-color:#16a34a;
    }

    .complaint-details-summary.rejected{
        border-left-color:#dc2626;
    }

    .complaint-details-summary.billing{
        border-left-color:#7c3aed;
    }

    .complaint-details-summary-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:12px;
    }

    .complaint-details-summary-top > div{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .complaint-details-summary-top > div > span{
        color:#64748b;

        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    .complaint-details-summary-top > div > strong{
        color:#0f172a;

        font-size:18px;
        line-height:1.3;

        overflow-wrap:anywhere;
    }

    .complaint-details-summary h3{
        margin:15px 0 0 0;

        color:#0f172a;

        font-size:18px;
        line-height:1.45;

        overflow-wrap:anywhere;
    }

    .complaint-details-grid{
        display:grid;
        grid-template-columns:1fr;
        gap:10px;

        margin-top:14px;
    }

    .complaint-detail-item{
        min-width:0;

        padding:13px;

        display:flex;
        flex-direction:column;
        gap:5px;

        background:#f8fafc;
        border:1px solid #e2e8f0;
        border-radius:14px;
    }

    .complaint-detail-item span{
        color:#64748b;

        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    .complaint-detail-item strong{
        color:#0f172a;

        font-size:15px;
        line-height:1.45;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }

    .complaint-details-edit-button{
        width:100%;
        min-height:48px;

        margin:14px 0 18px 0;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        background:linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

        color:#ffffff !important;
    }

    #complaint-details-modal > .modal-box > .topbar{
        margin-top:6px;
    }

    #complaint-details-modal > .modal-box > .topbar h2{
        margin:0;

        font-size:19px;
    }
}

/* =========================================
   START — PEŁNY UKŁAD MOBILNY
   ========================================= */

@media(max-width:768px){

    #dashboard{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow-x:hidden !important;
    }

    #dashboard > br{
        display:none;
    }


    /* =====================================
       SZYBKIE AKCJE
       ===================================== */

    #dashboard .process-quick-actions{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;

        margin:16px 0 !important;
    }

    #dashboard .process-quick-actions button{
        width:100% !important;
        min-width:0 !important;
        min-height:92px !important;

        margin:0 !important;
        padding:13px 10px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
        justify-content:center !important;
        gap:4px !important;

        border-radius:16px !important;

        font-size:14px !important;
        line-height:1.25 !important;

        text-align:left !important;
        white-space:normal !important;
    }

    #dashboard .process-quick-actions button i{
        margin:0 0 4px 0 !important;

        font-size:18px !important;
    }

    #dashboard .process-quick-actions button small{
        display:block;

        color:rgba(255,255,255,0.78);

        font-size:10px !important;
        line-height:1.3 !important;

        white-space:normal !important;
    }


    /* =====================================
       GÓRNE KAFELKI
       ===================================== */

    #dashboard .dashboard-top-layout{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;

        margin-bottom:18px !important;
    }

    #dashboard .dashboard-top-cards{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:10px !important;
    }

    #dashboard
    .dashboard-top-cards
    .dashboard-card{
        width:100% !important;
        min-width:0 !important;
        min-height:105px !important;

        margin:0 !important;
        padding:14px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:space-between !important;

        border-radius:17px !important;
    }

    #dashboard
    .dashboard-top-cards
    .dashboard-card h3{
        margin:0 !important;

        font-size:13px !important;
        line-height:1.3 !important;

        white-space:normal !important;
    }

    #dashboard
    .dashboard-top-cards
    .dashboard-card h3 i{
        margin-right:4px !important;
    }

    #dashboard
    .dashboard-top-cards
    .dashboard-card p{
        max-width:100% !important;

        margin:14px 0 0 0 !important;

        font-size:clamp(
            20px,
            6vw,
            27px
        ) !important;

        line-height:1.05 !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }


    /* =====================================
       WYKRES KONDYCJI PROJEKTÓW
       ===================================== */

    #dashboard .dashboard-chart-card{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:16px 14px !important;

        border-radius:20px !important;
    }

    #dashboard
    .dashboard-chart-card
    .dashboard-section-heading{
        align-items:flex-start !important;
        gap:10px !important;
    }

    #dashboard
    .dashboard-chart-card
    .dashboard-section-icon{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;

        border-radius:14px !important;
    }

    #dashboard
    .dashboard-chart-card
    .dashboard-section-heading h2{
        font-size:19px !important;
    }

    #dashboard
    .dashboard-chart-card
    .dashboard-section-heading p{
        font-size:12px !important;
    }

    #dashboard .dashboard-chart-layout{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;

        margin-top:14px !important;
    }

    #dashboard .dashboard-chart-legend{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
    }

    #dashboard .dashboard-chart-legend-row{
        min-width:0 !important;
        min-height:58px !important;

        padding:10px !important;

        display:grid !important;
        grid-template-columns:12px minmax(0, 1fr) auto !important;
        align-items:center !important;
        gap:7px !important;

        border-radius:14px !important;
    }

    #dashboard
    .dashboard-chart-legend-row
    span:nth-child(2){
        min-width:0 !important;

        font-size:11px !important;
        line-height:1.25 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    #dashboard
    .dashboard-chart-legend-row strong{
        font-size:18px !important;
    }

    #dashboard .dashboard-chart-dot{
        width:10px !important;
        height:10px !important;
    }


    /* =====================================
       CENTRUM DOWODZENIA
       ===================================== */

    #dashboard .command-center-dashboard{
        width:100% !important;
        min-width:0 !important;

        margin:18px 0 !important;
        padding:16px 12px !important;

        border-radius:22px !important;
    }

    #dashboard .command-center-hero{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        margin-bottom:14px !important;
    }

    #dashboard .command-center-kicker{
        width:max-content;
        max-width:100%;

        margin-bottom:9px !important;
        padding:7px 10px !important;

        font-size:10px !important;
    }

    #dashboard .command-center-hero h2{
        font-size:22px !important;
        line-height:1.2 !important;
    }

    #dashboard .command-center-hero p{
        font-size:13px !important;
    }

    #dashboard .command-center-hero button{
        width:100% !important;
        min-height:46px !important;

        margin:0 !important;

        justify-content:center !important;
    }

    #dashboard .command-center-stats{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;

        margin-bottom:12px !important;
    }

    #dashboard .command-stat-card{
        min-width:0 !important;

        padding:13px !important;

        border-radius:16px !important;
    }

    #dashboard .command-stat-card span{
        min-height:26px;

        margin-bottom:6px !important;

        font-size:9px !important;
        line-height:1.3 !important;

        white-space:normal !important;
    }

    #dashboard .command-stat-card strong{
        font-size:27px !important;
    }

    #dashboard .command-center-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;
    }

    #dashboard .command-panel{
        width:100% !important;
        min-width:0 !important;

        border-radius:18px !important;
    }

    #dashboard .command-panel-header{
        padding:14px !important;
    }

    #dashboard .command-panel-header h3{
        align-items:flex-start !important;

        font-size:15px !important;
        line-height:1.3 !important;
    }

    #dashboard .command-panel-header p{
        font-size:12px !important;
    }

    #dashboard .command-list{
        max-height:none !important;

        padding:9px !important;

        overflow:visible !important;
    }

    #dashboard .command-item{
        width:100% !important;
        min-width:0 !important;

        grid-template-columns:38px minmax(0, 1fr) 12px !important;
        gap:9px !important;

        padding:11px !important;

        border-radius:15px !important;
    }

    #dashboard .command-item-icon{
        width:38px !important;
        height:38px !important;

        border-radius:13px !important;
    }

    #dashboard .command-item-content strong{
        font-size:13px !important;
        line-height:1.35 !important;

        overflow-wrap:anywhere !important;
    }

    #dashboard .command-item-content p{
        font-size:11px !important;
        line-height:1.4 !important;

        overflow-wrap:anywhere !important;
    }

    #dashboard .command-item-topline{
        gap:5px !important;
    }

    #dashboard .command-empty{
        min-height:100px !important;

        padding:16px !important;
    }


    /* =====================================
       POCZTA NA STARCIE
       ===================================== */

    #dashboard .mail-dashboard-card{
        width:100% !important;
        min-width:0 !important;

        margin:18px 0 !important;
        padding:16px !important;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);
    }

    #dashboard .mail-dashboard-header{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        margin-bottom:14px !important;
    }

    #dashboard .mail-dashboard-header h2{
        margin:0 !important;

        font-size:20px !important;
    }

    #dashboard .mail-dashboard-header p{
        margin:5px 0 0 0;

        color:#64748b;

        font-size:13px;
    }

    #dashboard .mail-dashboard-header button{
        width:100% !important;
        min-height:46px !important;

        margin:0 !important;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    #dashboard .mail-dashboard-grid{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;
    }

    #dashboard .mail-dashboard-stat{
        min-width:0;
        min-height:90px;

        padding:13px 10px;

        display:flex;
        flex-direction:column;
        justify-content:space-between;
        gap:8px;

        background:#f8fafc;

        border:1px solid #e2e8f0;
        border-left:4px solid #94a3b8;
        border-radius:15px;

        cursor:pointer;
    }

    #dashboard .mail-dashboard-stat.danger{
        border-left-color:#dc2626;
    }

    #dashboard .mail-dashboard-stat.warning{
        border-left-color:#f59e0b;
    }

    #dashboard .mail-dashboard-stat.active{
        border-left-color:#2563eb;
    }

    #dashboard .mail-dashboard-stat.neutral{
        border-left-color:#64748b;
    }

    #dashboard .mail-dashboard-stat span{
        color:#475569;

        font-size:11px;
        line-height:1.3;
        font-weight:800;

        white-space:normal;
    }

    #dashboard .mail-dashboard-stat strong{
        color:#0f172a;

        font-size:28px;
        line-height:1;
    }


    /* =====================================
       DOLNE SEKCJE STARTU
       ===================================== */

    #dashboard .dashboard-section{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:14px !important;
    }

    #dashboard .dashboard-half,
    #dashboard .dashboard-upcoming-events{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;
        padding:15px !important;

        border-radius:19px !important;

        overflow:visible !important;
    }

    #dashboard .dashboard-half:hover,
    #dashboard .dashboard-upcoming-events:hover{
        transform:none !important;
    }

    #dashboard .dashboard-section-heading{
        align-items:flex-start !important;
        gap:10px !important;

        margin-bottom:12px !important;
    }

    #dashboard .dashboard-section-heading h2{
        font-size:18px !important;
        line-height:1.25 !important;
    }

    #dashboard .dashboard-section-heading p{
        font-size:12px !important;
    }

    #dashboard .dashboard-section-icon{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;

        border-radius:14px !important;
    }


    /* =====================================
       TABELE STARTU JAKO KARTY
       ===================================== */

    #dashboard .dashboard-half table,
    #dashboard
    .dashboard-collapsible-content table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:12px 0 0 0 !important;

        background:transparent !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #dashboard .dashboard-half table thead,
    #dashboard
    .dashboard-collapsible-content table thead{
        display:none !important;
    }

    #dashboard .dashboard-half table tbody,
    #dashboard
    .dashboard-collapsible-content table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;

        width:100% !important;
        min-width:0 !important;
    }

    #dashboard .dashboard-half table tbody tr,
    #dashboard
    .dashboard-collapsible-content table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:13px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:15px !important;

        box-shadow:
            0 5px 14px rgba(15,23,42,0.06) !important;

        overflow:hidden !important;

        animation:none !important;
        transform:none !important;
    }

    #dashboard .dashboard-half table tbody td,
    #dashboard
    .dashboard-collapsible-content table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:8px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.4 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #dashboard
    .dashboard-half table tbody td:last-child,
    #dashboard
    .dashboard-collapsible-content table tbody td:last-child{
        border-bottom:none !important;
    }

    #dashboard .dashboard-half table tbody td::before,
    #dashboard
    .dashboard-collapsible-content table tbody td::before{
        display:block;

        margin-bottom:4px;

        color:#64748b;

        font-size:10px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #dashboard table tbody td .badge{
        max-width:100%;

        white-space:normal !important;
        text-align:center;
    }

    #dashboard table tbody td[colspan]{
        padding:17px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    #dashboard table tbody td[colspan]::before{
        display:none !important;
    }


    /* Ostatnie projekty */

    #recent-projects-table
    td:nth-child(1)::before{
        content:"Numer projektu";
    }

    #recent-projects-table
    td:nth-child(2)::before{
        content:"Klient";
    }

    #recent-projects-table
    td:nth-child(3)::before{
        content:"Nazwa projektu";
    }

    #recent-projects-table
    td:nth-child(4)::before{
        content:"Status";
    }


    /* Najbliższe płatności */

    #upcoming-payments-table
    td:nth-child(1)::before{
        content:"Faktura";
    }

    #upcoming-payments-table
    td:nth-child(2)::before{
        content:"Klient";
    }

    #upcoming-payments-table
    td:nth-child(3)::before{
        content:"Termin";
    }

    #upcoming-payments-table
    td:nth-child(4)::before{
        content:"Kwota";
    }


    /* Oferty kończące się */

    #ending-offers-table
    td:nth-child(1)::before{
        content:"Numer projektu";
    }

    #ending-offers-table
    td:nth-child(2)::before{
        content:"Klient";
    }

    #ending-offers-table
    td:nth-child(3)::before{
        content:"Nazwa projektu";
    }

    #ending-offers-table
    td:nth-child(4)::before{
        content:"Ważna do";
    }


    /* Wydarzenia pracowników */

    #dashboard-employee-events-table
    td:nth-child(1)::before{
        content:"Termin";
    }

    #dashboard-employee-events-table
    td:nth-child(2)::before{
        content:"Pracownik";
    }

    #dashboard-employee-events-table
    td:nth-child(3)::before{
        content:"Typ wydarzenia";
    }

    #dashboard-employee-events-table
    td:nth-child(4)::before{
        content:"Uwagi";
    }


    /* Wydarzenia zasobów */

    #dashboard-resource-events-table
    td:nth-child(1)::before{
        content:"Termin";
    }

    #dashboard-resource-events-table
    td:nth-child(2)::before{
        content:"Zasób";
    }

    #dashboard-resource-events-table
    td:nth-child(3)::before{
        content:"Typ wydarzenia";
    }

    #dashboard-resource-events-table
    td:nth-child(4)::before{
        content:"Uwagi";
    }


    /* Projekty utracone */

    #lost-projects-table
    td:nth-child(1)::before{
        content:"Numer projektu";
    }

    #lost-projects-table
    td:nth-child(2)::before{
        content:"Klient";
    }

    #lost-projects-table
    td:nth-child(3)::before{
        content:"Nazwa projektu";
    }

    #lost-projects-table
    td:nth-child(4)::before{
        content:"Status";
    }

    #lost-projects-table
    td:nth-child(5)::before{
        content:"Kwota";
    }

    #lost-projects-table
    td:nth-child(6)::before{
        content:"Powód";
    }


    /* Kolory ważnych kart */

    #dashboard
    tr.payment-overdue{
        border-left-color:#dc2626 !important;
    }

    #dashboard
    tr.payment-soon{
        border-left-color:#f59e0b !important;
    }

    #dashboard
    tr.payment-paid{
        border-left-color:#16a34a !important;
    }

    #dashboard
    tr.dashboard-event-urgent{
        border-left-color:#dc2626 !important;
    }

    #dashboard
    tr.dashboard-event-soon{
        border-left-color:#f59e0b !important;
    }


    /* =====================================
       PROJEKTY UTRACONE — SEKCJA ZWIJANA
       ===================================== */

    #dashboard .dashboard-collapsible-section{
        width:100% !important;

        margin-top:18px !important;

        border-radius:19px !important;

        overflow:hidden !important;
    }

    #dashboard .dashboard-collapsible-header{
        width:100% !important;

        padding:15px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        cursor:pointer;
    }

    #dashboard
    .dashboard-collapsible-header
    .dashboard-section-heading{
        width:100% !important;
        margin:0 !important;
    }

    #dashboard .dashboard-collapsible-hint{
        width:100% !important;

        padding:9px 12px !important;

        display:flex !important;
        justify-content:center !important;

        border-radius:12px !important;

        text-align:center !important;
    }

    #dashboard .dashboard-collapsible-content{
        width:100% !important;

        padding:0 14px 14px 14px !important;
    }

    #dashboard
    .dashboard-collapsible-content
    .cards{
        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;
    }

    #dashboard
    .dashboard-collapsible-content
    .cards .card{
        min-width:0 !important;

        padding:13px !important;

        border-radius:15px !important;
    }

    #dashboard
    .dashboard-collapsible-content
    .cards .card h3{
        min-height:32px;

        margin:0 0 8px 0 !important;

        font-size:11px !important;
        line-height:1.3 !important;
    }

    #dashboard
    .dashboard-collapsible-content
    .cards .card p{
        margin:0 !important;

        font-size:21px !important;
        line-height:1.1 !important;

        overflow-wrap:anywhere !important;
    }
}


/*
Na bardzo wąskim telefonie pozostawiamy
dwie kolumny kafelków, ale zmniejszamy odstępy.
*/
@media(max-width:380px){

    #dashboard .process-quick-actions,
    #dashboard .dashboard-top-cards,
    #dashboard .command-center-stats,
    #dashboard .mail-dashboard-grid{
        gap:7px !important;
    }

    #dashboard .process-quick-actions button{
        min-height:88px !important;
        padding:11px 8px !important;

        font-size:13px !important;
    }

    #dashboard .dashboard-chart-legend{
        grid-template-columns:1fr !important;
    }
}

/* =========================================
   BUDŻETY — PEŁNY UKŁAD MOBILNY
   ========================================= */

@media(max-width:768px){

    #budgets{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow-x:hidden !important;
    }


    /* =====================================
       WYBÓR PROJEKTU I GŁÓWNE AKCJE
       ===================================== */

    #budgets .budget-project-selector-card{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        margin-bottom:14px !important;
        padding:15px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07) !important;
    }

    #budgets .budget-project-selector-card > label{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        gap:7px !important;

        margin:0 !important;

        color:#475569 !important;

        font-size:13px !important;
        font-weight:800 !important;
    }

    #budgets #budget-project-select{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        margin:0 !important;
    }

    #budgets .budget-header-buttons{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
    }

    #budgets .budget-header-buttons button{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:10px 8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        font-size:13px !important;
        line-height:1.25 !important;

        text-align:center !important;
        white-space:normal !important;
    }


    /* =====================================
       PODSUMOWANIE BUDŻETU
       ===================================== */

    #budgets .budget-summary-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;

        margin-bottom:14px !important;
    }

    #budgets .budget-summary-card{
        width:100% !important;
        min-width:0 !important;
        min-height:118px !important;

        margin:0 !important;
        padding:13px 11px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:space-between !important;
        gap:7px !important;

        border-radius:16px !important;
    }

    #budgets .budget-summary-card span{
        min-height:30px;

        font-size:10px !important;
        line-height:1.3 !important;
        font-weight:900 !important;

        white-space:normal !important;
    }

    #budgets .budget-summary-card strong{
        width:100% !important;
        max-width:100% !important;

        font-size:clamp(
            17px,
            5vw,
            23px
        ) !important;

        line-height:1.1 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #budgets .budget-summary-card small{
        min-height:28px;

        font-size:9px !important;
        line-height:1.35 !important;

        white-space:normal !important;
    }


    /* =====================================
       FORMULARZ DODAWANIA KOSZTU
       ===================================== */

    #budgets .budget-cost-form{
        width:100% !important;
        min-width:0 !important;

        margin:0 0 14px 0 !important;
        padding:15px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 8px 24px rgba(15,23,42,0.10) !important;

        overflow:hidden !important;
    }

    #budgets .budget-cost-form-header{
        width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:flex-start !important;
        justify-content:space-between !important;
        gap:12px !important;

        margin-bottom:14px !important;
        padding-bottom:12px !important;

        border-bottom:1px solid #e2e8f0 !important;
    }

    #budgets .budget-cost-form-header > div{
        min-width:0 !important;
    }

    #budgets .budget-cost-form-header h2{
        margin:0 !important;

        font-size:19px !important;
        line-height:1.3 !important;

        overflow-wrap:anywhere !important;
    }

    #budgets .budget-cost-form-header p{
        margin:5px 0 0 0 !important;

        color:#64748b !important;

        font-size:12px !important;
        line-height:1.45 !important;
    }

    #budgets .budget-cost-form-header > button{
        flex:0 0 auto !important;

        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        min-height:42px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }

    #budgets .budget-cost-form-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;
    }

    #budgets .budget-cost-form-grid label{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        gap:6px !important;

        margin:0 !important;

        color:#475569 !important;

        font-size:13px !important;
        font-weight:800 !important;
    }

    #budgets .budget-cost-form-grid input,
    #budgets .budget-cost-form-grid select,
    #budgets .budget-cost-form-grid textarea{
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;

        margin:0 !important;
    }

    #budgets .budget-cost-form-grid textarea{
        min-height:110px !important;
    }

    #budgets .budget-cost-form-actions{
        width:100% !important;

        margin-top:14px !important;
    }

    #budgets .budget-cost-form-actions button{
        width:100% !important;
        min-height:50px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;
    }


    /* =====================================
       IMPORT CSV
       ===================================== */

    #budgets .budget-import-panel{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 0 14px 0 !important;
        padding:15px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 8px 24px rgba(15,23,42,0.10) !important;

        overflow:hidden !important;
    }

    #budgets .budget-import-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;
    }

    #budgets .budget-import-grid label{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        gap:6px !important;

        margin:0 !important;
    }

    #budgets .budget-import-grid input,
    #budgets .budget-import-grid select{
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;
    }

    #budgets .budget-toggle-button{
        width:100% !important;
        min-height:48px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;
    }

    #budgets .budget-import-actions{
        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        margin:14px 0 !important;
    }

    #budgets .budget-import-actions button{
        flex:1 1 135px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:9px 8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        font-size:12px !important;
        line-height:1.25 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    #budgets .budget-import-actions
    .budget-import-save-button{
        flex:1 1 100% !important;

        background:linear-gradient(
            135deg,
            #16a34a,
            #15803d
        ) !important;

        color:#ffffff !important;
    }

    #budgets .budget-import-hint{
        width:100% !important;

        padding:12px !important;

        font-size:12px !important;
        line-height:1.5 !important;

        overflow-wrap:anywhere !important;
    }


    /* =====================================
       REGUŁY BANKOWE
       ===================================== */

    #budgets .budget-rules-panel{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin-top:14px !important;
        padding:13px !important;

        border-radius:16px !important;

        overflow:hidden !important;
    }

    #budgets .budget-rules-header{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        margin-bottom:12px !important;
    }

    #budgets .budget-rules-header h2{
        margin:0 !important;

        font-size:18px !important;
        line-height:1.3 !important;
    }

    #budgets .budget-rules-header p{
        margin:6px 0 0 0 !important;

        font-size:12px !important;
        line-height:1.45 !important;
    }

    #budgets .budget-rules-header button{
        width:100% !important;
        min-height:46px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #budgets .budget-rules-table-wrap,
    #budgets .budget-import-preview-wrap{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow:visible !important;
    }


    /* =====================================
       LISTA KOSZTÓW I FILTRY
       ===================================== */

    #budgets .budget-table-card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin-top:14px !important;
        padding:14px !important;

        border-radius:18px !important;

        overflow:visible !important;
    }

    #budgets .budget-table-header{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        margin-bottom:12px !important;
    }

    #budgets .budget-table-header h2{
        margin:0 !important;

        font-size:20px !important;
    }

    #budgets .budget-table-filters{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;
    }

    #budgets .budget-table-filters input,
    #budgets .budget-table-filters select{
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;

        margin:0 !important;
    }

    #budgets .budget-table-filters button{
        width:100% !important;
        min-height:46px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    /* =====================================
       WSPÓLNY WYGLĄD TABEL JAKO KARTY
       ===================================== */

    #budgets .budget-costs-mobile-table,
    #budgets .budget-rules-mobile-table,
    #budgets .budget-import-mobile-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:12px 0 0 0 !important;

        background:transparent !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #budgets .budget-costs-mobile-table thead,
    #budgets .budget-rules-mobile-table thead,
    #budgets .budget-import-mobile-table thead{
        display:none !important;
    }

    #budgets .budget-costs-mobile-table tbody,
    #budgets .budget-rules-mobile-table tbody,
    #budgets .budget-import-mobile-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    #budgets .budget-costs-mobile-table tbody tr,
    #budgets .budget-rules-mobile-table tbody tr,
    #budgets .budget-import-mobile-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;

        animation:none !important;
    }

    #budgets .budget-costs-mobile-table tbody td,
    #budgets .budget-rules-mobile-table tbody td,
    #budgets .budget-import-mobile-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:9px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #budgets .budget-costs-mobile-table tbody td:last-child,
    #budgets .budget-rules-mobile-table tbody td:last-child,
    #budgets .budget-import-mobile-table tbody td:last-child{
        border-bottom:none !important;
    }

    #budgets .budget-costs-mobile-table tbody td::before,
    #budgets .budget-rules-mobile-table tbody td::before,
    #budgets .budget-import-mobile-table tbody td::before{
        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:10px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #budgets .budget-costs-mobile-table tbody td[colspan],
    #budgets .budget-rules-mobile-table tbody td[colspan],
    #budgets .budget-import-mobile-table tbody td[colspan]{
        padding:18px 8px !important;

        border:none !important;

        color:#64748b !important;

        text-align:center !important;
    }

    #budgets .budget-costs-mobile-table
    tbody td[colspan]::before,

    #budgets .budget-rules-mobile-table
    tbody td[colspan]::before,

    #budgets .budget-import-mobile-table
    tbody td[colspan]::before{
        display:none !important;
    }

    #budgets .budget-costs-mobile-table
    tbody tr:has(td[colspan]),

    #budgets .budget-rules-mobile-table
    tbody tr:has(td[colspan]),

    #budgets .budget-import-mobile-table
    tbody tr:has(td[colspan]){
        border-left-color:#94a3b8 !important;
    }


    /* =====================================
       NAZWY PÓL — KOSZTY
       ===================================== */

    #budgets .budget-costs-mobile-table
    td:nth-child(1)::before{
        content:"Data";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(2)::before{
        content:"Projekt";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(3)::before{
        content:"Źródło";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(4)::before{
        content:"Kategoria";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(5)::before{
        content:"Kontrahent";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(6)::before{
        content:"Opis";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(7)::before{
        content:"Kwota";
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(8)::before{
        content:"Akcje";
    }


    /* =====================================
       NAZWY PÓL — REGUŁY BANKOWE
       ===================================== */

    #budgets .budget-rules-mobile-table
    td:nth-child(1)::before{
        content:"Opis zawiera";
    }

    #budgets .budget-rules-mobile-table
    td:nth-child(2)::before{
        content:"Kontrahent";
    }

    #budgets .budget-rules-mobile-table
    td:nth-child(3)::before{
        content:"Projekt";
    }

    #budgets .budget-rules-mobile-table
    td:nth-child(4)::before{
        content:"Kategoria";
    }

    #budgets .budget-rules-mobile-table
    td:nth-child(5)::before{
        content:"Akcje";
    }


    /* =====================================
       NAZWY PÓL — IMPORT CSV
       ===================================== */

    #budgets .budget-import-mobile-table
    td:nth-child(1)::before{
        content:"Data";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(2)::before{
        content:"Rozpoznanie";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(3)::before{
        content:"Kontrahent";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(4)::before{
        content:"Opis";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(5)::before{
        content:"Kwota";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(6)::before{
        content:"Projekt";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(7)::before{
        content:"Kategoria";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(8)::before{
        content:"Reguła";
    }

    #budgets .budget-import-mobile-table
    td:nth-child(9)::before{
        content:"Importować";
    }


    /* =====================================
       POLA I PRZYCISKI WEWNĄTRZ KART
       ===================================== */

    #budgets .budget-costs-mobile-table td button,
    #budgets .budget-rules-mobile-table td button{
        flex:1 1 110px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        white-space:normal !important;
    }

    #budgets .budget-costs-mobile-table td:nth-child(8),
    #budgets .budget-rules-mobile-table td:nth-child(5){
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #budgets .budget-costs-mobile-table
    td:nth-child(8)::before,

    #budgets .budget-rules-mobile-table
    td:nth-child(5)::before{
        flex:0 0 100% !important;
    }

    #budgets .budget-import-mobile-table input:not([type="checkbox"]),
    #budgets .budget-import-mobile-table select,
    #budgets .budget-import-mobile-table textarea{
        width:100% !important;
        max-width:100% !important;
        min-height:44px !important;

        margin:0 !important;
    }

    #budgets .budget-import-mobile-table
    input[type="checkbox"]{
        width:28px !important;
        min-width:28px !important;
        height:28px !important;

        margin:2px 0 !important;
    }

    #budgets .budget-import-mobile-table td:nth-child(9){
        display:flex !important;
        flex-direction:column !important;
        align-items:flex-start !important;
    }
}


@media(max-width:380px){

    #budgets .budget-summary-grid{
        gap:7px !important;
    }

    #budgets .budget-summary-card{
        min-height:112px !important;
        padding:11px 9px !important;
    }

    #budgets .budget-header-buttons{
        grid-template-columns:1fr !important;
    }
}

/* =========================================
   MODAL KOSZTU — NOWY WYGLĄD MOBILNY
   ========================================= */

@media(max-width:768px){

    #budget-cost-form.budget-cost-modal{
        position:fixed !important;
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        background:#f1f5f9 !important;

        backdrop-filter:none !important;
        -webkit-backdrop-filter:none !important;
    }

    #budget-cost-form .budget-cost-modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;
    }


    /* NAGŁÓWEK */

    #budget-cost-form .budget-cost-modal-header{
        min-height:0;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            14px
            14px !important;

        gap:10px;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 42%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            ) !important;
    }

    #budget-cost-form .budget-cost-modal-title-row{
        gap:11px;
    }

    #budget-cost-form .budget-cost-modal-icon{
        width:46px;
        height:46px;
        min-width:46px;

        border-radius:14px;

        font-size:20px;
    }

    #budget-cost-form .budget-cost-modal-kicker{
        margin-bottom:2px;

        font-size:9px;
    }

    #budget-cost-form .budget-cost-modal-title h2{
        font-size:20px !important;
        line-height:1.2 !important;
    }

    #budget-cost-form .budget-cost-modal-title p{
        margin-top:4px;

        font-size:11px;
        line-height:1.35;
    }

    #budget-cost-form .budget-cost-modal-close{
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;

        border-radius:13px;
    }


    /* TREŚĆ */

    #budget-cost-form .budget-cost-modal-scroll{
        padding:12px;

        gap:11px;

        background:#f1f5f9;
    }

    #budget-cost-form .budget-cost-section{
        padding:14px;

        border-radius:17px;

        box-shadow:
            0 4px 14px rgba(15,23,42,0.06);
    }

    #budget-cost-form .budget-cost-section-heading{
        gap:10px;

        margin-bottom:13px;
        padding-bottom:12px;
    }

    #budget-cost-form .budget-cost-section-icon{
        width:38px;
        height:38px;
        min-width:38px;

        border-radius:12px;

        font-size:15px;
    }

    #budget-cost-form .budget-cost-section-heading h3{
        font-size:15px;
    }

    #budget-cost-form .budget-cost-section-heading p{
        font-size:10px;
        line-height:1.35;
    }

    #budget-cost-form .budget-cost-form-grid{
        grid-template-columns:1fr !important;
        gap:11px !important;
    }

    #budget-cost-form .budget-cost-full{
        grid-column:auto !important;
    }

    #budget-cost-form .budget-cost-form-grid label{
        gap:6px;
    }

    #budget-cost-form .budget-cost-form-grid label > span{
        font-size:11px;
    }

    #budget-cost-form input,
    #budget-cost-form select{
        min-height:48px !important;

        padding:12px 13px !important;

        font-size:16px !important;
    }

    #budget-cost-form textarea{
        min-height:110px !important;

        padding:12px 13px !important;

        font-size:16px !important;
    }


    /* PRZYCISKI */

    #budget-cost-form .budget-cost-form-actions{
        padding:
            11px
            12px
            calc(11px + env(safe-area-inset-bottom))
            12px !important;

        grid-template-columns:1fr 1fr !important;
        gap:9px !important;
    }

    #budget-cost-form .budget-cost-form-actions button{
        min-height:50px !important;

        padding:9px 7px !important;

        border-radius:13px !important;

        font-size:13px !important;
        line-height:1.25 !important;

        text-align:center !important;
        white-space:normal !important;
    }
}

/* =========================================
   POCZTA — PEŁNY UKŁAD MOBILNY
   ========================================= */

@media(max-width:768px){

    #mail{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow-x:hidden !important;
    }


    /* =====================================
       NAGŁÓWEK I GŁÓWNE AKCJE
       ===================================== */

    #mail .mail-view-header{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        margin-bottom:14px !important;
    }

    #mail .mail-header-actions{
        width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;
    }

    #mail .mail-header-actions button{
        flex:1 1 145px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:50px !important;

        margin:0 !important;
        padding:10px 8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        font-size:12px !important;
        line-height:1.25 !important;
        font-weight:900 !important;

        text-align:center !important;
        white-space:normal !important;
    }


    /* =====================================
       PODSUMOWANIA
       ===================================== */

    #mail .mail-summary-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(
            2,
            minmax(0, 1fr)
        ) !important;
        gap:9px !important;

        margin-bottom:14px !important;
    }

    #mail .mail-summary-card{
        width:100% !important;
        min-width:0 !important;
        min-height:112px !important;

        margin:0 !important;
        padding:13px 11px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:space-between !important;
        gap:7px !important;

        border-radius:17px !important;
    }

    #mail .mail-summary-card span{
        font-size:11px !important;
        line-height:1.3 !important;
        font-weight:900 !important;

        white-space:normal !important;
    }

    #mail .mail-summary-card strong{
        font-size:29px !important;
        line-height:1 !important;
    }

    #mail .mail-summary-card small{
        min-height:28px;

        font-size:9px !important;
        line-height:1.35 !important;

        white-space:normal !important;
    }


    /* =====================================
       ZAKŁADKI
       ===================================== */

    #mail .mail-tabs{
        width:100% !important;

        margin:0 0 14px 0 !important;
        padding:10px !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        overflow:visible !important;

        background:#f8fafc !important;

        border:1px solid #dbe3ef !important;
        border-radius:16px !important;
    }

    #mail .mail-tabs button{
        flex:1 1 115px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:9px 8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        border:1px solid #cbd5e1 !important;
        border-radius:12px !important;

        background:#e2e8f0 !important;
        color:#334155 !important;

        font-size:12px !important;
        line-height:1.25 !important;
        font-weight:900 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    #mail .mail-tabs button.active-tab{
        top:0 !important;

        background:linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

        border-color:#2563eb !important;
        color:#ffffff !important;

        box-shadow:
            0 5px 12px rgba(37,99,235,0.22) !important;
    }


    /* =====================================
       FILTRY I SYNCHRONIZACJA
       ===================================== */

    #mail .mail-toolbar{
        width:100% !important;

        display:grid !important;
        grid-template-columns:repeat(
            3,
            minmax(0, 1fr)
        ) !important;
        gap:9px !important;

        margin-bottom:14px !important;
        padding:13px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:17px !important;

        box-shadow:
            0 5px 16px rgba(15,23,42,0.05) !important;

        overflow:visible !important;
    }

    #mail .mail-toolbar input,
    #mail .mail-toolbar select{
        grid-column:1 / -1 !important;

        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        margin:0 !important;
    }

    /*
    Na telefonie podgląd jest osobnym modalem,
    dlatego przycisk dzielenia ekranu ukrywamy.
    */
    #mail #mail-preview-toggle-button{
        display:none !important;
    }

    #mail .mail-toolbar .mail-icon-button{
        width:100% !important;
        min-width:0 !important;
        min-height:62px !important;

        margin:0 !important;
        padding:8px 5px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border-radius:13px !important;

        font-size:16px !important;
        text-align:center !important;
    }

    #mail .mail-toolbar
    button[onclick="runMailImapSyncInBackground()"]::after{
        content:"Synchronizuj";
    }

    #mail .mail-toolbar
    button[onclick="clearMailFilters()"]::after{
        content:"Wyczyść";
    }

    #mail .mail-toolbar
    button[onclick="runMailDemoSync()"]::after{
        content:"Test";
    }

    #mail .mail-toolbar
    .mail-icon-button::after{
        font-size:9px;
        line-height:1.2;
        font-weight:900;
    }


    /* =====================================
       LISTA WIADOMOŚCI
       ===================================== */

    #mail .mail-layout{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }

    #mail .mail-list-panel{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow:visible !important;
    }

    #mail .mail-layout > #mail-details-panel{
        display:none !important;
    }

    #mail .mail-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        background:transparent !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #mail .mail-table thead{
        display:none !important;
    }

    #mail .mail-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
        min-width:0 !important;
    }

    #mail .mail-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:5px solid #2563eb !important;
        border-radius:18px !important;

        box-shadow:
            0 7px 20px rgba(15,23,42,0.07),
            0 2px 5px rgba(15,23,42,0.04) !important;

        overflow:hidden !important;

        animation:none !important;
        transform:none !important;

        cursor:pointer;
    }

    #mail .mail-table tbody tr:hover{
        transform:none !important;
    }

    #mail .mail-table tbody tr.active,
    #mail .mail-table tbody tr.selected,
    #mail .mail-table tbody tr.mail-selected{
        border-left-color:#16a34a !important;

        background:#f0fdf4 !important;
    }

    #mail .mail-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:9px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        color:#0f172a !important;

        font-size:14px !important;
        line-height:1.45 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #mail .mail-table tbody td:last-child{
        border-bottom:none !important;
    }

    #mail .mail-table tbody td::before{
        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:10px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #mail-messages-table
    td:nth-child(1)::before{
        content:"Data";
    }

    #mail-messages-table
    td:nth-child(2)::before{
        content:"Od / Do";
    }

    #mail-messages-table
    td:nth-child(3)::before{
        content:"Temat";
    }

    #mail-messages-table
    td:nth-child(4)::before{
        content:"Wykrycie";
    }

    #mail-messages-table
    td:nth-child(5)::before{
        content:"Projekt";
    }

    #mail-messages-table
    td:nth-child(6)::before{
        content:"Status";
    }

    #mail-messages-table
    td:nth-child(7)::before{
        content:"Akcje";
    }

    #mail .mail-table tbody td span,
    #mail .mail-table tbody td strong,
    #mail .mail-table tbody td small,
    #mail .mail-table tbody td a{
        max-width:100% !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #mail .mail-table
    tbody td.mobile-mail-actions-cell{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;
    }

    #mail .mail-table
    tbody td.mobile-mail-actions-cell::before{
        flex:0 0 100% !important;
        margin-bottom:2px !important;
    }

    #mail .mail-table
    tbody td.mobile-mail-actions-cell
    button,

    #mail .mail-table
    tbody td.mobile-mail-actions-cell
    a{
        flex:1 1 110px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:9px 8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        text-align:center !important;
        white-space:normal !important;
    }

    #mail .mobile-mail-action-label{
        font-size:11px;
        line-height:1.2;
        font-weight:800;
    }

    #mail .mail-table
    tbody tr.mobile-mail-empty-row{
        border-left-color:#94a3b8 !important;
    }

    #mail .mail-table
    tbody tr.mobile-mail-empty-row td{
        padding:20px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    #mail .mail-table
    tbody tr.mobile-mail-empty-row td::before{
        display:none !important;
    }


    /* =====================================
       KONTA I REGUŁY
       ===================================== */

    #mail .mail-account-panel{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 0 14px 0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 7px 20px rgba(15,23,42,0.07) !important;

        overflow:hidden !important;
    }

    #mail .mail-panel-header{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:11px !important;

        margin-bottom:14px !important;
        padding-bottom:12px !important;

        border-bottom:1px solid #e2e8f0 !important;
    }

    #mail .mail-panel-header h2{
        margin:0 !important;

        font-size:19px !important;
        line-height:1.3 !important;
    }

    #mail .mail-panel-header p{
        margin:5px 0 0 0 !important;

        color:#64748b !important;

        font-size:12px !important;
        line-height:1.45 !important;
    }

    #mail .mail-panel-header button{
        width:100% !important;
        min-height:46px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #mail .mail-account-form,
    #mail .mail-imap-fields{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    #mail .mail-account-form input,
    #mail .mail-account-form select,
    #mail .mail-imap-fields input{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        margin:0 !important;
    }

    #mail .mail-account-form > button{
        width:100% !important;
        min-height:48px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #mail .mail-account-panel table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:14px 0 0 0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #mail .mail-account-panel table thead{
        display:none !important;
    }

    #mail .mail-account-panel table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;

        width:100% !important;
    }

    #mail .mail-account-panel table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:13px !important;

        background:#f8fafc !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:15px !important;

        overflow:hidden !important;
    }

    #mail .mail-account-panel table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:8px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        font-size:13px !important;
        line-height:1.4 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }

    #mail .mail-account-panel
    table tbody td:last-child{
        border-bottom:none !important;
    }

    #mail .mail-account-panel
    table tbody td::before{
        display:block;

        margin-bottom:4px;

        color:#64748b;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #mail-accounts-table
    td:nth-child(1)::before{
        content:"Konto";
    }

    #mail-accounts-table
    td:nth-child(2)::before{
        content:"Typ";
    }

    #mail-accounts-table
    td:nth-child(3)::before{
        content:"Status";
    }

    #mail-accounts-table
    td:nth-child(4)::before{
        content:"Ostatnia synchronizacja";
    }

    #mail-accounts-table
    td:nth-child(5)::before{
        content:"Akcje";
    }

    #mail-rules-table
    td:nth-child(1)::before{
        content:"Typ";
    }

    #mail-rules-table
    td:nth-child(2)::before{
        content:"Adres / domena";
    }

    #mail-rules-table
    td:nth-child(3)::before{
        content:"Klient";
    }

    #mail-rules-table
    td:nth-child(4)::before{
        content:"Źródło";
    }

    #mail-rules-table
    td:nth-child(5)::before{
        content:"Data";
    }

    #mail-rules-table
    td:nth-child(6)::before{
        content:"Akcje";
    }

    #mail .mail-account-panel
    table tbody td:last-child{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        margin-top:7px !important;
        padding:10px !important;

        background:#ffffff !important;

        border:1px solid #e2e8f0 !important;
        border-radius:11px !important;
    }

    #mail .mail-account-panel
    table tbody td:last-child::before{
        flex:0 0 100% !important;
    }

    #mail .mail-account-panel
    table tbody td:last-child button{
        flex:1 1 110px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }

    #mail .mail-account-panel
    table tbody td[colspan]{
        padding:18px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    #mail .mail-account-panel
    table tbody td[colspan]::before{
        display:none !important;
    }
}


/* =========================================
   POCZTA — PEŁNOEKRANOWY PODGLĄD MAILA
   ========================================= */

@media(max-width:768px){

    body.mobile-mail-reader-open{
        overflow:hidden !important;
    }

    #mail-mobile-reader-modal{
        position:fixed !important;

        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        z-index:100350 !important;

        background:#f1f5f9 !important;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;

        overflow:hidden !important;

        background:#f1f5f9 !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-header{
        flex:0 0 auto;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            12px
            14px;

        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;

        color:#ffffff;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 44%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            );

        box-shadow:
            0 5px 18px rgba(15,23,42,0.22);
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-title{
        min-width:0;

        display:flex;
        align-items:center;
        gap:11px;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-icon{
        width:44px;
        height:44px;
        min-width:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        border:1px solid rgba(255,255,255,0.20);
        border-radius:14px;

        background:rgba(255,255,255,0.13);

        font-size:19px;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-icon i{
        margin:0;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-title span{
        display:block;

        margin-bottom:2px;

        color:#bfdbfe;

        font-size:9px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.1em;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-title h2{
        margin:0;

        color:#ffffff;

        font-size:19px;
        line-height:1.25;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-close{
        width:42px;
        height:42px;
        min-width:42px;
        min-height:42px;

        margin:0;
        padding:0;

        display:flex;
        align-items:center;
        justify-content:center;

        border:1px solid rgba(255,255,255,0.20);
        border-radius:13px;

        background:rgba(255,255,255,0.13) !important;
        color:#ffffff !important;

        font-size:18px;

        box-shadow:none !important;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-close i{
        margin:0;
    }

    #mail-mobile-reader-modal
    .mail-mobile-reader-scroll{
        flex:1 1 auto;
        min-height:0;

        padding:
            12px
            12px
            calc(18px + env(safe-area-inset-bottom))
            12px;

        overflow-y:auto;
        overflow-x:hidden;

        background:#f1f5f9;

        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    #mail-mobile-reader-modal
    #mail-details-panel{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 7px 20px rgba(15,23,42,0.07) !important;

        overflow:visible !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel *{
        max-width:100%;
        box-sizing:border-box;
    }

    #mail-mobile-reader-modal
    #mail-details-panel h2,

    #mail-mobile-reader-modal
    #mail-details-panel h3,

    #mail-mobile-reader-modal
    #mail-details-panel h4,

    #mail-mobile-reader-modal
    #mail-details-panel p,

    #mail-mobile-reader-modal
    #mail-details-panel div,

    #mail-mobile-reader-modal
    #mail-details-panel span,

    #mail-mobile-reader-modal
    #mail-details-panel a{
        white-space:normal !important;

        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel input,

    #mail-mobile-reader-modal
    #mail-details-panel select,

    #mail-mobile-reader-modal
    #mail-details-panel textarea{
        width:100% !important;
        max-width:100% !important;
        min-height:46px !important;

        margin:0 !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel textarea{
        min-height:110px !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel button{
        min-height:44px !important;

        white-space:normal !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    .mail-details-actions,

    #mail-mobile-reader-modal
    #mail-details-panel
    .mail-detail-actions,

    #mail-mobile-reader-modal
    #mail-details-panel
    .mail-assignment-actions{
        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    .mail-details-actions button,

    #mail-mobile-reader-modal
    #mail-details-panel
    .mail-detail-actions button,

    #mail-mobile-reader-modal
    #mail-details-panel
    .mail-assignment-actions button{
        flex:1 1 125px !important;

        width:auto !important;
        min-width:0 !important;

        margin:0 !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel table{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        table-layout:fixed !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel th,

    #mail-mobile-reader-modal
    #mail-details-panel td{
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }
}


/* =========================================
   POCZTA — DODAWANIE RĘCZNEGO MAILA
   ========================================= */

@media(max-width:768px){

    #manual-mail-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #manual-mail-modal
    .manual-mail-modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            0
            14px !important;

        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;

        overflow:hidden !important;

        border-radius:0 !important;
    }

    #manual-mail-modal .app-modal-header{
        flex:0 0 auto;

        margin:0;
        padding:0 0 12px 0;
    }

    #manual-mail-modal
    .manual-mail-description{
        flex:0 0 auto;

        margin:0 0 12px 0;
        padding:11px;

        background:#eff6ff;

        border:1px solid #bfdbfe;
        border-radius:13px;

        color:#475569;

        font-size:11px;
        line-height:1.45;
    }

    #manual-mail-modal .manual-mail-grid{
        flex:1 1 auto;
        min-height:0;

        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;

        padding:4px 2px 20px 2px;

        overflow-y:auto;
        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;
    }

    #manual-mail-modal
    .manual-mail-full{
        grid-column:auto !important;
    }

    #manual-mail-modal
    .manual-mail-grid label{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
    }

    #manual-mail-modal
    .manual-mail-grid input,

    #manual-mail-modal
    .manual-mail-grid select{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        font-size:16px !important;
    }

    #manual-mail-modal
    .manual-mail-grid textarea{
        width:100% !important;
        max-width:100% !important;
        min-height:150px !important;

        font-size:16px !important;
    }

    #manual-mail-modal
    .modal-actions-fixed{
        flex:0 0 auto;

        width:auto;

        position:static !important;
        bottom:auto !important;

        margin:0 -14px;
        padding:
            12px
            14px
            calc(12px + env(safe-area-inset-bottom))
            14px;

        display:grid !important;
        grid-template-columns:1fr 1fr !important;
        gap:9px !important;

        background:#ffffff;

        border-top:1px solid #cbd5e1;

        box-shadow:
            0 -8px 20px rgba(15,23,42,0.09);
    }

    #manual-mail-modal
    .modal-actions-fixed button{
        width:100% !important;
        min-width:0 !important;
        min-height:50px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        font-size:13px !important;
        line-height:1.25 !important;

        text-align:center !important;
        white-space:normal !important;
    }
}

/* =========================================
   POCZTA — NAPRAWA AKCJI NA KOMPUTERZE
   ========================================= */

/*
Mobilne etykiety są domyślnie niewidoczne.
Na telefonie pokażemy je ponownie.
*/
.mobile-mail-action-label{
    display:none !important;
}

/*
Kolumna Akcje nie może zgniatać przycisków.
*/
#mail .mail-table tbody td:nth-child(7){
    min-width:116px;
    white-space:nowrap;
}

/*
Na komputerze przyciski pozostają kwadratowymi ikonami.
*/
#mail .mail-table tbody td:nth-child(7) button,
#mail .mail-table tbody td:nth-child(7) a{
    width:42px;
    min-width:42px;
    max-width:42px;

    height:42px;
    min-height:42px;

    margin:0 4px 0 0;
    padding:0;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    vertical-align:middle;

    white-space:nowrap;
    overflow:hidden;
}

#mail .mail-table tbody td:nth-child(7) button i,
#mail .mail-table tbody td:nth-child(7) a i{
    margin:0;
}

/* =========================================
   POCZTA — POPRAWNY RZĄD AKCJI PRZYPISANIA
   ========================================= */

@media(max-width:768px){

    /*
    Podpisy przycisków na mobilnej liście maili.
    */
    #mail .mobile-mail-action-label{
        display:inline !important;
    }


    /* =====================================
       MAŁY CHECKBOX
       ===================================== */

    #mail-mobile-reader-modal
    #mail-details-panel
    input[type="checkbox"]{
        appearance:auto !important;
        -webkit-appearance:checkbox !important;

        flex:0 0 22px !important;

        width:22px !important;
        min-width:22px !important;
        max-width:22px !important;

        height:22px !important;
        min-height:22px !important;
        max-height:22px !important;

        margin:0 !important;
        padding:0 !important;

        accent-color:#2563eb;
    }


    /* =====================================
       CAŁA SEKCJA PRZYPISANIA
       ===================================== */

    /*
    Dotyczy sekcji zawierającej:
    - wybór projektu lub klienta,
    - checkbox Twórz regułę,
    - przyciski połączenia i odłączenia.

    Wszystkie zwykłe elementy domyślnie
    zajmują całą szerokość.
    */
    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"]){
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        display:grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            44px
            44px !important;

        align-items:center !important;
        gap:8px !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > *{
        grid-column:1 / -1;

        min-width:0 !important;
        max-width:100% !important;
    }


    /* =====================================
       NAGŁÓWKI I SELECT
       ===================================== */

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > h2,

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > h3,

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > h4,

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > p{
        grid-column:1 / -1 !important;

        width:100% !important;

        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > select{
        grid-column:1 / -1 !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;
    }


    /* =====================================
       CHECKBOX — LEWA CZĘŚĆ OSTATNIEGO RZĘDU
       ===================================== */

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > label{
        grid-column:1 !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-start !important;
        gap:7px !important;

        color:#64748b !important;

        font-size:11px !important;
        line-height:1.25 !important;
        font-weight:700 !important;

        white-space:nowrap !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }


    /* =====================================
       PRZYCISKI W ZAGNIEŻDŻONYM KONTENERZE
       ===================================== */

    /*
    W Twoim kodzie oba przyciski znajdują się
    w dodatkowym kontenerze. Umieszczamy ten
    kontener w dwóch ostatnich kolumnach.
    */
    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > div:has(> button){
        grid-column:2 / 4 !important;

        width:96px !important;
        min-width:96px !important;
        max-width:96px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center !important;
        justify-content:flex-end !important;
        gap:8px !important;

        background:transparent !important;
        border:none !important;
        box-shadow:none !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > div:has(> button)
    > button{
        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        max-width:44px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > div:has(> button)
    > button i{
        margin:0 !important;
    }


    /* =====================================
       ZABEZPIECZENIE — PRZYCISKI BEZ KONTENERA
       ===================================== */

    /*
    Gdyby w którejś sekcji przyciski były
    bezpośrednimi elementami sekcji.
    */
    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > button{
        width:44px !important;
        min-width:44px !important;
        max-width:44px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > button:nth-of-type(1){
        grid-column:2 !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > button:nth-of-type(2){
        grid-column:3 !important;
    }

    #mail-mobile-reader-modal
    #mail-details-panel
    div:has(> select):has(> label input[type="checkbox"])
    > button i{
        margin:0 !important;
    }
}

/* =========================================
   POCZTA — SZEROKIE AKCJE NA LIŚCIE MAILI
   ========================================= */

@media(max-width:768px){

    /*
    Pole Akcje jako siatka dwóch równych przycisków.
    */
    #mail .mail-table
    tbody td.mobile-mail-actions-cell,

    #mail .mail-table
    tbody td:nth-child(7){
        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        align-items:stretch !important;
        gap:8px !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin-top:8px !important;
        padding:12px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:12px !important;

        white-space:normal !important;
    }

    /*
    Napis „Akcje” zajmuje cały pierwszy rząd.
    */
    #mail .mail-table
    tbody td.mobile-mail-actions-cell::before,

    #mail .mail-table
    tbody td:nth-child(7)::before{
        grid-column:1 / -1 !important;

        width:100% !important;
        margin:0 0 2px 0 !important;
    }

    /*
    Kasujemy komputerową szerokość 42 px.
    Każdy przycisk wypełnia połowę rzędu.
    */
    #mail .mail-table
    tbody td.mobile-mail-actions-cell > button,

    #mail .mail-table
    tbody td.mobile-mail-actions-cell > a,

    #mail .mail-table
    tbody td:nth-child(7) > button,

    #mail .mail-table
    tbody td:nth-child(7) > a{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;
        min-height:48px !important;
        max-height:none !important;

        margin:0 !important;
        padding:9px 7px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        border-radius:11px !important;

        font-size:11px !important;
        line-height:1.2 !important;

        text-align:center !important;
        white-space:normal !important;

        overflow:visible !important;
    }

    /*
    Obsługa sytuacji, gdy przyciski znajdują się
    w dodatkowym kontenerze.
    */
    #mail .mail-table
    tbody td.mobile-mail-actions-cell
    > .table-icon-actions,

    #mail .mail-table
    tbody td:nth-child(7)
    > .table-icon-actions{
        grid-column:1 / -1 !important;

        width:100% !important;
        min-width:0 !important;

        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:8px !important;
    }

    #mail .mail-table
    tbody td.mobile-mail-actions-cell
    > .table-icon-actions button,

    #mail .mail-table
    tbody td:nth-child(7)
    > .table-icon-actions button{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        height:auto !important;
        min-height:48px !important;
        max-height:none !important;

        margin:0 !important;
        padding:9px 7px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;
    }

    /*
    Tekst przycisku nie może dzielić się
    po jednej literze.
    */
    #mail .mail-table
    tbody td.mobile-mail-actions-cell
    .mobile-mail-action-label,

    #mail .mail-table
    tbody td:nth-child(7)
    .mobile-mail-action-label{
        display:inline !important;

        min-width:0 !important;

        font-size:11px !important;
        line-height:1.2 !important;
        font-weight:800 !important;

        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
        hyphens:none !important;
    }

    #mail .mail-table
    tbody td.mobile-mail-actions-cell button i,

    #mail .mail-table
    tbody td:nth-child(7) button i{
        flex:0 0 auto !important;

        margin:0 !important;
    }
}

/* =========================================
   HARMONOGRAM — PEŁNY UKŁAD MOBILNY
   ========================================= */

@media(max-width:768px){

    #schedule,
    #harmonogram-root,
    .gantt-module{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow:visible !important;
    }

    .gantt-module{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
    }


    /* =====================================
       NAGŁÓWEK
       ===================================== */

    .gantt-header{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:16px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:20px !important;

        box-shadow:
            0 7px 20px rgba(15,23,42,0.07) !important;
    }

    .gantt-header > div:first-child{
        width:100% !important;
        min-width:0 !important;
    }

    .gantt-header h1{
        margin:0 0 5px 0 !important;

        font-size:23px !important;
        line-height:1.25 !important;
    }

    .gantt-refreshed{
        color:#64748b !important;

        font-size:11px !important;
        line-height:1.4 !important;
    }

    .gantt-toolbar-modern{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:9px !important;
    }


    /* =====================================
       DZIEŃ / TYDZIEŃ / MIESIĄC
       ===================================== */

    .gantt-zoom-switch{
        width:100% !important;
        min-width:0 !important;

        padding:4px !important;

        display:grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap:4px !important;

        border-radius:15px !important;
    }

    .gantt-zoom-switch button{
        width:100% !important;
        min-width:0 !important;
        min-height:46px !important;

        margin:0 !important;
        padding:8px 5px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:4px !important;

        border-radius:11px !important;

        font-size:11px !important;
        line-height:1.15 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    .gantt-zoom-switch button i{
        margin:0 !important;
        font-size:15px !important;
    }


    /* =====================================
       GŁÓWNE AKCJE
       ===================================== */

    .gantt-toolbar-main-actions{
        width:100% !important;

        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;
    }

    .gantt-toolbar-main-actions button{
        flex:1 1 105px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:9px 7px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border:1px solid #dbe3ef !important;
        border-radius:12px !important;

        background:#f8fafc !important;

        font-size:11px !important;
        line-height:1.2 !important;

        text-align:center !important;
        white-space:normal !important;

        box-shadow:none !important;
    }

    .gantt-toolbar-main-actions
    button.gantt-toolbar-button-active{
        background:#2563eb !important;
        border-color:#2563eb !important;
        color:#ffffff !important;
    }

    .gantt-toolbar-main-actions button i{
        margin:0 !important;
    }


    /* =====================================
       PEŁNY EKRAN I CSV
       ===================================== */

    .gantt-toolbar-mini-actions{
        width:100% !important;

        margin:0 !important;

        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;
    }

    .gantt-toolbar-mini-actions button{
        width:100% !important;
        min-width:0 !important;
        height:auto !important;
        min-height:46px !important;

        margin:0 !important;
        padding:8px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:6px !important;

        border:1px solid #dbe3ef !important;
        border-radius:12px !important;

        background:#f8fafc !important;

        color:#334155 !important;

        font-size:12px !important;

        box-shadow:none !important;
    }

    .gantt-toolbar-mini-actions
    button:first-child::after{
        content:"Pełny ekran";

        font-size:11px;
        font-weight:800;
    }

    .gantt-toolbar-mini-actions
    button:last-child::after{
        content:"Eksport CSV";

        font-size:11px;
        font-weight:800;
    }

    .gantt-toolbar-mini-actions button i{
        margin:0 !important;
    }


    /* =====================================
       FILTRY
       ===================================== */

    .gantt-filters{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:14px !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.06) !important;
    }

    .gantt-search-wrapper{
        width:100% !important;
        min-width:0 !important;
    }

    .gantt-filters input,
    .gantt-filters select{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
        min-height:48px !important;

        margin:0 !important;

        font-size:16px !important;
    }

    .gantt-search-clear{
        right:10px !important;

        width:30px !important;
        min-width:30px !important;
        height:30px !important;
        min-height:30px !important;

        margin:0 !important;
    }


    /* =====================================
       TRYB WIDOKU I WIDOCZNOŚĆ
       ===================================== */

    .gantt-toolbar{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:13px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:12px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.06) !important;
    }

    .gantt-view-modes,
    .gantt-visibility-toggles{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;
    }

    .gantt-view-modes button,
    .gantt-visibility-toggles button{
        flex:1 1 110px !important;

        width:auto !important;
        min-width:0 !important;
        min-height:47px !important;

        margin:0 !important;
        padding:8px 6px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border-radius:12px !important;

        font-size:11px !important;
        line-height:1.2 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    .gantt-view-modes button i,
    .gantt-visibility-toggles button i{
        flex:0 0 auto !important;
        margin:0 !important;
    }


    /* =====================================
       LICZNIKI
       ===================================== */

    .gantt-counters{
        width:100% !important;

        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;

        margin:0 !important;
    }

    .gantt-counter{
        width:100% !important;
        min-width:0 !important;
        min-height:105px !important;

        margin:0 !important;
        padding:13px !important;

        display:flex !important;
        flex-direction:column !important;
        justify-content:space-between !important;
        gap:8px !important;

        border:1px solid #dbe3ef !important;
        border-radius:16px !important;

        box-shadow:
            0 5px 16px rgba(15,23,42,0.06) !important;
    }

    .gantt-counter span{
        min-height:29px;

        margin:0 !important;

        font-size:10px !important;
        line-height:1.35 !important;
        font-weight:800 !important;

        white-space:normal !important;
    }

    .gantt-counter strong{
        font-size:27px !important;
        line-height:1 !important;
    }

    .gantt-counter-clickable:active{
        transform:scale(0.98) !important;
    }


    /* =====================================
       WYKRES
       ===================================== */

    .gantt-chart{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:64dvh !important;
        min-height:430px !important;
        max-height:680px !important;

        margin:0 !important;

        display:flex !important;

        overflow:hidden !important;

        border:1px solid #cbd5e1 !important;
        border-radius:18px !important;

        background:#ffffff !important;

        box-shadow:
            0 8px 24px rgba(15,23,42,0.09) !important;
    }

    /*
    Lewa kolumna pozostaje zawsze widoczna.
    */
    .gantt-left{
        position:relative !important;
        left:auto !important;

        flex:0 0 142px !important;

        width:142px !important;
        min-width:142px !important;
        max-width:142px !important;

        height:100% !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        border-right:2px solid #cbd5e1 !important;

        background:#ffffff !important;

        z-index:12 !important;

        scrollbar-width:none;
    }

    .gantt-left::-webkit-scrollbar{
        width:0 !important;
        height:0 !important;
    }

    .gantt-left-header{
        height:48px !important;

        padding:7px 8px !important;

        font-size:10px !important;
        line-height:1.2 !important;
    }

    .gantt-left-header-actions{
        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:4px !important;
    }

    .gantt-left-header-actions > span{
        min-width:0;

        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .gantt-left-header-actions div{
        flex:0 0 auto !important;
        gap:3px !important;
    }

    .gantt-left-header-actions button{
        width:27px !important;
        min-width:27px !important;
        height:27px !important;
        min-height:27px !important;

        margin:0 !important;
        padding:0 !important;
    }

    .gantt-left-row{
        width:100% !important;
        min-width:0 !important;

        height:88px !important;
        min-height:88px !important;

        padding:8px !important;

        gap:3px !important;

        overflow:hidden !important;
    }

    .gantt-left-row-project{
        padding-left:7px !important;
    }

    .gantt-left-row-task{
        padding-left:11px !important;
    }

    .gantt-left-row-employee,
    .gantt-left-row-resource{
        padding-left:15px !important;
    }

    .gantt-left-row-task-employee,
    .gantt-left-row-task-resource{
        padding-left:19px !important;
    }

    .gantt-left-row strong{
        width:100% !important;
        min-width:0 !important;

        font-size:10px !important;
        line-height:1.25 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .gantt-left-row span{
        width:100% !important;
        min-width:0 !important;

        font-size:9px !important;
        line-height:1.25 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .gantt-left-row small{
        width:100% !important;
        min-width:0 !important;

        font-size:8px !important;
        line-height:1.25 !important;

        display:-webkit-box !important;
        -webkit-line-clamp:2;
        -webkit-box-orient:vertical;

        white-space:normal !important;
        overflow:hidden !important;
    }

    .gantt-collapse-button{
        width:22px !important;
        min-width:22px !important;
        height:22px !important;
        min-height:22px !important;

        margin:0 3px 0 0 !important;
        padding:0 !important;

        vertical-align:middle !important;
    }

    .gantt-collapse-spacer{
        width:4px !important;
    }


    /* =====================================
       PRZEWIJANA OŚ CZASU
       ===================================== */

    .gantt-timeline{
        position:relative !important;

        flex:1 1 auto !important;

        width:auto !important;
        min-width:0 !important;
        height:100% !important;

        overflow-x:auto !important;
        overflow-y:auto !important;

        background:#ffffff !important;

        cursor:default !important;

        touch-action:pan-x pan-y !important;
        overscroll-behavior:contain !important;

        -webkit-overflow-scrolling:touch;
    }

    .gantt-timeline::-webkit-scrollbar{
        width:7px !important;
        height:7px !important;
    }

    .gantt-days,
    .gantt-day,
    .gantt-week,
    .gantt-month{
        height:48px !important;
        min-height:48px !important;
    }

    .gantt-day{
        font-size:9px !important;
    }

    .gantt-week,
    .gantt-month{
        padding:0 4px !important;

        font-size:9px !important;
    }

    .gantt-bar{
        height:38px !important;

        padding:7px 8px !important;

        border-radius:10px !important;

        font-size:9px !important;
        line-height:1.15 !important;

        touch-action:pan-x pan-y !important;
    }

    .gantt-bar:hover{
        transform:none !important;
    }

    /*
    Uchwyty przeciągania są zbyt małe na telefon.
    Na urządzeniu mobilnym wyłączamy je wizualnie.
    */
    .gantt-resize-handle{
        display:none !important;
    }

    .gantt-bar-label{
        font-size:9px !important;
        line-height:1.15 !important;
    }


    /* =====================================
       BRAK DANYCH
       ===================================== */

    .gantt-chart-empty{
        min-height:210px !important;

        padding:22px 16px !important;

        border-radius:18px !important;
    }

    .gantt-chart-empty h2{
        font-size:20px !important;
    }

    .gantt-chart-empty p{
        font-size:13px !important;
        line-height:1.5 !important;
    }
}


/* =========================================
   HARMONOGRAM — MOBILNY PANEL SZCZEGÓŁÓW
   ========================================= */

@media(max-width:768px){

    body.gantt-side-panel-open{
        overflow:hidden !important;
    }

    #gantt-side-panel-modal{
        position:fixed !important;
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        display:none;

        align-items:stretch !important;
        justify-content:stretch !important;

        background:#f1f5f9 !important;

        z-index:100400 !important;
    }

    #gantt-side-panel-modal[style*="display: flex"],
    #gantt-side-panel-modal[style*="display:flex"]{
        display:flex !important;
    }

    #gantt-side-panel-modal
    .gantt-side-panel{
        position:relative !important;

        top:auto !important;
        right:auto !important;
        bottom:auto !important;
        left:auto !important;

        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        display:flex !important;
        flex-direction:column !important;

        background:#f1f5f9 !important;

        box-shadow:none !important;

        transform:translateX(100%) !important;
        transition:transform 0.2s ease !important;

        overflow:hidden !important;
    }

    #gantt-side-panel-modal
    .gantt-side-panel.open{
        right:auto !important;
        transform:translateX(0) !important;
    }

    #gantt-side-panel-modal
    .gantt-side-header{
        flex:0 0 auto;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            12px
            14px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;

        color:#ffffff !important;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 43%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            ) !important;

        border:none !important;

        box-shadow:
            0 5px 18px rgba(15,23,42,0.22);
    }

    #gantt-side-panel-modal
    .gantt-side-title{
        min-width:0 !important;
    }

    #gantt-side-panel-modal
    .gantt-side-title > span{
        display:block;

        margin-bottom:2px;

        color:#bfdbfe !important;

        font-size:9px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.1em;
    }

    #gantt-side-panel-modal
    .gantt-side-header h2{
        min-width:0 !important;

        margin:0 !important;

        color:#ffffff !important;

        font-size:19px !important;
        line-height:1.25 !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;
        white-space:nowrap !important;
    }

    #gantt-side-panel-modal
    .gantt-side-close{
        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        min-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        border:1px solid rgba(255,255,255,0.20) !important;
        border-radius:14px !important;

        background:rgba(255,255,255,0.13) !important;
        color:#ffffff !important;
    }

    #gantt-side-panel-modal
    .gantt-side-close i{
        margin:0 !important;
    }

    #gantt-side-panel-modal
    .gantt-side-content{
        flex:1 1 auto;
        min-height:0 !important;

        padding:
            14px
            12px
            calc(20px + env(safe-area-inset-bottom))
            12px !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        background:#f1f5f9 !important;

        -webkit-overflow-scrolling:touch;
    }

    #gantt-side-panel-modal
    .gantt-action-button{
        width:100% !important;
        min-height:50px !important;

        margin:0 0 12px 0 !important;

        border-radius:14px !important;
    }

    #gantt-side-panel-modal
    .gantt-side-data-grid{
        width:100% !important;

        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;
    }

    #gantt-side-panel-modal
    .gantt-side-data-item{
        min-width:0 !important;

        padding:12px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:14px !important;

        box-shadow:
            0 4px 13px rgba(15,23,42,0.05) !important;
    }

    #gantt-side-panel-modal
    .gantt-side-data-full{
        grid-column:1 / -1 !important;
    }

    #gantt-side-panel-modal
    .gantt-side-data-item label,
    #gantt-side-panel-modal
    .gantt-side-extra label{
        display:block !important;

        margin:0 0 5px 0 !important;

        color:#64748b !important;

        font-size:9px !important;
        line-height:1.2 !important;
        font-weight:900 !important;

        text-transform:uppercase !important;
        letter-spacing:0.06em !important;
    }

    #gantt-side-panel-modal
    .gantt-side-data-item p{
        min-width:0 !important;

        margin:0 !important;
        padding:0 !important;

        background:transparent !important;

        color:#0f172a !important;

        font-size:13px !important;
        line-height:1.4 !important;
        font-weight:700 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #gantt-side-panel-modal
    .gantt-side-extra{
        width:100% !important;
        min-width:0 !important;

        margin-top:12px !important;
        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:16px !important;

        box-shadow:
            0 5px 16px rgba(15,23,42,0.05) !important;
    }

    #gantt-side-panel-modal
    .gantt-side-extra:empty{
        display:none !important;
    }

    #gantt-side-panel-modal
    .gantt-side-extra p{
        width:100% !important;
        min-width:0 !important;

        margin:0 0 9px 0 !important;
        padding:10px !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    #gantt-side-panel-modal
    .gantt-side-extra select{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;
    }

    #gantt-side-panel-modal
    .gantt-dependency-item{
        width:100% !important;
        min-width:0 !important;

        gap:8px !important;
    }

    #gantt-side-panel-modal
    .gantt-dependency-item > div{
        min-width:0 !important;
    }

    #gantt-side-panel-modal
    .gantt-dependency-item button{
        flex:0 0 42px !important;

        width:42px !important;
        min-width:42px !important;
        height:42px !important;
        min-height:42px !important;

        margin:0 !important;
    }
}


/* =========================================
   HARMONOGRAM — KONFLIKTY MOBILNIE
   ========================================= */

@media(max-width:768px){

    #gantt-conflicts-modal{
        align-items:stretch !important;
        padding:0 !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            calc(12px + env(safe-area-inset-top))
            12px
            calc(18px + env(safe-area-inset-bottom))
            12px !important;

        border-radius:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

    #gantt-conflicts-modal .topbar{
        position:sticky !important;
        top:0 !important;
        z-index:4 !important;

        margin:0 -12px 12px -12px !important;
        padding:0 12px 12px 12px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;

        background:#ffffff !important;
    }

    #gantt-conflicts-modal .topbar h2{
        min-width:0 !important;

        margin:0 !important;

        font-size:19px !important;
        line-height:1.25 !important;
    }

    #gantt-conflicts-modal .topbar button{
        flex:0 0 auto !important;

        width:auto !important;
        min-width:88px !important;

        margin:0 !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        background:transparent !important;
        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table thead{
        display:none !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:12px !important;

        width:100% !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:14px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:5px solid #dc2626 !important;
        border-radius:16px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.07) !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        padding:9px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        font-size:13px !important;
        line-height:1.45 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
        word-break:break-word !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table tbody td:last-child{
        border-bottom:none !important;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table tbody td::before{
        display:block;

        margin-bottom:5px;

        color:#64748b;

        font-size:9px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table
    td:nth-child(1)::before{
        content:"Typ konfliktu";
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table
    td:nth-child(2)::before{
        content:"Pierwszy element";
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table
    td:nth-child(3)::before{
        content:"Termin";
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table
    td:nth-child(4)::before{
        content:"Nakłada się z";
    }

    #gantt-conflicts-modal
    .gantt-conflicts-table
    td:nth-child(5)::before{
        content:"Termin konfliktu";
    }
}


/* =========================================
   HARMONOGRAM — PEŁNY EKRAN NA TELEFONIE
   ========================================= */

@media(max-width:768px){

    #harmonogram-fullscreen-root{
        z-index:100200 !important;

        background:#eef2ff !important;
    }

    #harmonogram-fullscreen-root
    .gantt-fullscreen{
        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;

        padding:
            calc(10px + env(safe-area-inset-top))
            10px
            calc(10px + env(safe-area-inset-bottom))
            10px !important;

        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;
    }

    #harmonogram-fullscreen-root
    .gantt-chart{
        flex:0 0 auto !important;

        height:68dvh !important;
        min-height:430px !important;
        max-height:none !important;
    }
}

/* =========================================
   KALENDARZE PRACY — UKŁAD MOBILNY
   ========================================= */

@media(max-width:768px){

    #work-calendars,
    #work-calendars-root,
    .work-calendar-module{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow-x:hidden !important;
    }

    .work-calendar-module{
        display:flex !important;
        flex-direction:column !important;
        gap:12px !important;
    }


    /* =====================================
       NAGŁÓWEK
       ===================================== */

    .work-calendar-header{
        width:100% !important;

        margin:0 !important;
        padding:16px !important;

        display:block !important;

        border:1px solid #dbe3ef !important;
        border-radius:19px !important;

        box-shadow:
            0 6px 18px rgba(15,23,42,0.06) !important;
    }

    .work-calendar-header h1{
        margin:0 0 6px 0 !important;

        font-size:23px !important;
        line-height:1.25 !important;
    }

    .work-calendar-header p{
        margin:0 !important;

        font-size:12px !important;
        line-height:1.5 !important;
    }


    /* =====================================
       ZAKŁADKI
       ===================================== */

    .work-calendar-tabs{
        width:100% !important;

        margin:0 !important;
        padding:8px !important;

        display:grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;
        gap:6px !important;

        border:1px solid #dbe3ef !important;
        border-radius:17px !important;

        box-shadow:
            0 5px 16px rgba(15,23,42,0.05) !important;
    }

    .work-calendar-tabs button{
        width:100% !important;
        min-width:0 !important;
        min-height:54px !important;

        margin:0 !important;
        padding:7px 4px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        border-radius:11px !important;

        font-size:10px !important;
        line-height:1.15 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    .work-calendar-tabs button i{
        margin:0 !important;

        font-size:15px !important;
    }


    /* =====================================
       GŁÓWNA KARTA
       ===================================== */

    .work-calendar-card{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;
        padding:12px !important;

        border:1px solid #dbe3ef !important;
        border-radius:18px !important;

        box-shadow:
            0 7px 20px rgba(15,23,42,0.07) !important;

        overflow:hidden !important;
    }

    .work-calendar-card-header{
        width:100% !important;
        min-width:0 !important;

        margin:0 0 12px 0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        gap:9px !important;
    }

    .work-calendar-card-header > button{
        width:100% !important;
        min-height:48px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    /* =====================================
       NAWIGACJA MIESIĄCA
       ===================================== */

    .work-calendar-month-nav{
        width:100% !important;
        min-width:0 !important;

        display:grid !important;
        grid-template-columns:
            44px minmax(0, 1fr) 44px !important;
        align-items:center !important;
        gap:7px !important;
    }

    .work-calendar-month-nav h2{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;

        font-size:16px !important;
        line-height:1.3 !important;

        text-align:center !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .work-calendar-month-nav button{
        width:44px !important;
        min-width:44px !important;
        max-width:44px !important;

        height:44px !important;
        min-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border-radius:12px !important;
    }

    .work-calendar-month-nav button i{
        margin:0 !important;
    }


    /* =====================================
       KALENDARZ PRACOWNIKÓW I ZASOBÓW
       ===================================== */

    .calendar-split-grid{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        display:flex !important;

        overflow:hidden !important;

        border:1px solid #cbd5e1 !important;
        border-radius:15px !important;

        background:#ffffff !important;
    }

    /*
    Kolumna nazw pozostaje cały czas widoczna.
    */
    .calendar-fixed-column{
        position:relative !important;

        flex:0 0 126px !important;

        width:126px !important;
        min-width:126px !important;
        max-width:126px !important;

        border-right:2px solid #94a3b8 !important;

        background:#ffffff !important;

        z-index:5 !important;

        box-shadow:
            5px 0 12px rgba(15,23,42,0.07) !important;
    }

    .calendar-fixed-column table{
        width:126px !important;
        min-width:126px !important;
        max-width:126px !important;

        margin:0 !important;
    }

    .calendar-fixed-column th,
    .calendar-fixed-column td{
        width:126px !important;
        min-width:126px !important;
        max-width:126px !important;

        height:60px !important;
        min-height:60px !important;

        padding:7px !important;

        text-align:left !important;

        overflow:hidden !important;
    }

    .calendar-fixed-column th{
        height:52px !important;
        min-height:52px !important;

        font-size:10px !important;
    }

    .calendar-employee-name{
        width:100% !important;
        min-width:0 !important;

        margin-bottom:3px !important;

        font-size:10px !important;
        line-height:1.25 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .calendar-employee-summary{
        width:100% !important;
        min-width:0 !important;

        font-size:8px !important;
        line-height:1.3 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    /*
    Tylko prawa część przesuwa się w poziomie.
    */
    .calendar-scroll-column{
        position:relative !important;

        flex:1 1 auto !important;

        width:auto !important;
        min-width:0 !important;
        max-width:none !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        background:#ffffff !important;

        touch-action:pan-x pan-y !important;
        overscroll-behavior-x:contain !important;

        -webkit-overflow-scrolling:touch;
    }

    .calendar-scroll-column table{
        width:max-content !important;
        min-width:100% !important;

        margin:0 !important;
    }

    .calendar-scroll-column th{
        width:44px !important;
        min-width:44px !important;

        height:52px !important;
        min-height:52px !important;

        font-size:9px !important;
    }

    .calendar-scroll-column td{
        position:relative !important;

        width:44px !important;
        min-width:44px !important;

        height:60px !important;
        min-height:60px !important;

        padding:0 !important;
    }

    .calendar-scroll-column th span{
        margin-bottom:2px !important;

        font-size:8px !important;
    }

    .calendar-scroll-column th strong{
        font-size:11px !important;
    }

    .calendar-work-block{
        width:100% !important;
        height:30px !important;

        margin:0 !important;
    }

    .calendar-company-day-marker{
        position:absolute !important;
        top:4px !important;
        left:50% !important;

        width:8px !important;
        height:8px !important;

        margin:0 !important;

        transform:translateX(-50%);
    }

    .calendar-events-layer{
        left:2px !important;
        right:2px !important;
        bottom:3px !important;

        gap:1px !important;
    }

    .calendar-event-marker{
        min-width:16px !important;
        max-width:30px !important;
        height:14px !important;

        padding:0 2px !important;

        font-size:7px !important;
        line-height:14px !important;
    }


    /* =====================================
       DNI WOLNE — FORMULARZ
       ===================================== */

    .work-calendar-company-card
    .calendar-hours-row{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }

    .work-calendar-company-card
    .calendar-hours-row > div{
        width:100% !important;
        min-width:0 !important;
    }

    .work-calendar-company-card
    .calendar-hours-row input{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        font-size:16px !important;
    }

    .work-calendar-company-card
    > .calendar-primary-button,

    .work-calendar-company-card
    > .calendar-secondary-button{
        width:100% !important;
        min-height:48px !important;

        margin:0 0 8px 0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    /* =====================================
       DNI WOLNE — KARTY
       ===================================== */

    .calendar-company-days-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:10px 0 0 0 !important;

        background:transparent !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:visible !important;
    }

    .calendar-company-days-table thead{
        display:none !important;
    }

    .calendar-company-days-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;

        width:100% !important;
    }

    .calendar-company-days-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:13px !important;

        background:#f8fafc !important;

        border:1px solid #dbe3ef !important;
        border-left:5px solid #f59e0b !important;
        border-radius:15px !important;

        box-shadow:
            0 4px 13px rgba(15,23,42,0.05) !important;
    }

    .calendar-company-days-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:8px 0 !important;

        border:none !important;
        border-bottom:1px solid #e2e8f0 !important;

        font-size:13px !important;
        line-height:1.4 !important;

        text-align:left !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    .calendar-company-days-table
    tbody td:last-child{
        border-bottom:none !important;
    }

    .calendar-company-days-table
    tbody td::before{
        display:block;

        margin-bottom:4px;

        color:#64748b;

        font-size:9px;
        line-height:1.2;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    .calendar-company-days-table
    td:nth-child(1)::before{
        content:"Data";
    }

    .calendar-company-days-table
    td:nth-child(2)::before{
        content:"Nazwa";
    }

    .calendar-company-days-table
    td:nth-child(3)::before{
        content:"Typ";
    }

    .calendar-company-days-table
    td:nth-child(4)::before{
        content:"Akcje";
    }

    .calendar-company-days-table
    tbody td:nth-child(4){
        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap:8px !important;

        margin-top:6px !important;
        padding:10px !important;

        background:#ffffff !important;

        border:1px solid #e2e8f0 !important;
        border-radius:11px !important;
    }

    .calendar-company-days-table
    tbody td:nth-child(4)::before{
        grid-column:1 / -1 !important;
    }

    .calendar-company-days-table
    tbody td:nth-child(4) button{
        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;
        padding:8px 5px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        font-size:11px !important;
        line-height:1.2 !important;

        white-space:normal !important;
    }

    .calendar-company-days-table
    tbody td[colspan]{
        padding:20px 8px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }

    .calendar-company-days-table
    tbody td[colspan]::before{
        display:none !important;
    }


    /* =====================================
       POWIADOMIENIA
       ===================================== */

    #toast-container{
        top:auto !important;
        right:12px !important;
        bottom:
            calc(12px + env(safe-area-inset-bottom))
            !important;
        left:12px !important;

        width:auto !important;
    }

    .work-calendar-toast{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        box-sizing:border-box !important;
    }
}


/* =========================================
   KALENDARZE PRACY — MODALE MOBILNE
   ========================================= */

@media(max-width:768px){

    body:has(
        #work-calendars-modal-root
        .calendar-modal-overlay
    ){
        overflow:hidden !important;
    }

    #work-calendars-modal-root
    .calendar-modal-overlay{
        position:fixed !important;
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        background:#f1f5f9 !important;

        z-index:100450 !important;
    }

    #work-calendars-modal-root
    .calendar-modal{
        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;

        background:#f1f5f9 !important;

        border:none !important;
        border-radius:0 !important;

        box-shadow:none !important;

        overflow:hidden !important;
    }

    #work-calendars-modal-root
    .calendar-modal-header{
        flex:0 0 auto;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            12px
            14px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:10px !important;

        color:#ffffff !important;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 43%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            ) !important;

        border:none !important;

        box-shadow:
            0 5px 18px rgba(15,23,42,0.22);
    }

    #work-calendars-modal-root
    .calendar-modal-header h2{
        min-width:0 !important;

        margin:0 !important;

        color:#ffffff !important;

        font-size:18px !important;
        line-height:1.25 !important;

        white-space:normal !important;
    }

    #work-calendars-modal-root
    .calendar-modal-header h2 i{
        margin-right:6px !important;
    }

    #work-calendars-modal-root
    .calendar-modal-header button{
        flex:0 0 42px !important;

        width:42px !important;
        min-width:42px !important;
        max-width:42px !important;

        height:42px !important;
        min-height:42px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border:1px solid rgba(255,255,255,0.20) !important;
        border-radius:13px !important;

        background:rgba(255,255,255,0.13) !important;
        color:#ffffff !important;
    }

    #work-calendars-modal-root
    .calendar-modal-header button i{
        margin:0 !important;
    }

    #work-calendars-modal-root
    .calendar-modal-body{
        flex:1 1 auto;
        min-height:0 !important;

        padding:14px !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        background:#f1f5f9 !important;

        -webkit-overflow-scrolling:touch;
    }

    #work-calendars-modal-root
    .calendar-modal-body > p{
        margin:0 0 14px 0 !important;
        padding:13px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:14px !important;

        box-shadow:
            0 4px 13px rgba(15,23,42,0.05) !important;
    }

    #work-calendars-modal-root
    .calendar-modal-body h3{
        margin:0 0 10px 0 !important;

        font-size:16px !important;
    }

    #work-calendars-modal-root
    .calendar-modal-body input:not(
        [type="checkbox"]
    ),

    #work-calendars-modal-root
    .calendar-modal-body select,

    #work-calendars-modal-root
    .calendar-modal-body textarea{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        margin:0 !important;

        font-size:16px !important;
    }

    #work-calendars-modal-root
    .calendar-modal-body textarea{
        min-height:120px !important;
    }

    /*
    Checkboxy nie mogą dziedziczyć szerokości 100%.
    */
    #work-calendars-modal-root
    .calendar-modal-body
    input[type="checkbox"]{
        appearance:auto !important;
        -webkit-appearance:checkbox !important;

        flex:0 0 22px !important;

        width:22px !important;
        min-width:22px !important;
        max-width:22px !important;

        height:22px !important;
        min-height:22px !important;
        max-height:22px !important;

        margin:0 !important;
        padding:0 !important;

        accent-color:#2563eb;
    }

    #work-calendars-modal-root
    .calendar-employee-list{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:8px !important;
    }

    #work-calendars-modal-root
    .calendar-employee-list label,

    #work-calendars-modal-root
    .calendar-checkbox-row{
        width:100% !important;
        min-width:0 !important;

        margin:0 !important;
        padding:11px !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        gap:8px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-radius:12px !important;

        color:#334155 !important;

        font-size:12px !important;
        line-height:1.3 !important;
        font-weight:800 !important;

        text-transform:none !important;
        letter-spacing:0 !important;
    }

    #work-calendars-modal-root
    .calendar-hours-row{
        width:100% !important;

        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;
        gap:9px !important;
    }

    #work-calendars-modal-root
    .calendar-hours-row > div{
        min-width:0 !important;
    }

    #work-calendars-modal-root
    .calendar-modal-footer{
        flex:0 0 auto;

        width:100% !important;

        padding:
            11px
            12px
            calc(11px + env(safe-area-inset-bottom))
            12px !important;

        display:grid !important;
        grid-template-columns:
            repeat(
                auto-fit,
                minmax(88px, 1fr)
            ) !important;
        gap:8px !important;

        background:#ffffff !important;

        border-top:1px solid #cbd5e1 !important;

        box-shadow:
            0 -7px 18px rgba(15,23,42,0.08) !important;
    }

    #work-calendars-modal-root
    .calendar-modal-footer button{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:8px 5px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:5px !important;

        font-size:11px !important;
        line-height:1.2 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    /*
    Podgląd wydarzenia nie ma dolnego paska,
    więc karta treści powinna kończyć się naturalnie.
    */
    #work-calendars-modal-root
    .calendar-event-preview-modal
    .calendar-modal-body{
        display:flex !important;
        flex-direction:column !important;
        gap:10px !important;
    }

    #work-calendars-modal-root
    .calendar-event-preview-modal
    .calendar-modal-body br{
        display:none !important;
    }
}

/* =========================================
   KALENDARZE PRACY — NATYWNY WYBÓR DATY
   ========================================= */

@media(max-width:768px){

    #company-day-date{
        appearance:auto !important;
        -webkit-appearance:auto !important;

        width:100% !important;
        min-height:50px !important;

        padding-right:12px !important;

        cursor:pointer !important;
    }

    #company-day-date::-webkit-calendar-picker-indicator{
        display:block !important;

        width:24px !important;
        height:24px !important;

        margin:0 !important;
        padding:4px !important;

        opacity:1 !important;

        cursor:pointer !important;
    }
}

/* =========================================
   SZCZEGÓŁY PROJEKTU — AKCJE STATUSU NA ŚRODKU
   ========================================= */

@media(max-width:768px){

    /*
    Na komputerze pozycja zależy od statusu projektu.
    Na telefonie wyłączamy przesuwanie w lewo i prawo.
    */
    #project-details-modal
    #project-context-actions.project-context-actions-linked{

        --actions-left:50% !important;
        --actions-shift:0% !important;
        --connector-left:50% !important;

        position:relative !important;

        left:auto !important;
        right:auto !important;

        transform:none !important;

        width:calc(100% - 24px) !important;
        min-width:0 !important;
        max-width:calc(100% - 24px) !important;

        margin:
            14px auto
            18px auto !important;

        box-sizing:border-box !important;

        overflow:visible !important;
    }


    /*
    Wszystkie statusy mają na telefonie
    dokładnie takie samo położenie.
    */
    #project-details-modal
    #project-context-actions.project-context-actions-start,

    #project-details-modal
    #project-context-actions.project-context-actions-offer,

    #project-details-modal
    #project-context-actions.project-context-actions-realization,

    #project-details-modal
    #project-context-actions.project-context-actions-done,

    #project-details-modal
    #project-context-actions.project-context-actions-paid,

    #project-details-modal
    #project-context-actions.project-context-actions-lost,

    #project-details-modal
    #project-context-actions.project-context-actions-paused{
        left:auto !important;
        right:auto !important;

        transform:none !important;

        margin-left:auto !important;
        margin-right:auto !important;
    }


    /*
    Pionowa kreska i kropka zawsze wskazują
    środek obszaru z przyciskami.
    */
    #project-details-modal
    #project-context-actions.project-context-actions-linked::before,

    #project-details-modal
    #project-context-actions.project-context-actions-linked::after{
        left:50% !important;

        transform:translateX(-50%) !important;
    }


    /*
    Obsługa nowszej wersji, w której przyciski
    znajdują się w dodatkowym panelu.
    */
    #project-details-modal
    #project-context-actions
    .project-context-actions-panel{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        box-sizing:border-box !important;

        overflow:hidden !important;
    }

    #project-details-modal
    #project-context-actions
    .project-context-actions-list{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:wrap !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;

        overflow:visible !important;
    }


    /*
    Przyciski bez dodatkowego panelu.
    */
    #project-details-modal
    #project-context-actions.project-context-actions-linked{
        justify-content:center !important;
        align-items:center !important;
        flex-wrap:wrap !important;
        gap:8px !important;
    }


    /*
    Żaden przycisk nie może wychodzić poza obszar.
    */
    #project-details-modal
    #project-context-actions button,

    #project-details-modal
    #project-context-actions
    .project-context-action{
        width:auto !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        box-sizing:border-box !important;

        white-space:normal !important;
        overflow-wrap:normal !important;
        word-break:normal !important;

        text-align:center !important;
    }

    #project-details-modal
    #project-context-actions button span,

    #project-details-modal
    #project-context-actions
    .project-context-action span{
        min-width:0 !important;
        max-width:100% !important;

        white-space:normal !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }
}

/* =========================================
   NIEZAPISANE ZMIANY — MODAL NA ŚRODKU
   ========================================= */

@media(max-width:768px){

    #unsaved-changes-modal{
        align-items:center !important;
        justify-content:center !important;

        padding:
            calc(16px + env(safe-area-inset-top))
            16px
            calc(16px + env(safe-area-inset-bottom))
            16px !important;

        background:rgba(15,23,42,0.68) !important;
    }

    #unsaved-changes-modal
    .unsaved-changes-box{
        position:relative !important;

        width:100% !important;
        min-width:0 !important;
        max-width:430px !important;

        max-height:calc(
            100dvh
            - 32px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

        margin:auto !important;
        padding:22px 18px !important;

        border-radius:20px !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        box-shadow:
            0 24px 60px rgba(15,23,42,0.32) !important;
    }

    #unsaved-changes-modal
    .unsaved-changes-box h2{
        margin:0 0 12px 0 !important;

        font-size:21px !important;
        line-height:1.25 !important;
    }

    #unsaved-changes-modal
    .unsaved-changes-box p{
        margin:0 0 18px 0 !important;

        font-size:14px !important;
        line-height:1.5 !important;
    }

    #unsaved-changes-modal
    .unsaved-changes-buttons{
        width:100% !important;

        display:flex !important;
        flex-direction:column !important;
        gap:9px !important;
    }

    #unsaved-changes-modal
    .unsaved-changes-buttons button{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:11px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;

        font-size:13px !important;
        line-height:1.25 !important;

        white-space:normal !important;
        text-align:center !important;
    }
}

/* =========================================
   KLIENCI — SKRACANIE DŁUGIEJ NAZWY
   ========================================= */

@media(max-width:768px){

    /*
    Lewa część nagłówka może się zwężać,
    ale nie może wypchnąć ikon i strzałki.
    */
    #clients
    .mobile-client-card-top.mobile-client-expand-button{
        min-width:0 !important;
        overflow:hidden !important;
    }

    #clients
    .mobile-client-heading{
        flex:1 1 auto !important;

        width:auto !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow:hidden !important;
    }

    /*
    Nazwa klienta pozostaje w jednym wierszu.
    Za długa nazwa kończy się wielokropkiem.
    */
    #clients
    .mobile-client-name{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        overflow:hidden !important;
        text-overflow:ellipsis !important;

        white-space:nowrap !important;
        word-break:normal !important;
        overflow-wrap:normal !important;
    }

    /*
    Ikona budynku i strzałka zawsze pozostają
    widoczne po prawej stronie.
    */
    #clients
    .mobile-client-expand-tools{
        flex:0 0 auto !important;
        min-width:max-content !important;
    }
}

/* =========================================
   SZCZEGÓŁY PROJEKTU — PEŁNA WYSOKOŚĆ MOBILE
   ========================================= */

@media(max-width:768px){

    /*
    Korzystamy z dynamicznej wysokości ekranu,
    dzięki czemu dolny pasek przeglądarki
    nie zasłania zawartości modala.
    */
    #project-details-modal{
        width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        align-items:flex-start !important;
        justify-content:center !important;

        padding:
            calc(6px + env(safe-area-inset-top))
            0
            calc(6px + env(safe-area-inset-bottom))
            0 !important;

        overflow:hidden !important;
    }

    /*
    Okno zajmuje całą dostępną wysokość,
    ale pozostaje delikatnie odsunięte
    od górnej i dolnej krawędzi.
    */
    #project-details-modal
    .project-details-modal-box{
        width:100% !important;
        min-width:0 !important;
        max-width:100vw !important;

        height:calc(
            100dvh
            - 12px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

        min-height:0 !important;

        max-height:calc(
            100dvh
            - 12px
            - env(safe-area-inset-top)
            - env(safe-area-inset-bottom)
        ) !important;

        margin:0 !important;
        padding:14px !important;

        display:flex !important;
        flex-direction:column !important;

        border-radius:18px !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }

    /*
    Nagłówek i zakładki pozostają nieruchome.
    Przewija się wyłącznie treść wybranej zakładki.
    */
    #project-details-modal
    .project-details-header,

    #project-details-modal
    .project-process-tabs{
        flex:0 0 auto !important;
    }

    /*
    Każda zakładka wykorzystuje pozostałe miejsce.
    */
    #project-details-modal
    .details-tab-content{
        flex:1 1 auto !important;

        width:100% !important;
        min-width:0 !important;

        min-height:0 !important;
        max-height:none !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        /*
        Większy odstęp pozwala przewinąć ostatni
        element ponad dolny pasek telefonu.
        */
        padding:
            18px
            6px
            calc(
                54px
                + env(safe-area-inset-bottom)
            )
            0 !important;

        scroll-padding-bottom:
            calc(
                54px
                + env(safe-area-inset-bottom)
            ) !important;

        overscroll-behavior:contain !important;

        -webkit-overflow-scrolling:touch;
    }

    /*
    Ostatni element zakładki nie powinien
    doklejać się bezpośrednio do dołu.
    */
    #project-details-modal
    .details-tab-content
    > *:last-child{
        margin-bottom:0 !important;
    }
}

/* =========================================
   KLIENT — FORMULARZ PEŁNOEKRANOWY MOBILE
   ========================================= */

@media(max-width:768px){

    /*
    Dodawanie i edycja klienta.
    */
    #client-modal,

    /*
    Dodawanie i edycja osoby kontaktowej.
    */
    #client-contact-modal{
        width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        padding:0 !important;

        overflow:hidden !important;

        background:#f1f5f9 !important;
    }


    /* =====================================
       GŁÓWNE OKNO
       ===================================== */

    #client-modal .modal-box,
    #client-modal .form-modal,

    #client-contact-modal .modal-box,
    #client-contact-modal .form-modal{
        position:relative !important;

        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            0
            14px
            calc(
                18px
                + env(safe-area-inset-bottom)
            )
            14px !important;

        display:block !important;

        border:none !important;
        border-radius:0 !important;

        background:#f1f5f9 !important;

        box-shadow:none !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        overscroll-behavior:contain !important;

        scroll-padding-top:
            calc(
                76px
                + env(safe-area-inset-top)
            ) !important;

        scroll-padding-bottom:
            calc(
                82px
                + env(safe-area-inset-bottom)
            ) !important;

        -webkit-overflow-scrolling:touch;
    }


    /* =====================================
       NIERUCHOMY NAGŁÓWEK
       ===================================== */

    #client-modal .app-modal-header,

    #client-contact-modal .app-modal-header{
        position:sticky !important;
        top:0 !important;
        z-index:30 !important;

        width:auto !important;

        min-height:66px !important;

        margin:
            0
            -14px
            16px
            -14px !important;

        padding:
            calc(
                11px
                + env(safe-area-inset-top)
            )
            14px
            11px
            14px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:space-between !important;
        gap:12px !important;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 43%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            ) !important;

        border:none !important;
        border-bottom:
            1px solid rgba(255,255,255,0.14)
            !important;

        box-shadow:
            0 5px 18px rgba(15,23,42,0.22)
            !important;
    }

    #client-modal .app-modal-header h2,

    #client-contact-modal .app-modal-header h2{
        min-width:0 !important;

        margin:0 !important;

        color:#ffffff !important;

        font-size:19px !important;
        line-height:1.25 !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }

    #client-modal .app-modal-header h2 i,

    #client-contact-modal .app-modal-header h2 i{
        margin-right:6px !important;
    }

    #client-modal .app-modal-close,

    #client-contact-modal .app-modal-close{
        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        max-width:44px !important;

        height:44px !important;
        min-height:44px !important;
        max-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border:
            1px solid rgba(255,255,255,0.22)
            !important;
        border-radius:13px !important;

        background:
            rgba(255,255,255,0.13)
            !important;
        color:#ffffff !important;

        box-shadow:none !important;
    }

    #client-modal .app-modal-close i,

    #client-contact-modal .app-modal-close i{
        margin:0 !important;
        color:#ffffff !important;
    }


    /* =====================================
       POLA FORMULARZA
       ===================================== */

    #client-modal .modal-box > input,
    #client-modal .modal-box > textarea,

    #client-contact-modal .modal-box > input,
    #client-contact-modal .modal-box > textarea{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        min-height:50px !important;

        margin:0 0 11px 0 !important;
        padding:12px 13px !important;

        border:1px solid #cbd5e1 !important;
        border-radius:13px !important;

        background:#ffffff !important;

        font-size:16px !important;

        box-sizing:border-box !important;
    }

    #client-modal .modal-box > textarea,

    #client-contact-modal .modal-box > textarea{
        min-height:120px !important;

        resize:vertical !important;
    }

    #client-modal .modal-box > label,

    #client-contact-modal .modal-box > label{
        display:block !important;

        margin:
            4px
            0
            6px
            0 !important;

        color:#475569 !important;

        font-size:12px !important;
        line-height:1.3 !important;
        font-weight:900 !important;

        text-transform:uppercase !important;
        letter-spacing:0.04em !important;
    }

    #client-modal .modal-box > h3{
        margin:15px 0 10px 0 !important;

        color:#0f172a !important;

        font-size:17px !important;
    }

    #client-modal .modal-box > hr{
        width:100% !important;

        margin:9px 0 4px 0 !important;

        border:none !important;
        border-top:1px solid #cbd5e1 !important;
    }


    /* =====================================
       NIP I POBIERANIE Z GUS
       ===================================== */

    #client-modal .gus-nip-row{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:9px !important;

        margin:0 0 10px 0 !important;
    }

    #client-modal .gus-nip-row input{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        min-height:50px !important;

        margin:0 !important;

        font-size:16px !important;
    }

    #client-modal #gus-fetch-button{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
    }

    #client-modal .gus-fetch-hint{
        width:100% !important;

        margin:0 0 11px 0 !important;
        padding:11px !important;

        font-size:12px !important;
        line-height:1.4 !important;

        box-sizing:border-box !important;
    }


    /* =====================================
       LISTA OSÓB KONTAKTOWYCH
       ===================================== */

    #client-modal #client-contacts-list{
        width:100% !important;
        min-width:0 !important;

        margin:0 0 10px 0 !important;
    }

    #client-modal
    #add-client-contact-button{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 0 12px 0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:7px !important;

        white-space:normal !important;
        text-align:center !important;
    }


    /* =====================================
       KLAWIATURA EKRANOWA
       ===================================== */

    #client-modal input:focus,
    #client-modal textarea:focus,

    #client-contact-modal input:focus,
    #client-contact-modal textarea:focus{
        position:relative !important;
        z-index:2 !important;

        outline:none !important;

        border-color:#2563eb !important;

        box-shadow:
            0 0 0 3px rgba(37,99,235,0.14)
            !important;
    }
}

/*
Na komputerze dodatkowy kontener
nie zmienia dotychczasowego układu.
*/
.mobile-form-sticky-footer{
    display:contents;
}

/* =========================================
   KLIENT I KONTAKT — DOLNY PASEK ZAPISU
   ========================================= */

@media(max-width:768px){

    /*
    Dolny odstęp formularza zapewnia teraz
    pasek akcji, a nie główny kontener.
    */
    #client-modal .modal-box,
    #client-modal .form-modal,

    #client-contact-modal .modal-box,
    #client-contact-modal .form-modal{
        padding-bottom:0 !important;
    }

    /*
    Prawdziwy, nieprzezroczysty pasek akcji.
    */
    #client-modal
    .mobile-form-sticky-footer,

    #client-contact-modal
    .mobile-form-sticky-footer{
        position:sticky !important;
        bottom:0 !important;
        z-index:40 !important;

        display:block !important;

        width:auto !important;

        margin:
            18px
            -14px
            0
            -14px !important;

        padding:
            11px
            14px
            calc(
                11px
                + env(safe-area-inset-bottom)
            )
            14px !important;

        background:#f1f5f9 !important;

        border-top:1px solid #cbd5e1 !important;

        box-shadow:
            0 -9px 22px rgba(15,23,42,0.10)
            !important;

        box-sizing:border-box !important;
    }

    /*
    Usuwamy stare przyklejenie z samego
    przycisku. Przyklejony jest teraz cały pasek.
    */
    #client-modal
    .mobile-form-sticky-footer > button,

    #client-contact-modal
    .mobile-form-sticky-footer > button{
        position:relative !important;
        bottom:auto !important;

        width:100% !important;
        min-width:0 !important;
        min-height:52px !important;

        margin:0 !important;
        padding:12px 10px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;

        border:none !important;
        border-radius:14px !important;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;

        font-size:14px !important;
        line-height:1.25 !important;
        font-weight:900 !important;

        box-shadow:
            0 7px 18px rgba(37,99,235,0.28)
            !important;

        white-space:normal !important;
        text-align:center !important;
    }

    #client-modal
    .mobile-form-sticky-footer > button i,

    #client-contact-modal
    .mobile-form-sticky-footer > button i{
        margin:0 !important;
        color:#ffffff !important;
    }

    /*
    Dodatkowe oddzielenie ostatniej akcji
    od dolnego paska zapisu.
    */
    #client-modal
    #add-client-contact-button{
        margin-bottom:16px !important;
    }
}

/* =========================================
   FILTRY — IKONY ODPOWIADAJĄCE RODZAJOWI POLA
   ========================================= */

.connector-filter-select{
    position:relative;

    display:inline-flex;
    align-items:center;

    min-width:0;

    vertical-align:middle;
}


/*
Ikona jest oddzielnym elementem HTML.
Nie jest częścią natywnej listy rozwijanej.
*/
.connector-filter-select-icon{
    position:absolute;
    left:13px;
    top:50%;
    z-index:2;

    width:18px;

    color:#64748b;

    font-size:15px;
    line-height:1;

    text-align:center;

    transform:translateY(-50%);

    pointer-events:none;
}


/*
Zostawiamy natywną strzałkę przeglądarki.
*/
.connector-filter-select > select{
    appearance:auto !important;
    -webkit-appearance:auto !important;

    width:100%;

    padding-left:42px !important;

    background-image:none !important;
}


/*
Aktywny filtr wyróżnia również jego ikonę.
*/
.connector-filter-select:focus-within
.connector-filter-select-icon{
    color:#2563eb;
}


/* =========================================
   DOPASOWANIE DO KONKRETNYCH MODUŁÓW
   ========================================= */

#projects
.projects-filter-bar
.connector-filter-select,

.sales-filter-bar
.connector-filter-select,

.realization-filter-bar
.connector-filter-select,

.invoice-filter-bar
.connector-filter-select,

.finance-filter-bar
.connector-filter-select{
    flex:0 1 auto;
}


#budgets
.budget-project-selector-card
.connector-filter-select{
    width:100%;
}


#budgets
.budget-table-filters
.connector-filter-select{
    min-width:0;
}


#mail
.mail-toolbar
.connector-filter-select{
    flex:1 1 130px;

    min-width:120px;
    max-width:180px;
}


#mail
.mail-toolbar
.connector-filter-select > select{
    min-width:0 !important;
    max-width:none !important;
}


.gantt-filters
.connector-filter-select{
    min-width:220px;
}


.gantt-filters
.connector-filter-select > select{
    min-width:0 !important;
    width:100% !important;
}


/* =========================================
   WERSJA MOBILNA
   ========================================= */

@media(max-width:768px){

    #projects
    .projects-filter-bar
    .connector-filter-select,

    .sales-filter-bar
    .connector-filter-select,

    .realization-filter-bar
    .connector-filter-select,

    .invoice-filter-bar
    .connector-filter-select,

    .finance-filter-bar
    .connector-filter-select,

    #budgets
    .budget-project-selector-card
    .connector-filter-select,

    #budgets
    .budget-table-filters
    .connector-filter-select,

    #mail
    .mail-toolbar
    .connector-filter-select,

    .gantt-filters
    .connector-filter-select{
        flex:1 1 100% !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;
    }


    .connector-filter-select > select{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        min-height:48px !important;

        padding-left:43px !important;
    }


    .connector-filter-select-icon{
        left:14px;

        font-size:16px;
    }
}

/* =========================================
   POPRAWKA FILTRÓW — PROJEKTY I POCZTA
   ========================================= */

/*
W Projektach wcześniejsze reguły CSS
ustawiają padding selecta na 12px.
Ta bardziej szczegółowa reguła ponownie
zostawia miejsce na właściwą ikonę.
*/
#projects
.projects-filter-bar
.filters
.connector-filter-select
> select{
    padding-left:42px !important;
}


/* =========================================
   PROJEKTY — MOBILE
   ========================================= */

@media(max-width:768px){

    /*
    Pasek filtrów Projektów zawsze widoczny.
    */
    #projects
    .projects-filter-bar{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin-bottom:18px !important;

        opacity:1 !important;
        visibility:visible !important;
    }


    #projects
    .projects-filter-bar
    .filters{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        justify-content:flex-start !important;
        gap:10px !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        min-height:0 !important;

        margin:0 !important;

        opacity:1 !important;
        visibility:visible !important;
        overflow:visible !important;
    }


    /*
    Wyszukiwarka projektów.
    */
    #projects
    .projects-filter-bar
    .filters
    > input{
        display:block !important;

        flex:0 0 auto !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        opacity:1 !important;
        visibility:visible !important;
    }


    /*
    Kontener każdego selecta z ikoną.
    */
    #projects
    .projects-filter-bar
    .filters
    > .connector-filter-select{
        position:relative !important;

        display:flex !important;
        align-items:center !important;

        flex:0 0 auto !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:48px !important;
        min-height:48px !important;

        opacity:1 !important;
        visibility:visible !important;
        overflow:visible !important;
    }


    /*
    Właściwa lista rozwijana.
    */
    #projects
    .projects-filter-bar
    .filters
    .connector-filter-select
    > select{
        display:block !important;

        flex:1 1 auto !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        margin:0 !important;

        padding-left:43px !important;
        padding-right:12px !important;

        opacity:1 !important;
        visibility:visible !important;
    }


    #projects
    .projects-filter-bar
    .connector-filter-select-icon{
        display:block !important;

        opacity:1 !important;
        visibility:visible !important;
    }


    /* =====================================
       POCZTA — FILTRY PEŁNEJ SZEROKOŚCI
       ===================================== */

    /*
    Toolbar Poczty ma trzy kolumny dla
    przycisków. Każdy filtr musi jednak
    zajmować cały wiersz.
    */
    #mail
    .mail-toolbar
    > .connector-filter-select{
        grid-column:1 / -1 !important;

        display:flex !important;
        align-items:center !important;

        width:100% !important;
        min-width:0 !important;
        max-width:none !important;

        margin:0 !important;
    }


    #mail
    .mail-toolbar
    > .connector-filter-select
    > select{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:48px !important;
        min-height:48px !important;
        max-height:48px !important;

        margin:0 !important;

        padding-left:43px !important;
        padding-right:12px !important;
    }
}

/* =========================================
   SZCZEGÓŁY PROJEKTU — KONFLIKTY HARMONOGRAMU
   ========================================= */

.project-schedule-conflicts{
    width:100%;
    min-width:0;

    margin:4px 0 16px 0;
}


.project-schedule-conflicts-loading,
.project-schedule-conflicts-message{
    width:100%;
    min-width:0;

    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:14px;

    border:1px solid #cbd5e1;
    border-radius:14px;

    background:#f8fafc;
    color:#475569;

    box-sizing:border-box;
}


.project-schedule-conflicts-loading > i,
.project-schedule-conflicts-message > i{
    flex:0 0 auto;

    margin-top:2px;

    font-size:19px;
}


.project-schedule-conflicts-loading span,
.project-schedule-conflicts-message > div{
    min-width:0;
}


.project-schedule-conflicts-message > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}


.project-schedule-conflicts-message strong{
    color:#0f172a;

    font-size:14px;
    line-height:1.35;
}


.project-schedule-conflicts-message span{
    color:#475569;

    font-size:13px;
    line-height:1.45;
}


.project-schedule-conflicts-message.success{
    border-color:#bbf7d0;

    background:#f0fdf4;
    color:#15803d;
}


.project-schedule-conflicts-message.success strong{
    color:#166534;
}


.project-schedule-conflicts-message.warning{
    border-color:#fde68a;

    background:#fffbeb;
    color:#b45309;
}


.project-schedule-conflicts-message.warning strong{
    color:#92400e;
}


.project-schedule-conflicts-message.danger{
    border-color:#fecaca;

    background:#fef2f2;
    color:#dc2626;
}


.project-schedule-conflicts-message.danger strong{
    color:#991b1b;
}


.project-schedule-conflict-list{
    display:grid;
    grid-template-columns:
        repeat(
            auto-fit,
            minmax(280px, 1fr)
        );
    gap:10px;

    margin-top:10px;
}


.project-schedule-conflict-card{
    min-width:0;

    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:14px;

    border:1px solid #fecaca;
    border-left:5px solid #dc2626;
    border-radius:14px;

    background:#ffffff;

    box-shadow:
        0 5px 14px rgba(15,23,42,0.06);

    box-sizing:border-box;
}


.project-schedule-conflict-card-icon{
    flex:0 0 42px;

    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    border-radius:12px;

    background:#fee2e2;
    color:#b91c1c;

    font-size:17px;
}


.project-schedule-conflict-card-body{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:5px;

    color:#475569;

    font-size:13px;
    line-height:1.45;
}


.project-schedule-conflict-title{
    color:#0f172a;

    font-size:15px;
    line-height:1.3;

    overflow-wrap:anywhere;
}


.project-schedule-conflict-type{
    color:#b91c1c;

    font-size:12px;
    line-height:1.35;
    font-weight:800;
}


.project-schedule-conflict-card-body > span{
    overflow-wrap:anywhere;
}


.project-schedule-conflict-other{
    min-width:0;

    display:flex;
    flex-direction:column;
    gap:3px;

    margin-top:5px;
    padding:10px;

    border:1px solid #e2e8f0;
    border-radius:11px;

    background:#f8fafc;
}


.project-schedule-conflict-other strong,
.project-schedule-conflict-card-body span strong{
    color:#0f172a;
}


@media(max-width:768px){

    .project-schedule-conflict-list{
        grid-template-columns:1fr;
    }


    .project-schedule-conflict-card{
        width:100%;
    }


    #project-details-modal
    .project-details-actions-row
    button[onclick="openCurrentProjectInSchedule()"]{
        width:100% !important;
        min-height:48px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        gap:8px !important;
    }
}

/* =========================================
   POCZTA — MODAL REGUŁ NA MOBILE
   ========================================= */

@media(max-width:768px){

    #mail-rules-modal{
        width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        padding:0 !important;

        overflow:hidden !important;

        background:#f1f5f9 !important;
    }


    #mail-rules-modal
    .mail-rules-modal-box{
        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            0
            14px
            calc(
                14px
                + env(safe-area-inset-bottom)
            )
            14px !important;

        display:flex !important;
        flex-direction:column !important;

        border:none !important;
        border-radius:0 !important;

        background:#f1f5f9 !important;

        box-shadow:none !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /* Nagłówek pozostaje zawsze widoczny. */

    #mail-rules-modal
    .app-modal-header{
        flex:0 0 auto !important;

        width:auto !important;
        min-height:66px !important;

        margin:
            0
            -14px
            14px
            -14px !important;

        padding:
            calc(
                11px
                + env(safe-area-inset-top)
            )
            14px
            11px
            14px !important;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 43%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            ) !important;

        border-bottom:
            1px solid rgba(255,255,255,0.14)
            !important;

        box-shadow:
            0 5px 18px rgba(15,23,42,0.22)
            !important;
    }


    #mail-rules-modal
    .app-modal-header h2{
        min-width:0 !important;

        margin:0 !important;

        color:#ffffff !important;

        font-size:18px !important;
        line-height:1.25 !important;

        white-space:normal !important;
    }


    #mail-rules-modal
    .app-modal-close{
        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        min-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border:
            1px solid rgba(255,255,255,0.22)
            !important;
        border-radius:13px !important;

        background:
            rgba(255,255,255,0.13)
            !important;
        color:#ffffff !important;
    }


    #mail-rules-modal
    .app-modal-close i{
        margin:0 !important;

        color:#ffffff !important;
    }


    #mail-rules-modal
    .mail-rules-modal-description{
        flex:0 0 auto !important;

        margin:0 0 12px 0 !important;
        padding:12px !important;

        border:1px solid #dbe3ef !important;
        border-radius:13px !important;

        background:#ffffff !important;
        color:#64748b !important;

        font-size:12px !important;
        line-height:1.45 !important;
    }


    /*
    Przewija się wyłącznie lista reguł.
    */
    #mail-rules-modal
    .mail-rules-table-wrap{
        flex:1 1 auto !important;

        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;

        padding:0 !important;

        border:none !important;
        border-radius:0 !important;

        background:transparent !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        -webkit-overflow-scrolling:touch;
    }


    #mail-rules-modal
    .mail-rules-modal-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        margin:0 !important;

        background:transparent !important;

        border:none !important;

        overflow:visible !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table thead{
        display:none !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;

        width:100% !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:13px !important;

        background:#ffffff !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:15px !important;

        box-shadow:
            0 5px 14px rgba(15,23,42,0.06)
            !important;

        overflow:hidden !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:8px 0 !important;

        border:none !important;
        border-bottom:
            1px solid #e2e8f0
            !important;

        font-size:13px !important;
        line-height:1.4 !important;

        text-align:left !important;
        white-space:normal !important;

        overflow-wrap:anywhere !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table tbody td:last-child{
        border-bottom:none !important;
    }


    /*
    Nazwy pól nad wartościami.
    */
    #mail-rules-modal
    .mail-rules-modal-table tbody td::before{
        display:block;

        margin-bottom:4px;

        color:#64748b;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }


    #mail-rules-table
    td:nth-child(1)::before{
        content:"Typ";
    }

    #mail-rules-table
    td:nth-child(2)::before{
        content:"Adres / domena";
    }

    #mail-rules-table
    td:nth-child(3)::before{
        content:"Klient";
    }

    #mail-rules-table
    td:nth-child(4)::before{
        content:"Źródło";
    }

    #mail-rules-table
    td:nth-child(5)::before{
        content:"Data";
    }

    #mail-rules-table
    td:nth-child(6)::before{
        content:"Akcje";
    }


    /*
    Komórka z przyciskiem usuwania.
    */
    #mail-rules-modal
    .mail-rules-modal-table
    .mail-action-cell{
        display:flex !important;
        flex-wrap:wrap !important;
        align-items:stretch !important;
        gap:8px !important;

        margin-top:7px !important;
        padding:10px !important;

        background:#f8fafc !important;

        border:1px solid #e2e8f0 !important;
        border-radius:11px !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table
    .mail-action-cell::before{
        flex:0 0 100% !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table
    .mail-action-cell button{
        width:100% !important;
        min-height:44px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    /*
    Komunikat o pustej liście.
    */
    #mail-rules-modal
    .mail-rules-modal-table
    td[colspan]{
        padding:24px 10px !important;

        border:none !important;

        color:#64748b !important;
        text-align:center !important;
    }


    #mail-rules-modal
    .mail-rules-modal-table
    td[colspan]::before{
        display:none !important;
    }
}

/* =========================================
   POCZTA — MODAL REGUŁ PRZY KRAWĘDZI EKRANU
   ========================================= */

@media(max-width:768px){

    #mail-rules-modal{
        position:fixed !important;

        inset:0 !important;
        top:0 !important;
        right:0 !important;
        bottom:0 !important;
        left:0 !important;

        width:100vw !important;
        height:100dvh !important;
        min-width:100vw !important;
        min-height:100dvh !important;
        max-width:100vw !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        overflow:hidden !important;

        z-index:2147483200 !important;
    }


    #mail-rules-modal
    .mail-rules-modal-box{
        position:relative !important;

        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:
            0
            14px
            calc(
                14px
                +
                env(safe-area-inset-bottom)
            )
            14px !important;

        display:flex !important;
        flex-direction:column !important;
        gap:0 !important;

        border:none !important;
        border-radius:0 !important;

        background:#f1f5f9 !important;

        box-shadow:none !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /*
    Belka nie jest częścią przewijanej listy.
    Pozostaje stale przy górnej krawędzi.
    */
    #mail-rules-modal
    .app-modal-header{
        position:relative !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;

        flex:0 0 auto !important;

        width:auto !important;

        min-height:
            calc(
                66px
                +
                env(safe-area-inset-top)
            )
            !important;

        margin:
            0
            -14px
            14px
            -14px
            !important;

        padding:
            calc(
                11px
                +
                env(safe-area-inset-top)
            )
            14px
            11px
            14px
            !important;

        z-index:20 !important;
    }


    /*
    Dzwonek i główna belka aplikacji
    pozostają pod modalem.
    */
    #mail-rules-modal
    .app-modal-close{
        position:relative !important;

        z-index:2 !important;
    }


    #mail-rules-modal
    .mail-rules-modal-description{
        flex:0 0 auto !important;

        margin-bottom:12px !important;
    }


    /*
    Przewija się tylko lista kart,
    a nie nagłówek całego modala.
    */
    #mail-rules-modal
    .mail-rules-table-wrap{
        flex:1 1 auto !important;

        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;

        margin:0 !important;
        padding:0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        overscroll-behavior:contain !important;

        scroll-padding-bottom:
            calc(
                20px
                +
                env(safe-area-inset-bottom)
            )
            !important;

        -webkit-overflow-scrolling:touch;
    }
}

/* =========================================
   POCZTA — MODAL KONT NA MOBILE
   ========================================= */

@media(max-width:768px){

    #mail-account-modal{
        position:fixed !important;

        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;
        min-width:100vw !important;
        min-height:100dvh !important;
        max-width:100vw !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        overflow:hidden !important;

        z-index:2147483200 !important;
    }


    #mail-account-modal
    .mail-account-modal-box{
        width:100vw !important;
        min-width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:
            0
            12px
            calc(
                12px
                +
                env(safe-area-inset-bottom)
            )
            12px !important;

        display:flex !important;
        flex-direction:column !important;

        border:none !important;
        border-radius:0 !important;

        background:#f1f5f9 !important;

        box-shadow:none !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    /*
    Nagłówek znajduje się poza przewijaną częścią.
    */
    #mail-account-modal
    .app-modal-header{
        position:relative !important;

        flex:0 0 auto !important;

        width:auto !important;

        min-height:
            calc(
                66px
                +
                env(safe-area-inset-top)
            )
            !important;

        margin:
            0
            -12px
            14px
            -12px
            !important;

        padding:
            calc(
                11px
                +
                env(safe-area-inset-top)
            )
            12px
            11px
            12px
            !important;

        background:
            radial-gradient(
                circle at top right,
                rgba(96,165,250,0.42),
                transparent 43%
            ),
            linear-gradient(
                135deg,
                #0f172a,
                #172554 58%,
                #1d4ed8
            ) !important;

        z-index:20 !important;
    }


    #mail-account-modal
    .app-modal-header h2{
        min-width:0 !important;

        margin:0 !important;

        color:#ffffff !important;

        font-size:18px !important;
        line-height:1.25 !important;
    }


    #mail-account-modal
    .app-modal-close{
        flex:0 0 44px !important;

        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        min-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border:
            1px solid rgba(255,255,255,0.22)
            !important;
        border-radius:13px !important;

        background:
            rgba(255,255,255,0.13)
            !important;
        color:#ffffff !important;
    }


    #mail-account-modal
    .app-modal-close i{
        margin:0 !important;

        color:#ffffff !important;
    }


    /*
    Przewija się wszystko poniżej nagłówka.
    */
    #mail-account-modal
    .mail-account-modal-scroll{
        flex:1 1 auto !important;

        width:100% !important;
        min-width:0 !important;
        min-height:0 !important;

        padding:0 0 16px 0 !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        overscroll-behavior:contain !important;

        -webkit-overflow-scrolling:touch;
    }


    #mail-account-modal
    .mail-account-modal-description{
        margin-bottom:12px !important;
    }


    #mail-account-modal
    .mail-account-create-card,

    #mail-account-modal
    .mail-accounts-list-card{
        width:100% !important;

        margin:0 0 12px 0 !important;
        padding:13px !important;

        box-sizing:border-box !important;
    }


    #mail-account-modal
    .mail-account-create-heading,

    #mail-account-modal
    .mail-accounts-list-heading{
        flex-direction:column !important;
        align-items:stretch !important;
        gap:10px !important;
    }


    #mail-account-modal
    .mail-accounts-list-heading > button{
        width:100% !important;
        min-height:46px !important;
    }


    #mail-account-modal
    .mail-account-form,

    #mail-account-modal
    .mail-imap-fields{
        width:100% !important;

        display:grid !important;
        grid-template-columns:1fr !important;
        gap:10px !important;
    }


    #mail-account-modal
    .mail-imap-fields{
        grid-column:auto !important;
    }


    #mail-account-modal
    .mail-account-form input,

    #mail-account-modal
    .mail-account-form select{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:48px !important;
        min-height:48px !important;

        margin:0 !important;

        font-size:16px !important;
    }


    #mail-account-modal
    .mail-account-add-button{
        width:100% !important;
        min-height:50px !important;

        margin:0 !important;
    }


    /*
    Tabela kont zmienia się w karty.
    */
    #mail-account-modal
    .mail-accounts-table-wrap{
        width:100% !important;
        min-width:0 !important;

        border:none !important;

        overflow:visible !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table{
        display:block !important;

        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        border:none !important;

        overflow:visible !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table thead{
        display:none !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table tbody{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:11px !important;

        width:100% !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table tbody tr{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:13px !important;

        border:1px solid #dbe3ef !important;
        border-left:4px solid #2563eb !important;
        border-radius:15px !important;

        background:#ffffff !important;

        box-shadow:
            0 5px 14px rgba(15,23,42,0.06)
            !important;

        box-sizing:border-box !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table tbody td{
        display:block !important;

        width:100% !important;
        min-width:0 !important;

        padding:8px 0 !important;

        border:none !important;
        border-bottom:
            1px solid #e2e8f0
            !important;

        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table tbody td:last-child{
        border-bottom:none !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table tbody td::before{
        display:block;

        margin-bottom:4px;

        color:#64748b;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }


    #mail-accounts-table
    td:nth-child(1)::before{
        content:"Konto";
    }

    #mail-accounts-table
    td:nth-child(2)::before{
        content:"Typ";
    }

    #mail-accounts-table
    td:nth-child(3)::before{
        content:"Status";
    }

    #mail-accounts-table
    td:nth-child(4)::before{
        content:"Ostatnia synchronizacja";
    }

    #mail-accounts-table
    td:nth-child(5)::before{
        content:"Akcje";
    }


    #mail-account-modal
    .mail-accounts-modal-table
    .mail-action-cell{
        display:grid !important;
        grid-template-columns:
            repeat(2, minmax(0, 1fr))
            !important;
        gap:8px !important;

        margin-top:6px !important;
        padding:10px !important;

        border:1px solid #e2e8f0 !important;
        border-radius:11px !important;

        background:#f8fafc !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table
    .mail-action-cell::before{
        grid-column:1 / -1 !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table
    .mail-action-cell button{
        width:100% !important;
        min-width:0 !important;
        min-height:44px !important;

        margin:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table
    td[colspan]{
        padding:24px 10px !important;

        color:#64748b !important;

        text-align:center !important;
    }


    #mail-account-modal
    .mail-accounts-modal-table
    td[colspan]::before{
        display:none !important;
    }
}

/* =========================================
   MOJE KONTO — PEŁNY EKRAN NA TELEFONIE
   ========================================= */

@media(max-width:768px){

    /*
    Gdy modal jest otwarty, główna strona
    nie może przesuwać się pod spodem.
    */
    body.account-modal-open{
        width:100%;
        height:100%;
        overflow:hidden !important;
        overscroll-behavior:none;
    }


    /*
    Pełnoekranowe tło modala.
    */
    #account-modal{
        position:fixed !important;
        inset:0 !important;
        z-index:100500 !important;

        width:100vw !important;
        height:100dvh !important;
        min-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        overflow:hidden !important;

        background:#f8fafc !important;
    }


    /*
    Główne białe okno zajmuje cały ekran.
    */
    #account-modal
    .account-modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;

        border:none !important;
        border-radius:0 !important;

        background:#ffffff !important;
    }


    /*
    Nagłówek pozostaje widoczny.
    Nie przewija się razem z treścią.
    */
    #account-modal
    .account-modal-header{
        position:relative;
        z-index:5;

        flex:0 0 auto;

        min-height:70px;

        padding:
            calc(12px + env(safe-area-inset-top))
            14px
            12px
            14px !important;

        align-items:center !important;
        gap:10px !important;

        box-shadow:
            0 5px 18px
            rgba(15,23,42,0.22);
    }


    #account-modal
    .account-profile-block{
        flex:1 1 auto;

        min-width:0;

        gap:12px;
    }


    #account-modal
    .account-avatar{
        width:46px;
        min-width:46px;
        height:46px;

        border-radius:14px;
    }


    #account-modal
    .account-avatar i{
        font-size:22px;
    }


    #account-modal
    .account-profile-block > div:last-child{
        min-width:0;
    }


    #account-modal
    .account-profile-block h2{
        margin:0;

        font-size:21px;
        line-height:1.2;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }


    #account-modal
    .account-profile-block p{
        margin:3px 0 0 0;

        font-size:12px;
        line-height:1.3;

        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }


    #account-modal
    .account-close-button{
        flex:0 0 44px;

        width:44px;
        min-width:44px;
        height:44px;
        min-height:44px;

        margin:0 !important;
        padding:0 !important;

        border-radius:13px;
    }


    /*
    Pasek wersji pozostaje między
    nagłówkiem i zakładkami.
    */
    #account-modal
    .account-version-badge{
        position:relative;
        z-index:4;

        flex:0 0 auto;

        min-height:40px;

        padding:9px 14px !important;

        font-size:12px;

        box-shadow:
            0 2px 8px
            rgba(15,23,42,0.05);
    }


    /*
    Układ pod paskiem wersji zajmuje
    całą pozostałą wysokość telefonu.
    */
    #account-modal
    .account-modal-layout{
        flex:1 1 auto;

        width:100%;
        min-width:0;
        min-height:0 !important;

        display:flex !important;
        flex-direction:column !important;

        overflow:hidden !important;
    }


    /*
    Zakładki układamy w jednym rzędzie.
    Można przesuwać je palcem w bok.
    */
    #account-modal
    .account-tabs{
        position:relative;
        z-index:3;

        flex:0 0 auto;

        width:100%;
        min-width:0;

        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:center;

        gap:7px;

        padding:8px 10px !important;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        border-right:none !important;
        border-bottom:
            1px solid #dbeafe !important;

        background:#eef2ff;

        -webkit-overflow-scrolling:touch;
        scrollbar-width:none;

        scroll-snap-type:x proximity;
    }


    #account-modal
    .account-tabs::-webkit-scrollbar{
        display:none;
    }


    #account-modal
    .account-tabs button{
        flex:0 0 auto;

        width:auto !important;
        min-width:max-content;
        min-height:44px;

        margin:0 !important;
        padding:10px 13px !important;

        gap:8px;

        border-radius:12px;

        font-size:13px;
        line-height:1.2;

        white-space:nowrap;

        scroll-snap-align:center;
    }


    #account-modal
    .account-tabs button i{
        width:auto;
        min-width:17px;
    }


    /*
    Tylko ten obszar przewija się pionowo.
    Nagłówek i zakładki zostają na miejscu.
    */
    #account-modal
    .account-content{
        flex:1 1 auto;

        width:100%;
        min-width:0;
        min-height:0;

        padding:
            20px
            14px
            calc(
                30px
                +
                env(safe-area-inset-bottom)
            )
            14px !important;

        overflow-x:hidden !important;
        overflow-y:auto !important;

        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;

        background:#ffffff;
    }


    #account-modal
    .account-tab-content{
        width:100%;
        min-width:0;
    }


    #account-modal
    .account-tab-content h3{
        margin:0 0 14px 0;

        font-size:21px;
        line-height:1.25;
    }


    #account-modal
    .account-tab-content p{
        font-size:14px;
        line-height:1.55;
    }


    /*
    Kafelki danych jeden pod drugim.
    */
    #account-modal
    .account-info-grid{
        grid-template-columns:1fr !important;

        gap:10px;

        margin-top:14px;
    }


    #account-modal
    .account-info-card{
        padding:15px;

        border-radius:15px;
    }


    #account-modal
    .account-info-card strong{
        font-size:16px;
        line-height:1.35;

        overflow-wrap:anywhere;
    }


    #account-modal
    .account-note{
        margin-top:14px;
        padding:14px;

        border-radius:15px;

        font-size:13px;
    }


    /*
    Przycisk strony pomocy zajmuje
    całą szerokość ekranu.
    */
    #account-modal
    .account-primary-link{
        width:100%;
        min-height:48px;

        margin-top:8px;
        padding:12px 14px;

        justify-content:center;

        box-sizing:border-box;

        text-align:center;
    }


    #account-modal
    .account-help-list{
        gap:10px;

        margin-top:16px;
    }


    #account-modal
    .account-help-list div{
        padding:14px;

        border-radius:14px;

        font-size:13px;
        line-height:1.45;
    }


    /*
    Karta wersji może układać się pionowo,
    gdy nazwy są zbyt długie.
    */
    #account-modal
    .account-version-card{
        align-items:flex-start;
        flex-direction:column;

        padding:15px;

        border-radius:15px;
    }


    #account-modal
    .account-version-card strong{
        font-size:18px;
    }


    #account-modal
    .account-status-pill{
        margin-top:0;
    }


    #account-modal
    .account-changelog{
        margin-top:14px;
        padding:14px;

        border-radius:15px;
    }


    #account-modal
    .account-changelog ul{
        margin-top:10px;
        padding-left:20px;

        font-size:13px;
        line-height:1.6;
    }


    #account-modal
    .account-changelog li{
        margin-bottom:8px;
    }


    #account-modal
    .account-logout-box{
        align-items:flex-start;

        margin-top:14px;
        padding:15px;

        border-radius:15px;
    }


    /*
    Przyciski wylogowania ustawiamy
    jeden pod drugim.
    */
    #account-modal
    .account-actions{
        display:flex;
        flex-direction:column-reverse;
        align-items:stretch;

        gap:9px;

        margin-top:16px;
    }


    #account-modal
    .account-actions button{
        width:100%;
        min-height:48px;

        margin:0 !important;

        justify-content:center;
    }
}


/* =========================================
   MOJE KONTO — TELEFON OBRÓCONY POZIOMO
   ========================================= */

@media(
    max-width:768px
)
and
(
    orientation:landscape
){

    /*
    Zmniejszamy elementy nieruchome,
    aby więcej miejsca zostało na treść.
    */
    #account-modal
    .account-modal-header{
        min-height:54px;

        padding:
            calc(6px + env(safe-area-inset-top))
            calc(12px + env(safe-area-inset-right))
            6px
            calc(12px + env(safe-area-inset-left))
            !important;
    }


    #account-modal
    .account-avatar{
        width:38px;
        min-width:38px;
        height:38px;

        border-radius:11px;
    }


    #account-modal
    .account-avatar i{
        font-size:18px;
    }


    #account-modal
    .account-profile-block h2{
        font-size:18px;
    }


    #account-modal
    .account-profile-block p{
        display:none;
    }


    #account-modal
    .account-close-button{
        flex-basis:40px;

        width:40px;
        min-width:40px;
        height:40px;
        min-height:40px;
    }


    #account-modal
    .account-version-badge{
        min-height:32px;

        padding:6px 14px !important;
    }


    #account-modal
    .account-tabs{
        padding:6px 10px !important;
    }


    #account-modal
    .account-tabs button{
        min-height:40px;

        padding:8px 12px !important;
    }


    #account-modal
    .account-content{
        padding:
            14px
            calc(
                14px
                +
                env(safe-area-inset-right)
            )
            calc(
                22px
                +
                env(safe-area-inset-bottom)
            )
            calc(
                14px
                +
                env(safe-area-inset-left)
            )
            !important;
    }
}

/* =========================================
   RAPORTY — LISTY MOBILNE
   ========================================= */

/*
Na komputerze karty mobilne są ukryte.
*/
.mobile-report-list{
    display:none;
}


@media(max-width:768px){

    /*
    Każdy raport ma już gotową listę kart,
    więc na telefonie ukrywamy jego tabelę.
    */
    #reports
    .report-section > table{
        display:none !important;
    }


    /*
    Usuwamy puste odstępy tworzone przez
    znaczniki BR w raporcie głównym.
    */
    #reports
    #main-reports-section > br{
        display:none;
    }


    #reports
    .report-section{
        width:100%;
        min-width:0;
    }


    #reports
    .report-section > h2{
        margin:
            22px
            0
            12px
            0;

        font-size:21px;
        line-height:1.3;
    }


    /*
    Kontener wszystkich kart.
    */
    #reports
    .mobile-report-list{
        display:grid;

        grid-template-columns:1fr;

        gap:13px;

        width:100%;
        min-width:0;

        margin-top:14px;
        margin-bottom:22px;
    }


    /*
    Małe karty w raporcie:
    sprzedaż według kodów i klientów.
    */
    #reports
    .mobile-report-summary-card{
        width:100%;
        min-width:0;

        padding:16px;

        display:flex;
        flex-direction:column;
        gap:5px;

        background:#ffffff;

        border:
            1px solid
            #dbe3ef;

        border-left:
            5px solid
            #2563eb;

        border-radius:18px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.07);
    }


    #reports
    .mobile-report-summary-card span{
        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.06em;

        color:#64748b;
    }


    #reports
    .mobile-report-summary-card strong{
        font-size:17px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    #reports
    .mobile-report-summary-card b{
        margin-top:5px;

        font-size:23px;
        line-height:1.2;

        color:#1d4ed8;
    }


    /*
    Główna karta raportowa.
    */
    #reports
    .mobile-report-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:
            1px solid
            #dbe3ef;

        border-left:
            5px solid
            #94a3b8;

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    #reports
    .mobile-report-card.warning{
        border-left-color:#f59e0b;
    }


    #reports
    .mobile-report-card.danger{
        border-left-color:#dc2626;
    }


    #reports
    .mobile-report-card.lost{
        border-left-color:#7c3aed;
    }


    #reports
    .mobile-report-card.neutral{
        border-left-color:#2563eb;
    }


    /*
    Górna część karty:
    numer po lewej, kwota lub status po prawej.
    */
    #reports
    .mobile-report-card-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    #reports
    .mobile-report-card-top > div:first-child{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }


    #reports
    .mobile-report-kicker{
        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.06em;

        color:#64748b;
    }


    #reports
    .mobile-report-number{
        font-size:17px;
        line-height:1.3;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    #reports
    .mobile-report-card-amount{
        flex:0 0 auto;

        max-width:48%;

        font-size:18px;
        line-height:1.25;

        text-align:right;

        color:#92400e;

        overflow-wrap:anywhere;
    }


    #reports
    .mobile-report-status{
        flex:0 0 auto;

        max-width:48%;

        text-align:right;
    }


    #reports
    .mobile-report-status .badge{
        max-width:100%;

        white-space:normal;

        text-align:left;
        line-height:1.25;
    }


    /*
    Tytuł projektu.
    */
    #reports
    .mobile-report-card > h3{
        margin:
            15px
            0
            12px
            0;

        font-size:19px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Najważniejsze dane w szarym polu.
    */
    #reports
    .mobile-report-data{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:10px;

        padding:12px;

        background:#f8fafc;

        border:
            1px solid
            #eef2f7;

        border-radius:14px;
    }


    #reports
    .mobile-report-data > div{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:4px;
    }


    #reports
    .mobile-report-data span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.04em;

        color:#64748b;
    }


    #reports
    .mobile-report-data strong{
        font-size:14px;
        line-height:1.4;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Uwagi, powód utraty lub dodatkowy opis.
    */
    #reports
    .mobile-report-note{
        margin-top:12px;
        padding:12px;

        background:#fff7ed;

        border:
            1px solid
            #fed7aa;

        border-radius:14px;
    }


    #reports
    .mobile-report-note span{
        display:block;

        margin-bottom:5px;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.04em;

        color:#9a3412;
    }


    #reports
    .mobile-report-note p{
        margin:0;

        font-size:13px;
        line-height:1.5;

        color:#475569;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }


    /*
    Czerwony znacznik liczby dni.
    */
    #reports
    .mobile-report-days-badge{
        flex:0 0 auto;

        padding:7px 10px;

        background:#fee2e2;
        color:#991b1b;

        border-radius:999px;

        font-size:12px;
        font-weight:900;

        white-space:nowrap;
    }


    /*
    Duża kwota w karcie przeterminowanej faktury.
    */
    #reports
    .mobile-report-large-amount{
        margin:
            15px
            0;

        font-size:29px;
        line-height:1.1;
        font-weight:900;

        letter-spacing:-0.03em;

        color:#991b1b;

        overflow-wrap:anywhere;
    }


    /*
    Informacja wyświetlana wtedy,
    gdy dany raport jest pusty.
    */
    #reports
    .mobile-report-empty{
        width:100%;
        min-height:180px;

        padding:24px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        text-align:center;

        background:#ffffff;

        border:
            1px dashed
            #cbd5e1;

        border-radius:20px;

        color:#64748b;
    }


    #reports
    .mobile-report-empty i{
        font-size:32px;

        color:#16a34a;
    }


    #reports
    .mobile-report-empty strong{
        font-size:17px;

        color:#334155;
    }


    #reports
    .mobile-report-empty span{
        max-width:280px;

        font-size:13px;
        line-height:1.5;
    }
}


/*
Na bardzo wąskim telefonie dane
układamy już tylko w jednej kolumnie.
*/
@media(max-width:390px){

    #reports
    .mobile-report-data{
        grid-template-columns:1fr;
    }


    #reports
    .mobile-report-card-top{
        flex-direction:column;
    }


    #reports
    .mobile-report-card-amount,
    #reports
    .mobile-report-status{
        max-width:100%;

        text-align:left;
    }
}

/* =========================================
   USTAWIENIA — NAGŁÓWEK I ZAKŁADKI MOBILE
   ETAP 21.1
   ========================================= */

@media(max-width:768px){

    /*
    Cały moduł nie może rozszerzać strony.
    */
    #settings{
        width:100%;
        min-width:0;
        max-width:100%;
    }


    /*
    Nagłówek Ustawień jako osobna karta.
    */
    #settings .settings-header{
        width:100%;
        min-width:0;

        display:grid;
        grid-template-columns:1fr;

        gap:14px;

        margin-bottom:12px;
        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.07);
    }


    #settings .settings-title-block{
        min-width:0;
    }


    #settings .settings-title-block h1{
        margin:0 0 7px 0;

        font-size:25px;
        line-height:1.2;

        color:#0f172a;
    }


    #settings .settings-title-block h1 i{
        color:#2563eb;
    }


    #settings .settings-view-lead{
        margin:0;

        font-size:14px;
        line-height:1.5;

        color:#64748b;
    }


    /*
    Przyciski nagłówka jeden pod drugim.
    Backup pozostaje zawsze widoczny.
    Drugi przycisk zależy od zakładki.
    */
    #settings .settings-header-actions{
        width:100%;
        min-width:0;

        display:grid !important;
        grid-template-columns:1fr;

        gap:9px;
    }


    #settings .settings-header-actions button{
        width:100%;
        min-width:0;
        min-height:48px;

        margin:0;
        padding:11px 14px;

        align-items:center;
        justify-content:center;

        border-radius:13px;

        font-size:14px;
        font-weight:900;

        text-align:center;
    }


    #settings .settings-header-actions button i{
        margin-right:7px;
    }


    /*
    Backup ma spokojniejszy kolor,
    aby głównym przyciskiem był przycisk Dodaj.
    */
    #settings .settings-backup-button{
        display:flex;

        background:#e2e8f0 !important;
        color:#334155 !important;

        border:1px solid #cbd5e1 !important;
    }


    #settings .settings-backup-button:hover{
        background:#cbd5e1 !important;
    }


    #settings .settings-context-action{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    /*
    Zakładki są przyklejone pod górnym
    paskiem aplikacji.
    */
    #settings .settings-tabs{
        position:sticky;
        top:
            calc(
                68px
                +
                env(safe-area-inset-top)
            );

        z-index:40;

        width:100%;
        min-width:0;

        display:flex;
        flex-wrap:nowrap;
        align-items:center;

        gap:8px;

        margin:0 0 16px 0;
        padding:8px;

        overflow-x:auto;
        overflow-y:hidden;

        border:none;
        border-radius:16px;

        background:
            rgba(
                241,
                245,
                249,
                0.96
            );

        box-shadow:
            0 6px 18px
            rgba(15,23,42,0.12);

        backdrop-filter:blur(12px);

        scroll-snap-type:x proximity;
        scroll-padding-inline:10px;

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }


    #settings .settings-tabs::-webkit-scrollbar{
        display:none;
    }


    /*
    Każda zakładka jest osobnym przyciskiem.
    */
    #settings .settings-tabs button{
        flex:0 0 auto;

        min-width:max-content;
        min-height:44px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:8px;

        margin:0;
        padding:10px 13px;

        border:none;
        border-radius:12px;

        background:#e2e8f0;
        color:#475569;

        font-size:13px;
        font-weight:900;
        line-height:1.2;

        white-space:nowrap;

        scroll-snap-align:center;

        box-shadow:none;
        transform:none;
    }


    #settings .settings-tabs button i{
        margin:0;

        font-size:15px;
    }


    #settings .settings-tabs button:hover{
        transform:none;
        box-shadow:none;
    }


    /*
    Wybrana zakładka.
    */
    #settings .settings-tabs button.active-tab{
        position:relative;
        top:0;

        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            );

        color:#ffffff;

        box-shadow:
            0 5px 12px
            rgba(37,99,235,0.22);
    }


    /*
    Wspólny kontener każdej sekcji Ustawień.
    */
    #settings .settings-panel{
        width:100%;
        min-width:0;
        max-width:100%;

        padding-top:2px;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }


    #settings .settings-panel > h2{
        margin:
            4px
            0
            14px
            0;

        font-size:21px;
        line-height:1.3;

        color:#0f172a;
    }


    /*
    Tabele na razie pozostają.
    Przewijają się wewnątrz sekcji,
    a nie razem z całą stroną.
    */
    #settings .settings-panel > table{
        min-width:720px;

        margin-top:0;
        margin-bottom:18px;
    }
}


/* =========================================
   USTAWIENIA — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings .settings-header{
        padding:14px;

        border-radius:18px;
    }


    #settings .settings-title-block h1{
        font-size:23px;
    }


    #settings .settings-tabs{
        padding:7px;
        gap:6px;
    }


    #settings .settings-tabs button{
        min-height:42px;

        padding:9px 11px;

        font-size:12px;
    }
}

/* =========================================
   USTAWIENIA — MOBILNE KARTY LEGENDY
   ETAP 21.2
   ========================================= */

/*
Na komputerze lista kart jest ukryta.
*/
.settings-legend-mobile-list{
    display:none;
}


@media(max-width:768px){

    /*
    Legenda ma już mobilne karty,
    więc tylko w tej zakładce ukrywamy tabelę.
    */
    #settings
    #settings-legend > table{
        display:none !important;
    }


    /*
    Nie potrzebujemy już poziomego
    przewijania sekcji Legendy.
    */
    #settings
    #settings-legend{
        overflow-x:visible;
    }


    /*
    Kontener wszystkich kart.
    */
    #settings
    .settings-legend-mobile-list{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        width:100%;
        min-width:0;

        margin-top:2px;
        margin-bottom:22px;
    }


    /*
    Pojedyncza karta KODU.
    */
    #settings
    .settings-legend-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:
            1px solid
            #dbe3ef;

        border-left:
            5px solid
            #2563eb;

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    /*
    Nieaktywny KOD ma szary pasek.
    */
    #settings
    .settings-legend-mobile-card.is-inactive{
        border-left-color:#94a3b8;
    }


    /*
    Górny wiersz:
    kod po lewej, aktywność po prawej.
    */
    #settings
    .settings-legend-mobile-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    /*
    Niebieski znacznik z kodem.
    */
    #settings
    .settings-legend-mobile-code{
        min-width:0;
        max-width:58%;

        display:inline-flex;
        align-items:center;

        padding:7px 11px;

        background:#dbeafe;
        color:#1e40af;

        border-radius:999px;

        font-size:14px;
        font-weight:900;
        line-height:1.2;

        letter-spacing:0.04em;

        overflow-wrap:anywhere;
    }


    /*
    Status aktywny / nieaktywny.
    */
    #settings
    .settings-legend-mobile-status{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;

        gap:6px;

        padding:7px 10px;

        border-radius:999px;

        font-size:11px;
        font-weight:900;
        line-height:1.2;

        white-space:nowrap;
    }


    #settings
    .settings-legend-mobile-status.active{
        background:#dcfce7;
        color:#166534;
    }


    #settings
    .settings-legend-mobile-status.inactive{
        background:#e2e8f0;
        color:#475569;
    }


    /*
    Nazwa KODU.
    */
    #settings
    .settings-legend-mobile-card > h3{
        margin:
            15px
            0
            12px
            0;

        font-size:20px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Pole z opisem.
    */
    #settings
    .settings-legend-mobile-description{
        padding:12px;

        background:#f8fafc;

        border:
            1px solid
            #eef2f7;

        border-radius:14px;
    }


    #settings
    .settings-legend-mobile-description span{
        display:block;

        margin-bottom:5px;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#64748b;
    }


    #settings
    .settings-legend-mobile-description p{
        margin:0;

        font-size:14px;
        line-height:1.5;

        color:#334155;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }


    /*
    Przyciski na dole karty.
    */
    #settings
    .settings-legend-mobile-actions{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        margin-top:14px;
    }


    #settings
    .settings-legend-mobile-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;

        transform:none;
    }


    #settings
    .settings-legend-mobile-actions button:hover{
        transform:none;
    }


    #settings
    .settings-legend-edit-button{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    #settings
    .settings-legend-delete-button{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }


    /*
    Komunikat, gdy nie ma żadnego KODU.
    */
    #settings
    .settings-legend-mobile-empty{
        width:100%;
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;

        border:
            1px dashed
            #cbd5e1;

        border-radius:20px;

        color:#64748b;
    }


    #settings
    .settings-legend-mobile-empty i{
        font-size:32px;

        color:#94a3b8;
    }


    #settings
    .settings-legend-mobile-empty strong{
        font-size:17px;

        color:#334155;
    }


    #settings
    .settings-legend-mobile-empty span{
        max-width:290px;

        font-size:13px;
        line-height:1.5;
    }
}


/* =========================================
   LEGENDA — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings
    .settings-legend-mobile-top{
        flex-direction:column;
        align-items:flex-start;
    }


    #settings
    .settings-legend-mobile-code{
        max-width:100%;
    }


    #settings
    .settings-legend-mobile-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   USTAWIENIA — MOBILNE KARTY ZASOBÓW
   ETAP 21.3
   ========================================= */

/*
Na komputerze karty są ukryte.
*/
.settings-resource-mobile-list{
    display:none;
}


@media(max-width:768px){

    /*
    Zasoby mają już mobilne karty,
    więc na telefonie ukrywamy tabelę.
    */
    #settings
    #settings-resources > table{
        display:none !important;
    }


    /*
    Sekcja nie potrzebuje już poziomego
    przewijania tabeli.
    */
    #settings
    #settings-resources{
        overflow-x:visible;
    }


    /*
    Lista wszystkich zasobów.
    */
    #settings
    .settings-resource-mobile-list{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        width:100%;
        min-width:0;

        margin-top:2px;
        margin-bottom:22px;
    }


    /*
    Pojedyncza karta.
    */
    #settings
    .settings-resource-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:
            1px solid
            #dbe3ef;

        border-left:
            5px solid
            #2563eb;

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    #settings
    .settings-resource-mobile-card.is-inactive{
        border-left-color:#94a3b8;

        background:#f8fafc;
    }


    /*
    Nazwa i status.
    */
    #settings
    .settings-resource-mobile-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    #settings
    .settings-resource-mobile-top > div{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:4px;
    }


    #settings
    .settings-resource-mobile-kicker{
        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.06em;

        color:#64748b;
    }


    #settings
    .settings-resource-mobile-top > div > strong{
        font-size:20px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Status aktywny lub nieaktywny.
    */
    #settings
    .settings-resource-mobile-status{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;

        gap:6px;

        padding:7px 10px;

        border-radius:999px;

        font-size:11px;
        font-weight:900;
        line-height:1.2;

        white-space:nowrap;
    }


    #settings
    .settings-resource-mobile-status.active{
        background:#dcfce7;
        color:#166534;
    }


    #settings
    .settings-resource-mobile-status.inactive{
        background:#e2e8f0;
        color:#475569;
    }


    /*
    Typ zasobu.
    */
    #settings
    .settings-resource-mobile-type{
        margin-top:14px;
        padding:12px;

        display:flex;
        flex-direction:column;

        gap:4px;

        background:#eff6ff;

        border:
            1px solid
            #dbeafe;

        border-radius:14px;
    }


    #settings
    .settings-resource-mobile-type span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#64748b;
    }


    #settings
    .settings-resource-mobile-type strong{
        font-size:15px;
        line-height:1.4;

        color:#1e3a8a;

        overflow-wrap:anywhere;
    }


    /*
    Parametry zasobu.
    */
    #settings
    .settings-resource-mobile-parameters{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:10px;

        margin-top:10px;
    }


    #settings
    .settings-resource-mobile-parameters > div{
        min-width:0;

        padding:12px;

        display:flex;
        flex-direction:column;

        gap:4px;

        background:#f8fafc;

        border:
            1px solid
            #eef2f7;

        border-radius:14px;
    }


    #settings
    .settings-resource-mobile-parameters span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.04em;

        color:#64748b;

        overflow-wrap:anywhere;
    }


    #settings
    .settings-resource-mobile-parameters strong{
        font-size:14px;
        line-height:1.4;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Opis i uwagi.
    */
    #settings
    .settings-resource-mobile-text{
        margin-top:10px;
        padding:12px;

        background:#f8fafc;

        border:
            1px solid
            #eef2f7;

        border-radius:14px;
    }


    #settings
    .settings-resource-mobile-text.notes{
        background:#fffbeb;

        border-color:#fde68a;
    }


    #settings
    .settings-resource-mobile-text span{
        display:block;

        margin-bottom:5px;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#64748b;
    }


    #settings
    .settings-resource-mobile-text.notes span{
        color:#92400e;
    }


    #settings
    .settings-resource-mobile-text p{
        margin:0;

        font-size:14px;
        line-height:1.5;

        color:#334155;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }


    /*
    Przyciski na dole karty.
    */
    #settings
    .settings-resource-mobile-actions{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        margin-top:14px;
    }


    #settings
    .settings-resource-mobile-actions.single-action{
        grid-template-columns:1fr;
    }


    #settings
    .settings-resource-mobile-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;

        transform:none;
    }


    #settings
    .settings-resource-mobile-actions button:hover{
        transform:none;
    }


    #settings
    .settings-resource-edit-button{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    #settings
    .settings-resource-disable-button{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }


    /*
    Komunikat dla pustej listy.
    */
    #settings
    .settings-resource-mobile-empty{
        width:100%;
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;

        border:
            1px dashed
            #cbd5e1;

        border-radius:20px;

        color:#64748b;
    }


    #settings
    .settings-resource-mobile-empty i{
        font-size:32px;

        color:#94a3b8;
    }


    #settings
    .settings-resource-mobile-empty strong{
        font-size:17px;

        color:#334155;
    }


    #settings
    .settings-resource-mobile-empty span{
        max-width:290px;

        font-size:13px;
        line-height:1.5;
    }
}


/* =========================================
   ZASOBY — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings
    .settings-resource-mobile-top{
        flex-direction:column;
        align-items:flex-start;
    }


    #settings
    .settings-resource-mobile-parameters{
        grid-template-columns:1fr;
    }


    #settings
    .settings-resource-mobile-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   USTAWIENIA — MOBILNE KARTY PRACOWNIKÓW
   ETAP 21.4
   ========================================= */

/*
Na komputerze karty pozostają ukryte.
*/
.settings-employee-mobile-list{
    display:none;
}


@media(max-width:768px){

    /*
    Pracownicy mają już mobilne karty,
    dlatego ukrywamy ich tabelę na telefonie.
    */
    #settings
    #settings-employees > table{
        display:none !important;
    }


    #settings
    #settings-employees{
        overflow-x:visible;
    }


    /*
    Lista pracowników.
    */
    #settings
    .settings-employee-mobile-list{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        width:100%;
        min-width:0;

        margin-top:2px;
        margin-bottom:22px;
    }


    /*
    Pojedyncza karta pracownika.
    */
    #settings
    .settings-employee-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-left:5px solid #2563eb;

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    #settings
    .settings-employee-mobile-card.is-inactive{
        border-left-color:#94a3b8;

        background:#f8fafc;
    }


    /*
    Górna część karty.
    */
    #settings
    .settings-employee-mobile-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    #settings
    .settings-employee-mobile-person{
        min-width:0;

        display:flex;
        align-items:flex-start;

        gap:11px;
    }


    /*
    Kwadrat z inicjałami pracownika.
    */
    #settings
    .settings-employee-mobile-avatar{
        flex:0 0 48px;

        width:48px;
        min-width:48px;
        height:48px;

        display:flex;
        align-items:center;
        justify-content:center;

        background:
            linear-gradient(
                135deg,
                #dbeafe,
                #bfdbfe
            );

        color:#1e40af;

        border:1px solid #93c5fd;
        border-radius:15px;

        font-size:16px;
        font-weight:900;
        letter-spacing:0.04em;
    }


    #settings
    .settings-employee-mobile-heading{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:3px;
    }


    #settings
    .settings-employee-mobile-heading > span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.06em;

        color:#64748b;
    }


    #settings
    .settings-employee-mobile-heading > strong{
        font-size:19px;
        line-height:1.3;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    #settings
    .settings-employee-mobile-heading > small{
        font-size:13px;
        line-height:1.4;

        color:#64748b;

        overflow-wrap:anywhere;
    }


    /*
    Status pracownika.
    */
    #settings
    .settings-employee-mobile-status{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;

        gap:6px;

        padding:7px 10px;

        border-radius:999px;

        font-size:11px;
        font-weight:900;
        line-height:1.2;

        white-space:nowrap;
    }


    #settings
    .settings-employee-mobile-status.active{
        background:#dcfce7;
        color:#166534;
    }


    #settings
    .settings-employee-mobile-status.inactive{
        background:#e2e8f0;
        color:#475569;
    }


    /*
    Rola pracownika.
    */
    #settings
    .settings-employee-mobile-role{
        margin-top:14px;
        padding:12px;

        display:flex;
        flex-direction:column;

        gap:4px;

        background:#eff6ff;

        border:1px solid #dbeafe;
        border-radius:14px;
    }


    #settings
    .settings-employee-mobile-role span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#64748b;
    }


    #settings
    .settings-employee-mobile-role strong{
        font-size:15px;
        line-height:1.4;

        color:#1e3a8a;

        overflow-wrap:anywhere;
    }


    /*
    Telefon i e-mail.
    */
    #settings
    .settings-employee-mobile-contacts{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:10px;

        margin-top:10px;
    }


    #settings
    .settings-employee-mobile-contacts > div{
        min-width:0;

        padding:12px;

        display:flex;
        align-items:flex-start;

        gap:9px;

        background:#f8fafc;

        border:1px solid #eef2f7;
        border-radius:14px;
    }


    #settings
    .settings-employee-mobile-contacts > div > i{
        flex:0 0 auto;

        margin-top:3px;

        color:#2563eb;
    }


    #settings
    .settings-employee-mobile-contacts > div > div{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:3px;
    }


    #settings
    .settings-employee-mobile-contacts span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.04em;

        color:#64748b;
    }


    #settings
    .settings-employee-mobile-contacts strong{
        font-size:13px;
        line-height:1.4;

        color:#0f172a;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /*
    Umowa, stawka i dostępność.
    */
    #settings
    .settings-employee-mobile-details{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:10px;

        margin-top:10px;
    }


    #settings
    .settings-employee-mobile-details > div{
        min-width:0;

        padding:12px;

        display:flex;
        flex-direction:column;

        gap:4px;

        background:#f8fafc;

        border:1px solid #eef2f7;
        border-radius:14px;
    }


    #settings
    .settings-employee-mobile-details span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.04em;

        color:#64748b;
    }


    #settings
    .settings-employee-mobile-details strong{
        font-size:14px;
        line-height:1.4;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Uwagi.
    */
    #settings
    .settings-employee-mobile-notes{
        margin-top:10px;
        padding:12px;

        background:#fffbeb;

        border:1px solid #fde68a;
        border-radius:14px;
    }


    #settings
    .settings-employee-mobile-notes span{
        display:block;

        margin-bottom:5px;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#92400e;
    }


    #settings
    .settings-employee-mobile-notes p{
        margin:0;

        font-size:14px;
        line-height:1.5;

        color:#334155;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }


    /*
    Przyciski na dole karty.
    */
    #settings
    .settings-employee-mobile-actions{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        margin-top:14px;
    }


    #settings
    .settings-employee-mobile-actions.single-action{
        grid-template-columns:1fr;
    }


    #settings
    .settings-employee-mobile-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;

        transform:none;
    }


    #settings
    .settings-employee-mobile-actions button:hover{
        transform:none;
    }


    #settings
    .settings-employee-edit-button{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    #settings
    .settings-employee-disable-button{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }


    /*
    Komunikat pustej listy.
    */
    #settings
    .settings-employee-mobile-empty{
        width:100%;
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;

        border:1px dashed #cbd5e1;
        border-radius:20px;

        color:#64748b;
    }


    #settings
    .settings-employee-mobile-empty i{
        font-size:32px;

        color:#94a3b8;
    }


    #settings
    .settings-employee-mobile-empty strong{
        font-size:17px;

        color:#334155;
    }


    #settings
    .settings-employee-mobile-empty span{
        max-width:290px;

        font-size:13px;
        line-height:1.5;
    }
}


/* =========================================
   PRACOWNICY — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings
    .settings-employee-mobile-top{
        flex-direction:column;
    }


    #settings
    .settings-employee-mobile-status{
        margin-left:59px;
    }


    #settings
    .settings-employee-mobile-contacts,
    #settings
    .settings-employee-mobile-details,
    #settings
    .settings-employee-mobile-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   USTAWIENIA — MOBILNE KARTY ZADAŃ
   ETAP 21.5
   ========================================= */

/*
Na komputerze karty są ukryte.
*/
.settings-task-mobile-list{
    display:none;
}


@media(max-width:768px){

    /*
    Zadania mają już mobilne karty,
    dlatego na telefonie ukrywamy tabelę.
    */
    #settings
    #settings-tasks > table{
        display:none !important;
    }


    #settings
    #settings-tasks{
        overflow-x:visible;
    }


    /*
    Lista kart.
    */
    #settings
    .settings-task-mobile-list{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        width:100%;
        min-width:0;

        margin-top:2px;
        margin-bottom:22px;
    }


    /*
    Pojedyncza karta zadania.
    */
    #settings
    .settings-task-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-left:5px solid #2563eb;

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    /*
    Nieaktywne zadanie ma szary pasek.
    */
    #settings
    .settings-task-mobile-card.is-inactive{
        border-left-color:#94a3b8;

        background:#f8fafc;
    }


    /*
    Górna część karty.
    */
    #settings
    .settings-task-mobile-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    #settings
    .settings-task-mobile-heading{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:4px;
    }


    #settings
    .settings-task-mobile-heading > span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.06em;

        color:#64748b;
    }


    #settings
    .settings-task-mobile-heading > strong{
        font-size:20px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Status aktywności.
    */
    #settings
    .settings-task-mobile-status{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;

        gap:6px;

        padding:7px 10px;

        border-radius:999px;

        font-size:11px;
        font-weight:900;
        line-height:1.2;

        white-space:nowrap;
    }


    #settings
    .settings-task-mobile-status.active{
        background:#dcfce7;
        color:#166534;
    }


    #settings
    .settings-task-mobile-status.inactive{
        background:#e2e8f0;
        color:#475569;
    }


    /*
    Opis i uwagi.
    */
    #settings
    .settings-task-mobile-text{
        margin-top:12px;
        padding:12px;

        background:#f8fafc;

        border:1px solid #eef2f7;
        border-radius:14px;
    }


    #settings
    .settings-task-mobile-text.notes{
        background:#fffbeb;

        border-color:#fde68a;
    }


    #settings
    .settings-task-mobile-text.empty{
        background:#f8fafc;

        border-style:dashed;
        border-color:#cbd5e1;
    }


    #settings
    .settings-task-mobile-text > span{
        display:block;

        margin-bottom:5px;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#64748b;
    }


    #settings
    .settings-task-mobile-text.notes > span{
        color:#92400e;
    }


    #settings
    .settings-task-mobile-text > p{
        margin:0;

        font-size:14px;
        line-height:1.5;

        color:#334155;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }


    #settings
    .settings-task-mobile-text.empty > p{
        color:#94a3b8;
    }


    /*
    Przyciski na dole karty.
    */
    #settings
    .settings-task-mobile-actions{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        margin-top:14px;
    }


    #settings
    .settings-task-mobile-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;

        transform:none;
    }


    #settings
    .settings-task-mobile-actions button:hover{
        transform:none;
    }


    #settings
    .settings-task-edit-button{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    #settings
    .settings-task-delete-button{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }


    /*
    Komunikat pustej listy.
    */
    #settings
    .settings-task-mobile-empty{
        width:100%;
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;

        border:1px dashed #cbd5e1;
        border-radius:20px;

        color:#64748b;
    }


    #settings
    .settings-task-mobile-empty i{
        font-size:32px;

        color:#94a3b8;
    }


    #settings
    .settings-task-mobile-empty strong{
        font-size:17px;

        color:#334155;
    }


    #settings
    .settings-task-mobile-empty span{
        max-width:290px;

        font-size:13px;
        line-height:1.5;
    }
}


/* =========================================
   ZADANIA — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings
    .settings-task-mobile-top{
        flex-direction:column;
        align-items:flex-start;
    }


    #settings
    .settings-task-mobile-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   USTAWIENIA — MOBILNE KARTY TYPÓW PLIKÓW
   ETAP 21.6
   ========================================= */

/*
Na komputerze lista kart jest ukryta.
*/
.settings-file-type-mobile-list{
    display:none;
}


@media(max-width:768px){

    /*
    Typy plików mają już mobilne karty,
    więc na telefonie ukrywamy tabelę.
    */
    #settings
    #settings-file-types > table{
        display:none !important;
    }


    /*
    Nie potrzebujemy poziomego
    przewijania tej sekcji.
    */
    #settings
    #settings-file-types{
        overflow-x:visible;
    }


    /*
    Kontener kart.
    */
    #settings
    .settings-file-type-mobile-list{
        display:grid;

        grid-template-columns:1fr;

        gap:13px;

        width:100%;
        min-width:0;

        margin-top:2px;
        margin-bottom:22px;
    }


    /*
    Pojedyncza karta typu pliku.
    */
    #settings
    .settings-file-type-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-left:5px solid #2563eb;

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    /*
    Główna część karty:
    litera po lewej i nazwa po prawej.
    */
    #settings
    .settings-file-type-mobile-main{
        min-width:0;

        display:flex;
        align-items:center;

        gap:12px;
    }


    /*
    Niebieski kwadrat z pierwszą literą.
    */
    #settings
    .settings-file-type-mobile-icon{
        flex:0 0 50px;

        width:50px;
        min-width:50px;
        height:50px;

        display:flex;
        align-items:center;
        justify-content:center;

        background:
            linear-gradient(
                135deg,
                #dbeafe,
                #bfdbfe
            );

        color:#1e40af;

        border:1px solid #93c5fd;
        border-radius:15px;

        font-size:20px;
        font-weight:900;
        line-height:1;
    }


    #settings
    .settings-file-type-mobile-heading{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:4px;
    }


    #settings
    .settings-file-type-mobile-heading span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.06em;

        color:#64748b;
    }


    #settings
    .settings-file-type-mobile-heading strong{
        font-size:19px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
        word-break:break-word;
    }


    /*
    Przyciski na dole karty.
    */
    #settings
    .settings-file-type-mobile-actions{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        margin-top:15px;
    }


    #settings
    .settings-file-type-mobile-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;

        transform:none;
    }


    #settings
    .settings-file-type-mobile-actions button:hover{
        transform:none;
    }


    #settings
    .settings-file-type-edit-button{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    #settings
    .settings-file-type-delete-button{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }


    /*
    Informacja, gdy lista jest pusta.
    */
    #settings
    .settings-file-type-mobile-empty{
        width:100%;
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;

        border:1px dashed #cbd5e1;
        border-radius:20px;

        color:#64748b;
    }


    #settings
    .settings-file-type-mobile-empty i{
        font-size:32px;

        color:#94a3b8;
    }


    #settings
    .settings-file-type-mobile-empty strong{
        font-size:17px;

        color:#334155;
    }


    #settings
    .settings-file-type-mobile-empty span{
        max-width:290px;

        font-size:13px;
        line-height:1.5;
    }
}


/* =========================================
   TYPY PLIKÓW — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings
    .settings-file-type-mobile-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   USTAWIENIA — MOBILNE KARTY
   TYPÓW WYDARZEŃ
   ETAP 21.7
   ========================================= */

/*
Na komputerze karty są ukryte.
*/
.settings-event-type-mobile-list{
    display:none;
}


@media(max-width:768px){

    /*
    Typy wydarzeń mają już karty,
    więc ukrywamy ich tabelę na telefonie.
    */
    #settings
    #settings-event-types > table{
        display:none !important;
    }


    /*
    Sekcja nie potrzebuje już przewijania
    szerokiej tabeli.
    */
    #settings
    #settings-event-types{
        overflow-x:visible;
    }


    /*
    Lista wszystkich kart.
    */
    #settings
    .settings-event-type-mobile-list{
        display:grid;

        grid-template-columns:1fr;

        gap:14px;

        width:100%;
        min-width:0;

        margin-top:2px;
        margin-bottom:22px;
    }


    /*
    Pojedyncza karta.
    Lewy pasek ma kolor wydarzenia.
    */
    #settings
    .settings-event-type-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;

        border-left:
            6px solid
            var(
                --settings-event-color,
                #2563eb
            );

        border-radius:20px;

        box-shadow:
            0 8px 22px
            rgba(15,23,42,0.08),
            0 2px 6px
            rgba(15,23,42,0.04);
    }


    /*
    Nieaktywny typ ma delikatnie
    szare tło, ale zachowuje swój kolor.
    */
    #settings
    .settings-event-type-mobile-card.is-inactive{
        background:#f8fafc;
    }


    /*
    Kod po lewej i aktywność po prawej.
    */
    #settings
    .settings-event-type-mobile-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;

        gap:12px;

        min-width:0;
    }


    #settings
    .settings-event-type-mobile-code{
        min-width:0;
        max-width:58%;

        display:inline-flex;
        align-items:center;

        padding:7px 11px;

        background:#ede9fe;
        color:#5b21b6;

        border-radius:999px;

        font-size:13px;
        font-weight:900;
        line-height:1.2;

        letter-spacing:0.05em;

        overflow-wrap:anywhere;
    }


    /*
    Status aktywny albo nieaktywny.
    */
    #settings
    .settings-event-type-mobile-status{
        flex:0 0 auto;

        display:inline-flex;
        align-items:center;

        gap:6px;

        padding:7px 10px;

        border-radius:999px;

        font-size:11px;
        font-weight:900;
        line-height:1.2;

        white-space:nowrap;
    }


    #settings
    .settings-event-type-mobile-status.active{
        background:#dcfce7;
        color:#166534;
    }


    #settings
    .settings-event-type-mobile-status.inactive{
        background:#e2e8f0;
        color:#475569;
    }


    /*
    Nazwa typu wydarzenia.
    */
    #settings
    .settings-event-type-mobile-card > h3{
        margin:
            15px
            0
            12px
            0;

        font-size:20px;
        line-height:1.35;

        color:#0f172a;

        overflow-wrap:anywhere;
    }


    /*
    Pole pokazujące kolor i jego numer.
    */
    #settings
    .settings-event-type-mobile-color{
        min-width:0;

        display:flex;
        align-items:center;

        gap:12px;

        padding:12px;

        background:#f8fafc;

        border:1px solid #eef2f7;
        border-radius:14px;
    }


    /*
    Okrągła próbka koloru.
    */
    #settings
    .settings-event-type-mobile-color-dot{
        flex:0 0 34px;

        width:34px;
        min-width:34px;
        height:34px;

        background:
            var(
                --settings-event-color,
                #2563eb
            );

        border:
            2px solid
            rgba(15,23,42,0.12);

        border-radius:999px;

        box-shadow:
            0 3px 8px
            rgba(15,23,42,0.14);
    }


    #settings
    .settings-event-type-mobile-color > div:last-child{
        min-width:0;

        display:flex;
        flex-direction:column;

        gap:4px;
    }


    #settings
    .settings-event-type-mobile-color span{
        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#64748b;
    }


    #settings
    .settings-event-type-mobile-color strong{
        font-size:14px;
        line-height:1.3;

        color:#0f172a;

        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            monospace;

        overflow-wrap:anywhere;
    }


    /*
    Uwagi.
    */
    #settings
    .settings-event-type-mobile-notes{
        margin-top:10px;
        padding:12px;

        background:#fffbeb;

        border:1px solid #fde68a;
        border-radius:14px;
    }


    #settings
    .settings-event-type-mobile-notes span{
        display:block;

        margin-bottom:5px;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;

        color:#92400e;
    }


    #settings
    .settings-event-type-mobile-notes p{
        margin:0;

        font-size:14px;
        line-height:1.5;

        color:#334155;

        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }


    /*
    Przyciski na dole karty.
    */
    #settings
    .settings-event-type-mobile-actions{
        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        margin-top:14px;
    }


    #settings
    .settings-event-type-mobile-actions button{
        width:100%;
        min-width:0;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;

        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;

        transform:none;
    }


    #settings
    .settings-event-type-mobile-actions button:hover{
        transform:none;
    }


    #settings
    .settings-event-type-edit-button{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            ) !important;

        color:#ffffff !important;
    }


    #settings
    .settings-event-type-delete-button{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }


    /*
    Komunikat pustej listy.
    */
    #settings
    .settings-event-type-mobile-empty{
        width:100%;
        min-height:190px;

        display:flex;
        flex-direction:column;
        align-items:center;
        justify-content:center;

        gap:9px;

        padding:24px;

        text-align:center;

        background:#ffffff;

        border:1px dashed #cbd5e1;
        border-radius:20px;

        color:#64748b;
    }


    #settings
    .settings-event-type-mobile-empty i{
        font-size:32px;

        color:#94a3b8;
    }


    #settings
    .settings-event-type-mobile-empty strong{
        font-size:17px;

        color:#334155;
    }


    #settings
    .settings-event-type-mobile-empty span{
        max-width:290px;

        font-size:13px;
        line-height:1.5;
    }
}


/* =========================================
   TYPY WYDARZEŃ — BARDZO WĄSKI TELEFON
   ========================================= */

@media(max-width:390px){

    #settings
    .settings-event-type-mobile-top{
        flex-direction:column;
        align-items:flex-start;
    }


    #settings
    .settings-event-type-mobile-code{
        max-width:100%;
    }


    #settings
    .settings-event-type-mobile-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   USTAWIENIA — FORMULARZE MOBILNE
   ETAP 21.9
   ========================================= */

@media(max-width:768px){

    /*
    Wszystkie formularze słowników
    zajmują cały ekran telefonu.
    */
    .settings-form-modal{
        position:fixed !important;
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        overflow:hidden !important;

        background:#f1f5f9 !important;
    }


    .settings-form-modal
    > .modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            0
            14px
            calc(
                14px
                +
                env(safe-area-inset-bottom)
            )
            14px
            !important;

        display:block !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        border:none !important;
        border-radius:0 !important;

        background:#ffffff !important;

        box-shadow:none !important;

        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }


    /*
    Nagłówek pozostaje na górze
    podczas przewijania formularza.
    */
    .settings-form-modal
    .app-modal-header{
        position:sticky !important;
        top:0 !important;
        z-index:20 !important;

        min-height:68px;

        margin:
            0
            -14px
            16px
            -14px
            !important;

        padding:
            calc(
                12px
                +
                env(safe-area-inset-top)
            )
            14px
            12px
            14px
            !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;

        gap:12px;

        background:
            linear-gradient(
                135deg,
                #0f172a,
                #1e3a8a
            ) !important;

        box-shadow:
            0 5px 18px
            rgba(15,23,42,0.22);
    }


    .settings-form-modal
    .app-modal-header h2{
        flex:1;
        min-width:0;

        margin:0 !important;

        color:#ffffff !important;

        font-size:20px !important;
        line-height:1.25 !important;

        overflow-wrap:anywhere;
    }


    .settings-form-modal
    .app-modal-close{
        flex:0 0 44px;

        width:44px !important;
        min-width:44px !important;
        height:44px !important;
        min-height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border:
            1px solid
            rgba(255,255,255,0.20)
            !important;

        border-radius:13px !important;

        background:
            rgba(255,255,255,0.13)
            !important;

        color:#ffffff !important;

        box-shadow:none !important;
    }


    /*
    Etykiety formularza.
    */
    .settings-form-modal
    .form-modal > label{
        display:block;

        margin:
            13px
            0
            7px
            0
            !important;

        color:#475569;

        font-size:12px;
        line-height:1.3;
        font-weight:900;
    }


    /*
    Pola formularzy.
    */
    .settings-form-modal
    input:not([type="hidden"]),

    .settings-form-modal
    select,

    .settings-form-modal
    textarea{
        width:100% !important;
        max-width:100% !important;
        min-height:48px !important;

        margin:0 !important;
        padding:12px 13px !important;

        border:1px solid #cbd5e1 !important;
        border-radius:13px !important;

        background:#f8fafc !important;
        color:#0f172a !important;

        box-sizing:border-box !important;

        font-size:16px !important;
    }


    .settings-form-modal
    textarea{
        min-height:105px !important;

        resize:vertical;
    }


    .settings-form-modal
    input:focus,

    .settings-form-modal
    select:focus,

    .settings-form-modal
    textarea:focus{
        outline:none !important;

        border-color:#2563eb !important;

        background:#ffffff !important;

        box-shadow:
            0 0 0 3px
            rgba(37,99,235,0.12)
            !important;
    }


    /*
    Zakładki Pracownika i Zasobu.
    */
    .settings-form-modal
    .modal-tabs{
        position:sticky;
        top:
            calc(
                68px
                +
                env(safe-area-inset-top)
            );

        z-index:15;

        width:100%;

        margin:
            -2px
            0
            15px
            0
            !important;

        padding:7px !important;

        display:flex !important;
        flex-wrap:nowrap !important;

        gap:7px;

        overflow-x:auto !important;
        overflow-y:hidden !important;

        background:
            rgba(241,245,249,0.96);

        border:none !important;
        border-radius:14px;

        box-shadow:
            0 4px 12px
            rgba(15,23,42,0.10);

        scrollbar-width:none;

        -webkit-overflow-scrolling:touch;
    }


    .settings-form-modal
    .modal-tabs::-webkit-scrollbar{
        display:none;
    }


    .settings-form-modal
    .modal-tabs button{
        flex:0 0 auto;

        width:auto !important;
        min-width:max-content;
        min-height:42px;

        margin:0 !important;
        padding:9px 12px !important;

        white-space:nowrap;
    }


    /*
    Tabele wydarzeń pracownika i zasobu
    pozostają przewijane w swoim obszarze.
    */
    .settings-form-modal
    .employee-tab-content,

    .settings-form-modal
    .resource-tab-content{
        width:100%;
        min-width:0;

        overflow-x:auto;

        -webkit-overflow-scrolling:touch;
    }


    .settings-form-modal
    .employee-tab-content table,

    .settings-form-modal
    .resource-tab-content table{
        min-width:650px;
    }


    /*
    Wybór koloru wydarzenia.
    */
    .settings-form-modal
    .color-picker-row{
        width:100%;

        display:grid;
        grid-template-columns:64px 1fr;

        align-items:center;

        gap:10px;
    }


    .settings-form-modal
    input[type="color"]{
        width:64px !important;
        min-width:64px !important;
        height:48px !important;

        padding:4px !important;
    }


    .settings-form-modal
    .color-picker-row span{
        min-height:48px;

        display:flex;
        align-items:center;

        padding:0 13px;

        background:#f8fafc;

        border:1px solid #cbd5e1;
        border-radius:13px;

        font-family:
            ui-monospace,
            SFMono-Regular,
            Menlo,
            Monaco,
            Consolas,
            monospace;
    }


    /*
    Dolny pasek Anuluj / Zapisz.
    */
    .settings-form-modal
    .settings-form-actions{
        position:sticky;
        bottom:
            calc(
                -14px
                -
                env(safe-area-inset-bottom)
            );

        z-index:20;

        width:auto;

        margin:
            20px
            -14px
            calc(
                -14px
                -
                env(safe-area-inset-bottom)
            )
            -14px;

        padding:
            12px
            14px
            calc(
                12px
                +
                env(safe-area-inset-bottom)
            )
            14px;

        display:grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:9px;

        background:#ffffff;

        border-top:1px solid #dbe3ef;

        box-shadow:
            0 -7px 20px
            rgba(15,23,42,0.10);
    }


    .settings-form-modal
    .settings-form-actions button{
        width:100% !important;
        min-width:0 !important;
        min-height:48px !important;

        margin:0 !important;
        padding:10px 12px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        gap:7px;

        border:none !important;
        border-radius:13px !important;

        font-size:14px;
        font-weight:900;

        transform:none !important;
    }


    .settings-form-modal
    .settings-form-cancel{
        background:#e2e8f0 !important;
        color:#334155 !important;
    }


    .settings-form-modal
    .settings-form-save{
        background:
            linear-gradient(
                135deg,
                #2563eb,
                #1d4ed8
            )
            !important;

        color:#ffffff !important;
    }
}


/* =========================================
   USTAWIENIA — BACKUP MOBILNY
   ========================================= */

@media(max-width:768px){

    body.settings-backup-open{
        height:100%;
        overflow:hidden !important;

        overscroll-behavior:none;
    }


    #backup-modal{
        position:fixed !important;
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        margin:0 !important;
        padding:0 !important;

        align-items:stretch !important;
        justify-content:stretch !important;

        overflow:hidden !important;

        background:#f1f5f9 !important;

        z-index:100600 !important;
    }


    #backup-modal
    .export-modal-box{
        width:100vw !important;
        max-width:100vw !important;

        height:100dvh !important;
        min-height:100dvh !important;
        max-height:100dvh !important;

        margin:0 !important;

        padding:
            0
            14px
            calc(
                20px
                +
                env(safe-area-inset-bottom)
            )
            14px
            !important;

        overflow-y:auto !important;
        overflow-x:hidden !important;

        border:none !important;
        border-radius:0 !important;

        background:#f8fafc !important;

        box-shadow:none !important;

        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }


    #backup-modal
    .app-modal-header{
        position:sticky !important;
        top:0 !important;
        z-index:20;

        min-height:68px;

        margin:
            0
            -14px
            15px
            -14px
            !important;

        padding:
            calc(
                12px
                +
                env(safe-area-inset-top)
            )
            14px
            12px
            14px
            !important;

        display:flex !important;
        flex-direction:row !important;
        align-items:center !important;
        justify-content:space-between !important;

        gap:12px;

        background:
            linear-gradient(
                135deg,
                #0f172a,
                #1e3a8a
            )
            !important;

        box-shadow:
            0 5px 18px
            rgba(15,23,42,0.22);
    }


    #backup-modal
    .app-modal-header h2{
        min-width:0;

        margin:0 !important;

        color:#ffffff !important;

        font-size:20px !important;
        line-height:1.25 !important;
    }


    #backup-modal
    .app-modal-close{
        flex:0 0 44px;

        width:44px !important;
        min-width:44px !important;
        height:44px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        border:
            1px solid
            rgba(255,255,255,0.20)
            !important;

        border-radius:13px !important;

        background:
            rgba(255,255,255,0.13)
            !important;

        color:#ffffff !important;
    }


    #backup-modal
    .export-modal-description{
        margin:
            0
            0
            15px
            0;

        font-size:14px;
        line-height:1.5;

        color:#64748b;
    }


    #backup-modal
    .backup-choice-grid{
        grid-template-columns:1fr !important;

        gap:12px;
    }


    #backup-modal
    .backup-choice-card{
        width:100%;
        min-height:150px;

        margin:0;
        padding:18px;

        align-items:flex-start;

        text-align:left;
    }


    #backup-modal
    .backup-choice-card > i{
        font-size:27px;
    }


    #backup-modal
    .backup-choice-card strong{
        font-size:17px;
        line-height:1.35;
    }


    #backup-modal
    .backup-choice-card span{
        font-size:13px;
        line-height:1.5;
    }


    #backup-modal
    .export-panel-header{
        display:flex;
        flex-direction:column;
        align-items:stretch;

        gap:12px;
    }


    #backup-modal
    .export-panel-header h3{
        margin:0;

        font-size:20px;
    }


    #backup-modal
    .export-panel-actions{
        display:grid;
        grid-template-columns:1fr 1fr;

        gap:8px;
    }


    #backup-modal
    .export-panel-actions button{
        width:100%;
        min-width:0;
        min-height:44px;

        margin:0;
        padding:9px;

        white-space:normal;
    }


    #backup-modal
    .export-checkbox-grid{
        grid-template-columns:1fr !important;

        gap:9px;

        margin-top:14px;
    }


    #backup-modal
    .export-checkbox-card{
        width:100%;
        min-width:0;

        padding:13px;

        align-items:flex-start;

        border-radius:14px;
    }


    #backup-modal
    .export-checkbox-card input{
        flex:0 0 26px;

        width:26px !important;
        min-width:26px !important;
        height:26px !important;

        margin:1px 0 0 0;
    }


    #backup-modal
    .export-checkbox-card span{
        min-width:0;
    }


    #backup-modal
    .export-checkbox-card strong,
    #backup-modal
    .export-checkbox-card small{
        overflow-wrap:anywhere;
    }


    #backup-modal
    .modal-actions-fixed{
        position:sticky;
        bottom:
            calc(
                -20px
                -
                env(safe-area-inset-bottom)
            );

        z-index:20;

        margin:
            18px
            -14px
            calc(
                -20px
                -
                env(safe-area-inset-bottom)
            )
            -14px;

        padding:
            12px
            14px
            calc(
                12px
                +
                env(safe-area-inset-bottom)
            )
            14px;

        display:grid !important;
        grid-template-columns:1fr !important;

        gap:8px;

        background:#ffffff;

        border-top:1px solid #dbe3ef;

        box-shadow:
            0 -7px 20px
            rgba(15,23,42,0.10);
    }


    #backup-modal
    .modal-actions-fixed button{
        width:100% !important;
        min-height:48px;

        margin:0 !important;

        justify-content:center;
    }
}


@media(max-width:390px){

    .settings-form-modal
    .settings-form-actions,

    #backup-modal
    .export-panel-actions{
        grid-template-columns:1fr;
    }
}

/* =========================================
   POPRAWKA — MODALE USTAWIEŃ NAD MENU
   ========================================= */

@media(max-width:768px){

    /*
    Formularze Ustawień muszą znajdować się
    wyżej niż górna belka aplikacji.
    */
    .settings-form-modal{
        z-index:100700 !important;
    }


    /*
    Nagłówek formularza wraz z przyciskiem X
    pozostaje nad zawartością formularza.
    */
    .settings-form-modal
    .app-modal-header{
        z-index:100701 !important;
    }
}

/* =========================================
   KONTAKT GŁÓWNY — MOBILE
   ========================================= */

@media(max-width:768px){

    #client-contact-modal
    .client-contact-primary-option{
        margin-top:15px;
        padding:13px;
    }


    #client-contact-modal
    .client-contact-primary-option input{
        min-height:22px !important;

        padding:0 !important;
    }


    #client-contact-modal
    .client-contact-primary-option small{
        margin-left:32px;
    }


    #client-modal
    .client-contacts-management-table{
        min-width:620px;
    }
}

/* =========================================
   PROJEKT — KONTAKT NA TELEFONIE
   ========================================= */

@media(max-width:768px){

    #project-modal
    .project-contact-help{
        margin:
            -3px
            0
            8px
            0;

        padding:0 2px;

        font-size:12px;
        line-height:1.45;
    }


    #project-modal
    .contact-select-row{
        width:100%;

        display:grid;
        grid-template-columns:
            minmax(0, 1fr)
            48px;

        gap:8px;
    }


    #project-modal
    .contact-select-row select{
        min-width:0;
    }


    #project-modal
    .contact-details-button{
        width:48px !important;
        min-width:48px !important;
        height:48px !important;
        min-height:48px !important;

        margin:0 !important;
        padding:0 !important;

        display:flex;
        align-items:center;
        justify-content:center;
    }
}

/* =====================================
   POWIADOMIENIA — 3 KAPSUŁKI W JEDNYM RZĘDZIE
   ===================================== */

@media(max-width:768px){

    .notifications-summary{
        display:grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap:7px !important;
    }

    .notification-summary-card{
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;
        gap:3px !important;

        padding:10px 5px !important;

        text-align:center !important;
    }

    .notification-summary-card span{
        max-width:100%;

        font-size:10px !important;
        line-height:1.15 !important;

        white-space:normal;
        overflow-wrap:anywhere;
    }

    .notification-summary-card strong{
        font-size:19px !important;
        line-height:1 !important;
    }
}

/* =====================================
   POWIADOMIENIA — LISTA WYPEŁNIA PANEL
   ===================================== */

/*
Po otwarciu panel ma układ pionowy.
Ta reguła jest bezpieczna również
na komputerze.
*/
.notifications-panel{
    flex-direction:column;
}

@media(max-width:768px){

    .notifications-panel{
        top:
            calc(
                70px
                +
                env(safe-area-inset-top)
            ) !important;

        bottom:
            calc(
                10px
                +
                env(safe-area-inset-bottom)
            ) !important;

        left:10px !important;
        right:10px !important;

        width:auto !important;
        height:auto !important;
        max-height:none !important;

        overflow:hidden;
    }

    /*
    Nagłówek, liczniki i stopka
    zachowują swoją wysokość.
    */
    .notifications-panel-header,
    .notifications-summary,
    .notifications-footer{
        flex:0 0 auto;
    }

    /*
    Lista zajmuje całe wolne miejsce
    pomiędzy kapsułkami a stopką.
    */
    .notifications-list{
        flex:1 1 auto;

        min-height:0 !important;
        max-height:none !important;

        overflow-y:auto !important;
        overflow-x:hidden;

        -webkit-overflow-scrolling:touch;
    }

    /*
    Odśwież pozostaje na samym dole.
    */
    .notifications-footer{
        position:relative;
        z-index:2;

        background:#f8fafc;

        box-shadow:
            0 -6px 16px
            rgba(15,23,42,0.06);
    }
}

/* =========================================
   PRZYBORNIK — 3 LICZNIKI W JEDNYM RZĘDZIE
   ========================================= */

@media(max-width:768px){

    .toolbox-summary-grid{
        display:grid !important;
        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap:6px !important;
    }

    .toolbox-summary-card{
        min-width:0 !important;
        min-height:86px !important;

        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:3px !important;

        padding:7px 3px !important;

        text-align:center !important;
    }

    .toolbox-summary-card i{
        width:30px !important;
        min-width:30px !important;
        height:30px !important;

        border-radius:9px !important;

        font-size:14px !important;
    }

    .toolbox-summary-card div{
        width:100%;
        min-width:0;

        align-items:center !important;
        gap:2px !important;
    }

    .toolbox-summary-card span{
        max-width:100%;

        font-size:12px !important;
        line-height:1.15 !important;
        font-weight:900 !important;

        text-align:center;
        white-space:normal;
    }

    .toolbox-summary-card strong{
        font-size:24px !important;
        line-height:1 !important;
    }
}

/* =========================================
   PRZYBORNIK — LICZNIKI W JEDNYM RZĘDZIE
   OSTATECZNE NADPISANIE MOBILNE
   ========================================= */

@media(max-width:768px){

    #toolbox .toolbox-summary-grid{
        width:100% !important;

        display:grid !important;

        grid-template-columns:
            repeat(3, minmax(0, 1fr)) !important;

        gap:6px !important;

        margin-bottom:16px !important;
    }

    #toolbox .toolbox-summary-card{
        width:auto !important;
        min-width:0 !important;
        min-height:86px !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;
        justify-content:center !important;

        gap:3px !important;

        margin:0 !important;
        padding:7px 3px !important;

        text-align:center !important;
    }

    #toolbox .toolbox-summary-card > i{
        width:30px !important;
        min-width:30px !important;
        height:30px !important;

        display:flex !important;
        align-items:center !important;
        justify-content:center !important;

        margin:0 !important;

        border-radius:9px !important;

        font-size:14px !important;
    }

    #toolbox .toolbox-summary-card > div{
        width:100% !important;
        min-width:0 !important;

        display:flex !important;
        flex-direction:column !important;
        align-items:center !important;

        gap:2px !important;
    }

    #toolbox .toolbox-summary-card span{
        width:100% !important;
        max-width:100% !important;

        font-size:12px !important;
        line-height:1.15 !important;
        font-weight:900 !important;

        text-align:center !important;
        white-space:normal !important;
    }

    #toolbox .toolbox-summary-card strong{
        font-size:24px !important;
        line-height:1 !important;
    }
}

/* =========================================
   MOJE KONTO — PROFIL UŻYTKOWNIKA NA TELEFONIE
   ========================================= */

@media(max-width:768px){

    #account-modal
    .account-user-form{
        margin-top:16px;
    }

    #account-modal
    .account-user-form-grid{
        grid-template-columns:1fr !important;
        gap:14px;
    }

    #account-modal
    .account-user-field-wide{
        grid-column:auto;
    }

    #account-modal
    .account-user-field input{
        width:100% !important;
        min-width:0 !important;
        max-width:100% !important;

        height:50px;
        min-height:50px;

        font-size:16px;
    }

    #account-modal
    .account-profile-actions{
        width:100%;

        margin-top:16px;
    }

    #account-modal
    .account-profile-save-button{
        width:100%;
        min-height:50px;

        margin:0 !important;

        display:flex;
        align-items:center;
        justify-content:center;
    }

    #account-modal
    .account-profile-status{
        margin-top:14px;
    }

    #account-modal
    .account-recovery-note{
        gap:12px;

        margin-top:18px;
        padding:15px;

        border-radius:15px;
    }

    #account-modal
    .account-recovery-note > i{
        flex:0 0 auto;
        font-size:21px;
    }

    #account-modal
    .account-recovery-note span{
        font-size:13px;
        line-height:1.5;
    }
}

/* =========================================
   RESET HASŁA — TELEFON
   ========================================= */

@media(max-width:768px){

    .password-reset-box{
        width:100%;
        max-width:100vw;

        padding:20px 16px;

        border-radius:22px 22px 0 0;
    }

    .password-reset-header{
        gap:12px;
        margin-bottom:18px;
    }

    .password-reset-header h2{
        font-size:22px;
    }

    .password-reset-field input{
        height:50px;
        min-height:50px;

        font-size:16px;
    }

    .password-reset-actions{
        width:100%;

        flex-direction:column-reverse;
        align-items:stretch;
    }

    .password-reset-actions button{
        width:100%;
        min-height:50px;

        justify-content:center;
    }

    .login-forgot-button{
        width:100%;
    }

    /* =====================================
       KOSZTY OGÓLNE — WIDOK MOBILNY
       ===================================== */

    #general-costs
    .general-costs-view-header{
        flex-direction:column;
        align-items:stretch;
        gap:12px;
    }

    #general-costs
    .general-costs-header-actions{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:8px;
    }

    #general-costs
    .general-costs-header-actions button{
        width:100%;
        min-height:48px;
    }

    #general-costs
    .general-costs-summary-grid{
        display:grid;

        grid-template-columns:1fr !important;

        gap:12px;
    }

    #general-costs
    .general-costs-summary-card{
        width:100%;
        min-width:0;

        padding:16px;
    }

    #general-costs
    .general-costs-panel{
        width:100%;

        padding:14px;

        overflow:visible;
    }

    #general-costs
    .general-costs-filters{
        width:100%;

        display:flex;
        flex-direction:column;
        align-items:stretch;
        gap:9px;
    }

    #general-costs
    .general-costs-search-box,
    #general-costs
    .general-costs-filters select,
    #general-costs
    .general-costs-clear-filters{
        width:100%;
    }

    #general-costs
    .general-costs-clear-filters{
        min-height:46px;
    }

    #general-costs
    .general-costs-table-wrap{
        display:none;
    }

    #general-costs
    .general-costs-mobile-list{
        display:grid;

        grid-template-columns:1fr;
        gap:13px;

        margin-top:14px;
    }

    .general-cost-mobile-card{
        width:100%;
        min-width:0;

        padding:16px;

        background:#ffffff;

        border:1px solid #dbe3ef;
        border-left:5px solid #f59e0b;
        border-radius:20px;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.08),
            0 2px 6px rgba(15,23,42,0.04);

        cursor:pointer;
    }

    .general-cost-mobile-card.settled{
        border-left-color:#16a34a;
    }

    .general-cost-mobile-card-top{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
    }

    .general-cost-mobile-card-top > div{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;
    }

    .general-cost-mobile-card-top span{
        color:#64748b;

        font-size:11px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    .general-cost-mobile-card-top strong{
        color:#0f172a;

        font-size:17px;
        line-height:1.3;

        word-break:break-word;
    }

    .general-cost-mobile-card
    .general-cost-status{
        flex:0 0 auto;

        max-width:46%;

        white-space:normal;
        line-height:1.2;
    }

    .general-cost-mobile-amount{
        margin:15px 0 12px 0;

        color:#0f172a;

        font-size:28px;
        line-height:1.1;
        font-weight:900;

        letter-spacing:-0.03em;
    }

    .general-cost-mobile-card > p{
        margin:0 0 12px 0;
        padding:12px;

        background:#f8fafc;

        border:1px solid #eef2f7;
        border-radius:14px;

        color:#334155;

        font-size:14px;
        line-height:1.45;

        word-break:break-word;
    }

    .general-cost-mobile-data{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:9px;
    }

    .general-cost-mobile-data > div{
        min-width:0;

        display:flex;
        flex-direction:column;
        gap:4px;

        padding:11px;

        background:#faf5ff;

        border:1px solid #ede9fe;
        border-radius:13px;
    }

    .general-cost-mobile-data span{
        color:#64748b;

        font-size:10px;
        font-weight:900;

        text-transform:uppercase;
        letter-spacing:0.05em;
    }

    .general-cost-mobile-data strong{
        color:#4c1d95;

        font-size:13px;
        line-height:1.35;

        word-break:break-word;
    }

    .general-cost-mobile-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;

        margin-top:13px;
    }

    .general-cost-mobile-actions button{
        width:100%;
        min-height:46px;

        display:flex;
        align-items:center;
        justify-content:center;
        gap:7px;

        margin:0;
        padding:10px;

        border:none;
        border-radius:12px;

        font-size:13px;
        font-weight:900;
    }

    .general-cost-mobile-edit{
        background:#dbeafe;
        color:#1d4ed8;
    }

    .general-cost-mobile-delete{
        background:#fee2e2 !important;
        color:#991b1b !important;
    }

    .general-cost-settlement-modal-content{
        width:calc(100vw - 16px);
        height:calc(100vh - 16px);
        max-height:calc(100vh - 16px);

        padding:18px 14px;

        border-radius:20px;
    }

    .general-cost-settlement-modal-content .modal-close{
        top:12px;
        right:12px;

        width:34px;
        height:34px;
        min-width:34px;
        min-height:34px;
    }

    .general-settlement-month-controls{
        flex-direction:column;
        align-items:stretch;
    }

    .general-settlement-month-controls input,
    .general-settlement-month-controls button{
        width:100%;
        min-width:0;
    }

    .general-settlement-summary-grid{
        grid-template-columns:1fr 1fr;
    }

    .general-settlement-summary-grid strong{
        font-size:17px;
    }

    .general-settlement-footer{
        flex-direction:column-reverse;
    }

    .general-settlement-footer button{
        width:100%;
    }

    .general-settlement-balance{
        grid-template-columns:1fr;
    }

    .general-settlement-distribution-actions{
        flex-direction:column;
    }

    .general-settlement-distribution-actions button{
        width:100%;
    }

    .general-settlement-amount-field input{
        width:110px;
    }

}

/* CONNECTOR_SALES_SETTLEMENT_MOBILE_V1 */

@media(max-width:768px){

    #project-details-modal
    .connector-settlement-panel{
        margin:0 0 16px 0 !important;
        padding:14px !important;

        border-radius:18px !important;

        box-shadow:
            0 8px 22px rgba(15,23,42,0.07),
            0 2px 6px rgba(15,23,42,0.03)
            !important;
    }

    #project-details-modal
    .connector-settlement-panel::before{
        left:16px;
        right:16px;

        height:3px;
    }

    #project-details-modal
    .connector-settlement-header{
        display:flex !important;

        flex-direction:column !important;
        align-items:flex-start !important;

        gap:10px !important;

        margin-bottom:13px !important;
    }

    #project-details-modal
    .connector-settlement-title{
        font-size:18px !important;
        line-height:1.3 !important;
    }

    #project-details-modal
    .connector-settlement-subtitle{
        margin-top:4px !important;

        font-size:12px !important;
        line-height:1.45 !important;
    }

    #project-details-modal
    .connector-settlement-status{
        align-self:flex-start !important;

        min-height:32px;

        padding:7px 11px !important;

        font-size:10px !important;
        line-height:1.2 !important;
    }

    #project-details-modal
    .connector-settlement-grid{
        grid-template-columns:1fr !important;

        gap:10px !important;
    }

    #project-details-modal
    .connector-settlement-card{
        min-height:0 !important;

        padding:
            14px
            42px
            14px
            14px
            !important;

        border-top-width:1px !important;
        border-left-width:4px !important;
        border-radius:15px !important;

        box-shadow:
            0 5px 15px rgba(15,23,42,0.06),
            0 2px 5px rgba(15,23,42,0.03)
            !important;
    }

    #project-details-modal
    .connector-settlement-card.connector-settlement-card--sale{
        border-left-color:#2563eb !important;
    }

    #project-details-modal
    .connector-settlement-card.connector-settlement-card--invoiced{
        border-left-color:#7c3aed !important;
    }

    #project-details-modal
    .connector-settlement-card.connector-settlement-card--paid{
        border-left-color:#16a34a !important;
    }

    #project-details-modal
    .connector-settlement-card.connector-settlement-card--remaining{
        border-left-color:#f59e0b !important;
    }

    #project-details-modal
    .connector-settlement-card:hover{
        transform:none !important;
    }

    #project-details-modal
    .connector-settlement-card:active{
        transform:scale(0.99) !important;
    }

    #project-details-modal
    .connector-settlement-card-icon{
        width:38px !important;
        min-width:38px !important;

        height:38px !important;
        min-height:38px !important;

        margin-bottom:10px !important;

        border-radius:12px !important;
    }

    #project-details-modal
    .connector-settlement-card-label{
        margin-bottom:4px !important;

        font-size:11px !important;
        line-height:1.3 !important;
    }

    #project-details-modal
    .connector-settlement-card-value{
        margin-bottom:5px !important;

        font-size:22px !important;
        line-height:1.15 !important;
    }

    #project-details-modal
    .connector-settlement-card-meta{
        margin-top:2px !important;

        font-size:11.5px !important;
        line-height:1.4 !important;
    }

    #project-details-modal
    .connector-settlement-card-arrow{
        top:18px !important;
        right:12px !important;

        color:#94a3b8 !important;
    }
}

/* FINANCIAL_CLOSURE_STAGE4_V2 */
@media(max-width:768px){
    .project-financial-closure-panel{
        align-items:stretch;
        flex-direction:column;
        gap:13px;
        padding:14px;
    }
    .project-financial-closure-actions{
        display:grid;
        grid-template-columns:1fr;
        width:100%;
    }
    .project-financial-closure-actions button{
        width:100%;
        min-height:46px;
        justify-content:center;
    }
    .project-financial-closure-copy{
        gap:10px;
    }
    .project-financial-closure-icon{
        width:38px;
        height:38px;
        flex-basis:38px;
    }
}

/* CONNECTOR_COMPLAINT_COSTS_MOBILE_V1 */
@media(max-width:768px){
    .complaint-costs-header{
        flex-direction:column;
        align-items:stretch;
    }

    .complaint-costs-header-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .complaint-costs-header-actions button{
        width:100%;
    }

    .complaint-costs-summary{
        grid-template-columns:1fr !important;
        gap:10px;
    }

    .complaint-costs-summary article{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:12px;
        padding:14px;
    }

    .complaint-costs-summary strong{
        margin:0;
        font-size:20px;
        text-align:right;
    }

    .complaint-costs-panel{
        padding:12px;
    }

    .complaint-costs-filters{
        grid-template-columns:1fr !important;
    }

    .complaint-costs-filters button{
        width:100%;
        min-height:44px;
    }

    .complaint-costs-table-wrap{
        display:none;
    }

    .complaint-cost-mobile-list{
        display:grid;
        gap:12px;
    }

    .complaint-cost-mobile-card{
        min-width:0;
        padding:15px;
        border:1px solid #e2e8f0;
        border-left:5px solid #dc2626;
        border-radius:18px;
        background:#fff;
        box-shadow:
            0 7px 20px
            rgba(15,23,42,.07);
    }

    .complaint-cost-mobile-head{
        display:flex;
        align-items:flex-start;
        justify-content:space-between;
        gap:10px;
    }

    .complaint-cost-mobile-head > div{
        min-width:0;
    }

    .complaint-cost-mobile-head small,
    .complaint-cost-mobile-head strong{
        display:block;
    }

    .complaint-cost-mobile-head small{
        color:#64748b;
        font-size:11px;
    }

    .complaint-cost-mobile-head strong{
        margin-top:3px;
        color:#0f172a;
        overflow-wrap:anywhere;
    }

    .complaint-cost-mobile-amount{
        display:flex;
        align-items:flex-end;
        justify-content:space-between;
        gap:12px;
        margin:13px 0;
        padding:12px;
        border-radius:13px;
        background:#f0fdf4;
    }

    .complaint-cost-mobile-amount span{
        color:#64748b;
        font-size:11px;
        font-weight:900;
        text-transform:uppercase;
    }

    .complaint-cost-mobile-amount strong{
        color:#166534;
        font-size:23px;
    }

    .complaint-cost-mobile-grid{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:8px;
    }

    .complaint-cost-mobile-grid > div{
        display:grid;
        gap:3px;
        min-width:0;
        padding:9px;
        border-radius:11px;
        background:#f8fafc;
    }

    .complaint-cost-mobile-grid span{
        color:#64748b;
        font-size:10px;
        font-weight:900;
        text-transform:uppercase;
    }

    .complaint-cost-mobile-grid strong{
        font-size:13px;
        overflow-wrap:anywhere;
    }

    .complaint-cost-mobile-card p{
        margin:12px 0;
        color:#475569;
        line-height:1.45;
    }

    .complaint-cost-mobile-card
    .complaint-cost-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .complaint-cost-mobile-card
    .complaint-cost-actions button{
        width:100%;
        height:44px;
    }

    #complaint-cost-modal{
        align-items:flex-end;
        padding:0;
    }

    .complaint-cost-modal-box{
        width:100%;
        max-width:100vw;
        height:100dvh;
        max-height:100dvh;
        margin:0;
        border-radius:0;
    }

    .complaint-cost-modal-scroll{
        padding:13px;
    }

    .complaint-cost-form-grid{
        grid-template-columns:1fr;
    }

    .complaint-cost-form-grid label.full{
        grid-column:auto;
    }

    .complaint-cost-modal-actions{
        display:grid;
        grid-template-columns:1fr 1fr;
        padding-bottom:
            calc(
                13px
                +
                env(safe-area-inset-bottom)
            );
    }

    .complaint-cost-compact-summary{
        grid-template-columns:1fr;
    }

    .complaint-cost-compact-row{
        grid-template-columns:1fr;
    }

    .complaint-cost-compact-value{
        justify-content:space-between;
    }
}