:root{
--bg:#f0f0f0;
--card:#ffffff;
--text:#333;
--primary:#8ca49c;
--primaryDark:#6f8a82;
--danger:#d64545;
--success:#4a9c68;
}
.appModal{

    position:fixed;
    inset:0;

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

    display:none;

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

    z-index:99999;

}

.appModal.show{

    display:flex;

}

.appModalBox{

    background:white;

    width:min(
        90vw,
        450px
    );

    border-radius:16px;

    padding:20px;

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

}

.appModalTitle{

    font-size:20px;
    font-weight:700;

    margin-bottom:10px;

}

.appModalText{

    margin-bottom:20px;

}

.appModalButtons{

    display:flex;

    justify-content:flex-end;

    gap:10px;

}
#header{
    width:270px;
    min-width:270px;
    max-width:270px;
    flex-shrink:0;
    min-height:100%;
}

#header .sidebar{
    min-height:100vh;
    height:100%;
    position:sticky;
    top:0;


background:white;

padding:22px;

border-right:
1px solid rgba(0,0,0,.06);

display:flex;
flex-direction:column;

gap:18px;

position:sticky;
top:0;

height:100%;

overflow-y:auto;

}

.logo{
font-size:42px !important;
font-weight:900;
letter-spacing:-3px;
line-height:1;
margin-bottom:6px;
}

.logoText{
font-size:15px !important;
line-height:1.5;
color:#666;
margin-bottom:18px;
}

.nav{
display:flex;
flex-direction:column;
gap:10px;
}

.navBtn{

height:58px !important;

border:none;

border-radius:18px;

background:#f5f7f6;

padding:0 18px;

display:flex;
align-items:center;

font-size:16px !important;
font-weight:900;

cursor:pointer;

transition:.15s;

width:100%;

}

.navBtn:hover{
background:#e5ebe8;
}

.navBtn.active{
background:var(--primary);
color:white;
}

.sidebarBottom{

margin-top:auto;

background:#f5f7f6;

padding:18px;

border-radius:22px;

}

.userLabel{
font-size:13px;
font-weight:800;
color:#666;
margin-bottom:8px;
}

.userName{
font-size:20px;
font-weight:900;
margin-bottom:14px;
}

.logoutBtn{

width:100%;
height:50px;

border:none;

border-radius:16px;

background:var(--danger);

color:white;

font-size:15px;
font-weight:900;

cursor:pointer;

}

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:Arial,Helvetica,sans-serif;
-webkit-tap-highlight-color:transparent;
}

html,
body{
background:var(--bg);
color:var(--text);
overflow-x:hidden;
}

/* ===================================== */
/* LAYOUT */
/* ===================================== */

.layout{
    display:flex;
    min-height:100vh;
    align-items:stretch; /* statt flex-start */
}

#header{
    width:270px;
    min-width:270px;
    max-width:270px;
    flex-shrink:0;
    min-height:100%;
}

#header .sidebar{
    min-height:100%;
    height:100vh;
    position:sticky;
    top:0;


background:white;

padding:22px;

border-right:
1px solid rgba(0,0,0,.06);

display:flex;
flex-direction:column;

gap:18px;

position:sticky;
top:0;

height:100%;

overflow-y:auto;

}

.content{
flex:1;
min-width:0;
padding:24px;
}

/* ===================================== */
/* HERO */
/* ===================================== */

.hero{

background:white;

border-radius:42px;

padding:42px;

margin-bottom:24px;

box-shadow:
0 18px 40px rgba(0,0,0,.05);

}

.heroTitle{

font-size:72px;
font-weight:900;

line-height:1;

letter-spacing:-4px;

margin-bottom:14px;

}

.heroText{

font-size:21px;
line-height:1.7;

color:#666;

max-width:900px;

}

/* ===================================== */
/* SECTION */
/* ===================================== */

.section{

display:flex;
flex-direction:column;

gap:24px;

margin-bottom:28px;

}

.sectionTitle{

font-size:40px;
font-weight:900;

letter-spacing:-2px;

margin-bottom:6px;

}

/* ===================================== */
/* CARD */
/* ===================================== */

.card{

background:white;

border-radius:38px;

padding:32px;

box-shadow:
0 15px 35px rgba(0,0,0,.05);

}

