/* ============================================
   Doc Miners — UI Styles (App Shell)
   F22: Separated from document rendering styles
   Scoped to app shell, nav, forms, buttons, tables
   ============================================ */


/* App main content area (72px fixed nav + 16px gap) */
.mb-app-main {
    max-width: 1400px;
    margin: 0 auto;
    padding: 88px 24px 16px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* App footer */
.mb-app-footer {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 16px 24px;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.mb-app-footer-inner {
    max-width: 1400px;
    margin: 0 auto;
}

.mb-app-footer-links {
    margin-bottom: 6px;
}

.mb-app-footer-links a {
    color: #64748b;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    transition: color 0.15s;
}

.mb-app-footer-links a:hover {
    color: #2563eb;
}

.mb-app-footer-sep {
    color: #cbd5e1;
    margin: 0 6px;
    font-size: 12px;
}

.mb-app-footer-copy {
    font-size: 11px;
    color: #94a3b8;
}

/* Upload section */
#mybutler-upload {
    margin-bottom: 12px;
    text-align: center;
}

.mybutler-upload-row {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: center;
    margin-bottom: 8px;
}

/* --- Custom file input (replaces native "Choose File") --- */
.mybutler-file-input-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
}
.mybutler-file-hidden {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}
.mybutler-file-btn {
    white-space: nowrap;
}
.mybutler-file-name {
    font-size: 13px;
    color: #64748b;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
}

#mybutler-upload-options.mybutler-upload-bar {
    display: inline-flex;
    margin: 0 auto;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
    justify-content: center;
}

@media (max-width: 640px) {
    .mb-app-main {
        padding: 76px 12px 12px;
    }

    .mb-app-footer-links a {
        display: inline-block;
    }

    .mb-app-footer-sep {
        margin: 0 4px;
    }
}


/* ============================================
   PAGE STATUS CELLS (progress grid)
   ============================================ */

.page-cell {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: #ccc;
}

.page-created     { background: #7aa2ff; }
.page-processing  { background: #ffd54f; }
.page-completed   { background: #4caf50; }
.page-failed      { background: #f44336; }
.page-cancelled   { background: #9e9e9e; }

.page-processing {
    animation: pulse 1.4s ease-in-out infinite;
}

@keyframes pulse {
    0%   { opacity: 0.6; }
    50%  { opacity: 1; }
    100% { opacity: 0.6; }
}


/* ============================================
   JOB HISTORY TABLE
   ============================================ */

#mybutler-job-history {
    position: relative;
}

#mybutler-job-history table {
    width: 100%;
    border-collapse: collapse;
}

#mybutler-job-history-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

#mybutler-job-history-table thead {
    background: #f8fafc;
}

#mybutler-job-history-table th {
    padding: 10px 14px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
    border-bottom: 2px solid #e2e8f0;
}

#mybutler-job-history-table td {
    padding: 10px 14px;
    border-bottom: 1px solid #f1f5f9;
    font-size: 13px;
    color: #334155;
}

#mybutler-job-history-table tbody tr {
    cursor: pointer !important;
    transition: background 0.15s ease;
    height: 32px;
}

#mybutler-job-history-table tbody tr td {
    cursor: pointer !important;
}

#mybutler-job-history-table tbody tr:hover {
    background-color: #f0f4ff !important;
}

#mybutler-job-history-table tbody tr:hover td:first-child {
    text-decoration: underline !important;
    color: #2563eb;
}

#mybutler-job-history-table tbody tr:last-child td {
    border-bottom: none;
}


/* ============================================
   JOB DETAIL PANEL
   ============================================ */

#mybutler-job-detail {
    margin-top: 0;
}

#mybutler-job-detail-title {
    font-size: 17px;
    font-weight: 600;
    color: #111;
    margin-bottom: 16px;
}


/* ============================================
   ACTION BAR (Open / Export / Cleanup)
   ============================================ */

.mybutler-action-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
    position: sticky;
    top: 0;
    z-index: 10;
    margin: -16px -16px 16px -16px;
    padding: 12px 16px;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

.mybutler-action-status {
    font-size: 13px;
    color: #64748b;
    margin-left: 8px;
}

.mybutler-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
}

.mybutler-btn:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.mybutler-btn:active {
    background: #e5e7eb;
}

.mybutler-btn-primary {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.mybutler-btn-primary:hover {
    background: #1d4ed8;
    border-color: #1d4ed8;
}

.mybutler-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Loading spinner inside buttons */
.mybutler-btn .spinner {
    display: none;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0, 0, 0, 0.15);
    border-top-color: #374151;
    border-radius: 50%;
    animation: mybutler-spin 0.6s linear infinite;
}

.mybutler-btn.loading .spinner {
    display: inline-block;
}

.mybutler-btn.loading .btn-text {
    opacity: 0.6;
}

.mybutler-btn-primary .spinner {
    border-color: rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
}

@keyframes mybutler-spin {
    to { transform: rotate(360deg); }
}


/* ============================================
   QUICK CLEANUP DROPDOWN
   ============================================ */

.mybutler-dropdown {
    position: relative;
    display: inline-flex;
}

.mybutler-dropdown-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px 8px 16px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #fff;
    color: #374151;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    font-family: inherit;
}

.mybutler-dropdown-toggle:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.mybutler-dropdown-toggle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mybutler-dropdown-toggle .arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    border-top: 5px solid #6b7280;
    margin-left: 4px;
    transition: transform 0.2s ease;
}

.mybutler-dropdown.open .mybutler-dropdown-toggle {
    background: #f3f4f6;
    border-color: #9ca3af;
}

.mybutler-dropdown.open .mybutler-dropdown-toggle .arrow {
    transform: rotate(180deg);
}

.mybutler-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 100;
    min-width: 260px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 1px 3px rgba(0, 0, 0, 0.06);
    padding: 4px 0;
    overflow: hidden;
}

.mybutler-dropdown.open .mybutler-dropdown-menu {
    display: block;
}

.mybutler-dropdown-item {
    display: flex;
    flex-direction: column;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.1s ease;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
}

