/* Compact Table Styles */
.compact-table {
    width: 100% !important;
    min-width: 100% !important;
    table-layout: auto;
}

.compact-table tbody tr {
    width: 100%;
}

/* Ensure consistent column widths */
.compact-table th,
.compact-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Responsive table adjustments */
@media (max-width: 768px) {
    .compact-table {
        font-size: 0.875rem;
    }
    
    .compact-table th,
    .compact-table td {
        padding: 0.5rem 0.75rem;
    }
}

/* Sortable Table Headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

th.sortable:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

th.sortable .sort-header-content {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

th.sortable .sort-icon {
    flex-shrink: 0;
    transition: opacity 0.2s ease;
}

th.sortable .sort-arrow {
    color: currentColor;
}

th.sortable.sort-asc .sort-icon,
th.sortable.sort-desc .sort-icon {
    opacity: 1 !important;
    color: #3b82f6;
}

th.sortable.sort-asc .sort-arrow,
th.sortable.sort-desc .sort-arrow {
    color: #3b82f6;
}

/* Search box consistency */
.search-box {
    transition: all 0.2s ease-in-out;
}

.search-box:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Action menu consistency */
.action-menu-trigger {
    transition: all 0.15s ease-in-out;
}

.action-menu-trigger:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Badge and status indicator styles */
.status-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1;
}

.status-badge i {
    margin-right: 0.25rem;
    width: 0.75rem;
    height: 0.75rem;
}

/* Card consistency */
.compact-card {
    border-radius: 0.75rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
}

.compact-card:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Avatar consistency */
.compact-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
}

.compact-avatar i {
    width: 1rem;
    height: 1rem;
    color: #9ca3af;
}

/* Form input consistency */
.compact-input {
    border-radius: 0.5rem;
    border: 1px solid #d1d5db;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    transition: all 0.2s ease-in-out;
}

.compact-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Button consistency */
.compact-button {
    border-radius: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease-in-out;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.compact-button i {
    width: 1rem;
    height: 1rem;
}

/* Dropdown menu consistency */
.compact-dropdown {
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    border: 1px solid #e5e7eb;
    background-color: white;
    padding: 0.5rem;
    min-width: 14rem;
}

.compact-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: #374151;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
}

.compact-dropdown-item:hover {
    background-color: #f9fafb;
    color: #111827;
}

.compact-dropdown-item i {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

/* Responsive utilities */
@media (max-width: 640px) {
    .compact-table-container {
        overflow-x: auto;
    }
    
    .compact-search-box {
        width: 100% !important;
        max-width: 100%;
    }
    
    .compact-card {
        margin: 0 -1rem;
        border-radius: 0;
    }
}

/* Loading states */
.compact-loading {
    opacity: 0.6;
    pointer-events: none;
}

.compact-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1rem;
    margin: -0.5rem 0 0 -0.5rem;
    border: 2px solid #e5e7eb;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

/* Empty state consistency */
.compact-empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: #6b7280;
}

.compact-empty-state i {
    width: 3rem;
    height: 3rem;
    margin: 0 auto 1rem;
    color: #d1d5db;
}

/* Focus states for accessibility */
.compact-focus:focus {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .compact-table {
        border: 1px solid #000;
    }
    
    .compact-card {
        border: 1px solid #000;
    }
    
    .compact-input {
        border: 2px solid #000;
    }
}

/* Only ensure overflow is visible - let Preline UI handle everything else */
.action-menu-cell {
    overflow: visible !important;
}

.hs-dropdown {
    overflow: visible !important;
}

/* Ensure dropdown menu is visible when open - minimal interference with Preline UI */
.hs-dropdown.open .hs-dropdown-menu,
.hs-dropdown[aria-expanded="true"] .hs-dropdown-menu {
    display: block !important;
}

