/* ========================================
   ADMIN STYLES - PRAYER BOARD PLUGIN
   ======================================== */

:root {
  /* Accent colors */
  --pba-accent-color: #f44336;
  --pba-accent-color-hover: color-mix(in srgb, var(--pba-accent-color) 80%, transparent);
/* Accent colors with transparency */
  --pba-accent-10: color-mix(in srgb, var(--pba-accent-color) 10%, transparent);
  --pba-accent-20: color-mix(in srgb, var(--pba-accent-color) 20%, transparent);
  --pba-accent-30: color-mix(in srgb, var(--pba-accent-color) 30%, transparent);
  --pba-accent-40: color-mix(in srgb, var(--pba-accent-color) 40%, transparent);
  --pba-error-bg: #cd5c5c;
  --pba-error-bg-hover: color-mix(in srgb, var(--pba-error-bg) 80%, transparent);
  /* Status colors */
  --pba-success-bg: #008a0b;
  --pba-warning-bg: #c46206;
  --pba-info-bg: #0065c4;
  --pba-danger-bg: #df0000;
  /* Admin background color */
  --pba-admin-bg: #f2f3f6;
  /* Border tokens (light = subtle, medium = default, dark = emphasis) */
  --border-very-light: #f5f5f5;
  --border-light: #e7e7e7;
  --border-medium: #dddddd;
  --border-dark: #c3c4c7;
  /* Thumbnail card background (board + marquee selector cards) */
  --card-bg: #f8f8f8;
  /* Spacing tokens */
  --space-1: 5px;
  --space-2: 8px;
  --space-3: 10px;
  --space-4: 12px;
  --space-5: 15px;
  --space-6: 20px;
  --space-7: 30px;
  --space-8: 40px;
}

/* ADMIN VISIBILITY UTILITIES */
.pba-is-hidden { display: none !important; }

/* Color preset swatches now use a CSS custom property */
.pba-preset-swatch { background-color: var(--pba-swatch-color, transparent); }

/* Hide third‑party notices on PrayerBoard admin page */
body.toplevel_page_prayboard-settings .notice,
body.toplevel_page_prayboard-settings .notice-success,
body.toplevel_page_prayboard-settings .notice-error,
body.toplevel_page_prayboard-settings .notice-warning,
body.toplevel_page_prayboard-settings .notice-info,
body.toplevel_page_prayboard-settings #message.update-nag,
body.toplevel_page_prayboard-settings .settings-error,
body.toplevel_page_prayboard-settings .update-nag,
body.toplevel_page_prayboard-settings .litespeed-wrap-notice,
body.toplevel_page_prayboard-settings .ao_notice,
body.toplevel_page_prayboard-settings .sg-cachepress-notice,
body.toplevel_page_prayboard-settings .wp-rocket-message,
body.toplevel_page_prayboard-settings .wphb-notice,
body.toplevel_page_prayboard-settings .wpfepp-notice {
    display: none !important;
}

/* API test output blocks (admin.js) */
.pba-text-success { color: #46b450 !important; }
.pba-text-danger { color: #dc3232 !important; }

.pba-api-test-card {
    margin-bottom: 20px;
    padding: 10px;
    background: #ffffff;
    border-radius: 4px;
    border-left: 4px solid var(--pba-info-bg);
}
.pba-api-test-card--success { border-left-color: #46b450; }
.pba-api-test-card--danger { border-left-color: #dc3232; }
.pba-api-test-card-title { margin-top: 0; }

.pba-api-test-pre {
    background: #ededed;
    padding: 10px;
    border-radius: 8px;
    overflow-x: auto;
}
.pba-api-test-pre--light {
    background: #f9f9f9;
    border-radius: 4px;
}

/* ========================================
   SIDEBAR NAVIGATION LAYOUT
   ======================================== */

/* Set admin background color on parent container */
body.wp-admin.wp-core-ui,
#wpwrap {
    background-color: var(--pba-admin-bg) !important;
    height: 90vh;
}

/* Make wpbody-content container full height and add right margin */
body.toplevel_page_prayboard-settings #wpbody {
    margin-right: 20px !important;
}

body.toplevel_page_prayboard-settings #wpbody-content {
    display: flex;
    flex-direction: column;
    height: 90vh;
    margin: 0 20px 0 0 !important;
    padding: 0;
    background: transparent;
}

.prayerboard-admin-layout {
    display: flex;
    flex: 1;
    min-height: 0;
    background: transparent;
}

.prayerboard-sidebar {
    width: 220px;
    padding: 0;
    margin-right: var(--space-6);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: transparent;
}

.prayerboard-nav-menu {
    list-style: none;
    border: none;
    margin: 0;
    padding: 0;
}

.prayerboard-nav-menu li {
    margin: 0;
    padding: 0;
}

.prayerboard-nav-item {
    display: block;
    padding: var(--space-5) var(--space-6);
    margin-bottom: var(--space-3);
    color: #495057 !important;
    background-color: transparent;
    border: 1px solid transparent;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 16px;
}

.pba-ui-icon {
    display: inline-block;
    line-height: 1;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
}

.pba-ui-icon--nav {
    color: #495057;
    font-size: 18px;
    width: 22px;
    text-align: center;
    vertical-align: middle;
    margin-right: 8px;
}

.prayerboard-nav-item:hover,
.prayerboard-nav-item.active {
    color: var(--pba-accent-color) !important;
    background-color: #ffffff;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
}

.prayerboard-nav-item:hover .pba-ui-icon--nav {
    color: var(--pba-accent-color-hover);
}

.prayerboard-nav-item.active .pba-ui-icon--nav {
    color: var(--pba-accent-color);
}

/* Logout button container */
.prayerboard-logout-container {
    display: none;
    margin-top: auto;
    margin-bottom: 60px;
    border-top: 1px solid #dadada;
}

.prayerboard-logout-item {
    border-top: 1px solid #dadada !important;
    border-bottom: 1px solid #dadada !important;
}

.prayerboard-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 0 1px 0 0;
    margin: 0;
    overflow-x: hidden; 
    box-sizing: border-box;
    background: transparent;
}

/* Responsive Design */
@media (max-width: 768px) {
    .prayerboard-admin-layout {
        flex-direction: column;
    }
    
    .prayerboard-sidebar {
        width: 100%;
        border-right: none;
    }
    
    .prayerboard-nav-menu {
        display: flex;
        overflow-x: auto;
    }
    
    .prayerboard-nav-item {
        white-space: nowrap;
        border-bottom: none;
        min-width: 120px;
        text-align: center;
    }
}

/* Close Button Styles */
a.close {
    float: right;
    color: #fff;
    font-size: 20px;
}

div#wpfooter {
    position: relative;
    clear: both;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure inner clear does not add extra space */
div#wpfooter .clear {
    margin: 0 !important;
    height: 0 !important;
}

/* ========================================
   CONTAINERS AND COLUMNS STYLES
   ======================================== */

/* Force override any conflicting WordPress admin styles */
.prayerboard-content .standard-container * {
    box-sizing: border-box !important;
}

/* Standard Container - Flexbox layout */
.standard-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: var(--space-6) !important; /* 20px gap between columns */
}

/* Standard Column - Base styling */
.standard-column {
    background: #fff !important;
    box-shadow: 0 0 2px 0 #c0c0c0 !important;
    border-radius: 8px;
    padding: var(--space-7) !important;
    margin: 1px !important;
}

/* Standard Column - Flex properties for multi-column layout (default: 50% width) */
.standard-container .standard-column {
    flex: 1 1 calc(50% - var(--space-3)) !important; /* 50% minus half the gap */
    min-width: 300px !important;
}

/* Single column layout - Full width (overrides above) */
.standard-container .standard-column:only-child {
    flex: 1 1 100% !important;
}

/* Shortcodes tab - Single column layout override */
.prayerboard-content .prayboard-shortcodes .standard-container {
    display: block !important;
    flex-wrap: nowrap !important;
    gap: 0 !important;
}

.prayerboard-content .prayboard-shortcodes .standard-column {
    flex: none !important;
    min-width: auto !important;
    width: 100% !important;
    margin-bottom: var(--space-6) !important;
}

.prayerboard-content .prayboard-shortcodes .standard-column:last-child {
    margin-bottom: 0 !important;
}

/* ========================================
   STANDARD SUB-COLUMN LAYOUT
   ======================================== */

/* Make parent column use flexbox for sub-columns */
/* Use class-based approach for better browser compatibility */
.standard-column.has-sub-columns {
    display: flex !important;
    flex-direction: column !important;
    position: relative;
    gap: 0;
}

/* Container for sub-columns (appears below header) */
.standard-column.has-sub-columns .sub-columns-wrapper {
    display: flex !important;
    flex-direction: row !important;
    position: relative;
    gap: 0;
    align-items: stretch;
    width: 100%;
}

/* Fallback for browsers that support :has() */
@supports selector(:has(*)) {
    .standard-column:has(.standard-sub-column) {
        display: flex !important;
        flex-direction: column !important;
        position: relative;
        gap: 0;
    }
    
    .standard-column:has(.standard-sub-column) .sub-columns-wrapper {
        display: flex !important;
        flex-direction: row !important;
        position: relative;
        gap: 0;
        align-items: flex-start;
        width: 100%;
    }
}

/* Standard Sub-Column - For nested columns within standard-column */
.sub-columns-wrapper .standard-sub-column {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Left sub-column (1/4 width) - Match height of code editor */
.sub-columns-wrapper .standard-sub-column:first-child {
    flex: 0 0 25%;
    padding-right: var(--space-6);
    position: relative;
    min-height: 580px;
    align-items: flex-start;
}

/* Vertical divider between sub-columns */
.sub-columns-wrapper .standard-sub-column:first-child::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background-color: #dddddd;
}

/* Right sub-column (3/4 width) */
.sub-columns-wrapper .standard-sub-column:last-child {
    flex: 0 0 75%;
    padding-left: var(--space-6);
}

/* Label styling for sub-columns */
.standard-sub-column label {
    display: block;
    font-weight: 600;
    color: #333;
}

/* 3-Column Layout for Board Styling (Template, Color Presets, Marquee - 1/3 each) */
#pba-board-columns.standard-container {
    flex-wrap: nowrap !important; /* Prevent wrapping to ensure 3 columns stay in one row */
    overflow-x: hidden !important; /* Prevent horizontal overflow */
    box-sizing: border-box !important;
    padding: 1px !important;
}

#pba-board-columns.standard-container .standard-column {
    flex: 0 0 calc((100% - 2 * var(--space-6)) / 3) !important; /* Account for 2 gaps between 3 columns */
    min-width: 0 !important; /* Override default min-width */
    max-width: calc((100% - 2 * var(--space-6)) / 3) !important; /* Ensure columns don't exceed calculated width */
    width: calc((100% - 2 * var(--space-6)) / 3) !important; /* Force exact width */
    box-sizing: border-box !important; /* Include padding/border in width calculation */
    margin: 0 !important; /* Override base .standard-column margin: 1px - gap handles spacing */
}

/* Fill parent container height (e.g. .prayerboard-content) so dropdown panel is not clipped */
#pba-board-styling-container {
    flex: 1 1 auto;
    min-height: 0;
}

/* Add spacing between full-width sections (1/1 columns) */
#pba-board-styling-container > .standard-container {
    margin-bottom: var(--space-6) !important; 
}

#pba-board-styling-container > .standard-container:last-child {
    margin-bottom: 0 !important; /* Remove gap from last section */
}

/* Responsive Design for container Layout */
@media (max-width: 1200px) {
    .standard-container .standard-column {
        flex: 1 1 100% !important; /* Full width on smaller screens */
    }

    /* Dua tab: keep 50/50 columns inside admin content (sidebar reduces usable width) */
    .prayerboard-content .pba-dua-manual-entry .standard-column.pba-dua-manual-entry__form,
    .prayerboard-content .pba-dua-manual-entry .standard-column.pba-dua-manual-entry__recent {
        flex: 1 1 50% !important;
        width: calc(50% - (var(--space-6) / 2)) !important;
        max-width: calc(50% - (var(--space-6) / 2)) !important;
        min-width: 0 !important;
    }
    
    /* Gap property handles spacing automatically when columns stack */
    
    /* 4-column layout stacks on smaller screens */
    #pba-board-columns.standard-container .standard-column {
        flex: 1 1 100% !important;
        min-width: auto !important;
    }

    /* Location tab: stack columns on narrow screens */
    #pba-location-tab-container .pba-location-tab-columns {
        grid-template-columns: 1fr;
    }
}

