:root{
  --bg: #f5f7f6;
  --surface: #ffffff;
  --text: #0f1f17;
  --muted: #5a6b62;

  --green-900:#0b3d2e;
  --green-800:#0f5a42;
  --green-700:#147a56;

  --border:#d9e2dd;
  --shadow: 0 10px 35px rgba(12, 31, 22, .10);
  --shadow2: 0 6px 18px rgba(12, 31, 22, .08);

  --radius: 16px;
  --radius2: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}

input, select, textarea, button{
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

body{
  margin:0;
  background: var(--bg);
  color: var(--text);
  font-family: "Inter", Arial, sans-serif;
  line-height:1.45;
}

a{ color: var(--green-800); text-decoration:none; }
a:hover{ text-decoration:underline; }

.container{
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 18px;
}

/* HEADER */
.header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 247, 246, .85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}

.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 14px 0;
  gap: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 240px;
}

.brand-badge{
  width:42px;height:42px;
  border-radius: 12px;
  background: var(--green-900);
  box-shadow: var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-weight:800;
  letter-spacing:.3px;
}

.brand-text .title{
  font-size: 15px;
  font-weight: 700;
  color: var(--green-900);
  letter-spacing:.2px;
}
.brand-text .subtitle{
  font-size: 12.5px;
  color: var(--muted);
  margin-top:2px;
}

.nav{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content:flex-end;
}

.nav a{
  font-size: 13px;
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 10px;
}
.nav a:hover{
  color: var(--green-900);
  background: rgba(20,122,86,.08);
  text-decoration:none;
}

.nav .pill{
  background: rgba(15,90,66,.12);
  color: var(--green-900);
  font-weight: 700;
}

/* PAGE HERO STRIP */
.hero{
  padding: 18px 0 10px;
}
.hero-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.hero h1{
  margin:0;
  font-size: 22px;
  letter-spacing:.2px;
  color: var(--green-900);
}
.hero p{
  margin: 6px 0 0;
  font-size: 13.5px;
  color: var(--muted);
}

/* ALERTS */
.alert{
  border:1px solid var(--border);
  border-left: 0;
  background: #f1fbf6;
  padding: 10px 12px;
  border-radius: 14px;
  margin: 12px 0 16px;
  font-size: 13px;
}
.alert.error{
  border-left-color:transparent;
  background:#fff4f4;
}

/* MAIN GRID */
.grid{
  display:grid;
  grid-template-columns: 3fr 1.15fr;
  gap: 16px;
  padding: 8px 0 28px;
}

@media (max-width: 980px){
  .grid{ grid-template-columns: 1fr; }
}

/* SLIDESHOW CARD */
.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.slideshow{
  position:relative;
  min-height: 520px;
}

.slide{
  display:none;
  height: 520px;
  position:relative;
}
.slide.active{ display:block; }

.slide-bg{
  position:absolute;
  inset:0;
  background-size: contain !important;
  background-color: #f4f7f6;
  background-repeat: no-repeat !important;
  background-position:center;
  filter: saturate(1.02);
}
.slide-overlay{
  position:absolute;
  inset:0;
  background: transparent;
}

.slide-content{
  position:absolute;
  inset:0;
  padding: 26px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap: 10px;
  color:#fff;
}

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.18);
  width: fit-content;
}
.badge .dot{
  width:8px;height:8px;border-radius:50%;
  background: #a7f3d0;
}

.slide-title{
  margin:0;
  font-size: 26px;
  letter-spacing:.2px;
  font-weight: 800;
}
.slide-meta{
  font-size: 13px;
  opacity: .92;
}
.slide-desc{
  margin: 0;
  max-width: 680px;
  font-size: 14.5px;
  opacity: .96;
}

.slide-actions{
  display:flex;
  gap:10px;
  margin-top: 6px;
  flex-wrap: wrap;
}

.btn{
  border: none;
  cursor:pointer;
  font-size: 13.5px;
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 700;
  display:inline-flex;
  align-items:center;
  gap: 8px;
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease;
}
.btn:active{ transform: translateY(1px); }

.btn-primary{
  background: #ffffff;
  color: var(--green-900);
  box-shadow: 0 10px 25px rgba(0,0,0,.18);
}
.btn-primary:hover{ background: #f2fff8; }

.btn-ghost{
  background: rgba(255,255,255,.14);
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
}
.btn-ghost:hover{ background: rgba(255,255,255,.20); }

.slide-controls{
  position:absolute;
  right: 14px;
  bottom: 14px;
  display:flex;
  gap:10px;
  align-items:center;
}
.icon-btn{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(0,0,0,.18);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}
.icon-btn:hover{ background: rgba(0,0,0,.28); }

.dots{
  display:flex;
  gap:8px;
  align-items:center;
  margin-left: 6px;
}
.dotbtn{
  width: 10px;height:10px;border-radius: 999px;
  border: 1px solid rgba(255,255,255,.55);
  background: rgba(255,255,255,.18);
  cursor:pointer;
  opacity: .8;
}
.dotbtn.active{
  background: #a7f3d0;
  border-color: #a7f3d0;
  opacity: 1;
}

/* RIGHT LOGIN PANEL */
.panel{
  padding: 18px;
}

.panel-head{
  display:flex;
  flex-direction:column;
  gap: 4px;
  margin-bottom: 14px;
}
.panel-head .h{
  font-size: 16px;
  font-weight: 900;
  color: var(--green-900);
}
.panel-head .p{
  font-size: 13px;
  color: var(--muted);
  margin:0;
}

.form{
  display:flex;
  flex-direction:column;
  gap: 12px;
}

.field label{
  display:block;
  font-size: 12.8px;
  color: var(--muted);
  margin-bottom: 6px;
}
.input{
  display:flex;
  align-items:center;
  gap: 10px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 10px 12px;
  background: #fff;
}
.input svg{
  width: 18px;height:18px;
  color: var(--green-800);
  opacity: .9;
}
.input input{
  border:none;
  outline:none;
  width:100%;
  font-size: 14px;
  background: transparent;
}
.input:focus-within{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}

.row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.smalllink{
  font-size: 12.8px;
  color: var(--green-800);
  font-weight: 700;
}

.login-btn{
  width:100%;
  background: var(--green-900);
  color:#fff;
  box-shadow: 0 10px 25px rgba(11,61,46,.18);
}
.login-btn:hover{
  filter: brightness(1.02);
}

.secondary{
  width:100%;
  background: #fff;
  border: 1px solid var(--border);
  color: var(--green-900);
}
.secondary:hover{ background: #f7fbf9; }

.panel-foot{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap: 8px;
  font-size: 12.8px;
  color: var(--muted);
}

.kv{
  display:flex;
  align-items:flex-start;
  gap: 10px;
}
.kv svg{ width:18px;height:18px;color:var(--green-800); margin-top:2px; }
.kv b{ color: var(--text); }

/* FOOTER */
.footer{
  border-top: 1px solid var(--border);
  padding: 14px 0 24px;
  color: var(--muted);
  font-size: 12.5px;
}

/* --- add-ons for forms + dashboard --- */
.page-wrap{ padding: 6px 0 28px; }
.card-pad{ padding: 18px; }

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-grid.three{ grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 980px){
  .form-grid, .form-grid.three{ grid-template-columns: 1fr; }
}

.hint{
  font-size: 12.6px;
  color: var(--muted);
  margin-top: 6px;
}

.radio-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 12px;
  border:1px solid var(--border);
  border-radius: 12px;
  background:#fff;
  font-size: 13.2px;
  color: var(--text);
  cursor:pointer;
}
.radio-pill input{ margin:0; }

.section-title{
  font-size: 14px;
  font-weight: 700;
  color: var(--green-900);
  margin: 0 0 10px;
}

.hr{ height:1px; background:var(--border); border:none; margin:14px 0; }

.dash-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .dash-grid{ grid-template-columns: 1fr; } }

