/* ==========================================================================
   JCT JOURNAL CUSTOM STYLESHEET (REFINED FRONTEND & BACKEND + MOBILE)
   Journal of Commercializable Technologies (JCT)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

/* --- 1. Design Tokens --- */
:root {
    --bg-main: #f0fdf4;
    --bg-card: #ffffff;
    --text-dark: #0f172a;
    --text-heading: #1e293b;
    --text-body: #334155;
    --text-muted: #64748b;
    
    --brand-primary: #059669;
    --brand-bright: #10b981;
    --brand-dark: #064e3b;
    --brand-light: #ecfdf5;
    
    --gradient-emerald: linear-gradient(135deg, #059669 0%, #10b981 100%);
    --gradient-header: linear-gradient(135deg, #0f172a 0%, #064e3b 100%);
    
    --card-border: #dcfce7;
    --card-border-hover: #a7f3d0;
    
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(5, 150, 105, 0.08);
    --shadow-lg: 0 12px 28px rgba(5, 150, 105, 0.12);
    
    --font-heading: 'Outfit', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --radius-md: 12px;
    --radius-lg: 16px;
}

/* --- 2. Base Page Setup with Fresh Green Tint --- */
html, body, .pkp_structure_page, body.pkp_structure_backend, .app__body, #app {
    font-family: var(--font-body) !important;
    background-color: #f0fdf4 !important;
    background: #f0fdf4 !important;
    color: var(--text-body) !important;
    line-height: 1.65 !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .pkp_site_name {
    font-family: var(--font-heading) !important;
    color: var(--text-dark) !important;
    letter-spacing: -0.015em;
    font-weight: 700 !important;
}

a {
    color: var(--brand-primary) !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

a:hover, a:focus {
    color: var(--brand-bright) !important;
}

/* --- 3. KILL ALL OJS PSEUDO-ELEMENT VERTICAL BORDER LINES --- */
*:before, *:after {
    border-left: none !important;
    border-right: none !important;
}

.pkp_structure_main::before,
.pkp_structure_main::after,
.pkp_structure_content::before,
.pkp_structure_content::after,
.pkp_structure_page::before,
.pkp_structure_page::after,
.pkp_structure_head::before,
.pkp_structure_head::after,
.pkp_structure_sidebar::before,
.pkp_structure_sidebar::after,
.page::before,
.page::after,
.cmp_announcements > .obj_announcement_summary::before,
.cmp_announcements .more::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: none !important;
}

.pkp_structure_content {
    max-width: 1240px !important;
    width: 92% !important;
    margin: 36px auto !important;
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
}

.pkp_structure_main {
    padding: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* --- 4. FRONTEND HEADER & NAVIGATION STYLES --- */
.pkp_structure_head {
    background-color: #ffffff;
    border-bottom: 2px solid var(--card-border) !important;
    box-shadow: var(--shadow-sm) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    width: 100% !important;
}

/* Header Container Wrapper */
.pkp_head_wrapper,
.has_site_logo .pkp_head_wrapper {
    max-width: 1240px !important;
    width: 92% !important;
    margin: 0 auto !important;
    padding: 12px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    box-sizing: border-box !important;
}

/* Site Name & Logo Container */
.pkp_site_name_wrapper {
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    min-height: 48px !important;
}

.pkp_site_name {
    position: static !important;
    width: auto !important;
    height: auto !important;
    font-size: 22px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    overflow: visible !important;
    white-space: normal !important;
    color: var(--text-dark) !important;
}

/* Logo Image & Text Fix */
.pkp_site_name .is_img,
.pkp_site_name a.is_img,
.pkp_site_name a,
.pkp_site_name .is_text {
    display: inline-flex !important;
    align-items: center !important;
    padding: 0 !important;
    margin: 0 !important;
    text-decoration: none !important;
    font-family: var(--font-heading) !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.pkp_site_name img,
.pkp_site_name .is_img img,
.pkp_site_name a img,
.pkp_site_name_wrapper img {
    max-height: 60px !important;
    height: auto !important;
    width: auto !important;
    max-width: 320px !important;
    min-height: 36px !important;
    object-fit: contain !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Primary Navigation Wrapper */
.pkp_navigation_primary_wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
}

.pkp_navigation_primary {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: static !important;
    float: none !important;
}

.pkp_navigation_primary li {
    display: inline-block !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
}

.pkp_navigation_primary li a,
.pkp_navigation_search_wrapper a {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--text-body) !important;
    padding: 8px 12px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}

.pkp_navigation_primary li a:hover,
.pkp_navigation_search_wrapper a:hover {
    color: var(--brand-primary) !important;
    background: var(--brand-light) !important;
}

/* --- USER NAVIGATION MENU (LOGIN / REGISTER / USER PROFILE) --- */
.pkp_navigation_user_wrapper,
div.pkp_navigation_user_wrapper,
nav.pkp_navigation_user_wrapper,
.pkp_head_wrapper .pkp_navigation_user_wrapper {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    margin: 0 0 0 8px !important;
    padding: 0 !important;
    float: none !important;
    flex-shrink: 0 !important;
    z-index: 100 !important;
    background: transparent !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}

.pkp_navigation_user,
ul.pkp_navigation_user,
ul#userNavigation,
.pkp_navigation_user_wrapper .pkp_navigation_user {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    float: none !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.pkp_navigation_user > li,
ul#userNavigation > li {
    display: inline-flex !important;
    align-items: center !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}

/* Base User Nav Item styling */
.pkp_navigation_user a,
.pkp_navigation_user li a,
.pkp_navigation_user > li > a,
ul#userNavigation a {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    padding: 8px 14px !important;
    border-radius: 8px !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.pkp_navigation_user a:hover,
.pkp_navigation_user li a:hover {
    color: var(--brand-primary) !important;
    background: var(--brand-light) !important;
}

/* Explicit LOGIN Button Styling */
.pkp_navigation_user li a[href*="login"],
.pkp_navigation_user a[href*="login"],
ul#userNavigation a[href*="login"] {
    background: #ffffff !important;
    color: var(--text-dark) !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 7px 15px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
}

.pkp_navigation_user li a[href*="login"]:hover,
.pkp_navigation_user a[href*="login"]:hover {
    background: #f8fafc !important;
    color: var(--brand-dark) !important;
    border-color: #94a3b8 !important;
}

/* Explicit REGISTER Button Styling (Primary CTA) */
.pkp_navigation_user li a[href*="register"],
.pkp_navigation_user a[href*="register"],
ul#userNavigation a[href*="register"] {
    background: var(--gradient-emerald) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
    padding: 7px 16px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    border: none !important;
}

.pkp_navigation_user li a[href*="register"]:hover,
.pkp_navigation_user a[href*="register"]:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 16px rgba(5, 150, 105, 0.35) !important;
    color: #ffffff !important;
}