/* Mobile/Tablet breakpoint - stack 4-column layout */
@media (max-width: 992px) {
    #pba-board-columns.standard-container .standard-column {
        flex: 1 1 100% !important;
        min-width: auto !important;
        width: 100% !important;
    }
}

/* Marquee Admin: spacing under Marquee Message Groups container */
#pba-marquee-admin .pba-select-marquee-container {
    margin-bottom: var(--space-6);
}

/* 2-Column Layout for Marquee Admin (2/5 left, 3/5 right) */
#pba-marquee-columns.standard-container {
    flex-wrap: nowrap !important; /* keep both columns on a single row */
}

#pba-marquee-columns.standard-container .standard-column:first-child {
    flex: 0 0 calc(40% - var(--space-3)) !important;
    max-width: calc(40% - var(--space-3)) !important;
    min-width: 0 !important;
}

#pba-marquee-columns.standard-container .standard-column:last-child {
    flex: 0 0 calc(60% - var(--space-3)) !important;
    max-width: calc(60% - var(--space-3)) !important;
    min-width: 0 !important;
}

/* API tab: 2/3 + 1/3 column layout */
.pba-api-tab-columns.standard-container .standard-column:first-child {
    flex: 0 0 calc(66.666% - var(--space-3)) !important;
    max-width: calc(66.666% - var(--space-3)) !important;
    min-width: 0 !important;
}
.pba-api-tab-columns.standard-container .standard-column:last-child {
    flex: 0 0 calc(33.333% - var(--space-3)) !important;
    max-width: calc(33.333% - var(--space-3)) !important;
    min-width: 0 !important;
}

/* Location tab: 2-column layout */
#pba-location-tab-container.standard-container {
    flex-direction: column !important;
}
#pba-location-tab-container .pba-location-tab-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-6);
    width: 100%;
}
.pba-location-col-left,
.pba-location-col-right {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}
.pba-location-search-section,
.pba-location-device-section,
.pba-location-current-section,
.pba-location-api-section {
    flex: 1;
}

/* Location tab: search input full width */
.pba-location-search-section input.standard-element-full {
    width: 100%;
    padding: 8px 10px;
}
.pba-location-search-results {
    position: relative;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1000;
    max-height: 240px;
    overflow-y: auto;
    border: 1px solid var(--border-medium);
    margin-top: var(--space-1);
}

/* Location tab: form-table labels above values */
.pba-location-current-section .form-table {
    display: block !important;
}
.pba-location-current-section .form-table tr {
    display: block !important;
    margin-bottom: var(--space-3);
}
.pba-location-current-section .form-table th,
.pba-location-current-section .form-table td {
    display: block !important;
    width: 100% !important;
    padding-bottom: var(--space-1);
}
.pba-location-current-section .form-table th {
    font-weight: 600;
}
.pba-location-display-value {
    display: inline-block;
    min-height: 1.5em;
    color: var(--text-primary, #2c3338);
}

/* ========================================
   UNIVERSAL TABLE & ELEMENT CLASSES
   ======================================== */

/* Base form control styles - shared by all standard-element-* classes */
.prayerboard-content .form-control,
.form-table .form-control,
.pba-content-type-editor .form-control,
.prayerboard-content .standard-element-xxlarge,
.form-table .standard-element-xxlarge,
.pba-content-type-editor .standard-element-xxlarge,
.prayerboard-content .standard-element-xlarge,
.form-table .standard-element-xlarge,
.pba-content-type-editor .standard-element-xlarge,
.prayerboard-content .standard-element-large,
.form-table .standard-element-large,
.pba-content-type-editor .standard-element-large,
.prayerboard-content .standard-element-medium,
.form-table .standard-element-medium,
.pba-content-type-editor .standard-element-medium,
.prayerboard-content .standard-element-normal,
.form-table .standard-element-normal,
.pba-content-type-editor .standard-element-normal,
.prayerboard-content .standard-element-small,
.form-table .standard-element-small,
.pba-content-type-editor .standard-element-small,
.prayerboard-content .standard-element-tiny,
.form-table .standard-element-tiny,
.pba-content-type-editor .standard-element-tiny,
.prayerboard-content .standard-element-textarea,
.form-table .standard-element-textarea,
.pba-content-type-editor .standard-element-textarea {
    height: var(--space-8) !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    vertical-align: middle !important;
    transition: border-color 0.15s ease-in-out !important;
}

/* Shared inline SVG logo base */
.pba-logo {
  width: 150px;
  height: auto;
  display: inline-block;
  color: var(--pba-accent-color);
}

/* Context-specific logo sizes */

.pba-logo--header {
  width: 200px;
  color: var(--pba-accent-color);
}

.pba-logo--dashboard {
  width: 200px;
  margin: 20px;
  color: var(--pba-accent-color);
}

/* Color preset select: placeholder text uses accent color */
#color_preset_select.pba-preset-placeholder {
    color: var(--pba-accent-color) !important;
}

/* Color preset custom dropdown (trigger + list with 4 swatches) */
.pba-color-preset-dropdown {
    position: relative;
    display: inline-block;
    vertical-align: middle;
}
.pba-color-preset-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0;
    width: 280px !important;
    min-height: 34px;
    /* Reduce left inset so swatches sit flush */
    padding: 6px 10px 6px 6px;
    text-align: left;
    background: #fff;
    border: 1px solid var(--border-medium, #8c8f94);
    border-radius: 4px;
    font-size: 14px;
    color: #1d2327;
    cursor: pointer;
    box-sizing: border-box;
}

/* Keep label spacing without adding gaps between swatches */
.pba-color-preset-trigger-label {
    padding-left: 10px;
}
.pba-color-preset-trigger:hover {
    border-color: var(--border-dark, #1d2327);
}
.pba-color-preset-trigger:focus {
    outline: none;
    border-color: var(--pba-accent-color);
    box-shadow: 0 0 0 1px var(--pba-accent-color);
}
.pba-color-preset-trigger-swatches {
    display: inline-flex;
    gap: 0;
    flex-shrink: 0;
    /* Kill flex-item whitespace text nodes between swatches */
    font-size: 0;
    line-height: 0;
}
.pba-color-preset-trigger .pba-preset-swatch {
    width: 14px;
    height: 14px;
    border-radius: 0px;
    margin: 0;
    font-size: 14px;
}
.pba-color-preset-trigger .pba-preset-swatch--empty {
    background: #e0e0e0;
}
.pba-color-preset-trigger-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pba-color-preset-trigger-chevron {
    flex-shrink: 0;
    color: #50575e;
    font-size: 12px;
}
.pba-color-preset-dropdown-panel {
    position: absolute;
    bottom: 100%;
    left: 0;
    z-index: 100100;
    min-width: 100%;
    max-height: 450px; /* ~6 visible rows; scroll for more */
    overflow-x: hidden;
    overflow-y: auto;
    margin-bottom: 2px;
    border: 1px solid var(--border-medium, #8c8f94);
    border-radius: 4px;
    background: #fff;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.12);
}
/* When rendered in body (portal) to escape overflow clipping - opens above trigger */
.pba-color-preset-dropdown-panel--portal {
    position: fixed !important;
    margin-bottom: 0;
    z-index: 100200;
    max-height: calc(100vh - 16px);
    /* Override base rule (bottom:100%) so JS top/left works */
    bottom: auto !important;
}
.pba-color-preset-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 5px;
    font-size: 14px;
    color: #1d2327;
    cursor: pointer;
    border: none;
    background: transparent;
    width: 100%;
    text-align: left;
}
.pba-color-preset-option:hover:not(.pba-color-preset-option--header) {
    background: #f0f0f1;
}
.pba-color-preset-option--header {
    cursor: default;
    color: #646970;
    font-style: italic;
}
.pba-color-preset-option .pba-preset-swatches {
    display: inline-flex;
    gap: 0px;
    flex-shrink: 0;
    /* Kill flex-item whitespace text nodes between swatches */
    font-size: 0;
    line-height: 0;
}
.pba-color-preset-option .pba-preset-swatch {
    width: 16px;
    height: 16px;
    /* border-radius: 2px; */
    /* border: 1px solid rgba(0,0,0,0.12); */
    font-size: 14px;
}
.pba-color-preset-option .pba-preset-swatch--empty {
    background: #e0e0e0;
}
.pba-preset-option-label {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.standard-element-xxlarge {
  width: 690px !important;
}

.standard-element-xlarge {
    width: 550px !important;
}

.standard-element-large {
    width: 450px !important;
}

.standard-element-medium {
    width: 260px !important;
}

.standard-element-normal {
  width: 200px !important;
}

.standard-element-small {
    width: 120px !important;
}

.standard-element-tiny {
    width: 90px !important;
}

.standard-element-textarea {
    height: auto !important; /* Override the base height for textareas */
    min-height: 200px !important;
    width: 100% !important;
    resize: vertical !important;
    padding: 8px !important;
}

/* Content tab editor: description is two rows only (not the global textarea min-height) */
.pba-content-type-editor textarea.pba-content-description-textarea.standard-element-textarea {
    min-height: 0 !important;
    height: auto !important;
    resize: none !important;
    overflow-y: auto !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
}

.pba-content-type-editor .pba-content-char-remaining {
    margin-top: 6px;
    font-size: 12px;
    color: #646970;
    text-align: right;
}

/* Code editor textarea - IDE-like appearance with dark theme */
.standard-element-code-editor {
    resize: both !important;
    min-height: 620px !important;
    max-height: 620px !important;
    width: 100% !important;
    font-family: 'Courier New', 'Monaco', 'Menlo', 'Consolas', monospace !important;
    font-size: 11px !important;
    line-height: 1.6 !important;
    background-color: #1f1f1f;
    color: #b8e5ff; /* Light text color */
    border: 1px solid var(--border-medium) !important;
    border-radius: 4px !important;
    padding: 12px !important;
    tab-size: 4 !important;
    white-space: pre !important;
    overflow-wrap: normal !important;
    overflow-x: auto !important;
}

.standard-element-code-editor:focus {
    outline: none !important;
    border-color: var(--pba-accent-color) !important;
    box-shadow: 0 0 0 2px rgba(80, 60, 237, 0.2) !important; /* Accent color with opacity */
}

.standard-element-code-editor::placeholder {
    color: #6a6a6a !important; /* Muted placeholder text */
}

/* Focus states for all form controls */
.form-control:focus,
.standard-element-xxlarge:focus,
.standard-element-xlarge:focus,
.standard-element-large:focus,
.standard-element-medium:focus,
.standard-element-normal:focus,
.standard-element-small:focus,
.standard-element-tiny:focus,
.standard-element-textarea:focus {
    border-color: var(--pba-accent-color) !important;
    outline: 2px solid transparent;
    box-shadow: 0 0 0 1px var(--pba-accent-color);
}

/* Hover states for all form controls */
.form-control:hover,
.standard-element-xxlarge:hover,
.standard-element-xlarge:hover,
.standard-element-large:hover,
.standard-element-medium:hover,
.standard-element-normal:hover,
.standard-element-small:hover,
.standard-element-tiny:hover,
.standard-element-textarea:hover {
    border-color: var(--pba-accent-color) !important;
}

/* URL Link Styling */
.pba-url-link {
    display: inline-block !important;
    text-decoration: none !important;
    color: inherit !important;
    cursor: pointer !important;
    padding: 8px 12px !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 4px !important;
    background: #fff !important;
}

.pba-url-link:hover {
    border-color: var(--pba-accent-color) !important;
    color: var(--pba-accent-color) !important;
}

/* Plugin action links */
.pba-plugin-action-link {
    font-weight: bold !important;
    color: var(--pba-accent-color) !important;
    text-decoration: none !important;
}

/* Fix label column width to 120px for all tabs */
.form-table th {
    padding: 0px !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    vertical-align: middle !important;
}

/* Admin form table cells styling */
.prayerboard-content .form-table td {
    padding: var(--space-1) !important;
    vertical-align: middle !important;
}

/* Ensure consistent span behavior for form elements */
.prayerboard-content .form-table td span {
    display: inline-block;
    vertical-align: middle;
}

/* Form validation styles */
.form-table input.error {
  border-color: #d63638 !important;
}

/* Read-only field styles */
.form-table input[readonly] {
  background-color: #f0f0f0 !important;
  color: #666 !important;
  cursor: not-allowed !important;
  border-color: var(--border-light) !important;
}

.form-table input[readonly]:focus {
  border-color: var(--border-light) !important;
}

/* Editable city field with accent border */
.form-table input.city-field-editable {
  border: 2px solid var(--pba-accent-color) !important;
  background-color: #fff !important;
  color: #2c3338 !important;
  cursor: text !important;
}

.form-table input.city-field-editable:focus {
  border-color: var(--pba-accent-color) !important;
  box-shadow: 0 0 0 1px var(--pba-accent-color);
  outline: none;
}

/* API key row: vertical alignment of input and button */
.pba-api-key-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}


.city-result {
    transition: background-color 0.15s ease-in-out;
    padding: var(--space-2);
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.city-result:hover {
    background-color: #f0f0f0 !important;
}

.city-result:last-child {
    border-bottom: none !important;
}


#get_coordinates_btn {
    background: #f0f0f1;
    color: #2c3338;
    transition: all 0.15s ease-in-out;
}

#get_coordinates_btn:hover {
    background: #dcdcde;
}