.stat{
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--shadow2);
}
.stat .k{ font-size: 12.8px; color: var(--muted); }
.stat .v{ font-size: 18px; font-weight: 700; color: var(--green-900); margin-top:4px; }

/* Buttons: default = normal size (not full width) */
.login-btn, .secondary { width:auto; }
.btn-wide{ width:100%; justify-content:center; }

/* Page spacing */
.page-wrap{ padding: 10px 0 28px; }
.card-pad{ padding: 18px; }

.actions{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.actions .btn{ padding: 10px 12px; border-radius: 12px; }

/* Tables */
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow: var(--shadow2);
}
.table th{
  text-align:left;
  font-size:12.5px;
  color: var(--muted);
  background:#f7fbf9;
  padding:12px;
  border-bottom:1px solid var(--border);
  white-space:nowrap;
}
.table td{
  padding:12px;
  font-size:13.5px;
  border-bottom:1px solid var(--border);
  vertical-align:top;
}
.table tr:last-child td{ border-bottom:none; }

.status-pill{
  display:inline-flex;
  padding:6px 10px;
  font-size:12px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#f7fbf9;
  color: var(--green-900);
  font-weight:700;
}

/* Form grids */
.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .form-grid{ grid-template-columns:1fr; } }

.radio-pills{ display:flex; gap:10px; flex-wrap:wrap; }
.radio-pill{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:12px;
  background:#fff;
  font-size: 13.2px;
  cursor:pointer;
}
.radio-pill input{ margin:0; }

.hint{ font-size:12.6px; color:var(--muted); margin-top:6px; }
.hr{ height:1px; background:var(--border); border:none; margin:14px 0; }
.section-title{
  font-size: 14px;
  font-weight: 700; color:var(--green-900); margin:0 0 10px; }

/* =========================
   Portal Form Controls
   ========================= */
