/* ==========================================================================
   STUDENT PORTAL - DASHBOARD SHORTCODE CSS
   ==========================================================================
   
   🎨 HOW TO CHANGE THE ENTIRE DASHBOARD COLOR SCHEME:
   
   Simply change these 2 color values in the :root section below:
   
   1. --sp-primary-color: Main brand color (buttons, links, primary actions)
   2. --sp-secondary-color: Supporting color (warnings, secondary actions, accents)
   
   Everything else will automatically update! All colors throughout the dashboard
   use these 2 base colors with !important flags to override any theme conflicts.
   
   Strategy:
   - Use CSS variables for colors and provide dark-theme overrides
   - Respect user's system preference via prefers-color-scheme
   - Support explicit toggle using .sp-dashboard--dark or data-theme="dark"
   - Improve table borders, zebra rows, header contrast and cell padding
   ========================================================================== */

/* ==========================================================================
   MASTER COLOR SYSTEM - Change these 2 colors to theme the entire dashboard
   ========================================================================== */
:root {
    /* PRIMARY COLOR - Main brand color for buttons, links, accents */
    --sp-primary-color: #2271b1;
    --sp-primary-hover: #135e96;
    --sp-primary-light: rgba(34, 113, 177, 0.1);
    
    /* SECONDARY COLOR - Supporting color for highlights and secondary actions */
    --sp-secondary-color: #d63384;
    --sp-secondary-hover: #a31654;
    --sp-secondary-light: rgba(214, 51, 132, 0.1);
    
    /* AUTO-GENERATED SHADES (Don't change these - they derive from primary/secondary) */
    --sp-bg: #ffffff;
    --sp-surface: #f8f9fb;
    --sp-on-surface: #222222;
    --sp-muted: #6b7280;
    --sp-border: #e6e8eb;
    --sp-accent: var(--sp-primary-color);
    --sp-success: var(--sp-primary-color);
    --sp-danger: var(--sp-secondary-color);
    --sp-warning: var(--sp-secondary-color);
    --sp-info: var(--sp-primary-color);
}

/* Dark theme variables (used both for system dark mode and explicit toggles) */
@media (prefers-color-scheme: dark) {
    :root {
        --sp-bg: #0f1113;
        --sp-surface: #141618;
        --sp-on-surface: #e6eef6;
        --sp-muted: #9aa3af;
        --sp-border: #262a2e;
        --sp-accent: #4da6ff;
        --sp-success: #49c07a;
        --sp-danger: #ff6b6b;
    }
}

/* Explicit dark-mode class or attribute on the main dashboard wrapper */
.sp-dashboard--dark,
.sp-dashboard[data-theme="dark"] {
    --sp-bg: #0f1113;
    --sp-surface: #141618;
    --sp-on-surface: #e6eef6;
    --sp-muted: #9aa3af;
    --sp-border: #262a2e;
    --sp-accent: #4da6ff;
}

/* General dashboard wrapper */
.sp-dashboard {
    background-color: var(--sp-bg);
    color: var(--sp-on-surface);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    line-height: 1.45;
}

/* Headings */
.sp-dashboard h1, .sp-dashboard h2, .sp-dashboard h3, .sp-dashboard h4 {
    color: var(--sp-on-surface);
    margin: .5rem 0 0.75rem;
}

/* Links and actions - Using Primary Color */
.sp-dashboard a,
.sp-dashboard .sp-link {
    color: var(--sp-primary-color) !important;
    text-decoration: underline;
}
.sp-dashboard a:hover { 
    text-decoration: none;
    color: var(--sp-primary-hover) !important;
}

/* Buttons - Using Primary Color */
.sp-dashboard .sp-btn {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    border: none !important;
    padding: .45rem .75rem;
    border-radius: 4px;
    transition: all 0.2s ease;
}
.sp-dashboard .sp-btn:hover {
    background: var(--sp-primary-hover) !important;
}

/* Inputs / selects */
.sp-dashboard input,
.sp-dashboard select,
.sp-dashboard textarea {
    background: var(--sp-surface);
    color: var(--sp-on-surface);
    border: 1px solid var(--sp-border);
    padding: .45rem .5rem;
    border-radius: 4px;
}
.sp-dashboard input:focus,
.sp-dashboard select:focus,
.sp-dashboard textarea:focus {
    outline: 3px solid rgba(77, 166, 255, 0.12);
    outline-offset: 2px;
}

