/* This is the complete and consolidated stylesheet for Socio Woo.
    All invalid "@apply" rules have been removed. 
    Styling is primarily handled by Tailwind CSS classes in the HTML/PHP files.
    This file contains only the necessary custom CSS and responsive layouts.
*/

/* --- Base Table & Badge Styles --- */

.orders-table th, 
.inventory-table th {
    background-color: #f9fafb; /* gray-50 */
    font-weight: 600;
    color: #4b5563; /* gray-600 */
    text-transform: uppercase;
    font-size: 0.75rem;
    padding: 12px 15px;
    text-align: left;
}

.status-badge, .role-badge, .stock-badge { 
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
}

.status-processing { background-color: #dbeafe; color: #1e40af; }
.status-completed { background-color: #d1fae5; color: #065f46; }
.status-on-hold { background-color: #fef3c7; color: #92400e; }
.status-cancelled, .status-failed { background-color: #fee2e2; color: #991b1b; }
.status-refunded { background-color: #e5e7eb; color: #374151; }

.role-admin { background-color: #fecaca; color: #991b1b; }
.role-store_owner { background-color: #dbeafe; color: #1e40af; }

.stock-instock { background-color: #d1fae5; color: #065f46; }
.stock-outofstock { background-color: #fee2e2; color: #991b1b; }
.stock-onbackorder { background-color: #fef3c7; color: #92400e; }

/* --- Action & Form Item Styles --- */

.actions-cell { white-space: nowrap; }
.action-item { margin-bottom: 6px; }
.action-link { color: #3b82f6; text-decoration: none; font-size: 0.875rem; }
.action-link:hover { text-decoration: underline; }
.status-select { width: 100%; max-width: 150px; padding: 4px 8px; font-size: 0.875rem; border: 1px solid #d1d5db; border-radius: 0.375rem; background-color: #f9fafb; }
.status-select:disabled { background-color: #e5e7eb; cursor: not-allowed; }

/* --- Expandable Row Styles --- */

.expand-toggle svg { transition: transform 0.2s ease-in-out; }
.rotate-90 { transform: rotate(90deg); }
.details-row.hidden { display: none; }
.details-row td { border-bottom: 2px solid #d1d5db; }

/* --- Profile Page Styles --- */

.profile-tab { padding: 8px 16px; font-weight: 600; color: #4b5563; border-radius: 0.375rem; transition: all 0.2s; }
.profile-tab:hover { background-color: #f3f4f6; color: #1f2937; }
.profile-tab.active { background-color: #eef2ff; color: #4338ca; }

#strength-bar { height: 8px; width: 0; transition: width 0.3s, background-color 0.3s; }
.strength-weak { background-color: #ef4444; }
.strength-medium { background-color: #f59e0b; }
.strength-strong { background-color: #10b981; }

/* --- Responsive Layout for Tables (Mobile View) --- */

@media (max-width: 768px) {
    /* HIDE desktop headers */
    .orders-table thead,
    .inventory-table thead {
        display: none;
    }

    /* Common card styles for all tables */
    .orders-table, .orders-table tbody, .orders-table tr,
    .inventory-table, .inventory-table tbody, .inventory-table tr {
        display: block;
        width: 100%;
    }
    .orders-table tr.bg-white,
    .inventory-table tr.bg-white {
        border: 1px solid #e2e8f0;
        border-radius: 0.75rem;
        margin-bottom: 1.5rem;
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.07);
    }
    
    /* Common cell styles for all tables */
    .orders-table td,
    .inventory-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-bottom: 1px solid #f3f4f6;
    }
    .orders-table tr.bg-white td:last-child,
    .inventory-table tr.bg-white td:last-child {
        border-bottom: none;
    }

    /* Use data-label attribute for the label on mobile */
    .orders-table td::before,
    .inventory-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #4a5568;
        margin-right: 1rem;
        flex-shrink: 0;
    }

    /* Special stacking for specific columns */
    .orders-table td[data-label="Customer & Address"],
    .orders-table td[data-label="Actions"],
    .inventory-table td[data-label="Product"] {
        flex-direction: column;
        align-items: flex-start;
    }
     .orders-table td[data-label="Customer & Address"]::before,
    .orders-table td[data-label="Actions"]::before,
    .inventory-table td[data-label="Product"]::before {
        margin-bottom: 8px;
    }
    
    /* Order ID cell has custom layout, no label needed */
    .orders-table td[data-label="Order"]::before {
        content: none;
    }
    .orders-table .details-row {
        margin-top: -1.5rem;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: 1px solid #e2e8f0;
        box-shadow: none;
    }
}

/* ... All your existing styles ... */

/* NEW: Styles for Profile Page Tabs */
.profile-tab {
    @apply px-4 py-2 font-semibold text-gray-600 rounded-md transition-colors;
}
.profile-tab:hover {
    @apply bg-gray-200 text-gray-800;
}
.profile-tab.active {
    @apply bg-indigo-100 text-indigo-700;
}

/* Dark Mode Styles for Profile Tabs */
.dark .profile-tab {
    @apply text-gray-400;
}
.dark .profile-tab:hover {
    @apply bg-gray-700 text-gray-200;
}
.dark .profile-tab.active {
    @apply bg-indigo-500/10 text-indigo-400;
}




/* ... All your existing styles ... */

/* NEW: Styles for the redesigned Profile Page */
.profile-tab-nav a {
    @apply flex items-center px-4 py-2 text-sm font-medium text-gray-400 rounded-lg hover:bg-white/10 hover:text-white transition-colors;
}
.profile-tab-nav a.active {
    @apply bg-white/10 text-white;
}
.profile-tab-nav svg {
    @apply w-5 h-5 mr-3;
}

/* Password Strength Meter */
#strength-bar {
    height: 6px;
    width: 0;
    transition: width 0.3s, background-color 0.3s;
}
.strength-weak { background-color: #ef4444; } /* red-500 */
.strength-medium { background-color: #f59e0b; } /* amber-500 */
.strength-strong { background-color: #10b981; } /* emerald-500 */

.strength-criteria-item {
    transition: color 0.3s;
}
.strength-criteria-item.met {
    color: #10b981; /* emerald-500 */
}




/* ... All your existing styles ... */

/* NEW: Styles for the redesigned Profile Page Tabs */
.profile-nav-link {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: #4b5563; /* text-gray-600 */
    border-radius: 0.5rem; /* rounded-lg */
    transition: background-color 0.2s, color 0.2s;
}
.profile-nav-link:hover {
    background-color: #f3f4f6; /* bg-gray-100 */
}
.profile-nav-link.active {
    background-color: #eef2ff; /* bg-indigo-50 */
    color: #4338ca; /* text-indigo-700 */
    font-weight: 600;
}
.profile-nav-link svg {
    width: 1.25rem; /* w-5 */
    height: 1.25rem; /* h-5 */
    margin-right: 0.75rem; /* mr-3 */
}