/* ===================================== */
/* SHIFT CARD */
/* ===================================== */

.shiftCard{

background:white;

border-radius:38px;

padding:32px;

box-shadow:
0 15px 35px rgba(0,0,0,.05);

display:flex;
flex-direction:column;

gap:24px;

}

.shiftTop{

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

gap:20px;

flex-wrap:wrap;

}

.shiftInfo{

display:flex;
flex-direction:column;

gap:6px;

}

.shiftDay{

font-size:34px;
font-weight:900;

letter-spacing:-1px;

}

.shiftDate{

font-size:18px;
font-weight:800;

color:#666;

}

.shiftTime{

font-size:20px;
font-weight:900;

color:#5e6e6a;

}

/* ===================================== */
/* STATUS */
/* ===================================== */

.status{

padding:10px 18px;

border-radius:999px;

font-size:14px;
font-weight:900;

display:inline-flex;
align-items:center;

}

.status.today{

background:#e7f5eb;
color:#2d7a47;

}

.status.upcoming{

background:#edf3f0;
color:#5e6e6a;

}

.status.past{

background:#f2f2f2;
color:#777;

}

/* ===================================== */
/* FORM */
/* ===================================== */

.formGrid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:20px;

}

.field{

display:flex;
flex-direction:column;

gap:10px;

}

.label{

font-size:15px;
font-weight:900;

color:#666;

}

.input,
.textarea{

width:100%;

border:none;
outline:none;

background:#f5f7f6;

border-radius:22px;

font-size:17px;

color:#333;

}

.input{

height:64px;

padding:0 22px;

}

.textarea{

padding:18px 22px;

min-height:120px;

resize:vertical;

}

/* ===================================== */
/* SELLER CHIPS */
/* ===================================== */

.sellerContainer{

display:flex;
flex-wrap:wrap;

gap:12px;

}

.sellerChip{

padding:14px 20px;

border-radius:999px;

background:#f5f7f6;

font-size:15px;
font-weight:900;

cursor:pointer;

transition:.15s;

border:3px solid transparent;

user-select:none;

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

min-height:52px;

}

.sellerChip:hover{

background:#e5ebe8;

transform:translateY(-2px);

}

.sellerChip.active{

background:var(--primary);

color:white;

border-color:var(--primaryDark);

box-shadow:
0 10px 25px rgba(140,164,156,.35);

}

/* ===================================== */
/* BUTTONS */
/* ===================================== */

.btnRow{

display:flex;
gap:14px;

flex-wrap:wrap;

}

.saveBtn{

height:68px;

padding:0 28px;

border:none;

border-radius:24px;

background:var(--primary);

color:white;

font-size:19px;
font-weight:900;

cursor:pointer;

transition:.15s;

}

.saveBtn:hover{

background:var(--primaryDark);

}

.deleteBtn{

height:68px;

padding:0 28px;

border:none;

border-radius:24px;

background:#ffe4e4;

color:#b90000;

font-size:19px;
font-weight:900;

cursor:pointer;

}

/* ===================================== */
/* EMPTY */
/* ===================================== */

.emptyCard{

background:white;

border-radius:34px;

padding:40px;

text-align:center;

font-size:18px;

font-weight:800;

color:#777;

box-shadow:
0 15px 35px rgba(0,0,0,.05);

}

/* ===================================== */
/* LOADING */
/* ===================================== */

.loading{

background:white;

border-radius:34px;

padding:40px;

text-align:center;

font-size:18px;

font-weight:900;

box-shadow:
0 15px 35px rgba(0,0,0,.05);

}

/* ===================================== */
/* MOBILE */
/* ===================================== */

@media(max-width:1100px){

.layout{
flex-direction:column;
}

#header{
width:100%;
max-width:100%;
min-width:100%;
}

#header .sidebar{

width:100% !important;
min-width:100% !important;
max-width:100% !important;

height:auto;

position:relative;

border-right:none;

border-bottom:
1px solid rgba(0,0,0,.06);

}

.content{
width:100%;
}

.heroTitle{
font-size:54px;
}

.sectionTitle{
font-size:30px;
}

.shiftDay{
font-size:28px;
}

.formGrid{
grid-template-columns:1fr;
}

.btnRow{
flex-direction:column;
}

.saveBtn,
.deleteBtn{
width:100%;
}

}