/**
 * Short URL Plugin - Public Styles
 * Uses unified styles from WhatsApp plugin
 * Only plugin-specific layout styling here
 * 
 * IMPORTANT: Form controls and buttons inherit from unified-styles.css
 * Do NOT override .form-control or .btn styles here
 */

/* Public-facing styles - layout only */
.acortar-url-container {
    padding: 0; /* Use unified .tab-content padding */
    max-width: none; /* Match WhatsApp page full-width behavior */
    margin: 0 auto;
}

.acortar-url-header {
    margin-bottom: 30px;
}

/* Header title styling is handled by unified-styles.css via .whatsapp-header .header-title h1 */
/* Add top padding to the title */
.whatsapp-header.acortar-url-header .header-title h1 {
    padding-top: 20px;
}

.acortar-url-description {
    color: var(--text-secondary);
    font-size: 14px;
    margin-top: 15px;
}

.acortar-url-form {
    background: var(--bg-primary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
}

/* Form actions wrapper for buttons */
.form-actions {
    margin-top: 30px;
    display: flex;
    gap: 10px;
}

.acortar-url-message {
    padding: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    text-align: center;
    margin: 20px auto;
    max-width: 600px;
}

.acortar-url-message p {
    margin-bottom: 15px;
}

/* 
 * CRITICAL: Ensure unified styles apply to form controls
 * The unified styles define .form-group input at line 2657 with:
 * - padding: 12px 16px
 * - border: 2px solid var(--border-primary)
 * - border-radius: 8px
 * 
 * However, .form-control class (line 108) has higher CSS specificity,
 * so we need to ensure .form-group input styles take precedence
 * by using a more specific selector
 */
.acortar-url-form .form-group input.form-control,
.acortar-url-form .form-group textarea.form-control,
.acortar-url-form .form-group select.form-control {
    /* Override .form-control to use unified .form-group input styles */
    padding: 12px 16px !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    transition: all 0.3s ease !important;
    background: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    box-sizing: border-box !important;
}

.acortar-url-form .form-group input.form-control:focus,
.acortar-url-form .form-group textarea.form-control:focus,
.acortar-url-form .form-group select.form-control:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(193, 20, 158, 0.1) !important;
    transform: translateY(-1px) !important;
}

.acortar-url-form .form-group input.form-control:hover,
.acortar-url-form .form-group textarea.form-control:hover,
.acortar-url-form .form-group select.form-control:hover {
    border-color: var(--primary-hover) !important;
}

/* Validation states */
.acortar-url-form .form-group input.form-control.valid,
.acortar-url-form .form-group textarea.form-control.valid {
    border-color: #28a745 !important;
}

.acortar-url-form .form-group input.form-control.invalid,
.acortar-url-form .form-group textarea.form-control.invalid {
    border-color: #dc3545 !important;
}

/* Error messages */
.acortar-url-container .error-message {
    /* Unified warning style: border-left accent, no background */
    font-size: 12px;
    margin-top: 6px;
    min-height: 18px;
    padding-left: 10px;
    border-left: 4px solid var(--primary-color);
    background: transparent;
    color: var(--text-primary);
}

/* Input with button */
.input-with-button {
    display: flex;
    gap: 10px;
    align-items: center;
}

/*
 * Button styling - Following WhatsApp plugin pattern
 * Unified styles from whatsapp-plugin/public/assets/css/unified-styles.css handle most buttons
 * Only add specific overrides when needed, matching WhatsApp's form-actions pattern
 * 
 * REFERENCE: See BUTTON_STYLING_GUIDE.md for solution pattern when buttons don't render correctly
 * Pattern matches WhatsApp unified-styles.css lines 3442-3478, scoped to .acortar-url-container
 */

