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-menu-toggle {
    display: none;
    position: absolute;
    right: 20px;
    top: 20px;
    width: 40px;
    height: 40px;
    border: 1px solid #cbd5e1;
    background: #ffffff;
    color: #334155;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    cursor: pointer;
}

.header-menu-icon,
.header-menu-icon::before,
.header-menu-icon::after {
    content: '';
    display: block;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 999px;
}

.header-menu-icon {
    position: relative;
}

.header-menu-icon::before {
    position: absolute;
    top: -6px;
}

.header-menu-icon::after {
    position: absolute;
    top: 6px;
}

.header-mobile-nav {
    display: none;
}

.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;
}
span.status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
}

.quiz-card {
    position: relative;
}

@media (max-width:768px){
    span.status-badge {
        top:unset;
        bottom: 10px;
    }
}
.quiz-meta p {
    margin-top: 4px;
}

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

.quiz-title-link:hover {
    text-decoration: underline;
}

.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;
}

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

.risk-status-medium {
    background: #fef3c7;
    color: #92400e;
}

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

.severity-badge {
    display: inline-block;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 0.82em;
    font-weight: 700;
    line-height: 1.2;
}

.severity-badge-low {
    background: #dcfce7;
    color: #166534;
}

.severity-badge-medium {
    background: #fef3c7;
    color: #92400e;
}

.severity-badge-high {
    background: #fee2e2;
    color: #991b1b;
}

.severity-badge-critical {
    background: #7f1d1d;
    color: #ffffff;
}

.severity-badge-default {
    background: #e2e8f0;
    color: #334155;
}

.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;
    position: relative;
}

.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;
    transition: all .3s ease-in-out;
}
@media (max-width:768px){
    .dashboard {
        
        grid-template-columns:1fr;
    }
    .dashboard.container{
        padding:10px;
    }
}
.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:hover,
.btn-icon:focus-visible {
    color: #1d4ed8 !important;
    background: #eaf2ff !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>');
}

.btn-email::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 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></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 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z"/></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-workflow {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    margin-top: 10px;
}

.content-workflow-step {
    position: relative;
    border: 1px solid #dbe5f1;
    border-radius: 8px;
    background: #f8fbff;
    padding: 12px;
    box-shadow: inset 0 1px 0 #ffffff;
}

.content-workflow-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 0.85rem;
    font-weight: 700;
    color: #ffffff;
    background: #2563eb;
    margin-bottom: 8px;
}

.content-workflow-step h4 {
    margin: 0 0 6px;
    color: #0f172a;
}

.content-workflow-step p {
    margin: 0 0 8px;
    color: #334155;
    min-height: 42px;
}

.content-workflow-link {
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.content-workflow-link:hover {
    text-decoration: underline;
}

.admin-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.admin-overview-card {
    border: 1px solid #e2e8f0;
}

.admin-overview-card h3 {
    margin: 0 0 6px;
    font-size: 0.95rem;
}

.admin-overview-value {
    margin: 0;
    font-size: 4rem;
    font-weight: 800;
    line-height: 1;
    color: #0f172a;
}

.admin-overview-link {
    display: inline-block;
    margin-top: 8px;
    color: #1d4ed8;
    text-decoration: none;
    font-weight: 600;
}

.admin-overview-link:hover {
    text-decoration: underline;
}

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

.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;
    position:relative;
}

.table th {
    background: #f1f5f9;
}

.card-link {
    text-decoration: none;
    color: inherit;
    border:1px solid #ecf0f3;
}

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

.simple-list {
    margin: 10px 0 0 0px;
    padding-left:20px;
}

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

.card {
    background: white;
    padding: 15px;
    margin-bottom: 15px;
    border-radius: 6px;
}
@media (max-width:768px){
    .card.conversation {
        padding: 15px 0px;
    }
}
.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.landing-page {
    max-width: 1120px;
    margin: 0 auto;
}