.mybutler-dropdown-item:hover {
    background: #f1f5f9;
}

.mybutler-dropdown-item:active {
    background: #e2e8f0;
}

.mybutler-dropdown-item .item-label {
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
}

.mybutler-dropdown-item .item-desc {
    font-size: 11px;
    color: #94a3b8;
    margin-top: 2px;
}

.mybutler-dropdown-divider {
    height: 1px;
    background: #f1f5f9;
    margin: 4px 0;
}


/* ============================================
   BACK TO TOP BUTTON (inside preview panel)
   ============================================ */

.mybutler-back-to-top {
    position: sticky;
    bottom: 16px;
    float: right;
    margin-top: -40px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s, background 0.15s;
    z-index: 10;
}

.mybutler-back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.mybutler-back-to-top:hover {
    background: #1d4ed8;
}


/* ============================================
   TOAST NOTIFICATIONS
   ============================================ */

/* Toast container — stacks from bottom-right */
#mybutler-toast-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    display: flex;
    flex-direction: column-reverse;
    gap: 8px;
    pointer-events: none;
}

.mybutler-toast {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: #1e293b;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.08);
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    pointer-events: auto;
    max-width: 380px;
    border-left: 4px solid #94a3b8;
}

.mybutler-toast.visible {
    opacity: 1;
    transform: translateX(0);
}

.mybutler-toast.success { border-left-color: #16a34a; }
.mybutler-toast.error   { border-left-color: #dc2626; }
.mybutler-toast.info    { border-left-color: #2563eb; }

.mybutler-toast-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: #94a3b8;
}

.mybutler-toast.success .mybutler-toast-icon { background: #16a34a; }
.mybutler-toast.error .mybutler-toast-icon   { background: #dc2626; }
.mybutler-toast.info .mybutler-toast-icon    { background: #2563eb; }

.mybutler-toast-msg {
    flex: 1;
    line-height: 1.4;
}

.mybutler-toast-close {
    flex-shrink: 0;
    background: none;
    border: none;
    font-size: 18px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
    line-height: 1;
}

.mybutler-toast-close:hover {
    color: #475569;
}


/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 640px) {
    .mybutler-action-bar {
        flex-direction: column;
        align-items: stretch;
    }

    .mybutler-btn,
    .mybutler-dropdown-toggle {
        justify-content: center;
        width: 100%;
    }

    .mybutler-dropdown-menu {
        left: 0;
        right: 0;
        min-width: unset;
    }

    .mybutler-doc-preview {
        padding: 20px 16px;
    }
}

/* ============================================
   UPLOAD PROCESSING OPTIONS (compact bar)
   ============================================ */

.mybutler-upload-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 8px 0;
    padding: 6px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
}

.mybutler-bar-check {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
}

.mybutler-bar-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    margin: 0;
    cursor: pointer;
    accent-color: #2563eb;
}

.mybutler-bar-check span {
    font-weight: 500;
}

.mybutler-bar-sep {
    width: 1px;
    height: 20px;
    background: #e2e8f0;
    flex-shrink: 0;
}

.mybutler-bar-select {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
}

.mybutler-bar-select span {
    font-weight: 500;
}

.mybutler-bar-select select {
    padding: 3px 8px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #334155;
    cursor: pointer;
    font-family: inherit;
}

.mybutler-bar-select select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Page range inputs */
.mybutler-page-range {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #334155;
    white-space: nowrap;
}

.mybutler-page-range-label {
    font-weight: 500;
}

.mybutler-page-range-input {
    width: 60px;
    padding: 3px 6px;
    font-size: 13px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    background: #fff;
    color: #334155;
    font-family: inherit;
    text-align: center;
    -moz-appearance: textfield;
}

.mybutler-page-range-input::-webkit-inner-spin-button,
.mybutler-page-range-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mybutler-page-range-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.mybutler-page-range-dash {
    color: #94a3b8;
    font-weight: 500;
}

@media (max-width: 640px) {
    .mybutler-upload-bar {
        flex-wrap: wrap;
        gap: 8px;
    }

    .mybutler-bar-sep {
        display: none;
    }
}


/* ============================================
   UNDO CLEANUP BUTTON
   ============================================ */

.mybutler-btn-undo {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    font-size: 13px;
    padding: 6px 14px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.mybutler-btn-undo:hover {
    background: #fde68a;
}

.mybutler-btn-undo:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}


/* ============================================
   ENHANCED JOB HISTORY TABLE
   ============================================ */

#mybutler-job-history-list tr {
    cursor: default;
}

#mybutler-job-history-list .mybutler-job-link {
    color: #2563eb;
    cursor: pointer;
    font-weight: 500;
}

#mybutler-job-history-list .mybutler-job-link:hover {
    text-decoration: underline;
}

/* Status badges */
.mybutler-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.mybutler-badge-completed {
    background: #dcfce7;
    color: #166534;
}

.mybutler-badge-completed_with_errors {
    background: #fef3c7;
    color: #92400e;
}

.mybutler-badge-processing,
.mybutler-badge-ready {
    background: #dbeafe;
    color: #1e40af;
}

.mybutler-badge-processing .mybutler-spinner,
.mybutler-badge-ready .mybutler-spinner,
.mybutler-badge-uploaded .mybutler-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: mybutler-spin 0.8s linear infinite;
    margin-right: 4px;
    vertical-align: -1px;
}

@keyframes mybutler-spin {
    to { transform: rotate(360deg); }
}

.mybutler-badge-failed {
    background: #fecaca;
    color: #991b1b;
}

.mybutler-badge-uploaded,
.mybutler-badge-created {
    background: #f1f5f9;
    color: #64748b;
}

/* Pages failed count */
.mybutler-failed-count {
    color: #dc2626;
    font-size: 12px;
}

/* Tags */
.mybutler-tag {
    display: inline-block;
    font-size: 10px;
    padding: 1px 6px;
    border-radius: 4px;
    background: #f1f5f9;
    color: #64748b;
    margin-right: 3px;
}

.mybutler-tag-none {
    color: #cbd5e1;
    font-size: 12px;
}

