/* ============================================
   ADMIN TABLES - Unified Styling
   Standard table styles for all admin pages
   ============================================ */

/* CSS Variables for Admin Tables */
:root {
    /* Spacing */
    --admin-table-cell-padding: 12px 16px;
    --admin-table-cell-padding-compact: 10px 12px;
    --admin-table-container-margin: 24px;
    --admin-table-header-padding: 12px 16px;

    /* Colors */
    --admin-table-header-bg: #f8f9fa;
    --admin-table-header-text: #333;
    --admin-table-border-color: #dee2e6;
    --admin-table-row-hover: #f5f5f5;
    --admin-table-row-alt: #fafafa;
    --admin-table-text-color: #333;

    /* Typography */
    --admin-table-font-size: 14px;
    --admin-table-header-font-size: 14px;
    --admin-table-header-font-weight: 600;

    /* Borders */
    --admin-table-border: 1px solid var(--admin-table-border-color);
    --admin-table-radius: 8px;
}

/* ============================================
   TABLE CONTAINER
   ============================================ */
.admin-table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: var(--admin-table-container-margin);
    background: #fff;
    border-radius: var(--admin-table-radius);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Legacy support - apply to existing table containers */
.table-container {
    width: 100%;
    overflow-x: auto;
    margin-bottom: var(--admin-table-container-margin);
    background: #fff;
    border-radius: var(--admin-table-radius);
}

/* ============================================
   BASE TABLE STYLES
   ============================================ */
.admin-table,
.data-table,
.partners-table,
#user-table,
#tag-table,
#company-table,
#partners-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--admin-table-font-size);
    color: var(--admin-table-text-color);
}

/* ============================================
   TABLE HEADER
   ============================================ */
.admin-table thead,
.data-table thead,
.partners-table thead,
#user-table thead,
#tag-table thead,
#company-table thead,
#partners-table thead {
    background: var(--admin-table-header-bg);
}

.admin-table th,
.data-table th,
.partners-table th,
#user-table th,
#tag-table th,
#company-table th,
#partners-table th {
    padding: var(--admin-table-header-padding);
    text-align: left;
    font-weight: var(--admin-table-header-font-weight);
    font-size: var(--admin-table-header-font-size);
    color: var(--admin-table-header-text);
    border-bottom: 2px solid var(--admin-table-border-color);
    white-space: normal;  /* Allow header text to wrap */
    word-wrap: break-word;
    line-height: 1.3;
    position: sticky;
    top: 0;
    background: var(--admin-table-header-bg);
    z-index: 1;
}

/* Sortable header styling */
.admin-table th.sortable,
.data-table th.sortable,
.partners-table th.sortable,
#user-table th.sortable,
#tag-table th.sortable,
#company-table th.sortable,
#partners-table th.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.15s ease;
}

.admin-table th.sortable:hover,
.data-table th.sortable:hover,
.partners-table th.sortable:hover,
#user-table th.sortable:hover,
#tag-table th.sortable:hover,
#company-table th.sortable:hover,
#partners-table th.sortable:hover {
    background: #e9ecef;
}

/* Sort icon styling - never wraps separately from header text */
.admin-table th .sort-icon,
.data-table th .sort-icon,
.partners-table th .sort-icon,
.partners-table th .partners-sort-icon,
#user-table th .sort-icon,
#tag-table th .sort-icon,
#company-table th .sort-icon,
#partners-table th .sort-icon {
    margin-left: 6px;
    opacity: 0.4;
    font-size: 12px;
    transition: opacity 0.15s ease;
    flex-shrink: 0;  /* Prevent icon from shrinking */
    white-space: nowrap;  /* Never wrap the icon */
    display: inline-block;
    vertical-align: middle;
}

.admin-table th.active-sort .sort-icon,
.data-table th.active-sort .sort-icon,
.partners-table th.active-sort .sort-icon,
.partners-table th.active-sort .partners-sort-icon,
#user-table th.active-sort .sort-icon,
#tag-table th.active-sort .sort-icon,
#company-table th.active-sort .sort-icon,
#partners-table th.active-sort .sort-icon {
    opacity: 1;
}

/* ============================================
   TABLE BODY CELLS
   ============================================ */
.admin-table td,
.data-table td,
.partners-table td,
#user-table td,
#tag-table td,
#company-table td,
#partners-table td {
    padding: var(--admin-table-cell-padding);
    border-bottom: var(--admin-table-border);
    vertical-align: middle;
    color: var(--admin-table-text-color);
}

/* Remove bottom border on last row */
.admin-table tbody tr:last-child td,
.data-table tbody tr:last-child td,
.partners-table tbody tr:last-child td,
#user-table tbody tr:last-child td,
#tag-table tbody tr:last-child td,
#company-table tbody tr:last-child td,
#partners-table tbody tr:last-child td {
    border-bottom: none;
}

/* ============================================
   ROW STYLING
   ============================================ */
.admin-table tbody tr,
.data-table tbody tr,
.partners-table tbody tr,
#user-table tbody tr,
#tag-table tbody tr,
#company-table tbody tr,
#partners-table tbody tr {
    transition: background-color 0.15s ease;
}

/* Zebra striping */
.admin-table tbody tr:nth-child(even),
.data-table tbody tr:nth-child(even),
.partners-table tbody tr:nth-child(even),
#user-table tbody tr:nth-child(even),
#tag-table tbody tr:nth-child(even),
#company-table tbody tr:nth-child(even),
#partners-table tbody tr:nth-child(even) {
    background: var(--admin-table-row-alt);
}

