body { 
    background-color: #f4f6f9; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}
.navbar-custom { 
    background: linear-gradient(135deg, #4e73df 0%, #224abe 100%); 
}
.landing-hero-row {
    min-height: 75vh;
}
/* static/css/custom.css */
.min-vh-80 {
    min-height: 80vh;
}

.login-icon-box {
    width: 65px;
    height: 65px;
}
.attendance-meta-hidden {
    display: none;
}
/* static/css/custom.css */
.visit-icon-box {
    width: 50px;
    height: 50px;
}
.reg-icon-box {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%);
}
.landing-icon-box {
    width: 80px;
    height: 80px;
}


/* Interactive card headers */
.cursor-pointer {
    cursor: pointer;
}

/* Typography size adjustments */
.font-xs {
    font-size: 0.75rem !important;
}

.font-xxs {
    font-size: 0.7rem !important;
}

/* Extra small button modifier if not using Bootstrap standard sizing */
.btn-xs {
    padding: 0.15rem 0.4rem;
    font-size: 0.7rem;
    border-radius: 50rem;
}

/* Ensure smooth collapsing and mobile view padding adjustments */
@media (max-width: 768px) {
    .container-fluid {
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
.card-custom { 
    border: none; 
    border-radius: 12px; 
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
}
.btn-gradient { 
    background: linear-gradient(135deg, #1cc88a 0%, #13855c 100%); 
    color: white; 
    border: none; 
}
.btn-gradient:hover { 
    color: white; 
    opacity: 0.9; 
}
.app-overlay-zindex {
    z-index: 99999;
}
.app-overlay-card {
    max-width: 320px; 
    width: 90%;
}
.spinner-custom {
    width: 3rem; 
    height: 3rem;
}


.metric-cursor-pointer {
    cursor: pointer;
}
.metric-font-xs {
    font-size: 0.75rem;
}
.metric-font-xxs {
    font-size: 0.7rem;
}

/* ---------- Stage colour palette ---------- */
.s1{--c:#4f46e5;--soft:#e0e7ff;--c2:#7c3aed}   /* indigo  */
.s2{--c:#d97706;--soft:#fef3c7;--c2:#f59e0b}   /* amber   */
.s3{--c:#0891b2;--soft:#cffafe;--c2:#06b6d4}   /* cyan    */
.s4{--c:#7c3aed;--soft:#ede9fe;--c2:#a855f7}   /* violet  */
.s5{--c:#059669;--soft:#d1fae5;--c2:#10b981}   /* emerald */
.s6{--c:#0284c7;--soft:#e0f2fe;--c2:#38bdf8}   /* sky     */
.s7{--c:#ea580c;--soft:#ffedd5;--c2:#fb923c}   /* orange  */
.s8{--c:#16a34a;--soft:#dcfce7;--c2:#22c55e}   /* green   */

/* ---------- Hero header ---------- */
.hero{background:linear-gradient(135deg,#1e3a8a 0%,#4f46e5 55%,#7c3aed 100%);color:#fff;border-radius:18px;
      padding:1.75rem;position:relative;overflow:hidden;box-shadow:0 10px 30px rgba(79,70,229,.25)}
.hero::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08)}
.hero-label{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;opacity:.75;font-weight:600}
.hero h3{font-size:1.5rem;word-break:break-word}
.chip{display:inline-flex;align-items:center;gap:.4rem;background:rgba(255,255,255,.16);color:#fff;border-radius:999px;
      padding:.35rem .85rem;font-size:.82rem;font-weight:500;text-decoration:none;backdrop-filter:blur(4px)}
.chip i{opacity:.85}
a.chip:hover{background:rgba(255,255,255,.28);color:#fff}
.stage-badge{background:#fff;color:#4f46e5;font-weight:700;border-radius:999px;padding:.4rem 1rem;font-size:.85rem}
.lost-badge{background:#ef4444;color:#fff;font-weight:700;border-radius:999px;padding:.4rem 1rem;font-size:.85rem}
.lost-reason{background:rgba(255,255,255,.95);color:#991b1b;border-radius:12px;padding:.8rem 1rem;font-size:.9rem;margin-top:1rem;position:relative;z-index:1}
.hero-actions{position:relative;z-index:1}
@media (max-width:767.98px){
  .hero{padding:1.25rem;border-radius:16px}
  .hero h3{font-size:1.2rem}
  .hero-actions{width:100%}
  .hero-actions .btn{flex:1 1 auto}
}

/* ---------- Progress stepper ---------- */
.stepper-card{background:#fff;border-radius:16px;padding:1.25rem 1rem .75rem;box-shadow:0 4px 20px rgba(30,41,59,.06);margin-bottom:1.25rem}
.pbar{height:6px;background:#e2e8f0;border-radius:99px;overflow:hidden;margin:0 .5rem 1.1rem}
.pbar>span{display:block;height:100%;background:linear-gradient(90deg,#4f46e5,#16a34a);border-radius:99px;transition:width .6s}
.stepper{display:flex;overflow-x:auto;padding:.2rem .2rem .6rem;scrollbar-width:thin}
.step{flex:1 0 82px;text-align:center;position:relative}
.step::before{content:"";position:absolute;top:19px;left:-50%;width:100%;height:3px;background:#e2e8f0}
.step:first-child::before{display:none}
.step.done::before,.step.active::before{background:var(--c)}
.dot{position:relative;z-index:1;width:38px;height:38px;border-radius:50%;background:#fff;border:2px solid #e2e8f0;
     color:#94a3b8;display:grid;place-items:center;margin:0 auto .4rem;font-size:.9rem;transition:all .3s}
.step.done .dot{background:var(--c);border-color:var(--c);color:#fff}
.step.active .dot{border-color:var(--c);color:var(--c);box-shadow:0 0 0 5px var(--soft)}
.lbl{font-size:.72rem;font-weight:600;color:#94a3b8}
.step.done .lbl,.step.active .lbl{color:#1e293b}
.is-lost .step{filter:grayscale(1);opacity:.55}

/* ---------- Accordion stages ---------- */
.pipe .accordion-item{border:1px solid #cbd5e1;border-left:5px solid var(--c);border-radius:14px!important;
      margin-bottom:1rem;overflow:hidden;box-shadow:0 4px 16px rgba(30,41,59,.05);background:var(--soft)}
.pipe .accordion-button{background:linear-gradient(90deg,var(--soft) 0%,#fff 100%);gap:1rem;padding:1.1rem 1.25rem;box-shadow:none!important;color:#1e293b}
.pipe .accordion-button:not(.collapsed){background:linear-gradient(135deg,var(--c) 0%,var(--c2) 100%);color:#fff}
.pipe .accordion-button:not(.collapsed)::after{filter:brightness(0) invert(1)}
.pipe .accordion-button:not(.collapsed) .stage-title small{color:rgba(255,255,255,.85)}
.pipe .accordion-button:not(.collapsed) .pill-active{background:#fff;color:var(--c)}
.pipe .accordion-button:not(.collapsed) .time{background:rgba(255,255,255,.2);border-color:transparent;color:#fff}
.pipe .accordion-button:not(.collapsed) .ok{color:#fff}
.pipe .accordion-button:disabled{background:#f1f5f9;opacity:.7}
.pipe .accordion-button::after{margin-left:.5rem;flex:none}

.stage-icon{width:42px;height:42px;border-radius:12px;background:var(--soft);color:var(--c);display:grid;place-items:center;flex:none;font-size:1.1rem}
.accordion-button:not(.collapsed) .stage-icon{background:rgba(255,255,255,.22);color:#fff}
.accordion-button.collapsed .stage-icon{background:linear-gradient(135deg,var(--c),var(--c2));color:#fff}
.stage-title{display:flex;flex-direction:column;line-height:1.3;min-width:0;font-weight:600;font-size:1rem}
.stage-title small{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--c);font-weight:700}
.stage-meta{margin-left:auto;display:flex;align-items:center;gap:.6rem;flex:none}
.time{background:#fff;border:1px solid #e2e8f0;border-radius:999px;padding:.2rem .75rem;font-size:.75rem;color:#475569;font-weight:500}
.pill-active{background:var(--c);color:#fff;border-radius:999px;padding:.25rem .75rem;font-size:.7rem;font-weight:700;letter-spacing:.03em}
.ok{color:#16a34a;font-size:1.2rem}
.lock{color:#94a3b8;font-size:1rem}
@media (max-width:575.98px){.time{display:none}.stage-title{font-size:.9rem}.pipe .accordion-button{padding:.9rem 1rem;gap:.75rem}}
.pipe .accordion-body{padding:1.5rem;background:#fff}
.pipe .form-control:focus{border-color:var(--c);box-shadow:0 0 0 .2rem var(--soft)}
.pipe .form-control,.pipe textarea{border-radius:10px}
.pipe .form-control:disabled{background:#f8fafc}

/* ---------- Buttons & Cards ---------- */
.btn-pill{border-radius:999px;font-weight:600}
.btn-stage{background:var(--c);color:#fff;border:0}
.btn-stage:hover,.btn-stage:focus{color:#fff;filter:brightness(.92)}
.btn-soft{background:var(--soft,#eef2ff);box-shadow:inset 0 0 0 1px var(--c,#4f46e5);color:var(--c,#4f46e5);border:0;font-weight:600;border-radius:999px;white-space:nowrap}
.btn-soft:hover{filter:brightness(.95);color:var(--c,#4f46e5)}
.sub-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:1.25rem;margin-bottom:1.25rem;box-shadow:0 2px 8px rgba(30,41,59,.03)}
.sub-card h6{color:var(--c)}
.sec-title{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:#64748b;margin:1.25rem 0 .75rem}

/* ---------- Document & log lists ---------- */
.doc-item,.log-item{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border:1px solid #e2e8f0;
      border-radius:12px;background:#f8fafc;margin-bottom:.6rem}
.doc-ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none;background:#fee2e2;color:#dc2626}
.doc-ico.img{background:#e0f2fe;color:#0284c7}
.doc-info{min-width:0;flex:1}
.doc-name{font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#1e293b}
.doc-meta{font-size:.78rem;color:#64748b}
.log-item{align-items:flex-start}
.log-date{flex:none;background:var(--soft);color:var(--c);border-radius:10px;padding:.4rem .7rem;font-size:.8rem;font-weight:700;text-align:center;line-height:1.2}
.log-note{font-size:.9rem;color:#475569;margin:0;word-break:break-word}
.log-stamp{font-size:.75rem;color:#94a3b8;white-space:nowrap;margin-left:auto}
.empty-note{background:#f8fafc;text-align:center;color:#94a3b8;font-size:.85rem;padding:1rem;border:1px dashed #cbd5e1;border-radius:12px}

/* ---------- Upload tiles ---------- */
.upload-tile{border:2px dashed var(--c);background:#f8fafc;border-radius:14px;padding:1.25rem;text-align:center;height:100%}
.upload-tile .tile-ico{width:50px;height:50px;border-radius:50%;background:var(--c);color:#fff;display:grid;place-items:center;margin:0 auto .75rem;font-size:1.2rem}

/* ---------- Done / info boxes ---------- */
.done-box{display:flex;align-items:center;gap:.8rem;background:#f0fdf4;border:1px solid #bbf7d0;color:#15803d;border-radius:12px;padding:1rem 1.15rem;font-weight:600;font-size:.92rem}
.done-box i{font-size:1.4rem}
.lost-box{display:flex;align-items:center;gap:.8rem;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;border-radius:12px;padding:1rem 1.15rem;font-weight:600;font-size:.92rem}

/* ---------- Archive ---------- */
.archive{background:#fff;border-radius:16px;padding:1.5rem;box-shadow:0 4px 20px rgba(30,41,59,.06)}
.archive th{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:#64748b;background:#f8fafc;padding:.75rem 1rem}
.archive td{padding:.85rem 1rem}

/* ---------- Modals ---------- */
.modal-head-lost{background:linear-gradient(135deg,#ef4444,#b91c1c);color:#fff}
.modal-head-crop{background:linear-gradient(135deg,#0891b2,#4f46e5);color:#fff}
.alert{border-radius:12px}

/* ---------- Custom Helpers ---------- */
.pipeline-hero-z { position: relative; z-index: 1; }
.stage2-icon-box { width: 56px; height: 56px; font-size: 1.4rem; background: var(--c); color: #fff; border-radius: 14px; }
.archive-col-width { max-width: 200px; }
.modal-custom-style { border-radius: 16px; overflow: hidden; }
.crop-img-container { max-height: 60vh; overflow: hidden; }
.crop-img-preview { max-width: 100%; }