/* revamp_2026 — shared styles */
:root {
    --brand: #4aa0b5;
    --brand-dark: #37808f;
    --brand-accent: #e8792b;   /* logo orange */
}

.text-brand { color: var(--brand) !important; }

.btn-brand {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--brand);
    --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--brand-dark);
    --bs-btn-hover-border-color: var(--brand-dark);
    --bs-btn-active-bg: var(--brand-dark);
    --bs-btn-active-border-color: var(--brand-dark);
    --bs-btn-disabled-bg: var(--brand);
    --bs-btn-disabled-border-color: var(--brand);
}

.signup-logo { max-height: 70px; width: auto; }

/* Big choice buttons */
.signup-option {
    position: relative;
    border: 0;
    border-radius: .75rem;
    background: var(--brand);
    color: #fff;
    padding: 1.5rem 1rem;
    text-align: center;
    transition: background-color .15s, transform .15s, box-shadow .15s;
}
.signup-option:hover,
.signup-option:focus-visible {
    background: var(--brand-dark);
    transform: translateY(-2px);
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.12);
    outline: none;
}
.signup-option-icon {
    font-size: 2rem;
    margin-bottom: .5rem;
    display: block;
}

/* Required asterisk */
.form-label.required::before,
.required-mark::before {
    content: "* ";
    color: var(--bs-danger);
}
.form-label { font-weight: 600; }

/* Radio groups: show the group's error once the form is validated */
.was-validated .role-group:has(:invalid) .role-feedback { display: block; }

/* ===== Admin layout ===== */
.admin-topbar {
    height: 76px;
    position: sticky;
    top: 0;
    z-index: 1030;
}
.admin-logo { height: 48px; width: auto; }