.control{ margin-bottom:12px; }
.control label{
  display:block;
  font-size:12.8px;
  color:var(--muted);
  margin-bottom:6px;
}
.req{ color:#b42318; font-weight:900; margin-left:2px; }

.input{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:14px;
  padding: 11px 12px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.input:focus-within{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}
.input input, .input textarea{
  border:none;
  outline:none;
  width:100%;
  font-size:14px;
  background:transparent;
  color:var(--text);
}
.input textarea{ resize:vertical; min-height: 140px; }
.input svg{ width:18px; height:18px; color:var(--green-800); opacity:.9; }

/* Select */
.select{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid var(--border);
  border-radius:14px;
  padding: 11px 12px;
  background:#fff;
}
.select:focus-within{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}
.select select{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
  appearance:none;
  color:var(--text);
  padding-right:28px;
}
.select::after{
  content:"";
  position:absolute;
  right:12px;
  width:10px;
  height:10px;
  border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);
  transform: rotate(45deg);
  opacity:.75;
}

/* Hint */
.hint{
  font-size:12.6px;
  color:var(--muted);
  margin-top:6px;
}

/* Buttons sizing (not full width by default) */
.btn{ padding:10px 12px; border-radius:12px; font-size:13.5px; }
.btn-sm{ padding:8px 10px; border-radius:10px; font-size:13px; }
.btn-wide{ width:100%; justify-content:center; }

/* =========================
   Upload widgets
   ========================= */
.file-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
@media (max-width: 980px){ .file-grid{ grid-template-columns: 1fr; } }

.filebox{
  border:1px dashed rgba(15,90,66,.35);
  background: #fff;
  border-radius:14px;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.filebox-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.filemeta{
  display:flex;
  gap:10px;
  align-items:flex-start;
}
.filemeta svg{ width:18px; height:18px; color:var(--green-800); }
.filemeta .t{ font-weight:900; color:var(--green-900); font-size:13.5px; margin:0; }
.filemeta .s{ font-size:12.5px; color:var(--muted); margin-top:2px; }
.filebtn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--green-900);
  font-weight:800;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  white-space:nowrap;
}
.filebtn:hover{ background:#f7fbf9; }
.filename{
  font-size:12.8px;
  color:var(--muted);
  display:flex;
  gap:8px;
  align-items:center;
}
.chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  font-size:12px;
  font-weight:700;
  color:var(--green-900);
}
.chip.ok{ background:#ecfdf3; border-color:#abefc6; }
.filebox input[type="file"]{ display:none; }

/* =========================
   Co-proponents cards
   ========================= */
.member-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  padding:12px;
  box-shadow: var(--shadow2);
}
.member-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}
.member-head b{ color:var(--green-900); font-size:13.5px; }
.icon-danger{
  border:1px solid var(--border);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.icon-danger:hover{ background:#fff4f4; border-color:#fecdca; }

/* =========================
   Dashboard table polish
   ========================= */
.table tr:hover td{ background:#f7fbf9; }
.table td{ transition: background .15s ease; }
.table th{ position:sticky; top:0; z-index:2; }
.table-wrap{
  max-height: 520px;
  overflow:auto;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow: var(--shadow2);
}

/* Search input on dashboard */
.searchbar{
  display:flex;
  gap:10px;
  align-items:center;
  border:1px solid var(--border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
  max-width: 520px;
}
.searchbar svg{ width:18px; height:18px; color:var(--green-800); }
.searchbar input{
  border:none;
  outline:none;
  width:100%;
  font-size:14px;
  background:transparent;
}
/* =========================
   Attachment widgets (lighter + cleaner)
   Paste at END of style.css
   ========================= */
.filebox{
  border: 1px solid var(--border);
  border-left: 6px solid rgba(15,90,66,.35);
  background: #ffffff;
  box-shadow: var(--shadow2);
}

.filebox:hover{
  border-left-color: rgba(15,90,66,.70);
  box-shadow: 0 12px 26px rgba(12,31,22,.10);
  transform: translateY(-1px);
  transition: .15s ease;
}

.filebox-top{
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(217,226,221,.65);
}

.filemeta{
  align-items: center;
}

.filemeta svg{
  width: 18px;
  height: 18px;
  color: var(--green-800);
}

.filemeta .t{
  color: var(--green-900);
  font-weight: 900;
}

.filemeta .s{
  color: var(--muted);
}

/* Make the “Selected filename” look like a neat info strip */
.filename{
  background: #f7fbf9;
  border: 1px solid rgba(217,226,221,.8);
  border-radius: 12px;
  padding: 8px 10px;
  margin-top: 4px;
}

/* Chips: soft, not loud */
.chip{
  background: #f7fbf9;
  border-color: rgba(217,226,221,.9);
  color: var(--green-900);
}

.chip.ok{
  background: #ecfdf3;
  border-color: #abefc6;
  color: #067647;
}

/* Upload button: softer + more “portal” */
.filebtn{
  border: 1px solid rgba(15,90,66,.25);
  background: rgba(15,90,66,.06);
  color: var(--green-900);
}

.filebtn:hover{
  background: rgba(15,90,66,.10);
  border-color: rgba(15,90,66,.35);
}

/* Optional: soften dashed look if you still see it somewhere */
.filebox{
  outline: none;
}
/* =========================
   DataTables portal skin
   ========================= */
.dataTables_wrapper{
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length{
  margin-bottom: 10px;
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label{
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--border);
  border-radius: 14px;
  padding:10px 12px;
  outline:none;
  margin-left:8px;
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}

.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border);
  border-radius: 14px;
  padding:9px 10px;
  outline:none;
  margin: 0 8px;
  background:#fff;
}

table.dataTable{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow2);
}

table.dataTable thead th{
  background:#f7fbf9 !important;
  color: var(--muted) !important;
  font-size: 12.5px;
  border-bottom:1px solid var(--border) !important;
}

table.dataTable tbody td{
  border-bottom:1px solid var(--border) !important;
  font-size: 13.5px;
}

table.dataTable tbody tr:hover td{
  background:#f7fbf9;
}

.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  padding:6px 10px !important;
  margin: 0 2px !important;
  background:#fff !important;
  color: var(--green-900) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(15,90,66,.12) !important;
  border-color: rgba(15,90,66,.25) !important;
  color: var(--green-900) !important;
}

.dt-buttons .dt-button{
  border:1px solid var(--border) !important;
  background:#fff !important;
  color: var(--green-900) !important;
  border-radius:12px !important;
  padding:8px 10px !important;
  font-weight: 800 !important;
  margin-right:6px !important;
}
.dt-buttons .dt-button:hover{
  background:#f7fbf9 !important;
}

/* Admin layout (sidebar) */
.admin-layout{
  display:grid;
  grid-template-columns: 240px 1fr;
  gap: 14px;
}
@media (max-width: 980px){
  .admin-layout{ grid-template-columns:1fr; }
}

.admin-side{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow2);
  padding: 12px;
}

.stage-link{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  margin-bottom:8px;
  color: var(--green-900);
  font-weight: 900;
  text-decoration:none;
}
.stage-link.active{
  background: rgba(15,90,66,.10);
  border-color: rgba(15,90,66,.25);
}
.badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:22px;
  height:22px;
  padding:0 7px;
  border-radius:999px;
  background: var(--green-800);
  color:#fff;
  font-size:12px;
  font-weight:900;
}

.admin-main{
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  box-shadow: var(--shadow2);
  padding: 14px;
}

.filter-toggle{
  border:1px solid var(--border);
  background:#fff;
  color:var(--green-900);
  font-weight:900;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
}
.filter-toggle:hover{ background:#f7fbf9; }

.filters-panel{
  display:none;
  margin-top:12px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:#f9fbfa;
}
/* Researcher dashboard header */
.userbar{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.userchip{
  display:flex; align-items:center; gap:12px;
}
.avatar{
  width:46px; height:46px; border-radius:16px;
  border:1px solid var(--border);
  object-fit:cover;
  background:#fff;
}
.nameblock .nm{
  font-size:15px;
  font-weight:700;
  color: var(--green-900);
  margin:0;
}
.nameblock .em{
  font-size:13px;
  color: var(--muted);
  margin-top:2px;
}

/* Make weights look uniform */
.section-title{ font-weight:800; letter-spacing:.2px; }
.status-pill{ font-weight:700; }

/* Track icon link */
.track-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:7px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--green-900);
  font-weight:800;
  font-size:13px;
  text-decoration:none;
}
.track-link:hover{ background:#f7fbf9; }
.track-link svg{ width:16px; height:16px; }

/* DataTables looks consistent */
table.dataTable tbody td{
  font-size:13.5px !important;
}
table.dataTable thead th{
  font-size:12.5px !important;
  letter-spacing:.2px;
}

/* =========================
   Researcher Dashboard Layout
   ========================= */
.rdash{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap: 14px;
  align-items:start;
}
@media (max-width: 980px){
  .rdash{ grid-template-columns: 1fr; }
}

.profile-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow2);
  padding: 14px;
}

