/* Alliance Capital eBanking Theme */
:root {
    /* Spacing Design Tokens */
    --spacing-none: 0;
    --spacing-xxx-small: 2px;
    --spacing-xx-small: 4px;
    --spacing-x-small: 8px;
    --spacing-small: 12px;
    --spacing-medium: 16px;
    --spacing-large: 24px;
    --spacing-x-large: 32px;
    --spacing-xx-large: 48px;

    /* Border Design Tokens */
    --border-width-thin: 1px;
    --border-width-thick: 2px;
    --border-radius-small: 4px;
    --border-radius-medium: 8px;
    --border-radius-large: 12px;

    /* Typography Design Tokens - Mobile Optimized */
    --font-size-xx-small: 14px;  /* Updated for mobile readability */
    --font-size-x-small: 14px;   /* Updated for mobile readability */
    --font-size-small: 14px;
    --font-size-medium: 16px;
    --font-size-large: 18px;
    --font-size-x-large: 24px;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;

    /* Size Design Tokens */
    --size-small: 20px;
    --size-medium: 180px;
    --size-large: 250px;

    /* Primary Colors */
    --alliance-primary: #F4A623;
    --alliance-primary-dark: #E09612;
    --alliance-primary-light: #F6B847;

    /* Sidebar Colors */
    --alliance-sidebar-bg: #4A4A4A;
    --alliance-sidebar-text: #FFFFFF;
    --alliance-sidebar-hover: #5A5A5A;
    --alliance-sidebar-active: var(--alliance-primary);

    /* Content Area Colors */
    --alliance-content-bg: #F5F5F5;
    --alliance-content-light: #FFFFFF;
    --alliance-content-border: #E0E0E0;

    /* Text Colors */
    --alliance-text-primary: #333333;
    --alliance-text-secondary: #666666;
    --alliance-text-light: #FFFFFF;
    --alliance-text-dark: #2C2C2C;
    --alliance-text-muted: #999999;

    /* Color Design Tokens */
    --color-text-inverse: #FFFFFF;
    --color-background-light: #FFFFFF;

    /* Status Colors */
    --alliance-success: #28A745;
    --alliance-warning: #FFC107;
    --alliance-danger: #6B7280;
    --alliance-info: #17A2B8;

    /* Light Status Colors */
    --alliance-success-light: rgba(40, 167, 69, 0.1);
    --alliance-warning-light: rgba(255, 193, 7, 0.1);
    --alliance-danger-light: rgba(107, 114, 128, 0.1);
    --alliance-info-light: rgba(23, 162, 184, 0.1);

    /* Alias for compatibility */
    --color-success: var(--alliance-success);
    --color-warning: var(--alliance-warning);
    --color-danger: var(--alliance-danger);
    --color-info: var(--alliance-info);
    --color-success-light: var(--alliance-success-light);
    --color-warning-light: var(--alliance-warning-light);
    --color-danger-light: var(--alliance-danger-light);
    --color-info-light: var(--alliance-info-light);
    --color-primary: var(--alliance-primary);
    --color-primary-light: var(--alliance-primary-light);
    --color-white: #FFFFFF;
    --color-text-primary: var(--alliance-text-primary);
    --color-text-secondary: var(--alliance-text-secondary);
    --color-text-tertiary: var(--alliance-text-muted);
    --color-border-light: var(--alliance-content-border);
    --color-background-primary: var(--alliance-content-light);
    --color-background-secondary: var(--alliance-content-bg);

    /* Additional missing variables */
    --fontSize2: var(--font-size-x-large);
    --fontSize3: var(--font-size-large);
    --fontSize4: var(--font-size-medium);
    --fontSize5: var(--font-size-small);
    --borderWidthThin: var(--border-width-thin);
    --borderWidthThick: var(--border-width-thick);
    --border-radius: var(--border-radius-medium);
    --border-radius-circle: 50%;
    --spacingNone: var(--spacing-none);
    --spacingXxxSmall: var(--spacing-xxx-small);
    --alliance-background-light: var(--alliance-content-light);
    --alliance-border: var(--alliance-content-border);
    --alliance-gray: #999999;
    --alliance-gray-light: #CCCCCC;
    --colorTextInverse: var(--alliance-text-light);
    --colorBackgroundAlt: #F8F9FA;
    --heightTappable: 48px;
    --squareIconLargeBoundary: 48px;
    --alliance-border-color: var(--alliance-content-border);
    --alliance-background-color: var(--alliance-content-light);
    --alliance-primary-color: var(--alliance-primary);
    --alliance-primary-rgb: 244, 166, 35;
    --alliance-text-color: var(--alliance-text-primary);
    --color-border: var(--alliance-content-border);
    --color-border-hover: var(--alliance-primary-light);
    --color-primary-rgb: 244, 166, 35;
    --color-background-tertiary: #F3F4F6;
    --color-background-alt: #F8F9FA;
    --color-warning-dark: #D97706;
    --line-height-text: 1.6;

    /* Opacity Design Tokens */
    --opacity-10: 0.1;
    --opacity-20: 0.2;
    --opacity-30: 0.3;
    --opacity-40: 0.4;
    --opacity-50: 0.5;
    --opacity-60: 0.6;
    --opacity-70: 0.7;
    --opacity-80: 0.8;
    --opacity-90: 0.9;

    /* Shadow Design Tokens */
    --shadow-small: 0 var(--spacing-xxx-small) var(--spacing-xx-small) rgba(0,0,0,0.1);
    --shadow-medium: var(--spacing-none) var(--spacing-xx-small) var(--spacing-x-small) rgba(0,0,0,0.15);
    --shadow-large: var(--spacing-none) var(--spacing-x-small) var(--spacing-medium) rgba(0,0,0,0.2);
    --shadow-focus: var(--spacing-none) var(--spacing-none) var(--spacing-none) var(--spacing-xxx-small) rgba(244, 166, 35, 0.2);

    /* Z-Index Design Tokens */
    --z-index-default: 1;
    --z-index-overlay: 10;
    --z-index-modal: 100;
    --z-index-sidebar: 1000;
}