.landing-hero {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 18px;
    border: 1px solid #dbe5f1;
    background: linear-gradient(135deg, #f8fbff 0%, #ffffff 65%);
}

.landing-kicker {
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.75rem;
    font-weight: 700;
    color: #1d4ed8;
}

.landing-hero h1 {
    margin: 0 0 10px;
    font-size: 2rem;
    line-height: 1.2;
    color: #0f172a;
}

.landing-lead {
    margin: 0;
    color: #334155;
    max-width: 700px;
}

.landing-cta .btn {
    min-width: 160px;
    text-align: center;
}

.landing-hero-panel {
    background: #ffffff;
    border: 1px solid #dbe5f1;
    border-radius: 6px;
    padding: 12px;
}

.landing-hero-panel h3 {
    margin-top: 0;
}

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

.landing-feature-item {
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px;
    background: #ffffff;
}

.landing-feature-image {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 6px;
    margin-bottom: 10px;
    background: #e2e8f0;
}

.landing-feature-item h3 {
    margin: 0 0 8px;
}

.landing-feature-item p {
    margin: 0;
    color: #334155;
}

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

.landing-flow-item {
    border-left: 4px solid #2563eb;
    padding: 8px 10px;
    background: #f8fafc;
}

.landing-flow-item strong {
    display: block;
    margin-bottom: 4px;
}

.landing-flow-item p {
    margin: 0;
    color: #334155;
}

.landing-footer-note p {
    margin: 0;
    color: #7d859b;
    font-size:13px;
}

.landing-footer-note p + p {
    margin-top: 8px;
}

.landing-footer-note {
    background: #eff3f9;
    padding:0px;
    margin:0px;
}

.landing-footer-note a {
    color: #5c647c;
    text-decoration: none;
}

.landing-footer-note a:hover {
    text-decoration: underline;
}

.legal-page {
    max-width: 1120px;
    margin: 0 auto;
}

.legal-page h2,
.legal-page h3 {
    margin-top: 0;
}

.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;
}
.message-item p {
    width: fit-content;
}

.message-item.message-item-user {
    text-align: right;
    display: flex;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
    /* width: max-content; */
    /* float: right; */
}

.message-item.message-item-user > p:nth-child(2) {
    background: #cde4ff;
    padding: 10px 15px;
    border-radius: 20px;
}

.message-item.message-item-staff > p:nth-child(2) {
    background: #fff5cd;
    padding: 10px 15px;
    border-radius: 20px;
}

.form-group-inline {
    gap: 40px;
    display: flex;
    justify-content: flex-start;
}
@media (max-width:768px){
        .form-group-inline {
        display: flex;
        flex-direction: column;
    }
}
.header-logo {
    height: 60px;
    width: auto;
    object-fit: contain;
}

.site-footer {
    margin-top: 16px;
    border-top: 1px solid #dbe5f1;
    background: #ffffff;
}

.site-footer-inner {
    max-width: 1120px;
    margin: 0 auto;
    padding: 12px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    color: #475569;
    font-size: 0.9rem;
}

.site-footer-inner p {
    margin: 0;
}

.site-footer a {
    color: #1d4ed8;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .landing-hero {
        grid-template-columns: 1fr;
    }

    .landing-hero h1 {
        font-size: 1.6rem;
    }

    .landing-cta .btn {
        width: 100%;
    }

    .header-menu-toggle {
        display: inline-flex;
    }

    .sidebar {
        display: none;
    }

    .header-actions {
        display: none;
        right: 16px;
        top: 64px;
        background: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        box-shadow: 0 10px 20px rgba(15, 23, 42, 0.12);
        padding: 10px;
        align-items: flex-end;
        flex-direction: column;
        gap: 8px;
        min-width: 220px;
        z-index: 50;
    }

    .header-actions.is-open {
        display: flex;
    }

    .header-mobile-nav {
        display: flex;
        flex-direction: column;
        width: 100%;
        border-top: 1px solid #e2e8f0;
        border-bottom: 1px solid #e2e8f0;
        padding: 8px 0;
        margin: 2px 0;
        gap: 2px;
    }

    .header-mobile-link {
        display: block;
        width: 100%;
        text-decoration: none;
        color: #334155;
        padding: 6px 2px;
        font-size: 0.92rem;
    }

    .header-mobile-link.active {
        color: #0f79f3;
        font-weight: 700;
    }

    .header-mobile-link.is-subnav {
        padding-left: 14px;
        font-size: 0.88rem;
    }
}

