/**
 * My Content & Audio page styles
 *
 * @package Mementor_TTS
 * @since   3.3.14
 */

/* ==========================================================================
   Toolbar
   ========================================================================== */

.tts-ca-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px 14px;
    margin-bottom: 16px;
    padding: 14px 16px;
    background: var(--tts-bg-primary);
    border: var(--tts-border);
    border-radius: var(--tts-radius-md);
}

.tts-ca-toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.tts-ca-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tts-text-hint);
    white-space: nowrap;
}

/* Shared control sizing so search, status, type and the button are all the same
   height and align cleanly. Height is fixed + box-sized to beat core wp-admin
   input/select styles that otherwise make them different heights. */
.tts-ca-toolbar .tts-ca-search-input,
.tts-ca-toolbar select,
.tts-ca-toolbar .tts-ca-search-btn {
    height: 38px;
    box-sizing: border-box;
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    border-radius: var(--tts-radius-md);
}

.tts-ca-search-input {
    min-width: 220px;
    padding: 0 12px;
    background: var(--tts-bg-secondary);
    border: 1px solid var(--tts-border-color);
    color: var(--tts-text-primary);
}

.tts-ca-search-input:focus {
    border-color: var(--tts-purple);
    outline: none;
    box-shadow: 0 0 0 2px var(--tts-purple-bg);
    background: var(--tts-bg-primary);
}

.tts-ca-toolbar select {
    min-width: 130px;
    padding: 0 32px 0 12px;
    background-color: var(--tts-bg-secondary);
    border: 1px solid var(--tts-border-color);
    color: var(--tts-text-primary);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
}

.tts-ca-toolbar select:focus {
    border-color: var(--tts-purple);
    outline: none;
    box-shadow: 0 0 0 2px var(--tts-purple-bg);
    background-color: var(--tts-bg-primary);
}

/* Search submit button: same height as the inputs, page button styling. */
.tts-ca-toolbar .tts-ca-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 18px;
    cursor: pointer;
}

/* ==========================================================================
   Content table card surface
   ========================================================================== */

#tts-content-audio {
    background: var(--tts-bg-primary);
    border: var(--tts-border);
    border-radius: var(--tts-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
}

.tts-ca-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    color: var(--tts-text-primary);
}

.tts-ca-table thead th {
    background: var(--tts-bg-secondary);
    border-bottom: var(--tts-border);
    padding: 10px 12px;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--tts-text-secondary);
    white-space: nowrap;
    text-align: left;
}

.tts-ca-table tbody td {
    padding: 10px 12px;
    border-bottom: var(--tts-border);
    vertical-align: middle;
}

.tts-ca-table tbody tr:last-child td {
    border-bottom: none;
}

.tts-ca-table tbody tr.tts-ca-row:hover td {
    background: var(--tts-bg-secondary);
}

.tts-ca-col-check {
    width: 32px;
}

.tts-ca-col-title {
    min-width: 200px;
}

.tts-ca-col-status {
    width: 120px;
}

.tts-ca-col-date {
    width: 130px;
    white-space: nowrap;
}

.tts-ca-col-plays {
    width: 70px;
    text-align: right;
}

.tts-ca-table tbody td.tts-ca-col-plays {
    text-align: right;
}

.tts-ca-col-actions {
    width: 1%;
    white-space: nowrap;
}

/* Empty state */
.tts-ca-empty-row td {
    text-align: center;
    padding: 32px 16px;
    color: var(--tts-text-hint);
    font-size: 14px;
}

/* Title column link */
.tts-ca-table td a {
    color: var(--tts-text-primary);
    font-weight: 500;
    text-decoration: none;
}

.tts-ca-table td a:hover {
    color: var(--tts-purple);
    text-decoration: underline;
}

/* ==========================================================================
   Status badges
   ========================================================================== */

.tts-ca-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 500;
    padding: 3px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.tts-ca-badge::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.tts-ca-badge--has {
    background: var(--tts-green-bg);
    color: #0f6e56;
    border: 1px solid var(--tts-green-border);
}

.tts-ca-badge--custom {
    background: var(--tts-purple-bg);
    color: var(--tts-purple-text);
    border: 1px solid var(--tts-purple-border);
}