/* Action buttons */
.mybutler-btn-retry {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.mybutler-btn-retry:hover {
    background: #bfdbfe;
}

.mybutler-btn-delete {
    background: none;
    border: 1px solid #e2e8f0;
    color: #94a3b8;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}

.mybutler-btn-delete:hover {
    background: #fecaca;
    color: #991b1b;
    border-color: #fca5a5;
}

/* Table column widths */
.col-id { width: 50px; }
.col-status { width: 80px; }
.col-pages { width: 80px; }
.col-tags { width: 120px; }
.col-date { width: 120px; white-space: nowrap; }
.col-duration { width: 60px; text-align: center; }
.col-actions { width: 100px; text-align: right; white-space: nowrap; }


/* ============================================
   JOB HISTORY TABLE
   ============================================ */

#mybutler-job-history-list tr {
    cursor: pointer;
    transition: background 0.15s;
}

#mybutler-job-history-list tr:hover {
    background: #f1f5f9;
}

/* Status badges */
.mybutler-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.mybutler-badge-completed {
    background: #dcfce7;
    color: #166534;
}

.mybutler-badge-completed_with_errors {
    background: #fef3c7;
    color: #92400e;
}

.mybutler-badge-warning {
    background: #fef3c7;
    color: #92400e;
}

.mybutler-badge-failed {
    background: #fee2e2;
    color: #991b1b;
}

.mybutler-badge-processing,
.mybutler-badge-ready,
.mybutler-badge-uploaded,
.mybutler-badge-created {
    background: #e0e7ff;
    color: #3730a3;
}

.mybutler-badge-cleaned {
    background: #e0f2fe;
    color: #0c4a6e;
}

/* Tags (inline with filename) */
.mybutler-tag {
    display: inline-block;
    font-size: 9px;
    padding: 0 4px;
    border-radius: 3px;
    background: #e0f2fe;
    color: #0c4a6e;
    margin-left: 3px;
    vertical-align: middle;
}

.mybutler-tag-none {
    color: #cbd5e1;
}

/* Filename in table — truncate filename, always show tags */
.col-file {
    overflow: visible !important;
    white-space: normal !important;
}

.col-file .mybutler-filename-truncate {
    display: inline-block;
    max-width: 80%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
    margin-right: 4px;
}

.col-file .mybutler-job-link {
    display: inline;
    margin-right: 2px;
}

/* Failed count */
.mybutler-failed-count {
    color: #dc2626;
    font-size: 13px;
    font-weight: 600;
}

/* Action buttons */
.mybutler-btn-retry {
    font-size: 13px;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #f59e0b;
    background: #fef3c7;
    color: #92400e;
    cursor: pointer;
    margin-right: 2px;
    line-height: 1;
}

.mybutler-btn-retry:hover {
    background: #fde68a;
}

.mybutler-btn-delete {
    font-size: 12px;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #e2e8f0;
    background: transparent;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
}

.mybutler-btn-delete:hover {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
}

.mybutler-btn-pdf {
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid #2563eb;
    background: #eff6ff;
    color: #2563eb;
    text-decoration: none;
    margin-right: 2px;
    line-height: 1;
}

.mybutler-btn-pdf:hover {
    background: #dbeafe;
}

/* Filename link */
.mybutler-job-link {
    color: #2563eb;
    cursor: pointer;
}

.mybutler-job-link:hover {
    text-decoration: underline;
}

/* Column widths */
.col-id { width: 6%; }
.col-file { width: 38%; }
.col-status { width: 12%; }
.col-pages { width: 8%; }
.col-date { width: 16%; }
.col-duration { width: 7%; }
.col-actions { width: 10%; text-align: right; }


/* ============================================
   MASTER-DETAIL DASHBOARD LAYOUT
   ============================================ */

#mybutler-dashboard {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    min-height: 400px;
    width: 100%;
    margin: 0 auto;
    box-sizing: border-box;
    padding: 0 24px;
}