/* Bootstrap 5 variable overrides to enforce corporate colors across frameworks */
:root {
    --bs-primary: var(--alliance-primary);
    --bs-primary-rgb: var(--alliance-primary-rgb);
    --bs-link-color: var(--alliance-primary);
    --bs-link-hover-color: var(--alliance-primary-dark);
}


/* Main Layout */
.alliance-layout {
    display: flex;
    min-height: 100vh;
    background-color: var(--alliance-content-bg);
}

/* Sidebar Styles */
.alliance-sidebar {
    width: var(--size-large);
    background-color: var(--alliance-sidebar-bg);
    color: var(--alliance-sidebar-text);
    box-shadow: var(--shadow-medium);
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    z-index: 1000;
}

.alliance-sidebar-header {
    padding: var(--spacing-large) var(--spacing-medium);
    border-bottom: var(--border-width-thin) solid rgba(255,255,255,0.1);
    text-align: center;
    background-color: var(--alliance-content-light);
    margin: var(--spacing-x-small);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-medium);
}

.alliance-logo {
    max-width: var(--size-medium);
    height: auto;
    display: block;
    margin: var(--spacing-none) auto;
}

.alliance-logo-text {
    background-color: var(--alliance-content-light);
    padding: var(--spacing-medium);
    border-radius: var(--border-radius-small);
    box-shadow: var(--shadow-medium);
}

.alliance-logo-main {
    font-family: 'Georgia', serif;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-bold);
    color: var(--alliance-text-dark);
    letter-spacing: 0.5px;
    margin-bottom: var(--spacing-xx-small);
}

.alliance-logo-sub {
    font-family: 'Georgia', serif;
    font-size: var(--font-size-medium);  /* Now 16px for mobile readability */
    color: var(--alliance-text-secondary);
    letter-spacing: 1px;
    text-transform: uppercase;
}

.alliance-nav-menu {
    padding: var(--spacing-medium) var(--spacing-none);
}

