:root{
    --bg:#e9eef5;
    --panel:#ffffff;
    --panel2:#eef3f9;
    --text:#172033;
    --muted:#5f6c83;
    --border:#bcc7d6;
    --accent:#3159e4;
    --accent2:#dfe8ff;
    --danger:#d64545;
    --shadow:0 8px 24px rgba(24,38,64,.14);
}

*{box-sizing:border-box}

html,body{
    height:100%;
    margin:0;
}

body{
    font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    background:var(--bg);
    color:var(--text);
    overflow:hidden;
}

button,input,textarea,select{
    font:inherit;
}

button{
    cursor:pointer;
}

.app{
    height:100vh;
    display:flex;
    flex-direction:column;
}

.topbar{
    height:56px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    gap:14px;
    padding:0 14px;
    z-index:50;
}

.brand{
    display:flex;
    align-items:center;
    gap:8px;
}

.brand-icon{
    width:32px;
    height:32px;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    display:grid;
    place-items:center;
    font-size:17px;
}

.brand strong{
    display:block;
    font-size:15px;
}

.brand span{
    display:block;
    font-size:10px;
    color:var(--muted);
}

.board-picker{
    display:flex;
    align-items:center;
    gap:5px;
    flex:1;
    min-width:0;
    max-width:600px;
}

.board-picker select{
    height:34px;
    min-width:220px;
    border:1px solid var(--border);
    background:var(--panel2);
    border-radius:8px;
    padding:0 9px;
    color:var(--text);
}

.top-actions{
    margin-left:auto;
    display:flex;
    align-items:center;
    gap:6px;
}

.save-status{
    font-size:11px;
    color:var(--muted);
    white-space:nowrap;
}

.icon-btn,
.secondary-btn,
.primary-btn{
    border:1px solid var(--border);
    background:var(--panel);
    color:var(--text);
    border-radius:7px;
    height:32px;
    padding:0 9px;
}

.icon-btn{
    min-width:32px;
    padding:0;
}

.primary-btn{
    background:var(--accent);
    border-color:var(--accent);
    color:#fff;
}

.secondary-btn:hover,
.icon-btn:hover{
    background:var(--panel2);
}

.danger-btn:hover{
    color:var(--danger);
}

.workspace{
    display:flex;
    min-height:0;
    flex:1;
}

.sidebar{
    width:220px;
    background:var(--panel);
    border-right:1px solid var(--border);
    padding:12px;
    overflow:auto;
}

.add-main{
    width:100%;
    height:38px;
    border:0;
    border-radius:8px;
    background:var(--accent);
    color:#fff;
    font-weight:650;
    font-size:13px;
}

.add-menu{
    display:none;
    padding:6px 0 10px;
}

.add-menu.open{
    display:block;
}

.add-menu button{
    width:100%;
    display:flex;
    align-items:center;
    gap:8px;
    border:0;
    background:none;
    padding:7px 9px;
    border-radius:7px;
    color:var(--text);
    text-align:left;
}

.add-menu button:hover{
    background:var(--accent2);
}

.sidebar-section{
    margin-top:8px;
}

.sidebar-title{
    font-size:10px;
    text-transform:uppercase;
    letter-spacing:.08em;
    color:var(--muted);
    padding:6px 7px;
}

.board-item{
    display:flex;
    align-items:center;
    gap:6px;
    padding:7px 8px;
    border-radius:7px;
    font-size:12px;
    cursor:pointer;
}

.board-item:hover{
    background:var(--panel2);
}

.board-item.active{
    background:var(--accent2);
    color:var(--accent);
    font-weight:600;
}

.sidebar-help{
    font-size:10px;
    color:var(--muted);
    border-top:1px solid var(--border);
    margin-top:16px;
    padding:12px 7px;
    line-height:1.4;
}

.sidebar-help p{
    margin:6px 0;
}

.board-area{
    min-width:0;
    flex:1;
    display:flex;
    flex-direction:column;
}

