/* Integrify Theme — modern, accessible, and consistent design system
   Location: /css/integrify-theme.css
   Goals:
   - Clear design tokens (colors, spacing, type scale)
   - Accessible contrast and focus states
   - Smooth transitions and subtle elevation
   - Re-usable components: cards, buttons, inputs, tables, badges
   - Preserve and scope page-level rules appended below
*/
:root{
  /* Color palette */
  --color-bg-0: #ffffff;
  --color-bg-1: #f7fbff; /* very light page tint */
  --color-surface: #ffffff;
  --color-muted: #6b7280; /* gray-600 */
  --color-text: #0f1724; /* very dark */
  --color-accent: #0ea5e9; /* sky-500 */
  --color-accent-600: #0284c7;
  --color-accent-700: #0369a1;
  --color-success: #059669;
  --color-warn: #f59e0b;
  --color-danger: #ef4444;

  /* Neutral grayscale (for borders/shadows) */
  --neutral-100: #f3f6fb;
  --neutral-200: #e6eef9;
  --neutral-300: #d1dbe9;
  --neutral-400: #c1cee0;

  /* Spacing scale */
  --space-xs: 6px;
  --space-sm: 10px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;

  /* Radii */
  --radius-sm: 6px;
  --radius: 12px;
  --radius-lg: 18px;

  /* Shadows */
  --shadow-sm: 0 6px 16px rgba(12,18,30,0.06);
  --shadow-md: 0 12px 30px rgba(12,18,30,0.08);
  --shadow-lg: 0 24px 60px rgba(12,18,30,0.12);

  /* Type scale */
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --type-base: 15px;
  --line-height: 1.45;

  /* Transition */
  --transition-fast: 160ms cubic-bezier(.2,.9,.2,1);
}

/* Base layout */
html,body{height:100%;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--type-base);
  line-height:var(--line-height);
  color:var(--color-text);
  background:linear-gradient(180deg,var(--color-bg-1),#fff);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  -webkit-text-size-adjust:100%;
}

/* Container */
.container{max-width:1200px;margin-left:auto;margin-right:auto;padding:0 var(--space-md)}

/* Utility helpers */
.hint{color:var(--color-muted);font-size:.92rem}
.small-muted{font-size:.88rem;color:var(--color-muted)}
.flex{display:flex}
.flex-center{display:flex;align-items:center;justify-content:center}
.gap-sm{gap:var(--space-sm)}
.gap-md{gap:var(--space-md)}
.rounded{border-radius:var(--radius)}
.rounded-sm{border-radius:var(--radius-sm)}

/* Focus accessibility */
:focus{outline:none}
:focus-visible{box-shadow:0 0 0 4px rgba(14,165,233,0.14);border-radius:6px}

