/*
 * Shared portal design system.
 * Plain CSS layered on top of Bootstrap 5 (loaded from the jsDelivr CDN).
 * Served statically from public/ — there is no build step. Linked from
 * resources/views/layouts/app.blade.php with a filemtime() cache-buster, so
 * editing this file is enough for browsers to pick the change up.
 */

:root {
    --ink: #16232e;
    --ink-dark: #0d161c;
    --ink-light: #233443;
    --teal: #0e6e78;
    --teal-light: #128e9c;
    --teal-dark: #0a545c;
    --amber: #d47a2a;
    --violet: #4c3d75;
    --gray-base: #f6f8f9;
    --gray-border: #d6dde1;
    /* Typography (IMPR058): ONE interface typeface everywhere. Monospace is
       reserved for genuine code (code/pre/kbd, slide code blocks, .font-code). */
    --font-ui: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-code: 'IBM Plex Mono', SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-sans: var(--font-ui);
    /* Legacy alias: ~500 UI elements and many page <style> blocks still say
       "mono". They are interface text, not code, so the alias renders them in
       the UI face. Use --font-code / .font-code for real code. */
    --font-mono: var(--font-ui);

    /* Type scale (IMPR058) */
    --fs-xs: 0.75rem;     /* kickers, meta, badges */
    --fs-sm: 0.8125rem;   /* labels, validation, alerts, dropdown items */
    --fs-base: 0.9375rem; /* form controls, body copy in cards */
    --fs-md: 1rem;
}

body {
    font-family: var(--font-ui);
    background-color: var(--gray-base);
    color: var(--ink);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

body > main {
    flex: 1 0 auto;
}

body > .portal-footer {
    flex-shrink: 0;
}

/* Legacy UI utility — now the interface face (IMPR058). */
.font-mono {
    font-family: var(--font-ui);
}

/* Genuine code only. */
.font-code,
code,
pre,
kbd,
samp {
    font-family: var(--font-code);
}

/* Shared form + feedback typography (IMPR058): labels, controls and
   validation messages (server- and client-side) share one family and a
   consistent size, so a form reads as one piece. */
.form-label {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: var(--ink-light);
    letter-spacing: 0;
}

.form-control,
.form-select,
.input-group-text {
    font-family: var(--font-ui);
    font-size: var(--fs-base);
}

.form-control::placeholder {
    font-family: var(--font-ui);
    color: #8c9fa5;
}

.invalid-feedback,
.valid-feedback,
.form-text {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.45;
}

.invalid-feedback {
    color: #b42318;
}

.alert {
    font-family: var(--font-ui);
    font-size: var(--fs-sm);
    line-height: 1.5;
}

.btn,
.badge,
.dropdown-item,
.table,
.modal,
.nav-link {
    font-family: var(--font-ui);
}

.btn {
    letter-spacing: 0.01em;
}

/* Top Navbar */
/* Fixed header (IMPR046): sticky rather than position:fixed, so it stays in
   the normal flow and never covers the top of the page content. */
.portal-navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    background-color: var(--ink);
    border-bottom: 2px solid var(--teal);
    color: #ffffff;
    padding: 12px 24px;
    box-shadow: 0 4px 15px rgba(22, 35, 46, 0.15);
}

/* The opened mobile menu can be taller than a phone screen; let it scroll. */
@media (max-width: 991.98px) {
    .portal-navbar .navbar-collapse {
        max-height: calc(100vh - 72px);
        overflow-y: auto;
    }
}

.portal-navbar .brand-title {
    font-weight: 700;
    letter-spacing: -0.5px;
    font-size: 1.25rem;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
}

.portal-navbar .brand-title span {
    color: var(--teal-light);
    margin-left: 5px;
}

/* Cards and Panels */
.awd-card {
    background-color: #ffffff;
    border: 1px solid var(--gray-border);
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(22, 35, 46, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
}

.awd-card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(22, 35, 46, 0.08);
}

.awd-card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--gray-border);
    padding: 16px 20px;
    font-weight: 600;
    color: var(--ink);
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

/* Buttons styling */
.btn-awd-teal {
    background-color: var(--teal);
    color: #ffffff;
    border: none;
    font-weight: 600;
    padding: 8px 18px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(14, 110, 120, 0.22);
    transition: all 0.2s;
}

