body {
    font-family: Arial, sans-serif;
    background: #eff3f9;
    margin: 0;
    padding: 0;
}

header {
    background: #ffffff;
    color: #475569;
    padding: 20px;
    position: relative;
}

.header-actions {
    position: absolute;
    right: 20px;
    top: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-user {
    text-align: right;
    font-size: 0.9em;
    line-height: 1.2;
}

.header-user strong {
    display: block;
    font-weight: 600;
}

.header-user span {
    display: block;
    font-size: 0.85em;
    color: #475569;
}

.header-school-switch {
    margin-top: 6px;
}

.header-school-select {
    width: 100%;
    max-width: 240px;
    margin-left: auto;
    display: block;
    padding: 6px 8px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    font-size: 0.85em;
}

.card form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.card label {
    font-weight: 600;
}

.card input {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
}

.card textarea {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    resize: vertical;
}

.form-stack {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.helper-text {
    margin: 0;
    font-size: 0.9em;
    color: #475569;
}

.question-section {
    display: none;
    padding: 8px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.question-block {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.quiz-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
    margin-top: 12px;
}

.quiz-meta p {
    margin-top: 4px;
}

.question-item {
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    background: #f8fafc;
}

.choice-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.choice-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.progress-row {
    margin: 10px 0 16px;
}

.progress-meta {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.progress-track {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    width: 0%;
    background: #2563eb;
    transition: width 0.2s ease-in-out;
}

.status-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 0.85em;
    margin-top: 6px;
}

.status-pending {
    background: #e2e8f0;
    color: #1e293b;
}

.status-pass {
    background: #dcfce7;
    color: #166534;
}

.status-fail {
    background: #fee2e2;
    color: #991b1b;
}

.modal {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 1000;
}

.modal.is-open {
    display: flex;
}

.modal-content {
    background: #ffffff;
    border-radius: 8px;
    padding: 16px;
    width: 100%;
    max-width: 520px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.history-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    margin-top: 12px;
}

.history-card {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #ffffff;
}

.certificate-card {
    border: 2px solid #1e3a8a;
}

.certificate-body {
    text-align: center;
    padding: 16px 10px;
}

.checkbox-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.checkbox-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.muted {
    color: #64748b;
    font-size: 0.9em;
}

.inline-form {
    display: inline;
}

.table-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.table-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
}
form.table-controls {
    display: flex;
    flex-direction: row;
}
.container-control-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    flex-direction: row-reverse;
}

.pagination {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
}

.card select {
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
}

.container {
    padding: 20px;
}

.dashboard {
    display: grid;
    gap: 20px;
    grid-template-columns: 280px 1fr;
}

.sidebar {
    background: #ffffff;
    padding: 15px;
    border-radius: 6px;
    min-width: 220px;
    max-width: 250px;
    width: 100%;
}

.sidebar h3 {
    margin-top: 0;
}

.sidebar .btn {
    max-width: min(calc(100% - 28px), 250px);
    width: 100%;
    margin-block: 2px;
    background: none;
    color: #475569;
}

.btn-icon {
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    padding: 0px !important;
    color: #475569 !important;
    background: none !important;
    border: 0px !important;
}

.btn-icon>span {
    display: none;
}

.btn-icon::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.btn-edit::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>');
}

.btn-view::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 5c-7 0-11 7-11 7s4 7 11 7 11-7 11-7-4-7-11-7zm0 12a5 5 0 1 1 0-10 5 5 0 0 1 0 10zm0-8a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>');
}

.btn-delete::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>');
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}


.btn-nav {
    display: block;
    text-align: left;
    width: 100%;
}

.btn-nav.active {
    background: none;
    color: #0f79f3;
}

.subnav {
    display: flex;
    flex-direction: column;
    /* gap: 6px; */
    margin: 0px 0 0px 10px;
}

.subnav-nested {
    margin: 0px 0 0 12px;
}

.sidebar .subnav .btn-subnav {

    color: #475569;
    font-weight: 500;
    display: flex;
    align-items: center;
}