#get_coordinates_btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Notice styles for messages */
.notice {
    margin: var(--space-5) 0;
    padding: var(--space-4);
    border-left: 4px solid;
    background: #fff;
}

/* Inline helper utilities */
.pba-inline-muted { color: #666 !important; }
.pba-inline-error { color: var(--pba-error-bg) !important; }
.pba-fw-bold { font-weight: bold !important; }
.pba-m-0 { margin: 0 !important; }
.pba-mt-5 { margin-top: var(--space-1) !important; }
.pba-mt-10 { margin-top: var(--space-3) !important; }
.pba-mt-20 { margin-top: var(--space-6) !important; }
.pba-mb-5 { margin-bottom: var(--space-1) !important; }
.pba-mb-10 { margin-bottom: var(--space-3) !important; }
.pba-ml-10 { margin-left: var(--space-3) !important; }
.pba-p-10 { padding: var(--space-3) !important; }
.pba-pl-20 { padding-left: var(--space-6) !important; }
.pba-list-reset { margin: 0 !important; padding-left: 0 !important; list-style: none !important; }

.notice-success {
    border-left-color: var(--pba-success-bg);
}

.notice-error {
    border-left-color: var(--pba-error-bg);
}

.notice-warning {
    border-left-color: var(--pba-warning-bg);
}

.notice-info {
    border-left-color: var(--pba-info-bg);
}

/* Parameter table styling for consistent column widths */
.parameter-table {
  border-collapse: collapse;
  width: 100%;
}

.parameter-table th:nth-child(1) { width: 20%; } /* Parameter */
.parameter-table th:nth-child(2) { width: 25%; } /* Accepted Values */
.parameter-table th:nth-child(3) { width: 15%; } /* Default */
.parameter-table th:nth-child(4) { width: 40%; } /* Description */

/* Shortcode table styling for consistent appearance */
.shortcode-table {
  border-collapse: collapse;
  width: 100%;
}

.shortcode-table th:nth-child(1) { width: 5%; } /* Copy button column - narrower */
.shortcode-table th:nth-child(2) { width: 55%; } /* Shortcode */
.shortcode-table th:nth-child(3) { width: 25%; } /* Description */
.shortcode-table th:nth-child(4) { width: 15%; } /* Example */

/* ========================================
   COPY BUTTON STYLES
   ======================================== */

.copy-btn {
  background: #f9f9f9;
  border: 1px solid var(--border-dark);
  border-radius: 4px;
  padding: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #333;
  transition: all 0.2s ease;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: var(--space-2);
  vertical-align: middle;
  position: relative;
  z-index: 10;
}

/* Table-specific copy button (centered, no margin) */
.shortcode-table td:nth-child(1) {
  text-align: center !important;
  vertical-align: middle !important;
}

.shortcode-table .copy-btn {
  display: inline-flex !important;
  margin: 0 auto !important;
  justify-content: center !important;
}

/* Parameter table copy button (centered, no margin) */
.parameter-table .copy-btn {
  display: flex;
  margin: 0 auto;
  margin-right: 0;
}

/* Common hover/active/copied states */
.copy-btn:hover {
  background: #e0e0e0 !important;
  border-color: var(--border-dark) !important;
  transform: translateY(-1px) !important;
}

.copy-btn:active {
  background: #d0d0d0 !important;
}

.copy-btn.copied {
  background: #4CAF50 !important;
  color: white !important;
  border-color: #4CAF50 !important;
}

.copy-btn.copied::after {
  content: "✓" !important;
  font-weight: bold !important;
  display: inline-block !important;
  color: white !important;
  font-size: 16px !important;
}

/* ========================================
   BUTTON BASE STYLES
   ======================================== */

/* Base button primitives - shared across all button variants */
.btn,
.button-save,
.button-standard,
.button-delete,
.button-inert {
  cursor: pointer;
}

/* ========================================
   UNIFIED SAVE BUTTON STYLES
   ======================================== */

/* Same dimensions as .button-standard so adding this class never resizes the button */
.button-save {
  background: #ffffff;
  border: 1px solid var(--pba-accent-color);
  color: var(--pba-accent-color);
  padding: var(--space-2) var(--space-4);
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  position: relative;
  box-sizing: border-box;
  min-width: unset;
  width: auto;
  height: auto;
}

/* Save button - Changed state (when data has been modified) */
.button-save.changed {
  background: var(--pba-accent-color);
  border-color: #ffffff;
  color: #ffffff;
}


/* Save button - Saved state (after successful save) */
.button-save.saved {
  background: #4CAF50;
  border-color: #4CAF50;
  color: #ededed;
}

/* Save button - Error state */
.button-save.is-error {
  background: var(--pba-error-bg);
  border-color: var(--pba-error-bg);
  color: #ededed;
}

/* Save button - Disabled state */
.button-save:disabled {
  background: var(--border-very-light);
  border-color: var(--border-dark);
  color: #999;
  cursor: not-allowed;
  transform: none;
}

/* Save button icon styles */
.button-save .save-icon,
.button-save .tick-icon {
  width: 28px;
  height: 28px;
  display: inline-block;
}

.button-save .tick-icon {
  display: none;
}

.button-save.saved .save-icon {
  display: none;
}

.button-save.saved .tick-icon {
  display: inline-block;
}

/* Error message below save button */
.save-error-message {
  color: var(--pba-error-bg);
  font-size: 14px;
  margin-top: var(--space-2);
  display: none;
  position: absolute; /* prevent layout shift on error */
  right: 0;           /* align with save button on the right */
  top: 100%;          /* place just below the row */
  white-space: nowrap;
}

.button-save.is-error + .save-error-message {
  display: block;
}

/* Unified save button container */
.unified-save-container {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-4);
  margin-bottom: var(--space-4);
  align-items: center;
  flex-direction: row;
  position: relative;
  background: transparent;
}

/* Save button text styling */
.save-text {
  margin-left: var(--space-2);
}

/* Color picker container */
.color-picker-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* ========================================
   COLOR PICKER STYLES
   ======================================== */