.btn-awd-teal:hover {
    background-color: var(--teal-light);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(14, 110, 120, 0.3);
}

.btn-awd-teal:active {
    background-color: var(--teal-dark);
}

.btn-awd-ink {
    background-color: var(--ink);
    color: #ffffff;
    border: none;
    font-weight: 500;
    padding: 8px 18px;
    border-radius: 6px;
    transition: all 0.2s;
}

.btn-awd-ink:hover {
    background-color: var(--ink-light);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(22, 35, 46, 0.2);
}

/* Ghost/outline counterpart to .btn-awd-ink, for secondary navigation actions
   ("Back to Dashboard", "My Courses", "Exit show", etc.) that shouldn't be as
   visually loud as a primary CTA but still deserve on-brand styling instead of
   the flat, unstyled default Bootstrap .btn-outline-secondary look. Applied
   explicitly per-button (not a global .btn-outline-secondary override) so it
   doesn't affect the many unrelated cancel/close/secondary buttons sitewide
   that intentionally keep the plain Bootstrap treatment. */
.btn-awd-outline-ink {
    color: var(--ink-light);
    background-color: #ffffff;
    border: 1px solid var(--gray-border);
    font-weight: 500;
    transition: all 0.2s;
}

.btn-awd-outline-ink:hover,
.btn-awd-outline-ink:active,
.btn-awd-outline-ink:focus {
    background-color: var(--ink) !important;
    border-color: var(--ink) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(22, 35, 46, 0.18);
}

/* Subtle hover lift for secondary CTAs that link out to another page (e.g.
   "View All Course Analytics") — adds a bit of visual weight/polish without
   changing the button's color scheme. Applied explicitly per-button. */
.btn-awd-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.btn-awd-lift:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 35, 46, 0.12);
}

/* ---- Learner button set (IMPR045) -------------------------------------
   Applied per button, never as global overrides (see IMPR008/IMPR017). */
.btn-awd-secondary,
.btn-awd-soft-success,
.btn-awd-back,
.btn-awd-cta {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0;
    transition: color 0.18s, background-color 0.18s, border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}

.btn-awd-secondary {
    color: var(--ink);
    background-color: #ffffff;
    border: 1px solid #d6dde1;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(22, 35, 46, 0.06);
}

.btn-awd-secondary:hover,
.btn-awd-secondary:focus-visible {
    color: var(--teal-dark);
    background-color: #f5fafa;
    border-color: var(--teal);
    box-shadow: 0 4px 12px rgba(14, 110, 120, 0.14);
    transform: translateY(-1px);
}

.btn-awd-soft-success {
    color: #1f7a4d;
    background-color: #e8f5ee;
    border: 1px solid #b9e0cb;
    border-radius: 10px;
}

.btn-awd-soft-success:hover,
.btn-awd-soft-success:focus-visible {
    color: #ffffff;
    background-color: #1f7a4d;
    border-color: #1f7a4d;
    box-shadow: 0 4px 12px rgba(31, 122, 77, 0.25);
    transform: translateY(-1px);
}

.btn-awd-back {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.9rem 0.4rem 0.7rem;
    font-size: 0.85rem;
    color: #4f6270;
    background-color: #ffffff;
    border: 1px solid #e1e7ea;
    border-radius: 999px;
}

.btn-awd-back .bi {
    font-size: 0.95rem;
    transition: transform 0.18s;
}

.btn-awd-back:hover,
.btn-awd-back:focus-visible {
    color: var(--teal-dark);
    background-color: rgba(14, 110, 120, 0.06);
    border-color: rgba(14, 110, 120, 0.35);
}

.btn-awd-back:hover .bi {
    transform: translateX(-3px);
}

.btn-awd-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.75rem 1.6rem;
    font-size: 0.95rem;
    color: var(--ink);
    background-color: #ffffff;
    border: 1px solid #d6dde1;
    border-radius: 999px;
    box-shadow: 0 2px 6px rgba(22, 35, 46, 0.06);
}

.btn-awd-cta .btn-awd-cta__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: rgba(14, 110, 120, 0.1);
    color: var(--teal);
}

.btn-awd-cta .btn-awd-cta__arrow {
    color: var(--teal);
    transition: transform 0.18s;
}