/* Hover state */
.admin-table tbody tr:hover,
.data-table tbody tr:hover,
.partners-table tbody tr:hover,
#user-table tbody tr:hover,
#tag-table tbody tr:hover,
#company-table tbody tr:hover,
#partners-table tbody tr:hover {
    background: var(--admin-table-row-hover);
}

/* ============================================
   ACTION BUTTONS IN TABLE
   ============================================ */
.admin-table td .action-btn,
.data-table td .action-btn,
.partners-table td .action-btn,
#user-table td .action-btn,
#tag-table td .action-btn,
#company-table td .action-btn,
#partners-table td .action-btn,
.admin-table td .btn-icon,
.data-table td .btn-icon,
#user-table td .btn-icon,
#tag-table td .btn-icon,
#company-table td .btn-icon {
    padding: 6px 10px;
    margin: 0 2px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
}

/* Edit button */
.admin-table td .btn-edit,
.data-table td .btn-edit,
#user-table td .btn-edit,
#tag-table td .btn-edit,
#company-table td .btn-edit {
    background: #e3f2fd;
    color: #1976d2;
}

.admin-table td .btn-edit:hover,
.data-table td .btn-edit:hover,
#user-table td .btn-edit:hover,
#tag-table td .btn-edit:hover,
#company-table td .btn-edit:hover {
    background: #bbdefb;
}

/* Delete button */
.admin-table td .btn-delete,
.data-table td .btn-delete,
#user-table td .btn-delete,
#tag-table td .btn-delete,
#company-table td .btn-delete {
    background: #ffebee;
    color: #c62828;
}

.admin-table td .btn-delete:hover,
.data-table td .btn-delete:hover,
#user-table td .btn-delete:hover,
#tag-table td .btn-delete:hover,
#company-table td .btn-delete:hover {
    background: #ffcdd2;
}

/* View button */
.admin-table td .btn-view,
.data-table td .btn-view,
#user-table td .btn-view,
#tag-table td .btn-view,
#company-table td .btn-view {
    background: #e8f5e9;
    color: #2e7d32;
}

.admin-table td .btn-view:hover,
.data-table td .btn-view:hover,
#user-table td .btn-view:hover,
#tag-table td .btn-view:hover,
#company-table td .btn-view:hover {
    background: #c8e6c9;
}

/* Actions column - consistent width */
.admin-table td:last-child,
.data-table td:last-child,
#user-table td:last-child,
#tag-table td:last-child,
#company-table td:last-child {
    white-space: nowrap;
    text-align: center;
}

.admin-table th:last-child,
.data-table th:last-child,
#user-table th:last-child,
#tag-table th:last-child,
#company-table th:last-child {
    text-align: center;
}

/* ============================================
   STATUS BADGES
   ============================================ */
.admin-table .status-badge,
.data-table .status-badge,
#user-table .status-badge,
#tag-table .status-badge,
#company-table .status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: capitalize;
}

.status-badge.active,
.status-badge.status-active {
    background: #e8f5e9;
    color: #2e7d32;
}

.status-badge.inactive,
.status-badge.status-inactive {
    background: #ffebee;
    color: #c62828;
}

.status-badge.pending,
.status-badge.status-pending {
    background: #fff3e0;
    color: #ef6c00;
}

/* ============================================
   EMPTY STATE
   ============================================ */
.admin-table-empty,
.table-empty-state {
    text-align: center;
    padding: 40px 20px;
    color: #666;
    font-size: 14px;
}

.admin-table-empty i,
.table-empty-state i {
    font-size: 48px;
    color: #ccc;
    margin-bottom: 16px;
    display: block;
}

/* ============================================
   LOADING STATE
   ============================================ */
.admin-table-loading {
    text-align: center;
    padding: 40px 20px;
}

.admin-table-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid #007bff;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 992px) {
    .admin-table th,
    .admin-table td,
    .data-table th,
    .data-table td,
    .partners-table th,
    .partners-table td,
    #user-table th,
    #user-table td,
    #tag-table th,
    #tag-table td,
    #company-table th,
    #company-table td,
    #partners-table th,
    #partners-table td {
        padding: var(--admin-table-cell-padding-compact);
    }
}

@media (max-width: 768px) {
    .admin-table,
    .data-table,
    .partners-table,
    #user-table,
    #tag-table,
    #company-table,
    #partners-table {
        font-size: 13px;
    }

    .admin-table th,
    .admin-table td,
    .data-table th,
    .data-table td,
    .partners-table th,
    .partners-table td,
    #user-table th,
    #user-table td,
    #tag-table th,
    #tag-table td,
    #company-table th,
    #company-table td,
    #partners-table th,
    #partners-table td {
        padding: 8px 10px;
    }
}

/* ============================================
   FOCUS INDICATORS (WCAG 2.1 AA)
   ============================================ */
.admin-table th.sortable:focus,
.admin-table th.sortable:focus-visible,
.data-table th.sortable:focus,
.data-table th.sortable:focus-visible,
#user-table th.sortable:focus,
#user-table th.sortable:focus-visible,
#tag-table th.sortable:focus,
#tag-table th.sortable:focus-visible,
#company-table th.sortable:focus,
#company-table th.sortable:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: -2px;
}

.admin-table td .action-btn:focus,
.admin-table td .action-btn:focus-visible,
.data-table td .action-btn:focus,
.data-table td .action-btn:focus-visible,
#user-table td .action-btn:focus,
#user-table td .action-btn:focus-visible,
#tag-table td .action-btn:focus,
#tag-table td .action-btn:focus-visible,
#company-table td .action-btn:focus,
#company-table td .action-btn:focus-visible,
.admin-table td .btn-icon:focus,
.admin-table td .btn-icon:focus-visible,
#user-table td .btn-icon:focus,
#user-table td .btn-icon:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}