:root{
    --bg0:#050403;
    --bg1:#0b0907;
    --bg2:#17120d;
    --panel:rgba(16,12,8,.82);
    --panel-strong:rgba(20,15,10,.94);
    --panel-soft:rgba(255,255,255,.05);
    --line:rgba(152,125,98,.2);
    --line-strong:rgba(215,194,170,.34);
    --text:#f7f0e8;
    --muted:#b9a58f;
    --muted-strong:#e0cbb3;
    --accent:#987d62;
    --accent2:#f2e3d2;
    --logo-gold:#987d62;
    --logo-gold-light:#d7c2aa;
    --logo-gold-soft:rgba(152,125,98,.2);
    --logo-gold-line:rgba(152,125,98,.46);
    --success:#49d17d;
    --warn:#ffc247;
    --danger:#ff5f6d;
    --radius:8px;
    --shadow:0 24px 70px rgba(0,0,0,.42);
    --shadow-soft:0 12px 32px rgba(0,0,0,.28);
    --max:1320px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    color:var(--text);
    font-family:"Bahnschrift","Segoe UI Variable Text","Trebuchet MS",sans-serif;
    background:
        radial-gradient(circle at 16% 18%, rgba(152,125,98,.2), transparent 28%),
        radial-gradient(circle at 84% 14%, rgba(215,194,170,.13), transparent 24%),
        linear-gradient(180deg,#050403 0%,#0b0907 52%,#050403 100%);
}
a{color:inherit}

.scene-shell{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    overflow:hidden;
    background:
        radial-gradient(circle at 26% 22%, rgba(152,125,98,.14), transparent 24%),
        radial-gradient(circle at 76% 64%, rgba(215,194,170,.08), transparent 28%);
}
.scene-shell::before,
.scene-shell::after{
    content:"";
    position:absolute;
    inset:-12%;
    pointer-events:none;
}
.scene-shell::before{
    background-image:
        linear-gradient(90deg, transparent 0 19%, rgba(152,125,98,.12) 19% calc(19% + 1px), transparent calc(19% + 1px) 100%),
        linear-gradient(90deg, transparent 0 68%, rgba(215,194,170,.08) 68% calc(68% + 1px), transparent calc(68% + 1px) 100%),
        linear-gradient(0deg, transparent 0 31%, rgba(152,125,98,.11) 31% calc(31% + 1px), transparent calc(31% + 1px) 100%),
        linear-gradient(0deg, transparent 0 74%, rgba(215,194,170,.08) 74% calc(74% + 1px), transparent calc(74% + 1px) 100%),
        radial-gradient(circle at 19% 31%, rgba(215,194,170,.26) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 31%, rgba(152,125,98,.22) 0 2px, transparent 3px),
        radial-gradient(circle at 19% 74%, rgba(152,125,98,.2) 0 2px, transparent 3px),
        radial-gradient(circle at 68% 74%, rgba(215,194,170,.18) 0 2px, transparent 3px);
    background-size:280px 190px;
    opacity:.34;
    transform:rotate(-2deg) scale(1.04);
    filter:drop-shadow(0 0 14px rgba(152,125,98,.1));
    mask-image:linear-gradient(90deg, transparent 0%, #000 16%, #000 84%, transparent 100%);
}
.scene-shell::after{
    background-image:
        linear-gradient(90deg, transparent 0 calc(50% - 1px), rgba(242,227,210,.1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        linear-gradient(0deg, transparent 0 calc(50% - 1px), rgba(152,125,98,.1) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)),
        radial-gradient(circle at 50% 50%, rgba(242,227,210,.22) 0 2px, transparent 3px),
        radial-gradient(circle at 18% 50%, rgba(152,125,98,.18) 0 2px, transparent 3px),
        radial-gradient(circle at 82% 50%, rgba(152,125,98,.18) 0 2px, transparent 3px);
    background-size:420px 260px, 420px 260px, 420px 260px, 420px 260px, 420px 260px;
    opacity:.2;
    mix-blend-mode:screen;
}
.scene-canvas{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    display:none;
}
.scene-grid{
    position:absolute;
    inset:0;
    height:auto;
    background-image:
        linear-gradient(rgba(215,194,170,.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(152,125,98,.07) 1px, transparent 1px);
    background-size:96px 96px;
    opacity:.18;
    mask-image:radial-gradient(circle at 50% 42%, #000 0%, transparent 72%);
}
.scene-vignette{
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at center, transparent 0%, transparent 34%, rgba(5,4,3,.34) 64%, rgba(5,4,3,.9) 100%),
        linear-gradient(180deg, rgba(5,4,3,.12) 0%, rgba(5,4,3,.76) 100%);
}
.scene-noise{
    position:absolute;
    inset:0;
    opacity:.06;
    background-image:
        linear-gradient(transparent 0, rgba(255,255,255,.28) 50%, transparent 100%),
        linear-gradient(90deg, rgba(255,255,255,.12) 0, transparent 34%, rgba(255,255,255,.09) 68%, transparent 100%);
    background-size:100% 4px, 320px 100%;
    mix-blend-mode:screen;
}

.app-frame{
    position:relative;
    z-index:1;
    min-height:100vh;
    padding-top:16px;
}

.topbar{
    position:relative;
    z-index:20;
    width:calc(100% - 48px);
    max-width:calc(var(--max) + 48px);
    margin:0 auto;
    padding:18px 24px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    background:
        linear-gradient(135deg, rgba(9,8,7,.96), rgba(15,11,8,.78)),
        radial-gradient(circle at top right, rgba(152,125,98,.22), transparent 38%);
    border:1px solid var(--logo-gold-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(18px);
}
.topbar::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    padding:1px;
    background:linear-gradient(125deg, rgba(152,125,98,.78), rgba(215,194,170,.28), rgba(255,255,255,.08));
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
    mask-composite:exclude;
    pointer-events:none;
}
.brandwrap{
    display:flex;
    align-items:center;
    gap:18px;
    text-decoration:none;
    color:var(--text);
}
.brandmeta{display:flex;flex-direction:column;gap:8px}
.kicker{
    display:block;
    font-size:11px;
    text-transform:uppercase;
    letter-spacing:.34em;
    color:var(--accent2);
}
.subbrand{
    font-size:13px;
    color:#f2e3d2;
    font-weight:800;
    line-height:1.5;
    text-transform:uppercase;
    letter-spacing:.12em;
    text-shadow:0 0 16px rgba(152,125,98,.45), 0 1px 0 rgba(0,0,0,.7);
}
.logo-img{
    width:168px;
    max-width:168px;
    height:auto;
    object-fit:contain;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.38));
}
.userbox{
    display:flex;
    align-items:center;
    gap:14px;
    padding:11px 14px;
    background:linear-gradient(135deg, rgba(152,125,98,.16), rgba(255,255,255,.03));
    border:1px solid rgba(152,125,98,.26);
    border-radius:6px;
    color:#eadbc9;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:.08em;
}
.userbox a{
    text-decoration:none;
    color:var(--text);
    padding:9px 12px;
    border-radius:5px;
    background:linear-gradient(135deg, rgba(152,125,98,.34), rgba(64,49,35,.42));
    border:1px solid rgba(152,125,98,.34);
}

.layout{
    max-width:calc(var(--max) + 48px);
    margin:18px auto 0;
    padding:0 24px 36px;
    display:grid;
    grid-template-columns:280px minmax(0,1fr);
    gap:24px;
    min-height:calc(100vh - 140px);
}
.sidebar{
    position:relative;
    padding:18px;
    background:
        linear-gradient(180deg, rgba(12,10,9,.96), rgba(8,7,5,.88)),
        radial-gradient(circle at top left, rgba(152,125,98,.18), transparent 44%);
    border:1px solid var(--logo-gold-line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(16px);
}
.sidebar::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:3px;
    background:linear-gradient(90deg, #987d62, #d7c2aa, rgba(152,125,98,.18));
}
.sidebar a{
    display:block;
    margin-bottom:10px;
    padding:15px 16px;
    border-radius:6px;
    text-decoration:none;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    color:#e7d8c7;
    background:linear-gradient(135deg, rgba(152,125,98,.14), rgba(255,255,255,.025));
    border:1px solid rgba(152,125,98,.2);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease;
}
.sidebar a:hover{
    transform:translateY(-2px);
    color:var(--text);
    border-color:rgba(215,194,170,.55);
    box-shadow:0 12px 28px rgba(0,0,0,.28), 0 0 0 1px rgba(152,125,98,.16);
    background:linear-gradient(135deg, rgba(152,125,98,.26), rgba(255,255,255,.04));
}
.sidebar a.active{
    color:#050403;
    background:linear-gradient(135deg, #987d62, #d7c2aa);
    border-color:transparent;
    box-shadow:0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28);
}
.sidebar a.home-link{
    color:#e7d8c7;
    background:linear-gradient(135deg, rgba(152,125,98,.14), rgba(255,255,255,.025));
    border:1px solid rgba(152,125,98,.2);
    box-shadow:none;
}
.sidebar a.home-link.active{
    color:#050403;
    background:linear-gradient(135deg, #987d62, #d7c2aa);
    border-color:transparent;
    box-shadow:0 16px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.28);
}

.content{
    min-width:0;
    padding:10px 0 42px;
}
.content.full{
    grid-column:1/-1;
    width:100%;
    max-width:min(1180px, calc(100% - 48px));
    margin:0 auto;
}

h1{
    margin:0 0 12px;
    font-size:clamp(2.3rem, 5vw, 4.7rem);
    line-height:.98;
    letter-spacing:0;
}
h2{
    margin:0;
    font-size:clamp(1.25rem, 2.2vw, 2rem);
    letter-spacing:0;
}
p{margin:0 0 14px}
.eyebrow{
    display:inline-block;
    margin-bottom:12px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.34em;
    color:var(--accent2);
}
.lead{
    max-width:62ch;
    color:var(--muted);
    font-size:1rem;
    line-height:1.7;
}

.page-intro,
.login-copy,
.login-panel,
.card,
.box,
.form{
    position:relative;
    overflow:hidden;
    background:
        linear-gradient(155deg, rgba(20,15,10,.92), rgba(10,8,7,.76)),
        radial-gradient(circle at top right, rgba(152,125,98,.16), transparent 38%);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    backdrop-filter:blur(16px);
}
.page-intro::before,
.login-copy::before,
.login-panel::before,
.card::before,
.box::before,
.form::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:3px;
    background:linear-gradient(90deg, #987d62, rgba(215,194,170,.82), transparent);
}

.page-intro{
    display:grid;
    grid-template-columns:minmax(0,1.3fr) minmax(280px,.7fr);
    gap:24px;
    align-items:stretch;
    margin-bottom:24px;
    padding:30px;
}
.page-intro-compact{padding:26px 28px}
.status-cluster{
    display:grid;
    gap:14px;
    align-content:start;
}
.status-chip{
    padding:18px;
    border-radius:6px;
    background:linear-gradient(135deg, rgba(152,125,98,.16), rgba(255,255,255,.025));
    border:1px solid rgba(152,125,98,.24);
    box-shadow:var(--shadow-soft);
}
.status-chip span{
    display:block;
    margin-bottom:8px;
    font-size:11px;
    color:#d7c2aa;
    text-transform:uppercase;
    letter-spacing:.24em;
}
.status-chip strong{
    display:block;
    font-size:clamp(1.2rem, 3vw, 2rem);
    font-weight:800;
    color:var(--text);
}

.login-stage{
    display:grid;
    grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
    gap:24px;
    align-items:stretch;
    margin-top:42px;
}
.login-copy,
.login-panel{padding:30px}
.login-logo{
    margin-bottom:18px;
    text-align:left;
}
.login-logo img{
    display:block;
    width:min(340px, 78%);
    max-width:340px;
    height:auto;
    margin:0 0 18px;
    filter:drop-shadow(0 18px 30px rgba(0,0,0,.36));
}
.login-logo p{
    color:#f2e3d2;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
    text-shadow:0 0 16px rgba(152,125,98,.42), 0 1px 0 rgba(0,0,0,.7);
}

.cardgrid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
    gap:18px;
    margin-bottom:24px;
}
.card,.box,.form{padding:24px;margin-bottom:24px}
.metric-card h2{
    font-size:clamp(2.6rem, 4vw, 4rem);
    line-height:1;
    color:#f2e3d2;
    text-shadow:0 0 18px rgba(152,125,98,.28);
}
.metric-card p{
    margin:10px 0 0;
    color:#d7c2aa;
    text-transform:uppercase;
    letter-spacing:.18em;
    font-size:12px;
}
.metric-card.metric-overtime,
.status-chip.status-overtime{
    background:linear-gradient(135deg, rgba(73,209,125,.18), rgba(73,209,125,.045));
    border-color:rgba(73,209,125,.36);
}
.metric-card.metric-comp,
.status-chip.status-comp{
    background:linear-gradient(135deg, rgba(255,95,109,.18), rgba(255,95,109,.045));
    border-color:rgba(255,95,109,.36);
}
.metric-card.metric-vacation,
.status-chip.status-vacation{
    background:linear-gradient(135deg, rgba(255,194,71,.2), rgba(255,194,71,.05));
    border-color:rgba(255,194,71,.38);
}
.metric-card.metric-overtime h2,
.status-chip.status-overtime strong{color:#9effbf;text-shadow:0 0 18px rgba(73,209,125,.28)}
.metric-card.metric-comp h2,
.status-chip.status-comp strong{color:#ffb3bc;text-shadow:0 0 18px rgba(255,95,109,.25)}
.metric-card.metric-vacation h2,
.status-chip.status-vacation strong{color:#ffe08a;text-shadow:0 0 18px rgba(255,194,71,.24)}
.metric-card.metric-overtime p,
.status-chip.status-overtime span{color:#c6ffd8}
.metric-card.metric-comp p,
.status-chip.status-comp span{color:#ffd0d5}
.metric-card.metric-vacation p,
.status-chip.status-vacation span{color:#ffe2a3}

.boxhead{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:16px;
    margin-bottom:18px;
}

.action-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));
    gap:16px;
}
.action-tile{
    display:flex;
    flex-direction:column;
    gap:10px;
    min-height:132px;
    padding:20px 18px;
    border-radius:6px;
    text-decoration:none;
    color:var(--text);
    background:linear-gradient(145deg, rgba(152,125,98,.14), rgba(255,255,255,.025));
    border:1px solid rgba(152,125,98,.22);
    box-shadow:var(--shadow-soft);
    transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.action-tile:hover{
    transform:translateY(-3px);
    border-color:rgba(215,194,170,.46);
    box-shadow:0 18px 36px rgba(0,0,0,.32), 0 0 0 1px rgba(152,125,98,.14);
}
.action-tile strong{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#f2e3d2;
}
.action-tile span{
    color:var(--muted);
    line-height:1.6;
    font-size:14px;
}
.action-tile.static:hover{transform:none}
.week-entry.entry-comp{
    border-color:rgba(255,95,109,.4);
    background:linear-gradient(145deg, rgba(255,95,109,.12), rgba(16,12,8,.86));
}
.week-entry.entry-vacation{
    border-color:rgba(255,194,71,.42);
    background:linear-gradient(145deg, rgba(255,194,71,.13), rgba(16,12,8,.86));
}

.btn,button{
    appearance:none;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:48px;
    padding:13px 18px;
    border-radius:6px;
    border:1px solid rgba(215,194,170,.28);
    background:linear-gradient(135deg, rgba(152,125,98,.36), rgba(215,194,170,.18));
    color:var(--text);
    text-decoration:none;
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
    font-weight:800;
    cursor:pointer;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.09),
        0 14px 30px rgba(0,0,0,.24);
    transition:transform .18s ease, filter .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.btn:hover,button:hover{
    transform:translateY(-2px);
    filter:brightness(1.04);
    border-color:rgba(215,194,170,.54);
}
.btn.secondary{background:linear-gradient(135deg, rgba(152,125,98,.16), rgba(255,255,255,.025));border-color:rgba(152,125,98,.24)}
.green{background:linear-gradient(135deg, rgba(73,209,125,.28), rgba(20,107,65,.42))!important;border-color:rgba(73,209,125,.32)!important}
.redbtn{background:linear-gradient(135deg, rgba(255,95,109,.28), rgba(140,25,39,.44))!important;border-color:rgba(255,95,109,.34)!important}
.dangerlink{color:#ffc3ca!important}

label{
    display:block;
    margin-top:2px;
    font-size:12px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.16em;
    color:#dac9b8;
}
input,select,textarea{
    width:100%;
    margin:8px 0 18px;
    padding:15px 16px;
    border-radius:6px;
    border:1px solid rgba(152,125,98,.2);
    background:rgba(8,6,5,.76);
    color:var(--text);
    font:inherit;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
input:focus,select:focus,textarea:focus{
    outline:none;
    border-color:rgba(215,194,170,.5);
    box-shadow:0 0 0 4px rgba(152,125,98,.12);
}
textarea{min-height:120px;resize:vertical}
input::placeholder,textarea::placeholder{color:#9b8976}
.bot-field{
    position:absolute!important;
    left:-10000px!important;
    width:1px!important;
    height:1px!important;
    overflow:hidden!important;
    opacity:0!important;
}

.grid2,.grid3,.grid4{
    display:grid;
    gap:18px;
}
.grid2{grid-template-columns:1fr 1fr}
.grid3{grid-template-columns:1fr 1fr 1fr}
.grid4{grid-template-columns:repeat(4, minmax(0, 1fr))}

.filter-actions{
    display:flex;
    align-items:flex-end;
}
.filter-actions button{
    width:100%;
}

.stack-actions{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
}

.muted-text{
    color:var(--muted);
    margin:0;
}

.week-entry textarea{
    min-height:132px;
}

.signature-panel{
    margin:8px 0 20px;
}
.signature-pad{
    display:block;
    width:100%;
    height:210px;
    margin-bottom:12px;
    border-radius:6px;
    border:1px solid rgba(215,194,170,.32);
    background:#fff;
    touch-action:none;
    box-shadow:inset 0 0 0 1px rgba(0,0,0,.04);
}
.signature-preview{
    display:grid;
    gap:10px;
    margin-top:18px;
}
.signature-preview img{
    max-width:360px;
    width:100%;
    min-height:100px;
    padding:10px;
    border-radius:6px;
    background:#fff;
    border:1px solid rgba(215,194,170,.26);
}
.photo-upload-grid{
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:14px;
    margin:8px 0 18px;
}
.photo-upload-grid div{
    padding:14px;
    border-radius:6px;
    border:1px solid rgba(152,125,98,.22);
    background:rgba(8,6,5,.54);
}
.photo-upload-grid span{
    display:block;
    margin-bottom:8px;
    color:#eadbc9;
    font-weight:800;
}
.photo-upload-grid input{
    margin:0;
    padding:10px;
}
.rapport-photo-grid,
.print-photo-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
    gap:14px;
    margin-top:14px;
}
.rapport-photo{
    display:block;
    overflow:hidden;
    border-radius:6px;
    border:1px solid rgba(215,194,170,.22);
    background:rgba(8,6,5,.72);
    text-decoration:none;
}
.rapport-photo img,
.print-photo img{
    display:block;
    width:100%;
    aspect-ratio:4 / 3;
    object-fit:cover;
}
.rapport-photo span,
.print-photo span{
    display:block;
    padding:10px 12px;
    color:#eadbc9;
    font-weight:800;
}
.print-photo{
    border:1px solid #ddd;
    background:#fff;
    break-inside:avoid;
}
.print-photo span{
    color:#111;
}
.print-signature-image{
    display:block;
    max-width:260px;
    max-height:110px;
    margin-top:8px;
}

table{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    overflow:hidden;
    background:linear-gradient(180deg, rgba(18,14,10,.94), rgba(10,8,7,.8));
    border:1px solid rgba(152,125,98,.24);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    margin-bottom:24px;
}
th,td{
    padding:16px 18px;
    border-bottom:1px solid rgba(215,194,170,.09);
    text-align:left;
    vertical-align:top;
}
th{
    background:linear-gradient(135deg, rgba(22,18,14,.96), rgba(12,9,7,.92));
    color:#eadbc9;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.18em;
}
tr:last-child td{border-bottom:0}
tr:hover td{background:rgba(152,125,98,.08)}
td{color:#e2d6c8}
td.hours-overtime,
td.hours-comp,
td.hours-vacation{
    font-weight:850;
    border-left:3px solid transparent;
}
td.hours-overtime,
tr:hover td.hours-overtime{
    color:#9effbf;
    background:rgba(73,209,125,.11);
    border-left-color:rgba(73,209,125,.78);
}
td.hours-comp,
tr:hover td.hours-comp{
    color:#ffb3bc;
    background:rgba(255,95,109,.12);
    border-left-color:rgba(255,95,109,.82);
}
td.hours-vacation,
tr:hover td.hours-vacation{
    color:#ffe08a;
    background:rgba(255,194,71,.13);
    border-left-color:rgba(255,194,71,.82);
}
td a{
    color:#f2e3d2;
    text-decoration:none;
    font-weight:700;
}
td a:hover{color:var(--text)}
.table-actions{
    display:flex;
    flex-wrap:wrap;
    gap:10px 14px;
}

.badge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-width:94px;
    padding:7px 12px;
    border-radius:999px;
    font-size:11px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.12em;
    border:1px solid transparent;
}
.badge.green{background:rgba(73,209,125,.16);border-color:rgba(73,209,125,.3);color:#c6ffd8}
.badge.yellow{background:rgba(255,194,71,.16);border-color:rgba(255,194,71,.32);color:#ffe2a3}
.badge.red{background:rgba(255,95,109,.16);border-color:rgba(255,95,109,.3);color:#ffd0d5}
.badge.blue{background:rgba(152,125,98,.18);border-color:rgba(215,194,170,.34);color:#f2e3d2}
.badge.gray{background:rgba(152,125,98,.1);border-color:rgba(152,125,98,.2);color:#eadbc9}

.notice{
    padding:16px 18px;
    margin-bottom:20px;
    border-radius:6px;
    border:1px solid rgba(215,194,170,.26);
    background:rgba(152,125,98,.12);
    color:#f2e3d2;
}

.print-wrap{
    background:#fff;
    color:#111;
    max-width:900px;
    margin:0 auto;
    padding:35px;
}
.print-wrap .card{
    background:#fff;
    border:1px solid #ddd;
    box-shadow:none;
}
.print-wrap .card::before{
    background:#111;
}
.print-wrap .metric-card h2,
.print-wrap .metric-card p{
    color:#111;
}
.print-title{
    display:flex;
    justify-content:space-between;
    border-bottom:2px solid #111;
    padding-bottom:18px;
    margin-bottom:22px;
}
.print-wrap,
.print-wrap h1,
.print-wrap h2,
.print-wrap p,
.print-wrap table,
.print-wrap th,
.print-wrap td,
.print-wrap b{
    color:#111;
}
.lohn-print .print-title h1{
    font-size:34px;
    line-height:1.1;
    color:#111;
}
.print-grid2{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:14px;
    align-items:start;
}
.print-logo{max-width:220px;height:auto;margin-bottom:8px}
.print-table{box-shadow:none;border-radius:0;background:#fff;border-color:#ddd}
.print-table th{background:#eee;color:#111}
.print-wrap .metric-card.metric-overtime h2,
.print-wrap .metric-card.metric-overtime p,
.print-wrap td.hours-overtime{color:#137a3f}
.print-wrap .metric-card.metric-comp h2,
.print-wrap .metric-card.metric-comp p,
.print-wrap td.hours-comp{color:#b71f32}
.print-wrap .metric-card.metric-vacation h2,
.print-wrap .metric-card.metric-vacation p,
.print-wrap td.hours-vacation{color:#9a6500}
.print-wrap td.hours-overtime{background:#e7f7ed;border-left-color:#2f9e58}
.print-wrap td.hours-comp{background:#fde9eb;border-left-color:#d53345}
.print-wrap td.hours-vacation{background:#fff4d6;border-left-color:#d99a00}
.signature{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:50px}
.signbox{border-top:1px solid #111;padding-top:8px}

@media print{
    .scene-shell,.topbar,.sidebar,.noprint{display:none!important}
    .layout{display:block;margin:0;padding:0}
    .content{padding:0}
    body{background:#fff;color:#111}
    .print-wrap{box-shadow:none;margin:0;padding:0}
    @page{size:A4;margin:8mm}
    .lohn-print{
        width:100%;
        max-width:none;
        font-size:13.5px;
        line-height:1.38;
    }
    .lohn-print .print-title{
        padding-bottom:14px;
        margin-bottom:14px;
    }
    .lohn-print .print-title h1{
        font-size:30px;
        margin:0 0 10px;
    }
    .lohn-print .print-logo{
        max-width:175px;
        margin-bottom:8px;
    }
    .lohn-print p{
        margin:0 0 10px;
    }
    .lohn-print table{
        margin-bottom:13px;
        box-shadow:none;
        page-break-inside:avoid;
    }
    .lohn-print th,
    .lohn-print td{
        padding:8px 9px;
        line-height:1.3;
        color:#111!important;
        background:#fff;
    }
    .lohn-print th{
        background:#e9e9e9!important;
    }
    .lohn-print .print-grid2{
        gap:13px;
        page-break-inside:avoid;
    }
}

@media(max-width:1100px){
    .layout{grid-template-columns:1fr}
    .sidebar{
        display:grid;
        grid-template-columns:repeat(auto-fit, minmax(170px, 1fr));
        gap:10px;
    }
    .sidebar a{margin-bottom:0}
    .page-intro,
    .login-stage{grid-template-columns:1fr}
}

@media(max-width:760px){
    .app-frame{
        padding-top:10px;
    }
    body.is-auth .app-frame{
        padding-top:10px;
    }
    .topbar{
        width:calc(100% - 20px);
        margin:0 auto;
        padding:16px 18px;
        flex-direction:column;
        align-items:flex-start;
    }
    .layout{padding:0 14px 28px}
    .content.full{max-width:100%}
    .grid2,.grid3,.grid4,.photo-upload-grid{grid-template-columns:1fr}
    .boxhead{
        flex-direction:column;
        align-items:stretch;
    }
    .userbox{
        width:100%;
        justify-content:space-between;
        flex-wrap:wrap;
    }
    .table-actions{min-width:180px}
    table{
        display:block;
        overflow:auto;
        white-space:nowrap;
    }
    h1{font-size:clamp(2rem, 11vw, 3.2rem)}
}