/* =====================================================
   COMPANY THEME - BASED ON #B30000
   ===================================================== */

/* ================= ROOT VARIABLES ================= */

:root {

  /* Brand Colors */
  --bs-primary: #B30000;
  --bs-primary-rgb: 179, 0, 0;
  /*--bs-primary: #940000;
  --bs-primary-rgb: 148, 3, 3;*/
  /*
  --bs-secondary: #003366;
  --bs-secondary-rgb: 0, 51, 102;*/
  --bs-secondary: #34495E;
  --bs-secondary-rgb: 52,73,94;
  
  --bs-third: #5A6268;
  --bs-third-rgb: 90, 98, 104;
  /* Background & Text */
  --bs-body-bg: #F8F9FA;
  --bs-body-color: #444444;

  --bs-border-color: #DEE2E6;
}

/* ================= BODY ================= */

body {
  background-color: #F8F9FA;
  color: #444444;
}

/* ================= PAGE HEADINGS ================= */
.page-title-wrapper {
    
    /*background-color: var(--bs-primary);*/
    padding: 1rem;
    text-align: left;
}

.page-title {
    font-weight:600;
    border-left:5px solid #B30000;
    padding-left:10px;
    font-weight:600;    
    margin-bottom:20px;
}

.form-section-title{
    font-weight:600;
    color:#333;
    margin-top:20px;
    margin-bottom:10px;
    border-bottom:1px solid #e5e5e5;
    padding-bottom:5px;
}

/* ================= NAVBAR ================= */

.navbar-brand {
  font-weight: 600;
  color: #ffffff !important;
}

.navbar-custom {
  background-color: #B30000;
}

.navbar-custom .nav-link {
  color: #ffffff !important;
}

.navbar-custom .nav-link:hover {
  color: #F8D7DA !important;
}

/* ================= CARDS ================= */

.card {
  border-radius: 10px;
  border: 1px solid #DEE2E6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.card-title {
  color: #B30000;
  font-weight: 600;
}

.card-header {
   
  background-color: #F8D7DA;
  color: #800000;
  font-weight: 600;
}
.card-header-ui{
    background-color: var(--bs-secondary); /* bg-primary */
    color: #fff;                         /* text-white */
    font-size: 1.25rem;                  /* fs-5 */
    display: flex;                       /* d-flex */
    justify-content: space-between;      /* justify-content-between */
    align-items: center;                 /* align-items-center */
    margin-top: .25rem;                  /* mt-1 */
    font-weight: 600;
}

/* ================= BUTTONS ================= */

.btn-primary {
  background-color: #B30000;
  border-color: #B30000;
}

.btn-primary:hover {
  background-color: #800000;
  border-color: #800000;
}

.btn-secondary {
  background-color: #003366;
  border-color: #003366;
  color: #ffffff;
}

.btn-secondary:hover {
  background-color: #002244;
  border-color: #002244;
}

/* ================= TABLES ================= */

.table thead {
  background-color: #B30000;
  color: #ffffff;
}

.table-hover tbody tr:hover {
  background-color: #F8D7DA;
}

.table .btn{
padding:3px 8px;
}
.table{
border-radius:10px;
overflow:hidden;
}

.table thead{
background:#f8f9fa;
}

.table tbody tr:hover{
background:#f1f3f5;
}

.table tbody td{
   
    line-height: 1.2;
    padding: 6px 10px;
    vertical-align: middle;
}
/* ================= BADGES ================= */

.badge.bg-primary {
  background-color: #B30000 !important;
}

.badge.bg-secondary {
  background-color: #003366 !important;
}

/* ================= FORM FOCUS ================= */

.form-control:focus {
  border-color: #B30000;
  box-shadow: 0 0 0 0.2rem rgba(179, 0, 0, 0.25);
}