.tts-ca-badge--needs {
    background: var(--tts-bg-secondary);
    color: var(--tts-text-secondary);
    border: 1px solid var(--tts-border-color);
}

/* ==========================================================================
   Post-type badge
   ========================================================================== */

.tts-ca-type-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 500;
    color: var(--tts-text-hint);
    background: var(--tts-bg-secondary);
    border: var(--tts-border);
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 6px;
    text-transform: lowercase;
    vertical-align: middle;
}

/* ==========================================================================
   Action buttons
   ========================================================================== */

.tts-ca-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

/* Icon action buttons, matching the plugin's list-view icon controls. */
.tts-ca-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--tts-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s;
}

.tts-ca-icon-btn:hover {
    background: var(--tts-bg-secondary);
    border-color: var(--tts-border-color);
}

.tts-ca-icon-btn img {
    display: block;
    width: 18px;
    height: 18px;
}

.tts-ca-icon-btn.tts-ca-delete:hover {
    background: var(--tts-red-bg, #fde8e8);
    border-color: var(--tts-red-border, #f5c2c2);
}

.tts-ca-icon-btn.is-busy {
    opacity: 0.5;
    pointer-events: none;
}

/* Playing state (our play button + the custom-audio control's play button). */
.tts-ca-icon-btn.is-playing,
.tts-ca-actions .mementor-tts-play-button.is-playing {
    background: var(--tts-purple-bg);
    border-color: var(--tts-purple-border);
}

/* The custom-audio control (shared helper markup) shares the icon-button box so
   its play/download/upload/remove icons line up with our own action icons. */
.tts-ca-actions .mementor-tts-custom-add,
.tts-ca-actions .mementor-tts-custom-remove,
.tts-ca-actions .mementor-tts-play-button,
.tts-ca-actions .mementor-tts-download-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--tts-radius-sm);
    border: 1px solid transparent;
    text-decoration: none;
    transition: background 0.1s, border-color 0.1s;
}

.tts-ca-actions .mementor-tts-custom-add img,
.tts-ca-actions .mementor-tts-custom-remove img,
.tts-ca-actions .mementor-tts-play-button img,
.tts-ca-actions .mementor-tts-download-button img {
    display: block;
    width: 18px;
    height: 18px;
}

.tts-ca-actions .mementor-tts-play-button:hover,
.tts-ca-actions .mementor-tts-download-button:hover {
    background: var(--tts-bg-secondary);
    border-color: var(--tts-border-color);
}

/* Custom audio uses the same upload/download icon family; a subtle purple tint
   distinguishes it from the generated-audio actions. */
.tts-ca-actions .mementor-tts-custom-add,
.tts-ca-actions .mementor-tts-custom-remove {
    background: var(--tts-purple-bg);
    border-color: var(--tts-purple-border);
}

.tts-ca-actions .mementor-tts-custom-add:hover,
.tts-ca-actions .mementor-tts-custom-remove:hover {
    border-color: var(--tts-purple);
}

.tts-ca-actions .mementor-tts-custom-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    color: var(--tts-purple-text);
    margin-right: 2px;
}

/* "Working..." indicator shown in the title cell during an action.
   Appended right after .tts-ca-type-badge so it stays with the title. */
.tts-ca-working {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    color: #3858e9;
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

/* Queued (waiting in the bulk line) — muted, to contrast with the active row. */
.tts-ca-waiting {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    color: var(--tts-text-hint);
    margin-left: 8px;
    vertical-align: middle;
    white-space: nowrap;
}

/* "Open page" external link beside the title. */
.tts-ca-view-link {
    margin-left: 4px;
    color: var(--tts-text-hint);
    text-decoration: none;
    vertical-align: middle;
}

.tts-ca-view-link:hover {
    color: var(--tts-purple);
}

.tts-ca-view-link .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    line-height: 1;
}

/* ==========================================================================
   Bulk action bar
   ========================================================================== */

.tts-ca-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--tts-purple-bg);
    border: 1px solid var(--tts-purple-border);
    border-radius: var(--tts-radius-md);
    font-size: 13px;
    color: var(--tts-purple-text);
}

.tts-ca-bulk-bar.is-hidden {
    display: none;
}

/* Consistent, modern button sizing inside the bulk bar. */
.tts-ca-bulk-bar .tts-btn {
    height: 36px;
    padding: 0 16px;
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
}