.profile-top{
  display:flex;
  gap: 12px;
  align-items:center;
}

.avatar-lg{
  width: 86px;
  height: 86px;
  border-radius: 18px;
  object-fit: cover;
  border: 1px solid var(--border);
  background:#fff;
}

.profile-name{
  font-size: 16px;
  font-weight: 800;
  color: var(--green-900);
  margin:0;
}
.profile-email{
  font-size: 13px;
  color: var(--muted);
  margin-top:4px;
  word-break: break-word;
}

.profile-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 12px;
}
.profile-actions .btn{ padding: 9px 11px; }

.quick-info{
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
  font-size: 13px;
  color: var(--muted);
}
.quick-info b{ color: var(--text); }

.main-card{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow);
  padding: 14px;
}

/* Track icon button */
.icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background:#fff;
  color: var(--green-900);
  text-decoration:none;
}
.icon-link:hover{ background:#f7fbf9; }
.icon-link svg{ width:18px; height:18px; }

/* More uniform typography */
.section-title{
  font-weight: 800;
  letter-spacing: .2px;
}
.table-title{
  font-weight: 650;
  color: var(--green-900);
}

/* DataTables skin (keeps it consistent with portal) */
.dataTables_wrapper{
  font-family: "Segoe UI", Arial, sans-serif;
  color: var(--text);
}
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--border);
  border-radius: 14px;
  padding:10px 12px;
  outline:none;
  margin-left:8px;
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border);
  border-radius: 14px;
  padding:9px 10px;
  outline:none;
  margin: 0 8px;
  background:#fff;
}
table.dataTable{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
table.dataTable thead th{
  background:#f7fbf9 !important;
  color: var(--muted) !important;
  font-size:12.5px;
  border-bottom:1px solid var(--border) !important;
}
table.dataTable tbody td{
  border-bottom:1px solid var(--border) !important;
  font-size:13.5px;
}
table.dataTable tbody tr:hover td{ background:#f7fbf9; }
.dataTables_wrapper .dataTables_paginate .paginate_button{
  border:1px solid var(--border) !important;
  border-radius:12px !important;
  padding:6px 10px !important;
  margin: 0 2px !important;
  background:#fff !important;
  color: var(--green-900) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background: rgba(15,90,66,.12) !important;
  border-color: rgba(15,90,66,.25) !important;
}

/* =========================
   Upload grid (uniform even with odd count)
   ========================= */
.upload-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 1100px){ .upload-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .upload-grid{ grid-template-columns: 1fr; } }

.upload-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow: var(--shadow2);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 130px;
}

.upload-title{
  font-weight:900;
  color: var(--green-900);
  font-size:13.5px;
}
.upload-sub{
  color: var(--muted);
  font-size:12.5px;
  margin-top:-2px;
}

.upload-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  color: var(--green-900);
  background:#f7fbf9;
}
.upload-chip.ok{
  background:#ecfdf3;
  border-color:#abefc6;
  color:#067647;
}

.upload-row{
  margin-top:auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}

.upload-btn{
  border:1px solid rgba(15,90,66,.25);
  background: rgba(15,90,66,.06);
  color: var(--green-900);
  font-weight:900;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width: 100%;
}
.upload-btn:hover{ background: rgba(15,90,66,.10); }
.upload-btn span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 220px;
}

.upload-clear{
  border:1px solid var(--border);
  background:#fff;
  color: var(--muted);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:800;
}
.upload-clear:hover{ background:#f7fbf9; }

.upload-input{ display:none; }

/* Typography normalization */
body{ font-size:14px; line-height:1.45; }
.title{ font-weight:800; }
.subtitle{ font-weight:600; }
.btn{ font-weight:800; }

/* ===== Researcher Dashboard polish ===== */
.userbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap;
}
.userchip{ display:flex; align-items:center; gap:12px; }
.avatar{
  width:42px !important;
  height:42px !important;
  max-width:none !important;       /* prevents huge image */
  border-radius:999px !important;  /* FB-like circle */
  object-fit:cover !important;
  border:1px solid var(--border);
  background:#fff;
  display:block;
}
.nameblock .nm{
  font-size:15px;
  font-weight:800;
  color:var(--green-900);
  margin:0;
}
.nameblock .em{
  font-size:13px;
  color:var(--muted);
  margin-top:2px;
}
.table-title{ font-weight:800; color:var(--green-900); }
.icon-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:36px;
  border-radius:12px;
  border:1px solid var(--border);
  background:#fff;
  color:var(--green-900);
  text-decoration:none;
}
.icon-link:hover{ background:#f7fbf9; }
.icon-link svg{ width:18px; height:18px; }

/* ===== Upload grid (UNIFORM + forces native file input hidden) ===== */
.upload-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 1100px){ .upload-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .upload-grid{ grid-template-columns: 1fr; } }