.alliance-nav-item {
    display: block;
    padding: var(--spacing-small) var(--spacing-large);
    color: var(--alliance-sidebar-text);
    text-decoration: none;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.alliance-nav-item:hover {
    background-color: var(--alliance-sidebar-hover);
    color: var(--alliance-sidebar-text);
    text-decoration: none;
}

.alliance-nav-item.active {
    background-color: var(--alliance-sidebar-hover);
    border-left-color: var(--alliance-primary);
    color: var(--alliance-primary);
}

.alliance-nav-icon {
    margin-right: var(--spacing-small);
    width: var(--size-small);
    display: inline-block;
    text-align: center;
}

/* Main Content Area */
.alliance-main-content {
    margin-left: var(--size-large);
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Header Styles */
.alliance-header {
    background-color: var(--alliance-content-light);
    padding: var(--spacing-medium) var(--spacing-x-large);
    box-shadow: var(--shadow-small);
    border-bottom: var(--border-width-thin) solid var(--alliance-content-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.alliance-header-title {
    color: var(--alliance-text-primary);
    margin: var(--spacing-none);
    font-size: 24px; /* Standard: page title 24px */
    font-weight: var(--font-weight-semibold);
}

.alliance-user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-medium);
}

.alliance-user-name {
    color: var(--alliance-text-secondary);
    font-size: var(--font-size-medium);
}

.alliance-logout-btn {
    background-color: var(--alliance-primary);
    color: var(--alliance-text-light);
    border: none;
    padding: var(--spacing-x-small) var(--spacing-medium);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.alliance-logout-btn:hover {
    background-color: var(--alliance-primary-dark);
}

/* Content Body */
.alliance-content-body {
    flex: 1;
    padding: var(--spacing-x-large);
    background-color: var(--alliance-content-bg);
}

.alliance-content-card {
    background-color: var(--alliance-content-light);
    border-radius: var(--border-radius-medium);
    box-shadow: var(--shadow-small);
    padding: var(--spacing-large);
    margin-bottom: var(--spacing-large);
}

/* Table Styles */
.alliance-table {
    width: 100%;
    background-color: var(--alliance-content-light);
    border-radius: var(--border-radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-small);
}

.alliance-table th {
    background-color: var(--alliance-sidebar-bg);
    color: var(--alliance-text-light);
    padding: var(--spacing-medium);
    text-align: left;
    font-weight: var(--font-weight-semibold);
}

.alliance-table td {
    padding: var(--spacing-medium);
    border-bottom: var(--border-width-thin) solid var(--alliance-content-border);
}

.alliance-table tr:hover {
    background-color: var(--alliance-content-bg);
}

/* Button Styles */
.alliance-btn-primary {
    background-color: var(--alliance-primary);
    color: var(--alliance-text-light);
    border: none;
    padding: var(--spacing-small) var(--spacing-large);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: var(--font-weight-medium);
}

.alliance-btn-primary:hover {
    background-color: var(--alliance-primary-dark);
}

.alliance-btn-secondary {
    background-color: var(--alliance-text-secondary);
    color: var(--alliance-text-light);
    border: none;
    padding: var(--spacing-small) var(--spacing-large);
    border-radius: var(--border-radius-small);
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.alliance-btn-secondary:hover {
    background-color: var(--alliance-sidebar-hover);
}

/* Form Styles */
.alliance-form-group {
    margin-bottom: var(--spacing-large);
}

.alliance-form-label {
    display: block;
    margin-bottom: var(--spacing-x-small);
    color: var(--alliance-text-primary);
    font-weight: var(--font-weight-medium);
}

.alliance-form-control {
    width: 100%;
    padding: var(--spacing-small);
    border: var(--border-width-thin) solid var(--alliance-content-border);
    border-radius: var(--border-radius-small);
    font-size: var(--font-size-medium);
    transition: border-color 0.3s ease;
}

.alliance-form-control:focus {
    outline: none;
    border-color: var(--alliance-primary);
    box-shadow: var(--shadow-focus);
}

/* Responsive Design */
@media (max-width: 768px) {
    .alliance-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .alliance-sidebar.show {
        transform: translateX(var(--spacing-none));
    }

    .alliance-main-content {
        margin-left: var(--spacing-none);
    }

    .alliance-header {
        padding: var(--spacing-medium);
    }

    .alliance-content-body {
        padding: var(--spacing-medium);
    }
}

/* Utility Classes */
.text-primary { color: var(--alliance-primary) !important; }
.text-secondary { color: var(--alliance-text-secondary) !important; }
.bg-primary { background-color: var(--alliance-primary) !important; }
.bg-light { background-color: var(--alliance-content-light) !important; }
.shadow-sm { box-shadow: var(--shadow-small) !important; }
.shadow-md { box-shadow: var(--shadow-medium) !important; }
.shadow-lg { box-shadow: var(--shadow-large) !important; }