.btn-awd-cta:hover,
.btn-awd-cta:focus-visible {
    color: var(--teal-dark);
    border-color: var(--teal);
    box-shadow: 0 8px 22px rgba(14, 110, 120, 0.16);
    transform: translateY(-2px);
}

.btn-awd-cta:hover .btn-awd-cta__arrow {
    transform: translateX(4px);
}

.btn-awd-secondary:focus-visible,
.btn-awd-soft-success:focus-visible,
.btn-awd-back:focus-visible,
.btn-awd-cta:focus-visible,
.btn-awd-teal:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(14, 110, 120, 0.3);
}

/* Re-theme stock Bootstrap button variants to the brand palette so the same
   action type (primary CTA, positive/success, warning) renders the same
   color everywhere, regardless of which page's markup used the raw
   Bootstrap class instead of .btn-awd-teal/.btn-awd-ink. Danger (red) and
   secondary (gray) are left as Bootstrap defaults — they already match the
   brand's neutral/destructive-action usage across the site. */
.btn-primary {
    background-color: var(--teal);
    border-color: var(--teal);
}
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus {
    background-color: var(--teal-light) !important;
    border-color: var(--teal-light) !important;
}
.btn-outline-primary {
    color: var(--teal);
    border-color: var(--teal);
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary:focus {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #ffffff !important;
}

.btn-success {
    background-color: #2f7d54;
    border-color: #2f7d54;
}
.btn-success:hover,
.btn-success:active,
.btn-success:focus {
    background-color: #26643f !important;
    border-color: #26643f !important;
}
.btn-outline-success {
    color: #2f7d54;
    border-color: #2f7d54;
}
.btn-outline-success:hover,
.btn-outline-success:active,
.btn-outline-success:focus {
    background-color: #2f7d54 !important;
    border-color: #2f7d54 !important;
    color: #ffffff !important;
}

.btn-warning {
    background-color: var(--amber);
    border-color: var(--amber);
    color: #ffffff;
}
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
    background-color: #b8681f !important;
    border-color: #b8681f !important;
    color: #ffffff !important;
}
.btn-outline-warning {
    color: var(--amber);
    border-color: var(--amber);
}
.btn-outline-warning:hover,
.btn-outline-warning:active,
.btn-outline-warning:focus {
    background-color: var(--amber) !important;
    border-color: var(--amber) !important;
    color: #ffffff !important;
}

