:root {
    --ion-color-primary: #1a80b6;
    --ion-color-success: #26A65B;
    --ion-color-danger: #eb445a;
    --ion-color-light: #f4f5f8;
    --ion-color-secondary: #5260ff; /* For Transfer button */
}
body { 
    background-color: var(--ion-color-light); 
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; 
}
.ion-toolbar { 
    background-color: var(--ion-color-primary); 
    color: white; 
}

/* Page & Modal Visibility */
.page-container {
    display: none;
}
.page-container.active {
    display: block;
}
.page { 
    display: none; 
}
.page.active { 
    display: block; 
}
.modal { 
    display: none; 
}
.modal.active { 
    display: flex; 
}
.footer-spacer { 
    height: 100px; 
}

/* Side Menu */
#side-menu {
    transition: transform 0.3s ease-in-out;
    transform: translateX(-100%);
}
#side-menu.open {
    transform: translateX(0);
}
#menu-overlay {
    transition: opacity 0.3s ease-in-out;
    opacity: 0;
    pointer-events: none;
}
#menu-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
#alert-modal, #input-modal, #unit-modal, #help-modal { 
    z-index: 100; 
}

/* Tab Buttons */
.tab-button {
     border-bottom: 3px solid transparent;
     transition: border-color 0.3s, background-color 0.3s, color 0.3s;
     background-color: white;
     color: #6b7280;
}
.tab-button.active {
     border-color: var(--ion-color-primary);
     color: var(--ion-color-primary);
     font-weight: 600;
     background-color: #f9fafb;
}

/* Loader */
.loader-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}
.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #1a80b6;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Pagination */
.pagination-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Auth Page */
#auth-page {
    background-color: var(--ion-color-light);
}