.tts-ca-selected-count {
    font-weight: 600;
    margin-right: 4px;
}

.tts-ca-progress {
    margin-left: auto;
    font-size: 12px;
    color: var(--tts-text-secondary);
    min-height: 1em;
}

/* ==========================================================================
   Pagination
   ========================================================================== */

.tts-ca-pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px;
    padding: 16px 0 4px;
}

.tts-ca-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    padding: 0 6px;
    font-size: 13px;
    border-radius: var(--tts-radius-sm);
    border: var(--tts-border);
    background: var(--tts-bg-primary);
    color: var(--tts-text-primary);
    text-decoration: none;
    transition: background 0.1s;
}

.tts-ca-pagination .page-numbers:hover {
    background: var(--tts-bg-secondary);
}

.tts-ca-pagination .page-numbers.current {
    background: var(--tts-purple);
    color: #fff;
    border-color: var(--tts-purple-dark);
}

.tts-ca-pagination .page-numbers.dots {
    border: none;
    background: none;
    cursor: default;
    min-width: auto;
}

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

@media (max-width: 782px) {
    .tts-ca-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .tts-ca-toolbar-group {
        width: 100%;
    }

    .tts-ca-toolbar-group select,
    .tts-ca-search-input {
        width: 100%;
        box-sizing: border-box;
    }

    .tts-ca-toolbar-submit {
        padding-bottom: 0;
    }

    .tts-ca-toolbar-submit .button {
        width: 100%;
    }

    /* Allow the table to scroll horizontally on small screens */
    #tts-content-audio {
        overflow-x: auto;
    }

    .tts-ca-table {
        min-width: 600px;
    }

    .tts-ca-bulk-bar {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   Title-bar: credits remaining + top-up / upgrade links
   ========================================================================== */

.tts-ca-credits {
    font-size: 13px;
    color: var(--tts-text-secondary);
    white-space: nowrap;
}

.tts-ca-credits-num {
    font-weight: 600;
    color: var(--tts-text-primary);
}

/* Manual credit-balance refresh icon. */
.tts-ca-credits-refresh {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    margin: 0;
    border: 1px solid transparent;
    border-radius: var(--tts-radius-sm);
    background: none;
    color: var(--tts-text-hint);
    cursor: pointer;
    transition: background 0.1s, border-color 0.1s, color 0.1s;
}

.tts-ca-credits-refresh:hover {
    background: var(--tts-bg-secondary);
    border-color: var(--tts-border-color);
    color: var(--tts-purple);
}

.tts-ca-credits-refresh .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 1;
}

.tts-ca-credits-refresh.is-spinning .dashicons {
    animation: tts-ca-spin 0.7s linear infinite;
}

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

.tts-ca-topbar-link {
    font-size: 13px;
    color: var(--tts-purple);
    text-decoration: none;
    white-space: nowrap;
}

.tts-ca-topbar-link:hover {
    text-decoration: underline;
}

/* Thin separators only between adjacent topbar items. */
.tts-topbar-actions .tts-ca-credits + .tts-ca-topbar-link::before,
.tts-topbar-actions .tts-ca-topbar-link + .tts-ca-topbar-link::before {
    content: "|";
    margin: 0 10px;
    color: var(--tts-border-color);
}

/* ==========================================================================
   Voice setup summary card
   ========================================================================== */

.tts-ca-voice-setup {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 24px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: var(--tts-bg-primary);
    border: var(--tts-border);
    border-radius: var(--tts-radius-md);
}

.tts-ca-vs-items {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 22px;
}

.tts-ca-vs-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tts-ca-vs-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--tts-text-hint);
}

.tts-ca-vs-value {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tts-text-primary);
}

.tts-ca-vs-preview {
    width: 24px;
    height: 24px;
}

.tts-ca-vs-preview img {
    width: 16px;
    height: 16px;
}

.tts-ca-vs-note {
    margin: 0;
    font-size: 12px;
    color: var(--tts-text-secondary);
}

.tts-ca-vs-note a {
    color: var(--tts-purple);
    text-decoration: none;
}

.tts-ca-vs-note a:hover {
    text-decoration: underline;
}

@media (max-width: 782px) {
    .tts-ca-voice-setup {
        flex-direction: column;
        align-items: flex-start;
    }
}