.btn-info {
    background-color: var(--teal-light);
    border-color: var(--teal-light);
    color: #ffffff;
}
.btn-info:hover,
.btn-info:active,
.btn-info:focus {
    background-color: var(--teal) !important;
    border-color: var(--teal) !important;
    color: #ffffff !important;
}
.btn-outline-info {
    color: var(--teal-light);
    border-color: var(--teal-light);
}
.btn-outline-info:hover,
.btn-outline-info:active,
.btn-outline-info:focus {
    background-color: var(--teal-light) !important;
    border-color: var(--teal-light) !important;
    color: #ffffff !important;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

/* Glassmorphism utility */
.glass-panel {
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* Timeline / Learning Sidebar Navigation Rail */
.rail-container {
    border-right: 1px solid var(--gray-border);
    height: calc(100vh - 60px);
    overflow-y: auto;
    background-color: #ffffff;
}

.rail-item {
    display: flex;
    align-items: center;
    padding: 12px 18px;
    color: var(--ink-light);
    text-decoration: none;
    border-left: 3px solid transparent;
    font-size: 0.92rem;
    transition: all 0.15s;
}

.rail-item:hover {
    background-color: rgba(14, 110, 120, 0.04);
    color: var(--teal);
}

.rail-item.active {
    background-color: rgba(14, 110, 120, 0.07);
    color: var(--teal-dark);
    border-left-color: var(--teal);
    font-weight: 600;
}

.rail-item.completed {
    color: #6b7c85;
}

/* Step badge: its state comes only from the row's .active/.completed class
   (no Bootstrap colour utilities, whose !important used to leave the active
   number grey on teal - IMPR045). */
.rail-item .badge-step {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    margin-right: 12px;
    border: 1.5px solid #c9d4d8;
    background-color: #ffffff;
    color: var(--ink-light);
    transition: all 0.15s;
}

.rail-item:hover .badge-step {
    border-color: var(--teal);
    color: var(--teal);
}

.rail-item.active .badge-step {
    border-color: var(--teal);
    background-color: var(--teal);
    color: #ffffff;
    box-shadow: 0 0 0 3px rgba(14, 110, 120, 0.18);
}

.rail-item.completed .badge-step {
    border-color: #1f7a4d;
    background-color: #1f7a4d;
    color: #ffffff;
}

.rail-item.completed.active .badge-step {
    box-shadow: 0 0 0 3px rgba(14, 110, 120, 0.22);
}

.rail-item.completed.active {
    color: var(--teal-dark);
}

/* Course examination node at the end of the rail. */
.rail-exam-node {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-top: 1px dashed var(--gray-border);
    background-color: #fdf6ec;
    color: #a8551a;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: background-color 0.15s;
}

.rail-exam-node:hover {
    background-color: #fbeedd;
    color: #8c4513;
}

.rail-item .badge-step.badge-step--exam,
.rail-exam-node .badge-step--exam {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: 12px;
    border: 1.5px solid #e8b88a;
    background-color: #ffffff;
    color: var(--amber);
    font-size: 0.85rem;
}

/* Alert and Badge colors matching workflow-studio */
.badge-awd-teal {
    background-color: rgba(14, 110, 120, 0.15);
    color: var(--teal);
}

.badge-awd-amber {
    background-color: rgba(212, 122, 42, 0.15);
    color: var(--amber);
}

.badge-awd-violet {
    background-color: rgba(76, 61, 117, 0.15);
    color: var(--violet);
}

/* Drawer Slide Panel */
.drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(3px);
    z-index: 1040;
    display: none;
    opacity: 0;
    transition: opacity 0.25s ease-out;
}

.drawer-panel {
    position: fixed;
    top: 0;
    right: -580px;
    width: 580px;
    max-width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.15);
    z-index: 1050;
    transition: right 0.25s ease-out;
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--gray-border);
}

.drawer-panel.show {
    right: 0;
}

.drawer-overlay.show {
    display: block;
    opacity: 1;
}