/* Force WP theme content area wider to fit dashboard */
body:has(#mybutler-dashboard) .entry-content,
body:has(#mybutler-dashboard) .post-content,
body:has(#mybutler-dashboard) .page-content,
body:has(#mybutler-dashboard) .wp-block-post-content,
body:has(#mybutler-dashboard) .wp-block-group__inner-container,
body:has(#mybutler-dashboard) article .entry-content,
body:has(#mybutler-dashboard) .site-content .content-area,
body:has(#mybutler-dashboard) main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

/* Also target Flavor / flavor child themes */
body:has(#mybutler-dashboard) .alignwide,
body:has(#mybutler-dashboard) .alignfull,
body:has(#mybutler-dashboard) .wp-site-blocks > * {
    max-width: 100% !important;
}

/* Block theme constrained layout override */
body:has(#mybutler-dashboard) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body:has(#mybutler-dashboard) .is-layout-constrained > * {
    max-width: 100% !important;
}

body:has(#mybutler-dashboard) .wp-site-blocks,
body:has(#mybutler-dashboard) .wp-site-blocks > .wp-block-group,
body:has(#mybutler-dashboard) .wp-site-blocks > .wp-block-template-part {
    max-width: 100% !important;
}

/* Left panel: Job History */
#mybutler-job-history {
    flex: 0 0 50%;
    min-width: 0;
    max-width: 50%;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
}

.mybutler-panel-title {
    margin: 0;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    color: #1e293b;
    border-bottom: 1px solid #e2e8f0;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* --- Search bar --- */
.mybutler-search-bar {
    padding: 8px 12px;
    background: #f8fafc;
    border-bottom: 1px solid #e2e8f0;
    position: relative;
}
.mybutler-search-bar input {
    width: 100%;
    padding: 7px 30px 7px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
    background: #fff;
    box-sizing: border-box;
}
.mybutler-search-bar input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.mybutler-search-clear {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 14px;
    cursor: pointer;
    color: #94a3b8;
    padding: 4px;
    line-height: 1;
}
.mybutler-search-clear:hover { color: #475569; }

/* --- Expand button --- */
.mybutler-expand-btn {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
    color: #64748b;
    padding: 2px 7px;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}
.mybutler-expand-btn:hover {
    background: #e2e8f0;
    color: #1e293b;
}

/* --- Panel expand states --- */
#mybutler-dashboard #mybutler-job-history,
#mybutler-dashboard #mybutler-job-detail {
    transition: flex 0.25s ease, max-width 0.25s ease;
}

#mybutler-dashboard.mybutler-left-expanded #mybutler-job-history {
    flex: 0 0 66%;
    max-width: 66%;
}
#mybutler-dashboard.mybutler-left-expanded #mybutler-job-detail {
    flex: 0 0 33%;
    max-width: 33%;
}

#mybutler-dashboard.mybutler-right-expanded #mybutler-job-history {
    flex: 0 0 33%;
    max-width: 33%;
}
#mybutler-dashboard.mybutler-right-expanded #mybutler-job-detail {
    flex: 0 0 66%;
    max-width: 66%;
}

.mybutler-table-scroll {
    max-height: 70vh;
    overflow-y: auto;
}

.mybutler-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    table-layout: fixed;
}

.mybutler-history-table th,
.mybutler-history-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mybutler-history-table thead {
    position: sticky;
    top: 0;
    background: #f8fafc;
    z-index: 1;
}

.mybutler-history-table th {
    padding: 8px 6px;
    text-align: left;
    font-weight: 600;
    color: #64748b;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    border-bottom: 2px solid #e2e8f0;
}

/* table-layout:fixed uses first-row widths — set on th so cols size correctly */
.mybutler-history-table th:nth-child(1) { width: 6%; }   /* # */
.mybutler-history-table th:nth-child(2) { width: 38%; }  /* File */
.mybutler-history-table th:nth-child(3) { width: 12%; }  /* Status */
.mybutler-history-table th:nth-child(4) { width: 8%; }   /* Pages */
.mybutler-history-table th:nth-child(5) { width: 16%; }  /* Date */
.mybutler-history-table th:nth-child(6) { width: 7%; }   /* Time */
.mybutler-history-table th:nth-child(7) { width: 10%; }  /* Actions */

.mybutler-history-table td {
    padding: 8px 6px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

#mybutler-job-history-list tr {
    cursor: pointer;
    transition: background 0.12s;
}

#mybutler-job-history-list tr:hover {
    background: #f1f5f9;
}

#mybutler-job-history-list tr.active {
    background: #eff6ff;
    border-left: 3px solid #2563eb;
}

/* Right panel: Job Detail */
#mybutler-job-detail {
    flex: 1 1 auto;
    min-width: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    position: sticky;
    top: 20px;
    max-height: 85vh;
    overflow-y: auto;
}

#mybutler-job-detail-content {
    padding: 16px;
}

/* Responsive: stack on small screens */
@media (max-width: 900px) {
    #mybutler-dashboard {
        flex-direction: column;
    }

    #mybutler-job-history {
        flex: 1 1 100%;
        max-width: 100%;
    }

    #mybutler-job-detail {
        flex: 1 1 100%;
        position: static;
        max-height: none;
    }

    .mybutler-table-scroll {
        max-height: 40vh;
    }
}

/* ============================================
   F9: Usage dashboard widget
   ============================================ */

.mybutler-usage-wrap {
    margin-bottom: 20px;
}

.mybutler-usage-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 20px 24px;
}

.mybutler-usage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.mybutler-usage-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.mybutler-plan-badge {
    display: inline-block;
    padding: 2px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.mybutler-plan-badge-free {
    background: #f1f5f9;
    color: #64748b;
}

.mybutler-plan-badge-starter {
    background: #dbeafe;
    color: #1d4ed8;
}

.mybutler-plan-badge-pro {
    background: #fef3c7;
    color: #b45309;
}

.mybutler-plan-badge-biz {
    background: #ede9fe;
    color: #6d28d9;
}

.mybutler-usage-bar-wrap {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 10px;
}

.mybutler-usage-bar {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s;
}

.mybutler-usage-stats {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 4px;
}

.mybutler-usage-reset {
    font-size: 13px;
    color: #64748b;
    margin-bottom: 12px;
}

.mybutler-usage-warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 12px;
}

.mybutler-usage-warning-critical {
    background: #fef2f2;
    color: #991b1b;
    border-color: #fecaca;
}

.mybutler-usage-cta {
    text-align: center;
}

/* ============================================
   F9: Upgrade modal
   ============================================ */

.mybutler-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}