/* Table improvements for better dark-mode readability */
.sp-dashboard table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
    color: var(--sp-on-surface);
}
.sp-dashboard table thead th {
    background: linear-gradient(180deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
    background-color: var(--sp-surface);
    color: var(--sp-on-surface);
    font-weight: 600;
    padding: .6rem .65rem;
    text-align: left;
    border-bottom: 1px solid var(--sp-border);
}
.sp-dashboard table tbody td {
    padding: .55rem .65rem;
    border-bottom: 1px solid var(--sp-border);
}

/* Zebra rows with subtle contrast in dark mode and light mode */
.sp-dashboard table tbody tr:nth-child(even) {
    background-color: rgba(0,0,0,0.02);
}

/* Explicit dark toggles override zebra row color for better contrast */
.sp-dashboard--dark table tbody tr:nth-child(even),
.sp-dashboard[data-theme="dark"] table tbody tr:nth-child(even) {
    background-color: rgba(255,255,255,0.02);
}

/* Respect system dark mode */
@media (prefers-color-scheme: dark) {
    .sp-dashboard table tbody tr:nth-child(even) {
        background-color: rgba(255,255,255,0.02);
    }
}

/* Table borders and cells in dark mode: slightly brighter borders for separation */
.sp-dashboard table, .sp-dashboard table th, .sp-dashboard table td {
    border-color: var(--sp-border);
}

/* Make any inline code or pre blocks readable */
.sp-dashboard code,
.sp-dashboard pre {
    background: rgba(0,0,0,0.04);
    padding: .2rem .4rem;
    border-radius: 4px;
    color: var(--sp-on-surface);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, "Roboto Mono", "Courier New", monospace;
}

/* Dark-mode override for inline code when theme is dark */
.sp-dashboard--dark code,
.sp-dashboard[data-theme="dark"] code {
    background: rgba(255,255,255,0.03);
    color: var(--sp-on-surface);
}

@media (prefers-color-scheme: dark) {
    .sp-dashboard code {
        background: rgba(255,255,255,0.03);
        color: var(--sp-on-surface);
    }
}

/* Small utilities */
.sp-muted { color: var(--sp-muted); }
.sp-success { color: var(--sp-success); }
.sp-danger { color: var(--sp-danger); }

/* Accessibility: focus outlines for keyboard navigation */
.sp-dashboard a:focus, .sp-dashboard button:focus, .sp-dashboard .sp-btn:focus {
    outline: 3px solid rgba(77, 166, 255, 0.16);
    outline-offset: 2px;
}

/* Ensure tables don't suffer from faint text on dark backgrounds */
.sp-dashboard table th, .sp-dashboard table td {
    text-shadow: none; /* avoid washed-out effect */
    -webkit-font-smoothing: antialiased;
}

/* Mobile friendliness */
.sp-dashboard table { display: table; }
@media (max-width: 720px) {
    .sp-dashboard table thead { display: none; }
    .sp-dashboard table, .sp-dashboard table tbody, .sp-dashboard table tr, .sp-dashboard table td { display: block; width: 100%; }
    .sp-dashboard table td { box-sizing: border-box; padding: .5rem .65rem; }
}

/* End of improved dark-mode CSS */

/**
 * Dashboard shortcode styles
 *
 * @since      1.0.0
 * @package    Student_Portal
 * @subpackage Student_Portal/public/css
 */

/* ==========================================================================
   Dashboard Container
   ========================================================================== */

.sp-dashboard-container {
    /* Inherit from root color system */
    --sp-primary: var(--sp-primary-color) !important;
    --sp-success: var(--sp-primary-color) !important;
    --sp-warning: var(--sp-secondary-color) !important;
    --sp-danger: var(--sp-secondary-color) !important;
    --sp-text: #1d2327 !important;
    --sp-muted: #646970 !important;
    --sp-border: #e1e5e9 !important;
    --sp-surface: #f6f7f7 !important;
    --sp-card-bg: #ffffff !important;
    --sp-bg: #f9f9f9 !important;
    --sp-input-border: #8c8f94 !important;
    --sp-disabled: #c3c4c7 !important;
    --sp-font-family: inherit;

    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    font-family: var(--sp-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif);
    background: var(--sp-bg) !important;
    border-radius: 8px;
    color: var(--sp-text) !important;
}

.sp-dashboard-container * {
    box-sizing: border-box;
}

/* ==========================================================================
   Dashboard Header
   ========================================================================== */

.sp-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid #e1e5e9;
    margin-bottom: 30px;
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Breadcrumbs for lecturer/admin dashboards */
.sp-breadcrumbs { font-size: 14px; color: #646970; margin-bottom: 8px; }
.sp-breadcrumbs a { color: var(--sp-accent); text-decoration: none; }
.sp-breadcrumbs a:hover { text-decoration: underline; }
.sp-breadcrumb-current { font-weight: 600; color: var(--sp-text); }
.sp-breadcrumb-year { color: var(--sp-text); font-weight: 700; margin-left: 6px; }
.sp-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid var(--sp-border, #e1e5e9);
    margin-bottom: 30px;
    background: var(--sp-card-bg, #fff);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sp-user-info {
    display: flex;
    align-items: center;
    gap: 15px;
}

.sp-avatar {
    border-radius: 50%;
    border: 2px solid #e1e5e9;
}

.sp-user-details h2 {
    margin: 0 0 5px 0;
    font-size: 24px;
    color: var(--sp-text, #1d2327);
}

.sp-role-badge {
    display: inline-block;
    padding: 4px 12px;
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-dashboard-actions {
    display: flex;
    gap: 10px;
}

/* Header action buttons: ensure header buttons and logout link have no background
   (some renderers strip .sp-btn classes and output .sp-dashboard-action instead).
   Use !important to override theme styles where necessary. */
.sp-dashboard-actions .sp-dashboard-action,
.sp-dashboard-actions .sp-logout-link {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* allow renderer spacing to control padding if desired */
}

/* Dark mode toggle button inserted by JS: remove background and match header spacing */
.sp-dark-mode-toggle {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important; /* remove internal padding to match header layout */
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sp-dark-mode-toggle:focus {
    outline: 3px solid rgba(77, 166, 255, 0.16);
    outline-offset: 2px;
}

/* Overview toggle: remove underline from the clickable overview text and
   add a small left padding so the icon isn't flush to the container edge.
   Also give the pseudo-icon a small left margin and spacing to the text. */
.sp-overview-toggle.sp-overview-text-toggle {
    text-decoration: none !important;
    padding-left: 6px !important; /* nudge icon/text away from left edge */
}
.sp-overview-toggle .sp-overview-title::before {
    display: inline-block;
    margin-left: 4px; /* small left space between container edge and icon */
    margin-right: 8px; /* space between icon and text */
    vertical-align: middle;
}



/* Header: show lecturer stat cards horizontally to the right of the user info.
   On narrow screens the global responsive rules will stack them vertically. */
.sp-dashboard-header .sp-dashboard-grid {
    display: flex;
    flex-direction: row;
    gap: 14px;
    align-items: center;
    margin: 0;
    max-width: 720px;
}

.sp-dashboard-header .sp-dashboard-card {
    flex: 0 0 180px; /* fixed-ish card width so cards line up horizontally */
    padding: 14px;
    border-radius: 8px;
}

@media (max-width: 768px) {
    /* Let existing rule stack header elements vertically on small screens.
       Ensure the header grid becomes column here too for better mobile layout. */
    .sp-dashboard-header .sp-dashboard-grid {
        flex-direction: column;
        max-width: 100%;
        width: 100%;
    }
    .sp-dashboard-header .sp-dashboard-card {
        flex: 1 1 auto;
        width: 100%;
    }
}

/* ==========================================================================
   Overview Section (Collapsible Stats at Top of Content)
   ========================================================================== */

.sp-overview-container {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08);
    margin-bottom: 24px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.sp-overview-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    background: #fff;
    border: none;
    border-bottom: 1px solid #e1e5e9;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.sp-overview-toggle:hover {
    background: #f6f7f9;
}

.sp-overview-toggle:focus {
    outline: 2px solid var(--sp-primary-color) !important;
    outline-offset: -2px;
}

.sp-overview-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--sp-text, #1d2327);
    display: flex;
    align-items: center;
    gap: 8px;
}

.sp-overview-title::before {
    content: '\f239';
    font-family: dashicons;
    font-size: 20px;
    color: var(--sp-primary-color) !important;
}

.sp-toggle-icon {
    transition: transform 0.3s ease;
    color: var(--sp-muted, #646970);
}

.sp-overview-container:not(.sp-collapsed) .sp-toggle-icon {
    transform: rotate(180deg);
}

.sp-overview-content {
    max-height: 1000px;
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    padding: 24px;
}

.sp-overview-container.sp-collapsed .sp-overview-content {
    max-height: 0;
    opacity: 0;
    padding: 0 24px;
}

/* Overview stats grid inside the overview content */
.sp-overview-content .sp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
    margin: 0;
}

@media (min-width: 1024px) {
    .sp-overview-content .sp-dashboard-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 640px) {
    .sp-overview-content .sp-dashboard-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Navigation
   ========================================================================== */

.sp-dashboard-nav {
    margin-bottom: 30px;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: visible !important; /* Allow tabs to scroll */
    width: 100%;
    max-width: 100%;
}

/* Responsive, scrollable chip-style navigation */
.sp-nav-tabs {
    display: flex !important;
    align-items: stretch;
    list-style: none;
    padding: 8px;
    margin: 0;
    border-bottom: 1px solid #e1e5e9;
    gap: 8px;
    flex-wrap: nowrap !important; /* Force horizontal scrolling instead of wrapping */
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin; /* Firefox */
    width: 100%;
    max-width: 100%;
}

.sp-nav-tabs li {
    flex: 0 0 auto; /* allow natural width and enable scrolling */
}

.sp-nav-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
    text-decoration: none;
    color: #646970;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    border-radius: 999px; /* pill */
    background: #fff;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    scroll-snap-align: start;
    min-width: fit-content; /* Ensure tabs don't shrink */
}

.sp-nav-tab:hover {
    background: #f6f7f7;
    color: var(--sp-primary-color) !important;
    border-color: #e1e5e9;
}

.sp-nav-tab.active {
    color: var(--sp-primary-color) !important;
    background: var(--sp-primary-light) !important;
    border-color: var(--sp-primary-color) !important;
}

/* Subtle scrollbar for horizontal overflow */
.sp-nav-tabs::-webkit-scrollbar { 
    height: 6px; 
}
.sp-nav-tabs::-webkit-scrollbar-track {
    background: transparent;
}
.sp-nav-tabs::-webkit-scrollbar-thumb { 
    background: #d0d7de; 
    border-radius: 3px; 
}
.sp-nav-tabs::-webkit-scrollbar-thumb:hover {
    background: #b0b7be;
}

/* ==========================================================================
   Content Sections
   ========================================================================== */

.sp-dashboard-content {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    overflow: hidden;
}

.sp-section {
    display: none;
    padding: 30px;
    min-height: 400px;
    position: relative; /* enable overlay positioning */
}

.sp-section.active {
    display: block;
}

.sp-section h3 {
    margin: 0 0 20px 0;
    font-size: 20px;
    color: var(--sp-text, #1d2327);
    display: flex;
    align-items: center;
    gap: 10px;
}

.sp-section h3 .dashicons {
    color: var(--sp-primary-color) !important;
    font-size: 24px;
    width: 24px;
    height: 24px;
}

/* ==========================================================================
   Dashboard Cards/Statistics
   ========================================================================== */

.sp-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sp-dashboard-card {
    background: var(--sp-card-bg, #fff);
    border: 1px solid var(--sp-border, #e1e5e9);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: transform 0.2s, box-shadow 0.2s;
}

.sp-dashboard-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.sp-dashboard-card h4 {
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    color: var(--sp-text, #1d2327);
    gap: 8px;
}

.sp-dashboard-card h4 .dashicons {
    color: var(--sp-primary-color) !important;
    font-size: 20px;
    width: 20px;
    height: 20px;
}

.sp-stat-number {
    font-size: 32px;
    font-weight: bold;
    color: var(--sp-primary-color) !important;
    margin-bottom: 5px;
    line-height: 1;
}

.sp-stat-number.sp-text-warning { color: var(--sp-secondary-color) !important; }
.sp-stat-number.sp-text-success { color: var(--sp-primary-color) !important; }
.sp-stat-number.sp-text-info { color: var(--sp-primary-color) !important; }
.sp-stat-number.sp-text-danger { color: var(--sp-secondary-color) !important; }

.sp-stat-label {
    color: #646970;
    font-size: 14px;
    margin-bottom: 10px;
}

.sp-card-actions {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid #f0f0f1;
}

/* ==========================================================================
   FLATTEN UI - Remove excessive layering (ALL SCREEN SIZES)
   ========================================================================== */

/* Remove excessive padding and shadows from container layers */
.sp-dashboard-content,
.sp-section,
.sp-admin-section {
    box-shadow: none !important;
    border: none !important;
}

/* Flatten table containers - remove wrapper layers */
.sp-table-container,
.sp-table-wrapper {
    padding: 0 !important;
    margin: 12px 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Clean table styling - single border only */
.sp-dashboard-container .wp-list-table,
.sp-dashboard-container table.sp-table,
.sp-section table,
.sp-admin-section table {
    border: 1px solid #e1e5e9 !important;
    box-shadow: none !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

/* Minimal table cell borders */
.sp-dashboard-container .wp-list-table th,
.sp-dashboard-container .wp-list-table td,
.sp-dashboard-container table.sp-table th,
.sp-dashboard-container table.sp-table td {
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
}

/* Remove border from last table row */
.sp-dashboard-container .wp-list-table tbody tr:last-child td,
.sp-dashboard-container table.sp-table tbody tr:last-child td {
    border-bottom: none !important;
}

/* Flatten dashboard cards - reduce shadows */
.sp-dashboard-card {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.sp-dashboard-card:hover {
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* ==========================================================================
   Buttons - Consistent styling with 2-color system
   ========================================================================== */

/* Base button styles */
.sp-btn,
button.sp-btn,
a.sp-btn,
input[type="submit"].sp-btn,
input[type="button"].sp-btn,
.sp-theme-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px !important;
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    transition: all 0.2s ease !important;
    text-align: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
    white-space: nowrap;
}

.sp-btn:hover,
button.sp-btn:hover,
a.sp-btn:hover,
.sp-theme-button:hover,
.sp-btn:focus,
button.sp-btn:focus,
a.sp-btn:focus,
.sp-theme-button:focus {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.sp-btn:active,
button.sp-btn:active,
a.sp-btn:active,
.sp-theme-button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15) !important;
}

.sp-btn:disabled,
button.sp-btn:disabled,
.sp-theme-button:disabled {
    background: #c3c4c7 !important;
    cursor: not-allowed !important;
    opacity: 0.6 !important;
    transform: none !important;
}

/* Button sizes */
.sp-btn-small,
button.sp-btn-small,
.sp-theme-button.sp-small {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

.sp-btn-large {
    padding: 12px 24px !important;
    font-size: 16px !important;
}

/* Primary button (default) */
.sp-btn-primary,
button.sp-btn-primary,
.sp-theme-button.sp-primary,
button.button-primary {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
}

.sp-btn-primary:hover,
button.sp-btn-primary:hover,
.sp-theme-button.sp-primary:hover,
button.button-primary:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
}

/* Secondary button */
.sp-btn-secondary,
button.sp-btn-secondary,
.sp-theme-button.sp-secondary {
    background: var(--sp-secondary-color) !important;
    color: #fff !important;
}

.sp-btn-secondary:hover,
button.sp-btn-secondary:hover,
.sp-theme-button.sp-secondary:hover {
    background: var(--sp-secondary-hover) !important;
    color: #fff !important;
}

/* Success button (uses primary color) */
.sp-btn-success,
button.sp-btn-success {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
}

.sp-btn-success:hover,
button.sp-btn-success:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
}

/* Warning button (uses secondary color) */
.sp-btn-warning,
button.sp-btn-warning {
    background: var(--sp-secondary-color) !important;
    color: #fff !important;
}

.sp-btn-warning:hover,
button.sp-btn-warning:hover {
    background: var(--sp-secondary-hover) !important;
    color: #fff !important;
}

/* Danger button (uses secondary color) */
.sp-btn-danger,
button.sp-btn-danger,
button.button-link-delete {
    background: var(--sp-secondary-color) !important;
    color: #fff !important;
}

.sp-btn-danger:hover,
button.sp-btn-danger:hover,
button.button-link-delete:hover {
    background: var(--sp-secondary-hover) !important;
    color: #fff !important;
}

/* Info button (uses primary color) */
.sp-btn-info {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
}

.sp-btn-info:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
}

/* Outline/Ghost buttons */
.sp-btn-outline {
    background: transparent !important;
    border: 2px solid var(--sp-primary-color) !important;
    color: var(--sp-primary-color) !important;
}

.sp-btn-outline:hover {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
}

/* WordPress core button overrides for consistency */
.sp-dashboard-container button.button,
.sp-dashboard-container a.button,
.sp-dashboard-container input.button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 8px 16px !important;
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.sp-dashboard-container button.button:hover,
.sp-dashboard-container a.button:hover,
.sp-dashboard-container input.button:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.sp-dashboard-container button.button.button-small,
.sp-dashboard-container a.button.button-small {
    padding: 6px 12px !important;
    font-size: 13px !important;
}

/* ==========================================================================
   Forms
   ========================================================================== */

.sp-form-group {
    margin-bottom: 20px;
}

.sp-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--sp-text, #1d2327);
}

.sp-form-group input,
.sp-form-group select,
.sp-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--sp-input-border, #8c8f94);
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.sp-form-group input:focus,
.sp-form-group select:focus,
.sp-form-group textarea:focus {
    outline: none;
    border-color: var(--sp-primary-color) !important;
    box-shadow: 0 0 0 2px var(--sp-primary-light) !important;
}

.sp-form-group.error input,
.sp-form-group.error select,
.sp-form-group.error textarea {
    border-color: #dc3232;
}

.sp-form-group textarea {
    height: 100px;
    resize: vertical;
}

.sp-help-text {
    font-size: 12px;
    color: #646970;
    margin-top: 5px;
}

/* ==========================================================================
   Tables
   ========================================================================== */

.sp-table-container {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

.sp-table {
    width: 100%;
    border-collapse: collapse;
}

.sp-table th,
.sp-table td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #f0f0f1;
}

.sp-table th {
    background-color: var(--sp-surface, #f6f7f7);
    font-weight: 600;
    color: var(--sp-text, #1d2327);
}

.sp-table tr:hover {
    background-color: #f6f7f7;
}

.sp-table tr:last-child td {
    border-bottom: none;
}

/* ==========================================================================
   Status Indicators
   ========================================================================== */

.sp-status {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sp-status-active {
    background-color: #d4edda;
    color: #155724;
}

.sp-status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

.sp-status-pending {
    background-color: #fff3cd;
    color: #856404;
}

.sp-status-completed {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* ==========================================================================
   Notifications
   ========================================================================== */

.sp-notifications {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;
    max-width: 400px;
}

.sp-notification {
    background: var(--sp-card-bg, #fff);
    border-left: 4px solid var(--sp-primary-color) !important;
    border-radius: 4px;
    padding: 15px 20px;
    margin-bottom: 10px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: slideIn 0.3s ease;
}

.sp-notification.success {
    border-left-color: var(--sp-primary-color) !important;
}

.sp-notification.error {
    border-left-color: var(--sp-secondary-color) !important;
}

.sp-notification.warning {
    border-left-color: var(--sp-secondary-color) !important;
}

.sp-notification p {
    margin: 0;
    color: #1d2327;
}

.sp-notification-close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #646970;
    padding: 0;
    margin-left: 15px;
}

.sp-notification-close:hover {
    color: #1d2327;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ==========================================================================
   Error States
   ========================================================================== */

.sp-dashboard-error {
    text-align: center;
    padding: 60px 20px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sp-error-icon {
    margin-bottom: 20px;
}

.sp-error-icon .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--sp-secondary-color) !important;
}

.sp-dashboard-error h3 {
    margin: 0 0 15px 0;
    color: #1d2327;
    font-size: 24px;
}

.sp-dashboard-error p {
    color: #646970;
    font-size: 16px;
    margin: 0 0 20px 0;
}

/* ==========================================================================
   Loading States
   ========================================================================== */

/* Full-section loading host (was previously .sp-loading). This is a
   container-level helper for pages that want to show a large centered
   loading message. It MUST not be used for the small circular spinner
   inside the overlay to avoid CSS collisions. */
.sp-loading-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    color: #646970;
}

.sp-loading-container .dashicons {
    animation: spin 1s linear infinite;
    margin-right: 10px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Theme Variations
   ========================================================================== */

/* Compact Theme */
.sp-theme-compact .sp-dashboard-header {
    padding: 15px;
}

.sp-theme-compact .sp-section {
    padding: 20px;
}

.sp-theme-compact .sp-dashboard-card {
    padding: 15px;
}

.sp-theme-compact .sp-stat-number {
    font-size: 24px;
}

/* Minimal Theme */
.sp-theme-minimal {
    background: transparent;
}

.sp-theme-minimal .sp-dashboard-header,
.sp-theme-minimal .sp-dashboard-nav,
.sp-theme-minimal .sp-dashboard-content {
    box-shadow: none;
    border: 1px solid #e1e5e9;
}

.sp-theme-minimal .sp-dashboard-card {
    box-shadow: none;
    border: 1px solid #e1e5e9;
}

/* Full Theme */
.sp-theme-full {
    max-width: none;
    padding: 30px;
}

.sp-theme-full .sp-dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
    .sp-dashboard-container {
        padding: 15px;
    }
    
    .sp-dashboard-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    
    .sp-dashboard-actions {
        width: 100%;
        justify-content: center;
    }
    
    /* Force horizontal scrolling on mobile */
    .sp-dashboard-nav {
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .sp-nav-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        padding: 8px 10px;
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
    }
    
    .sp-nav-tab {
        padding: 10px 12px;
        flex-shrink: 0 !important; /* Prevent tabs from shrinking */
        min-width: fit-content !important;
    }
    
    .sp-dashboard-grid {
        grid-template-columns: 1fr;
    }
    
    .sp-section {
        padding: 20px;
    }
    
    .sp-notifications {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

@media (max-width: 480px) {
    .sp-dashboard-container {
        padding: 10px;
    }
    
    .sp-user-details h2 {
        font-size: 20px;
    }
    
    .sp-section {
        padding: 15px;
    }
    
    .sp-dashboard-card {
        padding: 15px;
    }
    
    .sp-stat-number {
        font-size: 24px;
    }
}
/* 
==========================================================================
   Admin Dashboard Specific Styles
   ========================================================================== */

.sp-admin-section {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sp-admin-section h4 {
    margin: 0 0 20px 0;
    color: #1d2327;
    font-size: 18px;
    border-bottom: 1px solid #e1e5e9;
    padding-bottom: 10px;
}

.sp-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.sp-filters {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f6f7f7;
    border-radius: 4px;
}

.sp-filters select,
.sp-filters input[type="search"] {
    padding: 8px 12px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
}

.sp-filters input[type="search"] {
    min-width: 200px;
}

/* Analytics specific styles */
.sp-analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sp-analytics-card {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.sp-analytics-card h4 {
    margin: 0 0 15px 0;
    color: #646970;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-metric-large {
    font-size: 36px;
    font-weight: bold;
    color: #2271b1;
    margin-bottom: 5px;
    line-height: 1;
}

.sp-metric-label {
    color: #646970;
    font-size: 14px;
}

.sp-stat-breakdown {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #f0f0f1;
}

.sp-stat-breakdown small {
    color: #8c8f94;
    font-size: 12px;
}

/* System info styles */
.sp-system-info {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.sp-system-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.sp-charts-section {
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 40px;
    text-align: center;
    color: #646970;
}

/* ==========================================================================
   Lecturer Dashboard Specific Styles
   ========================================================================== */

.sp-attendance-controls {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    padding: 15px;
    background: #f6f7f7;
    border-radius: 4px;
}

.sp-quick-attendance-actions {
    margin-bottom: 15px;
    padding: 10px;
    background: #f0f6fc;
    border-radius: 4px;
}

.sp-quick-attendance-actions button {
    margin-right: 10px;
}

.attendance-status {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
}

/* Course selector styles */
#course-selector {
    display: block;
}

#course-selector.hidden {
    display: none;
}

/* Grade entry form styles */
#grade-entry-form {
    background: #f6f7f7;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

#grade-entry-form h4 {
    margin-top: 0;
    color: #1d2327;
}

/* Material upload styles */
#material-upload-form {
    background: #f6f7f7;
    border-radius: 8px;
    padding: 20px;
    margin: 20px 0;
}

/* ==========================================================================
   Enhanced Button Styles
   ========================================================================== */

.sp-btn-warning {
    background: var(--sp-secondary-color) !important;
    color: #fff !important;
}

.sp-btn-warning:hover {
    background: var(--sp-secondary-hover) !important;
    color: #fff !important;
}

.sp-btn-info {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
}

.sp-btn-info:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
}

/* ==========================================================================
   Enhanced Table Styles
   ========================================================================== */

.sp-table th {
    position: sticky;
    top: 0;
    background: #f6f7f7;
    z-index: 10;
}

.sp-table .sp-actions {
    white-space: nowrap;
}

.sp-table .sp-actions .sp-btn {
    margin-right: 5px;
}

.sp-table .sp-actions .sp-btn:last-child {
    margin-right: 0;
}

/* ==========================================================================
   Loading and Empty States
   ========================================================================== */

.sp-loading-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* stack spinner over text */
    gap: 12px;
    z-index: 100;
}

/* When a section is loading we'll add .sp-section-loading to the section.
   Apply a subtle blur + dim to the underlying content while the overlay is visible. */
.sp-section.sp-section-loading > :not(.sp-loading-overlay) {
    filter: blur(2px) saturate(0.98);
    opacity: 0.92;
    transition: filter 180ms ease, opacity 180ms ease;
    pointer-events: none; /* prevent interactions under the overlay */
}

.sp-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: #646970;
}

.sp-empty-state .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: #c3c4c7;
    margin-bottom: 20px;
}

/* ==========================================================================
   Responsive Enhancements
   ========================================================================== */

@media (max-width: 768px) {
    .sp-form-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .sp-filters {
        flex-direction: column;
        gap: 10px;
    }
    
    .sp-filters input[type="search"] {
        min-width: auto;
        width: 100%;
    }
    
    .sp-analytics-grid {
        grid-template-columns: 1fr;
    }
    
    .sp-attendance-controls {
        flex-direction: column;
        gap: 15px;
    }
    
    .sp-system-actions {
        flex-direction: column;
    }
    
    .sp-system-actions .sp-btn {
        width: 100%;
        justify-content: center;
    }
    
    .sp-table .sp-actions {
        white-space: normal;
    }
    
    .sp-table .sp-actions .sp-btn {
        display: block;
        width: 100%;
        margin: 2px 0;
    }
}

@media (max-width: 480px) {
    .sp-admin-section {
        padding: 15px;
    }
    
    .sp-metric-large {
        font-size: 28px;
    }
    
    .sp-analytics-card {
        padding: 15px;
    }
}
/* ===
=======================================================================
   Authentication and Access Control
   ========================================================================== */

.sp-login-required,
.sp-access-denied {
    max-width: 500px;
    margin: 40px auto;
    padding: 30px;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
}

.sp-login-container,
.sp-access-denied-container {
    padding: 20px 0;
}

.sp-login-required h3,
.sp-access-denied h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 24px;
    font-weight: 600;
}

.sp-login-required p,
.sp-access-denied p {
    color: #666;
    margin-bottom: 20px;
    line-height: 1.6;
}

.sp-login-actions,
.sp-access-denied-actions {
    margin-top: 25px;
}

.sp-login-btn {
    display: inline-block;
    padding: 12px 24px;
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-weight: 500;
    transition: all 0.2s;
    border: none !important;
    cursor: pointer;
}

.sp-login-btn:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
    text-decoration: none !important;
    transform: translateY(-1px);
}

.sp-register-link {
    margin-top: 20px;
    font-size: 14px;
}

.sp-register-link a {
    color: var(--sp-primary-color) !important;
    text-decoration: none;
}

.sp-register-link a:hover {
    text-decoration: underline;
    color: var(--sp-primary-hover) !important;
}

.sp-required-role {
    background: #fff3cd;
    border: 1px solid #ffeaa7;
    padding: 10px;
    border-radius: 4px;
    margin: 15px 0;
    color: #856404;
    font-weight: 500;
}

.sp-access-denied-actions .button {
    margin: 0 5px;
    padding: 8px 16px;
    background: #f0f0f1;
    border: 1px solid #c3c4c7;
    color: #2c3338;
    text-decoration: none;
    border-radius: 3px;
    display: inline-block;
    cursor: pointer;
}

.sp-access-denied-actions .button:hover {
    background: #e9e9ea;
    border-color: #8c8f94;
}

/* Configuration form styles */
.sp-sections-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.sp-sections-checkboxes label {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.sp-sections-checkboxes label:hover {
    background: #f0f0f0;
}

.sp-sections-checkboxes input[type="checkbox"] {
    margin: 0;
}

/* Small inline spinner used inside overlays and buttons. Renamed to
   .sp-spinner to avoid colliding with other .sp-loading usage. */
.sp-spinner {
    --sp-spinner-size: 48px;
    --sp-spinner-border: 4px;

    display: inline-block;
    width: var(--sp-spinner-size);
    height: var(--sp-spinner-size);
    border: var(--sp-spinner-border) solid #f3f3f3;
    border-top: var(--sp-spinner-border) solid var(--sp-primary-color) !important;
    border-radius: 50%;
    animation: sp-spin 1s linear infinite;
    box-shadow: 0 4px 18px rgba(34,34,34,0.06);
}

@keyframes sp-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Responsive design for authentication forms */
@media (max-width: 600px) {
    .sp-login-required,
    .sp-access-denied {
        margin: 20px;
        padding: 20px;
    }
    
    .sp-login-required h3,
    .sp-access-denied h3 {
        font-size: 20px;
    }
    
    .sp-access-denied-actions .button {
        display: block;
        margin: 5px 0;
        text-align: center;
    }
}

/* =====
=====================================================================
   Programs Management Styles
   ========================================================================== */

/* Programs Container */
.sp-programs-container {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
}

/* Polish the admin-style nav tabs (Programs / Degree Types / Departments) */
.sp-nav-tab-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 14px;
}
.sp-nav-tab-wrapper .nav-tab {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    color: #b94f66; /* muted accent color to match existing scheme */
    background: transparent;
    font-weight: 700;
    font-size: 13px;
    text-decoration: none;
    transition: all .18s ease-in-out;
}
.sp-nav-tab-wrapper .nav-tab:hover {
    background: rgba(34,113,177,0.06);
    border-color: rgba(34,113,177,0.08);
}
.sp-nav-tab-wrapper .nav-tab.nav-tab-active {
    background: #fff;
    color: #c03957; /* stronger accent */
    border-color: rgba(34,113,177,0.12);
    box-shadow: 0 4px 14px rgba(34,113,177,0.06);
}

/* Tab content shell — show as a white card for separation */
.sp-tab-content {
    /* keep tabs hidden by default; .active will show */
    display: none;
}
.sp-tab-content.active {
    background: #fff;
    border: 1px solid #ebeef1;
    border-radius: 8px;
    padding: 18px;
    margin-bottom: 22px;
    box-shadow: 0 6px 18px rgba(32,40,45,0.04);
}

/* Large table card inside programs area */
.sp-programs-container .wp-list-table, .sp-table-container .wp-list-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.sp-table-container { padding: 12px; }
.sp-table-container table thead th { background: #f7fbff; color: #2b2b2b; }
.sp-programs-container .wp-list-table tbody tr:hover { background: rgba(34,113,177,0.03); }

/* Make program action buttons more cohesive */
.sp-programs-container .button { background: transparent !important; color: var(--sp-secondary-color) !important; border: none !important; padding: 6px 10px !important; box-shadow: none !important; }
.sp-programs-container .button:hover { background: transparent !important; text-decoration: underline !important; color: var(--sp-secondary-hover) !important; }
.sp-programs-container .button.button-primary { background: transparent !important; color: var(--sp-secondary-color) !important; border: none !important; }

/* Strong overrides for WP core/admin styles that may still apply to .button */
.sp-programs-container button.button, .sp-programs-container a.button, .sp-programs-container input.button {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sp-secondary-color) !important;
    padding: 6px 8px !important;
}

.sp-programs-container button.button.button-small, .sp-programs-container a.button.button-small {
    padding: 6px 6px !important;
}


/* Programs Table */
.sp-programs-container .wp-list-table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    overflow: hidden;
}

.sp-programs-container .wp-list-table thead {
    background: #f6f7f7;
}

.sp-programs-container .wp-list-table th {
    padding: 12px 15px;
    text-align: left;
    font-weight: 600;
    color: #1d2327;
    border-bottom: 2px solid #e1e5e9;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-programs-container .wp-list-table td {
    padding: 15px;
    border-bottom: 1px solid #f0f0f1;
    vertical-align: middle;
}

.sp-programs-container .wp-list-table tbody tr {
    transition: background-color 0.2s;
}

.sp-programs-container .wp-list-table tbody tr:hover {
    background-color: #f6f7f7;
}

.sp-programs-container .wp-list-table tbody tr:last-child td {
    border-bottom: none;
}

/* Program Status Badge */
.sp-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 15px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-status-badge.sp-status-active {
    background-color: #d4edda;
    color: #155724;
}

.sp-status-badge.sp-status-inactive {
    background-color: #f8d7da;
    color: #721c24;
}

.sp-status-badge.sp-status-archived {
    background-color: #d1ecf1;
    color: #0c5460;
}

/* Program Action Buttons */
.sp-programs-container .button {
    padding: 6px 10px;
    font-size: 13px;
    border-radius: 0;
    border: none !important;
    background: transparent !important;
    color: var(--sp-secondary-color) !important;
    cursor: pointer;
    transition: color 0.12s ease-in-out, transform 0.12s ease-in-out;
    margin-right: 5px;
    text-decoration: none;
    display: inline-block;
}

.sp-programs-container .button:hover {
    color: var(--sp-secondary-hover) !important;
    text-decoration: underline;
    transform: translateY(-1px);
}

.sp-programs-container .button:last-child {
    margin-right: 0;
}

/* Add Program Button */
.page-title-action {
    display: inline-block;
    padding: 8px 16px;
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    border: none !important;
    cursor: pointer;
    margin-left: 10px;
}

/* Page-level card layout for sections */
.sp-dashboard-content .sp-section {
    background: linear-gradient(180deg, #ffffff, #fbfcfd);
    border: 1px solid #eef2f4;
    border-radius: 12px;
    padding: 22px 26px;
    margin-bottom: 28px;
    box-shadow: 0 6px 18px rgba(14, 20, 24, 0.04);
}

/* Section headers */
.sp-section .sp-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}
.sp-section h3, .sp-section .sp-section-title {
    font-size: 20px;
    color: #17202a;
    font-weight: 700;
    margin: 0 0 6px 0;
}
.sp-section .sp-section-subtitle {
    color: #6b7280;
    font-size: 13px;
}

/* Sidebar improvements */
.sp-dashboard-layout .sp-dashboard-sidebar {
    background: #fff;
    border: 1px solid #eef2f4;
    border-radius: 12px;
    padding: 16px 12px;
    box-shadow: 0 6px 14px rgba(21, 26, 33, 0.03);
}
.sp-dashboard-nav a { color: #334155; font-weight:600; }
.sp-dashboard-nav .sp-nav-tab.active, .sp-dashboard-nav .sp-nav-tab:hover {
    background: linear-gradient(90deg, rgba(244,89,132,0.06), rgba(34,113,177,0.03));
    color: #d63384;
    border-radius: 6px;
}

/* Tables: cleaner, more modern */
.sp-dashboard-container table.sp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: transparent;
    overflow: hidden;
}
.sp-dashboard-container table.sp-table thead th {
    background: #f8fafb;
    color: #374151;
    font-size: 13px;
    font-weight: 700;
    text-align: left;
    padding: 12px 14px;
    border-bottom: 1px solid #e6eef3;
}
.sp-dashboard-container table.sp-table tbody td {
    padding: 12px 14px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.sp-dashboard-container table.sp-table tbody tr:hover td {
    background: linear-gradient(90deg, rgba(242,249,255,0.6), rgba(255,255,255,0));
}
.sp-dashboard-container table.sp-table tbody tr:nth-child(odd) td {
    background: #ffffff;
}
.sp-dashboard-container table.sp-table tbody tr:nth-child(even) td {
    background: #fbfdfe;
}

/* Table container card */
.sp-table-wrapper {
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid #e6eef3;
    background: linear-gradient(180deg,#ffffff,#fbfcfd);
    box-shadow: 0 4px 14px rgba(14,20,24,0.03);
}

/* Action column and spacing */
.sp-table-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.sp-table-actions .sp-icon-btn {
    width: 36px; height: 36px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:none; background: transparent; color: #d63384; /* icon-only, no background */
}
.sp-table-actions .sp-icon-btn:hover {
    background: transparent;
    transform: translateY(-1px);
    color: #a31654; /* subtle hover color to indicate action */
}

/* Empty / no-data rows */
.sp-table-empty {
    text-align: center;
    color: #6b7280;
    padding: 18px 12px;
    background: #fff;
}

/* Inputs and selects aligned and cleaner */
.sp-form-group label { font-weight:600; color:#374151; display:block; margin-bottom:6px; }
.sp-form-group input, .sp-form-group select, .sp-form-group textarea {
    border: 1px solid #e6eef3; padding:8px 10px; border-radius:7px; background: #ffffff; color:#1f2937;
}

/* Small helpers */
.sp-badge { font-size:12px; padding:6px 8px; border-radius:999px; display:inline-block; font-weight:600; }

/* Tighten up the program list header area */
.sp-programs-toolbar { display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:10px; }
.sp-programs-toolbar .left { display:flex; gap:8px; align-items:center; }
.sp-programs-toolbar .right { display:flex; gap:8px; }

/* ==========================================================================
   TABLE BUTTONS - PLAIN TEXT STYLE (NO BACKGROUND, NO BORDER)
   All buttons inside tables should appear as plain colored text links
   ========================================================================== */

/* Target ALL possible button variations in tables with maximum specificity */
.sp-dashboard-container table .button,
.sp-dashboard-container table button,
.sp-dashboard-container table a.button,
.sp-dashboard-container table button.button,
.sp-dashboard-container .sp-table .button,
.sp-dashboard-container .sp-table button,
.sp-dashboard-container .sp-table a.button,
.sp-dashboard-container .sp-table button.button,
.sp-dashboard-container .sp-table-actions .button,
.sp-dashboard-container .sp-table-actions button,
.sp-dashboard-container .sp-table-actions a.button,
.sp-dashboard-container .sp-table-actions button.button,
.sp-dashboard-container .sp-table td .button,
.sp-dashboard-container .sp-table td button,
.sp-dashboard-container .sp-table td a.button,
.sp-dashboard-container .sp-table td button.button,
.sp-dashboard-container .wp-list-table .button,
.sp-dashboard-container .wp-list-table button,
.sp-dashboard-container .wp-list-table a.button,
.sp-dashboard-container .wp-list-table button.button,
.sp-dashboard-container .wp-list-table td .button,
.sp-dashboard-container .wp-list-table td button,
.sp-dashboard-container .wp-list-table td a.button,
.sp-dashboard-container .wp-list-table td button.button {
    /* Remove ALL backgrounds */
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    
    /* Remove ALL borders */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    
    /* Text styling */
    color: var(--sp-secondary-color) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    
    /* Spacing */
    padding: 4px 8px !important;
    margin: 0 !important;
    
    /* Behavior */
    cursor: pointer !important;
    transition: color 0.15s ease !important;
    display: inline !important;
}

/* Hover state - only change color and add underline */
.sp-dashboard-container table .button:hover,
.sp-dashboard-container table button:hover,
.sp-dashboard-container table a.button:hover,
.sp-dashboard-container table button.button:hover,
.sp-dashboard-container .sp-table .button:hover,
.sp-dashboard-container .sp-table button:hover,
.sp-dashboard-container .sp-table a.button:hover,
.sp-dashboard-container .sp-table button.button:hover,
.sp-dashboard-container .sp-table-actions .button:hover,
.sp-dashboard-container .sp-table-actions button:hover,
.sp-dashboard-container .sp-table-actions a.button:hover,
.sp-dashboard-container .sp-table-actions button.button:hover,
.sp-dashboard-container .sp-table td .button:hover,
.sp-dashboard-container .sp-table td button:hover,
.sp-dashboard-container .sp-table td a.button:hover,
.sp-dashboard-container .sp-table td button.button:hover,
.sp-dashboard-container .wp-list-table .button:hover,
.sp-dashboard-container .wp-list-table button:hover,
.sp-dashboard-container .wp-list-table a.button:hover,
.sp-dashboard-container .wp-list-table button.button:hover,
.sp-dashboard-container .wp-list-table td .button:hover,
.sp-dashboard-container .wp-list-table td button:hover,
.sp-dashboard-container .wp-list-table td a.button:hover,
.sp-dashboard-container .wp-list-table td button.button:hover {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sp-secondary-hover) !important;
    text-decoration: underline !important;
    transform: none !important;
}

/* Primary button variant in tables */
.sp-dashboard-container table .button-primary,
.sp-dashboard-container table button.button-primary,
.sp-dashboard-container .sp-table .button-primary,
.sp-dashboard-container .sp-table button.button-primary,
.sp-dashboard-container .wp-list-table .button-primary,
.sp-dashboard-container .wp-list-table button.button-primary {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sp-primary-color) !important;
}

.sp-dashboard-container table .button-primary:hover,
.sp-dashboard-container table button.button-primary:hover,
.sp-dashboard-container .sp-table .button-primary:hover,
.sp-dashboard-container .sp-table button.button-primary:hover,
.sp-dashboard-container .wp-list-table .button-primary:hover,
.sp-dashboard-container .wp-list-table button.button-primary:hover {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--sp-primary-hover) !important;
    text-decoration: underline !important;
}

/* Small button variant */
.sp-dashboard-container table .button.button-small,
.sp-dashboard-container .sp-table .button.button-small,
.sp-dashboard-container .wp-list-table .button.button-small { 
    padding: 4px 6px !important;
}

/* Add / Primary action styles */
.sp-btn-primary, .button.button-primary, .page-title-action {
    background: var(--sp-primary-color) !important;
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 16px var(--sp-primary-light) !important;
}
.sp-btn-primary:hover, .button.button-primary:hover, .page-title-action:hover {
    background: var(--sp-primary-hover) !important;
}

/* Small outline variant used for edit links */
.sp-btn-outline-pink {
    background: transparent !important;
    border: 1px solid var(--sp-secondary-color) !important;
    color: var(--sp-secondary-color) !important;
}
.sp-btn-outline-pink:hover {
    background: var(--sp-secondary-light) !important;
    color: var(--sp-secondary-hover) !important;
}

/* Responsive tweaks */
@media (max-width: 900px) {
    .sp-dashboard-layout { flex-direction: column; }
    .sp-dashboard-sidebar { position: relative; width: auto; top: 0; margin-bottom: 16px; }
    .sp-modal { width: 100%; max-width: 100%; border-radius: 10px; }
}

.page-title-action:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Modal Styles */
.sp-modal-overlay {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    z-index: 200000; /* keep overlay above admin bars and most other site elements */
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    padding: 24px; /* safe padding so modal doesn't touch edges on small screens */
    background-color: rgba(0, 0, 0, 0.55);
    animation: fadeIn 0.24s ease-out;
    box-sizing: border-box;
}

.sp-modal,
.sp-modal-content {
    background-color: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 960px;
    max-height: 88vh;
    overflow: hidden; /* keep header/footer visible and body scrollable */
    box-shadow: 0 8px 32px rgba(21, 26, 33, 0.28), 0 2px 8px rgba(0,0,0,0.12);
    animation: slideDown 0.2s ease-out;
    display: flex;
    flex-direction: column;
}

.sp-modal.sp-modal-large, .sp-modal-content.sp-modal-large { max-width: 1200px; }

/* The modal body should scroll if content is taller than viewport */
.sp-modal .sp-modal-body,
.sp-modal-content .sp-modal-body {
    padding: 22px 26px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}


.sp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    border-bottom: 1px solid #eef1f3;
    background: linear-gradient(180deg, #fafbfb, #ffffff);
}

.sp-modal-header h3,
.sp-modal-header .sp-modal-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1d2327;
}

.sp-modal-close, .sp-close-modal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    background: transparent;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
    border: none;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
}

.sp-modal-close:hover, .sp-close-modal:hover,
.sp-modal-close:focus, .sp-close-modal:focus {
    background: rgba(34,113,177,0.08);
    color: #153243;
    transform: translateY(-1px);
}

.sp-modal-body {
    padding: 20px 26px;
    flex: 1 1 auto; /* allow body to grow and scroll within modal */
    overflow-y: auto;
}

body.sp-modal-open {
    overflow: hidden;
}

/* Form Table in Modal */
.sp-modal-content .form-table {
    width: 100%;
    margin: 0;
    padding: 25px;
}

.sp-modal-content .form-table th {
    width: 200px;
    padding: 15px 10px 15px 0;
    text-align: left;
    font-weight: 600;
    color: #1d2327;
    vertical-align: top;
}

.sp-modal-content .form-table td {
    padding: 15px 0;
}

.sp-modal-content .form-table input[type="text"],
.sp-modal-content .form-table input[type="number"],
.sp-modal-content .form-table select,
.sp-modal-content .form-table textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
    transition: border-color 0.2s;
}

.sp-modal-content .form-table input:focus,
.sp-modal-content .form-table select:focus,
.sp-modal-content .form-table textarea:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34, 113, 177, 0.1);
}