.drawer-header {
    padding: 20px;
    background-color: var(--ink);
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Custom Premium Dropdown Styling */
.portal-navbar .dropdown-menu {
    border: 1px solid var(--gray-border) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 30px rgba(22, 35, 46, 0.15) !important;
    padding: 8px 0 !important;
    min-width: 260px !important;
    animation: dropdownFadeIn 0.22s ease-out;
    background-color: #ffffff !important;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.portal-navbar .dropdown-header {
    padding: 14px 20px 10px !important;
    border-bottom: 1px solid var(--gray-border) !important;
    margin-bottom: 6px !important;
}

.portal-navbar .dropdown-item {
    padding: 10px 20px !important;
    font-size: 0.88rem !important;
    color: var(--ink-light) !important;
    font-family: var(--font-mono) !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.15s !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.portal-navbar .dropdown-item i {
    font-size: 1.15rem !important;
    width: 24px !important;
    color: #8c9fa5 !important;
    transition: color 0.15s !important;
}

.portal-navbar .dropdown-item:hover {
    background-color: rgba(14, 110, 120, 0.05) !important;
    color: var(--teal) !important;
}

.portal-navbar .dropdown-item:hover i {
    color: var(--teal) !important;
}

.portal-navbar .dropdown-item-danger {
    color: #dc3545 !important;
}

.portal-navbar .dropdown-item-danger:hover {
    background-color: rgba(220, 53, 69, 0.05) !important;
    color: #dc3545 !important;
}

.portal-navbar .dropdown-item-danger:hover i {
    color: #dc3545 !important;
}

.portal-navbar .nav-link-dropdown {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 50px !important;
    padding: 8px 20px !important;
    color: #ffffff !important;
    font-size: 0.9rem !important;
    display: flex !important;
    align-items: center !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

.portal-navbar .nav-link-dropdown::after {
    margin-left: 8px !important;
    vertical-align: 0.15em !important;
}

.portal-navbar .nav-link-dropdown:hover,
.portal-navbar .nav-link-dropdown:focus {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    color: #ffffff !important;
}

/* Branded error pages (404, 419, etc.) */
.error-page-icon {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    background-color: rgba(14, 110, 120, 0.08);
    color: var(--teal);
    font-size: 2.25rem;
}

.error-page-code {
    font-family: var(--font-code);
    letter-spacing: 0.05em;
}

/* Responsive data tables: .table-responsive's internal horizontal scroll can
   hide the last column (usually row actions) off the edge of its container
   with no visual cue it's there. Pin it in view whenever the table actually
   overflows. Deliberately NOT gated behind a max-width media query — a fixed
   breakpoint (e.g. 767.98px) misses common widths like an exact 768px tablet
   viewport where a wide table still needs to scroll; sticky positioning has
   no visible effect when a table already fits, so this is safe at any width. */
.table-responsive {
    position: relative;
}

.table-responsive > table.table > thead > tr > th:last-child,
.table-responsive > table.table > tbody > tr > td:last-child {
    position: sticky;
    right: 0;
    background-color: #ffffff;
    box-shadow: -6px 0 8px -6px rgba(22, 35, 46, 0.3);
}

.table-responsive > table.table > thead > tr > th:last-child {
    z-index: 2;
}

/* ---- Bell notification popup (IMPR045) ------------------------------- */
.awd-notify-toggle {
    width: 40px;
    height: 40px;
    padding: 0 !important;
    border-radius: 50%;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    color: #ffffff !important;
    transition: background-color 0.15s;
}

.awd-notify-toggle:hover,
.awd-notify-toggle.show {
    background-color: rgba(255, 255, 255, 0.1);
}

.awd-notify-toggle:focus {
    outline: none;
    box-shadow: none;
}

.awd-notify-toggle:focus-visible {
    box-shadow: 0 0 0 3px rgba(18, 142, 156, 0.55);
}

.awd-notify-badge {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 999px;
    border: 2px solid var(--ink);
    background-color: #e5484d;
    color: #ffffff;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 14px;
    text-align: center;
}

.awd-notify-menu {
    width: 360px;
    max-width: calc(100vw - 24px);
    padding: 0;
    margin-top: 10px !important;
    border: 1px solid #e3e9ec !important;
    border-radius: 14px;
    overflow: hidden;
    font-family: var(--font-sans);
    box-shadow: 0 18px 48px rgba(22, 35, 46, 0.18), 0 2px 6px rgba(22, 35, 46, 0.06) !important;
}

.awd-notify-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 14px 16px 12px;
    background-color: #ffffff;
    border-bottom: 1px solid #eef2f4;
}

.awd-notify-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.awd-notify-count {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: rgba(14, 110, 120, 0.1);
    color: var(--teal);
    font-size: 0.7rem;
    font-weight: 700;
}

.awd-notify-subtitle {
    font-size: 0.72rem;
    color: #8a97a1;
    margin-top: 1px;
}

.awd-notify-markall {
    border: 0;
    background: none;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--teal);
    text-decoration: none;
    white-space: nowrap;
}

.awd-notify-markall:hover {
    background-color: rgba(14, 110, 120, 0.08);
    color: var(--teal-dark);
}

.awd-notify-list {
    max-height: 380px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.awd-notify-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #f1f4f6;
    background-color: #ffffff;
    transition: background-color 0.15s;
}

.awd-notify-item:last-child {
    border-bottom: 0;
}

.awd-notify-item:hover {
    background-color: #f8fafb;
}

/* Unread: .bg-light is the marker the mark-as-read script removes. */
.awd-notify-item.bg-light {
    background-color: #f2f9f9 !important;
}

.awd-notify-item.bg-light::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 3px;
    background-color: var(--teal);
}

.awd-notify-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    background-color: rgba(14, 110, 120, 0.1);
    color: var(--teal);
}

.awd-notify-icon--exam {
    background-color: rgba(212, 122, 42, 0.12);
    color: var(--amber);
}

.awd-notify-body {
    flex: 1;
    min-width: 0;
    line-height: 1.35;
}

.awd-notify-item-title {
    display: block;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--ink);
}

.awd-notify-item-text {
    display: block;
    margin-top: 2px;
    font-size: 0.8rem;
    color: #4f6270;
    white-space: normal;
}

.awd-notify-time {
    display: block;
    margin-top: 5px;
    font-size: 0.7rem;
    color: #8a97a1;
}