.mybutler-modal-card {
    background: #fff;
    border-radius: 12px;
    padding: 32px;
    max-width: 440px;
    width: 90%;
    position: relative;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.mybutler-modal-card h3 {
    margin: 0 0 12px 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.mybutler-modal-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.mybutler-modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.mybutler-modal-close:hover {
    color: #1e293b;
}

.mybutler-modal-bar-wrap {
    height: 8px;
    background: #e5e7eb;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.mybutler-modal-bar {
    height: 100%;
    border-radius: 4px;
}

.mybutler-modal-usage-text {
    font-size: 13px;
    color: #64748b;
}


/* ============================================
   F9: Pricing page
   ============================================ */

/* Force WP theme content area wider for pricing grid */
body:has(#mybutler-pricing) .entry-content,
body:has(#mybutler-pricing) .post-content,
body:has(#mybutler-pricing) .page-content,
body:has(#mybutler-pricing) .wp-block-post-content,
body:has(#mybutler-pricing) .wp-block-group__inner-container,
body:has(#mybutler-pricing) article .entry-content,
body:has(#mybutler-pricing) .site-content .content-area,
body:has(#mybutler-pricing) main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

body:has(#mybutler-pricing) .alignwide,
body:has(#mybutler-pricing) .alignfull,
body:has(#mybutler-pricing) .wp-site-blocks > * {
    max-width: 100% !important;
}

body:has(#mybutler-pricing) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body:has(#mybutler-pricing) .is-layout-constrained > * {
    max-width: 100% !important;
}

body:has(#mybutler-pricing) .wp-site-blocks,
body:has(#mybutler-pricing) .wp-site-blocks > .wp-block-group,
body:has(#mybutler-pricing) .wp-site-blocks > .wp-block-template-part {
    max-width: 100% !important;
}

.mybutler-pricing-wrap {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 16px;
}

.mybutler-pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    align-items: start;
}

.mybutler-pricing-card {
    position: relative;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
}

.mybutler-pricing-card-highlight {
    border-color: #2563eb;
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.12);
}

.mybutler-pricing-card-current {
    border-color: #16a34a;
}

.mybutler-pricing-popular {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #2563eb;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.mybutler-pricing-current-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #16a34a;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.mybutler-pricing-header {
    text-align: center;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #f1f5f9;
}

.mybutler-pricing-plan-name {
    margin: 0 0 12px 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.mybutler-pricing-price {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    margin-bottom: 6px;
}

.mybutler-pricing-currency {
    font-size: 20px;
    font-weight: 600;
    color: #64748b;
}

.mybutler-pricing-amount {
    font-size: 40px;
    font-weight: 800;
    color: #1e293b;
    line-height: 1;
}

.mybutler-pricing-period {
    font-size: 14px;
    color: #94a3b8;
    font-weight: 500;
}

.mybutler-pricing-pages {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.mybutler-pricing-features {
    list-style: none;
    margin: 0 0 24px 0;
    padding: 0;
    flex: 1;
}

.mybutler-pricing-features li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
    color: #334155;
    line-height: 1.4;
}

.mybutler-pricing-features li.no-feature {
    color: #cbd5e1;
}

.mybutler-pricing-check {
    flex-shrink: 0;
    width: 18px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
}

li.has-feature .mybutler-pricing-check {
    color: #16a34a;
}

li.no-feature .mybutler-pricing-check {
    color: #e2e8f0;
}

.mybutler-pricing-cta {
    text-align: center;
    margin-top: auto;
}

.mybutler-pricing-cta .mybutler-btn {
    width: 100%;
    justify-content: center;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
}

.mybutler-btn-current {
    background: #f1f5f9;
    color: #64748b;
    border-color: #e2e8f0;
    cursor: default;
}

.mybutler-btn-current:hover {
    background: #f1f5f9;
    border-color: #e2e8f0;
}

/* Responsive: 2 columns on tablet */
@media (max-width: 900px) {
    .mybutler-pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsive: single column on mobile */
@media (max-width: 540px) {
    .mybutler-pricing-grid {
        grid-template-columns: 1fr;
        max-width: 360px;
        margin: 0 auto;
    }
}


/* ============================================
   F5: Front-end document editor
   ============================================ */

/* Force WP theme content area wider for editor */
body:has(#mybutler-editor-wrap) .entry-content,
body:has(#mybutler-editor-wrap) .post-content,
body:has(#mybutler-editor-wrap) .page-content,
body:has(#mybutler-editor-wrap) .wp-block-post-content,
body:has(#mybutler-editor-wrap) .wp-block-group__inner-container,
body:has(#mybutler-editor-wrap) article .entry-content,
body:has(#mybutler-editor-wrap) .site-content .content-area,
body:has(#mybutler-editor-wrap) main {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    box-sizing: border-box !important;
}

body:has(#mybutler-editor-wrap) .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
body:has(#mybutler-editor-wrap) .is-layout-constrained > * {
    max-width: 100% !important;
}

body:has(#mybutler-editor-wrap) .wp-site-blocks,
body:has(#mybutler-editor-wrap) .wp-site-blocks > .wp-block-group,
body:has(#mybutler-editor-wrap) .wp-site-blocks > .wp-block-template-part {
    max-width: 100% !important;
}

.mybutler-editor-wrap {
    max-width: 70% !important;
    width: 70% !important;
    margin: 0 auto;
}

.mybutler-editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 1px solid #e2e8f0;
    flex-wrap: wrap;
    gap: 10px;
}

.mybutler-editor-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #1e293b;
}

.mybutler-editor-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mybutler-editor-status {
    font-size: 13px;
    color: #64748b;
}

.mybutler-editor-status-success {
    color: #16a34a;
}

.mybutler-editor-status-error {
    color: #dc2626;
}

.mybutler-editor-body {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
}

/* TinyMCE iframe height */
.mybutler-editor-body .wp-editor-container {
    border: none;
}

.mybutler-editor-body .mce-tinymce {
    border: none !important;
    box-shadow: none !important;
}

.mybutler-editor-body .mce-edit-area iframe {
    min-height: 600px;
}


/* ============================================
   F13: Onboarding — Welcome Modal
   ============================================ */

.mybutler-onboarding-overlay {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mybutler-onboarding-overlay.visible {
    opacity: 1;
}

.mybutler-onboarding-card {
    max-width: 480px;
    text-align: center;
}

.mybutler-onboarding-icon {
    font-size: 48px;
    margin-bottom: 8px;
}

.mybutler-onboarding-card h3 {
    font-size: 24px;
    font-weight: 700;
    margin: 0 0 12px 0;
}

.mybutler-onboarding-card p {
    font-size: 16px;
    line-height: 1.6;
}

.mybutler-onboarding-cta {
    display: block !important;
    width: 100%;
    height: 48px;
    background: #10B981 !important;
    border-color: #10B981 !important;
    color: #fff !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    margin-top: 8px;
    cursor: pointer;
    justify-content: center;
}

.mybutler-onboarding-cta:hover {
    background: #059669 !important;
    border-color: #059669 !important;
}

/* ============================================
   F13: Onboarding — Completion Toast
   ============================================ */

/* F13: Onboarding completion — inside detail panel */
.mybutler-ob-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 36px;
}

.mybutler-ob-panel-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #10B981;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
}

.mybutler-ob-panel-title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 700;
    color: #1e293b;
}

.mybutler-ob-panel-desc {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    max-width: 340px;
}

.mybutler-ob-panel-view {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    padding: 12px 24px;
    font-size: 15px;
}

.mybutler-ob-panel-divider {
    width: 60px;
    height: 1px;
    background: #e2e8f0;
    margin: 28px 0;
}

.mybutler-ob-panel-upsell {
    margin: 0 0 12px 0;
    font-size: 13px;
    color: #94a3b8;
}

.mybutler-ob-panel-upgrade {
    font-size: 13px;
    text-decoration: none !important;
    color: #2563eb !important;
    padding: 8px 20px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: background 0.15s ease;
}

.mybutler-ob-panel-upgrade:hover {
    background: #f8fafc;
}


/* ============================================
   F13: Sample badge in job history
   ============================================ */

.mybutler-tag-sample {
    background: #d1fae5;
    color: #065f46;
}

.mybutler-tag-protected {
    background: #fef3c7;
    color: #92400e;
    font-size: 11px;
    padding: 1px 4px;
}


/* ============================================
   F13: Empty state
   ============================================ */

.mybutler-empty-state {
    padding: 32px 16px;
    text-align: center;
}

.mybutler-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
}

.mybutler-empty-title {
    font-size: 16px;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 6px;
}

.mybutler-empty-text {
    font-size: 13px;
    color: #94a3b8;
}

.mybutler-try-sample-link {
    color: #10B981;
    font-weight: 500;
    text-decoration: none;
}

.mybutler-try-sample-link:hover {
    text-decoration: underline;
}


/* ============================================
   F13: Guided Onboarding Tour
   ============================================ */

.mybutler-tour-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 10001;
    cursor: pointer;
}

/* Lift detail panel above overlay during tour (position:sticky creates stacking context) */
#mybutler-job-detail.mybutler-tour-lifted {
    z-index: 10002;
}

.mybutler-tour-highlight {
    position: relative;
    z-index: 10002;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.4), 0 0 0 9999px rgba(0, 0, 0, 0.35);
    border-radius: 6px;
    pointer-events: auto;
}

.mybutler-tour-tooltip {
    position: fixed;
    z-index: 10003;
    width: 300px;
    opacity: 0;
    transition: opacity 0.25s ease, transform 0.25s ease;
    pointer-events: auto;
}

.mybutler-tour-tooltip.visible {
    opacity: 1;
}

.mybutler-tour-content {
    background: #fff;
    border-radius: 10px;
    padding: 16px 18px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    border: 1px solid #e2e8f0;
}

.mybutler-tour-content p {
    margin: 0 0 14px 0;
    font-size: 14px;
    line-height: 1.5;
    color: #334155;
}

.mybutler-tour-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mybutler-tour-counter {
    font-size: 12px;
    color: #94a3b8;
}

.mybutler-tour-btns {
    display: flex;
    gap: 8px;
}

.mybutler-tour-skip {
    background: none;
    border: none;
    color: #94a3b8;
    font-size: 13px;
    cursor: pointer;
    padding: 6px 10px;
}

.mybutler-tour-skip:hover {
    color: #64748b;
}

.mybutler-tour-next {
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 7px 18px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s;
}

.mybutler-tour-next:hover {
    background: #1d4ed8;
}

/* Tour arrow indicators */
.mybutler-tour-tooltip::before {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    transform: rotate(45deg);
}

.mybutler-tour-pos-bottom::before {
    top: -7px;
    left: 50%;
    margin-left: -6px;
    border-right: none;
    border-bottom: none;
}

.mybutler-tour-pos-top::before {
    bottom: -7px;
    left: 50%;
    margin-left: -6px;
    border-left: none;
    border-top: none;
}

.mybutler-tour-pos-right::before {
    left: -7px;
    top: 50%;
    margin-top: -6px;
    border-top: none;
    border-right: none;
}

.mybutler-tour-pos-left::before {
    right: -7px;
    top: 50%;
    margin-top: -6px;
    border-bottom: none;
    border-left: none;
}


/* ============================================
   PROGRESS BAR — smooth transitions & animations
   ============================================ */

#mybutler-progress-bar {
    transition: width 0.5s ease;
    position: relative;
}

/* Shimmer sweep on the progress track during preparing phase */
.mybutler-progress-shimmer {
    position: relative !important;
}

.mybutler-progress-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(76, 175, 80, 0.15),
        transparent
    );
    border-radius: inherit;
    animation: mybutler-shimmer 1.5s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes mybutler-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(300%); }
}

/* Bar opacity pulse during preparing/indeterminate state */
#mybutler-progress-bar.mybutler-progress-preparing {
    animation: mybutler-pulse-bar 1.2s ease-in-out infinite;
}

@keyframes mybutler-pulse-bar {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}

/* Subtle moving stripes on bar during active processing */
#mybutler-progress-bar.mybutler-progress-active {
    background-image: linear-gradient(
        45deg,
        rgba(255, 255, 255, 0.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255, 255, 255, 0.15) 50%,
        rgba(255, 255, 255, 0.15) 75%,
        transparent 75%,
        transparent
    ) !important;
    background-size: 20px 20px;
    animation: mybutler-stripes 0.6s linear infinite;
}

@keyframes mybutler-stripes {
    0%   { background-position: 20px 0; }
    100% { background-position: 0 0; }
}

/* Disable CSS width transition during rAF-driven animation */
#mybutler-progress-bar.mybutler-progress-raf {
    transition: none !important;
}


/* ============================================
   JOB DELETE — inline "Deleting…" state
   ============================================ */

.mybutler-badge-deleting {
    background: #fee2e2;
    color: #991b1b;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.mybutler-delete-spinner {
    display: inline-block;
    width: 10px;
    height: 10px;
    border: 2px solid rgba(153, 27, 27, 0.25);
    border-top-color: #991b1b;
    border-radius: 50%;
    animation: mybutler-spin 0.6s linear infinite;
}


/* ============================================
   CONFIRM DIALOG (custom replacement for browser confirm)
   ============================================ */

.mybutler-confirm-overlay {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mybutler-confirm-overlay.visible {
    opacity: 1;
}

.mybutler-confirm-card {
    max-width: 380px;
    text-align: center;
}

.mybutler-confirm-icon {
    font-size: 36px;
    margin-bottom: 4px;
    line-height: 1;
}

.mybutler-confirm-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1e293b;
}

.mybutler-confirm-card p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.mybutler-confirm-actions {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.mybutler-confirm-actions .mybutler-btn {
    min-width: 100px;
    justify-content: center;
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
}

.mybutler-btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}

.mybutler-btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}

.mybutler-btn-danger:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
}


/* ============================================
   F15: Password Required — badge in job history
   ============================================ */

.mybutler-badge-password_required {
    background: #fef3c7;
    color: #92400e;
}


/* ============================================
   F15: Password Modal
   ============================================ */

.mybutler-pw-overlay {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.mybutler-pw-overlay.visible {
    opacity: 1;
}

.mybutler-pw-card {
    max-width: 440px;
    text-align: center;
}

.mybutler-pw-icon {
    font-size: 40px;
    margin-bottom: 4px;
    line-height: 1;
}

.mybutler-pw-card h3 {
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 8px 0;
    color: #1e293b;
}

.mybutler-pw-card > p {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 20px 0;
    line-height: 1.5;
}

.mybutler-pw-input-wrap {
    position: relative;
    margin-bottom: 12px;
}

.mybutler-pw-input {
    width: 100%;
    padding: 10px 44px 10px 14px;
    font-size: 14px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    outline: none;
    box-sizing: border-box;
    font-family: inherit;
}

.mybutler-pw-input:focus {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.mybutler-pw-toggle {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #94a3b8;
    padding: 2px 4px;
    line-height: 1;
}

.mybutler-pw-toggle:hover {
    color: #64748b;
}

.mybutler-pw-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.mybutler-pw-counter {
    font-size: 13px;
    color: #64748b;
    font-weight: 500;
}

.mybutler-pw-counter.warn {
    color: #dc2626;
    font-weight: 600;
}

.mybutler-pw-error {
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 12px;
    min-height: 20px;
}

.mybutler-pw-cancel {
    display: block;
    margin: 16px auto 0;
    background: none;
    border: none;
    font-size: 13px;
    color: #94a3b8;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
}

.mybutler-pw-cancel:hover {
    color: #dc2626;
}

/* Spinner inside unlock button */
.mybutler-pw-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: mybutler-spin 0.6s linear infinite;
    margin-right: 6px;
    vertical-align: middle;
}



/* Responsive */
@media (max-width: 640px) {
    .mybutler-pw-card {
        max-width: 92%;
        padding: 24px;
    }
}


/* ============================================
   F16: On-the-Fly Processing
   ============================================ */

/* Sensitive tag in job history */
.mybutler-tag-sensitive {
    background: #faf5ff;
    color: #7c3aed;
    font-weight: 600;
}

/* Purged badge in job history */
.mybutler-badge-purged {
    background: #f1f5f9;
    color: #94a3b8;
}

/* Sensitive toggle in upload options bar */
.mybutler-sensitive-toggle-label {
    border-left: none;
}

.mybutler-sensitive-toggle-text {
    color: #7c3aed;
    font-weight: 600;
}

/* Processing warning below progress bar */
.mybutler-sensitive-processing-warn {
    font-size: 12px;
    color: #7c3aed;
    text-align: center;
    margin-top: 6px;
    font-weight: 500;
}

/* On-the-fly detail panel (Download & Clear) */
.mybutler-sensitive-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 24px 36px;
}

.mybutler-sensitive-icon {
    font-size: 48px;
    margin-bottom: 12px;
    line-height: 1;
}

.mybutler-sensitive-title {
    margin: 0 0 8px 0;
    font-size: 18px;
    font-weight: 700;
    color: #7c3aed;
    letter-spacing: 0.5px;
}

.mybutler-sensitive-pages {
    margin: 0 0 12px 0;
    font-size: 15px;
    color: #1e293b;
    font-weight: 500;
}

.mybutler-sensitive-warning {
    margin: 0 0 24px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.5;
    max-width: 380px;
}

.mybutler-sensitive-download-btn {
    padding: 12px 32px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
}

/* Countdown timer */
.mybutler-sensitive-countdown {
    margin-top: 16px;
    font-size: 13px;
    color: #94a3b8;
    font-weight: 500;
}

.mybutler-sensitive-countdown.expired {
    color: #dc2626;
}

/* Purged detail panel */
.mybutler-sensitive-purged {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 60px 24px;
    color: #64748b;
}

.mybutler-sensitive-purged p {
    margin: 0 0 8px 0;
    font-size: 15px;
    line-height: 1.5;
}

.mybutler-sensitive-purged-sub {
    font-size: 13px !important;
    color: #94a3b8 !important;
}


/* ============================================
   F13: Responsive — Onboarding
   ============================================ */

@media (max-width: 640px) {
    .mybutler-onboarding-card {
        max-width: 92%;
        padding: 24px;
    }

    .mybutler-onboarding-card h3 {
        font-size: 20px;
    }

    .mybutler-onboarding-card p {
        font-size: 14px;
    }

    .mybutler-ob-panel {
        padding: 32px 16px 24px;
        font-size: 12px;
    }
}

/* ============================================
   F17: Cloud Integration
   ============================================ */

/* Cloud import button */
#mybutler-cloud-import-btn {
    margin-left: 8px;
}

/* Cloud source tag in job history */
.mybutler-tag-cloud {
    background: #e3f2fd;
    color: #1565c0;
    border: 1px solid #90caf9;
}

/* Cloud modal overlay */
.mybutler-cloud-modal-inner {
    background: #fff;
    border-radius: 12px;
    width: 620px;
    max-width: 95vw;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    position: relative;
}

.mybutler-cloud-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid #e0e0e0;
}

.mybutler-cloud-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.mybutler-cloud-modal-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #666;
    padding: 0 4px;
    line-height: 1;
}
.mybutler-cloud-modal-close:hover {
    color: #333;
}

/* Cloud provider tabs */
.mybutler-cloud-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid #e0e0e0;
    padding: 0 20px;
}

.mybutler-cloud-tab {
    padding: 10px 16px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: color 0.2s, border-color 0.2s;
}
.mybutler-cloud-tab:hover {
    color: #222;
}
.mybutler-cloud-tab.active {
    color: #1a73e8;
    border-bottom-color: #1a73e8;
    font-weight: 500;
}
.mybutler-cloud-tab.disconnected {
    opacity: 0.6;
}

/* Connect message */
.mybutler-cloud-connect-msg {
    padding: 24px 20px;
}

.mybutler-cloud-connect-box {
    text-align: center;
    padding: 32px 20px;
}
.mybutler-cloud-connect-box p {
    margin: 0 0 16px;
    color: #555;
}

/* Toolbar: breadcrumb + search */
.mybutler-cloud-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 20px;
    gap: 12px;
    border-bottom: 1px solid #f0f0f0;
}

.mybutler-cloud-breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    font-size: 13px;
}

.mybutler-cloud-bc-item {
    cursor: pointer;
    color: #1a73e8;
    white-space: nowrap;
}
.mybutler-cloud-bc-item:hover {
    text-decoration: underline;
}
.mybutler-cloud-bc-item:last-child {
    color: #333;
    font-weight: 500;
    cursor: default;
}
.mybutler-cloud-bc-item:last-child:hover {
    text-decoration: none;
}

.mybutler-cloud-bc-sep {
    color: #999;
    margin: 0 2px;
}

.mybutler-cloud-search {
    width: 180px;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 13px;
    outline: none;
}
.mybutler-cloud-search:focus {
    border-color: #1a73e8;
}

/* File list */
.mybutler-cloud-file-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
    min-height: 200px;
    max-height: 400px;
}