.form-control {
 
    border:1px solid #999999;
}
.form-check-input {
    border: 2px solid #0d6efd;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
/* ================= ALERTS ================= */

.alert-primary {
  background-color: #F8D7DA;
  color: #800000;
  border-color: #F5C2C7;
}

/* ================= CUSTOM UTILITIES ================= */

.bg-brand-light {
  background-color: #F8D7DA;
}

.text-brand {
  color: #B30000;
}

.table-scroll {
  max-height: 500px;      /* Scroll area height */
  overflow-y: auto;
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  /*background-color: #f8f9fa; /* Important */
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

.table-header-brand {
    background-color: #F5F6F7;
    color: #333;
}

.table-header-brand th {
    background-color: #003366;
    color: #ffffff;
}

.table thead th{
    /*background:#F5F6F7;*/
    color:#333;
    font-weight:600;
    background:#F5F6F7;
    /*border-bottom:2px solid #B30000;*/
    border-bottom: 2px solid #dee2e6;  /* neutral */
    font-weight:600;
    
    position:sticky;
    top:0;
    background:#F5F6F7;
    z-index:10;
}

.table tbody tr:hover td:first-child{
    border-left:4px solid #B30000;
}
.table tbody tr:hover td {
    background:#FFF3F3;
}

.table > :not(caption) > * > * {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    vertical-align: middle;
}

.btn-app {
    min-width: 160px;
    font-weight: 500;
    border-radius: 6px;
    padding: 0.5rem 1rem;
     background-color: #6C757D;   /* Bootstrap gray */
  border-color: #6C757D;
  color: #ffffff;
  padding:8px 18px;
    font-weight:500;
    border-radius:6px;
}

/* Optional consistent hover improvement */
.btn-app:hover {
    
    background-color: #5A6268;
    border-color: #545B62;
    color: #ffffff;
}

/* Optional consistent focus */
.btn-app:focus {
    box-shadow: 0 0 0 0.15rem rgba(0,0,0,.1);
}

.btn-app-sm {
    min-width: 120px;
    font-size: 0.875rem;
    padding: 0.4rem 0.8rem;
}

.btn-group-app {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;      /* same as gap-2 */
    justify-content: center;
    margin-bottom: 1rem;  /* same as mb-3 */
}

@media (min-width: 576px) {
    .btn-group-app {
        flex-direction: row;
        justify-content: center;
    }
}

.progress {
    border-radius: 20px;
    background-color: #E9ECEF;
}

.progress-bar {
    border-radius: 20px;
    font-weight: 500;
}

.modal {
    z-index: 9999 !important;
}

.action-cell{
    position: relative;
}

.row-popup{
    position: absolute;
    top: -35px;
    left: 50%;
    transform: translateX(-50%);
    
    color: #fff;
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 4px;

    white-space: nowrap;
    z-index: 1000;

    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}


@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.changed-input {
    /*background-color: #FFFF99 !important;*/
    background:#fff9c4;
}

.cursor-pointer{
    cursor:pointer;
}

.session-badge{
    font-size:13px;
    padding:6px 8px;
}
/*progress bar circle*/
.attendance-chart{
    display:flex;
    justify-content:center;
    align-items:center;
    height:200px;
}

.progress-circle{
    width:140px;
    height:140px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
    font-size:24px;
    color:#003366;
    background:
        radial-gradient(closest-side, white 80%, transparent 81%),
        conic-gradient(#0d6efd calc(var(--value) * 1%), #e6e6e6 0);
}

.att-stat{
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    border-bottom:1px solid #f1f1f1;
}

.att-label{
    font-weight:500;
}

.att-value{
    font-weight:700;
    font-size:18px;
}
.progress-circle{
    transition: all .4s ease;
}

.scan-row{
    display:flex;
    justify-content:space-between;
    padding:8px 10px;
    border-bottom:1px solid #eee;
    font-size:14px;
}

.scan-row:nth-child(1){
    background:#f8f9fa;
    font-weight:600;
}

.scan-name{
    color:#333;
}

.scan-time{
    color:#6c757d;
}

/*duty list*/
.duty-card{
border-left:4px solid #dc3545;
transition:0.15s;
position:relative;
}

.duty-card:hover{
transform:translateY(-2px);
box-shadow:0 4px 10px rgba(0,0,0,0.15);
}
.duty-card .invigilator{
border-top:1px solid #eee;
margin-top:8px;
padding-top:6px;
font-size:0.85rem;
}
.duty-serial{
position:absolute;
top:8px;
right:8px;
font-size:0.75rem;
}
.duty-expired{
background:#f8f9fa;
opacity:0.85;
border-left:4px solid #adb5bd;
}

.duty-expired .badge{
background:#dc3545;
}
.duty-expired-label{
position:absolute;
bottom:8px;
right:8px;
font-size:0.7rem;
}

.page-container{
max-width:1400px;
margin:auto;
}

input[readonly]{
background:#f5f5f5;
}

/*notice*******************************/

.notice-list{
height:550px;
overflow-y:auto;
}

.notice-item{
display:flex;
gap:12px;
padding:12px;
border-bottom:1px dashed #ddd;
text-decoration:none;
color:#333;
}

.notice-item:hover{
background:#f5f7fa;
}

.notice-date{
width:60px;
font-weight:600;
color:#0d6efd;
}

.notice-item strong{
color:#0d6efd;
}

.notice-item.active{
background:#e9f2ff;
}
.notice-list{

max-height:320px;
overflow-y:auto;
}

.notice-item{
cursor:pointer;
}
.notice-content pre{
    white-space: pre-wrap;
    word-break: break-word;
}
.notice-content{
    white-space: pre-line;
    word-break: break-word;
}

.notice-content img{
    max-width:100%;
    height:auto;
}

.notice-content table{
    width:100%;
}

.notice-content a{
    color:#0d6efd;
}
.notice-view{
    line-height:1.6;
    /*border-left:4px solid #ccc;*/
    padding-left:15px;
}


.notice-title{
    font-weight:600;
}

.notice-intro{
    font-size:15px;
}

.notice-body{
    margin-top:10px;
}

.notice-body img{
    max-width:100%;
    height:auto;
}

.notice-body table{
    width:100%;
}
.notice-item{
padding:10px;
border-radius:6px;
transition:.2s;
}

.notice-item:hover{
background:#f3f6fa;
}

/* =====================================================
   ANIMATIONS
===================================================== */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes pulse{
    0%{transform:scale(1);}
    50%{transform:scale(1.1);}
    100%{transform:scale(1);}
}

.nav-pills .nav-link {
    border-radius: 10px;
    padding: 8px 16px;
    background: #f1f3f5;
    color: #495057;
    transition: all 0.2s ease;
    font-weight: 500;
}

.nav-pills .nav-link:hover {
    background: #e9ecef;
}

.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    color: #fff;
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.3);
}
.nav-pills .nav-link {
    background: #fff;
    border: 1px solid #dee2e6;
}
.nav-pills .nav-link {
    border-radius: 12px;
    padding: 6px 14px;
}
.nav-pills .nav-link.active {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
    color: #fff;
    box-shadow: 0 4px 12px rgba(13,110,253,0.3);
}

/* Ensure all floating elements appear above sticky headers */
.tooltip,
.popover,
.dropdown-menu,
.ui-tooltip,
.student-status-popup {
    z-index: 99999 !important;
}

/* If using Bootstrap tooltips, popovers, or modals */
.modal {
    z-index: 1055;
}

.modal-backdrop {
    z-index: 1050;
}

/* DataTables fixed header */
.fixedHeader-floating,
.fixedHeader-locked {
    z-index: 20 !important;
}