:root{

    --bg:#f5f7fb;
    --white:#ffffff;

    --border:#e7ebf2;

    --text:#1f2937;
    --muted:#7c8595;

    --blue:#2563eb;
    --blue-soft:#edf4ff;

    --hover:#f6f8fc;

    --green:#54a944;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:'Inter',sans-serif;

    background:var(--bg);

    color:var(--text);

    height:100vh;

    overflow:hidden;

    font-size:80%;
}

/* =========================
   APP
========================= */

.app{
    display:flex;
    height:100vh;
}

/* =========================
   SIDEBAR
========================= */

.sidebar{

    width:256px;

    background:#fbfcfe;

    border-right:1px solid var(--border);

    padding:18px;

    overflow:auto;
}

.logo{

    display:flex;

    align-items:center;

    gap:11px;

    margin-bottom:27px;

    font-size:24px;

    font-weight:700;
}

.logo-icon{

    width:38px;
    height:38px;

    border-radius:11px;

    background:white;

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

    border:1px solid var(--border);
}

.sidebar-section-title{

    font-size:12px;

    font-weight:700;

    margin-bottom:13px;
}

.tree{
    list-style:none;
}

.tree-node{
    margin-bottom:3px;
}

.tree-item{

    min-height:38px;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 11px;

    border-radius:10px;

    cursor:pointer;

    transition:0.2s;

    font-size:13px;
}

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

.tree-item.active{

    background:var(--blue-soft);

    color:var(--blue);

    font-weight:600;
}

.tree-left{

    display:flex;

    align-items:center;

    gap:10px;
}

.folder-icon{
    font-size:16px;
}

.arrow{

    width:6px;
    height:6px;

    border-right:2px solid #7b8494;
    border-bottom:2px solid #7b8494;

    transform:rotate(-45deg);

    transition:0.2s;
}

.arrow.rotate{
    transform:rotate(45deg);
}

.has-children .arrow{
    display:block;
}

.tree-item:not(.has-children) .arrow{
    visibility:hidden;
}

.subtree{

    list-style:none;

    margin-left:14px;

    padding-left:13px;

    border-left:1px dashed #d7dce5;

    margin-top:5px;
}

/* CLOSED */

.tree-node:not(.open) > .subtree{
    display:none;
}

/* =========================
   MAIN
========================= */

.main{
    flex:1;
    display:flex;
    flex-direction:column;
}

/* =========================
   TOPBAR
========================= */

.topbar{

    height:62px;

    background:white;

    border-bottom:1px solid var(--border);

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:0 27px;
}

.breadcrumbs{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:12px;

    color:#687385;
}

.current{
    color:var(--blue);
    font-weight:600;
}

.topbar-right{

    display:flex;

    align-items:center;

    gap:13px;
}

.icon-btn{

    width:34px;
    height:34px;

    border-radius:10px;

    border:1px solid var(--border);

    background:white;

    cursor:pointer;

    font-size:14px;
}

.profile{

    display:flex;

    align-items:center;

    gap:10px;

    margin-left:5px;

    font-size:13px;
}

.avatar{

    width:34px;
    height:34px;

    border-radius:50%;

    background:#d9e7ff;
}

/* =========================
   CONTENT
========================= */

.content{

    padding:26px;

    overflow:auto;
}

.content-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:21px;
}

.content-header h1{

    font-size:30px;

    margin-bottom:6px;
}

.file-count{

    color:var(--muted);

    font-size:12px;
}

.header-actions{

    display:flex;

    gap:11px;
}

.btn{

    height:38px;

    padding:0 16px;

    border:none;

    border-radius:11px;

    font-size:12px;

    font-weight:600;

    cursor:pointer;

     transition: filter 0.2s;
}

.btn:hover {
    filter: brightness(0.8);
}

.btn-light{

    background:white;

    border:1px solid var(--border);
}

.btn-primary{

    background:var(--blue);

    color:white;
}

.btn-ziel{

    background:var(--green);

    color:white;
}

/* =========================
   VIEW SWITCH
========================= */

.view-switch{

    display:flex;

    gap:10px;

    margin-bottom:16px;
}

.view-btn{

    height:35px;

    padding:0 14px;

    border-radius:10px;

    border:1px solid var(--border);

    background:white;

    font-size:12px;

    cursor:pointer;
}

.view-btn.active{

    background:var(--blue-soft);

    color:var(--blue);

    border-color:#cddfff;

    font-weight:600;
}

/* =========================
   TABLE
========================= */

.table-wrapper{

    background:white;

    border:1px solid var(--border);

    border-radius:14px;

    overflow:hidden;
}

table{

    width:100%;

    border-collapse:collapse;
}

thead{

    background:#fafbfd;
}

thead th{

    font-size:11px;

    font-weight:600;

    color:#5f6b7c;

    border-bottom:1px solid var(--border);
}

th, td{

    padding:16px 14px;

    text-align:left;

    font-size:12px;
}

tbody tr{

    border-bottom:1px solid #f1f3f7;

    transition:0.2s;
}

tbody tr:hover{
    background:#fafcff;
}

tbody tr:last-child{
    border-bottom:none;
}

.file-name{

    display:flex;

    align-items:center;

    gap:11px;

    font-weight:500;
}

.table-icon{

    width:27px;
    height:27px;

    border-radius:8px;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:14px;
}

.table-icon.folder{

    background:#eaf2ff;
}

.table-icon.pdf{

    background:#ffe9e9;
}

.table-icon.excel{

    background:#eaf9ef;
}

.menu-cell{

    width:40px;

    text-align:center;

    color:#7d8798;

    font-size:18px;

    cursor:pointer;
}

/* =========================
   BIGGER CHECKBOXES
========================= */

input[type="checkbox"]{

    width:18px;
    height:18px;

    cursor:pointer;

    accent-color:#2563eb;
}

.checkbox-col{
    width:56px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width:1000px){

    .sidebar{
        display:none;
    }

    .content-header{

        flex-direction:column;

        align-items:flex-start;

        gap:16px;
    }
}