:root {
    --bg:#f7f7f9; 
    --card:#fff; 
    --ink:#111; 
    --muted:#6b7280; 
    --line:#e5e7eb; 
    --brand:#ED8323; 
    --danger:#b91c1c; 
    --ok:#198754; 
    --warn:#c0392b;
    --primary-color: #dda73a;
    --secondary-color: #F8F9FA;
    --accent-color: #007BFF;
    --success-color: #28A745;
    --warning-color: #FFC107;
    --error-color: #DC3545;
    --text-color: #212529;
    --muted-text: #6C757D;
    --border-color: #CED4DA;
    --card-radius: 8px;

    --primary: #dda73a;
    --secondary: #f8f9fa;
    --info: #17a2b8;
    --success: #28a745;
    --warning: #c0392b;
    --text: #212529;
    --border-radius: 6px;
    --bg-light: #f1f1f1;
    --bg-applicant: #dda73a;
    --bg-reviewer: #e9ecef;
    --error-color-rgb: 220, 53, 69;
    --accent-color-rgb: 0, 123, 255;
  }
*{ box-sizing:border-box }
body{ margin:0; background:var(--bg); color:var(--ink); font:15px/1.5 system-ui,-apple-system,Segoe UI,Inter,Roboto,Arial,sans-serif }
 
h1{ margin:0 0 4px; font-size:20px }
h2 {
    color: #ED8323;
    border-bottom: 2px solid #ED8323;
    padding-bottom: 10px;
}

#sidebar {
    padding-top:40px;
}
.container {
      padding: 30px;
    }
.main {
        flex: 1;
        padding: 30px;
    }
 #header-content { position:sticky; top:0; background:#fff; border-bottom:1px solid var(--line); padding:16px 20px; z-index:10; }
 
.wrap{ max-width:1180px; margin:0 auto; padding:18px }
.wrap .dashboard-title, .content .dashboard-title {
  font-size: 20px;
  margin-bottom: 20px;
  border-left: 6px solid #ED8323;
  padding-left: 12px;
  color: #ED8323;
  font-weight: 600;
}
.wrap .dashboard-wrapper h3, .content .dashboard-wrapper h3 {
  margin: 0 0 20px 0;
  font-size: 13.3333px;
  font-weight: 600;
  color: #ED8323;
}

.dashboard-wrapper {
  max-width: 1100px;
  margin: 0 auto;
}

.dashboard-title {
  font-size: 20px;
  margin-bottom: 20px;
  border-left: 6px solid #ED8323;
  padding-left: 12px;
  color: #ED8323;
  font-weight: 600;
}

.scroll-x {
    max-width:100%;
    overflow-x:scroll;
}
.profile-wrapper {
      display: flex;
      gap: 20px;
      margin-bottom: 30px;
      overflow-x:scroll;
    }
.profile-pic {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      margin-bottom: 10px;
    }
.summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.summary-cards-flex {
  display: flex;
  gap: 16px;
  margin-bottom: 20px;
}
.reviewer-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.reviewer-info img {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
}
.card-title {
  font-size: 15px;
  color: #ED8323;
  font-weight: 600;
  margin-bottom: 6px;
}

.card-value {
  font-size: 26px;
  font-weight: bold;
  color: #333;
}

.dashcard button {
  position: absolute;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #ED8323;
  color: white;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
}
.card button:hover {
  background-color: #d36f1d;
}

.card{ background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; margin:12px 0; box-shadow:0 1px 0 rgba(0,0,0,.02) }
.card h3 {
  margin: 0 0 20px 0;
  font-size: 15px;
  font-weight: bold !important;
  color: #ED8323;
}
.cardh3 {
  margin: 0 0 20px 0;
  font-size: 13.3333px;
  color: #ED8323;
}
    
.muted{ color:var(--muted); font-size:12px; font-weight:bold!important; }
.muted_text {font-size:12px;}
.grid{ display:grid; gap:12px }

.g2{ grid-template-columns:repeat(2,minmax(0,1fr)) }

.g3{ grid-template-columns:repeat(3,minmax(0,1fr)) }