/* 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;
}

.content-description table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    background: #ffffff;
    border: 1px solid #dbe5f1;
}

.content-description th,
.content-description td {
    border: 1px solid #dbe5f1;
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    color: #334155;
}

.content-description th {
    background: #eff6ff;
    color: #1e3a8a;
    font-weight: 700;
}

.content-description tr:nth-child(even) td {
    background: #f8fafc;
}

@media (max-width: 768px) {
    .content-description {
        overflow-x: auto;
    }

    .content-description table {
        min-width: 520px;
    }
}

.wysiwyg-editor {
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #ffffff;
}

.wysiwyg-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    border-bottom: 1px solid #e2e8f0;
}

.wysiwyg-btn {
    padding: 6px 10px;
    line-height: 1;
}

.wysiwyg-content {
    min-height: 180px;
    padding: 10px;
    outline: none;
}
.wysiwyg-btn {
    background: none;
    border: 0px;
    color: #000;
    font-size: 17px;
    padding: 10px;
    border-radius:5px;
}
.wysiwyg-btn:hover {
    background: #00000021;
    cursor:pointer;
}
.wysiwyg-toolbar {
    background: #f0f0f0;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding-block:5px;
}
.reported-mobile-col {
    display: none;
}

.reported-mobile-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.reported-mobile-summary strong {
    font-weight: 700;
}

@media (max-width: 768px) {
    .reported-incidents-table .reported-desktop-col {
        display: none;
    }

    .reported-incidents-table .reported-mobile-col {
        display: table-cell;
        min-width: 250px;
    }

    .content-materials-table .content-materials-desktop-col {
        display: none;
    }

    .content-materials-table .content-materials-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .content-quizzes-table .content-quizzes-desktop-col {
        display: none;
    }

    .content-quizzes-table .content-quizzes-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .assessment-modules-table .assessment-modules-desktop-col {
        display: none;
    }

    .assessment-modules-table .assessment-modules-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .admin-user-directory-table .admin-user-directory-desktop-col {
        display: none;
    }

    .admin-user-directory-table .admin-user-directory-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .incident-reporting-table .incident-reporting-desktop-col {
        display: none;
    }

    .incident-reporting-table .incident-reporting-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .email-safety-check-table .email-safety-check-desktop-col {
        display: none;
    }

    .email-safety-check-table .email-safety-check-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .risk-summary-table .risk-summary-desktop-col {
        display: none;
    }

    .risk-summary-table .risk-summary-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .analytics-completed-table .analytics-completed-desktop-col {
        display: none;
    }

    .analytics-completed-table .analytics-completed-mobile-col {
        display: table-cell;
        min-width: 240px;
    }

    .content-categorization-table .content-categorization-desktop-col {
        display: none;
    }

    .content-categorization-table .content-categorization-mobile-col {
        display: table-cell;
        min-width: 240px;
    }
}

.content-materials-mobile-col {
    display: none;
}

.content-materials-mobile-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.content-materials-mobile-summary strong {
    font-weight: 700;
}

.content-quizzes-mobile-col,
.assessment-modules-mobile-col,
.admin-user-directory-mobile-col,
.incident-reporting-mobile-col,
.email-safety-check-mobile-col,
.risk-summary-mobile-col,
.analytics-completed-mobile-col,
.content-categorization-mobile-col {
    display: none;
}

.content-quizzes-mobile-summary,
.assessment-modules-mobile-summary,
.admin-user-directory-mobile-summary,
.incident-reporting-mobile-summary,
.email-safety-check-mobile-summary,
.risk-summary-mobile-summary,
.analytics-completed-mobile-summary,
.content-categorization-mobile-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.content-quizzes-mobile-summary strong,
.assessment-modules-mobile-summary strong,
.admin-user-directory-mobile-summary strong,
.incident-reporting-mobile-summary strong,
.email-safety-check-mobile-summary strong,
.risk-summary-mobile-summary strong,
.analytics-completed-mobile-summary strong,
.content-categorization-mobile-summary strong {
    font-weight: 700;
}

.certificate-card {
    border: 1px solid #dbe5f1;
    background: linear-gradient(180deg, #fffefb 0%, #ffffff 100%);
}

.certificate-shell {
    position: relative;
    border: 8px double #d4a017;
    padding: 24px;
    background: #fffdfa;
    overflow: hidden;
}

.certificate-watermark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(40px, 9vw, 120px);
    font-weight: 800;
    color: rgba(191, 161, 74, 0.08);
    letter-spacing: 0.08em;
    pointer-events: none;
    user-select: none;
}

.certificate-inner {
    position: relative;
    text-align: center;
    z-index: 1;
}

.certificate-kicker {
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #8a6f1a;
    margin-bottom: 14px;
}

.certificate-learner {
    margin: 4px 0 10px;
    font-size: clamp(1.6rem, 4vw, 2.4rem);
    color: #0f172a;
}

.certificate-text {
    margin: 6px 0;
    color: #334155;
}

.certificate-module {
    margin: 6px 0 14px;
    font-size: clamp(1.1rem, 3vw, 1.5rem);
    color: #1e3a8a;
}

.certificate-signature-row {
    margin-top: 18px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.certificate-signature {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 220px;
    text-align: left;
}

.certificate-sign-line {
    display: block;
    width: 100%;
    border-bottom: 2px solid #334155;
}

.certificate-seal {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 3px solid #b45309;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #92400e;
    background: radial-gradient(circle, #fff7ed 0%, #fde68a 85%);
}

.certificate-verification-code {
    margin-top: 16px;
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    color: #475569;
    word-break: break-all;
}

.certificate-public-link {
    margin-top: 14px;
}

.certificate-public-link input {
    width: 100%;
}

.certificate-verify-card {
    max-width: 980px;
    margin: 20px auto;
}

.certificate-verify-status {
    display: inline-block;
    padding: 6px 10px;
    border-radius: 999px;
    font-weight: 700;
    margin-bottom: 10px;
}

.certificate-valid {
    background: #dcfce7;
    color: #166534;
}

.certificate-invalid {
    background: #fee2e2;
    color: #991b1b;
}

.certificate-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

@media print {
    header,
    .sidebar,
    .certificate-card .table-header,
    .certificate-actions,
    .certificate-public-link,
    .page-content > .card:not(.certificate-card),
    .btn {
        display: none !important;
    }

    body {
        background: #ffffff !important;
    }

    .container,
    .dashboard,
    .page-content,
    .certificate-card {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        box-shadow: none !important;
        border: 0 !important;
    }

    .certificate-shell {
        page-break-inside: avoid;
    }
}

div#email_preview_box {
    border: 1px solid #cbd5e1;
}


.container.page-login {
    height: calc(100vh - 203px);
    /* outline: 5px solid red; */
    /* background: red; */
    display: flex;
    align-items: center;
    justify-content: center;
}

.container.page-login > div {
    max-width: 400px;
    width:100%;
    box-shadow: 0px 10px 20px #0000001c;
}
.page-privacy-policy .container.legal-page,
.page-terms-of-service .container.legal-page,
.home-template .container.landing-page {
    padding-bottom: 0px;
}
footer.container {
    padding-top: 0px;
}
.page-privacy-policy footer.container,
.page-terms-of-service footer.container,
.home-template footer.container {
    max-width: 1120px;
    margin: 0 auto;
}