.board-toolbar{
    height:50px;
    background:var(--panel);
    border-bottom:1px solid var(--border);
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
}

.board-toolbar h1{
    font-size:15px;
    margin:0;
}

.board-toolbar span{
    font-size:10px;
    color:var(--muted);
}

.toolbar-actions{
    display:flex;
    align-items:center;
    gap:4px;
}

.toolbar-actions span{
    width:44px;
    text-align:center;
}

.board-viewport{
    position:relative;
    flex:1;
    overflow:auto;
    background:
        radial-gradient(
        circle at 1px 1px,
        rgba(60,75,100,.24) 1.2px,
        transparent 1.4px
        )
        0 0/24px 24px,
        var(--bg);
}

.board-canvas{
    position:relative;
    width:2600px;
    height:1800px;
    transform-origin:0 0;
}

.block{
    position:absolute;
    background:var(--panel);
    border:1px solid var(--border);
    border-radius:10px;
    box-shadow:var(--shadow);
    overflow:hidden;
    min-width:170px;
    min-height:110px;
}

.block.selected{
    outline:2px solid var(--accent);
    outline-offset:1px;
}

.block-head{
    height:34px;
    display:flex;
    align-items:center;
    padding:0 6px 0 10px;
    border-bottom:1px solid var(--border);
    background:var(--panel2);
    cursor:grab;
    user-select:none;
    touch-action:none;
}

.block-head:active{
    cursor:grabbing;
}