/* Don't override Preline UI's hidden class management - just ensure visibility when not hidden */
.hs-dropdown-menu:not(.hidden) {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Ensure dropdown menu appears above all table elements including sticky columns */
.action-menu-cell .hs-dropdown-menu {
    z-index: 9999 !important;
}

/* When dropdown uses fixed strategy, ensure it's not clipped by parent stacking contexts */
.hs-dropdown[style*="position: fixed"] .hs-dropdown-menu,
.hs-dropdown.open .hs-dropdown-menu[style*="position: fixed"],
[data-hs-dropdown*="fixed"] .hs-dropdown-menu {
    z-index: 99999 !important;
}



/* Fix any card or container that might be clipping - but be more specific to avoid conflicts */
.table-container .card,
.table-container .bg-white,
.table-container .rounded-lg {
    overflow: visible !important;
}

/* Ensure table doesn't clip dropdowns */
.user-management-table {
    overflow: visible !important;
}

.user-management-table td {
    overflow: visible !important;
}

/* Ensure table container doesn't clip dropdowns but allows horizontal scroll */
.table-container {
    overflow: visible !important;
    position: relative;
    contain: none !important;
}

/* Table wrapper: horizontal scroll + vertical overflow for dropdowns */
.table-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative;
    contain: none !important;
}

/* Allow horizontal scroll but vertical overflow for dropdowns */
.overflow-x-auto {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Action menu cell - override max-width constraint for dropdowns */
td.action-menu-cell {
    overflow: visible !important;
    /* Don't override position - sticky positioning is set in HTML */
    max-width: none !important;
    min-width: auto !important;
    width: auto !important;
}

/* Ensure action menu cell content can expand */
td.action-menu-cell > * {
    max-width: none !important;
}

/* Ensure dropdown container can expand and overflow - higher specificity */
.table-container td.action-menu-cell .hs-dropdown,
.table-wrapper td.action-menu-cell .hs-dropdown {
    overflow: visible !important;
    /* Let Preline UI handle positioning */
}

/* Let Preline UI handle all positioning - we only ensure overflow is visible above */

/* Ensure parent card allows overflow - only for table-container to avoid conflicts */
.table-container.bg-white.rounded-xl.shadow-sm {
    overflow: visible !important;
    position: relative;
}

/* Force all intermediate containers to allow overflow */
.max-w-7xl > * {
    overflow: visible !important;
}

/* Admin page specific: ensure table container allows dropdown overflow */
.overflow-x-auto.overflow-y-visible {
    overflow-x: auto !important;
    overflow-y: visible !important;
    position: relative !important;
    contain: none !important;
}

/* Ensure admin page table allows overflow */
.compact-table {
    overflow: visible !important;
    position: relative;
}

/* Ensure all parent containers of admin table allow overflow - only for table-container */
.table-container.bg-white.rounded-xl.shadow-sm > div,
.table-container.bg-white.rounded-xl.shadow-sm > div > div {
    overflow: visible !important;
}

/* Admin page: ensure the card container and all nested divs allow overflow - only for table-container */
.table-container.bg-white.rounded-xl.shadow-sm,
.table-container.bg-white.rounded-xl.shadow-sm > div,
.table-container.bg-white.rounded-xl.shadow-sm > div > div,
.table-container.bg-white.rounded-xl.shadow-sm > div > div > div {
    overflow: visible !important;
    position: relative;
}

/* Ensure max-w-7xl container allows overflow - main rule is in Page container constraints below */

/* Table structure for dropdown overflow */
table {
    overflow: visible !important;
}

tbody, tbody tr {
    overflow: visible !important;
    position: relative;
}

/* Ensure table cells allow overflow for dropdowns */
table td,
table th {
    overflow: visible !important;
    position: relative;
}

/* Specifically ensure action menu cells allow overflow */
table td.action-menu-cell,
table th.action-menu-cell {
    overflow: visible !important;
    /* Don't override position for sticky cells */
}

/* Sticky column styles (if needed for future use) */
th.sticky,
td.sticky {
    position: sticky !important;
    background-color: inherit;
    z-index: 10;
}

/* Table cells - allow content to determine width */
th, td {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Action menu cells need overflow visible for dropdowns */
td.action-menu-cell {
    overflow: visible !important;
}

/* Toast consistency */
#toast-container {
    z-index: 9999;
}

#toast-container > div {
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Toast animations */
#toast-container > div {
    animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Toast hover effects */
#toast-container > div:hover {
    transform: translateX(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .compact-card,
    .action-menu-trigger,
    .search-box,
    .compact-input,
    .compact-button,
    .compact-dropdown-item {
        transition: none;
    }
    
    .compact-loading::after {
        animation: none;
    }
    
    #toast-container > div {
        animation: none;
    }
}

