body {

  font-family: Arial, sans-serif;

  background: #eef2f6;

  display: flex;

  justify-content: center;

  align-items: flex-start;

  padding: 20px;

  margin: 0;
}

.form-container {

  width: 100%;
  max-width: 850px;

  background: white;

  padding: 40px;

  border-radius: 12px;

  border: 1px solid #ddd;

  box-shadow:
    0 4px 12px rgba(0,0,0,0.08);

  overflow: visible;
}

h1 {
  text-align: center;
  color: #1d3557;
}

h2 {

  margin-top: 35px;

  margin-bottom: 15px;

  color: #1d3557;

  border-bottom: 1px solid #ddd;

  padding-bottom: 8px;
}

.subtitle {
  text-align: center;
  color: #666;
}

.section {
  margin-top: 36px;
}

label {
  display: block;
  margin-bottom: 10px;
  font-weight: bold;
}

.roster-box {
  border: 1px solid #ccc;
}

.employee {

  padding: 15px;

  border: 1px solid #e2e2e2;

  border-radius: 8px;

  margin-bottom: 12px;

  background: #fafafa;
}

.employee:last-child {
  border-bottom: none;
}

input[type="text"],
input[type="date"],
input[type="time"],
select,
textarea {

  width: 100%;

  padding: 12px;

  border: 1px solid #ccc;

  border-radius: 8px;

  box-sizing: border-box;

  margin-top: 5px;

  margin-bottom: 15px;

  font-size: 15px;
}

textarea {
  height: 100px;
}

button {

  margin-top: 5px;

  padding: 12px 20px;

  background: #1d72f3;

  border: none;

  border-radius: 8px;

  color: white;

  font-size: 20px;

  cursor: pointer;

  transition: 0.2s ease;

  width: auto;
}

button:hover {

  opacity: 0.92;

  transform: translateY(-1px);
}

#message {
  margin-top: 20px;
  text-align: center;
  font-weight: bold;
}

.employee button {

  margin-right: 10px;

  margin-top: 10px;

  padding: 8px 16px;
}

.building-message {

  text-align: center;

  font-size: 18px;

  margin-top: 10px;

  margin-bottom: 10px;
}

#buildingId {

  display: block;

  width: 100%;

  padding: 12px;

  font-size: 16px;

  border-radius: 8px;

  border: 1px solid #ccc;

  margin-bottom: 25px;

  background: white;
}

.building-selector {

  text-align: center;

  margin-bottom: 20px;
}

.building-selector select {

  padding: 10px;

  font-size: 16px;

  width: 250px;
}

.building-selector-label {

  display: block;

  text-align: center;

  font-weight: bold;

  margin-bottom: 8px;

  font-size: 16px;

  color: #1d3557;
}

#buildingSelect,
#buildingId {

  position: relative;

  z-index: 9999;
}

.info-card{

    background:white;

    border-radius:12px;

    padding:18px;

    margin-bottom:24px;

    box-shadow:0 2px 8px rgba(0,0,0,.06);

}

hr {

  margin: 35px 0;

  border: none;

  border-top: 1px solid #ddd;
}

a button {

  background: #dc3545;

  margin-bottom: 25px;
}

.logo-container {

  text-align: center;

  margin-bottom: 15px;
}

.company-logo {

  max-width: 150px;

  height: auto;

  border-radius: 10px;

  box-shadow:
    0 2px 8px rgba(0,0,0,0.15);
}

.employee-status-row {

    background:white;

    border:none;

    border-radius:14px;

    padding:18px;

    margin-bottom:16px;
	
	transition:.25s;

    box-shadow:
        0 3px 10px rgba(0,0,0,.08);

}

.employee-status-row:hover{

    transform:translateY(-2px);

    box-shadow:
      0 6px 16px rgba(0,0,0,.12);

}

.employee-name{

    width:100%;

    font-size:18px;

    font-weight:600;

    color:#1d3557;

    margin-bottom:12px;

}