.mybutler-cloud-file-row {
    display: flex;
    align-items: center;
    padding: 8px 20px;
    cursor: pointer;
    transition: background 0.15s;
    gap: 8px;
    font-size: 14px;
}
.mybutler-cloud-file-row:hover {
    background: #f5f5f5;
}
.mybutler-cloud-file-row.is-folder {
    font-weight: 500;
}
.mybutler-cloud-file-row.selected {
    background: #e3f2fd;
}

.mybutler-cloud-file-icon {
    width: 24px;
    text-align: center;
    font-size: 16px;
    flex-shrink: 0;
}

.mybutler-cloud-file-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mybutler-cloud-file-size {
    color: #888;
    font-size: 12px;
    white-space: nowrap;
    margin-left: auto;
}

/* Loading / empty / error states */
.mybutler-cloud-loading,
.mybutler-cloud-empty,
.mybutler-cloud-error {
    text-align: center;
    padding: 40px 20px;
    color: #888;
    font-size: 14px;
}
.mybutler-cloud-error {
    color: #c00;
}

/* Footer */
.mybutler-cloud-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    border-top: 1px solid #e0e0e0;
    gap: 12px;
}

#mybutler-cloud-load-more {
    font-size: 13px;
}

/* Cloud export dropdown */
#mybutler-cloud-export-dropdown .mybutler-dropdown-menu {
    min-width: 220px;
}

