body { font-family: 'Roboto', sans-serif; background: #c8ecf5; }
    .section-title1 { font-size:2rem; font-weight:700; margin-bottom:1rem; position:relative; }
    .section-title1::after { content:''; position:absolute; width:60px; height:4px; background:#4e73df; left:0; bottom:-8px; border-radius:2px; }
    .card { border-radius: 10px; box-shadow:0 4px 10px rgba(0,0,0,0.1); }
    .form-label { font-weight:600; }
    .form-control, .form-select { border-radius:8px; }
    .table-responsive { max-height:450px; overflow-y:auto; border-radius:8px; }
    thead th { position: sticky; top: 0; background: #f8f9fa; z-index: 2; border-bottom: 2px solid #dee2e6; }
    .form-actions button { background: linear-gradient(90deg,#4e73df,#1cc88a); color: #fff; border: none; padding: 0.6rem 1.8rem; border-radius: 8px; font-weight:600; cursor:pointer; }
    .table tbody tr:hover { background-color: #f1f7ff; }
    #tableSpinner { display: none; text-align: center; padding: 20px; }
    /* Align form fields and buttons */
    form .form-control,
    form .form-select,
    form button {
      height: 40px;
    }
    #searchForm .btn {
      background: linear-gradient(90deg,#4e73df,#1cc88a);
      border: none;
      color: #fff;
      font-weight: 600;
    }
    #searchForm .btn:hover {
      opacity: 0.9;
    }
    /* check box */
    .present-checkbox {
      transform: scale(1.5);
      cursor: pointer;
    }
    
    .attendance-status {
      font-size: 12px;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
    }
    
    .status-present {
      background-color: #d4edda;
      color: #155724;
    }
    
    .status-absent {
      background-color: #f8d7da;
      color: #721c24;
    }
    
    .status-unknown {
      background-color: #e2e3e5;
      color: #383d41;
    }
    
    .loading-spinner {
      display: none;
      text-align: center;
      padding: 2rem;
    }
    
    .no-students {
      text-align: center;
      padding: 2rem;
      color: #6c757d;
    }
    
    .toast-container {
      position: fixed;
      top: 1rem;
      right: 1rem;
      z-index: 1080;
    }