/* Force unified styling on form action buttons - matches WhatsApp plugin lines 3442-3478 */
.acortar-url-container .form-actions .btn,
.acortar-url-container .form-actions .btn-primary,
.acortar-url-container .form-actions .btn-secondary,
.acortar-url-container .form-actions .btn-success {
    background: var(--bg-primary) !important;
    color: var(--primary-color) !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: 8px !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    transition: all 0.3s ease !important;
    text-align: center !important;
    cursor: pointer !important;
    display: inline-block !important;
    text-decoration: none !important;
    font-family: inherit !important;
    line-height: 1.5 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.acortar-url-container .form-actions .btn:hover,
.acortar-url-container .form-actions .btn-primary:hover,
.acortar-url-container .form-actions .btn-secondary:hover,
.acortar-url-container .form-actions .btn-success:hover {
    background: var(--primary-color) !important;
    color: var(--text-white) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(193, 20, 158, 0.3) !important;
    border-color: var(--primary-color) !important;
}

.input-with-button input {
    flex: 1;
}

.input-with-button .btn {
    white-space: nowrap;
}

/* Form messages */
.form-message {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 8px;
    border: 2px solid;
}

.form-message.success {
    background-color: #d4edda;
    border-color: #c3e6cb;
    color: #155724;
}

.form-message.error {
    /* Unified warning style: border-left accent, no background */
    background: transparent;
    border: none;
    border-left: 4px solid var(--primary-color);
    color: var(--text-primary);
}

/* Loading indicator */
.suggestion-loading,
.suggestion-error {
    font-size: 12px;
    margin-top: 5px;
}

.suggestion-loading {
    color: var(--primary-color);
}

.suggestion-error {
    color: #dc3545;
}

/* Copy URL button in success message */
.copy-url-btn {
    display: none;
    padding: 8px 16px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.form-message.success .copy-url-btn {
    display: inline-block !important;
    background-color: #007bff;
    color: white;
}

.form-message.success .copy-url-btn:hover {
    background-color: #0056b3;
}

.form-message.success .copy-url-btn:disabled {
    background-color: #28a745;
    cursor: not-allowed;
}

/* Compact table density similar to WhatsApp history table */
#acortar-url-table-container {
    width: 100%;
}

/* Outer Manage card outline to match WhatsApp page */
/* Tab body outline to match WhatsApp: apply to tab-content itself */
#manage-tab,
#create-tab {
    border: 1px solid var(--border-primary);
    border-radius: 0; /* squared corners as requested */
    background: var(--bg-primary);
}

/* Keep inner card clean (no extra border) */
.acortar-url-management > .card {
    border: none;
    box-shadow: none;
}

#acortar-url-table {
    font-size: 13px;
    width: 1380px; /* fixed width: checkbox(50px) + Acciones(60px) + Descripción(280px) + Etiquetas(280px) + URL corta(250px) + URL larga(300px) + Creado(80px) + Usado(80px) = 1380px */
    table-layout: fixed; /* enforce percentage column widths */
}

#acortar-url-table th,
#acortar-url-table td {
    padding: 8px 12px;
}

/* Column widths in pixels */
/* Note: Column 1 is checkbox (50px inline), Column 2 is Actions (60px inline) */
#acortar-url-table th:nth-child(3),
#acortar-url-table td:nth-child(3) {
    width: 280px; /* Descripción */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

#acortar-url-table th:nth-child(4),
#acortar-url-table td:nth-child(4) {
    width: 280px; /* Etiquetas */
    white-space: normal;
    word-break: break-word;
}

/* Tag links styling - primary color with underline on hover */
#acortar-url-table .tags-cell .clickable-tag {
    color: var(--primary-color, #C1149E);
    text-decoration: none;
    cursor: pointer;
    transition: all 0.2s ease;
}

#acortar-url-table .tags-cell .clickable-tag:hover {
    text-decoration: underline;
    color: var(--primary-color, #C1149E);
}

#acortar-url-table th:nth-child(5),
#acortar-url-table td:nth-child(5) {
    width: 250px; /* URL corta */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acortar-url-table th:nth-child(6),
#acortar-url-table td:nth-child(6) {
    width: 300px; /* URL larga */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#acortar-url-table th:nth-child(7),
#acortar-url-table td:nth-child(7) {
    width: 80px; /* Creado */
    white-space: nowrap;
}

#acortar-url-table th:nth-child(8),
#acortar-url-table td:nth-child(8) {
    width: 80px; /* Usado */
    white-space: nowrap;
}

/* Bulk actions container */
.bulk-actions-container {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 12px;
    border: 1px solid var(--border-primary);
    border-radius: 8px;
    background: var(--bg-secondary);
}

.bulk-actions-container button {
    margin: 0;
}

/* Checkbox column styling - use unified styles from WhatsApp plugin */
.checkbox-column {
    width: 50px !important;
    text-align: center !important;
}

.checkbox-column input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
    accent-color: var(--primary-color) !important;
}

/* =============================================== */
/* DROPDOWN ACTIONS - Matching WhatsApp Pattern   */
/* =============================================== */

/* Ensure all parent containers allow overflow for dropdowns */
.acortar-url-container,
.tab-pane,
.tab-content,
.card,
.form-group {
    overflow: visible !important;
}

/* Specific table overflow fixes */
/* CRITICAL: Table container must allow overflow-x visible for dropdowns to work */
#acortar-url-table-container.scrollable-table-container {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

