/* =====================================================================
   PPSSP OPERATIONS - Theme + squelettes de chargement (style Flutter)
   ===================================================================== */
:root{
  --pp-primary:#0d3b66;
  --pp-secondary:#f4a261;
  --pp-bg:#f4f6f9;
  --pp-radius:20px;
}
body.pp-app{ background:var(--pp-bg); font-family:"Segoe UI",Roboto,Helvetica,Arial,sans-serif; color:#243447; }
a{ color:var(--pp-primary); }

.form-control,
.form-select {
    border: 1px solid #c3c3c3;
    border-radius: var(--pp-radius);
    padding: .5rem .75rem;
}

/* ------------------------------- Boutons ---------------------------- */
.btn-primary{ background:var(--pp-primary); border-color:var(--pp-primary); }
.btn-primary:hover,.btn-primary:focus{ filter:brightness(1.12); background:var(--pp-primary); border-color:var(--pp-primary); }
.btn-outline-primary{ color:var(--pp-primary); border-color:var(--pp-primary); }
.btn-outline-primary:hover{ background:var(--pp-primary); border-color:var(--pp-primary); }
.btn-secondary{ background:var(--pp-secondary); border-color:var(--pp-secondary); color:#1b2b3a; }
.btn-secondary:hover{ filter:brightness(1.08); background:var(--pp-secondary); border-color:var(--pp-secondary); color:#1b2b3a; }
.text-primary{ color:var(--pp-primary)!important; }
.bg-primary{ background:var(--pp-primary)!important; }
.bg-secondary-soft{ background:color-mix(in srgb, var(--pp-secondary) 18%, #fff); }
.form-control:focus,.form-select:focus{ border-color:var(--pp-primary); box-shadow:0 0 0 .2rem rgba(13,59,102,.15); }
.nav-tabs .nav-link.active{ color:var(--pp-primary); font-weight:600; }
.progress-bar{ background:var(--pp-primary); }

/* ------------------------------- Structure -------------------------- */
.pp-topbar{ background:var(--pp-primary); box-shadow:0 2px 10px rgba(0,0,0,.12); }
.pp-topbar .navbar-brand{ color:#fff; }
.pp-topbar .navbar-brand:hover{ color:#fff; }
.pp-logo{ height:36px; background:#fff; border-radius:8px; padding:3px; }
.pp-logo-fallback{ width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.18);border-radius:8px;color:#fff; }
.pp-notif-badge{ position:absolute; top:-6px; right:-6px; font-size:.65rem; }
.pp-notif-list{ max-height:330px; overflow:auto; }
.pp-notif-item{ display:block; padding:.6rem .9rem; border-bottom:1px solid #f1f3f5; text-decoration:none; color:#243447; }
.pp-notif-item:hover{ background:#f8f9fa; }
.pp-notif-item.unread{ background:rgba(244,162,97,.12); }

.pp-shell{ display:flex; min-height:calc(100vh - 56px); }
.pp-sidebar{ width:252px; flex:0 0 252px; background:#fff; border-right:1px solid #e9ecef; position:sticky; top:56px; height:calc(100vh - 56px); overflow-y:auto; }
.pp-side-user{ display:flex; gap:10px; align-items:center; padding:16px; border-bottom:1px solid #f1f3f5; }
.pp-avatar{ width:44px;height:44px;border-radius:50%;object-fit:cover; }
.pp-avatar-sm{ width:26px;height:26px;border-radius:50%;object-fit:cover; }
.pp-avatar-txt{ background:var(--pp-primary); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.pp-menu .nav-link{ color:#495057; display:flex; align-items:center; gap:10px; padding:.62rem 1rem; border-left:3px solid transparent; font-size:.94rem; }
.pp-menu .nav-link i{ font-size:1.05rem; width:20px; text-align:center; }
.pp-menu .nav-link:hover{ background:#f8f9fa; color:var(--pp-primary); }
.pp-menu .nav-link.active{ background:color-mix(in srgb, var(--pp-primary) 8%, #fff); color:var(--pp-primary); border-left-color:var(--pp-secondary); font-weight:600; }
.pp-main{ flex:1 1 auto; padding:20px 24px 60px; min-width:0; }
@media (max-width: 991.98px){
  .pp-sidebar{ position:fixed; z-index:1040; left:-260px; transition:left .25s ease; box-shadow:0 0 30px rgba(0,0,0,.2); }
  .pp-sidebar.open{ left:0; }
  .pp-main{ padding:16px; }
}

/* ------------------------------- Cartes ----------------------------- */
.card{ border:none; border-radius:var(--pp-radius); box-shadow:0 2px 10px rgba(16,24,40,.06); }
.card-header{ background:#fff; border-bottom:1px solid #f1f3f5; font-weight:600; border-radius:var(--pp-radius) var(--pp-radius) 0 0!important; }

/* ------------------------------- Cartes -----------------------------
.pp-stat{ border-radius:var(--pp-radius); background:#fff; padding:16px 18px; display:flex; gap:14px; align-items:center; box-shadow:0 2px 10px rgba(16,24,40,.06); height:100%; }
.pp-stat .ico{ width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;color:#fff;background:var(--pp-primary); flex:0 0 48px; }
.pp-stat .ico.alt{ background:var(--pp-secondary); color:#1b2b3a; }
.pp-stat h3{ margin:0; font-size:1.6rem; font-weight:700; line-height:1.1; }
.pp-stat span{ color:#6c757d; font-size:.85rem; } 
*/


.pp-stat { display: flex; align-items: center; gap: 16px; padding: 20px; height: 100%; background: #fff; border: 1px solid rgba(16, 24, 40, 0.05); border-radius: var(--pp-radius, 16px); box-shadow: 0 4px 12px rgba(16, 24, 40, 0.04); box-sizing: border-box; transition: box-shadow 0.2s ease; }
.pp-stat .ico { display: flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; background: var(--pp-primary); color: #fff; font-size: 1.25rem;  }
.pp-stat .ico.alt { background: var(--pp-secondary); color: #1b2b3a; }
.pp-stat h3 { margin: 0 0 2px 0; color: #111827; font-size: 1.5rem; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; }
.pp-stat span { display: block; color: #64748b; font-size: 0.875rem; font-weight: 500; line-height: 1.4; }




.table>:not(caption)>*>*{ padding:.62rem .6rem; }
.table thead th{ font-size:.8rem; text-transform:uppercase; letter-spacing:.03em; color:#6c757d; background:#f8f9fa; }
.table-hover tbody tr:hover{ background:color-mix(in srgb, var(--pp-primary) 4%, #fff); }

/* ------------------------------- Squelettes -------------------------- */
@keyframes pp-shimmer{ 0%{ background-position:-460px 0; } 100%{ background-position:460px 0; } }
.skeleton{
  background:#e9ecef;
  background-image:linear-gradient(90deg,#e9ecef 0px,#f3f5f7 60px,#e9ecef 120px);
  background-size:460px 100%;
  background-repeat:no-repeat;
  border-radius:8px;
  animation:pp-shimmer 1.25s linear infinite;
  display:block;
}
.skeleton-line{ height:12px; margin-bottom:.55rem; }
.skeleton-line.sm{ height:9px; }
.skeleton-title{ height:20px; width:45%; margin-bottom:1rem; }
.skeleton-circle{ width:44px; height:44px; border-radius:50%; }
.skeleton-btn{ height:34px; width:110px; border-radius:8px; }
.skeleton-card{ height:104px; border-radius:var(--pp-radius); }
.skeleton-thumb{ height:150px; border-radius:var(--pp-radius); }
.pp-skel-row{ display:flex; gap:12px; align-items:center; padding:.55rem .4rem; border-bottom:1px solid #f1f3f5; }
.pp-skel-row .skeleton{ margin:0; }

/* ------------------------------- Toasts ----------------------------- */
.pp-toasts{ position:fixed; right:18px; bottom:18px; z-index:1090; display:flex; flex-direction:column; gap:10px; max-width:360px; }
.pp-toast{ background:#fff; border-left:5px solid var(--pp-primary); border-radius:10px; padding:12px 14px; box-shadow:0 8px 24px rgba(16,24,40,.16); font-size:.92rem; animation:pp-in .25s ease; }
.pp-toast.ok{ border-left-color:#198754; }
.pp-toast.err{ border-left-color:#dc3545; }
.pp-toast.warn{ border-left-color:#ffc107; }
@keyframes pp-in{ from{ transform:translateY(12px); opacity:0; } to{ transform:none; opacity:1; } }

/* ------------------------------- Divers ----------------------------- */
.pp-login{ min-height:100vh; display:flex; align-items:center; background:linear-gradient(140deg,var(--pp-primary),#0b2b4a 65%,var(--pp-secondary) 160%); }
.pp-login .card{ border-radius:18px; }
.pp-pin input{ text-align:center; letter-spacing:.7rem; font-size:1.5rem; font-weight:700; }
.pp-doc-item{ display:flex; gap:10px; align-items:center; padding:.5rem .65rem; border:1px solid #eef0f2; border-radius:10px; margin-bottom:.5rem; background:#fff; }
.pp-chip{ display:inline-block; background:color-mix(in srgb, var(--pp-primary) 10%, #fff); color:var(--pp-primary); border-radius:999px; padding:.12rem .6rem; font-size:.78rem; margin:0 .2rem .2rem 0; }
.pp-timeline{ position:relative; padding-left:26px; }
.pp-timeline:before{ content:""; position:absolute; left:8px; top:4px; bottom:4px; width:2px; background:#e9ecef; }
.pp-timeline .item{ position:relative; margin-bottom:1rem; }
.pp-timeline .item:before{ content:""; position:absolute; left:-22px; top:4px; width:12px; height:12px; border-radius:50%; background:var(--pp-primary); box-shadow:0 0 0 3px #fff; }
.pp-signature{ max-height:60px; }
.pp-form-conge{ background:#fff; padding:26px 30px; width:820px; margin:auto; font-size:13px; color:#000; }
.pp-form-conge table{ width:100%; border-collapse:collapse; }
.pp-form-conge td,.pp-form-conge th{ border:1px solid #999; padding:5px 7px; vertical-align:top; }
.pp-cert{ width:1000px; height:707px; background:#fff; position:relative; padding:46px 54px; font-family:Georgia,"Times New Roman",serif; color:#1b2b3a; }
.pp-cert .frame{ position:absolute; inset:16px; border:8px double var(--pp-primary); border-radius:6px; pointer-events:none; }
.pp-cert .frame-inner{ position:absolute; inset:30px; border:1px solid var(--pp-secondary); }
.pp-cursor-help{ cursor:help; }
.pp-hidden{ display:none!important; }
@media print{ .pp-topbar,.pp-sidebar,.no-print{ display:none!important; } .pp-main{ padding:0; } }


/* ----------------------- Chargement global des formulaires ----------------------- */
@keyframes pp-save-spin {
    to { transform: rotate(360deg); }
}

.pp-save-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(15, 23, 42, .28);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.pp-save-dialog {
    width: min(340px, 100%);
    padding: 24px 22px;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 18px 50px rgba(15, 23, 42, .28);
    text-align: center;
}

.pp-save-spinner {
    width: 42px;
    height: 42px;
    margin: 0 auto 14px;
    border: 4px solid rgba(13, 59, 102, .18);
    border-top-color: var(--pp-primary);
    border-radius: 50%;
    animation: pp-save-spin .75s linear infinite;
}

.pp-save-title {
    margin: 0;
    color: var(--pp-primary);
    font-size: 1rem;
    font-weight: 700;
}

.pp-save-text {
    margin: 6px 0 0;
    color: #667085;
    font-size: .88rem;
}

body.pp-save-loading {
    overflow: hidden;
}

.pp-save-loading button,
.pp-save-loading a,
.pp-save-loading input,
.pp-save-loading select,
.pp-save-loading textarea {
    pointer-events: none;
}