/* ========================================
   Theme: Neobrutalism
   ======================================== */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root {
    --font-sans: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
    --color-bg: #fffdf7;
    --color-text: #1a1a1a;
    --color-text-muted: rgba(26, 26, 26, 0.6);
    --color-text-faint: rgba(26, 26, 26, 0.4);
    --color-card-bg: #fffdf7;
    --color-border: #1a1a1a;
    --color-input-bg: #fffdf7;
    --color-input-border: #1a1a1a;
    --color-input-placeholder: rgba(26, 26, 26, 0.3);
    --color-logo-bg: #1a1a1a;
    --color-accent: #3098f3;
    --color-accent-secondary: #ff6670;
    --color-highlight: #ffec00;
    --border-width: 3px;
    --shadow-xl: 10px 10px 0px 0px #1a1a1a;
    --shadow-lg: 8px 8px 0px 0px #1a1a1a;
    --shadow-md: 6px 6px 0px 0px #1a1a1a;
    --shadow-sm: 4px 4px 0px 0px #1a1a1a;
    --shadow-xs: 2px 2px 0px 0px #1a1a1a;
    --shadow-xxs: 1px 1px 0px 0px #1a1a1a;
    
    /* Portal-level accent colors (default: pupil) */
    --portal-accent: #ffec00;
    --portal-accent-dark: #C9A800;
    --portal-accent-light: rgba(255, 236, 0, 0.15);
    --portal-accent-hover: rgba(255, 236, 0, 0.25);
}

.pupil-portal {
    --portal-accent: #ffec00;
    --portal-accent-dark: #C9A800;
    --portal-accent-light: rgba(255, 236, 0, 0.15);
    --portal-accent-hover: rgba(255, 236, 0, 0.25);
}

.teacher-portal {
    --portal-accent: #ff6670;
    --portal-accent-dark: #cc525a;
    --portal-accent-light: rgba(255, 102, 112, 0.15);
    --portal-accent-hover: rgba(255, 102, 112, 0.25);
}

.admin-portal {
    --portal-accent: #3098f3;
    --portal-accent-dark: #2684d9;
    --portal-accent-light: rgba(48, 152, 243, 0.15);
    --portal-accent-hover: rgba(48, 152, 243, 0.25);
}

