/**
 * Shared tool UI — consistent action buttons, colors, icons order, mobile layout.
 * Loaded on every tool page via template-base.php.
 *
 * Button sequence (flex order): Primary action → Clear/Reset → Copy (optional) → Download
 * Colors match Image→Excel green theme (#0f3b2a / #1f5a3f / #e4eee8).
 */

/* ---- Action row layout ---- */
[class*="-action-row"],
.tool-action-row,
.action-buttons {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    justify-content: flex-start;
}

/* Force consistent sequence regardless of DOM order */
[class*="-action-row"] > button[id$="ConvertBtn"],
[class*="-action-row"] > button[id$="ProcessBtn"],
[class*="-action-row"] > button[id$="ProtectBtn"],
[class*="-action-row"] > button[id$="UnlockBtn"],
[class*="-action-row"] > button[id$="MergeBtn"],
[class*="-action-row"] > button[id$="JoinBtn"],
[class*="-action-row"] > button[id$="GenerateBtn"],
[class*="-action-row"] > button[id$="RenameBtn"],
[class*="-action-row"] > button[id$="UploadBtn"],
[class*="-action-row"] > button[id="btn-create"],
[class*="-action-row"] > button[id="btn-upload"],
[class*="-action-row"] > button[id="btn-apply"],
[class*="-action-row"] > button[id="mergeBtn"],
[class*="-action-row"] > button[id="mergeBtnBottom"],
[class*="-action-row"] > .tool-btn-primary,
[class*="-action-row"] > [class*="-btn-primary"],
.action-buttons > .btn-primary,
.action-buttons > button[id="mergeBtn"],
.action-buttons > button[id="mergeBtnBottom"] {
    order: 1;
}

[class*="-action-row"] > button[id$="ClearBtn"],
[class*="-action-row"] > button[id$="ResetBtn"],
[class*="-action-row"] > button[id$="RemoveBtn"],
[class*="-action-row"] > button[id="btn-clear"],
[class*="-action-row"] > button[id="btn-reset"] {
    order: 2;
}

[class*="-action-row"] > button[id$="CopyBtn"] {
    order: 3;
}

[class*="-action-row"] > button[id$="DownloadBtn"],
[class*="-action-row"] > a[id$="DownloadBtn"],
[class*="-action-row"] > a[id="btn-download"],
[class*="-action-row"] > button[id="btn-download"] {
    order: 4;
}

/* ---- Shared button face (primary) ---- */
[class*="-action-row"] > [class*="-btn-primary"],
[class*="-action-row"] > .tool-btn-primary,
[class*="-action-row"] > button[id$="ConvertBtn"],
[class*="-action-row"] > button[id$="ProcessBtn"],
[class*="-action-row"] > button[id$="ProtectBtn"],
[class*="-action-row"] > button[id$="UnlockBtn"],
[class*="-action-row"] > button[id$="MergeBtn"],
[class*="-action-row"] > button[id$="JoinBtn"],
[class*="-action-row"] > button[id$="GenerateBtn"],
[class*="-action-row"] > button[id$="RenameBtn"],
[class*="-action-row"] > button[id$="UploadBtn"],
[class*="-action-row"] > button[id="btn-create"],
[class*="-action-row"] > button[id="btn-upload"],
[class*="-action-row"] > button[id="btn-apply"],
[class*="-action-row"] > button[id="mergeBtn"],
[class*="-action-row"] > button[id="mergeBtnBottom"],
[class*="-action-row"] > .btn.btn-primary,
.action-buttons > .btn-primary,
.action-buttons > button[id="mergeBtn"],
.action-buttons > button[id="mergeBtnBottom"] {
    background: linear-gradient(135deg, #0f3b2a, #1f5a3f) !important;
    color: #fff !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 40px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer;
    transition: transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: 46px;
    box-sizing: border-box;
    text-decoration: none !important;
}

[class*="-action-row"] > [class*="-btn-primary"]:hover:not(:disabled),
[class*="-action-row"] > .tool-btn-primary:hover:not(:disabled),
[class*="-action-row"] > button[id$="ConvertBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id$="ProcessBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id$="RenameBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id$="UnlockBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id="btn-create"]:hover:not(:disabled),
[class*="-action-row"] > button[id="btn-apply"]:hover:not(:disabled),
[class*="-action-row"] > .btn.btn-primary:hover:not(:disabled),
.action-buttons > .btn-primary:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(15, 59, 42, 0.3);
    color: #fff !important;
}