#acortar-url-table-container {
    overflow-y: auto !important;
    overflow-x: visible !important;
}

#acortar-url-table,
#acortar-url-table tbody,
#acortar-url-table tbody tr,
#acortar-url-table tbody td,
#acortar-url-table thead,
#acortar-url-table thead tr,
#acortar-url-table thead th {
    overflow: visible !important;
}

/* Actions dropdown wrapper - matches WhatsApp template actions pattern exactly */
/* Position relative for absolute positioning of dropdown */
.acortar-actions-dropdown-wrapper {
    position: relative !important;
    display: inline-block;
}

/* Make the cell itself allow overflow */
.acortar-actions-column {
    position: static !important;
    overflow: visible !important;
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    text-align: center !important;
}

/* Actions toggle button - uses unified button styling with btn-sm - make it smaller */
.acortar-actions-toggle.btn-sm {
    min-width: 32px !important;
    max-width: 40px !important;
    padding: 6px 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
}

.acortar-actions-toggle .dropdown-arrow {
    font-size: 12px;
    transition: transform 0.2s ease;
}

.acortar-actions-dropdown-content {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    min-width: 160px;
    background: var(--bg-primary);
    border: 2px solid var(--border-primary);
    border-radius: 8px;
    box-shadow: 0 8px 24px var(--shadow-medium);
    z-index: 9999;
    margin-left: 4px;
    overflow: hidden;
}

/* When dropdown is shown via jQuery .show() */
.acortar-actions-dropdown-content[style*="display: block"],
.acortar-actions-dropdown-content[style*="display:block"] {
    display: block !important;
}

.acortar-actions-menu {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
}

.acortar-action-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    box-sizing: border-box;
}

.acortar-action-item:hover {
    background: var(--bg-secondary);
    color: var(--primary-color);
}

.acortar-action-item.delete-action:hover {
    background: var(--bg-secondary);
    color: #dc2626;
}

.acortar-action-item .action-icon {
    font-size: 16px;
    width: 20px;
    text-align: center;
}

.acortar-action-item .action-text {
    flex: 1;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .acortar-actions-dropdown-content {
        left: auto;
        right: 100%;
        margin-left: 0;
        margin-right: 4px;
        min-width: 140px;
    }
    
    .acortar-actions-toggle {
        min-width: 36px;
        font-size: 13px;
        padding: 6px 10px;
    }
}

/* Existing tags display - comma-separated text links */
.existing-tags-display {
    margin-bottom: 12px !important;
    padding: 8px 0 !important;
}

.existing-tags-list {
    display: block !important;
    line-height: 1.28 !important;
    font-size: 13px !important;
}

.existing-tags-list .existing-tags-label {
    display: inline !important;
    font-size: 12px !important;
    color: var(--text-secondary) !important;
    margin-right: 8px !important;
    font-weight: 500 !important;
    margin-bottom: 0 !important;
}

/* Existing tag links - comma-separated text links - override all button styles */
.existing-tags-list .existing-tag.clickable-tag-link,
.existing-tags-list a.existing-tag.clickable-tag-link,
.existing-tags-list a.clickable-tag-link,
.existing-tags-list .clickable-tag-link {
    background: none !important;
    background-color: transparent !important;
    color: var(--primary-color, #C1149E) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    cursor: pointer !important;
    display: inline !important;
    text-decoration: none !important;
    transition: text-decoration 0.2s ease !important;
    border: none !important;
    border-width: 0 !important;
    font-weight: normal !important;
    box-shadow: none !important;
    transform: none !important;
    line-height: inherit !important;
    height: auto !important;
    width: auto !important;
    min-width: auto !important;
    min-height: auto !important;
}

.existing-tags-list .existing-tag.clickable-tag-link:hover,
.existing-tags-list a.existing-tag.clickable-tag-link:hover,
.existing-tags-list a.clickable-tag-link:hover,
.existing-tags-list .clickable-tag-link:hover {
    text-decoration: underline !important;
    color: var(--primary-color, #C1149E) !important;
    transform: none !important;
    box-shadow: none !important;
    border: none !important;
    background: none !important;
    background-color: transparent !important;
    padding: 0 !important;
}

/* =============================================== */
/* TAG FILTER MODAL - Frontend Styles             */
/* =============================================== */

/* Tag Filter Modal */
/* Modal overlay styles should come from unified-styles.css */
/* Adding specific overrides for tag filter modal */
#tag-filter-modal {
    z-index: 10000 !important;
}

/* Ensure modal overlay is visible when shown */
#tag-filter-modal.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    display: none !important; /* Hidden by default */
    align-items: center !important;
    justify-content: center !important;
    pointer-events: auto !important;
}