/* Base body styles */
body {
    font-family: var(--font-sans);
    background-color: var(--color-bg);
    color: var(--color-text);
    background-image: 
        linear-gradient(rgba(26, 26, 26, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Body background utility (for nested elements that need body-like background) */
.body-bg {
    background-color: var(--color-bg);
    background-image: 
        linear-gradient(rgba(26, 26, 26, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(26, 26, 26, 0.03) 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Card */
.card {
    background-color: var(--color-card-bg);
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Logo container */
.logo-container {
    background-color: var(--color-logo-bg);
    box-shadow: var(--shadow-xs);
}

/* Form inputs */
.input {
    background-color: var(--color-input-bg);
    border: var(--border-width) solid var(--color-input-border);
    color: var(--color-text);
    transition: all 0.1s ease;
}
.input::placeholder {
    color: var(--color-input-placeholder);
}
.input:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 4px 4px 0px 0px var(--color-accent);
}

/* Labels */
.label {
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: var(--color-text);
}

/* Headings */
.heading {
    font-weight: 700;
}

/* Primary button */
.btn-primary {
    background-color: var(--color-accent);
    color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
    transition: all 0.1s ease;
}
.btn-primary:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
}
.btn-primary:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-xs);
}

/* Divider */
.divider {
    height: 2px;
    background-color: rgba(26, 26, 26, 0.06);
}

/* Dashed borders (used for inline dividers) should be lighter */
.border-dashed {
    border-color: rgba(26, 26, 26, 0.1) !important;
}

/* Divide-y borders (list dividers) should be lighter */
.divide-y > :not(:last-child) {
    border-color: rgba(26, 26, 26, 0.1) !important;
}

/* Divider text */
.divider-text {
    color: var(--color-text-faint);
    font-weight: 700;
}

/* Links */
.link-accent {
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 700;
}
.link-accent:hover {
    text-decoration: underline;
}

.link-secondary {
    color: var(--color-text-muted);
}
.link-secondary:hover {
    color: var(--color-text);
}

.link-footer {
    color: var(--color-text-faint);
    font-weight: 500;
}
.link-footer:hover {
    color: var(--color-text);
}

/* Text utilities */
.text-muted {
    color: var(--color-text-muted);
}
.text-faint {
    color: var(--color-text-faint);
}

/* Help box */
.help-box {
    margin-top: 1.5rem;
    background-color: var(--color-highlight);
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
    padding: 1rem;
}
.help-box p {
    text-align: left;
}
.help-box .link-secondary {
    font-weight: 700;
    text-decoration: underline;
    color: var(--color-text);
}

/* Decorations (visible in neobrutalism) */
.decorations {
    display: block;
}
.decoration-shape {
    border: 3px solid #1a1a1a;
    box-shadow: var(--shadow-sm);
}

/* Footer */
.footer {
    border-top: var(--border-width) solid rgba(26, 26, 26, 0.1);
}

/* Header help link */
.header-help {
    background-color: var(--color-card-bg);
    border: 3px solid #1a1a1a;
    box-shadow: var(--shadow-xs);
    padding: 0.5rem 1rem;
    font-weight: 500;
    color: var(--color-text);
    transition: all 0.1s ease;
}
.header-help:hover {
    background-color: var(--color-highlight);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}

/* Section header (design system) */
.section-header {
    border-bottom: var(--border-width) solid rgba(26, 26, 26, 0.1);
}

/* Color swatch (design system) */
.swatch {
    border: 3px solid #1a1a1a;
    box-shadow: var(--shadow-xs);
}

/* ========================================
   Dashboard & Resources Components
   ======================================== */

/* Sidebar */
.sidebar {
    background-color: white;
    border-right: var(--border-width) solid var(--color-border);
}

.sidebar-header {
    background-color: var(--portal-accent);
    border-bottom: var(--border-width) solid var(--color-border);
}

.sidebar-footer {
    border-top: var(--border-width) solid var(--color-border);
    background-color: var(--color-bg);
}

/* Navigation items */
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--color-text);
    transition: all 0.1s ease;
    background-color: transparent;
}
.nav-item:hover {
    background-color: var(--portal-accent-hover);
}
.nav-item-active {
    background-color: var(--portal-accent-light);
    border-left: 4px solid var(--portal-accent);
    font-weight: 700;
}
.nav-item-active:hover {
    background-color: var(--portal-accent-light);
}
.nav-item-danger {
    color: #ff6670;
}
.nav-item-danger:hover {
    background-color: rgba(255, 102, 112, 0.2);
    color: #ff6670;
}

.nav-section-label {
    color: var(--color-text-faint);
}

/* Mobile header */
.mobile-header {
    background-color: var(--portal-accent);
    border-bottom: var(--border-width) solid var(--color-border);
}

/* Mobile navigation */
.mobile-nav {
    background-color: white;
    border-top: var(--border-width) solid var(--color-border);
}
.mobile-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.5rem 1rem;
    color: var(--color-text-muted);
    border-radius: 0.5rem;
    position: relative;
}
.mobile-nav-item-active {
    color: var(--color-text);
    background-color: var(--portal-accent-light);
}
.mobile-nav-item-active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background-color: var(--portal-accent);
    border-radius: 2px 2px 0 0;
}

/* Icon buttons */
.icon-btn {
    padding: 0.5rem;
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0;
    box-shadow: var(--shadow-xs);
    transition: all 0.1s ease;
}
.icon-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}
.icon-btn:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

/* Action menu button (three-dot menu in tables) */
.action-menu-btn {
    color: var(--color-text-muted);
    background-color: transparent;
}
.action-menu-btn:hover,
.action-menu-btn[aria-expanded="true"] {
    color: var(--color-text);
    background-color: var(--portal-accent-hover);
}

/* Notification dot */
.notification-dot {
    position: absolute;
    top: -0.25rem;
    right: -0.25rem;
    width: 1rem;
    height: 1rem;
    background-color: #ff6670;
    border: 2px solid #1a1a1a;
    border-radius: 9999px;
}

/* Search box */
.search-box {
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-xs);
    transition: all 0.1s ease;
}
.search-box:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}

