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

:root{
--panel:rgba(8,15,34,0.82);
--panel-strong:#0e1a36;
--line:rgba(116,173,255,0.18);
--text:#eef4ff;
--muted:#94a3b8;
--accent:#65e4ff;
--accent-strong:#3aa7ff;
--success:#86efac;
--danger:#fda4af;
--warning:#fcd34d;
--shadow:0 24px 60px rgba(0,0,0,0.45);
}
*{box-sizing:border-box;}
body{
margin:0;
min-height:100vh;
font-family:"Manrope","Trebuchet MS",Arial,sans-serif;
background:
radial-gradient(circle at top left, rgba(58,167,255,0.24), transparent 28%),
radial-gradient(circle at right center, rgba(236,72,153,0.12), transparent 25%),
radial-gradient(circle at bottom right, rgba(101,228,255,0.12), transparent 24%),
linear-gradient(135deg, #020617 0%, #050816 52%, #0b1120 100%);
color:var(--text);
overflow:hidden;
}
.hidden{display:none !important;}
.mobile-menu-btn{
display:none;
margin-bottom:18px;
padding:12px 16px;
border:none;
border-radius:14px;
background:linear-gradient(135deg, #132238, #2d4b73);
color:#ffffff;
font-weight:700;
box-shadow:0 16px 28px rgba(19,34,56,0.18);
}
.urgent-banner{
margin-bottom:18px;
padding:14px 18px;
border-radius:18px;
background:linear-gradient(135deg, rgba(185,28,28,0.92), rgba(239,68,68,0.9));
color:#fff7f7;
box-shadow:0 18px 34px rgba(220,38,38,0.2);
}
.modal-overlay{
position:fixed;
inset:0;
z-index:80;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:rgba(2,6,23,0.58);
backdrop-filter:blur(6px);
}
.modal-card{
width:min(100%, 520px);
padding:28px;
border-radius:26px;
background:linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,228,0.94));
box-shadow:0 26px 48px rgba(19,34,56,0.24);
}
.modal-card input{
margin-bottom:10px;
}
.modal-card .primary-btn{
margin-top:18px;
}
.presence-choice-grid{
display:grid;
grid-template-columns:repeat(3, minmax(0, 1fr));
gap:12px;
margin-top:18px;
}
.presence-choice-grid .primary-btn,
.presence-choice-grid .secondary-btn{
margin-top:0;
width:100%;
}
.neutral-choice-btn{
background:rgba(148,163,184,0.14);
color:#0f172a;
border:1px solid rgba(148,163,184,0.24);
box-shadow:none;
}
.neutral-choice-btn:hover{
background:rgba(148,163,184,0.22);
box-shadow:none;
transform:none;
}
.view-toggle-row{
display:flex;
gap:12px;
flex-wrap:wrap;
margin-top:18px;
}
.view-toggle-btn{margin-top:0;}
.active-view-btn{
background:linear-gradient(135deg, #132238, #2d4b73);
color:#ffffff;
box-shadow:0 18px 30px rgba(19,34,56,0.22);
}
.planning-calendar-summary{
display:flex;
flex-wrap:wrap;
gap:12px;
margin-top:20px;
}
.planning-summary-chip{
min-width:140px;
padding:12px 14px;
border-radius:18px;
background:rgba(255,255,255,0.88);
border:1px solid rgba(212,175,55,0.16);
box-shadow:0 12px 24px rgba(156,122,35,0.08);
}
.planning-summary-chip strong{display:block;margin-bottom:4px;color:#132238;}
.planning-summary-chip span{font-size:13px;color:#5b6b81;}
.checkbox-row{
display:flex;
align-items:center;
gap:10px;
margin:12px 0 0;
color:#132238;
font-weight:600;
}
.checkbox-row input{width:auto;margin:0;}
.login-screen{
min-height:100vh;
display:flex;
align-items:center;
justify-content:center;
padding:24px;
background:
radial-gradient(circle at top left, rgba(58,167,255,0.2), transparent 24%),
radial-gradient(circle at right center, rgba(101,228,255,0.08), transparent 18%),
linear-gradient(135deg, #020617 0%, #050816 52%, #0b1120 100%);
}
.login-card{
width:min(100%, 470px);
padding:34px;
border:1px solid var(--line);
border-radius:30px;
background:linear-gradient(180deg, rgba(5,12,28,0.96), rgba(8,15,34,0.92));
box-shadow:var(--shadow);
backdrop-filter:blur(14px);
}
.login-card h1{margin:0 0 12px;font-size:44px;line-height:1.02;}
.login-card label{
color:#d8e7ff;
}
.login-card input{
background:rgba(6,14,30,0.9);
border:1px solid rgba(101,228,255,0.14);
color:#eef4ff;
}
.login-card input::placeholder{
color:#7f93af;
}
.login-card input:focus{
border-color:rgba(101,228,255,0.34);
box-shadow:0 0 0 4px rgba(101,228,255,0.1);
}
.login-card .primary-btn{
background:linear-gradient(135deg, #3aa7ff, #65e4ff);
color:#04111f;
border:1px solid rgba(101,228,255,0.18);
box-shadow:0 14px 28px rgba(58,167,255,0.22);
}
.login-card .primary-btn:hover{
background:linear-gradient(135deg, #58b7ff, #8cecff);
box-shadow:0 18px 34px rgba(58,167,255,0.3);
}
.app-shell{
height:100vh;
display:flex;
overflow:hidden;
}
.sidebar{
width:300px;
height:100vh;
padding:28px 22px;
display:flex;
flex-direction:column;
justify-content:space-between;
background:rgba(4,9,24,0.94);
border-right:1px solid var(--line);
box-shadow:var(--shadow);
backdrop-filter:blur(12px);
overflow-y:auto;
flex-shrink:0;
}
.brand,.info-panel{
padding:18px;
border:1px solid var(--line);
border-radius:22px;
background:linear-gradient(180deg, rgba(101,228,255,0.12), rgba(255,255,255,0.02));
}
.planning .info-panel + .info-panel,
#planning .info-panel + .info-panel{
margin-top:18px;
}
#staff .info-panel + .info-panel{
margin-top:18px;
}
.staff-side-stack{
display:grid;
gap:24px;
align-content:start;
}
.announcement-side-stack{
display:grid;
gap:24px;
align-content:start;
}
.presence-side-stack{
display:grid;
gap:18px;
align-content:start;
}
.staff-side-stack .info-panel + .info-panel{
margin-top:0;
}
.announcement-side-stack .info-panel + .info-panel{
margin-top:0;
}
.eyebrow{
margin:0 0 8px;
font-size:12px;
letter-spacing:0.18em;
text-transform:uppercase;
color:var(--accent);
}
.brand{
padding:0 0 18px;
border:none;
border-radius:0;
background:transparent;
box-shadow:none;
}
.brand h2{
margin:0;
font-size:30px;
line-height:1.1;
letter-spacing:0.01em;
}
.welcome-inline{
display:flex;
align-items:center;
gap:8px;
margin-top:10px;
color:var(--muted);
font-weight:600;
}
.section-text,.info-panel p,.doc-card p,.mini-card p{
margin:10px 0 0;
color:var(--muted);
line-height:1.6;
}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:28px;}
.nav-btn{
width:100%;
padding:11px 14px;
border:1px solid transparent;
border-radius:14px;
background:transparent;
color:var(--text);
text-align:left;
font-size:14px;
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
cursor:pointer;
transition:transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.nav-badge{
min-width:28px;
padding:4px 8px;
border-radius:999px;
background:rgba(58,167,255,0.18);
border:1px solid rgba(58,167,255,0.34);
color:var(--text);
font-size:12px;
font-weight:700;
text-align:center;
}
.nav-btn:hover,.nav-btn.active{
background:linear-gradient(90deg, rgba(58,167,255,0.2), rgba(101,228,255,0.08));
border-color:var(--line);
box-shadow:0 12px 30px rgba(58,167,255,0.16);
transform:translateX(4px);
}
.logout-btn,.primary-btn,.danger-btn,.secondary-btn{
padding:13px 18px;
border:none;
border-radius:14px;
font-size:15px;
font-weight:700;
cursor:pointer;
transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.logout-btn{background:linear-gradient(135deg, var(--accent), var(--accent-strong));color:#04111f;}
.primary-btn{
background:linear-gradient(135deg, #b68a2f, #f2d27a);
color:#231604;
border:1px solid rgba(144,102,16,0.14);
box-shadow:0 14px 28px rgba(182,138,47,0.18);
}
.secondary-btn{
background:linear-gradient(135deg, #b68a2f, #f2d27a);
color:#231604;
margin-top:10px;
border:1px solid rgba(144,102,16,0.14);
box-shadow:0 14px 28px rgba(182,138,47,0.18);
}
.danger-btn{
background:linear-gradient(135deg, #dc2626, #ef4444);
color:#fff7f7;
border:1px solid rgba(185,28,28,0.3);
box-shadow:0 14px 28px rgba(220,38,38,0.18);
}
.logout-btn:hover{transform:translateY(-2px);box-shadow:0 16px 30px rgba(58,167,255,0.18);}
.primary-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 34px rgba(182,138,47,0.28);
background:linear-gradient(135deg, #c89a3d, #f7dfa0);
}
.danger-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 34px rgba(220,38,38,0.24);
background:linear-gradient(135deg, #b91c1c, #ef4444);
}
.secondary-btn:hover{
transform:translateY(-2px);
box-shadow:0 18px 34px rgba(182,138,47,0.28);
background:linear-gradient(135deg, #c89a3d, #f7dfa0);
}
.login-btn{margin-top:20px;width:100%;}
#staffSubmitBtn{
margin-top:22px;
}
.sidebar-bottom{
display:flex;
flex-direction:column;
gap:14px;
margin-top:24px;
}
.theme-panel{
padding:14px;
border:1px solid var(--line);
border-radius:18px;
background:linear-gradient(180deg, rgba(101,228,255,0.08), rgba(255,255,255,0.02));
}
.theme-label{
display:block;
margin:0 0 8px;
color:var(--muted);
font-size:14px;
}
.theme-toggle{
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.theme-icon-btn{
padding:12px 0;
border:1px solid rgba(101,228,255,0.18);
border-radius:14px;
background:rgba(8,15,34,0.72);
color:var(--text);
font-size:20px;
cursor:pointer;
transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.theme-icon-btn:hover{
transform:translateY(-2px);
box-shadow:0 12px 24px rgba(58,167,255,0.14);
}
.theme-icon-btn.active-theme{
border-color:rgba(101,228,255,0.36);
background:linear-gradient(135deg, rgba(58,167,255,0.24), rgba(101,228,255,0.16));
box-shadow:0 14px 28px rgba(58,167,255,0.18);
}
.password-panel{
margin-top:18px;
}
.welcome-wave{
font-size:18px;
line-height:1;
}
.content{
flex:1;
height:100vh;
padding:36px;
overflow-y:auto;
background:
radial-gradient(circle at top left, rgba(212,175,55,0.2), transparent 20%),
radial-gradient(circle at 85% 12%, rgba(255,228,160,0.22), transparent 18%),
radial-gradient(circle at bottom right, rgba(193,154,107,0.12), transparent 20%),
linear-gradient(135deg, #fffdf9 0%, #fff7eb 28%, #f9f2e3 62%, #fffaf3 100%);
color:#132238;
border-left:1px solid rgba(212,175,55,0.2);
border-top-left-radius:28px;
border-bottom-left-radius:28px;
position:relative;
}
.content::before{
content:"";
position:fixed;
top:24px;
right:34px;
bottom:24px;
left:334px;
pointer-events:none;
border-radius:30px;
background:
linear-gradient(145deg, rgba(255,255,255,0.42), rgba(255,255,255,0.06)),
repeating-linear-gradient(90deg, rgba(212,175,55,0.035) 0 1px, transparent 1px 28px);
opacity:0.7;
}
.page{display:none;animation:fade 0.35s ease;}
.hero{display:grid;gap:24px;}
.hero-copy h1,.page h1{margin:0 0 12px;font-size:clamp(32px, 5vw, 54px);line-height:1.05;color:#132238;letter-spacing:-0.03em;}
.dashboard-subtitle{margin:0 0 18px;font-size:28px;line-height:1.2;}
.lead{margin:0;max-width:720px;font-size:17px;line-height:1.6;color:#5b6b81;}
#dashboard .dashboard-subtitle,
#docs h1,
#docs .doc-toggle,
#docs .doc-card strong{
font-family:"Cormorant Garamond", Georgia, serif;
letter-spacing:0.01em;
color:#000000;
}
#dashboard .lead,
#dashboard .mini-info-card,
#dashboard .person-card p,
#dashboard .card-description-input,
#dashboard .mini-editor,
#docs .doc-section-body,
#docs .docs-editor,
#docs .section-text{
font-family:"Manrope","Trebuchet MS",Arial,sans-serif;
}
#docs .doc-toggle{
font-size:24px;
font-weight:700;
}
#docs .docs-editor{
font-size:15px;
line-height:1.75;
}
#dashboard .dashboard-subtitle{
font-size:38px;
font-weight:700;
}
#dashboard .mini-info-card strong,
#dashboard .person-card strong{
font-family:"Cormorant Garamond", Georgia, serif;
font-size:28px;
font-weight:700;
letter-spacing:0.01em;
color:#000000;
}
.stats-grid,.team-grid,.form-grid,.docs-grid,.filters-grid,.dashboard-info-grid,.staff-cards-grid,.dashboard-mini-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
gap:26px;
margin-top:24px;
}
.docs-accordion{
display:grid;
gap:16px;
margin-top:24px;
}
.dashboard-panel{
margin-top:26px;
}
.compact-dashboard{
padding:20px;
}
.dashboard-groups{
display:grid;
gap:18px;
margin-top:18px;
}
.dashboard-group{
display:grid;
gap:14px;
}
.dashboard-group-toggle{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border:1px solid rgba(212,175,55,0.24);
border-radius:24px;
background:
linear-gradient(180deg, rgba(255,255,255,0.98), rgba(255,247,228,0.94)),
linear-gradient(90deg, rgba(212,175,55,0.08), transparent 45%);
color:#132238;
font-size:18px;
font-weight:700;
cursor:pointer;
box-shadow:
0 20px 45px rgba(156,122,35,0.1),
inset 0 1px 0 rgba(255,255,255,0.75);
}
.bar-group{
border-color:rgba(212,175,55,0.28);
background:linear-gradient(180deg, rgba(255,248,230,0.98), rgba(255,239,196,0.92));
}
.security-group{
border-color:rgba(196,158,47,0.24);
background:linear-gradient(180deg, rgba(255,250,238,0.98), rgba(245,232,196,0.92));
}
.group-count{
padding:6px 10px;
border-radius:999px;
background:linear-gradient(180deg, rgba(255,248,229,0.95), rgba(250,232,177,0.75));
color:#9c7a23;
font-size:12px;
letter-spacing:0.06em;
text-transform:uppercase;
border:1px solid rgba(212,175,55,0.16);
}
.dashboard-group-body{
display:grid;
gap:18px;
}
.dashboard-mini-grid{
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
gap:16px;
}
.hierarchy-card-grid{
grid-template-columns:repeat(auto-fit, minmax(145px, 170px));
gap:12px;
margin-top:0;
}
.extra-staff-grid{
margin-top:0;
}
.dynamic-person-card{
cursor:default;
}
.dynamic-person-card:hover{
transform:none;
}
.hierarchy-person-card{
padding:10px;
border-radius:18px;
cursor:pointer;
transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.hierarchy-person-card:hover,
.active-person-card{
transform:translateY(-3px);
border-color:rgba(212,175,55,0.32);
box-shadow:
0 26px 48px rgba(156,122,35,0.16),
0 8px 20px rgba(255,255,255,0.55) inset;
}
.hierarchy-photo{
aspect-ratio:4/3;
border-radius:12px;
margin-bottom:8px;
box-shadow:0 10px 18px rgba(95,73,27,0.1);
}
.hierarchy-person-card strong{
font-size:15px;
margin-bottom:5px;
line-height:1.2;
}
.hierarchy-person-card .dept-badge{
padding:4px 7px;
font-size:9px;
letter-spacing:0.04em;
}
.hierarchy-person-card p{
margin-top:8px;
font-size:11px;
line-height:1.35;
}
.card-editor{
display:grid;
gap:8px;
margin-top:12px;
}
.card-description-input{
width:100%;
min-height:82px;
padding:10px 12px;
border:1px solid rgba(212,175,55,0.2);
border-radius:14px;
background:rgba(255,251,244,0.94);
color:#132238;
font-size:13px;
line-height:1.45;
resize:vertical;
outline:none;
}
.mini-card-btn{
width:100%;
margin-top:0;
padding:9px 12px;
font-size:12px;
}
.staff-detail-panel{
margin-top:2px;
}
.tiny-staff-grid{
grid-template-columns:repeat(auto-fit, minmax(110px, 120px));
gap:10px;
}
.tiny-person-card{
padding:10px;
border-radius:16px;
cursor:pointer;
transition:transform 0.2s ease, border-color 0.2s ease;
}
.tiny-person-card:hover,
.active-person-card{
transform:translateY(-2px);
border-color:rgba(101,228,255,0.35);
}
.tiny-photo{
margin-bottom:8px;
border-radius:12px;
}
.person-card,
.mini-info-card{
padding:16px;
border:1px solid var(--line);
border-radius:24px;
background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,248,235,0.88));
box-shadow:
0 18px 38px rgba(156,122,35,0.08),
inset 0 1px 0 rgba(255,255,255,0.75);
}
.person-photo{
width:100%;
aspect-ratio:1/1;
object-fit:cover;
border-radius:16px;
margin-bottom:12px;
border:1px solid rgba(255,255,255,0.08);
}
.person-card strong,
.mini-info-card strong{
display:block;
font-size:18px;
margin-bottom:8px;
color:#132238;
}
.tiny-person-card strong{
font-size:14px;
margin-bottom:4px;
line-height:1.2;
}
.tiny-person-card .dept-badge{
padding:4px 8px;
font-size:10px;
letter-spacing:0.05em;
}
.person-card p,
.mini-info-card p{
margin:8px 0 0;
color:#5b6b81;
line-height:1.6;
font-size:14px;
}
.person-detail-panel{
margin-top:18px;
}
.editable-card{
display:flex;
flex-direction:column;
}
.mini-editor{
width:100%;
min-height:110px;
margin-top:8px;
padding:12px 14px;
border:1px solid rgba(212,175,55,0.2);
border-radius:14px;
background:rgba(255,252,247,0.95);
color:#132238;
font-size:14px;
line-height:1.5;
resize:vertical;
outline:none;
}
.mini-editor:focus{
border-color:rgba(212,175,55,0.42);
box-shadow:0 0 0 4px rgba(212,175,55,0.12);
}
.save-section-btn{
margin-top:12px;
width:100%;
}
.photo-btn{
width:100%;
margin-top:10px;
padding:8px 10px;
font-size:12px;
}
.compact-grid{margin-top:0;margin-bottom:18px;}
.secondary-stats{margin-top:0;}
.secondary-stats{
margin-top:26px;
}
.card,.team-card,.staff-item,.info-panel,.doc-card,.hierarchy-item,.pointage-item{
border:1px solid var(--line);
border-radius:26px;
background:linear-gradient(180deg, rgba(255,255,255,0.88), rgba(255,248,235,0.84));
box-shadow:
0 24px 50px rgba(156,122,35,0.1),
inset 0 1px 0 rgba(255,255,255,0.8);
backdrop-filter:blur(10px);
}
.card{padding:24px;}
.doc-card,.team-card,.hierarchy-item{padding:20px;}
.doc-accordion-item{
padding:0;
overflow:hidden;
}
.doc-toggle{
width:100%;
display:flex;
align-items:center;
justify-content:space-between;
padding:18px 20px;
border:none;
background:transparent;
color:#132238;
font-size:17px;
font-weight:700;
cursor:pointer;
text-align:left;
}
.doc-toggle-icon{
font-size:22px;
line-height:1;
color:#d4af37;
}
.doc-section-body{
padding:0 20px 20px;
}
.docs-editor{
min-height:190px;
}
.docs-save-btn{
margin-top:14px;
}
.stat-card strong,.team-card strong,.doc-card strong,.mini-card strong{display:block;margin:10px 0 8px;font-size:24px;color:#132238;}
.stat-card p,.team-card p{margin:0;color:#5b6b81;line-height:1.5;}
.stat-label,.team-role,.dept-badge,.status-badge{
display:inline-block;
padding:6px 10px;
border-radius:999px;
background:rgba(212,175,55,0.12);
color:#9c7a23;
font-size:12px;
letter-spacing:0.08em;
text-transform:uppercase;
}
.status-badge.retard{background:rgba(252,211,77,0.14);color:var(--warning);}
.status-badge.absent{background:rgba(253,164,175,0.14);color:var(--danger);}
.status-badge.fin-service{background:rgba(148,163,184,0.18);color:#dbeafe;}
.status-badge.en-service{background:rgba(134,239,172,0.14);color:var(--success);}
label{display:block;margin:18px 0 8px;color:#31435d;font-size:14px;}
input,select{
width:100%;
padding:14px 16px;
border:1px solid rgba(212,175,55,0.2);
border-radius:14px;
background:rgba(255,251,244,0.95);
color:#132238;
font-size:15px;
outline:none;
transition:border-color 0.2s ease, box-shadow 0.2s ease;
}
input:focus,select:focus{border-color:rgba(212,175,55,0.42);box-shadow:0 0 0 4px rgba(212,175,55,0.12);}
.theme-panel .theme-label{
margin:0 0 8px;
color:var(--muted);
}
.save-msg,.status-msg{min-height:24px;margin-top:14px;font-weight:600;}
.save-msg{color:var(--success);}
.status-msg.error{color:var(--danger);}
.status-msg.success{color:var(--success);}
.info-box{margin-top:18px;padding:14px 16px;border-radius:16px;background:rgba(212,175,55,0.08);color:#6a5a33;}
.pointages-list,.staff-list,.hierarchy-list{display:grid;gap:14px;margin-top:22px;}
.pointage-item,.staff-item{padding:18px;border-radius:20px;background:linear-gradient(180deg, rgba(255,255,255,0.9), rgba(255,248,235,0.86));}
.pointage-item strong,.staff-item strong{display:block;font-size:18px;margin:10px 0 8px;color:#132238;}
.pointage-meta,.staff-meta{color:#5b6b81;line-height:1.6;}
.staff-actions{margin-top:14px;display:flex;gap:10px;flex-wrap:wrap;}
.pointage-summary-card{cursor:pointer;transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;}
.pointage-summary-card:hover{transform:translateY(-2px);box-shadow:0 18px 34px rgba(156,122,35,0.14);}
.pointage-summary-card.active-pointage{border-color:rgba(212,175,55,0.45);box-shadow:0 22px 42px rgba(212,175,55,0.18);}
.pointage-summary-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.pointage-total-badge{display:inline-block;padding:7px 12px;border-radius:999px;background:rgba(19,34,56,0.08);color:#132238;font-size:12px;font-weight:700;letter-spacing:0.06em;text-transform:uppercase;}
.pointage-person-detail{margin-top:18px;padding:20px;border:1px solid var(--line);border-radius:24px;background:linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,248,235,0.9));box-shadow:0 24px 50px rgba(156,122,35,0.1);}
.pointage-person-detail h2{margin:6px 0 8px;color:#132238;}
.pointage-person-detail p{margin:0;color:#5b6b81;}
.pointage-detail-list{display:grid;gap:12px;margin-top:18px;}
.pointage-detail-item{padding:16px;border-radius:18px;background:rgba(255,255,255,0.82);border:1px solid rgba(212,175,55,0.14);}
.pointage-detail-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px;}
.dashboard-top-grid{margin-top:0;}
.dashboard-spotlight-grid{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}
.spotlight-card{position:relative;overflow:hidden;}
.spotlight-card::after{
content:"";
position:absolute;
inset:auto -30px -30px auto;
width:120px;
height:120px;
background:radial-gradient(circle, rgba(212,175,55,0.16), transparent 70%);
pointer-events:none;
}
.dashboard-mini-title{margin:0 0 12px;font-size:24px;color:#132238;}
.dashboard-alert-list,.dashboard-last-pointage,.dashboard-announcement-preview{display:grid;gap:10px;}
.material-grid{
display:grid;
grid-template-columns:repeat(auto-fit, minmax(160px, 1fr));
gap:10px 16px;
margin-top:12px;
}
.checklist-board h3{
margin:16px 0 10px;
font-size:16px;
color:#132238;
}
.checklist-row{
display:grid;
grid-template-columns:minmax(0, 1fr) 220px auto;
gap:10px;
align-items:center;
margin-top:10px;
}
.live-status-item strong{margin-bottom:6px;}
.contact-grid{align-items:start;}
.dashboard-alert-item{
padding:12px 14px;
border-radius:14px;
background:rgba(212,175,55,0.08);
color:#5b6b81;
}
.dashboard-shortcuts{
display:grid;
grid-template-columns:repeat(2, minmax(0, 1fr));
gap:10px;
}
.dashboard-ops-grid{
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.shortcut-btn{
width:100%;
margin-top:0;
}
.planning-list,.announcement-list,.logs-list{
display:grid;
gap:14px;
margin-top:22px;
}
.notification-item .staff-actions,
.training-item .staff-actions{
margin-top:14px;
}
.request-item-header{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:16px;
margin-bottom:10px;
}
.request-status-badge{
white-space:nowrap;
}
.request-review-box{
margin-top:14px;
display:grid;
gap:10px;
}
.request-review-box .mini-editor{
min-height:90px;
}
.notification-item.unread-item,
.training-item.unread-item{
border-color:rgba(182,138,47,0.38);
box-shadow:0 18px 34px rgba(182,138,47,0.1);
}
.notification-target{
font-size:13px;
color:var(--muted);
}
.logs-toolbar{
margin-top:18px;
margin-bottom:8px;
}
.announcement-meta-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:12px;
}
.announcement-pill{
display:inline-flex;
align-items:center;
gap:6px;
padding:8px 12px;
border-radius:999px;
background:rgba(255,255,255,0.72);
border:1px solid rgba(212,175,55,0.16);
font-size:13px;
font-weight:700;
color:#132238;
}
.announcement-pill.unread{
background:rgba(254,242,242,0.92);
border-color:rgba(220,38,38,0.18);
color:#991b1b;
}
.announcement-pill.read{
background:rgba(236,253,245,0.94);
border-color:rgba(16,185,129,0.16);
color:#166534;
}
.announcement-pill.ack{
background:rgba(239,246,255,0.9);
border-color:rgba(58,167,255,0.18);
color:#1d4ed8;
}
.announcement-read-list{
margin-top:10px;
color:#5b6b81;
font-size:14px;
line-height:1.6;
}
.announcement-card-actions,
.rules-actions{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-top:14px;
}
.announcement-card-actions .secondary-btn,
.announcement-card-actions .primary-btn,
.announcement-card-actions .danger-btn,
.rules-actions .secondary-btn{
margin-top:0;
}
.urgent-banner .secondary-btn{
margin-top:0;
margin-left:10px;
vertical-align:middle;
}
.dept-theme-bar,
.planning-summary-chip.dept-theme-bar{
border-color:rgba(212,175,55,0.22);
background:linear-gradient(180deg, rgba(255,248,230,0.98), rgba(255,239,196,0.92));
}
.dept-theme-security,
.planning-summary-chip.dept-theme-security{
border-color:rgba(196,158,47,0.24);
background:linear-gradient(180deg, rgba(255,250,238,0.98), rgba(245,232,196,0.92));
}
.dept-theme-dj,
.planning-summary-chip.dept-theme-dj{
border-color:rgba(88,99,173,0.24);
background:linear-gradient(180deg, rgba(241,244,255,0.98), rgba(224,230,255,0.92));
}
.dept-theme-dance,
.planning-summary-chip.dept-theme-dance{
border-color:rgba(210,113,163,0.22);
background:linear-gradient(180deg, rgba(255,244,249,0.98), rgba(255,228,239,0.92));
}
.planning-item,.announcement-item{
animation:fade 0.25s ease;
}
.priority-urgent{
border-color:rgba(220,38,38,0.18);
}
.priority-important{
border-color:rgba(212,175,55,0.24);
}
.pointage-summary-grid{
grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
margin-top:18px;
}
.presence-summary-grid{
grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
margin-top:22px;
}
.presence-item{
border-left:4px solid rgba(212,175,55,0.24);
}
.presence-item.present{
border-left-color:rgba(16,185,129,0.58);
}
.presence-item.absent{
border-left-color:rgba(220,38,38,0.5);
}
.presence-item.pending{
border-left-color:rgba(245,158,11,0.48);
}
.presence-badge-row{
display:flex;
flex-wrap:wrap;
gap:10px;
margin-bottom:10px;
}
.presence-status-badge{
display:inline-flex;
align-items:center;
padding:6px 10px;
border-radius:999px;
font-size:12px;
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
}
.presence-status-badge.present{
background:rgba(236,253,245,0.94);
color:#166534;
border:1px solid rgba(16,185,129,0.16);
}
.presence-status-badge.absent{
background:rgba(254,242,242,0.94);
color:#991b1b;
border:1px solid rgba(220,38,38,0.16);
}
.presence-status-badge.pending{
background:rgba(255,251,235,0.96);
color:#92400e;
border:1px solid rgba(245,158,11,0.16);
}
.pointage-total-panel p{
margin-top:10px;
font-size:28px;
font-weight:700;
color:#132238;
}
.archive-grid{
grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.archive-panel{
display:flex;
flex-direction:column;
gap:14px;
}
.archive-list{
display:grid;
gap:10px;
margin-top:4px;
}
.archive-item{
padding:12px 14px;
border-radius:14px;
background:rgba(255,255,255,0.56);
border:1px solid rgba(212,175,55,0.12);
color:#5b6b81;
}
.archive-item strong{
display:block;
margin-bottom:4px;
color:#132238;
}

body[data-theme="dark"] .content{
background:
radial-gradient(circle at top left, rgba(58,167,255,0.18), transparent 24%),
radial-gradient(circle at 85% 12%, rgba(236,72,153,0.1), transparent 18%),
radial-gradient(circle at bottom right, rgba(101,228,255,0.1), transparent 20%),
linear-gradient(135deg, #020617 0%, #050816 52%, #0b1120 100%);
color:var(--text);
border-left:1px solid rgba(116,173,255,0.18);
}
body[data-theme="dark"] .content::before{
background:
linear-gradient(145deg, rgba(15,23,42,0.56), rgba(255,255,255,0.02)),
repeating-linear-gradient(90deg, rgba(101,228,255,0.03) 0 1px, transparent 1px 28px);
opacity:0.85;
}
body[data-theme="dark"] .hero-copy h1,
body[data-theme="dark"] .page h1,
body[data-theme="dark"] .dashboard-subtitle,
body[data-theme="dark"] #dashboard .dashboard-subtitle,
body[data-theme="dark"] #docs h1,
body[data-theme="dark"] #docs .doc-toggle,
body[data-theme="dark"] #docs .doc-card strong,
body[data-theme="dark"] #dashboard .mini-info-card strong,
body[data-theme="dark"] #dashboard .person-card strong,
body[data-theme="dark"] .pointage-item strong,
body[data-theme="dark"] .staff-item strong,
body[data-theme="dark"] .pointage-person-detail h2{
color:#eef4ff;
}
body[data-theme="dark"] .lead,
body[data-theme="dark"] .pointage-meta,
body[data-theme="dark"] .staff-meta,
body[data-theme="dark"] .section-text,
body[data-theme="dark"] .info-panel p,
body[data-theme="dark"] .doc-card p,
body[data-theme="dark"] .mini-card p,
body[data-theme="dark"] .person-card p,
body[data-theme="dark"] .mini-info-card p,
body[data-theme="dark"] .pointage-person-detail p{
color:#94a3b8;
}
body[data-theme="dark"] .card,
body[data-theme="dark"] .team-card,
body[data-theme="dark"] .staff-item,
body[data-theme="dark"] .info-panel,
body[data-theme="dark"] .doc-card,
body[data-theme="dark"] .hierarchy-item,
body[data-theme="dark"] .pointage-item,
body[data-theme="dark"] .person-card,
body[data-theme="dark"] .mini-info-card,
body[data-theme="dark"] .pointage-person-detail,
body[data-theme="dark"] .pointage-detail-item{
border-color:rgba(116,173,255,0.18);
background:linear-gradient(180deg, rgba(8,15,34,0.88), rgba(14,26,54,0.84));
box-shadow:
0 24px 50px rgba(0,0,0,0.28),
inset 0 1px 0 rgba(255,255,255,0.04);
}
body[data-theme="dark"] .dashboard-group-toggle{
border-color:rgba(101,228,255,0.16);
background:linear-gradient(180deg, rgba(8,15,34,0.92), rgba(14,26,54,0.86));
color:#eef4ff;
box-shadow:0 20px 45px rgba(0,0,0,0.24);
}
body[data-theme="dark"] .group-count,
body[data-theme="dark"] .pointage-total-badge{
background:rgba(101,228,255,0.12);
color:#86e7ff;
border-color:rgba(101,228,255,0.14);
}
body[data-theme="dark"] .doc-toggle{
color:#eef4ff;
}
body[data-theme="dark"] label{
color:#c9d6ea;
}
body[data-theme="dark"] input,
body[data-theme="dark"] select,
body[data-theme="dark"] .mini-editor,
body[data-theme="dark"] .card-description-input{
border-color:rgba(101,228,255,0.14);
background:rgba(6,14,30,0.88);
color:#eef4ff;
}
body[data-theme="dark"] input:focus,
body[data-theme="dark"] select:focus,
body[data-theme="dark"] .mini-editor:focus,
body[data-theme="dark"] .card-description-input:focus{
border-color:rgba(101,228,255,0.34);
box-shadow:0 0 0 4px rgba(101,228,255,0.1);
}
body[data-theme="dark"] .info-box{
background:rgba(101,228,255,0.08);
color:#d5ebff;
}
body[data-theme="dark"] .dashboard-mini-title,
body[data-theme="dark"] .pointage-total-panel p,
body[data-theme="dark"] .archive-item strong{
color:#eef4ff;
}
body[data-theme="dark"] .dashboard-alert-item,
body[data-theme="dark"] .archive-item{
background:rgba(101,228,255,0.06);
color:#c9d6ea;
border-color:rgba(101,228,255,0.12);
}
body[data-theme="dark"] .announcement-pill{
background:rgba(8,15,34,0.86);
border-color:rgba(116,173,255,0.18);
color:#e2e8f0;
}
body[data-theme="dark"] .announcement-pill.unread{
background:rgba(69,10,10,0.56);
border-color:rgba(248,113,113,0.2);
color:#fecaca;
}
body[data-theme="dark"] .announcement-pill.read{
background:rgba(6,78,59,0.45);
border-color:rgba(52,211,153,0.18);
color:#bbf7d0;
}
body[data-theme="dark"] .announcement-pill.ack{
background:rgba(30,41,59,0.86);
border-color:rgba(96,165,250,0.22);
color:#bfdbfe;
}
body[data-theme="dark"] .presence-status-badge.present{
background:rgba(6,78,59,0.45);
color:#bbf7d0;
border-color:rgba(52,211,153,0.18);
}
body[data-theme="dark"] .presence-status-badge.absent{
background:rgba(69,10,10,0.56);
color:#fecaca;
border-color:rgba(248,113,113,0.2);
}
body[data-theme="dark"] .presence-status-badge.pending{
background:rgba(120,53,15,0.45);
color:#fde68a;
border-color:rgba(251,191,36,0.18);
}
body[data-theme="dark"] .announcement-read-list{
color:#cbd5e1;
}
body[data-theme="dark"] .modal-card{
background:rgba(8,15,34,0.96);
color:var(--text);
}
body[data-theme="dark"] .neutral-choice-btn{
background:rgba(51,65,85,0.72);
color:#e2e8f0;
border-color:rgba(148,163,184,0.24);
}
body[data-theme="dark"] .neutral-choice-btn:hover{
background:rgba(71,85,105,0.82);
}
body[data-theme="dark"] .urgent-banner{
background:linear-gradient(135deg, rgba(127,29,29,0.95), rgba(220,38,38,0.94));
}

@media (max-width: 760px){
.presence-choice-grid{
grid-template-columns:1fr;
}
}
body[data-theme="dark"] .checkbox-row{
color:var(--text);
}
@keyframes fade{
from{opacity:0;transform:translateY(8px);}
to{opacity:1;transform:translateY(0);}
}
@media (max-width: 900px){
.app-shell{flex-direction:column;}
.mobile-menu-btn{display:inline-flex;align-items:center;justify-content:center;}
.sidebar{
position:fixed;
top:0;
left:0;
z-index:70;
width:min(82vw, 320px);
height:100vh;
overflow:auto;
transform:translateX(-104%);
transition:transform 0.25s ease;
}
body.mobile-menu-open .sidebar{transform:translateX(0);}
.content{height:auto;padding:22px;overflow:visible;border-radius:0;}
.content::before{display:none;}
body{overflow:auto;}
.dashboard-shortcuts{grid-template-columns:1fr;}
.dashboard-mini-title{font-size:22px;}
.hero-copy h1,.page h1{font-size:34px;}
.stats-grid,.team-grid,.form-grid,.docs-grid,.filters-grid,.dashboard-info-grid,.staff-cards-grid,.dashboard-mini-grid{
grid-template-columns:1fr;
gap:18px;
}
.hierarchy-card-grid{
grid-template-columns:1fr 1fr;
}
}
@media (max-width: 640px){
.mobile-menu-btn{width:100%;}
.content{
padding:16px;
}
.card,
.pointage-person-detail{
padding:18px;
border-radius:22px;
}
.hierarchy-card-grid{
grid-template-columns:1fr;
}
.dashboard-group-toggle,
.doc-toggle{
padding:16px;
}
.pointage-summary-top,
.pointage-detail-head{
align-items:flex-start;
}
.checklist-row{
grid-template-columns:1fr;
}
}