/* =========================================
   CONNECTOR — MÓJ KALENDARZ
   ========================================= */

#personal-calendar{
    width:100%;
    min-width:0;
}


/* =========================================
   NAGŁÓWEK WIDOKU
   ========================================= */

.personal-calendar-view-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;

    margin-bottom:22px;
}

.personal-calendar-title-block{
    min-width:0;
}

.personal-calendar-title-block h1{
    display:flex;
    align-items:center;
    gap:11px;

    margin-top:0;
    margin-bottom:8px;
}

.personal-calendar-title-block h1 i{
    color:#2563eb;
}

.personal-calendar-main-action{
    min-height:46px;

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

    padding:12px 18px;

    border:none;
    border-radius:12px;

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

    color:#ffffff;

    font-size:14px;
    font-weight:800;

    cursor:pointer;

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

.personal-calendar-main-action:disabled{
    opacity:0.55;
    cursor:not-allowed;
    pointer-events:none;
}


/* =========================================
   PODSUMOWANIE
   ========================================= */

.personal-calendar-summary-grid{
    display:grid;
    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:16px;

    margin-bottom:20px;
}

.personal-calendar-summary-card{
    min-width:0;

    display:flex;
    align-items:center;
    gap:15px;

    padding:18px;

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

    box-shadow:
        0 8px 22px rgba(15,23,42,0.07);
}

.personal-calendar-summary-card > div:last-child{
    min-width:0;

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

.personal-calendar-summary-icon{
    width:50px;
    min-width:50px;
    height:50px;

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

    border-radius:16px;

    font-size:21px;
}

.personal-calendar-summary-card span{
    color:#475569;

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

.personal-calendar-summary-card strong{
    color:#0f172a;

    font-size:29px;
    line-height:1.05;
}

.personal-calendar-summary-card small{
    color:#64748b;

    font-size:12px;
    line-height:1.35;
}

.personal-calendar-summary-card.month
.personal-calendar-summary-icon{
    background:#dbeafe;
    color:#1d4ed8;
}

.personal-calendar-summary-card.active
.personal-calendar-summary-icon{
    background:#fef3c7;
    color:#b45309;
}

.personal-calendar-summary-card.completed
.personal-calendar-summary-icon{
    background:#dcfce7;
    color:#15803d;
}


/* =========================================
   TYMCZASOWY EKRAN MODUŁU
   ========================================= */

.personal-calendar-module-placeholder{
    min-height:360px;

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

    padding:40px;

    background:
        radial-gradient(
            circle at top left,
            rgba(59,130,246,0.12),
            transparent 38%
        ),
        linear-gradient(
            135deg,
            #ffffff,
            #f8fafc
        );

    border:1px solid #dbeafe;
    border-radius:24px;

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

.personal-calendar-placeholder-icon{
    width:90px;
    min-width:90px;
    height:90px;

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

    border-radius:26px;

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

    color:#ffffff;

    font-size:38px;

    box-shadow:
        0 14px 30px rgba(37,99,235,0.28);
}

.personal-calendar-placeholder-content{
    max-width:620px;
}

.personal-calendar-placeholder-kicker{
    display:block;

    margin-bottom:7px;

    color:#2563eb;

    font-size:12px;
    font-weight:900;

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

.personal-calendar-placeholder-content h2{
    margin:0 0 10px 0;

    color:#0f172a;

    font-size:26px;
}

.personal-calendar-placeholder-content p{
    margin:0;

    color:#475569;

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


/* =========================================
   STATUS POŁĄCZENIA Z API
   ========================================= */

.personal-calendar-api-status{
    display:inline-flex;
    align-items:center;
    gap:9px;

    margin-top:18px;
    padding:10px 13px;

    border-radius:12px;

    font-size:13px;
    font-weight:800;
    line-height:1.4;
}

.personal-calendar-api-status::before{
    font-family:"Font Awesome 6 Free";
    font-weight:900;
}

.personal-calendar-api-status.is-loading{
    background:#eff6ff;
    color:#1d4ed8;
}

.personal-calendar-api-status.is-loading::before{
    content:"\f110";

    animation:
        personalCalendarSpin
        0.9s
        linear
        infinite;
}

.personal-calendar-api-status.is-success{
    background:#dcfce7;
    color:#166534;
}

.personal-calendar-api-status.is-success::before{
    content:"\f058";
}

.personal-calendar-api-status.is-error{
    background:#fee2e2;
    color:#991b1b;
}

.personal-calendar-api-status.is-error::before{
    content:"\f071";
}

@keyframes personalCalendarSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}


/* =========================================
   WERSJA MOBILNA
   ========================================= */

@media(max-width:768px){

    .personal-calendar-view-header{
        flex-direction:column;
        align-items:stretch;
        gap:14px;
    }

    .personal-calendar-main-action{
        width:100%;
    }

    .personal-calendar-summary-grid{
        grid-template-columns:1fr;
        gap:11px;
    }

    .personal-calendar-summary-card{
        padding:15px;
    }

    .personal-calendar-summary-icon{
        width:46px;
        min-width:46px;
        height:46px;

        border-radius:14px;

        font-size:19px;
    }

    .personal-calendar-summary-card strong{
        font-size:25px;
    }

    .personal-calendar-module-placeholder{
        min-height:320px;

        flex-direction:column;
        align-items:flex-start;
        justify-content:center;
        gap:18px;

        padding:24px 18px;

        border-radius:20px;
    }

    .personal-calendar-placeholder-icon{
        width:68px;
        min-width:68px;
        height:68px;

        border-radius:20px;

        font-size:29px;
    }

    .personal-calendar-placeholder-content h2{
        font-size:22px;
    }

    .personal-calendar-placeholder-content p{
        font-size:14px;
    }

    .personal-calendar-api-status{
        width:100%;

        align-items:flex-start;

        box-sizing:border-box;
    }
}

/* =========================================
   MÓJ KALENDARZ — SIATKA MIESIĄCA
   ========================================= */

.personal-calendar-workspace{
    width:100%;
    min-width:0;
}


/* =========================================
   NAWIGACJA
   ========================================= */

.personal-calendar-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;

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

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

    box-shadow:
        0 8px 22px rgba(15,23,42,0.06);
}

.personal-calendar-navigation{
    display:flex;
    align-items:center;
    gap:8px;
}

.personal-calendar-navigation button{
    min-height:42px;

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

    padding:10px 13px;

    border:none;
    border-radius:11px;

    background:#e2e8f0;
    color:#334155;

    font-weight:800;
    cursor:pointer;
}

.personal-calendar-navigation button:hover{
    background:#cbd5e1;
}

.personal-calendar-navigation
.personal-calendar-today-button{
    background:#eff6ff;
    color:#1d4ed8;
}

.personal-calendar-month-title{
    margin:0;

    color:#0f172a;

    font-size:21px;
    text-align:center;
}


/* =========================================
   UKŁAD
   ========================================= */

.personal-calendar-layout{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        360px;

    gap:18px;
    align-items:start;
}

.personal-calendar-grid-card,
.personal-calendar-agenda{
    min-width:0;

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

    box-shadow:
        0 10px 26px rgba(15,23,42,0.07);

    overflow:hidden;
}


/* =========================================
   DNI TYGODNIA
   ========================================= */

.personal-calendar-weekdays{
    display:grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );

    background:
        linear-gradient(
            180deg,
            #f8fafc,
            #eef2ff
        );

    border-bottom:1px solid #e2e8f0;
}

.personal-calendar-weekdays span{
    padding:13px 8px;

    color:#475569;

    font-size:12px;
    font-weight:900;

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


/* =========================================
   SIATKA DNI
   ========================================= */

.personal-calendar-grid{
    display:grid;

    grid-template-columns:
        repeat(
            7,
            minmax(0, 1fr)
        );
}

.personal-calendar-day{
    min-width:0;
    min-height:128px;

    padding:9px;

    background:#ffffff;

    border-right:1px solid #eef2f7;
    border-bottom:1px solid #eef2f7;

    cursor:pointer;

    transition:
        background 0.15s ease,
        box-shadow 0.15s ease;
}

.personal-calendar-day:nth-child(7n){
    border-right:none;
}

.personal-calendar-day:hover{
    background:#f8fafc;
}

.personal-calendar-day:focus{
    outline:none;

    box-shadow:
        inset 0 0 0 2px
        rgba(37,99,235,0.45);
}

.personal-calendar-day.is-outside-month{
    background:#f8fafc;
    color:#94a3b8;
}

.personal-calendar-day.is-selected{
    background:#eff6ff;

    box-shadow:
        inset 0 0 0 2px
        #2563eb;
}

.personal-calendar-day-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;

    margin-bottom:7px;
}

.personal-calendar-day-number{
    width:28px;
    height:28px;

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

    border-radius:999px;

    color:#334155;

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

.personal-calendar-day.is-outside-month
.personal-calendar-day-number{
    color:#94a3b8;
}

.personal-calendar-day.is-today
.personal-calendar-day-number{
    background:#2563eb;
    color:#ffffff;
}

.personal-calendar-day-count{
    min-width:22px;
    height:22px;

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

    padding:0 6px;

    border-radius:999px;

    background:#e2e8f0;
    color:#334155;

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


/* =========================================
   WYDARZENIA W KOMÓRCE DNIA
   ========================================= */

.personal-calendar-day-events{
    display:flex;
    flex-direction:column;
    gap:5px;

    min-width:0;
}

.personal-calendar-event-pill{
    width:100%;
    min-width:0;
    min-height:25px;

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

    margin:0;
    padding:5px 7px;

    border:none;

    border-left:
        4px solid
        var(
            --personal-event-color,
            #2563eb
        );

    border-radius:8px;

    background:#f8fafc;
    color:#0f172a;

    font-size:11px;
    font-weight:800;
    text-align:left;

    cursor:pointer;
    overflow:hidden;
}

.personal-calendar-event-pill:hover{
    background:#eef2ff;

    transform:none;
}

.personal-calendar-event-pill.is-completed{
    opacity:0.58;

    text-decoration:line-through;
}

.personal-calendar-event-dot{
    width:7px;
    min-width:7px;
    height:7px;

    border-radius:999px;

    background:
        var(
            --personal-event-color,
            #2563eb
        );
}

.personal-calendar-event-pill-text{
    min-width:0;

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

.personal-calendar-more-events{
    padding-left:5px;

    color:#64748b;

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


/* =========================================
   LISTA WYBRANEGO DNIA
   ========================================= */

.personal-calendar-agenda{
    position:sticky;
    top:20px;
}

.personal-calendar-agenda-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;

    padding:18px;

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

    border-bottom:1px solid #e2e8f0;
}

.personal-calendar-agenda-header h2{
    margin:0 0 5px 0;

    font-size:18px;
}

.personal-calendar-agenda-header p{
    margin:0;

    color:#64748b;

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

.personal-calendar-agenda-count{
    min-width:34px;
    height:34px;

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

    border-radius:999px;

    background:#dbeafe;
    color:#1d4ed8;

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

.personal-calendar-selected-day-list{
    display:flex;
    flex-direction:column;
    gap:10px;

    max-height:650px;

    overflow:auto;

    padding:14px;
}

.personal-calendar-agenda-item{
    position:relative;

    display:grid;

    grid-template-columns:
        86px
        minmax(0, 1fr);

    gap:10px;

    padding:13px;

    border:1px solid #e2e8f0;

    border-left:
        5px solid
        var(
            --personal-event-color,
            #2563eb
        );

    border-radius:14px;

    background:#ffffff;
}

.personal-calendar-agenda-item.is-completed{
    opacity:0.65;

    background:#f8fafc;
}

.personal-calendar-agenda-time{
    color:#334155;

    font-size:12px;
    font-weight:900;
    line-height:1.35;
}

.personal-calendar-agenda-content{
    min-width:0;
}

.personal-calendar-agenda-content h3{
    margin:0 0 5px 0;

    color:#0f172a;

    font-size:14px;
    line-height:1.35;

    word-break:break-word;
}

.personal-calendar-agenda-content p{
    margin:0;

    color:#64748b;

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

    word-break:break-word;
}

.personal-calendar-agenda-status{
    grid-column:1 / -1;
    justify-self:start;

    padding:4px 8px;

    border-radius:999px;

    background:#fef3c7;
    color:#92400e;

    font-size:10px;
    font-weight:900;

    text-transform:uppercase;
}

.personal-calendar-agenda-item.is-completed
.personal-calendar-agenda-status{
    background:#dcfce7;
    color:#166534;
}


/* =========================================
   BRAK WYDARZEŃ
   ========================================= */

.personal-calendar-day-empty{
    min-height:220px;

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

    padding:22px;

    text-align:center;

    color:#64748b;
}

.personal-calendar-day-empty i{
    font-size:30px;
    color:#94a3b8;
}

.personal-calendar-day-empty strong{
    color:#334155;
    font-size:16px;
}

.personal-calendar-day-empty span{
    font-size:13px;
    line-height:1.45;
}


/* =========================================
   MNIEJSZE EKRANY
   ========================================= */

@media(max-width:1100px){

    .personal-calendar-layout{
        grid-template-columns:1fr;
    }

    .personal-calendar-agenda{
        position:static;
    }

    .personal-calendar-selected-day-list{
        max-height:none;
    }
}


/* =========================================
   TELEFON
   ========================================= */

@media(max-width:768px){

    .personal-calendar-toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:11px;

        padding:12px;
    }

    .personal-calendar-navigation{
        display:grid;

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

        width:100%;
    }

    .personal-calendar-navigation button{
        width:100%;
        min-width:0;

        padding:9px;
    }

    .personal-calendar-month-title{
        order:-1;

        font-size:19px;
    }

    .personal-calendar-grid-card{
        border-radius:16px;
    }

    .personal-calendar-weekdays span{
        padding:9px 2px;

        font-size:10px;
    }

    .personal-calendar-day{
        min-height:68px;

        padding:5px;
    }

    .personal-calendar-day-top{
        margin-bottom:4px;
    }

    .personal-calendar-day-number{
        width:25px;
        height:25px;

        font-size:12px;
    }

    .personal-calendar-day-count{
        min-width:18px;
        height:18px;

        padding:0 4px;

        font-size:9px;
    }

    .personal-calendar-day-events{
        flex-direction:row;
        flex-wrap:wrap;
        gap:3px;
    }

    .personal-calendar-event-pill{
        width:8px;
        min-width:8px;

        height:8px;
        min-height:8px;

        padding:0;

        border:none;
        border-radius:999px;

        background:
            var(
                --personal-event-color,
                #2563eb
            );

        overflow:visible;
    }

    .personal-calendar-event-dot,
    .personal-calendar-event-pill-text,
    .personal-calendar-more-events{
        display:none;
    }

    .personal-calendar-agenda{
        border-radius:16px;
    }

    .personal-calendar-agenda-header{
        padding:15px;
    }

    .personal-calendar-selected-day-list{
        padding:12px;
    }

    .personal-calendar-agenda-item{
        grid-template-columns:1fr;

        gap:7px;
        padding:12px;
    }

    .personal-calendar-agenda-status{
        grid-column:auto;
    }
}

/* =========================================
   MÓJ KALENDARZ — SOBOTY I NIEDZIELE
   ========================================= */

/* Nagłówek soboty */
.personal-calendar-weekdays
span:nth-child(6){
    background:#fef3c7;
    color:#92400e;
}

/* Nagłówek niedzieli */
.personal-calendar-weekdays
span:nth-child(7){
    background:#fee2e2;
    color:#991b1b;
}


/* =========================================
   SOBOTA
   ========================================= */

.personal-calendar-day:nth-child(7n + 6){
    background:#fffbeb;
}

.personal-calendar-day:nth-child(7n + 6)
.personal-calendar-day-number{
    color:#92400e;
}

.personal-calendar-day:nth-child(7n + 6):hover{
    background:#fef3c7;
}


/* =========================================
   NIEDZIELA
   ========================================= */

.personal-calendar-day:nth-child(7n){
    background:#fef2f2;
}

.personal-calendar-day:nth-child(7n)
.personal-calendar-day-number{
    color:#991b1b;
}

.personal-calendar-day:nth-child(7n):hover{
    background:#fee2e2;
}


/* =========================================
   DNI SPOZA AKTUALNEGO MIESIĄCA
   ========================================= */

.personal-calendar-day.is-outside-month:nth-child(7n + 6){
    background:#fffdf5;
}

.personal-calendar-day.is-outside-month:nth-child(7n){
    background:#fff7f7;
}

.personal-calendar-day.is-outside-month:nth-child(7n + 6)
.personal-calendar-day-number,
.personal-calendar-day.is-outside-month:nth-child(7n)
.personal-calendar-day-number{
    color:#94a3b8;
}


/* =========================================
   WYBRANY DZIEŃ
   ========================================= */

/*
Niebieskie zaznaczenie ma być dobrze
widoczne również w weekend.
*/
.personal-calendar-day.is-selected:nth-child(7n + 6),
.personal-calendar-day.is-selected:nth-child(7n){
    background:#eff6ff;
}


/* =========================================
   DZISIEJSZY DZIEŃ
   ========================================= */

/*
Numer dzisiejszego dnia pozostaje biały
na niebieskim kółku, również gdy dzisiaj
jest sobota albo niedziela.
*/
.personal-calendar-day.is-today:nth-child(7n + 6)
.personal-calendar-day-number,
.personal-calendar-day.is-today:nth-child(7n)
.personal-calendar-day-number{
    color:#ffffff;
}

/* =========================================
   MÓJ KALENDARZ — FORMULARZ WYDARZENIA
   ========================================= */

.personal-calendar-form-modal{
    z-index:100720 !important;
}

.personal-calendar-form-box{
    width:820px;
    max-width:94vw;
    max-height:92vh;

    padding:0;

    gap:0;

    overflow:hidden;

    border-radius:24px;

    background:#f8fafc;
}


/* =========================================
   NAGŁÓWEK
   ========================================= */

.personal-calendar-form-header{
    flex:0 0 auto;

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

    padding:20px 22px;

    background:
        radial-gradient(
            circle at top left,
            rgba(59,130,246,0.28),
            transparent 40%
        ),
        linear-gradient(
            135deg,
            #0f172a,
            #1e293b
        );

    color:#ffffff;
}

.personal-calendar-form-heading{
    min-width:0;

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

.personal-calendar-form-icon{
    width:48px;
    min-width:48px;
    height:48px;

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

    border-radius:15px;

    background:rgba(255,255,255,0.14);
    border:1px solid rgba(255,255,255,0.18);

    font-size:21px;
}

.personal-calendar-form-heading span{
    display:block;

    margin-bottom:3px;

    color:#bfdbfe;

    font-size:11px;
    font-weight:900;

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

.personal-calendar-form-heading h2{
    margin:0;

    color:#ffffff;

    font-size:23px;
}

.personal-calendar-form-header
.app-modal-close{
    background:rgba(255,255,255,0.14) !important;
    color:#ffffff !important;
}

.personal-calendar-form-header
.app-modal-close:hover{
    background:rgba(255,255,255,0.23) !important;
}


/* =========================================
   PRZEWIJANA TREŚĆ
   ========================================= */

.personal-calendar-form-scroll{
    flex:1 1 auto;

    display:flex;
    flex-direction:column;
    gap:16px;

    min-height:0;

    padding:18px 20px 24px;

    overflow-y:auto;
}


/* =========================================
   SEKCJE
   ========================================= */

.personal-calendar-form-section{
    padding:18px;

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

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

.personal-calendar-form-section-heading{
    display:flex;
    align-items:flex-start;
    gap:11px;

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

    border-bottom:1px solid #eef2f7;
}

.personal-calendar-form-section-heading > i{
    width:36px;
    min-width:36px;
    height:36px;

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

    border-radius:11px;

    background:#dbeafe;
    color:#1d4ed8;
}

.personal-calendar-form-section-heading h3{
    margin:0 0 3px 0;

    color:#0f172a;

    font-size:16px;
}

.personal-calendar-form-section-heading p{
    margin:0;

    color:#64748b;

    font-size:12px;
    line-height:1.4;
}


/* =========================================
   POLA
   ========================================= */

.personal-calendar-form-field{
    display:flex;
    flex-direction:column;
    gap:6px;

    margin-bottom:14px;
}

.personal-calendar-form-field:last-child{
    margin-bottom:0;
}

.personal-calendar-form-field label{
    color:#475569;

    font-size:12px;
    font-weight:900;

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

.personal-calendar-form-field input,
.personal-calendar-form-field select,
.personal-calendar-form-field textarea{
    width:100%;

    box-sizing:border-box;

    padding:12px 13px;

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

    background:#f8fafc;
    color:#0f172a;

    font-family:Arial;
    font-size:14px;
}

.personal-calendar-form-field textarea{
    min-height:105px;
    resize:vertical;
}

.personal-calendar-form-field input:focus,
.personal-calendar-form-field select:focus,
.personal-calendar-form-field textarea:focus{
    outline:none;

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

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

.personal-calendar-form-field small{
    color:#64748b;

    font-size:11px;
    line-height:1.4;
}

.personal-calendar-form-field.is-disabled{
    opacity:0.48;
}


/* =========================================
   DATY
   ========================================= */

.personal-calendar-date-grid{
    display:grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:4px 14px;
}

.personal-calendar-all-day-option{
    display:flex;
    align-items:center;
    gap:12px;

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

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

    cursor:pointer;
}

.personal-calendar-all-day-option input{
    width:20px;
    min-width:20px;
    height:20px;

    margin:0;
}

.personal-calendar-all-day-option span{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.personal-calendar-all-day-option strong{
    color:#1e3a8a;

    font-size:14px;
}

.personal-calendar-all-day-option small{
    color:#64748b;

    font-size:11px;
}


/* =========================================
   INFORMACJA O PRZYPOMNIENIACH
   ========================================= */

.personal-calendar-form-next-step{
    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:15px;

    background:#fffbeb;
    border:1px solid #fde68a;
    border-radius:16px;

    color:#92400e;
}

.personal-calendar-form-next-step > i{
    margin-top:2px;

    font-size:20px;
}

.personal-calendar-form-next-step > div{
    display:flex;
    flex-direction:column;
    gap:4px;
}

.personal-calendar-form-next-step strong{
    font-size:14px;
}

.personal-calendar-form-next-step span{
    font-size:12px;
    line-height:1.45;
}


/* =========================================
   DOLNY PASEK AKCJI
   ========================================= */

.personal-calendar-form-footer{
    flex:0 0 auto;

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

    padding:15px 20px;

    background:#ffffff;
    border-top:1px solid #e2e8f0;
}

.personal-calendar-form-footer button{
    min-height:44px;

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

    padding:11px 17px;

    border:none;
    border-radius:12px;

    font-weight:900;
    cursor:pointer;
}

.personal-calendar-form-cancel{
    background:#e2e8f0 !important;
    color:#334155 !important;
}

.personal-calendar-form-save{
    background:
        linear-gradient(
            135deg,
            #2563eb,
            #1d4ed8
        ) !important;

    color:#ffffff !important;
}

.personal-calendar-form-save:disabled{
    opacity:0.58;
    cursor:wait;
}


/* =========================================
   KLIKALNE WYDARZENIA
   ========================================= */

.personal-calendar-agenda-item{
    cursor:pointer;
}

.personal-calendar-agenda-item:hover{
    background:#f8fafc;
    transform:translateY(-1px);
}


/* =========================================
   TELEFON
   ========================================= */

@media(max-width:768px){

    body.personal-calendar-modal-open{
        overflow:hidden !important;
    }

    .personal-calendar-form-modal{
        inset:0 !important;

        width:100vw !important;
        height:100dvh !important;

        padding:0 !important;

        align-items:stretch !important;

        z-index:100720 !important;
    }

    .personal-calendar-form-box{
        width:100vw !important;
        max-width:none !important;

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

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

        border-radius:0 !important;

        display:flex;
        flex-direction:column;
    }

    .personal-calendar-form-header{
        position:sticky;
        top:0;
        z-index:3;

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

    .personal-calendar-form-icon{
        width:42px;
        min-width:42px;
        height:42px;

        border-radius:13px;
    }

    .personal-calendar-form-heading h2{
        font-size:19px;
    }

    .personal-calendar-form-scroll{
        padding:13px 12px 24px;
    }

    .personal-calendar-form-section{
        padding:15px;

        border-radius:16px;
    }

    .personal-calendar-date-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .personal-calendar-form-field input,
    .personal-calendar-form-field select,
    .personal-calendar-form-field textarea{
        font-size:16px;
    }

    .personal-calendar-form-footer{
        position:sticky;
        bottom:0;
        z-index:3;

        display:grid;
        grid-template-columns:1fr 1fr;

        padding:
            11px
            12px
            calc(11px + env(safe-area-inset-bottom));

        box-shadow:
            0 -8px 24px rgba(15,23,42,0.1);
    }

    .personal-calendar-form-footer button{
        width:100%;
        min-width:0;

        padding:10px 8px;
    }
}

/* =========================================
   MÓJ KALENDARZ — MAŁE KAFELKI MOBILNE
   ========================================= */

@media(max-width:768px){

    .personal-calendar-summary-grid{
        grid-template-columns:
            repeat(3, minmax(0, 1fr));

        gap:8px;
    }

    .personal-calendar-summary-card{
        aspect-ratio:1 / 1;

        min-width:0;
        min-height:0;

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

        padding:9px 6px;

        text-align:center;

        border-radius:16px;
    }

    .personal-calendar-summary-card
    > div:last-child{
        align-items:center;
        gap:2px;
    }

    .personal-calendar-summary-icon{
        width:36px;
        min-width:36px;
        height:36px;

        border-radius:12px;

        font-size:16px;
    }

    .personal-calendar-summary-card span{
        max-width:100%;

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

        overflow-wrap:anywhere;
    }

    .personal-calendar-summary-card strong{
        font-size:22px;
        line-height:1;
    }

    .personal-calendar-summary-card small{
        font-size:9px;
        line-height:1.2;
    }
}

/* =========================================
   MÓJ KALENDARZ — CZYTELNIEJSZE KAFELKI
   ========================================= */

@media(max-width:768px){

    .personal-calendar-summary-grid{
        gap:7px;
        margin-bottom:14px;
    }

    .personal-calendar-summary-card{
        aspect-ratio:1 / 0.92;

        gap:6px;
        padding:7px 4px;

        border-radius:15px;
    }

    .personal-calendar-summary-card
    > div:last-child{
        gap:3px;
    }

    .personal-calendar-summary-icon{
        width:38px;
        min-width:38px;
        height:38px;

        font-size:17px;
    }

    .personal-calendar-summary-card span{
        font-size:11px;
        line-height:1.35;
    }

    .personal-calendar-summary-card strong{
        font-size:24px;
        line-height:1.1;
    }

    .personal-calendar-summary-card small{
        font-size:10px;
        line-height:1.4;

        max-width:100%;
    }
}


/* =========================================
   MÓJ KALENDARZ — PRZYPOMNIENIA
   ========================================= */

.personal-calendar-reminder-presets{
    display:flex;
    flex-wrap:wrap;
    gap:8px;

    margin-bottom:16px;
}

.personal-calendar-reminder-presets button{
    min-height:38px;

    padding:8px 11px;

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

    background:#eff6ff;
    color:#1d4ed8;

    font-size:12px;
    font-weight:800;

    cursor:pointer;
}

.personal-calendar-reminder-presets button:hover{
    background:#dbeafe;
    transform:none;
}


.personal-calendar-custom-reminder{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        150px
        auto;

    gap:10px;
    align-items:end;

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

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

.personal-calendar-custom-reminder
.personal-calendar-form-field{
    margin:0;
}

.personal-calendar-add-reminder-button{
    min-height:43px;

    padding:10px 14px;

    border:none;
    border-radius:11px;

    background:#2563eb;
    color:#ffffff;

    font-weight:900;
    cursor:pointer;
}


/* =========================================
   LISTA PRZYPOMNIEŃ
   ========================================= */

.personal-calendar-reminders-list{
    display:flex;
    flex-direction:column;
    gap:9px;
}

.personal-calendar-reminder-empty{
    padding:15px;

    display:flex;
    align-items:flex-start;
    gap:11px;

    background:#f8fafc;
    border:1px dashed #cbd5e1;
    border-radius:13px;

    color:#64748b;
}

.personal-calendar-reminder-empty i{
    margin-top:2px;
    color:#94a3b8;
}

.personal-calendar-reminder-empty div{
    display:flex;
    flex-direction:column;
    gap:3px;
}

.personal-calendar-reminder-empty strong{
    color:#475569;
    font-size:13px;
}

.personal-calendar-reminder-empty span{
    font-size:11px;
    line-height:1.4;
}


.personal-calendar-reminder-row{
    display:grid;

    grid-template-columns:
        minmax(0, 1fr)
        145px
        42px;

    gap:10px;
    align-items:center;

    padding:11px 12px;

    background:#fffbeb;
    border:1px solid #fde68a;
    border-radius:13px;
}

.personal-calendar-reminder-label{
    min-width:0;

    display:flex;
    align-items:center;
    gap:9px;

    color:#92400e;
}

.personal-calendar-reminder-label i{
    flex:0 0 auto;
}

.personal-calendar-reminder-label strong{
    font-size:13px;
    line-height:1.35;
}

.personal-calendar-reminder-time{
    width:100%;

    padding:9px 10px;

    border:1px solid #fcd34d;
    border-radius:9px;

    background:#ffffff;

    font-size:14px;
}

.personal-calendar-reminder-remove{
    width:42px;
    height:42px;
    min-width:42px;

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

    padding:0;

    border:none;
    border-radius:10px;

    background:#fee2e2 !important;
    color:#991b1b !important;

    cursor:pointer;
}


/* =========================================
   AKCJE WYDARZENIA
   ========================================= */

.personal-calendar-form-footer{
    justify-content:space-between;
}

.personal-calendar-form-footer-left,
.personal-calendar-form-footer-right{
    display:flex;
    align-items:center;
    gap:9px;
}

.personal-calendar-form-delete{
    background:#fee2e2 !important;
    color:#991b1b !important;
}

.personal-calendar-form-status{
    background:#dcfce7 !important;
    color:#166534 !important;
}

.personal-calendar-form-status.is-completed{
    background:#ede9fe !important;
    color:#5b21b6 !important;
}


/* =========================================
   TELEFON
   ========================================= */

@media(max-width:768px){

    .personal-calendar-reminder-presets{
        display:grid;
        grid-template-columns:1fr 1fr;

        gap:7px;
    }

    .personal-calendar-reminder-presets button{
        width:100%;

        padding:8px 5px;

        font-size:11px;
        line-height:1.3;
    }

    .personal-calendar-custom-reminder{
        grid-template-columns:1fr 1fr;

        padding:11px;
    }

    .personal-calendar-add-reminder-button{
        grid-column:1 / -1;

        width:100%;
    }

    .personal-calendar-reminder-row{
        grid-template-columns:
            minmax(0, 1fr)
            112px
            42px;

        gap:7px;

        padding:10px;
    }

    .personal-calendar-reminder-label strong{
        font-size:11px;
    }

    .personal-calendar-reminder-time{
        padding:8px 5px;

        font-size:14px;
    }

    .personal-calendar-form-footer{
        display:flex;
        flex-direction:column;

        align-items:stretch;
        gap:8px;
    }

    .personal-calendar-form-footer-left,
    .personal-calendar-form-footer-right{
        width:100%;
    }

    .personal-calendar-form-footer-left button{
        width:100%;
    }

    .personal-calendar-form-footer-right{
        display:grid;
        grid-template-columns:1fr 1fr;
    }

    .personal-calendar-form-footer-right
    .personal-calendar-form-status{
        grid-column:1 / -1;
    }
}

/* =========================================
   MÓJ KALENDARZ - ZAŁĄCZNIK Z PRZYBORNIKA
   ========================================= */

.personal-calendar-toolbox-attachment{
    display:grid;
    grid-template-columns:
        auto
        minmax(0, 1fr)
        auto;

    align-items:center;
    gap:13px;

    padding:15px;

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

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

.personal-calendar-toolbox-icon{
    width:48px;
    min-width:48px;
    height:48px;

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

    border-radius:15px;

    background:#dbeafe;
    color:#1d4ed8;

    font-size:20px;
}

.personal-calendar-toolbox-content{
    min-width:0;

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

.personal-calendar-toolbox-content > span{
    color:#2563eb;

    font-size:11px;
    font-weight:900;

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

.personal-calendar-toolbox-content > strong{
    overflow-wrap:anywhere;

    color:#0f172a;

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

.personal-calendar-toolbox-content > p{
    max-height:110px;
    overflow:auto;

    margin:6px 0 0;

    color:#475569;

    font-size:13px;
    line-height:1.5;
    white-space:pre-wrap;
}

#personal-calendar-toolbox-open{
    min-height:42px;

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

    padding:10px 13px;

    border-radius:11px;

    background:#2563eb;
    color:#ffffff;

    font-size:13px;
    font-weight:800;

    text-decoration:none;
}

@media(max-width:768px){

    .personal-calendar-toolbox-attachment{
        grid-template-columns:auto minmax(0, 1fr);
    }

    #personal-calendar-toolbox-open{
        grid-column:1 / -1;

        width:100%;
        box-sizing:border-box;
    }
}