/* Login and Register Page Styles */
.login-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    width: 100%;
    padding: 2rem 1rem;
}

.login-container {
    width: 100%;
    max-width: 28rem;
    margin: 0 auto;
}

.login-card {
    background: white;
    border-radius: 0.75rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    padding: 2rem;
    width: 100%;
}

/* Form controls styling */
.form-control {
    border: 1px solid #d1d5db;
    background-color: #ffffff;
    color: #111827;
    transition: all 0.2s ease-in-out;
}

.form-control:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-control::placeholder {
    color: #9ca3af;
}

/* Button styles */
.btn-retry {
    background-color: #000000;
    color: #ffffff;
    border: none;
}

/* ============================================
   Template Page Specific Styles
   ============================================ */

/* Template textareas - handle line breaks */
#templateContent,
#templateFooter {
    white-space: pre-wrap !important;
    overflow-y: auto !important;
}

/* Phone preview layout */
.phone-screen {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.phone-chat-area {
    flex: 1 !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

.phone-input-area {
    flex-shrink: 0 !important;
}

.phone-frame {
    border-radius: 2.5rem !important;
    overflow: hidden !important;
}

.phone-screen-inner {
    border-radius: 2.3rem !important;
    overflow: hidden !important;
}

.phone-screen-inner .bg-\[#075e54\] {
    border: none !important;
    outline: none !important;
}

/* Preview buttons */
#previewButtons {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.5rem !important;
}

#previewButtons button {
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 0.75rem !important;
    line-height: 1rem !important;
    margin: 0 !important;
    border-radius: 0.5rem !important;
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    color: #4b5563 !important;
    font-weight: 400 !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

/* Template modal close button */
button#templateModalCloseBtn {
    position: relative !important;
    z-index: 10 !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

button#templateModalCloseBtn:hover {
    background-color: #e5e7eb !important;
    opacity: 1 !important;
    z-index: 11 !important;
}

/* Modal confirm button hover effects */
.modal-confirm-button:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
    transition: all 0.2s ease !important;
}

/* Template row improvements */
.template-row td {
    vertical-align: top !important;
}

/* Filter controls spacing */
.controls-section {
    gap: 1rem !important;
}

/* Content cell improvements */
.content-cell {
    max-width: 20rem !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
}

/* Status badge improvements */
.status-badge {
    white-space: nowrap !important;
}

/* Table width constraints */
.overflow-x-auto {
    max-width: 100% !important;
    width: 100% !important;
}

table {
    width: 100% !important;
    max-width: 100% !important;
    /* table-layout: auto allows columns to size based on content */
}

/* Page container constraints */
.max-w-7xl {
    max-width: 80rem !important;
    width: 100% !important;
    overflow: visible !important;
    position: relative;
}

/* Template page buttons - override primary color */
#addTemplateBtn,
#templateSubmitBtn {
    background-color: #000000 !important;
    color: #ffffff !important;
}

#addTemplateBtn:hover,
#templateSubmitBtn:hover {
    background-color: #333333 !important;
    color: #ffffff !important;
}

#addTemplateBtn:focus,
#templateSubmitBtn:focus {
    background-color: #333333 !important;
    color: #ffffff !important;
}

/* Override primary color variables */
.bg-primary {
    background-color: #000000 !important;
}

.hover\:bg-primary-dark:hover {
    background-color: #333333 !important;
}