.simple-color-picker {
  width: var(--space-8);
  height: var(--space-8);
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  padding: 0;
  background: none;
  transition: all 0.2s ease;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.simple-color-picker:hover {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.simple-color-picker:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.simple-color-picker:focus-visible {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Period input box styling */

/* Color hex display input */
.color-hex-display {
  width: 250px;
  height: 40px;
  border: 1px solid var(--border-dark) !important;
  border-radius: var(--space-2);
  padding: 0 var(--space-4);
  font-family: 'Courier New', monospace;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: #fff;
  transition: all 0.2s ease;
}

.color-hex-display:hover {
  border-color: var(--pba-accent-color);
}

.color-hex-display:focus {
  border-color: var(--pba-accent-color);
  outline: none;
}

/* ========================================
   COPY BUTTON STYLES AND SVG ICONS
   ======================================== */

/* Custom SVG copy icon for standalone buttons */
.copy-btn::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z' fill='%23333'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.copy-btn.copied::before {
  display: none;
}

/* Plugin admin page headings */
.prayerboard-content h1,
.prayerboard-content h2,
.prayerboard-content h3,
.prayerboard-content h4,
.prayerboard-content h5,
.prayerboard-content h6 {
  color: var(--pba-accent-color);
  font-weight: 600;
  margin-top: 0;
}

/* Ensure emphasized words in headings appear bolder */
.prayerboard-content h1 strong,
.prayerboard-content h2 strong,
.prayerboard-content h3 strong {
    font-weight: 700 !important;
}

/* Button Controls Container */
.button-controls {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  gap: var(--space-3);
  display: flex;
}

/* Button Standard Styling */
.button-standard {
  background: var(--pba-accent-color) !important;
  border: 1px solid var(--pba-accent-color) !important;
  color: white !important;
  padding: var(--space-2) var(--space-4);
  min-width: 40px;
  min-height: 40px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
  height: auto;
  text-decoration: none !important;
  display: inline-block;
}

.pba-edit-preset-btn {
  margin-left: var(--space-3);
  vertical-align: middle;
}

.button-standard:hover {
  background: var(--pba-accent-color-hover) !important;
  border-color: var(--pba-accent-color) !important;
  color: #ffffff !important;
}

/* Button Delete Styling */
.button-delete {
  background: none;
  border: 1px solid var(--pba-error-bg);
  color: var(--pba-error-bg) !important;
  padding: var(--space-2) var(--space-4);
  min-width: 40px;
  min-height: 40px;
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  transition: all 0.2s ease;
  height: auto;
  text-decoration: none !important;
  display: inline-block;
}

.button-delete::before {
  content: "-";
  color: var(--pba-error-bg);
}

.button-delete:hover {
  background: var(--pba-error-bg) !important;
  border-color: var(--pba-error-bg) !important;
  color: #ffffff !important;
}

.button-delete:hover::before {
  color: #ffffff;
}

/* Button Inert Styling */
.button-inert {
  background: white !important;
  border: 1px solid var(--pba-accent-color) !important;
  color: var(--pba-accent-color) !important;
  padding: var(--space-2) var(--space-4);
  min-width: 40px;
  min-height: 40px;
  border-radius: 3px;
  font-weight: 500;
  font-size: 14px;
  cursor: pointer;
  height: auto;
}

.button-inert:hover {
  background: var(--pba-accent-color) !important;
  border-color: var(--pba-accent-color) !important;
  color: #ffffff !important;
}

.pba-file-input-hidden {
  display: none;
}

/* ========================================
   SHORTCODES TAB STYLES
   ======================================== */

/* Filter bar - filter buttons at top (shortcodes + settings tabs) */
.pba-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--border-medium, #ddd);
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pba-admin-bg, #f0f0f1);
}
.pba-filter-bar .button-inert.active {
  background: var(--pba-accent-color) !important;
  border-color: var(--pba-accent-color) !important;
  color: #ffffff !important;
}

/* Settings tab - single column layout: only the selected filter section shows at full width */
.prayboard-settings .standard-container {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: var(--space-6) !important;
}

.prayboard-settings .standard-container .standard-column[data-settings-filter] {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* Force hidden sections to stay hidden - only the active filter section should be visible */
.prayboard-settings .standard-column[data-settings-filter].pba-settings-section-hidden {
  display: none !important;
}

/* Content tab: one visible "type" = .pba-content-type-panel (main + duration standard-containers stacked inside) */
.prayboard-content-tab {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-6) !important;
}

.prayboard-content-tab .pba-content-type-panel {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: var(--space-6) !important;
  width: 100% !important;
}

.prayboard-content-tab .pba-content-type-panel.pba-settings-section-hidden {
  display: none !important;
}

.prayboard-content-tab .pba-content-type-panel .standard-container {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  gap: var(--space-6) !important;
  width: 100% !important;
}

.prayboard-content-tab .pba-content-type-panel .standard-container .standard-column {
  flex: 1 1 100% !important;
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
}

/* API section: 1/1 layout - API key and Test API stack vertically */
.prayboard-settings [data-settings-filter="api"] .pba-api-tab-columns {
  flex-direction: column !important;
  gap: var(--space-6) !important; /* Reduced gap between API and Test API sections */
}
.prayboard-settings [data-settings-filter="api"] .pba-api-tab-columns .standard-column {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* Beta tab - plain block layout, no flex: three block divs toggled with display block/none */
.prayerboard-content .prayboard-beta {
  display: block !important;
  min-height: 200px !important;
}
.prayboard-beta .pba-beta-panel {
  display: block !important;
  width: 100% !important;
  min-height: 200px !important;
}
.prayboard-beta .pba-beta-panel.pba-beta-hidden {
  display: none !important;
}

.prayboard-shortcodes table {
  margin-bottom: var(--space-7);
  border-collapse: collapse;
  width: 100%;
}

.prayboard-shortcodes th, 
.prayboard-shortcodes td {
  padding: 8px;
  border: 1px solid var(--border-dark);
}

.prayboard-shortcodes th {
  background-color: #f9f9f9;
  font-weight: bold;
}

/* Code styling for shortcodes */
.prayboard-shortcodes code {
  background: #f9f9f9;
  padding: 8px 8px;
  border-radius: 3px;
  border: 1px solid var(--border-dark);
  line-height: 1.5;
  display: inline-block;
  word-break: break-word;
}

/* Remove styling from parameter values only */
.prayboard-shortcodes code.parameter-value {
  background: none;
  padding: 0;
  border-radius: 0;
  border: none;
}

/* ========================================
   STANDALONE COPY ELEMENTS - UNIFIED STYLING
   ======================================== */

.standalone-copy-container {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-3) 0;
}

/* Standalone copy code elements - make them look like input fields */
.standalone-copy-container code,
div.standalone-copy-container code {
  background: #f9f9f9 !important;
  padding: calc(var(--space-2) - 2px) var(--space-3) !important;
  border-radius: 4px !important;
  border: 1px solid var(--border-dark) !important;
  font-size: 14px !important;
  display: inline-block !important;
  width: auto !important;
  flex: none !important;
}

/* Code elements in tables - ensure proper line spacing when wrapping */
.shortcode-table code,
.parameter-table code {
  line-height: 1.5 !important;
  word-break: break-word;
  display: inline-block;
}

/* Remove styling from Description and Example columns in tables */
.parameter-table td:nth-child(4) code,
.shortcode-table td:nth-child(3) code,
.shortcode-table td:nth-child(4) code {
  background: none;
  padding: 0;
  border-radius: 0;
  border: none;
  line-height: 1.5;
  word-break: break-word;
}

/* ========================================
   MARQUEE ADMIN STYLES
   ======================================== */

/* Marquee Controls Section */
.marquee-controls {
  margin-top: var(--space-8);
  margin-bottom: var(--space-6);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Select Marquee row: vertically center label, select, and buttons */
.marquee-controls .form-table tr {
  vertical-align: middle;
}

.marquee-controls .form-table th {
  vertical-align: middle;
}

.marquee-controls .form-table td {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  vertical-align: middle;
}

/* Message Rows */
.marquee-message-row {
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  width: 100%;
  gap: var(--space-2);
  padding: var(--space-3);
  transition:
     border-color 0.18s ease,
     box-shadow 0.18s ease,
     background-color 0.18s ease;
  border: 1px solid var(--border-medium);
  border-radius: 8px;
  position: relative;
}

.marquee-message-row:hover {
  border-color: var(--border-medium);
  background: var(--border-very-light);
}

.marquee-message-row.dragging {
  opacity: 0.7;
  transform: rotate(1deg);
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* Insertion divider */
.marquee-insertion-divider {
  height: 3px;
  background: var(--pba-accent-color);
  margin: 4px 0;
  border-radius: 2px;
  opacity: 0;
  transform: scaleX(0);
  transition: all 0.2s ease;
}

.marquee-insertion-divider.show {
  opacity: 1;
  transform: scaleX(1);
}

.marquee-message-number {
  margin-left: var(--space-5);
  font-weight: bold;
  min-width: 10px;
  flex-shrink: 0;
  color: #333;
}

.marquee-message-row input {
  user-select: text;
}

/* Shortcode Section */
.marquee-copy-instruction {
  color: #666;
  font-size: 13px;
  margin: 5px 0 0 0;
}

/* No Group Message */
.marquee-no-group-message {
  margin-top: 20px;
  color: #666;
  font-style: italic;
}

/* New Group Form */
.marquee-new-group-form {
  display: none;
  margin: var(--space-6) 0;
  padding: var(--space-6);
  border: 1px solid var(--border-medium);
  background: #f9f9f9;
  border-radius: 4px;
}

.marquee-message-input {
  width: 690px;
  height: var(--space-8);
  border: 0px none !important;
  background-color: #ffffff;
  color: #333333;
  font-size: 14px;
  font-family: inherit;
  vertical-align: middle;
}

/* Responsive Design for Marquee Elements */
@media (max-width: 768px) {
  .marquee-controls {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
  }
  
  .marquee-message-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }
  
  .marquee-message-number {
    min-width: auto;
    margin-right: 0;
  }
  
}

/* ========================================
   SAVE MODAL STYLES - MAXIMUM SPECIFICITY
   ======================================== */

html body.wp-admin #pba-cache-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0,0,0,0.2) !important;
  z-index: 999999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

html body.wp-admin #pba-cache-modal .modal-content {
  background: rgba(255,255,255,0.8) !important;
  padding: 5% 10% !important;
  border-radius: 0px !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3) !important;
  max-width: 300px !important;
  text-align: center !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  margin: 0 !important;
  border: none !important;
  outline: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

html body.wp-admin #pba-cache-modal .modal-text {
  margin: 0 !important;
  color: #666 !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important;
}

/* Override any WordPress core modal styles */
html body.wp-admin #pba-cache-modal * {
  box-sizing: border-box !important;
}

html body.wp-admin #pba-cache-modal h2 {
  color: #666 !important;
  font-size: 24px !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ========================================
   CALENDAR MODAL STYLES
   ======================================== */

.pba-calendar-type-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
}

html body #pba-calendar-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
}

html body #pba-calendar-modal .pba-calendar-modal-content {
  background: #ffffff;
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

html body #pba-calendar-modal .pba-calendar-modal-header {
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
  border-bottom: 1px solid var(--border-light);
  flex-shrink: 0;
}

html body #pba-calendar-modal .pba-calendar-modal-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: move;
}

html body #pba-calendar-modal .pba-calendar-modal-header h2 {
  margin: 0;
  font-size: 18px;
}

html body #pba-calendar-modal .pba-calendar-modal-header .pba-calendar-export-buttons {
  margin: 0 16px 12px;
  padding: 0;
}

html body #pba-calendar-modal .pba-calendar-modal-close {
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
}

html body #pba-calendar-modal .pba-calendar-modal-body {
  padding: 12px 16px 16px;
  overflow-y: auto;
}

.pba-calendar-export-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.pba-calendar-export-buttons .button {
  margin: 0;
}

.pba-calendar-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
}

.pba-calendar-table th,
.pba-calendar-table td {
  padding: 6px 8px;
  border: 1px solid var(--border-light);
  text-align: left;
  white-space: nowrap;
}

.pba-calendar-table .pba-calendar-col-date {
  width: 140px;
  max-width: 140px;
}

.pba-calendar-table .pba-calendar-col-time {
  width: 78px;
  min-width: 75px;
}

.pba-calendar-table th {
  background: var(--border-very-light);
  font-weight: 600;
}

.pba-calendar-table tbody tr:nth-child(even) {
  background: #ededed;
}

/* Clean table (horizontal rules, grey thead, zebra) — public embed + print */
.pba-calendar-modal-body .pba-calendar-table.pba-calendar-table--clean th,
.pba-calendar-modal-body .pba-calendar-table.pba-calendar-table--clean td,
#pba-calendar-modal .pba-calendar-modal-body table.pba-calendar-table--clean th,
#pba-calendar-modal .pba-calendar-modal-body table.pba-calendar-table--clean td {
  padding: 8px 10px !important;
  text-align: left;
  white-space: nowrap;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #d0d0d0 !important;
  background-clip: padding-box;
}

.pba-calendar-modal-body .pba-calendar-table.pba-calendar-table--clean thead th,
#pba-calendar-modal .pba-calendar-modal-body table.pba-calendar-table--clean thead th {
  background-color: #e8e8e8 !important;
  font-weight: 600 !important;
  color: #1d2327 !important;
  border-bottom: 1px solid #c8c8c8 !important;
}

.pba-calendar-modal-body .pba-calendar-table.pba-calendar-table--clean tbody tr:nth-child(odd) td,
#pba-calendar-modal .pba-calendar-modal-body table.pba-calendar-table--clean tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}

.pba-calendar-modal-body .pba-calendar-table.pba-calendar-table--clean tbody tr:nth-child(even) td,
#pba-calendar-modal .pba-calendar-modal-body table.pba-calendar-table--clean tbody tr:nth-child(even) td {
  background-color: #ededed !important;
}

/* Public /prayer-calendar: embedded modal (not full-screen overlay) */
html body #pba-calendar-modal.pba-calendar-modal-embed {
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  height: auto !important;
  background: transparent !important;
  z-index: auto !important;
  display: block !important;
  align-items: unset !important;
  justify-content: unset !important;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-content {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
  max-height: none;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
  color: #1d2327;
}