/* Secondary button style */
.mybutler-btn-secondary {
    background: #f5f5f5;
    color: #333;
    border: 1px solid #ddd;
}
.mybutler-btn-secondary:hover {
    background: #eee;
}


/* ============================================
   LOCKED FEATURE VISIBILITY (UX Patch)
   Grayed-out state for plan-gated features
   ============================================ */

.mybutler-locked {
    opacity: 0.5;
    cursor: not-allowed;
    position: relative;
}

.mybutler-locked::after {
    content: '\1F512';
    font-size: 11px;
    margin-left: 6px;
    vertical-align: middle;
}

/* Suppress hover/active on locked buttons */
.mybutler-locked.mybutler-btn:hover,
.mybutler-locked.mybutler-btn:active,
.mybutler-locked.mybutler-btn-secondary:hover,
.mybutler-locked.mybutler-btn-secondary:active {
    background: inherit;
    color: inherit;
    border-color: inherit;
}

/* Locked toggle label */
.mybutler-locked.mybutler-bar-check:hover {
    color: #334155;
}

/* Locked dropdown toggle */
.mybutler-locked .mybutler-dropdown-toggle:hover {
    background: inherit;
}


/* Responsive */
@media (max-width: 640px) {
    .mybutler-cloud-modal-inner {
        width: 100%;
        max-height: 90vh;
        border-radius: 12px 12px 0 0;
    }

    .mybutler-cloud-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .mybutler-cloud-search {
        width: 100%;
    }

    #mybutler-cloud-import-btn {
        margin-left: 0;
        margin-top: 8px;
    }
}

