/* overrides-compact.css
   Load this AFTER modern-theme.css and admin.css */

/* 1) Global tune: typography, spacing, radii, shadows, motion */
:root {
    /* Slightly smaller, responsive base text */
    --font-size-base: clamp(14px, 0.95rem, 16px);
    --font-size-lg: 1.05rem;
    --font-size-xl: 1.15rem;
    --font-size-2xl: 1.35rem;
    --font-size-3xl: 1.6rem;
    --font-size-4xl: 1.9rem;
  
    /* Tighten common spacings */
    --spacing-3: 0.65rem;
    --spacing-4: 0.9rem;
    --spacing-6: 1.1rem;
    --spacing-8: 1.4rem;
    --spacing-10: 1.8rem;
    --spacing-12: 2rem;
    --spacing-16: 3rem;
    --spacing-20: 3.5rem;
  
    /* Softer corners + lighter shadows + snappier transitions */
    --radius-lg: 0.5rem;
    --radius-xl: 0.75rem;
    --transition-normal: 200ms ease;
    --shadow-md: 0 3px 10px rgba(0,0,0,.08);
    --shadow-lg: 0 6px 18px rgba(0,0,0,.10);
  }
  
  body { line-height: 1.5; }
  
  /* 2) Admin layout: scale down sidebar, cards, stats, timeline */
  .admin-layout .admin-sidebar {
    /* from 280px → 220px for a more standard width */
    width: 220px;
    min-width: 220px;
    padding: 1.25rem 1rem;
  }
  
  .admin-layout .admin-sidebar .sidebar-logo {
    /* from 80px → 80px (increased from 56px) */
    width: 80px;
    margin-bottom: 1rem;
    border-radius: 0;
    background: none;
    padding: 0;
  }
  
  .admin-layout .admin-sidebar .sidebar-title {
    /* 1.25rem → 1.05rem, less letter-pressing */
    font-size: 1.05rem;
    margin-bottom: 1rem;
    font-weight: 700;
    text-shadow: none;
  }
  
  .admin-layout .admin-sidebar .nav-link {
    /* tighter padding/gap + calmer rounding */
    gap: .5rem;
    padding: .55rem .75rem;
    border-radius: .625rem;
    font-weight: 500;
  }
  
  .admin-layout .admin-sidebar .nav-link i {
    font-size: 1.1rem;      /* from 1.25rem */
    min-width: 20px;         /* from 24px */
  }
  
  .admin-layout .admin-sidebar .nav-link:hover,
  .admin-layout .admin-sidebar .nav-link.active {
    /* remove slide + heavy shadow for stability */
    transform: none;
    box-shadow: none;
    background: rgba(255,255,255,.14);
  }
  
  .admin-layout .admin-main {
    /* from 2rem → 1.25rem */
    padding: 1.25rem;
  }
  
  .admin-layout .card {
    border-radius: .75rem;   /* from 1.25rem */
    box-shadow: var(--shadow-md);
    margin-bottom: 1rem;     /* from 1.5rem */
  }
  .admin-layout .card:hover {
    transform: none;         /* stop the jump */
    box-shadow: var(--shadow-lg);
  }
  
  .admin-layout .stats-row {
    grid-template-columns: repeat(auto-fit, minmax(176px,1fr)); /* 20% reduction from 220px */
    gap: 1rem;                 
    margin-bottom: 1.25rem;    
  }
  .admin-layout .stats-card {
    border-radius: .75rem;     /* from 1.25rem */
    padding: 1rem .9rem;       /* from 1.75rem 1.5rem */
    gap: .75rem;               /* from 1.25rem */
  }
  .admin-layout .stats-icon {
    width: 44px; height: 44px; /* from 60px */
    font-size: 1.25rem;        /* from 1.75rem */
  }
  
  /* Timeline slimming */
  .admin-layout .timeline::before { left: 24px; }          /* from 30px */
  .admin-layout .timeline-item { padding-left: 56px; margin-bottom: 1rem; } /* from 60px / 1.5rem */
  .admin-layout .timeline-icon {
    width: 40px; height: 40px; /* from 50px */
    font-size: 1rem;           /* from 1.25rem */
    box-shadow: 0 2px 10px rgba(124,58,237,.25);
  }
  .admin-layout .timeline-content { padding: 1rem; border-radius: .625rem; }
  
  /* 3) Buttons: keep style, reduce drama */
  .admin-layout .btn-admin,
  .btn.btn-admin {
    border-radius: .5rem; /* from 0.75rem */
    font-weight: 600;
  }
  .admin-layout .btn-admin:hover,
  .btn.btn-admin:hover {
    transform: translateY(-1px);  /* from -2px */
    box-shadow: 0 6px 18px rgba(124,58,237,.22);
  }
  
  /* 4) Tables and nav: more compact */
  .table { border-radius: .5rem; }
  .table th, .table td { padding: .75rem; } /* defaults were quite roomy */
  
  .navbar { padding: .5rem 0; }             /* from var(--spacing-4) 0 */
  .navbar-brand { font-size: 1.25rem; }     /* down from 2xl */
  
  /* 5) Hero: reduce vertical bulk */
  .hero { padding: 2.5rem 0; }              /* from var(--spacing-20) */
  
  /* 6) Mobile: keep it comfy */
  @media (max-width:768px){
    .admin-layout .admin-main { padding: 1rem; }
    .hero { padding: 1.75rem 0; }
  }