/* Public /prayer-calendar: avoid horizontal scroll by allowing wrapping */
html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-body table.pba-calendar-table--clean th,
html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-body table.pba-calendar-table--clean td {
  white-space: normal;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header {
  position: relative !important;
  top: auto !important;
  border-bottom: none !important;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header-top {
  justify-content: center !important;
  cursor: default !important;
  width: 100%;
  box-sizing: border-box;
  padding: 16px 16px 12px;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header-text {
  width: 100%;
  max-width: 100%;
  text-align: center;
  box-sizing: border-box;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header h2.pba-calendar-modal-title,
html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header h2 {
  margin: 0 auto !important;
  font-size: 18px;
  color: #1d2327;
  text-align: center !important;
  width: 100%;
  max-width: 100%;
  font-weight: 600;
  display: block;
  box-sizing: border-box;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header h3.pba-calendar-modal-subtitle {
  margin: 0.4rem auto 0 !important;
  font-size: 1rem;
  font-weight: 600;
  color: #1d2327;
  text-align: center !important;
  line-height: 1.35;
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-header h5.pba-calendar-modal-hint {
  margin: 0.55rem auto 0 !important;
  font-size: 0.8125rem;
  font-weight: 400;
  color: #50575e;
  text-align: center !important;
  line-height: 1.45;
  width: 100%;
  max-width: 100%;
  display: block;
  box-sizing: border-box;
}

html body #pba-calendar-modal.pba-calendar-modal-embed .pba-calendar-modal-body {
  padding: 8px 16px 16px;
  overflow-x: auto;
}

.pba-calendar-preview {
  margin-top: 0.5rem;
}

.pba-calendar-preview-stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: stretch;
}

.pba-calendar-preview .pba-calendar-modal-body table.pba-calendar-table--clean th,
.pba-calendar-preview .pba-calendar-modal-body table.pba-calendar-table--clean td {
  padding: 8px 10px !important;
  text-align: left;
  white-space: nowrap;
  border-left: none !important;
  border-right: none !important;
  border-top: none !important;
  border-bottom: 1px solid #d0d0d0 !important;
  background-clip: padding-box;
}

.pba-calendar-preview .pba-calendar-modal-body table.pba-calendar-table--clean thead th {
  background-color: #e8e8e8 !important;
  font-weight: 600 !important;
  color: #1d2327 !important;
  border-bottom: 1px solid #c8c8c8 !important;
}

.pba-calendar-preview .pba-calendar-modal-body table.pba-calendar-table--clean tbody tr:nth-child(odd) td {
  background-color: #ffffff !important;
}

.pba-calendar-preview .pba-calendar-modal-body table.pba-calendar-table--clean tbody tr:nth-child(even) td {
  background-color: #ededed !important;
}

.pba-calendar-export-toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

/* Standalone /prayer-calendar page (body not wp-admin) */
body.pba-calendar-page {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: #fff;
  color: #000;
  line-height: 1.5;
}

.pba-calendar-page-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.pba-calendar-page-header {
  margin-bottom: 2rem;
  text-align: center;
}

body.pba-calendar-page .pba-calendar-logo {
  width: 300px;
  margin: 0 auto 12px;
  color: var(--pba-accent-color);
}

body.pba-calendar-page .pba-calendar-logo .pba-logo {
  width: 100%;
  height: auto;
  display: block;
}

.pba-calendar-page-title {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  color: #222222;
}

.pba-calendar-page-meta {
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
  color: #222222;
}

.pba-calendar-page-notice {
  padding: 1rem;
  background: rgba(255, 80, 80, 0.12);
  border-radius: 8px;
}

body.pba-calendar-page .pba-calendar-panel {
  margin: 0 auto 1.5rem;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 2rem;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  color: #1d2327;
}

body.pba-calendar-page .pba-calendar-panel--hidden {
  display: none !important;
}

body.pba-calendar-page .pba-calendar-panel-heading {
  margin: 0 0 1.25rem;
  font-size: 1.2rem;
  font-weight: 600;
}

body.pba-calendar-page .pba-calendar-panel--build {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

body.pba-calendar-page .pba-calendar-athan-toggle-row {
  margin-bottom: 0;
}

body.pba-calendar-page .pba-calendar-generate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

body.pba-calendar-page .pba-calendar-generate-divider {
  width: 100%;
  margin: 2rem 0;
  border: 0;
  border-top: 1px solid var(--border-medium);
}

body.pba-calendar-page #pba_public_calendar_generate {
  width: 150px;
  box-sizing: border-box;
}

body.pba-calendar-page .pba-calendar-preview-actions {
  margin: 0 0 1rem;
}

body.pba-calendar-page .pba-calendar-preview-status {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

body.pba-calendar-page .pba-calendar-generate-warning-wrap {
  width: 100%;
  box-sizing: border-box;
}

body.pba-calendar-page .pba-calendar-generate-warning-wrap .pba-warning-box {
  font-size: 0.875rem;
  line-height: 1.45;
}

body.pba-calendar-page .pba-calendar-selects {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.5rem;
  align-items: flex-end;
}

body.pba-calendar-page .pba-calendar-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 10rem;
}

body.pba-calendar-page .pba-calendar-label {
  font-size: 0.875rem;
  font-weight: 500;
}

body.pba-calendar-page .pba-calendar-select {
  padding: 0.5rem 0.25rem;
  border-radius: 4px;
  border: 1px solid var(--border-medium);
  background: fff;
  color: #000000;
  font-size: 1rem;
  max-width: 100%;
}

body.pba-calendar-page .pba-calendar-loading {
  margin: 0.75rem 0 0;
  font-size: 0.95rem;
  color: var(--pba-accent-color);
}

body.pba-calendar-page .pba-calendar-error {
  margin: 0;
  padding: 0.75rem 1rem;
  background: rgba(214, 54, 56, 0.12);
  border-radius: 6px;
  color: #8a2424;
  font-size: 0.95rem;
}

body.pba-calendar-page .pba-calendar-type-toggle .button-inert.active {
  background: var(--pba-accent-color) !important;
  border-color: var(--pba-accent-color) !important;
  color: #ffffff !important;
}

/* Print window root (optional) */
.pba-calendar-print-root #pba-calendar-modal,
body > #pba-calendar-modal {
  position: static !important;
  width: auto !important;
  height: auto !important;
  background: transparent !important;
  display: block !important;
}

/* Font Awesome status / inline icons */
.pba-ui-icon--status {
  font-size: 18px;
  vertical-align: middle;
  margin-right: 6px;
}

.pba-icon-info {
  color: var(--pba-info-bg);
}

.pba-icon-success {
  color: var(--pba-success-bg);
}

.pba-icon-danger {
  color: var(--pba-danger-bg);
}

.pba-icon-warning {
  color: var(--pba-warning-bg);
}

.pba-icon-gear {
  color: var(--pba-info-bg);
}

.pba-icon-refresh {
  color: var(--pba-accent-color);
}

/* Info/status boxes */
.pba-info-box {
  background: color-mix(in srgb, var(--pba-info-bg) 5%, white);
  border: 1px solid color-mix(in srgb, var(--pba-info-bg) 20%, white);
  color: var(--pba-info-bg);
  padding: var(--space-5);
  border-radius: 4px;
}

.pba-success-box {
  background: color-mix(in srgb, var(--pba-success-bg) 5%, white);
  border: 1px solid color-mix(in srgb, var(--pba-success-bg) 20%, white);
  color: var(--pba-success-bg);
  padding: var(--space-5);
  border-radius: 4px;
}

.pba-danger-box {
  background: color-mix(in srgb, var(--pba-danger-bg) 5%, white);
  border: 1px solid color-mix(in srgb, var(--pba-danger-bg) 20%, white);
  color: var(--pba-danger-bg);
  padding: var(--space-5);
  border-radius: 4px;
}

.pba-warning-box {
  background: color-mix(in srgb, var(--pba-warning-bg) 5%, white);
  border: 1px solid color-mix(in srgb, var(--pba-warning-bg) 20%, white);
  color: var(--pba-warning-bg);
  padding: var(--space-5);
  border-radius: 4px;
}

.pba-error-box {
  background: color-mix(in srgb, var(--pba-danger-bg) 5%, white);
  border: 1px solid color-mix(in srgb, var(--pba-danger-bg) 20%, white);
  color: var(--pba-danger-bg);
  padding: var(--space-5);
  border-radius: 4px;
}

/* Spacing for iqamah spans */
#fajr-offset, #fajr-fixed,
#zuhr-offset, #zuhr-fixed,
#asr-offset, #asr-fixed,
#maghrib-offset, #maghrib-fixed,
#isha-offset, #isha-fixed {
  margin-left: var(--space-3) !important;
}

/*================================================================================================*/
/* DASHBOARD WIDGET STYLES */
/*================================================================================================*/

.prayerboard-dashboard-widget h1 {
    font-size: 1.5em !important;
    margin: 10px 0 !important;
}

.prayerboard-dashboard-widget p {
    margin: 10px 0 !important;
}

.prayerboard-nav-links {
    text-align: center;
    margin-top: 20px;
    padding: 15px;
    background: #f3f3f3;
    border-radius: 6px;
    font-size: 13px;
    line-height: 1.8;
}

.prayerboard-nav-links a {
    color: var(--pba-accent-color);
    text-decoration: none;
    font-weight: 500;
    white-space: nowrap;
}

.prayerboard-nav-links a:hover {
    text-decoration: underline;
}

/* Widget styling classes */
.pba-widget-logo-container {
    text-align: center;
}

.pba-widget-logo {
    height: 64px;
    width: auto;
    display: inline-block;
}

/* Page title logo */
.prayerboard-page-title {
    margin: 0;
}

.prayerboard-page-logo {
    height: 64px;
    width: auto;
}

.pba-widget-title {
    text-align: center;
}

.pba-widget-title-link {
    text-decoration: none !important;
    color: inherit !important;
}

.pba-widget-subtitle {
    text-align: center;
}

.pba-widget-button-container {
    text-align: center;
}

.pba-widget-button {
    background-color: var(--pba-accent-color);
    border: 1px solid var(--pba-accent-color);
    color: #ffffff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.2s ease;
    display: inline-block;
    margin-top: var(--space-6);
}

.pba-widget-button:hover {
    background-color: var(--pba-accent-color-hover);
    border: 1px solid var(--pba-accent-color-hover);
    color: #ffffff;
    transform: translateY(-2px);
}

/* Remove borders and outlines from widget links */
.prayerboard-dashboard-widget a {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

.prayerboard-dashboard-widget a:focus,
.prayerboard-dashboard-widget a:active {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Ensure image links have no border */
.prayerboard-dashboard-widget a img {
    border: none !important;
    outline: none !important;
}

/* Remove any WordPress default link styling */
.prayerboard-dashboard-widget h1 a {
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.prayerboard-dashboard-widget h1 a:hover {
    text-decoration: none !important;
}

/* ========================================
   DASHBOARD LAYOUT AND WIDGET PANEL
   ======================================== */

/* Dashboard layout container */
.prayerboard-dashboard-layout {
    display: flex;
    gap: var(--space-6);
    align-items: flex-start;
}

/* Widget column (1/4 width) */
.prayerboard-dashboard-widget-column {
    flex: 0 0 33.33%;
    max-width: 33.33%;
}

/* Empty column (3/4 width) */
.prayerboard-dashboard-empty-column {
    flex: 0 0 75%;
    max-width: 75%;
}

/* WordPress dashboard widget panel styling */
.prayerboard-dashboard-widget-column .postbox {
    background: #fff;
    border: 1px solid var(--border-medium);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
    margin: 0 0 20px 0;
}

.prayerboard-dashboard-widget-column .postbox-header {
    border-bottom: 1px solid var(--border-medium);
    padding: 0;
    background: var(--border-very-light);
}

.prayerboard-dashboard-widget-column .postbox-header .hndle {
    margin: 0;
    padding: 12px 15px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: #1d2327;
    cursor: pointer;
    border: 0;
    background: transparent;
    box-shadow: none;
}

.prayerboard-dashboard-widget-column .postbox-header .hndle span {
    display: inline;
}

.prayerboard-dashboard-widget-column .postbox-header .handle-actions {
    float: right;
    margin: 0;
}

.prayerboard-dashboard-widget-column .postbox-header .handlediv {
    width: 36px;
    height: 36px;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: #50575e;
    text-align: center;
    line-height: 36px;
}

.prayerboard-dashboard-widget-column .postbox-header .handlediv:focus {
    outline: none;
    box-shadow: inset 0 0 0 1px #2271b1;
}

.prayerboard-dashboard-widget-column .postbox-header .toggle-indicator {
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #50575e;
}

.prayerboard-dashboard-widget-column .postbox-header .toggle-indicator:before {
    content: "\f077";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 16px;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.prayerboard-dashboard-widget-column .postbox.closed .postbox-header .toggle-indicator:before {
    content: "\f078";
}

.prayerboard-dashboard-widget-column .postbox .inside {
    margin: 13px 15px;
    padding: 0;
}

.prayerboard-dashboard-widget-column .postbox.closed .inside {
    display: none;
}

/* ========================================
   COLOR PRESETS MODAL STYLES
   ======================================== */

/* Coloris picker must appear above the modal overlay */
.clr-picker {
    z-index: 100001 !important;
}

/* Coloris: button has pointer-events:none so the input receives hover - set pointer on field and input */
.clr-field,
.clr-field input {
    cursor: pointer;
}

/* Coloris swatch: force perfect circle (equal width & height so round, not oval) */
.clr-field button {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.pba-color-preset-field {
    display: flex;
    align-items: center;
}
.pba-color-preset-field .clr-field {
    position: relative !important;
    display: block !important;
    width: 200px !important;
    height: var(--space-8) !important;
    min-height: var(--space-8) !important;
}

.pba-color-preset-field .pba-color-preset-input {
    height: 42px !important;
    margin: 0 !important;
    width: 200px !important;
    border: 1px solid var(--border-light) !important;
    border-radius: 50px !important;
    background: var(--border-very-light) !important;
}

.pba-color-preset-field .clr-field button {
    position: absolute !important;
    margin-right: 4px !important;
    margin-bottom: 0px !important;
    margin-top: 1px !important;
    width: 34px !important;
    height: 34px !important;
}

/* Color preset form: stacked labels, right-aligned, description in same row */
.pba-color-preset-form {
    margin-left: auto;
    max-width: 100%;
    width: fit-content;
}

.pba-color-preset-divider {
    border-bottom: 1px solid var(--border-light);
    margin: var(--space-6) 0;
}

.pba-color-preset-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: var(--space-4);
}

.pba-color-preset-row:last-child {
    margin-bottom: 0;
}

.pba-color-preset-row--preset {
    margin-bottom: 0;
}

.pba-color-preset-label {
    display: block;
    margin-bottom: var(--space-2);
    font-weight: 600;
}

.pba-color-preset-field-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    width: 100%;
}

.pba-color-preset-description {
    margin: 0;
    flex-shrink: 0;
    max-width: 280px;
    font-size: 0.9em;
    color: var(--text-muted, #666);
}

/* Color preset modal: center the action buttons row */
.pba-color-presets-modal .button-controls {
    justify-content: flex-end;
}

/* Modal overlay */
.pba-color-presets-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100000;
}

/* Modal content container */
.pba-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    padding: 0;
    border-radius: 4px;
    min-width: 400px;
}

/* Modal header */
.pba-modal-header {
    position: relative;
    padding: 20px 20px 0 20px;
}

.pba-modal-header h2 {
    margin-top: 0;
}

/* Modal body */
.pba-modal-body {
    padding: 0 20px 20px 20px;
}

/* Modal close button (shared: class + color-presets ID for legacy handlers) */
.pba-modal-close,
#pba-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    width: auto;
    height: auto;
    cursor: pointer;
    color: #333;
    z-index: 10;
}

.pba-modal-close:hover,
#pba-modal-close:hover {
    color: #000;
}

.pba-content-modal .pba-modal-close {
    top: 14px;
    right: 14px;
    margin: 0;
    font-size: 24px;
}

/* Validation error styling */
.pba-validation-error {
    border: 2px solid var(--pba-error-bg) !important;
    background-color: #fff5f5 !important;
}

.pba-validation-error:focus {
    border-color: var(--pba-error-bg) !important;
    outline: 2px solid var(--pba-error-bg) !important;
    outline-offset: 2px;
}

/* Validation message */
.pba-validation-message {
    display: none;
    font-weight: 500;
    font-size: 14px;
    color: var(--pba-error-bg);
    margin-bottom: 15px;
    padding: var(--space-2);
    background-color: #fff5f5;
    border-left: 3px solid var(--pba-error-bg);
    border-radius: 3px;
}

/* ========================================
   BOARD SELECTOR CARDS (Boards tab)
   ======================================== */

.pba-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.pba-share-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Share modal (screenshot layout: title, URL text, Copy link button, social icons row) */
.pba-share-modal .pba-modal-body {
    padding: 20px;
    text-align: center;
}

.pba-share-url-text {
    margin: 0;
    font-size: 14px;
    color: #50575e;
    word-break: break-all;
}

.pba-share-copy-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 24px;
    margin: 2rem 1rem 2rem 1rem;
    background: var(--pba-accent-color);
    color: #fff;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pba-share-copy-btn:hover {
    background: var(--pba-accent-color-hover);
    color: #fff;
    transform: scale(1.05) translateY(-4px) rotate(1deg);
}

.pba-share-copy-btn i {
    font-size: 16px;
}

.pba-share-icons-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.pba-share-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--pba-accent-color);
    color: #fff;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.15s ease;
}

