/**
 * APP Andina Theme — Base Styles
 *
 * Provides:
 * 1. CSS reset/normalization
 * 2. Legacy CSS class aliases
 * 3. Sidebar layout styles
 * 4. WooCommerce overrides
 * 5. Dark mode support
 * 6. Print styles
 */

/* ==========================================================================
   1. Base Reset
   ========================================================================== */

*, *::before, *::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

/* ==========================================================================
   2. Legacy CSS Class Aliases
   ========================================================================== */

/* Grid system aliases */
.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}

.col {
    padding-left: 15px;
    padding-right: 15px;
    width: 100%;
}

/* Column sizes */
.large-1  { flex: 0 0 8.333%;  max-width: 8.333%; }
.large-2  { flex: 0 0 16.667%; max-width: 16.667%; }
.large-3  { flex: 0 0 25%;     max-width: 25%; }
.large-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.large-5  { flex: 0 0 41.667%; max-width: 41.667%; }
.large-6  { flex: 0 0 50%;     max-width: 50%; }
.large-7  { flex: 0 0 58.333%; max-width: 58.333%; }
.large-8  { flex: 0 0 66.667%; max-width: 66.667%; }
.large-9  { flex: 0 0 75%;     max-width: 75%; }
.large-10 { flex: 0 0 83.333%; max-width: 83.333%; }
.large-11 { flex: 0 0 91.667%; max-width: 91.667%; }
.large-12 { flex: 0 0 100%;    max-width: 100%; }

@media (max-width: 768px) {
    .small-12 { flex: 0 0 100%; max-width: 100%; }
    .large-3, .large-9 { flex: 0 0 100%; max-width: 100%; }
}

/* Layout aliases */
.page-wrapper {
    min-height: 100vh;
}

.container {
    max-width: 1280px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

/* Header wrapper */
.header-wrapper {
    padding: 0;
}

.header-main {
    display: flex;
    align-items: center;
}

/* Vertical tabs (used in page-my-account.php) */
.vertical-tabs {
    display: flex;
    flex-wrap: wrap;
}

.vertical-tabs .col-border {
    border-right: 1px solid #e2e8f0;
}

@media (max-width: 768px) {
    .vertical-tabs .col-border {
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        margin-bottom: 1rem;
        padding-bottom: 1rem;
    }
}

/* Navigation aliases */
.nav {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-line a {
    display: block;
    padding: 0.5rem 0;
    text-decoration: none;
    color: #475569;
    border-bottom: 1px solid transparent;
}

.nav-line a:hover,
.nav-line a.active {
    color: #2563eb;
}

.nav-uppercase {
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
}

.nav-vertical {
    flex-direction: column;
}

/* Spacing aliases */
.mb { margin-bottom: 1rem; }
.mt-half { margin-top: 0.5rem; }

/* Skip link */
.skip-link.screen-reader-text {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.skip-link.screen-reader-text:focus {
    position: fixed;
    top: 5px;
    left: 5px;
    width: auto;
    height: auto;
    padding: 15px 23px 14px;
    font-size: 1em;
    z-index: 100000;
    background: #fff;
    color: #21759b;
    box-shadow: 0 0 2px 2px rgba(0,0,0,0.1);
}

/* ==========================================================================
   3. Sidebar Layout
   ========================================================================== */

/* Custom logo in sidebar */
#sidebar .custom-logo-link {
    display: flex;
    align-items: center;
}

#sidebar .custom-logo {
    max-height: 32px;
    width: auto;
}

/* Sidebar nav active indicator */
#sidebar nav a.active-nav-item {
    background: rgba(255,255,255,0.15);
}

/* Sidebar scrollbar */
#sidebar nav::-webkit-scrollbar {
    width: 4px;
}

#sidebar nav::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

/* ==========================================================================
   4. WooCommerce Overrides
   ========================================================================== */

.andina-wc-content {
    max-width: 100%;
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
    border-radius: 0.5rem;
    padding: 1rem;
}

.woocommerce-message {
    background: #f0fdf4;
    border-left: 4px solid #22c55e;
}

.woocommerce-info {
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
}

.woocommerce-error {
    background: #fef2f2;
    border-left: 4px solid #ef4444;
}

/* WooCommerce buttons */
.woocommerce .button,
.woocommerce input.button,
.woocommerce a.button {
    border-radius: 0.5rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    transition: all 0.2s;
}

.woocommerce .button.alt,
.woocommerce input.button.alt,
.woocommerce a.button.alt {
    background-color: #2563eb;
    color: #fff;
    border: none;
}

.woocommerce .button.alt:hover {
    background-color: #1d4ed8;
}

/* Account navigation */
.woocommerce-MyAccount-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: #475569;
    border-radius: 0.375rem;
    transition: all 0.15s;
}

.woocommerce-MyAccount-navigation ul li.is-active a,
.woocommerce-MyAccount-navigation ul li a:hover {
    background: #eff6ff;
    color: #2563eb;
}

/* ==========================================================================
   5. Dark Mode
   ========================================================================== */

html.dark body {
    background-color: #0f172a;
    color: #e2e8f0;
}

html.dark .bg-white {
    background-color: #1e293b;
}

html.dark .border-slate-200 {
    border-color: #334155;
}

html.dark .text-slate-800 {
    color: #e2e8f0;
}

html.dark .text-slate-500 {
    color: #94a3b8;
}

/* ==========================================================================
   6. Print Styles
   ========================================================================== */

@media print {
    #sidebar,
    #mobile-sidebar,
    #mobile-sidebar-overlay,
    #topbar,
    #mobile-menu-btn {
        display: none !important;
    }

    #app {
        display: block !important;
    }

    main {
        padding: 0 !important;
        overflow: visible !important;
    }
}