@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200; 300; 400; 500; 600; 700&display=swap'); 

:root { 
--clr-primary:#174d8f; 
--clr-primary-dark:#021E3B; 
--clr-accent:#F6C039;
--clr-accent-dark:#D6990F;
--clr-text-link:#021E3B;
--clr-primary-dark:#021E3B; 
--sidebar-hover:#10385f; 

--page-bg:#f5f7fb; 
--text-primary:#1f2d3d; 
--text-secondary:#6c7a89; 
--border-colour:#e2e8f0; 
--success-bg:#e5f4ea; 
--success-text:#287044; 
--warning-bg:#fff4df; 
--warning-text:#9a6510; 
--inactive-bg:#edf0f4; 
--inactive-text:#64707d
}

body { margin:0; background:var(--page-bg); color:var(--text-primary); font-family:'Inter', "Segoe UI", Verdana, Geneva, Tahoma, sans-serif; font-size:15px; }
.app { display:flex;  }
.app, .sidebar { min-height:100vh;  }

/* Custom button definitions */
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus { box-shadow:0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb; }

/* Blue (Primary) & Green (Secondary) */
.btn-blue { background-color:var(--clr-primary); color:#fff; border:none; } .btn-blue:hover { background-color:var(--clr-accent-dark); } .text-blue { color:var(--clr-primary) !important; }
.btn-gold { background-color:var(--clr-accent-dark); color:#fff; border:none; } .btn-gold:hover { background-color:var(--clr-accent-dark); } .text-gold { color:var(--clr-accent) !important; }
.btn-sky { background-color:var(--clr-sky-blue); color:var(--clr-primary); border:none; } .btn-sky:hover { background-color:#6674A6; } .text-sky { color:#6674A6 !important; }

.btn-blue:hover, .btn-gold:hover, .btn-sky:hover { transform: translateY(-1px); box-shadow: 0 7px 18px rgba(31, 55, 109, 0.25); color:#fff; }

/* Generic styles */
a { color:var(--clr-text-link); text-decoration:none; }
a:hover { text-decoration:underline; }
.form-label { font-size:13px; margin-bottom:4px; color:var(--text-primary); }
.alert { font-size:14px;}
.print-btn { position:absolute; top:50px; right:50px;}
.strike-through { text-decoration:line-through !important; color:var(--clr-error-text) !important; }
.checkbox label { margin-left:10px; }
.icon i { color:var(--clr-primary); background-color:var(--clr-sky-blue); font-size:20px; padding:10px; border-radius:20px; /*width:55px; */text-align:center; }
a.disabled { pointer-events:none; color:var(--clr-text) !important; text-decoration:none !important; cursor:default; }
.image-holder { width:100px; height:75px; display:flex; justify-content:center; align-items:center; overflow:hidden; font-family:'FontAwesome'; font-weight:400; font-size:32px; color:#666; }
.image-holder:before { content:"\f03e"; position:absolute; }
.image-holder img { max-width:100%; max-height:100%; object-fit:contain; z-index:99; position:relative; }
.h5 a, h5 a { color:var(--clr-text-link); text-decoration:none; }
.h5 a:hover, h5 a:hover { text-decoration:underline; }
input[type="checkbox"] { margin-right:8px; }
.form-control[readonly] { background-color:#e9ecef; cursor:not-allowed; }
.floating-alert { min-width:340px; max-width:480px; background:#fff8e1; color:#664d03; border-left:5px solid #ffc107 !important; animation:floatingAlertIn 0.3s ease-out; }
.floating-alert-icon { width:38px; height:38px; min-width:38px; border-radius:50%; background:#ffc107; color:#212529; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:1.1rem; }
.progress-bar { background-color:var(--clr-accent-dark); }
.error-reference { margin:20px 0; }
.error-reference .error-code { color:var(--bs-code-color); font-weight:600; }

.alert-danger .floating-alert { background:#fff5f5; color:#842029; border-left:5px solid #dc3545 !important; }
.alert-danger .floating-alert .floating-alert-icon { background:#dc3545; color:#fff; }
.alert-primary .floating-alert { background:#f2f8ff; color:#055160; border-left:5px solid #0d6efd !important; }
.alert-primary .floating-alert .floating-alert-icon { background:#0d6efd; color:#fff; }
@keyframes floatingAlertIn { from { opacity:0; transform:translateY(-15px);} to { opacity:1; transform:translateY(0); } }

.collapse-sidebar, .nav-item { text-align:left; display:flex;  }
.sidebar { position:relative; width:260px; display:flex; flex-direction:column; background:var(--clr-primary-dark); color:#fff; transition:width .25s; z-index:1000;  }
.brand { height:72px; display:flex; align-items:center; padding:0 24px; background:#fff; }
.brand .logo img { height:38px; }

.sidebar-nav { flex:1; margin-top:17px; padding:20px 14px;  }
.nav-item { width:100%; min-height:48px; padding:12px 14px; align-items:center; gap:14px; border:0; border-radius:7px; background:0 0; color:#c7d3df; font-size:15px; transition:.2s;  }
.nav-item:hover { background:var(--sidebar-hover); color:#fff;  }
.nav-item.active { background:linear-gradient(135deg,var(--clr-primary),#2367b2); color:#fff;  }
.nav-item-toggle { justify-content:space-between;  }
.nav-item-toggle span { display:flex; align-items:center; gap:14px;  }
.sidebar hr { border-color:rgba(255,255,255,.1); margin:18px 0;  }
.nav-sub-item { display:flex; align-items:center; gap:12px; padding:11px 20px 11px 42px; color:#aebdca; font-size:14px;  }
.collapse-sidebar:hover, .nav-sub-item:hover { color:#fff;  }
.nav-sub-item.active { color:#6faeff;  }
.nav-dot { width:7px; height:7px; border-radius:50%; background:currentColor;  }
.collapse-sidebar { padding:20px; gap:12px; align-items:center; border:0; background:0 0; color:#c7d3df; position:absolute; top:60px; right:0; }
.main-content { width:100%; /*width:calc(100% - 260px); margin-left:260px; */min-height:100vh; display:flex; flex-direction:column; transition:margin-left .25s;  }

.content-footer { min-height:42px; background:white; border-top:1px solid #d9dee5; display:flex; align-items:center; justify-content:space-between; padding:0 30px; color:#687483; font-size:12px; }
.content-footer .footer-links a { color:#687483; text-decoration:none; margin-left:25px; }
.content-footer .footer-links a:hover { text-decoration:underline; } 

/* Login screen */
.login-section { display:flex; margin:0; /*height:90vh; align-items:center; */justify-content:center; margin-top:3%; }
.login-section .login-control { width:500px; padding:50px; background:#fff; border-radius:20px; border-top:4px solid var(--clr-accent-dark) !important; border-bottom:4px solid var(--clr-accent-dark) !important; }
.login-section .school-info { text-align:center; margin-bottom:30px; }
.login-section .school-info .school-logo img { height:30px; margin-bottom:30px; }
.login-section .school-info h3 { font-size:26px; }
.login-section .more-info { display:flex; justify-content:center; text-align:center; flex-wrap:wrap; }
.login-section .more-info p { margin-top:40px; font-size:18px; }

.page-heading, .top-header { display:flex; justify-content:space-between;  }
.top-header { height:72px; padding:0 32px; align-items:center; background:#fff; border-bottom:1px solid var(--border-colour);  }
.top-header .schoolname { font-size:32px; font-weight:700;}
.top-header .header-actions { display:flex; align-items:center; gap:22px;  }
.top-header .header-icon-btn { position:relative; border:0; background:0 0; font-size:20px; color:var(--text-primary);  }
.top-header .notification-badge { position:absolute; top:-6px; right:-8px; min-width:18px; height:18px; display:flex; justify-content:center; align-items:center; border-radius:50%; background:var(--clr-primary); color:#fff; font-size:10px;  }
.top-header .user-menu { display:flex; align-items:center; gap:10px; border:0; background:0 0;  }
.top-header .user-avatar { width:38px; height:38px; display:flex; justify-content:center; align-items:center; border-radius:50%; background:var(--clr-primary); color:#fff; font-size:13px; font-weight:600;  }
.top-header .user-name { font-size:14px; font-weight:600;  }

.table-toolbar { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:18px; }
.table-toolbar h2 { margin:0; display:flex; align-items:center; gap:10px; }
.table-actions { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
.application-viewer-toolbar { flex-direction:column; margin-bottom:0; }

/*.table-toolbar { margin-bottom: 18px; }
.table-toolbar h2 { margin: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.table-toolbar h2 > i { margin-bottom: 2px; }
.application-ref { font-size: 16px; font-weight: normal; }
.table-actions { display: flex; justify-content: flex-end; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
*/

.collapse-toggle { width:36px; height:36px; padding-left:15px; display:inline-flex; align-items:center; justify-content:center; border:1px solid #d9e1ea; border-radius:8px; background:#fff; color:#1D5BA2; cursor:pointer; transition:background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.2s ease; }
.collapse-toggle:hover { background:#eef5fb; border-color:#b9cee3; color:#174b86; }
.collapse-toggle:focus-visible { outline:3px solid rgba(29, 91, 162, 0.18); outline-offset:2px; }
.collapse-toggle i { transition:transform 0.2s ease; }
.table-responsive { overflow:hidden; opacity:1; transition:max-height 0.3s ease, opacity 0.2s ease; }
.table-responsive.collapsed { max-height:0; opacity:0;}

.content-wrapper { flex:1; padding:32px;  }
.page-heading { align-items:flex-start; margin-bottom:28px;  }

/* Application status' filters */
.status-filter-bar { display:flex; flex-wrap:wrap; gap:8px; padding:4px 0; }
.status-pill { --pill-bg:#f8fafc; --pill-border:#e2e8f0; --pill-text:#475569; --pill-dot:#94a3b8;  display:inline-flex; align-items:center; gap:7px;  height:38px; padding:0 13px;  border:1px solid var(--pill-border); border-radius:999px;  background:var(--pill-bg); color:var(--pill-text);  font-size:14px; font-weight:500; line-height:1;  cursor:pointer;  transition:background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease; }
.status-pill:hover { border-color:color-mix( in srgb, var(--pill-dot) 55%, white );  background:color-mix(in srgb, var(--pill-bg) 75%, var(--pill-dot) ); transform:translateY(-1px); }
.status-pill:focus-visible { outline:3px solid rgba(13, 110, 253, .18); outline-offset:2px; }
.status-pill.active { background:var(--pill-dot); border-color:var(--pill-dot); color:#fff; box-shadow:0 2px 6px rgba(15, 23, 42, .12); } 
.status-dot {width:7px; height:7px; flex:0 0 7px;  border-radius:50%; background:var(--pill-dot); }  
.status-pill.active .status-dot { background:rgba(255, 255, 255, .85); } 
.status-count { display:inline-flex; align-items:center; justify-content:center;  min-width:22px; height:22px; padding:0 6px;  border-radius:999px;  background:rgba(15, 23, 42, .07); font-size:12px; font-weight:700; }
.status-pill.active .status-count { background:rgba(255, 255, 255, .22); } 
.status-all { --pill-bg:#eef5fb; --pill-border:#b9d2ea; --pill-text:#174a83; --pill-dot:#1D5BA2;}
.status-pending { --pill-bg:#fff8e6; --pill-border:#f6d98b; --pill-text:#8a5a00; --pill-dot:#e9a400; }
.status-complete { --pill-bg:#ecfdf3; --pill-border:#a7e8c1; --pill-text:#176b3a; --pill-dot:#20a05a; }
.status-offered { --pill-bg:#eef4ff; --pill-border:#b9cdfc; --pill-text:#2856a6; --pill-dot:#4678d8; }
.status-waitinglist { --pill-bg:#f5f3ff; --pill-border:#d5ccfa; --pill-text:#6246a8; --pill-dot:#8064c9; }
.status-rejected { --pill-bg:#fff1f2; --pill-border:#fecdd3; --pill-text:#a1263a; --pill-dot:#dc5267; }
.status-accepted { --pill-bg:#ecfdf5; --pill-border:#a7ebcf; --pill-text:#08734b; --pill-dot:#10a875; }
.status-declined { --pill-bg:#fef2f2; --pill-border:#fecaca; --pill-text:#a52b2b; --pill-dot:#dc4c4c; }
.status-withdrawn { --pill-bg:#f8fafc; --pill-border:#cbd5e1; --pill-text:#526070; --pill-dot:#64748b; }
.status-declineaccepted { --pill-bg:#f1f5f9; --pill-border:#cbd5e1; --pill-text:#334155; --pill-dot:#475569; }

/* Form display / form builder */
.heading-section { padding:20px; margin:40px 0; border-radius:15px; background-color:white !important; border:1px solid var(--border-colour); box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); }
.form-builder .heading-section { margin:40px 10px; }
.heading-section h3, .heading-section i { color:var(--clr-primary-dark); margin-bottom:20px; }
.control-yes_or_no input[type="radio"], .Form-Checkbox input[type="checkbox"] { margin:0 10px; }
.control-yes_or_no td { padding-right:20px; }
input[type="radio"], input[type="checkbox"] { margin-right:10px; }
.form-control, .form-select { min-height:38px; border-color:#d8e0e8; font-size:14px; display:block; width:100%; padding:.375rem .75rem; font-weight:400; line-height:1.5; color:var(--bs-body-color); -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:var(--bs-body-bg); background-clip:padding-box; border:var(--bs-border-width) solid var(--bs-border-color);  border-radius:var(--bs-border-radius); transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; }
.form-control:focus, .form-select:focus { border-color:var(--clr-primary); box-shadow:0 0 0 .2rem rgba(23,77,143,.12);  }
.control-file_upload { display:block; }

.offer-status { font-size:larger; font-weight:500; color:var(--clr-accent-dark); }
.btn-offer { --bs-btn-color:#fff; --bs-btn-bg:#198754; --bs-btn-border-color:#198754; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#157347; --bs-btn-hover-border-color:#146c43; }
.btn-waiting { --bs-btn-color:#fff; --bs-btn-bg:#E2A900; --bs-btn-border-color:#E2A900; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#C99400; --bs-btn-hover-border-color:#C99400; }
.btn-resend { --bs-btn-color:#fff; --bs-btn-bg:#1D5BA2; --bs-btn-border-color:#1D5BA2; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#174B86; --bs-btn-hover-border-color:#174B86; }
.btn-withdraw { --bs-btn-color:#fff; --bs-btn-bg:#D97706; --bs-btn-border-color:#D97706; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#B45309; --bs-btn-hover-border-color:#B45309; }
.btn-reject { --bs-btn-color:#fff; --bs-btn-bg:#C73E3E; --bs-btn-border-color:#C73E3E; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#A83232; --bs-btn-hover-border-color:#A83232; }
.btn-decline { --bs-btn-color:#fff; --bs-btn-bg:#A83232; --bs-btn-border-color:#A83232; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#842828; --bs-btn-hover-border-color:#842828; }
.btn-delete { --bs-btn-color:#fff; --bs-btn-bg:#8F2630; --bs-btn-border-color:#8F2630; --bs-btn-hover-color:#fff; --bs-btn-hover-bg:#701D25; --bs-btn-hover-border-color:#701D25; }
.btn-offer i, .btn-waiting i, .btn-resend i, .btn-withdraw i, .btn-reject i, .btn-decline i, .btn-delete i { color:#fff !important; }
.btn-action-outline { border:1px solid; background:transparent; font-weight:500; }
.btn-action-outline.offer { color:#198754; border-color:#198754; } 
.btn-action-outline.offer:hover { color:#fff; background:#198754; }
.btn-action-outline.waiting { color:#B17C00; border-color:#D9A300; }
.btn-action-outline.resend { color:#1D5BA2; border-color:#1D5BA2; }
.btn-action-outline.withdraw { color:#B45309; border-color:#D97706; } 
.btn-action-outline.reject {color:#B83232;  border-color:#C73E3E; } 
.btn-action-outline.delete { color:#8F2630; border-color:#8F2630; }

.new-controls-card .controls-list { display:flex; flex-wrap:wrap; row-gap:10px; column-gap:10px; }
.new-controls-card.stuck { position:fixed; top:0; z-index:9999; max-width:fit-content; left:0; right:0; margin:0 auto; padding:10px 20px 0px; }
.new-controls-card.stuck .controls-list { display:block; }

.page-heading h1 { margin:0 0 6px; font-size:28px; font-weight:700; text-transform:capitalize; }
.btn-new-record { padding:10px 18px; font-weight:600;  }
.content-card { margin-bottom:24px; padding:24px; background:#fff; border:1px solid var(--border-colour); border-radius:10px; box-shadow:0 3px 12px rgba(20,40,70,.04);  }
.card-heading { margin-bottom:22px;  }
.card-heading h2, .table-toolbar h2 { margin:0; font-size:18px; font-weight:600;  }
.records-table th { font-size:13px; font-weight:600;  }
.card-heading i, .table-toolbar i { margin-right:8px; color:var(--clr-primary);  }


.records-table { margin-bottom:0; border:1px solid var(--border-colour);  }
.records-table th { background-color:#E6EFFB !important; }
.records-table th a { color:var(--text-primary) !important; }
.records-table th a::after { font-family:"bootstrap-icons"; content:"\F698"; margin-left:3px; font-size:14px; position:relative; top:3px; }
.records-table th { padding:14px; border-bottom-width:1px; color:#52616f; white-space:nowrap;  }
.records-table td { padding:15px 14px; border-color:var(--border-colour); font-size:14px;  }
.records-table tr:hover { /*background:#f8fbff !important;*/  }
.records-table .status-true{display:inline-block;padding:4px 10px;border-radius:6px;background:#dff3df;color:#22a447;font-size:12px;font-weight:600;line-height:1;}
.records-table .status-false{display:inline-block;padding:4px 10px;border-radius:6px;background:#f8dada;color:#ef4444;font-size:12px;font-weight:600;line-height:1;}
.records-table tr.odd td { background-color:#FAFAFA; }
.records-table a { color:var(--clr-primary); }
.pagination { display:table-row; font-weight:500; }
.pagination span, .pagination a { position:relative; display:inline-block; padding:var(--bs-pagination-padding-y) 0.75rem 0.75rem; font-size:1rem; color:var(--clr-main); background-color:#fff; text-decoration:none; transition:color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;}
.pagination span { background-color:var(--clr-primary); color:#fff; }
.pagination a:hover { background-color:var(--clr-accent-dark); color:#fff; }
.pagination tr { background-color:#f8fbff; }

.sort-icon { margin-left:4px; font-size:12px; color:#9aa7b3;  }
.status-badge { display:inline-block; padding:5px 10px; border-radius:6px; font-size:12px; font-weight:600;  }
.status-active { background:var(--success-bg); color:var(--success-text);  }
.status-pending { background:var(--warning-bg); color:var(--warning-text);  }
.status-inactive { background:var(--inactive-bg); color:var(--inactive-text);  }
.action-menu { color:var(--text-secondary); width:34px; height:34px; border:0; border-radius:6px; background:0 0;  }
.action-menu:hover { background:#edf2f7; color:var(--clr-primary);  }
.dropdown-item i { width:20px; margin-right:8px;  }
.table-footer { padding-top:20px; display:flex; justify-content:space-between; align-items:center;  }
.app-footer, .app-footer a { color:var(--text-secondary);  }
.page-item.active .page-link { background:var(--clr-primary); border-color:var(--clr-primary);  }

.app-footer { padding:20px 32px; display:flex; justify-content:space-between; border-top:1px solid var(--border-colour); background:#fff; font-size:12px;  }
.app-footer a { margin-left:20px;  }
.sidebar-collapsed .sidebar { width:78px;  }
.sidebar-collapsed .main-content { width:calc(100% - 78px); }
.sidebar-collapsed .collapse-sidebar span, .sidebar-collapsed .nav-item span, .sidebar-collapsed .nav-sub-item { display:none;  }
.sidebar-collapsed .brand { padding-left:18px; overflow:hidden;  }
.sidebar-collapsed .logo, .sidebar-collapsed .nav-item i { margin:0;  }
.sidebar-collapsed .nav-item { justify-content:center;  }

@media (max-width:991px) { 
    .sidebar { width:78px;  }
    .main-content { width:calc(100% - 78px);  }
    .brand { padding-left:18px; overflow:hidden;  }
    .collapse-sidebar span, .nav-item span, .nav-sub-item { display:none;  }
    .nav-item { }
    .content-wrapper { padding:20px;  } 
}

@media (max-width:767px) { 
    .top-header { padding:0 18px;  }
    .user-name { display:none;  }
    .page-heading { flex-direction:column; gap:18px;  }
    .table-toolbar { flex-direction:column; align-items:flex-start; gap:16px;  }
    .table-footer { flex-direction:column; align-items:flex-start; gap:18px;  }
    .pagination-controls { width:100%; justify-content:space-between;  }
    .app-footer { flex-direction:column; gap:12px;  }
    .app-footer a { margin-left:0; margin-right:15px;  }
}

@media (max-width:576px) {
    .floating-alert { min-width:auto; max-width:calc(100vw - 2rem); }
}