/* Logged-In User Profile Dropdown Menu */
.pkp_navigation_user .dropdown-menu,
.pkp_navigation_user ul.dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    right: 0 !important;
    left: auto !important;
    background: #ffffff !important;
    border: 1.5px solid var(--card-border) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    padding: 8px 0 !important;
    min-width: 170px !important;
    z-index: 1000 !important;
}

.pkp_navigation_user .dropdown-menu li a {
    display: block !important;
    padding: 10px 18px !important;
    color: var(--text-body) !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

.pkp_navigation_user .dropdown-menu li a:hover {
    background: var(--brand-light) !important;
    color: var(--brand-primary) !important;
}

/* --- 5. Elevated White Card Container Effect --- */
.pkp_structure_main > .page,
.pkp_structure_main > div,
.pkp_content,
.page_about,
.page_archives,
.page_issue,
.page_article,
.current_issue,
.page_index_journal .current_issue {
    background: #ffffff !important;
    border-radius: var(--radius-lg) !important;
    border: 1.5px solid var(--card-border) !important;
    padding: 36px 40px !important;
    box-shadow: var(--shadow-md) !important;
    margin-bottom: 28px !important;
    transition: all 0.25s ease !important;
}

.pkp_structure_main > .page:hover,
.pkp_structure_main > div:hover {
    box-shadow: var(--shadow-lg) !important;
}

/* Section titles inside cards */
.pkp_structure_main h1, .pkp_page_title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: var(--text-dark) !important;
    margin-bottom: 20px !important;
    padding-bottom: 0 !important;
    border: none !important;
}