.employee-complete {

  background: #f4f4f4;

  padding: 8px 12px;

  margin-bottom: 6px;

  border-left: 5px solid green;

  cursor: pointer;

}

.status-options label {

    display: flex;
    align-items: center;

    min-height: 58px;

    padding: 12px 16px;

    border: 1px solid #d7d7d7;

    border-radius: 8px;

    background: #fafafa;

    cursor: pointer;

    transition: all .2s ease;

}

.status-options{

    display:flex;

    flex-direction:column;

    gap:14px;

}

.status-options input[type="radio"] {

    transform: scale(1.4);

    margin-right: 14px;

    accent-color: #8a1538;

}

.status-options label:hover {

    background: #f2f7fb;

    border-color: #8a1538;

}

.status-options label:has(input:checked) {

    background: #e8f4ea;

    border-color: #2e7d32;

    font-weight: 600;

}

#emergencyBox {

  background: #fff8dc;

  border: 1px solid #e0d28a;

  padding: 15px;

  margin-bottom: 20px;

  border-radius: 6px;
}

#emergencyBox h3 {

  margin-top: 0;

  color: #b45309;
}

#emergencyInstructionsDisplay {

  margin-bottom: 10px;
  
  margin: 0;

  line-height: 1.5;
}

.admin-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-bottom: 25px;

}

.logout-btn {

  background: #c62828;

  color: white;

  padding: 10px 18px;

  border-radius: 6px;

  text-decoration: none;

  font-weight: bold;

}

.logout-btn:hover {

  opacity: 0.9;

}

.excel-upload-row {

  display: flex;

  align-items: center;

  gap: 12px;

  margin-top: 10px;

  margin-bottom: 20px;

}

.section-header {

  margin-top: 30px;
  margin-bottom: 15px;

  padding-top: 15px;

  border-top: 2px solid #ccc;

  font-size: 20px;
  font-weight: bold;

}

.required {

  color: red;

  font-weight: bold;

}

.required-bar {

  border-top: 1px solid #ddd;

  border-bottom: 1px solid #ddd;

  padding: 10px 0;

  margin: 15px 0;

  text-align: center;

  font-size: 14px;

  color: #1d3557;

  font-weight: 600;

}

.submit-note {

  background: #fff8dc;

  border: 1px solid #e0d28a;

  padding: 12px;

  margin-top: 20px;

  margin-bottom: 15px;

  border-radius: 6px;

  font-weight: bold;

  color: #b45309;

}

.required-star {

  color: #c62828;

  font-weight: bold;

  font-size: 18px;

  margin-right: 4px;

}

#coordinatorDisplay {

  text-align: center;
  
  margin-bottom: 10px;

  font-weight: bold;

  margin: 15px 0;

}

.multi-user-warning {

  margin: 15px 0;

  padding: 12px;

  border: 1px solid #f0ad4e;

  border-radius: 6px;

  background: #fff8e5;

  text-align: center;

  font-weight: bold;

}

#qrLogContainer {

  display: none;

  margin-top: 15px;

}

#qrLogTable {

  width: 100%;

  border-collapse: collapse;

}

#qrLogTable th,
#qrLogTable td {

  border: 1px solid #ccc;

  padding: 8px;

}

#qrLogTable th {

  background: #f5f5f5;

}

#qrLogTable td {
  white-space: nowrap;
}

.completed{

    background:#eef9ef;

    border-left:8px solid #2e7d32;

    opacity:.92;

    transition:all .25s ease;

}