/* ============================================
   F22: Language Switcher
   ============================================ */

.mb-lang-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.mb-lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.85);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    font-family: inherit;
}

.mb-lang-toggle:hover {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
}

.mb-lang-arrow {
    font-size: 10px;
    transition: transform 0.2s;
}

.mb-lang-switcher.open .mb-lang-arrow {
    transform: rotate(180deg);
}

.mb-lang-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 1001;
    min-width: 60px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

.mb-lang-switcher.open .mb-lang-dropdown {
    display: block;
}

.mb-lang-option {
    display: block;
    width: 100%;
    padding: 8px 14px;
    background: none;
    border: none;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #334155;
    cursor: pointer;
    transition: background 0.1s;
    font-family: inherit;
}

.mb-lang-option:hover {
    background: #f1f5f9;
}

.mb-lang-option.active {
    color: #2563eb;
    font-weight: 600;
    background: #eff6ff;
}

/* ============================================
 * F20: Virus Checkup — Banned banner + disabled upload
 * ============================================ */

.mybutler-banned-banner {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
    padding: 12px 16px;
    margin-bottom: 12px;
    color: #991b1b;
    font-size: 14px;
    line-height: 1.4;
}

.mybutler-banned-banner a {
    color: #2563eb;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 8px;
}

#mybutler-upload-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mybutler-virus-strikes {
    font-weight: 600;
    color: #f59e0b;
    font-size: 14px;
}

.mybutler-virus-banned-notice {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 6px;
    padding: 10px 14px;
    margin-top: 8px;
    color: #991b1b;
    font-size: 13px;
}

/* Admin: warning button for unban */
.mb-btn-warning {
    background: #f59e0b;
    color: #fff;
    border: none;
    padding: 6px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
}
.mb-btn-warning:hover {
    background: #d97706;
}