/* Cards */
.card{background:var(--color-surface);border-radius:var(--radius);box-shadow:var(--shadow-sm);border:1px solid rgba(12,18,30,0.04);}
.card-body{padding:var(--space-md)}
.card-header{padding:var(--space-sm) var(--space-md);border-bottom:1px solid rgba(12,18,30,0.04);background:linear-gradient(180deg,#fff,#fbfdff)}

/* Ensure card containers don't clip positioned badges (status counts) */
.card, .card-alt, .card-soft { overflow: visible; }

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;border-radius:999px;padding:.45rem .9rem;font-weight:600;cursor:pointer;transition:transform var(--transition-fast),box-shadow var(--transition-fast),background var(--transition-fast);border:1px solid transparent}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.btn-primary{background:linear-gradient(180deg,var(--color-accent),var(--color-accent-600));color:#fff;box-shadow:0 8px 26px rgba(2,100,170,0.12);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}

.btn-ghost{background:transparent;border:1px solid rgba(12,18,30,0.06);color:var(--color-accent-700)}
.btn-outline{background:transparent;border:1px solid rgba(12,18,30,0.06);color:var(--color-text)}
.btn-sm{padding:.28rem .6rem;font-size:.9rem}

/* Inputs and forms */
.form-control, .form-select, textarea{border-radius:10px;border:1px solid rgba(12,18,30,0.06);padding:.55rem .8rem;background:linear-gradient(180deg,#fff,#fbfdff);color:var(--color-text);transition:box-shadow var(--transition-fast),border-color var(--transition-fast)}
.form-control:focus, .form-select:focus, textarea:focus{outline:none;border-color:var(--color-accent-600);box-shadow:0 10px 30px rgba(2,132,199,0.08)}
.form-label{font-weight:600;color:#374151}
.form-text{font-size:.88rem;color:var(--color-muted)}

/* Tables */
.table{width:100%;border-collapse:collapse}
.table thead th{background:linear-gradient(180deg,#f8fbff,#ffffff);color:var(--color-muted);border-bottom:1px solid rgba(12,18,30,0.04);font-weight:700;padding:.75rem;text-align:left}
.table tbody td{padding:.65rem .75rem;vertical-align:middle;border-bottom:1px solid rgba(12,18,30,0.03)}
.table-hover tbody tr:hover{background:#fbfdff}

/* Badges & Pills */
.badge{display:inline-flex;align-items:center;gap:.4rem;padding:.28rem .5rem;border-radius:999px;font-weight:700;font-size:.86rem}
.status-pill{display:inline-flex;align-items:center;gap:.45rem;padding:.32rem .62rem;border-radius:999px;font-weight:700}
.status-info{color:#064e9b;background:#e8f3ff;border:1px solid #cfe8ff}
.status-warn{color:#92400e;background:#fff7ed;border:1px solid #ffedd5}
.status-success{color:#065f46;background:#ecfdf3;border:1px solid #bbf7d0}
.status-danger{color:#7f1d1d;background:#fff2f2;border:1px solid #ffdddd}

/* Status counter badge (robust across embedding contexts) */
.status-pill-alt{position:relative;display:inline-flex;align-items:center;gap:.5rem;padding:.32rem .62rem;border-radius:999px;background:transparent;border:1px solid rgba(12,18,30,0.04);overflow:visible;z-index:0}
.status-pill-alt .status-count-badge{position:absolute;top:-8px;right:-10px;z-index:60;pointer-events:none;display:inline-block;background:var(--color-accent-700);color:var(--color-accent-contrast);padding:.18rem .5rem;border-radius:999px;font-size:.72rem;line-height:1;box-shadow:0 6px 18px rgba(2,6,23,0.16);border:1px solid rgba(255,255,255,0.12)}

/* admin qc pills should also allow visible overflow for badges */
.altb-pill{position:relative;overflow:visible;z-index:0}
.altb-pill .status-count-badge{position:absolute;top:-8px;right:-10px;z-index:60;pointer-events:none;display:inline-block;background:var(--color-accent-700);color:var(--color-accent-contrast);padding:.18rem .5rem;border-radius:999px;font-size:.72rem;line-height:1;box-shadow:0 6px 18px rgba(2,6,23,0.16);border:1px solid rgba(255,255,255,0.12)}

/* When badge is created via Bootstrap utilities (e.g., bg-secondary), normalize to our styling */
.status-pill-alt .status-count-badge.badge, .altb-pill .status-count-badge.badge { background: rgb(122, 80, 122) !important; color: rgb(255, 255, 255) !important; border-color: rgba(255,255,255,0.08) !important; }

/* Pagination */
.pagination .page-link{border-radius:8px;border:1px solid rgba(12,18,30,0.06);padding:.35rem .7rem;color:var(--color-text)}
.pagination .page-item.active .page-link{background:linear-gradient(135deg,var(--color-accent),var(--color-accent-600));color:#fff;border-color:transparent;box-shadow:0 8px 26px rgba(2,100,170,0.14)}

/* Modals */
.modal-content{border-radius:12px;box-shadow:var(--shadow-lg);}

/* Small components */
.copy-btn{padding:.28rem .5rem;border-radius:8px;background:#f3f7fb;border:1px solid rgba(12,18,30,0.04);font-size:.88rem}
.copy-btn:hover{background:#ecf6ff}
.attachment-item{display:flex;align-items:center;justify-content:space-between;padding:.6rem;border-radius:10px;border:1px solid rgba(12,18,30,0.03);background:#fcfeff}

/* Responsive helpers */
@media (max-width:900px){.container{padding:0 12px}.card-body{padding:12px}.form-control,.form-select{font-size:14px}}

/* =============== Responsive utilities & page tweaks =============== */

/* Breakpoints:
   - large: above 1100px (desktop)
   - medium: up to 1100px (small desktop / tablet landscape)
   - compact: up to 900px (tablet)
   - narrow: up to 720px (mobile landscape)
   - xsmall: up to 520px (mobile portrait)
*/

@media (max-width: 1100px) {
  .container{max-width:980px}
  .card-header, .card-body{padding:12px}
}

@media (max-width: 900px) {
  .container{max-width:760px;padding:0 14px}

  /* Convert two-column forms to comfortable stacked layout for narrower screens */
  .two-col, .two-field-grid, .two-col-form { grid-template-columns: 1fr; }
  .two-field-grid .field { width:100%; }

  /* Make header inputs wrap into readable rows */
  #recordHeaderCard .row.g-2 > div { flex: 0 0 100%; max-width:100%; }

  /* Tables: allow horizontal scroll while preserving spacing */
  .table-responsive{overflow:auto; -webkit-overflow-scrolling:touch}

  /* Status pills: allow wrap and increase tap target */
  .status-pill, .status-pill-alt { white-space:normal;padding:.5rem .9rem; }

  /* Nav / tabs stack */
  .welcome .nav-tabs { display:flex; flex-wrap:wrap; gap:8px; }
  .welcome .nav-tabs .nav-link { flex:1 1 auto; text-align:center; }

  /* Work: reduce pdf frame height on smaller screens */
  .work .alt-pdf-frame{height:260px}
  .work .alt-modal-header{padding:.75rem}

  /* Compact card spacing on smaller screens */
  .card{margin-bottom:var(--space-md)}
}

@media (max-width:720px){
  .container{padding:0 12px}

  /* Forms: full width inputs and stacked label layout */
  .form-label{display:block;margin-bottom:6px}
  .form-control, .form-select, textarea{width:100%}

  /* Two-column header -> stacked rows */
  #recordHeaderCard .row.g-2 > div { flex: 0 0 100%; max-width:100%; }

  /* Two-up grids collapse to single column for readability */
  .two-field-grid, .two-col-form, .two-col { grid-template-columns: 1fr; }

  /* Alignment tweaks for action bar */
  .top-bar{flex-direction:column;gap:8px;align-items:flex-start}

  /* Make copy buttons full width stacked to help finger taps */
  .copy-btn{width:100%;display:block}

  /* Reduce sidebar-like paddings where present */
  .card-body{padding:12px}
}

@media (max-width:520px){
  .container{padding:0 10px}

  /* Tighten typography slightly on very small screens */
  body{font-size:14px}
  h6{font-size:1rem}

  /* Work PDF very small devices */
  .work .alt-pdf-frame{height:200px}

  /* Buttons: make primary easier to tap */
  .btn, .btn-primary{padding:.6rem 1rem}

  /* Collapse any inline meta chips */
  .meta-chip{padding:.28rem .45rem;font-size:.78rem}
}

/* Page-specific responsive helpers: ensure admin shells behave well */

/* admin_approve / admin_qc / admin_sla / admin_export / admin_park */
@media (max-width:900px){
  .admin-approve .dashboard-card, .admin-qc .dashboard-card, .admin-sla .dashboard-card, .admin-export .advRpt-card, .admin-park .card-soft {
    padding:12px; border-radius:10px;
  }
  /* Bulk bar and filters become stacked */
  .bulk-bar{flex-direction:column;align-items:stretch}
  .filters-badge, .filters-divider { display:block; }
}

/* login page: center form and make full-width fields */
.login .login-card, .login .card { max-width:480px;margin-left:auto;margin-right:auto }
@media (max-width:520px){ .login .login-card, .login .card { padding:12px;margin:12px } }

/* overview: make cards stack and timeline more compact */
@media (max-width:900px){ .overview .card-soft{margin-bottom:12px} .overview .timeline::before{left:14px} }

/* record_common: ensure important grid becomes vertically scrollable on small screens */
@media (max-width:900px){
  .important-grid, #importantFields { overflow:auto; }
  .notes-split { display:block; }
}

/* upload: stack file inputs and controls */
@media (max-width:720px){
  .upload .section-box{padding:1rem}
  .upload .education-entry, .upload .career-entry { padding:.6rem }
}

/* welcome: ensure hero/search areas collapse nicely */
@media (max-width:900px){
  .welcome .search-card{padding:.7rem}
  .welcome .nav-tabs{gap:6px}
}

/* make tables more touch-friendly: increase row height on small screens */
@media (max-width:720px){ .table tbody td{padding:12px .75rem} }

/* ensure modals have full-width on small devices */
@media (max-width:520px){ .modal-dialog{max-width:95%;margin:12px} }

/* Ensure any inline-flex action groups wrap and remain accessible */
.action-group, .btn-group { flex-wrap:wrap }

/* End responsive adjustments */

/* Finishing notes: this theme is intentionally low-specificity so page components can be scoped
   further if needed. If you want a stronger visual identity (darker accent, rounded vs sharp), I can
   provide alternate theme variants (compact, dense, or high-contrast) and a small theme-switching helper.
*/

/* Two-field grid: default two-column layout for Payment / Verifier sections */
.two-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 20px; align-items: start; }
.two-field-grid .field { display: flex; flex-direction: column; gap: 6px; }

/* Ensure record-common scoped variant also works if pages add .record-common on body */
.record-common .two-field-grid { grid-template-columns: 1fr 1fr; }
.record-common .two-field-grid .field { gap:6px; }

/* Per-status themes for active status pills (work and admin_qc pages)
   These use data-* attributes so no JS changes are necessary; when the button
   receives .btn-primary the appropriate color is applied based on its data attr.
*/

/* Work statuses: NI (neutral), WIP (primary blue), QCR (danger/red), ISC (success/green) */
.status-pill-alt.btn-primary[data-alt-status="NI"],
.status-pill-alt.btn-primary[data-alt-status="NI"]:not([disabled]) {
  background: linear-gradient(180deg,#f3f6f9,#eef4fb);
  color: var(--color-text) !important;
  border-color: rgba(12,18,30,0.06) !important;
  box-shadow: 0 6px 18px rgba(8,12,20,0.06);
}
.status-pill-alt.btn-primary[data-alt-status="WIP"] {
  background: linear-gradient(180deg,var(--color-accent),var(--color-accent-600));
  color: #fff !important;
}
.status-pill-alt.btn-primary[data-alt-status="QCR"] {
  background: linear-gradient(180deg,var(--color-danger),#b82b22);
  color: #fff !important;
}
.status-pill-alt.btn-primary[data-alt-status="ISC"] {
  background: linear-gradient(180deg,var(--color-success),#0c7a52);
  color: #fff !important;
}

/* Admin QC statuses: POSITIVE (green), NEGATIVE (red), UTV (yellow/warn), STOP (muted), DISMIN (amber), DISMAJ (red dark) */
.altb-pill.btn-primary[data-altb-status="POSITIVE"] {
  background: linear-gradient(180deg,var(--color-success),#0d864c);
  color: #fff !important;
}
.altb-pill.btn-primary[data-altb-status="NEGATIVE"],
.altb-pill.btn-primary[data-altb-status="DISMAJ"] {
  background: linear-gradient(180deg,var(--color-danger),#a32723);
  color: #fff !important;
}
.altb-pill.btn-primary[data-altb-status="UTV"],
.altb-pill.btn-primary[data-altb-status="DISMIN"] {
  background: linear-gradient(180deg,var(--color-warn),#c77e12);
  color: #1f2933 !important; /* dark text on amber */
}
.altb-pill.btn-primary[data-altb-status="STOP"] {
  background: linear-gradient(180deg,#f3f4f6,#e9eef8);
  color: var(--color-text) !important;
  border-color: rgba(12,18,30,0.06) !important;
}

/* Ensure status-count-badge remains readable on colored pills */
.status-pill-alt.btn-primary .status-count-badge,
.altb-pill.btn-primary .status-count-badge {
  background: rgba(255,255,255,0.12);
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Slight hover darken for primary status pills to indicate press */
.status-pill-alt.btn-primary:hover, .altb-pill.btn-primary:hover { filter:brightness(.96); }

/* Fallback: when btn-primary present but no data attr mapping, use brand accent */
.status-pill-alt.btn-primary:not([data-alt-status]), .altb-pill.btn-primary:not([data-altb-status]) {
  background: linear-gradient(180deg,var(--color-accent),var(--color-accent-600));
  color: #fff !important;
}