/* User card */
.user-card {
    background-color: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Avatars */
.avatar {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid #1a1a1a;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-xs);
}
.avatar-small {
    width: 1.5rem;
    height: 1.5rem;
    border: 2px solid #1a1a1a;
    border-radius: 0.375rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.625rem;
    color: white;
    box-shadow: var(--shadow-xs);
}
.avatar-large {
    width: 3.5rem;
    height: 3.5rem;
    border: var(--border-width) solid #1a1a1a;
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
    color: white;
    box-shadow: var(--shadow-xs);
}
.avatar-coral { background-color: #ff6670; }
.avatar-blue { background-color: #3098f3; }
.avatar-green { background-color: #10b981; }
.avatar-yellow { background-color: #ffec00; color: #1a1a1a; }
.avatar-muted { background-color: #e5e7eb; color: #4b5563; box-shadow: none; border-color: #9ca3af; }

.avatar-stack {
    display: flex;
    margin-left: -0.5rem;
}
.avatar-mini {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 9999px;
    border: 2px solid #1a1a1a;
    margin-left: -0.5rem;
}
.avatar-mini:first-child { margin-left: 0; }
.avatar-count {
    background-color: white;
    color: var(--color-text);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colored cards */
.card-blue {
    background-color: #3098f3;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.card-coral {
    background-color: #ff6670;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.card-yellow {
    background-color: #ffec00;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.card-green {
    background-color: #10b981;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}
.card-dark {
    background-color: #1a1a1a;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Stat cards */
.stat-card {
    padding: 1.25rem;
    border-radius: 0.75rem;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-xs);
    transition: all 0.1s ease;
}
.stat-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}
.stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.7;
    margin-bottom: 0.5rem;
}
.stat-value {
    font-size: 1.125rem;
    font-weight: 700;
}
.stat-value-large {
    font-size: 2.5rem;
    font-weight: 700;
}
.stat-meta {
    font-size: 0.875rem;
    opacity: 0.7;
}

/* Card sections */
.card-section {
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

/* Section headers */
.section-header {
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: var(--border-width) solid var(--color-border);
}
.section-header-blue { background-color: #3098f3; }
.section-header-coral { background-color: #ff6670; }
.section-header-yellow { background-color: #ffec00; }
.section-title {
    font-weight: 700;
    font-size: 1.125rem;
}
.section-link {
    font-size: 0.875rem;
    font-weight: 700;
}
.section-link:hover {
    text-decoration: underline;
}

/* Resource cards */
.resource-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background-color: var(--color-bg);
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-xs);
    transition: all 0.1s ease;
}
.resource-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}
.resource-icon {
    padding: 0.75rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-xs);
    transition: transform 0.15s ease;
}
.resource-card:hover .resource-icon {
    transform: rotate(3deg);
}
.resource-icon-coral { background-color: #ff6670; }
.resource-icon-blue { background-color: #3098f3; }
.resource-icon-green { background-color: #10b981; }
.resource-icon-yellow { background-color: #ffec00; }

/* Icon boxes */
.icon-box {
    padding: 0.5rem;
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-xs);
}
.icon-box-large {
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-xs);
    transform: rotate(3deg);
}
.icon-box-yellow { background-color: #ffec00; }

/* Announcement banner */
.announcement-banner {
    border-radius: 0.75rem;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
}

/* Upload list */
.upload-list > * + * {
    border-top: var(--border-width) solid var(--color-border);
}
.upload-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
    transition: background-color 0.1s ease;
}
.upload-item:hover {
    background-color: var(--color-bg);
}
.upload-icon {
    padding: 0.75rem;
    border: 2px solid var(--color-border);
    border-radius: 0.5rem;
    box-shadow: var(--shadow-xs);
}
.upload-icon-coral { background-color: rgba(255, 102, 112, 0.2); }
.upload-icon-blue { background-color: rgba(48, 152, 243, 0.2); }
.upload-icon-yellow { background-color: rgba(255, 236, 0, 0.3); }

/* Badges */
.badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-xs);
    border-radius: 9999px;
}
.badge-sm {
    padding: 0.125rem 0.375rem;
    font-size: 0.625rem;
    font-weight: 600;
    box-shadow: var(--shadow-xxs);
}
.badge-green {
    background-color: #34d399;
    color: white;
}
.badge-light {
    background-color: white;
    color: var(--color-text);
}
.badge-coral {
    background-color: #ff6670;
    color: white;
}
.badge-red {
    background-color: #ef4444;
    color: white;
}
.badge-amber {
    background-color: #f9a857;
    color: white;
}
.badge-disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    border-color: #9ca3af;
    box-shadow: none;
}
.badge-status-success {
    background-color: rgba(16, 185, 129, 0.2);
    color: #10b981;
    border-color: #10b981;
}

/* Quote box */
.quote-box {
    background-color: var(--color-bg);
    padding: 1rem;
    border-radius: 0.75rem;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-xs);
}

/* Alternative button styles */
.btn-primary-alt {
    background-color: #ffec00;
    color: #1a1a1a;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: all 0.1s ease;
}
.btn-primary-alt:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
}
.btn-primary-alt:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

.btn-secondary {
    background-color: white;
    color: var(--color-text);
    border: var(--border-width) solid var(--color-border);
    border-radius: 0;
    font-weight: 700;
    box-shadow: var(--shadow-sm);
    transition: all 0.1s ease;
}
.btn-secondary:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
}

.btn-danger {
    background-color: #ff6670;
    color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.05em;
    box-shadow: var(--shadow-sm);
    transition: all 0.1s ease;
}
.btn-danger:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
}
.btn-danger:active {
    transform: translate(2px, 2px);
    box-shadow: var(--shadow-xs);
}

/* Resources page specific */
.page-header-card {
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
}
.page-title {
    font-size: 2.5rem;
    font-weight: 700;
    text-shadow: 3px 3px 0 #1a1a1a;
}

.mini-stat {
    padding: 1rem;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.75rem;
    text-align: center;
    min-width: 100px;
    box-shadow: var(--shadow-xs);
}

.progress-container {
    background-color: white;
    border-radius: 9999px;
    padding: 0.25rem;
    border: var(--border-width) solid var(--color-border);
}
.progress-bar {
    height: 1rem;
    background-color: #ffec00;
    border: 2px solid #1a1a1a;
    border-radius: 9999px;
}

/* Tabs */
.tab-btn {
    padding: 0.75rem 1.5rem;
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.5rem;
    font-weight: 700;
    box-shadow: var(--shadow-xs);
    transition: all 0.1s ease;
}
.tab-btn:hover {
    background-color: var(--color-highlight);
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-sm);
}
.tab-btn-active {
    background-color: #ff6670;
    color: white;
}
.tab-btn-disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    border-color: #9ca3af;
    box-shadow: none;
    cursor: not-allowed;
}

