*{box-sizing:border-box}
:root{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#18212f;background:#f4f7fb}
body{margin:0}
a{color:inherit;text-decoration:none}
header{height:68px;background:#fff;border-bottom:1px solid #e5e9ef;display:flex;align-items:center;justify-content:space-between;padding:0 max(20px,calc((100% - 1100px)/2))}
header strong{font-size:20px}
.hello{margin-left:20px;color:#697586}
.logout{font-weight:600}
main{max-width:1100px;margin:35px auto;padding:0 20px}
.hero{display:flex;justify-content:space-between;align-items:center;background:#fff;padding:28px;border-radius:18px;box-shadow:0 4px 20px #0000000d}
.hero h1{margin:0 0 5px;font-size:30px}.hero p{margin:0;color:#697586}
.storage{width:300px}.storage strong{font-size:20px}
.bar{height:9px;background:#e6eaf0;border-radius:10px;margin:9px 0;overflow:hidden}
.bar span{display:block;height:100%;background:#3977e8;border-radius:10px}
.storage small,.filename small{color:#7a8492}
.toolbar{display:flex;gap:15px;justify-content:space-between;margin:24px 0}
.toolbar form{display:flex;gap:8px}
input{border:1px solid #ccd3dc;border-radius:9px;padding:11px 12px;font-size:15px;background:#fff}
input[type=file]{display:none}
button,.button{border:0;border-radius:9px;background:#2869df;color:#fff;padding:11px 16px;font-weight:600;cursor:pointer}
.files{background:#fff;border-radius:18px;overflow:hidden;box-shadow:0 4px 20px #0000000d}
.path{padding:18px 20px;border-bottom:1px solid #edf0f4;font-weight:600;display:flex;gap:8px}
.path span{color:#9aa3af}
.row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid #edf0f4}
.row:last-child{border-bottom:0}
.row .icon{font-size:25px}
.filename{flex:1;min-width:150px;font-weight:600}
.filename small{display:block;font-weight:400;margin-top:3px}
.rename{display:flex;gap:6px}
.rename input{width:180px;padding:8px}
.rename button,.danger{padding:8px 11px}
.danger{background:#e34b4b}
.parent{font-weight:600}
.empty{text-align:center;padding:70px 20px;color:#697586}
.empty div{font-size:50px}.empty h2{color:#263244;margin-bottom:4px}
.error{background:#feeaea;color:#a92525;padding:12px 15px;border-radius:10px;margin:15px 0}
.login-page{min-height:100vh;display:grid;place-items:center;padding:20px}
.login-card{background:#fff;width:min(400px,100%);padding:38px;border-radius:20px;box-shadow:0 10px 40px #00000012}
.login-card .logo{font-size:45px;text-align:center}
.login-card h1{text-align:center;margin:8px 0 0}
.login-card .muted{text-align:center;color:#77808d;margin-bottom:30px}
.login-card form{display:grid;gap:9px}
.login-card label{font-weight:600;margin-top:6px}
.login-card button{margin-top:12px;font-size:16px}
@media(max-width:720px){
 .hero{display:block}.storage{width:100%;margin-top:22px}
 .toolbar{display:block}.toolbar form{margin-bottom:10px}
 .new-folder input{width:100%}
 .row{flex-wrap:wrap}.filename{width:calc(100% - 50px)}
 .rename{width:100%}.rename input{flex:1}
 .hello{display:none}
}

/* Account / password controls */
.account-actions{
    display:flex;
    align-items:center;
    gap:14px
}
.header-button{
    background:#eef4ff;
    color:#2869df;
    padding:9px 13px
}
.success{
    background:#e8f7ed;
    color:#176b36;
    padding:13px 16px;
    border-radius:10px;
    margin-bottom:18px
}
.modal[hidden]{
    display:none
}
.modal{
    position:fixed;
    inset:0;
    z-index:1000;
    background:#0008;
    display:grid;
    place-items:center;
    padding:20px
}
.modal-open{
    overflow:hidden
}
.modal-card{
    width:min(440px,100%);
    background:#fff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 20px 70px #0004
}
.modal-title{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:18px
}
.modal-title h2{
    margin:0
}
.close-button{
    background:transparent;
    color:#667085;
    font-size:28px;
    padding:0 6px
}
.password-form{
    display:grid;
    gap:9px
}
.password-form label{
    font-weight:600;
    margin-top:7px
}
.password-form input{
    width:100%
}
.modal-buttons{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:18px
}
.cancel-button{
    background:#e9edf3;
    color:#263244
}

@media(max-width:600px){
    header{
        height:auto;
        min-height:68px;
        padding-top:10px;
        padding-bottom:10px
    }
    .account-actions{
        gap:8px
    }
    .header-button{
        padding:8px 10px;
        font-size:13px
    }
    .logout{
        font-size:13px
    }
}

/* Storage usage */
.storage-note{
    margin-top:7px;
    color:#7a8492;
    font-size:14px
}

/* Admin */
.admin-panel{
    background:#fff;
    border-radius:18px;
    padding:26px;
    margin-bottom:25px;
    box-shadow:0 4px 20px #0000000d
}
.admin-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:22px
}
.admin-heading h1{
    margin:0 0 5px
}
.admin-heading p{
    margin:0;
    color:#697586
}
.admin-users{
    display:grid;
    gap:10px
}
.admin-user{
    display:grid;
    grid-template-columns:minmax(220px,1fr) 150px auto;
    align-items:center;
    gap:16px;
    padding:15px;
    border:1px solid #e5e9ef;
    border-radius:12px
}
.admin-user-main{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px
}
.admin-user-main > span:not(.badge){
    color:#7a8492
}
.admin-storage strong,
.admin-storage small{
    display:block
}
.admin-storage small{
    color:#7a8492
}
.admin-buttons{
    display:flex;
    gap:8px;
    justify-content:flex-end
}
.badge{
    border-radius:999px;
    padding:3px 8px;
    font-size:12px;
    font-weight:700
}
.admin-badge{
    background:#eaf1ff;
    color:#2869df
}
.enabled-badge{
    background:#e8f7ed;
    color:#176b36
}
.disabled-badge{
    background:#feeaea;
    color:#a92525
}
.enable-button{
    background:#28814b
}

@media(max-width:760px){
    .admin-heading{
        display:block
    }
    .admin-heading .button{
        display:inline-block;
        margin-top:14px
    }
    .admin-user{
        grid-template-columns:1fr
    }
    .admin-buttons{
        justify-content:flex-start;
        flex-wrap:wrap
    }
}

/* Quota storage meter */
.storage{
    min-width:300px
}
.storage-main{
    display:flex;
    align-items:baseline;
    gap:6px;
    margin-bottom:9px
}
.storage-main strong{
    font-size:20px
}
.storage-main span{
    color:#697586;
    font-size:14px
}
.storage-details{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:7px;
    color:#697586;
    font-size:13px
}
.storage-details strong{
    color:inherit;
    font-size:inherit
}

@media(max-width:700px){
    .storage{
        min-width:0;
        width:100%
    }
}

/* ============================================================
   Family Files - Explorer-style file manager
   ============================================================ */

.file-manager{
    margin-top:24px;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    box-shadow:0 4px 20px #0000000d
}

.fm-topbar{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:0 20px;
    border-bottom:1px solid #e8ecf1
}

.fm-topbar .path{
    padding:0;
    border:0;
    flex-wrap:wrap
}

.fm-count{
    color:#7a8492;
    font-size:13px;
    white-space:nowrap
}

.fm-table-wrap{
    width:100%;
    overflow-x:auto
}

.fm-table{
    width:100%;
    border-collapse:collapse;
    table-layout:auto
}

.fm-table th{
    background:#f8fafc;
    color:#697586;
    text-align:left;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    padding:11px 14px;
    border-bottom:1px solid #e8ecf1
}

.fm-table td{
    padding:11px 14px;
    border-bottom:1px solid #edf0f4;
    vertical-align:middle;
    font-size:14px
}

.fm-table tbody tr:last-child td{
    border-bottom:0
}

.fm-table tbody tr:hover{
    background:#f8fbff
}

.name-column{
    min-width:280px
}

.actions-column{
    min-width:270px
}

.name-cell a{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    font-weight:600
}

.file-icon{
    flex:0 0 auto;
    font-size:23px;
    width:28px;
    text-align:center
}

.file-name{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.type-cell{
    color:#697586;
    white-space:nowrap
}

.size-cell{
    color:#697586;
    white-space:nowrap
}

.modified-cell{
    color:#697586;
    white-space:nowrap
}

.file-actions{
    white-space:nowrap
}

.inline-form{
    display:inline
}

.mini-button{
    display:inline-block;
    border:1px solid #dce2ea;
    background:#fff;
    color:#344054;
    padding:7px 9px;
    border-radius:7px;
    font-size:12px;
    font-weight:600;
    cursor:pointer;
    margin:2px
}

.mini-button:hover{
    background:#f2f6fb;
    border-color:#c8d2df
}

.delete-button{
    color:#c83535
}

.parent-row{
    background:#fbfcfe
}


/* Viewer */

.viewer{
    border-bottom:1px solid #e8ecf1;
    background:#fbfcfe
}

.viewer-header{
    min-height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 20px;
    background:#fff;
    border-bottom:1px solid #e8ecf1
}

.viewer-title{
    display:flex;
    align-items:center;
    gap:12px;
    min-width:0
}

.viewer-icon{
    font-size:30px
}

.viewer-title h2{
    margin:0 0 4px;
    font-size:18px;
    overflow-wrap:anywhere
}

.viewer-title small{
    color:#7a8492
}

.viewer-actions{
    display:flex;
    gap:8px;
    flex-shrink:0
}

.secondary-button{
    background:#edf2f7;
    color:#344054
}

.viewer-body{
    min-height:300px
}

.image-viewer{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:24px;
    min-height:420px;
    background:#20252d
}

.image-viewer img{
    display:block;
    max-width:100%;
    max-height:75vh;
    object-fit:contain;
    border-radius:4px
}

.pdf-viewer{
    display:block;
    width:100%;
    height:75vh;
    min-height:550px;
    border:0;
    background:#e5e7eb
}

.media-viewer{
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    background:#171a20
}

.media-viewer video{
    display:block;
    width:min(100%,1000px);
    max-height:75vh;
    background:#000
}

.audio-viewer{
    min-height:300px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:25px;
    padding:40px
}

.audio-icon{
    font-size:70px
}

.audio-viewer audio{
    width:min(600px,100%)
}


/* Text editor */

.text-editor-form{
    display:block
}

.editor-toolbar{
    min-height:52px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 14px;
    background:#f7f9fc;
    border-bottom:1px solid #e4e8ee;
    font-size:13px;
    font-weight:600
}

.editor-toolbar button{
    padding:8px 12px
}

.text-editor{
    display:block;
    width:100%;
    height:65vh;
    min-height:500px;
    resize:vertical;
    border:0;
    outline:0;
    border-radius:0;
    padding:18px;
    background:#15191f;
    color:#e7edf5;
    font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
    font-size:14px;
    line-height:1.55;
    tab-size:4;
    white-space:pre;
    overflow:auto
}

.unsupported-view{
    min-height:350px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:40px 20px
}

.unsupported-view > div{
    font-size:65px
}

.unsupported-view h3{
    margin:15px 0 4px
}

.unsupported-view p{
    margin:0 0 20px;
    color:#697586
}


/* Rename popup */

.rename-dialog-form{
    display:grid;
    gap:9px
}

.rename-dialog-form label{
    font-weight:600
}

.rename-dialog-form input{
    width:100%
}


/* Mobile file manager */

@media(max-width:800px){

    main{
        padding:0 12px;
        margin-top:20px
    }

    .fm-topbar{
        padding:13px 14px
    }

    .fm-count{
        display:none
    }

    .fm-table thead{
        display:none
    }

    .fm-table,
    .fm-table tbody,
    .fm-table tr,
    .fm-table td{
        display:block;
        width:100%
    }

    .fm-table tr{
        position:relative;
        padding:11px 12px;
        border-bottom:1px solid #edf0f4
    }

    .fm-table td{
        border:0;
        padding:3px 0
    }

    .name-cell{
        padding-right:5px !important
    }

    .name-cell a{
        font-size:15px
    }

    .type-cell,
    .size-cell,
    .modified-cell{
        display:inline !important;
        width:auto !important;
        margin-right:9px;
        font-size:12px;
        color:#7a8492
    }

    .file-actions{
        margin-top:8px
    }

    .viewer-header{
        align-items:flex-start;
        flex-direction:column
    }

    .viewer-actions{
        width:100%
    }

    .viewer-actions .button{
        flex:1;
        text-align:center
    }

    .pdf-viewer{
        height:70vh;
        min-height:450px
    }

    .text-editor{
        min-height:450px;
        height:65vh
    }
}

/* ============================================================
   Family Files - Explorer UI
   ============================================================ */

.explorer-commandbar{
    margin-top:24px;
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:8px 12px;
    background:#fff;
    border:1px solid #e3e8ef;
    border-radius:12px 12px 0 0
}

.commandbar-left{
    display:flex;
    align-items:center;
    gap:4px;
    flex-wrap:wrap
}

.command-button{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:40px;
    padding:8px 12px;
    border-radius:7px;
    background:transparent;
    color:#344054;
    font-weight:600
}

.command-button:hover{
    background:#f0f4f8
}

.command-button.primary-command{
    background:#2869df;
    color:#fff
}

.command-button.primary-command:hover{
    background:#1f5bc5
}

.command-icon{
    font-size:17px
}

.commandbar-location{
    min-width:0;
    max-width:42%;
    display:flex;
    align-items:center;
    gap:7px;
    padding:8px 11px;
    border:1px solid #dce2e9;
    border-radius:7px;
    background:#fafbfd;
    color:#5e6978;
    font-size:13px
}

.commandbar-location span:last-child{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap
}

.location-icon{
    flex:0 0 auto
}


/* Attach command bar to file manager */

.explorer-commandbar + .upload-form + .modal + .file-manager{
    margin-top:0;
    border-radius:0 0 12px 12px;
    box-shadow:none;
    border:1px solid #e3e8ef;
    border-top:0
}

.file-manager{
    border-radius:12px
}


/* More compact Explorer rows */

.fm-table th{
    height:38px;
    padding:8px 14px;
    background:#fafbfd;
    text-transform:none;
    letter-spacing:0;
    font-size:12px;
    font-weight:600
}

.fm-table td{
    height:48px;
    padding:7px 14px
}

.file-row{
    transition:background .08s ease
}

.file-row:hover{
    background:#eef5ff !important
}

.file-row .file-icon{
    font-size:21px
}

.name-cell a{
    min-height:32px
}

.name-cell a:hover .file-name{
    text-decoration:underline
}

.file-name{
    font-weight:500
}

.actions-column{
    width:70px;
    min-width:70px;
    text-align:center !important
}

.file-actions{
    position:relative;
    width:70px;
    text-align:center
}


/* Three-dot menu */

.item-menu{
    position:relative;
    display:inline-block
}

.more-button{
    width:36px;
    height:34px;
    padding:0;
    border-radius:6px;
    background:transparent;
    color:#475467;
    font-size:23px;
    line-height:1;
    font-weight:700
}

.more-button:hover,
.more-button[aria-expanded="true"]{
    background:#e7eef8;
    color:#18212f
}

.item-menu-popup{
    position:absolute;
    z-index:100;
    top:38px;
    right:0;
    width:180px;
    padding:5px;
    background:#fff;
    border:1px solid #dfe5ec;
    border-radius:9px;
    box-shadow:0 10px 30px #0002;
    text-align:left
}

.item-menu-popup[hidden]{
    display:none
}

.item-menu-popup a,
.item-menu-popup button{
    width:100%;
    min-height:38px;
    display:flex;
    align-items:center;
    gap:9px;
    padding:8px 10px;
    border:0;
    border-radius:6px;
    background:transparent;
    color:#344054;
    text-align:left;
    font-size:13px;
    font-weight:500
}

.item-menu-popup a:hover,
.item-menu-popup button:hover{
    background:#f0f4f8
}

.item-menu-popup span{
    width:20px;
    text-align:center
}

.item-menu-popup form{
    margin:0
}

.item-menu-popup .menu-delete{
    color:#bd2c2c
}

.menu-divider{
    height:1px;
    background:#e7ebf0;
    margin:4px
}


/* Upload selection tray */

.upload-form{
    margin:0
}

.upload-tray[hidden]{
    display:none
}

.upload-tray{
    position:relative;
    margin:12px 0 20px;
    background:#fff;
    border:1px solid #dce3eb;
    border-radius:12px;
    overflow:hidden;
    box-shadow:0 5px 20px #0000000d
}

.upload-tray-header{
    min-height:60px;
    padding:12px 16px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:15px;
    background:#f8fafc;
    border-bottom:1px solid #e7ebf0
}

.upload-tray-header strong,
.upload-tray-header small{
    display:block
}

.upload-tray-header small{
    margin-top:2px;
    color:#7a8492
}

.tray-close{
    width:38px;
    height:38px;
    padding:0;
    background:transparent;
    color:#667085;
    font-size:25px
}

.tray-close:hover{
    background:#e9edf3
}

.upload-file-list{
    max-height:320px;
    overflow:auto
}

.pending-file{
    min-height:58px;
    display:flex;
    align-items:center;
    gap:12px;
    padding:9px 14px;
    border-bottom:1px solid #edf0f4
}

.pending-file:last-child{
    border-bottom:0
}

.pending-file-icon{
    width:32px;
    flex:0 0 32px;
    text-align:center;
    font-size:23px
}

.pending-file-info{
    flex:1;
    min-width:0
}

.pending-file-info strong,
.pending-file-info small{
    display:block
}

.pending-file-info strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:14px
}

.pending-file-info small{
    margin-top:3px;
    color:#7a8492;
    font-size:12px
}

.pending-remove{
    width:34px;
    height:34px;
    padding:0;
    flex:0 0 34px;
    background:transparent;
    color:#667085;
    font-size:22px
}

.pending-remove:hover{
    background:#feeaea;
    color:#b42318
}

.upload-tray-footer{
    min-height:62px;
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:9px;
    padding:10px 14px;
    border-top:1px solid #e7ebf0;
    background:#fafbfd
}

#uploadSubmit:disabled{
    opacity:.6;
    cursor:default
}


/* New folder dialog */

.new-folder-dialog-form{
    display:grid;
    gap:9px
}

.new-folder-dialog-form label{
    font-weight:600
}

.new-folder-dialog-form input{
    width:100%
}


/* Explorer mobile */

@media(max-width:800px){

    .explorer-commandbar{
        margin-top:18px;
        padding:7px;
        display:block
    }

    .commandbar-left{
        width:100%;
        flex-wrap:nowrap
    }

    .command-button{
        flex:1;
        justify-content:center;
        padding:8px 7px;
        font-size:13px
    }

    .commandbar-location{
        max-width:none;
        width:100%;
        margin-top:7px
    }

    .explorer-commandbar + .upload-form + .modal + .file-manager{
        border-radius:0 0 10px 10px
    }

    .fm-topbar{
        min-height:48px
    }

    .fm-table tr{
        padding:8px 12px 10px
    }

    .fm-table td{
        height:auto
    }

    .file-actions{
        position:absolute;
        top:9px;
        right:8px;
        width:auto !important;
        margin:0 !important
    }

    .name-cell{
        padding-right:45px !important
    }

    .item-menu-popup{
        position:absolute;
        right:0;
        top:37px;
        width:185px
    }

    .upload-tray{
        margin-top:10px
    }

    .upload-file-list{
        max-height:260px
    }

    .upload-tray-footer button{
        flex:1
    }
}

@media(max-width:430px){

    .command-button span:last-child{
        font-size:12px
    }

    .command-icon{
        font-size:16px
    }

    .type-cell{
        display:none !important
    }

    .pending-file{
        padding-left:10px;
        padding-right:10px
    }
}

/* ============================================================
   Real upload progress
   ============================================================ */

.upload-progress-area[hidden]{
    display:none
}

.upload-progress-area{
    padding:14px 16px 13px;
    border-top:1px solid #e7ebf0;
    background:#f8fafc
}

.upload-progress-heading{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    margin-bottom:9px;
    font-size:14px
}

.upload-progress-bar{
    width:100%;
    height:12px;
    overflow:hidden;
    background:#dfe5ec;
    border-radius:999px
}

.upload-progress-bar span{
    display:block;
    width:0;
    height:100%;
    background:#2869df;
    border-radius:999px;
    transition:width .15s linear
}

.upload-progress-details{
    display:flex;
    justify-content:space-between;
    gap:20px;
    margin-top:7px;
    color:#697586;
    font-size:12px
}

#uploadClearButton:disabled{
    opacity:.5;
    cursor:default
}

@media(max-width:600px){
    .upload-progress-details{
        gap:8px
    }

    #uploadProgressBytes{
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
    }

    #uploadProgressSpeed{
        flex-shrink:0
    }
}

/* ============================================================
   File Manager - Action Menu Overflow Fix
   ============================================================ */

/*
 * Action menus must be allowed to extend beyond the file list.
 * The old overflow:hidden clipped Open/Rename/Delete when there
 * were only a few items in the directory.
 */
.file-manager {
    overflow: visible;
}

/*
 * Keep the table usable horizontally on narrow screens, but
 * don't create a little vertical scrolling window.
 */
.fm-table-wrap {
    overflow-x: auto;
    overflow-y: visible;
}

/*
 * Make sure the action menu appears above surrounding content.
 */
.file-actions {
    position: relative;
    overflow: visible;
}

.item-menu {
    position: relative;
    z-index: 20;
}

.item-menu-popup {
    z-index: 1000;
}


/* ============================================================
   Floating Explorer Action Menu
   Keep action menus outside the table scroll container.
   ============================================================ */

.item-menu-popup {
    position: fixed !important;
    z-index: 10000 !important;
    top: auto;
    right: auto;
}


/* ============================================================
   Family Files - Trash
   ============================================================ */

.fm-count-actions{
    display:flex;
    align-items:center;
    gap:14px
}

.trash-link{
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:7px 10px;
    border:1px solid #d9e0e8;
    border-radius:7px;
    background:#fff;
    color:#475467;
    font-weight:600;
    text-decoration:none
}

.trash-link:hover{
    background:#f4f6f8
}

.trash-header{
    min-height:74px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:14px 20px;
    border-bottom:1px solid #e8ecf1
}

.trash-header h2{
    margin:0 0 3px;
    font-size:20px
}

.trash-header p{
    margin:0;
    color:#697586;
    font-size:13px
}

.trash-header-actions{
    display:flex;
    align-items:center;
    gap:8px
}

.trash-header-actions form,
.trash-actions form{
    margin:0
}

.trash-actions{
    display:flex;
    align-items:center;
    gap:7px;
    white-space:nowrap
}

.restore-button{
    background:#2869df;
    padding:8px 11px
}

.trash-actions .danger,
.trash-header-actions .danger{
    padding:8px 11px
}

@media(max-width:800px){
    .trash-header{
        align-items:flex-start;
        flex-direction:column
    }

    .trash-header-actions{
        width:100%
    }

    .trash-actions{
        flex-direction:column;
        align-items:stretch
    }

    .trash-actions button{
        width:100%
    }
}