.sp-modal-content .form-table .regular-text {
    width: 100%;
}

.sp-modal-content .form-table .large-text {
    width: 100%;
    min-height: 100px;
}

/* Modal Submit Section */
.sp-modal-content .submit {
    padding: 20px 25px;
    background: #f6f7f7;
    border-top: 1px solid #e1e5e9;
    margin: 0;
    border-radius: 0 0 8px 8px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

.sp-modal-content .submit .button-primary {
    background: var(--sp-primary-color) !important;
    border-color: var(--sp-primary-color) !important;
    color: #fff !important;
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

.sp-modal-content .submit .button-primary:hover {
    background: var(--sp-primary-hover) !important;
    border-color: var(--sp-primary-hover) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
}

.sp-modal-content .submit .button {
    padding: 10px 20px !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    background: #f0f0f1 !important;
    border: 1px solid #c3c4c7 !important;
    color: #2c3338 !important;
    transition: all 0.2s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.sp-modal-content .submit .button:hover {
    background: #e9e9ea !important;
    border-color: #8c8f94 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
}

/* Course Assignment Styles */
.sp-filter-group {
    margin-bottom: 20px;
    padding: 15px;
    background: #f6f7f7;
    border-radius: 4px;
}

.sp-filter-group label {
    display: inline-block;
    margin-right: 10px;
    font-weight: 600;
    color: #1d2327;
}

.sp-filter-group select {
    padding: 6px 10px;
    border: 1px solid #8c8f94;
    border-radius: 4px;
    font-size: 14px;
}

.sp-courses-list {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e1e5e9;
    border-radius: 4px;
    padding: 10px;
}

.sp-course-item {
    padding: 12px;
    border-bottom: 1px solid #f0f0f1;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: background-color 0.2s;
}

.sp-course-item:hover {
    background-color: #f6f7f7;
}

.sp-course-item:last-child {
    border-bottom: none;
}

.sp-course-checkbox {
    margin: 0;
    cursor: pointer;
}

.sp-course-info {
    flex: 1;
}

.sp-course-code {
    font-weight: 600;
    color: #2271b1;
    font-size: 14px;
}

.sp-course-name {
    color: #1d2327;
    margin: 3px 0;
}

.sp-course-meta {
    font-size: 12px;
    color: #646970;
}

.sp-course-required-toggle {
    margin-left: auto;
}

/* Program Statistics Styles */
.sp-program-stats-content {
    padding: 25px;
}

/* Defensive: ensure programs admin partials injected into the shortcode
   are visible in the front-end context even if admin-only styles try to hide them. */
.sp-dashboard-container #sp-programs-section {
    /*
     * Conservative visibility fix for admin partials injected into the
     * shortcode context. Previously this file forced display:initial on ALL
     * children which caused layout regressions (tables and buttons rendered
     * incorrectly). Restrict the override to the root programs section only
     * so DOM children keep their native/table semantics.
     */
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
}

.sp-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
}

.sp-stat-card {
    background: #f6f7f7;
    border: 1px solid #e1e5e9;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.sp-stat-card h4 {
    margin: 0 0 10px 0;
    color: #646970;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sp-stat-value {
    font-size: 32px;
    font-weight: bold;
    color: #2271b1;
    margin-bottom: 5px;
}

.sp-stat-label {
    color: #646970;
    font-size: 13px;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideDown {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Design for Programs */
@media (max-width: 768px) {
    /* ===================================================================
       FLATTEN ALL DASHBOARD SECTIONS - Remove excessive layering
       =================================================================== */
    
    /* Remove padding and backgrounds from all container layers */
    .sp-dashboard-container,
    .sp-dashboard-content,
    .sp-section,
    .sp-admin-section,
    .sp-programs-container,
    .sp-tab-content,
    .sp-dashboard-container .wrap {
        padding: 8px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 12px !important;
    }
    
    /* Remove all wrapper/container layers around tables */
    .sp-dashboard-container .sp-table-container,
    .sp-dashboard-container .sp-table-wrapper,
    .sp-programs-container .sp-table-container,
    .sp-programs-container .sp-table-wrapper,
    .sp-tab-content .sp-table-container,
    .sp-tab-content .sp-table-wrapper,
    .sp-section .sp-table-container,
    .sp-section .sp-table-wrapper {
        padding: 0 !important;
        margin: 8px 0 !important;
        border: none !important;
        box-shadow: none !important;
        background: transparent !important;
    }
    
    /* Flatten ALL tables - single clean border */
    .sp-dashboard-container .wp-list-table,
    .sp-dashboard-container table,
    .sp-dashboard-container .sp-table,
    .sp-programs-container .wp-list-table,
    .sp-tab-content .wp-list-table,
    .sp-section table,
    .sp-admin-section table {
        font-size: 13px !important;
        border: 1px solid #e1e5e9 !important;
        border-radius: 6px !important;
        box-shadow: none !important;
        background: #fff !important;
        margin: 0 !important;
        overflow: hidden !important;
    }
    
    /* Clean table headers */
    .sp-dashboard-container .wp-list-table thead,
    .sp-dashboard-container table thead,
    .sp-section table thead {
        background: #f8f9fa !important;
        border-bottom: 1px solid #e1e5e9 !important;
    }
    
    /* Minimal cell styling */
    .sp-dashboard-container .wp-list-table th,
    .sp-dashboard-container .wp-list-table td,
    .sp-dashboard-container table th,
    .sp-dashboard-container table td,
    .sp-section table th,
    .sp-section table td {
        padding: 10px 12px !important;
        border: none !important;
        border-bottom: 1px solid #f0f0f1 !important;
        background: transparent !important;
    }
    
    /* Remove border from last row */
    .sp-dashboard-container .wp-list-table tbody tr:last-child td,
    .sp-dashboard-container table tbody tr:last-child td,
    .sp-section table tbody tr:last-child td {
        border-bottom: none !important;
    }
    
    /* Clean hover effect */
    .sp-dashboard-container .wp-list-table tbody tr:hover,
    .sp-dashboard-container table tbody tr:hover,
    .sp-section table tbody tr:hover {
        background: #f8f9fa !important;
    }
    
    /* Remove any nested borders or shadows from ALL elements */
    .sp-dashboard-container .wp-list-table *,
    .sp-dashboard-container table *,
    .sp-section *,
    .sp-admin-section * {
        box-shadow: none !important;
    }
    
    /* Flatten section cards */
    .sp-dashboard-card,
    .sp-analytics-card,
    .sp-stat-card {
        border: 1px solid #e1e5e9 !important;
        box-shadow: none !important;
        padding: 12px !important;
        margin-bottom: 12px !important;
        border-radius: 6px !important;
    }
    
    .sp-programs-container .button {
        display: block;
        margin: 5px 0;
        text-align: center;
        background: transparent; /* mobile: keep text-only */
        border: none;
    }
    
    .sp-modal-content {
        width: 95%;
        margin: 5% auto;
    }
    
    .sp-modal-content .form-table th {
        width: auto;
        display: block;
        padding: 10px 0 5px 0;
    }
    
    .sp-modal-content .form-table td {
        display: block;
        padding: 5px 0 15px 0;
    }
    
    .sp-stats-grid {
        grid-template-columns: 1fr;
    }
    
    /* CRITICAL: Stack heading and action button - maximum specificity */
    /* Force the parent wrap/container to be flex column */
    .sp-dashboard-container .wrap,
    .sp-programs-container .wrap,
    .sp-tab-content > div,
    .sp-dashboard-container > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    /* Force all h1 and headings to full width */
    .sp-dashboard-container .wp-heading-inline,
    .sp-dashboard-container h1.wp-heading-inline,
    .sp-dashboard-container .wrap .wp-heading-inline,
    .sp-dashboard-container .wrap h1,
    .sp-dashboard-container h1,
    .sp-programs-container .wp-heading-inline,
    .sp-programs-container h1,
    .sp-tab-content .wp-heading-inline,
    .sp-tab-content h1,
    .sp-tab-content h2,
    body .sp-dashboard-container .wp-heading-inline,
    body .sp-dashboard-container h1.wp-heading-inline,
    body .sp-dashboard-container h1 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 12px !important;
        margin-right: 0 !important;
        font-size: 18px !important;
        float: none !important;
        flex: 0 0 auto !important;
    }
    
    /* Force all action buttons to full width */
    .sp-dashboard-container .page-title-action,
    .sp-dashboard-container a.page-title-action,
    .sp-programs-container .page-title-action,
    .sp-tab-content .page-title-action,
    body .sp-dashboard-container .page-title-action,
    body .sp-dashboard-container a.page-title-action {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 10px 0 !important;
        margin-left: 0 !important;
        text-align: center !important;
        float: none !important;
        clear: both !important;
        flex: 0 0 auto !important;
        box-sizing: border-box !important;
    }
    
    /* Hide the wp-header-end spacer that might be causing issues */
    .sp-dashboard-container .wp-header-end,
    .sp-programs-container .wp-header-end,
    .sp-tab-content .wp-header-end {
        display: none !important;
    }
    
    /* Remove table wrapper excess padding */
    .sp-table-container,
    .sp-table-wrapper {
        padding: 0 !important;
        margin: 10px 0 !important;
    }
}

@media (max-width: 480px) {
    .page-title-action,
    a.page-title-action {
        display: block !important;
        margin: 10px 0 !important;
        text-align: center !important;
        width: 100% !important;
    }
    
    .wp-heading-inline,
    h1.wp-heading-inline {
        display: block !important;
        width: 100% !important;
        font-size: 18px !important;
    }
    
    .sp-programs-container .wp-list-table {
        display: block;
        overflow-x: auto;
    }
    
    .sp-modal-content {
        width: 100%;
        height: 100%;
        max-height: 100vh;
        margin: 0;
        border-radius: 0;
    }
    
    .sp-modal-content h2 {
        border-radius: 0;
    }
    
    .sp-modal-content .submit {
        border-radius: 0;
        flex-direction: column;
    }
    
    .sp-modal-content .submit .button,
    .sp-modal-content .submit .button-primary {
        width: 100%;
    }
}

/* ======================================================================
   Plugin-wide link reset for dashboard areas
   Ensures links used as buttons or navigation do not show underlines
   Use specific selectors to avoid affecting other plugins like Elementor
   ======================================================================
*/
.sp-dashboard-container a.sp-btn,
.sp-dashboard-container a.sp-nav-tab,
.sp-dashboard-nav a.sp-nav-tab,
.sp-nav-tabs a.sp-nav-tab,
.sp-admin-section a.sp-btn,
.sp-programs-container a.button {
    text-decoration: none;
}

.sp-dashboard-container a.sp-btn:hover,
.sp-dashboard-container a.sp-nav-tab:hover,
.sp-dashboard-nav a.sp-nav-tab:hover,
.sp-nav-tabs a.sp-nav-tab:hover,
.sp-admin-section a.sp-btn:hover,
.sp-programs-container a.button:hover {
    text-decoration: none;
}

/* Utility class for explicit no-underline usage */
.sp-no-underline {
    text-decoration: none;
}

/* Notice Styles */
.notice {
    background: #fff;
    border-left: 4px solid var(--sp-primary-color) !important;
    padding: 12px;
    margin: 15px 0;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.notice-success {
    border-left-color: var(--sp-primary-color) !important;
}

.notice-error {
    border-left-color: var(--sp-secondary-color) !important;
}

.notice-info {
    border-left-color: var(--sp-primary-color) !important;
}

.notice-warning {
    border-left-color: var(--sp-secondary-color) !important;
}

.notice p {
    margin: 0;
    padding: 0;
    color: #1d2327;
}

.notice.is-dismissible {
    position: relative;
    padding-right: 38px;
}

/* WordPress Heading Styles */
.wp-heading-inline {
    display: inline-block;
    margin: 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
    color: #1d2327;
}

.wp-header-end {
    visibility: hidden;
    margin: -2px 0 0;
}

/* Wrap Container */
.wrap {
    margin: 10px 20px 0 0;
}

.wrap h1 {
    margin: 0 0 20px 0;
    padding: 0;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.3;
}

/* Page title action button (Add New buttons next to headings) */
.page-title-action {
    display: inline-block;
    padding: 8px 16px;
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    transition: all 0.2s;
    border: none !important;
    cursor: pointer;
    margin-left: 10px;
}

.page-title-action:hover {
    background: var(--sp-primary-hover) !important;
    color: #fff !important;
    transform: translateY(-1px);
}

/* Mobile: Stack heading and action button vertically */
@media (max-width: 640px) {
    .sp-dashboard-container .wp-heading-inline,
    .sp-dashboard-container .wrap .wp-heading-inline,
    .sp-programs-container .wp-heading-inline,
    .sp-tab-content .wp-heading-inline {
        display: block !important;
        margin-bottom: 12px !important;
        font-size: 20px !important;
        width: 100% !important;
    }
    
    .sp-dashboard-container .page-title-action,
    .sp-dashboard-container .wrap .page-title-action,
    .sp-programs-container .page-title-action,
    .sp-tab-content .page-title-action {
        display: block !important;
        margin-left: 0 !important;
        margin-top: 10px !important;
        margin-bottom: 10px !important;
        text-align: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .sp-dashboard-container .wrap h1,
    .sp-programs-container .wrap h1 {
        font-size: 20px !important;
    }
    
    /* Also handle the h1 + button pattern */
    .sp-dashboard-container h1,
    .sp-programs-container h1,
    .sp-tab-content h1 {
        display: block !important;
        width: 100% !important;
    }
}

/* ==========================
   Nav Drawer (mobile/large)
   ========================== */
.sp-nav-toggle {
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    border: none !important;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.sp-nav-toggle:hover { 
    background: var(--sp-primary-hover) !important;
}

.sp-nav-drawer-overlay {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    display:none;
    z-index:9980;
}
.sp-nav-drawer {
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:280px;
    background:#fff;
    box-shadow:0 0 18px rgba(0,0,0,0.25);
    transform:translateX(-100%);
    transition:transform .25s ease;
    z-index:9990;
    display:flex;
    flex-direction:column;
}
.sp-nav-drawer.open { transform:translateX(0); }
.sp-nav-drawer-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; border-bottom:1px solid #e1e5e9; }
.sp-nav-drawer-header h3 { margin:0; font-size:16px; }
.sp-nav-drawer-close { background:none; border:none; font-size:20px; cursor:pointer; }
.sp-nav-drawer .sp-nav-tabs { flex-wrap:nowrap; flex-direction:column; gap:2px; overflow-y:auto; padding:8px 0 16px; border-bottom:0; }
.sp-nav-drawer .sp-nav-tab { border-radius:0; border-left:3px solid transparent; justify-content:flex-start; padding:12px 18px; }
.sp-nav-drawer .sp-nav-tab.active { border-left-color: var(--sp-primary-color) !important; }

/* ==========================
   Dark Mode
   ========================== */
.sp-dashboard-container.sp-dark,
.sp-dashboard-container.sp-dark .sp-dashboard-header,
.sp-dashboard-container.sp-dark .sp-dashboard-nav,
.sp-dashboard-container.sp-dark .sp-dashboard-content,
.sp-dashboard-container.sp-dark .sp-dashboard-card,
.sp-dashboard-container.sp-dark .sp-admin-section,
.sp-dashboard-container.sp-dark .sp-section,
.sp-dashboard-container.sp-dark .sp-analytics-card,
.sp-dashboard-container.sp-dark .sp-programs-container .wp-list-table,
.sp-dashboard-container.sp-dark .sp-modal,
.sp-dashboard-container.sp-dark .sp-modal-content {
    background-color:#1e1f23 !important;
    color:#e4e5e7;
    border-color:#2c2d31 !important;
}
.sp-dashboard-container.sp-dark .sp-nav-tab { color:#c0c3c7; }
.sp-dashboard-container.sp-dark .sp-nav-tab.active { background:#2a2c31; color:#fff; border-color:#3a3c42; }
.sp-dashboard-container.sp-dark .sp-table th { background:#24262b; color:#e4e5e7; }
.sp-dashboard-container.sp-dark .sp-table tr:hover { background:#24262b; }
.sp-dashboard-container.sp-dark .sp-table td { border-color:#2c2d31; }
.sp-dashboard-container.sp-dark .sp-loading-overlay { background:rgba(0,0,0,0.55); }
.sp-dashboard-container.sp-dark .sp-notification { background:#24262b; border-left-color:#2271b1; }
.sp-dashboard-container.sp-dark .sp-notification.success { border-left-color:#1f8f42; }
.sp-dashboard-container.sp-dark .sp-notification.error { border-left-color:#c0392b; }
.sp-dashboard-container.sp-dark .sp-notification.warning { border-left-color:#e67e22; }
.sp-dashboard-container.sp-dark .sp-btn-secondary { background:#2e3035; color:#e4e5e7; }
.sp-dashboard-container.sp-dark .sp-btn-secondary:hover { background:#3a3c42; }
.sp-dashboard-container.sp-dark .sp-nav-drawer { background:#1e1f23; }
.sp-dashboard-container.sp-dark .sp-nav-drawer-header { border-color:#2c2d31; }
.sp-dashboard-container.sp-dark .sp-nav-drawer .sp-nav-tab { color:#c0c3c7; }
.sp-dashboard-container.sp-dark .sp-nav-drawer .sp-nav-tab.active { background:#2a2c31; }

/* Loader color tweak for dark */
.sp-dashboard-container.sp-dark .sp-spinner { border-color:#2f3439; border-top-color:#4a90d9; }

/* Auto dark mode hint; can be opted-out by removing auto-dark class */
@media (prefers-color-scheme: dark) {
    .sp-dashboard-container.auto-dark { background:#18191b; }
}

/* ==========================
   Reduced Motion
   ========================== */
@media (prefers-reduced-motion: reduce) {
    .sp-spinner { animation:none !important; }
    .sp-nav-drawer { transition:none; }
}

/* Loading text shown next to/under the spinner inside overlay */
.sp-loading-text {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--sp-text, #1d2327);
    opacity: 0.95;
    letter-spacing: 0.2px;
    text-transform: none;
}

/* Slightly larger text on wide screens */
@media (min-width: 900px) {
    .sp-loading-text { font-size: 16px; }
}

/* Scale down spinner on very small screens */
@media (max-width: 420px) {
    .sp-spinner { --sp-spinner-size: 36px; --sp-spinner-border: 3px; }
    .sp-loading-text { font-size: 14px; }
}

/* ==========================
   Collapsible Summary Blocks
   ========================== */
.sp-summary-collapsible {
    border:1px solid #e1e5e9;
    border-radius:8px;
    background:#fff;
    margin:0 0 20px 0;
    overflow:hidden;
}
.sp-dashboard-container.sp-dark .sp-summary-collapsible { background:#1e1f23; border-color:#2c2d31; }
.sp-summary-header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:12px 16px;
    cursor:pointer;
    background:#f6f7f7;
    /* Add vendor prefixes for better Safari/older browser support */
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* IE10+ */
    user-select: none;
}
.sp-dashboard-container.sp-dark .sp-summary-header { background:#24262b; }
.sp-summary-header h3, .sp-summary-header h4, .sp-summary-header h2 {
    margin:0;
    font-size:14px;
    font-weight:600;
    letter-spacing:.5px;
    display:flex;
    align-items:center;
    gap:6px;
}
.sp-summary-toggle-btn {
    background: none;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: var(--sp-primary-color) !important;
    display: flex;
    align-items: center;
}
.sp-dashboard-container.sp-dark .sp-summary-toggle-btn { 
    color: var(--sp-primary-light) !important;
}
@keyframes summaryFade { from { opacity:0; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) { .sp-summary-body { animation:none; } }

    .sp-sidebar-toggle-btn .dashicons { font-size: 22px; width:22px; height:22px; line-height:22px; }
/* Overview toggle pill */
.sp-overview-toggle {
    display:inline-block;
    margin:0 0 12px 0;
    padding:6px 14px;
    border:1px solid #d0d7de;
    background:#fff;
    border-radius:6px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    color:#444;
    box-shadow:0 1px 2px rgba(0,0,0,0.04);
}
.sp-overview-toggle:hover { background:#f2f4f6; }
.sp-dashboard-container.sp-dark .sp-overview-toggle { background:#222; border-color:#333; color:#ddd; }
.sp-dashboard-container.sp-dark .sp-overview-toggle:hover { background:#2c2f33; }

/* ==========================
    Sidebar Layout
    ========================== */
.sp-dashboard-layout { display:flex; gap:28px; align-items:stretch; }
.sp-dashboard-sidebar { width:220px; flex:0 0 220px; background:#fff; border:1px solid #e1e5e9; border-radius:10px; padding:18px 14px 20px; position:sticky; top:80px; height:fit-content; max-height:calc(100vh - 100px); overflow:auto; scrollbar-width:thin; -ms-overflow-style: auto; }
.sp-dashboard-container.sp-dark .sp-dashboard-sidebar { background:#1e1f23; border-color:#2c2d31; }
.sp-dashboard-sidebar::-webkit-scrollbar { width:8px; }
.sp-dashboard-sidebar::-webkit-scrollbar-track { background:transparent; }
.sp-dashboard-sidebar::-webkit-scrollbar-thumb { background:#c9d1d9; border-radius:4px; }
.sp-dashboard-container.sp-dark .sp-dashboard-sidebar::-webkit-scrollbar-thumb { background:#30363d; }
.sp-dashboard-sidebar .sp-dashboard-nav { margin:0 0 18px 0; }
.sp-dashboard-sidebar .sp-nav-tabs { flex-direction:column; gap:6px; overflow:visible; padding-right:2px; }
.sp-dashboard-sidebar .sp-nav-tabs li { flex:0 0 auto; }
.sp-dashboard-sidebar .sp-nav-tab { display:block; width:100%; text-align:left; border-radius:6px; background:#f3f4f6; border:1px solid transparent; padding:10px 12px; font-weight:500; }
.sp-dashboard-sidebar .sp-nav-tab:hover { background:#e9ecef; }
.sp-dashboard-sidebar .sp-nav-tab.active { 
    background: var(--sp-primary-color) !important;
    color: #fff !important;
    box-shadow: 0 0 0 1px var(--sp-primary-color) !important;
}
.sp-dashboard-sidebar .sp-nav-tab .dashicons { margin-right:8px; font-size:18px; vertical-align:middle; }
.sp-dashboard-sidebar .sp-nav-tab .sp-nav-label { vertical-align:middle; }
.sp-dashboard-container.sp-dark .sp-dashboard-sidebar .sp-nav-tab { background:#2a2d33; color:#d0d6dc; }
.sp-dashboard-container.sp-dark .sp-dashboard-sidebar .sp-nav-tab:hover { background:#33373d; }
.sp-dashboard-container.sp-dark .sp-dashboard-sidebar .sp-nav-tab.active { 
    background: var(--sp-primary-light) !important;
    color: #fff !important;
}
.sp-sidebar-util { margin-top:auto; padding-top:8px; border-top:1px solid #e1e5e9; }
.sp-dashboard-container.sp-dark .sp-sidebar-util { border-color:#2c2d31; }
.sp-overview-toggle-sidebar { width:100%; background:#fff; border:1px solid #d0d7de; border-radius:6px; padding:8px 12px; cursor:pointer; font-size:13px; display:block; text-align:left; }
.sp-overview-toggle-sidebar:hover { background:#f2f4f6; }
.sp-dashboard-container.sp-dark .sp-overview-toggle-sidebar { background:#222; border-color:#333; color:#ddd; }
.sp-dashboard-container.sp-dark .sp-overview-toggle-sidebar:hover { background:#2c2f33; }
.sp-dashboard-layout .sp-dashboard-content { flex:1 1 auto; min-width:0; }

/* Hide Sections button on desktop (sidebar always visible) */
/* Sidebar toggle hidden by default (shown on mobile only) */
.sp-sidebar-toggle-btn { display:none; }

/* Mobile Layout */
@media (max-width: 960px) {
    .sp-dashboard-layout {
        flex-direction: column;
    }
    
    /* Off-canvas sidebar on mobile */
    .sp-dashboard-sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 80vw;
        max-width: 320px;
        z-index: 10001;
        transform: translateX(-100%);
        transition: transform 0.25s ease-out;
        display: block; /* kept for layout consistency */
        box-shadow: 4px 0 20px rgba(0,0,0,0.12);
    }
    
    .sp-dashboard-sidebar.is-open { transform: translateX(0); }

    /* Mobile: Floating icon-only navigation toggle anchored like a real app header */
    .sp-sidebar-toggle-btn {
        position: fixed;
        top: 16px;
        left: 16px;
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 999px;
        background: #ffffff !important; /* ensure strict white over any content */
        border: 1px solid #e1e5e9;
        box-shadow: 0 6px 16px rgba(0,0,0,0.12);
        cursor: pointer;
        font-size: 16px;
        z-index: 10002; /* above content, below WP admin bar */
        color: #000 !important; /* default icon/text color */
        -webkit-tap-highlight-color: transparent;
    }
    .sp-sidebar-toggle-btn .dashicons {
        font-size: 22px;
        width: 22px;
        height: 22px;
        line-height: 22px;
        color: #000 !important; /* force black icon */
    }
    .sp-sidebar-toggle-btn:hover { background: #ffffff !important; }
    /* Do not invert in dark mode; keep white to avoid blending */
    .sp-dashboard-container.sp-dark ~ .sp-sidebar-toggle-btn,
    body.sp-dark .sp-sidebar-toggle-btn {
        background: #ffffff !important;
        border-color: #e1e5e9 !important;
        color: #000 !important;
    }
    .sp-dashboard-container.sp-dark ~ .sp-sidebar-toggle-btn:hover,
    body.sp-dark .sp-sidebar-toggle-btn:hover { background: #ffffff !important; }
    /* Offset when WP admin bar is visible on front-end */
    body.admin-bar .sp-sidebar-toggle-btn { top: 60px; }

    /* Backdrop overlay for mobile sidebar */
    .sp-sidebar-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.35);
        z-index: 10000;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.2s ease;
    }
    .sp-sidebar-backdrop.active {
        opacity: 1;
        visibility: visible;
    }
}

.sp-dashboard-container.compact .sp-dashboard-sidebar { width:70px; padding:14px 8px; }
.sp-dashboard-container.compact .sp-dashboard-sidebar .sp-nav-tab { padding:10px 10px; }
.sp-dashboard-container.compact .sp-dashboard-sidebar .sp-nav-tab .sp-nav-label { display:none; }
.sp-dashboard-container.compact .sp-overview-toggle-sidebar { font-size:11px; padding:6px 8px; }
.sp-dashboard-layout .sp-dashboard-nav .sp-nav-tabs { flex-wrap:nowrap; overflow:visible; }

/* ==========================================================================
   Visual Polish & Professional Enhancements
   ========================================================================== */

/* Refined Color Palette */
:root {
    --sp-primary: #2271b1;
    --sp-primary-hover: #135e96;
    --sp-primary-light: #4a90d9;
    --sp-success: #00a32a;
    --sp-success-light: #d4edda;
    --sp-warning: #dba617;
    --sp-warning-light: #fff3cd;
    --sp-danger: #d63638;
    --sp-danger-light: #f8d7da;
    --sp-info: #3582c4;
    --sp-info-light: #d1ecf1;
    --sp-gray-50: #f9fafb;
    --sp-gray-100: #f3f4f6;
    --sp-gray-200: #e5e7eb;
    --sp-gray-300: #d1d5db;
    --sp-gray-400: #9ca3af;
    --sp-gray-500: #6b7280;
    --sp-gray-600: #4b5563;
    --sp-gray-700: #374151;
    --sp-gray-800: #1f2937;
    --sp-gray-900: #111827;
}

/* Enhanced Dashboard Cards */
.sp-dashboard-card {
    background: linear-gradient(145deg, #ffffff 0%, #fafbfc 100%);
    border: 1px solid var(--sp-gray-200);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.sp-dashboard-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sp-primary) 0%, var(--sp-primary-light) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sp-dashboard-card:hover::before {
    opacity: 1;
}

.sp-dashboard-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 25px rgba(34, 113, 177, 0.12), 0 4px 10px rgba(0, 0, 0, 0.06);
    border-color: var(--sp-primary);
}

.sp-dashboard-card h4 {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sp-gray-700);
    text-transform: uppercase;
    margin-bottom: 18px;
}

.sp-dashboard-card h4 .dashicons {
    color: var(--sp-primary);
    width: 22px;
    height: 22px;
    font-size: 22px;
}

.sp-stat-number {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--sp-gray-900);
    margin-bottom: 8px;
    background: linear-gradient(135deg, var(--sp-gray-900) 0%, var(--sp-gray-700) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sp-stat-label {
    font-size: 13px;
    font-weight: 500;
    color: var(--sp-gray-500);
    letter-spacing: 0.01em;
}

/* Enhanced Buttons */
.sp-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 500;
    border-radius: 8px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.sp-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.sp-btn:active::before {
    width: 300px;
    height: 300px;
}

.sp-btn-primary {
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-light) 100%);
    color: #fff;
    box-shadow: 0 2px 4px rgba(34, 113, 177, 0.2);
}

.sp-btn-primary:hover {
    background: linear-gradient(135deg, var(--sp-primary-hover) 0%, var(--sp-primary) 100%);
    box-shadow: 0 4px 12px rgba(34, 113, 177, 0.3);
    transform: translateY(-1px);
}

.sp-btn-primary:focus {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
}

.sp-btn-secondary {
    background: #fff;
    border-color: var(--sp-gray-300);
    color: var(--sp-gray-700);
}

.sp-btn-secondary:hover {
    background: var(--sp-gray-50);
    border-color: var(--sp-gray-400);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}

/* Enhanced Overview Section */
.sp-overview-container {
    background: linear-gradient(to bottom, #ffffff 0%, #fafbfc 100%);
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--sp-gray-200);
}

.sp-overview-toggle {
    padding: 18px 24px;
    border-bottom: 1px solid var(--sp-gray-200);
}

.sp-overview-toggle:hover {
    background: var(--sp-gray-50);
}

.sp-overview-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--sp-gray-900);
    letter-spacing: -0.01em;
}

.sp-overview-title::before {
    color: var(--sp-primary);
}

/* Enhanced Navigation Tabs */
.sp-dashboard-sidebar .sp-nav-tab {
    font-weight: 500;
    font-size: 14px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
}

.sp-dashboard-sidebar .sp-nav-tab:hover {
    background: var(--sp-gray-100);
    transform: translateX(2px);
}

.sp-dashboard-sidebar .sp-nav-tab.active {
    background: linear-gradient(135deg, var(--sp-primary) 0%, var(--sp-primary-light) 100%);
    box-shadow: 0 2px 6px rgba(34, 113, 177, 0.25);
}

.sp-dashboard-sidebar .sp-nav-tab:focus {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
}

/* Enhanced Focus Indicators */
*:focus-visible {
    outline: 2px solid var(--sp-primary);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Enhanced Forms */
.sp-form-group input[type="text"],
.sp-form-group input[type="email"],
.sp-form-group input[type="tel"],
.sp-form-group input[type="date"],
.sp-form-group input[type="number"],
.sp-form-group select,
.sp-form-group textarea {
    border-radius: 8px;
    border: 1px solid var(--sp-gray-300);
    padding: 10px 14px;
    font-size: 14px;
    transition: all 0.2s ease;
}

.sp-form-group input:focus,
.sp-form-group select:focus,
.sp-form-group textarea:focus {
    border-color: var(--sp-primary);
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.1);
    outline: none;
}

/* Enhanced Tables */
.sp-table {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.sp-table thead th {
    background: linear-gradient(to bottom, var(--sp-gray-100) 0%, var(--sp-gray-50) 100%);
    font-weight: 600;
    font-size: 13px;
    letter-spacing: 0.02em;
    color: var(--sp-gray-700);
    text-transform: uppercase;
}

.sp-table tbody tr {
    transition: background-color 0.2s ease;
}

.sp-table tbody tr:hover {
    background-color: var(--sp-gray-50);
}

/* Enhanced Alerts */
.sp-alert {
    border-radius: 8px;
    border-left-width: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Enhanced Status Badges */
.sp-status,
.sp-role-badge,
.sp-validation-badge {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.03em;
}

/* Smooth Animations */
@media (prefers-reduced-motion: no-preference) {
    .sp-section,
    .sp-dashboard-card,
    .sp-btn,
    .sp-nav-tab {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
}

/* Dark Mode Enhancements */
.sp-dashboard-container.sp-dark {
    --sp-gray-50: #1f2937;
    --sp-gray-100: #111827;
}

.sp-dashboard-container.sp-dark .sp-dashboard-card {
    background: linear-gradient(145deg, #1f2937 0%, #111827 100%);
    border-color: #374151;
}

.sp-dashboard-container.sp-dark .sp-stat-number {
    background: linear-gradient(135deg, #f3f4f6 0%, #d1d5db 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Print Styles */
@media print {
    .sp-dashboard-sidebar,
    .sp-btn,
    .sp-overview-toggle {
        display: none !important;
    }
    
    .sp-dashboard-content {
        width: 100% !important;
    }
    
    .sp-overview-container.sp-collapsed .sp-overview-content {
        max-height: none !important;
        opacity: 1 !important;
    }
}

/* Responsive table scroll */
.sp-table-responsive { overflow-x:auto; -webkit-overflow-scrolling:touch; margin:0 0 18px; }

/* WebKit scrollbar fallback for browsers that don't support scrollbar-width */
.sp-dashboard-sidebar::-webkit-scrollbar,
.sp-table-responsive::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}
.sp-dashboard-sidebar::-webkit-scrollbar-track,
.sp-table-responsive::-webkit-scrollbar-track {
    background: transparent;
}
.sp-dashboard-sidebar::-webkit-scrollbar-thumb,
.sp-table-responsive::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.12);
    border-radius: 8px;
}
.sp-table-responsive table { width:100%; border-collapse:collapse; }
.sp-table-responsive::-webkit-scrollbar { height:10px; }
.sp-table-responsive::-webkit-scrollbar-thumb { background:#d0d7de; border-radius:6px; }
.sp-dashboard-container.sp-dark .sp-table-responsive::-webkit-scrollbar-thumb { background:#444; }
@media (max-width: 800px){ .sp-table-responsive table { font-size:13px; } }