/* Week cards */
.week-card {
    border-radius: 0.75rem;
    overflow: hidden;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-sm);
    transition: all 0.1s ease;
}
.week-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-md);
}
.week-title {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    text-shadow: 2px 2px 0 #1a1a1a;
}
.week-description {
    font-weight: 500;
}
.week-card-current {
    outline: 4px solid #1a1a1a;
    outline-offset: 4px;
}
.week-card-locked {
    background-color: #e5e7eb;
    box-shadow: none;
    opacity: 0.6;
}
.week-card-locked:hover {
    transform: none;
    box-shadow: none;
}
.week-title-locked {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    color: #6b7280;
    text-shadow: none;
}
.week-description-locked {
    font-weight: 500;
    color: #9ca3af;
}

/* Status icons */
.status-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    box-shadow: var(--shadow-xs);
}
.status-complete {
    color: #10b981;
}
.status-progress {
    font-weight: 700;
    font-size: 0.75rem;
}

/* Resource items */
.resource-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: white;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.5rem;
}
.resource-item-pending {
    opacity: 0.6;
}
.resource-item-icon {
    width: 2.5rem;
    height: 2.5rem;
    border: 2px solid #1a1a1a;
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resource-item-locked {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem;
    background-color: #f3f4f6;
    border: var(--border-width) solid #9ca3af;
    border-radius: 0.5rem;
    color: #9ca3af;
}
.resource-item-icon-locked {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #d1d5db;
    border: 2px solid #9ca3af;
    border-radius: 0.5rem;
}

.checkbox-empty {
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid var(--color-border);
    border-radius: 0;
}

/* Checkbox */
.checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 1.25rem;
    height: 1.25rem;
    background-color: white;
    border: 3px solid var(--color-border);
    border-radius: 0;
    cursor: pointer;
    position: relative;
    transition: all 0.1s ease;
}
.checkbox:hover {
    transform: translate(-1px, -1px);
    box-shadow: 2px 2px 0 var(--color-border);
}
.checkbox:checked {
    box-shadow: 2px 2px 0 var(--color-border);
}
.checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4px;
    top: 1px;
    width: 5px;
    height: 9px;
    border: solid var(--color-border);
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}
.checkbox:focus {
    outline: none;
    transform: translate(-2px, -2px);
    border-color: var(--color-accent);
    box-shadow: 4px 4px 0 var(--color-accent);
}

/* CTA Banner */
.cta-banner {
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.75rem;
    box-shadow: var(--shadow-sm);
}
.cta-title {
    font-size: 1.5rem;
    font-weight: 700;
    text-shadow: 2px 2px 0 #1a1a1a;
}
.cta-description {
    font-weight: 500;
    opacity: 0.9;
}

/* List item */
.list-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    transition: background-color 0.1s ease;
}
.list-item:hover {
    background-color: var(--color-bg);
}

/* Logo mark */
.logo-mark {
    width: 2.5rem;
    height: 2.5rem;
    background-color: #ff6670;
    border: var(--border-width) solid var(--color-border);
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: white;
    box-shadow: var(--shadow-xs);
}

/* Accordion button hover */
.accordion-btn:hover {
    background-color: var(--portal-accent-hover);
}

/* Alert/info boxes - solid background to hide grid lines */
.card.bg-start-blue\/5 {
    background-color: #e8f4fe;
}
.card.border-start-blue\/20 {
    border-color: #3098f3;
}

/* Table header cell */
.th {
    padding: 0.75rem 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted);
    white-space: nowrap;
}

/* Table data cell */
.td {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

/* Table row hover */
tbody tr:hover {
    background-color: var(--portal-accent-hover);
    transition: background-color 0.1s ease;
}

/* Notice stripe - colored bar for card footers */
.notice-stripe {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    border-top: var(--border-width) solid var(--color-border);
}
.notice-stripe-error {
    background-color: #ef4444;
}
.notice-stripe-success {
    background-color: #10b981;
}

/* Modal shadow utility */
.modal-shadow {
    box-shadow: var(--shadow-sm);
}