.block-title{
    font-size:11px;
    font-weight:650;
    flex:1;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.block-actions{
    display:flex;
    gap:1px;
}

.block-actions button{
    width:24px;
    height:24px;
    border:0;
    background:none;
    border-radius:5px;
    color:var(--muted);
}

.block-actions button:hover{
    background:var(--border);
    color:var(--text);
}

.block-body{
    height:calc(100% - 34px);
    overflow:auto;
    padding:9px;
    font-size:12px;
}

.note-editor .jtoolbar {
    display: none !important;
}

.note-editor{
    width:100%;
    height:100%;
    min-height: 150px;
    outline:0;
    line-height:1.45;
    overflow:auto;
}

.note-editor:empty:before{
    content:"Napisz tutaj...";
    color:var(--muted);
}

.note-editor h1,
.note-editor h2,
.note-editor h3{
    margin-top:0.35em;
}

.note-editor[contenteditable="true"]{
    cursor:text;
    min-height: 150px;
    padding: 10px;
    outline: none;
}

.resize-handle{
    position:absolute;
    right:2px;
    bottom:2px;
    width:14px;
    height:14px;
    cursor:nwse-resize;
    background:
        linear-gradient(
            135deg,
            transparent 45%,
            var(--muted) 46%,
            var(--muted) 55%,
            transparent 56%
        );
}

.check-row{
    display:flex;
    align-items:flex-start;
    gap:7px;
    margin:5px 0;
}

.check-row input{
    margin-top:2px;
}

.check-row span{
    outline:0;
    flex:1;
    line-height:1.3;
}

.check-row span.done{
    text-decoration:line-through;
    color:var(--muted);
}

.link-card{
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:6px;
}

.link-card a{
    font-weight:650;
    color:var(--accent);
    word-break:break-word;
}

.link-url{
    font-size:10px;
    color:var(--muted);
    word-break:break-all;
}

.image-body{
    padding:0;
    background:#111;
    display:grid;
    place-items:center;
}

.image-body img{
    display:block;
    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.file-card{
    display:flex;
    align-items:center;
    gap:10px;
    height:100%;
}

.file-icon{
    font-size:32px;
}

.file-card a{
    color:var(--accent);
    font-weight:600;
    word-break:break-word;
}

.sheet-wrap{
    width:100%;
    height:100%;
    overflow:auto;
}

.sheet{
    border-collapse:collapse;
    width:max-content;
    min-width:100%;
    font-size:11px;
}

.sheet th,
.sheet td{
    border:1px solid var(--border);
    padding:5px 7px;
    min-width:85px;
    max-width:260px;
}

.sheet th{
    background:var(--panel2);
    font-weight:650;
    position:sticky;
    top:0;
    z-index:2;
}

.sheet td{
    background:var(--panel);
    outline:0;
}

.sheet td:focus{
    box-shadow:inset 0 0 0 2px var(--accent);
}

.sheet-toolbar{
    display:flex;
    gap:4px;
    margin-bottom:6px;
}

.sheet-toolbar button{
    height:26px;
    padding:0 7px;
    font-size:10px;
}

.jspreadsheet-container {
    width: 100%;
    height: 100%;
}

.jspreadsheet-container .jexcel {
    width: 100% !important;
}

.block[data-type="sheet"] .block-body {
    overflow: hidden;
}


.empty-board{
    position:absolute;
    left:50%;
    top:45%;
    transform:translate(-50%,-50%);
    text-align:center;
    color:var(--muted);
}

.empty-board b{
    display:block;
    color:var(--text);
    margin-bottom:5px;
}

.modal{
    position:fixed;
    inset:0;
    background:rgba(10,16,28,.42);
    display:grid;
    place-items:center;
    z-index:100;
}

.modal.hidden{
    display:none;
}

.modal-card{
    width:min(500px,calc(100vw - 24px));
    max-height:90vh;
    overflow:auto;
    background:var(--panel);
    border-radius:12px;
    box-shadow:0 25px 80px rgba(0,0,0,.25);
    padding:15px;
}

.modal-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:12px;
}

.modal-head strong{
    font-size:15px;
}

.form-group{
    margin-bottom:10px;
}

.form-group label{
    display:block;
    font-size:11px;
    color:var(--muted);
    margin-bottom:4px;
}

.form-group input,
.form-group textarea{
    width:100%;
    border:1px solid var(--border);
    border-radius:7px;
    background:var(--panel2);
    color:var(--text);
    padding:7px 8px;
}

.form-group textarea{
    min-height:80px;
    resize:vertical;
}

.modal-actions{
    display:flex;
    justify-content:flex-end;
    gap:7px;
    margin-top:13px;
}

body.dark{
    --bg:#10141c;
    --panel:#171d27;
    --panel2:#1d2531;
    --text:#edf2f8;
    --muted:#9aa7b9;
    --border:#2d3747;
    --accent:#6d86ff;
    --accent2:#202b4b;
    --shadow:0 10px 26px rgba(0,0,0,.27);
}

@media(max-width:800px){
    
    .add-menu{
        position:absolute;
        left:8px;
        top:110px;
        width:190px;
        padding:6px;
        background:var(--panel);
        border:1px solid var(--border);
        border-radius:10px;
        box-shadow:var(--shadow);
        z-index:200;
    }

    .add-menu button{
        width:100%;
        min-height:38px;
        padding:8px 10px;
        font-size:12px;
    }

    .topbar{
        height:52px;
        padding:0 8px;
        gap:6px;
    }

    .brand{
        flex:0 0 auto;
    }

    .brand-icon{
        width:34px;
        height:34px;
    }

    .top-actions{
        gap:3px;
        flex:0 0 auto;
    }

    .top-actions .icon-btn,
    .top-actions .secondary-btn,
    .top-actions .primary-btn{
        width:34px;
        min-width:34px;
        height:34px;
        padding:0;
    }
    
    .sidebar .sidebar-section,
    .sidebar-help{
        display:none;
    }

    .sidebar{
        width:58px;
        padding:10px;
    }
    
    .board-picker{
    flex:1;
    min-width:0;
    }

    .board-picker select{
    display:block;
    width:100%;
    min-width:0;
    }

    .add-main{
        font-size:0;
    }

    .add-main:first-letter{
        font-size:20px;
    }

    .brand div:last-child{
        display:none;
    }

    .board-toolbar{
        padding:0 10px;
    }

    .board-canvas{
        width:1800px;
        height:1400px;
    }

    .save-status{
        display:none;
    }
}