/* --- 6. Form Cards ONLY (Login & Register) --- */
.pkp_page_login .pkp_structure_main,
.pkp_page_register .pkp_structure_main,
.pkp_page_submission .pkp_structure_main {
    max-width: 680px !important;
    margin: 20px auto !important;
    background: #ffffff !important;
    padding: 44px !important;
    border-radius: var(--radius-lg) !important;
    border: 1.5px solid var(--card-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

input[type="text"], 
input[type="email"], 
input[type="password"], 
select, 
textarea {
    width: 100% !important;
    border-radius: 10px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 12px 16px !important;
    box-sizing: border-box !important;
}

/* Form Action Submit Buttons ONLY */
.pkp_form input[type="submit"], 
.pkp_form button[type="submit"],
.page_login button[type="submit"],
.page_register button[type="submit"] {
    background: var(--gradient-emerald) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
}

/* --- 7. Article Item Cards & Sidebar Cards --- */
.obj_article_summary {
    background: #ffffff !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--card-border) !important;
    padding: 24px 28px !important;
    margin-bottom: 20px !important;
    box-shadow: var(--shadow-sm) !important;
    transition: all 0.25s ease !important;
}

.obj_article_summary:hover {
    transform: translateY(-3px) !important;
    box-shadow: var(--shadow-lg) !important;
    border-color: var(--brand-primary) !important;
}

.pkp_structure_sidebar .pkp_block {
    background: #ffffff !important;
    border-radius: var(--radius-md) !important;
    border: 1.5px solid var(--card-border) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: var(--shadow-sm) !important;
}

/* --- 8. Luxury Dark Footer (HIDING OJS/PKP BRANDING) --- */
.pkp_structure_footer_wrapper {
    background: linear-gradient(180deg, #0f172a 0%, #064e3b 100%) !important;
    color: #e2e8f0 !important;
    margin-top: 60px !important;
    padding: 50px 0 40px 0 !important;
    border-top: 4px solid var(--brand-bright) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.pkp_structure_footer {
    max-width: 1240px !important;
    width: 92% !important;
    margin: 0 auto !important;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    line-height: 1.8 !important;
    background: transparent !important;
    border: none !important;
    padding: 0 20px !important;
    text-align: left !important;
}

/* HIDE OJS / PKP BRANDING FOOTER LINK */
.pkp_brand_footer,
.pkp_structure_footer a[href*="aboutThisPublishingSystem"],
.pkp_structure_footer a[href*="pkp.sfu.ca"] {
    display: none !important;
}

.pkp_structure_footer p, 
.pkp_structure_footer div, 
.pkp_structure_footer span,
.pkp_structure_footer li {
    color: #cbd5e1 !important;
}

.pkp_structure_footer strong, 
.pkp_structure_footer b {
    color: #34d399 !important;
    font-weight: 700 !important;
}

.pkp_structure_footer a {
    color: #38bdf8 !important;
    font-weight: 600 !important;
}

/* ==========================================================================
   9. OJS BACKEND & WORKFLOW DASHBOARD STYLING (/submissions, /workflow)
   ========================================================================== */

/* Backend Header Bar */
.app__header,
header.app__header,
.pkp_structure_head.pkp_structure_head_backend {
    background: var(--gradient-header) !important;
    border-bottom: 3px solid #10b981 !important;
    box-shadow: 0 4px 20px rgba(15, 23, 42, 0.25) !important;
    padding: 12px 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Site Title in Backend Header */
.app__header .pkp_site_name,
.app__header .pkp_site_name a,
.app__header a.app__headerSiteTitle,
header.app__header a {
    color: #ffffff !important;
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    font-size: 20px !important;
    letter-spacing: -0.01em !important;
    text-shadow: none !important;
}

/* Header Icons (Notifications & Profile Buttons) */
.app__header button,
.app__header .pkpHeaderNav__button,
.app__headerNav button,
.app__headerNav a {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    padding: 8px !important;
    margin: 0 4px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease !important;
}

.app__header button:hover,
.app__headerNav button:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: #34d399 !important;
}

.app__header .pkpIcon,
.app__header [class*="icon"] {
    color: #ffffff !important;
}

/* Submissions Main Header & Section Titles */
.pkp_page_submissions h1,
.pkpHeader__title,
.app__main h1,
.pkpHeader h1 {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 800 !important;
    color: #0f172a !important;
    font-size: 28px !important;
    margin-bottom: 18px !important;
}

/* Navigation Tabs Container ("My Queue", "Archives") */
.pkpTabs__buttons,
.pkpTabs__buttonList,
[role="tablist"] {
    border-bottom: 2px solid #e2e8f0 !important;
    display: flex !important;
    gap: 12px !important;
    margin-bottom: 24px !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Tab Buttons RESET */
.pkpTabs__button,
button[role="tab"],
.pkpTabs__buttonList a,
.pkpTabButton {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    border-radius: 0 !important;
    padding: 10px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    color: #64748b !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.pkpTabs__button:hover,
button[role="tab"]:hover {
    color: #059669 !important;
    background: transparent !important;
}

/* Active Tab Highlight */
.pkpTabs__button--isFocused,
.pkpTabs__button[aria-selected="true"],
button[role="tab"][aria-selected="true"],
.pkpTabs__button.is-active {
    color: #059669 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #059669 !important;
    background: transparent !important;
}

/* Tab Count Badge (e.g. "1" next to My Queue) */
.pkpTabs__statusCount,
.pkpBadge--count,
button[role="tab"] .pkpBadge {
    background: #dcfce7 !important;
    color: #047857 !important;
    border: 1px solid #a7f3d0 !important;
    border-radius: 12px !important;
    padding: 2px 8px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-left: 8px !important;
    display: inline-block !important;
    box-shadow: none !important;
}

/* Help Button */
.pkpButton[href*="help"],
button.pkpButton--help,
.pkpHeader__help {
    background: #ffffff !important;
    color: #059669 !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 7px 16px !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important;
}

.pkpButton[href*="help"]:hover {
    background: #ecfdf5 !important;
    border-color: #059669 !important;
}

/* Main Submissions Panel Container Card */
.pkpListPanel,
.pkp_controllers_grid,
.pkpListPanel__content {
    background: #ffffff !important;
    border-radius: 16px !important;
    border: 1.5px solid #dcfce7 !important;
    box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08) !important;
    overflow: hidden !important;
    margin-bottom: 28px !important;
}

.pkpListPanel__header {
    background: #ffffff !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    padding: 18px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 14px !important;
}

.pkpListPanel__title {
    font-family: 'Outfit', sans-serif !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 18px !important;
    margin: 0 !important;
}

/* Search Box & Filters Button */
.pkpSearch {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-right: 12px !important;
}

.pkpSearch__input,
input[type="search"],
input.pkpSearch {
    border-radius: 8px !important;
    border: 1.5px solid #cbd5e1 !important;
    padding: 9px 14px 9px 38px !important;
    font-size: 14px !important;
    background: #ffffff !important;
    min-width: 220px !important;
}

.pkpSearch__input:focus,
input[type="search"]:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
    outline: none !important;
}

.pkpSearch__icon,
.pkpSearch__svg,
.pkpSearch label,
.pkpSearch .fa-search {
    position: absolute !important;
    left: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: #94a3b8 !important;
    pointer-events: none !important;
    z-index: 2 !important;
}

/* Header Action Toolbar (Search, Filters, New Submission Gap) */
.pkpHeader__actions,
.pkpListPanel__header .pkpHeader__actions,
.pkpListPanel__options {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
}

.pkpFilter__button,
button.pkpButton--filter,
.pkpHeader__actions button.pkpButton--filter {
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    padding: 8px 16px !important;
    margin-left: 8px !important;
    margin-right: 8px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.pkpFilter__button:hover {
    background: #f8fafc !important;
    border-color: #94a3b8 !important;
}

/* Action Button: "New Submission" (PRIMARY ACTION) */
.pkpButton--primary,
button.pkpButton--primary,
a.pkpButton--primary,
.pkpHeader__actions a.pkpButton,
.pkpHeader__actions button.pkpButton--primary {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%) !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 9px 20px !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    margin-left: 8px !important;
    box-shadow: 0 4px 14px rgba(5, 150, 105, 0.25) !important;
    transition: all 0.2s ease !important;
}

.pkpButton--primary:hover,
button.pkpButton--primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(5, 150, 105, 0.35) !important;
}

/* Submission List Items */
.pkpListPanel__item {
    border-bottom: 1px solid #f1f5f9 !important;
    padding: 16px 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    transition: background 0.2s ease !important;
}

.pkpListPanel__item:hover {
    background: #f0fdf4 !important;
}

.pkpListPanel__itemTitle {
    font-weight: 700 !important;
    color: #0f172a !important;
    font-size: 15px !important;
}

.pkpListPanel__itemSubtitle {
    color: #475569 !important;
    font-size: 14px !important;
}

/* Badges inside Row */
.pkpBadge::before,
.pkpBadge::after,
.pkpBadge__icon,
.pkpBadge--alert::before,
.pkpBadge--warn::before {
    display: none !important;
    content: none !important;
}

.pkpBadge,
.pkpBadge--warn,
.pkpBadge--alert,
.pkpBadge--notice,
.pkpBadge--primary {
    background: #ecfdf5 !important;
    color: #047857 !important;
    border: 1.5px solid #a7f3d0 !important;
    border-radius: 20px !important;
    padding: 4px 14px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    margin-right: 12px !important;
    box-shadow: none !important;
}

/* Row Action Buttons: "View" & Dropdown Arrow Gap */
.pkpListPanel__itemActions {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.pkpButton--unobtrusive,
.pkpListPanel__itemActions a.pkpButton {
    background: #ffffff !important;
    color: #059669 !important;
    border: 1.5px solid #059669 !important;
    border-radius: 6px !important;
    padding: 6px 16px !important;
    font-weight: 600 !important;
    box-shadow: none !important;
}

.pkpListPanel__itemActions a.pkpButton:hover {
    background: #ecfdf5 !important;
}

.pkpListPanel__itemActions button,
.pkpListPanel__itemActions .pkpButton--isIconOnly {
    background: #f8fafc !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 6px 12px !important;
    margin-left: 6px !important;
    box-shadow: none !important;
}

.pkpListPanel__itemActions button:hover {
    background: #f1f5f9 !important;
    color: #0f172a !important;
}

/* ==========================================================================
   10. MOBILE RESPONSIVENESS OVERRIDES (@media max-width 768px & 480px)
   ========================================================================== */

@media screen and (max-width: 768px) {
    /* Header Responsive Layout */
    .pkp_structure_head, .app__header, header.app__header {
        padding: 12px 16px !important;
    }

    .pkp_head_wrapper {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    .pkp_site_name a, .app__header .pkp_site_name a {
        font-size: 17px !important;
        line-height: 1.3 !important;
    }

    .pkp_navigation_primary_wrapper {
        width: 100% !important;
        flex-direction: column !important;
        align-items: stretch !important;
        margin: 0 !important;
        gap: 10px !important;
    }

    .pkp_navigation_primary, .pkp_navigation_user {
        flex-direction: column !important;
        width: 100% !important;
        align-items: stretch !important;
        gap: 6px !important;
    }

    .pkp_navigation_primary li a, .pkp_navigation_user li a {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }

    /* Content Area & Cards on Mobile */
    .pkp_structure_content {
        width: 95% !important;
        margin: 16px auto !important;
    }

    .pkp_structure_main > .page,
    .pkp_structure_main > div,
    .pkp_page_login .pkp_structure_main,
    .pkp_page_register .pkp_structure_main {
        padding: 20px 16px !important;
        border-radius: 12px !important;
    }

    /* Tabs on Mobile */
    .pkpTabs__buttons, [role="tablist"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .pkpTabs__button, button[role="tab"] {
        padding: 8px 12px !important;
        font-size: 14px !important;
    }

    /* Submissions Dashboard Header & Toolbar */
    .pkpListPanel__header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .pkpSearch__input, input[type="search"] {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    .pkpHeader__actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .pkpHeader__actions button, .pkpHeader__actions a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    /* Submissions Items Row on Mobile */
    .pkpListPanel__item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
        padding: 16px !important;
    }

    .pkpListPanel__itemActions {
        width: 100% !important;
        justify-content: space-between !important;
    }

    .pkpListPanel__itemActions a.pkpButton,
    .pkpListPanel__itemActions button {
        flex: 1 !important;
        text-align: center !important;
        justify-content: center !important;
    }

    /* Footer on Mobile */
    .pkp_structure_footer {
        padding: 0 16px !important;
        font-size: 13px !important;
    }
}

@media screen and (max-width: 480px) {
    .pkp_site_name a, .app__header .pkp_site_name a {
        font-size: 15px !important;
    }

    .pkp_structure_main h1, .pkp_page_title {
        font-size: 22px !important;
    }

    .pkpTabs__button, button[role="tab"] {
        font-size: 13px !important;
        padding: 6px 10px !important;
    }
}