.pba-share-icon-btn:hover {
    background: var(--pba-accent-color-hover);
    color: #fff;
    transform: scale(1.05) translateY(-4px) rotate(1deg);
}

.pba-share-icon-btn i {
    font-size: 20px;
}

.pba-share-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    margin: 10px;
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    color: #333;
    z-index: 10;
}

.pba-share-modal-close:hover {
    color: #000;
}

.pba-board-cards-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-3);
}

.thumbnail-board-container {
    width: 200px;
    flex-shrink: 0;
    cursor: pointer;
    padding: var(--space-2);
    border: 1px solid var(--border-light);
    background-color: var(--card-bg);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.thumbnail-board-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.thumbnail-board-container.is-active {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.thumbnail-board-card {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: var(--thumbnail-board-bg, #888888);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    box-sizing: border-box;
}

.thumbnail-board-meta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    margin-top: 6px;
    text-align: center;
}

.thumbnail-board-meta-item {
    font-size: 11px;
    line-height: 1.3;
    color: #757575;
}

.thumbnail-board-label {
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
}

.thumbnail-board-text {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 6px 4px;
    margin: 0;
    margin-top: var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    box-sizing: border-box;
    background: none;
}

.thumbnail-board-container.is-active .thumbnail-board-text {
    border-color: var(--pba-info-bg);
}

.thumbnail-board-text:focus {
    border-color: var(--border-medium);
    background: #fff;
    outline: none;
}

/* Fully read-only: no pointer interaction, no text selection */
.thumbnail-board-text[readonly],
.thumbnail-marquee-text[readonly] {
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Marquee cards row (mirrors .pba-board-cards-row) */
.pba-marquee-cards-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-6);
    margin-bottom: var(--space-3);
}

.thumbnail-marquee-container {
    width: 200px;
    flex-shrink: 0;
    cursor: pointer;
    padding: var(--space-2);
    border: 1px solid var(--border-light);
    background-color: var(--card-bg);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    position: relative;
}

.thumbnail-marquee-container:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.thumbnail-marquee-container.is-active {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25), 0 2px 6px rgba(0, 0, 0, 0.15);
    transform: scale(1.05);
}

.thumbnail-marquee-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
    padding: var(--space-3);
    background-color: var(--card-bg);
    border-radius: 6px;
    min-height: 60px;
    box-sizing: border-box;
}

.thumbnail-marquee-divider {
    font-size: 32px;
    line-height: 1;
    flex-shrink: 0;
    color: #555;
}

.thumbnail-marquee-content {
    width: 100%;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.thumbnail-marquee-label {
    width: 100%;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}

.thumbnail-marquee-meta {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.thumbnail-marquee-meta-item {
    width: 100%;
    font-size: 11px;
    line-height: 1.3;
    color: #757575;
}

.thumbnail-marquee-delete {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    margin: 8px;
}

.thumbnail-marquee-text {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 12px;
    font-weight: 500;
    padding: 6px 6px 4px;
    margin: 0;
    margin-top: var(--space-3);
    border: 1px solid var(--border-medium);
    border-radius: 4px;
    box-sizing: border-box;
    background: none;
}

.thumbnail-marquee-container.is-active .thumbnail-marquee-text {
    border-color: var(--pba-info-bg);
}

.thumbnail-marquee-text:focus {
    border-color: var(--border-medium);
    background: #fff;
    outline: none;
}

.pba-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.pba-switch__input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.pba-switch__slider {
    width: 44px;
    height: 24px;
    border-radius: 999px;
    background: #c4c7cb;
    position: relative;
    transition: background 0.2s ease;
    flex-shrink: 0;
}

.pba-switch__slider::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    top: 2px;
    left: 2px;
    transition: transform 0.2s ease;
}

.pba-switch__input:checked + .pba-switch__slider {
    background: var(--pba-accent-color);
}

.pba-switch__input:checked + .pba-switch__slider::after {
    transform: translateX(20px);
}

.pba-switch__input:focus + .pba-switch__slider {
    outline: 2px solid color-mix(in srgb, var(--pba-accent-color) 50%, transparent);
    outline-offset: 2px;
}

/* .pba-field label { display:block } is more specific than .pba-switch; keep toggles horizontal */
.pba-field label.pba-switch {
    display: inline-flex;
    font-weight: 400;
    margin-bottom: 0;
}

/* Content editor: start + end date on one row */
.pba-content-date-range {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-5);
    align-items: flex-end;
}

.pba-content-date-range__item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.pba-content-date-range__item > label {
    margin-bottom: 0;
}

.pba-field--schedule > label {
    margin-bottom: var(--space-2);
}

.pba-field--schedule .pba-content-schedule-toggle {
    margin-bottom: 0;
}

.pba-content-schedule-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-2);
}

.pba-content-schedule-arabic-toggle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.pba-content-schedule-arabic-toggle > label.pba-content-schedule-arabic {
    margin: 0;
    font-weight: 500;
}

.pba-content-schedule-dates.pba-is-hidden {
    display: none !important;
}

/* Content editor: image URL + Browse on one row */
.pba-content-url-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
}

.pba-content-url-row .pba-content-url-row__input {
    flex: 1 1 220px;
    min-width: 0;
    width: auto !important;
    max-width: 100%;
}

.pba-content-url-row .button-inert {
    flex-shrink: 0;
}

/* Image / Prayer calendar: helper under URL field */
.pba-content-image-size-hint,
.pba-content-url-link-hint {
    margin: var(--space-2) 0 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--text-muted, #646970);
    max-width: 48rem;
}

/* Content editor pane: sticky header with title */
.pba-content-type-editor-header {
    position: sticky;
    top: 0;
    z-index: 12;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin: 0;
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid var(--border-light);
    background: transparent;
}

.pba-content-type-editor-header__title-wrap {
    display: flex;
    align-items: center;
    align-self: stretch;
    flex: 1 1 auto;
    min-width: 0;
}

.pba-content-type-editor-header__actions {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin-left: auto;
}

/* Duration block (in form, above schedule) */
.pba-content-duration-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
}

.pba-content-duration-block__label {
    margin: 0;
    font-weight: 600;
    color: #1d2327;
    white-space: nowrap;
}

/* Content tab: duration compound control — segmented bar (− | value | + inside value shell) */
.pba-duration-stepper {
    display: inline-flex;
    align-items: stretch;
    flex-wrap: nowrap;
    border: 1px solid var(--border-light);
    border-radius: 4px;
    overflow: hidden;
    background: #ffffff;
    box-sizing: border-box;
    vertical-align: middle;
}

.pba-duration-stepper:focus-within {
    outline: none;
    border-color: var(--pba-accent-color);
    box-shadow: 0 0 0 1px var(--pba-accent-color);
}

.pba-duration-stepper__btn {
    flex: 0 0 auto;
    box-sizing: border-box;
    min-width: var(--space-8, 40px);
    width: var(--space-8, 40px);
    padding: 0;
    margin: 0;
    cursor: pointer;
    border: none;
    border-radius: 0;
    background: #f0f0f1;
    color: #1d2327;
    font-size: 17px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pba-duration-stepper__btn:hover {
    background: #e2e4e7;
    color: #000000;
}

.pba-duration-stepper__btn:active {
    background: #dcdcde;
}

.pba-duration-stepper__btn--dec {
    border-right: 1px solid var(--border-light);
}

/* Middle: numeric field + increment button grouped (mockup-style) */
.pba-duration-stepper__input {
    display: inline-flex;
    align-items: stretch;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}

.pba-content-type-editor .pba-duration-stepper__field {
    flex: 0 1 auto;
    min-width: 52px;
    width: 4.5rem;
    max-width: 80px;
    height: var(--space-8) !important;
    margin: 0 !important;
    padding: 0 8px !important;
    box-sizing: border-box !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background-color: #ffffff !important;
    color: #333333 !important;
    font-size: 14px !important;
    font-family: inherit !important;
    text-align: center !important;
    transition: none !important;
}

.pba-content-type-editor .pba-duration-stepper__field:focus {
    outline: none;
    border: none !important;
    box-shadow: none !important;
}

.pba-duration-stepper__btn--inc {
    border-left: 1px solid var(--border-light);
    flex-shrink: 0;
}

/* Disabled form control hint (used for board marquee toggle) */
.pba-is-disabled {
  opacity: 0.55;
  pointer-events: none;
}

/* Content manager (cards + editor tab) */
.pba-content-manager {
    margin-top: var(--space-4);
}

.pba-content-type-wrapper {
    /* Shared inset: list padding-top and editor-col padding-top stay in sync */
    --pba-content-manager-inset: var(--space-2);
    display: grid;
    grid-template-columns: minmax(260px, 38fr) minmax(320px, 48fr);
    gap: var(--space-6);
    align-items: start;
}

@media (max-width: 782px) {
    .pba-content-type-wrapper {
        grid-template-columns: 1fr;
    }
}

/* Matched panel chrome — keep list + editor shells in sync via --pba-content-manager-inset */
.pba-content-type-list,
.pba-content-manager__editor-col {
    min-width: 0;
    max-height: 75vh;
    overflow-y: auto;
    padding: var(--pba-content-manager-inset);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
    align-self: start;
    /* Scroll inside each panel; do not sticky only one column (causes ~32px drop after JS render). */
}

.pba-content-add-btn.button-standard {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-2);
    line-height: 1;
}

.pba-content-manager__editor {
    min-width: 0;
    border: 0;
    border-radius: 0;
    padding: 0;
    background: transparent;
    max-height: none;
    overflow: visible;
    box-sizing: border-box;
}