.focus\:bg-primary-dark:focus {
    background-color: #333333 !important;
}

/* Modal button loader visibility */
.modal-button-loading {
    display: none !important;
}

button:disabled .modal-button-loading {
    display: inline-flex !important;
}

button:disabled .modal-button-text,
button:disabled .modal-button-icon {
    display: none !important;
}

.modal-button-loading.hidden {
    display: none !important;
}

button:disabled .modal-button-loading.hidden {
    display: inline-flex !important;
}

button:disabled {
    opacity: 0.5 !important;
    pointer-events: none !important;
}

/* Green button styles */
.green-button {
    background-color: #16a34a !important;
}

.green-button:hover {
    background-color: #15803d !important;
}

/* Template table column widths - only apply to template tables */
.template-table th:nth-child(1),
.template-table td:nth-child(1) {
    width: 5% !important;
}

.template-table th:nth-child(2),
.template-table td:nth-child(2) {
    width: 15% !important;
}

.template-table th:nth-child(3),
.template-table td:nth-child(3) {
    width: 35% !important;
}

.template-table th:nth-child(4),
.template-table td:nth-child(4) {
    width: 15% !important;
}

.template-table th:nth-child(5),
.template-table td:nth-child(5) {
    width: 10% !important;
}

.template-table th:nth-child(6),
.template-table td:nth-child(6) {
    width: 20% !important;
}

/* Non-admin view adjustments */
.template-table.non-admin th:nth-child(4),
.template-table.non-admin td:nth-child(4) {
    width: 15% !important;
}

.template-table.non-admin th:nth-child(5),
.template-table.non-admin td:nth-child(5) {
    width: 20% !important;
}

/* Responsive improvements for mobile */
@media (max-width: 768px) {
    .controls-section {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .filter-controls {
        flex-direction: column !important;
        gap: 0.75rem !important;
    }

    .filter-controls > div {
        width: 100% !important;
    }

    .filter-controls select {
        width: 100% !important;
    }

    .search-control {
        width: 100% !important;
    }

    .search-control input {
        width: 100% !important;
    }
}

/* Better table responsiveness */
@media (max-width: 1024px) {
    .template-table {
        font-size: 0.875rem !important;
    }

    .template-table th,
    .template-table td {
        padding: 0.75rem 0.5rem !important;
    }
}

/* Dropdown menu visibility - let Preline UI handle positioning */
.hs-dropdown-menu {
    z-index: 99999 !important;
    /* position is handled by Preline UI - do NOT override */
}

.hs-dropdown-menu.hidden {
    display: none !important;
}

.hs-dropdown-menu:not(.hidden) {
    display: block !important;
}

.btn-retry:hover {
    background-color: #333333;
}

.btn-facebook {
    background-color: #1877f2;
    color: #ffffff;
    border: none;
}

.btn-facebook:hover {
    background-color: #166fe5;
}

.btn-outline-dark {
    background-color: transparent;
    color: #000000;
    border: 1px solid #000000;
}

.btn-outline-dark:hover {
    background-color: #000000;
    color: #ffffff;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .login-wrapper {
        padding: 1rem 0.5rem;
        min-height: calc(100vh - 150px);
    }
    
    .login-card {
        padding: 1.5rem;
        border-radius: 0.5rem;
    }
}

/* Ensure login/register pages don't have extra padding from base layout */
.login-page .flex-1,
.register-page .flex-1 {
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.login-page .flex-1 > div,
.register-page .flex-1 > div {
    width: 100%;
    max-width: 100%;
}

/* Override base layout padding for login/register pages */
body.login-page main > div.flex-1,
body.register-page main > div.flex-1 {
    padding: 0 !important;
}

/* Fix divider text overlapping lines */
.login-card .relative {
    position: relative;
}

.login-card .relative > div:first-child {
    z-index: 1;
}

.login-card .relative > div:last-child {
    z-index: 2;
}

.login-card .relative span {
    position: relative;
    z-index: 3;
    display: inline-block;
}