/* PPDB form styles: vertical single-column fields */
.ppdb-field { margin-bottom: 1rem; }
.ppdb-field .form-label { display: block; margin-bottom: 0.4rem; font-weight:600; }
.ppdb-input { padding: 0.7rem 0.85rem; border-radius: .5rem; box-shadow: var(--shadow-md); border: 1px solid rgba(0,0,0,.08); }
.ppdb-input:focus { outline: none; box-shadow: 0 6px 18px rgba(13,110,253,.12); border-color: rgba(13,110,253,.6); }

/* Prevent native :valid pseudo-class from showing green checks before user interaction. Only show visual valid/invalid after user touched the field (ppdb-touched). */
input:valid, textarea:valid, select:valid { box-shadow: none; }
input:invalid, textarea:invalid, select:invalid { box-shadow: none; }
.ppdb-touched.is-valid, .ppdb-touched:valid.is-valid { border-color: #198754 !important; box-shadow: 0 6px 18px rgba(16,185,129,.08) !important; }
.ppdb-touched.is-invalid, .ppdb-touched:invalid.is-invalid { border-color: #dc3545 !important; box-shadow: 0 6px 18px rgba(220,53,69,.06) !important; }

/* Override Bootstrap's default .is-valid/.is-invalid visuals so they don't show unless input was touched */
.form-control.is-valid, .form-select.is-valid, textarea.is-valid { border-color: initial !important; box-shadow: none !important; }
.form-control.is-invalid, .form-select.is-invalid, textarea.is-invalid { border-color: initial !important; box-shadow: none !important; }
.ppdb-primary { width:100%; padding: 0.85rem; border-radius: .6rem; font-weight:700; }
.ppdb-primary:hover { background-color: #0a58ca; }

@media (max-width:576px){
  .ppdb-input { padding: 0.65rem; }
  .ppdb-primary { padding: 0.75rem; }
}

/* Timeline / progress steps */
.ppdb-timeline { display:flex; gap:0.5rem; justify-content:space-between; margin-bottom:1rem; }
.ppdb-step { flex:1; padding:0.5rem 0.75rem; border-radius:.5rem; background:#f8f9fa; border:1px solid rgba(0,0,0,.06); cursor:pointer; font-weight:600; }
.ppdb-step[aria-selected="true"] { background: linear-gradient(90deg, #0d6efd 0%, #0a58ca 100%); color:#fff; box-shadow: var(--shadow-md); }
.ppdb-step:focus { outline:2px solid rgba(13,110,253,.2); }

/* Stepper styles (from stepper component) */
.stepper { background: rgba(255,255,255,0.95); padding: .75rem; border-radius: 12px; box-shadow: 0 10px 30px rgba(13,110,253,.06); position: relative; z-index:1050; border: 1px solid rgba(13,110,253,.06); overflow: visible; }
.stepper-list { list-style: none; display: flex; gap: 12px; padding: 0; margin: 0 0 .5rem 0; align-items: center; justify-content: space-between; flex-wrap: nowrap; overflow: visible; }
.stepper-list li { flex: 1; min-width: 0; max-width: 120px; }
.stepper-btn { display: flex; flex-direction: column; gap: .4rem; align-items: center; width:100%; text-align: center; background: transparent; border: none; padding: .6rem .4rem; border-radius: 12px; cursor: pointer; color: #111827; font-weight:700; z-index:1060; transition: transform var(--transition-normal), background var(--transition-normal), box-shadow var(--transition-normal); }
.stepper-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(13,110,253,.06); }
.stepper-btn:focus { outline: 3px solid rgba(13,110,253,.14); box-shadow: 0 8px 24px rgba(13,110,253,.06); }
.stepper .step-index { display:inline-grid; place-items:center; width:46px;height:46px;border-radius:50%; background:#F5F7FA;color:#111827;border:2px solid #E5E7EB; font-weight:800; transition: transform .22s ease, background .22s ease, box-shadow .22s ease; margin-bottom: .25rem; }
.stepper .step-label { font-size: .95rem; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.stepper .step-icon { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; border-radius:6px; background:transparent; color: #0D6EFD; margin-right:.4rem; }
.stepper .step-icon i { font-size:14px; }

/* small pulse when step becomes current */
.step-index.pulse { transform: scale(1.06); box-shadow: 0 8px 24px rgba(13,110,253,.08); }
.step.completed .step-index { background: #10B981; color: #fff; border-color: rgba(16,185,129,.25); }
.step.current .step-index { background: #0D6EFD; color: #fff; border-color: #0D6EFD; box-shadow: 0 6px 18px rgba(13,110,253,.12); }
.step.current .step-label { color:#0D6EFD; font-weight:700; }
.step.completed .step-label { color:#0f5132; }
.step.upcoming .step-index { background:#fff; color:#111827; border:1px solid #E5E7EB; }
.step.incomplete .step-index { background:#fff; color:#dc3545; border:2px solid #dc3545; }
.step.incomplete .step-index::after{ content: '✕'; font-size:14px; line-height:1; display:inline-block; color:#dc3545; font-weight:bold; }
.step.completed .step-index::after{ content: '✓'; font-size:14px; line-height:1; display:inline-block; color:#fff; }
/* Progress bar removed - no longer needed */
.stepper.sticky { position: sticky; top: 0; z-index: 60; background: inherit; padding-top:.5rem; }
.stepper-list { gap:12px; padding-bottom:.25rem; }
.stepper .step-label { font-size:.88rem; }
.stepper .step-index { width:38px;height:38px;font-size:.95rem; }

/* responsive: show compact numbers on very small viewports */
@media (max-width:420px) {
    .stepper-list { gap:10px; }
    .stepper .step-label { display:none; }
    .stepper-list li { min-width: 56px; }
}

/* Ensure no horizontal scroll on stepper */
.stepper-list {
    overflow-x: visible !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: auto !important;
}

/* Mobile responsive stepper */
@media (max-width: 768px) {
    .stepper-list {
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
    .stepper-list li {
        flex: 1;
        min-width: 0;
        max-width: 100px;
    }
    .stepper .step-label {
        font-size: 0.8rem;
    }
    .stepper .step-index {
        width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .stepper-list {
        gap: 6px;
    }
    .stepper-list li {
        flex: 1;
        min-width: 0;
        max-width: 80px;
    }
    .stepper .step-index {
        width: 36px;
        height: 36px;
        font-size: 0.85rem;
    }
    .stepper .step-label {
        font-size: 0.7rem;
    }
}

@media (max-width: 480px) {
    .stepper-list {
        gap: 4px;
    }
    .stepper-list li {
        flex: 1;
        min-width: 0;
        max-width: 70px;
    }
    .stepper .step-index {
        width: 32px;
        height: 32px;
        font-size: 0.8rem;
    }
    .stepper .step-label {
        font-size: 0.65rem;
    }
}

/* Timeline stepper without progress bar */
.stepper { padding-bottom: 0.5rem; }
.stepper-list { position: relative; z-index: 2; }
.stepper-list.timeline .step { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; }
.stepper.timeline-stepper .step-index { margin-bottom: .25rem; }
.stepper.timeline-stepper .step-label { margin-top: 0; font-size:.9rem; }

/* connector fallback for older browsers: hide default step box shadows to keep simple look */
.stepper .stepper-btn:hover { background: transparent; }

  
  /* 7) Animations: a touch faster/subtler */
  .animate-fade-in-up,
  .animate-slide-in-left { animation-duration: .45s; }