.admin-shell { display: flex; min-height: calc(100vh - 76px); }
.admin-main  { flex: 1 1 auto; min-width: 0; background: #fff; padding: 1.25rem; }

@media (min-width: 992px) {
    .admin-sidebar {
        width: 270px;
        flex: 0 0 270px;
        position: sticky;
        top: 76px;
        height: calc(100vh - 76px);
        overflow-y: auto;
    }
    .admin-main { padding: 1.75rem 2rem; }
}

.admin-nav-heading {
    font-weight: 600;
    color: #555;
    margin: 1.25rem 0 .35rem;
}
.admin-nav-heading:first-child { margin-top: .25rem; }
.admin-nav a,
.admin-nav .soon {
    display: block;
    padding: .3rem .6rem;
    border-radius: .375rem;
    font-size: .925rem;
    line-height: 1.35;
}
.admin-nav a { color: #555; text-decoration: none; }
.admin-nav a:hover { background: rgba(0,0,0,.05); color: #222; }
.admin-nav a.active { background: var(--brand); color: #fff; }
.admin-nav .soon { color: #adb5bd; cursor: default; }

/* Status badges in admin lists */
.status-badges .badge { font-weight: 500; display: inline-block; margin: 0 .25rem .25rem 0; }

/* Small action links in admin lists */
.action-link { font-size: .9rem; }
.action-links { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.action-links .action-link { text-align: left; }

.admin-footer { background: #6c757d; color: #fff; }

/* Honeypot (hidden from humans) */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    width: 1px; height: 1px; overflow: hidden;
}

/* Url Link / PDF Attachment column in admin lists */
.attachment-heading { font-weight: 600; margin-bottom: .35rem; }
.attachment-item { font-size: .85rem; padding-left: .5rem; margin-bottom: .3rem; word-break: break-word; }
.attachment-item a { color: inherit; text-decoration: none; }
.attachment-item a:hover { color: var(--bs-link-color); text-decoration: underline; }

/* Drag & drop upload area */
.pdf-dropzone {
    border: 2px dashed #ced4da;
    border-radius: .5rem;
    padding: .9rem;
    background: #f8f9fa;
    transition: border-color .15s, background-color .15s;
}
.pdf-dropzone-text { text-align: center; color: #6c757d; font-size: .9rem; margin-bottom: .6rem; word-break: break-word; }
.pdf-dropzone-text .fa-cloud-arrow-up { font-size: 1.6rem; }
.pdf-dropzone.is-dragover { border-color: var(--brand); background: #e8f4f7; }
.pdf-dropzone.has-file { border-style: solid; border-color: #198754; background: #f0f9f4; }
.pdf-dropzone.has-error { border-color: var(--bs-danger); background: #fdf3f4; }
.pdf-dropzone + .invalid-feedback { display: none; }
.pdf-dropzone.has-error + .invalid-feedback,
.was-validated .pdf-dropzone:has(:invalid) + .invalid-feedback { display: block; }

/* Admin list */
.badge-role { background: var(--brand); color: #fff; }
.permission-legend ul { padding-left: 2.5rem; }
.permission-legend li { margin-bottom: .1rem; }

/* Attendance: year / month buttons and title cards */
.att-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem 1.75rem; }
.att-btn { padding: .4rem .5rem; }
.att-btn.active-choice { box-shadow: 0 0 0 .2rem rgba(0,0,0,.25); font-weight: 700; }
.att-btn.active-choice::before { content: "\f00c"; font: var(--fa-font-solid); margin-right: .35rem; }
.att-title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem 1.75rem; }
.att-title-card {
    position: relative; display: block; text-align: center; text-decoration: none;
    background: var(--brand); color: #fff; border-radius: .25rem;
    padding: .6rem 3.2rem .6rem .75rem; font-size: .85rem; line-height: 1.5;
    transition: background-color .15s, box-shadow .15s;
}
.att-title-card:hover, .att-title-card:focus-visible { background: var(--brand-dark); color: #fff; }
.att-title-card.is-selected { background: var(--brand-dark); box-shadow: 0 0 0 .25rem rgba(74,160,181,.45); font-weight: 600; }
.att-title-card.is-inactive { opacity: .6; }
.att-count {
    position: absolute; top: .4rem; right: .45rem; font-size: .72rem;
    background: rgba(255,255,255,.22); border-radius: 1rem; padding: 0 .45rem;
}
.att-results { max-height: 280px; overflow-y: auto; }

/* ===== Member schedule pages ===== */
.member-nav a, .member-nav .soon { font-weight: 600; font-size: .95rem; padding: .5rem .6rem; margin-bottom: .25rem; }
.btn-outline-brand {
    --bs-btn-color: var(--brand); --bs-btn-border-color: var(--brand);
    --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand);
    --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--brand-dark); --bs-btn-active-border-color: var(--brand-dark);
}
.ms-pick {
    border: 1px solid var(--brand); color: var(--brand); background: #fff; font-size: .9rem;
}
.ms-pick:hover, .ms-pick:focus-visible { background: #e8f4f7; color: var(--brand-dark); border-color: var(--brand); }
.ms-pick.is-selected { background: var(--brand); color: #fff; }
.ms-month-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .6rem 1.9rem; }
.ms-item { border: 1px solid #dee2e6; border-radius: .25rem; background: #fff; overflow: hidden; }
.ms-item-head {
    display: flex; align-items: flex-start; gap: 1rem; width: 100%; text-align: left;
    background: var(--brand); color: #fff; border: 0; padding: .9rem 1.25rem; font-size: .92rem; line-height: 1.7;
}
.ms-item-head:hover { background: var(--brand-dark); }
.ms-item-head:focus-visible { outline: 3px solid #1d5f6e; outline-offset: -3px; }
.ms-when { flex: 0 0 33%; }
.ms-what { flex: 1 1 auto; }
.ms-day { opacity: .85; font-size: .85em; }
.ms-chevron { margin-top: .4rem; transition: transform .2s; }
.ms-item-head.collapsed .ms-chevron { transform: rotate(-90deg); }
.ms-item-body { display: flex; flex-direction: column; padding: 1.25rem 1.25rem 1rem; font-size: .92rem; }
@media (min-width: 768px) { .ms-item-body { flex-direction: row; align-items: flex-start; } }
.ms-remarks { word-break: break-word; }
.ms-month-heading { color: var(--brand-dark); }
@media (max-width: 575.98px) {
    .ms-item-head { flex-direction: column; gap: .25rem; }
    .ms-when { flex-basis: auto; }
    .ms-chevron { position: absolute; right: 1.25rem; }
    .ms-item { position: relative; }
}

/* Member: My Attendance */
:root { --ma-teaching: var(--brand); --ma-conference: #d99a00; --ma-event: #3d9140; }
.ma-summary {
    display: block; background: #fff; border: 1px solid #dee2e6; border-left: 5px solid; border-radius: .375rem;
    padding: .9rem 1rem; transition: box-shadow .15s, transform .15s;
}
.ma-summary:hover, .ma-summary:focus-visible { box-shadow: 0 .25rem .75rem rgba(0,0,0,.08); transform: translateY(-1px); outline: none; }
.ma-summary-label  { display: block; font-weight: 600; font-size: .9rem; }
.ma-summary-number { display: block; font-size: 2rem; font-weight: 700; line-height: 1.2; color: #212529; }
.ma-summary-sub    { display: block; font-size: .82rem; color: #6c757d; }
.ma-teaching   { border-left-color: var(--ma-teaching); }   .ma-teaching   .ma-summary-label { color: var(--ma-teaching); }
.ma-conference { border-left-color: var(--ma-conference); } .ma-conference .ma-summary-label { color: var(--ma-conference); }
.ma-event      { border-left-color: var(--ma-event); }      .ma-event      .ma-summary-label { color: var(--ma-event); }

.ma-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.ma-tabs .nav-link { white-space: nowrap; color: #555; font-weight: 600; font-size: .92rem; border-top-width: 3px; }
.ma-tabs .nav-link .ma-count { background: #e9ecef; color: #495057; font-weight: 600; }
.ma-tabs .nav-link.active.ma-tab-teaching   { color: var(--ma-teaching);   border-top-color: var(--ma-teaching); }
.ma-tabs .nav-link.active.ma-tab-conference { color: var(--ma-conference); border-top-color: var(--ma-conference); }
.ma-tabs .nav-link.active.ma-tab-event      { color: var(--ma-event);      border-top-color: var(--ma-event); }
.ma-tabs .nav-link.active.ma-tab-teaching   .ma-count { background: var(--ma-teaching); color: #fff; }
.ma-tabs .nav-link.active.ma-tab-conference .ma-count { background: var(--ma-conference); color: #fff; }
.ma-tabs .nav-link.active.ma-tab-event      .ma-count { background: var(--ma-event); color: #fff; }
.ma-table { font-size: .9rem; }

.ma-cards { display: flex; flex-direction: column; gap: .6rem; }
.ma-card { border: 1px solid #dee2e6; border-left: 4px solid #198754; border-radius: .375rem; padding: .65rem .8rem; background: #fff; }
.ma-card-late        { border-left-color: #e0a800; }
.ma-card-admin_added { border-left-color: #0d6efd; }

/* Reports */
.report-table { font-size: .85rem; }
.report-table-wrap { max-height: 75vh; }
.report-table thead th { position: sticky; top: 0; background: #fff; z-index: 2; box-shadow: inset 0 -1px 0 #dee2e6; }
.report-table .report-sticky { position: sticky; left: 0; background: inherit; z-index: 1; }
.report-table thead .report-sticky { z-index: 3; }
.report-table tbody td.report-sticky { background: var(--bs-table-bg, #fff); }

.report-member-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1rem;
                      max-height: 320px; overflow-y: auto; padding: .25rem; }
.report-member-btn { text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.report-member-btn.active-choice { box-shadow: 0 0 0 .2rem rgba(0,0,0,.25); font-weight: 700; }

/* Printing a report: only the report itself */
@media print {
    .admin-topbar, .admin-sidebar, .admin-footer, .d-print-none { display: none !important; }
    .admin-shell { display: block; }
    .admin-main { padding: 0 !important; }
    .report-print-card { break-inside: avoid-page; }
    body { background: #fff !important; }
}

/* Member list details */
.member-details > div { margin-bottom: .35rem; }

/* Small search box in list toolbars (same look as the report search) */
.list-search { width: 260px; max-width: 100%; }

/* ===== Phone & tablet friendly (added 2026-10) ===== */

/* Fold-away "Note for Admin" boxes */
.note-box summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .5rem; }
.note-box summary::-webkit-details-marker { display: none; }
.note-box summary::before { content: "\f05a"; font: var(--fa-font-solid); }
.note-box summary::after { content: "\f078"; font: var(--fa-font-solid); font-size: .8em; margin-left: auto; transition: transform .2s; }
.note-box[open] summary::after { transform: rotate(180deg); }
.note-box:not([open]) { padding-top: .6rem; padding-bottom: .6rem; }

/* Long names in the top bar never push the menu off screen */
.admin-topbar .dropdown { min-width: 0; margin-left: .75rem; }
.admin-topbar .dropdown-toggle { display: inline-flex; align-items: center; max-width: 100%; }
.admin-topbar .dropdown-toggle > .topbar-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-topbar .dropdown-toggle::after { flex: 0 0 auto; margin-left: .35rem; }

@media (max-width: 767.98px) {
    /* Page titles and spacing */
    .admin-main { padding: 1rem .85rem; }
    .admin-main h1.h2, .admin-main > h1 { font-size: 1.45rem; margin-bottom: 1rem !important; }
    .admin-topbar { height: 64px; }
    .admin-shell { min-height: calc(100vh - 64px); }
    .admin-logo { height: 40px; }
    .admin-main > .card > .card-body, .admin-main .card.border > .card-body { padding: .85rem !important; }
    .input-group-lg > .form-control, .input-group-lg > .input-group-text { font-size: 1rem; padding: .5rem .75rem; }

    /* Year / month / title pickers: more per row */
    .att-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .att-btn { padding: .4rem .25rem; font-size: .9rem; }
    .att-title-grid { grid-template-columns: 1fr; gap: .6rem; }
    .ms-month-grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .report-member-grid { grid-template-columns: 1fr; }

    /* Toolbars: buttons full width when they wrap */
    .admin-main .ms-auto.btn { margin-left: 0 !important; width: 100%; }
    .list-search, .list-create-btn { width: 100%; }

    /* Tables -> one card per row */
    .table-stack thead { display: none; }
    .table-stack, .table-stack tbody, .table-stack tr, .table-stack td { display: block; width: 100% !important; }
    .table-stack tr {
        border: 1px solid #dee2e6; border-radius: .5rem; margin-bottom: .75rem; padding: .35rem .25rem;
        background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.04);
    }
    .table-stack > tbody > tr > td {
        position: relative; border: 0; padding: .35rem .6rem .35rem 8.4rem; min-height: 2rem;
        background: transparent !important; box-shadow: none !important;
        word-break: break-word; overflow-wrap: anywhere; text-align: left;
    }
    .table-stack > tbody > tr > td[data-label]::before {
        content: attr(data-label); position: absolute; left: .6rem; top: .45rem; width: 7.4rem;
        font-weight: 600; color: #6c757d; font-size: .8rem; line-height: 1.3; word-break: normal; overflow-wrap: normal;
    }
    .table-stack > tbody > tr > td:not([data-label]),
    .table-stack > tbody > tr > td.stack-full { padding-left: .6rem; }
    .table-stack > tbody > tr > td.stack-full { text-align: center; }
    .table-stack > tbody > tr > td.stack-top { padding-left: .6rem; }
    .table-stack > tbody > tr > td.stack-top::before { position: static; display: block; width: auto; margin-bottom: .2rem; }
    .table-stack .action-link { white-space: normal; }
    .table-stack > tbody > tr > td.stack-empty { display: none; }
    .table-stack > tbody > tr:has(> td.stack-full) { border-style: dashed; box-shadow: none; }
    .table-stack > tbody > tr > td + td { border-top: 1px dashed #eef0f2; }
    /* Status badges sit side by side instead of one per line */
    .table-stack .status-badges br { display: none; }
    /* Action links in a row */
    .table-stack .action-links { flex-direction: row; flex-wrap: wrap; gap: .35rem 1rem; }
    .table-stack .text-end { text-align: left !important; }
}

/* ===== Member: Take Attendance (QR scanner) ===== */
.scan-frame {
    position: relative; width: 100%; max-width: 420px; margin: 0 auto; aspect-ratio: 1 / 1;
    background: #1f2a30; border-radius: .75rem; overflow: hidden;
}
.scan-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.scan-corners { position: absolute; inset: 14%; pointer-events: none; }
.scan-corners::before, .scan-corners::after, .scan-corners span::before, .scan-corners span::after {
    content: ""; position: absolute; width: 22%; height: 22%; border: 4px solid #fff; opacity: .9;
}
.scan-corners::before { top: 0; left: 0; border-right: 0; border-bottom: 0; border-top-left-radius: .6rem; }
.scan-corners::after  { top: 0; right: 0; border-left: 0; border-bottom: 0; border-top-right-radius: .6rem; }
.scan-corners span::before { bottom: 0; left: 0; border-right: 0; border-top: 0; border-bottom-left-radius: .6rem; }
.scan-corners span::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; border-bottom-right-radius: .6rem; }
.scan-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
    color: #fff; background: rgba(31, 42, 48, .85);
}
.scan-result { border-top: 6px solid; }
.scan-result-icon { font-size: 4rem; }
.scan-ok .scan-result-title { color: #198754; } .scan-late .scan-result-title { color: #b88a00; }
.scan-info .scan-result-title { color: var(--brand-dark); } .scan-error .scan-result-title { color: #dc3545; }
.scan-ok    { border-top-color: #198754; } .scan-ok    .scan-result-icon { color: #198754; }
.scan-late  { border-top-color: #e0a800; } .scan-late  .scan-result-icon { color: #e0a800; }
.scan-info  { border-top-color: var(--brand); } .scan-info .scan-result-icon { color: var(--brand); }
.scan-error { border-top-color: #dc3545; } .scan-error .scan-result-icon { color: #dc3545; }