.upload-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow: var(--shadow2);
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:8px;
  min-height: 132px;
}
.upload-title{
  font-weight:900;
  color: var(--green-900);
  font-size:13.5px;
}
.upload-sub{
  color: var(--muted);
  font-size:12.5px;
  margin-top:-2px;
}
.upload-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid var(--border);
  font-size:12px;
  font-weight:800;
  color: var(--green-900);
  background:#f7fbf9;
  width:max-content;
}
.upload-chip.ok{
  background:#ecfdf3;
  border-color:#abefc6;
  color:#067647;
}
.upload-row{
  margin-top:auto;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
}
.upload-btn{
  border:1px solid rgba(15,90,66,.25);
  background: rgba(15,90,66,.06);
  color: var(--green-900);
  font-weight:900;
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
  max-width: 100%;
}
.upload-btn:hover{ background: rgba(15,90,66,.10); }
.upload-btn span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width: 220px;
}
.upload-clear{
  border:1px solid var(--border);
  background:#fff;
  color: var(--muted);
  border-radius:12px;
  padding:8px 10px;
  cursor:pointer;
  font-weight:800;
}
.upload-clear:hover{ background:#f7fbf9; }

/* IMPORTANT: hide the browser file input no matter what */
.upload-card input[type="file"]{ display:none !important; }

/* ===== DataTables portal skin ===== */
.dataTables_wrapper .dataTables_filter input{
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  margin-left:8px;
}
.dataTables_wrapper .dataTables_filter input:focus{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}
.dataTables_wrapper .dataTables_length select{
  border:1px solid var(--border);
  border-radius:14px;
  padding:9px 10px;
  outline:none;
  margin: 0 8px;
  background:#fff;
}
table.dataTable{
  border-collapse:separate !important;
  border-spacing:0 !important;
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  box-shadow: var(--shadow2);
}
table.dataTable thead th{
  background:#f7fbf9 !important;
  color: var(--muted) !important;
  font-size:12.5px;
  border-bottom:1px solid var(--border) !important;
}
table.dataTable tbody td{
  border-bottom:1px solid var(--border) !important;
  font-size:13.5px;
}
table.dataTable tbody tr:hover td{ background:#f7fbf9; }

/* Header nav: make all links uniform */
.header .nav a{
  text-decoration:none;
  color: var(--green-900);
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  font-weight:800;
  font-size:13px;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.header .nav a:hover{
  background:#f7fbf9;
  border-color: var(--border);
}
.header .nav a.pill{
  background: rgba(15,90,66,.12);
  border-color: rgba(15,90,66,.25);
}

/* =========================
   Typography softening (less bold)
   ========================= */

/* Base */
body{ font-weight: 400; }
strong, b{ font-weight: 600; }

/* Brand */
.title{ font-weight: 700; }
.subtitle{ font-weight: 500; opacity:.9; }

/* Section headings */
.section-title{
  font-weight: 700;
  letter-spacing: .15px;
}

/* Labels should not be too bold */
.control label{
  font-weight: 600;
  color: var(--muted);
}

/* Buttons */
.btn{ font-weight: 700; }
.btn.secondary{ font-weight: 650; }

/* Pills / status */
.status-pill{ font-weight: 650; }

/* Table title inside rows */
.table-title{ font-weight: 650; }

/* Header nav */
.header .nav a{ font-weight: 650; }
.header .nav a.pill{ font-weight: 700; }

/* =========================
   Better dropdown/select styling
   ========================= */
.select{
  position: relative;
  display:flex;
  align-items:center;
  border:1px solid var(--border);
  border-radius:14px;
  padding: 10px 12px;
  background:#fff;
  box-shadow: 0 1px 0 rgba(0,0,0,.02);
}
.select:focus-within{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}
.select select{
  width:100%;
  border:none;
  outline:none;
  background:transparent;
  font-size:14px;
  color: var(--text);
  appearance:none;
  padding-right:28px;
}
.select::after{
  content:"";
  position:absolute;
  right:12px;
  width:10px; height:10px;
  border-right:2px solid rgba(0,0,0,.35);
  border-bottom:2px solid rgba(0,0,0,.35);
  transform: rotate(45deg);
  pointer-events:none;
}

/* =========================
   Profile page polish
   ========================= */
.profile-head{
  display:flex;
  align-items:center;
  gap:14px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
  margin-bottom:12px;
}
.profile-head .avatar-xl{
  width:72px;
  height:72px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid var(--border);
  max-width:none !important;
}
.profile-head .pname{
  margin:0;
  font-size:16px;
  font-weight:700;
  color: var(--green-900);
}
.profile-head .pemail{
  margin-top:3px;
  font-size:13px;
  color: var(--muted);
}

/* Make section titles inside profile softer */
.profile-section-title{
  font-weight:700;
  font-size:14px;
  color: var(--green-900);
  margin: 12px 0 10px;
}

/* =========================
   Cleaner radio group
   ========================= */
.radio-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.radio-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  font-weight:650;
  color: var(--text);
}
.radio-pill input{ transform: translateY(1px); }
.radio-pill:focus-within{
  border-color: var(--green-800);
  box-shadow: 0 0 0 3px rgba(15,90,66,.14);
}

.btn{ font-size:13.5px; padding:10px 12px; }
.btn.secondary{ background:#fff; }

/* =========================
   FONT NORMALIZATION (uniform + less bold)
   ========================= */
:root{
  --app-font: "Segoe UI", Tahoma, Arial, sans-serif;
}

html, body{
  font-family: var(--app-font);
  font-size: 14px;
  font-weight: 400;
  color: var(--text);
}

/* Headings: still formal but not heavy */
.title{ font-weight: 700; }
.subtitle{ font-weight: 500; }
.section-title{ font-weight: 650; }

/* Labels and buttons */
.control label{ font-weight: 600; color: var(--muted); }
.btn{ font-weight: 650; }
.header .nav a{ font-weight: 600; }

/* Table text: remove bold look */
table, th, td{ font-family: var(--app-font) !important; }
table.dataTable thead th{
  font-weight: 600 !important;
  letter-spacing: .15px;
}
table.dataTable tbody td{
  font-weight: 400 !important;
}
.table-title{
  font-weight: 500 !important;   /* was too bold */
  color: var(--green-900);
}

/* If you used status pills */
.status-pill{ font-weight: 600; }

/* ===== Calm upload control (profile) ===== */
.upload-lite{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
  background:#fff;
  box-shadow: var(--shadow2);
}
.upload-lite .left{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.upload-lite .utitle{
  font-weight:650;
  color:var(--green-900);
}
.upload-lite .ufile{
  font-size:13px;
  color:var(--muted);
}
.upload-lite .btnrow{
  display:flex;
  gap:8px;
  align-items:center;
}
.filepick{
  border:1px solid var(--border);
  background:#fff;
  color:var(--green-900);
  border-radius:12px;
  padding:9px 12px;
  font-weight:650;
  cursor:pointer;
}
.filepick:hover{ background:#f7fbf9; }
.fileclear{
  border:1px solid var(--border);
  background:#fff;
  color:var(--muted);
  border-radius:12px;
  padding:9px 12px;
  font-weight:650;
  cursor:pointer;
}
.fileclear:hover{ background:#f7fbf9; }

/* hide real input */
.upload-lite input[type="file"]{ display:none !important; }

/* =========================
   Calm attachment cards (NOT bold, NOT edgy)
   ========================= */
.upload-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:12px;
}
@media (max-width: 1100px){ .upload-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 720px){ .upload-grid{ grid-template-columns: 1fr; } }

.upload-card{
  border:1px solid var(--border);
  border-radius:14px;
  background:#fff;
  box-shadow: 0 8px 22px rgba(12,31,22,.06);
  padding:12px;
}

.upload-title{
  font-weight: 650;
  color: var(--green-900);
  font-size: 13.5px;
  margin:0;
}

.upload-sub{
  font-size: 12.5px;
  color: var(--muted);
  margin-top:4px;
}

/* filename line */
.upload-fname{
  margin-top:10px;
  font-size: 12.8px;
  color: var(--muted);
  padding:8px 10px;
  border:1px solid rgba(217,226,221,.9);
  border-radius: 12px;
  background:#f9fbfa;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* actions */
.upload-actions{
  margin-top:10px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}

/* calm choose button */
.filepick{
  border:1px solid var(--border);
  background:#fff;
  color: var(--green-900);
  border-radius:12px;
  padding:8px 10px;
  font-weight: 600;
  cursor:pointer;
}
.filepick:hover{ background:#f7fbf9; }

/* clear text button */
.fileclear{
  border:none;
  background:transparent;
  color: var(--muted);
  font-weight: 600;
  cursor:pointer;
  padding:8px 6px;
}
.fileclear:hover{ color: var(--green-900); text-decoration:underline; }

/* hide actual input */
.upload-card input[type="file"]{ display:none !important; }

/* Final softening override */
.section-title{ font-weight:650 !important; }
.upload-title{ font-weight:650 !important; }
.btn{ font-weight:650 !important; }


/* Admin header icons + user */
.header .nav{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-icon{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  border-radius:14px;
  border:1px solid var(--border);
  background:#fff;
  color: var(--green-900);
  text-decoration:none;
}
.nav-icon:hover{ background:#f7fbf9; }
.nav-ico{ display:flex; align-items:center; justify-content:center; }
.nav-ico svg{ width:18px; height:18px; display:block; }
.notif-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:18px;
  height:18px;
  padding:0 5px;
  border-radius:999px;
  background:#b42318;
  color:#fff;
  font-size:11px;
  font-weight:800;
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid #fff;
}

.nav-user{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background:#fff;
  text-decoration:none;
  color: var(--text);
}
.nav-user:hover{ background:#f7fbf9; }
.nav-user-avatar{
  width:30px; height:30px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: var(--green-900);
  color:#fff;
  font-weight:800;
  font-size:12px;
}
.nav-user-img{
  width:30px; height:30px;
  border-radius:999px;
  object-fit:cover;
  border:1px solid var(--border);
}
.nav-user-name{
  font-weight:700;
  font-size:13px;
  white-space:nowrap;
  max-width:160px;
  overflow:hidden;
  text-overflow:ellipsis;
}

.btn, .btn-mini, .login-btn{
  font-family: inherit;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 1; /* optional: keeps vertical centering neat */
}
.btn{
  font-size:13.5px;
}
.btn-mini{
  font-size:13px;
  padding:8px 10px;
}


/* Stage overview cards (Admin Dashboard) */
/* Admin Dashboard Overview: 6 cards in one row (desktop) */
.dash-grid.stage-grid{
  grid-template-columns: repeat(6, minmax(140px, 1fr));
  gap: 12px;
}

/* Responsive fallbacks */
@media (max-width: 1400px){
  .dash-grid.stage-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px){
  .dash-grid.stage-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px){
  .dash-grid.stage-grid{ grid-template-columns: 1fr; }
}

.dash-grid.stage-grid .stat{
  position: relative;
  overflow: hidden;
  padding: 16px 18px;
  border-radius: 18px;
  box-shadow: var(--shadow);
  background: #fff;
  text-align: center;
}

.dash-grid.stage-grid .stat::before{
  content:"";
  position:absolute;
  inset:0;
  background: transparent;
  pointer-events:none;
}

.dash-grid.stage-grid .stat::after{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:2px;
  background: var(--accent, var(--green-700));
  opacity: .95;
  pointer-events:none;
}

.dash-grid.stage-grid .stat .k{
  position:relative;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .2px;
  width: 100%;
}

.dash-grid.stage-grid .stat .v{
  position:relative;
  font-size: 34px;
  font-weight: 800;
  color: var(--green-900);
  margin-top: 10px;
  line-height: 1;
  width: 100%;
}

.dash-grid.stage-grid .stat:hover{
  transform: translateY(-1px);
  transition: transform .12s ease;
}

/* Accent colors (subtle, still on-brand) */
.stat.st-pre{ --accent:#ffffff; }
.stat.st-eval{ --accent:#ffffff; }
.stat.st-preapp{ --accent:#ffffff; }
.stat.st-approval{ --accent:#ffffff; }
.stat.st-granted{ --accent:#ffffff; }
.stat.st-total{ --accent:#ffffff; }

/* ======================================================================
   CvSU REPORT — Formal Institutional UI v3
   Conservative administrative styling. No gradients, pills, glow effects,
   colored edge callouts, decorative helper panels, or oversized controls.
   ====================================================================== */
:root{
  --formal-bg:#f4f5f5;
  --formal-surface:#ffffff;
  --formal-text:#202522;
  --formal-heading:#141815;
  --formal-muted:#66706a;
  --formal-border:#d7dcda;
  --formal-border-strong:#bcc5c0;
  --formal-green:#15543b;
  --formal-green-dark:#103f2d;
  --formal-soft:#f7f8f8;
  --formal-danger:#9b2f2a;
  --formal-radius:3px;
  --formal-font:Inter,"Segoe UI",Arial,Helvetica,sans-serif;
}
html,body{font-family:var(--formal-font)!important;background:var(--formal-bg)!important;color:var(--formal-text)!important;font-size:14px!important;}
body,input,select,textarea,button,table,th,td,.dataTables_wrapper{font-family:var(--formal-font)!important;}
body{line-height:1.45!important;}

/* Remove decorative visual effects globally. */
.header,.card,.panel,.profile-card,.main-card,.admin-side,.admin-main,.filters-panel,
.upload-card,.upload-lite,.member-card,.stat,.note-box,.repo-item,.notif-card,.alert,
.btn,.login-btn,.secondary,.filepick,.fileclear,.filter-toggle,.upload-btn,.btn-mini,
.icon-link,.track-link,.nav-icon,.nav-user,.stage-link,.module-tabs a,.tabs a,.tab-list a,
.modal-content,.app-modal__panel,.dialog-panel,[role="dialog"] .modal-panel,.slideshow,.slide,
.input,.searchbar,.select{
  box-shadow:none!important;
  background-image:none!important;
  text-shadow:none!important;
}

/* Main shell */
.container{width:min(1260px,calc(100% - 36px))!important;max-width:1260px!important;}
.header{background:#fff!important;border-bottom:1px solid var(--formal-border)!important;backdrop-filter:none!important;}
.header-inner{min-height:60px!important;padding:8px 0!important;gap:18px!important;}
.page-wrap{padding-top:18px!important;padding-bottom:30px!important;}
.hero{padding:16px 0 6px!important;}
.hero h1,.page-title{font-size:21px!important;font-weight:600!important;letter-spacing:0!important;color:var(--formal-heading)!important;}
.section-title{font-size:15px!important;font-weight:600!important;color:var(--formal-heading)!important;letter-spacing:0!important;}

/* Navigation uses simple text and underline states, never filled pills. */
.header .nav{gap:12px!important;align-items:center!important;}
.header .nav a:not(.nav-icon):not(.nav-user){
  padding:8px 1px 7px!important;border:0!important;border-bottom:2px solid transparent!important;
  border-radius:0!important;background:transparent!important;color:#4a544f!important;
  font-size:13px!important;font-weight:500!important;text-decoration:none!important;
}
.header .nav a:not(.nav-icon):not(.nav-user):hover{background:transparent!important;color:var(--formal-heading)!important;border-bottom-color:#aeb8b3!important;}
.header .nav a.pill{background:transparent!important;color:var(--formal-green)!important;border-bottom-color:var(--formal-green)!important;font-weight:600!important;}
.nav-user,.nav-icon{border-radius:2px!important;border:1px solid var(--formal-border)!important;background:#fff!important;}
.nav-user:hover,.nav-icon:hover{background:#f7f8f8!important;}

/* Cards and panels are plain content containers, not floating app cards. */
.card,.panel,.profile-card,.main-card,.admin-side,.admin-main,.filters-panel,.upload-card,.upload-lite,
.member-card,.stat,.note-box,.repo-item,.notif-card,.table-wrap{
  background:#fff!important;border:1px solid var(--formal-border)!important;border-radius:3px!important;
}
.card-pad,.main-card,.profile-card,.admin-main{padding:16px!important;}
.stat{padding:14px!important;min-height:0!important;}
.stat .k{font-size:12.5px!important;font-weight:500!important;color:var(--formal-muted)!important;}
.stat .v{font-size:20px!important;font-weight:600!important;color:var(--formal-heading)!important;margin-top:4px!important;}

/* STATUS: plain text only. No badge, chip, pill, colored box, or border. */
.status-pill,.badge-soft,.badge,.chip,.upload-chip,.tag,.state-badge,.status-badge,
[class*="status-pill"],[class*="badge-soft"]{
  display:inline!important;padding:0!important;margin:0!important;min-width:0!important;height:auto!important;
  border:0!important;border-radius:0!important;background:transparent!important;background-image:none!important;
  box-shadow:none!important;color:#244c39!important;font-size:12.5px!important;font-weight:600!important;
  line-height:1.35!important;letter-spacing:0!important;text-transform:none!important;
}
.badge .dot,.status-pill .dot,.chip .dot{display:none!important;}

/* Forms: conventional rectangular controls. */
.control label,.field label,label{font-size:13px!important;font-weight:500!important;color:#39423e!important;}
.input,.searchbar,.select{padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;}
.input input,.input textarea,.input select,.searchbar input,
input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"],
textarea,select,.select select{
  min-height:36px!important;box-sizing:border-box!important;border:1px solid var(--formal-border-strong)!important;
  border-radius:3px!important;background:#fff!important;color:var(--formal-text)!important;font-size:13.5px!important;
  font-weight:400!important;box-shadow:none!important;outline:none!important;
}
.input input,.searchbar input,input[type="text"],input[type="email"],input[type="password"],input[type="number"],input[type="date"],input[type="time"]{padding:7px 9px!important;}
textarea{padding:8px 9px!important;line-height:1.45!important;}
select,.select select{padding:6px 30px 6px 9px!important;appearance:auto!important;-webkit-appearance:menulist!important;-moz-appearance:menulist!important;}
select option{font-family:var(--formal-font)!important;font-size:13.5px!important;font-weight:400!important;background:#fff!important;color:#222!important;}
.select::after{display:none!important;}
.input:focus-within,.searchbar:focus-within,.select:focus-within{border:0!important;box-shadow:none!important;outline:none!important;}
input:focus,textarea:focus,select:focus,.select select:focus{border-color:#6d8277!important;outline:1px solid #6d8277!important;outline-offset:0!important;box-shadow:none!important;}

/* Buttons: solid or outline, compact, almost square. */
.btn,.login-btn,.secondary,.filepick,.fileclear,.filter-toggle,.upload-btn,.btn-mini,.icon-link,.track-link{
  min-height:34px!important;padding:7px 11px!important;border-radius:3px!important;font-size:13px!important;
  font-weight:500!important;line-height:1.2!important;box-shadow:none!important;transform:none!important;
}
.btn-primary,.login-btn{background:var(--formal-green)!important;border:1px solid var(--formal-green)!important;color:#fff!important;}
.btn-primary:hover,.login-btn:hover{background:var(--formal-green-dark)!important;border-color:var(--formal-green-dark)!important;}
.secondary,.btn.secondary,.btn-outline{background:#fff!important;border:1px solid var(--formal-border-strong)!important;color:#303934!important;}
.secondary:hover,.btn.secondary:hover,.btn-outline:hover{background:#f5f6f6!important;border-color:#9fa9a4!important;}

/* Alerts are plain administrative messages — no colored edge and no capsule. */
.alert,.alert.error,.flash,.message,.notice{
  padding:9px 11px!important;margin:10px 0 14px!important;border:0!important;border-radius:0!important;
  background:#ecefed!important;color:#34403a!important;font-size:13px!important;font-weight:400!important;
}
.alert.error,.message.error,.notice.error{background:#f4eceb!important;color:var(--formal-danger)!important;}

/* Tabs/stages: line-based state, not filled rounded blocks. */
.module-tabs,.tabs,.tab-list{gap:0!important;border-bottom:1px solid var(--formal-border)!important;}
.module-tabs a,.tabs a,.tab-list a{
  padding:8px 11px!important;border:0!important;border-bottom:2px solid transparent!important;border-radius:0!important;
  background:transparent!important;color:#4c5751!important;font-size:13px!important;font-weight:500!important;
}
.module-tabs a.active,.tabs a.active,.tab-list a.active{background:transparent!important;border-bottom-color:var(--formal-green)!important;color:var(--formal-green)!important;font-weight:600!important;}
.stage-link{border-radius:2px!important;background:#fff!important;}
.stage-link.active{background:#f3f5f4!important;border:1px solid var(--formal-border-strong)!important;color:var(--formal-heading)!important;}

/* Tables: dense, restrained, no chips or decorative rows. */
.table-wrap{overflow:auto!important;}
table,.table,table.dataTable{font-size:13px!important;border-collapse:collapse!important;background:#fff!important;border-radius:0!important;}
.table th,table.dataTable thead th{background:#f4f5f5!important;color:#313a35!important;font-size:12.5px!important;font-weight:600!important;border-bottom:1px solid #cfd5d2!important;padding:9px 10px!important;}
.table td,table.dataTable tbody td{padding:9px 10px!important;border-bottom:1px solid #e3e6e4!important;vertical-align:middle!important;}
.table tr:hover td,table.dataTable tbody tr:hover td{background:#f8f9f9!important;}

/* DataTables controls */
.dataTables_wrapper .dataTables_filter input{min-height:32px!important;border:1px solid var(--formal-border-strong)!important;border-radius:3px!important;padding:5px 8px!important;background:#fff!important;box-shadow:none!important;}
.dataTables_wrapper .dataTables_length select{width:auto!important;min-height:32px!important;border:1px solid var(--formal-border-strong)!important;border-radius:3px!important;padding:4px 20px 4px 6px!important;background:#fff!important;font-size:13px!important;appearance:auto!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button{border-radius:2px!important;background:#fff!important;border:1px solid transparent!important;color:#3d4742!important;box-shadow:none!important;}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover{background:#e9edeb!important;border-color:#b9c1bd!important;color:#1f2823!important;}

/* Helper/secondary text is typographic only, never a callout. */
.hint,.mini,.muted,.mutedline,.upload-sub,.p,.sub,.result-count,.empty-state{
  color:var(--formal-muted)!important;font-size:12.5px!important;font-weight:400!important;background:transparent!important;
  border:0!important;border-radius:0!important;padding-left:0!important;padding-right:0!important;box-shadow:none!important;
}

/* Announcement area: image and text are separate flat sections. No overlays/fades. */
.slideshow{border:1px solid var(--formal-border)!important;border-radius:3px!important;background:#fff!important;overflow:hidden!important;}
.slide{display:none!important;position:relative!important;min-height:430px!important;height:430px!important;background:#fff!important;grid-template-columns:minmax(0,58%) minmax(300px,42%)!important;}
.slide.active{display:grid!important;}
.slide-bg{position:relative!important;inset:auto!important;width:auto!important;height:100%!important;grid-column:1!important;grid-row:1!important;background-color:#f1f2f2!important;background-size:contain!important;background-position:center!important;background-repeat:no-repeat!important;filter:none!important;}
.slide-overlay{display:none!important;background:none!important;}
.slide-content{position:relative!important;inset:auto!important;width:auto!important;height:auto!important;grid-column:2!important;grid-row:1!important;box-sizing:border-box!important;padding:30px 28px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;gap:10px!important;background:#fff!important;border-left:1px solid var(--formal-border)!important;color:var(--formal-text)!important;}
.slide-content .badge{display:block!important;color:var(--formal-muted)!important;font-size:12px!important;font-weight:500!important;text-transform:none!important;}
.slide-title{margin:0!important;color:var(--formal-heading)!important;font-size:22px!important;font-weight:600!important;line-height:1.25!important;}
.slide-meta{color:var(--formal-muted)!important;font-size:12.5px!important;font-weight:500!important;opacity:1!important;}
.slide-desc{color:#4e5853!important;font-size:13.5px!important;line-height:1.5!important;opacity:1!important;}
.slide-controls{position:absolute!important;right:14px!important;bottom:14px!important;display:flex!important;gap:5px!important;align-items:center!important;}
.icon-btn{width:31px!important;height:31px!important;border-radius:2px!important;background:#fff!important;border:1px solid #aeb7b2!important;color:#4b5550!important;box-shadow:none!important;}
.dotbtn{width:7px!important;height:7px!important;border-radius:50%!important;background:#c9cfcc!important;border:0!important;}
.dotbtn.active{background:var(--formal-green)!important;}

/* Modals: straightforward desktop application dialogs. */
.modal-content,.app-modal__panel,.dialog-panel,[role="dialog"] .modal-panel{border:1px solid #cbd2ce!important;border-radius:4px!important;background:#fff!important;box-shadow:0 8px 24px rgba(0,0,0,.12)!important;}

/* Explicitly neutralize older gradient/color-strip component variants. */
.st-pre,.st-eval,.st-preapp,.st-approval,.st-granted,.st-total,[class*="st-"]{background:#fff!important;background-image:none!important;border-color:var(--formal-border)!important;}
[class*="border-left"],[style*="border-left"]{box-shadow:none!important;}
.longtext.clamp::after{display:none!important;background:none!important;}

@media(max-width:760px){
  .container{width:min(100% - 24px,1260px)!important;}
  .header .nav{gap:8px!important;}
  .slideshow,.slide{height:auto!important;min-height:0!important;}
  .slide.active{display:block!important;}
  .slide-bg{height:320px!important;width:100%!important;}
  .slide-content{width:100%!important;border-left:0!important;border-top:1px solid var(--formal-border)!important;padding:20px!important;}
}

/* v3 semantic text states */
.status-text{
  display:inline!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;
  background:transparent!important;box-shadow:none!important;color:#244c39!important;font-size:12.5px!important;
  font-weight:600!important;line-height:1.35!important;letter-spacing:0!important;
}
.slide-kicker{
  color:var(--formal-muted)!important;font-size:12px!important;font-weight:500!important;line-height:1.35!important;
  padding:0!important;margin:0!important;border:0!important;background:transparent!important;border-radius:0!important;
}
.upload-sub{display:none!important;}