/* Show modal when it has display:flex or display:block */
#tag-filter-modal.modal-overlay[style*="display: flex"],
#tag-filter-modal.modal-overlay[style*="display:flex"],
#tag-filter-modal.modal-overlay[style*="display: block"],
#tag-filter-modal.modal-overlay[style*="display:block"] {
    display: flex !important;
}

.tag-filter-modal-content {
    position: relative !important;
    z-index: 10001 !important;
    max-width: 600px !important;
    width: 90% !important;
    max-height: 60vh !important;
    overflow-y: auto !important;
    background: var(--bg-primary) !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important;
    pointer-events: auto !important;
}

/* Modal header */
.tag-filter-modal-content .modal-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--border-primary) !important;
    position: relative !important;
    z-index: 10002 !important;
}

.tag-filter-modal-content .modal-header h3 {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    color: var(--text-primary) !important;
}

/* Ensure close button is clickable */
.tag-filter-modal-content .close-modal-btn,
.tag-filter-modal-content [data-close-modal] {
    position: relative !important;
    z-index: 10003 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
    background: transparent !important;
    border: none !important;
    font-size: 24px !important;
    line-height: 1 !important;
    padding: 0 !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: var(--text-primary) !important;
    transition: all 0.2s ease !important;
}

.tag-filter-modal-content .close-modal-btn:hover,
.tag-filter-modal-content [data-close-modal]:hover {
    color: var(--primary-color) !important;
    background: var(--bg-secondary) !important;
    border-radius: 4px !important;
}

.tag-filter-modal-body {
    padding: 20px !important;
}

/* Tag Filter Search */
.tag-filter-search {
    padding: 0 0 16px 0 !important;
    margin-bottom: 16px !important;
    border-bottom: 1px solid var(--border-primary) !important;
}

.tag-filter-search input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 2px solid var(--border-primary) !important;
    border-radius: 8px !important;
    font-size: 14px !important;
}

.tag-filter-search input:focus {
    outline: none !important;
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(193, 20, 158, 0.1) !important;
}

/* Selected Tags in Modal */
.tag-filter-selected-tags-modal {
    margin-bottom: 16px !important;
    padding: 12px !important;
    background: var(--bg-secondary) !important;
    border-radius: 8px !important;
    border: 1px solid var(--border-primary) !important;
    min-height: 40px !important;
}

/* Tag Filter Options - 2 Column Grid */
#tag-filter-modal .tag-filter-options,
.tag-filter-modal-body .tag-filter-options,
.tag-filter-options {
    padding: 0 !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Ensure grid items don't wrap */
.tag-filter-option {
    display: flex !important;
    align-items: center !important;
    padding: 10px 12px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    border: 1px solid var(--border-primary) !important;
    border-radius: 6px !important;
    background: var(--bg-primary) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.tag-filter-option:hover {
    background: var(--bg-secondary) !important;
    border-color: var(--primary-color) !important;
}

.tag-filter-option input[type="checkbox"] {
    margin-right: 10px !important;
    cursor: pointer !important;
    width: 18px !important;
    height: 18px !important;
}

.tag-filter-option label {
    cursor: pointer !important;
    font-size: 14px !important;
    color: var(--text-primary) !important;
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

.tag-color-indicator {
    width: 12px !important;
    height: 12px !important;
    border-radius: 3px !important;
    display: inline-block !important;
    flex-shrink: 0 !important;
}

.tag-name {
    flex: 1 !important;
}

.tag-count {
    color: var(--text-secondary) !important;
    font-size: 12px !important;
}

.tag-filter-loading,
.tag-filter-options .no-tags {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    padding: 20px !important;
    color: var(--text-secondary) !important;
    font-style: italic !important;
}

.tag-filter-actions {
    display: flex !important;
    gap: 12px !important;
    padding: 16px 0 0 0 !important;
    margin-top: 16px !important;
    border-top: 2px solid var(--border-primary) !important;
}

.tag-filter-actions .btn {
    flex: 1 !important;
    padding: 12px 24px !important;
    font-size: 14px !important;
}

/* Responsive: 1 column on mobile */
@media (max-width: 768px) {
    .tag-filter-options {
        grid-template-columns: 1fr !important;
    }
    
    .tag-filter-modal-content {
        width: 95% !important;
        max-height: 90vh !important;
    }
}