/*
INSTRUCTIONS ---------------------------------------------------------------------------------
1. Add this stylesheet to the of your pages
2. Use the file name as data-dd-theme attribute on your datedropper elements
*/
div.datedropper.JYL {
--dd-color1: #007bff;
--dd-color2: #FFF;
--dd-color3: #4D4D4D;
--dd-color4: #FFF;
--dd-radius: 8px;
--dd-width: 198px;
--dd-shadow: 0 0 36px 0px rgba(0, 0, 0, 0.45);
}
#loading {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: fixed;
display: block;
opacity: 0.7;
background-color: #fff;
z-index: 99;
text-align: center;
}
#loading-image {
position: absolute;
top: 100px;
left: 240px;
z-index: 100;
}
/* ═══════════════════════════════════════════════════════════════════════════
Thème PWA – MobilePWA (TimeData)
═══════════════════════════════════════════════════════════════════════════ */
:root {
--pwa-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
--pwa-gradient-success: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
--pwa-gradient-warning: linear-gradient(135deg, #fbbf24 0%, #d97706 100%);
--pwa-gradient-danger: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
--pwa-gradient-primary: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
--pwa-gradient-muted: linear-gradient(135deg, #94a3b8 0%, #64748b 100%);
--pwa-bg: #eef0f8;
--pwa-card-radius: 15px;
--pwa-shadow: 0 8px 32px rgba(102, 126, 234, 0.18);
--pwa-shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.08);
--pwa-text-dark: #2d3748;
--pwa-text-muted: #718096;
}
body.pwa-page { background: var(--pwa-bg); min-height: 100vh; }
body.pwa-page h2 { color: var(--pwa-text-dark); font-size: 1.5rem; font-weight: 700; margin: 18px 0 12px; }
body.login-page { background: var(--pwa-bg); }
/* Hero */
.pwa-hero { background: var(--pwa-gradient); border-radius: var(--pwa-card-radius); box-shadow: var(--pwa-shadow); padding: 14px 20px; margin-bottom: 20px; color: #fff; }
.clock-text { font-size: clamp(1.2rem,5vw,2rem); font-weight:700; white-space:nowrap; margin:0; line-height:1.2; }
.pwa-hero .clock-text { color:#fff !important; }
/* Slot Clock */
.slot-clock-wrap { text-align: right; line-height: 1; }
.slot-date { color: rgba(255,255,255,.85); font-size: .8rem; letter-spacing: 2px; margin-bottom: 4px; text-transform: uppercase; }
.slot-clock { display: inline-flex; align-items: flex-start; font-size: 3rem; height: 3rem; overflow: hidden; color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
.s-unit { width: 1.85rem; overflow: hidden; height: 3rem; }
.s-unit > div { display: flex; flex-direction: column; transition: transform .6s cubic-bezier(.175, .885, .32, 1.275); }
.s-unit > div > span { display: block; height: 3rem; line-height: 3rem; text-align: center; }
.s-sep { height: 3rem; line-height: 2.7rem; padding: 0 2px; animation: s-blink 1s step-end infinite; color: rgba(255,255,255,.7); }
@keyframes s-blink { 50% { opacity: 0; } }
.pwa-hero hr { border-color:rgba(255,255,255,.3); margin:10px 0; }
.pwa-hero .navbar-toggler { border-color:rgba(255,255,255,.6); }
.pwa-hero .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255%2C255%2C255%2C0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
}
.pwa-hero .nav-menu-item { color:#fff !important; border-radius:12px; transition:background .15s; display:flex; flex-direction:column; align-items:center; padding:6px 10px; font-size:.8rem; text-decoration:none; }
.pwa-hero .nav-menu-item span { color:#fff !important; }
.pwa-hero .nav-menu-item:hover { background:rgba(255,255,255,.18); color:#fff !important; }
.pwa-hero .nav-menu-item img { filter:brightness(0) invert(1); }
/* Carte employé */
.pwa-user-card { background:#fff; border-radius:var(--pwa-card-radius); box-shadow:var(--pwa-shadow-sm); border:none; overflow:hidden; cursor:pointer; position:relative; transition:transform .12s ease,box-shadow .15s ease; }
.pwa-user-card:hover { transform:translateY(-4px); box-shadow:var(--pwa-shadow); }
.pwa-user-card:active { transform:scale(.97); }
.pwa-user-card-body { padding:20px 14px 14px; display:flex; flex-direction:column; align-items:center; }
.pwa-user-card-body img { width:72px; height:72px; border-radius:50%; object-fit:cover; box-shadow:0 3px 10px rgba(0,0,0,.15); margin-bottom:10px; }
.pwa-user-name { font-size:1rem; font-weight:700; color:var(--pwa-text-dark); line-height:1.2; margin:0; text-align:center; }
.pwa-user-footer { padding:9px 12px; background:#f8f9fa; border-top:1px solid #f0f2f5; display:flex; align-items:center; justify-content:center; }
.pwa-status-badge { font-size:.75rem; font-weight:700; padding:4px 14px; border-radius:50px; letter-spacing:.03em; white-space:nowrap; }
/* Carte profil */
.pwa-profile-card { background:#fff; border-radius:var(--pwa-card-radius); box-shadow:var(--pwa-shadow-sm); overflow:hidden; margin-bottom:20px; }
.pwa-profile-strip { height:5px; width:100%; }
/* Carte action */
.pwa-action-card { position:relative; background:#fff; border-radius:var(--pwa-card-radius); box-shadow:var(--pwa-shadow-sm); border:none; overflow:hidden; display:flex; flex-direction:column; transition:transform .1s ease,box-shadow .15s ease; }
.pwa-action-card:hover { transform:translateY(-3px); box-shadow:var(--pwa-shadow); }
.pwa-action-card:active { transform:scale(.97); }
.pwa-action-card .card-header { font-weight:700; font-size:.92rem; padding:13px 12px; border:none; text-align:center; }
.pwa-action-card .card-body { flex:1 1 auto; display:flex; align-items:center; justify-content:center; padding:18px 12px; }
.pwa-action-card.gh-success .card-header { background:#bbf7d0; color:#166534; }
.pwa-action-card.gh-warning .card-header { background:#fde68a; color:#92400e; }
.pwa-action-card.gh-primary .card-header { background:#bfdbfe; color:#1e3a8a; }
.pwa-action-card.gh-purple .card-header { background:#ddd6fe; color:#4c1d95; }
.pwa-action-card.gh-muted .card-header { background:#e2e8f0; color:#475569; }
.pwa-action-card.gh-success .card-body { background:var(--pwa-gradient-success); }
.pwa-action-card.gh-warning .card-body { background:var(--pwa-gradient-warning); }
.pwa-action-card.gh-primary .card-body { background:var(--pwa-gradient-primary); }
.pwa-action-card.gh-purple .card-body { background:var(--pwa-gradient); }
.pwa-action-card.gh-muted .card-body { background:var(--pwa-gradient-muted); }
.pwa-action-card .card-header.gh-success { background:var(--pwa-gradient-success); color:#fff; }
.pwa-action-card .card-header.gh-warning { background:var(--pwa-gradient-warning); color:#fff; }
.pwa-action-card .card-header.gh-danger { background:var(--pwa-gradient-danger); color:#fff; }
.pwa-action-card .card-header.gh-primary { background:var(--pwa-gradient-primary); color:#fff; }
.pwa-action-card .card-header.gh-purple { background:var(--pwa-gradient); color:#fff; }
.pwa-action-card .card-header.gh-muted { background:var(--pwa-gradient-muted); color:#fff; }
.pwa-card-disabled { filter:grayscale(1); opacity:.42; pointer-events:none; }
.pwa-action-card.loading::after, .pwa-user-card.loading::after { content:''; position:absolute; inset:0; background:rgba(255,255,255,.55); }
/* Connexion */
.login-card { border-radius:var(--pwa-card-radius); box-shadow:0 10px 40px rgba(102,126,234,.18); padding:0; overflow:hidden; }
.login-card-header { background:var(--pwa-gradient); padding:32px 36px 24px; text-align:center; }
.login-card-header img.logo { max-width:90px; margin-bottom:16px; }
.login-card-header h2 { color:#fff; font-size:1.2rem; font-weight:600; margin-bottom:0; }
.login-card-body { padding:28px 36px 32px; }
/* Footer */
.pwa-footer { margin-top:24px; padding:16px 0; border-top:1px solid rgba(0,0,0,.06); text-align:center; }
.pwa-footer p { color:var(--pwa-text-muted); font-size:.85rem; margin:0; }
/* Modale */
.pwa-modal .modal-content { border-radius:var(--pwa-card-radius); border:none; box-shadow:0 10px 40px rgba(0,0,0,.22); overflow:hidden; }
.pwa-modal .modal-header { background:var(--pwa-gradient); border:none; padding:18px 24px; }
.pwa-modal .modal-header h5 { color:#fff; font-weight:600; font-size:1.15rem; margin:0; }
.pwa-modal .modal-body { background:#f8f9fa; padding:22px 24px; color:var(--pwa-text-dark); }
.pwa-modal .modal-footer { background:#f8f9fa; border:none; padding:12px 24px 22px; justify-content:center; gap:12px; }
.pwa-modal .modal-footer .btn { border-radius:50px; padding:9px 30px; font-weight:600; font-size:1rem; min-width:110px; }
@media (max-width:576px) {
.pwa-hero { padding:12px 14px; }
.pwa-user-card-body { padding:14px 10px 10px; }
.pwa-action-card .card-header { font-size:.85rem; padding:11px 10px; }
.login-card-header { padding:24px 24px 18px; }
.login-card-body { padding:20px 24px 24px; }
}