.btn-subnav::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: currentColor;
    margin-right: 8px;
    opacity: 0.7;
}

.sidebar .subnav .btn-subnav.active {
    background: none;
    color: #0f79f3;
}

.content-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.content-thumb {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 8px;
    background: #e2e8f0;
}

.content-section {
    margin-top: 12px;
}

.table-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    background: #ffffff;
}

.table th,
.table td {
    border: 1px solid #e2e8f0;
    padding: 8px 10px;
    text-align: left;
}

.table th {
    background: #f1f5f9;
}

.card-link {
    text-decoration: none;
    color: inherit;
}

.card-link:hover {
    border: 1px solid #cbd5e1;
}

.simple-list {
    margin: 10px 0 0 18px;
}

.section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.card {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.btn {
    display: inline-block;
    background: #0f79f3;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 14px;
    border-radius: 0px;
    font-weight: 600;
}

.btn-secondary {
    background: #2563eb;
}

.btn-header {
    background: #ffffff;
    color: #1e3a8a;
}

.btn-danger {
    background: #dc2626;
    color: #ffffff;
}

.message-item.message-item-user {
    text-align: right;
}

.message-item .message-meta {
    font-weight: bold;
}


.form-group-inline {
    gap: 40px;
    display: flex;
    justify-content: flex-start;
}

.header-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

/* Sidebar Icons */
.btn-nav {
    display: flex;
    align-items: center;
}

.btn-nav::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    background-color: currentColor;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    flex-shrink: 0;
}

/* Dashboard - Home/Grid */
.nav-dashboard::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M3 13h8V3H3v10zm0 8h8v-6H3v6zm10 0h8V11h-8v10zm0-18v6h8V3h-8z"/></svg>');
}

/* Published Content - Newspaper/Article */
.nav-published-content::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
}

/* Awareness & Training - Graduation Cap */
.nav-awareness-training::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M5 13.18v4L12 21l7-3.82v-4L12 17l-7-3.82zM12 3L1 9l11 6 9-4.91V17h2V9L12 3z"/></svg>');
}

/* Incident Reporting - Warning/Alert */
.nav-incident-reporting::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/></svg>');
}

/* Reported Incidents - Clipboard/List */
.nav-reported-incidents::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/></svg>');
}

/* Reporting & Analytics - Bar Chart */
.nav-reporting-analytics::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2v-3h2v3zm4 0h-2v-5h2v5z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-7h2v7zm4 0h-2v-3h2v3zm4 0h-2v-5h2v5z"/></svg>');
}

/* Email Safety Check - Shield Mail */
.nav-email-safety-check::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L4 5v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V5l-8-4zm5.6 8L12 13.2 6.4 9h11.2zM6 15.7V10l6 4.5 6-4.5v5.7c-1.1 2.9-3.3 5.3-6 6.4-2.7-1.1-4.9-3.5-6-6.4z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 1L4 5v6c0 5.55 3.84 10.74 8 12 4.16-1.26 8-6.45 8-12V5l-8-4zm5.6 8L12 13.2 6.4 9h11.2zM6 15.7V10l6 4.5 6-4.5v5.7c-1.1 2.9-3.3 5.3-6 6.4-2.7-1.1-4.9-3.5-6-6.4z"/></svg>');
}

/* Content Management - Box/Inventory */
.nav-content-management::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>');
}

/* System Administration - Settings/Cog */
.nav-system-admin::before {
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/></svg>');
}


div#video_url_group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

a.btn.btn-secondary.btn-back {
    background: none;
    color: #1f3a8a;
    font-weight: normal;
    padding: 10px 0px;
    width: min-content;
}

a.btn.btn-secondary.btn-back:hover{
    text-decoration:underline;

}
table.table td a {
    color: #000000;
    font-weight: bold;
    text-decoration: none;
}

table.table td a:hover{
    text-decoration:underline;
}

.video-embed {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    margin: 12px 0;
    border-radius: 6px;
    overflow: hidden;
    background: #000000;
}

.video-embed iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-link-fallback {
    margin: 10px 0;
}