/* ---- Shared button face (secondary) ---- */
[class*="-action-row"] > [class*="-btn-secondary"],
[class*="-action-row"] > .tool-btn-secondary,
[class*="-action-row"] > button[id$="ClearBtn"],
[class*="-action-row"] > button[id$="ResetBtn"],
[class*="-action-row"] > button[id$="CopyBtn"],
[class*="-action-row"] > button[id$="DownloadBtn"],
[class*="-action-row"] > button[id$="RemoveBtn"],
[class*="-action-row"] > button[id="btn-clear"],
[class*="-action-row"] > button[id="btn-reset"],
[class*="-action-row"] > button[id="btn-download"],
[class*="-action-row"] > a[id$="DownloadBtn"],
[class*="-action-row"] > a[id="btn-download"],
[class*="-action-row"] > .btn.btn-secondary,
[class*="-action-row"] > .btn.btn-danger,
[class*="-action-row"] > .btn.btn-ghost:not(.btn-tiny) {
    background: #e4eee8 !important;
    color: #0f3b2a !important;
    border: none !important;
    padding: 12px 30px !important;
    border-radius: 40px !important;
    font-weight: 500 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    cursor: pointer;
    transition: background 0.25s ease, opacity 0.2s ease;
    font-size: 14px !important;
    line-height: 1.2 !important;
    min-height: 46px;
    box-sizing: border-box;
    text-decoration: none !important;
}

[class*="-action-row"] > [class*="-btn-secondary"]:hover:not(:disabled),
[class*="-action-row"] > button[id$="ClearBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id$="DownloadBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id$="CopyBtn"]:hover:not(:disabled),
[class*="-action-row"] > button[id="btn-clear"]:hover:not(:disabled),
[class*="-action-row"] > a[id$="DownloadBtn"]:hover:not([aria-disabled="true"]),
[class*="-action-row"] > .btn.btn-secondary:hover:not(:disabled),
[class*="-action-row"] > .btn.btn-danger:hover:not(:disabled) {
    background: #d5e6db !important;
    color: #0f3b2a !important;
}

[class*="-action-row"] > button:disabled,
[class*="-action-row"] > a.is-disabled,
[class*="-action-row"] > a[aria-disabled="true"],
[class*="-action-row"] > [class*="-btn-primary"]:disabled,
[class*="-action-row"] > [class*="-btn-secondary"]:disabled,
[class*="-action-row"] > .btn:disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
    transform: none !important;
    box-shadow: none !important;
    pointer-events: none;
}

/* Consistent icons sizing */
[class*="-action-row"] > button i.fas,
[class*="-action-row"] > button i.far,
[class*="-action-row"] > button i.fab,
[class*="-action-row"] > a i.fas,
[class*="-action-row"] > a i.far,
.action-buttons > button i.fas {
    font-size: 14px;
    width: 1.1em;
    text-align: center;
}

/* Upload zones: touch-friendly */
[class*="-upload-zone"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
[class*="-upload-zone"] input[type="file"] {
    font-size: 16px;
}

/* Status / progress spacing */
[class*="-status-box"],
[class*="-progress"] {
    max-width: 100%;
    box-sizing: border-box;
}

/* Mobile: full-width stacked actions */
@media (max-width: 640px) {
    [class*="-action-row"],
    .tool-action-row,
    .action-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    [class*="-action-row"] > button,
    [class*="-action-row"] > a[id$="DownloadBtn"],
    [class*="-action-row"] > a[id="btn-download"],
    [class*="-action-row"] > [class*="-btn-primary"],
    [class*="-action-row"] > [class*="-btn-secondary"],
    [class*="-action-row"] > .tool-btn-primary,
    [class*="-action-row"] > .tool-btn-secondary,
    [class*="-action-row"] > .btn,
    .action-buttons > button,
    .action-buttons > .btn {
        width: 100% !important;
        justify-content: center !important;
        min-height: 48px;
        padding: 12px 16px !important;
        font-size: 14px !important;
    }

    [class*="-options-grid"],
    [class*="-options"] .opts-grid {
        grid-template-columns: 1fr !important;
    }

    [class*="-upload-zone"] {
        padding: 28px 14px;
        min-height: 140px;
    }
}

/* Dark theme */
[data-bs-theme="dark"] [class*="-action-row"] > [class*="-btn-secondary"],
[data-bs-theme="dark"] [class*="-action-row"] > button[id$="ClearBtn"],
[data-bs-theme="dark"] [class*="-action-row"] > button[id$="DownloadBtn"],
[data-bs-theme="dark"] [class*="-action-row"] > button[id$="CopyBtn"],
[data-bs-theme="dark"] [class*="-action-row"] > button[id="btn-clear"],
[data-bs-theme="dark"] [class*="-action-row"] > a[id$="DownloadBtn"],
[data-bs-theme="dark"] [class*="-action-row"] > .btn.btn-secondary,
[data-bs-theme="dark"] [class*="-action-row"] > .btn.btn-danger {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}
[data-bs-theme="dark"] [class*="-action-row"] > [class*="-btn-secondary"]:hover:not(:disabled),
[data-bs-theme="dark"] [class*="-action-row"] > button[id$="ClearBtn"]:hover:not(:disabled),
[data-bs-theme="dark"] [class*="-action-row"] > button[id$="DownloadBtn"]:hover:not(:disabled),
[data-bs-theme="dark"] [class*="-action-row"] > a[id$="DownloadBtn"]:hover:not([aria-disabled="true"]) {
    background: #374151 !important;
}