/* Inset for scrollable body (header is full-bleed width inside the card) */
#pba-content-editor-empty:not(.pba-is-hidden),
#pba-content-editor-form:not(.pba-is-hidden) {
    padding: var(--space-5);
}

#pba-content-editor-form:not(.pba-is-hidden) {
    padding-top: var(--space-4);
}

.pba-content-cards {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.card-content-wrapper--card {
    display: grid;
    grid-template-columns: 20px 1px minmax(0, 4fr) 1px minmax(64px, max-content) 1px minmax(0, max-content) 1px 44px 32px 32px 1px 44px;
    align-items: center;
    gap: 6px;
    padding: var(--space-2) var(--space-3);
    min-height: 48px;
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    background: var(--card-bg);
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background-color 0.18s ease;
}

.card-content-wrapper--card:hover {
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
}

.card-content-wrapper--card.is-live {
    background: color-mix(in srgb, #008a0b 14%, white);
}

.card-content-wrapper--card.is-live:hover {
    background: color-mix(in srgb, #008a0b 22%, white);
}

.card-content-wrapper--card.is-cancelled {
    background: #eff1f3;
    color: #c4c7cb;
}

.card-content-wrapper--card.is-cancelled .card-content-title,
.card-content-wrapper--card.is-cancelled .card-content-schedule,
.card-content-wrapper--card.is-cancelled .card-content-duration,
.card-content-wrapper--card.is-cancelled .card-content-status {
    color: inherit;
}

.card-content-wrapper--card.is-cancelled:hover {
    background: color-mix(in srgb, #1d2327 9%, #eff1f3);
}

.card-content-wrapper--card.is-selected {
    border: 1px solid var(--pba-accent-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pba-accent-color) 35%, transparent);
}

.card-content-wrapper--card.is-selected:hover {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--pba-accent-color) 45%, transparent),
        0 4px 16px color-mix(in srgb, var(--pba-accent-color) 20%, transparent);
}

/* Shared FA grip drag handle: content cards, marquee rows, slideshow slide rows */
.card-drag-handle {
    cursor: grab;
    color: #a5a5a5;
    font-size: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: color 0.2s ease;
    user-select: none;
}

.card-drag-handle:hover {
    color: var(--pba-accent-color) !important;
}

.card-drag-handle:active {
    cursor: grabbing;
}

.card-content-divider {
    width: 1px;
    min-height: 24px;
    background: var(--border-medium);
    align-self: stretch;
}

.card-content-title {
    min-width: 0;
    font-weight: 600;
    color: #1d2327;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.card-content-schedule,
.card-content-duration {
    font-size: 13px;
    color: #50575e;
    white-space: nowrap;
}

.card-content-schedule {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

.card-content-status {
    font-size: 18px;
    text-align: center;
    color: #50575e;
}

.pba-switch--card {
    justify-self: center;
}

.pba-card-duplicate-btn,
.pba-card-delete-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    color: #a5a5a5;
    font-size: 14px;
    border-radius: 4px;
    transition: color 0.15s ease, background-color 0.15s ease;
}

.pba-card-duplicate-btn:hover {
    color: var(--pba-accent-color);
    background: color-mix(in srgb, var(--pba-accent-color) 12%, transparent);
}

.pba-card-delete-btn:hover {
    color: #d63638;
    background: rgba(214, 54, 56, 0.08);
}

.pba-field {
    margin: 14px 0;
}

.pba-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
}

/* Content tab: slideshow settings — six fields in two rows × three columns */
.pba-slideshow-settings-grid {
    width: 100%;
    margin: 14px 0;
    box-sizing: border-box;
}

.pba-slideshow-settings-grid .pba-field {
    margin: 0;
}

.pba-slideshow-settings-grid__row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-4);
    align-items: end;
}

.pba-slideshow-settings-grid__row + .pba-slideshow-settings-grid__row {
    margin-top: var(--space-4);
}

.pba-slideshow-settings-grid__cell {
    min-width: 0;
}

.pba-slideshow-settings-grid__cell select.standard-element-normal,
.pba-slideshow-settings-grid__cell select.standard-element-small {
    width: 100%;
    box-sizing: border-box;
}

.pba-slideshow-settings-grid__cell .pba-duration-stepper {
    max-width: 100%;
}

.pba-slide-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fafafa;
    margin-bottom: 6px;
}

.pba-slide-url {
    flex: 1;
    min-width: 220px;
}

/* Slide row delete uses label text "-"; omit global .button-delete::before so we don't show "--". */
.button-delete.pba-slide-del::before {
    content: none;
}

.button-delete.pba-slide-del {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pba-content-edit-heading {
    margin: 0;
    line-height: 1;
}

.pba-icon-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--border-light);
    background: #fff;
    cursor: pointer;
}

.pba-icon-option.is-active {
    border-color: var(--pba-accent-color);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--pba-accent-color) 50%, transparent);
}

.pba-icon-option i {
    font-size: 18px;
    line-height: 1;
    color: #1d2327;
}

.pba-content-modal {
    position: fixed;
    inset: 0;
    z-index: 100090;
    display: none;
    align-items: center;
    justify-content: center;
}

.pba-content-modal:not(.pba-is-hidden) {
    display: flex !important;
}

.pba-content-modal.pba-is-hidden {
    display: none !important;
}

.pba-content-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
}

.pba-content-modal__panel {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 24px 28px;
    border-radius: 10px;
    max-width: 720px;
    width: 92%;
}

/* Same positioning model as `.pba-color-presets-modal .pba-modal-content` so drag (admin.js) can set left/top. */
#pba-content-type-modal .pba-content-modal__panel.pba-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
}

.pba-content-type-modal__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-4);
    margin-top: var(--space-5);
}

.pba-content-type-cell {
    position: relative;
    z-index: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: var(--space-3);
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: #fafafa;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    /* Unstyled <button>: beat WP admin .wp-core-ui button (display/typography). */
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: center;
    color: inherit;
    margin: 0;
    line-height: 1.3;
}

#pba-content-type-modal .pba-content-type-cell:hover {
    z-index: 2;
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

#pba-content-type-modal .pba-content-type-cell:focus {
    outline: none;
}

#pba-content-type-modal .pba-content-type-cell:focus-visible {
    outline: 2px solid var(--pba-accent-color);
    outline-offset: 2px;
}

#pba-content-type-modal .pba-content-type-cell.is-disabled,
#pba-content-type-modal .pba-content-type-cell:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    background: #f0f0f0;
    border-color: #ddd;
    color: #888;
    pointer-events: none;
}

#pba-content-type-modal .pba-content-type-cell.is-disabled:hover,
#pba-content-type-modal .pba-content-type-cell:disabled:hover {
    z-index: 0;
    transform: none;
    box-shadow: none;
}

#pba-content-type-modal .pba-content-type-cell.is-disabled .pba-ui-icon--type-thumb,
#pba-content-type-modal .pba-content-type-cell:disabled .pba-ui-icon--type-thumb {
    color: #aaa;
}

.pba-content-type-cell__icon {
    position: relative;
    width: 90px;
    height: 90px;
    flex-shrink: 0;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: transparent;
}

.pba-content-type-cell__soon-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    z-index: 1;
    padding: 2px 5px;
    border-radius: 4px;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0.02em;
    white-space: nowrap;
    text-transform: uppercase;
    background: #646970;
    color: #fff;
    pointer-events: none;
}

#pba-content-type-modal .pba-content-type-cell.is-disabled .pba-content-type-cell__soon-badge {
    background: #50575e;
}

.pba-ui-icon--type-thumb {
    font-size: 48px;
    color: var(--pba-accent-color);
}

/* Content admin: Font Awesome icon picker modal (shares .pba-color-presets-modal base; toggled with .pba-is-hidden). */
#pba-icon-picker-modal:not(.pba-is-hidden) {
    display: block !important;
}

#pba-icon-picker-modal.pba-is-hidden {
    display: none !important;
}

#pba-icon-picker-modal .pba-modal-content {
    min-width: 440px;
    max-width: min(720px, 96vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.pba-icon-picker-modal .pba-modal-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    padding-bottom: 16px;
}