@media (max-width:768px){

    body{

        padding:8px;

    }

    .form-container{

        padding:16px;

    }

    .employee-status-row{

        padding:18px;

    }

    .employee-name{

        width:100%;

        font-size:20px;

        margin-bottom:12px;

    }

    .status-options{

        display:flex;

        flex-direction:column;

        gap:12px;

    }

    .status-options label{

        min-height:64px;

        font-size:20px;

    }

    input[type="text"],
    input[type="date"],
    input[type="time"],
    select,
    textarea{

        font-size:18px;

        padding:16px;

    }

.employee-add-row{

    display:flex;

    gap:12px;

    align-items:center;

}

.employee-add-row input{

    flex:1;

    margin-bottom:0;

}

.employee-add-row button{

    white-space:nowrap;

}

    #submitButton{

        width:100%;

        height:64px;

        font-size:22px;

        font-weight:bold;

    }

}

.btn-green {

    display: block;

    margin: 12px 0 28px auto;

    min-width: 220px;

    height: 52px;

    border-radius: 10px;

    font-size: 18px;

    font-weight: 600;

}

.btn-blue{
    background:#1565c0;
}

.btn-orange{
    background:#ef6c00;
}

.btn-purple{
    background:#6a1b9a;
}

.btn-red{
    background:#c62828;
}

.info-box{

    background:#eef7ff;

    border-left:5px solid #1d72f3;

    padding:16px 20px;

    margin:18px 0 24px;

    border-radius:10px;

}

.info-box strong{

    display:block;

    font-size:17px;

    color:#1d3557;

    margin-bottom:10px;

}

.info-box ol{

    margin:0;

    padding-left:20px;

}

.info-box li{

    margin-bottom:8px;

    line-height:1.5;

}

.warning-text{

    margin-top:14px;

    color:#b45309;

    font-weight:600;

}

.completed .employee-name {
    color: #1d72f3;
    cursor: pointer;
    text-decoration: underline;
}

.completed .employee-name:active {
    opacity: 0.7;
}

#liveToast{

    position:fixed;

    bottom:25px;

    left:50%;

    transform:translateX(-50%);

    background:#1d3557;

    color:white;

    padding:14px 24px;

    border-radius:8px;

    font-weight:bold;

    box-shadow:0 8px 18px rgba(0,0,0,.25);

    opacity:0;

    transition:.3s;

    z-index:99999;

    pointer-events:none;

}

#liveToast.show{

    opacity:1;

}

.updated{

    animation:flashUpdate 1.5s ease;

}

@keyframes flashUpdate{

    0%{

        background:#fff8b3;

    }

    100%{

        background:white;

    }

}

/* ===== Admin Dashboard Polish ===== */
.admin-card{background:#fff;border:1px solid #d9dee3;border-radius:14px;padding:26px;margin-bottom:28px;box-shadow:0 3px 12px rgba(0,0,0,.07);}
.section-header{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:700;color:#1d3557;margin:0 0 22px;padding:0 0 12px;border-top:none;border-bottom:2px solid #e6e9ee;}
label{display:block;font-weight:700;font-size:17px;color:#1d3557;margin-top:22px;margin-bottom:10px;}
input[type="text"],textarea,select{padding:14px 16px;font-size:17px;border:1px solid #cfd6dd;border-radius:10px;transition:.2s;}
input:focus,textarea:focus,select:focus{outline:none;border-color:#8a1538;box-shadow:0 0 0 4px rgba(138,21,56,.12);}
#emergencyInstructions,#coordinatorName{margin-bottom:12px;}
.employee{background:#fafafa;border:1px solid #dfe4ea;border-radius:12px;padding:18px;margin-bottom:18px;transition:.2s;}
.employee:hover{box-shadow:0 6px 14px rgba(0,0,0,.08);}
button{min-height:48px;font-weight:600;}
.excel-upload-row{margin-top:20px;}
#qrLogContainer{margin-top:18px;padding:18px;background:#fafafa;border:1px solid #dfe4ea;border-radius:12px;}
@media (max-width:768px){.admin-card{padding:18px;}.section-header{font-size:22px;}.btn-green,.btn-blue,.btn-purple,.btn-orange{width:100%;margin-left:0;}}