@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

*{
box-sizing:border-box;
margin:0;
padding:0;
}
body{
font-family:'Inter',sans-serif;
background:linear-gradient(180deg,#0d1117,#0f141c);
color:#e6edf3;
padding:40px;
min-height:100vh;
}

/* header */

.topbar{
position:relative;
z-index:1000;
overflow:visible;
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:25px;
}

.title{
font-size:22px;
font-weight:600;
letter-spacing:.3px;
}

/* dropdown */

.menu-btn{
font-size:26px;
cursor:pointer;
transition:.2s;
}

.menu-btn:hover{
transform:scale(1.1);
}

.menu{
display:none;
position:absolute;
z-index:1200;
right:40px;
top:70px;
background:#161b22;
border-radius:12px;
padding:10px;
box-shadow:0 10px 30px rgba(0,0,0,.4);
animation:fadeIn .25s ease;
}

.menu a{
display:block;
padding:10px 16px;
color:#e6edf3;
text-decoration:none;
border-radius:8px;
font-size:14px;
transition:.2s;
}

.menu a:hover{
background:#21262d;
}

/* card */

.card{
background:#161b22;
border-radius:16px;
padding:30px;
box-shadow:0 10px 40px rgba(0,0,0,.45);
}

/* schedule table */

.schedule{
width:100%;
border-collapse:separate;
border-spacing:10px;
margin-top:20px;
}

.schedule th{
font-weight:500;
font-size:14px;
color:#8b949e;
padding-bottom:6px;
}

.schedule td{
background:#0f141c;
border-radius:12px;
padding:12px;
min-height:140px;
vertical-align:top;
transition:.2s;
}

.schedule td:hover{
background:#151b23;
}

/* today highlight */

.today{
outline:2px solid #4dabf7;
}

/* shift cards */

.shift{
background:rgba(255,255,255,.08);
border-radius:10px;
padding:8px 10px;
margin-bottom:8px;
font-size:13px;
backdrop-filter:blur(6px);
transition:.2s;
}

.shift:hover{
transform:translateY(-2px);
}

/* legend */

.legend{
display:flex;
gap:16px;
flex-wrap:wrap;
margin-top:20px;
}

.legend-item{
display:flex;
align-items:center;
gap:6px;
font-size:13px;
color:#8b949e;
}

.dot{
width:10px;
height:10px;
border-radius:50%;
}

/* summary */

.summary{
margin-top:20px;
display:flex;
gap:25px;
font-size:14px;
color:#9aa4af;
}

.summary strong{
color:#e6edf3;
}

/* modal */

.modal{
display:none;
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:rgba(0,0,0,.65);
justify-content:center;
align-items:center;
animation:fadeIn .2s ease;
}

.modal-box{
background:#161b22;
padding:30px;
border-radius:16px;
width:340px;
box-shadow:0 10px 40px rgba(0,0,0,.5);
animation:scaleIn .2s ease;
}

.modal h2{
margin-bottom:15px;
font-weight:500;
}

/* inputs */

.modal input,
.modal select{
width:100%;
padding:10px;
margin-bottom:12px;
border-radius:8px;
border:1px solid #30363d;
background:#0f141c;
color:#e6edf3;
font-size:14px;
}

.modal input:focus,
.modal select:focus{
outline:none;
border-color:#4dabf7;
}

/* buttons */

button{
background:#238636;
border:none;
padding:10px 18px;
border-radius:10px;
color:white;
font-weight:500;
cursor:pointer;
transition:.2s;
}

button:hover{
background:#2ea043;
transform:translateY(-1px);
}

/* color radios */

.color-group{
display:flex;
gap:10px;
margin-bottom:14px;
}

.color-group input{
display:none;
}

.color{
width:22px;
height:22px;
border-radius:50%;
display:block;
cursor:pointer;
border:2px solid transparent;
transition:.15s;
}

input:checked + .color{
border:2px solid white;
transform:scale(1.15);
}

/* colors */

.red{background:#ff6b6b;}
.blue{background:#4dabf7;}
.green{background:#51cf66;}
.yellow{background:#ffd43b;}
.purple{background:#845ef7;}
.orange{background:#ffa94d;}

/* login */

.login-body{
display:flex;
align-items:center;
justify-content:center;
height:100vh;
}
.history-nav{
margin-bottom:20px;
}
.history-week{
margin-bottom:40px;
padding-bottom:20px;
border-bottom:1px solid rgba(255,255,255,.05);
}
.shift{
position:relative;
transition:.2s;
}

.edit-shift-btn{
position:absolute;
top:6px;
right:6px;
background:rgba(0,0,0,.55);
width:22px;
height:22px;
border-radius:6px;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
cursor:pointer;
opacity:0;
transition:.15s;
}

.shift:hover .edit-shift-btn{
opacity:1;
}

.edit-shift-btn:hover{
background:rgba(0,0,0,.8);
}
.week-title{
font-size:16px;
font-weight:600;
margin-bottom:15px;
color:#c9d1d9;
}
.shift-off{
background:#2d333b;
color:#8b949e;
border-radius:10px;
display:flex;
align-items:center;
justify-content:center;
height:60px;
font-size:14px;
font-weight:500;
letter-spacing:.5px;
opacity:.75;
}
.back-button{
color: white;
text-decoration: none;
display:inline-block;
background:#21262d;
padding:8px 14px;
border-radius:8px;
font-size:14px;
transition:.2s;
}

.back-button:hover{
background:#30363d;
}
.modal-header{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:10px;
}

.modal-close{
cursor:pointer;
font-size:18px;
color:#8b949e;
transition:.2s;
}

.modal-close:hover{
color:white;
transform:scale(1.1);
}
.login-card{
background:#161b22;
padding:40px;
border-radius:16px;
width:320px;
box-shadow:0 10px 40px rgba(0,0,0,.5);
text-align:center;
}

.login-card h1{
margin-bottom:20px;
font-size:22px;
}

.login-card input{
width:100%;
padding:12px;
margin-bottom:12px;
border-radius:10px;
border:1px solid #30363d;
background:#0f141c;
color:white;
}

/* animations */

@keyframes fadeIn{
from{opacity:0}
to{opacity:1}
}

@keyframes scaleIn{
from{transform:scale(.9)}
to{transform:scale(1)}
}

.timeline-wrap{
position:relative;
z-index:1;
margin-top:24px;
background:rgba(15,20,28,.9);
border-radius:22px;
padding:18px;
overflow-x:auto;
border:1px solid rgba(255,255,255,.06);
box-shadow:inset 0 0 0 1px rgba(255,255,255,.02);
}

.timeline-header{
position:relative;
z-index:1;
display:grid;
grid-template-columns:150px minmax(1200px,1fr);
align-items:end;
margin-bottom:10px;
}

.timeline-day-spacer{
height:34px;
}

.timeline-hours{
position:relative;
z-index:1;
display:grid;
grid-template-columns:repeat(21,1fr);
font-size:12px;
color:#8b949e;
}

.timeline-hour{
text-align:left;
border-left:1px solid rgba(255,255,255,.08);
padding-left:15px;
height:28px;
}

.timeline-body{
position:relative;
z-index:1;
display:flex;
flex-direction:column;
gap:12px;
}

.timeline-row{
position:relative;
z-index:1;
display:grid;
grid-template-columns:150px minmax(1200px,1fr);
align-items:center;
min-height:76px;
}

.timeline-day-label{
padding-right:14px;
text-align:right;
}

.timeline-day-name{
font-size:15px;
font-weight:700;
color:#e6edf3;
}

.timeline-day-date{
font-size:13px;
color:#8b949e;
margin-top:3px;
}

.timeline-track{
position:relative;
height:64px;
border-radius:14px;
Padding-left:2px;
background:
repeating-linear-gradient(
to right,
rgba(255,255,255,.09) 0,
rgba(255,255,255,.09) 1px,
transparent 1px,
transparent calc(100% / 20)
),
linear-gradient(180deg,#0b1017,#101722);
overflow:hidden;
}

.timeline-track::before{
    content:"";
    position:absolute;
    inset:0;
    display:grid;
    grid-template-columns:repeat(21,1fr);
    pointer-events:none;
}

.timeline-track::before > div{
    border-left:1px solid rgba(255,255,255,.08);
}

.today-row .timeline-track{
box-shadow:0 0 0 2px rgba(77,171,247,.9), 0 0 18px rgba(77,171,247,.25);
}

.timeline-shift{
position:absolute;
top:9px;
height:53px;
border-radius:12px;
padding:7px 32px 7px 10px;
color:white;
box-shadow:0 8px 20px rgba(0,0,0,.35);
overflow:hidden;
white-space:nowrap;
transition:.18s ease;
border:1px solid rgba(255,255,255,.18);
}

.timeline-shift:hover{
transform:translateY(-2px);
filter:brightness(1.08);
z-index:10;
}

.timeline-shift-name{
font-size:13px;
font-weight:800;
line-height:1.1;
}

.timeline-shift-time{
font-size:11px;
opacity:.95;
margin-top:2px;
}

.timeline-shift-meta{
font-size:10px;
opacity:.85;
margin-top:1px;
}

.timeline-off{
position:absolute;
left:12px;
right:12px;
top:12px;
bottom:12px;
display:flex;
align-items:center;
justify-content:center;
border-radius:12px;
background:rgba(255,255,255,.045);
color:#8b949e;
font-size:13px;
font-weight:800;
letter-spacing:.12em;
}

.edit-shift-btn{
position:absolute;
top:6px;
right:6px;
width:22px;
height:22px;
border-radius:7px;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
cursor:pointer;
opacity:0;
transition:.15s ease;
z-index:20;
}

.timeline-shift:hover .edit-shift-btn{
opacity:1;
}

.edit-shift-btn:hover{
background:rgba(0,0,0,.75);
transform:scale(1.08);
}
.week-nav{
display:flex;
align-items:center;
gap:14px;
}

.week-label{
font-size:15px;
font-weight:600;
color:#c9d1d9;
letter-spacing:.3px;
}

/* BUTTON STYLE */
.week-btn{
display:flex;
align-items:center;
justify-content:center;

width:34px;
height:34px;

border-radius:10px;

background:rgba(255,255,255,.04);
border:1px solid rgba(255,255,255,.06);

color:#e6edf3;
font-size:18px;
text-decoration:none;

transition:.18s ease;
backdrop-filter:blur(8px);
}

/* HOVER */
.week-btn:hover{
background:rgba(255,255,255,.08);
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ACTIVE CLICK */
.week-btn:active{
transform:scale(.95);
}
.week-btn:hover{
box-shadow:
0 6px 18px rgba(0,0,0,.35),
0 0 8px rgba(77,171,247,.35);
}
/* Multi-user additions */
.menu-wrap{position:relative;z-index:1100}
.account-line{margin-top:5px;color:#8b949e;font-size:12px}
.role-badge{display:inline-block;padding:3px 7px;border-radius:999px;background:#1f6feb22;border:1px solid #1f6feb66;color:#79c0ff;font-size:11px;font-weight:600}
.admin-viewbar{display:flex;align-items:center;gap:10px;margin:0 0 18px auto;width:max-content;background:#161b22;padding:10px 12px;border-radius:10px;border:1px solid #30363d;color:#9aa4af;font-size:13px}
.admin-viewbar select{background:#0f141c;color:#e6edf3;border:1px solid #30363d;border-radius:8px;padding:7px 10px}
.field-label{display:block;color:#8b949e;font-size:12px;margin:1px 0 6px}
.modal-actions{display:flex;gap:10px}
.delete-form{margin-top:10px}
.danger-btn{width:100%;background:#da3633}.danger-btn:hover{background:#f85149}
.secondary-btn{background:#30363d;padding:7px 10px}.secondary-btn:hover{background:#484f58}
.flash{position:fixed;top:18px;left:50%;transform:translateX(-50%);z-index:9999;padding:11px 16px;border-radius:10px;box-shadow:0 8px 25px rgba(0,0,0,.35);transition:.3s}
.flash-success{background:#1f6f3f;color:#d2f4dc;border:1px solid #2ea043}
.flash-error{background:#7d2828;color:#ffd7d5;border:1px solid #f85149}
.flash-hide{opacity:0;transform:translate(-50%,-10px);pointer-events:none}
.login-card{width:min(390px,92vw);background:#161b22;border:1px solid #30363d;border-radius:16px;padding:32px;box-shadow:0 18px 45px rgba(0,0,0,.4)}
.login-card h1{margin-bottom:8px}.login-subtitle{color:#8b949e;font-size:14px;margin-bottom:22px}
.login-card input{width:100%;padding:11px;margin-bottom:12px;border-radius:8px;border:1px solid #30363d;background:#0f141c;color:#e6edf3}
.login-card button{width:100%}.error{color:#ff7b72;margin-top:12px;font-size:13px}
.page-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.page-heading p{color:#8b949e;margin-top:6px}
.user-card{background:#161b22;border-radius:16px;padding:20px;box-shadow:0 10px 40px rgba(0,0,0,.35);overflow:auto}
.user-table{width:100%;border-collapse:collapse;min-width:680px}.user-table th,.user-table td{text-align:left;padding:13px 12px;border-bottom:1px solid #21262d}.user-table th{color:#8b949e;font-size:12px;font-weight:600}.user-table td{font-size:14px}
.table-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.table-actions form{margin:0}.small-link{color:#79c0ff;text-decoration:none}.small-link:hover{text-decoration:underline}
.status-pill{padding:4px 8px;border-radius:999px;font-size:11px}.status-pill.active{background:#23863633;color:#7ee787}.status-pill.inactive{background:#6e768133;color:#8b949e}
.empty-state{margin-top:20px;padding:28px;background:#161b22;border-radius:12px;color:#8b949e;text-align:center}.history-table-wrap{overflow-x:auto}
.timeline-shift{position:absolute;top:10px;bottom:10px;border-radius:8px;padding:8px 10px;overflow:hidden;min-width:48px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.timeline-shift .edit-shift-btn{opacity:0}.timeline-shift:hover .edit-shift-btn{opacity:1}
.timeline-shift-name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.timeline-shift-time,.timeline-shift-meta{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.timeline-wrap{overflow-x:auto}.timeline-header,.timeline-row{min-width:1050px}.timeline-header{display:flex}.timeline-day-spacer,.timeline-day-label{width:110px;flex:0 0 110px}.timeline-hours{display:grid;grid-template-columns:repeat(21,1fr);flex:1}.timeline-hour{text-align:left;font-size:10px;color:#6e7681}.timeline-row{display:flex;min-height:86px;border-top:1px solid #21262d}.timeline-day-label{padding:16px 10px}.timeline-day-name{font-weight:600}.timeline-day-date{font-size:12px;color:#8b949e;margin-top:4px}.timeline-track{position:relative;flex:1;display:grid;grid-template-columns:repeat(21,1fr);background:#0f141c}.timeline-track>div:not(.timeline-shift):not(.timeline-off){border-left:1px solid #21262d}.timeline-off{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#484f58;font-size:12px;letter-spacing:1px}.today-row .timeline-day-label{color:#79c0ff}.today-row .timeline-track{box-shadow:inset 0 0 0 1px #1f6feb66}
.week-nav{display:flex;align-items:center;gap:10px}.week-btn{display:flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:8px;background:#21262d;color:#e6edf3;text-decoration:none;font-size:20px}.week-label{font-size:14px;color:#c9d1d9}

@media(max-width:760px){body{padding:18px}.topbar{align-items:flex-start;gap:14px;flex-wrap:wrap}.week-nav{order:3;width:100%;justify-content:center}.menu{right:0;top:40px}.card{padding:16px}.summary{flex-direction:column;gap:8px}.admin-viewbar{width:100%;justify-content:space-between}.page-heading{align-items:flex-start}.modal-box{width:min(340px,92vw)}}


/* Daily roster/menu stacking fix */
.topbar{position:relative;z-index:1000;overflow:visible}
.menu-wrap{position:relative;z-index:1100}
.menu{position:absolute;z-index:1200}
.timeline-wrap,.timeline-header,.timeline-hours,.timeline-body,.timeline-row{position:relative;z-index:1}

/* Daily roster menu stacking fix */
.topbar{
    position:relative;
    z-index:1000000;
    overflow:visible;
    isolation:isolate;
}

.menu-wrap{
    position:relative;
    z-index:1000001;
}

.menu{
    z-index:1000002;
}

.card{
    position:relative;
    z-index:0;
}

.timeline-wrap,
.timeline-header,
.timeline-hours,
.timeline-body,
.timeline-row,
.timeline-track{
    z-index:0;
}

/*
 * On small screens the roster timeline is horizontally scrollable and can
 * establish its own painting/stacking layers.  Making the dropdown fixed
 * removes it from that layout and guarantees it paints over the roster.
 */
@media(max-width:760px){
    .topbar{
        position:relative;
        z-index:2147483000;
        overflow:visible;
    }

    .menu-wrap{
        position:relative;
        z-index:2147483001;
    }

    .menu{
        position:fixed;
        top:70px;
        right:18px;
        z-index:2147483002;
    }

    .card,
    .timeline-wrap,
    .timeline-header,
    .timeline-hours,
    .timeline-body,
    .timeline-row,
    .timeline-track{
        z-index:0;
    }
}