.pba-icon-picker-popular-label {
    margin: 0 0 4px;
    font-size: 0.9em;
    font-weight: 600;
    color: var(--text-muted, #666);
}

.pba-icon-picker-popular {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-bottom: 4px;
    border-top: 1px solid var(--border-light);
    border-left: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
}

.pba-icon-picker-popular .pba-icon-option {
    margin: 0;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.pba-icon-picker-popular .pba-icon-option:hover {
    background-color: #f0f0f1;
}

.pba-icon-picker-popular .pba-icon-option.is-active {
    box-shadow: none;
    outline: 2px solid var(--pba-accent-color, #2271b1);
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

.pba-icon-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.pba-icon-picker-preview {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 8px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #fff;
    font-size: 20px;
    color: #1d2327;
}

.pba-icon-picker-preview .pba-icon-none {
    font-size: 22px;
    line-height: 1;
    color: #646970;
}

.pba-icon-picker-tabs {
    display: flex;
    gap: 8px;
    margin-top: 4px;
}

.pba-icon-picker-tab {
    padding: 6px 14px;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    background: #f6f7f7;
    cursor: pointer;
    font-size: 13px;
}

.pba-icon-picker-tab.is-active {
    border-color: var(--pba-accent-color, #2271b1);
    background: #fff;
    font-weight: 600;
}

/* Outer frame: border here (not on the scroll area) so right/bottom stay visible beside the scrollbar. */
.pba-icon-picker-grid-frame {
    flex: 1;
    min-height: 140px;
    max-height: 42vh;
    border: 1px solid var(--border-light);
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fafafa;
}

.pba-icon-picker-grid-wrap {
    flex: 1;
    min-height: 0;
    overflow: auto;
    padding: 0;
    background: transparent;
}

.pba-icon-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 40px);
    grid-auto-rows: 40px;
    gap: 0;
    align-content: start;
    justify-content: start;
}

.pba-icon-picker-grid-placeholder {
    margin: 0;
    font-size: 13px;
    color: var(--text-muted, #666);
}

/* Placeholder is a grid child: without spanning it only gets the first 40px track. */
.pba-icon-picker-grid > .pba-icon-picker-grid-placeholder {
    grid-column: 1 / -1;
    grid-row: span 3;
    justify-self: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 16px 12px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    min-height: 72px;
}

.pba-icon-picker-actions {
    margin-top: 4px;
    margin-bottom: 0;
}

/* One 1px line between tiles: frame is top+left on scroll area; each cell draws right+bottom only. */
.pba-icon-picker-grid .pba-icon-option {
    margin: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    border-radius: 0;
    border: none;
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.pba-icon-picker-grid .pba-icon-option:hover {
    background-color: #f0f0f1;
}

.pba-icon-picker-grid .pba-icon-option.is-active {
    box-shadow: none;
    outline: 2px solid var(--pba-accent-color, #2271b1);
    outline-offset: -2px;
    position: relative;
    z-index: 1;
}

/* Content pool tab — filter bar, group select, and summary on one row */
.prayboard-content-pool-tab .pba-content-pool-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3, 12px);
    margin-bottom: var(--space-4, 16px);
    padding-bottom: var(--space-4, 16px);
    border-bottom: 1px solid var(--border-medium, #ddd);
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--pba-admin-bg, #f0f0f1);
}

.prayboard-content-pool-tab .pba-content-pool-controls .pba-filter-bar {
    flex: 0 0 auto;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    position: static;
    background: transparent;
}

.prayboard-content-pool-tab .pba-content-pool-controls .pba-content-pool-group-select {
    flex: 1 1 220px;
    min-width: 180px;
    max-width: 360px;
    margin: 0;
}

.prayboard-content-pool-tab.is-pool-type-dua .pba-content-pool-controls .pba-content-pool-group-select,
.prayboard-content-pool-tab .pba-content-pool-controls .pba-content-pool-group-select.pba-is-hidden {
    display: none !important;
}

.prayboard-content-pool-tab .pba-content-pool-controls #pba-content-pool-summary {
    flex: 1 1 200px;
    margin: 0;
    min-width: 0;
}

.pba-content-pool-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 12px;
    max-width: 960px;
}

.pba-content-pool-list.is-loading {
    opacity: 0.7;
}

.pba-content-pool-row {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
    text-align: left;
    cursor: default;
    padding: 12px 58px 12px 14px;
    border-radius: 6px;
    border: 1px solid var(--border-light, #dcdcde);
    transition: background 0.15s ease, box-shadow 0.15s ease;
}

.pba-content-pool-row__switch {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 1;
    cursor: pointer;
}

.pba-content-pool-row.is-busy {
    pointer-events: none;
    opacity: 0.65;
}

.pba-content-pool-row__label {
    font-weight: 600;
    color: #1d2327;
}

.pba-content-pool-row__preview {
    display: block;
    width: 100%;
    max-width: 100%;
    font-size: 13px;
    line-height: 1.45;
    color: #50575e;
    white-space: normal;
    overflow-wrap: anywhere;
}

.pba-content-pool-empty {
    margin-top: 8px;
}

.pba-content-pool-load-more-wrap {
    margin-top: 12px;
}

.pba-content-pool-load-more-wrap .button {
    width: 100%;
    max-width: 10vw;
    justify-content: center;
    text-align: center;
}

/* Dua tab: manual entry — two columns (form | recent list) */
.prayerboard-content .standard-container.pba-dua-manual-entry {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: none !important;
}

.prayerboard-content .pba-dua-manual-entry .standard-column.pba-dua-manual-entry__form,
.prayerboard-content .pba-dua-manual-entry .standard-column.pba-dua-manual-entry__recent {
    flex: 1 1 50% !important;
    width: calc(50% - (var(--space-6) / 2)) !important;
    max-width: calc(50% - (var(--space-6) / 2)) !important;
    min-width: 0 !important;
    align-self: flex-start;
}

.pba-dua-manual-entry__table {
    width: 100%;
    table-layout: fixed;
}

.pba-dua-manual-entry__scroll {
    max-height: min(70vh, 640px);
    overflow-x: hidden;
    overflow-y: auto;
    border: 1px solid #c3c4c7;
    border-radius: 4px;
    background: #fff;
}

.pba-dua-manual-entry__scroll .pba-dua-manual-entry__table {
    margin: 0;
    border: 0;
}

.pba-dua-manual-entry__scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f6f7f7;
    box-shadow: 0 1px 0 #c3c4c7;
}

.pba-dua-manual-entry__row {
    cursor: pointer;
}

.pba-dua-manual-entry__scroll .pba-dua-manual-entry__row:hover td {
    background: #f0f6fc;
}

.pba-dua-manual-entry__scroll .pba-dua-manual-entry__row.is-selected td {
    background: #e7f3ff;
}

.pba-dua-manual-entry__row:focus {
    outline: none;
}

.pba-dua-manual-entry__row:focus-visible td {
    box-shadow: inset 0 0 0 2px #2271b1;
}

.pba-dua-manual-entry__col-id {
    width: 48px;
}

.pba-dua-manual-entry__col-reason {
    width: 28%;
}

.pba-dua-manual-entry__translation-cell {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: top;
}

.pba-dua-manual-entry__form .form-table th {
    width: 140px;
}

.pba-dua-manual-entry__form textarea.pba-dua-textarea--main {
    display: block;
    width: 100%;
    min-height: 6em;
    height: 6em;
    resize: vertical;
    box-sizing: border-box;
}

.pba-dua-manual-entry__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.pba-dua-manual-entry__actions .button {
    margin-right: 0;
}

.pba-dua-delete-btn {
    color: #b32d2e;
    border-color: #b32d2e;
}

.pba-dua-delete-btn:hover:not(:disabled),
.pba-dua-delete-btn:focus:not(:disabled) {
    color: #fff;
    background: #b32d2e;
    border-color: #8a2424;
}

@media (max-width: 782px) {
    .prayerboard-content .standard-container.pba-dua-manual-entry {
        flex-direction: column !important;
        flex-wrap: wrap !important;
    }

    .prayerboard-content .pba-dua-manual-entry .standard-column.pba-dua-manual-entry__form,
    .prayerboard-content .pba-dua-manual-entry .standard-column.pba-dua-manual-entry__recent {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* Offsets tab — custom Athan grid */
.pba-time-offsets-page {
    display: block;
    width: 100%;
    max-width: 100%;
}

.pba-time-offsets-panel {
    display: block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 1.5rem;
    padding: var(--space-7, 24px);
    border: 1px solid var(--border-medium, #dcdcde);
    border-radius: 8px;
    background: #fff;
}

.pba-time-offsets-header {
    display: block;
    width: 100%;
    margin-bottom: 1.25rem;
}

.pba-time-offsets-title {
    margin: 0 0 0.75rem;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--pba-accent-color, #c45c3e);
}

.pba-custom-athan-toggle-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 0;
}

.pba-custom-athan-toggle-label {
    font-weight: 600;
    font-size: 14px;
}

.pba-time-offsets-grid {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    border: 1px solid #dcdcde;
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
}

.pba-time-offsets-col {
    flex: 0 0 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #e8e8e8;
    box-sizing: border-box;
}

.pba-time-offsets-col:last-child {
    border-right: none;
}

.pba-time-offsets-col--athan-offset {
    border-right: 1px solid #e8e8e8;
}

/* Custom Athan — 6 columns: 10%, 10%, 30%, 30%, 10%, 10% */
.pba-time-offsets-grid.is-custom-athan .pba-time-offsets-col--prayer {
    flex: 0 0 10%;
    max-width: 10%;
}

.pba-time-offsets-grid.is-custom-athan .pba-time-offsets-col--api-athan {
    flex: 0 0 10%;
    max-width: 10%;
}

.pba-time-offsets-grid.is-custom-athan .pba-time-offsets-col--athan-settings {
    flex: 0 0 30%;
    max-width: 30%;
}

.pba-time-offsets-grid.is-custom-athan .pba-time-offsets-col--iqamah {
    flex: 0 0 30%;
    max-width: 30%;
}

.pba-time-offsets-grid.is-custom-athan .pba-time-offsets-col--athan-offset {
    flex: 0 0 10%;
    max-width: 10%;
}

.pba-time-offsets-grid.is-custom-athan .pba-time-offsets-col--iqamah-offset {
    flex: 0 0 10%;
    max-width: 10%;
}

/* API Athan — 5 columns: 15%, 15%, 40%, 15%, 15% */
.pba-time-offsets-grid.is-api-athan .pba-time-offsets-col--prayer {
    flex: 0 0 15%;
    max-width: 15%;
}

.pba-time-offsets-grid.is-api-athan .pba-time-offsets-col--api-athan {
    flex: 0 0 15%;
    max-width: 15%;
}

.pba-time-offsets-grid.is-api-athan .pba-time-offsets-col--iqamah {
    flex: 0 0 40%;
    max-width: 40%;
}

.pba-time-offsets-grid.is-api-athan .pba-time-offsets-col--athan-offset {
    flex: 0 0 15%;
    max-width: 15%;
}

.pba-time-offsets-grid.is-api-athan .pba-time-offsets-col--iqamah-offset {
    flex: 0 0 15%;
    max-width: 15%;
}

.pba-time-offsets-col__head {
    flex: 0 0 auto;
    padding: 12px 10px;
    background: #f6f7f7;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: #50575e;
    border-bottom: 1px solid #e8e8e8;
    line-height: 1.3;
}

.pba-time-offsets-col__row {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 16px;
}

.pba-time-offsets-col__head--center,
.pba-time-offsets-col__row--center {
    justify-content: center;
    text-align: center;
}

.pba-time-offsets-col--api-athan .pba-time-offsets-api-time,
.pba-time-offsets-col--athan-offset .pba-time-offsets-preview-athan,
.pba-time-offsets-col--iqamah-offset .pba-time-offsets-preview-iqamah {
    width: 100%;
    text-align: center;
}

.pba-time-offsets-col--athan-settings .pba-time-offsets-col__row,
.pba-time-offsets-col--iqamah .pba-time-offsets-col__row {
    flex-wrap: wrap;
    gap: 6px;
}

.pba-time-offsets-prayer-name {
    font-weight: 600;
    color: #1d2327;
}

.pba-time-offsets-api-time {
    color: #50575e;
    font-variant-numeric: tabular-nums;
}

.pba-time-offsets-settings {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
}

.pba-time-offsets-settings .standard-element-tiny {
    max-width: 100%;
}

.pba-time-offsets-minutes-label {
    font-size: 12px;
    color: #646970;
}

.pba-time-offsets-grid.is-api-athan .pba-athan-settings-col {
    display: none;
}

.pba-time-offsets-preview-athan,
.pba-time-offsets-preview-iqamah {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1d2327;
    font-size: 14px;
}

.pba-time-offsets-secondary {
    margin-top: 1.5rem;
}

@media (max-width: 960px) {
    .pba-time-offsets-grid {
        flex-direction: column;
    }

    .pba-time-offsets-col {
        border-right: none;
        border-bottom: 1px solid #e8e8e8;
        flex: 1 1 100% !important;
        max-width: 100% !important;
    }

    .pba-time-offsets-col:last-child {
        border-bottom: none;
    }
}

/* ========================================
   PRAYERBOARD SETUP MODAL
   ======================================== */

body.pba-setup-active {
    overflow: hidden;
}

.pba-setup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
    box-sizing: border-box;
    pointer-events: auto;
}

.pba-setup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.45);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    pointer-events: auto;
}

.pba-setup-modal {
    position: relative;
    z-index: 1;
    width: min(560px, 100%);
    max-height: min(90vh, 720px);
    overflow: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
    padding: var(--space-7) var(--space-6);
    padding-top: var(--space-8);
    pointer-events: auto;
}

.pba-setup-modal .pba-modal-close {
    top: 0;
    right: 0;
    margin: 10px;
}

.pba-setup-modal__logo {
    display: flex;
    justify-content: center;
    margin: 0 0 var(--space-3);
}

.pba-setup-modal__logo-svg {
    width: 200px;
    height: auto;
    display: block;
}

.pba-setup-step .button-standard,
.pba-setup-step .button-inert,
.pba-setup-complete .button-standard {
    margin-top: var(--space-2);
}

.pba-setup-step__error + .button-inert {
    margin-top: var(--space-3);
}

.pba-setup-modal__title {
    margin: 0 0 var(--space-2);
    padding-right: 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.3;
}

.pba-setup-modal__subtitle {
    margin: 0 0 var(--space-4);
    color: #50575e;
    font-size: 0.95rem;
    text-align: center;
}

.pba-setup-modal__install {
    display: block;
    margin: 0 auto var(--space-6);
}

.pba-setup-steps {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.pba-setup-step {
    border: 1px solid var(--border-medium);
    border-radius: 8px;
    padding: var(--space-5);
    background: var(--pba-admin-bg);
}

.pba-setup-step.is-done {
    border-color: color-mix(in srgb, var(--pba-success-bg) 35%, var(--border-medium));
    background: color-mix(in srgb, var(--pba-success-bg) 6%, #fff);
}

.pba-setup-step.is-next {
    border-color: var(--border-medium);
    background: #fff;
}

.pba-setup-step__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-3);
}

.pba-setup-step__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.35;
}

.pba-setup-step__meta {
    flex-shrink: 0;
    font-size: 0.85rem;
    color: #646970;
    white-space: nowrap;
}

.pba-setup-step__progress {
    height: 8px;
    background: var(--border-light);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: var(--space-3);
}

.pba-setup-step__progress-bar {
    height: 100%;
    background: var(--pba-accent-color);
    border-radius: 999px;
    transition: width 0.2s ease;
}

.pba-setup-step__status {
    margin: 0;
    font-size: 0.9rem;
    color: #646970;
}

.pba-setup-step__status--done {
    color: var(--pba-success-bg);
    font-weight: 600;
}

.pba-setup-step__status--waiting {
    opacity: 0.55;
}

.pba-setup-step__error {
    margin: var(--space-3) 0 0;
    color: var(--pba-danger-bg);
    font-size: 0.9rem;
}

.pba-setup-complete {
    text-align: center;
    padding: var(--space-4) 0;
}

.pba-setup-complete h3 {
    margin: 0 0 var(--space-3);
    font-size: 1.25rem;
}

.pba-setup-complete p {
    margin: 0 0 var(--space-6);
    color: #50575e;
}