.g4{ grid-template-columns:repeat(4,minmax(0,1fr)) }
 
 .badge{ background:rgba(221,167,58,.15); color:#7a5913; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid rgba(221,167,58,.35); }
 .right{ text-align:right }
 
.btn{
    padding: 6px 14px;
    border:4px solid var(--line);
    border: none;
    background:#fff;
    cursor:pointer;
    font-size: 13px;
    margin-right: 6px;
    margin-bottom: 6px;
    border-style: solid;
    border-radius: 4px;
    border-width: 1px; 
  }
 
.btn.primary{ background:var(--brand); border-color:var(--brand); font-weight:600; color:white;}
.btn.btn-primary{ background:var(--brand); border-color:var(--brand); font-weight:600; color:white;}

.btn.ok{ border-color:var(--ok); color:#0a7c3a!important; }

.btn.warn{ border-color:var(--warn); color:#c0392b;border-style: solid; border-width: 1px; }
 
.btn[disabled]{ opacity:.55; cursor:not-allowed }
.btn-view { 
    background-color: #ED8323;
    color: #fff;
}
.btn-approve {
        background-color: #28a745;
        color: #fff;
    }
.btn-reject {
        background-color: #dc3545;
        color: #fff;
        margin-left: 8px; 
    }
 .btn-secondary {
      background-color: transparent;
      border: 2px solid #ED8323;
      color: #ED8323;
    }
    .certificate-preview {
      border: 1px solid #ccc;
      padding: 10px;
      margin-top: 16px;
      background-color: #f4f4f4;
      font-size: 14px;
    } 
.action-buttons {
    min-width: 200px;
}
.action-buttons button {
  background-color: #ED8323;
  color: white;
  border: none;
  padding: 6px 14px;
  margin-right: 6px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 13px;
}

.status-expiring { color: #dc2626; font-weight: bold; }
    .status-alert { color: #f59e0b; font-weight: bold; }
    .status-safe { color: #16a34a; font-weight: bold; }

.action-buttons button.delete {
  background-color: #c0392b;
}

.action-buttons button:hover {
  opacity: 0.92;
}

a {
    text-decoration:none;
}

.toolbar{ display:flex; gap:10px; flex-wrap:wrap }


.chip{ display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; border:1px solid var(--line); background:#fff; font-size:12px }

.chip.ok{ border-color:#bbf7d0; background:#f0fdf4; color:#065f46 }

.chip.warn{ border-color:#fde68a; background:#fffbeb; color:#c0392b }

.chip.danger{ border-color:#fecdd3; background:#fff1f2; color:#9f1239 }
.chip.info{ border-color:#e2e8f0; background:#f8fafc; color:#0f172a }
.chip.ok{ border-color:#bbf7d0; background:#f0fdf4; color:#064e3b }
 
 
.kv{ display:grid; grid-template-columns: 220px 1fr; gap:6px 14px; align-items:start }
 
 
 
.kv dt{ color:#374151; font-weight:600 }

.kv dd{ margin:0 }


.bar{ height:10px; background:#f1f5f9; border-radius:999px; position:relative; overflow:hidden }

.bar > span{ position:absolute; left:0; top:0; bottom:0; width:0%; background:linear-gradient(90deg,#fde68a,#dda73a); border-radius:999px }

.form-group {
      margin-bottom: 16px;
    }
    .form-group label {
      display: block;
      font-weight: 600;
      margin-bottom: 6px;
    }
    .form-group input, .form-group select, .form-group textarea {
      width: 100%;
      padding: 10px;
      border-radius: 4px;
      border: 1px solid #ccc;
    } 

 dialog{ border:none; border-radius:14px; padding:0; max-width:980px; width:100%; box-shadow:0 20px 40px rgba(0,0,0,.15) }
 
 dialog::backdrop{ background:rgba(0,0,0,.35) }
 
 .modal{ padding:16px; z-index:100; }
 .modal .modal-actions {
      margin-top: 10px;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
    }
 
 .modal header{ border-bottom:1px solid var(--line); padding:10px 0 12px; margin-bottom:12px }
 
 .modal h3{ margin:0 }
 
 .modal .content{ padding:0 2px 8px }
 .modal-buttons {
      margin-top: 20px;
      display: flex;
      gap: 12px;
    }
 .close-btn {
      float: right;
      font-size: 20px;
      cursor: pointer;
    }
 .actions{ display:flex; justify-content:flex-end; gap:10px; border-top:1px solid var(--line); padding-top:10px; margin-top:10px }
 
 
 .cert{ max-width:900px; background:#fff; border:1px solid #e5e7eb; border-radius:16px; padding:24px }
 
 .cert header{ text-align:center; border-bottom:2px solid #e5e7eb; padding-bottom:10px; margin-bottom:12px }
 
 .cert h2{ margin:4px 0 0; font-size:20px }
 
 .cert .kv{ grid-template-columns:200px 1fr }
 
 .log-entry {
      border-left: 4px solid #ED8323;
      padding: 10px;
      margin: 8px 0;
      background-color: #fefefe;
    }
    .log-header {
      font-size: 13px;
      font-weight: bold;
      margin-bottom: 4px;
    }
 
 
 /* Minimal table + scroll helpers for Applications block */
 
 .scroll-x{overflow:auto}
 .table-responsive {
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      width: 100%;
    }
 table{width:100%;border-collapse:collapse;font-size:14px}
 
 thead th{background:#fafafa}
 
 th,td{border-top:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
 td.status {
      color: #ED8323;
      font-weight: bold;
    }
 
tr:hover {
    background-color: #fef4eb;
}
 
 /* ===== Heading Row ===== */
  .header-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
  .title { font-size: 22px; letter-spacing: .2px; }
  .subtle { color: var(--muted-text); font-size: 13px; }
  
.category-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }


.category-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 16px; border: 1px solid var(--border-color); border-radius: 12px; background: var(--secondary-color); cursor: pointer; transition: box-shadow .2s ease, transform .08s ease, border-color .2s ease, background .2s ease; }
  .category-card:hover { box-shadow: 0 8px 22px rgba(0,0,0,.06); border-color: rgba(221,167,58,.55); background: #fff; }
  .category-card:active { transform: translateY(1px); }
  .category-card.selected { outline: 2px solid var(--primary-color); background: #fff; }

  .icon { width: 64px; height: 64px; color: var(--primary-color); }
  .category-title { font-size: 18px; font-weight: 600; line-height: 1.25; }
  .category-sub { font-size: 13px; color: var(--muted-text); }

  /* ===== Footer Actions ===== */
 
  .btn:active { transform: translateY(1px); }
  .btn.primary:disabled { background: rgba(221,167,58,.55); border-color: rgba(221,167,58,.55); cursor: not-allowed; }
  
  .wizard { display:flex; justify-content:space-between; gap:10px; margin-top:8px; }
  
  .download { display:inline-block; padding:8px 12px; border:1px solid var(--line); border-radius:10px; text-decoration:none; }

  .error { color: var(--error-color); font-size: 13px; margin-top: 6px; display: none; }
  .error.show { display: block; }

  /* Focus ring for accessibility */
  .category-card:focus-within, .category-card:focus { outline: 3px solid rgba(221,167,58,.6); outline-offset: 2px; }
  
 /* INPUT AND FORM ELEMENTS */
 label { display:block; font-size:14px; margin:6px 0 4px; color:#374151; }
  input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], select, textarea {
    width:100%; height:42px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; background:#fff;
  }
  textarea { height:110px; padding:10px; }
  
  .tabs { display:grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0 16px; }
 
  .tab { padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:14px; }
  .tab.active { color:#111; border-color:var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
  .tab:focus-visible { outline:2px solid rgba(221,167,58,.65); outline-offset:2px; }
  .tabpanel { display:none; }
  .tabpanel.active { display:block; }
  .tabbtn{ padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:#fff; cursor:pointer; font-size:14px }
  .tabbtn.active{ border-color:var(--brand); box-shadow:inset 0 0 0 1px var(--brand) }
  .tabpanel{ display:none }
  .tabpanel.active{ display:block }
  .tab-content {
        display: none;
        padding: 20px;
        border: 1px solid #ED8323;
        border-top: none;
    }

    .tab-content.active {
        display: block;
    }
  /* Tabs */

 
  details.eq{ border:1px solid var(--line); border-radius:12px; background:#fff; margin:8px 0; padding:4px 8px }
  details.eq summary{ cursor:pointer; font-weight:600; padding:6px 4px; outline:none }
  .eqrow{ display:grid; gap:8px; grid-template-columns: 1.2fr .6fr 1fr 1.4fr; align-items:center; padding:6px 4px }
  @media (max-width:1100px){ .eqrow{ grid-template-columns: 1fr 1fr } }
  .std-mini{ display:flex; gap:10px; flex-wrap:wrap; font-size:12px; color:#374151 }
  .eitem{ font-weight:700 }

  .ring-gold{ outline:2px solid rgba(221,167,58,.45); outline-offset:2px }
  
  /* Facilities – clean compact checklist */
  .section-title { font-weight:700; margin:0 0 8px; color:#1f2937; }
  .checklist { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 16px; align-items:center; }
  
  .check { display:flex; align-items:center; gap:8px; font-size:13px; line-height:1.2; }
  .check input { transform:translateY(1px); }
  .checkhidden {display:none;}
  .hidden {display:none;}
  .subgroup { margin-top:10px; padding-top:10px; border-top:1px dashed var(--line); }
  .sm { font-size:13px; }
  .hintrow { display:flex; align-items:center; gap:8px; }

  /* File chooser UX */
  .file { display:flex; flex-direction:column; align-items:center; gap:10px; }
  .file input[type=file] { width:auto; }
  .filename { font-size:12px; color:#374151; background:#f3f4f6; border:1px solid var(--line); padding:4px 8px; border-radius:999px; white-space:nowrap; max-width:100%; overflow:hidden; text-overflow:ellipsis; }
  
  
  /* Tables */
  .table { width:100%; border-collapse:collapse; font-size:14px; }
  .table th, .table td { border-top:1px solid var(--line); padding:8px; text-align:left; vertical-align:top; }
  .table th { background:#f9fafb; }

  .ring-gold { outline: 2px solid rgba(221,167,58,.45); outline-offset: 2px; }
  
  .toast{ position:fixed; bottom:16px; right:16px; background:#0f172a; color:#fff; padding:10px 12px; border-radius:10px; opacity:0; transform:translateY(8px); transition:.25s }
  .toast.show{ opacity:1; transform:none }

  .timeline{ position:relative; margin:6px 0 0 0 }
  .timeline::before{ content:""; position:absolute; top:4px; bottom:4px; left:10px; width:2px; background:#e5e7eb }
  .titem{ position:relative; padding-left:28px; margin:10px 0 }
  .titem::before{ content:""; position:absolute; left:2px; top:6px; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--brand) }

  .pill{ display:inline-block; padding:2px 8px; border-radius:999px; background:#f1f5f9; border:1px solid #e2e8f0; font-size:12px }

  .small{ font-size:12px }
  
  
  
  
  /* msg_modal styles */
    .msg_modal {
      display: none;
      position: fixed;
      z-index: 10;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      overflow: auto;
      background-color: rgba(0,0,0,0.4);
    }
    .msg_modal-content {
      background-color: #fff;
      margin: 10% auto;
      padding: 20px;
      border: 1px solid #888;
      width: 500px;
      border-radius: 10px;
    }
    .close {
      color: #aaa;
      float: right;
      font-size: 22px;
      font-weight: bold;
      cursor: pointer;
    }
    .message-box {
      width: 100%;
      height: 100px;
      margin-top: 10px;
      padding: 10px;
      font-size: 14px;
    }
    .file-input {
      margin-top: 10px;
    }
  
.filters {
      margin-top: 20px;
      display: flex;
      gap: 20px;
      align-items: center;
    }
    .filters label {
      font-weight: bold;
    }
    .filters select, .filters input[type="date"] {
      padding: 6px;
      font-size: 14px;
    }
   
    .unread {
      font-weight: bold;
    }
    
    
/* ================= DOCUMENT VIEW ================= */

.documents-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 10px;
}

.document-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 14px 16px;
    transition: box-shadow .2s ease, transform .1s ease;
}

.document-card:hover {
    box-shadow: 0 8px 20px rgba(0,0,0,.06);
    transform: translateY(-1px);
}

.document-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.document-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--brand);
    text-transform: capitalize;
}

.document-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.document-actions .btn {
    font-size: 12px;
    padding: 6px 12px;
}

/* Responsive tweaks */
@media (max-width: 640px) {
    .documents-grid {
        grid-template-columns: 1fr;
    }
}
 
   
.grid div.grid-3c {
  display: grid;
  height: 100%;
  align-content: flex-start;
}
.grid div.grid-2c {
  display: grid;
  height: 100%;
  align-content: space-between;
}


.pagination {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination li {
    list-style: none;
}

.pagination a,
.pagination span {
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-decoration: none;
    font-size: 13px;
    color: #333;
}

.pagination .active span {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
}




  
  
  
   @media (max-width:980px){ .checklist { grid-template-columns:repeat(2,minmax(0,1fr)); } }
  @media (max-width:640px){ .checklist { grid-template-columns:1fr; } }
 @media (min-width:900px){ .tabs { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 960px) { .category-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px) { .category-grid { grid-template-columns: 1fr; } }

 
 @media print{ header,.noprint{ display:none !important } body{ background:#fff } .cert{ border:0; border-radius:0; box-shadow:none; margin:0; page-break-inside:avoid } }
 
 @media (max-width:800px){ .kv{ grid-template-columns:1fr } }
 
 @media (max-width:980px){ .g2,.g3,.g4{ grid-template-columns:1fr } }
 
  /* Hide sidebar toggle on desktop (>=1024px) */
@media screen and (min-width: 1024px) {
  #sidebarToggle {
    display: none;
  }
}