.awd-notify-read {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--teal);
    font-size: 0.95rem;
    padding: 0;
    transition: all 0.15s;
}

.awd-notify-read:hover {
    background-color: #ffffff;
    border-color: rgba(14, 110, 120, 0.35);
    box-shadow: 0 2px 6px rgba(14, 110, 120, 0.15);
}

.awd-notify-empty {
    padding: 28px 16px;
    text-align: center;
    color: #8a97a1;
    font-size: 0.84rem;
}

.awd-notify-empty .bi {
    display: block;
    font-size: 1.6rem;
    color: #c2ccd1;
    margin-bottom: 6px;
}

/* ---- Notification centre (IMPR049) ----------------------------------- */
.awd-notify-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 11px 16px;
    border-top: 1px solid #eef2f4;
    background-color: #fafcfc;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--teal);
    text-decoration: none;
}

.awd-notify-footer:hover {
    background-color: rgba(14, 110, 120, 0.07);
    color: var(--teal-dark);
}

.awd-notify-footer .bi {
    transition: transform 0.15s;
}

.awd-notify-footer:hover .bi {
    transform: translateX(3px);
}

.awd-notify-icon--warn {
    background-color: rgba(212, 122, 42, 0.12);
    color: var(--amber);
}

.awd-notify-icon--danger {
    background-color: rgba(229, 72, 77, 0.12);
    color: #c9383d;
}

.awd-notify-page .awd-notify-filters {
    background-color: #ffffff;
    border: 1px solid #e3e9ec;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 2px 8px rgba(22, 35, 46, 0.04);
}

.awd-notify-page .awd-notify-filters .form-control,
.awd-notify-page .awd-notify-filters .form-select {
    border-radius: 10px;
    border-color: #dbe3e6;
    font-size: 0.9rem;
}

.awd-notify-search {
    position: relative;
}

.awd-notify-search .bi {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a97a1;
    pointer-events: none;
}

.awd-notify-search .form-control {
    padding-left: 36px;
}

.awd-notify-filters__summary {
    margin-top: 10px;
    padding: 0 4px;
    font-size: 0.8rem;
    color: #6b7c85;
}

.awd-notify-page__list {
    background-color: #ffffff;
    border: 1px solid #e3e9ec;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(22, 35, 46, 0.04);
}

.awd-notify-page__item {
    padding: 16px 20px;
    align-items: center;
}

.awd-notify-page__item .awd-notify-icon {
    width: 42px;
    height: 42px;
    font-size: 1.1rem;
}

.awd-notify-page__item .awd-notify-item-title {
    font-size: 0.92rem;
}

.awd-notify-page__item .awd-notify-item-text {
    font-size: 0.86rem;
}

.awd-notify-kind {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #eef3f4;
    color: #5b6e79;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.awd-notify-unread-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(14, 110, 120, 0.15);
}

.awd-notify-page__actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.awd-notify-page__actions form {
    margin: 0;
}

.awd-notify-delete {
    width: 32px;
    height: 32px;
    border: 1px solid transparent;
    border-radius: 50%;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8a97a1;
    font-size: 0.9rem;
    padding: 0;
    transition: all 0.15s;
}

.awd-notify-delete:hover {
    color: #c9383d;
    background-color: #fdecea;
    border-color: #f5c2bd;
}

.awd-notify-page__danger {
    font-weight: 600;
    color: #b42318;
    background-color: #ffffff;
    border: 1px solid #f1c7c2;
    border-radius: 10px;
}

.awd-notify-page__danger:hover:not(:disabled) {
    color: #ffffff;
    background-color: #c9383d;
    border-color: #c9383d;
}

.awd-notify-page__empty {
    padding: 56px 16px;
    font-size: 0.95rem;
}

@media (max-width: 575.98px) {
    .awd-notify-page__item {
        flex-wrap: wrap;
        padding: 14px 16px;
    }

    .awd-notify-page__actions {
        width: 100%;
        justify-content: flex-end;
        padding-left: 54px;
    }
}

.awd-notify-page__empty a {
    color: var(--teal);
    text-decoration: none;
}

.awd-notify-page__empty a:hover {
    color: var(--teal-dark);
    text-decoration: underline;
}