*{
    box-sizing:border-box;
}

body{

    margin:0;

    font-family:
    Arial,
    sans-serif;

    background:#f5f5f5;

    color:#222;
}

/* TOP BAR */

#topbar{

    background:#d71920;

    color:#fff;

    padding:15px 20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;
}

#topbar h1{

    margin:0;

    font-size:24px;
}

.header-left{

    display:flex;

    flex-direction:column;

    gap:5px;
}

.header-right{

    display:flex;

    gap:10px;

    align-items:center;

    flex-wrap:wrap;
}

#lastUpdated{

    font-size:13px;

    opacity:.9;
}

/* ADMIN TOOLBAR */

#adminToolbar{

    background:#111;

    padding:10px;

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    border-bottom:
    2px solid #d71920;
}

/* BUTTONS */

.btn{

    padding:10px 14px;

    border:none;

    border-radius:5px;

    cursor:pointer;

    background:#fff;

    color:#111;

    font-weight:bold;
}

.btn:hover{

    opacity:.9;
}

/* BOARD */

#board{

    display:grid;

    gap:20px;

    padding:20px;

    align-items:start;
}

/* COLUMN */

.column{

    width:300px;

    min-width:300px;

    background:#fff;

    border-radius:8px;

    overflow:hidden;

    box-shadow:
    0 2px 8px
    rgba(0,0,0,.1);
}

.column-header{

    background:#111;

    color:#fff;

    padding:12px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}

.column-actions{

    display:flex;

    gap:10px;

    align-items:center;
}

.refresh-column,
.edit-column,
.delete-column{

    cursor:pointer;

    user-select:none;
}

.refresh-column:hover,
.edit-column:hover,
.delete-column:hover{

    opacity:.7;
}

.column-count{

    padding:12px;

    text-align:center;

    font-weight:bold;

    border-bottom:
    1px solid #eee;
}

.column-updated{

    padding:8px;

    text-align:center;

    font-size:12px;

    color:#666;

    border-bottom:
    1px solid #eee;
}

.column-jobs{

    min-height:120px;
}

/* JOBS */

.job{

    padding:12px;

    border-bottom:
    1px solid #eee;

    cursor:pointer;

    transition:
    background .2s;
}

.job:hover{

    background:#fafafa;
}

.job.empty{

    text-align:center;

    color:#999;

    cursor:default;
}

/* MODALS */

.hidden{

    display:none !important;
}

.modal{

    position:fixed;

    inset:0;

    background:
    rgba(0,0,0,.5);

    display:flex;

    justify-content:center;

    align-items:center;

    z-index:9999;
}

.modal-card{

    background:#fff;

    padding:20px;

    width:500px;

    max-width:95%;

    border-radius:8px;

    box-shadow:
    0 10px 25px
    rgba(0,0,0,.25);
}

.modal-card.large{

    width:900px;
}

.modal-card h2{

    margin-top:0;
}

.modal-card label{

    display:block;

    margin-bottom:5px;

    font-weight:bold;
}

.modal-card input,
.modal-card textarea,
.modal-card select{

    width:100%;

    padding:10px;

    margin-top:5px;

    margin-bottom:15px;

    border:
    1px solid #ddd;

    border-radius:4px;
}

.modal-actions{

    display:flex;

    justify-content:flex-end;

    gap:10px;
}

/* TABLES */

table{

    width:100%;

    border-collapse:collapse;
}

th,
td{

    padding:10px;

    border:
    1px solid #ddd;

    text-align:left;
}

th{

    background:#f5f5f5;
}

/* TV MODE */

.tv-mode{

    background:#111;
}

.tv-mode #board{

    padding:30px;
}

.tv-mode .column{

    width:340px;

    min-width:340px;
}

.tv-mode .job{

    font-size:24px;

    padding:18px;
}

.tv-mode .column-count{

    font-size:20px;
}

/* MOBILE */

@media (max-width: 768px){

    #topbar{

        flex-direction:column;

        align-items:flex-start;
    }

    .header-right{

        width:100%;
    }

    .column{

        width:280px;

        min-width:280px;
    }

    .modal-card.large{

        width:95%;
    }
}
/* IMPORTANT CARDS */

.important-column{

animation:
flashCard 1s infinite;

border:
4px solid #ff0000;

}

.important-column .column-header{

animation:
flashHeader 1s infinite;

}

@keyframes flashCard{

0%{

    background:#ffffff;

    box-shadow:
    0 0 10px rgba(255,0,0,.5);
}

50%{

    background:#ffdddd;

    box-shadow:
    0 0 40px rgba(255,0,0,1);
}

100%{

    background:#ffffff;

    box-shadow:
    0 0 10px rgba(255,0,0,.5);
}

}

@keyframes flashHeader{

0%{

    background:#111;
}

50%{

    background:#ff0000;
}

100%{

    background:#111;
}

}

/* DRAG & RESIZE */

.column{

position:relative;

}

.column-header{

cursor:move;

user-select:none;

}

.dragging{

opacity:.6;

transform:scale(1.02);

}

.resize-handle{

position:absolute;

right:0;

bottom:0;

width:20px;

height:20px;

cursor:nwse-resize;

z-index:100;

background:
linear-gradient(
    135deg,
    transparent 50%,
    #d71920 50%
);

}

.resize-handle:hover{

background:
linear-gradient(
    135deg,
    transparent 50%,
    #ff0000 50%
);

}